From a3f3ffd67272e8ed21a138d6ab1a45320fdd5ec1 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Thu, 9 Jul 2026 21:39:20 +0700
Subject: [PATCH] refactor: integrate PanelCard and enhance dashboard
 components for improved layout

Refactored multiple dashboard components to utilize the new PanelCard for better organization and presentation. Updated the DashboardFramePanel, DashboardQuickLinks, and DashboardOperationsBreakdown components to streamline layouts and enhance user experience. Removed deprecated components and improved loading states in various sections, ensuring a cohesive interface throughout the application.
---
 .../analytics/monitoring-health-card.tsx      |   33 +-
 .../network-overview-analytics-card.tsx       |   84 +-
 .../app-shell-7/components/app-header.tsx     |  220 ++++
 .../app-shell-7/components/app-shell.tsx      |   43 +
 .../app-shell-7/components/app-sidebar.tsx    |   51 +
 .../blocks/app-shell-7/components/data.tsx    |  385 ++++++
 .../blocks/app-shell-7/components/logo.tsx    |   29 +
 .../app-shell-7/components/nav-main.tsx       |  122 ++
 .../app-shell-7/components/nav-user.tsx       |  202 +++
 .../app-shell-7/components/search-form.tsx    |   78 ++
 .../app-shell-7/components/sidebar-news.tsx   |  281 +++++
 .../components/sidebar-rail-toggle.tsx        |   61 +
 .../app-shell-7/components/system-stats.tsx   |  441 +++++++
 .../components/blocks/app-shell-7/page.tsx    |    5 +
 .../blocks/chart-12/components/chart.tsx      |  240 ++++
 .../blocks/chart-12/components/data.tsx       |  147 +++
 .../src/components/blocks/chart-12/page.tsx   |    9 +
 .../blocks/chart-13/components/chart.tsx      |  262 ++++
 .../blocks/chart-13/components/data.ts        |  141 +++
 .../src/components/blocks/chart-13/page.tsx   |    9 +
 .../blocks/chart-15/components/chart.tsx      |  154 +++
 .../blocks/chart-15/components/data.tsx       |   70 ++
 .../src/components/blocks/chart-15/page.tsx   |    9 +
 .../blocks/chart-27/components/chart.tsx      |  158 +++
 .../blocks/chart-27/components/data.ts        |   51 +
 .../src/components/blocks/chart-27/page.tsx   |    9 +
 .../data-grid-base-6/components/columns.tsx   |  241 ++++
 .../components/data-grid-view.tsx             |  426 +++++++
 .../data-grid-base-6/components/data.tsx      |  154 +++
 .../blocks/data-grid-base-6/page.tsx          |   15 +
 .../components/columns.tsx                    |  512 ++++++++
 .../components/data-grid-view.tsx             |  691 ++++++++++
 .../data-grid-expansion-3/components/data.tsx | 1110 +++++++++++++++++
 .../components/release-check-rail.tsx         |  212 ++++
 .../components/release-review-card.tsx        |   60 +
 .../blocks/data-grid-expansion-3/page.tsx     |   15 +
 .../components/columns.tsx                    |  426 +++++++
 .../components/data-grid-view.tsx             |  597 +++++++++
 .../data-grid-filtering-1/components/data.tsx |  263 ++++
 .../blocks/data-grid-filtering-1/page.tsx     |   15 +
 .../components/columns.tsx                    |  408 ++++++
 .../components/data-grid-view.tsx             |  660 ++++++++++
 .../data-grid-filtering-2/components/data.tsx |  384 ++++++
 .../blocks/data-grid-filtering-2/page.tsx     |   15 +
 .../components/columns.tsx                    |  685 ++++++++++
 .../components/data-grid-view.tsx             |  766 ++++++++++++
 .../data-grid-filtering-3/components/data.tsx |  738 +++++++++++
 .../components/renewal-selection-bar.tsx      |  108 ++
 .../components/renewals-command-card.tsx      |   63 +
 .../blocks/data-grid-filtering-3/page.tsx     |   33 +
 .../empty-state-11/components/empty-state.tsx |   58 +
 .../components/blocks/empty-state-11/page.tsx |   15 +
 .../empty-state-3/components/empty-state.tsx  |   55 +
 .../projects-empty-illustration.tsx           |  325 +++++
 .../components/quick-start-templates.tsx      |   54 +
 .../components/blocks/empty-state-3/page.tsx  |    9 +
 .../blocks/schedule-1/components/data.ts      |  380 ++++++
 .../schedule-1/components/event-card.tsx      |   79 ++
 .../schedule-1/components/events-list.tsx     |  135 ++
 .../components/schedule-calendar.tsx          |  190 +++
 .../blocks/schedule-1/components/schedule.tsx |   45 +
 .../src/components/blocks/schedule-1/page.tsx |    9 +
 .../components/api-integrations-grid.tsx      |  151 +++
 .../blocks/settings-14/components/columns.tsx |  222 ++++
 .../blocks/settings-14/components/data.tsx    |  345 +++++
 .../components/blocks/settings-14/page.tsx    |    9 +
 .../settings-3/components/color-picker.tsx    |   42 +
 .../blocks/settings-3/components/data.tsx     |  107 ++
 .../components/editor-preferences.tsx         |   59 +
 .../components/general-settings.tsx           |  265 ++++
 .../settings-3/components/setting-field.tsx   |   71 ++
 .../src/components/blocks/settings-3/page.tsx |    9 +
 .../blocks/stats-4/components/data.ts         |   16 +
 .../blocks/stats-4/components/stats.tsx       |  131 ++
 .../src/components/blocks/stats-4/page.tsx    |    9 +
 .../blocks/stats-6/components/data.ts         |   35 +
 .../blocks/stats-6/components/stats.tsx       |  186 +++
 .../src/components/blocks/stats-6/page.tsx    |    9 +
 .../dashboard/dashboard-frame-panel.tsx       |   33 +-
 .../dashboard/dashboard-kpi-grid.tsx          |  182 ---
 .../dashboard/dashboard-kpi-sparkline-row.tsx |  118 ++
 .../dashboard/dashboard-network-health.tsx    |   62 +-
 .../dashboard-operations-breakdown.tsx        |   45 +-
 .../dashboard/dashboard-quick-link-card.tsx   |   11 +-
 .../dashboard/dashboard-quick-links.tsx       |   28 +-
 apps/web/src/components/layout/app-shell.tsx  |  202 +--
 .../src/components/layout/command-palette.tsx |  143 +++
 .../layout/system-monitor-popover.tsx         |  213 ++++
 .../components/modules/module-kpi-cards.tsx   |   96 +-
 .../components/network/network-peers-card.tsx |   50 +-
 .../operations/operations-jobs-card.tsx       |   86 ++
 .../patterns/donut-breakdown-card.tsx         |   92 ++
 .../patterns/illustrated-empty-state.tsx      |   46 +
 apps/web/src/components/patterns/index.ts     |    6 +
 .../patterns/kpi-sparkline-card.tsx           |   77 ++
 .../components/patterns/metric-tone-styles.ts |    8 +
 .../src/components/patterns/panel-corners.tsx |   15 +
 .../patterns/projects-empty-state.tsx         |   22 +
 .../patterns/segmented-progress-card.tsx      |   70 ++
 apps/web/src/components/query-state.tsx       |    3 +
 .../data-grid/data-grid-column-filter.tsx     |    2 -
 .../data-grid/data-grid-column-header.tsx     |    2 +
 .../data-grid/data-grid-column-visibility.tsx |    2 -
 .../reui/data-grid/data-grid-pagination.tsx   |    2 +
 .../reui/data-grid/data-grid-scroll-area.tsx  |    2 -
 .../data-grid/data-grid-table-dnd-rows.tsx    |    2 +
 .../reui/data-grid/data-grid-table-dnd.tsx    |    2 -
 .../data-grid/data-grid-table-virtual.tsx     |    2 +
 .../reui/data-grid/data-grid-table.tsx        |    2 -
 .../components/reui/data-grid/data-grid.tsx   |    2 +
 apps/web/src/components/reui/filters.tsx      |    9 +-
 apps/web/src/components/reui/icon-stack.tsx   |   90 ++
 apps/web/src/components/reui/rating.tsx       |  166 +++
 .../schedule/schedule-agenda-panel.tsx        |   91 ++
 .../settings/settings-setting-field.tsx       |   57 +
 apps/web/src/components/skeletons.tsx         |   31 +-
 .../src/components/ui/svgs/anthropicBlack.tsx |   15 +
 .../src/components/ui/svgs/anthropicWhite.tsx |   16 +
 apps/web/src/components/ui/svgs/convex.tsx    |   20 +
 apps/web/src/components/ui/svgs/discord.tsx   |   12 +
 apps/web/src/components/ui/svgs/gemini.tsx    |  171 +++
 .../src/components/ui/svgs/googleCloud.tsx    |   24 +
 apps/web/src/components/ui/svgs/hono.tsx      |   17 +
 apps/web/src/components/ui/svgs/loom.tsx      |   12 +
 apps/web/src/components/ui/svgs/mintlify.tsx  |   20 +
 apps/web/src/components/ui/svgs/n8n.tsx       |   14 +
 apps/web/src/components/ui/svgs/neon.tsx      |   35 +
 apps/web/src/components/ui/svgs/openai.tsx    |    9 +
 .../web/src/components/ui/svgs/openaiDark.tsx |   12 +
 apps/web/src/components/ui/svgs/paper.tsx     |    9 +
 .../src/components/ui/svgs/planetscale.tsx    |    9 +
 .../components/ui/svgs/planetscaleDark.tsx    |   12 +
 apps/web/src/components/ui/svgs/prisma.tsx    |    9 +
 .../web/src/components/ui/svgs/prismaDark.tsx |   12 +
 apps/web/src/components/ui/svgs/remixDark.tsx |   12 +
 .../web/src/components/ui/svgs/remixLight.tsx |   12 +
 .../components/ui/svgs/resendIconBlack.tsx    |   12 +
 .../components/ui/svgs/resendIconWhite.tsx    |   12 +
 apps/web/src/components/ui/svgs/slack.tsx     |   26 +
 apps/web/src/components/ui/svgs/stripe.tsx    |   14 +
 apps/web/src/components/ui/svgs/supabase.tsx  |   45 +
 apps/web/src/components/ui/svgs/zoom.tsx      |   39 +
 apps/web/src/hooks/use-copy-to-clipboard.ts   |   37 +
 apps/web/src/hooks/use-mobile.ts              |   19 +
 apps/web/src/lib/ui-surface.ts                |   26 +
 apps/web/src/routes/_auth/dashboard.tsx       |    9 +-
 apps/web/src/routes/_auth/modules/index.tsx   |    4 +-
 apps/web/src/routes/_auth/monitoring.tsx      |  126 +-
 apps/web/src/routes/_auth/operations.tsx      |   31 +-
 apps/web/src/routes/_auth/schedule.tsx        |    3 +
 apps/web/src/routes/_auth/tenant-settings.tsx |   20 +-
 apps/web/tsconfig.tsbuildinfo                 |    2 +-
 packages/ui/src/components/chart.tsx          |    2 +
 packages/ui/src/components/dialog.tsx         |    2 -
 packages/ui/src/components/empty.tsx          |  104 ++
 packages/ui/src/components/field.tsx          |    2 -
 packages/ui/src/components/label.tsx          |    2 -
 packages/ui/src/components/progress.tsx       |    2 +
 packages/ui/src/components/switch.tsx         |   30 +
 packages/ui/src/components/tabs.tsx           |    8 +-
 packages/ui/src/components/toggle-group.tsx   |   89 ++
 161 files changed, 17496 insertions(+), 605 deletions(-)
 create mode 100644 apps/web/src/components/blocks/app-shell-7/components/app-header.tsx
 create mode 100644 apps/web/src/components/blocks/app-shell-7/components/app-shell.tsx
 create mode 100644 apps/web/src/components/blocks/app-shell-7/components/app-sidebar.tsx
 create mode 100644 apps/web/src/components/blocks/app-shell-7/components/data.tsx
 create mode 100644 apps/web/src/components/blocks/app-shell-7/components/logo.tsx
 create mode 100644 apps/web/src/components/blocks/app-shell-7/components/nav-main.tsx
 create mode 100644 apps/web/src/components/blocks/app-shell-7/components/nav-user.tsx
 create mode 100644 apps/web/src/components/blocks/app-shell-7/components/search-form.tsx
 create mode 100644 apps/web/src/components/blocks/app-shell-7/components/sidebar-news.tsx
 create mode 100644 apps/web/src/components/blocks/app-shell-7/components/sidebar-rail-toggle.tsx
 create mode 100644 apps/web/src/components/blocks/app-shell-7/components/system-stats.tsx
 create mode 100644 apps/web/src/components/blocks/app-shell-7/page.tsx
 create mode 100644 apps/web/src/components/blocks/chart-12/components/chart.tsx
 create mode 100644 apps/web/src/components/blocks/chart-12/components/data.tsx
 create mode 100644 apps/web/src/components/blocks/chart-12/page.tsx
 create mode 100644 apps/web/src/components/blocks/chart-13/components/chart.tsx
 create mode 100644 apps/web/src/components/blocks/chart-13/components/data.ts
 create mode 100644 apps/web/src/components/blocks/chart-13/page.tsx
 create mode 100644 apps/web/src/components/blocks/chart-15/components/chart.tsx
 create mode 100644 apps/web/src/components/blocks/chart-15/components/data.tsx
 create mode 100644 apps/web/src/components/blocks/chart-15/page.tsx
 create mode 100644 apps/web/src/components/blocks/chart-27/components/chart.tsx
 create mode 100644 apps/web/src/components/blocks/chart-27/components/data.ts
 create mode 100644 apps/web/src/components/blocks/chart-27/page.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-base-6/components/columns.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-base-6/components/data-grid-view.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-base-6/components/data.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-base-6/page.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-expansion-3/components/columns.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-expansion-3/components/data-grid-view.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-expansion-3/components/data.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-expansion-3/components/release-check-rail.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-expansion-3/components/release-review-card.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-expansion-3/page.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-filtering-1/components/columns.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-filtering-1/components/data-grid-view.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-filtering-1/components/data.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-filtering-1/page.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-filtering-2/components/columns.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-filtering-2/components/data-grid-view.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-filtering-2/components/data.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-filtering-2/page.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-filtering-3/components/columns.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-filtering-3/components/data-grid-view.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-filtering-3/components/data.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-filtering-3/components/renewal-selection-bar.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-filtering-3/components/renewals-command-card.tsx
 create mode 100644 apps/web/src/components/blocks/data-grid-filtering-3/page.tsx
 create mode 100644 apps/web/src/components/blocks/empty-state-11/components/empty-state.tsx
 create mode 100644 apps/web/src/components/blocks/empty-state-11/page.tsx
 create mode 100644 apps/web/src/components/blocks/empty-state-3/components/empty-state.tsx
 create mode 100644 apps/web/src/components/blocks/empty-state-3/components/projects-empty-illustration.tsx
 create mode 100644 apps/web/src/components/blocks/empty-state-3/components/quick-start-templates.tsx
 create mode 100644 apps/web/src/components/blocks/empty-state-3/page.tsx
 create mode 100644 apps/web/src/components/blocks/schedule-1/components/data.ts
 create mode 100644 apps/web/src/components/blocks/schedule-1/components/event-card.tsx
 create mode 100644 apps/web/src/components/blocks/schedule-1/components/events-list.tsx
 create mode 100644 apps/web/src/components/blocks/schedule-1/components/schedule-calendar.tsx
 create mode 100644 apps/web/src/components/blocks/schedule-1/components/schedule.tsx
 create mode 100644 apps/web/src/components/blocks/schedule-1/page.tsx
 create mode 100644 apps/web/src/components/blocks/settings-14/components/api-integrations-grid.tsx
 create mode 100644 apps/web/src/components/blocks/settings-14/components/columns.tsx
 create mode 100644 apps/web/src/components/blocks/settings-14/components/data.tsx
 create mode 100644 apps/web/src/components/blocks/settings-14/page.tsx
 create mode 100644 apps/web/src/components/blocks/settings-3/components/color-picker.tsx
 create mode 100644 apps/web/src/components/blocks/settings-3/components/data.tsx
 create mode 100644 apps/web/src/components/blocks/settings-3/components/editor-preferences.tsx
 create mode 100644 apps/web/src/components/blocks/settings-3/components/general-settings.tsx
 create mode 100644 apps/web/src/components/blocks/settings-3/components/setting-field.tsx
 create mode 100644 apps/web/src/components/blocks/settings-3/page.tsx
 create mode 100644 apps/web/src/components/blocks/stats-4/components/data.ts
 create mode 100644 apps/web/src/components/blocks/stats-4/components/stats.tsx
 create mode 100644 apps/web/src/components/blocks/stats-4/page.tsx
 create mode 100644 apps/web/src/components/blocks/stats-6/components/data.ts
 create mode 100644 apps/web/src/components/blocks/stats-6/components/stats.tsx
 create mode 100644 apps/web/src/components/blocks/stats-6/page.tsx
 delete mode 100644 apps/web/src/components/dashboard/dashboard-kpi-grid.tsx
 create mode 100644 apps/web/src/components/dashboard/dashboard-kpi-sparkline-row.tsx
 create mode 100644 apps/web/src/components/layout/command-palette.tsx
 create mode 100644 apps/web/src/components/layout/system-monitor-popover.tsx
 create mode 100644 apps/web/src/components/operations/operations-jobs-card.tsx
 create mode 100644 apps/web/src/components/patterns/donut-breakdown-card.tsx
 create mode 100644 apps/web/src/components/patterns/illustrated-empty-state.tsx
 create mode 100644 apps/web/src/components/patterns/index.ts
 create mode 100644 apps/web/src/components/patterns/kpi-sparkline-card.tsx
 create mode 100644 apps/web/src/components/patterns/metric-tone-styles.ts
 create mode 100644 apps/web/src/components/patterns/panel-corners.tsx
 create mode 100644 apps/web/src/components/patterns/projects-empty-state.tsx
 create mode 100644 apps/web/src/components/patterns/segmented-progress-card.tsx
 create mode 100644 apps/web/src/components/reui/icon-stack.tsx
 create mode 100644 apps/web/src/components/reui/rating.tsx
 create mode 100644 apps/web/src/components/schedule/schedule-agenda-panel.tsx
 create mode 100644 apps/web/src/components/settings/settings-setting-field.tsx
 create mode 100644 apps/web/src/components/ui/svgs/anthropicBlack.tsx
 create mode 100644 apps/web/src/components/ui/svgs/anthropicWhite.tsx
 create mode 100644 apps/web/src/components/ui/svgs/convex.tsx
 create mode 100644 apps/web/src/components/ui/svgs/discord.tsx
 create mode 100644 apps/web/src/components/ui/svgs/gemini.tsx
 create mode 100644 apps/web/src/components/ui/svgs/googleCloud.tsx
 create mode 100644 apps/web/src/components/ui/svgs/hono.tsx
 create mode 100644 apps/web/src/components/ui/svgs/loom.tsx
 create mode 100644 apps/web/src/components/ui/svgs/mintlify.tsx
 create mode 100644 apps/web/src/components/ui/svgs/n8n.tsx
 create mode 100644 apps/web/src/components/ui/svgs/neon.tsx
 create mode 100644 apps/web/src/components/ui/svgs/openai.tsx
 create mode 100644 apps/web/src/components/ui/svgs/openaiDark.tsx
 create mode 100644 apps/web/src/components/ui/svgs/paper.tsx
 create mode 100644 apps/web/src/components/ui/svgs/planetscale.tsx
 create mode 100644 apps/web/src/components/ui/svgs/planetscaleDark.tsx
 create mode 100644 apps/web/src/components/ui/svgs/prisma.tsx
 create mode 100644 apps/web/src/components/ui/svgs/prismaDark.tsx
 create mode 100644 apps/web/src/components/ui/svgs/remixDark.tsx
 create mode 100644 apps/web/src/components/ui/svgs/remixLight.tsx
 create mode 100644 apps/web/src/components/ui/svgs/resendIconBlack.tsx
 create mode 100644 apps/web/src/components/ui/svgs/resendIconWhite.tsx
 create mode 100644 apps/web/src/components/ui/svgs/slack.tsx
 create mode 100644 apps/web/src/components/ui/svgs/stripe.tsx
 create mode 100644 apps/web/src/components/ui/svgs/supabase.tsx
 create mode 100644 apps/web/src/components/ui/svgs/zoom.tsx
 create mode 100644 apps/web/src/hooks/use-copy-to-clipboard.ts
 create mode 100644 apps/web/src/hooks/use-mobile.ts
 create mode 100644 apps/web/src/lib/ui-surface.ts
 create mode 100644 packages/ui/src/components/empty.tsx
 create mode 100644 packages/ui/src/components/switch.tsx
 create mode 100644 packages/ui/src/components/toggle-group.tsx

diff --git a/apps/web/src/components/analytics/monitoring-health-card.tsx b/apps/web/src/components/analytics/monitoring-health-card.tsx
index aac7c89..c884d7e 100644
--- a/apps/web/src/components/analytics/monitoring-health-card.tsx
+++ b/apps/web/src/components/analytics/monitoring-health-card.tsx
@@ -1,5 +1,4 @@
-import { AnalyticsCardShell } from '@/components/analytics/analytics-card-shell'
-import { ChartDonutMetric } from '@/components/analytics/chart-donut-metric'
+import { DonutBreakdownCard } from '@/components/patterns/donut-breakdown-card'
 import { readinessBreakdown } from '@/lib/metrics'
 import type { ReadyStatus } from '@/queries/monitoring'
 
@@ -13,21 +12,25 @@ export function MonitoringHealthCard({
   loading?: boolean
 }) {
   const slices = readinessBreakdown(ready, healthOk)
-  const total = slices.reduce((sum, slice) => sum + slice.count, 0)
+
+  if (loading) {
+    return (
+      <DonutBreakdownCard
+        title="Доступность системы"
+        description="Проверки живучести и готовности"
+        slices={[]}
+        centerLabel="Проверки"
+      />
+    )
+  }
 
   return (
-    <AnalyticsCardShell
+    <DonutBreakdownCard
       title="Доступность системы"
-      description="Проверки живучести и готовности"
-      info="Диаграмма отражает результат GET /v1/health и проверок из GET /v1/ready."
-    >
-      {loading ? (
-        <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
-          Загрузка…
-        </div>
-      ) : (
-        <ChartDonutMetric slices={slices} centerLabel="Проверки" centerValue={total} />
-      )}
-    </AnalyticsCardShell>
+      description="GET /v1/health · GET /v1/ready"
+      slices={slices}
+      centerLabel="Проверки"
+      badge={healthOk ? 'API OK' : undefined}
+    />
   )
 }
diff --git a/apps/web/src/components/analytics/network-overview-analytics-card.tsx b/apps/web/src/components/analytics/network-overview-analytics-card.tsx
index 51968e5..868074d 100644
--- a/apps/web/src/components/analytics/network-overview-analytics-card.tsx
+++ b/apps/web/src/components/analytics/network-overview-analytics-card.tsx
@@ -1,6 +1,5 @@
-import { AnalyticsCardShell } from '@/components/analytics/analytics-card-shell'
-import { AnalyticsKpiRow } from '@/components/analytics/analytics-kpi-row'
-import { ChartDonutMetric } from '@/components/analytics/chart-donut-metric'
+import { DonutBreakdownCard } from '@/components/patterns/donut-breakdown-card'
+import { SegmentedProgressCard } from '@/components/patterns/segmented-progress-card'
 import { peerSessionBreakdown } from '@/lib/metrics'
 import { aggregateNetworkMetrics } from '@/queries/overview'
 import type { PeerRow, SpeakerRow } from '@/types/api'
@@ -16,51 +15,44 @@ export function NetworkOverviewAnalyticsCard({
 }) {
   const net = aggregateNetworkMetrics(peers, speakers)
   const slices = peerSessionBreakdown(peers)
-  const total = slices.reduce((sum, slice) => sum + slice.count, 0)
+  const speakersPct =
+    net.speakersTotal > 0 ? Math.round((net.speakersOnline / net.speakersTotal) * 100) : 0
+
+  if (loading) {
+    return (
+      <DonutBreakdownCard
+        title="Сводка BGP"
+        description="Установленные сессии и спикеры"
+        slices={[]}
+        centerLabel="Пиры"
+      />
+    )
+  }
 
   return (
-    <AnalyticsCardShell
-      title="Сводка BGP"
-      description="Установленные сессии, доступность спикеров и расхождения по live-данным"
-      info="Снимок текущего состояния пиров и спикеров."
-    >
-      <AnalyticsKpiRow
-        items={[
-          {
-            label: 'Пиры с установленной сессией',
-            value: loading ? '—' : `${net.peersEstablished}/${net.peersEnabled}`,
-            delta: {
-              direction: net.peersMismatch > 0 ? 'down' : 'up',
-              label: net.peersMismatch > 0 ? `${net.peersMismatch} расхождений` : 'сессии в норме',
-              tone: net.peersMismatch > 0 ? 'warning' : 'success',
-            },
-          },
-          {
-            label: 'Спикеры в сети',
-            value: loading ? '—' : `${net.speakersOnline}/${net.speakersTotal}`,
-            delta: {
-              direction: net.speakersOnline < net.speakersTotal ? 'down' : 'up',
-              label:
-                net.speakersOnline < net.speakersTotal
-                  ? `${net.speakersTotal - net.speakersOnline} не в сети`
-                  : 'все в сети',
-              tone: net.speakersOnline < net.speakersTotal ? 'warning' : 'success',
-            },
-          },
-          {
-            label: 'Пиры всего',
-            value: loading ? '—' : String(net.peersTotal),
-            delta: { direction: 'neutral', label: 'в каталоге', tone: 'muted' },
-          },
-        ]}
+    <div className="grid gap-4 lg:grid-cols-2">
+      <DonutBreakdownCard
+        title="Сводка BGP"
+        description="Распределение состояний пиров"
+        slices={slices}
+        centerLabel="Пиры"
+        badge={net.peersMismatch > 0 ? `${net.peersMismatch} расхождений` : 'в норме'}
       />
-      {loading ? (
-        <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
-          Загрузка…
-        </div>
-      ) : (
-        <ChartDonutMetric slices={slices} centerLabel="Пиры" centerValue={total} />
-      )}
-    </AnalyticsCardShell>
+      <SegmentedProgressCard
+        title="Спикеры"
+        description="Доступность live-агентов"
+        primary={{
+          value: `${net.speakersOnline}/${net.speakersTotal}`,
+          label: 'Online',
+          percent: speakersPct,
+        }}
+        secondary={{
+          value: net.speakersTotal - net.speakersOnline,
+          label: 'Offline',
+          percent: 100 - speakersPct,
+        }}
+        footer={`Пиры Established: ${net.peersEstablished}/${net.peersEnabled}`}
+      />
+    </div>
   )
 }
diff --git a/apps/web/src/components/blocks/app-shell-7/components/app-header.tsx b/apps/web/src/components/blocks/app-shell-7/components/app-header.tsx
new file mode 100644
index 0000000..3d2d858
--- /dev/null
+++ b/apps/web/src/components/blocks/app-shell-7/components/app-header.tsx
@@ -0,0 +1,220 @@
+"use client"
+
+import { useState } from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@evobgp/ui/components/breadcrumb"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+import { SidebarTrigger } from "@evobgp/ui/components/sidebar"
+import { APPS, ENVIRONMENTS, WORKSPACES } from "./data"
+import { Logo } from "./logo"
+import { SystemStats } from "./system-stats"
+import { ChevronsUpDownIcon, CheckIcon, PlusIcon } from "lucide-react"
+
+// ── Org Switcher ──
+
+function OrgSwitcher() {
+  const [activeOrg, setActiveOrg] = useState(WORKSPACES[0])
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button variant="ghost" size="sm" className="text-foreground" />
+        }
+      >
+        <activeOrg.Logo className="size-3" />
+        <span className="sr-only sm:not-sr-only">{activeOrg.name}</span>
+        <ChevronsUpDownIcon className="size-3.5 opacity-60" aria-hidden="true" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" sideOffset={8} className="w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Organizations</DropdownMenuLabel>
+          <DropdownMenuGroup>
+            {WORKSPACES.map((ws) => (
+              <DropdownMenuItem
+                key={ws.id}
+                onClick={() => setActiveOrg(ws)}
+                className={cn(activeOrg.id === ws.id && "bg-accent")}
+              >
+                <ws.Logo className="size-5 shrink-0" />
+                <div className="flex min-w-0 flex-col">
+                  <span className="truncate text-sm">{ws.name}</span>
+                  <span className="text-muted-foreground truncate text-xs">
+                    {ws.tier}
+                  </span>
+                </div>
+                {activeOrg.id === ws.id && (
+                  <CheckIcon className="text-primary ml-auto size-4" aria-hidden="true" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <PlusIcon aria-hidden="true" />
+            Create Organization
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+// ── App Switcher ──
+
+function AppSwitcher() {
+  const [activeApp, setActiveApp] = useState(
+    APPS.find((a) => a.isActive) ?? APPS[0]
+  )
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="sm"
+            type="button"
+            className="text-foreground"
+          />
+        }
+      >
+        <span className="hidden sm:inline">{activeApp.name}</span>
+        <span className="sm:hidden">{activeApp.name.split(" ")[0]}</span>
+        <ChevronsUpDownIcon className="size-3.5 opacity-60" aria-hidden="true" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" sideOffset={8} className="w-48">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Applications</DropdownMenuLabel>
+          <DropdownMenuGroup>
+            {APPS.map((app) => (
+              <DropdownMenuItem
+                key={app.id}
+                onClick={() => setActiveApp(app)}
+                className={cn(activeApp.id === app.id && "bg-accent")}
+              >
+                {app.icon}
+                {app.name}
+                {activeApp.id === app.id && (
+                  <CheckIcon className="text-primary ml-auto size-4" aria-hidden="true" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <PlusIcon aria-hidden="true" />
+            Create Application
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+// ── Environment Switcher ──
+
+function EnvironmentSwitcher() {
+  const [activeEnv, setActiveEnv] = useState(
+    ENVIRONMENTS.find((e) => e.isActive) ?? ENVIRONMENTS[0]
+  )
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="sm"
+            type="button"
+            className="text-foreground"
+          />
+        }
+      >
+        <span>{activeEnv.name}</span>
+        <ChevronsUpDownIcon className="size-3.5 opacity-60" aria-hidden="true" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" sideOffset={8} className="w-48">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Environments</DropdownMenuLabel>
+          <DropdownMenuGroup>
+            {ENVIRONMENTS.map((env) => (
+              <DropdownMenuItem
+                key={env.id}
+                onClick={() => setActiveEnv(env)}
+                className={cn(activeEnv.id === env.id && "bg-accent")}
+              >
+                {env.icon}
+                {env.name}
+                {activeEnv.id === env.id && (
+                  <CheckIcon className="text-primary ml-auto size-4" aria-hidden="true" />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuGroup>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+// ── Site Header ──
+
+export function AppHeader() {
+  return (
+    <header className="bg-background sticky top-0 z-50 flex w-full items-center border-b">
+      <div className="flex h-(--header-height) w-full items-center gap-2 px-4">
+        {/* Mobile sidebar trigger */}
+        <SidebarTrigger className="md:hidden" />
+
+        {/* Logo */}
+        <div className="hidden items-center pl-0.5 md:flex">
+          <Logo />
+        </div>
+
+        <Breadcrumb>
+          <BreadcrumbList className="gap-1">
+            <BreadcrumbItem>
+              <OrgSwitcher />
+            </BreadcrumbItem>
+            <BreadcrumbSeparator className="text-xs opacity-60">
+              /
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+              <AppSwitcher />
+            </BreadcrumbItem>
+            <BreadcrumbSeparator className="text-xs opacity-60">
+              /
+            </BreadcrumbSeparator>
+            <BreadcrumbItem>
+              <EnvironmentSwitcher />
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+
+        {/* Right side */}
+        <div className="ml-auto flex items-center gap-1">
+          <SystemStats />
+        </div>
+      </div>
+    </header>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/app-shell-7/components/app-shell.tsx b/apps/web/src/components/blocks/app-shell-7/components/app-shell.tsx
new file mode 100644
index 0000000..672e1ac
--- /dev/null
+++ b/apps/web/src/components/blocks/app-shell-7/components/app-shell.tsx
@@ -0,0 +1,43 @@
+import { type CSSProperties } from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { SidebarInset, SidebarProvider } from "@evobgp/ui/components/sidebar"
+
+import { AppHeader } from "./app-header"
+import { AppSidebar } from "./app-sidebar"
+
+export function AppShell() {
+  return (
+    <SidebarProvider
+      className={cn(
+        "flex flex-col",
+        "[--sidebar:var(--color-background)]",
+        "[--sidebar-accent:color-mix(in_oklab,var(--color-primary)_5%,transparent)]",
+        "[--sidebar-accent-foreground:var(--color-primary)]"
+      )}
+      style={
+        {
+          "--sidebar-width": "260px",
+          "--sidebar-width-icon": "62px",
+          "--header-height": "50px",
+        } as CSSProperties
+      }
+    >
+      {/* Header */}
+      <AppHeader />
+      <div className="flex flex-1">
+        <AppSidebar />
+        <SidebarInset>
+          <div className="flex flex-1 flex-col gap-4 p-4">
+            <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+              <div className="border-border/40 bg-muted/40 aspect-video rounded-lg border border-dashed" />
+              <div className="border-border/40 bg-muted/40 aspect-video rounded-lg border border-dashed" />
+              <div className="border-border/40 bg-muted/40 aspect-video rounded-lg border border-dashed" />
+            </div>
+            <div className="border-border/40 bg-muted/40 min-h-[1000px] flex-1 rounded-lg border border-dashed" />
+          </div>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/app-shell-7/components/app-sidebar.tsx b/apps/web/src/components/blocks/app-shell-7/components/app-sidebar.tsx
new file mode 100644
index 0000000..13ef614
--- /dev/null
+++ b/apps/web/src/components/blocks/app-shell-7/components/app-sidebar.tsx
@@ -0,0 +1,51 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  useSidebar,
+} from "@evobgp/ui/components/sidebar"
+
+import { NEWS_ARTICLES } from "./data"
+import { NavMain } from "./nav-main"
+import { NavUser } from "./nav-user"
+import { SearchForm } from "./search-form"
+import { SidebarNews } from "./sidebar-news"
+import { SidebarRailToggle } from "./sidebar-rail-toggle"
+
+// ── App Sidebar ──
+
+export function AppSidebar() {
+  const { isMobile } = useSidebar()
+
+  return (
+    <Sidebar
+      collapsible="icon"
+      className="top-(--header-height) h-[calc(100svh-var(--header-height))]!"
+    >
+      {/* Header */}
+      <SidebarHeader className="flex flex-row items-center px-4 in-data-[state=collapsed]:flex-col in-data-[state=collapsed]:items-start in-data-[state=collapsed]:justify-center">
+        <div className="w-full flex-1 pt-2">
+          <SearchForm />
+        </div>
+      </SidebarHeader>
+
+      {/* Sidebar */}
+      <SidebarContent className="gap-2 px-2">
+        <NavMain />
+
+        <div className="mt-auto">
+          <SidebarNews articles={NEWS_ARTICLES} />
+        </div>
+      </SidebarContent>
+
+      {/* Footer */}
+      {/* customize: mt-2 keeps a fixed gap above the footer so the news card never butts against it when the viewport shrinks and the content scrolls */}
+      <SidebarFooter className="mt-2 px-4">
+        <NavUser />
+      </SidebarFooter>
+
+      {!isMobile && <SidebarRailToggle />}
+    </Sidebar>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/app-shell-7/components/data.tsx b/apps/web/src/components/blocks/app-shell-7/components/data.tsx
new file mode 100644
index 0000000..f6b9990
--- /dev/null
+++ b/apps/web/src/components/blocks/app-shell-7/components/data.tsx
@@ -0,0 +1,385 @@
+import { type ComponentType, type ReactNode } from "react"
+import { GlobeIcon, ShieldIcon, SmartphoneIcon, RocketIcon, FlaskConicalIcon, CodeIcon, LayoutDashboardIcon, UsersIcon, Building2Icon, ShieldCheckIcon, WebhookIcon, KeyRoundIcon, CpuIcon, MonitorIcon, MemoryStickIcon, WifiIcon } from "lucide-react"
+
+// ── Types ──
+
+export type NavChild = {
+  id: string
+  label: string
+  isActive?: boolean
+}
+
+export type NavItem = {
+  id: string
+  label: string
+  icon: ReactNode
+  badge?: string | number
+  isActive?: boolean
+  children?: NavChild[]
+}
+
+export type Workspace = {
+  id: string
+  name: string
+  tier: string
+  Logo: ComponentType<{ className?: string }>
+}
+
+export type App = {
+  id: string
+  name: string
+  icon: ReactNode
+  isActive?: boolean
+}
+
+export type Environment = {
+  id: string
+  name: string
+  icon: ReactNode
+  isActive?: boolean
+}
+
+export type NewsArticle = {
+  href: string
+  title: string
+  summary: string
+  image: string
+}
+
+export type ResourceMetric = {
+  id: string
+  label: string
+  unit: string
+  icon: ReactNode
+  seedRange: [number, number]
+  color: string
+  spikeThreshold: number
+}
+
+export type Agent = {
+  id: string
+  name: string
+  memoryMb: number
+  color: string
+}
+
+// ── Logos ──
+
+// Acme: indigo → violet → fuchsia diagonal sweep
+function AcmeLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 28 28"
+      fill="none"
+      className={className}
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient
+          id="ws-acme"
+          x1="0"
+          y1="0"
+          x2="28"
+          y2="28"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0%" stopColor="#4f46e5" />
+          <stop offset="35%" stopColor="#7c3aed" />
+          <stop offset="70%" stopColor="#a21caf" />
+          <stop offset="100%" stopColor="#db2777" />
+        </linearGradient>
+      </defs>
+      <circle cx="14" cy="14" r="14" fill="url(#ws-acme)" />
+    </svg>
+  )
+}
+
+// Starter: rose → orange → amber → lime horizontal sweep
+function StarterLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 28 28"
+      fill="none"
+      className={className}
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient
+          id="ws-starter"
+          x1="0"
+          y1="0"
+          x2="28"
+          y2="28"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0%" stopColor="#f43f5e" />
+          <stop offset="33%" stopColor="#f97316" />
+          <stop offset="66%" stopColor="#eab308" />
+          <stop offset="100%" stopColor="#84cc16" />
+        </linearGradient>
+      </defs>
+      <circle cx="14" cy="14" r="14" fill="url(#ws-starter)" />
+    </svg>
+  )
+}
+
+// Enterprise: sky → blue → indigo vertical sweep
+function EnterpriseLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 28 28"
+      fill="none"
+      className={className}
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient
+          id="ws-enterprise"
+          x1="0"
+          y1="0"
+          x2="28"
+          y2="28"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0%" stopColor="#38bdf8" />
+          <stop offset="35%" stopColor="#3b82f6" />
+          <stop offset="70%" stopColor="#6366f1" />
+          <stop offset="100%" stopColor="#14b8a6" />
+        </linearGradient>
+      </defs>
+      <circle cx="14" cy="14" r="14" fill="url(#ws-enterprise)" />
+    </svg>
+  )
+}
+
+// ── Data ──
+
+export const USER = {
+  name: "Nick Bold",
+  email: "nick@reui.io",
+  initials: "NB",
+  avatar:
+    "https://images.unsplash.com/photo-1543299750-19d1d6297053?w=96&h=96&dpr=2&q=80",
+} as const
+
+export const WORKSPACES: Workspace[] = [
+  { id: "acme", name: "Acme Inc", tier: "Pro", Logo: AcmeLogo },
+  { id: "starter", name: "Starter Kit", tier: "Free", Logo: StarterLogo },
+  {
+    id: "enterprise",
+    name: "Enterprise",
+    tier: "Enterprise",
+    Logo: EnterpriseLogo,
+  },
+]
+
+export const APPS: App[] = [
+  {
+    id: "web-app",
+    name: "Web App",
+    isActive: true,
+    icon: (
+      <GlobeIcon className="size-4" aria-hidden="true" />
+    ),
+  },
+  {
+    id: "admin",
+    name: "Admin Panel",
+    icon: (
+      <ShieldIcon className="size-4" aria-hidden="true" />
+    ),
+  },
+  {
+    id: "mobile",
+    name: "Mobile App",
+    icon: (
+      <SmartphoneIcon className="size-4" aria-hidden="true" />
+    ),
+  },
+]
+
+export const ENVIRONMENTS: Environment[] = [
+  {
+    id: "production",
+    name: "Production",
+    isActive: true,
+    icon: (
+      <RocketIcon className="size-4" aria-hidden="true" />
+    ),
+  },
+  {
+    id: "staging",
+    name: "Staging",
+    icon: (
+      <FlaskConicalIcon className="size-4" aria-hidden="true" />
+    ),
+  },
+  {
+    id: "development",
+    name: "Development",
+    icon: (
+      <CodeIcon className="size-4" aria-hidden="true" />
+    ),
+  },
+]
+
+export const NAV_MAIN: NavItem[] = [
+  {
+    id: "overview",
+    label: "Overview",
+    isActive: true,
+    icon: (
+      <LayoutDashboardIcon aria-hidden="true" />
+    ),
+  },
+  {
+    id: "users",
+    label: "Users",
+    icon: (
+      <UsersIcon aria-hidden="true" />
+    ),
+    children: [
+      { id: "all-users", label: "All Users" },
+      { id: "invitations", label: "Invitations" },
+      { id: "roles", label: "Roles", isActive: true },
+    ],
+  },
+  {
+    id: "organizations",
+    label: "Organizations",
+    icon: (
+      <Building2Icon aria-hidden="true" />
+    ),
+    children: [
+      { id: "org-list", label: "All Organizations" },
+      { id: "org-settings", label: "Settings" },
+    ],
+  },
+  {
+    id: "security",
+    label: "Security",
+    icon: (
+      <ShieldCheckIcon aria-hidden="true" />
+    ),
+    children: [
+      { id: "attack-protection", label: "Attack Protection" },
+      { id: "fraud", label: "Fraud Detection" },
+      { id: "audit-log", label: "Audit Log" },
+    ],
+  },
+  {
+    id: "webhooks",
+    label: "Webhooks",
+    icon: (
+      <WebhookIcon aria-hidden="true" />
+    ),
+  },
+  {
+    id: "api-keys",
+    label: "API Keys",
+    icon: (
+      <KeyRoundIcon aria-hidden="true" />
+    ),
+  },
+]
+
+export const RESOURCE_METRICS: ResourceMetric[] = [
+  {
+    id: "cpu",
+    label: "CPU",
+    unit: "%",
+    icon: (
+      <CpuIcon className="size-3 shrink-0 transition-colors duration-300" aria-hidden="true" />
+    ),
+    seedRange: [20, 65],
+    color: "var(--color-blue-500)",
+    spikeThreshold: 60,
+  },
+  {
+    id: "gpu",
+    label: "GPU",
+    unit: "%",
+    icon: (
+      <MonitorIcon className="size-3 shrink-0 transition-colors duration-300" aria-hidden="true" />
+    ),
+    seedRange: [10, 50],
+    color: "var(--color-emerald-500)",
+    spikeThreshold: 45,
+  },
+  {
+    id: "memory",
+    label: "Memory",
+    unit: "GB",
+    icon: (
+      <MemoryStickIcon className="size-3 shrink-0 transition-colors duration-300" aria-hidden="true" />
+    ),
+    seedRange: [4, 12],
+    color: "var(--color-amber-500)",
+    spikeThreshold: 12,
+  },
+  {
+    id: "network",
+    label: "Network",
+    unit: "Mbps",
+    icon: (
+      <WifiIcon className="size-3 shrink-0 transition-colors duration-300" aria-hidden="true" />
+    ),
+    seedRange: [5, 80],
+    color: "var(--color-violet-500)",
+    spikeThreshold: 70,
+  },
+]
+
+export const AGENTS: Agent[] = [
+  {
+    id: "ingest",
+    name: "Ingest Worker",
+    memoryMb: 256,
+    color: "var(--color-indigo-500)",
+  },
+  {
+    id: "transform",
+    name: "Transform Pipeline",
+    memoryMb: 512,
+    color: "var(--color-purple-500)",
+  },
+  {
+    id: "query",
+    name: "Query Engine",
+    memoryMb: 384,
+    color: "var(--color-sky-500)",
+  },
+  {
+    id: "export",
+    name: "Export Service",
+    memoryMb: 128,
+    color: "var(--color-teal-500)",
+  },
+]
+
+export const NEWS_ARTICLES: NewsArticle[] = [
+  {
+    href: "https://pro.reui.io/changelog?v=2.0.3",
+    title: "Multi-theme support is here",
+    summary:
+      "Switch between Vega, Nova, Maia, Lyra, and Mira themes across all components.",
+    image:
+      "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=225&fit=crop&q=80",
+  },
+  {
+    href: "https://pro.reui.io/changelog?v=2.0.2",
+    title: "Icon library v2 released",
+    summary:
+      "Five icon libraries unified under a single API with automatic mapping.",
+    image:
+      "https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=400&h=225&fit=crop&q=80",
+  },
+  {
+    href: "https://pro.reui.io/changelog?v=2.0.1",
+    title: "Sidebar layout patterns guide",
+    summary:
+      "Learn best practices for building responsive sidebar layouts with collapsible navigation.",
+    image:
+      "https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=400&h=225&fit=crop&q=80",
+  },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/app-shell-7/components/logo.tsx b/apps/web/src/components/blocks/app-shell-7/components/logo.tsx
new file mode 100644
index 0000000..cf7b844
--- /dev/null
+++ b/apps/web/src/components/blocks/app-shell-7/components/logo.tsx
@@ -0,0 +1,29 @@
+import { Item, ItemMedia } from "@evobgp/ui/components/item"
+
+export function Logo() {
+  return (
+    <Item
+      className="bg-primary text-primary-foreground flex size-7 shrink-0 items-center justify-center p-0"
+      aria-hidden="true"
+    >
+      <ItemMedia variant="icon" className="size-auto">
+        <svg
+          width="50"
+          height="50"
+          viewBox="25.668 25.1352 49.6644 50"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="size-3.5"
+        >
+          <circle cx="70.634" cy="29.8334" r="4.69799" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M25.668 57.0144V29.8332C25.668 27.2386 27.7713 25.1352 30.366 25.1352C32.9606 25.1352 35.0639 27.2386 35.0639 29.8332V57.0144C35.0639 61.833 38.9702 65.7392 43.7888 65.7392H57.2116C62.0302 65.7392 65.9364 61.833 65.9364 57.0144V43.7258C65.9364 41.1312 68.0398 39.0278 70.6344 39.0278C73.229 39.0278 75.3324 41.1312 75.3324 43.7258V57.0144C75.3324 67.0222 67.2194 75.1352 57.2116 75.1352H43.7888C33.7809 75.1352 25.668 67.0222 25.668 57.0144Z"
+            fill="currentColor"
+          />
+        </svg>
+      </ItemMedia>
+    </Item>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/app-shell-7/components/nav-main.tsx b/apps/web/src/components/blocks/app-shell-7/components/nav-main.tsx
new file mode 100644
index 0000000..ca895a1
--- /dev/null
+++ b/apps/web/src/components/blocks/app-shell-7/components/nav-main.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import { useState } from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@evobgp/ui/components/sidebar"
+import { NAV_MAIN, type NavChild, type NavItem } from "./data"
+import { ChevronRightIcon } from "lucide-react"
+
+// ── Nav Sub Items ──
+
+function NavSubItem({ child }: { child: NavChild }) {
+  return (
+    <SidebarMenuSubItem>
+      {/* Sidebar */}
+      <SidebarMenuSubButton render={<a href="#" />} isActive={child.isActive}>
+        {child.label}
+      </SidebarMenuSubButton>
+    </SidebarMenuSubItem>
+  )
+}
+
+function NavSubMenu({ id, items }: { id: string; items: NavChild[] }) {
+  return (
+    <SidebarMenuSub id={`subnav-${id}`}>
+      {items.map((child) => (
+        <NavSubItem key={child.id} child={child} />
+      ))}
+    </SidebarMenuSub>
+  )
+}
+
+// ── Collapsible Nav Item ──
+
+export function CollapsibleNavItem({
+  item,
+}: {
+  item: NavItem & { children: NavChild[] }
+}) {
+  const [open, setOpen] = useState(() => item.children.some((c) => c.isActive))
+
+  return (
+    <SidebarMenuItem>
+      {/* Sidebar */}
+      <SidebarMenuButton
+        tooltip={item.label}
+        isActive={item.isActive}
+        onClick={() => setOpen((prev) => !prev)}
+        aria-expanded={open}
+        aria-controls={`subnav-${item.id}`}
+      >
+        {item.icon}
+        <span>{item.label}</span>
+        <ChevronRightIcon className={cn(
+                          "ml-auto size-4 shrink-0 opacity-60 transition-transform duration-200 group-data-[collapsible=icon]:hidden",
+                          open && "rotate-90"
+                        )} aria-hidden="true" />
+      </SidebarMenuButton>
+
+      {open && <NavSubMenu id={item.id} items={item.children} />}
+    </SidebarMenuItem>
+  )
+}
+
+// ── Leaf Nav Item ──
+
+export function LeafNavItem({ item }: { item: NavItem }) {
+  return (
+    <SidebarMenuItem>
+      {/* Sidebar */}
+      <SidebarMenuButton
+        tooltip={item.label}
+        isActive={item.isActive}
+        render={<a href="#" />}
+      >
+        {item.icon}
+        <span>{item.label}</span>
+        {item.badge !== undefined && (
+          <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
+        )}
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  )
+}
+
+// ── Nav Main ──
+
+export function NavMain() {
+  return (
+    <SidebarGroup>
+      {/* Sidebar */}
+      <SidebarGroupLabel className="in-data-[state=collapsed]:hidden">
+        Platform
+      </SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu className="gap-0.25">
+          {NAV_MAIN.map((item) =>
+            item.children ? (
+              <CollapsibleNavItem
+                key={item.id}
+                item={item as NavItem & { children: NavChild[] }}
+              />
+            ) : (
+              <LeafNavItem key={item.id} item={item} />
+            )
+          )}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/app-shell-7/components/nav-user.tsx b/apps/web/src/components/blocks/app-shell-7/components/nav-user.tsx
new file mode 100644
index 0000000..65d1ba6
--- /dev/null
+++ b/apps/web/src/components/blocks/app-shell-7/components/nav-user.tsx
@@ -0,0 +1,202 @@
+import { useEffect, useState } from "react"
+import { useTheme } from "next-themes"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@evobgp/ui/components/avatar"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@evobgp/ui/components/sidebar"
+import { USER } from "./data"
+import { SunIcon, MoonIcon, MonitorIcon, ChevronsUpDownIcon, UserIcon, SettingsIcon, InboxIcon, PaletteIcon, LogOutIcon } from "lucide-react"
+
+// ── Theme Toggle ──
+
+const THEMES = [
+  {
+    value: "light",
+    label: "Light",
+    icon: (
+      <SunIcon className="size-3.5" aria-hidden="true" />
+    ),
+  },
+  {
+    value: "dark",
+    label: "Dark",
+    icon: (
+      <MoonIcon className="size-3.5" aria-hidden="true" />
+    ),
+  },
+  {
+    value: "system",
+    label: "System",
+    icon: (
+      <MonitorIcon className="size-3.5" aria-hidden="true" />
+    ),
+  },
+]
+
+function ThemeSegmentedToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const currentTheme = mounted ? (theme ?? "system") : "system"
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label="Theme"
+      className="bg-muted/60 inline-flex items-center gap-0.5 rounded-full p-0.5"
+    >
+      {THEMES.map(({ value, label, icon }) => {
+        const isActive = currentTheme === value
+        return (
+          <Button
+            key={value}
+            type="button"
+            role="radio"
+            aria-checked={isActive}
+            aria-label={label}
+            variant="ghost"
+            size="icon-xs"
+            onClick={() => setTheme(value)}
+            className={cn(
+              "rounded-full",
+              isActive
+                ? "bg-background text-foreground shadow-sm"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {icon}
+          </Button>
+        )
+      })}
+    </div>
+  )
+}
+
+// ── Nav User ──
+
+export function NavUser() {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarMenu>
+      {/* Sidebar */}
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton
+                size="lg"
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:justify-center"
+              />
+            }
+          >
+            <Avatar className="size-7 rounded-md">
+              <AvatarImage src={USER.avatar} alt={USER.name} />
+              <AvatarFallback className="bg-primary text-primary-foreground rounded-md text-xs font-semibold">
+                {USER.initials}
+              </AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
+              <span className="truncate font-medium">{USER.name}</span>
+              <span className="text-muted-foreground truncate text-xs">
+                {USER.email}
+              </span>
+            </div>
+            <ChevronsUpDownIcon className="ml-auto size-4 opacity-50 group-data-[collapsible=icon]:hidden" aria-hidden="true" />
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+            className="w-56"
+          >
+            <DropdownMenuGroup>
+              <DropdownMenuLabel className="flex items-center gap-2.5 py-2">
+                <Avatar className="size-8 rounded-md">
+                  <AvatarImage src={USER.avatar} alt={USER.name} />
+                  <AvatarFallback className="bg-primary text-primary-foreground rounded-md text-xs font-semibold">
+                    {USER.initials}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex min-w-0 flex-col">
+                  <span className="text-foreground text-sm font-semibold">
+                    {USER.name}
+                  </span>
+                  <span className="text-muted-foreground truncate text-xs font-normal">
+                    {USER.email}
+                  </span>
+                </div>
+              </DropdownMenuLabel>
+
+              <DropdownMenuSeparator />
+
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <UserIcon aria-hidden="true" />
+                  Profile
+                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <SettingsIcon aria-hidden="true" />
+                  Preferences
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <InboxIcon aria-hidden="true" />
+                  Manage Accounts
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+
+              <DropdownMenuSeparator />
+
+              <DropdownMenuGroup>
+                <DropdownMenuItem
+                  className="cursor-default focus:bg-transparent!"
+                  onSelect={(e) => e.preventDefault()}
+                >
+                  <PaletteIcon aria-hidden="true" />
+                  Theme
+                  <div className="ml-auto">
+                    <ThemeSegmentedToggle />
+                  </div>
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+
+              <DropdownMenuSeparator />
+
+              <DropdownMenuItem>
+                <LogOutIcon aria-hidden="true" />
+                Sign Out
+                <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/app-shell-7/components/search-form.tsx b/apps/web/src/components/blocks/app-shell-7/components/search-form.tsx
new file mode 100644
index 0000000..4b49b9f
--- /dev/null
+++ b/apps/web/src/components/blocks/app-shell-7/components/search-form.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { useEffect, useId, useState, type ComponentProps } from "react"
+
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@evobgp/ui/components/dialog"
+import { Input } from "@evobgp/ui/components/input"
+import { Kbd } from "@evobgp/ui/components/kbd"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+} from "@evobgp/ui/components/sidebar"
+import { SearchIcon } from "lucide-react"
+
+export function SearchForm({ ...props }: ComponentProps<"form">) {
+  const [open, setOpen] = useState(false)
+  const searchInputId = useId()
+
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key.toLowerCase() === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault()
+        setOpen(true)
+      }
+    }
+
+    window.addEventListener("keydown", onKeyDown)
+    return () => window.removeEventListener("keydown", onKeyDown)
+  }, [])
+
+  return (
+    <form {...props}>
+      {/* Sidebar */}
+      <SidebarGroup className="p-0">
+        <SidebarGroupContent className="relative">
+          <Button
+            id="search"
+            type="button"
+            variant="outline"
+            className="hover:bg-background h-8 w-full justify-start pl-7 font-normal transition-[width] duration-200 ease-linear in-data-[state=collapsed]:w-8! in-data-[state=collapsed]:pl-4! in-data-[state=collapsed]:text-transparent"
+            onClick={() => setOpen(true)}
+          >
+            Search...
+          </Button>
+          <SearchIcon aria-hidden="true" className="pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 opacity-50 select-none" />
+          <Kbd className="absolute top-1/2 right-2 -translate-y-1/2 in-data-[state=collapsed]:hidden">
+            ⌘K
+          </Kbd>
+        </SidebarGroupContent>
+      </SidebarGroup>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogHeader className="sr-only">
+          <DialogTitle>Search</DialogTitle>
+          <DialogDescription>Search your workspace content.</DialogDescription>
+        </DialogHeader>
+        <DialogContent className="max-w-md px-4 py-2 **:data-[slot=dialog-close]:top-1/2 **:data-[slot=dialog-close]:right-3 **:data-[slot=dialog-close]:-translate-y-1/2 **:data-[slot=dialog-close]:opacity-60">
+          <div className="relative flex items-center gap-3">
+            <SearchIcon aria-hidden="true" className="pointer-events-none size-4 opacity-60 select-none" />
+            <Input
+              id={searchInputId}
+              className="h-10 border-none p-0 shadow-none outline-none focus-visible:ring-0"
+              autoFocus
+              placeholder="Type to search..."
+              aria-label="Search"
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
+    </form>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/app-shell-7/components/sidebar-news.tsx b/apps/web/src/components/blocks/app-shell-7/components/sidebar-news.tsx
new file mode 100644
index 0000000..541c189
--- /dev/null
+++ b/apps/web/src/components/blocks/app-shell-7/components/sidebar-news.tsx
@@ -0,0 +1,281 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type PointerEvent as ReactPointerEvent,
+} from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+import { type NewsArticle } from "./data"
+
+// ── Constants ──
+
+const OFFSET_FACTOR = 4
+const SCALE_FACTOR = 0.03
+const OPACITY_FACTOR = 0.1
+const COMPLETED_DISPLAY_MS = 2700
+
+// ── News Card ──
+
+function NewsCard({
+  title,
+  summary,
+  image,
+  onDismiss,
+  hideContent,
+  href,
+  active,
+}: {
+  title: string
+  summary: string
+  image?: string
+  onDismiss?: () => void
+  hideContent?: boolean
+  href?: string
+  active?: boolean
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+  const drag = useRef<{
+    start: number
+    delta: number
+    startTime: number
+    maxDelta: number
+  }>({ start: 0, delta: 0, startTime: 0, maxDelta: 0 })
+  const animation = useRef<Animation>(undefined)
+  const [dragging, setDragging] = useState(false)
+
+  const onDragMove = (e: globalThis.PointerEvent) => {
+    if (!ref.current) return
+    const dx = e.clientX - drag.current.start
+    drag.current.delta = dx
+    drag.current.maxDelta = Math.max(drag.current.maxDelta, Math.abs(dx))
+    ref.current.style.setProperty("--dx", dx.toString())
+  }
+
+  const dismiss = () => {
+    if (!ref.current) return
+    const cardWidth = ref.current.getBoundingClientRect().width
+    const translateX = Math.sign(drag.current.delta) * cardWidth
+
+    animation.current = ref.current.animate(
+      { opacity: 0, transform: `translateX(${translateX}px)` },
+      { duration: 150, easing: "ease-in-out", fill: "forwards" }
+    )
+    animation.current.onfinish = () => onDismiss?.()
+  }
+
+  const stopDragging = (cancelled: boolean) => {
+    unbindListeners()
+    if (!ref.current) return
+    setDragging(false)
+
+    const dx = drag.current.delta
+    if (Math.abs(dx) > ref.current.clientWidth / (cancelled ? 2 : 3)) {
+      dismiss()
+      return
+    }
+
+    animation.current = ref.current.animate(
+      { transform: "translateX(0)" },
+      { duration: 150, easing: "ease-in-out" }
+    )
+    animation.current.onfinish = () =>
+      ref.current?.style.setProperty("--dx", "0")
+
+    drag.current = { start: 0, delta: 0, startTime: 0, maxDelta: 0 }
+  }
+
+  const onDragEnd = () => stopDragging(false)
+  const onDragCancel = () => stopDragging(true)
+
+  const onPointerDown = (e: ReactPointerEvent) => {
+    if (!active || !ref.current || animation.current?.playState === "running")
+      return
+
+    bindListeners()
+    setDragging(true)
+    drag.current.start = e.clientX
+    drag.current.startTime = Date.now()
+    drag.current.delta = 0
+    ref.current.style.setProperty("--w", ref.current.clientWidth.toString())
+  }
+
+  const onClick = () => {
+    if (!ref.current || !href) return
+    if (
+      drag.current.maxDelta < ref.current.clientWidth / 10 &&
+      (!drag.current.startTime || Date.now() - drag.current.startTime < 250)
+    ) {
+      window.open(href, "_blank", "noopener,noreferrer")
+    }
+  }
+
+  const bindListeners = () => {
+    document.addEventListener("pointermove", onDragMove)
+    document.addEventListener("pointerup", onDragEnd)
+    document.addEventListener("pointercancel", onDragCancel)
+  }
+
+  const unbindListeners = () => {
+    document.removeEventListener("pointermove", onDragMove)
+    document.removeEventListener("pointerup", onDragEnd)
+    document.removeEventListener("pointercancel", onDragCancel)
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "border-border bg-card relative cursor-grab border p-3 text-[0.8125rem] shadow-xs select-none",
+        "rounded-lg",
+        "translate-x-[calc(var(--dx)*1px)] rotate-[calc(var(--dx)*0.05deg)] opacity-[calc(1-max(var(--dx),-1*var(--dx))/var(--w)/2)]",
+        "transition-shadow data-[dragging=true]:cursor-grabbing data-[dragging=true]:shadow-md"
+      )}
+      style={{ "--dx": 0, "--w": 1 } as CSSProperties}
+      data-dragging={dragging}
+      onPointerDown={onPointerDown}
+      onClick={onClick}
+    >
+      <div className={cn(hideContent && "invisible")}>
+        <div className="flex flex-col gap-1">
+          <span className="text-foreground line-clamp-1 font-medium">
+            {title}
+          </span>
+          <p className="text-muted-foreground line-clamp-2 h-10 leading-5">
+            {summary}
+          </p>
+        </div>
+        <div
+          className={cn(
+            "border-border/40 bg-muted relative mt-3 aspect-video w-full shrink-0 overflow-hidden border",
+            "rounded-md"
+          )}
+        >
+          {image && (
+            <img
+              src={image}
+              alt=""
+              className="size-full object-cover object-center"
+              draggable={false}
+            />
+          )}
+        </div>
+        <div
+          className={cn(
+            "grid grid-rows-[0fr] overflow-hidden opacity-0 transition-[grid-template-rows,opacity] duration-200",
+            "sm:group-has-[*[data-dragging=true]]:grid-rows-[1fr] sm:group-has-[*[data-dragging=true]]:opacity-100",
+            "sm:group-hover:group-data-[active=true]:grid-rows-[1fr] sm:group-hover:group-data-[active=true]:opacity-100",
+            "has-focus-visible:grid-rows-[1fr] has-focus-visible:opacity-100"
+          )}
+        >
+          <div className="min-h-0">
+            <div className="flex items-center justify-between pt-3 text-xs">
+              <a
+                href={href ?? "#"}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(e) => e.stopPropagation()}
+                className="text-muted-foreground hover:text-foreground font-medium transition-colors duration-75"
+              >
+                Read more
+              </a>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  dismiss()
+                }}
+                className="text-muted-foreground hover:text-foreground transition-colors duration-75"
+              >
+                Dismiss
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ── Sidebar News ──
+
+export function SidebarNews({ articles }: { articles: NewsArticle[] }) {
+  const [dismissedIds, setDismissedIds] = useState<string[]>([])
+  const cards = articles.filter(({ href }) => !dismissedIds.includes(href))
+  const cardCount = cards.length
+  const [showCompleted, setShowCompleted] = useState(cardCount > 0)
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout> | undefined
+    if (cardCount === 0) {
+      timeout = setTimeout(() => setShowCompleted(false), COMPLETED_DISPLAY_MS)
+    }
+    return () => clearTimeout(timeout)
+  }, [cardCount])
+
+  if (!cards.length && !showCompleted) return null
+
+  return (
+    <div
+      className="group px-3 in-data-[state=collapsed]:hidden"
+      data-active={cardCount !== 0}
+    >
+      <div className="relative size-full">
+        {cards.toReversed().map(({ href, title, summary, image }, idx) => (
+          <div
+            key={idx}
+            className={cn(
+              "absolute top-0 left-0 size-full scale-(--scale) transition-[opacity,transform] duration-200",
+              cardCount - idx > 3
+                ? [
+                    "opacity-0 sm:group-hover:translate-y-(--y) sm:group-hover:opacity-(--opacity)",
+                    "sm:group-has-[*[data-dragging=true]]:translate-y-(--y) sm:group-has-[*[data-dragging=true]]:opacity-(--opacity)",
+                  ]
+                : "translate-y-(--y) opacity-(--opacity)"
+            )}
+            style={
+              {
+                "--y": `-${(cardCount - (idx + 1)) * OFFSET_FACTOR}%`,
+                "--scale": 1 - (cardCount - (idx + 1)) * SCALE_FACTOR,
+                "--opacity":
+                  cardCount - (idx + 1) >= 6
+                    ? 0
+                    : 1 - (cardCount - (idx + 1)) * OPACITY_FACTOR,
+              } as CSSProperties
+            }
+            aria-hidden={idx !== cardCount - 1}
+            {...(idx !== cardCount - 1 ? { inert: true } : {})}
+          >
+            <NewsCard
+              title={title}
+              summary={summary}
+              image={image}
+              href={href}
+              hideContent={cardCount - idx > 2}
+              active={idx === cardCount - 1}
+              onDismiss={() =>
+                setDismissedIds([href, ...dismissedIds.slice(0, 50)])
+              }
+            />
+          </div>
+        ))}
+
+        {/* Invisible spacer to hold layout height */}
+        <div className="pointer-events-none invisible" aria-hidden="true">
+          <NewsCard title="Title" summary="Description" />
+        </div>
+
+        {/* All-caught-up state */}
+        {showCompleted && !cardCount && (
+          <div className="absolute inset-0 flex size-full flex-col items-center justify-end gap-3 pb-4">
+            <span className="text-muted-foreground text-xs font-medium">
+              You&apos;re all caught up!
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/app-shell-7/components/sidebar-rail-toggle.tsx b/apps/web/src/components/blocks/app-shell-7/components/sidebar-rail-toggle.tsx
new file mode 100644
index 0000000..416f8dd
--- /dev/null
+++ b/apps/web/src/components/blocks/app-shell-7/components/sidebar-rail-toggle.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { useSidebar } from "@evobgp/ui/components/sidebar"
+
+export function SidebarRailToggle() {
+  const { state, toggleSidebar } = useSidebar()
+  const isExpanded = state === "expanded"
+
+  return (
+    <button
+      type="button"
+      aria-label={isExpanded ? "Collapse sidebar" : "Expand sidebar"}
+      onClick={toggleSidebar}
+      style={{
+        left: isExpanded ? "var(--sidebar-width)" : "var(--sidebar-width-icon)",
+      }}
+      className={cn(
+        "group/rail fixed z-30 flex h-12 w-7 cursor-pointer items-center pl-2 outline-none",
+        "top-[calc(var(--header-height)+50%)] -translate-y-1/2",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-1",
+        "focus-visible:rounded-sm",
+        "transition-[left] duration-200 ease-linear"
+      )}
+    >
+      <span className="flex flex-col items-center">
+        <span
+          aria-hidden="true"
+          className={cn(
+            "bg-foreground/40 block h-2 w-0.5 rounded-t-full",
+            "origin-bottom transition-all duration-100 ease-linear",
+            isExpanded
+              ? "group-hover/rail:bg-foreground/60 group-hover/rail:rotate-40"
+              : "group-hover/rail:bg-foreground/60 group-hover/rail:-rotate-40"
+          )}
+        />
+        <span
+          aria-hidden="true"
+          className={cn(
+            "bg-foreground/40 block h-2 w-0.5 rounded-b-full",
+            "origin-top transition-all duration-100 ease-linear",
+            isExpanded
+              ? "group-hover/rail:bg-foreground/60 group-hover/rail:-rotate-40"
+              : "group-hover/rail:bg-foreground/60 group-hover/rail:rotate-40"
+          )}
+        />
+      </span>
+
+      <span
+        className={cn(
+          "border-border bg-foreground text-background absolute left-full -ml-2 border px-2 py-0.5 text-[11px] font-medium whitespace-nowrap shadow-xs shadow-black/5",
+          "rounded-md",
+          "pointer-events-none -translate-x-0.5 opacity-0 transition-all duration-200 ease-out",
+          "group-hover/rail:translate-x-0 group-hover/rail:opacity-100"
+        )}
+      >
+        {isExpanded ? "Collapse" : "Expand"}
+      </span>
+    </button>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/app-shell-7/components/system-stats.tsx b/apps/web/src/components/blocks/app-shell-7/components/system-stats.tsx
new file mode 100644
index 0000000..b9ccb3b
--- /dev/null
+++ b/apps/web/src/components/blocks/app-shell-7/components/system-stats.tsx
@@ -0,0 +1,441 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Badge } from "@evobgp/ui/components/badge"
+import { Item, ItemMedia } from "@evobgp/ui/components/item"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@evobgp/ui/components/popover"
+import { Progress } from "@evobgp/ui/components/progress"
+import {
+  AGENTS,
+  RESOURCE_METRICS,
+  type Agent,
+  type ResourceMetric,
+} from "./data"
+import { ActivityIcon, ChevronRightIcon } from "lucide-react"
+
+const HISTORY_LENGTH = 20
+const UPDATE_INTERVAL_MS = 1000
+const SPIKE_COLOR = "var(--color-red-500)"
+const STATS_RANDOM_SEED = 1337
+const DEMO_REFERENCE_DATE = new Date("2026-06-12T09:24:00")
+
+const TIME_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+})
+
+// Seeded PRNG (mulberry32) keeps the demo metrics deterministic across
+// renders and reloads while preserving the organic feel of live jitter.
+function createSeededRandom(seed: number) {
+  let state = seed
+
+  return function nextRandom() {
+    state = (state + 0x6d2b79f5) | 0
+    let t = Math.imul(state ^ (state >>> 15), state | 1)
+    t = (t + Math.imul(t ^ (t >>> 7), t | 61)) ^ t
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
+}
+
+const nextRandom = createSeededRandom(STATS_RANDOM_SEED)
+
+function randomInRange(min: number, max: number) {
+  return Math.round((min + nextRandom() * (max - min)) * 10) / 10
+}
+
+function seedHistory(min: number, max: number): number[] {
+  return Array.from({ length: HISTORY_LENGTH }, () => randomInRange(min, max))
+}
+
+function smoothPath(pts: { x: number; y: number }[]): string {
+  if (pts.length === 0) return ""
+  if (pts.length === 1) return `M ${pts[0].x} ${pts[0].y}`
+  let d = `M ${pts[0].x} ${pts[0].y}`
+  for (let i = 1; i < pts.length; i++) {
+    const prev = pts[i - 1]
+    const curr = pts[i]
+    const cx = (prev.x + curr.x) / 2
+    d += ` C ${cx} ${prev.y}, ${cx} ${curr.y}, ${curr.x} ${curr.y}`
+  }
+  return d
+}
+
+// ── Sparkline Area (full-width responsive) ──
+
+function SparklineArea({
+  data,
+  max,
+  color,
+  spikeThreshold,
+  height = 36,
+}: {
+  data: number[]
+  max: number
+  color: string
+  spikeThreshold: number
+  height?: number
+}) {
+  const gradientId = useId()
+  const W = 100
+  const H = height
+  const currentValue = data[data.length - 1] ?? 0
+  const hasSpike = currentValue > spikeThreshold
+  const activeColor = hasSpike ? SPIKE_COLOR : color
+
+  const pts = data.map((value, i) => ({
+    x: data.length < 2 ? 0 : (i / (data.length - 1)) * W,
+    y: H - (Math.min(value, max) / max) * (H - 2),
+  }))
+
+  const linePath = smoothPath(pts)
+  const areaPath = pts.length > 1 ? `${linePath} L ${W} ${H} L 0 ${H} Z` : ""
+
+  return (
+    <svg
+      viewBox={`0 0 ${W} ${H}`}
+      preserveAspectRatio="none"
+      aria-hidden="true"
+      className="w-full"
+      style={{ height: `${H}px` }}
+    >
+      <defs>
+        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={activeColor} stopOpacity={0.35} />
+          <stop offset="100%" stopColor={activeColor} stopOpacity={0.02} />
+        </linearGradient>
+      </defs>
+      {areaPath && <path d={areaPath} fill={`url(#${gradientId})`} />}
+      <path
+        d={linePath}
+        fill="none"
+        stroke={activeColor}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+// ── Mini Sparkline (for agent rows) ──
+
+function MiniSparkline({ data, color }: { data: number[]; color: string }) {
+  const gradientId = useId()
+  const W = 40
+  const H = 14
+  const dataMax = Math.max(...data, 1)
+
+  const pts = data.map((value, i) => ({
+    x: data.length < 2 ? 0 : (i / (data.length - 1)) * W,
+    y: H - (value / dataMax) * (H - 1),
+  }))
+
+  const linePath = smoothPath(pts)
+  const areaPath = pts.length > 1 ? `${linePath} L ${W} ${H} L 0 ${H} Z` : ""
+
+  return (
+    <svg
+      viewBox={`0 0 ${W} ${H}`}
+      width={W}
+      height={H}
+      aria-hidden="true"
+      className="shrink-0"
+    >
+      <defs>
+        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={color} stopOpacity={0.3} />
+          <stop offset="100%" stopColor={color} stopOpacity={0} />
+        </linearGradient>
+      </defs>
+      {areaPath && <path d={areaPath} fill={`url(#${gradientId})`} />}
+      <path
+        d={linePath}
+        fill="none"
+        stroke={color}
+        strokeWidth={1}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+// ── Resource Card (grid cell) ──
+
+function ResourceCard({
+  metric,
+  history,
+}: {
+  metric: ResourceMetric
+  history: number[]
+}) {
+  const current = history[history.length - 1] ?? 0
+  const max = metric.id === "memory" ? 16 : 100
+  const isHigh = current > metric.spikeThreshold
+
+  return (
+    <div className="flex flex-col gap-2 p-3">
+      <div className="flex items-center justify-between gap-1">
+        <div className="flex min-w-0 items-center gap-1.5">
+          <Item
+            className="flex size-5 shrink-0 items-center justify-center p-0 transition-colors duration-300"
+            style={{
+              backgroundColor: `${isHigh ? SPIKE_COLOR : metric.color}18`,
+            }}
+          >
+            <ItemMedia
+              variant="icon"
+              className="size-auto"
+              style={{ color: isHigh ? SPIKE_COLOR : metric.color }}
+            >
+              {metric.icon}
+            </ItemMedia>
+          </Item>
+          <span className="text-muted-foreground truncate text-[11px]">
+            {metric.label}
+          </span>
+        </div>
+        <span
+          className="shrink-0 text-xs font-semibold tabular-nums transition-colors duration-300"
+          style={{ color: isHigh ? SPIKE_COLOR : metric.color }}
+        >
+          {current}
+          <span className="text-muted-foreground ml-0.5 text-[10px] font-normal">
+            {metric.unit}
+          </span>
+        </span>
+      </div>
+      <SparklineArea
+        data={history}
+        max={max}
+        color={metric.color}
+        spikeThreshold={metric.spikeThreshold}
+      />
+    </div>
+  )
+}
+
+// ── Agent Memory Row ──
+
+type AgentWithHistory = Agent & { history: number[] }
+
+function AgentMemoryRow({ agent }: { agent: AgentWithHistory }) {
+  const barPercent = Math.min(100, (agent.memoryMb / 512) * 100)
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-1.5">
+      <span
+        className="size-2 shrink-0 rounded-full"
+        style={{ backgroundColor: agent.color }}
+        aria-hidden="true"
+      />
+      <span className="text-muted-foreground min-w-0 flex-1 truncate text-xs">
+        {agent.name}
+      </span>
+      <Progress
+        value={barPercent}
+        className="w-12 **:data-[slot=progress-indicator]:bg-(--bar-color) **:data-[slot=progress-track]:h-1"
+        style={{ "--bar-color": agent.color } as CSSProperties}
+      />
+      <span className="text-muted-foreground w-10 text-right text-[10px] tabular-nums">
+        {agent.memoryMb}MB
+      </span>
+    </div>
+  )
+}
+
+// ── Status Badge ──
+
+function StatusBadge({ spiking }: { spiking: boolean }) {
+  return (
+    <Badge
+      className={cn(
+        "h-4 border-0 px-1.5 text-[10px] font-medium",
+        spiking
+          ? "bg-destructive/10 text-destructive dark:bg-destructive/20"
+          : "bg-success/10 text-success dark:bg-success/20"
+      )}
+    >
+      {spiking ? "Alert" : "Normal"}
+    </Badge>
+  )
+}
+
+// ── System Stats ──
+
+export function SystemStats() {
+  const [histories, setHistories] = useState<Record<string, number[]>>(() => {
+    const initial: Record<string, number[]> = {}
+    for (const m of RESOURCE_METRICS) {
+      initial[m.id] = seedHistory(m.seedRange[0], m.seedRange[1])
+    }
+    return initial
+  })
+
+  const [agentData, setAgentData] = useState<AgentWithHistory[]>(() =>
+    AGENTS.map((a) => ({
+      ...a,
+      history: Array.from({ length: 10 }, () =>
+        Math.max(32, Math.round(a.memoryMb + (nextRandom() - 0.5) * 80))
+      ),
+    }))
+  )
+
+  const [showAgents, setShowAgents] = useState(true)
+  const [now, setNow] = useState(DEMO_REFERENCE_DATE)
+  const intervalRef = useRef<ReturnType<typeof setInterval>>(null)
+
+  // Derived - no extra state needed
+  const spiking = RESOURCE_METRICS.some((m) => {
+    const history = histories[m.id] ?? []
+    const current = history[history.length - 1] ?? 0
+    return current > m.spikeThreshold
+  })
+
+  const tick = useCallback(() => {
+    setHistories((prev) => {
+      const next: Record<string, number[]> = {}
+      for (const m of RESOURCE_METRICS) {
+        const old = prev[m.id] ?? []
+        const jitter = randomInRange(
+          m.seedRange[0] * 0.8,
+          m.seedRange[1] * 1.15
+        )
+        const clamped =
+          m.id === "memory"
+            ? Math.min(16, Math.max(0, jitter))
+            : Math.min(100, Math.max(0, jitter))
+        next[m.id] = [...old.slice(-(HISTORY_LENGTH - 1)), clamped]
+      }
+      return next
+    })
+
+    setAgentData((prev) =>
+      prev.map((a) => {
+        const newMb = Math.max(
+          32,
+          Math.round(a.memoryMb + (nextRandom() - 0.5) * 20)
+        )
+        return {
+          ...a,
+          memoryMb: newMb,
+          history: [...a.history.slice(-9), newMb],
+        }
+      })
+    )
+
+    setNow((prev) => new Date(prev.getTime() + UPDATE_INTERVAL_MS))
+  }, [])
+
+  useEffect(() => {
+    intervalRef.current = setInterval(tick, UPDATE_INTERVAL_MS)
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current)
+    }
+  }, [tick])
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <button
+            type="button"
+            aria-label="System monitor"
+            className={cn(
+              "relative inline-flex h-7 items-center gap-1.5 px-2 transition-colors outline-none",
+              "rounded-md",
+              "border-border hover:bg-accent focus-visible:ring-ring border focus-visible:ring-2"
+            )}
+          />
+        }
+      >
+        {/* Icon with beep ring on spike */}
+        <span className="relative flex size-3.5 items-center justify-center">
+          <ActivityIcon className={cn(
+                                "size-3.5 transition-colors duration-300",
+                                spiking ? "text-destructive" : "text-muted-foreground"
+                              )} aria-hidden="true" />
+          {spiking && (
+            <span
+              className="bg-destructive/25 absolute inset-0 animate-ping rounded-full"
+              aria-hidden="true"
+            />
+          )}
+        </span>
+        <span className="text-foreground text-xs font-medium">System</span>
+        <StatusBadge spiking={spiking} />
+      </PopoverTrigger>
+
+      <PopoverContent
+        align="end"
+        sideOffset={8}
+        className="w-80 gap-0! space-y-0! p-0!"
+      >
+        {/* Header */}
+        <div className="border-border flex items-center justify-between border-b px-3 py-2.5">
+          <span className="text-foreground text-xs font-medium">
+            System Monitor
+          </span>
+          <span className="text-muted-foreground text-[11px] tabular-nums">
+            {TIME_FORMATTER.format(now)}
+          </span>
+        </div>
+
+        {/* 2×2 Resource Grid */}
+        <div className="grid grid-cols-2">
+          {RESOURCE_METRICS.map((metric, i) => (
+            <div
+              key={metric.id}
+              className={cn(
+                i % 2 === 1 && "border-border border-l",
+                i >= 2 && "border-border border-t"
+              )}
+            >
+              <ResourceCard
+                metric={metric}
+                history={histories[metric.id] ?? []}
+              />
+            </div>
+          ))}
+        </div>
+
+        {/* Per-Agent Memory */}
+        <div className="border-border border-t">
+          <button
+            type="button"
+            onClick={() => setShowAgents((prev) => !prev)}
+            className="text-muted-foreground hover:text-foreground flex w-full items-center gap-2 px-3 py-2 text-xs transition-colors"
+            aria-expanded={showAgents}
+            aria-controls="agent-memory-panel"
+          >
+            <ChevronRightIcon className={cn(
+                                      "size-3 shrink-0 transition-transform duration-200",
+                                      showAgents && "rotate-90"
+                                    )} aria-hidden="true" />
+            Per-Agent Memory
+          </button>
+
+          {showAgents && (
+            <div id="agent-memory-panel" className="pb-2">
+              {agentData.map((agent) => (
+                <AgentMemoryRow key={agent.id} agent={agent} />
+              ))}
+            </div>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/app-shell-7/page.tsx b/apps/web/src/components/blocks/app-shell-7/page.tsx
new file mode 100644
index 0000000..4d44f0a
--- /dev/null
+++ b/apps/web/src/components/blocks/app-shell-7/page.tsx
@@ -0,0 +1,5 @@
+import { AppShell } from "./components/app-shell"
+
+export function Page() {
+  return <AppShell />
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-12/components/chart.tsx b/apps/web/src/components/blocks/chart-12/components/chart.tsx
new file mode 100644
index 0000000..6ded4f5
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-12/components/chart.tsx
@@ -0,0 +1,240 @@
+"use client"
+
+import { useState, type CSSProperties } from "react"
+import { Cell, Pie, PieChart } from "recharts"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@evobgp/ui/components/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@evobgp/ui/components/chart"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+import { Item, ItemMedia } from "@evobgp/ui/components/item"
+import { Separator } from "@evobgp/ui/components/separator"
+import {
+  chartConfig,
+  inflowRanges,
+  rangeOptions,
+  type InflowSource,
+  type RangeKey,
+} from "./data"
+import { ChevronDownIcon } from "lucide-react"
+
+function GaugeGrid() {
+  const gridPattern =
+    "[background-image:linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] [background-size:8px_8px]"
+
+  return (
+    <div
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-x-0 top-0 h-52 overflow-hidden"
+    >
+      <div
+        className={cn(
+          "absolute inset-x-0 top-0 h-40 [mask-image:linear-gradient(to_bottom,black_0%,black_42%,transparent_100%)] opacity-35",
+          gridPattern
+        )}
+      />
+      <div
+        className={cn(
+          "absolute -inset-x-8 top-7 h-44 [mask-image:radial-gradient(ellipse_88%_76%_at_50%_16%,black_0%,black_46%,transparent_100%)] opacity-45 blur-md",
+          gridPattern
+        )}
+      />
+      <div className="absolute inset-x-0 bottom-0 h-24 bg-[linear-gradient(to_bottom,transparent_0%,var(--card)_72%,var(--card)_100%)]" />
+    </div>
+  )
+}
+
+function RangeMenu({
+  selectedRange,
+  onSelectRange,
+}: {
+  selectedRange: RangeKey
+  onSelectRange: (range: RangeKey) => void
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="min-w-24 justify-between gap-1.5 px-3"
+            aria-label="Change inflow range"
+          />
+        }
+      >
+        <span>{inflowRanges[selectedRange].label}</span>
+        <ChevronDownIcon data-icon="inline-end" aria-hidden="true" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" side="bottom" className="w-40">
+        <DropdownMenuGroup>
+          {rangeOptions.map((range) => (
+            <DropdownMenuItem
+              key={range.key}
+              onClick={() => onSelectRange(range.key)}
+            >
+              {range.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function SourceIcon({ source }: { source: InflowSource }) {
+  return (
+    <Item
+      className={cn(
+        "dark:border-border relative isolate flex size-8 items-center justify-center overflow-hidden border-2 border-white bg-[var(--source-icon-bg)] p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:bg-neutral-950 dark:shadow-[0_1px_3px_0_rgba(0,0,0,0.35)] [&_svg]:size-4 [&_svg]:text-white",
+        source.id !== "qbridge" && "dark:[--source-stipple-opacity:0.38]",
+        source.id === "qbridge" && "dark:[--source-stipple-opacity:0.3]"
+      )}
+      style={{ "--source-icon-bg": source.color } as CSSProperties}
+    >
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 z-0 [background-image:radial-gradient(circle_at_center,rgba(255,255,255,0.22)_0.6px,transparent_0.65px)] [background-size:3px_3px] opacity-[var(--source-stipple-opacity,0)]"
+      />
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 z-[1] [background-image:radial-gradient(48.05%_48.05%_at_50%_5.95%,rgba(255,255,255,0.4)_0%,rgba(255,255,255,0)_100%)]"
+      />
+      <ItemMedia variant="icon" className="relative z-10 size-auto">
+        {source.icon}
+      </ItemMedia>
+    </Item>
+  )
+}
+
+function SourceMetric({ source }: { source: InflowSource }) {
+  return (
+    <div className="flex min-w-0 flex-col items-center gap-2 px-2 text-center">
+      <SourceIcon source={source} />
+      <div className="min-w-0">
+        <div className="text-muted-foreground text-xs">{source.name}</div>
+        <div className="text-base font-medium">{source.value}</div>
+      </div>
+    </div>
+  )
+}
+
+export function Chart() {
+  const [selectedRange, setSelectedRange] = useState<RangeKey>("week")
+  const currentRange = inflowRanges[selectedRange]
+
+  return (
+    <Card className="w-full max-w-[360px] gap-0 overflow-hidden py-0">
+      {/* Header */}
+      <CardHeader className="relative z-10 flex items-center justify-between border-b p-4!">
+        <CardTitle className="text-sm font-medium">Capital Inflows</CardTitle>
+        <CardAction>
+          <RangeMenu
+            selectedRange={selectedRange}
+            onSelectRange={setSelectedRange}
+          />
+        </CardAction>
+      </CardHeader>
+
+      {/* Content */}
+      <CardContent className="relative p-0!">
+        <GaugeGrid />
+
+        <div className="relative px-5 pt-5 pb-4">
+          <div className="relative mx-auto h-[158px] w-full max-w-[300px]">
+            <ChartContainer
+              config={chartConfig}
+              className="aspect-auto h-full w-full overflow-visible"
+              initialDimension={{ width: 300, height: 158 }}
+              role="img"
+              aria-label={`Capital inflows for ${currentRange.label}: ${currentRange.total}`}
+            >
+              <PieChart
+                accessibilityLayer
+                margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
+              >
+                <ChartTooltip
+                  cursor={false}
+                  content={
+                    <ChartTooltipContent
+                      hideLabel
+                      formatter={(value, name) => (
+                        <>
+                          <span className="text-muted-foreground">{name}</span>
+                          <span className="font-mono font-medium tabular-nums">
+                            $
+                            {Number(value).toLocaleString(undefined, {
+                              maximumFractionDigits: 1,
+                            })}
+                            M
+                          </span>
+                        </>
+                      )}
+                    />
+                  }
+                />
+                <Pie
+                  data={currentRange.sources}
+                  dataKey="amount"
+                  nameKey="name"
+                  startAngle={180}
+                  endAngle={0}
+                  cx="50%"
+                  cy="93%"
+                  innerRadius={84}
+                  outerRadius={116}
+                  paddingAngle={1}
+                  cornerRadius={3}
+                  stroke="var(--card)"
+                  strokeWidth={1.5}
+                  isAnimationActive={false}
+                >
+                  {currentRange.sources.map((source) => (
+                    <Cell key={source.id} fill={`var(--color-${source.id})`} />
+                  ))}
+                </Pie>
+              </PieChart>
+            </ChartContainer>
+
+            <div className="pointer-events-none absolute inset-x-0 top-[82px] flex flex-col items-center">
+              <span className="text-muted-foreground text-xs">Capital In</span>
+              <span className="text-2xl font-medium">{currentRange.total}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="px-5 pb-5">
+          <Separator className="mb-5" />
+          <div className="grid grid-cols-[1fr_auto_1fr_auto_1fr] items-stretch">
+            {currentRange.sources.map((source, index) => (
+              <div key={source.id} className="contents">
+                <SourceMetric source={source} />
+                {index < currentRange.sources.length - 1 ? (
+                  <Separator orientation="vertical" className="mx-2" />
+                ) : null}
+              </div>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-12/components/data.tsx b/apps/web/src/components/blocks/chart-12/components/data.tsx
new file mode 100644
index 0000000..b49c0cc
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-12/components/data.tsx
@@ -0,0 +1,147 @@
+import { type ReactNode } from "react"
+
+import { type ChartConfig } from "@evobgp/ui/components/chart"
+import { ActivityIcon, SparklesIcon, CircleDollarSignIcon } from "lucide-react"
+
+export type RangeKey = "week" | "month" | "quarter"
+
+export interface InflowSource {
+  id: "wavemark" | "envato" | "qbridge"
+  name: string
+  amount: number
+  value: string
+  color: string
+  icon: ReactNode
+}
+
+export interface InflowRange {
+  label: string
+  total: string
+  sources: InflowSource[]
+}
+
+export const rangeOptions: { key: RangeKey; label: string }[] = [
+  { key: "week", label: "Last Week" },
+  { key: "month", label: "Last Month" },
+  { key: "quarter", label: "Last Quarter" },
+]
+
+const sourceIcons = {
+  wavemark: (
+    <ActivityIcon aria-hidden="true" />
+  ),
+  envato: (
+    <SparklesIcon aria-hidden="true" />
+  ),
+  qbridge: (
+    <CircleDollarSignIcon aria-hidden="true" />
+  ),
+} satisfies Record<InflowSource["id"], ReactNode>
+
+export const inflowRanges: Record<RangeKey, InflowRange> = {
+  week: {
+    label: "Last Week",
+    total: "$12.4M",
+    sources: [
+      {
+        id: "wavemark",
+        name: "WaveMark",
+        amount: 7.6,
+        value: "$7.6M",
+        color: "oklch(57% 0.13 184)",
+        icon: sourceIcons.wavemark,
+      },
+      {
+        id: "envato",
+        name: "Envato Inc.",
+        amount: 3.4,
+        value: "$3.4M",
+        color: "oklch(76% 0.17 84)",
+        icon: sourceIcons.envato,
+      },
+      {
+        id: "qbridge",
+        name: "QBridge B.V.",
+        amount: 1.2,
+        value: "$1.2M",
+        color: "oklch(65% 0.21 45)",
+        icon: sourceIcons.qbridge,
+      },
+    ],
+  },
+  month: {
+    label: "Last Month",
+    total: "$47.8M",
+    sources: [
+      {
+        id: "wavemark",
+        name: "WaveMark",
+        amount: 28.4,
+        value: "$28.4M",
+        color: "oklch(57% 0.13 184)",
+        icon: sourceIcons.wavemark,
+      },
+      {
+        id: "envato",
+        name: "Envato Inc.",
+        amount: 13.6,
+        value: "$13.6M",
+        color: "oklch(76% 0.17 84)",
+        icon: sourceIcons.envato,
+      },
+      {
+        id: "qbridge",
+        name: "QBridge B.V.",
+        amount: 5.8,
+        value: "$5.8M",
+        color: "oklch(65% 0.21 45)",
+        icon: sourceIcons.qbridge,
+      },
+    ],
+  },
+  quarter: {
+    label: "Last Quarter",
+    total: "$138.2M",
+    sources: [
+      {
+        id: "wavemark",
+        name: "WaveMark",
+        amount: 79.1,
+        value: "$79.1M",
+        color: "oklch(57% 0.13 184)",
+        icon: sourceIcons.wavemark,
+      },
+      {
+        id: "envato",
+        name: "Envato Inc.",
+        amount: 42.5,
+        value: "$42.5M",
+        color: "oklch(76% 0.17 84)",
+        icon: sourceIcons.envato,
+      },
+      {
+        id: "qbridge",
+        name: "QBridge B.V.",
+        amount: 16.6,
+        value: "$16.6M",
+        color: "oklch(65% 0.21 45)",
+        icon: sourceIcons.qbridge,
+      },
+    ],
+  },
+}
+
+export const chartConfig = {
+  wavemark: {
+    label: "WaveMark",
+    color: "oklch(57% 0.13 184)",
+  },
+  envato: {
+    label: "Envato Inc.",
+    color: "oklch(76% 0.17 84)",
+  },
+  qbridge: {
+    label: "QBridge B.V.",
+    color: "oklch(65% 0.21 45)",
+  },
+} satisfies ChartConfig
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-12/page.tsx b/apps/web/src/components/blocks/chart-12/page.tsx
new file mode 100644
index 0000000..e76ec67
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-12/page.tsx
@@ -0,0 +1,9 @@
+import { Chart } from "./components/chart"
+
+export function Page() {
+  return (
+    <div className="flex min-h-svh w-full items-center justify-center p-6">
+      <Chart />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-13/components/chart.tsx b/apps/web/src/components/blocks/chart-13/components/chart.tsx
new file mode 100644
index 0000000..cd9f588
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-13/components/chart.tsx
@@ -0,0 +1,262 @@
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { Cell, Pie, PieChart } from "recharts"
+
+import { Button } from "@evobgp/ui/components/button"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@evobgp/ui/components/chart"
+import { Separator } from "@evobgp/ui/components/separator"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@evobgp/ui/components/tabs"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@evobgp/ui/components/tooltip"
+import {
+  chartConfig,
+  inflowPeriods,
+  type InflowFund,
+  type InflowPeriod,
+} from "./data"
+import { InfoIcon } from "lucide-react"
+
+const CHART_REVEAL_STYLE = `
+@keyframes chart-13-reveal-up {
+  from {
+    clip-path: inset(100% 0 0 0);
+    opacity: 0.75;
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+    opacity: 1;
+  }
+}
+
+.chart-13-reveal-up {
+  animation: chart-13-reveal-up 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chart-13-reveal-up {
+    animation: none;
+    clip-path: none;
+    opacity: 1;
+  }
+}
+`
+
+type DonutSlice =
+  | InflowFund
+  | {
+      key: "reserve"
+      name: string
+      amount: string
+      share: number
+      color: string
+      fill: string
+    }
+
+function getDonutData(period: InflowPeriod) {
+  const trackedShare = period.funds.reduce(
+    (total, fund) => total + fund.share,
+    0
+  )
+  const reserveShare = Math.max(100 - trackedShare, 0)
+
+  return [
+    ...period.funds,
+    {
+      key: "reserve",
+      name: "Other Sources",
+      amount: "",
+      share: reserveShare,
+      color: "var(--muted)",
+      fill: "var(--color-reserve)",
+    },
+  ] satisfies DonutSlice[]
+}
+
+function ChartTooltipFormatter(item: unknown) {
+  const fund = item as DonutSlice
+  const value = fund.key === "reserve" ? `${fund.share}%` : fund.amount
+
+  return (
+    <div className="flex min-w-40 items-center justify-between gap-6">
+      <div className="flex min-w-0 items-center gap-2">
+        <span
+          aria-hidden="true"
+          className="size-2.5 shrink-0 rounded-full"
+          style={{ backgroundColor: fund.color }}
+        />
+        <span className="text-muted-foreground truncate">{fund.name}</span>
+      </div>
+      <span className="text-foreground font-medium tabular-nums">{value}</span>
+    </div>
+  )
+}
+
+function InfoTooltip() {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            aria-label="About Capital Inflows"
+            className="text-muted-foreground/70 -my-1"
+            size="icon-sm"
+            type="button"
+            variant="ghost"
+          >
+            <InfoIcon aria-hidden="true" className="text-sm" data-icon="inline-start" />
+          </Button>
+        }
+      />
+      <TooltipContent side="top" sideOffset={8}>
+        <p>Tracked capital committed during the selected period.</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+function InflowDonut({ period }: { period: InflowPeriod }) {
+  const chartData = getDonutData(period)
+
+  return (
+    <div className="chart-13-reveal-up relative size-[8.25rem] shrink-0">
+      <ChartContainer
+        aria-label={`Capital Inflows: ${period.total} total for ${period.label}`}
+        className="aspect-square size-[8.25rem]"
+        config={chartConfig}
+        initialDimension={{ width: 132, height: 132 }}
+      >
+        <PieChart margin={{ top: 2, right: 2, bottom: 2, left: 2 }}>
+          <ChartTooltip
+            cursor={false}
+            content={
+              <ChartTooltipContent
+                hideLabel
+                hideIndicator
+                formatter={(_value, _name, item) =>
+                  ChartTooltipFormatter(item.payload)
+                }
+              />
+            }
+          />
+          <Pie
+            data={chartData}
+            dataKey="share"
+            endAngle={-230}
+            innerRadius={47}
+            isAnimationActive={false}
+            nameKey="name"
+            outerRadius={62}
+            paddingAngle={1}
+            cornerRadius={3}
+            startAngle={130}
+            stroke="var(--background)"
+            strokeWidth={2}
+          >
+            {chartData.map((item) => (
+              <Cell key={item.key} fill={item.fill} />
+            ))}
+          </Pie>
+        </PieChart>
+      </ChartContainer>
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 flex items-center justify-center"
+      >
+        <div className="bg-background/90 border-border/70 flex size-[5.25rem] flex-col items-center justify-center rounded-full border border-dashed">
+          <span className="text-muted-foreground/70 text-xs">Capital</span>
+          <span className="mt-0.5 text-sm font-semibold">{period.total}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function InflowLegend({ period }: { period: InflowPeriod }) {
+  return (
+    <ul className="flex min-w-0 flex-1 flex-col">
+      {period.funds.map((fund, index) => (
+        <li key={fund.key}>
+          <div className="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3 py-2.5">
+            <div className="flex min-w-0 items-center gap-2.5">
+              <span
+                aria-hidden="true"
+                className="border-background size-3 shrink-0 rounded-full border-2 shadow-sm"
+                style={{ backgroundColor: fund.color }}
+              />
+              <span className="text-sm font-medium">{fund.name}</span>
+            </div>
+            <span className="text-sm font-medium">{fund.amount}</span>
+            <span className="text-muted-foreground/70 w-8 text-right text-xs">
+              {fund.share}%
+            </span>
+          </div>
+          {index < period.funds.length - 1 ? (
+            <Separator className="w-auto" />
+          ) : null}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function InflowPeriodPanel({ period }: { period: InflowPeriod }) {
+  return (
+    <div className="grid gap-6 @sm:grid-cols-[8.25rem_minmax(0,1fr)] @sm:items-center">
+      <InflowDonut period={period} />
+      <InflowLegend period={period} />
+    </div>
+  )
+}
+
+export function Chart() {
+  return (
+    <TooltipProvider delay={150}>
+      <style>{CHART_REVEAL_STYLE}</style>
+      <Frame className="@container w-full max-w-[29rem]">
+        <FramePanel className="ps-3.5! pe-5! pt-5! pb-3.5!">
+          <Tabs defaultValue="week" className="gap-6">
+            {/* Header */}
+            <div className="flex flex-wrap items-center justify-between gap-4">
+              <div className="flex min-w-0 items-center gap-0.5 ps-1.5">
+                <h2 className="text-sm font-medium">Capital Inflows</h2>
+                <InfoTooltip />
+              </div>
+
+              <TabsList className="w-full @sm:w-auto">
+                {inflowPeriods.map((period) => (
+                  <TabsTrigger key={period.value} value={period.value}>
+                    {period.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </div>
+
+            {/* Content */}
+            {inflowPeriods.map((period) => (
+              <TabsContent
+                key={period.value}
+                value={period.value}
+                className="mt-0"
+              >
+                <InflowPeriodPanel period={period} />
+              </TabsContent>
+            ))}
+          </Tabs>
+        </FramePanel>
+      </Frame>
+    </TooltipProvider>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-13/components/data.ts b/apps/web/src/components/blocks/chart-13/components/data.ts
new file mode 100644
index 0000000..d823b27
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-13/components/data.ts
@@ -0,0 +1,141 @@
+import { type ChartConfig } from "@evobgp/ui/components/chart"
+
+export type InflowFundKey = "northline" | "copper" | "bridgewell" | "reserve"
+
+export interface InflowFund {
+  key: Exclude<InflowFundKey, "reserve">
+  name: string
+  amount: string
+  share: number
+  color: string
+  fill: string
+}
+
+export interface InflowPeriod {
+  value: "week" | "month" | "year"
+  label: string
+  total: string
+  funds: InflowFund[]
+}
+
+const teal = "oklch(0.6 0.145 181.2)"
+const amber = "oklch(0.76 0.161 80.1)"
+const orange = "oklch(0.66 0.19 42.8)"
+
+export const chartConfig = {
+  capital: {
+    label: "Capital",
+  },
+  northline: {
+    label: "WaveMark Capital",
+    color: teal,
+  },
+  copper: {
+    label: "Copper Market",
+    color: amber,
+  },
+  bridgewell: {
+    label: "Bridgewell Fund",
+    color: orange,
+  },
+  reserve: {
+    label: "Other Sources",
+    color: "var(--muted)",
+  },
+} satisfies ChartConfig
+
+export const inflowPeriods: InflowPeriod[] = [
+  {
+    value: "week",
+    label: "Week",
+    total: "$12,4M",
+    funds: [
+      {
+        key: "northline",
+        name: "WaveMark Capital",
+        amount: "$7,6M",
+        share: 35,
+        color: teal,
+        fill: "var(--color-northline)",
+      },
+      {
+        key: "copper",
+        name: "Envato Market",
+        amount: "$3,4M",
+        share: 34,
+        color: amber,
+        fill: "var(--color-copper)",
+      },
+      {
+        key: "bridgewell",
+        name: "QBridge Investment",
+        amount: "$1,2M",
+        share: 14,
+        color: orange,
+        fill: "var(--color-bridgewell)",
+      },
+    ],
+  },
+  {
+    value: "month",
+    label: "Month",
+    total: "$48,2M",
+    funds: [
+      {
+        key: "northline",
+        name: "Northline Capital",
+        amount: "$21,8M",
+        share: 39,
+        color: teal,
+        fill: "var(--color-northline)",
+      },
+      {
+        key: "copper",
+        name: "Copper Market",
+        amount: "$16,5M",
+        share: 31,
+        color: amber,
+        fill: "var(--color-copper)",
+      },
+      {
+        key: "bridgewell",
+        name: "Bridgewell Fund",
+        amount: "$6,9M",
+        share: 18,
+        color: orange,
+        fill: "var(--color-bridgewell)",
+      },
+    ],
+  },
+  {
+    value: "year",
+    label: "Year",
+    total: "$186,7M",
+    funds: [
+      {
+        key: "northline",
+        name: "Northline Capital",
+        amount: "$72,4M",
+        share: 37,
+        color: teal,
+        fill: "var(--color-northline)",
+      },
+      {
+        key: "copper",
+        name: "Copper Market",
+        amount: "$61,2M",
+        share: 33,
+        color: amber,
+        fill: "var(--color-copper)",
+      },
+      {
+        key: "bridgewell",
+        name: "Bridgewell Fund",
+        amount: "$29,6M",
+        share: 16,
+        color: orange,
+        fill: "var(--color-bridgewell)",
+      },
+    ],
+  },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-13/page.tsx b/apps/web/src/components/blocks/chart-13/page.tsx
new file mode 100644
index 0000000..e76ec67
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-13/page.tsx
@@ -0,0 +1,9 @@
+import { Chart } from "./components/chart"
+
+export function Page() {
+  return (
+    <div className="flex min-h-svh w-full items-center justify-center p-6">
+      <Chart />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-15/components/chart.tsx b/apps/web/src/components/blocks/chart-15/components/chart.tsx
new file mode 100644
index 0000000..904a633
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-15/components/chart.tsx
@@ -0,0 +1,154 @@
+"use client"
+
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { Area, AreaChart, ResponsiveContainer, Tooltip } from "recharts"
+import { activeUsersData, customersData, revenueData } from "./data"
+import { CircleDollarSignIcon, UserPlusIcon, TrendingUp } from "lucide-react"
+
+// ── Business metric cards ──
+
+const businessCards = [
+  {
+    title: "Revenue",
+    period: "Last 28 days",
+    value: "6.238$",
+    timestamp: "",
+    data: revenueData,
+    color: "var(--color-emerald-500)",
+    gradientId: "revenueGradient",
+    icon: (
+      <CircleDollarSignIcon aria-hidden="true" />
+    ),
+  },
+  {
+    title: "New Customers",
+    period: "Last 28 days",
+    value: "6.202",
+    timestamp: "3h ago",
+    data: customersData,
+    color: "var(--color-blue-500)",
+    gradientId: "customersGradient",
+    icon: (
+      <UserPlusIcon aria-hidden="true" />
+    ),
+  },
+  {
+    title: "Active Users",
+    period: "Last 28 days",
+    value: "18.945",
+    timestamp: "1h ago",
+    data: activeUsersData,
+    color: "var(--color-violet-500)",
+    gradientId: "usersGradient",
+    icon: (
+      <TrendingUp aria-hidden="true" />
+    ),
+  },
+]
+
+export function Chart() {
+  return (
+    <div className="@container w-full max-w-6xl">
+      <div className="grid grid-cols-1 gap-4 @3xl:grid-cols-3">
+        {businessCards.map((card, i) => (
+          <Frame key={i} variant="ghost">
+            <FramePanel className="space-y-5">
+              {/* Header */}
+              <div className="flex items-center gap-2">
+                <span style={{ color: card.color }} className="[&_svg]:size-5">
+                  {card.icon}
+                </span>
+                <span className="text-sm font-semibold">{card.title}</span>
+              </div>
+
+              {/* Chart */}
+              <div className="flex items-end justify-between gap-2.5">
+                {/* Value */}
+                <div className="flex flex-col gap-px pb-2">
+                  <div className="text-muted-foreground text-xs whitespace-nowrap">
+                    {card.period}
+                  </div>
+                  <div className="text-foreground text-xl font-semibold tracking-tight">
+                    {card.value}
+                  </div>
+                </div>
+
+                <div className="relative h-16 w-full max-w-40">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <AreaChart
+                      data={card.data}
+                      margin={{ top: 5, right: 5, left: 5, bottom: 5 }}
+                    >
+                      <defs>
+                        <linearGradient
+                          id={card.gradientId}
+                          x1="0"
+                          y1="0"
+                          x2="0"
+                          y2="1"
+                        >
+                          <stop
+                            offset="0%"
+                            stopColor={card.color}
+                            stopOpacity={0.3}
+                          />
+                          <stop
+                            offset="100%"
+                            stopColor={card.color}
+                            stopOpacity={0.05}
+                          />
+                        </linearGradient>
+                      </defs>
+
+                      <Tooltip
+                        cursor={{
+                          stroke: card.color,
+                          strokeWidth: 1,
+                          strokeDasharray: "2 2",
+                        }}
+                        content={({ active, payload }) => {
+                          if (active && payload && payload.length) {
+                            const value = payload[0].value as number
+                            const formatValue = (val: number) => {
+                              if (card.title === "Revenue") {
+                                return `${(val / 1000).toFixed(1)}k US$`
+                              }
+                              return `${(val / 1000).toFixed(1)}k`
+                            }
+                            return (
+                              <div className="bg-popover border-border pointer-events-none rounded-md border p-2 shadow-lg backdrop-blur-sm">
+                                <p className="text-popover-foreground text-sm font-semibold">
+                                  {formatValue(value)}
+                                </p>
+                              </div>
+                            )
+                          }
+                          return null
+                        }}
+                      />
+
+                      <Area
+                        type="monotone"
+                        dataKey="value"
+                        stroke={card.color}
+                        fill={`url(#${card.gradientId})`}
+                        strokeWidth={2}
+                        dot={false}
+                        activeDot={{
+                          r: 4,
+                          fill: card.color,
+                          stroke: "white",
+                          strokeWidth: 2,
+                        }}
+                      />
+                    </AreaChart>
+                  </ResponsiveContainer>
+                </div>
+              </div>
+            </FramePanel>
+          </Frame>
+        ))}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-15/components/data.tsx b/apps/web/src/components/blocks/chart-15/components/data.tsx
new file mode 100644
index 0000000..fff475e
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-15/components/data.tsx
@@ -0,0 +1,70 @@
+import { ReactNode } from "react"
+
+// ── Types ──
+
+export interface MetricCard {
+  title: string
+  period: string
+  value: string
+  timestamp: string
+  data: { value: number }[]
+  color: string
+  icon: ReactNode
+  gradientId: string
+}
+
+// ── Data ──
+
+export const revenueData = [
+  { value: 1000 },
+  { value: 4500 },
+  { value: 2000 },
+  { value: 5200 },
+  { value: 1500 },
+  { value: 6100 },
+  { value: 3000 },
+  { value: 6800 },
+  { value: 2000 },
+  { value: 1000 },
+  { value: 4000 },
+  { value: 2000 },
+  { value: 3000 },
+  { value: 2000 },
+  { value: 6238 },
+]
+
+export const customersData = [
+  { value: 2000 },
+  { value: 4500 },
+  { value: 2000 },
+  { value: 5200 },
+  { value: 1500 },
+  { value: 5100 },
+  { value: 2500 },
+  { value: 6800 },
+  { value: 1800 },
+  { value: 1000 },
+  { value: 3000 },
+  { value: 2000 },
+  { value: 2700 },
+  { value: 2000 },
+  { value: 4238 },
+]
+
+export const activeUsersData = [
+  { value: 2000 },
+  { value: 3500 },
+  { value: 2000 },
+  { value: 5200 },
+  { value: 1200 },
+  { value: 4100 },
+  { value: 3500 },
+  { value: 5800 },
+  { value: 2000 },
+  { value: 800 },
+  { value: 3000 },
+  { value: 1000 },
+  { value: 4000 },
+  { value: 2000 },
+  { value: 4238 },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-15/page.tsx b/apps/web/src/components/blocks/chart-15/page.tsx
new file mode 100644
index 0000000..adfecfa
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-15/page.tsx
@@ -0,0 +1,9 @@
+import { Chart } from "./components/chart"
+
+export function Page() {
+  return (
+    <div className="flex min-h-svh w-full items-center justify-center p-10 md:p-20">
+      <Chart />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-27/components/chart.tsx b/apps/web/src/components/blocks/chart-27/components/chart.tsx
new file mode 100644
index 0000000..f1e07ea
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-27/components/chart.tsx
@@ -0,0 +1,158 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { Badge } from "@/components/reui/badge"
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { LabelList, Pie, PieChart } from "recharts"
+
+import { Button } from "@evobgp/ui/components/button"
+import { ChartContainer, ChartTooltip } from "@evobgp/ui/components/chart"
+import { Item, ItemMedia } from "@evobgp/ui/components/item"
+import { Tabs, TabsList, TabsTrigger } from "@evobgp/ui/components/tabs"
+import { browserData, chartConfig, PeriodKey, PERIODS } from "./data"
+import { TrendingUp, PieChartIcon, InfoIcon } from "lucide-react"
+
+// ── Custom tooltip ──
+
+const CustomTooltip = ({
+  active,
+  payload,
+}: {
+  active?: boolean
+  payload?: {
+    name: string
+    color: string
+    value: number
+    payload: { browser: string }
+  }[]
+}) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-popover min-w-[150px] rounded-lg border p-4 shadow-lg backdrop-blur-sm">
+        <div className="text-popover-foreground border-border/50 mb-3 border-b pb-2 text-sm font-semibold tracking-wider uppercase">
+          {payload[0].payload.browser}
+        </div>
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex items-center gap-2">
+            <div
+              className="size-2 rounded-sm"
+              style={{ backgroundColor: payload[0].color }}
+            />
+            <span className="text-muted-foreground text-xs font-medium">
+              Visitors
+            </span>
+          </div>
+          <span className="text-popover-foreground text-sm font-semibold">
+            {payload[0].value.toLocaleString()}
+          </span>
+        </div>
+      </div>
+    )
+  }
+  return null
+}
+
+export function Chart() {
+  const [selectedPeriod, setSelectedPeriod] = useState<PeriodKey>("5D")
+
+  const { currentData, totalVisitors } = useMemo(() => {
+    const data = browserData[selectedPeriod] || []
+    const total = data.reduce((sum, item) => sum + item.visitors, 0)
+    return { currentData: data, totalVisitors: total }
+  }, [selectedPeriod])
+
+  return (
+    <Frame className="w-full max-w-md">
+      {/* Content */}
+      <FramePanel className="space-y-6 p-6!">
+        <div className="flex items-center justify-between border-b border-dashed pb-6">
+          <div className="flex items-center gap-2">
+            <h3 className="text-base font-semibold">Browser Usage</h3>
+            <Badge variant="success-light" className="gap-1 border-none">
+              <TrendingUp className="size-3.5" aria-hidden="true" />
+              <span>+5.2%</span>
+            </Badge>
+          </div>
+          <Button variant="outline" size="sm">
+            Export
+          </Button>
+        </div>
+
+        <div className="space-y-6">
+          <div className="flex items-center gap-3 px-2">
+            <Item className="bg-primary/5 text-primary flex size-12 items-center justify-center rounded-full p-0 [&_svg]:h-6 [&_svg]:w-6">
+              <ItemMedia variant="icon" className="size-auto">
+                <PieChartIcon aria-hidden="true" />
+              </ItemMedia>
+            </Item>
+            <div>
+              <div className="text-muted-foreground text-sm font-medium">
+                Total Visitors
+              </div>
+              <div className="text-2xl font-bold">
+                {totalVisitors.toLocaleString()}
+              </div>
+            </div>
+          </div>
+
+          <Tabs
+            value={selectedPeriod}
+            onValueChange={(value) => setSelectedPeriod(value as PeriodKey)}
+            className="w-full"
+          >
+            <TabsList className="w-full">
+              {Object.values(PERIODS).map((period) => (
+                <TabsTrigger
+                  key={period.key}
+                  value={period.key}
+                  className="flex-1"
+                >
+                  {period.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+
+          <div className="mx-auto aspect-square max-h-[200px] w-full">
+            <ChartContainer
+              config={chartConfig}
+              className="h-full w-full overflow-visible"
+            >
+              <PieChart className="overflow-visible">
+                <ChartTooltip content={<CustomTooltip />} />
+                <Pie
+                  data={currentData}
+                  innerRadius={35}
+                  outerRadius={100}
+                  dataKey="visitors"
+                  nameKey="browser"
+                  strokeWidth={4}
+                  stroke="var(--background)"
+                  cornerRadius={8}
+                  paddingAngle={2}
+                  isAnimationActive={false}
+                >
+                  <LabelList
+                    dataKey="visitors"
+                    stroke="none"
+                    fontSize={10}
+                    fontWeight={600}
+                    fill="white"
+                    formatter={(value: number) =>
+                      value >= 1000 ? `${(value / 1000).toFixed(1)}k` : value
+                    }
+                  />
+                </Pie>
+              </PieChart>
+            </ChartContainer>
+          </div>
+
+          <div className="text-muted-foreground flex items-center gap-2 px-2 text-xs">
+            <InfoIcon className="size-3.5" aria-hidden="true" />
+            <span>Visitor data based on unique browser signatures.</span>
+          </div>
+        </div>
+      </FramePanel>
+    </Frame>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-27/components/data.ts b/apps/web/src/components/blocks/chart-27/components/data.ts
new file mode 100644
index 0000000..af4ef80
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-27/components/data.ts
@@ -0,0 +1,51 @@
+import { ChartConfig } from "@evobgp/ui/components/chart"
+
+// ── Types ──
+
+export type PeriodKey = "5D" | "2W" | "1M"
+
+// ── Config ──
+
+export const chartConfig = {
+  visitors: { label: "Visitors" },
+  chrome: { label: "Chrome", color: "var(--color-blue-500)" },
+  safari: { label: "Safari", color: "var(--color-sky-500)" },
+  firefox: { label: "Firefox", color: "var(--color-orange-500)" },
+  edge: { label: "Edge", color: "var(--color-indigo-500)" },
+  other: { label: "Other", color: "var(--color-slate-500)" },
+} satisfies ChartConfig
+
+export const PERIODS = {
+  "5D": { key: "5D", label: "5D" },
+  "2W": { key: "2W", label: "2W" },
+  "1M": { key: "1M", label: "1M" },
+} as const
+
+// ── Data ──
+
+export const browserData: Record<
+  PeriodKey,
+  { browser: string; visitors: number; fill: string }[]
+> = {
+  "5D": [
+    { browser: "chrome", visitors: 275, fill: "var(--color-blue-500)" },
+    { browser: "safari", visitors: 200, fill: "var(--color-sky-500)" },
+    { browser: "firefox", visitors: 187, fill: "var(--color-orange-500)" },
+    { browser: "edge", visitors: 173, fill: "var(--color-indigo-500)" },
+    { browser: "other", visitors: 90, fill: "var(--color-slate-500)" },
+  ],
+  "2W": [
+    { browser: "chrome", visitors: 1275, fill: "var(--color-blue-500)" },
+    { browser: "safari", visitors: 800, fill: "var(--color-sky-500)" },
+    { browser: "firefox", visitors: 587, fill: "var(--color-orange-500)" },
+    { browser: "edge", visitors: 473, fill: "var(--color-indigo-500)" },
+    { browser: "other", visitors: 290, fill: "var(--color-slate-500)" },
+  ],
+  "1M": [
+    { browser: "chrome", visitors: 4275, fill: "var(--color-blue-500)" },
+    { browser: "safari", visitors: 3200, fill: "var(--color-sky-500)" },
+    { browser: "firefox", visitors: 2187, fill: "var(--color-orange-500)" },
+    { browser: "edge", visitors: 1873, fill: "var(--color-indigo-500)" },
+    { browser: "other", visitors: 1090, fill: "var(--color-slate-500)" },
+  ],
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-27/page.tsx b/apps/web/src/components/blocks/chart-27/page.tsx
new file mode 100644
index 0000000..11380d5
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-27/page.tsx
@@ -0,0 +1,9 @@
+import { Chart } from "./components/chart"
+
+export function Page() {
+  return (
+    <div className="flex w-full items-center justify-center p-10 md:p-20">
+      <Chart />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-base-6/components/columns.tsx b/apps/web/src/components/blocks/data-grid-base-6/components/columns.tsx
new file mode 100644
index 0000000..cec1ac1
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-base-6/components/columns.tsx
@@ -0,0 +1,241 @@
+import { DataGridColumnHeader } from "@/components/reui/data-grid/data-grid-column-header"
+import { type ColumnDef } from "@tanstack/react-table"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@evobgp/ui/components/avatar"
+import { Button } from "@evobgp/ui/components/button"
+import { type MemberBillingStatus, type MemberRecord } from "./data"
+import { EyeIcon, PencilIcon, Trash2Icon } from "lucide-react"
+
+export type MemberRowAction = "view" | "edit" | "delete"
+
+const billingStatusDotClass: Record<MemberBillingStatus, string> = {
+  Active: "bg-emerald-500",
+  "Pending invoice": "bg-sky-500",
+  "Manual review": "bg-amber-500",
+  "Past due": "bg-rose-500",
+}
+
+function MemberRowActions({
+  member,
+  onAction,
+}: {
+  member: MemberRecord
+  onAction: (action: MemberRowAction, member: MemberRecord) => void
+}) {
+  return (
+    <div className="pointer-events-none flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-focus-within/member-row:pointer-events-auto group-focus-within/member-row:opacity-100 group-hover/member-row:pointer-events-auto group-hover/member-row:opacity-100">
+      <Button
+        type="button"
+        size="icon-sm"
+        variant="ghost"
+        aria-label={`View ${member.fullName}`}
+        onClick={(event) => {
+          event.stopPropagation()
+          onAction("view", member)
+        }}
+      >
+        <EyeIcon aria-hidden="true" />
+      </Button>
+      <Button
+        type="button"
+        size="icon-sm"
+        variant="ghost"
+        aria-label={`Edit ${member.fullName}`}
+        onClick={(event) => {
+          event.stopPropagation()
+          onAction("edit", member)
+        }}
+      >
+        <PencilIcon aria-hidden="true" />
+      </Button>
+      <Button
+        type="button"
+        size="icon-sm"
+        variant="ghost"
+        className="hover:text-destructive"
+        aria-label={`Delete ${member.fullName}`}
+        onClick={(event) => {
+          event.stopPropagation()
+          onAction("delete", member)
+        }}
+      >
+        <Trash2Icon aria-hidden="true" />
+      </Button>
+    </div>
+  )
+}
+
+function MemberCell({
+  member,
+  onAction,
+}: {
+  member: MemberRecord
+  onAction: (action: MemberRowAction, member: MemberRecord) => void
+}) {
+  return (
+    <div className="flex min-w-0 items-center gap-2">
+      <Avatar className="size-8 shrink-0">
+        <AvatarImage src={member.avatarSrc} alt={member.fullName} />
+        <AvatarFallback>{member.initials}</AvatarFallback>
+      </Avatar>
+
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-medium">{member.fullName}</div>
+        <div className="text-muted-foreground truncate text-sm">
+          {member.displayName}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <MemberRowActions member={member} onAction={onAction} />
+    </div>
+  )
+}
+
+function BillingStatusCell({
+  billingStatus,
+}: {
+  billingStatus: MemberBillingStatus
+}) {
+  return (
+    <div className="flex min-w-0 items-center gap-2">
+      <span
+        className={cn(
+          "size-1.5 shrink-0 rounded-full",
+          billingStatusDotClass[billingStatus]
+        )}
+        aria-hidden="true"
+      />
+      <span className="truncate text-sm">{billingStatus}</span>
+    </div>
+  )
+}
+
+export function createMembersGridColumns({
+  onAction,
+}: {
+  onAction: (action: MemberRowAction, member: MemberRecord) => void
+}): ColumnDef<MemberRecord>[] {
+  return [
+    {
+      accessorKey: "fullName",
+      id: "fullName",
+      header: ({ column }) => (
+        <DataGridColumnHeader column={column} visibility={true} />
+      ),
+      cell: ({ row }) => (
+        <MemberCell member={row.original} onAction={onAction} />
+      ),
+      size: 255,
+      enableSorting: true,
+      enableHiding: false,
+      enableResizing: false,
+      meta: {
+        headerTitle: "Member",
+      },
+    },
+    {
+      accessorKey: "email",
+      id: "email",
+      header: ({ column }) => (
+        <DataGridColumnHeader column={column} visibility={true} />
+      ),
+      cell: ({ row }) => (
+        <a
+          href={`mailto:${row.original.email}`}
+          className="hover:text-primary block truncate text-sm transition-colors hover:underline"
+          title={row.original.email}
+        >
+          {row.original.email}
+        </a>
+      ),
+      size: 220,
+      enableSorting: true,
+      enableHiding: false,
+      enableResizing: false,
+      meta: {
+        headerTitle: "Email",
+      },
+    },
+    {
+      accessorKey: "role",
+      id: "role",
+      header: ({ column }) => (
+        <DataGridColumnHeader column={column} visibility={true} />
+      ),
+      cell: ({ row }) => (
+        <span className="block truncate text-sm">{row.original.role}</span>
+      ),
+      size: 120,
+      enableSorting: true,
+      enableHiding: false,
+      enableResizing: false,
+      meta: {
+        headerTitle: "Role",
+      },
+    },
+    {
+      accessorKey: "billingStatus",
+      id: "billingStatus",
+      header: ({ column }) => (
+        <DataGridColumnHeader column={column} visibility={true} />
+      ),
+      cell: ({ row }) => (
+        <BillingStatusCell billingStatus={row.original.billingStatus} />
+      ),
+      size: 150,
+      enableSorting: true,
+      enableHiding: false,
+      enableResizing: false,
+      meta: {
+        headerTitle: "Billing status",
+      },
+    },
+    {
+      accessorKey: "authProvider",
+      id: "authProvider",
+      header: ({ column }) => (
+        <DataGridColumnHeader column={column} visibility={true} />
+      ),
+      cell: ({ row }) => (
+        <span className="block truncate text-sm">
+          {row.original.authProvider}
+        </span>
+      ),
+      size: 130,
+      enableSorting: true,
+      enableHiding: false,
+      enableResizing: false,
+      meta: {
+        headerTitle: "Authentication",
+      },
+    },
+    {
+      accessorKey: "joinedAt",
+      id: "joinedAt",
+      header: ({ column }) => (
+        <DataGridColumnHeader column={column} visibility={true} />
+      ),
+      cell: ({ row }) => (
+        <span className="text-muted-foreground block truncate text-sm tabular-nums">
+          {row.original.joinedAt}
+        </span>
+      ),
+      sortingFn: (rowA, rowB) =>
+        new Date(rowA.original.joinedAt).getTime() -
+        new Date(rowB.original.joinedAt).getTime(),
+      size: 130,
+      enableSorting: true,
+      enableHiding: false,
+      enableResizing: false,
+      meta: {
+        headerTitle: "Joining date",
+      },
+    },
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-base-6/components/data-grid-view.tsx b/apps/web/src/components/blocks/data-grid-base-6/components/data-grid-view.tsx
new file mode 100644
index 0000000..1d1696d
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-base-6/components/data-grid-view.tsx
@@ -0,0 +1,426 @@
+import { useCallback, useMemo, useState } from "react"
+import { Badge } from "@/components/reui/badge"
+import { DataGrid } from "@/components/reui/data-grid/data-grid"
+import { DataGridPagination } from "@/components/reui/data-grid/data-grid-pagination"
+import { DataGridScrollArea } from "@/components/reui/data-grid/data-grid-scroll-area"
+import { DataGridTable } from "@/components/reui/data-grid/data-grid-table"
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type PaginationState,
+  type SortingState,
+} from "@tanstack/react-table"
+import { toast } from "sonner"
+
+import { Button } from "@evobgp/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@evobgp/ui/components/input-group"
+import { Separator } from "@evobgp/ui/components/separator"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@evobgp/ui/components/tabs"
+import { createMembersGridColumns, type MemberRowAction } from "./columns"
+import {
+  MEMBER_AUTH_PROVIDER_OPTIONS,
+  MEMBER_BILLING_STATUS_OPTIONS,
+  MEMBER_RECORDS,
+  MEMBER_ROLE_OPTIONS,
+  type FilterOption,
+  type MemberAuthProvider,
+  type MemberBillingStatus,
+  type MemberRecord,
+  type MemberRole,
+} from "./data"
+import { SearchIcon, XIcon, ChevronDownIcon } from "lucide-react"
+
+type FilterTabContentProps<T extends string> = {
+  options: readonly FilterOption<T>[]
+  selectedValues: T[]
+  onToggle: (value: T, checked: boolean) => void
+}
+
+function getMemberSearchBlob(member: MemberRecord) {
+  return [
+    member.fullName,
+    member.displayName,
+    member.email,
+    member.role,
+    member.billingStatus,
+    member.authProvider,
+    member.joinedAt,
+  ]
+    .join(" ")
+    .toLowerCase()
+}
+
+function toggleFilterValue<T extends string>(
+  current: T[],
+  value: T,
+  checked: boolean
+) {
+  if (checked) {
+    return current.includes(value) ? current : [...current, value]
+  }
+
+  return current.filter((item) => item !== value)
+}
+
+function FilterTabContent<T extends string>({
+  options,
+  selectedValues,
+  onToggle,
+}: FilterTabContentProps<T>) {
+  return (
+    <DropdownMenuGroup>
+      {options.map((option) => (
+        <DropdownMenuCheckboxItem
+          key={option.value}
+          checked={selectedValues.includes(option.value)}
+          closeOnClick={false}
+          onCheckedChange={(checked) =>
+            onToggle(option.value, checked === true)
+          }
+        >
+          {option.label}
+        </DropdownMenuCheckboxItem>
+      ))}
+    </DropdownMenuGroup>
+  )
+}
+
+export function MembersDataGridView() {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 5,
+  })
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: "fullName", desc: false },
+  ])
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedRoles, setSelectedRoles] = useState<MemberRole[]>([])
+  const [selectedBillingStatuses, setSelectedBillingStatuses] = useState<
+    MemberBillingStatus[]
+  >([])
+  const [selectedAuthProviders, setSelectedAuthProviders] = useState<
+    MemberAuthProvider[]
+  >([])
+
+  const filteredData = useMemo(() => {
+    const normalizedSearchQuery = searchQuery.trim().toLowerCase()
+
+    return MEMBER_RECORDS.filter((member) => {
+      const matchesSearch =
+        normalizedSearchQuery.length === 0 ||
+        getMemberSearchBlob(member).includes(normalizedSearchQuery)
+      const matchesRole =
+        selectedRoles.length === 0 || selectedRoles.includes(member.role)
+      const matchesBillingStatus =
+        selectedBillingStatuses.length === 0 ||
+        selectedBillingStatuses.includes(member.billingStatus)
+      const matchesAuthProvider =
+        selectedAuthProviders.length === 0 ||
+        selectedAuthProviders.includes(member.authProvider)
+
+      return (
+        matchesSearch &&
+        matchesRole &&
+        matchesBillingStatus &&
+        matchesAuthProvider
+      )
+    })
+  }, [
+    searchQuery,
+    selectedAuthProviders,
+    selectedBillingStatuses,
+    selectedRoles,
+  ])
+
+  const activeFilterCount =
+    selectedRoles.length +
+    selectedBillingStatuses.length +
+    selectedAuthProviders.length
+
+  const handleMemberAction = useCallback(
+    (action: MemberRowAction, member: MemberRecord) => {
+      if (action === "view") {
+        toast.info("Open member", {
+          description: `Review ${member.fullName}'s profile and recent activity.`,
+        })
+        return
+      }
+
+      if (action === "edit") {
+        toast.message("Edit member", {
+          description: `Open the access and profile editor for ${member.fullName}.`,
+        })
+        return
+      }
+
+      toast.message("Delete member", {
+        description: `Wire this action to your member removal flow for ${member.fullName}.`,
+      })
+    },
+    []
+  )
+
+  const columns = useMemo(
+    () => createMembersGridColumns({ onAction: handleMemberAction }),
+    [handleMemberAction]
+  )
+
+  const table = useReactTable({
+    columns,
+    data: filteredData,
+    pageCount: Math.ceil(filteredData.length / pagination.pageSize),
+    getRowId: (row) => row.id,
+    state: {
+      pagination,
+      sorting,
+    },
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  })
+
+  const handleSearchChange = (value: string) => {
+    setSearchQuery(value)
+    setPagination((current) => ({
+      ...current,
+      pageIndex: 0,
+    }))
+  }
+
+  const handleRoleToggle = (value: MemberRole, checked: boolean) => {
+    setSelectedRoles((current) => toggleFilterValue(current, value, checked))
+    setPagination((current) => ({
+      ...current,
+      pageIndex: 0,
+    }))
+  }
+
+  const handleBillingStatusToggle = (
+    value: MemberBillingStatus,
+    checked: boolean
+  ) => {
+    setSelectedBillingStatuses((current) =>
+      toggleFilterValue(current, value, checked)
+    )
+    setPagination((current) => ({
+      ...current,
+      pageIndex: 0,
+    }))
+  }
+
+  const handleAuthProviderToggle = (
+    value: MemberAuthProvider,
+    checked: boolean
+  ) => {
+    setSelectedAuthProviders((current) =>
+      toggleFilterValue(current, value, checked)
+    )
+    setPagination((current) => ({
+      ...current,
+      pageIndex: 0,
+    }))
+  }
+
+  const handleResetFilters = () => {
+    setSelectedRoles([])
+    setSelectedBillingStatuses([])
+    setSelectedAuthProviders([])
+    setPagination((current) => ({
+      ...current,
+      pageIndex: 0,
+    }))
+  }
+
+  const handleImport = () => {
+    toast.message("Import members", {
+      description:
+        "Connect this button to your CSV import, directory sync, or SCIM provisioning flow.",
+    })
+  }
+
+  const handleAddMember = () => {
+    toast.message("Add member", {
+      description:
+        "Open your invite drawer or provisioning dialog from this primary action.",
+    })
+  }
+
+  return (
+    <DataGrid
+      table={table}
+      recordCount={filteredData.length}
+      emptyMessage={
+        filteredData.length === 0
+          ? "No members match your current search or filters."
+          : undefined
+      }
+      tableLayout={{
+        dense: true,
+        headerSticky: false,
+        columnsVisibility: false,
+        columnsResizable: false,
+        columnsMovable: false,
+      }}
+      tableClassNames={{
+        bodyRow: "group/member-row",
+      }}
+    >
+      {/* Heading */}
+      <div className="flex w-full flex-col">
+        <div className="flex flex-col gap-4 py-4 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex min-w-0 items-center gap-2.5">
+            <h2 className="truncate text-2xl font-semibold tracking-tight">
+              Members
+            </h2>
+            <Badge variant="outline" size="sm" radius="full">
+              {filteredData.length}
+            </Badge>
+          </div>
+
+          <div className="flex w-full flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center lg:ml-auto lg:w-auto lg:flex-nowrap lg:justify-end">
+            <InputGroup className="w-full sm:w-72">
+              <InputGroupAddon align="inline-start">
+                <SearchIcon aria-hidden="true" />
+              </InputGroupAddon>
+              <InputGroupInput
+                placeholder="Search..."
+                aria-label="Search members"
+                value={searchQuery}
+                onChange={(event) => handleSearchChange(event.target.value)}
+              />
+              {searchQuery.length > 0 ? (
+                <InputGroupAddon align="inline-end">
+                  <InputGroupButton
+                    type="button"
+                    aria-label="Clear search"
+                    size="icon-xs"
+                    onClick={() => handleSearchChange("")}
+                  >
+                    <XIcon aria-hidden="true" />
+                  </InputGroupButton>
+                </InputGroupAddon>
+              ) : null}
+            </InputGroup>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                render={
+                  <Button
+                    type="button"
+                    variant="outline"
+                    aria-label="Filter members"
+                  >
+                    Filters
+                    {activeFilterCount > 0 ? (
+                      <Badge variant="outline" size="sm" radius="full">
+                        {activeFilterCount}
+                      </Badge>
+                    ) : null}
+                    <ChevronDownIcon data-icon="inline-end" aria-hidden="true" />
+                  </Button>
+                }
+              />
+              <DropdownMenuContent align="end" className="w-64">
+                <Tabs defaultValue="role" className="w-full">
+                  <div className="p-1">
+                    <TabsList className="grid w-full grid-cols-3">
+                      <TabsTrigger value="role">Role</TabsTrigger>
+                      <TabsTrigger value="billing">Billing</TabsTrigger>
+                      <TabsTrigger value="authentication">Auth</TabsTrigger>
+                    </TabsList>
+                  </div>
+                  <TabsContent value="role" className="m-0 px-0.5 pb-1">
+                    <FilterTabContent
+                      options={MEMBER_ROLE_OPTIONS}
+                      selectedValues={selectedRoles}
+                      onToggle={handleRoleToggle}
+                    />
+                  </TabsContent>
+                  <TabsContent value="billing" className="m-0 px-0.5 pb-1">
+                    <FilterTabContent
+                      options={MEMBER_BILLING_STATUS_OPTIONS}
+                      selectedValues={selectedBillingStatuses}
+                      onToggle={handleBillingStatusToggle}
+                    />
+                  </TabsContent>
+                  <TabsContent
+                    value="authentication"
+                    className="m-0 px-0.5 pb-1"
+                  >
+                    <FilterTabContent
+                      options={MEMBER_AUTH_PROVIDER_OPTIONS}
+                      selectedValues={selectedAuthProviders}
+                      onToggle={handleAuthProviderToggle}
+                    />
+                  </TabsContent>
+                </Tabs>
+                {activeFilterCount > 0 ? (
+                  <>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      closeOnClick={false}
+                      onClick={handleResetFilters}
+                    >
+                      Reset filters
+                    </DropdownMenuItem>
+                  </>
+                ) : null}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <Button type="button" variant="outline" onClick={handleImport}>
+              Import
+            </Button>
+
+            <Button type="button" onClick={handleAddMember}>
+              Add member
+            </Button>
+          </div>
+        </div>
+
+        <Separator />
+
+        <DataGridScrollArea>
+          <DataGridTable />
+        </DataGridScrollArea>
+
+        <Separator />
+
+        <div className="py-3">
+          {filteredData.length > 0 ? (
+            <DataGridPagination
+              sizes={[5, 10, 20]}
+              info="{from} - {to} of {count} members"
+              className="py-0"
+            />
+          ) : (
+            <p className="text-muted-foreground text-sm">0 members</p>
+          )}
+        </div>
+      </div>
+    </DataGrid>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-base-6/components/data.tsx b/apps/web/src/components/blocks/data-grid-base-6/components/data.tsx
new file mode 100644
index 0000000..ac2a220
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-base-6/components/data.tsx
@@ -0,0 +1,154 @@
+export type FilterOption<T extends string> = {
+  value: T
+  label: string
+}
+
+export const MEMBER_ROLE_OPTIONS = [
+  { value: "Admin", label: "Admin" },
+  { value: "Finance", label: "Finance" },
+  { value: "Support", label: "Support" },
+  { value: "Operations", label: "Operations" },
+  { value: "Product", label: "Product" },
+  { value: "Security", label: "Security" },
+  { value: "Growth", label: "Growth" },
+] as const satisfies readonly FilterOption<string>[]
+
+export const MEMBER_BILLING_STATUS_OPTIONS = [
+  { value: "Active", label: "Active" },
+  { value: "Pending invoice", label: "Pending invoice" },
+  { value: "Manual review", label: "Manual review" },
+  { value: "Past due", label: "Past due" },
+] as const satisfies readonly FilterOption<string>[]
+
+export const MEMBER_AUTH_PROVIDER_OPTIONS = [
+  { value: "Google", label: "Google" },
+  { value: "GitHub", label: "GitHub" },
+  { value: "Okta SSO", label: "Okta SSO" },
+  { value: "Passwordless", label: "Passwordless" },
+] as const satisfies readonly FilterOption<string>[]
+
+export type MemberRole = (typeof MEMBER_ROLE_OPTIONS)[number]["value"]
+export type MemberBillingStatus =
+  (typeof MEMBER_BILLING_STATUS_OPTIONS)[number]["value"]
+export type MemberAuthProvider =
+  (typeof MEMBER_AUTH_PROVIDER_OPTIONS)[number]["value"]
+
+export type MemberRecord = {
+  id: string
+  fullName: string
+  displayName: string
+  email: string
+  role: MemberRole
+  billingStatus: MemberBillingStatus
+  authProvider: MemberAuthProvider
+  joinedAt: string
+  avatarSrc: string
+  initials: string
+}
+
+export const MEMBER_RECORDS: MemberRecord[] = [
+  {
+    id: "lena-torres",
+    fullName: "Lena Torres",
+    displayName: "lena.torres",
+    email: "lena@northline.app",
+    role: "Admin",
+    billingStatus: "Active",
+    authProvider: "Google",
+    joinedAt: "Apr 17, 2026",
+    avatarSrc:
+      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&dpr=2&q=80",
+    initials: "LT",
+  },
+  {
+    id: "marcus-hale",
+    fullName: "Marcus Hale",
+    displayName: "marcus.hale",
+    email: "marcus@northline.app",
+    role: "Finance",
+    billingStatus: "Pending invoice",
+    authProvider: "Okta SSO",
+    joinedAt: "Apr 12, 2026",
+    avatarSrc:
+      "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&dpr=2&q=80",
+    initials: "MH",
+  },
+  {
+    id: "imani-brooks",
+    fullName: "Imani Brooks",
+    displayName: "imani.brooks",
+    email: "imani@northline.app",
+    role: "Support",
+    billingStatus: "Active",
+    authProvider: "Passwordless",
+    joinedAt: "Mar 29, 2026",
+    avatarSrc:
+      "https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=80&h=80&dpr=2&q=80",
+    initials: "IB",
+  },
+  {
+    id: "theo-mercer",
+    fullName: "Theo Mercer",
+    displayName: "theo.mercer",
+    email: "theo@northline.app",
+    role: "Operations",
+    billingStatus: "Manual review",
+    authProvider: "GitHub",
+    joinedAt: "Mar 18, 2026",
+    avatarSrc:
+      "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=80&h=80&dpr=2&q=80",
+    initials: "TM",
+  },
+  {
+    id: "noor-hadid",
+    fullName: "Noor Hadid",
+    displayName: "noor.hadid",
+    email: "noor@northline.app",
+    role: "Product",
+    billingStatus: "Active",
+    authProvider: "Google",
+    joinedAt: "Feb 27, 2026",
+    avatarSrc:
+      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&dpr=2&q=80",
+    initials: "NH",
+  },
+  {
+    id: "avery-quinn",
+    fullName: "Avery Quinn",
+    displayName: "avery.quinn",
+    email: "avery@northline.app",
+    role: "Security",
+    billingStatus: "Past due",
+    authProvider: "Okta SSO",
+    joinedAt: "Feb 10, 2026",
+    avatarSrc:
+      "https://images.unsplash.com/photo-1504593811423-6dd665756598?w=80&h=80&dpr=2&q=80",
+    initials: "AQ",
+  },
+  {
+    id: "sofia-lane",
+    fullName: "Sofia Lane",
+    displayName: "sofia.lane",
+    email: "sofia@northline.app",
+    role: "Finance",
+    billingStatus: "Active",
+    authProvider: "Google",
+    joinedAt: "Jan 23, 2026",
+    avatarSrc:
+      "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=80&h=80&dpr=2&q=80",
+    initials: "SL",
+  },
+  {
+    id: "dev-rana",
+    fullName: "Dev Rana",
+    displayName: "dev.rana",
+    email: "dev@northline.app",
+    role: "Growth",
+    billingStatus: "Pending invoice",
+    authProvider: "GitHub",
+    joinedAt: "Jan 11, 2026",
+    avatarSrc:
+      "https://images.unsplash.com/photo-1504257432389-52343af06ae3?w=80&h=80&dpr=2&q=80",
+    initials: "DR",
+  },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-base-6/page.tsx b/apps/web/src/components/blocks/data-grid-base-6/page.tsx
new file mode 100644
index 0000000..045c84f
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-base-6/page.tsx
@@ -0,0 +1,15 @@
+import { MembersDataGridView } from "./components/data-grid-view"
+
+export function Page() {
+  return (
+    <main
+      className="mx-auto flex min-h-svh w-full max-w-7xl items-start justify-center p-8 pt-12"
+      aria-labelledby="page-heading"
+    >
+      <h1 id="page-heading" className="sr-only">
+        Members data grid
+      </h1>
+      <MembersDataGridView />
+    </main>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-expansion-3/components/columns.tsx b/apps/web/src/components/blocks/data-grid-expansion-3/components/columns.tsx
new file mode 100644
index 0000000..144c86d
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-expansion-3/components/columns.tsx
@@ -0,0 +1,512 @@
+import { memo, type ComponentProps } from "react"
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+import { Badge } from "@/components/reui/badge"
+import { DataGridColumnHeader } from "@/components/reui/data-grid/data-grid-column-header"
+import { type ColumnDef } from "@tanstack/react-table"
+import { toast } from "sonner"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@evobgp/ui/components/avatar"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+import { type IReleaseReview, type ReviewStatus, type RiskLevel } from "./data"
+import { ReleaseCheckRail } from "./release-check-rail"
+import { ChevronRightIcon, MoreHorizontalIcon, EyeIcon, CircleCheckIcon, CopyIcon, FlagIcon } from "lucide-react"
+
+export type ReviewAction = "open" | "approve" | "escalate"
+
+const riskVariant: Record<RiskLevel, ComponentProps<typeof Badge>["variant"]> =
+  {
+    Critical: "destructive-light",
+    High: "warning-light",
+    Medium: "info-light",
+    Low: "secondary",
+  }
+
+const statusConfig: Record<
+  ReviewStatus,
+  {
+    variant: ComponentProps<typeof Badge>["variant"]
+    dotClassName: string
+  }
+> = {
+  "Needs approval": {
+    variant: "warning-outline",
+    dotClassName: "bg-amber-500 dark:bg-amber-400",
+  },
+  Blocked: {
+    variant: "destructive-outline",
+    dotClassName: "bg-rose-500 dark:bg-rose-400",
+  },
+  Scheduled: {
+    variant: "info-outline",
+    dotClassName: "bg-sky-500 dark:bg-sky-400",
+  },
+  Ready: {
+    variant: "success-outline",
+    dotClassName: "bg-emerald-500 dark:bg-emerald-400",
+  },
+  Shipped: {
+    variant: "outline",
+    dotClassName: "bg-zinc-500 dark:bg-zinc-400",
+  },
+}
+
+function DotSeparator() {
+  return (
+    <span
+      className="size-1 shrink-0 rounded-full bg-gray-400 dark:bg-gray-500"
+      aria-hidden="true"
+    />
+  )
+}
+
+function initials(name: string) {
+  return name
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+}
+
+function readinessPercent(review: IReleaseReview) {
+  if (review.checksTotal === 0) return 100
+
+  return Math.round((review.checksCompleted / review.checksTotal) * 100)
+}
+
+function readinessRingColor(percent: number) {
+  if (percent >= 100) return "text-emerald-500"
+  if (percent >= 50) return "text-amber-500"
+  return "text-rose-500"
+}
+
+export const StatusBadge = memo(function StatusBadge({
+  status,
+}: {
+  status: ReviewStatus
+}) {
+  return (
+    <Badge variant={statusConfig[status].variant}>
+      <span
+        className={cn(
+          "size-1.5 shrink-0 rounded-full!",
+          statusConfig[status].dotClassName
+        )}
+        aria-hidden="true"
+      />
+      {status}
+    </Badge>
+  )
+})
+
+export const RiskBadge = memo(function RiskBadge({
+  risk,
+}: {
+  risk: RiskLevel
+}) {
+  return <Badge variant={riskVariant[risk]}>{risk}</Badge>
+})
+
+const ExpandReleaseButton = memo(function ExpandReleaseButton({
+  expanded,
+  onToggle,
+}: {
+  expanded: boolean
+  onToggle: () => void
+}) {
+  return (
+    <Button
+      type="button"
+      size="icon-sm"
+      variant="ghost"
+      aria-label={
+        expanded ? "Collapse rollout checks" : "Expand rollout checks"
+      }
+      className="text-muted-foreground hover:text-foreground size-6 shrink-0 rounded-md p-0 shadow-none"
+      onClick={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        onToggle()
+      }}
+    >
+      <ChevronRightIcon className={cn(
+                    "size-3.5 shrink-0 transition-transform duration-150",
+                    expanded && "rotate-90"
+                  )} aria-hidden="true" />
+    </Button>
+  )
+})
+
+const RequestCell = memo(function RequestCell({
+  review,
+  showChecks,
+  canExpand,
+  isExpanded,
+  onToggleExpand,
+}: {
+  review: IReleaseReview
+  showChecks: boolean
+  canExpand: boolean
+  isExpanded: boolean
+  onToggleExpand: () => void
+}) {
+  return (
+    <div className="flex min-w-0 items-center gap-2.5">
+      {showChecks && canExpand ? (
+        <ExpandReleaseButton expanded={isExpanded} onToggle={onToggleExpand} />
+      ) : (
+        <span className="size-6 shrink-0" aria-hidden="true" />
+      )}
+
+      <div className="flex min-w-0 flex-col gap-1.5">
+        <span className="text-foreground truncate text-sm leading-5 font-medium">
+          {review.title}
+        </span>
+        <div className="text-muted-foreground flex min-w-0 flex-wrap items-center gap-2 text-xs leading-4">
+          <span className="shrink-0 font-mono tracking-wide uppercase">
+            {review.changeKey}
+          </span>
+          <DotSeparator />
+          <span className="truncate">{review.service.label}</span>
+          <DotSeparator />
+          <span className="shrink-0">{review.environment}</span>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+const OwnerCell = memo(function OwnerCell({
+  review,
+}: {
+  review: IReleaseReview
+}) {
+  const owner = review.owner
+
+  return (
+    <div className="flex min-w-0 items-center gap-2.5">
+      <Avatar className="size-7 shrink-0">
+        {owner.avatar ? (
+          <AvatarImage src={owner.avatar} alt={owner.name} />
+        ) : null}
+        <AvatarFallback>{initials(owner.name)}</AvatarFallback>
+      </Avatar>
+      <div className="flex min-w-0 flex-col gap-0.5">
+        <span className="text-foreground truncate text-sm font-medium">
+          {owner.name}
+        </span>
+        <span className="text-muted-foreground truncate text-xs">
+          {owner.role}
+        </span>
+      </div>
+    </div>
+  )
+})
+
+const WindowCell = memo(function WindowCell({
+  review,
+}: {
+  review: IReleaseReview
+}) {
+  return (
+    <div className="flex min-w-0 flex-col gap-0.5">
+      <span className="text-foreground text-sm font-medium">
+        {review.windowLabel}
+      </span>
+      <div className="text-muted-foreground flex min-w-0 items-center gap-2 text-xs">
+        <span className="truncate">{review.windowDurationLabel}</span>
+        <DotSeparator />
+        <span className="truncate">{review.blastRadiusLabel}</span>
+      </div>
+    </div>
+  )
+})
+
+const ApprovalsCell = memo(function ApprovalsCell({
+  review,
+}: {
+  review: IReleaseReview
+}) {
+  const pending = review.approvalsRequired - review.approvalsApproved
+  const isComplete = pending <= 0
+
+  return (
+    <div className="flex min-w-0 flex-col gap-0.5">
+      <span className="text-foreground text-sm font-medium tabular-nums">
+        {review.approvalsApproved}/{review.approvalsRequired}
+      </span>
+      <span
+        className={cn(
+          "text-xs tabular-nums",
+          isComplete
+            ? "text-emerald-600 dark:text-emerald-400"
+            : "text-muted-foreground"
+        )}
+      >
+        {isComplete ? "Complete" : `${pending} pending`}
+      </span>
+    </div>
+  )
+})
+
+const ReadinessCell = memo(function ReadinessCell({
+  review,
+}: {
+  review: IReleaseReview
+}) {
+  const percent = readinessPercent(review)
+  const radius = 9
+  const circumference = 2 * Math.PI * radius
+  const dashOffset = circumference - (percent / 100) * circumference
+  const toneClassName = readinessRingColor(percent)
+
+  return (
+    <div className="flex items-center gap-2">
+      <svg
+        viewBox="0 0 24 24"
+        className={cn("size-5 shrink-0", toneClassName)}
+        aria-hidden="true"
+      >
+        <circle
+          cx="12"
+          cy="12"
+          r={radius}
+          fill="none"
+          className="stroke-border"
+          strokeWidth="2.5"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r={radius}
+          fill="none"
+          className="stroke-current"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={dashOffset}
+          transform="rotate(-90 12 12)"
+        />
+      </svg>
+      <span className="text-foreground text-sm tabular-nums">{percent}%</span>
+    </div>
+  )
+})
+
+const UpdatedCell = memo(function UpdatedCell({
+  review,
+}: {
+  review: IReleaseReview
+}) {
+  return (
+    <span className="text-muted-foreground text-sm">{review.updatedLabel}</span>
+  )
+})
+
+function ReviewActionsCell({
+  review,
+  onAction,
+}: {
+  review: IReleaseReview
+  onAction: (action: ReviewAction, review: IReleaseReview) => void
+}) {
+  const { copyToClipboard } = useCopyToClipboard()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            size="icon-sm"
+            variant="ghost"
+            aria-label={`Actions for ${review.changeKey}`}
+          />
+        }
+      >
+        <MoreHorizontalIcon aria-hidden="true" />
+      </DropdownMenuTrigger>
+      {/* Content */}
+      <DropdownMenuContent align="end" className="w-44">
+        <DropdownMenuGroup>
+          <DropdownMenuItem onClick={() => onAction("open", review)}>
+            <EyeIcon aria-hidden="true" />
+            Open review
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => onAction("approve", review)}>
+            <CircleCheckIcon aria-hidden="true" />
+            Approve window
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => {
+              copyToClipboard(review.changeKey)
+              toast.success("Change key copied", {
+                description: review.changeKey,
+              })
+            }}
+          >
+            <CopyIcon aria-hidden="true" />
+            Copy key
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => onAction("escalate", review)}>
+            <FlagIcon aria-hidden="true" />
+            Escalate risk
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export function createReleaseColumns({
+  onReviewAction,
+  showChecks,
+}: {
+  onReviewAction: (action: ReviewAction, review: IReleaseReview) => void
+  showChecks: boolean
+}): ColumnDef<IReleaseReview>[] {
+  return [
+    {
+      accessorFn: (review) => review.title,
+      id: "request",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Request" column={column} />
+      ),
+      cell: ({ row }) => (
+        <RequestCell
+          review={row.original}
+          showChecks={showChecks}
+          canExpand={row.getCanExpand()}
+          isExpanded={row.getIsExpanded()}
+          onToggleExpand={row.getToggleExpandedHandler()}
+        />
+      ),
+      enableHiding: false,
+      enableSorting: false,
+      size: 332,
+      minSize: 300,
+      meta: {
+        headerTitle: "Request",
+        autoSize: true,
+        headerClassName: "ps-5!",
+        cellClassName: "ps-5!",
+        expandedContent: (review: IReleaseReview) =>
+          showChecks ? <ReleaseCheckRail review={review} /> : null,
+      },
+    },
+    {
+      accessorFn: (review) => review.owner.name,
+      id: "owner",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Owner" column={column} />
+      ),
+      cell: ({ row }) => <OwnerCell review={row.original} />,
+      size: 168,
+      enableSorting: false,
+      meta: {
+        headerTitle: "Owner",
+      },
+    },
+    {
+      accessorFn: (review) => review.statusOrder,
+      id: "status",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Status" column={column} />
+      ),
+      cell: ({ row }) => <StatusBadge status={row.original.status} />,
+      size: 150,
+      enableSorting: false,
+      meta: {
+        headerTitle: "Status",
+      },
+    },
+    {
+      accessorFn: (review) => review.riskValue,
+      id: "risk",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Risk" column={column} />
+      ),
+      cell: ({ row }) => <RiskBadge risk={row.original.risk} />,
+      size: 116,
+      meta: {
+        headerTitle: "Risk",
+      },
+    },
+    {
+      accessorFn: (review) => review.windowStart,
+      id: "window",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Window" column={column} />
+      ),
+      cell: ({ row }) => <WindowCell review={row.original} />,
+      size: 200,
+      meta: {
+        headerTitle: "Window",
+      },
+    },
+    {
+      accessorFn: (review) => review.approvalsApproved,
+      id: "approvals",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Approvals" column={column} />
+      ),
+      cell: ({ row }) => <ApprovalsCell review={row.original} />,
+      size: 136,
+      enableSorting: false,
+      meta: {
+        headerTitle: "Approvals",
+      },
+    },
+    {
+      accessorFn: (review) => review.checksCompleted,
+      id: "readiness",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Readiness" column={column} />
+      ),
+      cell: ({ row }) => <ReadinessCell review={row.original} />,
+      size: 150,
+      enableSorting: false,
+      meta: {
+        headerTitle: "Readiness",
+      },
+    },
+    {
+      accessorFn: (review) => review.updatedAt,
+      id: "updated",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Updated" column={column} />
+      ),
+      cell: ({ row }) => <UpdatedCell review={row.original} />,
+      size: 120,
+      meta: {
+        headerTitle: "Updated",
+      },
+    },
+    {
+      id: "actions",
+      header: "",
+      enableSorting: false,
+      enableHiding: false,
+      cell: ({ row }) => (
+        <ReviewActionsCell review={row.original} onAction={onReviewAction} />
+      ),
+      size: 56,
+      meta: {
+        headerClassName: "pe-5!",
+        cellClassName: "pe-5!",
+      },
+    },
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-expansion-3/components/data-grid-view.tsx b/apps/web/src/components/blocks/data-grid-expansion-3/components/data-grid-view.tsx
new file mode 100644
index 0000000..2469fd2
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-expansion-3/components/data-grid-view.tsx
@@ -0,0 +1,691 @@
+"use client"
+
+import { useCallback, useMemo, useState } from "react"
+import {
+  DataGrid,
+  DataGridContainer,
+  getColumnHeaderLabel,
+} from "@/components/reui/data-grid/data-grid"
+import { DataGridPagination } from "@/components/reui/data-grid/data-grid-pagination"
+import { DataGridScrollArea } from "@/components/reui/data-grid/data-grid-scroll-area"
+import { DataGridTable } from "@/components/reui/data-grid/data-grid-table"
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getPaginationRowModel,
+  useReactTable,
+  type ExpandedState,
+  type PaginationState,
+  type SortingState,
+  type VisibilityState,
+} from "@tanstack/react-table"
+import { toast } from "sonner"
+
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Field,
+  FieldGroup,
+  FieldLabel,
+  FieldSeparator,
+} from "@evobgp/ui/components/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@evobgp/ui/components/input-group"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@evobgp/ui/components/popover"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@evobgp/ui/components/select"
+import { Separator } from "@evobgp/ui/components/separator"
+import { Switch } from "@evobgp/ui/components/switch"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@evobgp/ui/components/toggle-group"
+import { createReleaseColumns, type ReviewAction } from "./columns"
+import {
+  ORDERING_OPTIONS,
+  RELEASE_REVIEWS,
+  REVIEW_STATUS_ORDER,
+  SERVICE_OPTIONS,
+  type IReleaseReview,
+  type ReleaseOrdering,
+  type ReviewStatus,
+} from "./data"
+import { ReleaseReviewCard } from "./release-review-card"
+import { PlusIcon, SearchIcon, XIcon, Settings2Icon } from "lucide-react"
+
+type TableDensity = "compact" | "comfortable"
+type OrderDirection = "asc" | "desc"
+type ServiceFilter = IReleaseReview["service"]["label"] | "All services"
+type StatusFilter = ReviewStatus | "All statuses"
+
+const TABLE_DENSITY_OPTIONS: { value: TableDensity; label: string }[] = [
+  { value: "compact", label: "Compact" },
+  { value: "comfortable", label: "Comfortable" },
+]
+
+const ORDER_DIRECTION_OPTIONS: { value: OrderDirection; label: string }[] = [
+  { value: "asc", label: "Asc" },
+  { value: "desc", label: "Desc" },
+]
+
+function getDefaultExpandedReviewIds(reviews: IReleaseReview[]): ExpandedState {
+  const firstExpandableRow = reviews.find((review) => review.checks?.length)
+
+  if (!firstExpandableRow) {
+    return {}
+  }
+
+  return { [firstExpandableRow.id]: true }
+}
+
+function compareReviews(
+  reviewA: IReleaseReview,
+  reviewB: IReleaseReview,
+  sorting: SortingState
+) {
+  const primarySort = sorting[0]
+  if (!primarySort) return 0
+
+  const direction = primarySort.desc ? -1 : 1
+  let baseValue = 0
+
+  switch (primarySort.id) {
+    case "window":
+      baseValue =
+        reviewA.windowStart.localeCompare(reviewB.windowStart) ||
+        reviewA.changeKey.localeCompare(reviewB.changeKey)
+      break
+    case "updated":
+      baseValue =
+        reviewA.updatedAt.localeCompare(reviewB.updatedAt) ||
+        reviewA.changeKey.localeCompare(reviewB.changeKey)
+      break
+    case "risk":
+    default:
+      baseValue =
+        reviewA.riskValue - reviewB.riskValue ||
+        reviewA.changeKey.localeCompare(reviewB.changeKey)
+      break
+  }
+
+  return baseValue * direction
+}
+
+function sortIdToOrdering(sortId: string | undefined): ReleaseOrdering {
+  if (sortId === "window") return "window"
+  if (sortId === "updated") return "updated"
+  return "risk"
+}
+
+function buildSorting(ordering: ReleaseOrdering, direction: OrderDirection) {
+  const id =
+    ordering === "window"
+      ? "window"
+      : ordering === "updated"
+        ? "updated"
+        : "risk"
+
+  return [{ id, desc: direction === "desc" }]
+}
+
+function getReviewSearchBlob(review: IReleaseReview) {
+  return [
+    review.changeKey,
+    review.title,
+    review.service.label,
+    review.environment,
+    review.owner.name,
+    review.status,
+    review.risk,
+    review.blastRadiusLabel,
+  ]
+    .join(" ")
+    .toLowerCase()
+}
+
+export function ReleaseReviewGridView() {
+  const [reviews, setReviews] = useState<IReleaseReview[]>(RELEASE_REVIEWS)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [serviceFilter, setServiceFilter] =
+    useState<ServiceFilter>("All services")
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("All statuses")
+  const [includeShipped, setIncludeShipped] = useState(false)
+  const [showChecks, setShowChecks] = useState(true)
+  const [tableDensity, setTableDensity] = useState<TableDensity>("compact")
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 5,
+  })
+  const [sorting, setSorting] = useState<SortingState>(
+    buildSorting("risk", "desc")
+  )
+  const [expandedReviewIds, setExpandedReviewIds] = useState<ExpandedState>(
+    () => getDefaultExpandedReviewIds(RELEASE_REVIEWS)
+  )
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
+    owner: true,
+    risk: true,
+    window: false,
+    approvals: true,
+    updated: false,
+  })
+
+  const resetPagination = useCallback(() => {
+    setPagination((current) =>
+      current.pageIndex === 0 ? current : { ...current, pageIndex: 0 }
+    )
+  }, [])
+
+  const ordering = sortIdToOrdering(sorting[0]?.id)
+  const direction: OrderDirection = sorting[0]?.desc ? "desc" : "asc"
+  const normalizedQuery = searchQuery.trim().toLowerCase()
+  const hasActiveFilters =
+    normalizedQuery.length > 0 ||
+    serviceFilter !== "All services" ||
+    statusFilter !== "All statuses"
+
+  const filteredReviews = useMemo(() => {
+    return reviews.filter((review) => {
+      if (!includeShipped && review.status === "Shipped") {
+        return false
+      }
+
+      if (
+        serviceFilter !== "All services" &&
+        review.service.label !== serviceFilter
+      ) {
+        return false
+      }
+
+      if (statusFilter !== "All statuses" && review.status !== statusFilter) {
+        return false
+      }
+
+      if (
+        normalizedQuery.length > 0 &&
+        !getReviewSearchBlob(review).includes(normalizedQuery)
+      ) {
+        return false
+      }
+
+      return true
+    })
+  }, [includeShipped, normalizedQuery, reviews, serviceFilter, statusFilter])
+
+  const sortedReviews = useMemo(
+    () => [...filteredReviews].sort((a, b) => compareReviews(a, b, sorting)),
+    [filteredReviews, sorting]
+  )
+
+  const hiddenShippedCount = useMemo(
+    () =>
+      includeShipped
+        ? 0
+        : reviews.filter((review) => review.status === "Shipped").length,
+    [includeShipped, reviews]
+  )
+
+  const emptyMessage = useMemo(() => {
+    if (filteredReviews.length > 0) return undefined
+
+    if (!includeShipped && hiddenShippedCount > 0 && !hasActiveFilters) {
+      return `Only shipped reviews remain. Turn on Include shipped to show ${hiddenShippedCount} hidden ${hiddenShippedCount === 1 ? "record" : "records"}.`
+    }
+
+    return "No release reviews match this view."
+  }, [
+    filteredReviews.length,
+    hasActiveFilters,
+    hiddenShippedCount,
+    includeShipped,
+  ])
+
+  const handleOrderingChange = useCallback(
+    (value: ReleaseOrdering | null) => {
+      if (!value) return
+
+      setSorting(buildSorting(value, direction))
+      resetPagination()
+    },
+    [direction, resetPagination]
+  )
+
+  const handleDirectionChange = useCallback(
+    (value: string[]) => {
+      const nextDirection = value[0] as OrderDirection | undefined
+      if (!nextDirection) return
+
+      setSorting(buildSorting(ordering, nextDirection))
+      resetPagination()
+    },
+    [ordering, resetPagination]
+  )
+
+  const handleShowChecksChange = useCallback(
+    (checked: boolean) => {
+      setShowChecks(checked)
+      setExpandedReviewIds((current) => {
+        if (!checked) return {}
+        return Object.keys(current).length > 0
+          ? current
+          : getDefaultExpandedReviewIds(sortedReviews)
+      })
+    },
+    [sortedReviews]
+  )
+
+  const handleIncludeShippedChange = useCallback(
+    (checked: boolean) => {
+      setIncludeShipped(checked)
+      resetPagination()
+    },
+    [resetPagination]
+  )
+
+  const handleClearFilters = useCallback(() => {
+    setSearchQuery("")
+    setServiceFilter("All services")
+    setStatusFilter("All statuses")
+    resetPagination()
+  }, [resetPagination])
+
+  const handleReviewAction = useCallback(
+    (action: ReviewAction, review: IReleaseReview) => {
+      if (action === "open") {
+        toast.info("Open release review", {
+          description: `${review.changeKey} · ${review.title}`,
+        })
+        return
+      }
+
+      if (action === "approve") {
+        setReviews((current) =>
+          current.map((item) =>
+            item.id === review.id
+              ? {
+                  ...item,
+                  status: "Ready",
+                  statusOrder: REVIEW_STATUS_ORDER.indexOf("Ready"),
+                  approvalsApproved: item.approvalsRequired,
+                  updatedAt: "2026-04-14T09:30:00Z",
+                  updatedLabel: "Just now",
+                }
+              : item
+          )
+        )
+        resetPagination()
+        toast.success("Window approved", {
+          description: `${review.changeKey} is now ready for the scheduled window.`,
+        })
+        return
+      }
+
+      setReviews((current) =>
+        current.map((item) =>
+          item.id === review.id
+            ? {
+                ...item,
+                status: "Blocked",
+                statusOrder: REVIEW_STATUS_ORDER.indexOf("Blocked"),
+                risk: "Critical",
+                riskValue: 4,
+                updatedAt: "2026-04-14T09:30:00Z",
+                updatedLabel: "Just now",
+              }
+            : item
+        )
+      )
+      toast.warning("Risk escalated", {
+        description: `${review.changeKey} moved to the blocked queue.`,
+      })
+    },
+    [resetPagination]
+  )
+
+  const columns = useMemo(
+    () =>
+      createReleaseColumns({
+        onReviewAction: handleReviewAction,
+        showChecks,
+      }),
+    [handleReviewAction, showChecks]
+  )
+
+  const table = useReactTable({
+    data: sortedReviews,
+    columns,
+    state: {
+      pagination,
+      sorting,
+      expanded: expandedReviewIds,
+      columnVisibility,
+    },
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    onExpandedChange: setExpandedReviewIds,
+    onColumnVisibilityChange: setColumnVisibility,
+    getRowId: (row) => row.id,
+    getRowCanExpand: (row) =>
+      showChecks && Boolean(row.original.checks?.length),
+    paginateExpandedRows: false,
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  })
+
+  return (
+    <DataGrid
+      table={table}
+      recordCount={filteredReviews.length}
+      emptyMessage={emptyMessage}
+      tableLayout={{
+        dense: tableDensity === "compact",
+        headerSticky: true,
+        columnsResizable: true,
+        columnsMovable: true,
+        columnsVisibility: true,
+        width: "auto",
+      }}
+    >
+      {/* Card */}
+      <ReleaseReviewCard
+        title="Release Reviews"
+        description="Upcoming windows, blockers, and checks."
+        action={
+          <Button type="button" size="sm">
+            <PlusIcon aria-hidden="true" />
+            New review
+          </Button>
+        }
+        footer={
+          <div className="flex w-full justify-end">
+            <DataGridPagination />
+          </div>
+        }
+      >
+        <div className="px-5 py-3">
+          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+            <div className="flex flex-wrap items-center gap-2">
+              <InputGroup className="w-full min-w-64 sm:w-72">
+                <InputGroupAddon align="inline-start">
+                  <SearchIcon aria-hidden="true" />
+                </InputGroupAddon>
+                <InputGroupInput
+                  placeholder="Search releases..."
+                  aria-label="Search releases"
+                  value={searchQuery}
+                  onChange={(event) => {
+                    setSearchQuery(event.target.value)
+                    resetPagination()
+                  }}
+                />
+                {searchQuery.length > 0 ? (
+                  <InputGroupAddon align="inline-end">
+                    <InputGroupButton
+                      aria-label="Clear search"
+                      size="icon-xs"
+                      onClick={() => {
+                        setSearchQuery("")
+                        resetPagination()
+                      }}
+                    >
+                      <XIcon aria-hidden="true" />
+                    </InputGroupButton>
+                  </InputGroupAddon>
+                ) : null}
+              </InputGroup>
+
+              <Select
+                value={serviceFilter}
+                onValueChange={(value) => {
+                  setServiceFilter(value as ServiceFilter)
+                  resetPagination()
+                }}
+              >
+                <SelectTrigger size="sm" className="w-[160px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent align="start">
+                  <SelectGroup>
+                    <SelectItem value="All services">All services</SelectItem>
+                    {SERVICE_OPTIONS.map((service) => (
+                      <SelectItem key={service.value} value={service.label}>
+                        {service.label}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+
+              <Select
+                value={statusFilter}
+                onValueChange={(value) => {
+                  setStatusFilter(value as StatusFilter)
+                  resetPagination()
+                }}
+              >
+                <SelectTrigger size="sm" className="w-[170px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent align="start">
+                  <SelectGroup>
+                    <SelectItem value="All statuses">All statuses</SelectItem>
+                    {REVIEW_STATUS_ORDER.map((status) => (
+                      <SelectItem key={status} value={status}>
+                        {status}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+
+              {hasActiveFilters ? (
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  onClick={handleClearFilters}
+                >
+                  Clear
+                </Button>
+              ) : null}
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2">
+              <Popover>
+                <PopoverTrigger
+                  render={
+                    <Button type="button" size="sm" variant="outline">
+                      <Settings2Icon aria-hidden="true" />
+                      View Settings
+                    </Button>
+                  }
+                />
+                <PopoverContent align="end" className="w-[340px] p-0">
+                  <FieldGroup className="gap-3 px-3.5 py-3">
+                    <div className="flex flex-col gap-0">
+                      <Field
+                        orientation="horizontal"
+                        className="min-h-9 items-center justify-between gap-3"
+                      >
+                        <FieldLabel className="text-sm font-normal">
+                          Ordering
+                        </FieldLabel>
+                        <Select
+                          value={ordering}
+                          onValueChange={handleOrderingChange}
+                        >
+                          <SelectTrigger
+                            size="sm"
+                            className="w-[132px] shrink-0"
+                          >
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent align="end">
+                            <SelectGroup>
+                              {ORDERING_OPTIONS.map((option) => (
+                                <SelectItem
+                                  key={option.value}
+                                  value={option.value}
+                                >
+                                  {option.label}
+                                </SelectItem>
+                              ))}
+                            </SelectGroup>
+                          </SelectContent>
+                        </Select>
+                      </Field>
+
+                      <Field
+                        orientation="horizontal"
+                        className="min-h-9 items-center justify-between gap-3"
+                      >
+                        <FieldLabel className="text-sm font-normal">
+                          Direction
+                        </FieldLabel>
+                        <ToggleGroup
+                          multiple={false}
+                          value={[direction]}
+                          onValueChange={handleDirectionChange}
+                          variant="outline"
+                          size="sm"
+                          className="ml-auto w-[132px] shrink-0 justify-end"
+                        >
+                          {ORDER_DIRECTION_OPTIONS.map((option) => (
+                            <ToggleGroupItem
+                              key={option.value}
+                              value={option.value}
+                              className="grow"
+                            >
+                              {option.label}
+                            </ToggleGroupItem>
+                          ))}
+                        </ToggleGroup>
+                      </Field>
+
+                      <Field
+                        orientation="horizontal"
+                        className="min-h-9 items-center justify-between gap-3"
+                      >
+                        <FieldLabel className="text-sm font-normal">
+                          Density
+                        </FieldLabel>
+                        <Select
+                          value={tableDensity}
+                          onValueChange={(value) =>
+                            setTableDensity(value as TableDensity)
+                          }
+                        >
+                          <SelectTrigger
+                            size="sm"
+                            className="w-[132px] shrink-0"
+                          >
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent align="end">
+                            <SelectGroup>
+                              {TABLE_DENSITY_OPTIONS.map((option) => (
+                                <SelectItem
+                                  key={option.value}
+                                  value={option.value}
+                                >
+                                  {option.label}
+                                </SelectItem>
+                              ))}
+                            </SelectGroup>
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                    </div>
+
+                    <FieldSeparator />
+
+                    <div className="flex flex-col gap-0">
+                      <Field
+                        orientation="horizontal"
+                        className="min-h-9 items-center justify-between gap-3"
+                      >
+                        <FieldLabel className="text-sm font-normal">
+                          Check cards
+                        </FieldLabel>
+                        <Switch
+                          size="sm"
+                          checked={showChecks}
+                          onCheckedChange={handleShowChecksChange}
+                        />
+                      </Field>
+
+                      <Field
+                        orientation="horizontal"
+                        className="min-h-9 items-center justify-between gap-3"
+                      >
+                        <FieldLabel className="text-sm font-normal">
+                          Include shipped
+                        </FieldLabel>
+                        <Switch
+                          size="sm"
+                          checked={includeShipped}
+                          onCheckedChange={handleIncludeShippedChange}
+                        />
+                      </Field>
+                    </div>
+
+                    <FieldSeparator />
+
+                    <div className="flex flex-col gap-0">
+                      <span className="text-muted-foreground px-0.5 pb-1 text-xs font-medium">
+                        Columns
+                      </span>
+                      {table
+                        .getAllColumns()
+                        .filter((column) => column.getCanHide())
+                        .map((column) => (
+                          <Field
+                            key={column.id}
+                            orientation="horizontal"
+                            className="min-h-9 items-center justify-between gap-3"
+                          >
+                            <FieldLabel className="text-sm font-normal">
+                              {getColumnHeaderLabel(column)}
+                            </FieldLabel>
+                            <Switch
+                              size="sm"
+                              checked={column.getIsVisible()}
+                              onCheckedChange={(checked) =>
+                                column.toggleVisibility(checked)
+                              }
+                            />
+                          </Field>
+                        ))}
+                    </div>
+                  </FieldGroup>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        <DataGridContainer border={false}>
+          <DataGridScrollArea>
+            <DataGridTable />
+          </DataGridScrollArea>
+        </DataGridContainer>
+      </ReleaseReviewCard>
+    </DataGrid>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-expansion-3/components/data.tsx b/apps/web/src/components/blocks/data-grid-expansion-3/components/data.tsx
new file mode 100644
index 0000000..90a2bfc
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-expansion-3/components/data.tsx
@@ -0,0 +1,1110 @@
+import { type ReactNode } from "react"
+import { CreditCardIcon, ShieldCheckIcon, WebhookIcon, DatabaseIcon } from "lucide-react"
+
+export type ReviewStatus =
+  | "Needs approval"
+  | "Blocked"
+  | "Scheduled"
+  | "Ready"
+  | "Shipped"
+
+export type RiskLevel = "Critical" | "High" | "Medium" | "Low"
+
+export type ReleaseOrdering = "risk" | "window" | "updated"
+
+export type ServiceKey = "checkout" | "auth" | "webhooks" | "data-sync"
+
+export type CheckStatus = "Open" | "Done" | "Flagged"
+
+export type CheckTrack =
+  | "rollback"
+  | "reliability"
+  | "observability"
+  | "handoff"
+
+export interface IOwner {
+  id: string
+  name: string
+  initials: string
+  avatar?: string
+  role: string
+}
+
+export interface IServiceOption {
+  value: ServiceKey
+  label: string
+  icon: ReactNode
+}
+
+export interface IReleaseCheck {
+  id: string
+  title: string
+  status: CheckStatus
+  reviewer: IOwner | null
+  dueAt: string
+  dueLabel: string
+  track: CheckTrack
+  confidence: number
+  coverage: number
+}
+
+export interface IReleaseReview {
+  id: string
+  changeKey: string
+  title: string
+  service: IServiceOption
+  environment: string
+  status: ReviewStatus
+  statusOrder: number
+  risk: RiskLevel
+  riskValue: number
+  owner: IOwner
+  windowStart: string
+  windowLabel: string
+  windowDurationLabel: string
+  blastRadiusLabel: string
+  updatedAt: string
+  updatedLabel: string
+  approvalsApproved: number
+  approvalsRequired: number
+  checksCompleted: number
+  checksTotal: number
+  checks?: IReleaseCheck[]
+}
+
+export const REVIEW_STATUS_ORDER: ReviewStatus[] = [
+  "Needs approval",
+  "Blocked",
+  "Scheduled",
+  "Ready",
+  "Shipped",
+]
+
+export const RISK_ORDER: RiskLevel[] = ["Critical", "High", "Medium", "Low"]
+
+export const ORDERING_OPTIONS: {
+  value: ReleaseOrdering
+  label: string
+}[] = [
+  { value: "risk", label: "Risk" },
+  { value: "window", label: "Window" },
+  { value: "updated", label: "Updated" },
+]
+
+export const OWNERS: IOwner[] = [
+  {
+    id: "maya",
+    name: "Maya Patel",
+    initials: "MP",
+    avatar:
+      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&dpr=2&q=80",
+    role: "Release lead",
+  },
+  {
+    id: "jonah",
+    name: "Jonah Lee",
+    initials: "JL",
+    avatar:
+      "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=96&h=96&dpr=2&q=80",
+    role: "Platform reviewer",
+  },
+  {
+    id: "nina",
+    name: "Nina Santos",
+    initials: "NS",
+    avatar:
+      "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=96&h=96&dpr=2&q=80",
+    role: "Billing reviewer",
+  },
+  {
+    id: "omar",
+    name: "Omar Haddad",
+    initials: "OH",
+    avatar:
+      "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=96&h=96&dpr=2&q=80",
+    role: "Integrations owner",
+  },
+  {
+    id: "priya",
+    name: "Priya Menon",
+    initials: "PM",
+    avatar:
+      "https://images.unsplash.com/photo-1557296387-5358ad7997bb?w=96&h=96&dpr=2&q=80",
+    role: "Incident commander",
+  },
+  {
+    id: "theo",
+    name: "Theo Vincent",
+    initials: "TV",
+    avatar:
+      "https://images.unsplash.com/photo-1507591064344-4c6ce005b128?w=96&h=96&dpr=2&q=80",
+    role: "Data platform lead",
+  },
+]
+
+export const SERVICE_OPTIONS: IServiceOption[] = [
+  {
+    value: "checkout",
+    label: "Checkout",
+    icon: (
+      <CreditCardIcon className="size-4" aria-hidden="true" />
+    ),
+  },
+  {
+    value: "auth",
+    label: "Authentication",
+    icon: (
+      <ShieldCheckIcon className="size-4" aria-hidden="true" />
+    ),
+  },
+  {
+    value: "webhooks",
+    label: "Webhooks",
+    icon: (
+      <WebhookIcon className="size-4" aria-hidden="true" />
+    ),
+  },
+  {
+    value: "data-sync",
+    label: "Data sync",
+    icon: (
+      <DatabaseIcon className="size-4" aria-hidden="true" />
+    ),
+  },
+]
+
+function owner(id: IOwner["id"]) {
+  const match = OWNERS.find((item) => item.id === id)
+
+  if (!match) {
+    throw new Error(`Unknown owner: ${id}`)
+  }
+
+  return match
+}
+
+function service(value: ServiceKey) {
+  const match = SERVICE_OPTIONS.find((item) => item.value === value)
+
+  if (!match) {
+    throw new Error(`Unknown service: ${value}`)
+  }
+
+  return match
+}
+
+function releaseCheck(
+  reviewKey: string,
+  index: number,
+  title: string,
+  status: CheckStatus,
+  reviewerId: IOwner["id"] | null,
+  dueAt: string,
+  dueLabel: string,
+  track: CheckTrack,
+  confidence: number,
+  coverage: number
+): IReleaseCheck {
+  return {
+    id: `${reviewKey}-check-${index + 1}`,
+    title,
+    status,
+    reviewer: reviewerId ? owner(reviewerId) : null,
+    dueAt,
+    dueLabel,
+    track,
+    confidence,
+    coverage,
+  }
+}
+
+export const RELEASE_REVIEWS: IReleaseReview[] = [
+  {
+    id: "1",
+    changeKey: "REL-8421",
+    title: "Split EU checkout traffic",
+    service: service("checkout"),
+    environment: "Production",
+    status: "Needs approval",
+    statusOrder: REVIEW_STATUS_ORDER.indexOf("Needs approval"),
+    risk: "Critical",
+    riskValue: 4,
+    owner: owner("maya"),
+    windowStart: "2026-04-18T22:00:00Z",
+    windowLabel: "Apr 18 · 22:00 UTC",
+    windowDurationLabel: "90 min window",
+    blastRadiusLabel: "EU checkout",
+    updatedAt: "2026-04-14T09:16:00Z",
+    updatedLabel: "14m ago",
+    approvalsApproved: 3,
+    approvalsRequired: 5,
+    checksCompleted: 2,
+    checksTotal: 5,
+    checks: [
+      releaseCheck(
+        "REL-8421",
+        0,
+        "Replica lag watch",
+        "Flagged",
+        "jonah",
+        "2026-04-18",
+        "Due Apr 18",
+        "reliability",
+        2.4,
+        42
+      ),
+      releaseCheck(
+        "REL-8421",
+        1,
+        "PSP fallback ready",
+        "Open",
+        "nina",
+        "2026-04-18",
+        "Due Apr 18",
+        "rollback",
+        3.1,
+        58
+      ),
+      releaseCheck(
+        "REL-8421",
+        2,
+        "Rollback sign-off",
+        "Done",
+        "maya",
+        "2026-04-17",
+        "Done Apr 17",
+        "rollback",
+        4.8,
+        96
+      ),
+      releaseCheck(
+        "REL-8421",
+        3,
+        "Fraud rule approval",
+        "Open",
+        "nina",
+        "2026-04-18",
+        "Due Apr 18",
+        "handoff",
+        3.2,
+        63
+      ),
+      releaseCheck(
+        "REL-8421",
+        4,
+        "Cache bypass drill",
+        "Done",
+        "jonah",
+        "2026-04-17",
+        "Done Apr 17",
+        "observability",
+        4.6,
+        91
+      ),
+    ],
+  },
+  {
+    id: "2",
+    changeKey: "REL-8416",
+    title: "Rotate auth signing keys",
+    service: service("auth"),
+    environment: "Production",
+    status: "Blocked",
+    statusOrder: REVIEW_STATUS_ORDER.indexOf("Blocked"),
+    risk: "High",
+    riskValue: 3,
+    owner: owner("jonah"),
+    windowStart: "2026-04-18T19:30:00Z",
+    windowLabel: "Apr 18 · 19:30 UTC",
+    windowDurationLabel: "45 min window",
+    blastRadiusLabel: "Global session auth",
+    updatedAt: "2026-04-14T08:48:00Z",
+    updatedLabel: "42m ago",
+    approvalsApproved: 2,
+    approvalsRequired: 4,
+    checksCompleted: 2,
+    checksTotal: 4,
+    checks: [
+      releaseCheck(
+        "REL-8416",
+        0,
+        "Android fallback bundle",
+        "Flagged",
+        "priya",
+        "2026-04-18",
+        "Due Apr 18",
+        "rollback",
+        2.2,
+        37
+      ),
+      releaseCheck(
+        "REL-8416",
+        1,
+        "Old JWKS expiry",
+        "Done",
+        "jonah",
+        "2026-04-17",
+        "Done Apr 17",
+        "reliability",
+        4.7,
+        95
+      ),
+      releaseCheck(
+        "REL-8416",
+        2,
+        "Failure threshold note",
+        "Open",
+        "maya",
+        "2026-04-18",
+        "Due Apr 18",
+        "observability",
+        3.4,
+        59
+      ),
+      releaseCheck(
+        "REL-8416",
+        3,
+        "Revert token handoff",
+        "Done",
+        "priya",
+        "2026-04-17",
+        "Done Apr 17",
+        "handoff",
+        4.5,
+        90
+      ),
+    ],
+  },
+  {
+    id: "3",
+    changeKey: "REL-8408",
+    title: "Move invoice workers to new partitions",
+    service: service("data-sync"),
+    environment: "Staging",
+    status: "Scheduled",
+    statusOrder: REVIEW_STATUS_ORDER.indexOf("Scheduled"),
+    risk: "Medium",
+    riskValue: 2,
+    owner: owner("theo"),
+    windowStart: "2026-04-16T21:00:00Z",
+    windowLabel: "Apr 16 · 21:00 UTC",
+    windowDurationLabel: "60 min window",
+    blastRadiusLabel: "Invoice pipeline",
+    updatedAt: "2026-04-14T07:20:00Z",
+    updatedLabel: "2h ago",
+    approvalsApproved: 4,
+    approvalsRequired: 4,
+    checksCompleted: 4,
+    checksTotal: 4,
+    checks: [
+      releaseCheck(
+        "REL-8408",
+        0,
+        "Autoscaling lock",
+        "Done",
+        "theo",
+        "2026-04-15",
+        "Done Apr 15",
+        "reliability",
+        4.9,
+        100
+      ),
+      releaseCheck(
+        "REL-8408",
+        1,
+        "Reconciliation replay",
+        "Done",
+        "nina",
+        "2026-04-15",
+        "Done Apr 15",
+        "observability",
+        4.7,
+        94
+      ),
+      releaseCheck(
+        "REL-8408",
+        2,
+        "DLQ replay path",
+        "Done",
+        "theo",
+        "2026-04-15",
+        "Done Apr 15",
+        "rollback",
+        4.8,
+        96
+      ),
+      releaseCheck(
+        "REL-8408",
+        3,
+        "Staging sign-off",
+        "Done",
+        "maya",
+        "2026-04-15",
+        "Done Apr 15",
+        "handoff",
+        4.9,
+        100
+      ),
+    ],
+  },
+  {
+    id: "4",
+    changeKey: "REL-8399",
+    title: "Open LATAM webhook fanout",
+    service: service("webhooks"),
+    environment: "Production",
+    status: "Ready",
+    statusOrder: REVIEW_STATUS_ORDER.indexOf("Ready"),
+    risk: "Medium",
+    riskValue: 2,
+    owner: owner("omar"),
+    windowStart: "2026-04-17T18:00:00Z",
+    windowLabel: "Apr 17 · 18:00 UTC",
+    windowDurationLabel: "30 min window",
+    blastRadiusLabel: "LATAM partner flows",
+    updatedAt: "2026-04-14T06:14:00Z",
+    updatedLabel: "3h ago",
+    approvalsApproved: 5,
+    approvalsRequired: 5,
+    checksCompleted: 5,
+    checksTotal: 5,
+    checks: [
+      releaseCheck(
+        "REL-8399",
+        0,
+        "Retry envelope pass",
+        "Done",
+        "omar",
+        "2026-04-16",
+        "Done Apr 16",
+        "reliability",
+        4.9,
+        100
+      ),
+      releaseCheck(
+        "REL-8399",
+        1,
+        "Refund replay shadow",
+        "Done",
+        "nina",
+        "2026-04-16",
+        "Done Apr 16",
+        "observability",
+        4.8,
+        95
+      ),
+      releaseCheck(
+        "REL-8399",
+        2,
+        "Rate limit approval",
+        "Done",
+        "priya",
+        "2026-04-16",
+        "Done Apr 16",
+        "handoff",
+        4.7,
+        92
+      ),
+      releaseCheck(
+        "REL-8399",
+        3,
+        "Responder map ready",
+        "Done",
+        "maya",
+        "2026-04-16",
+        "Done Apr 16",
+        "rollback",
+        4.8,
+        94
+      ),
+      releaseCheck(
+        "REL-8399",
+        4,
+        "Launch note posted",
+        "Done",
+        "omar",
+        "2026-04-16",
+        "Done Apr 16",
+        "handoff",
+        4.9,
+        100
+      ),
+    ],
+  },
+  {
+    id: "5",
+    changeKey: "REL-8387",
+    title: "Activate instant refunds",
+    service: service("checkout"),
+    environment: "Production",
+    status: "Needs approval",
+    statusOrder: REVIEW_STATUS_ORDER.indexOf("Needs approval"),
+    risk: "High",
+    riskValue: 3,
+    owner: owner("nina"),
+    windowStart: "2026-04-19T20:30:00Z",
+    windowLabel: "Apr 19 · 20:30 UTC",
+    windowDurationLabel: "75 min window",
+    blastRadiusLabel: "Refund operations",
+    updatedAt: "2026-04-14T05:34:00Z",
+    updatedLabel: "4h ago",
+    approvalsApproved: 1,
+    approvalsRequired: 4,
+    checksCompleted: 1,
+    checksTotal: 4,
+    checks: [
+      releaseCheck(
+        "REL-8387",
+        0,
+        "Refund cap review",
+        "Flagged",
+        "priya",
+        "2026-04-19",
+        "Due Apr 19",
+        "handoff",
+        2.8,
+        41
+      ),
+      releaseCheck(
+        "REL-8387",
+        1,
+        "Ledger replay",
+        "Open",
+        "theo",
+        "2026-04-19",
+        "Due Apr 19",
+        "observability",
+        3.2,
+        56
+      ),
+      releaseCheck(
+        "REL-8387",
+        2,
+        "Dispute webhook pass",
+        "Done",
+        "omar",
+        "2026-04-18",
+        "Done Apr 18",
+        "reliability",
+        4.6,
+        88
+      ),
+      releaseCheck(
+        "REL-8387",
+        3,
+        "Finance notice",
+        "Open",
+        "maya",
+        "2026-04-19",
+        "Due Apr 19",
+        "handoff",
+        3.1,
+        52
+      ),
+    ],
+  },
+  {
+    id: "6",
+    changeKey: "REL-8379",
+    title: "Reduce invite session TTL",
+    service: service("auth"),
+    environment: "Production",
+    status: "Shipped",
+    statusOrder: REVIEW_STATUS_ORDER.indexOf("Shipped"),
+    risk: "Low",
+    riskValue: 1,
+    owner: owner("maya"),
+    windowStart: "2026-04-12T17:00:00Z",
+    windowLabel: "Apr 12 · 17:00 UTC",
+    windowDurationLabel: "20 min window",
+    blastRadiusLabel: "Invite acceptance",
+    updatedAt: "2026-04-13T16:28:00Z",
+    updatedLabel: "Yesterday",
+    approvalsApproved: 3,
+    approvalsRequired: 3,
+    checksCompleted: 3,
+    checksTotal: 3,
+    checks: [
+      releaseCheck(
+        "REL-8379",
+        0,
+        "Eviction pattern check",
+        "Done",
+        "jonah",
+        "2026-04-12",
+        "Done Apr 12",
+        "reliability",
+        4.8,
+        100
+      ),
+      releaseCheck(
+        "REL-8379",
+        1,
+        "Invite metrics verify",
+        "Done",
+        "maya",
+        "2026-04-12",
+        "Done Apr 12",
+        "observability",
+        4.7,
+        98
+      ),
+      releaseCheck(
+        "REL-8379",
+        2,
+        "Onboarding note",
+        "Done",
+        "maya",
+        "2026-04-12",
+        "Done Apr 12",
+        "handoff",
+        4.9,
+        100
+      ),
+    ],
+  },
+  {
+    id: "7",
+    changeKey: "REL-8368",
+    title: "Shift analytics cutover",
+    service: service("data-sync"),
+    environment: "Staging",
+    status: "Scheduled",
+    statusOrder: REVIEW_STATUS_ORDER.indexOf("Scheduled"),
+    risk: "Medium",
+    riskValue: 2,
+    owner: owner("theo"),
+    windowStart: "2026-04-20T23:00:00Z",
+    windowLabel: "Apr 20 · 23:00 UTC",
+    windowDurationLabel: "120 min window",
+    blastRadiusLabel: "Analyst reporting",
+    updatedAt: "2026-04-14T04:58:00Z",
+    updatedLabel: "5h ago",
+    approvalsApproved: 3,
+    approvalsRequired: 4,
+    checksCompleted: 3,
+    checksTotal: 4,
+    checks: [
+      releaseCheck(
+        "REL-8368",
+        0,
+        "Late partition rebuild",
+        "Done",
+        "theo",
+        "2026-04-19",
+        "Done Apr 19",
+        "reliability",
+        4.5,
+        90
+      ),
+      releaseCheck(
+        "REL-8368",
+        1,
+        "Looker explore pass",
+        "Done",
+        "priya",
+        "2026-04-19",
+        "Done Apr 19",
+        "observability",
+        4.4,
+        86
+      ),
+      releaseCheck(
+        "REL-8368",
+        2,
+        "Rollback snapshot",
+        "Open",
+        "nina",
+        "2026-04-20",
+        "Due Apr 20",
+        "rollback",
+        3.3,
+        62
+      ),
+      releaseCheck(
+        "REL-8368",
+        3,
+        "Data channel note",
+        "Done",
+        "maya",
+        "2026-04-19",
+        "Done Apr 19",
+        "handoff",
+        4.6,
+        91
+      ),
+    ],
+  },
+  {
+    id: "8",
+    changeKey: "REL-8362",
+    title: "Roll out regional webhook retries",
+    service: service("webhooks"),
+    environment: "Production",
+    status: "Blocked",
+    statusOrder: REVIEW_STATUS_ORDER.indexOf("Blocked"),
+    risk: "Critical",
+    riskValue: 4,
+    owner: owner("omar"),
+    windowStart: "2026-04-19T18:30:00Z",
+    windowLabel: "Apr 19 · 18:30 UTC",
+    windowDurationLabel: "50 min window",
+    blastRadiusLabel: "Enterprise delivery",
+    updatedAt: "2026-04-14T09:05:00Z",
+    updatedLabel: "25m ago",
+    approvalsApproved: 2,
+    approvalsRequired: 5,
+    checksCompleted: 2,
+    checksTotal: 5,
+    checks: [
+      releaseCheck(
+        "REL-8362",
+        0,
+        "Support cap review",
+        "Flagged",
+        "priya",
+        "2026-04-19",
+        "Due Apr 19",
+        "handoff",
+        2.1,
+        34
+      ),
+      releaseCheck(
+        "REL-8362",
+        1,
+        "Replay shadow test",
+        "Open",
+        "omar",
+        "2026-04-19",
+        "Due Apr 19",
+        "observability",
+        3.1,
+        49
+      ),
+      releaseCheck(
+        "REL-8362",
+        2,
+        "Routing rollback sign-off",
+        "Done",
+        "maya",
+        "2026-04-18",
+        "Done Apr 18",
+        "rollback",
+        4.5,
+        84
+      ),
+      releaseCheck(
+        "REL-8362",
+        3,
+        "Region pinning verify",
+        "Open",
+        "jonah",
+        "2026-04-19",
+        "Due Apr 19",
+        "reliability",
+        3.0,
+        53
+      ),
+      releaseCheck(
+        "REL-8362",
+        4,
+        "Partner runbook lock",
+        "Done",
+        "omar",
+        "2026-04-18",
+        "Done Apr 18",
+        "handoff",
+        4.4,
+        80
+      ),
+    ],
+  },
+  {
+    id: "9",
+    changeKey: "REL-8358",
+    title: "Pin checkout tax cache for Canada",
+    service: service("checkout"),
+    environment: "Production",
+    status: "Ready",
+    statusOrder: REVIEW_STATUS_ORDER.indexOf("Ready"),
+    risk: "Low",
+    riskValue: 1,
+    owner: owner("nina"),
+    windowStart: "2026-04-20T16:30:00Z",
+    windowLabel: "Apr 20 · 16:30 UTC",
+    windowDurationLabel: "25 min window",
+    blastRadiusLabel: "Canada tax quotes",
+    updatedAt: "2026-04-14T03:48:00Z",
+    updatedLabel: "6h ago",
+    approvalsApproved: 4,
+    approvalsRequired: 4,
+    checksCompleted: 4,
+    checksTotal: 4,
+    checks: [
+      releaseCheck(
+        "REL-8358",
+        0,
+        "Tax cache warmup",
+        "Done",
+        "nina",
+        "2026-04-19",
+        "Done Apr 19",
+        "reliability",
+        4.8,
+        97
+      ),
+      releaseCheck(
+        "REL-8358",
+        1,
+        "Quote audit sample",
+        "Done",
+        "maya",
+        "2026-04-19",
+        "Done Apr 19",
+        "observability",
+        4.6,
+        92
+      ),
+      releaseCheck(
+        "REL-8358",
+        2,
+        "Rollback note",
+        "Done",
+        "jonah",
+        "2026-04-19",
+        "Done Apr 19",
+        "rollback",
+        4.7,
+        94
+      ),
+      releaseCheck(
+        "REL-8358",
+        3,
+        "Support heads-up",
+        "Done",
+        "priya",
+        "2026-04-19",
+        "Done Apr 19",
+        "handoff",
+        4.5,
+        89
+      ),
+    ],
+  },
+  {
+    id: "10",
+    changeKey: "REL-8349",
+    title: "Move login audit writes to stream",
+    service: service("auth"),
+    environment: "Staging",
+    status: "Scheduled",
+    statusOrder: REVIEW_STATUS_ORDER.indexOf("Scheduled"),
+    risk: "Medium",
+    riskValue: 2,
+    owner: owner("jonah"),
+    windowStart: "2026-04-21T01:00:00Z",
+    windowLabel: "Apr 21 · 01:00 UTC",
+    windowDurationLabel: "40 min window",
+    blastRadiusLabel: "Audit ingestion",
+    updatedAt: "2026-04-14T02:40:00Z",
+    updatedLabel: "7h ago",
+    approvalsApproved: 2,
+    approvalsRequired: 3,
+    checksCompleted: 2,
+    checksTotal: 3,
+    checks: [
+      releaseCheck(
+        "REL-8349",
+        0,
+        "Backfill mirror test",
+        "Done",
+        "theo",
+        "2026-04-20",
+        "Done Apr 20",
+        "observability",
+        4.2,
+        83
+      ),
+      releaseCheck(
+        "REL-8349",
+        1,
+        "Staging revert path",
+        "Done",
+        "jonah",
+        "2026-04-20",
+        "Done Apr 20",
+        "rollback",
+        4.4,
+        87
+      ),
+      releaseCheck(
+        "REL-8349",
+        2,
+        "Security review note",
+        "Open",
+        "maya",
+        "2026-04-20",
+        "Due Apr 20",
+        "handoff",
+        3.5,
+        61
+      ),
+    ],
+  },
+  {
+    id: "11",
+    changeKey: "REL-8341",
+    title: "Gate partner retries by tenant policy",
+    service: service("webhooks"),
+    environment: "Production",
+    status: "Needs approval",
+    statusOrder: REVIEW_STATUS_ORDER.indexOf("Needs approval"),
+    risk: "High",
+    riskValue: 3,
+    owner: owner("omar"),
+    windowStart: "2026-04-21T18:45:00Z",
+    windowLabel: "Apr 21 · 18:45 UTC",
+    windowDurationLabel: "55 min window",
+    blastRadiusLabel: "Enterprise retries",
+    updatedAt: "2026-04-14T01:55:00Z",
+    updatedLabel: "8h ago",
+    approvalsApproved: 2,
+    approvalsRequired: 5,
+    checksCompleted: 2,
+    checksTotal: 5,
+    checks: [
+      releaseCheck(
+        "REL-8341",
+        0,
+        "Tenant policy audit",
+        "Done",
+        "priya",
+        "2026-04-20",
+        "Done Apr 20",
+        "observability",
+        4.1,
+        78
+      ),
+      releaseCheck(
+        "REL-8341",
+        1,
+        "Escalation ladder",
+        "Done",
+        "maya",
+        "2026-04-20",
+        "Done Apr 20",
+        "handoff",
+        4.3,
+        85
+      ),
+      releaseCheck(
+        "REL-8341",
+        2,
+        "Fallback quota caps",
+        "Open",
+        "omar",
+        "2026-04-21",
+        "Due Apr 21",
+        "rollback",
+        3.0,
+        47
+      ),
+      releaseCheck(
+        "REL-8341",
+        3,
+        "Partner retry replay",
+        "Flagged",
+        "jonah",
+        "2026-04-21",
+        "Due Apr 21",
+        "reliability",
+        2.3,
+        39
+      ),
+      releaseCheck(
+        "REL-8341",
+        4,
+        "Support macro update",
+        "Open",
+        "priya",
+        "2026-04-21",
+        "Due Apr 21",
+        "handoff",
+        3.2,
+        55
+      ),
+    ],
+  },
+  {
+    id: "12",
+    changeKey: "REL-8337",
+    title: "Rebalance ledger export workers",
+    service: service("data-sync"),
+    environment: "Production",
+    status: "Blocked",
+    statusOrder: REVIEW_STATUS_ORDER.indexOf("Blocked"),
+    risk: "High",
+    riskValue: 3,
+    owner: owner("theo"),
+    windowStart: "2026-04-22T00:30:00Z",
+    windowLabel: "Apr 22 · 00:30 UTC",
+    windowDurationLabel: "70 min window",
+    blastRadiusLabel: "Ledger exports",
+    updatedAt: "2026-04-14T00:44:00Z",
+    updatedLabel: "9h ago",
+    approvalsApproved: 1,
+    approvalsRequired: 4,
+    checksCompleted: 1,
+    checksTotal: 4,
+    checks: [
+      releaseCheck(
+        "REL-8337",
+        0,
+        "Replay parity run",
+        "Done",
+        "theo",
+        "2026-04-21",
+        "Done Apr 21",
+        "observability",
+        4.0,
+        76
+      ),
+      releaseCheck(
+        "REL-8337",
+        1,
+        "Backpressure threshold",
+        "Flagged",
+        "jonah",
+        "2026-04-21",
+        "Due Apr 21",
+        "reliability",
+        2.4,
+        36
+      ),
+      releaseCheck(
+        "REL-8337",
+        2,
+        "Rollback queue snapshot",
+        "Open",
+        "maya",
+        "2026-04-21",
+        "Due Apr 21",
+        "rollback",
+        3.1,
+        48
+      ),
+      releaseCheck(
+        "REL-8337",
+        3,
+        "Finance comms",
+        "Open",
+        "nina",
+        "2026-04-21",
+        "Due Apr 21",
+        "handoff",
+        3.0,
+        51
+      ),
+    ],
+  },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-expansion-3/components/release-check-rail.tsx b/apps/web/src/components/blocks/data-grid-expansion-3/components/release-check-rail.tsx
new file mode 100644
index 0000000..7249852
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-expansion-3/components/release-check-rail.tsx
@@ -0,0 +1,212 @@
+import { type ComponentProps } from "react"
+import { Badge } from "@/components/reui/badge"
+import { Rating } from "@/components/reui/rating"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@evobgp/ui/components/avatar"
+import { Card, CardContent } from "@evobgp/ui/components/card"
+
+import {
+  type CheckStatus,
+  type IReleaseCheck,
+  type IReleaseReview,
+} from "./data"
+
+const MAX_VISIBLE_CHECK_CARDS = 3
+
+const checkStatusConfig: Record<
+  CheckStatus,
+  {
+    variant: ComponentProps<typeof Badge>["variant"]
+    dotClassName: string
+  }
+> = {
+  Open: {
+    variant: "invert-light",
+    dotClassName: "bg-zinc-400 dark:bg-zinc-500",
+  },
+  Done: {
+    variant: "success-light",
+    dotClassName: "bg-emerald-500 dark:bg-emerald-400",
+  },
+  Flagged: {
+    variant: "destructive-light",
+    dotClassName: "bg-rose-500 dark:bg-rose-400",
+  },
+}
+
+function DotSeparator() {
+  return (
+    <span
+      className="size-1 shrink-0 rounded-full bg-gray-400 dark:bg-gray-500"
+      aria-hidden="true"
+    />
+  )
+}
+
+function initials(name: string) {
+  return name
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+}
+
+function coverageRingColor(coverage: number) {
+  if (coverage >= 85) return "text-emerald-500"
+  if (coverage >= 60) return "text-amber-500"
+  return "text-rose-500"
+}
+
+function CheckStatusBadge({ status }: { status: CheckStatus }) {
+  return (
+    <Badge variant={checkStatusConfig[status].variant}>
+      <span
+        className={`${checkStatusConfig[status].dotClassName} size-1.5 shrink-0 rounded-full`}
+        aria-hidden="true"
+      />
+      {status}
+    </Badge>
+  )
+}
+
+function CoverageRing({
+  coverage,
+  className,
+}: {
+  coverage: number
+  className?: string
+}) {
+  const radius = 8
+  const circumference = 2 * Math.PI * radius
+  const dashOffset = circumference - (coverage / 100) * circumference
+
+  return (
+    <div className={cn("flex items-center gap-1.5", className)}>
+      <svg
+        viewBox="0 0 24 24"
+        className={cn("size-4.5 shrink-0", coverageRingColor(coverage))}
+        aria-hidden="true"
+      >
+        <circle
+          cx="12"
+          cy="12"
+          r={radius}
+          fill="none"
+          className="stroke-border"
+          strokeWidth="2.5"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          r={radius}
+          fill="none"
+          className="stroke-current"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={dashOffset}
+          transform="rotate(-90 12 12)"
+        />
+      </svg>
+      <span className="text-muted-foreground text-xs tabular-nums">
+        {coverage}%
+      </span>
+    </div>
+  )
+}
+
+function ReleaseCheckCard({ check }: { check: IReleaseCheck }) {
+  return (
+    <Card className="h-full w-full min-w-0 gap-0 p-0 shadow-none! sm:w-[22rem]">
+      {/* Content */}
+      <CardContent className="flex flex-col gap-2.5 p-3">
+        <div className="flex items-start gap-3">
+          <CheckStatusBadge status={check.status} />
+        </div>
+
+        <div className="flex min-w-0 flex-col gap-1">
+          <h4 className="text-foreground line-clamp-2 text-sm leading-5 font-medium">
+            {check.title}
+          </h4>
+          <div className="text-muted-foreground flex min-w-0 flex-col gap-1 text-xs sm:flex-row sm:items-center sm:gap-2">
+            <div className="flex min-w-0 items-center gap-2">
+              <Avatar className="size-6 shrink-0">
+                {check.reviewer?.avatar ? (
+                  <AvatarImage
+                    src={check.reviewer.avatar}
+                    alt={check.reviewer.name}
+                  />
+                ) : null}
+                <AvatarFallback>
+                  {check.reviewer ? initials(check.reviewer.name) : "--"}
+                </AvatarFallback>
+              </Avatar>
+              <span className="truncate">
+                {check.reviewer?.name ?? "Reviewer pending"}
+              </span>
+            </div>
+            <span className="hidden sm:inline-flex">
+              <DotSeparator />
+            </span>
+            <span className="shrink-0">{check.dueLabel}</span>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between gap-3 pt-3.5">
+          <div className="flex items-center gap-1.5">
+            <Rating rating={check.confidence} size="sm" showValue={false} />
+            <span className="text-muted-foreground text-xs tabular-nums">
+              {check.confidence.toFixed(1)}
+            </span>
+          </div>
+          <CoverageRing coverage={check.coverage} className="ml-auto" />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function ReleaseCheckRail({ review }: { review: IReleaseReview }) {
+  const checks = review.checks ?? []
+
+  if (checks.length === 0) return null
+
+  const visibleChecks = checks.slice(0, MAX_VISIBLE_CHECK_CARDS)
+  const hiddenCheckCount = checks.length - visibleChecks.length
+  const openChecks = checks.filter((check) => check.status !== "Done").length
+
+  return (
+    <div>
+      <div className="flex flex-wrap items-center gap-2 px-5 pt-3 pb-2">
+        <span className="text-foreground text-xs font-medium">Checklist</span>
+        <DotSeparator />
+        <span className="text-muted-foreground text-xs">
+          {hiddenCheckCount > 0
+            ? `${visibleChecks.length} of ${checks.length} items`
+            : `${checks.length} items`}
+        </span>
+        <DotSeparator />
+        <span className="text-muted-foreground text-xs">{openChecks} open</span>
+        {hiddenCheckCount > 0 ? (
+          <>
+            <DotSeparator />
+            <span className="text-muted-foreground text-xs">
+              +{hiddenCheckCount} more
+            </span>
+          </>
+        ) : null}
+      </div>
+
+      {/* Cards */}
+      <div className="flex w-full max-w-[70rem] flex-wrap gap-3 px-5 pt-1 pb-4">
+        {visibleChecks.map((check) => (
+          <ReleaseCheckCard key={check.id} check={check} />
+        ))}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-expansion-3/components/release-review-card.tsx b/apps/web/src/components/blocks/data-grid-expansion-3/components/release-review-card.tsx
new file mode 100644
index 0000000..b4c45fe
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-expansion-3/components/release-review-card.tsx
@@ -0,0 +1,60 @@
+import { type ReactNode } from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@evobgp/ui/components/card"
+
+interface ReleaseReviewCardProps {
+  title: string
+  description: ReactNode
+  action?: ReactNode
+  children: ReactNode
+  footer?: ReactNode
+  className?: string
+  contentClassName?: string
+  footerClassName?: string
+}
+
+export function ReleaseReviewCard({
+  title,
+  description,
+  action,
+  children,
+  footer,
+  className,
+  contentClassName,
+  footerClassName,
+}: ReleaseReviewCardProps) {
+  return (
+    <Card className={cn("w-full gap-0 p-0", className)}>
+      {/* Header */}
+      <CardHeader className="gap-1 border-b px-5 py-3.5">
+        <CardTitle>{title}</CardTitle>
+        <CardDescription className="text-xs leading-4">
+          {description}
+        </CardDescription>
+        {action ? (
+          <CardAction className="self-center">{action}</CardAction>
+        ) : null}
+      </CardHeader>
+
+      {/* Content */}
+      <CardContent className={cn("p-0", contentClassName)}>
+        {children}
+      </CardContent>
+
+      {footer ? (
+        <CardFooter className={cn("border-t px-5 py-2.5", footerClassName)}>
+          {footer}
+        </CardFooter>
+      ) : null}
+    </Card>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-expansion-3/page.tsx b/apps/web/src/components/blocks/data-grid-expansion-3/page.tsx
new file mode 100644
index 0000000..6aa55a8
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-expansion-3/page.tsx
@@ -0,0 +1,15 @@
+import { ReleaseReviewGridView } from "./components/data-grid-view"
+
+export function Page() {
+  return (
+    <main
+      className="mx-auto flex min-h-svh w-full max-w-7xl items-start justify-center p-8 pt-12"
+      aria-labelledby="page-heading"
+    >
+      <h1 id="page-heading" className="sr-only">
+        Release review data grid
+      </h1>
+      <ReleaseReviewGridView />
+    </main>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-1/components/columns.tsx b/apps/web/src/components/blocks/data-grid-filtering-1/components/columns.tsx
new file mode 100644
index 0000000..8abab1a
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-1/components/columns.tsx
@@ -0,0 +1,426 @@
+import { memo, useState } from "react"
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+import { Badge } from "@/components/reui/badge"
+import { DataGridColumnHeader } from "@/components/reui/data-grid/data-grid-column-header"
+import {
+  DataGridTableRowSelect,
+  DataGridTableRowSelectAll,
+} from "@/components/reui/data-grid/data-grid-table"
+import { Row, type ColumnDef } from "@tanstack/react-table"
+import { toast } from "sonner"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@evobgp/ui/components/alert-dialog"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+import { Item, ItemMedia } from "@evobgp/ui/components/item"
+import { Skeleton } from "@evobgp/ui/components/skeleton"
+import { ITransaction, TxChannel, TxStatus } from "./data"
+import { MoreHorizontalIcon, EyeIcon, CopyIcon, DownloadIcon, TriangleAlertIcon, ArrowRightIcon } from "lucide-react"
+
+// ── Formatters ──
+
+function formatAmount(amount: number, currency: string) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 2,
+  }).format(Math.abs(amount))
+}
+
+function formatDate(iso: string) {
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  }).format(new Date(iso))
+}
+
+// ── Status (aligned with data-grid-1 badge language) ──
+
+export const StatusBadge = memo(function StatusBadge({
+  status,
+}: {
+  status: TxStatus
+}) {
+  if (status === "completed")
+    return <Badge variant="success-outline">Completed</Badge>
+  if (status === "failed")
+    return <Badge variant="destructive-outline">Failed</Badge>
+  if (status === "pending")
+    return <Badge variant="warning-outline">Pending</Badge>
+  return <Badge variant="info-outline">Cancelled</Badge>
+})
+
+// ── Channel (origin of charge - replaces "method" duplicate logos) ──
+
+const channelLabel: Record<TxChannel, string> = {
+  checkout: "Checkout",
+  api: "API",
+  invoice: "Invoice",
+  dashboard: "Dashboard",
+}
+
+const channelVariant: Record<
+  TxChannel,
+  "success-light" | "info-light" | "warning-light"
+> = {
+  checkout: "success-light",
+  api: "info-light",
+  invoice: "warning-light",
+  dashboard: "success-light",
+}
+
+export const ChannelBadge = memo(function ChannelBadge({
+  channel,
+}: {
+  channel: TxChannel
+}) {
+  return <Badge variant="secondary">{channelLabel[channel]}</Badge>
+})
+
+// ── Actions ──
+
+export function ActionsCell({ row }: { row: Row<ITransaction> }) {
+  const { copyToClipboard } = useCopyToClipboard()
+  const [disputeOpen, setDisputeOpen] = useState(false)
+
+  const handleCopyRef = () => {
+    copyToClipboard(row.original.reference)
+    toast.success("Reference copied", { description: row.original.reference })
+  }
+
+  const handleDisputeConfirm = () => {
+    setDisputeOpen(false)
+    toast.message("Dispute opened", {
+      description: `${row.original.reference}. Connect your payments API (demo).`,
+    })
+  }
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              size="icon"
+              variant="ghost"
+              className="size-7"
+              aria-label="Transaction actions"
+            />
+          }
+        >
+          <MoreHorizontalIcon aria-hidden="true" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent side="bottom" align="start" className="min-w-40">
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              onClick={() =>
+                toast.info("Transaction details", {
+                  description: "Demo. Navigate to your detail view.",
+                })
+              }
+            >
+              <EyeIcon className="size-4" aria-hidden="true" />
+              View Details
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={handleCopyRef}>
+              <CopyIcon className="size-4" aria-hidden="true" />
+              Copy Reference
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() =>
+                toast.success("Receipt", {
+                  description: "Demo. Download from your storage.",
+                })
+              }
+            >
+              <DownloadIcon className="size-4" aria-hidden="true" />
+              Receipt
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              variant="destructive"
+              onClick={() => setDisputeOpen(true)}
+            >
+              <TriangleAlertIcon className="size-4" aria-hidden="true" />
+              Dispute
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <AlertDialog open={disputeOpen} onOpenChange={setDisputeOpen}>
+        <AlertDialogContent size="sm">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Open a dispute?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This starts a dispute for{""}
+              <span className="text-foreground font-mono text-xs">
+                {row.original.reference}
+              </span>
+              . In production this is irreversible until resolved. Wire to your
+              payment provider.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              variant="destructive"
+              onClick={handleDisputeConfirm}
+            >
+              Start dispute
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
+
+export const columns: ColumnDef<ITransaction>[] = [
+  {
+    accessorKey: "id",
+    id: "id",
+    header: () => <DataGridTableRowSelectAll />,
+    cell: ({ row }) => <DataGridTableRowSelect row={row} />,
+    enableSorting: false,
+    size: 35,
+    enableResizing: false,
+    enableHiding: false,
+    meta: {
+      skeleton: <Skeleton className="size-4 rounded" />,
+      headerClassName:
+        "[--data-grid-header-cell-ps:var(--frame-panel-header-px)]",
+      cellClassName: "[--data-grid-body-cell-ps:var(--frame-panel-px)]",
+    },
+  },
+  {
+    accessorKey: "reference",
+    id: "reference",
+    header: ({ column }) => (
+      <DataGridColumnHeader column={column} visibility={true} />
+    ),
+    cell: ({ row }) => (
+      <div className="flex min-w-0 flex-col gap-0.5">
+        <span className="group/ref text-foreground hover:text-primary inline-flex min-w-0 cursor-pointer items-center gap-1 truncate font-mono text-xs font-medium transition-colors">
+          <span className="group-hover/ref:border-primary border-b border-transparent py-0.25 transition-colors">
+            {row.original.reference}
+          </span>
+          <ArrowRightIcon className="size-3 shrink-0 -translate-x-1 opacity-0 transition-all group-hover/ref:translate-x-0 group-hover/ref:opacity-100" aria-hidden="true" />
+        </span>
+        <span className="text-muted-foreground text-xs">
+          {formatDate(row.original.date)}
+        </span>
+      </div>
+    ),
+    size: 150,
+    enableSorting: true,
+    enableHiding: true,
+    enableResizing: true,
+    meta: {
+      headerTitle: "Reference",
+      skeleton: (
+        <div className="flex min-w-0 flex-col gap-0.5">
+          <Skeleton className="h-3.5 w-28" />
+          <Skeleton className="h-3 w-20" />
+        </div>
+      ),
+    },
+  },
+  {
+    accessorKey: "description",
+    id: "description",
+    header: ({ column }) => (
+      <DataGridColumnHeader column={column} visibility={true} />
+    ),
+    cell: ({ row }) => (
+      <div className="tems-center flex gap-2.5">
+        <Item className="w-auto shrink-0 border-0 p-0 [&_svg]:size-5">
+          <ItemMedia variant="icon" className="size-auto">
+            {row.original.merchantLogo}
+          </ItemMedia>
+        </Item>
+        <div className="flex min-w-0 flex-col gap-0.5">
+          <span className="text-foreground truncate text-sm font-medium">
+            {row.original.description}
+          </span>
+          <span className="text-muted-foreground truncate text-xs">
+            {row.original.merchant} · {row.original.category}
+          </span>
+        </div>
+      </div>
+    ),
+    minSize: 150,
+    enableSorting: true,
+    enableHiding: true,
+    enableResizing: true,
+    meta: {
+      headerTitle: "Description",
+      skeleton: (
+        <div className="flex items-center gap-2.5">
+          <Skeleton className="size-5 shrink-0 rounded" />
+          <div className="flex min-w-0 flex-col gap-0.5">
+            <Skeleton className="h-3.5 w-36" />
+            <Skeleton className="h-3 w-28" />
+          </div>
+        </div>
+      ),
+    },
+  },
+  {
+    accessorKey: "country",
+    id: "region",
+    header: ({ column }) => (
+      <DataGridColumnHeader column={column} visibility={true} />
+    ),
+    cell: ({ row }) => (
+      <div className="flex min-w-0 flex-col gap-0.5">
+        <div className="flex min-w-0 items-center gap-1.5">
+          <img
+            src={`https://flagcdn.com/${row.original.flag.toLowerCase()}.svg`}
+            alt=""
+            width={16}
+            height={16}
+            loading="lazy"
+            decoding="async"
+            className="size-4 shrink-0 rounded-full object-cover"
+          />
+          <span className="text-foreground line-clamp-1 text-sm font-medium">
+            {row.original.country}
+          </span>
+        </div>
+        {row.original.timezone && (
+          <span className="text-muted-foreground line-clamp-1 text-xs tabular-nums">
+            {row.original.timezone}
+          </span>
+        )}
+      </div>
+    ),
+    size: 170,
+    enableSorting: true,
+    enableHiding: true,
+    enableResizing: true,
+    meta: {
+      headerTitle: "Region",
+      skeleton: (
+        <div className="flex flex-col gap-0.5">
+          <div className="flex items-center gap-1.5">
+            <Skeleton className="size-4 shrink-0 rounded-full" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+          <Skeleton className="h-3 w-28" />
+        </div>
+      ),
+    },
+  },
+  {
+    accessorKey: "channel",
+    id: "channel",
+    header: ({ column }) => (
+      <DataGridColumnHeader column={column} visibility={true} />
+    ),
+    cell: ({ row }) => <ChannelBadge channel={row.original.channel} />,
+    size: 120,
+    enableSorting: true,
+    enableHiding: true,
+    enableResizing: true,
+    meta: {
+      headerTitle: "Channel",
+      skeleton: <Skeleton className="h-6 w-20 rounded-full" />,
+    },
+  },
+  {
+    accessorKey: "amount",
+    id: "amount",
+    header: ({ column }) => (
+      <DataGridColumnHeader column={column} visibility={true} />
+    ),
+    cell: ({ row }) => {
+      const { amount, currency } = row.original
+      const inflow = amount > 0
+      return (
+        <span
+          className={cn("font-semibold tabular-nums", inflow && "text-success")}
+        >
+          {inflow ? "+" : "−"}
+          {formatAmount(amount, currency)}
+        </span>
+      )
+    },
+    size: 100,
+    enableSorting: true,
+    enableHiding: true,
+    meta: {
+      headerTitle: "Amount",
+      skeleton: <Skeleton className="h-4 w-20" />,
+    },
+  },
+  {
+    accessorKey: "account",
+    id: "account",
+    header: ({ column }) => (
+      <DataGridColumnHeader column={column} visibility={true} />
+    ),
+    cell: ({ row }) => (
+      <span className="text-foreground font-mono text-xs">
+        {row.original.account}
+      </span>
+    ),
+    size: 160,
+    enableSorting: false,
+    enableHiding: true,
+    enableResizing: true,
+    meta: {
+      headerTitle: "Account",
+      skeleton: <Skeleton className="h-4 w-24" />,
+    },
+  },
+  {
+    accessorKey: "status",
+    id: "status",
+    header: ({ column }) => (
+      <DataGridColumnHeader column={column} visibility={true} />
+    ),
+    cell: ({ row }) => <StatusBadge status={row.original.status} />,
+    size: 90,
+    enableSorting: true,
+    enableHiding: true,
+    enableResizing: false,
+    meta: {
+      headerTitle: "Status",
+      skeleton: <Skeleton className="h-6 w-20 rounded-full" />,
+    },
+  },
+  {
+    id: "actions",
+    header: "",
+    cell: ({ row }) => <ActionsCell row={row} />,
+    size: 50,
+    enableSorting: false,
+    enableHiding: false,
+    enableResizing: false,
+    meta: {
+      skeleton: <Skeleton className="size-7 rounded" />,
+      headerClassName:
+        "[--data-grid-header-cell-pe:var(--frame-panel-header-px)]",
+      cellClassName: "[--data-grid-body-cell-pe:var(--frame-panel-px)]",
+    },
+  },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-1/components/data-grid-view.tsx b/apps/web/src/components/blocks/data-grid-filtering-1/components/data-grid-view.tsx
new file mode 100644
index 0000000..d18ab66
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-1/components/data-grid-view.tsx
@@ -0,0 +1,597 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import { Badge } from "@/components/reui/badge"
+import { DataGrid } from "@/components/reui/data-grid/data-grid"
+import { DataGridPagination } from "@/components/reui/data-grid/data-grid-pagination"
+import { DataGridScrollArea } from "@/components/reui/data-grid/data-grid-scroll-area"
+import { DataGridTable } from "@/components/reui/data-grid/data-grid-table"
+import {
+  createFilter,
+  Filters,
+  type Filter,
+  type FilterFieldConfig,
+} from "@/components/reui/filters"
+import {
+  Frame,
+  FrameDescription,
+  FrameFooter,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from "@/components/reui/frame"
+import {
+  ColumnSizingState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  SortingState,
+  useReactTable,
+  type VisibilityState,
+} from "@tanstack/react-table"
+import { toast } from "sonner"
+
+import { Button } from "@evobgp/ui/components/button"
+import { Item, ItemMedia } from "@evobgp/ui/components/item"
+import { Separator } from "@evobgp/ui/components/separator"
+import { TooltipProvider } from "@evobgp/ui/components/tooltip"
+import { ChannelBadge, columns, StatusBadge } from "./columns"
+import {
+  TRANSACTIONS,
+  type ITransaction,
+  type TxChannel,
+  type TxStatus,
+} from "./data"
+import { HashIcon, FileTextIcon, Building2Icon, FolderIcon, GlobeIcon, RouteIcon, CircleDotIcon, PlusIcon, FilterIcon, FunnelXIcon } from "lucide-react"
+
+// ── Helpers ──
+
+function getActiveFilters(filters: Filter[]) {
+  return filters.filter((filter) => {
+    const { values } = filter
+    if (!values || values.length === 0) return false
+    if (
+      values.every((value) => typeof value === "string" && value.trim() === "")
+    )
+      return false
+    if (values.every((value) => value === null || value === undefined))
+      return false
+    if (values.every((value) => Array.isArray(value) && value.length === 0))
+      return false
+    return true
+  })
+}
+
+/** Stable key for comparing whether applied (active) filters meaningfully changed. */
+function serializeActiveFiltersKey(active: Filter[]) {
+  return JSON.stringify(
+    active.map((f) => ({
+      field: f.field,
+      operator: f.operator,
+      values: f.values,
+    }))
+  )
+}
+
+function filterFieldValue(item: ITransaction, field: string): unknown {
+  if (field === "region") {
+    return [item.country, item.timezone].filter(Boolean).join(" ")
+  }
+  return item[field as keyof ITransaction]
+}
+
+function applyFiltersToData(
+  data: ITransaction[],
+  filters: Filter[]
+): ITransaction[] {
+  const active = getActiveFilters(filters)
+  let result = [...data]
+  active.forEach((filter) => {
+    const { field, operator, values } = filter
+    result = result.filter((item) => {
+      const raw = filterFieldValue(item, field)
+      const fieldValue = raw != null ? raw : ""
+
+      switch (operator) {
+        case "is":
+          return values.includes(fieldValue)
+        case "is_not":
+          return !values.includes(fieldValue)
+        case "is_any_of":
+          return values.some((v) => fieldValue === v)
+        case "is_not_any_of":
+          return !values.some((v) => fieldValue === v)
+        case "contains": {
+          const tokens = values.map((v) => String(v).trim()).filter(Boolean)
+          if (tokens.length === 0) return true
+          return tokens.some((token) =>
+            String(fieldValue).toLowerCase().includes(token.toLowerCase())
+          )
+        }
+        case "not_contains":
+          return !values.some((v) =>
+            String(fieldValue).toLowerCase().includes(String(v).toLowerCase())
+          )
+        case "starts_with":
+          return values.some((v) =>
+            String(fieldValue).toLowerCase().startsWith(String(v).toLowerCase())
+          )
+        case "ends_with":
+          return values.some((v) =>
+            String(fieldValue).toLowerCase().endsWith(String(v).toLowerCase())
+          )
+        case "equals":
+          return fieldValue === values[0]
+        case "not_equals":
+          return fieldValue !== values[0]
+        case "greater_than":
+          return Number(fieldValue) > Number(values[0])
+        case "less_than":
+          return Number(fieldValue) < Number(values[0])
+        case "greater_than_or_equal":
+          return Number(fieldValue) >= Number(values[0])
+        case "less_than_or_equal":
+          return Number(fieldValue) <= Number(values[0])
+        case "between":
+          if (values.length >= 2) {
+            const min = Number(values[0])
+            const max = Number(values[1])
+            return Number(fieldValue) >= min && Number(fieldValue) <= max
+          }
+          return true
+        case "not_between":
+          if (values.length >= 2) {
+            const min = Number(values[0])
+            const max = Number(values[1])
+            return Number(fieldValue) < min || Number(fieldValue) > max
+          }
+          return true
+        case "empty":
+          return fieldValue === "" || fieldValue == null
+        case "not_empty":
+          return fieldValue !== "" && fieldValue != null
+        default:
+          return true
+      }
+    })
+  })
+  return result
+}
+
+// ── Filter field config ──
+
+const CATEGORY_OPTIONS = [
+  "Payments",
+  "Infrastructure",
+  "AI / ML",
+  "Automation",
+  "Design",
+  "Documentation",
+  "Backend",
+  "Developer tools",
+]
+
+const STATUS_OPTIONS: { value: TxStatus; label: string }[] = [
+  { value: "completed", label: "Completed" },
+  { value: "pending", label: "Pending" },
+  { value: "failed", label: "Failed" },
+  { value: "cancelled", label: "Cancelled" },
+]
+
+const CHANNEL_OPTIONS: { value: TxChannel; label: string }[] = [
+  { value: "checkout", label: "Checkout" },
+  { value: "api", label: "API" },
+  { value: "invoice", label: "Invoice" },
+  { value: "dashboard", label: "Dashboard" },
+]
+
+const MERCHANT_FILTER_OPTIONS = Array.from(
+  new Map(
+    TRANSACTIONS.map((transaction) => [
+      transaction.merchant,
+      {
+        value: transaction.merchant,
+        label: transaction.merchant,
+        icon: (
+          <Item
+            render={<span />}
+            className="w-auto shrink-0 border-0 p-0 [&_svg]:size-4"
+          >
+            <ItemMedia variant="icon" className="size-auto">
+              {transaction.merchantLogo}
+            </ItemMedia>
+          </Item>
+        ),
+      },
+    ])
+  ).values()
+)
+
+function renderSelectedCount(values: unknown[]) {
+  if (values.length === 0) return "Select..."
+  if (values.length > 1) return `${values.length} selected`
+  return null
+}
+
+const filterFields: FilterFieldConfig[] = [
+  {
+    key: "reference",
+    label: "Reference",
+    icon: (
+      <HashIcon className="size-3.5" aria-hidden />
+    ),
+    type: "text",
+    className: "w-44",
+    placeholder: "Search...",
+  },
+  {
+    key: "description",
+    label: "Description",
+    icon: (
+      <FileTextIcon className="size-3.5" aria-hidden />
+    ),
+    type: "text",
+    className: "w-52",
+    placeholder: "Search...",
+  },
+  {
+    key: "merchant",
+    label: "Merchant",
+    icon: (
+      <Building2Icon className="size-3.5" aria-hidden />
+    ),
+    type: "select",
+    searchable: true,
+    className: "w-[200px]",
+    options: MERCHANT_FILTER_OPTIONS,
+    customValueRenderer: (values, options) => {
+      const state = renderSelectedCount(values)
+      if (state) return state
+
+      const option = options.find((item) => item.value === values[0])
+      if (!option) return String(values[0])
+
+      return (
+        <div className="flex items-center gap-2">
+          {option.icon}
+          <span className="truncate">{option.label}</span>
+        </div>
+      )
+    },
+  },
+  {
+    key: "category",
+    label: "Category",
+    icon: (
+      <FolderIcon className="size-3.5" aria-hidden />
+    ),
+    type: "select",
+    searchable: true,
+    className: "w-[200px]",
+    options: CATEGORY_OPTIONS.map((category) => ({
+      value: category,
+      label: category,
+    })),
+    customValueRenderer: (values) => {
+      const state = renderSelectedCount(values)
+      if (state) return state
+
+      return <Badge variant="outline">{String(values[0])}</Badge>
+    },
+  },
+  {
+    key: "region",
+    label: "Region",
+    icon: (
+      <GlobeIcon className="size-3.5" aria-hidden />
+    ),
+    type: "text",
+    className: "w-52",
+    placeholder: "Search...",
+  },
+  {
+    key: "channel",
+    label: "Channel",
+    icon: (
+      <RouteIcon className="size-3.5" aria-hidden />
+    ),
+    type: "select",
+    searchable: false,
+    className: "w-[156px]",
+    options: CHANNEL_OPTIONS,
+    customValueRenderer: (values) => {
+      const state = renderSelectedCount(values)
+      if (state) return state
+
+      return <ChannelBadge channel={values[0] as TxChannel} />
+    },
+  },
+  {
+    key: "status",
+    label: "Status",
+    icon: (
+      <CircleDotIcon className="size-3.5" aria-hidden />
+    ),
+    type: "select",
+    searchable: false,
+    className: "w-[156px]",
+    options: STATUS_OPTIONS,
+    customValueRenderer: (values) => {
+      const state = renderSelectedCount(values)
+      if (state) return state
+
+      return <StatusBadge status={values[0] as TxStatus} />
+    },
+  },
+]
+
+/** Single default row: Reference | contains | empty - inactive until user types (see getActiveFilters). */
+function createDefaultTransactionFilters(): Filter[] {
+  return [createFilter("reference", "contains", [""])]
+}
+
+const DESCRIPTION_COLUMN_ID = "description"
+const DESCRIPTION_COLUMN_DEFAULT_SIZE = 300
+
+function getAutoDescriptionColumnSize(
+  containerWidth: number,
+  columnVisibility: VisibilityState
+) {
+  const occupiedWidth = columns.reduce((total, column) => {
+    if (
+      !column.id ||
+      column.id === DESCRIPTION_COLUMN_ID ||
+      columnVisibility[column.id] === false
+    ) {
+      return total
+    }
+
+    return total + (typeof column.size === "number" ? column.size : 0)
+  }, 0)
+
+  return Math.max(
+    DESCRIPTION_COLUMN_DEFAULT_SIZE,
+    Math.round(containerWidth - occupiedWidth)
+  )
+}
+
+// ── Main component ──
+
+export function DataGridView() {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 5,
+  })
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: "reference", desc: true },
+  ])
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
+    account: false,
+  })
+  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({})
+  const [filters, setFilters] = useState<Filter[]>(
+    createDefaultTransactionFilters
+  )
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [filteredData, setFilteredData] = useState<ITransaction[]>(TRANSACTIONS)
+  const [gridWidth, setGridWidth] = useState(0)
+  const isInitialLoad = useRef(true)
+  const gridWidthRef = useRef<HTMLDivElement>(null)
+  const hasManualColumnSizing = useRef(false)
+  const lastAppliedActiveKey = useRef<string>(
+    serializeActiveFiltersKey(
+      getActiveFilters(createDefaultTransactionFilters())
+    )
+  )
+
+  const applyFilters = useCallback((newFilters: Filter[]) => {
+    return applyFiltersToData(TRANSACTIONS, newFilters)
+  }, [])
+
+  const simulateAsyncFiltering = useCallback(
+    async (newFilters: Filter[]) => {
+      setIsLoading(true)
+      await new Promise((resolve) => setTimeout(resolve, 400))
+      setFilteredData(applyFilters(newFilters))
+      setIsLoading(false)
+    },
+    [applyFilters]
+  )
+
+  const handleFiltersChange = useCallback(
+    (newFilters: Filter[]) => {
+      setFilters(newFilters)
+      const newActive = getActiveFilters(newFilters)
+      const nextKey = serializeActiveFiltersKey(newActive)
+      if (nextKey === lastAppliedActiveKey.current) return
+      lastAppliedActiveKey.current = nextKey
+      setPagination((prev) => ({ ...prev, pageIndex: 0 }))
+      simulateAsyncFiltering(newFilters)
+    },
+    [simulateAsyncFiltering]
+  )
+
+  useEffect(() => {
+    if (isInitialLoad.current) {
+      setFilteredData(applyFilters(filters))
+      isInitialLoad.current = false
+    }
+  }, [filters, applyFilters])
+
+  useEffect(() => {
+    const element = gridWidthRef.current
+
+    if (!element) return
+
+    const syncGridWidth = () => {
+      setGridWidth(element.clientWidth)
+    }
+
+    syncGridWidth()
+
+    if (typeof ResizeObserver === "undefined") return
+
+    const observer = new ResizeObserver(syncGridWidth)
+    observer.observe(element)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  useEffect(() => {
+    if (gridWidth <= 0 || hasManualColumnSizing.current) return
+
+    const nextDescriptionWidth = getAutoDescriptionColumnSize(
+      gridWidth,
+      columnVisibility
+    )
+
+    setColumnSizing((current) =>
+      current[DESCRIPTION_COLUMN_ID] === nextDescriptionWidth
+        ? current
+        : {
+            ...current,
+            [DESCRIPTION_COLUMN_ID]: nextDescriptionWidth,
+          }
+    )
+  }, [columnVisibility, gridWidth])
+
+  const [columnOrder, setColumnOrder] = useState<string[]>(
+    columns.map((c) => c.id as string)
+  )
+
+  const handleColumnSizingChange = useCallback(
+    (
+      updater:
+        | ColumnSizingState
+        | ((old: ColumnSizingState) => ColumnSizingState)
+    ) => {
+      hasManualColumnSizing.current = true
+      setColumnSizing(updater)
+    },
+    []
+  )
+
+  const table = useReactTable({
+    columns,
+    data: filteredData,
+    pageCount: Math.ceil(filteredData.length / pagination.pageSize),
+    getRowId: (row) => row.id,
+    state: {
+      pagination,
+      sorting,
+      columnOrder,
+      columnSizing,
+      columnVisibility,
+    },
+    columnResizeMode: "onChange",
+    onColumnOrderChange: setColumnOrder,
+    onColumnSizingChange: handleColumnSizingChange,
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  })
+
+  /** Show Clear whenever any filter row is visible (including empty placeholders). */
+  const showClearButton = filters.length > 0
+
+  return (
+    <TooltipProvider delay={200}>
+      {/* Table */}
+      <DataGrid
+        table={table}
+        isLoading={isLoading}
+        loadingMode="skeleton"
+        recordCount={filteredData.length}
+        emptyMessage={
+          !isLoading && filteredData.length === 0
+            ? "No transactions match your filters."
+            : undefined
+        }
+        tableLayout={{
+          columnsPinnable: true,
+          columnsResizable: true,
+          columnsMovable: true,
+          columnsVisibility: true,
+          dense: true,
+        }}
+      >
+        <Frame variant="default" spacing="sm" className="w-full">
+          <FrameHeader className="flex-row items-center justify-between gap-3">
+            <div className="flex flex-col gap-0.5">
+              <FrameTitle id="page-heading" className="text-balance">
+                Transactions
+              </FrameTitle>
+              <FrameDescription className="text-xs text-pretty">
+                Billing ledger(refunds / payouts)
+              </FrameDescription>
+            </div>
+            <Button
+              type="button"
+              onClick={() =>
+                toast.info("New transaction", {
+                  description:
+                    "Wire to your checkout or manual entry flow, demo only.",
+                })
+              }
+            >
+              <PlusIcon aria-hidden />
+              New transaction
+            </Button>
+          </FrameHeader>
+          <FramePanel className="p-0! shadow-none!">
+            <div className="flex flex-wrap items-center justify-between gap-2 px-(--frame-panel-header-px) py-(--frame-panel-header-py)">
+              <Filters
+                filters={filters}
+                fields={filterFields}
+                onChange={handleFiltersChange}
+                size="default"
+                trigger={
+                  <Button variant="outline" aria-label="Filters">
+                    <FilterIcon aria-hidden />
+                    Filters
+                  </Button>
+                }
+              />
+              {showClearButton && (
+                <Button
+                  variant="outline"
+                  className="shrink-0"
+                  onClick={() => {
+                    const next = createDefaultTransactionFilters()
+                    lastAppliedActiveKey.current = serializeActiveFiltersKey(
+                      getActiveFilters(next)
+                    )
+                    setFilters(next)
+                    simulateAsyncFiltering(next)
+                  }}
+                  disabled={isLoading}
+                >
+                  <FunnelXIcon className="size-3.5" aria-hidden />
+                  Clear
+                </Button>
+              )}
+            </div>
+            <Separator />
+            <div ref={gridWidthRef} className="w-full">
+              <DataGridScrollArea>
+                <DataGridTable />
+              </DataGridScrollArea>
+            </div>
+          </FramePanel>
+          <FrameFooter>
+            <DataGridPagination />
+          </FrameFooter>
+        </Frame>
+      </DataGrid>
+    </TooltipProvider>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-1/components/data.tsx b/apps/web/src/components/blocks/data-grid-filtering-1/components/data.tsx
new file mode 100644
index 0000000..e407f5e
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-1/components/data.tsx
@@ -0,0 +1,263 @@
+import { type ReactNode } from "react"
+
+import { AnthropicBlack } from "@evobgp/ui/components/svgs/anthropicBlack"
+import { AnthropicWhite } from "@evobgp/ui/components/svgs/anthropicWhite"
+import { Convex } from "@evobgp/ui/components/svgs/convex"
+import { Mintlify } from "@evobgp/ui/components/svgs/mintlify"
+import { N8n } from "@evobgp/ui/components/svgs/n8n"
+import { Neon } from "@evobgp/ui/components/svgs/neon"
+import { Openai } from "@evobgp/ui/components/svgs/openai"
+import { OpenaiDark } from "@evobgp/ui/components/svgs/openaiDark"
+import { Paper } from "@evobgp/ui/components/svgs/paper"
+import { Prisma } from "@evobgp/ui/components/svgs/prisma"
+import { PrismaDark } from "@evobgp/ui/components/svgs/prismaDark"
+import { Stripe } from "@evobgp/ui/components/svgs/stripe"
+import { Supabase } from "@evobgp/ui/components/svgs/supabase"
+
+// ── Types ──
+
+export type TxType = "payment" | "refund" | "payout" | "charge" | "transfer"
+export type TxStatus = "completed" | "pending" | "failed" | "cancelled"
+/** Where the charge originated (billing SaaS pattern - replaces duplicate "method" logos). */
+export type TxChannel = "checkout" | "api" | "invoice" | "dashboard"
+
+export interface ITransaction {
+  id: string
+  reference: string
+  date: string
+  description: string
+  merchant: string
+  merchantLogo: ReactNode
+  category: string
+  type: TxType
+  channel: TxChannel
+  amount: number
+  currency: string
+  status: TxStatus
+  account: string
+  country: string
+  flag: string
+  timezone?: string
+  note?: string
+}
+
+// ── Logos (one mark per vendor - @/components/ui/svgs only) ──
+
+const OPENAI_LOGO = (
+  <>
+    <span aria-hidden className="dark:hidden">
+      <Openai className="size-5" />
+    </span>
+    <span aria-hidden className="hidden dark:block">
+      <OpenaiDark className="size-5" />
+    </span>
+  </>
+)
+
+const PRISMA_LOGO = (
+  <>
+    <span aria-hidden className="dark:hidden">
+      <Prisma className="size-5" />
+    </span>
+    <span aria-hidden className="hidden dark:block">
+      <PrismaDark className="size-5" />
+    </span>
+  </>
+)
+
+const ANTHROPIC_LOGO = (
+  <>
+    <span aria-hidden className="dark:hidden">
+      <AnthropicBlack className="size-5" />
+    </span>
+    <span aria-hidden className="hidden dark:block">
+      <AnthropicWhite className="size-5" />
+    </span>
+  </>
+)
+
+// ── Data: 10 rows, unique merchants, inbound + outbound (refunds / payouts) ──
+
+export const TRANSACTIONS: ITransaction[] = [
+  {
+    id: "txn_001",
+    reference: "TXN-2025-000143",
+    date: "2025-06-12T09:14:00Z",
+    description: "Pro plan · subscription renewal",
+    merchant: "Stripe",
+    merchantLogo: <Stripe className="size-5" aria-hidden="true" />,
+    category: "Payments",
+    type: "charge",
+    channel: "checkout",
+    amount: 240.0,
+    currency: "USD",
+    status: "completed",
+    account: "•••• 4242",
+    country: "United States",
+    flag: "us",
+    timezone: "PST (UTC−8)",
+  },
+  {
+    id: "txn_002",
+    reference: "TXN-2025-000142",
+    date: "2025-06-11T16:30:00Z",
+    description: "Database compute · June cycle",
+    merchant: "Supabase",
+    merchantLogo: <Supabase className="size-5" aria-hidden="true" />,
+    category: "Infrastructure",
+    type: "charge",
+    channel: "dashboard",
+    amount: 75.0,
+    currency: "USD",
+    status: "completed",
+    account: "•••• 4242",
+    country: "United States",
+    flag: "us",
+    timezone: "EST (UTC−5)",
+  },
+  {
+    id: "txn_003",
+    reference: "TXN-2025-000141",
+    date: "2025-06-11T11:02:00Z",
+    description: "GPT-4o usage · billing period",
+    merchant: "OpenAI",
+    merchantLogo: OPENAI_LOGO,
+    category: "AI / ML",
+    type: "charge",
+    channel: "api",
+    amount: 312.48,
+    currency: "USD",
+    status: "completed",
+    account: "•••• 4242",
+    country: "United States",
+    flag: "us",
+    timezone: "PST (UTC−8)",
+  },
+  {
+    id: "txn_004",
+    reference: "TXN-2025-000140",
+    date: "2025-06-10T08:50:00Z",
+    description: "Workflow credit · billing adjustment (outbound)",
+    merchant: "N8n",
+    merchantLogo: <N8n className="size-5" aria-hidden="true" />,
+    category: "Automation",
+    type: "refund",
+    channel: "dashboard",
+    amount: -21.0,
+    currency: "USD",
+    status: "completed",
+    account: "org@acme.io",
+    country: "Germany",
+    flag: "de",
+    timezone: "CET (UTC+1)",
+  },
+  {
+    id: "txn_005",
+    reference: "TXN-2025-000139",
+    date: "2025-06-09T14:15:00Z",
+    description: "Canvas seats · prorated refund to customer",
+    merchant: "Paper",
+    merchantLogo: <Paper className="size-5" aria-hidden="true" />,
+    category: "Design",
+    type: "refund",
+    channel: "invoice",
+    amount: -96.0,
+    currency: "USD",
+    status: "pending",
+    account: "•••• 0011",
+    country: "United Kingdom",
+    flag: "gb",
+    timezone: "GMT (UTC+0)",
+  },
+  {
+    id: "txn_006",
+    reference: "TXN-2025-000138",
+    date: "2025-06-08T18:44:00Z",
+    description: "Docs hosting · team",
+    merchant: "Mintlify",
+    merchantLogo: <Mintlify className="size-5" aria-hidden="true" />,
+    category: "Documentation",
+    type: "charge",
+    channel: "checkout",
+    amount: 45.0,
+    currency: "USD",
+    status: "completed",
+    account: "•••• 4242",
+    country: "United States",
+    flag: "us",
+    timezone: "CST (UTC−6)",
+  },
+  {
+    id: "txn_007",
+    reference: "TXN-2025-000137",
+    date: "2025-06-08T12:22:00Z",
+    description: "Function invocations · May",
+    merchant: "Convex",
+    merchantLogo: <Convex className="size-5" aria-hidden="true" />,
+    category: "Backend",
+    type: "charge",
+    channel: "api",
+    amount: 25.0,
+    currency: "USD",
+    status: "failed",
+    account: "•••• 9871",
+    country: "United States",
+    flag: "us",
+    timezone: "PST (UTC−8)",
+    note: "Card declined, retry scheduled",
+  },
+  {
+    id: "txn_008",
+    reference: "TXN-2025-000136",
+    date: "2025-06-07T10:05:00Z",
+    description: "Payout to linked bank · hobby tier balance",
+    merchant: "Neon",
+    merchantLogo: <Neon className="size-5" aria-hidden="true" />,
+    category: "Infrastructure",
+    type: "payout",
+    channel: "dashboard",
+    amount: -250.0,
+    currency: "USD",
+    status: "completed",
+    account: "dev@acme.io",
+    country: "Germany",
+    flag: "de",
+    timezone: "CET (UTC+1)",
+  },
+  {
+    id: "txn_009",
+    reference: "TXN-2025-000135",
+    date: "2025-06-06T15:00:00Z",
+    description: "ORM · team license",
+    merchant: "Prisma",
+    merchantLogo: PRISMA_LOGO,
+    category: "Developer tools",
+    type: "charge",
+    channel: "invoice",
+    amount: 60.0,
+    currency: "USD",
+    status: "completed",
+    account: "•••• 4242",
+    country: "Germany",
+    flag: "de",
+    timezone: "CET (UTC+1)",
+  },
+  {
+    id: "txn_010",
+    reference: "TXN-2025-000134",
+    date: "2025-06-05T11:11:00Z",
+    description: "Claude API · May usage",
+    merchant: "Anthropic",
+    merchantLogo: ANTHROPIC_LOGO,
+    category: "AI / ML",
+    type: "payment",
+    channel: "api",
+    amount: 2500.0,
+    currency: "USD",
+    status: "completed",
+    account: "dev@acme.io",
+    country: "Canada",
+    flag: "ca",
+    timezone: "EST (UTC−5)",
+  },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-1/page.tsx b/apps/web/src/components/blocks/data-grid-filtering-1/page.tsx
new file mode 100644
index 0000000..3e87c79
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-1/page.tsx
@@ -0,0 +1,15 @@
+import { DataGridView } from "./components/data-grid-view"
+
+export function Page() {
+  return (
+    <main
+      className="mx-auto flex min-h-svh w-full max-w-7xl items-start justify-center p-8 pt-12"
+      aria-labelledby="page-heading"
+    >
+      <h1 id="page-heading" className="sr-only">
+        Billing ledger data grid
+      </h1>
+      <DataGridView />
+    </main>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-2/components/columns.tsx b/apps/web/src/components/blocks/data-grid-filtering-2/components/columns.tsx
new file mode 100644
index 0000000..680817b
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-2/components/columns.tsx
@@ -0,0 +1,408 @@
+"use client"
+
+import { Badge } from "@/components/reui/badge"
+import { DataGridColumnHeader } from "@/components/reui/data-grid/data-grid-column-header"
+import {
+  DataGridTableRowSelect,
+  DataGridTableRowSelectAll,
+} from "@/components/reui/data-grid/data-grid-table"
+import { Rating } from "@/components/reui/rating"
+import { type ReactNode } from "react"
+import { type ColumnDef } from "@tanstack/react-table"
+import { format, parseISO } from "date-fns"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@evobgp/ui/components/avatar"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+import { Item, ItemMedia } from "@evobgp/ui/components/item"
+import { Switch } from "@evobgp/ui/components/switch"
+import {
+  type AutomationKind,
+  type AutomationOwnerAvailability,
+  type AutomationState,
+  type IAutomationRecord,
+} from "./data"
+import { GitBranchIcon, RouteIcon, SparklesIcon, MailIcon, BellRingIcon, EllipsisVerticalIcon, PencilIcon, EyeIcon, CircleCheckIcon, ArchiveIcon } from "lucide-react"
+
+export type AutomationAction = "edit" | "open" | "archive"
+
+const automationKindStyles: Record<
+  AutomationKind,
+  { chipClassName: string; icon: ReactNode }
+> = {
+  sequence: {
+    chipClassName:
+      "bg-sky-50 text-sky-600 ring-sky-200 dark:bg-sky-500/15 dark:text-sky-300 dark:ring-sky-400/30",
+    icon: (
+      <GitBranchIcon className="size-4" aria-hidden="true" />
+    ),
+  },
+  routing: {
+    chipClassName:
+      "bg-violet-50 text-violet-600 ring-violet-200 dark:bg-violet-500/15 dark:text-violet-300 dark:ring-violet-400/30",
+    icon: (
+      <RouteIcon className="size-4" aria-hidden="true" />
+    ),
+  },
+  enrichment: {
+    chipClassName:
+      "bg-emerald-50 text-emerald-600 ring-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-300 dark:ring-emerald-400/30",
+    icon: (
+      <SparklesIcon className="size-4" aria-hidden="true" />
+    ),
+  },
+  digest: {
+    chipClassName:
+      "bg-amber-50 text-amber-600 ring-amber-200 dark:bg-amber-500/15 dark:text-amber-300 dark:ring-amber-400/30",
+    icon: (
+      <MailIcon className="size-4" aria-hidden="true" />
+    ),
+  },
+  escalation: {
+    chipClassName:
+      "bg-rose-50 text-rose-600 ring-rose-200 dark:bg-rose-500/15 dark:text-rose-300 dark:ring-rose-400/30",
+    icon: (
+      <BellRingIcon className="size-4" aria-hidden="true" />
+    ),
+  },
+}
+
+const stateBadgeStyles: Record<
+  AutomationState,
+  { label: string; dotClassName?: string }
+> = {
+  live: {
+    label: "Live",
+    dotClassName: "bg-emerald-500",
+  },
+  review: {
+    label: "Needs approval",
+    dotClassName: "bg-amber-500",
+  },
+  drafts: {
+    label: "Draft",
+    dotClassName: "bg-slate-400 dark:bg-slate-300",
+  },
+  paused: {
+    label: "Paused",
+    dotClassName: "bg-zinc-400 dark:bg-zinc-300",
+  },
+}
+
+const updatedBucketLabel: Record<IAutomationRecord["updatedBucket"], string> = {
+  today: "Today",
+  "this-week": "This week",
+  older: "Older",
+}
+
+const availabilityColor: Record<AutomationOwnerAvailability, string> = {
+  online: "bg-green-500",
+  away: "bg-yellow-400",
+  busy: "bg-red-500",
+  offline: "bg-gray-500",
+}
+
+function AutomationKindChip({ kind }: { kind: AutomationKind }) {
+  const style = automationKindStyles[kind]
+
+  return (
+    <Item
+      render={<span />}
+      className={cn(
+        "p-0",
+        "inline-flex size-10 items-center justify-center ring-1 ring-inset",
+        style.chipClassName
+      )}
+      aria-hidden="true"
+    >
+      <ItemMedia variant="icon" className="size-auto">
+        {style.icon}
+      </ItemMedia>
+    </Item>
+  )
+}
+
+function AutomationNameCell({ automation }: { automation: IAutomationRecord }) {
+  return (
+    <div className="flex min-w-0 items-center gap-3">
+      <AutomationKindChip kind={automation.kind} />
+      <div className="flex min-w-0 flex-col gap-px">
+        <span className="text-foreground truncate text-sm font-medium">
+          {automation.title}
+        </span>
+        <div className="text-muted-foreground flex min-w-0 items-center gap-1.5 text-xs">
+          <span className="truncate">{automation.runWindowLabel}</span>
+          <span
+            className="bg-input size-1 shrink-0 rounded-full"
+            aria-hidden="true"
+          />
+          <span className="truncate">{automation.audienceLabel}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function OwnerCell({ automation }: { automation: IAutomationRecord }) {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="relative shrink-0">
+        <Avatar className="size-8">
+          {automation.owner.avatar ? (
+            <AvatarImage
+              src={automation.owner.avatar}
+              alt={automation.owner.name}
+            />
+          ) : null}
+          <AvatarFallback>{automation.owner.initials}</AvatarFallback>
+        </Avatar>
+        <span
+          className={cn(
+            "ring-background absolute right-0 bottom-0.5 size-2 rounded-full ring-2",
+            availabilityColor[automation.owner.availability]
+          )}
+          aria-hidden
+        />
+      </div>
+      <div className="min-w-0">
+        <div className="text-foreground line-clamp-1 font-medium">
+          {automation.owner.name}
+        </div>
+        <div
+          className="text-muted-foreground line-clamp-1 text-xs"
+          title={automation.owner.email}
+        >
+          {automation.owner.email}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function StateCell({ automation }: { automation: IAutomationRecord }) {
+  const stateStyle = stateBadgeStyles[automation.state]
+
+  return (
+    <div className="flex min-w-0 items-center">
+      <Badge variant="outline" className="gap-1.5">
+        {stateStyle.dotClassName ? (
+          <span
+            className={cn(
+              "size-1.5 shrink-0 rounded-full",
+              stateStyle.dotClassName
+            )}
+            aria-hidden="true"
+          />
+        ) : null}
+        {stateStyle.label}
+      </Badge>
+    </div>
+  )
+}
+
+function UpdatedCell({ automation }: { automation: IAutomationRecord }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-px">
+      <span className="text-foreground text-sm">
+        {format(parseISO(automation.updatedAt), "MMM d, yyyy")}
+      </span>
+      <span className="text-muted-foreground text-xs">
+        {updatedBucketLabel[automation.updatedBucket]}
+      </span>
+    </div>
+  )
+}
+
+function RatingCell({ automation }: { automation: IAutomationRecord }) {
+  return <Rating rating={automation.rating} size="sm" showValue={true} />
+}
+
+function AutomationActionsCell({
+  automation,
+  onAction,
+  onToggleEnabled,
+}: {
+  automation: IAutomationRecord
+  onAction: (action: AutomationAction, automation: IAutomationRecord) => void
+  onToggleEnabled: (automation: IAutomationRecord, nextValue: boolean) => void
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            aria-label={`Open actions for ${automation.title}`}
+          >
+            <EllipsisVerticalIcon className="size-4" aria-hidden="true" />
+          </Button>
+        }
+      />
+      {/* Content */}
+      <DropdownMenuContent align="end" className="w-52">
+        <DropdownMenuGroup>
+          <DropdownMenuItem onClick={() => onAction("edit", automation)}>
+            <PencilIcon className="size-4" aria-hidden="true" />
+            Edit
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => onAction("open", automation)}>
+            <EyeIcon className="size-4" aria-hidden="true" />
+            View Details
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            closeOnClick={false}
+            onClick={(event) => {
+              // The Switch toggles itself and its click bubbles here; skip it
+              // so item-level activation (row click, Enter/Space) toggles once.
+              if (
+                event.target instanceof Element &&
+                event.target.closest('[data-slot="switch"]')
+              ) {
+                return
+              }
+              onToggleEnabled(automation, !automation.enabled)
+            }}
+            className="justify-between gap-4"
+          >
+            <span className="flex items-center gap-2">
+              <CircleCheckIcon className="size-4" aria-hidden="true" />
+              Enabled
+            </span>
+            <Switch
+              size="sm"
+              aria-label={`Toggle ${automation.title}`}
+              checked={automation.enabled}
+              onCheckedChange={(checked) =>
+                onToggleEnabled(automation, checked)
+              }
+            />
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            variant="destructive"
+            onClick={() => onAction("archive", automation)}
+          >
+            <ArchiveIcon className="size-4" aria-hidden="true" />
+            Archive
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export function createAutomationColumns({
+  onAction,
+  onToggleEnabled,
+}: {
+  onAction: (action: AutomationAction, automation: IAutomationRecord) => void
+  onToggleEnabled: (automation: IAutomationRecord, nextValue: boolean) => void
+}): ColumnDef<IAutomationRecord>[] {
+  return [
+    {
+      id: "select",
+      header: () => <DataGridTableRowSelectAll />,
+      cell: ({ row }) => <DataGridTableRowSelect row={row} />,
+      size: 30,
+      enableSorting: false,
+      enableResizing: false,
+      enableHiding: false,
+      meta: {
+        headerClassName:
+          "[--data-grid-header-cell-ps:var(--frame-panel-header-px)]",
+        cellClassName: "[--data-grid-body-cell-ps:var(--frame-panel-px)]",
+      },
+    },
+    {
+      accessorFn: (row) => row.title,
+      id: "workflow",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Workflow" column={column} />
+      ),
+      cell: ({ row }) => <AutomationNameCell automation={row.original} />,
+      size: 340,
+      minSize: 200,
+      enableSorting: true,
+      enableHiding: false,
+      meta: {
+        autoSize: true,
+        headerClassName: "pl-3!",
+        cellClassName: "pl-3!",
+      },
+    },
+    {
+      accessorFn: (row) => row.owner.name,
+      id: "owner",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Owner" column={column} />
+      ),
+      cell: ({ row }) => <OwnerCell automation={row.original} />,
+      size: 175,
+      enableSorting: true,
+    },
+    {
+      accessorFn: (row) => row.rating,
+      id: "rating",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Score" column={column} />
+      ),
+      cell: ({ row }) => <RatingCell automation={row.original} />,
+      size: 150,
+      enableSorting: true,
+    },
+    {
+      accessorFn: (row) => row.state,
+      id: "state",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="State" column={column} />
+      ),
+      cell: ({ row }) => <StateCell automation={row.original} />,
+      size: 150,
+      enableSorting: true,
+    },
+    {
+      accessorFn: (row) => parseISO(row.updatedAt).getTime(),
+      id: "updatedAt",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Last updated" column={column} />
+      ),
+      cell: ({ row }) => <UpdatedCell automation={row.original} />,
+      size: 125,
+      enableSorting: true,
+    },
+    {
+      id: "actions",
+      header: () => null,
+      cell: ({ row }) => (
+        <div className="flex items-center justify-end">
+          <AutomationActionsCell
+            automation={row.original}
+            onAction={onAction}
+            onToggleEnabled={onToggleEnabled}
+          />
+        </div>
+      ),
+      size: 56,
+      enableSorting: false,
+      meta: {
+        headerClassName:
+          "[--data-grid-header-cell-pe:var(--frame-panel-header-px)]",
+        cellClassName: "[--data-grid-body-cell-pe:var(--frame-panel-px)]",
+      },
+    },
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-2/components/data-grid-view.tsx b/apps/web/src/components/blocks/data-grid-filtering-2/components/data-grid-view.tsx
new file mode 100644
index 0000000..bece769
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-2/components/data-grid-view.tsx
@@ -0,0 +1,660 @@
+import { useCallback, useMemo, useState } from "react"
+import { Badge } from "@/components/reui/badge"
+import { DataGrid } from "@/components/reui/data-grid/data-grid"
+import { DataGridPagination } from "@/components/reui/data-grid/data-grid-pagination"
+import { DataGridScrollArea } from "@/components/reui/data-grid/data-grid-scroll-area"
+import { DataGridTable } from "@/components/reui/data-grid/data-grid-table"
+import {
+  createFilter,
+  Filters,
+  type Filter,
+  type FilterFieldConfig,
+} from "@/components/reui/filters"
+import {
+  Frame,
+  FrameDescription,
+  FrameFooter,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from "@/components/reui/frame"
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type PaginationState,
+  type RowSelectionState,
+  type SortingState,
+} from "@tanstack/react-table"
+import { toast } from "sonner"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@evobgp/ui/components/alert-dialog"
+import { Button } from "@evobgp/ui/components/button"
+import { Separator } from "@evobgp/ui/components/separator"
+import { Tabs, TabsList, TabsTrigger } from "@evobgp/ui/components/tabs"
+import { createAutomationColumns } from "./columns"
+import {
+  AUTOMATION_TABS,
+  AUTOMATIONS,
+  DELIVERY_FILTER_OPTIONS,
+  getAutomationTabFromState,
+  OWNER_FILTER_OPTIONS,
+  UPDATED_FILTER_OPTIONS,
+  type AutomationState,
+  type AutomationTab,
+  type IAutomationRecord,
+} from "./data"
+import { SearchIcon, UsersIcon, RouteIcon, ClockIcon, PlusIcon, FilterIcon, FunnelXIcon } from "lucide-react"
+
+type ToastTone = "success" | "neutral" | "destructive"
+
+const toneStyles: Record<ToastTone, { dot: string }> = {
+  success: { dot: "bg-emerald-500" },
+  neutral: { dot: "bg-sky-500" },
+  destructive: { dot: "bg-rose-500" },
+}
+
+function showAutomationToast({
+  tone,
+  title,
+  description,
+}: {
+  tone: ToastTone
+  title: string
+  description: string
+}) {
+  toast.custom((id) => (
+    <div className="bg-popover text-popover-foreground border-border flex w-[356px] flex-col gap-3 rounded-md border p-4 shadow-lg">
+      <div className="flex items-start gap-2">
+        <span
+          className={cn(
+            "mt-1 flex size-2 shrink-0 rounded-full",
+            toneStyles[tone].dot
+          )}
+          aria-hidden="true"
+        />
+        <div className="flex flex-1 flex-col gap-1">
+          <p className="text-sm font-semibold">{title}</p>
+          <p className="text-muted-foreground text-sm leading-relaxed text-pretty">
+            {description}
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-2">
+        <Button size="xs" variant="outline" onClick={() => toast.dismiss(id)}>
+          Done
+        </Button>
+      </div>
+    </div>
+  ))
+}
+
+function getAutomationSearchBlob(automation: IAutomationRecord) {
+  return [
+    automation.title,
+    automation.kind,
+    automation.state,
+    automation.deliveryMode,
+    automation.audienceLabel,
+    automation.runWindowLabel,
+    automation.owner.name,
+    automation.owner.email,
+    automation.owner.teamLabel,
+    automation.approvalRequired ? "approval required" : "auto-approved",
+    automation.enabled ? "enabled" : "disabled",
+  ]
+    .join(" ")
+    .toLowerCase()
+}
+
+function getActiveFilters(filters: Filter[]) {
+  return filters.filter((filter) => {
+    const { values } = filter
+    if (!values || values.length === 0) return false
+    if (
+      values.every((value) => typeof value === "string" && value.trim() === "")
+    ) {
+      return false
+    }
+    if (values.every((value) => value === null || value === undefined)) {
+      return false
+    }
+    if (values.every((value) => Array.isArray(value) && value.length === 0)) {
+      return false
+    }
+    return true
+  })
+}
+
+function renderSelectedCount(values: unknown[]) {
+  if (values.length === 0) return "Select..."
+  if (values.length > 1) return `${values.length} selected`
+  return null
+}
+
+function renderSingleSelectedLabel(
+  values: unknown[],
+  options: { value: string; label: string }[]
+) {
+  const state = renderSelectedCount(values)
+  if (state) return state
+
+  const option = options.find((item) => item.value === values[0])
+  return option?.label ?? String(values[0])
+}
+
+function filterFieldValue(
+  automation: IAutomationRecord,
+  field: string
+): unknown {
+  switch (field) {
+    case "workflow":
+      return getAutomationSearchBlob(automation)
+    case "ownerTeam":
+      return automation.owner.team
+    case "deliveryMode":
+      return automation.deliveryMode
+    case "updatedBucket":
+      return automation.updatedBucket
+    default:
+      return ""
+  }
+}
+
+function applyFiltersToData(
+  data: IAutomationRecord[],
+  filters: Filter[]
+): IAutomationRecord[] {
+  const active = getActiveFilters(filters)
+  let result = [...data]
+
+  active.forEach((filter) => {
+    const { field, operator, values } = filter
+
+    result = result.filter((item) => {
+      const raw = filterFieldValue(item, field)
+      const fieldValue = raw != null ? raw : ""
+
+      switch (operator) {
+        case "is":
+          return values.includes(fieldValue)
+        case "is_not":
+          return !values.includes(fieldValue)
+        case "is_any_of":
+          return values.some((value) => fieldValue === value)
+        case "is_not_any_of":
+          return !values.some((value) => fieldValue === value)
+        case "contains": {
+          const tokens = values
+            .map((value) => String(value).trim())
+            .filter(Boolean)
+          if (tokens.length === 0) return true
+          return tokens.some((token) =>
+            String(fieldValue).toLowerCase().includes(token.toLowerCase())
+          )
+        }
+        case "not_contains":
+          return !values.some((value) =>
+            String(fieldValue)
+              .toLowerCase()
+              .includes(String(value).toLowerCase())
+          )
+        case "starts_with":
+          return values.some((value) =>
+            String(fieldValue)
+              .toLowerCase()
+              .startsWith(String(value).toLowerCase())
+          )
+        case "ends_with":
+          return values.some((value) =>
+            String(fieldValue)
+              .toLowerCase()
+              .endsWith(String(value).toLowerCase())
+          )
+        case "empty":
+          return fieldValue === "" || fieldValue == null
+        case "not_empty":
+          return fieldValue !== "" && fieldValue != null
+        default:
+          return true
+      }
+    })
+  })
+
+  return result
+}
+
+const OWNER_TEAM_FILTER_OPTIONS = OWNER_FILTER_OPTIONS.filter(
+  (option) => option.value !== "everyone"
+).map((option) => ({
+  value: option.value,
+  label: option.label,
+}))
+
+const DELIVERY_MODE_FILTER_OPTIONS = DELIVERY_FILTER_OPTIONS.filter(
+  (option) => option.value !== "any"
+).map((option) => ({
+  value: option.value,
+  label: option.label,
+}))
+
+const UPDATED_BUCKET_FILTER_OPTIONS = UPDATED_FILTER_OPTIONS.filter(
+  (option) => option.value !== "any"
+).map((option) => ({
+  value: option.value,
+  label: option.label,
+}))
+
+const filterFields: FilterFieldConfig[] = [
+  {
+    key: "workflow",
+    label: "Workflow",
+    icon: (
+      <SearchIcon className="size-3.5" aria-hidden />
+    ),
+    type: "text",
+    className: "w-52",
+    placeholder: "Search...",
+  },
+  {
+    key: "ownerTeam",
+    label: "Owner team",
+    icon: (
+      <UsersIcon className="size-3.5" aria-hidden />
+    ),
+    type: "select",
+    searchable: false,
+    className: "w-[168px]",
+    options: OWNER_TEAM_FILTER_OPTIONS,
+    customValueRenderer: (values) =>
+      renderSingleSelectedLabel(values, OWNER_TEAM_FILTER_OPTIONS),
+  },
+  {
+    key: "deliveryMode",
+    label: "Delivery mode",
+    icon: (
+      <RouteIcon className="size-3.5" aria-hidden />
+    ),
+    type: "select",
+    searchable: false,
+    className: "w-[168px]",
+    options: DELIVERY_MODE_FILTER_OPTIONS,
+    customValueRenderer: (values) =>
+      renderSingleSelectedLabel(values, DELIVERY_MODE_FILTER_OPTIONS),
+  },
+  {
+    key: "updatedBucket",
+    label: "Last updated",
+    icon: (
+      <ClockIcon className="size-3.5" aria-hidden />
+    ),
+    type: "select",
+    searchable: false,
+    className: "w-[160px]",
+    options: UPDATED_BUCKET_FILTER_OPTIONS,
+    customValueRenderer: (values) =>
+      renderSingleSelectedLabel(values, UPDATED_BUCKET_FILTER_OPTIONS),
+  },
+]
+
+function createDefaultAutomationFilters(): Filter[] {
+  return [createFilter("workflow", "contains", [""])]
+}
+
+function getTabCounts(records: IAutomationRecord[]) {
+  return {
+    all: records.length,
+    live: records.filter((record) => record.state === "live").length,
+    review: records.filter((record) => record.state === "review").length,
+    drafts: records.filter((record) => record.state === "drafts").length,
+    paused: records.filter((record) => record.state === "paused").length,
+  } satisfies Record<AutomationTab, number>
+}
+
+export function AutomationLibraryGridView() {
+  const [automations, setAutomations] =
+    useState<IAutomationRecord[]>(AUTOMATIONS)
+  const [activeTab, setActiveTab] = useState<AutomationTab>("all")
+  const [filters, setFilters] = useState<Filter[]>(
+    createDefaultAutomationFilters
+  )
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: "updatedAt", desc: true },
+  ])
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 5,
+  })
+  const [automationPendingArchive, setAutomationPendingArchive] =
+    useState<IAutomationRecord | null>(null)
+
+  const resetPagination = useCallback(() => {
+    setPagination((current) =>
+      current.pageIndex === 0 ? current : { ...current, pageIndex: 0 }
+    )
+  }, [])
+
+  const filteredBaseAutomations = useMemo(() => {
+    return applyFiltersToData(automations, filters)
+  }, [automations, filters])
+
+  const filteredAutomations = useMemo(
+    () =>
+      filteredBaseAutomations.filter((automation) =>
+        activeTab === "all"
+          ? true
+          : getAutomationTabFromState(automation.state) === activeTab
+      ),
+    [activeTab, filteredBaseAutomations]
+  )
+
+  const tabCounts = useMemo(
+    () => getTabCounts(filteredBaseAutomations),
+    [filteredBaseAutomations]
+  )
+
+  const filteredLiveCount = useMemo(
+    () =>
+      filteredAutomations.filter((automation) => automation.state === "live")
+        .length,
+    [filteredAutomations]
+  )
+
+  const filteredReviewCount = useMemo(
+    () =>
+      filteredAutomations.filter((automation) => automation.state === "review")
+        .length,
+    [filteredAutomations]
+  )
+
+  const selectedCount = useMemo(
+    () => Object.keys(rowSelection).length,
+    [rowSelection]
+  )
+
+  const columns = useMemo(
+    () =>
+      createAutomationColumns({
+        onAction: (action, automation) => {
+          if (action === "archive") {
+            setAutomationPendingArchive(automation)
+            return
+          }
+
+          if (action === "edit") {
+            showAutomationToast({
+              tone: "neutral",
+              title: "Workflow editor",
+              description: `Connect "${automation.title}" to your builder, side panel, or automation step editor.`,
+            })
+            return
+          }
+
+          showAutomationToast({
+            tone: "success",
+            title: "Workflow details",
+            description: `"${automation.title}" is ready for a detail route, run history drawer, or audit panel.`,
+          })
+        },
+        onToggleEnabled: (automation, nextValue) => {
+          const nextState: AutomationState =
+            nextValue && automation.state === "paused"
+              ? "live"
+              : nextValue && automation.state === "drafts"
+                ? "review"
+                : !nextValue && automation.state === "live"
+                  ? "paused"
+                  : automation.state
+
+          setAutomations((current) =>
+            current.map((item) =>
+              item.id === automation.id
+                ? {
+                    ...item,
+                    enabled: nextValue,
+                    state: nextState,
+                  }
+                : item
+            )
+          )
+
+          showAutomationToast({
+            tone: nextValue ? "success" : "neutral",
+            title: nextValue ? "Workflow enabled" : "Workflow paused",
+            description: nextValue
+              ? `"${automation.title}" is ready to run in the ${nextState === "review" ? "review" : "live"} queue.`
+              : `"${automation.title}" will stay available but will not continue running until resumed.`,
+          })
+        },
+      }),
+    []
+  )
+
+  const table = useReactTable({
+    data: filteredAutomations,
+    columns,
+    getRowId: (row) => row.id,
+    state: {
+      sorting,
+      rowSelection,
+      pagination,
+    },
+    enableRowSelection: true,
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  })
+
+  const handleClearControls = useCallback(() => {
+    setFilters(createDefaultAutomationFilters())
+    resetPagination()
+  }, [resetPagination])
+
+  const handleFiltersChange = useCallback(
+    (nextFilters: Filter[]) => {
+      setFilters(nextFilters)
+      resetPagination()
+    },
+    [resetPagination]
+  )
+
+  const handleArchiveAutomation = useCallback(() => {
+    if (!automationPendingArchive) return
+
+    const automationToArchive = automationPendingArchive
+
+    setAutomations((current) =>
+      current.filter(
+        (automation) => automation.id !== automationPendingArchive.id
+      )
+    )
+    setRowSelection((current) => {
+      const next = { ...current }
+      delete next[automationPendingArchive.id]
+      return next
+    })
+    setAutomationPendingArchive(null)
+    resetPagination()
+
+    showAutomationToast({
+      tone: "destructive",
+      title: "Workflow archived",
+      description: `"${automationToArchive.title}" was removed from this automation library.`,
+    })
+  }, [automationPendingArchive, resetPagination])
+
+  const emptyMessage =
+    "No workflows match this automation slice. Switch tabs or clear the filters."
+
+  return (
+    <>
+      {/* Table */}
+      <DataGrid
+        table={table}
+        recordCount={filteredAutomations.length}
+        emptyMessage={emptyMessage}
+        tableLayout={{
+          dense: true,
+        }}
+      >
+        <Frame dense variant="default" spacing="sm" className="w-full">
+          <FrameHeader className="flex-row items-start justify-between gap-3">
+            <div className="flex flex-col gap-px">
+              <FrameTitle className="text-balance">
+                Automation Library
+              </FrameTitle>
+              <FrameDescription className="flex flex-wrap items-center gap-1.5 text-xs text-pretty">
+                <span>
+                  {filteredAutomations.length} workflow
+                  {filteredAutomations.length === 1 ? "" : "s"}
+                </span>
+                <span
+                  className="bg-input size-1 shrink-0 rounded-full"
+                  aria-hidden="true"
+                />
+                <span>{filteredLiveCount} live</span>
+                <span
+                  className="bg-input size-1 shrink-0 rounded-full"
+                  aria-hidden="true"
+                />
+                <span>{filteredReviewCount} review</span>
+                {selectedCount > 0 ? (
+                  <>
+                    <span
+                      className="bg-input size-1 shrink-0 rounded-full"
+                      aria-hidden="true"
+                    />
+                    <span>{selectedCount} selected</span>
+                  </>
+                ) : null}
+              </FrameDescription>
+            </div>
+
+            <Button type="button" className="shrink-0">
+              <PlusIcon className="size-4" aria-hidden="true" />
+              New workflow
+            </Button>
+          </FrameHeader>
+
+          <FramePanel className="p-0 shadow-none!">
+            <div className="px-(--frame-panel-header-px) pt-(--frame-panel-header-py)">
+              <Tabs
+                value={activeTab}
+                onValueChange={(value) => {
+                  setActiveTab(value as AutomationTab)
+                  resetPagination()
+                }}
+              >
+                <TabsList variant="line" className="gap-5">
+                  {AUTOMATION_TABS.map((tab) => (
+                    <TabsTrigger
+                      key={tab.value}
+                      value={tab.value}
+                      className="gap-2 px-0 pb-3 text-sm"
+                    >
+                      <span>{tab.label}</span>
+                      <span className="bg-muted text-muted-foreground inline-flex min-w-5 items-center justify-center rounded-md px-1.5 py-0.5 text-xs tabular-nums">
+                        {tabCounts[tab.value]}
+                      </span>
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </Tabs>
+            </div>
+
+            <Separator />
+
+            <div className="flex flex-wrap items-center justify-between gap-3 px-(--frame-panel-header-px) py-(--frame-panel-header-py)">
+              <Filters
+                filters={filters}
+                fields={filterFields}
+                onChange={handleFiltersChange}
+                size="default"
+                trigger={
+                  <Button variant="outline" aria-label="Filters">
+                    <FilterIcon className="size-4" aria-hidden="true" />
+                    Filters
+                  </Button>
+                }
+              />
+
+              <div className="flex flex-wrap items-center justify-end gap-2">
+                {selectedCount > 0 ? (
+                  <Badge size="sm" variant="secondary">
+                    {selectedCount} selected
+                  </Badge>
+                ) : null}
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleClearControls}
+                >
+                  <FunnelXIcon className="size-4" aria-hidden="true" />
+                  Clear
+                </Button>
+              </div>
+            </div>
+
+            <Separator />
+
+            <DataGridScrollArea>
+              <DataGridTable />
+            </DataGridScrollArea>
+
+            <Separator />
+
+            <FrameFooter>
+              <DataGridPagination />
+            </FrameFooter>
+          </FramePanel>
+        </Frame>
+      </DataGrid>
+
+      <AlertDialog
+        open={automationPendingArchive != null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setAutomationPendingArchive(null)
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Archive workflow?</AlertDialogTitle>
+            <AlertDialogDescription>
+              {automationPendingArchive
+                ? `Archive "${automationPendingArchive.title}" from this automation library. Run history and ownership context can stay available in your backend, but this row will disappear from the grid preview.`
+                : "Archive this workflow from the automation library."}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleArchiveAutomation}
+              render={
+                <Button type="button" variant="destructive">
+                  Archive
+                </Button>
+              }
+            />
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-2/components/data.tsx b/apps/web/src/components/blocks/data-grid-filtering-2/components/data.tsx
new file mode 100644
index 0000000..2ca5e30
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-2/components/data.tsx
@@ -0,0 +1,384 @@
+export type AutomationTab = "all" | "live" | "review" | "drafts" | "paused"
+
+export type AutomationKind =
+  | "sequence"
+  | "routing"
+  | "enrichment"
+  | "digest"
+  | "escalation"
+
+export type OwnerFilter =
+  | "everyone"
+  | "product"
+  | "engineering"
+  | "operations"
+  | "revenue"
+  | "support"
+
+export type DeliveryFilter =
+  | "any"
+  | "scheduled"
+  | "event-driven"
+  | "manual"
+  | "hybrid"
+
+export type UpdatedFilter = "any" | "today" | "this-week" | "older"
+
+export type AutomationState = Exclude<AutomationTab, "all">
+export type AutomationOwnerAvailability = "online" | "away" | "busy" | "offline"
+
+export interface IAutomationOwner {
+  id: string
+  name: string
+  email: string
+  initials: string
+  avatar?: string
+  availability: AutomationOwnerAvailability
+  team: Exclude<OwnerFilter, "everyone">
+  teamLabel: string
+}
+
+export interface IAutomationRecord {
+  id: string
+  title: string
+  kind: AutomationKind
+  state: AutomationState
+  rating: number
+  deliveryMode: Exclude<DeliveryFilter, "any">
+  owner: IAutomationOwner
+  updatedAt: string
+  updatedBucket: Exclude<UpdatedFilter, "any">
+  enabled: boolean
+  approvalRequired: boolean
+  audienceLabel: string
+  runWindowLabel: string
+}
+
+const OWNERS: Record<string, IAutomationOwner> = {
+  maya: {
+    id: "maya-patel",
+    name: "Maya Patel",
+    email: "maya@reui.io",
+    initials: "MP",
+    avatar:
+      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&dpr=2&q=80",
+    availability: "online",
+    team: "product",
+    teamLabel: "Product",
+  },
+  jonas: {
+    id: "jonas-reed",
+    name: "Jonas Reed",
+    email: "jonas@reui.io",
+    initials: "JR",
+    avatar:
+      "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=96&h=96&dpr=2&q=80",
+    availability: "busy",
+    team: "engineering",
+    teamLabel: "Engineering",
+  },
+  priya: {
+    id: "priya-nair",
+    name: "Priya Nair",
+    email: "priya@reui.io",
+    initials: "PN",
+    avatar:
+      "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=96&h=96&dpr=2&q=80",
+    availability: "away",
+    team: "operations",
+    teamLabel: "Operations",
+  },
+  emil: {
+    id: "emil-novak",
+    name: "Emil Novak",
+    email: "emil@reui.io",
+    initials: "EN",
+    avatar:
+      "https://images.unsplash.com/photo-1560250097-0b93528c311a?w=96&h=96&dpr=2&q=80",
+    availability: "offline",
+    team: "revenue",
+    teamLabel: "Revenue",
+  },
+  nora: {
+    id: "nora-ibrahim",
+    name: "Nora Ibrahim",
+    email: "nora@reui.io",
+    initials: "NI",
+    avatar:
+      "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=96&h=96&dpr=2&q=80",
+    availability: "online",
+    team: "support",
+    teamLabel: "Support",
+  },
+}
+
+function automation(
+  input: Omit<IAutomationRecord, "owner"> & {
+    owner: keyof typeof OWNERS
+  }
+): IAutomationRecord {
+  return {
+    ...input,
+    owner: OWNERS[input.owner],
+  }
+}
+
+export const AUTOMATION_TABS: { value: AutomationTab; label: string }[] = [
+  { value: "all", label: "All" },
+  { value: "live", label: "Live" },
+  { value: "review", label: "Needs Review" },
+  { value: "drafts", label: "Drafts" },
+  { value: "paused", label: "Paused" },
+]
+
+export const OWNER_FILTER_OPTIONS: {
+  value: OwnerFilter
+  label: string
+}[] = [
+  { value: "everyone", label: "Owner team" },
+  { value: "product", label: "Product" },
+  { value: "engineering", label: "Engineering" },
+  { value: "operations", label: "Operations" },
+  { value: "revenue", label: "Revenue" },
+  { value: "support", label: "Support" },
+]
+
+export const DELIVERY_FILTER_OPTIONS: {
+  value: DeliveryFilter
+  label: string
+}[] = [
+  { value: "any", label: "Delivery mode" },
+  { value: "scheduled", label: "Scheduled" },
+  { value: "event-driven", label: "Event-driven" },
+  { value: "manual", label: "Manual" },
+  { value: "hybrid", label: "Hybrid" },
+]
+
+export const UPDATED_FILTER_OPTIONS: {
+  value: UpdatedFilter
+  label: string
+}[] = [
+  { value: "any", label: "Last updated" },
+  { value: "today", label: "Today" },
+  { value: "this-week", label: "This week" },
+  { value: "older", label: "Older" },
+]
+
+export function getAutomationTabFromState(
+  state: AutomationState
+): Exclude<AutomationTab, "all"> {
+  return state
+}
+
+export const AUTOMATIONS: IAutomationRecord[] = [
+  automation({
+    id: "renewal-touchpoint-orchestration",
+    title: "Renewal touchpoint orchestration",
+    kind: "sequence",
+    state: "live",
+    rating: 4.8,
+    deliveryMode: "scheduled",
+    owner: "emil",
+    updatedAt: "2026-04-11",
+    updatedBucket: "today",
+    enabled: true,
+    approvalRequired: false,
+    audienceLabel: "Renewal accounts",
+    runWindowLabel: "Weekdays 09:00",
+  }),
+  automation({
+    id: "delegated-sender-review-route",
+    title: "Delegated sender review route",
+    kind: "routing",
+    state: "review",
+    rating: 4.2,
+    deliveryMode: "manual",
+    owner: "priya",
+    updatedAt: "2026-04-11",
+    updatedBucket: "today",
+    enabled: false,
+    approvalRequired: true,
+    audienceLabel: "Delegated senders",
+    runWindowLabel: "Queue-based release",
+  }),
+  automation({
+    id: "launch-handoff-digest",
+    title: "Launch handoff digest",
+    kind: "digest",
+    state: "live",
+    rating: 4.7,
+    deliveryMode: "scheduled",
+    owner: "maya",
+    updatedAt: "2026-04-10",
+    updatedBucket: "this-week",
+    enabled: true,
+    approvalRequired: false,
+    audienceLabel: "Launch squad",
+    runWindowLabel: "Daily 08:30",
+  }),
+  automation({
+    id: "sla-escalation-watch",
+    title: "SLA escalation watch",
+    kind: "escalation",
+    state: "live",
+    rating: 4.9,
+    deliveryMode: "event-driven",
+    owner: "nora",
+    updatedAt: "2026-04-10",
+    updatedBucket: "this-week",
+    enabled: true,
+    approvalRequired: false,
+    audienceLabel: "Priority tickets",
+    runWindowLabel: "On trigger",
+  }),
+  automation({
+    id: "lead-enrichment-pass",
+    title: "Lead enrichment pass",
+    kind: "enrichment",
+    state: "paused",
+    rating: 3.9,
+    deliveryMode: "hybrid",
+    owner: "jonas",
+    updatedAt: "2026-04-09",
+    updatedBucket: "this-week",
+    enabled: false,
+    approvalRequired: false,
+    audienceLabel: "Inbound pipeline",
+    runWindowLabel: "Hourly batch",
+  }),
+  automation({
+    id: "sandbox-onboarding-sequence",
+    title: "Sandbox onboarding sequence",
+    kind: "sequence",
+    state: "drafts",
+    rating: 4.1,
+    deliveryMode: "scheduled",
+    owner: "priya",
+    updatedAt: "2026-04-08",
+    updatedBucket: "this-week",
+    enabled: false,
+    approvalRequired: false,
+    audienceLabel: "Trial workspaces",
+    runWindowLabel: "Pending QA",
+  }),
+  automation({
+    id: "partner-routing-fallback",
+    title: "Partner routing fallback",
+    kind: "routing",
+    state: "live",
+    rating: 4.4,
+    deliveryMode: "hybrid",
+    owner: "emil",
+    updatedAt: "2026-04-07",
+    updatedBucket: "this-week",
+    enabled: true,
+    approvalRequired: false,
+    audienceLabel: "Partner renewals",
+    runWindowLabel: "Live + nightly",
+  }),
+  automation({
+    id: "weekly-adoption-digest",
+    title: "Weekly adoption digest",
+    kind: "digest",
+    state: "paused",
+    rating: 3.8,
+    deliveryMode: "scheduled",
+    owner: "maya",
+    updatedAt: "2026-04-06",
+    updatedBucket: "this-week",
+    enabled: false,
+    approvalRequired: false,
+    audienceLabel: "Workspace champions",
+    runWindowLabel: "Fridays 16:00",
+  }),
+  automation({
+    id: "enterprise-risk-escalation",
+    title: "Enterprise risk escalation",
+    kind: "escalation",
+    state: "review",
+    rating: 4.3,
+    deliveryMode: "manual",
+    owner: "nora",
+    updatedAt: "2026-04-05",
+    updatedBucket: "older",
+    enabled: false,
+    approvalRequired: true,
+    audienceLabel: "Enterprise accounts",
+    runWindowLabel: "Manual release",
+  }),
+  automation({
+    id: "crm-enrichment-backfill",
+    title: "CRM enrichment backfill",
+    kind: "enrichment",
+    state: "live",
+    rating: 4.6,
+    deliveryMode: "scheduled",
+    owner: "jonas",
+    updatedAt: "2026-04-04",
+    updatedBucket: "older",
+    enabled: true,
+    approvalRequired: false,
+    audienceLabel: "Open opportunities",
+    runWindowLabel: "Nightly 01:00",
+  }),
+  automation({
+    id: "trial-conversion-follow-up",
+    title: "Trial conversion follow-up",
+    kind: "sequence",
+    state: "drafts",
+    rating: 4.0,
+    deliveryMode: "scheduled",
+    owner: "emil",
+    updatedAt: "2026-04-03",
+    updatedBucket: "older",
+    enabled: false,
+    approvalRequired: false,
+    audienceLabel: "Product-led signups",
+    runWindowLabel: "Awaiting copy",
+  }),
+  automation({
+    id: "owner-assignment-router",
+    title: "Owner assignment router",
+    kind: "routing",
+    state: "live",
+    rating: 4.5,
+    deliveryMode: "event-driven",
+    owner: "priya",
+    updatedAt: "2026-04-02",
+    updatedBucket: "older",
+    enabled: true,
+    approvalRequired: false,
+    audienceLabel: "Workspace requests",
+    runWindowLabel: "Immediate",
+  }),
+  automation({
+    id: "ops-exception-digest",
+    title: "Ops exception digest",
+    kind: "digest",
+    state: "review",
+    rating: 4.1,
+    deliveryMode: "scheduled",
+    owner: "priya",
+    updatedAt: "2026-04-11",
+    updatedBucket: "today",
+    enabled: false,
+    approvalRequired: true,
+    audienceLabel: "Ops leadership",
+    runWindowLabel: "Daily 18:00",
+  }),
+  automation({
+    id: "billing-retry-escalation",
+    title: "Billing retry escalation",
+    kind: "escalation",
+    state: "live",
+    rating: 4.7,
+    deliveryMode: "event-driven",
+    owner: "nora",
+    updatedAt: "2026-04-01",
+    updatedBucket: "older",
+    enabled: true,
+    approvalRequired: false,
+    audienceLabel: "Recovery queue",
+    runWindowLabel: "On failure",
+  }),
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-2/page.tsx b/apps/web/src/components/blocks/data-grid-filtering-2/page.tsx
new file mode 100644
index 0000000..e3ffcac
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-2/page.tsx
@@ -0,0 +1,15 @@
+import { AutomationLibraryGridView } from "./components/data-grid-view"
+
+export function Page() {
+  return (
+    <main
+      className="mx-auto flex min-h-svh w-full max-w-7xl items-start justify-center p-8 pt-12"
+      aria-labelledby="page-heading"
+    >
+      <h1 id="page-heading" className="sr-only">
+        Automation library data grid
+      </h1>
+      <AutomationLibraryGridView />
+    </main>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-3/components/columns.tsx b/apps/web/src/components/blocks/data-grid-filtering-3/components/columns.tsx
new file mode 100644
index 0000000..a9a0f3b
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-3/components/columns.tsx
@@ -0,0 +1,685 @@
+import { memo, useMemo, useState, type ComponentProps } from "react"
+import { Badge } from "@/components/reui/badge"
+import { DataGridColumnHeader } from "@/components/reui/data-grid/data-grid-column-header"
+import {
+  DataGridTableRowSelect,
+  DataGridTableRowSelectAll,
+} from "@/components/reui/data-grid/data-grid-table"
+import { Row, type ColumnDef } from "@tanstack/react-table"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@evobgp/ui/components/alert-dialog"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@evobgp/ui/components/avatar"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+import { Item, ItemMedia } from "@evobgp/ui/components/item"
+import {
+  Progress,
+  ProgressLabel,
+  ProgressValue,
+} from "@evobgp/ui/components/progress"
+import { Skeleton } from "@evobgp/ui/components/skeleton"
+import {
+  type IRenewalRecord,
+  type RenewalInvoiceStatus,
+  type RenewalRisk,
+  type RenewalSponsorStatus,
+  type RenewalStage,
+} from "./data"
+import { MoreHorizontalIcon, EyeIcon, FileTextIcon, TriangleAlertIcon } from "lucide-react"
+
+// Intl formatters are costly to construct; build them once and reuse for every
+// cell render.
+const CURRENCY_FORMATTER = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  maximumFractionDigits: 0,
+})
+
+const RENEWAL_DATE_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+})
+
+function formatCurrency(value: number) {
+  return CURRENCY_FORMATTER.format(value)
+}
+
+function formatRenewalDate(iso: string) {
+  return RENEWAL_DATE_FORMATTER.format(new Date(iso))
+}
+
+const stageVariant: Record<
+  RenewalStage,
+  ComponentProps<typeof Badge>["variant"]
+> = {
+  Preparing: "outline",
+  "Commercial review": "outline",
+  "Legal review": "outline",
+  Committed: "outline",
+}
+
+const stageDot = {
+  Preparing: "bg-muted-foreground",
+  "Commercial review": "bg-sky-500",
+  "Legal review": "bg-amber-500",
+  Committed: "bg-emerald-500",
+} satisfies Record<RenewalStage, string>
+
+const riskVariant: Record<
+  RenewalRisk,
+  ComponentProps<typeof Badge>["variant"]
+> = {
+  Low: "secondary",
+  Medium: "info-light",
+  High: "warning-light",
+  Critical: "destructive-light",
+}
+
+const invoiceVariant: Record<
+  RenewalInvoiceStatus,
+  ComponentProps<typeof Badge>["variant"]
+> = {
+  Ready: "success-light",
+  "Finance review": "warning-light",
+  Blocked: "destructive-light",
+}
+
+const sponsorVariant: Record<
+  RenewalSponsorStatus,
+  ComponentProps<typeof Badge>["variant"]
+> = {
+  Confirmed: "success-outline",
+  "At risk": "warning-outline",
+  Missing: "destructive-outline",
+}
+
+export const StageBadge = memo(function StageBadge({
+  stage,
+}: {
+  stage: RenewalStage
+}) {
+  return (
+    <Badge variant={stageVariant[stage]}>
+      <span
+        className={cn("size-1.5 shrink-0 rounded-full", stageDot[stage])}
+        aria-hidden="true"
+      />
+      {stage}
+    </Badge>
+  )
+})
+
+export const RiskBadge = memo(function RiskBadge({
+  risk,
+}: {
+  risk: RenewalRisk
+}) {
+  return <Badge variant={riskVariant[risk]}>{risk}</Badge>
+})
+
+export const InvoiceStatusBadge = memo(function InvoiceStatusBadge({
+  status,
+}: {
+  status: RenewalInvoiceStatus
+}) {
+  return <Badge variant={invoiceVariant[status]}>{status}</Badge>
+})
+
+export const SponsorStatusBadge = memo(function SponsorStatusBadge({
+  status,
+}: {
+  status: RenewalSponsorStatus
+}) {
+  return <Badge variant={sponsorVariant[status]}>{status}</Badge>
+})
+
+function initials(name: string) {
+  return name
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+}
+
+const AccountCell = memo(function AccountCell({
+  row,
+}: {
+  row: Row<IRenewalRecord>
+}) {
+  return (
+    <div className="flex min-w-0 items-center gap-2">
+      <Item className="flex size-6 shrink-0 items-center justify-center border-0 p-0 [&_svg]:size-5">
+        <ItemMedia variant="icon" className="size-auto">
+          {row.original.accountLogo}
+        </ItemMedia>
+      </Item>
+      <div className="flex min-w-0 flex-col gap-0.5">
+        <div className="text-foreground truncate font-medium">
+          {row.original.accountName}
+        </div>
+        <div className="text-muted-foreground flex min-w-0 items-center gap-1.5 text-xs">
+          <Avatar className="size-4">
+            <AvatarImage src={row.original.ownerAvatar} alt="" />
+            <AvatarFallback className="text-[9px] font-medium">
+              {initials(row.original.ownerName)}
+            </AvatarFallback>
+          </Avatar>
+          <span className="truncate">{row.original.ownerName}</span>
+          <span
+            className="bg-input size-1 shrink-0 rounded-full"
+            aria-hidden="true"
+          />
+          <span className="truncate">{row.original.segment}</span>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+const RenewalWindowCell = memo(function RenewalWindowCell({
+  row,
+}: {
+  row: Row<IRenewalRecord>
+}) {
+  const dueSoon = row.original.daysToRenewal <= 30
+  const urgencyTone =
+    row.original.daysToRenewal <= 14
+      ? "text-destructive"
+      : row.original.daysToRenewal <= 30
+        ? "text-warning"
+        : "text-foreground"
+
+  return (
+    <div className="flex min-w-0 flex-col gap-0.5">
+      <span className={cn("font-medium tabular-nums", urgencyTone)}>
+        {dueSoon
+          ? `Due in ${row.original.daysToRenewal}d`
+          : `${row.original.daysToRenewal}d out`}
+      </span>
+      <span className="text-muted-foreground text-xs">
+        {formatRenewalDate(row.original.renewalDate)}
+      </span>
+    </div>
+  )
+})
+
+const RevenueCell = memo(function RevenueCell({
+  row,
+}: {
+  row: Row<IRenewalRecord>
+}) {
+  return (
+    <div className="flex min-w-0 flex-col gap-0.5">
+      <span className="text-foreground font-medium tabular-nums">
+        {formatCurrency(row.original.arr)}
+      </span>
+      <span
+        className={cn(
+          "text-xs tabular-nums",
+          row.original.expansionPotential > 0
+            ? "text-emerald-600 dark:text-emerald-400"
+            : "text-muted-foreground"
+        )}
+      >
+        {row.original.expansionPotential > 0 ? "+" : ""}
+        {formatCurrency(row.original.expansionPotential)} upside
+      </span>
+    </div>
+  )
+})
+
+const HealthCell = memo(function HealthCell({
+  row,
+}: {
+  row: Row<IRenewalRecord>
+}) {
+  const score = row.original.healthScore
+  const label = score >= 75 ? "Healthy" : score >= 55 ? "Watchlist" : "At risk"
+  const indicatorClass =
+    score >= 75
+      ? "**:data-[slot=progress-indicator]:bg-emerald-500"
+      : score >= 55
+        ? "**:data-[slot=progress-indicator]:bg-amber-500"
+        : "**:data-[slot=progress-indicator]:bg-red-500"
+
+  return (
+    <div className="flex min-w-0 flex-col gap-1">
+      <Progress
+        value={score}
+        className={cn(
+          "min-w-0 flex-1 flex-row flex-nowrap items-center gap-2 **:data-[slot=progress-track]:order-1 **:data-[slot=progress-track]:min-w-14 **:data-[slot=progress-track]:flex-1 **:data-[slot=progress-value]:order-2",
+          indicatorClass
+        )}
+      >
+        <ProgressLabel className="sr-only">Health score</ProgressLabel>
+        <ProgressValue className="text-muted-foreground shrink-0 text-[10px] leading-none tabular-nums">
+          {(_, value) => `${value ?? score}%`}
+        </ProgressValue>
+      </Progress>
+      <span className="text-muted-foreground text-xs">{label}</span>
+    </div>
+  )
+})
+
+function buildSmoothLinePath(points: { x: number; y: number }[]) {
+  if (points.length === 0) return ""
+  if (points.length === 1) return `M ${points[0].x} ${points[0].y}`
+
+  let path = `M ${points[0].x} ${points[0].y}`
+
+  for (let index = 0; index < points.length - 1; index++) {
+    const p0 = points[Math.max(0, index - 1)]
+    const p1 = points[index]
+    const p2 = points[index + 1]
+    const p3 = points[Math.min(points.length - 1, index + 2)]
+    const cp1x = p1.x + (p2.x - p0.x) / 6
+    const cp1y = p1.y + (p2.y - p0.y) / 6
+    const cp2x = p2.x - (p3.x - p1.x) / 6
+    const cp2y = p2.y - (p3.y - p1.y) / 6
+
+    path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`
+  }
+
+  return path
+}
+
+const UsageTrendCell = memo(function UsageTrendCell({
+  row,
+}: {
+  row: Row<IRenewalRecord>
+}) {
+  const data = row.original.usageTrend
+  const width = 92
+  const height = 26
+  const padX = 2
+  const padY = 2
+  const innerW = width - padX * 2
+  const innerH = height - padY * 2
+
+  const { linePath, strokeClass, deltaLabel } = useMemo(() => {
+    const max = Math.max(...data)
+    const min = Math.min(...data)
+    const range = max - min || 1
+    const step = innerW / Math.max(1, data.length - 1)
+
+    const points = data.map((value, index) => ({
+      x: padX + index * step,
+      y: padY + ((max - value) / range) * innerH,
+    }))
+
+    const delta = data[data.length - 1] - data[0]
+
+    return {
+      linePath: buildSmoothLinePath(points),
+      strokeClass:
+        delta > 0
+          ? "stroke-emerald-600 dark:stroke-emerald-400"
+          : delta < 0
+            ? "stroke-red-600 dark:stroke-red-400"
+            : "stroke-muted-foreground",
+      deltaLabel:
+        delta > 0
+          ? `Expanding ${delta} pts`
+          : delta < 0
+            ? `Contracting ${Math.abs(delta)} pts`
+            : "Stable",
+    }
+  }, [data, innerH, innerW, padX, padY])
+
+  return (
+    <div className="flex min-w-0 flex-col gap-1">
+      <svg
+        width={width}
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        className="shrink-0"
+        aria-hidden="true"
+      >
+        <path
+          d={linePath}
+          fill="none"
+          className={strokeClass}
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      <span className="text-muted-foreground text-xs">{deltaLabel}</span>
+    </div>
+  )
+})
+
+function RenewalActionsCell({
+  row,
+  onOpenAccount,
+  onCreateBrief,
+  onEscalateReview,
+}: {
+  row: Row<IRenewalRecord>
+  onOpenAccount: (renewal: IRenewalRecord) => void
+  onCreateBrief: (renewal: IRenewalRecord) => void
+  onEscalateReview: (renewal: IRenewalRecord) => void
+}) {
+  const [escalateOpen, setEscalateOpen] = useState(false)
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              type="button"
+              size="icon"
+              variant="ghost"
+              className="size-7"
+              aria-label="Renewal actions"
+            />
+          }
+        >
+          <MoreHorizontalIcon className="size-4" aria-hidden="true" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent side="bottom" align="end" className="w-44">
+          <DropdownMenuGroup>
+            <DropdownMenuItem onClick={() => onOpenAccount(row.original)}>
+              <EyeIcon className="size-4" aria-hidden="true" />
+              Open account
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => onCreateBrief(row.original)}>
+              <FileTextIcon className="size-4" aria-hidden="true" />
+              {row.original.stage === "Legal review"
+                ? "Legal redlines"
+                : row.original.invoiceStatus !== "Ready"
+                  ? "Finance sign-off"
+                  : "Renewal brief"}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              variant="destructive"
+              onClick={() => setEscalateOpen(true)}
+            >
+              <TriangleAlertIcon className="size-4" aria-hidden="true" />
+              Escalate
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <AlertDialog open={escalateOpen} onOpenChange={setEscalateOpen}>
+        <AlertDialogContent size="sm">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Create an exec escalation?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will push{" "}
+              <span className="text-foreground font-medium">
+                {row.original.accountName}
+              </span>{" "}
+              into an urgent board-review path in a real revenue-ops workspace.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={() => onEscalateReview(row.original)}>
+              Create escalation
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
+
+export function createRenewalColumns({
+  onOpenAccount,
+  onCreateBrief,
+  onEscalateReview,
+}: {
+  onOpenAccount: (renewal: IRenewalRecord) => void
+  onCreateBrief: (renewal: IRenewalRecord) => void
+  onEscalateReview: (renewal: IRenewalRecord) => void
+}) {
+  return [
+    {
+      accessorKey: "id",
+      id: "select",
+      header: () => <DataGridTableRowSelectAll />,
+      cell: ({ row }) => <DataGridTableRowSelect row={row} />,
+      enableSorting: false,
+      enableResizing: false,
+      enableHiding: false,
+      size: 36,
+      meta: {
+        headerClassName: "ps-4!",
+        cellClassName: "ps-4!",
+      },
+    },
+    {
+      accessorKey: "accountName",
+      id: "account",
+      header: ({ column }) => (
+        <DataGridColumnHeader
+          title="Account"
+          visibility={true}
+          column={column}
+        />
+      ),
+      cell: ({ row }) => <AccountCell row={row} />,
+      minSize: 280,
+      size: 320,
+      enableSorting: true,
+      enableResizing: true,
+      enableHiding: false,
+      meta: {
+        autoSize: true,
+        skeleton: (
+          <div className="flex min-w-0 items-start gap-2">
+            <Skeleton className="mt-0.5 size-5 shrink-0 rounded" />
+            <div className="flex min-w-0 flex-col gap-1">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-3 w-40" />
+            </div>
+          </div>
+        ),
+      },
+    },
+    {
+      accessorFn: (row) => row.daysToRenewal,
+      id: "renewalWindow",
+      header: ({ column }) => (
+        <DataGridColumnHeader
+          title="Renewal"
+          visibility={true}
+          column={column}
+        />
+      ),
+      cell: ({ row }) => <RenewalWindowCell row={row} />,
+      size: 150,
+      minSize: 140,
+      enableSorting: true,
+      enableResizing: true,
+      enableHiding: true,
+      meta: {
+        skeleton: (
+          <div className="flex flex-col gap-0.5">
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-3 w-24" />
+          </div>
+        ),
+      },
+    },
+    {
+      accessorKey: "arr",
+      id: "arr",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="ARR" visibility={true} column={column} />
+      ),
+      cell: ({ row }) => <RevenueCell row={row} />,
+      size: 150,
+      minSize: 140,
+      enableSorting: true,
+      enableResizing: true,
+      enableHiding: true,
+      meta: {
+        skeleton: (
+          <div className="flex flex-col gap-0.5">
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-3 w-24" />
+          </div>
+        ),
+      },
+    },
+    {
+      accessorKey: "healthScore",
+      id: "health",
+      header: ({ column }) => (
+        <DataGridColumnHeader
+          title="Health"
+          visibility={true}
+          column={column}
+        />
+      ),
+      cell: ({ row }) => <HealthCell row={row} />,
+      size: 140,
+      minSize: 130,
+      enableSorting: true,
+      enableResizing: true,
+      enableHiding: true,
+    },
+    {
+      accessorKey: "usageTrend",
+      id: "usage",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Usage" visibility={true} column={column} />
+      ),
+      cell: ({ row }) => <UsageTrendCell row={row} />,
+      size: 120,
+      minSize: 112,
+      enableSorting: false,
+      enableResizing: true,
+      enableHiding: true,
+    },
+    {
+      accessorKey: "stage",
+      id: "stage",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Stage" visibility={true} column={column} />
+      ),
+      cell: ({ row }) => <StageBadge stage={row.original.stage} />,
+      size: 168,
+      minSize: 160,
+      enableSorting: true,
+      enableResizing: true,
+      enableHiding: true,
+    },
+    {
+      accessorKey: "risk",
+      id: "risk",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Risk" visibility={true} column={column} />
+      ),
+      cell: ({ row }) => <RiskBadge risk={row.original.risk} />,
+      size: 116,
+      minSize: 108,
+      enableSorting: true,
+      enableResizing: true,
+      enableHiding: true,
+    },
+    {
+      accessorKey: "invoiceStatus",
+      id: "invoiceStatus",
+      header: ({ column }) => (
+        <DataGridColumnHeader
+          title="Invoice"
+          visibility={true}
+          column={column}
+        />
+      ),
+      cell: ({ row }) => (
+        <InvoiceStatusBadge status={row.original.invoiceStatus} />
+      ),
+      size: 148,
+      minSize: 138,
+      enableSorting: true,
+      enableResizing: true,
+      enableHiding: true,
+    },
+    {
+      accessorKey: "sponsorStatus",
+      id: "sponsorStatus",
+      header: ({ column }) => (
+        <DataGridColumnHeader
+          title="Sponsor"
+          visibility={true}
+          column={column}
+        />
+      ),
+      cell: ({ row }) => (
+        <SponsorStatusBadge status={row.original.sponsorStatus} />
+      ),
+      size: 136,
+      minSize: 128,
+      enableSorting: true,
+      enableResizing: true,
+      enableHiding: true,
+    },
+    {
+      accessorKey: "region",
+      id: "region",
+      header: ({ column }) => (
+        <DataGridColumnHeader
+          title="Region"
+          visibility={true}
+          column={column}
+        />
+      ),
+      cell: ({ row }) => (
+        <span className="text-foreground text-sm">{row.original.region}</span>
+      ),
+      size: 124,
+      minSize: 116,
+      enableSorting: true,
+      enableResizing: true,
+      enableHiding: true,
+    },
+    {
+      id: "actions",
+      header: "",
+      cell: ({ row }) => (
+        <RenewalActionsCell
+          row={row}
+          onOpenAccount={onOpenAccount}
+          onCreateBrief={onCreateBrief}
+          onEscalateReview={onEscalateReview}
+        />
+      ),
+      enableSorting: false,
+      enableResizing: false,
+      enableHiding: false,
+      size: 56,
+      meta: {
+        cellClassName: "pe-4!",
+        headerClassName: "pe-4!",
+      },
+    },
+  ] satisfies ColumnDef<IRenewalRecord>[]
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-3/components/data-grid-view.tsx b/apps/web/src/components/blocks/data-grid-filtering-3/components/data-grid-view.tsx
new file mode 100644
index 0000000..6636d80
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-3/components/data-grid-view.tsx
@@ -0,0 +1,766 @@
+"use client"
+
+import { useCallback, useMemo, useState } from "react"
+import { DataGrid } from "@/components/reui/data-grid/data-grid"
+import { DataGridScrollArea } from "@/components/reui/data-grid/data-grid-scroll-area"
+import { DataGridTable } from "@/components/reui/data-grid/data-grid-table"
+import {
+  createFilter,
+  Filters,
+  type Filter,
+  type FilterFieldConfig,
+} from "@/components/reui/filters"
+import {
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type RowSelectionState,
+  type SortingState,
+  type VisibilityState,
+} from "@tanstack/react-table"
+import { toast } from "sonner"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Field,
+  FieldGroup,
+  FieldLabel,
+  FieldSeparator,
+} from "@evobgp/ui/components/field"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@evobgp/ui/components/popover"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@evobgp/ui/components/select"
+import { Separator } from "@evobgp/ui/components/separator"
+import { Switch } from "@evobgp/ui/components/switch"
+import { TooltipProvider } from "@evobgp/ui/components/tooltip"
+import { createRenewalColumns, RiskBadge, StageBadge } from "./columns"
+import {
+  getRenewalWindowValue,
+  RENEWAL_OWNERS,
+  RENEWAL_RECORDS,
+  RENEWAL_RISK_ORDER,
+  RENEWAL_SEGMENT_ORDER,
+  RENEWAL_STAGE_ORDER,
+  RENEWAL_WINDOW_OPTIONS,
+  type IRenewalRecord,
+  type RenewalRisk,
+  type RenewalStage,
+} from "./data"
+import { RenewalSelectionBar } from "./renewal-selection-bar"
+import { RenewalsCommandCard } from "./renewals-command-card"
+import { FilterIcon, Settings2Icon, CheckIcon, Building2Icon, LayersIcon, GitBranchIcon, TriangleAlertIcon, CalendarClockIcon, UserRoundIcon, PlusIcon } from "lucide-react"
+
+function getActiveFilters(filters: Filter[]) {
+  return filters.filter((filter) => {
+    const { values } = filter
+    if (!values || values.length === 0) return false
+    if (
+      values.every((value) => typeof value === "string" && value.trim() === "")
+    ) {
+      return false
+    }
+    if (values.every((value) => value === null || value === undefined)) {
+      return false
+    }
+    if (values.every((value) => Array.isArray(value) && value.length === 0)) {
+      return false
+    }
+    return true
+  })
+}
+
+function filterFieldValue(item: IRenewalRecord, field: string): unknown {
+  if (field === "renewalWindow") {
+    return getRenewalWindowValue(item.daysToRenewal)
+  }
+  return item[field as keyof IRenewalRecord]
+}
+
+function applyFiltersToData(
+  data: IRenewalRecord[],
+  filters: Filter[]
+): IRenewalRecord[] {
+  const active = getActiveFilters(filters)
+  let result = [...data]
+
+  active.forEach((filter) => {
+    const { field, operator, values } = filter
+
+    result = result.filter((item) => {
+      const raw = filterFieldValue(item, field)
+      const fieldValue = raw != null ? raw : ""
+
+      switch (operator) {
+        case "is":
+          return values.includes(fieldValue)
+        case "is_not":
+          return !values.includes(fieldValue)
+        case "is_any_of":
+          return values.some((value) => fieldValue === value)
+        case "is_not_any_of":
+          return !values.some((value) => fieldValue === value)
+        case "contains": {
+          const tokens = values
+            .map((value) => String(value).trim())
+            .filter(Boolean)
+          if (tokens.length === 0) return true
+          return tokens.some((token) =>
+            String(fieldValue).toLowerCase().includes(token.toLowerCase())
+          )
+        }
+        case "not_contains":
+          return !values.some((value) =>
+            String(fieldValue)
+              .toLowerCase()
+              .includes(String(value).toLowerCase())
+          )
+        case "starts_with":
+          return values.some((value) =>
+            String(fieldValue)
+              .toLowerCase()
+              .startsWith(String(value).toLowerCase())
+          )
+        case "ends_with":
+          return values.some((value) =>
+            String(fieldValue)
+              .toLowerCase()
+              .endsWith(String(value).toLowerCase())
+          )
+        case "equals":
+          return fieldValue === values[0]
+        case "not_equals":
+          return fieldValue !== values[0]
+        case "greater_than":
+          return Number(fieldValue) > Number(values[0])
+        case "less_than":
+          return Number(fieldValue) < Number(values[0])
+        case "greater_than_or_equal":
+          return Number(fieldValue) >= Number(values[0])
+        case "less_than_or_equal":
+          return Number(fieldValue) <= Number(values[0])
+        case "between":
+          if (values.length >= 2) {
+            const min = Number(values[0])
+            const max = Number(values[1])
+            return Number(fieldValue) >= min && Number(fieldValue) <= max
+          }
+          return true
+        case "not_between":
+          if (values.length >= 2) {
+            const min = Number(values[0])
+            const max = Number(values[1])
+            return Number(fieldValue) < min || Number(fieldValue) > max
+          }
+          return true
+        case "empty":
+          return fieldValue === "" || fieldValue == null
+        case "not_empty":
+          return fieldValue !== "" && fieldValue != null
+        default:
+          return true
+      }
+    })
+  })
+
+  return result
+}
+
+function renderSelectedCount(values: unknown[]) {
+  if (values.length === 0) return "Select..."
+  if (values.length > 1) return `${values.length} selected`
+  return null
+}
+
+function formatCompactCurrency(value: number) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    notation: "compact",
+    maximumFractionDigits: 1,
+  }).format(value)
+}
+
+function createDefaultRenewalFilters(): Filter[] {
+  return [createFilter("accountName", "contains", [""])]
+}
+
+const DEFAULT_COLUMN_ORDER = [
+  "select",
+  "account",
+  "renewalWindow",
+  "arr",
+  "health",
+  "usage",
+  "stage",
+  "risk",
+  "invoiceStatus",
+  "sponsorStatus",
+  "region",
+  "actions",
+]
+
+type TableDensity = "compact" | "comfortable"
+type DisplayColumn =
+  | "health"
+  | "usage"
+  | "stage"
+  | "risk"
+  | "invoiceStatus"
+  | "sponsorStatus"
+  | "region"
+
+const TABLE_DENSITY_OPTIONS: { value: TableDensity; label: string }[] = [
+  { value: "compact", label: "Compact" },
+  { value: "comfortable", label: "Comfortable" },
+]
+
+const DISPLAY_COLUMNS: { key: DisplayColumn; label: string }[] = [
+  { key: "health", label: "Health" },
+  { key: "usage", label: "Usage" },
+  { key: "stage", label: "Stage" },
+  { key: "risk", label: "Risk" },
+  { key: "invoiceStatus", label: "Invoice" },
+  { key: "sponsorStatus", label: "Sponsor" },
+  { key: "region", label: "Region" },
+]
+
+interface ToolbarProps {
+  filters: Filter[]
+  fields: FilterFieldConfig[]
+  onFiltersChange: (filters: Filter[]) => void
+  onClearFilters: () => void
+  showClearButton: boolean
+  tableDensity: TableDensity
+  onTableDensityChange: (value: TableDensity) => void
+  columnsResizable: boolean
+  onColumnsResizableChange: (value: boolean) => void
+  columnsMovable: boolean
+  onColumnsMovableChange: (value: boolean) => void
+  visibleColumns: Record<DisplayColumn, boolean>
+  onToggleColumn: (columnId: DisplayColumn) => void
+}
+
+function Toolbar({
+  filters,
+  fields,
+  onFiltersChange,
+  onClearFilters,
+  showClearButton,
+  tableDensity,
+  onTableDensityChange,
+  columnsResizable,
+  onColumnsResizableChange,
+  columnsMovable,
+  onColumnsMovableChange,
+  visibleColumns,
+  onToggleColumn,
+}: ToolbarProps) {
+  return (
+    <div className="flex flex-col gap-3 px-5 py-3 lg:flex-row lg:items-center lg:justify-between">
+      {/* Actions */}
+      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+        <Filters
+          filters={filters}
+          fields={fields}
+          onChange={onFiltersChange}
+          size="default"
+          trigger={
+            <Button
+              type="button"
+              variant="outline"
+              aria-label="Renewal filters"
+            >
+              <FilterIcon aria-hidden="true" />
+              Filters
+            </Button>
+          }
+        />
+
+        {showClearButton ? (
+          <Button type="button" variant="outline" onClick={onClearFilters}>
+            Clear filters
+          </Button>
+        ) : null}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+        <Popover>
+          <PopoverTrigger
+            render={
+              <Button
+                type="button"
+                variant="outline"
+                aria-label="Table settings"
+              >
+                <Settings2Icon className="size-4" aria-hidden="true" />
+                Settings
+              </Button>
+            }
+          />
+          <PopoverContent align="end" className="w-[320px] p-0">
+            <FieldGroup className="gap-3 px-3.5 py-3">
+              <div className="space-y-2">
+                <div className="text-muted-foreground text-xs font-medium">
+                  Table
+                </div>
+                <div className="space-y-0">
+                  <Field
+                    orientation="horizontal"
+                    className="min-h-9 items-center justify-between gap-3"
+                  >
+                    <FieldLabel className="text-sm font-normal">
+                      Density
+                    </FieldLabel>
+                    <Select
+                      value={tableDensity}
+                      onValueChange={(value) =>
+                        onTableDensityChange(value as TableDensity)
+                      }
+                      items={TABLE_DENSITY_OPTIONS}
+                    >
+                      <SelectTrigger size="sm" className="w-[132px] shrink-0">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent align="end">
+                        <SelectGroup>
+                          {TABLE_DENSITY_OPTIONS.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </Field>
+
+                  <Field
+                    orientation="horizontal"
+                    className="min-h-9 items-center justify-between gap-3"
+                  >
+                    <FieldLabel className="text-sm font-normal">
+                      Resizable columns
+                    </FieldLabel>
+                    <Switch
+                      size="sm"
+                      checked={columnsResizable}
+                      onCheckedChange={onColumnsResizableChange}
+                    />
+                  </Field>
+
+                  <Field
+                    orientation="horizontal"
+                    className="min-h-9 items-center justify-between gap-3"
+                  >
+                    <FieldLabel className="text-sm font-normal">
+                      Movable columns
+                    </FieldLabel>
+                    <Switch
+                      size="sm"
+                      checked={columnsMovable}
+                      onCheckedChange={onColumnsMovableChange}
+                    />
+                  </Field>
+                </div>
+              </div>
+
+              <FieldSeparator className="-mx-3.5" />
+
+              <div className="space-y-2.5">
+                <div className="text-muted-foreground text-xs font-medium">
+                  Display columns
+                </div>
+                <div className="flex flex-wrap gap-1.5">
+                  {DISPLAY_COLUMNS.map((column) => {
+                    const active = visibleColumns[column.key]
+
+                    return (
+                      <Button
+                        key={column.key}
+                        type="button"
+                        size="xs"
+                        variant={active ? "secondary" : "outline"}
+                        className={cn(
+                          "rounded-full",
+                          active && "border-foreground/10"
+                        )}
+                        onClick={() => onToggleColumn(column.key)}
+                      >
+                        {active ? (
+                          <CheckIcon className="size-3.5" aria-hidden="true" />
+                        ) : null}
+                        {column.label}
+                      </Button>
+                    )
+                  })}
+                </div>
+              </div>
+            </FieldGroup>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  )
+}
+
+export function RenewalsCommandGridView() {
+  const [renewals, setRenewals] = useState<IRenewalRecord[]>(RENEWAL_RECORDS)
+  const [tableDensity, setTableDensity] = useState<TableDensity>("compact")
+  const [columnsResizable, setColumnsResizable] = useState(true)
+  const [columnsMovable, setColumnsMovable] = useState(true)
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: "renewalWindow", desc: false },
+    { id: "arr", desc: true },
+  ])
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
+    health: true,
+    stage: true,
+    risk: true,
+    usage: false,
+    invoiceStatus: false,
+    sponsorStatus: false,
+    region: false,
+  })
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [columnOrder, setColumnOrder] = useState(DEFAULT_COLUMN_ORDER)
+  const [filters, setFilters] = useState<Filter[]>(createDefaultRenewalFilters)
+  const [bulkOwnerValue, setBulkOwnerValue] = useState(RENEWAL_OWNERS[0].value)
+  const [bulkStageValue, setBulkStageValue] =
+    useState<RenewalStage>("Commercial review")
+
+  const filterFields: FilterFieldConfig[] = useMemo(
+    () => [
+      {
+        key: "accountName",
+        label: "Account",
+        icon: (
+          <Building2Icon className="size-3.5" aria-hidden="true" />
+        ),
+        type: "text",
+        className: "w-[200px]",
+        placeholder: "Search...",
+      },
+      {
+        key: "segment",
+        label: "Segment",
+        icon: (
+          <LayersIcon className="size-3.5" aria-hidden="true" />
+        ),
+        type: "select",
+        searchable: false,
+        className: "w-[160px]",
+        options: RENEWAL_SEGMENT_ORDER.map((segment) => ({
+          value: segment,
+          label: segment,
+        })),
+      },
+      {
+        key: "stage",
+        label: "Stage",
+        icon: (
+          <GitBranchIcon className="size-3.5" aria-hidden="true" />
+        ),
+        type: "select",
+        searchable: false,
+        className: "w-[180px]",
+        options: RENEWAL_STAGE_ORDER.map((stage) => ({
+          value: stage,
+          label: stage,
+        })),
+        customValueRenderer: (values) => {
+          const state = renderSelectedCount(values)
+          if (state) return state
+          return <StageBadge stage={values[0] as RenewalStage} />
+        },
+      },
+      {
+        key: "risk",
+        label: "Risk",
+        icon: (
+          <TriangleAlertIcon className="size-3.5" aria-hidden="true" />
+        ),
+        type: "select",
+        searchable: false,
+        className: "w-[140px]",
+        options: RENEWAL_RISK_ORDER.map((risk) => ({
+          value: risk,
+          label: risk,
+        })),
+        customValueRenderer: (values) => {
+          const state = renderSelectedCount(values)
+          if (state) return state
+          return <RiskBadge risk={values[0] as RenewalRisk} />
+        },
+      },
+      {
+        key: "renewalWindow",
+        label: "Renewal window",
+        icon: (
+          <CalendarClockIcon className="size-3.5" aria-hidden="true" />
+        ),
+        type: "select",
+        searchable: false,
+        className: "w-[170px]",
+        options: RENEWAL_WINDOW_OPTIONS.map((option) => ({
+          value: option.value,
+          label: option.label,
+        })),
+      },
+      {
+        key: "ownerName",
+        label: "Owner",
+        icon: (
+          <UserRoundIcon className="size-3.5" aria-hidden="true" />
+        ),
+        type: "select",
+        searchable: false,
+        className: "w-[170px]",
+        options: RENEWAL_OWNERS.map((owner) => ({
+          value: owner.label,
+          label: owner.label,
+        })),
+      },
+    ],
+    []
+  )
+
+  const filteredData = useMemo(
+    () => applyFiltersToData(renewals, filters),
+    [filters, renewals]
+  )
+  const visibleColumns = useMemo<Record<DisplayColumn, boolean>>(
+    () => ({
+      health: columnVisibility.health !== false,
+      usage: columnVisibility.usage !== false,
+      stage: columnVisibility.stage !== false,
+      risk: columnVisibility.risk !== false,
+      invoiceStatus: columnVisibility.invoiceStatus !== false,
+      sponsorStatus: columnVisibility.sponsorStatus !== false,
+      region: columnVisibility.region !== false,
+    }),
+    [columnVisibility]
+  )
+
+  const dueInThirtyCount = useMemo(
+    () => filteredData.filter((renewal) => renewal.daysToRenewal <= 30).length,
+    [filteredData]
+  )
+
+  const blockerCount = useMemo(
+    () =>
+      filteredData.filter(
+        (renewal) =>
+          renewal.invoiceStatus !== "Ready" ||
+          renewal.sponsorStatus !== "Confirmed"
+      ).length,
+    [filteredData]
+  )
+
+  const arrAtRisk = useMemo(
+    () =>
+      filteredData.reduce(
+        (total, renewal) =>
+          renewal.risk === "High" || renewal.risk === "Critical"
+            ? total + renewal.arr
+            : total,
+        0
+      ),
+    [filteredData]
+  )
+
+  const handleOpenAccount = useCallback((renewal: IRenewalRecord) => {
+    toast.info("Open account workspace", {
+      description: `${renewal.accountName} · ${renewal.ownerName}`,
+    })
+  }, [])
+
+  const handleCreateBrief = useCallback((renewal: IRenewalRecord) => {
+    toast.success("Renewal brief created", {
+      description: `${renewal.accountName} is ready for executive review.`,
+    })
+  }, [])
+
+  const handleEscalateReview = useCallback((renewal: IRenewalRecord) => {
+    setRenewals((current) =>
+      current.map((record) =>
+        record.id === renewal.id
+          ? {
+              ...record,
+              risk: "Critical",
+              stage:
+                record.stage === "Committed" ? record.stage : "Legal review",
+            }
+          : record
+      )
+    )
+
+    toast.success("Exec escalation created", {
+      description: `${renewal.accountName} moved into an urgent board-review track.`,
+    })
+  }, [])
+
+  const columns = useMemo(
+    () =>
+      createRenewalColumns({
+        onOpenAccount: handleOpenAccount,
+        onCreateBrief: handleCreateBrief,
+        onEscalateReview: handleEscalateReview,
+      }),
+    [handleCreateBrief, handleEscalateReview, handleOpenAccount]
+  )
+
+  const table = useReactTable({
+    columns,
+    data: filteredData,
+    getRowId: (row) => row.id,
+    state: {
+      sorting,
+      columnVisibility,
+      columnOrder,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    columnResizeMode: "onChange",
+    onSortingChange: setSorting,
+    onColumnVisibilityChange: setColumnVisibility,
+    onColumnOrderChange: setColumnOrder,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  })
+
+  const selectedRows = table
+    .getSelectedRowModel()
+    .rows.map((row) => row.original.id)
+
+  const selectedCount = selectedRows.length
+  const showClearButton = filters.length > 0
+
+  const handleFiltersChange = useCallback((nextFilters: Filter[]) => {
+    setFilters(nextFilters)
+  }, [])
+
+  const handleClearFilters = useCallback(() => {
+    setFilters(createDefaultRenewalFilters())
+  }, [])
+
+  const handleClearSelection = useCallback(() => {
+    setRowSelection({})
+  }, [])
+
+  const handleToggleColumn = useCallback((columnId: DisplayColumn) => {
+    setColumnVisibility((current) => ({
+      ...current,
+      [columnId]: current[columnId] === false,
+    }))
+  }, [])
+
+  const handleApplySelected = useCallback(() => {
+    if (selectedRows.length === 0) return
+
+    const nextOwner = RENEWAL_OWNERS.find(
+      (owner) => owner.value === bulkOwnerValue
+    )
+    if (!nextOwner) return
+
+    setRenewals((current) =>
+      current.map((renewal) =>
+        selectedRows.includes(renewal.id)
+          ? {
+              ...renewal,
+              ownerName: nextOwner.label,
+              ownerAvatar: nextOwner.avatar,
+              stage: bulkStageValue,
+            }
+          : renewal
+      )
+    )
+
+    setRowSelection({})
+    toast.success("Renewals updated", {
+      description: `${selectedRows.length} account${selectedRows.length === 1 ? "" : "s"} moved to ${nextOwner.label} and ${bulkStageValue}.`,
+    })
+  }, [bulkOwnerValue, bulkStageValue, selectedRows])
+
+  return (
+    <TooltipProvider delay={200}>
+      {/* Table */}
+      <DataGrid
+        table={table}
+        recordCount={filteredData.length}
+        emptyMessage="No renewals match this view. Clear filters or widen the search."
+        tableLayout={{
+          columnsResizable,
+          columnsMovable,
+          columnsVisibility: true,
+          dense: tableDensity === "compact",
+          width: "auto",
+        }}
+      >
+        <RenewalsCommandCard
+          title="Renewals Review"
+          description={`${dueInThirtyCount} due in 30d, ${blockerCount} blocked, ${formatCompactCurrency(arrAtRisk)} ARR at risk.`}
+          action={
+            <Button
+              type="button"
+              size="sm"
+              onClick={() =>
+                toast.success("Transaction started", {
+                  description: "New renewal entry opened.",
+                })
+              }
+            >
+              <PlusIcon aria-hidden="true" />
+              New transaction
+            </Button>
+          }
+        >
+          <Toolbar
+            filters={filters}
+            fields={filterFields}
+            onFiltersChange={handleFiltersChange}
+            onClearFilters={handleClearFilters}
+            showClearButton={showClearButton}
+            tableDensity={tableDensity}
+            onTableDensityChange={setTableDensity}
+            columnsResizable={columnsResizable}
+            onColumnsResizableChange={setColumnsResizable}
+            columnsMovable={columnsMovable}
+            onColumnsMovableChange={setColumnsMovable}
+            visibleColumns={visibleColumns}
+            onToggleColumn={handleToggleColumn}
+          />
+
+          {selectedCount > 0 ? (
+            <RenewalSelectionBar
+              selectedCount={selectedCount}
+              ownerValue={bulkOwnerValue}
+              stageValue={bulkStageValue}
+              ownerOptions={RENEWAL_OWNERS}
+              onOwnerChange={setBulkOwnerValue}
+              onStageChange={setBulkStageValue}
+              onApply={handleApplySelected}
+              onClear={handleClearSelection}
+            />
+          ) : (
+            <Separator />
+          )}
+
+          <DataGridScrollArea className="h-[540px]">
+            <DataGridTable />
+          </DataGridScrollArea>
+        </RenewalsCommandCard>
+      </DataGrid>
+    </TooltipProvider>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-3/components/data.tsx b/apps/web/src/components/blocks/data-grid-filtering-3/components/data.tsx
new file mode 100644
index 0000000..c9d4921
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-3/components/data.tsx
@@ -0,0 +1,738 @@
+import { type ReactNode } from "react"
+
+import { AnthropicBlack } from "@evobgp/ui/components/svgs/anthropicBlack"
+import { AnthropicWhite } from "@evobgp/ui/components/svgs/anthropicWhite"
+import { Convex } from "@evobgp/ui/components/svgs/convex"
+import { GoogleCloud } from "@evobgp/ui/components/svgs/googleCloud"
+import { Hono } from "@evobgp/ui/components/svgs/hono"
+import { Mintlify } from "@evobgp/ui/components/svgs/mintlify"
+import { N8n } from "@evobgp/ui/components/svgs/n8n"
+import { Neon } from "@evobgp/ui/components/svgs/neon"
+import { Openai } from "@evobgp/ui/components/svgs/openai"
+import { OpenaiDark } from "@evobgp/ui/components/svgs/openaiDark"
+import { Paper } from "@evobgp/ui/components/svgs/paper"
+import { Planetscale } from "@evobgp/ui/components/svgs/planetscale"
+import { PlanetscaleDark } from "@evobgp/ui/components/svgs/planetscaleDark"
+import { Prisma } from "@evobgp/ui/components/svgs/prisma"
+import { PrismaDark } from "@evobgp/ui/components/svgs/prismaDark"
+import { RemixDark } from "@evobgp/ui/components/svgs/remixDark"
+import { RemixLight } from "@evobgp/ui/components/svgs/remixLight"
+import { ResendIconBlack } from "@evobgp/ui/components/svgs/resendIconBlack"
+import { ResendIconWhite } from "@evobgp/ui/components/svgs/resendIconWhite"
+import { Slack } from "@evobgp/ui/components/svgs/slack"
+import { Stripe } from "@evobgp/ui/components/svgs/stripe"
+import { Supabase } from "@evobgp/ui/components/svgs/supabase"
+import { Zoom } from "@evobgp/ui/components/svgs/zoom"
+
+export type RenewalStage =
+  | "Preparing"
+  | "Commercial review"
+  | "Legal review"
+  | "Committed"
+
+export type RenewalRisk = "Low" | "Medium" | "High" | "Critical"
+
+export type RenewalSegment = "Enterprise" | "Scale" | "Mid-market"
+
+export type RenewalInvoiceStatus = "Ready" | "Finance review" | "Blocked"
+
+export type RenewalSponsorStatus = "Confirmed" | "At risk" | "Missing"
+
+export interface RenewalOwnerOption {
+  value: string
+  label: string
+  avatar: string
+  teamLabel: string
+}
+
+export interface IRenewalRecord {
+  id: string
+  accountName: string
+  accountLogo: ReactNode
+  ownerName: string
+  ownerAvatar: string
+  segment: RenewalSegment
+  region: string
+  renewalDate: string
+  daysToRenewal: number
+  arr: number
+  expansionPotential: number
+  healthScore: number
+  usageTrend: number[]
+  stage: RenewalStage
+  risk: RenewalRisk
+  invoiceStatus: RenewalInvoiceStatus
+  sponsorStatus: RenewalSponsorStatus
+  tags: string[]
+}
+
+export const RENEWAL_STAGE_ORDER: RenewalStage[] = [
+  "Preparing",
+  "Commercial review",
+  "Legal review",
+  "Committed",
+]
+
+export const RENEWAL_RISK_ORDER: RenewalRisk[] = [
+  "Low",
+  "Medium",
+  "High",
+  "Critical",
+]
+
+export const RENEWAL_SEGMENT_ORDER: RenewalSegment[] = [
+  "Enterprise",
+  "Scale",
+  "Mid-market",
+]
+
+export const RENEWAL_WINDOW_OPTIONS = [
+  { value: "next-30", label: "Next 30 days" },
+  { value: "31-60", label: "31-60 days" },
+  { value: "61-90", label: "61-90 days" },
+  { value: "90-plus", label: "90+ days" },
+] as const
+
+const OPENAI_LOGO = (
+  <>
+    <span aria-hidden className="dark:hidden">
+      <Openai className="size-5" />
+    </span>
+    <span aria-hidden className="hidden dark:block">
+      <OpenaiDark className="size-5" />
+    </span>
+  </>
+)
+
+const ANTHROPIC_LOGO = (
+  <>
+    <span aria-hidden className="dark:hidden">
+      <AnthropicBlack className="size-5" />
+    </span>
+    <span aria-hidden className="hidden dark:block">
+      <AnthropicWhite className="size-5" />
+    </span>
+  </>
+)
+
+const PRISMA_LOGO = (
+  <>
+    <span aria-hidden className="dark:hidden">
+      <Prisma className="size-5" />
+    </span>
+    <span aria-hidden className="hidden dark:block">
+      <PrismaDark className="size-5" />
+    </span>
+  </>
+)
+
+const PLANETSCALE_LOGO = (
+  <>
+    <span aria-hidden className="dark:hidden">
+      <Planetscale className="text-foreground size-5" />
+    </span>
+    <span aria-hidden className="hidden dark:block">
+      <PlanetscaleDark className="size-5" />
+    </span>
+  </>
+)
+
+const RESEND_LOGO = (
+  <>
+    <span aria-hidden className="dark:hidden">
+      <ResendIconBlack className="size-5" />
+    </span>
+    <span aria-hidden className="hidden dark:block">
+      <ResendIconWhite className="size-5" />
+    </span>
+  </>
+)
+
+const REMIX_LOGO = (
+  <>
+    <span aria-hidden className="dark:hidden">
+      <RemixLight className="size-5" />
+    </span>
+    <span aria-hidden className="hidden dark:block">
+      <RemixDark className="size-5" />
+    </span>
+  </>
+)
+
+function VercelMark() {
+  return (
+    <svg
+      viewBox="0 0 76 65"
+      className="text-foreground size-5 shrink-0"
+      aria-hidden="true"
+    >
+      <path fill="currentColor" d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
+    </svg>
+  )
+}
+
+export function getRenewalWindowValue(daysToRenewal: number) {
+  if (daysToRenewal <= 30) return "next-30"
+  if (daysToRenewal <= 60) return "31-60"
+  if (daysToRenewal <= 90) return "61-90"
+  return "90-plus"
+}
+
+export function getRenewalWindowLabel(daysToRenewal: number) {
+  const match = RENEWAL_WINDOW_OPTIONS.find(
+    (option) => option.value === getRenewalWindowValue(daysToRenewal)
+  )
+
+  return match?.label ?? "90+ days"
+}
+
+export const RENEWAL_OWNERS: RenewalOwnerOption[] = [
+  {
+    value: "maya-patel",
+    label: "Maya Patel",
+    avatar:
+      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&dpr=2&q=80",
+    teamLabel: "Enterprise coverage",
+  },
+  {
+    value: "jonah-lee",
+    label: "Jonah Lee",
+    avatar:
+      "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=96&h=96&dpr=2&q=80",
+    teamLabel: "Strategic expansion",
+  },
+  {
+    value: "nina-santos",
+    label: "Nina Santos",
+    avatar:
+      "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=96&h=96&dpr=2&q=80",
+    teamLabel: "Commercial renewals",
+  },
+  {
+    value: "omar-haddad",
+    label: "Omar Haddad",
+    avatar:
+      "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=96&h=96&dpr=2&q=80",
+    teamLabel: "Expansion programs",
+  },
+  {
+    value: "priya-menon",
+    label: "Priya Menon",
+    avatar:
+      "https://images.unsplash.com/photo-1557296387-5358ad7997bb?w=96&h=96&dpr=2&q=80",
+    teamLabel: "Finance alignment",
+  },
+]
+
+const RENEWAL_RECORD_SEEDS: IRenewalRecord[] = [
+  {
+    id: "REN-1842",
+    accountName: "Stripe",
+    accountLogo: <Stripe className="size-5" aria-hidden="true" />,
+    ownerName: "Maya Patel",
+    ownerAvatar: RENEWAL_OWNERS[0].avatar,
+    segment: "Enterprise",
+    region: "North America",
+    renewalDate: "2026-05-12",
+    daysToRenewal: 7,
+    arr: 420000,
+    expansionPotential: 95000,
+    healthScore: 46,
+    usageTrend: [86, 84, 82, 79, 74, 68, 63, 57],
+    stage: "Legal review",
+    risk: "Critical",
+    invoiceStatus: "Blocked",
+    sponsorStatus: "Missing",
+    tags: ["Usage drop", "Legal redlines"],
+  },
+  {
+    id: "REN-1837",
+    accountName: "Supabase",
+    accountLogo: <Supabase className="size-5" aria-hidden="true" />,
+    ownerName: "Nina Santos",
+    ownerAvatar: RENEWAL_OWNERS[2].avatar,
+    segment: "Enterprise",
+    region: "North America",
+    renewalDate: "2026-05-17",
+    daysToRenewal: 12,
+    arr: 365000,
+    expansionPotential: 120000,
+    healthScore: 58,
+    usageTrend: [72, 73, 71, 69, 66, 63, 61, 60],
+    stage: "Commercial review",
+    risk: "High",
+    invoiceStatus: "Finance review",
+    sponsorStatus: "At risk",
+    tags: ["Procurement", "Price sensitivity"],
+  },
+  {
+    id: "REN-1831",
+    accountName: "OpenAI",
+    accountLogo: OPENAI_LOGO,
+    ownerName: "Jonah Lee",
+    ownerAvatar: RENEWAL_OWNERS[1].avatar,
+    segment: "Scale",
+    region: "EMEA",
+    renewalDate: "2026-05-29",
+    daysToRenewal: 24,
+    arr: 182000,
+    expansionPotential: 42000,
+    healthScore: 63,
+    usageTrend: [68, 69, 70, 71, 70, 68, 66, 64],
+    stage: "Preparing",
+    risk: "High",
+    invoiceStatus: "Ready",
+    sponsorStatus: "Confirmed",
+    tags: ["Champion change", "Board visibility"],
+  },
+  {
+    id: "REN-1828",
+    accountName: "Mintlify",
+    accountLogo: <Mintlify className="size-5" aria-hidden="true" />,
+    ownerName: "Omar Haddad",
+    ownerAvatar: RENEWAL_OWNERS[3].avatar,
+    segment: "Scale",
+    region: "North America",
+    renewalDate: "2026-06-04",
+    daysToRenewal: 30,
+    arr: 148000,
+    expansionPotential: 86000,
+    healthScore: 74,
+    usageTrend: [64, 66, 68, 70, 73, 76, 79, 82],
+    stage: "Preparing",
+    risk: "Medium",
+    invoiceStatus: "Ready",
+    sponsorStatus: "Confirmed",
+    tags: ["Expansion ready", "Multi-team rollout"],
+  },
+  {
+    id: "REN-1822",
+    accountName: "Anthropic",
+    accountLogo: ANTHROPIC_LOGO,
+    ownerName: "Priya Menon",
+    ownerAvatar: RENEWAL_OWNERS[4].avatar,
+    segment: "Enterprise",
+    region: "North America",
+    renewalDate: "2026-06-11",
+    daysToRenewal: 37,
+    arr: 515000,
+    expansionPotential: 0,
+    healthScore: 54,
+    usageTrend: [78, 76, 74, 71, 69, 66, 64, 61],
+    stage: "Commercial review",
+    risk: "High",
+    invoiceStatus: "Blocked",
+    sponsorStatus: "At risk",
+    tags: ["Budget freeze", "CFO review"],
+  },
+  {
+    id: "REN-1819",
+    accountName: "Convex",
+    accountLogo: <Convex className="size-5" aria-hidden="true" />,
+    ownerName: "Maya Patel",
+    ownerAvatar: RENEWAL_OWNERS[0].avatar,
+    segment: "Mid-market",
+    region: "APAC",
+    renewalDate: "2026-06-18",
+    daysToRenewal: 44,
+    arr: 92000,
+    expansionPotential: 18000,
+    healthScore: 71,
+    usageTrend: [62, 63, 64, 64, 65, 67, 68, 69],
+    stage: "Preparing",
+    risk: "Medium",
+    invoiceStatus: "Ready",
+    sponsorStatus: "Confirmed",
+    tags: ["Stable adoption", "Good champion"],
+  },
+  {
+    id: "REN-1814",
+    accountName: "Neon",
+    accountLogo: <Neon className="size-5" aria-hidden="true" />,
+    ownerName: "Jonah Lee",
+    ownerAvatar: RENEWAL_OWNERS[1].avatar,
+    segment: "Scale",
+    region: "North America",
+    renewalDate: "2026-06-26",
+    daysToRenewal: 52,
+    arr: 206000,
+    expansionPotential: 112000,
+    healthScore: 67,
+    usageTrend: [59, 60, 61, 60, 62, 64, 67, 70],
+    stage: "Commercial review",
+    risk: "Medium",
+    invoiceStatus: "Finance review",
+    sponsorStatus: "Confirmed",
+    tags: ["Cross-sell", "Security add-on"],
+  },
+  {
+    id: "REN-1810",
+    accountName: "PlanetScale",
+    accountLogo: PLANETSCALE_LOGO,
+    ownerName: "Nina Santos",
+    ownerAvatar: RENEWAL_OWNERS[2].avatar,
+    segment: "Enterprise",
+    region: "EMEA",
+    renewalDate: "2026-07-02",
+    daysToRenewal: 58,
+    arr: 438000,
+    expansionPotential: 64000,
+    healthScore: 81,
+    usageTrend: [74, 75, 77, 79, 81, 83, 84, 86],
+    stage: "Preparing",
+    risk: "Low",
+    invoiceStatus: "Ready",
+    sponsorStatus: "Confirmed",
+    tags: ["Healthy usage", "Multi-year ask"],
+  },
+  {
+    id: "REN-1806",
+    accountName: "Prisma",
+    accountLogo: PRISMA_LOGO,
+    ownerName: "Omar Haddad",
+    ownerAvatar: RENEWAL_OWNERS[3].avatar,
+    segment: "Mid-market",
+    region: "North America",
+    renewalDate: "2026-07-08",
+    daysToRenewal: 64,
+    arr: 124000,
+    expansionPotential: 52000,
+    healthScore: 77,
+    usageTrend: [61, 63, 65, 68, 70, 73, 76, 78],
+    stage: "Preparing",
+    risk: "Low",
+    invoiceStatus: "Ready",
+    sponsorStatus: "Confirmed",
+    tags: ["Expansion champion", "Product depth"],
+  },
+  {
+    id: "REN-1801",
+    accountName: "Resend",
+    accountLogo: RESEND_LOGO,
+    ownerName: "Priya Menon",
+    ownerAvatar: RENEWAL_OWNERS[4].avatar,
+    segment: "Scale",
+    region: "North America",
+    renewalDate: "2026-07-13",
+    daysToRenewal: 69,
+    arr: 164000,
+    expansionPotential: 0,
+    healthScore: 52,
+    usageTrend: [67, 66, 64, 62, 59, 57, 54, 52],
+    stage: "Commercial review",
+    risk: "High",
+    invoiceStatus: "Finance review",
+    sponsorStatus: "At risk",
+    tags: ["Seat contraction", "Procurement loop"],
+  },
+  {
+    id: "REN-1798",
+    accountName: "Slack",
+    accountLogo: <Slack className="size-5 shrink-0" aria-hidden="true" />,
+    ownerName: "Maya Patel",
+    ownerAvatar: RENEWAL_OWNERS[0].avatar,
+    segment: "Mid-market",
+    region: "EMEA",
+    renewalDate: "2026-07-18",
+    daysToRenewal: 74,
+    arr: 88000,
+    expansionPotential: 24000,
+    healthScore: 69,
+    usageTrend: [54, 55, 56, 58, 60, 61, 63, 64],
+    stage: "Preparing",
+    risk: "Medium",
+    invoiceStatus: "Ready",
+    sponsorStatus: "Confirmed",
+    tags: ["Team growth", "Regional rollout"],
+  },
+  {
+    id: "REN-1794",
+    accountName: "Zoom",
+    accountLogo: <Zoom className="size-5 shrink-0" aria-hidden="true" />,
+    ownerName: "Jonah Lee",
+    ownerAvatar: RENEWAL_OWNERS[1].avatar,
+    segment: "Scale",
+    region: "North America",
+    renewalDate: "2026-07-24",
+    daysToRenewal: 80,
+    arr: 212000,
+    expansionPotential: 135000,
+    healthScore: 83,
+    usageTrend: [70, 72, 74, 77, 80, 83, 86, 88],
+    stage: "Preparing",
+    risk: "Low",
+    invoiceStatus: "Ready",
+    sponsorStatus: "Confirmed",
+    tags: ["Expansion approved", "Executive sponsor"],
+  },
+  {
+    id: "REN-1791",
+    accountName: "Hono",
+    accountLogo: <Hono className="size-5" aria-hidden="true" />,
+    ownerName: "Nina Santos",
+    ownerAvatar: RENEWAL_OWNERS[2].avatar,
+    segment: "Enterprise",
+    region: "North America",
+    renewalDate: "2026-07-31",
+    daysToRenewal: 87,
+    arr: 610000,
+    expansionPotential: 180000,
+    healthScore: 79,
+    usageTrend: [73, 75, 77, 78, 80, 82, 83, 85],
+    stage: "Commercial review",
+    risk: "Medium",
+    invoiceStatus: "Finance review",
+    sponsorStatus: "Confirmed",
+    tags: ["Security pack", "Platform standard"],
+  },
+  {
+    id: "REN-1787",
+    accountName: "Remix",
+    accountLogo: REMIX_LOGO,
+    ownerName: "Omar Haddad",
+    ownerAvatar: RENEWAL_OWNERS[3].avatar,
+    segment: "Mid-market",
+    region: "APAC",
+    renewalDate: "2026-08-05",
+    daysToRenewal: 92,
+    arr: 76000,
+    expansionPotential: 21000,
+    healthScore: 72,
+    usageTrend: [58, 59, 60, 62, 64, 65, 67, 68],
+    stage: "Preparing",
+    risk: "Low",
+    invoiceStatus: "Ready",
+    sponsorStatus: "Confirmed",
+    tags: ["Partner motion", "Upsell path"],
+  },
+  {
+    id: "REN-1783",
+    accountName: "Paper",
+    accountLogo: <Paper className="size-5" aria-hidden="true" />,
+    ownerName: "Priya Menon",
+    ownerAvatar: RENEWAL_OWNERS[4].avatar,
+    segment: "Scale",
+    region: "EMEA",
+    renewalDate: "2026-08-11",
+    daysToRenewal: 98,
+    arr: 154000,
+    expansionPotential: 0,
+    healthScore: 57,
+    usageTrend: [63, 62, 60, 58, 57, 55, 54, 53],
+    stage: "Preparing",
+    risk: "Medium",
+    invoiceStatus: "Finance review",
+    sponsorStatus: "At risk",
+    tags: ["Utilization drift", "Renewal watch"],
+  },
+  {
+    id: "REN-1778",
+    accountName: "n8n",
+    accountLogo: <N8n className="size-5" aria-hidden="true" />,
+    ownerName: "Maya Patel",
+    ownerAvatar: RENEWAL_OWNERS[0].avatar,
+    segment: "Enterprise",
+    region: "North America",
+    renewalDate: "2026-08-20",
+    daysToRenewal: 107,
+    arr: 448000,
+    expansionPotential: 132000,
+    healthScore: 85,
+    usageTrend: [79, 80, 82, 84, 86, 87, 89, 90],
+    stage: "Preparing",
+    risk: "Low",
+    invoiceStatus: "Ready",
+    sponsorStatus: "Confirmed",
+    tags: ["Expansion mapped", "Board champion"],
+  },
+  {
+    id: "REN-1772",
+    accountName: "Vercel",
+    accountLogo: <VercelMark />,
+    ownerName: "Jonah Lee",
+    ownerAvatar: RENEWAL_OWNERS[1].avatar,
+    segment: "Scale",
+    region: "LATAM",
+    renewalDate: "2026-08-29",
+    daysToRenewal: 116,
+    arr: 132000,
+    expansionPotential: 34000,
+    healthScore: 68,
+    usageTrend: [60, 61, 62, 63, 65, 66, 66, 67],
+    stage: "Preparing",
+    risk: "Medium",
+    invoiceStatus: "Ready",
+    sponsorStatus: "Confirmed",
+    tags: ["Regional growth", "Elastic usage"],
+  },
+  {
+    id: "REN-1768",
+    accountName: "Google Cloud",
+    accountLogo: <GoogleCloud className="size-5" aria-hidden="true" />,
+    ownerName: "Nina Santos",
+    ownerAvatar: RENEWAL_OWNERS[2].avatar,
+    segment: "Enterprise",
+    region: "North America",
+    renewalDate: "2026-09-09",
+    daysToRenewal: 127,
+    arr: 388000,
+    expansionPotential: 74000,
+    healthScore: 64,
+    usageTrend: [66, 67, 68, 68, 67, 66, 65, 64],
+    stage: "Preparing",
+    risk: "Medium",
+    invoiceStatus: "Finance review",
+    sponsorStatus: "Confirmed",
+    tags: ["Compliance review", "Migration timing"],
+  },
+]
+
+const REGIONS = ["North America", "EMEA", "APAC", "LATAM"] as const
+
+const TAG_VARIANTS = [
+  "Budget review",
+  "Champion shift",
+  "Upsell path",
+  "Contract cleanup",
+  "Security review",
+  "Procurement lane",
+  "Usage rebound",
+  "Expansion plan",
+] as const
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max)
+}
+
+function roundCurrency(value: number) {
+  return Math.round(value / 1000) * 1000
+}
+
+function addDays(isoDate: string, days: number) {
+  const nextDate = new Date(`${isoDate}T00:00:00`)
+  nextDate.setDate(nextDate.getDate() + days)
+
+  return nextDate.toISOString().slice(0, 10)
+}
+
+function shiftUsageTrend(values: number[], cycle: number, risk: RenewalRisk) {
+  const directionalOffset = risk === "Low" ? 1 : risk === "Critical" ? -2 : 0
+  const cycleOffset = ((cycle % 4) - 1.5) * 1.5
+
+  return values.map((value, index) =>
+    clamp(Math.round(value + directionalOffset * index + cycleOffset), 34, 96)
+  )
+}
+
+function resolveOwner(seed: IRenewalRecord, cycle: number, index: number) {
+  const baseOwnerIndex = RENEWAL_OWNERS.findIndex(
+    (owner) => owner.label === seed.ownerName
+  )
+
+  return RENEWAL_OWNERS[
+    (Math.max(baseOwnerIndex, 0) + cycle + index) % RENEWAL_OWNERS.length
+  ]
+}
+
+function resolveRisk(score: number, daysToRenewal: number): RenewalRisk {
+  if (score < 50 || daysToRenewal <= 14) return "Critical"
+  if (score < 62 || daysToRenewal <= 35) return "High"
+  if (score < 78) return "Medium"
+  return "Low"
+}
+
+function resolveStage(
+  baseStage: RenewalStage,
+  risk: RenewalRisk,
+  daysToRenewal: number
+): RenewalStage {
+  if (risk === "Critical" || daysToRenewal <= 14) return "Legal review"
+  if (risk === "High") return "Commercial review"
+  if (baseStage === "Committed" && risk === "Low") return "Committed"
+  return "Preparing"
+}
+
+function resolveInvoiceStatus(
+  baseStatus: RenewalInvoiceStatus,
+  risk: RenewalRisk
+): RenewalInvoiceStatus {
+  if (risk === "Critical") return "Blocked"
+  if (risk === "High") return "Finance review"
+  return baseStatus === "Blocked" ? "Finance review" : "Ready"
+}
+
+function resolveSponsorStatus(risk: RenewalRisk): RenewalSponsorStatus {
+  if (risk === "Critical") return "Missing"
+  if (risk === "High") return "At risk"
+  return "Confirmed"
+}
+
+function buildRenewalRecord(
+  seed: IRenewalRecord,
+  cycle: number,
+  index: number
+) {
+  if (cycle === 0) {
+    return seed
+  }
+
+  const owner = resolveOwner(seed, cycle, index)
+  const daysOffset = cycle * 14 + (index % 3) * 3
+  const daysToRenewal = seed.daysToRenewal + daysOffset
+  const healthScore = clamp(
+    seed.healthScore + (((cycle + index) % 5) - 2) * 4,
+    42,
+    92
+  )
+  const risk = resolveRisk(healthScore, daysToRenewal)
+  const stage = resolveStage(seed.stage, risk, daysToRenewal)
+  const invoiceStatus = resolveInvoiceStatus(seed.invoiceStatus, risk)
+  const sponsorStatus = resolveSponsorStatus(risk)
+  const arrFactor = 1 + cycle * 0.045 + ((index % 4) - 1.5) * 0.03
+  const expansionFactor =
+    seed.expansionPotential === 0
+      ? risk === "Low"
+        ? 0.12
+        : 0
+      : 1 + ((cycle % 3) - 1) * 0.12 + (risk === "Low" ? 0.14 : 0)
+
+  return {
+    ...seed,
+    id: `REN-${2000 + cycle * 100 + index * 3}`,
+    accountName: seed.accountName,
+    ownerName: owner.label,
+    ownerAvatar: owner.avatar,
+    segment:
+      RENEWAL_SEGMENT_ORDER[(cycle + index) % RENEWAL_SEGMENT_ORDER.length],
+    region: REGIONS[(cycle + index) % REGIONS.length],
+    renewalDate: addDays(seed.renewalDate, daysOffset),
+    daysToRenewal,
+    arr: roundCurrency(seed.arr * Math.max(0.68, arrFactor)),
+    expansionPotential: roundCurrency(
+      Math.max(0, seed.expansionPotential * expansionFactor)
+    ),
+    healthScore,
+    usageTrend: shiftUsageTrend(seed.usageTrend, cycle + index, risk),
+    stage,
+    risk,
+    invoiceStatus,
+    sponsorStatus,
+    tags: [seed.tags[0], TAG_VARIANTS[(cycle + index) % TAG_VARIANTS.length]],
+  }
+}
+
+export const RENEWAL_RECORDS: IRenewalRecord[] = Array.from(
+  { length: 2 },
+  (_, cycle) =>
+    RENEWAL_RECORD_SEEDS.map((seed, index) =>
+      buildRenewalRecord(seed, cycle, index)
+    )
+)
+  .flat()
+  .sort((left, right) => {
+    if (left.daysToRenewal !== right.daysToRenewal) {
+      return left.daysToRenewal - right.daysToRenewal
+    }
+
+    return right.arr - left.arr
+  })
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-3/components/renewal-selection-bar.tsx b/apps/web/src/components/blocks/data-grid-filtering-3/components/renewal-selection-bar.tsx
new file mode 100644
index 0000000..e24f8cd
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-3/components/renewal-selection-bar.tsx
@@ -0,0 +1,108 @@
+import { Badge } from "@/components/reui/badge"
+
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@evobgp/ui/components/select"
+
+import {
+  RENEWAL_STAGE_ORDER,
+  type RenewalOwnerOption,
+  type RenewalStage,
+} from "./data"
+
+interface RenewalSelectionBarProps {
+  selectedCount: number
+  ownerValue: string
+  stageValue: RenewalStage
+  ownerOptions: RenewalOwnerOption[]
+  onOwnerChange: (value: string) => void
+  onStageChange: (value: RenewalStage) => void
+  onApply: () => void
+  onClear: () => void
+}
+
+export function RenewalSelectionBar({
+  selectedCount,
+  ownerValue,
+  stageValue,
+  ownerOptions,
+  onOwnerChange,
+  onStageChange,
+  onApply,
+  onClear,
+}: RenewalSelectionBarProps) {
+  return (
+    <div className="bg-muted/30 flex flex-col gap-3 border-y px-5 py-3 lg:flex-row lg:items-center lg:justify-between">
+      <div className="flex min-w-0 items-center gap-2">
+        <Badge size="sm" variant="outline" radius="full">
+          {selectedCount} selected
+        </Badge>
+        <span className="text-muted-foreground text-xs">
+          Update owner or stage.
+        </span>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+        <Select
+          value={ownerValue}
+          onValueChange={(value) => {
+            if (!value) return
+            onOwnerChange(value)
+          }}
+        >
+          <SelectTrigger
+            size="sm"
+            className="w-full sm:w-[190px]"
+            aria-label="Assign owner"
+          >
+            <SelectValue placeholder="Assign owner" />
+          </SelectTrigger>
+          <SelectContent align="end">
+            <SelectGroup>
+              {ownerOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+
+        <Select
+          value={stageValue}
+          onValueChange={(value) => onStageChange(value as RenewalStage)}
+        >
+          <SelectTrigger
+            size="sm"
+            className="w-full sm:w-[190px]"
+            aria-label="Set stage"
+          >
+            <SelectValue placeholder="Set stage" />
+          </SelectTrigger>
+          <SelectContent align="end">
+            <SelectGroup>
+              {RENEWAL_STAGE_ORDER.map((stage) => (
+                <SelectItem key={stage} value={stage}>
+                  {stage}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+
+        <Button type="button" size="sm" variant="ghost" onClick={onClear}>
+          Deselect
+        </Button>
+        <Button type="button" size="sm" onClick={onApply}>
+          Apply updates
+        </Button>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-3/components/renewals-command-card.tsx b/apps/web/src/components/blocks/data-grid-filtering-3/components/renewals-command-card.tsx
new file mode 100644
index 0000000..8e69bd5
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-3/components/renewals-command-card.tsx
@@ -0,0 +1,63 @@
+import { type ReactNode } from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@evobgp/ui/components/card"
+
+interface RenewalsCommandCardProps {
+  title: string
+  description?: ReactNode
+  meta?: ReactNode
+  action?: ReactNode
+  children: ReactNode
+  footer?: ReactNode
+  className?: string
+  contentClassName?: string
+}
+
+export function RenewalsCommandCard({
+  title,
+  description,
+  meta,
+  action,
+  children,
+  footer,
+  className,
+  contentClassName,
+}: RenewalsCommandCardProps) {
+  return (
+    <Card className={cn("w-full gap-0 p-0", className)}>
+      {/* Header */}
+      <CardHeader className="flex flex-row items-center justify-between gap-4 border-b px-5 py-4">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <CardTitle>{title}</CardTitle>
+          {description ? (
+            <CardDescription className="text-xs">{description}</CardDescription>
+          ) : null}
+          {meta ? (
+            <div className="flex flex-wrap items-center gap-2">{meta}</div>
+          ) : null}
+        </div>
+        {action ? (
+          <CardAction className="self-center">{action}</CardAction>
+        ) : null}
+      </CardHeader>
+
+      {/* Content */}
+      <CardContent className={cn("p-0", contentClassName)}>
+        {children}
+      </CardContent>
+
+      {footer ? (
+        <CardFooter className="border-t px-5 py-3">{footer}</CardFooter>
+      ) : null}
+    </Card>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-3/page.tsx b/apps/web/src/components/blocks/data-grid-filtering-3/page.tsx
new file mode 100644
index 0000000..032282a
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-3/page.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+import { RenewalsCommandGridView } from "./components/data-grid-view"
+
+export function Page() {
+  const [isReady, setIsReady] = useState(false)
+
+  useEffect(() => {
+    setIsReady(true)
+  }, [])
+
+  return (
+    <main
+      className="mx-auto flex min-h-svh w-full max-w-7xl items-start justify-center p-8 pt-12"
+      aria-labelledby="page-heading"
+    >
+      <h1 id="page-heading" className="sr-only">
+        Renewals command data grid
+      </h1>
+      {isReady ? (
+        <RenewalsCommandGridView />
+      ) : (
+        <div
+          className="bg-card border-border w-full rounded-xl border"
+          style={{ height: 640 }}
+          aria-hidden="true"
+        />
+      )}
+    </main>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/empty-state-11/components/empty-state.tsx b/apps/web/src/components/blocks/empty-state-11/components/empty-state.tsx
new file mode 100644
index 0000000..0288d02
--- /dev/null
+++ b/apps/web/src/components/blocks/empty-state-11/components/empty-state.tsx
@@ -0,0 +1,58 @@
+import { IconStack } from "@/components/reui/icon-stack"
+
+import { Button } from "@evobgp/ui/components/button"
+import { Card, CardContent } from "@evobgp/ui/components/card"
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@evobgp/ui/components/empty"
+import { RouteIcon } from "lucide-react"
+
+export function EmptyState() {
+  return (
+    <div className="flex w-full max-w-4xl flex-col gap-4">
+      {/* Heading */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex flex-col gap-1">
+          <h2 className="text-xl font-semibold tracking-tight">
+            Routing Signals
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            Shape incoming work before it reaches the roadmap.
+          </p>
+        </div>
+
+        <Button type="button" size="sm" className="w-full sm:w-auto">
+          Add signal
+        </Button>
+      </div>
+
+      {/* Card */}
+      <Card className="bg-muted min-h-[330px] p-0 shadow-none">
+        <CardContent className="flex min-h-[330px] items-center justify-center p-6 sm:p-10">
+          <Empty className="max-w-md gap-5 bg-transparent p-0">
+            <EmptyHeader className="items-center gap-5 text-center">
+              <EmptyMedia className="mb-0">
+                <IconStack aria-hidden="true">
+                  <RouteIcon strokeWidth="1.9" aria-hidden="true" />
+                </IconStack>
+              </EmptyMedia>
+
+              <div className="flex flex-col items-center gap-2">
+                <EmptyTitle className="text-base font-semibold tracking-tight">
+                  Create signals to route new work
+                </EmptyTitle>
+                <EmptyDescription className="max-w-sm text-sm/relaxed">
+                  Define signals so every intake item starts with context.
+                </EmptyDescription>
+              </div>
+            </EmptyHeader>
+          </Empty>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/empty-state-11/page.tsx b/apps/web/src/components/blocks/empty-state-11/page.tsx
new file mode 100644
index 0000000..c64d3ac
--- /dev/null
+++ b/apps/web/src/components/blocks/empty-state-11/page.tsx
@@ -0,0 +1,15 @@
+import { EmptyState } from "./components/empty-state"
+
+export function Page() {
+  return (
+    <main
+      className="flex min-h-svh w-full items-center justify-center p-4 sm:p-8 md:p-12"
+      aria-labelledby="page-heading"
+    >
+      <h1 id="page-heading" className="sr-only">
+        Signal routing empty state
+      </h1>
+      <EmptyState />
+    </main>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/empty-state-3/components/empty-state.tsx b/apps/web/src/components/blocks/empty-state-3/components/empty-state.tsx
new file mode 100644
index 0000000..378a824
--- /dev/null
+++ b/apps/web/src/components/blocks/empty-state-3/components/empty-state.tsx
@@ -0,0 +1,55 @@
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@evobgp/ui/components/empty"
+import { ProjectsEmptyIllustration } from "./projects-empty-illustration"
+import { QuickStartTemplates } from "./quick-start-templates"
+import { PlusIcon, LayoutTemplateIcon } from "lucide-react"
+
+export function EmptyState() {
+  return (
+    <div className="flex min-h-[820px] w-full max-w-[52rem] flex-col items-center justify-center gap-24 py-8 sm:gap-32 md:py-12">
+      {/* Empty State */}
+      <Empty className="flex-none gap-7 rounded-none border-0 p-0 md:p-0">
+        <EmptyHeader className="max-w-[28rem] gap-4">
+          <EmptyMedia className="mb-0">
+            <ProjectsEmptyIllustration />
+          </EmptyMedia>
+
+          <div className="flex flex-col items-center gap-2">
+            <EmptyTitle className="text-2xl font-semibold tracking-tight">
+              No projects to show
+            </EmptyTitle>
+            <EmptyDescription className="max-w-[25rem] text-sm/relaxed">
+              Start a project from scratch or pick a template to launch your
+              first workspace and begin tracking tasks, goals, and progress.
+            </EmptyDescription>
+          </div>
+        </EmptyHeader>
+
+        <EmptyContent className="max-w-none gap-0">
+          <div className="flex w-full flex-wrap items-center justify-center gap-2">
+            <Button type="button">
+              <PlusIcon data-icon="inline-start" aria-hidden="true" />
+              New project
+            </Button>
+
+            <Button type="button" variant="outline">
+              <LayoutTemplateIcon data-icon="inline-start" aria-hidden="true" />
+              Explore templates
+            </Button>
+          </div>
+        </EmptyContent>
+      </Empty>
+
+      <div className="w-full max-w-md">
+        <QuickStartTemplates />
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/empty-state-3/components/projects-empty-illustration.tsx b/apps/web/src/components/blocks/empty-state-3/components/projects-empty-illustration.tsx
new file mode 100644
index 0000000..95b29bc
--- /dev/null
+++ b/apps/web/src/components/blocks/empty-state-3/components/projects-empty-illustration.tsx
@@ -0,0 +1,325 @@
+import { cn } from "@evobgp/ui/lib/utils"
+
+export function ProjectsEmptyIllustration({
+  variant = "hero",
+}: {
+  variant?: "hero" | "compact"
+}) {
+  const isCompact = variant === "compact"
+
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "relative isolate",
+        isCompact ? "h-11 w-20" : "h-32 w-[13.5rem]"
+      )}
+    >
+      {isCompact ? <CompactView /> : <HeroView />}
+    </div>
+  )
+}
+
+function HeroView() {
+  return (
+    <svg viewBox="0 0 220 140" fill="none" className="h-full w-full">
+      <line
+        x1="40"
+        y1="0"
+        x2="40"
+        y2="140"
+        stroke="currentColor"
+        strokeOpacity="0.05"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="110"
+        y1="0"
+        x2="110"
+        y2="140"
+        stroke="currentColor"
+        strokeOpacity="0.05"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="180"
+        y1="0"
+        x2="180"
+        y2="140"
+        stroke="currentColor"
+        strokeOpacity="0.05"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="0"
+        y1="25"
+        x2="220"
+        y2="25"
+        stroke="currentColor"
+        strokeOpacity="0.05"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="0"
+        y1="70"
+        x2="220"
+        y2="70"
+        stroke="currentColor"
+        strokeOpacity="0.05"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="0"
+        y1="115"
+        x2="220"
+        y2="115"
+        stroke="currentColor"
+        strokeOpacity="0.05"
+        strokeWidth="0.5"
+      />
+
+      {/* Cube A - bottom step */}
+      <polygon
+        points="89,58 110,70 110,94 89,106 68,94 68,70"
+        fill="none"
+        stroke="currentColor"
+        strokeOpacity="0.28"
+        strokeWidth="0.75"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="89"
+        y1="82"
+        x2="68"
+        y2="70"
+        stroke="currentColor"
+        strokeOpacity="0.18"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="89"
+        y1="82"
+        x2="110"
+        y2="70"
+        stroke="currentColor"
+        strokeOpacity="0.18"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="89"
+        y1="82"
+        x2="89"
+        y2="106"
+        stroke="currentColor"
+        strokeOpacity="0.18"
+        strokeWidth="0.5"
+      />
+
+      {/* Cube B - middle step */}
+      <polygon
+        points="110,46 131,58 131,82 110,94 89,82 89,58"
+        fill="none"
+        stroke="currentColor"
+        strokeOpacity="0.38"
+        strokeWidth="0.75"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="110"
+        y1="70"
+        x2="89"
+        y2="58"
+        stroke="currentColor"
+        strokeOpacity="0.25"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="110"
+        y1="70"
+        x2="131"
+        y2="58"
+        stroke="currentColor"
+        strokeOpacity="0.25"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="110"
+        y1="70"
+        x2="110"
+        y2="94"
+        stroke="currentColor"
+        strokeOpacity="0.25"
+        strokeWidth="0.5"
+      />
+
+      {/* Cube C - top step */}
+      <polygon
+        points="131,34 152,46 152,70 131,82 110,70 110,46"
+        fill="none"
+        stroke="currentColor"
+        strokeOpacity="0.5"
+        strokeWidth="0.75"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="131"
+        y1="58"
+        x2="110"
+        y2="46"
+        stroke="currentColor"
+        strokeOpacity="0.35"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="131"
+        y1="58"
+        x2="152"
+        y2="46"
+        stroke="currentColor"
+        strokeOpacity="0.35"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="131"
+        y1="58"
+        x2="131"
+        y2="82"
+        stroke="currentColor"
+        strokeOpacity="0.35"
+        strokeWidth="0.5"
+      />
+
+      {/* Floating diamond - ghost block suggesting growth */}
+      <path
+        d="M148 22 L155 26 L148 30 L141 26 Z"
+        fill="none"
+        stroke="currentColor"
+        strokeOpacity="0.18"
+        strokeWidth="0.5"
+        strokeDasharray="2 2"
+      />
+
+      {/* Accent dots */}
+      <circle cx="40" cy="70" r="1.5" fill="currentColor" opacity="0.1" />
+      <circle cx="180" cy="70" r="1.5" fill="currentColor" opacity="0.1" />
+      <circle cx="110" cy="25" r="1.5" fill="currentColor" opacity="0.07" />
+    </svg>
+  )
+}
+
+function CompactView() {
+  return (
+    <svg viewBox="0 0 80 44" fill="none" className="h-full w-full">
+      {/* Cube A - bottom step */}
+      <polygon
+        points="33,18 40,22 40,30 33,34 26,30 26,22"
+        fill="none"
+        stroke="currentColor"
+        strokeOpacity="0.28"
+        strokeWidth="0.75"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="33"
+        y1="26"
+        x2="26"
+        y2="22"
+        stroke="currentColor"
+        strokeOpacity="0.18"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="33"
+        y1="26"
+        x2="40"
+        y2="22"
+        stroke="currentColor"
+        strokeOpacity="0.18"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="33"
+        y1="26"
+        x2="33"
+        y2="34"
+        stroke="currentColor"
+        strokeOpacity="0.18"
+        strokeWidth="0.5"
+      />
+
+      {/* Cube B - middle step */}
+      <polygon
+        points="40,14 47,18 47,26 40,30 33,26 33,18"
+        fill="none"
+        stroke="currentColor"
+        strokeOpacity="0.38"
+        strokeWidth="0.75"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="40"
+        y1="22"
+        x2="33"
+        y2="18"
+        stroke="currentColor"
+        strokeOpacity="0.25"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="40"
+        y1="22"
+        x2="47"
+        y2="18"
+        stroke="currentColor"
+        strokeOpacity="0.25"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="40"
+        y1="22"
+        x2="40"
+        y2="30"
+        stroke="currentColor"
+        strokeOpacity="0.25"
+        strokeWidth="0.5"
+      />
+
+      {/* Cube C - top step */}
+      <polygon
+        points="47,10 54,14 54,22 47,26 40,22 40,14"
+        fill="none"
+        stroke="currentColor"
+        strokeOpacity="0.5"
+        strokeWidth="0.75"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="47"
+        y1="18"
+        x2="40"
+        y2="14"
+        stroke="currentColor"
+        strokeOpacity="0.35"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="47"
+        y1="18"
+        x2="54"
+        y2="14"
+        stroke="currentColor"
+        strokeOpacity="0.35"
+        strokeWidth="0.5"
+      />
+      <line
+        x1="47"
+        y1="18"
+        x2="47"
+        y2="26"
+        stroke="currentColor"
+        strokeOpacity="0.35"
+        strokeWidth="0.5"
+      />
+    </svg>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/empty-state-3/components/quick-start-templates.tsx b/apps/web/src/components/blocks/empty-state-3/components/quick-start-templates.tsx
new file mode 100644
index 0000000..6550c79
--- /dev/null
+++ b/apps/web/src/components/blocks/empty-state-3/components/quick-start-templates.tsx
@@ -0,0 +1,54 @@
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemMedia,
+  ItemTitle,
+} from "@evobgp/ui/components/item"
+import { KanbanIcon, ChevronRightIcon, TimerIcon } from "lucide-react"
+
+export function QuickStartTemplates() {
+  return (
+    <div className="flex w-full flex-col items-center gap-3">
+      <p className="text-muted-foreground text-sm">Quick starts</p>
+      {/* Grid */}
+      <div className="grid w-full gap-3 sm:grid-cols-2">
+        <Item
+          variant="outline"
+          render={<a href="#" aria-label="Task board" />}
+          className="hover:bg-muted/30 min-w-0 transition-colors"
+        >
+          <ItemMedia className="text-muted-foreground">
+            <KanbanIcon className="size-3.5" aria-hidden="true" />
+          </ItemMedia>
+
+          <ItemContent className="min-w-0">
+            <ItemTitle className="truncate">Task board</ItemTitle>
+          </ItemContent>
+
+          <ItemActions className="text-muted-foreground ml-auto">
+            <ChevronRightIcon className="size-4" aria-hidden="true" />
+          </ItemActions>
+        </Item>
+
+        <Item
+          variant="outline"
+          render={<a href="#" aria-label="Sprint tracker" />}
+          className="hover:bg-muted/30 min-w-0 transition-colors"
+        >
+          <ItemMedia className="text-muted-foreground">
+            <TimerIcon className="size-3.5" aria-hidden="true" />
+          </ItemMedia>
+
+          <ItemContent className="min-w-0">
+            <ItemTitle className="truncate">Sprint tracker</ItemTitle>
+          </ItemContent>
+
+          <ItemActions className="text-muted-foreground ml-auto">
+            <ChevronRightIcon className="size-4" aria-hidden="true" />
+          </ItemActions>
+        </Item>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/empty-state-3/page.tsx b/apps/web/src/components/blocks/empty-state-3/page.tsx
new file mode 100644
index 0000000..2a38cb1
--- /dev/null
+++ b/apps/web/src/components/blocks/empty-state-3/page.tsx
@@ -0,0 +1,9 @@
+import { EmptyState } from "./components/empty-state"
+
+export function Page() {
+  return (
+    <div className="flex min-h-svh w-full items-start justify-center p-4 sm:p-8 md:p-12">
+      <EmptyState />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/schedule-1/components/data.ts b/apps/web/src/components/blocks/schedule-1/components/data.ts
new file mode 100644
index 0000000..64135e2
--- /dev/null
+++ b/apps/web/src/components/blocks/schedule-1/components/data.ts
@@ -0,0 +1,380 @@
+import type { BadgeProps } from "@/components/reui/badge"
+
+export type EventStatus = "Upcoming" | "Cancelled" | "Pending" | "Completed"
+
+export interface Attendee {
+  id: string
+  name: string
+  avatar: string
+}
+
+export interface MockEvent {
+  id: string
+  title: string
+  status: EventStatus
+  date: string
+  time: string
+  location: string
+  attendees: Attendee[]
+}
+
+export interface ScheduleCalendarProps {
+  selected: Date | undefined
+  onSelect: (date: Date | undefined) => void
+  datesWithEvents?: Set<string>
+  className?: string
+}
+
+export type EventsFilter =
+  | "all"
+  | "upcoming"
+  | "completed"
+  | "cancelled"
+  | "pending"
+
+export interface EventsListProps {
+  selectedDate?: Date
+  filter?: EventsFilter
+  onFilterChange?: (filter: EventsFilter) => void
+  className?: string
+}
+
+export interface EventCardProps {
+  event: MockEvent
+}
+
+// ── Attendee pool ──
+
+const POOL: Attendee[] = [
+  {
+    id: "u01",
+    name: "Sarah Chen",
+    avatar:
+      "https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80",
+  },
+  {
+    id: "u02",
+    name: "Michael Torres",
+    avatar:
+      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=96&h=96&dpr=2&q=80",
+  },
+  {
+    id: "u03",
+    name: "Emma Wilson",
+    avatar:
+      "https://images.unsplash.com/photo-1485893086445-ed75865251e0?w=96&h=96&dpr=2&q=80",
+  },
+  {
+    id: "u04",
+    name: "James Park",
+    avatar:
+      "https://images.unsplash.com/photo-1463453091185-61582044d556?w=96&h=96&dpr=2&q=80",
+  },
+  {
+    id: "u05",
+    name: "Olivia Nguyen",
+    avatar:
+      "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=96&h=96&dpr=2&q=80",
+  },
+  {
+    id: "u06",
+    name: "Alex Johnson",
+    avatar:
+      "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=96&h=96&dpr=2&q=80",
+  },
+  {
+    id: "u07",
+    name: "Nina Patel",
+    avatar:
+      "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=96&h=96&dpr=2&q=80",
+  },
+  {
+    id: "u08",
+    name: "Ryan Murphy",
+    avatar:
+      "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=96&h=96&dpr=2&q=80",
+  },
+  {
+    id: "u09",
+    name: "Zoe Martinez",
+    avatar:
+      "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=96&h=96&dpr=2&q=80",
+  },
+  {
+    id: "u10",
+    name: "Tom Anderson",
+    avatar:
+      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=96&h=96&dpr=2&q=80",
+  },
+  {
+    id: "u11",
+    name: "Priya Sharma",
+    avatar:
+      "https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=96&h=96&dpr=2&q=80",
+  },
+  {
+    id: "u12",
+    name: "Lucas Ferreira",
+    avatar:
+      "https://images.unsplash.com/photo-1560250097-0b93528c311a?w=96&h=96&dpr=2&q=80",
+  },
+]
+
+// ── Event template pool ──
+
+const TEMPLATES: Array<{ title: string; location: string }> = [
+  { title: "Daily Standup", location: "Slack Huddle" },
+  { title: "Design System Review", location: "Figma / Remote" },
+  { title: "Sprint Planning", location: "Conference Room A" },
+  { title: "API Contract Review", location: "Remote" },
+  { title: "Investor Briefing", location: "22nd Floor Boardroom" },
+  { title: "Product Roadmap Review", location: "Conference Room B" },
+  { title: "UX Research Session", location: "Lab 2" },
+  { title: "Security Briefing", location: "Remote" },
+  { title: "Analytics Kick-off", location: "Google Meet" },
+  { title: "Backend Guild", location: "Meeting Room A" },
+  { title: "Frontend Perf Deep-dive", location: "Remote" },
+  { title: "Mobile QA Handoff", location: "Remote" },
+  { title: "Hiring Interview · Senior FE", location: "Zoom" },
+  { title: "Q2 OKR Planning", location: "Conference Room A" },
+  { title: "Tech Talk: Next.js 15", location: "Main Hall" },
+  { title: "Release Planning v3.0", location: "Zoom" },
+  { title: "Accessibility Workshop", location: "Lab 1" },
+  { title: "Partner API Workshop", location: "HQ · Floor 3" },
+  { title: "Quarterly All-Hands", location: "Main Hall" },
+  { title: "Customer Feedback Review", location: "Google Meet" },
+  { title: "Board Meeting", location: "HQ · Floor 3" },
+  { title: "Brand Identity Refresh", location: "Figma / Remote" },
+  { title: "Infrastructure Cost Review", location: "Remote" },
+  { title: "Database Migration Planning", location: "Remote" },
+  { title: "Figma Handoff · Billing", location: "Figma / Remote" },
+  { title: "Marketing Campaign Review", location: "Google Meet" },
+  { title: "Platform Architecture Review", location: "HQ · Floor 3" },
+  { title: "Payment Gateway Review", location: "Zoom" },
+  { title: "Email A/B Results 2", location: "Google Meet" },
+  { title: "Weekly Retro", location: "Slack Huddle" },
+  { title: "Security Audit Debrief", location: "Remote" },
+  { title: "Contractor Onboarding", location: "Zoom" },
+  { title: "Hiring Panel · Design", location: "Zoom" },
+  { title: "Growth Strategy Workshop", location: "HQ · Floor 2" },
+  { title: "i18n Sprint Kick-off", location: "Remote" },
+  { title: "Product Launch Q1", location: "1200 Innovation Way" },
+  { title: "Partnership Summit", location: "Grand Plaza Hotel" },
+  { title: "Tech Debt Triage", location: "Remote" },
+  { title: "1:1 with Engineering Lead", location: "Zoom" },
+  { title: "Release Sign-off", location: "Zoom" },
+]
+
+const TIMES = [
+  "8:00 am",
+  "8:30 am",
+  "9:00 am",
+  "9:30 am",
+  "10:00 am",
+  "10:30 am",
+  "11:00 am",
+  "11:30 am",
+  "12:00 pm",
+  "1:00 pm",
+  "1:30 pm",
+  "2:00 pm",
+  "2:30 pm",
+  "3:00 pm",
+  "3:30 pm",
+  "4:00 pm",
+  "4:30 pm",
+  "5:00 pm",
+  "5:30 pm",
+]
+
+// ── Calendar data ──
+
+export const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+]
+
+// Fixed demo clock: every "today" bucket derives from this reference date.
+const DEMO_REFERENCE_DATE_ISO = "2026-06-10"
+// Noon keeps UTC-based date keys (toISOString) on the same calendar day across timezones.
+export const DEMO_REFERENCE_DATE = new Date(
+  `${DEMO_REFERENCE_DATE_ISO}T12:00:00`
+)
+
+export const CURRENT_YEAR = DEMO_REFERENCE_DATE.getFullYear()
+export const YEARS = Array.from({ length: 21 }, (_, i) => CURRENT_YEAR - 10 + i)
+
+// ── Event card data ──
+
+export const STATUS_VARIANT: Record<EventStatus, BadgeProps["variant"]> = {
+  Upcoming: "info-light",
+  Cancelled: "destructive-light",
+  Pending: "warning-light",
+  Completed: "success-light",
+}
+
+export const MAX_VISIBLE = 3
+
+export function parseDateParts(dateStr: string) {
+  const d = new Date(dateStr + "T12:00:00")
+  return {
+    day: d.getDate().toString().padStart(2, "0"),
+    monthShort: d.toLocaleString("en-US", { month: "short" }),
+  }
+}
+
+export function initials(name: string) {
+  return name
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2)
+}
+
+// ── Events list data ──
+
+export const FILTER_ITEMS = [
+  { label: "All events", value: "all" },
+  { label: "Upcoming", value: "upcoming" },
+  { label: "Completed", value: "completed" },
+  { label: "Cancelled", value: "cancelled" },
+  { label: "Pending", value: "pending" },
+]
+
+export function toDateKey(date: Date): string {
+  return date.toISOString().slice(0, 10)
+}
+
+export function matchesFilter(event: MockEvent, filter: EventsFilter): boolean {
+  if (filter === "all") return true
+  return event.status.toLowerCase() === filter
+}
+
+// ── Mock event generation ──
+
+function hash(n: number): number {
+  let x = n
+  x = ((x >> 16) ^ x) * 0x45d9f3b
+  x = ((x >> 16) ^ x) * 0x45d9f3b
+  x = (x >> 16) ^ x
+  return Math.abs(x)
+}
+
+function toDateStr(d: Date): string {
+  return d.toISOString().slice(0, 10)
+}
+
+function buildMockEvents(ref: Date = DEMO_REFERENCE_DATE): MockEvent[] {
+  const Y = ref.getFullYear()
+  const M = ref.getMonth()
+  const todayNum = ref.getDate()
+  const daysInMonth = new Date(Y, M + 1, 0).getDate()
+
+  // Current week's Monday day-of-month (may be <= 0 → last month, skip)
+  const dow = ref.getDay() // 0=Sun … 6=Sat
+  const mondayNum = todayNum - (dow === 0 ? 6 : dow - 1)
+
+  const seed = Y * 100 + M // stable per month
+
+  const events: MockEvent[] = []
+
+  for (let dayNum = 1; dayNum <= daysInMonth; dayNum++) {
+    const isToday = dayNum === todayNum
+    const isMonday = dayNum === mondayNum
+    const dayHash = hash(seed + dayNum)
+
+    // Decide whether this day gets events
+    const guaranteed = isToday || isMonday
+    const randomlyChosen = dayHash % 10 < 4 // ~40 %
+    if (!guaranteed && !randomlyChosen) continue
+
+    // How many events (4-9)
+    const baseCount = isToday ? 5 : 4
+    const count = baseCount + (dayHash % (isToday ? 3 : 6))
+
+    const date = toDateStr(new Date(Y, M, dayNum, 12, 0, 0, 0))
+
+    // Status for each slot
+    const defaultStatus: EventStatus =
+      dayNum < todayNum ? "Completed" : "Upcoming"
+
+    // Spread events through the day using distinct templates and times
+    for (let i = 0; i < count; i++) {
+      const slot = hash(seed + dayNum * 37 + i * 13)
+      const template = TEMPLATES[(dayHash + i * 7) % TEMPLATES.length]
+      const time = TIMES[(slot + i * 3) % TIMES.length]
+
+      // Occasionally vary status for non-today days
+      let status: EventStatus = defaultStatus
+      if (!isToday) {
+        const r = (slot * 31 + i * 17) % 10
+        if (dayNum < todayNum) {
+          status = r < 2 ? "Cancelled" : "Completed"
+        } else {
+          status = r < 3 ? "Pending" : "Upcoming"
+        }
+      }
+
+      // Pick 2-6 attendees deterministically
+      const attendeeCount = 2 + (slot % 5)
+      const attendees = Array.from(
+        { length: attendeeCount },
+        (_, k) => POOL[(slot + k * 3) % POOL.length]
+      )
+      // Deduplicate
+      const seen = new Set<string>()
+      const uniqueAttendees = attendees.filter((a) => {
+        if (seen.has(a.id)) return false
+        seen.add(a.id)
+        return true
+      })
+
+      events.push({
+        id: `${Y}-${M}-${dayNum}-${i}`,
+        title: template.title,
+        status,
+        date,
+        time,
+        location: template.location,
+        attendees: uniqueAttendees,
+      })
+    }
+  }
+
+  return events
+}
+
+export const MOCK_EVENTS: MockEvent[] = buildMockEvents()
+
+export function getDatesWithEvents(events: MockEvent[]): Set<string> {
+  return new Set(events.map((e) => e.date))
+}
+
+export function getEventsForDate(
+  events: MockEvent[],
+  date: Date | undefined,
+  filter: "all" | "upcoming" | "completed" | "cancelled" | "pending"
+): MockEvent[] {
+  if (!date) return events
+  const dateStr = toDateStr(date)
+  let list = events.filter((e) => e.date === dateStr)
+  if (filter === "upcoming") list = list.filter((e) => e.status === "Upcoming")
+  else if (filter === "completed")
+    list = list.filter((e) => e.status === "Completed")
+  else if (filter === "cancelled")
+    list = list.filter((e) => e.status === "Cancelled")
+  else if (filter === "pending")
+    list = list.filter((e) => e.status === "Pending")
+  return list
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/schedule-1/components/event-card.tsx b/apps/web/src/components/blocks/schedule-1/components/event-card.tsx
new file mode 100644
index 0000000..a5b1772
--- /dev/null
+++ b/apps/web/src/components/blocks/schedule-1/components/event-card.tsx
@@ -0,0 +1,79 @@
+import { Badge } from "@/components/reui/badge"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+} from "@evobgp/ui/components/avatar"
+import { Item } from "@evobgp/ui/components/item"
+import {
+  initials,
+  MAX_VISIBLE,
+  parseDateParts,
+  STATUS_VARIANT,
+  type Attendee,
+  type EventCardProps,
+} from "./data"
+import { ClockIcon, MapPinIcon } from "lucide-react"
+
+function AttendeeGroup({ attendees }: { attendees: Attendee[] }) {
+  if (attendees.length === 0) return null
+  const visible = attendees.slice(0, MAX_VISIBLE)
+  const overflow = attendees.length - MAX_VISIBLE
+
+  return (
+    <AvatarGroup className="-space-x-1.5">
+      {visible.map((a) => (
+        <Avatar key={a.id} className="size-4!" title={a.name}>
+          <AvatarImage src={a.avatar} alt={a.name} />
+          <AvatarFallback className="text-[9px]">
+            {initials(a.name)}
+          </AvatarFallback>
+        </Avatar>
+      ))}
+      {overflow > 0 && (
+        <AvatarGroupCount className="size-4! text-[10px]">
+          +{overflow}
+        </AvatarGroupCount>
+      )}
+    </AvatarGroup>
+  )
+}
+
+export function EventCard({ event }: EventCardProps) {
+  const { day, monthShort } = parseDateParts(event.date)
+  const variant = STATUS_VARIANT[event.status]
+
+  return (
+    <Item variant="outline" size="xs" className="flex items-start gap-4 py-3">
+      <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+        <a
+          href="#"
+          className="text-foreground hover:text-primary text-sm leading-tight font-medium"
+        >
+          {event.title}
+        </a>
+
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+          <Badge variant={variant} size="sm">
+            {event.status}
+          </Badge>
+
+          <AttendeeGroup attendees={event.attendees} />
+
+          <span className="text-muted-foreground flex items-center gap-1 text-xs">
+            <ClockIcon className="size-3 shrink-0" aria-hidden="true" />
+            {monthShort} {day} · {event.time}
+          </span>
+
+          <span className="text-muted-foreground flex items-center gap-1 text-xs">
+            <MapPinIcon className="size-3 shrink-0" aria-hidden="true" />
+            {event.location}
+          </span>
+        </div>
+      </div>
+    </Item>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/schedule-1/components/events-list.tsx b/apps/web/src/components/blocks/schedule-1/components/events-list.tsx
new file mode 100644
index 0000000..bc6f87f
--- /dev/null
+++ b/apps/web/src/components/blocks/schedule-1/components/events-list.tsx
@@ -0,0 +1,135 @@
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import { Item, ItemMedia } from "@evobgp/ui/components/item"
+import { ScrollArea } from "@evobgp/ui/components/scroll-area"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@evobgp/ui/components/select"
+import {
+  FILTER_ITEMS,
+  matchesFilter,
+  MOCK_EVENTS,
+  toDateKey,
+  type EventsFilter,
+  type EventsListProps,
+  type MockEvent,
+} from "./data"
+import { EventCard } from "./event-card"
+import { PlusIcon, CalendarIcon } from "lucide-react"
+
+export function EventsList({
+  selectedDate,
+  filter = "all",
+  onFilterChange,
+}: EventsListProps) {
+  const dateKey = selectedDate ? toDateKey(selectedDate) : null
+
+  const events = MOCK_EVENTS.filter((event) => {
+    if (dateKey && event.date !== dateKey) return false
+    return matchesFilter(event, filter)
+  })
+
+  const headingLabel = selectedDate
+    ? selectedDate.toLocaleString("en-US", {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+      })
+    : "All Events"
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Header */}
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
+        {/* Heading */}
+        <div className="min-w-0">
+          <h2 className="text-foreground text-sm font-semibold">
+            {headingLabel}
+          </h2>
+          <p className="text-muted-foreground text-xs">
+            {events.length > 0
+              ? `${events.length} event${events.length !== 1 ? "s" : ""}`
+              : "No events found"}
+          </p>
+        </div>
+
+        {/* Filters */}
+        <div className="flex shrink-0 items-center gap-2 sm:w-auto">
+          <Select
+            value={filter}
+            onValueChange={(v) => onFilterChange?.(v as EventsFilter)}
+            items={FILTER_ITEMS}
+          >
+            <SelectTrigger size="sm">
+              <SelectValue placeholder="All events" />
+            </SelectTrigger>
+            <SelectContent>
+              {FILTER_ITEMS.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Button size="sm">
+            <PlusIcon className="size-4" aria-hidden="true" />
+            Add
+          </Button>
+        </div>
+      </div>
+
+      {/* Events */}
+      <div className="min-h-[320px]">
+        <div className="relative flex max-h-full">
+          <ScrollArea
+            className={cn(
+              "-mr-3.5 max-h-[320px] grow pr-3.5",
+              "**:data-[slot=scroll-area-thumb]:bg-foreground/15 **:data-[slot=scroll-area-thumb]:rounded-full",
+              "**:data-[slot=scroll-area-viewport]:mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))]",
+              "**:data-[slot=scroll-area-viewport]:mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))]",
+              "**:data-[slot=scroll-area-viewport]:mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))]",
+              "**:data-[slot=scroll-area-viewport]:mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))]",
+              "**:data-[slot=scroll-area-viewport]:[--fade-size:1.5rem]"
+            )}
+          >
+            {events.length === 0 ? (
+              <div className="flex flex-col items-center justify-center gap-3 py-16 text-center">
+                <Item
+                  render={<span />}
+                  className="bg-muted flex size-10 items-center justify-center rounded-full p-0"
+                >
+                  <ItemMedia variant="icon" className="size-auto">
+                    <CalendarIcon className="text-muted-foreground size-5" aria-hidden="true" />
+                  </ItemMedia>
+                </Item>
+                <div className="space-y-1">
+                  <p className="text-foreground text-sm font-medium">
+                    No events found
+                  </p>
+                  <p className="text-muted-foreground text-xs">
+                    {dateKey
+                      ? "Nothing scheduled for this day."
+                      : "Try changing the filter."}
+                  </p>
+                </div>
+              </div>
+            ) : (
+              <ul className="space-y-2.5">
+                {events.map((event: MockEvent) => (
+                  <li key={event.id}>
+                    <EventCard event={event} />
+                  </li>
+                ))}
+              </ul>
+            )}
+          </ScrollArea>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/schedule-1/components/schedule-calendar.tsx b/apps/web/src/components/blocks/schedule-1/components/schedule-calendar.tsx
new file mode 100644
index 0000000..46cc087
--- /dev/null
+++ b/apps/web/src/components/blocks/schedule-1/components/schedule-calendar.tsx
@@ -0,0 +1,190 @@
+import { useState } from "react"
+import { DayButton } from "react-day-picker"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import { Calendar, CalendarDayButton } from "@evobgp/ui/components/calendar"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@evobgp/ui/components/select"
+import {
+  DEMO_REFERENCE_DATE,
+  MONTHS,
+  YEARS,
+  type ScheduleCalendarProps,
+} from "./data"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
+// Weekday header highlight tracks the fixed demo clock, not the live date.
+const TODAY_WEEKDAY_NAME = DEMO_REFERENCE_DATE.toLocaleString("en-US", {
+  weekday: "short",
+}).toUpperCase()
+
+export function ScheduleCalendar({
+  selected,
+  onSelect,
+  datesWithEvents = new Set(),
+}: ScheduleCalendarProps) {
+  const [month, setMonth] = useState<Date>(selected ?? DEMO_REFERENCE_DATE)
+
+  const stepMonth = (delta: number) =>
+    setMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + delta, 1))
+
+  const handleMonthSelect = (value: string) => {
+    const i = MONTHS.indexOf(value)
+    if (i >= 0) setMonth(new Date(month.getFullYear(), i, 1))
+  }
+
+  const handleYearSelect = (value: string) => {
+    const y = parseInt(value, 10)
+    if (!isNaN(y)) setMonth(new Date(y, month.getMonth(), 1))
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 select-none">
+      {/* ── Custom header ── */}
+      <div className="flex w-full grow items-center justify-between gap-1">
+        {/* Prev month */}
+        <Button
+          variant="ghost"
+          size="sm"
+          className="size-7 shrink-0 p-0"
+          onClick={() => stepMonth(-1)}
+          aria-label="Previous month"
+        >
+          <ChevronLeftIcon className="size-3.5" aria-hidden="true" />
+        </Button>
+
+        {/* Month select */}
+        <Select
+          value={MONTHS[month.getMonth()]}
+          onValueChange={(value) => handleMonthSelect(value ?? "")}
+        >
+          <SelectTrigger size="sm" className="min-w-0 flex-1">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {MONTHS.map((m) => (
+              <SelectItem key={m} value={m}>
+                {m}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {/* Year select */}
+        <Select
+          value={String(month.getFullYear())}
+          onValueChange={(value) => handleYearSelect(value ?? "")}
+        >
+          <SelectTrigger size="sm" className="w-22 shrink-0">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {YEARS.map((y) => (
+              <SelectItem key={y} value={String(y)}>
+                {y}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {/* Next month */}
+        <Button
+          variant="ghost"
+          size="sm"
+          className="size-7 shrink-0 p-0"
+          onClick={() => stepMonth(1)}
+          aria-label="Next month"
+        >
+          <ChevronRightIcon className="size-3.5" aria-hidden="true" />
+        </Button>
+      </div>
+
+      {/* ── Calendar ── */}
+      <Calendar
+        mode="single"
+        selected={selected}
+        onSelect={onSelect}
+        month={month}
+        onMonthChange={setMonth}
+        showOutsideDays
+        hideNavigation
+        className="w-full bg-transparent p-0 md:[--cell-size:--spacing(11)]"
+        formatters={{
+          formatWeekdayName: (date) =>
+            date.toLocaleString("en-US", { weekday: "short" }).toUpperCase(),
+        }}
+        classNames={{
+          month_caption: "hidden",
+          nav: "hidden",
+          weekdays: "flex gap-1",
+          weekday:
+            "flex-1 flex items-center justify-center h-14 text-[0.65rem] font-medium text-muted-foreground",
+          week: "flex gap-1 mt-1",
+          day: "flex-1 aspect-square p-0",
+          day_button: cn(
+            "bg-muted/50 hover:bg-muted",
+            " rounded-md   ",
+            "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[selected-single=true]:hover:bg-primary data-[selected-single=true]:hover:text-primary-foreground!"
+          ),
+          outside: "opacity-60",
+          disabled: "opacity-60",
+          today: cn("bg-accent text-foreground", " rounded-md   "),
+        }}
+        components={{
+          Weekday: ({
+            children,
+            className: cls,
+            ...props
+          }: React.ComponentPropsWithoutRef<"th">) => {
+            const isToday = children === TODAY_WEEKDAY_NAME
+            return (
+              <th
+                scope="col"
+                className={cn(
+                  "flex h-6! flex-1 items-center justify-center rounded-md text-xs font-medium",
+                  isToday
+                    ? "bg-accent text-foreground!"
+                    : "text-muted-foreground",
+                  cls
+                )}
+                {...props}
+              >
+                {children}
+              </th>
+            )
+          },
+
+          DayButton: ({
+            children,
+            modifiers,
+            day,
+            ...props
+          }: React.ComponentProps<typeof DayButton>) => {
+            const dateKey = day.date.toISOString().slice(0, 10)
+            const hasEvents = !modifiers.outside && datesWithEvents.has(dateKey)
+
+            return (
+              <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+                {hasEvents ? (
+                  <span
+                    className="bg-primary text-primary-foreground in-data-[selected-single=true]:bg-primary-foreground! size-1 rounded-full"
+                    aria-hidden
+                  />
+                ) : (
+                  <span className="size-1" aria-hidden />
+                )}
+                {children}
+              </CalendarDayButton>
+            )
+          },
+        }}
+      />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/schedule-1/components/schedule.tsx b/apps/web/src/components/blocks/schedule-1/components/schedule.tsx
new file mode 100644
index 0000000..90da747
--- /dev/null
+++ b/apps/web/src/components/blocks/schedule-1/components/schedule.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { useState } from "react"
+import { Frame, FramePanel } from "@/components/reui/frame"
+
+import {
+  DEMO_REFERENCE_DATE,
+  EventsFilter,
+  getDatesWithEvents,
+  MOCK_EVENTS,
+} from "./data"
+import { EventsList } from "./events-list"
+import { ScheduleCalendar } from "./schedule-calendar"
+
+export function Schedule() {
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(
+    DEMO_REFERENCE_DATE
+  )
+  const [filter, setFilter] = useState<EventsFilter>("all")
+  const datesWithEvents = getDatesWithEvents(MOCK_EVENTS)
+
+  return (
+    <Frame className="w-full max-w-4xl">
+      <FramePanel className="flex flex-col p-0! lg:flex-row">
+        {/* Left - calendar */}
+        <div className="lg:border-border shrink-0 p-5 pt-5.5 lg:w-[370px] lg:border-r">
+          <ScheduleCalendar
+            selected={selectedDate}
+            onSelect={setSelectedDate}
+            datesWithEvents={datesWithEvents}
+          />
+        </div>
+
+        {/* Right - events */}
+        <div className="flex-1 p-5">
+          <EventsList
+            selectedDate={selectedDate}
+            filter={filter}
+            onFilterChange={setFilter}
+          />
+        </div>
+      </FramePanel>
+    </Frame>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/schedule-1/page.tsx b/apps/web/src/components/blocks/schedule-1/page.tsx
new file mode 100644
index 0000000..0b32a73
--- /dev/null
+++ b/apps/web/src/components/blocks/schedule-1/page.tsx
@@ -0,0 +1,9 @@
+import { Schedule } from "./components/schedule"
+
+export function Page() {
+  return (
+    <div className="flex w-full items-center justify-center p-10 md:p-20">
+      <Schedule />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-14/components/api-integrations-grid.tsx b/apps/web/src/components/blocks/settings-14/components/api-integrations-grid.tsx
new file mode 100644
index 0000000..2d76d54
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-14/components/api-integrations-grid.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { DataGrid } from "@/components/reui/data-grid/data-grid"
+import { DataGridPagination } from "@/components/reui/data-grid/data-grid-pagination"
+import { DataGridScrollArea } from "@/components/reui/data-grid/data-grid-scroll-area"
+import { DataGridTable } from "@/components/reui/data-grid/data-grid-table"
+import {
+  Frame,
+  FrameDescription,
+  FrameFooter,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from "@/components/reui/frame"
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type PaginationState,
+  type SortingState,
+  type VisibilityState,
+} from "@tanstack/react-table"
+import { toast } from "sonner"
+
+import { Button } from "@evobgp/ui/components/button"
+import { Switch } from "@evobgp/ui/components/switch"
+import { TooltipProvider } from "@evobgp/ui/components/tooltip"
+import { createColumns } from "./columns"
+import { API_INTEGRATIONS } from "./data"
+import { BriefcaseBusinessIcon } from "lucide-react"
+
+// ── Main component ──
+
+export function ApiIntegrationsGrid() {
+  const [rows, setRows] = useState(API_INTEGRATIONS)
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  })
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: "name", desc: false },
+  ])
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+
+  const pauseAll = rows.every((row) => !row.enabled)
+
+  const handleToggle = (id: string, enabled: boolean) => {
+    setRows((current) =>
+      current.map((row) => (row.id === id ? { ...row, enabled } : row))
+    )
+  }
+
+  const handlePauseAllChange = (checked: boolean) => {
+    const nextEnabled = !checked
+    setRows((current) =>
+      current.map((row) => ({ ...row, enabled: nextEnabled }))
+    )
+    toast.message(
+      checked ? "All integrations paused" : "Integrations resumed",
+      {
+        description: checked
+          ? "API traffic is temporarily disabled for every listed integration."
+          : "The listed integrations can receive traffic again.",
+      }
+    )
+  }
+
+  const columns = useMemo(() => createColumns({ onToggle: handleToggle }), [])
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    getRowId: (row) => row.id,
+    state: {
+      pagination,
+      sorting,
+      columnVisibility,
+    },
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  })
+
+  return (
+    <TooltipProvider delay={200}>
+      {/* Table */}
+      <DataGrid
+        table={table}
+        recordCount={rows.length}
+        tableLayout={{
+          columnsResizable: true,
+          columnsVisibility: true,
+          headerSticky: true,
+          dense: true,
+        }}
+      >
+        <Frame className="w-full max-w-6xl">
+          <FrameHeader className="flex-row items-center justify-between px-2! py-2.5!">
+            <div className="space-y-px">
+              <FrameTitle>API Integrations</FrameTitle>
+              <FrameDescription>
+                Oversee endpoints, key rotation, and traffic availability.
+              </FrameDescription>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2">
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground hidden text-sm md:inline">
+                  Pause all
+                </span>
+                <Switch
+                  checked={pauseAll}
+                  onCheckedChange={handlePauseAllChange}
+                  aria-label="Pause all integrations"
+                />
+              </div>
+
+              <Button
+                variant="outline"
+                onClick={() =>
+                  toast.info("Positions", {
+                    description:
+                      "Review which integration seats are currently assigned across the workspace.",
+                  })
+                }
+              >
+                <BriefcaseBusinessIcon aria-hidden="true" />
+                <span className="hidden md:inline">Positions</span>
+              </Button>
+            </div>
+          </FrameHeader>
+
+          <FramePanel className="p-0!">
+            <DataGridScrollArea>
+              <DataGridTable />
+            </DataGridScrollArea>
+          </FramePanel>
+
+          <FrameFooter className="px-2! py-2.5!">
+            <DataGridPagination />
+          </FrameFooter>
+        </Frame>
+      </DataGrid>
+    </TooltipProvider>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-14/components/columns.tsx b/apps/web/src/components/blocks/settings-14/components/columns.tsx
new file mode 100644
index 0000000..fb2db34
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-14/components/columns.tsx
@@ -0,0 +1,222 @@
+import { memo } from "react"
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+import { Badge } from "@/components/reui/badge"
+import { DataGridColumnHeader } from "@/components/reui/data-grid/data-grid-column-header"
+import {
+  DataGridTableRowSelect,
+  DataGridTableRowSelectAll,
+} from "@/components/reui/data-grid/data-grid-table"
+import type { ColumnDef, Row } from "@tanstack/react-table"
+import { toast } from "sonner"
+
+import { Button } from "@evobgp/ui/components/button"
+import { Item, ItemMedia } from "@evobgp/ui/components/item"
+import { Skeleton } from "@evobgp/ui/components/skeleton"
+import { Switch } from "@evobgp/ui/components/switch"
+import type { ApiIntegration } from "./data"
+import { CheckIcon, CopyIcon, SquarePenIcon } from "lucide-react"
+
+// ── Formatters ──
+
+function formatCalls(value: number) {
+  return new Intl.NumberFormat("en-US").format(value)
+}
+
+// ── Cell components ──
+
+const StatusSwitch = memo(function StatusSwitch({
+  row,
+  onToggle,
+}: {
+  row: Row<ApiIntegration>
+  onToggle: (id: string, enabled: boolean) => void
+}) {
+  return (
+    <Switch
+      checked={row.original.enabled}
+      onCheckedChange={(checked) => onToggle(row.original.id, checked)}
+      aria-label={`Toggle ${row.original.name}`}
+    />
+  )
+})
+
+const ApiKeyCell = memo(function ApiKeyCell({ value }: { value: string }) {
+  const { copyToClipboard, isCopied } = useCopyToClipboard({
+    onCopy: () => {
+      toast.success("API key copied", { description: value })
+    },
+  })
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      aria-label={isCopied ? "API key copied" : "Copy API key"}
+      onClick={() => copyToClipboard(value)}
+      title={value}
+    >
+      <Badge
+        variant="outline"
+        size="default"
+        className="max-w-full min-w-0 gap-1.5"
+      >
+        <span className="min-w-0 truncate font-mono tabular-nums">{value}</span>
+        {isCopied ? (
+          <CheckIcon className="text-green-500" aria-hidden="true" />
+        ) : (
+          <CopyIcon aria-hidden="true" />
+        )}
+      </Badge>
+    </Button>
+  )
+})
+
+const ActionsCell = memo(function ActionsCell({
+  row,
+}: {
+  row: Row<ApiIntegration>
+}) {
+  return (
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      aria-label={`Edit ${row.original.name}`}
+      onClick={() =>
+        toast.message("Edit integration", {
+          description: `Open ${row.original.name} settings in your configuration flow.`,
+        })
+      }
+    >
+      <SquarePenIcon aria-hidden="true" />
+    </Button>
+  )
+})
+
+// ── Column definitions ──
+
+export function createColumns({
+  onToggle,
+}: {
+  onToggle: (id: string, enabled: boolean) => void
+}): ColumnDef<ApiIntegration>[] {
+  return [
+    {
+      accessorKey: "select",
+      id: "select",
+      header: () => <DataGridTableRowSelectAll />,
+      cell: ({ row }) => <DataGridTableRowSelect row={row} />,
+      enableSorting: false,
+      enableHiding: false,
+      enableResizing: false,
+      size: 38,
+      meta: {
+        headerClassName: "ps-4!",
+        cellClassName: "ps-4!",
+      },
+    },
+    {
+      accessorKey: "name",
+      id: "name",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Integration" column={column} visibility />
+      ),
+      cell: ({ row }) => (
+        <div className="flex min-w-0 items-center gap-3">
+          <Item className="flex size-9 shrink-0 items-center justify-center border-0 p-0 [&_svg]:size-5">
+            <ItemMedia variant="icon" className="size-auto">
+              {row.original.logo}
+            </ItemMedia>
+          </Item>
+          <div className="flex min-w-0 flex-col gap-0.5">
+            <span className="text-foreground truncate text-sm font-medium">
+              {row.original.name}
+            </span>
+            <span className="text-muted-foreground truncate text-xs">
+              {row.original.provider} · {row.original.description}
+            </span>
+          </div>
+        </div>
+      ),
+      size: 450,
+      enableSorting: true,
+      enableHiding: true,
+      meta: {
+        headerTitle: "Integration",
+        skeleton: (
+          <div className="flex min-w-0 items-center gap-3">
+            <Skeleton className="size-9 shrink-0 rounded" />
+            <div className="flex min-w-0 flex-col gap-0.5">
+              <Skeleton className="h-3.5 w-28" />
+              <Skeleton className="h-3 w-40" />
+            </div>
+          </div>
+        ),
+      },
+    },
+    {
+      accessorKey: "apiKey",
+      id: "apiKey",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="API Key" column={column} visibility />
+      ),
+      cell: ({ row }) => <ApiKeyCell value={row.original.apiKey} />,
+      size: 300,
+      enableSorting: true,
+      enableHiding: true,
+      meta: {
+        headerTitle: "API Key",
+        skeleton: <Skeleton className="h-5 w-44 rounded-md" />,
+      },
+    },
+    {
+      accessorKey: "dailyCalls",
+      id: "dailyCalls",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Daily Calls" column={column} visibility />
+      ),
+      cell: ({ row }) => (
+        <span className="text-sm tabular-nums">
+          {formatCalls(row.original.dailyCalls)}
+        </span>
+      ),
+      size: 140,
+      enableSorting: true,
+      enableHiding: true,
+      meta: {
+        headerTitle: "Daily Calls",
+        skeleton: <Skeleton className="h-4 w-16" />,
+      },
+    },
+    {
+      accessorKey: "enabled",
+      id: "enabled",
+      header: ({ column }) => (
+        <DataGridColumnHeader title="Status" column={column} visibility />
+      ),
+      cell: ({ row }) => <StatusSwitch row={row} onToggle={onToggle} />,
+      size: 110,
+      enableSorting: true,
+      enableHiding: true,
+      meta: {
+        headerTitle: "Status",
+        skeleton: <Skeleton className="h-5 w-9 rounded-full" />,
+      },
+    },
+    {
+      accessorKey: "actions",
+      id: "actions",
+      header: "",
+      cell: ({ row }) => <ActionsCell row={row} />,
+      enableSorting: false,
+      enableHiding: false,
+      enableResizing: false,
+      size: 60,
+      meta: {
+        skeleton: <Skeleton className="size-7 rounded" />,
+        headerClassName: "",
+        cellClassName: "",
+      },
+    },
+  ]
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-14/components/data.tsx b/apps/web/src/components/blocks/settings-14/components/data.tsx
new file mode 100644
index 0000000..a68f253
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-14/components/data.tsx
@@ -0,0 +1,345 @@
+"use client"
+
+import type { ReactNode } from "react"
+
+import { Convex } from "@evobgp/ui/components/svgs/convex"
+import { Discord } from "@evobgp/ui/components/svgs/discord"
+import { Gemini } from "@evobgp/ui/components/svgs/gemini"
+import { Loom } from "@evobgp/ui/components/svgs/loom"
+import { Mintlify } from "@evobgp/ui/components/svgs/mintlify"
+import { N8n } from "@evobgp/ui/components/svgs/n8n"
+import { Neon } from "@evobgp/ui/components/svgs/neon"
+import { Slack } from "@evobgp/ui/components/svgs/slack"
+import { Stripe } from "@evobgp/ui/components/svgs/stripe"
+import { Supabase } from "@evobgp/ui/components/svgs/supabase"
+import { Zoom } from "@evobgp/ui/components/svgs/zoom"
+
+// ── Types ──
+
+export interface ApiIntegration {
+  id: string
+  name: string
+  provider: string
+  description: string
+  logo: ReactNode
+  apiKey: string
+  dailyCalls: number
+  enabled: boolean
+}
+
+// ── Data ──
+
+const logoClassName = "size-5"
+
+export const API_INTEGRATIONS: ApiIntegration[] = [
+  {
+    id: "auth-relay",
+    name: "User Auth System",
+    provider: "Supabase",
+    description: "Session webhooks and identity sync",
+    logo: <Supabase className={logoClassName} aria-hidden="true" />,
+    apiKey: "f6g7Z8h9R0TfUaSdTf",
+    dailyCalls: 15000,
+    enabled: false,
+  },
+  {
+    id: "social-mgr",
+    name: "Social Media Manager",
+    provider: "Slack",
+    description: "Content scheduling and post distribution",
+    logo: <Slack className={logoClassName} aria-hidden="true" />,
+    apiKey: "s1t2u3v4w5x6y7z8a9",
+    dailyCalls: 13000,
+    enabled: false,
+  },
+  {
+    id: "sms-notify",
+    name: "SMS Notification Service",
+    provider: "n8n",
+    description: "Transactional message delivery pipeline",
+    logo: <N8n className={logoClassName} aria-hidden="true" />,
+    apiKey: "t2u3v4w5x6y7z8a9b1",
+    dailyCalls: 19000,
+    enabled: false,
+  },
+  {
+    id: "ship-coord",
+    name: "Shipping Coordinator",
+    provider: "Convex",
+    description: "Carrier rate lookups and label generation",
+    logo: <Convex className={logoClassName} aria-hidden="true" />,
+    apiKey: "t6u7v8w9x0CvBnNlSc",
+    dailyCalls: 14000,
+    enabled: true,
+  },
+  {
+    id: "seo-scan",
+    name: "SEO Analyzer",
+    provider: "Mintlify",
+    description: "Site audit scores and keyword tracking",
+    logo: <Mintlify className={logoClassName} aria-hidden="true" />,
+    apiKey: "b1c2d3e4f5g6h7i8j9",
+    dailyCalls: 6000,
+    enabled: false,
+  },
+  {
+    id: "sales-fc",
+    name: "Sales Forecasting",
+    provider: "Stripe",
+    description: "Revenue trend projections and pipeline modeling",
+    logo: <Stripe className={logoClassName} aria-hidden="true" />,
+    apiKey: "z8a9b1c2d3e4f5g6h7",
+    dailyCalls: 11500,
+    enabled: false,
+  },
+  {
+    id: "quick-pay",
+    name: "Quick Pay Service",
+    provider: "Stripe",
+    description: "One-tap checkout and express payment links",
+    logo: <Stripe className={logoClassName} aria-hidden="true" />,
+    apiKey: "a1b2Xc3dY4ZxQvPlQp",
+    dailyCalls: 10000,
+    enabled: true,
+  },
+  {
+    id: "proj-mgmt",
+    name: "Project Management",
+    provider: "Loom",
+    description: "Sprint planning and milestone handoff recordings",
+    logo: <Loom className={logoClassName} aria-hidden="true" />,
+    apiKey: "v4w5x6y7z8a9b1c2d3",
+    dailyCalls: 14500,
+    enabled: false,
+  },
+  {
+    id: "pay-gate",
+    name: "Payment Gateway",
+    provider: "Stripe",
+    description: "Card processing and dispute lifecycle events",
+    logo: <Stripe className={logoClassName} aria-hidden="true" />,
+    apiKey: "1p2q3r4s5DfGhPgPy",
+    dailyCalls: 25000,
+    enabled: false,
+  },
+  {
+    id: "order-track",
+    name: "Order Tracking Sys",
+    provider: "Neon",
+    description: "Shipment status queries and delivery confirmations",
+    logo: <Neon className={logoClassName} aria-hidden="true" />,
+    apiKey: "e1E2gH3hB4iYtUvOtS",
+    dailyCalls: 9500,
+    enabled: false,
+  },
+  {
+    id: "ops-notifier",
+    name: "Ops Notifier",
+    provider: "Slack",
+    description: "High-priority workspace alerts",
+    logo: <Slack className={logoClassName} aria-hidden="true" />,
+    apiKey: "slk_live_p2d7n4w8v5q1m6r3",
+    dailyCalls: 9600,
+    enabled: false,
+  },
+  {
+    id: "workflow-bridge",
+    name: "Workflow Bridge",
+    provider: "n8n",
+    description: "Automation run intake and callbacks",
+    logo: <N8n className={logoClassName} aria-hidden="true" />,
+    apiKey: "n8n_live_v7x2m5q9a4c1p8d6",
+    dailyCalls: 13750,
+    enabled: true,
+  },
+  {
+    id: "community-sync",
+    name: "Community Sync",
+    provider: "Discord",
+    description: "Community reports and moderation escalations",
+    logo: <Discord className={logoClassName} aria-hidden="true" />,
+    apiKey: "dsc_live_m3q9v2k7r5n1x8c4",
+    dailyCalls: 6400,
+    enabled: false,
+  },
+  {
+    id: "review-clips",
+    name: "Review Clips",
+    provider: "Loom",
+    description: "Async review uploads and callback events",
+    logo: <Loom className={logoClassName} aria-hidden="true" />,
+    apiKey: "lom_live_r8t4m1c6p9v2x5q7",
+    dailyCalls: 7100,
+    enabled: false,
+  },
+  {
+    id: "meeting-webhooks",
+    name: "Meeting Webhooks",
+    provider: "Zoom",
+    description: "Recording ready and host events",
+    logo: <Zoom className={logoClassName} aria-hidden="true" />,
+    apiKey: "zom_live_q5n8r2m4v7c1p9d3",
+    dailyCalls: 11300,
+    enabled: true,
+  },
+  {
+    id: "edge-cache-sync",
+    name: "Edge Cache Sync",
+    provider: "Convex",
+    description: "State snapshots for frontend refreshes",
+    logo: <Convex className={logoClassName} aria-hidden="true" />,
+    apiKey: "cvx_live_t1p6m9q3r7v2x4c8",
+    dailyCalls: 15400,
+    enabled: false,
+  },
+  {
+    id: "support-routing",
+    name: "Support Routing",
+    provider: "Slack",
+    description: "Escalation queue dispatch automation",
+    logo: <Slack className={logoClassName} aria-hidden="true" />,
+    apiKey: "slk_live_x9c4m2p7v1q8r5n6",
+    dailyCalls: 8900,
+    enabled: true,
+  },
+  {
+    id: "revenue-monitor",
+    name: "Revenue Monitor",
+    provider: "Stripe",
+    description: "Charge anomalies and recovery alerts",
+    logo: <Stripe className={logoClassName} aria-hidden="true" />,
+    apiKey: "stp_live_c6v2m8q1r4n7p5x9",
+    dailyCalls: 12850,
+    enabled: false,
+  },
+  {
+    id: "member-audit",
+    name: "Member Audit",
+    provider: "Supabase",
+    description: "Role changes and access review logs",
+    logo: <Supabase className={logoClassName} aria-hidden="true" />,
+    apiKey: "sbp_live_n4r7m1q8x5c2v9p6",
+    dailyCalls: 5800,
+    enabled: false,
+  },
+  {
+    id: "retention-flows",
+    name: "Retention Flows",
+    provider: "n8n",
+    description: "Churn prevention automations and retries",
+    logo: <N8n className={logoClassName} aria-hidden="true" />,
+    apiKey: "n8n_live_m2v5q8p1c7r4x9d6",
+    dailyCalls: 14600,
+    enabled: true,
+  },
+  {
+    id: "content-gen",
+    name: "Content Generator",
+    provider: "Gemini",
+    description: "Draft generation and content summarization",
+    logo: <Gemini className={logoClassName} aria-hidden="true" />,
+    apiKey: "gem_live_k4r9m2q7v1p8x3n5",
+    dailyCalls: 8200,
+    enabled: false,
+  },
+  {
+    id: "db-replication",
+    name: "DB Replication",
+    provider: "Neon",
+    description: "Cross-region read replica synchronization",
+    logo: <Neon className={logoClassName} aria-hidden="true" />,
+    apiKey: "neo_live_p7x3m1q9v4r2n8c6",
+    dailyCalls: 22100,
+    enabled: true,
+  },
+  {
+    id: "docs-webhook",
+    name: "Docs Webhook",
+    provider: "Mintlify",
+    description: "Documentation deploy and page-view events",
+    logo: <Mintlify className={logoClassName} aria-hidden="true" />,
+    apiKey: "mnt_live_v2q8m5r1p9x4n7c3",
+    dailyCalls: 4300,
+    enabled: false,
+  },
+  {
+    id: "incident-bot",
+    name: "Incident Bot",
+    provider: "Discord",
+    description: "Automated incident threads and status page sync",
+    logo: <Discord className={logoClassName} aria-hidden="true" />,
+    apiKey: "dsc_live_r6n1m4q9v7p2x8c5",
+    dailyCalls: 3200,
+    enabled: true,
+  },
+  {
+    id: "video-analytics",
+    name: "Video Analytics",
+    provider: "Zoom",
+    description: "Participation heatmaps and engagement scoring",
+    logo: <Zoom className={logoClassName} aria-hidden="true" />,
+    apiKey: "zom_live_m8v3q1r5p9x2n4c7",
+    dailyCalls: 5600,
+    enabled: false,
+  },
+  {
+    id: "signup-funnel",
+    name: "Signup Funnel",
+    provider: "Supabase",
+    description: "Registration step tracking and drop-off alerts",
+    logo: <Supabase className={logoClassName} aria-hidden="true" />,
+    apiKey: "sbp_live_q3r7m9v2p1x5n8c4",
+    dailyCalls: 17800,
+    enabled: true,
+  },
+  {
+    id: "async-reviews",
+    name: "Async Reviews",
+    provider: "Loom",
+    description: "Code review recordings and feedback collection",
+    logo: <Loom className={logoClassName} aria-hidden="true" />,
+    apiKey: "lom_live_x5n2m8q4v1r9p7c3",
+    dailyCalls: 2900,
+    enabled: false,
+  },
+  {
+    id: "pipeline-monitor",
+    name: "Pipeline Monitor",
+    provider: "n8n",
+    description: "CI/CD build status and deployment tracking",
+    logo: <N8n className={logoClassName} aria-hidden="true" />,
+    apiKey: "n8n_live_r4v7m2q9p1x8n5c3",
+    dailyCalls: 16200,
+    enabled: true,
+  },
+  {
+    id: "real-time-sync",
+    name: "Real-time Sync",
+    provider: "Convex",
+    description: "Live data propagation for collaborative editors",
+    logo: <Convex className={logoClassName} aria-hidden="true" />,
+    apiKey: "cvx_live_m9q2r5v1p4x7n3c8",
+    dailyCalls: 19400,
+    enabled: false,
+  },
+  {
+    id: "invoice-relay",
+    name: "Invoice Relay",
+    provider: "Stripe",
+    description: "Automated invoice generation and delivery tracking",
+    logo: <Stripe className={logoClassName} aria-hidden="true" />,
+    apiKey: "stp_live_v3m8q1r6p9x2n4c7",
+    dailyCalls: 7800,
+    enabled: true,
+  },
+  {
+    id: "ai-summarizer",
+    name: "AI Summarizer",
+    provider: "Gemini",
+    description: "Meeting transcript distillation and action extraction",
+    logo: <Gemini className={logoClassName} aria-hidden="true" />,
+    apiKey: "gem_live_r1m5q8v3p9x7n2c4",
+    dailyCalls: 4100,
+    enabled: false,
+  },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-14/page.tsx b/apps/web/src/components/blocks/settings-14/page.tsx
new file mode 100644
index 0000000..912c270
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-14/page.tsx
@@ -0,0 +1,9 @@
+import { ApiIntegrationsGrid } from "./components/api-integrations-grid"
+
+export function Page() {
+  return (
+    <div className="flex min-h-svh w-full items-start justify-center p-4 sm:p-8 md:p-12">
+      <ApiIntegrationsGrid />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-3/components/color-picker.tsx b/apps/web/src/components/blocks/settings-3/components/color-picker.tsx
new file mode 100644
index 0000000..7f2af7a
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-3/components/color-picker.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import { useState } from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { FieldLegend, FieldSet } from "@evobgp/ui/components/field"
+import { ACCENT_COLORS } from "./data"
+import { CheckIcon } from "lucide-react"
+
+// ── Color Picker ──
+
+export function ColorPicker() {
+  const [selected, setSelected] = useState(ACCENT_COLORS[0].value)
+
+  return (
+    <FieldSet className="gap-0">
+      <FieldLegend className="sr-only">Accent color</FieldLegend>
+
+      {/* Actions */}
+      <div className="flex items-center gap-3">
+        {ACCENT_COLORS.map((color) => (
+          <button
+            key={color.value}
+            type="button"
+            aria-label={color.name}
+            onClick={() => setSelected(color.value)}
+            className={cn(
+              "flex size-7 items-center justify-center rounded-full transition-shadow",
+              selected === color.value &&
+                "ring-ring ring-offset-background ring-2 ring-offset-2"
+            )}
+            style={{ backgroundColor: color.value }}
+          >
+            {selected === color.value ? (
+              <CheckIcon className="size-3 text-white" aria-hidden="true" />
+            ) : null}
+          </button>
+        ))}
+      </div>
+    </FieldSet>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-3/components/data.tsx b/apps/web/src/components/blocks/settings-3/components/data.tsx
new file mode 100644
index 0000000..fad3846
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-3/components/data.tsx
@@ -0,0 +1,107 @@
+import { type ReactNode } from "react"
+
+// ── Types ──
+
+export type SelectOption = {
+  value: string
+  label: string
+}
+
+export type Preference = {
+  id: string
+  label: string
+  description: string
+  defaultChecked: boolean
+}
+
+export type AccentColorOption = {
+  name: string
+  value: string
+}
+
+export type SettingBadgeVariant =
+  | "primary-light"
+  | "destructive-light"
+  | "info-light"
+
+export type SettingFieldProps = {
+  title: string
+  description: string
+  badge?: { label: string; variant: SettingBadgeVariant }
+  children: ReactNode
+  last?: boolean
+}
+
+export type DateFormatOption = {
+  value: string
+  label: string
+}
+
+// ── Data ──
+
+export const DAYS: SelectOption[] = [
+  { value: "monday", label: "Monday" },
+  { value: "tuesday", label: "Tuesday" },
+  { value: "wednesday", label: "Wednesday" },
+  { value: "thursday", label: "Thursday" },
+  { value: "friday", label: "Friday" },
+  { value: "saturday", label: "Saturday" },
+  { value: "sunday", label: "Sunday" },
+]
+
+export const CURRENCIES: SelectOption[] = [
+  { value: "usd", label: "USD · US Dollar" },
+  { value: "eur", label: "EUR · Euro" },
+  { value: "gbp", label: "GBP · British Pound" },
+  { value: "jpy", label: "JPY · Japanese Yen" },
+]
+
+export const REGIONS: SelectOption[] = [
+  { value: "us", label: "United States" },
+  { value: "eu", label: "European Union" },
+  { value: "uk", label: "United Kingdom" },
+  { value: "jp", label: "Japan" },
+  { value: "au", label: "Australia" },
+]
+
+export const ACCENT_COLORS: AccentColorOption[] = [
+  { name: "Slate", value: "#64748b" },
+  { name: "Rose", value: "#f43f5e" },
+  { name: "Orange", value: "#f97316" },
+  { name: "Violet", value: "#8b5cf6" },
+  { name: "Emerald", value: "#10b981" },
+  { name: "Sky", value: "#0ea5e9" },
+]
+
+export const PREFERENCES: Preference[] = [
+  {
+    id: "keyboard-shortcuts",
+    label: "Enable keyboard shortcuts.",
+    description: "Use shortcuts to speed up your workflow.",
+    defaultChecked: true,
+  },
+  {
+    id: "spellcheck",
+    label: "Auto spell-check.",
+    description: "Highlight spelling errors in text fields.",
+    defaultChecked: true,
+  },
+  {
+    id: "compact-mode",
+    label: "Compact Mode.",
+    description: "Reduce spacing for a denser interface layout.",
+    defaultChecked: false,
+  },
+  {
+    id: "animations",
+    label: "Reduce animations.",
+    description: "Minimize motion effects throughout the UI.",
+    defaultChecked: false,
+  },
+]
+
+export const DATE_FORMAT_OPTIONS: DateFormatOption[] = [
+  { value: "mdy", label: "MM/DD/YYYY" },
+  { value: "dmy", label: "DD/MM/YYYY" },
+  { value: "ymd", label: "YYYY/MM/DD" },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-3/components/editor-preferences.tsx b/apps/web/src/components/blocks/settings-3/components/editor-preferences.tsx
new file mode 100644
index 0000000..5dcec1a
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-3/components/editor-preferences.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import { useState } from "react"
+
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@evobgp/ui/components/field"
+import { Switch } from "@evobgp/ui/components/switch"
+
+import { PREFERENCES } from "./data"
+
+// ── Editor Preferences ──
+
+export function EditorPreferences() {
+  const [values, setValues] = useState<Record<string, boolean>>(() =>
+    Object.fromEntries(PREFERENCES.map((p) => [p.id, p.defaultChecked]))
+  )
+
+  return (
+    <FieldSet className="w-full gap-3">
+      <FieldLegend className="sr-only">Editor preferences</FieldLegend>
+      {/* Description */}
+      <FieldDescription className="sr-only">
+        Configure editing behavior and interface density.
+      </FieldDescription>
+
+      {/* List */}
+      <FieldGroup className="gap-3">
+        {PREFERENCES.map((pref) => (
+          <Field key={pref.id} orientation="horizontal" className="gap-3">
+            <Switch
+              id={`settings-3-${pref.id}`}
+              checked={values[pref.id]}
+              onCheckedChange={(value) =>
+                setValues((prev) => ({ ...prev, [pref.id]: value }))
+              }
+              className="mt-0.5"
+            />
+
+            <FieldContent className="gap-0.5">
+              <FieldLabel htmlFor={`settings-3-${pref.id}`}>
+                {pref.label}
+              </FieldLabel>
+              <FieldDescription className="text-xs">
+                {pref.description}
+              </FieldDescription>
+            </FieldContent>
+          </Field>
+        ))}
+      </FieldGroup>
+    </FieldSet>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-3/components/general-settings.tsx b/apps/web/src/components/blocks/settings-3/components/general-settings.tsx
new file mode 100644
index 0000000..f6d26d1
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-3/components/general-settings.tsx
@@ -0,0 +1,265 @@
+import { useState } from "react"
+import {
+  Frame,
+  FrameDescription,
+  FrameFooter,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from "@/components/reui/frame"
+
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@evobgp/ui/components/field"
+import { Input } from "@evobgp/ui/components/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "@evobgp/ui/components/input-group"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@evobgp/ui/components/select"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@evobgp/ui/components/toggle-group"
+import { ColorPicker } from "./color-picker"
+import { CURRENCIES, DAYS, REGIONS } from "./data"
+import { EditorPreferences } from "./editor-preferences"
+import { SettingField } from "./setting-field"
+import { PlusIcon, UploadIcon, GlobeIcon, CircleDollarSignIcon } from "lucide-react"
+
+export function GeneralSettings() {
+  const [dateFormat, setDateFormat] = useState(["mdy"])
+  const [startOfWeek, setStartOfWeek] = useState("monday")
+  const [region, setRegion] = useState("us")
+  const [currency, setCurrency] = useState("usd")
+  const handleStartOfWeekChange = (value: string | null) => {
+    if (value !== null) {
+      setStartOfWeek(value)
+    }
+  }
+  const handleRegionChange = (value: string | null) => {
+    if (value !== null) {
+      setRegion(value)
+    }
+  }
+  const handleCurrencyChange = (value: string | null) => {
+    if (value !== null) {
+      setCurrency(value)
+    }
+  }
+
+  return (
+    <Frame className="w-full max-w-3xl">
+      <FrameHeader className="px-2! py-2.5!">
+        <FrameTitle>General Settings</FrameTitle>
+        <FrameDescription>Core app preferences.</FrameDescription>
+      </FrameHeader>
+
+      <FramePanel className="p-0">
+        <FieldGroup className="gap-0">
+          {/* ── Project name ── */}
+          <SettingField
+            title="Project name"
+            description="The display name for your project across the platform."
+            labelFor="settings-3-project-name"
+          >
+            <Input id="settings-3-project-name" defaultValue="Acme Dashboard" />
+          </SettingField>
+
+          {/* ── API endpoint ── */}
+          <SettingField
+            title="API endpoint"
+            description="Set the base URL for your project API."
+            badge={{ label: "Required", variant: "destructive-light" }}
+            labelFor="settings-3-api-endpoint"
+          >
+            <InputGroup className="w-full">
+              <InputGroupAddon align="inline-start">
+                <InputGroupText>https://</InputGroupText>
+              </InputGroupAddon>
+              <InputGroupInput
+                id="settings-3-api-endpoint"
+                defaultValue="api.acme.io"
+              />
+            </InputGroup>
+          </SettingField>
+
+          {/* ── Start of week ── */}
+          <SettingField
+            title="Start of week"
+            description="Choose which day marks the start of your week."
+            labelFor="settings-3-start-of-week"
+          >
+            <Select value={startOfWeek} onValueChange={handleStartOfWeekChange}>
+              <SelectTrigger id="settings-3-start-of-week" className="w-full">
+                <SelectValue>{getOptionLabel(DAYS, startOfWeek)}</SelectValue>
+              </SelectTrigger>
+
+              <SelectContent>
+                <SelectGroup>
+                  {DAYS.map((day) => (
+                    <SelectItem key={day.value} value={day.value}>
+                      {day.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </SettingField>
+
+          {/* ── Allowed origins ── */}
+          <SettingField
+            title="Allowed origins"
+            description="Define the trusted domains for CORS requests."
+          >
+            <div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
+              <Button variant="outline">
+                <PlusIcon aria-hidden="true" />
+                Add origin
+              </Button>
+
+              <Button variant="outline">
+                <UploadIcon aria-hidden="true" />
+                Import from file
+              </Button>
+            </div>
+          </SettingField>
+
+          {/* ── Accent color ── */}
+          <SettingField
+            title="Accent color"
+            description="Select a color to represent your brand."
+            badge={{ label: "Upgrade to Pro", variant: "primary-light" }}
+          >
+            <ColorPicker />
+          </SettingField>
+
+          {/* ── Region & currency ── */}
+          <SettingField
+            title="Region & currency"
+            description="Adjust your regional preferences and currency."
+            contentClassName="@md/field-group:w-[22rem]"
+          >
+            <FieldSet className="w-full gap-3">
+              <FieldLegend className="sr-only">Region and currency</FieldLegend>
+              <FieldDescription className="sr-only">
+                Regional and financial formatting preferences.
+              </FieldDescription>
+
+              <FieldGroup className="gap-3">
+                <Field>
+                  <FieldLabel htmlFor="settings-3-region">Region</FieldLabel>
+                  <Select value={region} onValueChange={handleRegionChange}>
+                    <SelectTrigger id="settings-3-region" className="w-full">
+                      <GlobeIcon aria-hidden="true" />
+                      <SelectValue>
+                        {getOptionLabel(REGIONS, region)}
+                      </SelectValue>
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectGroup>
+                        {REGIONS.map((region) => (
+                          <SelectItem key={region.value} value={region.value}>
+                            {region.label}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </Field>
+
+                <Field>
+                  <FieldLabel htmlFor="settings-3-currency">
+                    Currency
+                  </FieldLabel>
+                  <Select value={currency} onValueChange={handleCurrencyChange}>
+                    <SelectTrigger id="settings-3-currency" className="w-full">
+                      <CircleDollarSignIcon aria-hidden="true" />
+                      <SelectValue>
+                        {getOptionLabel(CURRENCIES, currency)}
+                      </SelectValue>
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectGroup>
+                        {CURRENCIES.map((currency) => (
+                          <SelectItem
+                            key={currency.value}
+                            value={currency.value}
+                          >
+                            {currency.label}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </Field>
+              </FieldGroup>
+            </FieldSet>
+          </SettingField>
+
+          {/* ── Date display format ── */}
+          <SettingField
+            title="Date display format"
+            description="Choose your preferred format for dates."
+          >
+            <ToggleGroup
+              multiple={false}
+              value={dateFormat}
+              onValueChange={(value) => {
+                if (value.length > 0) setDateFormat(value)
+              }}
+              variant="outline"
+              size="sm"
+              aria-label="Date display format"
+            >
+              <ToggleGroupItem value="mdy">MM/DD/YYYY</ToggleGroupItem>
+              <ToggleGroupItem value="dmy">DD/MM/YYYY</ToggleGroupItem>
+              <ToggleGroupItem value="ymd">YYYY/MM/DD</ToggleGroupItem>
+            </ToggleGroup>
+          </SettingField>
+
+          {/* ── Editor preferences ── */}
+          <SettingField
+            title="Editor preferences"
+            description="Adjust your editing environment and display options."
+            last
+            contentClassName="@md/field-group:w-[22rem]"
+          >
+            <EditorPreferences />
+          </SettingField>
+        </FieldGroup>
+      </FramePanel>
+
+      <FrameFooter className="flex flex-row justify-end gap-3">
+        <Button variant="outline">Reset</Button>
+        <Button>Save changes</Button>
+      </FrameFooter>
+    </Frame>
+  )
+}
+
+// ── Helper functions ──
+
+function getOptionLabel(
+  options: Array<{ value: string; label: string }>,
+  value: string
+) {
+  return options.find((option) => option.value === value)?.label ?? value
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-3/components/setting-field.tsx b/apps/web/src/components/blocks/settings-3/components/setting-field.tsx
new file mode 100644
index 0000000..0518031
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-3/components/setting-field.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import { type ComponentProps, type ReactNode } from "react"
+import { Badge } from "@/components/reui/badge"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+  FieldSeparator,
+  FieldTitle,
+} from "@evobgp/ui/components/field"
+
+interface SettingFieldProps {
+  title: string
+  description: string
+  badge?: {
+    label: string
+    variant: ComponentProps<typeof Badge>["variant"]
+  }
+  children: ReactNode
+  last?: boolean
+  labelFor?: string
+  contentClassName?: string
+}
+
+// ── Setting Field ──
+
+export function SettingField({
+  title,
+  description,
+  badge,
+  children,
+  last,
+  labelFor,
+  contentClassName,
+}: SettingFieldProps) {
+  return (
+    <>
+      <Field orientation="responsive" className="gap-4 px-4 py-4">
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5 @md/field-group:max-w-sm">
+          <div className="flex flex-wrap items-center gap-2">
+            {labelFor ? (
+              <FieldLabel htmlFor={labelFor}>{title}</FieldLabel>
+            ) : (
+              <FieldTitle>{title}</FieldTitle>
+            )}
+
+            {badge ? (
+              <Badge variant={badge.variant} size="sm">
+                {badge.label}
+              </Badge>
+            ) : null}
+          </div>
+
+          <FieldDescription className="text-xs">{description}</FieldDescription>
+        </div>
+
+        <FieldContent
+          className={cn("min-w-0 @md/field-group:w-78", contentClassName)}
+        >
+          {children}
+        </FieldContent>
+      </Field>
+
+      {!last ? <FieldSeparator /> : null}
+    </>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-3/page.tsx b/apps/web/src/components/blocks/settings-3/page.tsx
new file mode 100644
index 0000000..cffd7c0
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-3/page.tsx
@@ -0,0 +1,9 @@
+import { GeneralSettings } from "./components/general-settings"
+
+export function Page() {
+  return (
+    <div className="flex min-h-svh w-full items-start justify-center p-8 md:p-16">
+      <GeneralSettings />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/stats-4/components/data.ts b/apps/web/src/components/blocks/stats-4/components/data.ts
new file mode 100644
index 0000000..60e0d9a
--- /dev/null
+++ b/apps/web/src/components/blocks/stats-4/components/data.ts
@@ -0,0 +1,16 @@
+export const leadsData = {
+  newLeads: 54,
+  returningLeads: 198,
+  newPercent: 21.43,
+  returningPercent: 78.57,
+  topSource: "LinkedIn",
+  conversionRate: 12.8,
+}
+
+export const rangeOptions = [
+  { label: "All Time", value: "all-time" },
+  { label: "This Month", value: "this-month" },
+  { label: "Last Month", value: "last-month" },
+  { label: "This Year", value: "this-year" },
+  { label: "Last Year", value: "last-year" },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/stats-4/components/stats.tsx b/apps/web/src/components/blocks/stats-4/components/stats.tsx
new file mode 100644
index 0000000..48ff5ab
--- /dev/null
+++ b/apps/web/src/components/blocks/stats-4/components/stats.tsx
@@ -0,0 +1,131 @@
+"use client"
+
+import { Badge } from "@/components/reui/badge"
+import {
+  Frame,
+  FramePanel,
+  FrameTitle,
+} from "@/components/reui/frame"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Progress } from "@evobgp/ui/components/progress"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@evobgp/ui/components/select"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@evobgp/ui/components/tooltip"
+import { leadsData, rangeOptions } from "./data"
+import { InfoIcon } from "lucide-react"
+
+export function Stats() {
+  return (
+    <Frame className="w-full sm:max-w-md">
+      {/* Content */}
+      <FramePanel>
+        <div className="mb-6 flex items-center justify-between gap-3">
+          <FrameTitle>Leads Overview</FrameTitle>
+          <Select defaultValue="this-month" items={rangeOptions}>
+            <SelectTrigger className="w-32">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent
+              align="start"
+              alignItemWithTrigger={false}
+              className="w-32"
+            >
+              {rangeOptions.map((r) => (
+                <SelectItem key={r.value} value={r.value}>
+                  {r.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="mb-4 flex items-stretch gap-x-6">
+          <div className="flex flex-1 flex-col items-start gap-1">
+            <div className="mb-1 flex items-center gap-1">
+              <span className="text-foreground text-2xl font-bold">
+                {leadsData.newLeads}
+              </span>
+              <Badge variant="info-light">{leadsData.newPercent}%</Badge>
+            </div>
+            <span className="text-muted-foreground text-sm font-medium">
+              New leads
+            </span>
+            <div className="mt-1 w-full">
+              <Progress
+                value={leadsData.newPercent}
+                className="**:data-[slot=progress-track]:h-2.5"
+              />
+            </div>
+          </div>
+
+          <div className="border-muted-foreground/10 flex flex-1 flex-col items-start gap-1 border-s ps-6">
+            <div className="mb-1 flex items-center gap-1">
+              <span className="text-foreground text-2xl font-bold">
+                {leadsData.returningLeads}
+              </span>
+            </div>
+            <span className="text-muted-foreground text-sm font-medium">
+              Returning leads
+            </span>
+            <div className="mt-1 flex w-full gap-0.5">
+              {Array.from({ length: 30 }).map((_, i) => (
+                <div
+                  key={i}
+                  className={cn(
+                    "h-2.5 w-0.5 flex-1 rounded-md",
+                    i < Math.round((leadsData.returningPercent / 100) * 30)
+                      ? "bg-emerald-500"
+                      : "bg-muted"
+                  )}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="mb-1.5 flex items-center gap-x-4">
+          <div className="flex flex-1 flex-col gap-0.5">
+            <span className="text-muted-foreground text-xs">Top Source</span>
+            <span className="text-foreground text-sm font-medium">
+              {leadsData.topSource}
+            </span>
+          </div>
+          <div className="flex flex-1 flex-col gap-0.5 ps-7.5">
+            <span className="text-muted-foreground flex items-center gap-1 text-xs">
+              Conversion Rate
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <button
+                      type="button"
+                      aria-label="About Conversion Rate"
+                      className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 inline-flex cursor-help items-center rounded-full outline-none focus-visible:ring-[3px]"
+                    >
+                      <InfoIcon className="size-3.5" aria-hidden="true" />
+                    </button>
+                  }
+                />
+                <TooltipContent>
+                  <p>Percentage of leads converted to customers.</p>
+                </TooltipContent>
+              </Tooltip>
+            </span>
+            <span className="text-foreground text-sm font-medium">
+              {leadsData.conversionRate}%
+            </span>
+          </div>
+        </div>
+      </FramePanel>
+    </Frame>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/stats-4/page.tsx b/apps/web/src/components/blocks/stats-4/page.tsx
new file mode 100644
index 0000000..2261885
--- /dev/null
+++ b/apps/web/src/components/blocks/stats-4/page.tsx
@@ -0,0 +1,9 @@
+import { Stats } from "./components/stats"
+
+export function Page() {
+  return (
+    <div className="flex w-full items-center justify-center p-10 md:p-20">
+      <Stats />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/stats-6/components/data.ts b/apps/web/src/components/blocks/stats-6/components/data.ts
new file mode 100644
index 0000000..f2e0cc7
--- /dev/null
+++ b/apps/web/src/components/blocks/stats-6/components/data.ts
@@ -0,0 +1,35 @@
+export const rangeOptions = [
+  { label: "Q1 - 2024", value: "q1" },
+  { label: "Q2 - 2024", value: "q2" },
+  { label: "Q3 - 2024", value: "q3" },
+  { label: "Q4 - 2024", value: "q4" },
+]
+
+export const performance = [
+  { label: "Deals Closed", value: 27, trend: 12, trendDir: "up" as const },
+  { label: "Revenue", value: "$182.4k", trend: 6, trendDir: "up" as const },
+  { label: "Conversion", value: "72%", trend: 3, trendDir: "down" as const },
+]
+
+export const pipelineProgress = 76
+
+export const activity = [
+  {
+    text: "Closed deal with FinSight Inc.",
+    date: "Today",
+    state: "secondary",
+    color: "text-emerald-500",
+  },
+  {
+    text: "3 new leads added to Pipeline.",
+    date: "Yesterday",
+    state: "secondary",
+    color: "text-emerald-500",
+  },
+  {
+    text: "Follow-up scheduled.",
+    date: "2 days ago",
+    state: "destructive",
+    color: "text-destructive",
+  },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/stats-6/components/stats.tsx b/apps/web/src/components/blocks/stats-6/components/stats.tsx
new file mode 100644
index 0000000..2b68d6f
--- /dev/null
+++ b/apps/web/src/components/blocks/stats-6/components/stats.tsx
@@ -0,0 +1,186 @@
+"use client"
+
+import { Badge } from "@/components/reui/badge"
+import {
+  Frame,
+  FrameFooter,
+  FramePanel,
+} from "@/components/reui/frame"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+import { Progress } from "@evobgp/ui/components/progress"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@evobgp/ui/components/select"
+import { Separator } from "@evobgp/ui/components/separator"
+import { activity, performance, pipelineProgress, rangeOptions } from "./data"
+import { MoreHorizontalIcon, SettingsIcon, TriangleAlertIcon, Pin, Share2Icon, Trash2Icon, TrendingUp, TrendingDown, CircleCheckIcon } from "lucide-react"
+
+export function Stats() {
+  return (
+    <Frame className="w-full sm:max-w-md">
+      {/* Content */}
+      <FramePanel>
+        <div className="mb-6 flex items-start justify-between gap-3">
+          <div className="flex flex-col gap-px">
+            <h3 className="text-base font-semibold">Staff Performance</h3>
+            <span className="text-muted-foreground text-xs font-normal">
+              Sales Manager
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Select defaultValue="q3" items={rangeOptions}>
+              <SelectTrigger className="h-8! w-28">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent
+                align="start"
+                alignItemWithTrigger={false}
+                className="w-28"
+              >
+                {rangeOptions.map((r) => (
+                  <SelectItem key={r.value} value={r.value}>
+                    {r.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                render={<Button variant="outline" size="icon-sm" />}
+              >
+                <MoreHorizontalIcon aria-hidden="true" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" side="bottom" className="w-48">
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>
+                    <SettingsIcon aria-hidden="true" />
+                    Settings
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <TriangleAlertIcon aria-hidden="true" />
+                    Add Alert
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Pin aria-hidden="true" />
+                    Pin to Dashboard
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Share2Icon aria-hidden="true" />
+                    Share
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem variant="destructive">
+                    <Trash2Icon aria-hidden="true" />
+                    Remove
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        <div className="space-y-5">
+          <div className="grid grid-cols-3 gap-2">
+            {performance.map((item) => (
+              <div
+                className="flex flex-col items-start justify-start"
+                key={item.label}
+              >
+                <div className="text-foreground text-xl font-bold">
+                  {item.value}
+                </div>
+                <div className="text-muted-foreground mb-1 text-xs font-medium">
+                  {item.label}
+                </div>
+                <span
+                  className={cn(
+                    "flex items-center gap-0.5 text-xs font-semibold [&_svg]:h-3 [&_svg]:w-3",
+                    item.trendDir === "up"
+                      ? "text-emerald-500"
+                      : "text-destructive"
+                  )}
+                >
+                  {item.trendDir === "up" ? (
+                    <TrendingUp aria-hidden="true" />
+                  ) : (
+                    <TrendingDown aria-hidden="true" />
+                  )}
+                  {item.trendDir === "up" ? "+" : "-"}
+                  {item.trend}%
+                </span>
+              </div>
+            ))}
+          </div>
+
+          <Separator />
+
+          <div>
+            <div className="mb-2.5 flex items-center justify-between">
+              <span className="text-foreground text-sm font-medium">
+                Pipeline Progress
+              </span>
+              <span className="text-foreground text-xs font-semibold">
+                {pipelineProgress}%
+              </span>
+            </div>
+            <Progress
+              value={pipelineProgress}
+              className="**:data-[slot=progress-track]:h-2.5"
+            />
+          </div>
+
+          <Separator />
+
+          <div>
+            <div className="text-foreground mb-2.5 text-sm font-medium">
+              Recent Activity
+            </div>
+            <ul className="space-y-2">
+              {activity.map((a, i) => (
+                <li
+                  key={i}
+                  className="flex items-center justify-between gap-2.5 text-sm"
+                >
+                  <span className="flex items-center gap-2">
+                    <CircleCheckIcon className={cn("h-3.5 w-3.5", a.color)} aria-hidden="true" />
+                    <span className="text-foreground truncate text-xs">
+                      {a.text}
+                    </span>
+                  </span>
+                  <Badge
+                    variant={
+                      a.state === "secondary" ? "info-light" : "success-light"
+                    }
+                  >
+                    {a.date}
+                  </Badge>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </FramePanel>
+      {/* Footer */}
+      <FrameFooter className="flex-row items-center gap-2.5 p-2!">
+        <Button variant="outline" className="flex-1">
+          Schedule
+        </Button>
+        <Button className="flex-1">Full Report</Button>
+      </FrameFooter>
+    </Frame>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/stats-6/page.tsx b/apps/web/src/components/blocks/stats-6/page.tsx
new file mode 100644
index 0000000..2261885
--- /dev/null
+++ b/apps/web/src/components/blocks/stats-6/page.tsx
@@ -0,0 +1,9 @@
+import { Stats } from "./components/stats"
+
+export function Page() {
+  return (
+    <div className="flex w-full items-center justify-center p-10 md:p-20">
+      <Stats />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/dashboard/dashboard-frame-panel.tsx b/apps/web/src/components/dashboard/dashboard-frame-panel.tsx
index 4f47b88..f4d1e13 100644
--- a/apps/web/src/components/dashboard/dashboard-frame-panel.tsx
+++ b/apps/web/src/components/dashboard/dashboard-frame-panel.tsx
@@ -1,14 +1,12 @@
 import type { ReactNode } from 'react'
 
 import {
-  Frame,
-  FrameDescription,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from '@/components/reui/frame'
+  PanelCard,
+  panelCardContentFlushClassName,
+} from '@/components/panel-card'
 import { cn } from '@evobgp/ui/lib/utils'
 
+/** Card-surface panel for dashboard sections (replaces legacy Frame shell). */
 export function DashboardFramePanel({
   title,
   description,
@@ -24,20 +22,15 @@ export function DashboardFramePanel({
   className?: string
   contentClassName?: string
 }) {
-  const hasHeader = Boolean(title || description || actions)
-
   return (
-    <Frame stacked dense className={cn('h-full w-full', className)}>
-      {hasHeader ? (
-        <FrameHeader className="flex-row items-start justify-between gap-3 border-b border-(--frame-panel-border-color)">
-          <div className="min-w-0 space-y-0.5">
-            {title ? <FrameTitle>{title}</FrameTitle> : null}
-            {description ? <FrameDescription>{description}</FrameDescription> : null}
-          </div>
-          {actions ? <div className="shrink-0">{actions}</div> : null}
-        </FrameHeader>
-      ) : null}
-      <FramePanel className={cn('flex flex-col p-0!', contentClassName)}>{children}</FramePanel>
-    </Frame>
+    <PanelCard
+      title={title}
+      description={description}
+      actions={actions}
+      className={cn('h-full', className)}
+      contentClassName={cn(panelCardContentFlushClassName, contentClassName)}
+    >
+      {children}
+    </PanelCard>
   )
 }
diff --git a/apps/web/src/components/dashboard/dashboard-kpi-grid.tsx b/apps/web/src/components/dashboard/dashboard-kpi-grid.tsx
deleted file mode 100644
index c55f7c8..0000000
--- a/apps/web/src/components/dashboard/dashboard-kpi-grid.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import {
-  AlertTriangle,
-  Boxes,
-  ListChecks,
-  Network,
-  ServerCog,
-  Share2,
-} from 'lucide-react'
-import type { ReactNode } from 'react'
-
-import { Badge } from '@/components/reui/badge'
-import { Frame, FramePanel } from '@/components/reui/frame'
-import { cn } from '@evobgp/ui/lib/utils'
-import { Item, ItemMedia } from '@evobgp/ui/components/item'
-
-import { aggregateNetworkMetrics, runningJobCount } from '@/queries/overview'
-import type { JobRow, ModuleRow, PeerRow, SpeakerRow } from '@/types/api'
-
-type KpiCard = {
-  icon: ReactNode
-  iconClass: string
-  value: string
-  label: string
-  badge: ReactNode
-}
-
-function buildKpis({
-  modules,
-  peers,
-  speakers,
-  jobs,
-  loading,
-}: {
-  modules: ModuleRow[]
-  peers: PeerRow[]
-  speakers: SpeakerRow[]
-  jobs: JobRow[]
-  loading?: boolean
-}): KpiCard[] {
-  const enabledModules = modules.filter((m) => m.enabled !== false).length
-  const network = aggregateNetworkMetrics(peers, speakers)
-  const peersEnabled = network.peersEnabled
-  const bgpPct =
-    peersEnabled > 0 ? Math.round((network.peersEstablished / peersEnabled) * 100) : null
-  const running = runningJobCount(jobs)
-  const failedJobs = jobs.filter((j) =>
-    ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()),
-  ).length
-  const offlineSpeakers = Math.max(0, speakers.length - network.speakersOnline)
-  const riskCount = network.peersMismatch + failedJobs + offlineSpeakers
-
-  return [
-    {
-      icon: <Boxes aria-hidden />,
-      iconClass: 'text-primary',
-      value: loading ? '—' : `${enabledModules}/${modules.length || 0}`,
-      label: 'Модули активны',
-      badge: (
-        <Badge variant="primary-light" size="sm">
-          {loading ? '…' : `${modules.length} всего`}
-        </Badge>
-      ),
-    },
-    {
-      icon: <Network aria-hidden />,
-      iconClass: 'text-info',
-      value: loading || bgpPct === null ? '—' : `${bgpPct}%`,
-      label: 'BGP готовность',
-      badge: (
-        <Badge
-          variant={
-            bgpPct !== null && bgpPct >= 90
-              ? 'success-light'
-              : bgpPct !== null && bgpPct < 70
-                ? 'warning-light'
-                : 'outline'
-          }
-          size="sm"
-        >
-          {loading || bgpPct === null
-            ? 'нет включённых пиров'
-            : `${network.peersEstablished} установлено`}
-        </Badge>
-      ),
-    },
-    {
-      icon: <Share2 aria-hidden />,
-      iconClass: 'text-success',
-      value: loading ? '—' : `${network.peersEstablished}/${peersEnabled}`,
-      label: 'Пиры Established',
-      badge: (
-        <Badge variant="success-light" size="sm">
-          {loading ? '…' : `${network.peersTotal} в каталоге`}
-        </Badge>
-      ),
-    },
-    {
-      icon: <ServerCog aria-hidden />,
-      iconClass: 'text-warning',
-      value: loading ? '—' : `${network.speakersOnline}/${network.speakersTotal}`,
-      label: 'Спикеры online',
-      badge: (
-        <Badge
-          variant={network.speakersOnline === network.speakersTotal ? 'success-light' : 'warning-light'}
-          size="sm"
-        >
-          {loading ? '…' : 'live-снимок'}
-        </Badge>
-      ),
-    },
-    {
-      icon: <ListChecks aria-hidden />,
-      iconClass: 'text-focus',
-      value: loading ? '—' : String(running),
-      label: 'Активные задачи',
-      badge: (
-        <Badge variant={running > 0 ? 'info-light' : 'outline'} size="sm">
-          {loading ? '…' : `${jobs.length} в выборке`}
-        </Badge>
-      ),
-    },
-    {
-      icon: <AlertTriangle aria-hidden />,
-      iconClass: 'text-destructive',
-      value: loading ? '—' : String(riskCount),
-      label: 'Риски',
-      badge: (
-        <Badge variant={riskCount > 0 ? 'destructive-light' : 'success-light'} size="sm">
-          {loading
-            ? '…'
-            : riskCount > 0
-              ? `${failedJobs} задач · ${network.peersMismatch} расхождений`
-              : 'в норме'}
-        </Badge>
-      ),
-    },
-  ]
-}
-
-export function DashboardKpiGrid({
-  modules,
-  peers,
-  speakers,
-  jobs,
-  loading,
-}: {
-  modules: ModuleRow[]
-  peers: PeerRow[]
-  speakers: SpeakerRow[]
-  jobs: JobRow[]
-  loading?: boolean
-}) {
-  const cards = buildKpis({ modules, peers, speakers, jobs, loading })
-
-  return (
-    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6">
-      {cards.map((card) => (
-        <Frame key={card.label}>
-          <FramePanel className="flex flex-col items-start gap-4">
-            <Item
-              className={cn(
-                'border-background bg-muted flex size-10 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
-                card.iconClass,
-              )}
-            >
-              <ItemMedia variant="icon" className="size-auto">
-                {card.icon}
-              </ItemMedia>
-            </Item>
-            <div className="space-y-0.5">
-              <div className="text-foreground text-2xl leading-none font-bold tabular-nums">
-                {card.value}
-              </div>
-              <div className="text-muted-foreground text-sm font-medium">{card.label}</div>
-            </div>
-            {card.badge}
-          </FramePanel>
-        </Frame>
-      ))}
-    </div>
-  )
-}
diff --git a/apps/web/src/components/dashboard/dashboard-kpi-sparkline-row.tsx b/apps/web/src/components/dashboard/dashboard-kpi-sparkline-row.tsx
new file mode 100644
index 0000000..154086d
--- /dev/null
+++ b/apps/web/src/components/dashboard/dashboard-kpi-sparkline-row.tsx
@@ -0,0 +1,118 @@
+import { useMemo } from 'react'
+
+import { KpiSparklineCard, type KpiSparklineMetric } from '@/components/patterns/kpi-sparkline-card'
+import { kpiGridClassName } from '@/lib/ui-surface'
+import { aggregateNetworkMetrics, runningJobCount } from '@/queries/overview'
+import type { JobRow, ModuleRow, PeerRow, SpeakerRow } from '@/types/api'
+
+function syntheticSparkline(seed: number, points = 9): number[] {
+  const base = Math.max(4, seed)
+  return Array.from({ length: points }, (_, i) =>
+    Math.round(base * (0.82 + (i / points) * 0.18 + Math.sin(i + seed) * 0.04)),
+  )
+}
+
+function buildMetrics({
+  modules,
+  peers,
+  speakers,
+  jobs,
+  loading,
+}: {
+  modules: ModuleRow[]
+  peers: PeerRow[]
+  speakers: SpeakerRow[]
+  jobs: JobRow[]
+  loading?: boolean
+}): KpiSparklineMetric[] {
+  const enabledModules = modules.filter((m) => m.enabled !== false).length
+  const network = aggregateNetworkMetrics(peers, speakers)
+  const bgpPct =
+    network.peersEnabled > 0
+      ? Math.round((network.peersEstablished / network.peersEnabled) * 100)
+      : 0
+  const running = runningJobCount(jobs)
+  const failedJobs = jobs.filter((j) =>
+    ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()),
+  ).length
+
+  return [
+    {
+      id: 'bgp',
+      title: 'BGP готовность',
+      label: 'Established / включённые',
+      value: loading || network.peersEnabled === 0 ? '—' : `${bgpPct}%`,
+      delta: loading ? '…' : bgpPct >= 90 ? 'стабильно' : 'внимание',
+      deltaVariant: bgpPct >= 90 ? 'success-light' : bgpPct >= 50 ? 'warning-light' : 'destructive-light',
+      detail: loading ? '' : `${network.peersEstablished} сессий`,
+      tone: bgpPct >= 90 ? 'success' : bgpPct >= 50 ? 'warning' : 'danger',
+      sparkline: syntheticSparkline(bgpPct || 40),
+    },
+    {
+      id: 'modules',
+      title: 'Модули',
+      label: 'Активные списки',
+      value: loading ? '—' : `${enabledModules}`,
+      delta: loading ? '…' : `${modules.length} всего`,
+      deltaVariant: 'primary-light',
+      detail: loading ? '' : 'маршрутизация',
+      tone: 'info',
+      sparkline: syntheticSparkline(enabledModules || 3),
+    },
+    {
+      id: 'speakers',
+      title: 'Спикеры',
+      label: 'Online / всего',
+      value: loading ? '—' : `${network.speakersOnline}/${network.speakersTotal}`,
+      delta:
+        loading || network.speakersTotal === 0
+          ? '…'
+          : network.speakersOnline === network.speakersTotal
+            ? 'все online'
+            : 'частично',
+      deltaVariant:
+        network.speakersOnline === network.speakersTotal ? 'success-light' : 'warning-light',
+      detail: loading ? '' : 'live-снимок',
+      tone: network.speakersOnline === network.speakersTotal ? 'success' : 'warning',
+      sparkline: syntheticSparkline(network.speakersOnline || 2),
+    },
+    {
+      id: 'jobs',
+      title: 'Задачи',
+      label: 'Активные / ошибки',
+      value: loading ? '—' : String(running),
+      delta: loading ? '…' : failedJobs > 0 ? `${failedJobs} ошибок` : 'без сбоев',
+      deltaVariant: failedJobs > 0 ? 'destructive-light' : 'success-light',
+      detail: loading ? '' : `${jobs.length} в выборке`,
+      tone: failedJobs > 0 ? 'danger' : running > 0 ? 'info' : 'success',
+      sparkline: syntheticSparkline(running + failedJobs || 1),
+    },
+  ]
+}
+
+export function DashboardKpiSparklineRow({
+  modules,
+  peers,
+  speakers,
+  jobs,
+  loading,
+}: {
+  modules: ModuleRow[]
+  peers: PeerRow[]
+  speakers: SpeakerRow[]
+  jobs: JobRow[]
+  loading?: boolean
+}) {
+  const metrics = useMemo(
+    () => buildMetrics({ modules, peers, speakers, jobs, loading }),
+    [modules, peers, speakers, jobs, loading],
+  )
+
+  return (
+    <section aria-label="KPI обзора" className={kpiGridClassName}>
+      {metrics.map((metric) => (
+        <KpiSparklineCard key={metric.id} metric={metric} />
+      ))}
+    </section>
+  )
+}
diff --git a/apps/web/src/components/dashboard/dashboard-network-health.tsx b/apps/web/src/components/dashboard/dashboard-network-health.tsx
index a863c22..3efadc9 100644
--- a/apps/web/src/components/dashboard/dashboard-network-health.tsx
+++ b/apps/web/src/components/dashboard/dashboard-network-health.tsx
@@ -1,8 +1,7 @@
 import { useMemo, useState } from 'react'
 
-import { ChartBarStrip } from '@/components/analytics/chart-bar-strip'
 import { AnalyticsSegmentControl } from '@/components/analytics/analytics-segment-control'
-import { DashboardFramePanel } from '@/components/dashboard/dashboard-frame-panel'
+import { SegmentedProgressCard } from '@/components/patterns/segmented-progress-card'
 import { Badge } from '@/components/reui/badge'
 import {
   capacityUtilization,
@@ -40,9 +39,10 @@ export function DashboardNetworkHealth({
       : speakers.filter((s) => s.live?.agent_ok).length
   const total =
     mode === 'peers' ? peers.filter((p) => p.enabled !== false).length : speakers.length
+  const offline = Math.max(0, total - established)
 
   return (
-    <DashboardFramePanel
+    <SegmentedProgressCard
       title="Загрузка BGP"
       description="Утилизация сессий по пирам и спикерам"
       actions={
@@ -55,42 +55,26 @@ export function DashboardNetworkHealth({
           ]}
         />
       }
-    >
-      <div className="flex flex-col gap-4 px-4 py-4">
-        <div className="flex flex-wrap items-end justify-between gap-3">
-          <div className="space-y-1">
-            <p className="text-3xl font-semibold tracking-tight tabular-nums">
-              {loading ? '—' : `${utilization}%`}
-            </p>
-            <p className="text-muted-foreground text-sm">
-              {loading ? '…' : `${established} / ${total} ${mode === 'peers' ? 'установлено' : 'в сети'}`}
-            </p>
-          </div>
-          <Badge variant="outline" radius="full" className="h-7 gap-1.5 px-2.5 text-xs">
-            <span className="font-semibold tabular-nums">{loading ? '—' : queued}</span>
-            <span>активных задач</span>
+      primary={{
+        value: loading ? '—' : `${utilization}%`,
+        label: mode === 'peers' ? 'Утилизация пиров' : 'Спикеры online',
+        percent: loading ? 0 : utilization,
+        badge: (
+          <Badge variant="outline" radius="full" className="h-6 px-2 text-[10px]">
+            {loading ? '…' : `${established}/${total}`}
           </Badge>
-        </div>
-
-        {loading ? (
-          <div className="text-muted-foreground flex h-36 items-center justify-center text-sm">
-            Загрузка…
-          </div>
-        ) : (
-          <ChartBarStrip bars={bars} />
-        )}
-
-        <div className="text-muted-foreground flex flex-wrap gap-3 text-xs">
-          <span className="flex items-center gap-1.5">
-            <span className="bg-chart-3 size-2 rounded-full" aria-hidden />
-            Ниже порога
-          </span>
-          <span className="flex items-center gap-1.5">
-            <span className="bg-chart-2 size-2 rounded-full" aria-hidden />
-            Установлено / online
-          </span>
-        </div>
-      </div>
-    </DashboardFramePanel>
+        ),
+      }}
+      secondary={{
+        value: loading ? '—' : offline,
+        label: mode === 'peers' ? 'Не Established' : 'Offline',
+        percent: total > 0 ? Math.round((offline / total) * 100) : 0,
+      }}
+      footer={
+        loading
+          ? 'Загрузка…'
+          : `Активных задач: ${queued} · сегментов в графике: ${bars.length}`
+      }
+    />
   )
 }
diff --git a/apps/web/src/components/dashboard/dashboard-operations-breakdown.tsx b/apps/web/src/components/dashboard/dashboard-operations-breakdown.tsx
index f43b3b5..620389b 100644
--- a/apps/web/src/components/dashboard/dashboard-operations-breakdown.tsx
+++ b/apps/web/src/components/dashboard/dashboard-operations-breakdown.tsx
@@ -2,12 +2,14 @@ import { useMemo, useState } from 'react'
 
 import { ChartDonutMetric } from '@/components/analytics/chart-donut-metric'
 import { AnalyticsSegmentControl } from '@/components/analytics/analytics-segment-control'
-import { DashboardFramePanel } from '@/components/dashboard/dashboard-frame-panel'
+import { PanelCard } from '@/components/panel-card'
+import { Separator } from '@evobgp/ui/components/separator'
 import { jobStatusBreakdown, moduleTypeBreakdown } from '@/lib/metrics'
 import type { JobRow, ModuleRow } from '@/types/api'
 
 type FlowMode = 'jobs' | 'modules'
 
+/** chart-13 inspired donut breakdown (Card surface). */
 export function DashboardOperationsBreakdown({
   jobs,
   modules,
@@ -28,7 +30,7 @@ export function DashboardOperationsBreakdown({
   const centerLabel = mode === 'jobs' ? 'Задачи' : 'Модули'
 
   return (
-    <DashboardFramePanel
+    <PanelCard
       title="Поток операций"
       description="Распределение задач и типов модулей"
       actions={
@@ -41,20 +43,45 @@ export function DashboardOperationsBreakdown({
           ]}
         />
       }
+      className="h-full"
     >
-      <div className="px-4 py-4">
+      <div className="p-4">
         {loading ? (
           <div className="text-muted-foreground flex h-48 items-center justify-center text-sm">
             Загрузка…
           </div>
         ) : (
-          <ChartDonutMetric
-            slices={slices}
-            centerLabel={centerLabel}
-            centerValue={total}
-          />
+          <>
+            <ChartDonutMetric slices={slices} centerLabel={centerLabel} centerValue={total} />
+            {slices.length > 0 ? (
+              <ul className="mt-4 flex min-w-0 flex-col">
+                {slices.map((slice, index) => {
+                  const pct = total > 0 ? ((slice.count / total) * 100).toFixed(1) : '0'
+                  return (
+                    <li key={slice.key}>
+                      <div className="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3 py-2">
+                        <div className="flex min-w-0 items-center gap-2.5">
+                          <span
+                            aria-hidden
+                            className="border-background size-3 shrink-0 rounded-full border-2 shadow-sm"
+                            style={{ backgroundColor: slice.color }}
+                          />
+                          <span className="truncate text-sm font-medium">{slice.label}</span>
+                        </div>
+                        <span className="text-sm font-medium tabular-nums">{slice.count}</span>
+                        <span className="text-muted-foreground/70 w-10 text-right text-xs tabular-nums">
+                          {pct}%
+                        </span>
+                      </div>
+                      {index < slices.length - 1 ? <Separator className="w-auto" /> : null}
+                    </li>
+                  )
+                })}
+              </ul>
+            ) : null}
+          </>
         )}
       </div>
-    </DashboardFramePanel>
+    </PanelCard>
   )
 }
diff --git a/apps/web/src/components/dashboard/dashboard-quick-link-card.tsx b/apps/web/src/components/dashboard/dashboard-quick-link-card.tsx
index a4bb57e..00fdb1c 100644
--- a/apps/web/src/components/dashboard/dashboard-quick-link-card.tsx
+++ b/apps/web/src/components/dashboard/dashboard-quick-link-card.tsx
@@ -3,7 +3,7 @@ import { ChevronRight } from 'lucide-react'
 import type { ReactNode } from 'react'
 
 import { CardDotField } from '@/components/dashboard/card-dot-field'
-import { FramePanel } from '@/components/reui/frame'
+import { Card, CardContent } from '@evobgp/ui/components/card'
 import { cn } from '@evobgp/ui/lib/utils'
 import { Item, ItemMedia } from '@evobgp/ui/components/item'
 
@@ -31,7 +31,8 @@ export function DashboardQuickLinkCard({
       className="group block h-full rounded-[inherit] focus-visible:outline-none"
       aria-label={`${label}: ${description}`}
     >
-      <FramePanel
+      <Card
+        size="sm"
         className={cn(
           'relative isolate h-full overflow-hidden transition-colors',
           'hover:border-foreground/20',
@@ -39,7 +40,7 @@ export function DashboardQuickLinkCard({
         )}
       >
         <CardDotField className="text-muted-foreground [mask-image:linear-gradient(to_bottom_left,black,transparent_60%)]" />
-        <div className="relative z-10 flex h-full flex-col gap-7.5">
+        <CardContent className="relative z-10 flex h-full flex-col gap-7.5 p-5">
           <Item
             className={cn(
               'border-background flex size-11 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-5',
@@ -61,8 +62,8 @@ export function DashboardQuickLinkCard({
               />
             </span>
           </div>
-        </div>
-      </FramePanel>
+        </CardContent>
+      </Card>
     </Link>
   )
 }
diff --git a/apps/web/src/components/dashboard/dashboard-quick-links.tsx b/apps/web/src/components/dashboard/dashboard-quick-links.tsx
index ae6eb61..6ebe194 100644
--- a/apps/web/src/components/dashboard/dashboard-quick-links.tsx
+++ b/apps/web/src/components/dashboard/dashboard-quick-links.tsx
@@ -2,12 +2,7 @@ import { Gauge, Network, Play, Plus, Share2, Tags } from 'lucide-react'
 import type { ReactNode } from 'react'
 
 import { DashboardQuickLinkCard } from '@/components/dashboard/dashboard-quick-link-card'
-import {
-  Frame,
-  FrameDescription,
-  FrameHeader,
-  FrameTitle,
-} from '@/components/reui/frame'
+import { PanelCard } from '@/components/panel-card'
 
 type QuickLink = {
   icon: ReactNode
@@ -69,16 +64,15 @@ const LINKS: QuickLink[] = [
 
 export function DashboardQuickLinks() {
   return (
-    <Frame className="@container w-full">
-      <FrameHeader>
-        <FrameTitle>Быстрые действия</FrameTitle>
-        <FrameDescription>Частые переходы к настройке и деплою</FrameDescription>
-      </FrameHeader>
-      <div className="grid gap-1 sm:grid-cols-2 xl:grid-cols-3">
-        {LINKS.map((link) => (
-          <DashboardQuickLinkCard key={link.label} {...link} />
-        ))}
-      </div>
-    </Frame>
+    <PanelCard
+      title="Быстрые действия"
+      description="Частые переходы к настройке и деплою"
+      className="@container w-full"
+      contentClassName="grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3"
+    >
+      {LINKS.map((link) => (
+        <DashboardQuickLinkCard key={link.label} {...link} />
+      ))}
+    </PanelCard>
   )
 }
diff --git a/apps/web/src/components/layout/app-shell.tsx b/apps/web/src/components/layout/app-shell.tsx
index 85169e9..4eadfeb 100644
--- a/apps/web/src/components/layout/app-shell.tsx
+++ b/apps/web/src/components/layout/app-shell.tsx
@@ -36,16 +36,21 @@ import {
   BreadcrumbSeparator,
 } from '@evobgp/ui/components/breadcrumb'
 import { Separator } from '@evobgp/ui/components/separator'
+import { TooltipProvider } from '@evobgp/ui/components/tooltip'
 
 import { Link, useRouterState } from '@tanstack/react-router'
-import type { ComponentType, ReactNode } from 'react'
+import type { ComponentType, CSSProperties, ReactNode } from 'react'
 
+import { CommandPalette, type CommandPaletteItem } from '@/components/layout/command-palette'
+import { SystemMonitorPopover } from '@/components/layout/system-monitor-popover'
 import { ModeToggle } from '@/components/mode-toggle'
 
 interface NavItem {
   to: string
   label: string
   icon: ComponentType<{ className?: string }>
+  description?: string
+  search?: Record<string, string>
 }
 
 interface NavGroup {
@@ -56,31 +61,38 @@ interface NavGroup {
 const NAV_GROUPS: NavGroup[] = [
   {
     label: 'Обзор',
-    items: [{ to: '/dashboard', label: 'Панель', icon: LayoutDashboard }],
+    items: [
+      {
+        to: '/dashboard',
+        label: 'Панель',
+        icon: LayoutDashboard,
+        description: 'KPI, модули и активность',
+      },
+    ],
   },
   {
     label: 'Маршрутизация',
     items: [
-      { to: '/modules', label: 'Модули', icon: Boxes },
-      { to: '/network', label: 'Сеть', icon: Network },
-      { to: '/directories', label: 'Справочники', icon: BookText },
+      { to: '/modules', label: 'Модули', icon: Boxes, description: 'Списки префиксов и AS' },
+      { to: '/network', label: 'Сеть', icon: Network, description: 'BGP-пиры и спикеры', search: { tab: 'overview' } },
+      { to: '/directories', label: 'Справочники', icon: BookText, description: 'Communities и DoH' },
     ],
   },
   {
     label: 'Операции',
     items: [
-      { to: '/operations', label: 'Операции', icon: Cog },
-      { to: '/firewall', label: 'Файрвол', icon: Shield },
-      { to: '/schedule', label: 'Задачи', icon: ListChecks },
-      { to: '/monitoring', label: 'Мониторинг', icon: Activity },
+      { to: '/operations', label: 'Операции', icon: Cog, description: 'Ревизии и apply', search: { tab: 'revisions' } },
+      { to: '/firewall', label: 'Файрвол', icon: Shield, description: 'Клиенты и правила' },
+      { to: '/schedule', label: 'Задачи', icon: ListChecks, description: 'Расписание refresh' },
+      { to: '/monitoring', label: 'Мониторинг', icon: Activity, description: 'Health и BIRD', search: { tab: 'system' } },
     ],
   },
   {
     label: 'Система',
     items: [
-      { to: '/access', label: 'Доступ', icon: KeyRound },
-      { to: '/tenant-settings', label: 'Настройки BIRD', icon: ServerCog },
-      { to: '/settings', label: 'Настройки UI', icon: Settings },
+      { to: '/access', label: 'Доступ', icon: KeyRound, description: 'API-ключи' },
+      { to: '/tenant-settings', label: 'Настройки BIRD', icon: ServerCog, description: 'Tenant BIRD config' },
+      { to: '/settings', label: 'Настройки UI', icon: Settings, description: 'Токен и подключение' },
     ],
   },
 ]
@@ -91,84 +103,114 @@ const ROUTE_LABELS: Record<string, string> = Object.fromEntries(
   ALL_NAV_ITEMS.map((i) => [i.to, i.label]),
 )
 
-const PARENT_ROUTE: Record<string, string> = {}
+const PARENT_ROUTE: Record<string, string> = {
+  '/modules/new': '/modules',
+}
+
+const COMMAND_ITEMS: CommandPaletteItem[] = ALL_NAV_ITEMS.map((item) => ({
+  id: item.to,
+  label: item.label,
+  description: item.description,
+  to: item.to,
+  search: item.search,
+  keywords: [item.to.replace(/^\//, '')],
+}))
 
 export function AppShell({ children }: { children: ReactNode }) {
   const pathname = useRouterState({ select: (s) => s.location.pathname })
   const activeItem =
     ALL_NAV_ITEMS.find((i) => pathname === i.to || (i.to !== '/' && pathname.startsWith(`${i.to}/`))) ??
     ALL_NAV_ITEMS[0]
-  const parentTo = PARENT_ROUTE[activeItem.to]
+  const parentTo = PARENT_ROUTE[pathname] ?? PARENT_ROUTE[activeItem.to]
   const parentLabel = parentTo ? ROUTE_LABELS[parentTo] : null
 
+  const pageTitle =
+    pathname.startsWith('/modules/') && pathname !== '/modules/new'
+      ? 'Модуль'
+      : (ROUTE_LABELS[activeItem.to] ?? activeItem.label)
+
   return (
-    <SidebarProvider>
-      <Sidebar collapsible="icon">
-        <SidebarHeader>
-          <div className="flex items-center gap-2 px-2 py-1.5">
-            <div className="flex size-8 items-center justify-center rounded-md bg-primary text-primary-foreground text-sm font-bold">
-              B
+    <TooltipProvider delay={0}>
+      <SidebarProvider
+        style={
+          {
+            '--sidebar-width': '260px',
+            '--sidebar-width-icon': '62px',
+            '--header-height': '56px',
+          } as CSSProperties
+        }
+      >
+        <Sidebar collapsible="icon">
+          <SidebarHeader className="gap-2">
+            <div className="flex items-center gap-2 px-2 py-1.5">
+              <div className="flex size-8 items-center justify-center rounded-md bg-primary text-primary-foreground text-sm font-bold">
+                B
+              </div>
+              <div className="flex flex-col overflow-hidden group-data-[collapsible=icon]:hidden">
+                <span className="truncate text-sm font-semibold">EvoBGP</span>
+                <span className="truncate text-xs text-muted-foreground">Плоскость управления</span>
+              </div>
             </div>
-            <div className="flex flex-col overflow-hidden group-data-[collapsible=icon]:hidden">
-              <span className="truncate text-sm font-semibold">EvoBGP</span>
-              <span className="truncate text-xs text-muted-foreground">Плоскость управления</span>
+            <div className="px-2 group-data-[collapsible=icon]:px-0">
+              <CommandPalette items={COMMAND_ITEMS} />
             </div>
-          </div>
-        </SidebarHeader>
-        <SidebarContent>
-          {NAV_GROUPS.map((group) => (
-            <SidebarGroup key={group.label}>
-              <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
-              <SidebarGroupContent>
-                <SidebarMenu>
-                  {group.items.map((item) => {
-                    const Icon = item.icon
-                    const isActive = pathname === item.to || pathname.startsWith(`${item.to}/`)
-                    return (
-                      <SidebarMenuItem key={item.to}>
-                        <SidebarMenuButton
-                          render={<Link to={item.to} />}
-                          isActive={isActive}
-                          tooltip={item.label}
-                        >
-                          <Icon className="size-4" />
-                          <span>{item.label}</span>
-                        </SidebarMenuButton>
-                      </SidebarMenuItem>
-                    )
-                  })}
-                </SidebarMenu>
-              </SidebarGroupContent>
-            </SidebarGroup>
-          ))}
-        </SidebarContent>
-        <SidebarFooter />
-      </Sidebar>
-      <SidebarInset>
-        <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80">
-          <SidebarTrigger />
-          <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              {parentLabel && parentTo ? (
-                <>
-                  <BreadcrumbItem className="hidden md:block">
-                    <BreadcrumbLink render={<Link to={parentTo} />}>{parentLabel}</BreadcrumbLink>
-                  </BreadcrumbItem>
-                  <BreadcrumbSeparator className="hidden md:block" />
-                </>
-              ) : null}
-              <BreadcrumbItem>
-                <BreadcrumbPage>{ROUTE_LABELS[activeItem.to] ?? activeItem.label}</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <div className="ml-auto flex items-center gap-2">
-            <ModeToggle />
-          </div>
-        </header>
-        <main className="flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">{children}</main>
-      </SidebarInset>
-    </SidebarProvider>
+          </SidebarHeader>
+          <SidebarContent>
+            {NAV_GROUPS.map((group) => (
+              <SidebarGroup key={group.label}>
+                <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {group.items.map((item) => {
+                      const Icon = item.icon
+                      const isActive = pathname === item.to || pathname.startsWith(`${item.to}/`)
+                      return (
+                        <SidebarMenuItem key={item.to}>
+                          <SidebarMenuButton
+                            render={<Link to={item.to} search={item.search} />}
+                            isActive={isActive}
+                            tooltip={item.label}
+                          >
+                            <Icon className="size-4" />
+                            <span>{item.label}</span>
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      )
+                    })}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            ))}
+          </SidebarContent>
+          <SidebarFooter />
+        </Sidebar>
+        <SidebarInset>
+          <header className="sticky top-0 z-10 flex h-(--header-height) shrink-0 items-center gap-2 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                {parentLabel && parentTo ? (
+                  <>
+                    <BreadcrumbItem className="hidden md:block">
+                      <BreadcrumbLink render={<Link to={parentTo} />}>{parentLabel}</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator className="hidden md:block" />
+                  </>
+                ) : null}
+                <BreadcrumbItem>
+                  <BreadcrumbPage>{pageTitle}</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+            <div className="ml-auto flex items-center gap-2">
+              <SystemMonitorPopover />
+              <ModeToggle />
+            </div>
+          </header>
+          <main className="flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">{children}</main>
+        </SidebarInset>
+      </SidebarProvider>
+    </TooltipProvider>
   )
 }
diff --git a/apps/web/src/components/layout/command-palette.tsx b/apps/web/src/components/layout/command-palette.tsx
new file mode 100644
index 0000000..5576961
--- /dev/null
+++ b/apps/web/src/components/layout/command-palette.tsx
@@ -0,0 +1,143 @@
+import { useEffect, useId, useMemo, useState } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+import { Search } from 'lucide-react'
+
+import { Button } from '@evobgp/ui/components/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@evobgp/ui/components/dialog'
+import { Input } from '@evobgp/ui/components/input'
+import { Kbd } from '@evobgp/ui/components/kbd'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+} from '@evobgp/ui/components/sidebar'
+
+export type CommandPaletteItem = {
+  id: string
+  label: string
+  description?: string
+  to: string
+  search?: Record<string, string>
+  keywords?: string[]
+}
+
+interface CommandPaletteProps {
+  items: CommandPaletteItem[]
+  className?: string
+}
+
+export function CommandPalette({ items }: CommandPaletteProps) {
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const searchInputId = useId()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault()
+        setOpen(true)
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [])
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    if (!q) return items
+    return items.filter((item) => {
+      const haystack = [item.label, item.description, ...(item.keywords ?? [])]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase()
+      return haystack.includes(q)
+    })
+  }, [items, query])
+
+  function go(item: CommandPaletteItem) {
+    setOpen(false)
+    setQuery('')
+    void navigate({ to: item.to, search: item.search })
+  }
+
+  return (
+    <>
+      <SidebarGroup className="p-0">
+        <SidebarGroupContent className="relative">
+          <Button
+            type="button"
+            variant="outline"
+            className="hover:bg-background h-8 w-full justify-start pl-7 font-normal transition-[width] duration-200 ease-linear in-data-[state=collapsed]:w-8! in-data-[state=collapsed]:pl-4! in-data-[state=collapsed]:text-transparent"
+            onClick={() => setOpen(true)}
+          >
+            Поиск…
+          </Button>
+          <Search
+            aria-hidden
+            className="pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 opacity-50 select-none"
+          />
+          <Kbd className="absolute top-1/2 right-2 -translate-y-1/2 in-data-[state=collapsed]:hidden">
+            ⌘K
+          </Kbd>
+        </SidebarGroupContent>
+      </SidebarGroup>
+
+      <Dialog
+        open={open}
+        onOpenChange={(next) => {
+          setOpen(next)
+          if (!next) setQuery('')
+        }}
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>Быстрый переход</DialogTitle>
+          <DialogDescription>Навигация по разделам EvoBGP</DialogDescription>
+        </DialogHeader>
+        <DialogContent className="max-w-md gap-0 px-0 py-0 **:data-[slot=dialog-close]:top-3 **:data-[slot=dialog-close]:right-3">
+          <div className="flex items-center gap-3 border-b px-4 py-3">
+            <Search aria-hidden className="size-4 shrink-0 opacity-60" />
+            <Input
+              id={searchInputId}
+              className="h-9 border-none p-0 shadow-none outline-none focus-visible:ring-0"
+              autoFocus
+              placeholder="Раздел или действие…"
+              aria-label="Поиск разделов"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && filtered[0]) go(filtered[0])
+              }}
+            />
+          </div>
+          <ul className="max-h-72 overflow-y-auto p-2" role="listbox">
+            {filtered.length === 0 ? (
+              <li className="text-muted-foreground px-2 py-6 text-center text-sm">Ничего не найдено</li>
+            ) : (
+              filtered.map((item) => (
+                <li key={item.id}>
+                  <button
+                    type="button"
+                    role="option"
+                    className="hover:bg-accent flex w-full flex-col items-start gap-0.5 rounded-md px-3 py-2 text-left text-sm transition-colors"
+                    onClick={() => go(item)}
+                  >
+                    <span className="font-medium">{item.label}</span>
+                    {item.description ? (
+                      <span className="text-muted-foreground text-xs">{item.description}</span>
+                    ) : null}
+                  </button>
+                </li>
+              ))
+            )}
+          </ul>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/web/src/components/layout/system-monitor-popover.tsx b/apps/web/src/components/layout/system-monitor-popover.tsx
new file mode 100644
index 0000000..cd3065e
--- /dev/null
+++ b/apps/web/src/components/layout/system-monitor-popover.tsx
@@ -0,0 +1,213 @@
+import { useMemo, type CSSProperties, type ReactNode } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Activity, Bird, HeartPulse, ListChecks, Network } from 'lucide-react'
+
+import { Badge } from '@/components/reui/badge'
+import { cn } from '@evobgp/ui/lib/utils'
+import { Item, ItemMedia } from '@evobgp/ui/components/item'
+import { Popover, PopoverContent, PopoverTrigger } from '@evobgp/ui/components/popover'
+import { Progress } from '@evobgp/ui/components/progress'
+
+import { monitoringHealthQueryOptions } from '@/queries/monitoring'
+import { networkBirdQueryOptions } from '@/queries/network'
+import { aggregateNetworkMetrics, overviewJobsQueryOptions, overviewPeersQueryOptions } from '@/queries/overview'
+
+type MonitorMetric = {
+  id: string
+  label: string
+  value: string
+  unit: string
+  percent: number
+  icon: ReactNode
+  tone: 'success' | 'warning' | 'destructive' | 'info'
+  alert: boolean
+}
+
+function toneColor(tone: MonitorMetric['tone']) {
+  switch (tone) {
+    case 'success':
+      return 'var(--color-success)'
+    case 'warning':
+      return 'var(--color-warning)'
+    case 'destructive':
+      return 'var(--color-destructive)'
+    default:
+      return 'var(--color-info)'
+  }
+}
+
+function MetricCell({ metric }: { metric: MonitorMetric }) {
+  const color = toneColor(metric.tone)
+  return (
+    <div className="flex flex-col gap-2 p-3">
+      <div className="flex items-center justify-between gap-1">
+        <div className="flex min-w-0 items-center gap-1.5">
+          <Item
+            className="flex size-5 shrink-0 items-center justify-center p-0"
+            style={{ backgroundColor: `${color}18` }}
+          >
+            <ItemMedia variant="icon" className="size-auto" style={{ color }}>
+              {metric.icon}
+            </ItemMedia>
+          </Item>
+          <span className="text-muted-foreground truncate text-[11px]">{metric.label}</span>
+        </div>
+        <span className="shrink-0 text-xs font-semibold tabular-nums" style={{ color }}>
+          {metric.value}
+          <span className="text-muted-foreground ml-0.5 text-[10px] font-normal">{metric.unit}</span>
+        </span>
+      </div>
+      <Progress
+        value={metric.percent}
+        className="**:data-[slot=progress-indicator]:bg-(--bar-color) **:data-[slot=progress-track]:h-1"
+        style={{ '--bar-color': color } as CSSProperties}
+      />
+    </div>
+  )
+}
+
+/** Live system monitor popover (app-shell-7 pattern, EvoBGP API data). */
+export function SystemMonitorPopover() {
+  const healthQ = useQuery({ ...monitoringHealthQueryOptions(), refetchInterval: 30_000 })
+  const peersQ = useQuery({ ...overviewPeersQueryOptions(), refetchInterval: 30_000 })
+  const jobsQ = useQuery({ ...overviewJobsQueryOptions(), refetchInterval: 30_000 })
+  const birdQ = useQuery({ ...networkBirdQueryOptions(), refetchInterval: 30_000 })
+
+  const peers = peersQ.data?.items ?? []
+  const jobs = jobsQ.data?.items ?? []
+  const network = aggregateNetworkMetrics(peers, [])
+  const bgpPct =
+    network.peersEnabled > 0
+      ? Math.round((network.peersEstablished / network.peersEnabled) * 100)
+      : 0
+  const failedJobs = jobs.filter((j) =>
+    ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()),
+  ).length
+  const runningJobs = jobs.filter((j) => j.status === 'running' || j.status === 'queued').length
+  const healthOk = healthQ.data?.ok ?? false
+  const birdRatio =
+    birdQ.data && birdQ.data.bgp_sessions_total > 0
+      ? Math.round((birdQ.data.bgp_established / birdQ.data.bgp_sessions_total) * 100)
+      : null
+
+  const metrics = useMemo<MonitorMetric[]>(
+    () => [
+      {
+        id: 'api',
+        label: 'API health',
+        value: healthOk ? 'OK' : '—',
+        unit: '',
+        percent: healthOk ? 100 : 0,
+        icon: <HeartPulse aria-hidden />,
+        tone: healthOk ? 'success' : 'destructive',
+        alert: !healthOk,
+      },
+      {
+        id: 'bgp',
+        label: 'BGP пиры',
+        value: String(bgpPct),
+        unit: '%',
+        percent: bgpPct,
+        icon: <Network aria-hidden />,
+        tone: bgpPct >= 90 ? 'success' : bgpPct >= 50 ? 'warning' : 'destructive',
+        alert: bgpPct < 70 && network.peersEnabled > 0,
+      },
+      {
+        id: 'bird',
+        label: 'BIRD сессии',
+        value: birdRatio !== null ? String(birdRatio) : '—',
+        unit: birdRatio !== null ? '%' : '',
+        percent: birdRatio ?? 0,
+        icon: <Bird aria-hidden />,
+        tone:
+          birdRatio === null
+            ? 'info'
+            : birdRatio >= 100
+              ? 'success'
+              : birdRatio >= 50
+                ? 'warning'
+                : 'destructive',
+        alert: birdRatio !== null && birdRatio < 100,
+      },
+      {
+        id: 'jobs',
+        label: 'Ошибки задач',
+        value: String(failedJobs),
+        unit: 'шт.',
+        percent: Math.min(100, failedJobs * 10),
+        icon: <ListChecks aria-hidden />,
+        tone: failedJobs > 0 ? 'warning' : 'success',
+        alert: failedJobs > 0,
+      },
+    ],
+    [bgpPct, birdRatio, failedJobs, healthOk, network.peersEnabled],
+  )
+
+  const spiking = metrics.some((m) => m.alert) || runningJobs > 5
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <button
+            type="button"
+            aria-label="Монитор системы"
+            className={cn(
+              'relative inline-flex h-8 items-center gap-1.5 rounded-md border px-2 transition-colors outline-none',
+              'border-border hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring',
+            )}
+          />
+        }
+      >
+        <span className="relative flex size-3.5 items-center justify-center">
+          <Activity
+            aria-hidden
+            className={cn(
+              'size-3.5 transition-colors',
+              spiking ? 'text-destructive' : 'text-muted-foreground',
+            )}
+          />
+          {spiking ? (
+            <span className="bg-destructive/25 absolute inset-0 animate-ping rounded-full" aria-hidden />
+          ) : null}
+        </span>
+        <span className="text-foreground hidden text-xs font-medium sm:inline">Система</span>
+        <Badge
+          variant={spiking ? 'destructive-light' : 'success-light'}
+          size="xs"
+          className="h-4 px-1.5 text-[10px]"
+        >
+          {spiking ? 'Внимание' : 'Норма'}
+        </Badge>
+      </PopoverTrigger>
+
+      <PopoverContent align="end" sideOffset={8} className="w-80 gap-0! space-y-0! p-0!">
+        <div className="border-border flex items-center justify-between border-b px-3 py-2.5">
+          <span className="text-foreground text-xs font-medium">Монитор EvoBGP</span>
+          <span className="text-muted-foreground text-[11px] tabular-nums">
+            {new Date().toLocaleTimeString('ru-RU')}
+          </span>
+        </div>
+        <div className="grid grid-cols-2">
+          {metrics.map((metric, i) => (
+            <div
+              key={metric.id}
+              className={cn(
+                i % 2 === 1 && 'border-border border-l',
+                i >= 2 && 'border-border border-t',
+              )}
+            >
+              <MetricCell metric={metric} />
+            </div>
+          ))}
+        </div>
+        <div className="border-border text-muted-foreground border-t px-3 py-2 text-[11px]">
+          Активных задач: <span className="text-foreground font-medium tabular-nums">{runningJobs}</span>
+          {' · '}
+          Пиров в каталоге:{' '}
+          <span className="text-foreground font-medium tabular-nums">{network.peersTotal}</span>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/web/src/components/modules/module-kpi-cards.tsx b/apps/web/src/components/modules/module-kpi-cards.tsx
index 9ca3f1b..2c1a756 100644
--- a/apps/web/src/components/modules/module-kpi-cards.tsx
+++ b/apps/web/src/components/modules/module-kpi-cards.tsx
@@ -1,13 +1,5 @@
-import {
-  ArrowDownUp,
-  Network,
-  RefreshCw,
-  ShieldCheck,
-  Timer,
-} from 'lucide-react'
-
-import { SectionCards, type SectionCardItem } from '@/components/section-cards'
-import { SectionCardsSkeleton } from '@/components/skeletons'
+import { KpiSparklineCard, type KpiSparklineMetric } from '@/components/patterns/kpi-sparkline-card'
+import { kpiGridClassName } from '@/lib/ui-surface'
 import { formatDateTime, moduleIntervalLabel } from '@/lib/modules/display'
 import {
   communityLabel,
@@ -15,6 +7,7 @@ import {
   moduleDohProfileIds,
 } from '@/lib/modules/helpers'
 import { dohPolicyRu } from '@/lib/ui-labels'
+import { SectionCardsSkeleton } from '@/components/skeletons'
 import type { AsEntry, BgpCommunity, DohProfile, ModuleRow } from '@/types/api'
 
 interface ModuleKpiCardsProps {
@@ -25,6 +18,12 @@ interface ModuleKpiCardsProps {
   loading?: boolean
 }
 
+function syntheticSparkline(seed: number): number[] {
+  return Array.from({ length: 9 }, (_, i) =>
+    Math.round(seed * (0.8 + (i / 9) * 0.2 + Math.sin(i) * 0.05)),
+  )
+}
+
 export function ModuleKpiCards({
   mod,
   communities,
@@ -33,52 +32,67 @@ export function ModuleKpiCards({
   loading = false,
 }: ModuleKpiCardsProps) {
   if (loading || !mod) {
-    return <SectionCardsSkeleton count={5} />
+    return <SectionCardsSkeleton count={4} />
   }
 
   const asPrefixTotal = asEntries.reduce((acc, entry) => acc + (entry.prefix_count ?? 0), 0)
   const dohIds = moduleDohProfileIds(mod)
 
-  const items: SectionCardItem[] = [
+  const metrics: KpiSparklineMetric[] = [
     {
-      label: 'Приоритет',
+      id: 'priority',
+      title: 'Приоритет',
+      label: 'Порядок в ревизии',
       value: String(mod.priority ?? 0),
-      hint: 'порядок в сборке ревизии',
-      icon: <ArrowDownUp className="size-3.5" />,
+      delta: mod.enabled !== false ? 'активен' : 'выключен',
+      deltaVariant: mod.enabled !== false ? 'success-light' : 'outline',
+      detail: mod.type,
+      tone: 'info',
+      sparkline: syntheticSparkline(mod.priority ?? 1),
     },
     {
-      label: 'Интервал',
+      id: 'interval',
+      title: 'Интервал',
+      label: 'Обновление',
       value: moduleIntervalLabel(mod),
-      hint: 'refresh_interval_sec / cron',
-      icon: <Timer className="size-3.5" />,
+      delta: formatDateTime(mod.last_refreshed_at) || 'никогда',
+      deltaVariant: 'primary-light',
+      detail: 'last refresh',
+      tone: 'warning',
+      sparkline: syntheticSparkline(12),
     },
     {
-      label: 'DoH',
-      value: mod.type === 'DOMAINS' ? dohPolicyRu(mod.doh_resolver_policy) : '—',
-      hint:
-        mod.type === 'DOMAINS'
-          ? dohIds.length
-            ? dohIds.map((id) => dohProfileLabel(id, dohProfiles)).join('; ')
-            : 'Системный DNS'
-          : 'не применимо',
-      icon: <Network className="size-3.5" />,
+      id: 'prefixes',
+      title: 'Префиксы',
+      label: mod.type === 'AS_PREFIXES' ? 'AS entries' : 'Записи',
+      value: mod.type === 'AS_PREFIXES' ? String(asPrefixTotal) : String(asEntries.length),
+      delta: `${asEntries.length} AS`,
+      deltaVariant: 'success-light',
+      detail: 'в модуле',
+      tone: 'success',
+      sparkline: syntheticSparkline(asPrefixTotal || asEntries.length || 1),
     },
     {
-      label: 'Community по умолч.',
-      value: communityLabel(mod.default_community_id, communities),
-      hint: 'для записей без своего community',
-      icon: <ShieldCheck className="size-3.5" />,
-    },
-    {
-      label: 'Последнее обновление',
-      value: formatDateTime(mod.last_refreshed_at),
-      hint:
-        mod.type === 'AS_PREFIXES'
-          ? `ASN: ${asEntries.length}, префиксов: ${asPrefixTotal}`
-          : 'время последнего refresh',
-      icon: <RefreshCw className="size-3.5" />,
+      id: 'policy',
+      title: 'DoH / BGP',
+      label: communityLabel(mod.default_community_id, communities),
+      value: dohIds.length > 0 ? String(dohIds.length) : '—',
+      delta: dohPolicyRu(mod.doh_resolver_policy),
+      deltaVariant: 'info-light',
+      detail:
+        dohIds.length > 0
+          ? dohIds.map((id) => dohProfileLabel(id, dohProfiles)).join(', ')
+          : 'без DoH',
+      tone: 'info',
+      sparkline: syntheticSparkline(dohIds.length || 2),
     },
   ]
 
-  return <SectionCards items={items} />
+  return (
+    <section aria-label="KPI модуля" className={kpiGridClassName}>
+      {metrics.map((metric) => (
+        <KpiSparklineCard key={metric.id} metric={metric} />
+      ))}
+    </section>
+  )
 }
diff --git a/apps/web/src/components/network/network-peers-card.tsx b/apps/web/src/components/network/network-peers-card.tsx
index 57c976b..b0779c2 100644
--- a/apps/web/src/components/network/network-peers-card.tsx
+++ b/apps/web/src/components/network/network-peers-card.tsx
@@ -1,7 +1,8 @@
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { Plus } from 'lucide-react'
 
 import { Button } from '@evobgp/ui/components/button'
+import { Tabs, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
 
 import { DataGridCard } from '@/components/data-grid-shell'
 import { NetworkPeersGrid } from '@/components/network/network-peers-grid'
@@ -10,6 +11,8 @@ import { QueryState } from '@/components/query-state'
 import { TableSkeleton } from '@/components/skeletons'
 import type { PeerRow, SpeakerRow } from '@/types/api'
 
+type PeerTab = 'all' | 'established' | 'pending' | 'disabled'
+
 interface NetworkPeersCardProps {
   items: PeerRow[]
   speakers: SpeakerRow[]
@@ -19,6 +22,24 @@ interface NetworkPeersCardProps {
   onRetry: () => void
 }
 
+function filterPeers(items: PeerRow[], tab: PeerTab): PeerRow[] {
+  if (tab === 'all') return items
+  if (tab === 'disabled') return items.filter((p) => p.enabled === false)
+  const enabled = items.filter((p) => p.enabled !== false)
+  if (tab === 'established') return enabled.filter((p) => p.session_state === 'Established')
+  return enabled.filter((p) => p.session_state !== 'Established')
+}
+
+function tabCounts(items: PeerRow[]) {
+  const enabled = items.filter((p) => p.enabled !== false)
+  return {
+    all: items.length,
+    established: enabled.filter((p) => p.session_state === 'Established').length,
+    pending: enabled.filter((p) => p.session_state !== 'Established').length,
+    disabled: items.length - enabled.length,
+  }
+}
+
 export function NetworkPeersCard({
   items,
   speakers,
@@ -28,6 +49,9 @@ export function NetworkPeersCard({
   onRetry,
 }: NetworkPeersCardProps) {
   const [dialogOpen, setDialogOpen] = useState(false)
+  const [tab, setTab] = useState<PeerTab>('all')
+  const counts = useMemo(() => tabCounts(items), [items])
+  const filtered = useMemo(() => filterPeers(items, tab), [items, tab])
 
   return (
     <>
@@ -41,14 +65,24 @@ export function NetworkPeersCard({
           </Button>
         }
       >
+        <div className="border-b px-5 py-3">
+          <Tabs value={tab} onValueChange={(v) => setTab(v as PeerTab)}>
+            <TabsList>
+              <TabsTrigger value="all">Все ({counts.all})</TabsTrigger>
+              <TabsTrigger value="established">Established ({counts.established})</TabsTrigger>
+              <TabsTrigger value="pending">Ожидание ({counts.pending})</TabsTrigger>
+              <TabsTrigger value="disabled">Выключены ({counts.disabled})</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
         <QueryState
-          data={items}
+          data={filtered}
           isLoading={isLoading}
           isError={isError}
           error={error}
-          empty={items.length === 0}
-          emptyTitle="Нет пиров"
-          emptyDescription="Добавьте первого BGP-соседа для установки сессии."
+          empty={filtered.length === 0}
+          emptyTitle="Нет пиров в выборке"
+          emptyDescription="Измените фильтр или добавьте BGP-соседа."
           skeleton={<TableSkeleton rows={6} cols={4} />}
           onRetry={onRetry}
         >
@@ -58,11 +92,7 @@ export function NetworkPeersCard({
         </QueryState>
       </DataGridCard>
 
-      <PeerFormDialog
-        open={dialogOpen}
-        onOpenChange={setDialogOpen}
-        speakers={speakers}
-      />
+      <PeerFormDialog open={dialogOpen} onOpenChange={setDialogOpen} speakers={speakers} />
     </>
   )
 }
diff --git a/apps/web/src/components/operations/operations-jobs-card.tsx b/apps/web/src/components/operations/operations-jobs-card.tsx
new file mode 100644
index 0000000..319a05d
--- /dev/null
+++ b/apps/web/src/components/operations/operations-jobs-card.tsx
@@ -0,0 +1,86 @@
+import { useMemo, useState } from 'react'
+
+import { DataGridCard } from '@/components/data-grid-shell'
+import { OperationsJobsGrid } from '@/components/operations/operations-jobs-grid'
+import { QueryState } from '@/components/query-state'
+import { TableSkeleton } from '@/components/skeletons'
+import { Tabs, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
+import type { JobRow } from '@/types/api'
+import type { QueryClient } from '@tanstack/react-query'
+
+type JobTab = 'all' | 'active' | 'failed' | 'succeeded'
+
+function filterJobs(items: JobRow[], tab: JobTab): JobRow[] {
+  if (tab === 'all') return items
+  if (tab === 'active') return items.filter((j) => j.status === 'running' || j.status === 'queued')
+  if (tab === 'failed')
+    return items.filter((j) => ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()))
+  return items.filter((j) => j.status === 'succeeded')
+}
+
+function tabCounts(items: JobRow[]) {
+  return {
+    all: items.length,
+    active: items.filter((j) => j.status === 'running' || j.status === 'queued').length,
+    failed: items.filter((j) => ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()))
+      .length,
+    succeeded: items.filter((j) => j.status === 'succeeded').length,
+  }
+}
+
+/** data-grid-filtering-1 style jobs card with status tabs. */
+export function OperationsJobsCard({
+  jobs,
+  nameById,
+  qc,
+  isLoading,
+  isError,
+  error,
+  onRetry,
+}: {
+  jobs: JobRow[]
+  nameById: Map<string, string>
+  qc: QueryClient
+  isLoading: boolean
+  isError: boolean
+  error: unknown
+  onRetry: () => void
+}) {
+  const [tab, setTab] = useState<JobTab>('all')
+  const counts = useMemo(() => tabCounts(jobs), [jobs])
+  const filtered = useMemo(() => filterJobs(jobs, tab), [jobs, tab])
+
+  return (
+    <DataGridCard title="Задачи" description="Фильтр по статусу · data-grid-filtering pattern">
+      <div className="border-b px-5 py-3">
+        <Tabs value={tab} onValueChange={(v) => setTab(v as JobTab)}>
+          <TabsList>
+            <TabsTrigger value="all">Все ({counts.all})</TabsTrigger>
+            <TabsTrigger value="active">Активные ({counts.active})</TabsTrigger>
+            <TabsTrigger value="succeeded">Успешные ({counts.succeeded})</TabsTrigger>
+            <TabsTrigger value="failed">Ошибки ({counts.failed})</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+      <QueryState
+        data={filtered}
+        isLoading={isLoading}
+        isError={isError}
+        error={error}
+        empty={filtered.length === 0}
+        emptyTitle="Нет задач в выборке"
+        skeleton={<TableSkeleton rows={6} cols={5} />}
+        onRetry={onRetry}
+      >
+        {(items) => (
+          <OperationsJobsGrid
+            items={items}
+            nameById={nameById}
+            qc={qc}
+            isLoading={isLoading && items.length > 0}
+          />
+        )}
+      </QueryState>
+    </DataGridCard>
+  )
+}
diff --git a/apps/web/src/components/patterns/donut-breakdown-card.tsx b/apps/web/src/components/patterns/donut-breakdown-card.tsx
new file mode 100644
index 0000000..c239004
--- /dev/null
+++ b/apps/web/src/components/patterns/donut-breakdown-card.tsx
@@ -0,0 +1,92 @@
+import { Cell, Pie, PieChart } from 'recharts'
+
+import { PanelCard } from '@/components/panel-card'
+import { Badge } from '@/components/reui/badge'
+import {
+  ChartContainer,
+  type ChartConfig,
+} from '@evobgp/ui/components/chart'
+import type { BreakdownSlice } from '@/lib/metrics'
+
+/** chart-27 / chart-13 inspired donut in PanelCard. */
+export function DonutBreakdownCard({
+  title,
+  description,
+  slices,
+  centerLabel,
+  badge,
+}: {
+  title: string
+  description?: string
+  slices: BreakdownSlice[]
+  centerLabel: string
+  badge?: string
+}) {
+  const total = slices.reduce((sum, s) => sum + s.count, 0)
+  const chartConfig = slices.reduce<ChartConfig>((acc, slice) => {
+    acc[slice.key] = { label: slice.label, color: slice.color }
+    return acc
+  }, {})
+  const data = slices.map((slice) => ({ ...slice, fill: slice.color, share: slice.count }))
+
+  return (
+    <PanelCard title={title} description={description} className="h-full">
+      <div className="flex flex-col gap-4 p-4 sm:flex-row sm:items-center">
+        {total === 0 ? (
+          <p className="text-muted-foreground w-full py-8 text-center text-sm">Нет данных</p>
+        ) : (
+          <>
+            <div className="relative mx-auto size-36 shrink-0">
+              <ChartContainer config={chartConfig} className="aspect-square size-36">
+                <PieChart>
+                  <Pie
+                    data={data}
+                    dataKey="share"
+                    nameKey="label"
+                    innerRadius={48}
+                    outerRadius={64}
+                    strokeWidth={2}
+                    stroke="var(--color-card)"
+                  >
+                    {data.map((entry) => (
+                      <Cell key={entry.key} fill={entry.fill} />
+                    ))}
+                  </Pie>
+                </PieChart>
+              </ChartContainer>
+              <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+                <span className="text-muted-foreground text-xs">{centerLabel}</span>
+                <span className="text-lg font-semibold tabular-nums">{total}</span>
+              </div>
+            </div>
+            <ul className="min-w-0 flex-1 space-y-2">
+              {slices.map((slice) => {
+                const pct = total > 0 ? ((slice.count / total) * 100).toFixed(1) : '0'
+                return (
+                  <li key={slice.key} className="flex items-center justify-between gap-2 text-sm">
+                    <span className="flex min-w-0 items-center gap-2">
+                      <span
+                        className="size-2.5 shrink-0 rounded-full"
+                        style={{ backgroundColor: slice.color }}
+                        aria-hidden
+                      />
+                      <span className="truncate">{slice.label}</span>
+                    </span>
+                    <span className="text-muted-foreground shrink-0 tabular-nums">
+                      {slice.count} ({pct}%)
+                    </span>
+                  </li>
+                )
+              })}
+            </ul>
+          </>
+        )}
+        {badge ? (
+          <Badge variant="success-light" className="absolute top-4 right-4 hidden sm:flex">
+            {badge}
+          </Badge>
+        ) : null}
+      </div>
+    </PanelCard>
+  )
+}
diff --git a/apps/web/src/components/patterns/illustrated-empty-state.tsx b/apps/web/src/components/patterns/illustrated-empty-state.tsx
new file mode 100644
index 0000000..c39798f
--- /dev/null
+++ b/apps/web/src/components/patterns/illustrated-empty-state.tsx
@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react'
+import type { LucideIcon } from 'lucide-react'
+
+import { IconStack } from '@/components/reui/icon-stack'
+import { Card, CardContent } from '@evobgp/ui/components/card'
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@evobgp/ui/components/empty'
+
+/** empty-state-11 pattern adapted to Card surface. */
+export function IllustratedEmptyState({
+  title,
+  description,
+  icon: Icon,
+  action,
+}: {
+  title: string
+  description: string
+  icon: LucideIcon
+  action?: ReactNode
+}) {
+  return (
+    <Card className="bg-muted min-h-[240px] p-0 shadow-none">
+      <CardContent className="flex min-h-[240px] flex-col items-center justify-center gap-4 p-6 sm:p-10">
+        {action ? <div className="w-full self-end">{action}</div> : null}
+        <Empty className="max-w-md gap-5 bg-transparent p-0">
+          <EmptyHeader className="items-center gap-5 text-center">
+            <EmptyMedia className="mb-0">
+              <IconStack aria-hidden>
+                <Icon strokeWidth={1.9} aria-hidden />
+              </IconStack>
+            </EmptyMedia>
+            <div className="flex flex-col items-center gap-2">
+              <EmptyTitle className="text-base font-semibold tracking-tight">{title}</EmptyTitle>
+              <EmptyDescription className="max-w-sm text-sm/relaxed">{description}</EmptyDescription>
+            </div>
+          </EmptyHeader>
+        </Empty>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/web/src/components/patterns/index.ts b/apps/web/src/components/patterns/index.ts
new file mode 100644
index 0000000..2b750b4
--- /dev/null
+++ b/apps/web/src/components/patterns/index.ts
@@ -0,0 +1,6 @@
+export { DonutBreakdownCard } from './donut-breakdown-card'
+export { IllustratedEmptyState } from './illustrated-empty-state'
+export { KpiSparklineCard, type KpiSparklineMetric } from './kpi-sparkline-card'
+export { PanelCorners } from './panel-corners'
+export { ProjectsEmptyState } from './projects-empty-state'
+export { SegmentedProgressCard, type SegmentStat } from './segmented-progress-card'
diff --git a/apps/web/src/components/patterns/kpi-sparkline-card.tsx b/apps/web/src/components/patterns/kpi-sparkline-card.tsx
new file mode 100644
index 0000000..3ecd64a
--- /dev/null
+++ b/apps/web/src/components/patterns/kpi-sparkline-card.tsx
@@ -0,0 +1,77 @@
+import type { ComponentProps } from 'react'
+
+import { Badge } from '@/components/reui/badge'
+import { CardDotField } from '@/components/dashboard/card-dot-field'
+import { PanelCorners } from '@/components/patterns/panel-corners'
+import { toneStyles, type MetricTone } from '@/components/patterns/metric-tone-styles'
+import { Card, CardContent } from '@evobgp/ui/components/card'
+
+export type KpiSparklineMetric = {
+  id: string
+  title: string
+  label: string
+  value: string
+  delta: string
+  deltaVariant: ComponentProps<typeof Badge>['variant']
+  detail: string
+  tone: MetricTone
+  sparkline: readonly number[]
+}
+
+function Sparkline({ values, color }: { values: readonly number[]; color: string }) {
+  const min = Math.min(...values)
+  const max = Math.max(...values)
+  const spread = Math.max(1, max - min)
+  const points = values
+    .map((value, index) => {
+      const x = (index / (values.length - 1)) * 72
+      const y = 28 - ((value - min) / spread) * 22
+      return `${x.toFixed(1)},${y.toFixed(1)}`
+    })
+    .join(' ')
+
+  return (
+    <svg viewBox="0 0 72 32" className="h-9 w-24 shrink-0 opacity-95" role="img" aria-label="Тренд">
+      <polyline
+        points={points}
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="square"
+        strokeLinejoin="miter"
+      />
+    </svg>
+  )
+}
+
+/** KPI card with sparkline (dashboard-5 / chart-15 pattern, Card surface). */
+export function KpiSparklineCard({ metric }: { metric: KpiSparklineMetric }) {
+  const tone = toneStyles[metric.tone]
+
+  return (
+    <Card className="relative overflow-hidden p-0">
+      <CardDotField className="text-muted-foreground [mask-image:radial-gradient(72%_64%_at_50%_44%,black,transparent)] opacity-70" />
+      <PanelCorners />
+      <CardContent className="relative z-10 flex min-h-[7.25rem] flex-col justify-between gap-5 p-4">
+        <div className="flex min-w-0 flex-col gap-0.5">
+          <span className="text-foreground truncate text-sm leading-4 font-semibold">{metric.title}</span>
+          <span className="text-muted-foreground truncate text-xs leading-4">{metric.label}</span>
+        </div>
+        <div className="flex items-end justify-between gap-4">
+          <div className="min-w-0 space-y-2.5">
+            <div className="text-foreground text-2xl leading-none font-semibold tracking-tight tabular-nums">
+              {metric.value}
+            </div>
+            <div className="flex items-center gap-2">
+              <Badge variant={metric.deltaVariant} radius="full" size="sm">
+                {metric.delta}
+              </Badge>
+              <span className="text-muted-foreground text-xs">{metric.detail}</span>
+            </div>
+          </div>
+          <Sparkline values={metric.sparkline} color={tone.stroke} />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/web/src/components/patterns/metric-tone-styles.ts b/apps/web/src/components/patterns/metric-tone-styles.ts
new file mode 100644
index 0000000..55b8c0e
--- /dev/null
+++ b/apps/web/src/components/patterns/metric-tone-styles.ts
@@ -0,0 +1,8 @@
+export type MetricTone = 'danger' | 'success' | 'warning' | 'info'
+
+export const toneStyles: Record<MetricTone, { stroke: string }> = {
+  danger: { stroke: 'var(--color-destructive)' },
+  success: { stroke: 'var(--color-success)' },
+  warning: { stroke: 'var(--color-warning)' },
+  info: { stroke: 'var(--color-info)' },
+}
diff --git a/apps/web/src/components/patterns/panel-corners.tsx b/apps/web/src/components/patterns/panel-corners.tsx
new file mode 100644
index 0000000..8d42379
--- /dev/null
+++ b/apps/web/src/components/patterns/panel-corners.tsx
@@ -0,0 +1,15 @@
+/** Corner accents from ReUI dashboard-5 block. */
+export function PanelCorners() {
+  return (
+    <>
+      <span
+        aria-hidden
+        className="border-foreground/65 absolute top-0 left-0 size-2 border-t border-l"
+      />
+      <span
+        aria-hidden
+        className="border-foreground/65 absolute right-0 bottom-0 size-2 border-r border-b"
+      />
+    </>
+  )
+}
diff --git a/apps/web/src/components/patterns/projects-empty-state.tsx b/apps/web/src/components/patterns/projects-empty-state.tsx
new file mode 100644
index 0000000..9057096
--- /dev/null
+++ b/apps/web/src/components/patterns/projects-empty-state.tsx
@@ -0,0 +1,22 @@
+import { Link } from '@tanstack/react-router'
+import { Boxes, Plus } from 'lucide-react'
+
+import { IllustratedEmptyState } from '@/components/patterns/illustrated-empty-state'
+import { Button } from '@evobgp/ui/components/button'
+
+/** empty-state-3 pattern for first module. */
+export function ProjectsEmptyState() {
+  return (
+    <IllustratedEmptyState
+      icon={Boxes}
+      title="Создайте первый модуль"
+      description="Модули задают источники префиксов: AS, CDN, домены и IP-диапазоны."
+      action={
+        <Button size="sm" render={<Link to="/modules/new" />}>
+          <Plus />
+          Новый модуль
+        </Button>
+      }
+    />
+  )
+}
diff --git a/apps/web/src/components/patterns/segmented-progress-card.tsx b/apps/web/src/components/patterns/segmented-progress-card.tsx
new file mode 100644
index 0000000..1fb8c76
--- /dev/null
+++ b/apps/web/src/components/patterns/segmented-progress-card.tsx
@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react'
+
+import { PanelCard } from '@/components/panel-card'
+import { cn } from '@evobgp/ui/lib/utils'
+import { Progress } from '@evobgp/ui/components/progress'
+
+export type SegmentStat = {
+  value: string | number
+  label: string
+  percent: number
+  badge?: ReactNode
+}
+
+/** stats-4 pattern: dual metrics + progress + segmented meter (Card surface). */
+export function SegmentedProgressCard({
+  title,
+  description,
+  actions,
+  primary,
+  secondary,
+  segments = 30,
+  footer,
+}: {
+  title: string
+  description?: string
+  actions?: ReactNode
+  primary: SegmentStat
+  secondary: SegmentStat
+  segments?: number
+  footer?: ReactNode
+}) {
+  const filled = Math.round((secondary.percent / 100) * segments)
+
+  return (
+    <PanelCard title={title} description={description} actions={actions} className="h-full">
+      <div className="flex flex-col gap-4 p-4">
+        <div className="flex items-stretch gap-x-6">
+          <div className="flex flex-1 flex-col items-start gap-1">
+            <div className="mb-1 flex items-center gap-1">
+              <span className="text-foreground text-2xl font-bold tabular-nums">{primary.value}</span>
+              {primary.badge}
+            </div>
+            <span className="text-muted-foreground text-sm font-medium">{primary.label}</span>
+            <div className="mt-1 w-full">
+              <Progress value={primary.percent} className="**:data-[slot=progress-track]:h-2.5" />
+            </div>
+          </div>
+          <div className="border-muted-foreground/10 flex flex-1 flex-col items-start gap-1 border-s ps-6">
+            <div className="mb-1 flex items-center gap-1">
+              <span className="text-foreground text-2xl font-bold tabular-nums">{secondary.value}</span>
+            </div>
+            <span className="text-muted-foreground text-sm font-medium">{secondary.label}</span>
+            <div className="mt-1 flex w-full gap-0.5">
+              {Array.from({ length: segments }).map((_, i) => (
+                <div
+                  key={i}
+                  className={cn(
+                    'h-2.5 w-0.5 flex-1 rounded-md',
+                    i < filled ? 'bg-success' : 'bg-muted',
+                  )}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+        {footer ? <div className="text-muted-foreground text-xs">{footer}</div> : null}
+      </div>
+    </PanelCard>
+  )
+}
diff --git a/apps/web/src/components/query-state.tsx b/apps/web/src/components/query-state.tsx
index b7db781..fac6d8b 100644
--- a/apps/web/src/components/query-state.tsx
+++ b/apps/web/src/components/query-state.tsx
@@ -13,6 +13,7 @@ interface QueryStateProps<T> {
   emptyTitle?: string
   emptyDescription?: string
   emptyAction?: ReactNode
+  emptyContent?: ReactNode
   onRetry?: () => void
   skeleton?: ReactNode
   children: (data: T) => ReactNode
@@ -27,6 +28,7 @@ export function QueryState<T>({
   emptyTitle = 'Нет данных',
   emptyDescription,
   emptyAction,
+  emptyContent,
   onRetry,
   skeleton,
   children,
@@ -52,6 +54,7 @@ export function QueryState<T>({
     )
   }
   if (empty || data == null) {
+    if (emptyContent) return <>{emptyContent}</>
     return <EmptyState title={emptyTitle} description={emptyDescription} action={emptyAction} />
   }
   return <>{children(data)}</>
diff --git a/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx b/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx
index 4de4050..12d7d4f 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-column-filter.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { useMemo, useState } from "react"
 import { Badge } from "@/components/reui/badge"
 import { Column } from "@tanstack/react-table"
diff --git a/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx b/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx
index 6ba59a2..e13b732 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-column-header.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { HTMLAttributes, memo, ReactNode, useMemo } from "react"
 import {
   getColumnHeaderLabel,
diff --git a/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx b/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx
index 5b14a2f..d6a6175 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-column-visibility.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { ReactElement } from "react"
 import { getColumnHeaderLabel } from "@/components/reui/data-grid/data-grid"
 import { Table } from "@tanstack/react-table"
diff --git a/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx b/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
index af7dba5..16c2d29 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import React, { ReactNode } from "react"
 import { useDataGrid } from "@/components/reui/data-grid/data-grid"
 
diff --git a/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx b/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx
index f87a6d6..efeefc3 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import {
   PointerEvent,
   ReactNode,
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx b/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx
index 25f37de..b4ee534 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-table-dnd-rows.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import {
   createContext,
   CSSProperties,
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx b/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx
index 8e37457..d7f9076 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-table-dnd.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import {
   CSSProperties,
   Fragment,
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx b/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx
index 0eab06e..2874787 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-table-virtual.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import {
   CSSProperties,
   memo,
diff --git a/apps/web/src/components/reui/data-grid/data-grid-table.tsx b/apps/web/src/components/reui/data-grid/data-grid-table.tsx
index c810e13..22339eb 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-table.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-table.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import {
   CSSProperties,
   Fragment,
diff --git a/apps/web/src/components/reui/data-grid/data-grid.tsx b/apps/web/src/components/reui/data-grid/data-grid.tsx
index 5bf9c1f..6f41182 100644
--- a/apps/web/src/components/reui/data-grid/data-grid.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { createContext, ReactNode, useContext, useMemo } from "react"
 import {
   Column,
diff --git a/apps/web/src/components/reui/filters.tsx b/apps/web/src/components/reui/filters.tsx
index 231377b..8f6a943 100644
--- a/apps/web/src/components/reui/filters.tsx
+++ b/apps/web/src/components/reui/filters.tsx
@@ -409,12 +409,6 @@ function FilterRemoveButton({
 }: FilterRemoveButtonProps) {
   const context = useFilterContext()
 
-  const sizeMap = {
-    sm: "sm" as const,
-    default: "sm" as const,
-    lg: "default" as const,
-  }
-
   return (
     <Button
       variant="outline"
@@ -425,6 +419,7 @@ function FilterRemoveButton({
             ? "icon-lg"
             : "icon"
       }
+      className={className}
       {...props}
     >
       {icon}
@@ -1009,8 +1004,6 @@ function FilterValueSelector<T = unknown>({
   operator,
   autoFocus,
 }: FilterValueSelectorProps<T>) {
-  const context = useFilterContext()
-
   if (operator === "empty" || operator === "not_empty") {
     return null
   }
diff --git a/apps/web/src/components/reui/icon-stack.tsx b/apps/web/src/components/reui/icon-stack.tsx
new file mode 100644
index 0000000..1987f42
--- /dev/null
+++ b/apps/web/src/components/reui/icon-stack.tsx
@@ -0,0 +1,90 @@
+import { cn } from "@evobgp/ui/lib/utils"
+
+type IconStackProps = React.ComponentProps<"div">
+
+function IconStack({ className, children, style, ...props }: IconStackProps) {
+  return (
+    <div
+      data-slot="icon-stack"
+      className={cn(
+        "text-foreground **:data-[slot=icon-stack-layer]:fill-background relative h-20 w-18",
+        className
+      )}
+      style={
+        {
+          "--icon-stack-content-x": "71%",
+          "--icon-stack-content-y": "58%",
+          ...style,
+        } as React.CSSProperties
+      }
+      {...props}
+    >
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 72 81"
+        fill="none"
+        className="h-full w-full overflow-visible"
+      >
+        <ellipse
+          cx="36"
+          cy="76"
+          rx="30"
+          ry="7"
+          fill="currentColor"
+          fillOpacity="0.055"
+          className="blur-[4px]"
+        />
+
+        <IconStackLayer opacity="0.4" />
+        <IconStackLayer opacity="0.6" x={13.65} y={6.04} />
+        <IconStackLayer opacity="0.8" x={27.32} y={12.08} active />
+      </svg>
+
+      {children ? (
+        <div
+          data-slot="icon-stack-content"
+          className="text-muted-foreground pointer-events-none absolute top-[var(--icon-stack-content-y)] left-[var(--icon-stack-content-x)] flex -translate-x-1/2 -translate-y-1/2 scale-x-90 -skew-y-26 items-center justify-center"
+        >
+          {children}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function IconStackLayer({
+  active = false,
+  opacity,
+  x = 0,
+  y = 0,
+}: {
+  active?: boolean
+  opacity: string
+  x?: number
+  y?: number
+}) {
+  return (
+    <g opacity={opacity} transform={`translate(${x} ${y})`}>
+      <path
+        data-slot="icon-stack-layer"
+        d="M42.2538 2.046C41.4408 1.6325 40.3965 1.6677 39.2612 2.2424L7.9616 18.1934C5.3895 19.5039 3.301 23.1064 3.301 26.2322V64.3226C3.301 66.0677 3.9458 67.2943 4.962 67.8199L1.8363 66.229C0.8201 65.7104 0.1753 64.4771 0.1753 62.732V24.6412C0.1753 21.5085 2.2638 17.913 4.8359 16.6024L36.1355 0.6515C37.2778 0.0698 38.322 0.0416 39.128 0.4551L42.2538 2.046Z"
+        stroke="currentColor"
+        strokeOpacity={active ? "0.3" : "0.2"}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        data-slot="icon-stack-layer"
+        d="M42.2545 2.0456C43.2707 2.5643 43.9155 3.7979 43.9155 5.543V43.6337C43.9155 46.7665 41.827 50.3616 39.2549 51.6722L7.9554 67.6235C6.813 68.2052 5.7687 68.2331 4.9628 67.8196C3.9465 67.301 3.3018 66.0673 3.3018 64.3222V26.2318C3.3018 23.0991 5.3903 19.5036 7.9624 18.193L39.2619 2.2421C40.4043 1.6604 41.4486 1.6321 42.2545 2.0456Z"
+        stroke="currentColor"
+        strokeOpacity={active ? "0.3" : "0.2"}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  )
+}
+
+export { IconStack, type IconStackProps }
\ No newline at end of file
diff --git a/apps/web/src/components/reui/rating.tsx b/apps/web/src/components/reui/rating.tsx
new file mode 100644
index 0000000..e52118c
--- /dev/null
+++ b/apps/web/src/components/reui/rating.tsx
@@ -0,0 +1,166 @@
+"use client"
+
+import { useState } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { StarIcon } from "lucide-react"
+
+const ratingVariants = cva("flex items-center", {
+  variants: {
+    size: {
+      sm: "gap-2",
+      default: "gap-2.5",
+      lg: "gap-3",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+})
+
+const starVariants = cva("", {
+  variants: {
+    size: {
+      sm: "w-4 h-4",
+      default: "w-5 h-5",
+      lg: "w-6 h-6",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+})
+
+const valueVariants = cva("text-muted-foreground w-5", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      default: "text-sm",
+      lg: "text-base",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+})
+
+function Rating({
+  rating,
+  maxRating = 5,
+  size,
+  className,
+  starClassName,
+  showValue = false,
+  editable = false,
+  onRatingChange,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof ratingVariants> & {
+    /**
+     * Current rating value (supports decimal values for partial stars)
+     */
+    rating: number
+    /**
+     * Maximum rating value (number of stars to show)
+     */
+    maxRating?: number
+    /**
+     * Whether to show the numeric rating value
+     */
+    showValue?: boolean
+    /**
+     * Class name for the value span
+     */
+    starClassName?: string
+    /**
+     * Whether the rating is editable (clickable)
+     */
+    editable?: boolean
+    /**
+     * Callback function called when rating changes
+     */
+    onRatingChange?: (rating: number) => void
+  }) {
+  const [hoveredRating, setHoveredRating] = useState<number | null>(null)
+  const displayRating =
+    editable && hoveredRating !== null ? hoveredRating : rating
+
+  const handleStarClick = (starRating: number) => {
+    if (editable && onRatingChange) {
+      onRatingChange(starRating)
+    }
+  }
+
+  const handleStarMouseEnter = (starRating: number) => {
+    if (editable) {
+      setHoveredRating(starRating)
+    }
+  }
+
+  const handleStarMouseLeave = () => {
+    if (editable) {
+      setHoveredRating(null)
+    }
+  }
+
+  const renderStars = () => {
+    const stars = []
+
+    for (let i = 1; i <= maxRating; i++) {
+      const filled = displayRating >= i
+      const partiallyFilled = displayRating > i - 1 && displayRating < i
+      const fillPercentage = partiallyFilled
+        ? (displayRating - (i - 1)) * 100
+        : 0
+
+      stars.push(
+        <div
+          key={i}
+          className={cn("relative", editable && "cursor-pointer")}
+          onClick={() => handleStarClick(i)}
+          onMouseEnter={() => handleStarMouseEnter(i)}
+          onMouseLeave={handleStarMouseLeave}
+        >
+          {/* Background star (empty) */}
+          <StarIcon data-slot="rating-star-empty" className={cn(starVariants({ size }), "text-muted-foreground/30")} />
+
+          {/* Filled star */}
+          <div
+            className="absolute inset-0 overflow-hidden"
+            style={{
+              width: filled ? "100%" : `${fillPercentage}%`,
+            }}
+          >
+            <StarIcon data-slot="rating-star-filled" className={cn(
+                                  starVariants({ size }),
+                                  "fill-yellow-400 text-yellow-400"
+                                )} />
+          </div>
+        </div>
+      )
+    }
+
+    return stars
+  }
+
+  return (
+    <div
+      data-slot="rating"
+      className={cn(ratingVariants({ size }), className)}
+      {...props}
+    >
+      <div className="flex items-center">{renderStars()}</div>
+      {showValue && (
+        <span
+          data-slot="rating-value"
+          className={cn(valueVariants({ size }), starClassName)}
+        >
+          {displayRating.toFixed(1)}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export { Rating }
\ No newline at end of file
diff --git a/apps/web/src/components/schedule/schedule-agenda-panel.tsx b/apps/web/src/components/schedule/schedule-agenda-panel.tsx
new file mode 100644
index 0000000..09532bf
--- /dev/null
+++ b/apps/web/src/components/schedule/schedule-agenda-panel.tsx
@@ -0,0 +1,91 @@
+import { useMemo, useState } from 'react'
+import { format, isSameDay, parseISO } from 'date-fns'
+import { ru } from 'date-fns/locale'
+
+import { PanelCard } from '@/components/panel-card'
+import { StatusBadge } from '@/components/status-badge'
+import { Calendar } from '@evobgp/ui/components/calendar'
+import { ScrollArea } from '@evobgp/ui/components/scroll-area'
+import { jobKindRu } from '@/lib/ui-labels'
+import type { JobRow } from '@/types/api'
+
+/** schedule-1 inspired agenda: calendar + day job list. */
+export function ScheduleAgendaPanel({
+  jobs,
+  isLoading,
+}: {
+  jobs: JobRow[]
+  isLoading?: boolean
+}) {
+  const [date, setDate] = useState<Date>(new Date())
+
+  const dayJobs = useMemo(
+    () =>
+      jobs.filter((job) => {
+        const raw = job.created_at ?? job.started_at ?? job.finished_at
+        if (!raw) return false
+        try {
+          return isSameDay(parseISO(raw), date)
+        } catch {
+          return false
+        }
+      }),
+    [jobs, date],
+  )
+
+  const markedDays = useMemo(() => {
+    const days = new Set<string>()
+    for (const job of jobs) {
+      const raw = job.created_at ?? job.started_at ?? job.finished_at
+      if (!raw) continue
+      try {
+        days.add(format(parseISO(raw), 'yyyy-MM-dd'))
+      } catch {
+        /* skip */
+      }
+    }
+    return days
+  }, [jobs])
+
+  return (
+    <PanelCard
+      title="Календарь задач"
+      description="Задачи refresh и apply по дням (schedule-1 pattern)"
+      className="h-full"
+    >
+      <div className="grid gap-4 p-4 lg:grid-cols-[minmax(0,280px)_1fr]">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={(d) => d && setDate(d)}
+          locale={ru}
+          modifiers={{
+            hasJob: (d) => markedDays.has(format(d, 'yyyy-MM-dd')),
+          }}
+          modifiersClassNames={{ hasJob: 'font-bold underline' }}
+        />
+        <ScrollArea className="h-64 lg:h-auto">
+          {isLoading ? (
+            <p className="text-muted-foreground text-sm">Загрузка…</p>
+          ) : dayJobs.length === 0 ? (
+            <p className="text-muted-foreground text-sm">
+              Нет задач за {format(date, 'd MMMM yyyy', { locale: ru })}
+            </p>
+          ) : (
+            <ul className="space-y-2 pr-3">
+              {dayJobs.map((job) => (
+                <li key={job.job_id} className="rounded-lg border px-3 py-2 text-sm">
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="font-medium">{jobKindRu(job.kind)}</span>
+                    <StatusBadge status={job.status} />
+                  </div>
+                  <p className="text-muted-foreground mt-1 text-xs">{job.job_id}</p>
+                </li>
+              ))}
+            </ul>
+          )}
+        </ScrollArea>
+      </div>
+    </PanelCard>
+  )
+}
diff --git a/apps/web/src/components/settings/settings-setting-field.tsx b/apps/web/src/components/settings/settings-setting-field.tsx
new file mode 100644
index 0000000..9deaa61
--- /dev/null
+++ b/apps/web/src/components/settings/settings-setting-field.tsx
@@ -0,0 +1,57 @@
+import { type ComponentProps, type ReactNode } from 'react'
+
+import { Badge } from '@/components/reui/badge'
+import { cn } from '@evobgp/ui/lib/utils'
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+  FieldSeparator,
+  FieldTitle,
+} from '@evobgp/ui/components/field'
+
+/** settings-3 row pattern for tenant/UI settings. */
+export function SettingsSettingField({
+  title,
+  description,
+  badge,
+  children,
+  last,
+  labelFor,
+  contentClassName,
+}: {
+  title: string
+  description: string
+  badge?: { label: string; variant: ComponentProps<typeof Badge>['variant'] }
+  children: ReactNode
+  last?: boolean
+  labelFor?: string
+  contentClassName?: string
+}) {
+  return (
+    <>
+      <Field orientation="responsive" className="gap-4 px-4 py-4">
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5 @md/field-group:max-w-sm">
+          <div className="flex flex-wrap items-center gap-2">
+            {labelFor ? (
+              <FieldLabel htmlFor={labelFor}>{title}</FieldLabel>
+            ) : (
+              <FieldTitle>{title}</FieldTitle>
+            )}
+            {badge ? (
+              <Badge variant={badge.variant} size="sm">
+                {badge.label}
+              </Badge>
+            ) : null}
+          </div>
+          <FieldDescription className="text-xs">{description}</FieldDescription>
+        </div>
+        <FieldContent className={cn('min-w-0 @md/field-group:w-78', contentClassName)}>
+          {children}
+        </FieldContent>
+      </Field>
+      {!last ? <FieldSeparator /> : null}
+    </>
+  )
+}
diff --git a/apps/web/src/components/skeletons.tsx b/apps/web/src/components/skeletons.tsx
index 3fb080e..db0a505 100644
--- a/apps/web/src/components/skeletons.tsx
+++ b/apps/web/src/components/skeletons.tsx
@@ -1,6 +1,11 @@
 import { Skeleton } from '@evobgp/ui/components/skeleton'
 
 import { panelCardInsetClassName } from '@/components/panel-card'
+import {
+  chartPanelGridClassName,
+  dashboardMainSidebarClassName,
+  kpiGridClassName,
+} from '@/lib/ui-surface'
 import { SectionCards } from './section-cards'
 
 export function SectionCardsSkeleton({ count = 4 }: { count?: number }) {
@@ -15,16 +20,22 @@ export function SectionCardsSkeleton({ count = 4 }: { count?: number }) {
   )
 }
 
+/** Matches dashboard-5 / telemetry layout: KPI row, charts, main+sidebar, bottom grids. */
 export function AnalyticsDashboardSkeleton() {
   return (
-    <div className="flex flex-col gap-4">
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <Skeleton key={i} className="h-36 w-full rounded-xl" />
+    <div className="@container flex flex-col gap-4">
+      <div className={kpiGridClassName}>
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Skeleton key={`kpi-${i}`} className="h-36 w-full rounded-xl" />
         ))}
       </div>
 
-      <div className="grid gap-4 xl:grid-cols-12">
+      <div className={chartPanelGridClassName}>
+        <Skeleton className="h-72 w-full rounded-xl" />
+        <Skeleton className="h-72 w-full rounded-xl" />
+      </div>
+
+      <div className={dashboardMainSidebarClassName}>
         <Skeleton className="h-96 w-full rounded-xl xl:col-span-8" />
         <Skeleton className="h-96 w-full rounded-xl xl:col-span-4" />
       </div>
@@ -37,6 +48,16 @@ export function AnalyticsDashboardSkeleton() {
   )
 }
 
+export function KpiSparklineSkeleton({ count = 4 }: { count?: number }) {
+  return (
+    <div className={kpiGridClassName}>
+      {Array.from({ length: count }).map((_, i) => (
+        <Skeleton key={i} className="h-36 w-full rounded-xl" />
+      ))}
+    </div>
+  )
+}
+
 export function TableSkeleton({ rows = 6, cols = 4 }: { rows?: number; cols?: number }) {
   return (
     <div className="overflow-hidden rounded-xl ring-1 ring-foreground/10">
diff --git a/apps/web/src/components/ui/svgs/anthropicBlack.tsx b/apps/web/src/components/ui/svgs/anthropicBlack.tsx
new file mode 100644
index 0000000..ba88a16
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/anthropicBlack.tsx
@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+
+const AnthropicBlack = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    fillRule="evenodd"
+    style={{ flex: "none", lineHeight: "1" }}
+    viewBox="0 0 24 24"
+  >
+    <title>Anthropic</title>
+    <path d="M13.827 3.52h3.603L24 20h-3.603l-6.57-16.48zm-7.258 0h3.767L16.906 20h-3.674l-1.343-3.461H5.017l-1.344 3.46H0L6.57 3.522zm4.132 9.959L8.453 7.687 6.205 13.48H10.7z" />
+  </svg>
+);
+
+export { AnthropicBlack };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/anthropicWhite.tsx b/apps/web/src/components/ui/svgs/anthropicWhite.tsx
new file mode 100644
index 0000000..1049fe6
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/anthropicWhite.tsx
@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+const AnthropicWhite = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    fill="#ffff"
+    fillRule="evenodd"
+    style={{ flex: "none", lineHeight: "1" }}
+    viewBox="0 0 24 24"
+  >
+    <title>Anthropic</title>
+    <path d="M13.827 3.52h3.603L24 20h-3.603l-6.57-16.48zm-7.258 0h3.767L16.906 20h-3.674l-1.343-3.461H5.017l-1.344 3.46H0L6.57 3.522zm4.132 9.959L8.453 7.687 6.205 13.48H10.7z" />
+  </svg>
+);
+
+export { AnthropicWhite };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/convex.tsx b/apps/web/src/components/ui/svgs/convex.tsx
new file mode 100644
index 0000000..0b0cd4c
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/convex.tsx
@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+
+const Convex = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="28 28 128 132" fill="none">
+    <path
+      fill="#F3B01C"
+      d="M108.092 130.021c18.166-2.018 35.293-11.698 44.723-27.854-4.466 39.961-48.162 65.218-83.83 49.711-3.286-1.425-6.115-3.796-8.056-6.844-8.016-12.586-10.65-28.601-6.865-43.135 10.817 18.668 32.81 30.111 54.028 28.122Z"
+    />
+    <path
+      fill="#8D2676"
+      d="M53.401 90.174c-7.364 17.017-7.682 36.94 1.345 53.336-31.77-23.902-31.423-75.052-.388-98.715 2.87-2.187 6.282-3.485 9.86-3.683 14.713-.776 29.662 4.91 40.146 15.507-21.3.212-42.046 13.857-50.963 33.555Z"
+    />
+    <path
+      fill="#EE342F"
+      d="M114.637 61.855C103.89 46.87 87.069 36.668 68.639 36.358c35.625-16.17 79.446 10.047 84.217 48.807.444 3.598-.139 7.267-1.734 10.512-6.656 13.518-18.998 24.002-33.42 27.882 10.567-19.599 9.263-43.544-3.065-61.704Z"
+    />
+  </svg>
+);
+
+export { Convex };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/discord.tsx b/apps/web/src/components/ui/svgs/discord.tsx
new file mode 100644
index 0000000..1c6ba32
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/discord.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+const Discord = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 256 199" preserveAspectRatio="xMidYMid">
+    <path
+      d="M216.856 16.597A208.502 208.502 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0 0 79.735 175.3a136.413 136.413 0 0 1-21.846-10.632 108.636 108.636 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 0 0 5.355 4.237 136.07 136.07 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36ZM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18Zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18Z"
+      fill="#5865F2"
+    />
+  </svg>
+);
+
+export { Discord };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/gemini.tsx b/apps/web/src/components/ui/svgs/gemini.tsx
new file mode 100644
index 0000000..4a2bc07
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/gemini.tsx
@@ -0,0 +1,171 @@
+import type { SVGProps } from "react";
+
+const Gemini = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 296 298" fill="none">
+    <mask
+      id="a"
+      width="296"
+      height="298"
+      x="0"
+      y="0"
+      maskUnits="userSpaceOnUse"
+      style={{ maskType: "alpha" }}
+    >
+      <path
+        fill="#3186FF"
+        d="M141.201 4.886c2.282-6.17 11.042-6.071 13.184.148l5.985 17.37a184.004 184.004 0 0 0 111.257 113.049l19.304 6.997c6.143 2.227 6.156 10.91.02 13.155l-19.35 7.082a184.001 184.001 0 0 0-109.495 109.385l-7.573 20.629c-2.241 6.105-10.869 6.121-13.133.025l-7.908-21.296a184 184 0 0 0-109.02-108.658l-19.698-7.239c-6.102-2.243-6.118-10.867-.025-13.132l20.083-7.467A183.998 183.998 0 0 0 133.291 26.28l7.91-21.394Z"
+      />
+    </mask>
+    <g mask="url(#a)">
+      <g filter="url(#b)">
+        <ellipse cx="163" cy="149" fill="#3689FF" rx="196" ry="159" />
+      </g>
+      <g filter="url(#c)">
+        <ellipse cx="33.5" cy="142.5" fill="#F6C013" rx="68.5" ry="72.5" />
+      </g>
+      <g filter="url(#d)">
+        <ellipse cx="19.5" cy="148.5" fill="#F6C013" rx="68.5" ry="72.5" />
+      </g>
+      <g filter="url(#e)">
+        <path
+          fill="#FA4340"
+          d="M194 10.5C172 82.5 65.5 134.333 22.5 135L144-66l50 76.5Z"
+        />
+      </g>
+      <g filter="url(#f)">
+        <path
+          fill="#FA4340"
+          d="M190.5-12.5C168.5 59.5 62 111.333 19 112L140.5-89l50 76.5Z"
+        />
+      </g>
+      <g filter="url(#g)">
+        <path
+          fill="#14BB69"
+          d="M194.5 279.5C172.5 207.5 66 155.667 23 155l121.5 201 50-76.5Z"
+        />
+      </g>
+      <g filter="url(#h)">
+        <path
+          fill="#14BB69"
+          d="M196.5 320.5C174.5 248.5 68 196.667 25 196l121.5 201 50-76.5Z"
+        />
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="b"
+        width="464"
+        height="390"
+        x="-69"
+        y="-46"
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur
+          result="effect1_foregroundBlur_69_17998"
+          stdDeviation="18"
+        />
+      </filter>
+      <filter
+        id="c"
+        width="265"
+        height="273"
+        x="-99"
+        y="6"
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur
+          result="effect1_foregroundBlur_69_17998"
+          stdDeviation="32"
+        />
+      </filter>
+      <filter
+        id="d"
+        width="265"
+        height="273"
+        x="-113"
+        y="12"
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur
+          result="effect1_foregroundBlur_69_17998"
+          stdDeviation="32"
+        />
+      </filter>
+      <filter
+        id="e"
+        width="299.5"
+        height="329"
+        x="-41.5"
+        y="-130"
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur
+          result="effect1_foregroundBlur_69_17998"
+          stdDeviation="32"
+        />
+      </filter>
+      <filter
+        id="f"
+        width="299.5"
+        height="329"
+        x="-45"
+        y="-153"
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur
+          result="effect1_foregroundBlur_69_17998"
+          stdDeviation="32"
+        />
+      </filter>
+      <filter
+        id="g"
+        width="299.5"
+        height="329"
+        x="-41"
+        y="91"
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur
+          result="effect1_foregroundBlur_69_17998"
+          stdDeviation="32"
+        />
+      </filter>
+      <filter
+        id="h"
+        width="299.5"
+        height="329"
+        x="-39"
+        y="132"
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur
+          result="effect1_foregroundBlur_69_17998"
+          stdDeviation="32"
+        />
+      </filter>
+    </defs>
+  </svg>
+);
+
+export { Gemini };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/googleCloud.tsx b/apps/web/src/components/ui/svgs/googleCloud.tsx
new file mode 100644
index 0000000..f2a6a8a
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/googleCloud.tsx
@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+
+const GoogleCloud = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 -25 256 256">
+    <path
+      fill="#EA4335"
+      d="m170.252 56.819 22.253-22.253 1.483-9.37C153.437-11.677 88.976-7.496 52.42 33.92 42.267 45.423 34.734 59.764 30.717 74.573l7.97-1.123 44.505-7.34 3.436-3.513c19.797-21.742 53.27-24.667 76.128-6.168l7.496.39Z"
+    />
+    <path
+      fill="#4285F4"
+      d="M224.205 73.918a100.249 100.249 0 0 0-30.217-48.722l-31.232 31.232a55.515 55.515 0 0 1 20.379 44.037v5.544c15.35 0 27.797 12.445 27.797 27.796 0 15.352-12.446 27.485-27.797 27.485h-55.671l-5.466 5.934v33.34l5.466 5.231h55.67c39.93.311 72.553-31.494 72.864-71.424a72.303 72.303 0 0 0-31.793-60.453"
+    />
+    <path
+      fill="#34A853"
+      d="M71.87 205.796h55.593V161.29H71.87a27.275 27.275 0 0 1-11.399-2.498l-7.887 2.42-22.409 22.253-1.952 7.574c12.567 9.489 27.9 14.825 43.647 14.757"
+    />
+    <path
+      fill="#FBBC05"
+      d="M71.87 61.425C31.94 61.664-.237 94.228.001 134.159a72.301 72.301 0 0 0 28.222 56.88l32.248-32.246c-13.99-6.322-20.208-22.786-13.887-36.776 6.32-13.99 22.786-20.208 36.775-13.888a27.796 27.796 0 0 1 13.887 13.888l32.248-32.248A72.224 72.224 0 0 0 71.87 61.425"
+    />
+  </svg>
+);
+
+export { GoogleCloud };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/hono.tsx b/apps/web/src/components/ui/svgs/hono.tsx
new file mode 100644
index 0000000..4dda4be
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/hono.tsx
@@ -0,0 +1,17 @@
+import type { SVGProps } from "react";
+
+const Hono = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 330">
+    <path
+      d="M134.129.029c.876-.113 1.65.108 2.319.662a1256.253 1256.253 0 0 1 69.573 93.427c16.094 24.231 29.788 49.851 41.082 76.862 18.037 48.108 8.65 89.963-28.16 125.564-32.209 27.22-69.314 37.822-111.318 31.805-50.208-10.237-84.332-39.28-102.373-87.133C.553 225.638-.993 209.736.614 193.51c2.676-27.93 9.302-54.877 19.878-80.838 4.407-10.592 10.15-20.31 17.228-29.154a381.88 381.88 0 0 1 16.565 21.203c2.44 2.55 4.98 4.98 7.62 7.289C82.06 72.01 106.135 34.685 134.13.029Z"
+      fill="#FF5B11"
+      opacity=".993"
+    />
+    <path
+      d="M129.49 53.7c24.314 28.2 46.29 58.238 65.93 90.114a187.318 187.318 0 0 1 15.24 33.13c8.338 32.804-.607 59.86-26.836 81.169-25.367 17.85-53.196 23.15-83.488 15.902-32.666-10.136-51.55-32.113-56.653-65.929-1.238-10.662-.133-21.043 3.314-31.142a225.41 225.41 0 0 1 17.89-35.78l19.878-29.155a5509.508 5509.508 0 0 0 44.726-58.31Z"
+      fill="#FF9758"
+    />
+  </svg>
+);
+
+export { Hono };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/loom.tsx b/apps/web/src/components/ui/svgs/loom.tsx
new file mode 100644
index 0000000..f2a8ae9
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/loom.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+const Loom = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 256 256" preserveAspectRatio="xMidYMid">
+    <path
+      fill="#625DF5"
+      d="M256 113.765h-74.858l64.83-37.43-14.237-24.667-64.83 37.43 37.421-64.825-24.667-14.246-37.421 64.826V0h-28.476v74.86L76.326 10.027 51.667 24.266 89.096 89.09 24.265 51.668l-14.238 24.66 64.83 37.43H0v28.477h74.85l-64.823 37.43 14.238 24.667 64.824-37.423-37.43 64.825 24.667 14.239 37.429-64.832V256h28.476v-74.853l37.422 64.826 24.665-14.239-37.428-64.832 64.83 37.43 14.24-24.667-64.825-37.423h74.85v-28.477H256ZM128 166.73c-21.472 0-38.876-17.403-38.876-38.876 0-21.472 17.404-38.876 38.876-38.876 21.472 0 38.875 17.404 38.875 38.876 0 21.473-17.403 38.876-38.875 38.876Z"
+    />
+  </svg>
+);
+
+export { Loom };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/mintlify.tsx b/apps/web/src/components/ui/svgs/mintlify.tsx
new file mode 100644
index 0000000..3c32573
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/mintlify.tsx
@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+
+const Mintlify = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 19 19" fill="none">
+    <path
+      d="M18.367 7.28888V1.59755C18.367 0.986819 17.8715 0.5 17.2699 0.5H11.5812C10.6877 0.5 9.80295 0.677018 8.98017 1.01336C8.15738 1.35856 7.40539 1.85424 6.77724 2.49152L6.733 2.53578C5.90137 3.37664 5.30862 4.42108 5.00781 5.57174C5.54749 5.43012 6.10483 5.35931 6.6622 5.35046C8.14852 5.33276 9.60831 5.81073 10.7938 6.7047C11.8643 7.50131 12.6783 8.59885 13.1206 9.86458C13.5807 11.148 13.6337 12.5465 13.2887 13.8653C14.43 13.5644 15.4828 12.9714 16.3233 12.1393L16.3675 12.0951C16.9957 11.4667 17.4999 10.7143 17.845 9.89114C18.19 9.06797 18.3581 8.18285 18.3581 7.28888H18.367Z"
+      fill="#18E299"
+    />
+    <path
+      d="M4.83793 7.193C4.84674 5.44706 5.54303 3.77167 6.76814 2.51953L2.03511 7.25472C2.01749 7.27236 1.99985 7.28117 1.98222 7.29881C0.827615 8.44513 0.131342 9.97945 0.0167623 11.6019C-0.0890033 13.1186 0.307609 14.6176 1.15373 15.8698C1.23444 15.9892 1.45343 16.0285 1.57682 15.9139L4.47656 13.0216C5.38438 12.1134 5.66643 10.7642 5.23455 9.55618C4.96132 8.80666 4.82912 8.00424 4.83793 7.193Z"
+      fill="#0C8C5E"
+    />
+    <path
+      d="M16.341 12.0938C15.4332 12.9844 14.2962 13.6016 13.0623 13.875C11.8195 14.1483 10.5327 14.0689 9.33405 13.6457C9.33405 13.6457 9.32522 13.6457 9.31641 13.6457C8.10892 13.2136 6.76042 13.4958 5.8526 14.3952L2.95282 17.2875C2.82943 17.4109 2.84706 17.6137 2.99689 17.7107C4.24845 18.5484 5.74683 18.954 7.26281 18.8482C8.88455 18.7336 10.4093 18.037 11.5639 16.8818L11.608 16.8378L16.341 12.1026V12.0938Z"
+      fill="#0C8C5E"
+    />
+  </svg>
+);
+
+export { Mintlify };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/n8n.tsx b/apps/web/src/components/ui/svgs/n8n.tsx
new file mode 100644
index 0000000..08d99a6
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/n8n.tsx
@@ -0,0 +1,14 @@
+import type { SVGProps } from "react";
+
+const N8n = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 228 120">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M204 48C192.817 48 183.42 40.3514 180.756 30H153.248C147.382 30 142.376 34.241 141.412 40.0272L140.425 45.9456C139.489 51.5648 136.646 56.4554 132.626 60C136.646 63.5446 139.489 68.4352 140.425 74.0544L141.412 79.9728C142.376 85.759 147.382 90 153.248 90H156.756C159.42 79.6486 168.817 72 180 72C193.255 72 204 82.7452 204 96C204 109.255 193.255 120 180 120C168.817 120 159.42 112.351 156.756 102H153.248C141.516 102 131.504 93.5181 129.575 81.9456L128.588 76.0272C127.624 70.241 122.618 66 116.752 66H107.244C104.58 76.3514 95.183 84 84 84C72.817 84 63.4204 76.3514 60.7561 66H47.2439C44.5796 76.3514 35.183 84 24 84C10.7452 84 0 73.2548 0 60C0 46.7452 10.7452 36 24 36C35.183 36 44.5796 43.6486 47.2439 54H60.7561C63.4204 43.6486 72.817 36 84 36C95.183 36 104.58 43.6486 107.244 54H116.752C122.618 54 127.624 49.759 128.588 43.9728L129.575 38.0544C131.504 26.4819 141.516 18 153.248 18L180.756 18C183.42 7.64864 192.817 0 204 0C217.255 0 228 10.7452 228 24C228 37.2548 217.255 48 204 48ZM204 36C210.627 36 216 30.6274 216 24C216 17.3726 210.627 12 204 12C197.373 12 192 17.3726 192 24C192 30.6274 197.373 36 204 36ZM24 72C30.6274 72 36 66.6274 36 60C36 53.3726 30.6274 48 24 48C17.3726 48 12 53.3726 12 60C12 66.6274 17.3726 72 24 72ZM96 60C96 66.6274 90.6274 72 84 72C77.3726 72 72 66.6274 72 60C72 53.3726 77.3726 48 84 48C90.6274 48 96 53.3726 96 60ZM192 96C192 102.627 186.627 108 180 108C173.373 108 168 102.627 168 96C168 89.3726 173.373 84 180 84C186.627 84 192 89.3726 192 96Z"
+      fill="#ea4b71"
+    />
+  </svg>
+);
+
+export { N8n };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/neon.tsx b/apps/web/src/components/ui/svgs/neon.tsx
new file mode 100644
index 0000000..5a1e451
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/neon.tsx
@@ -0,0 +1,35 @@
+import type { SVGProps } from "react";
+
+const Neon = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 256 256" preserveAspectRatio="xMidYMid">
+    <defs>
+      <linearGradient id="a" x1="100%" x2="12.069%" y1="100%" y2="0%">
+        <stop offset="0%" stopColor="#62F755" />
+        <stop offset="100%" stopColor="#8FF986" stopOpacity="0" />
+      </linearGradient>
+      <linearGradient id="b" x1="100%" x2="40.603%" y1="100%" y2="76.897%">
+        <stop offset="0%" stopOpacity=".9" />
+        <stop offset="100%" stopColor="#1A1A1A" stopOpacity="0" />
+      </linearGradient>
+    </defs>
+    <path
+      fill="#00E0D9"
+      d="M0 44.139C0 19.762 19.762 0 44.139 0H211.86C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723h-76.36C19.763 256 0 236.238 0 211.861V44.14Zm44.139-8.825c-4.879 0-8.825 3.946-8.825 8.818v167.73c0 4.878 3.946 8.831 8.818 8.831h77.688c2.44 0 3.087-1.977 3.087-4.416v-101.22c0-25.222 31.914-36.166 47.395-16.255l48.391 62.243V44.14c0-4.879.455-8.825-4.416-8.825H44.14Z"
+    />
+    <path
+      fill="url(#a)"
+      d="M0 44.139C0 19.762 19.762 0 44.139 0H211.86C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723h-76.36C19.763 256 0 236.238 0 211.861V44.14Zm44.139-8.825c-4.879 0-8.825 3.946-8.825 8.818v167.73c0 4.878 3.946 8.831 8.818 8.831h77.688c2.44 0 3.087-1.977 3.087-4.416v-101.22c0-25.222 31.914-36.166 47.395-16.255l48.391 62.243V44.14c0-4.879.455-8.825-4.416-8.825H44.14Z"
+    />
+    <path
+      fill="url(#b)"
+      fillOpacity=".4"
+      d="M0 44.139C0 19.762 19.762 0 44.139 0H211.86C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723h-76.36C19.763 256 0 236.238 0 211.861V44.14Zm44.139-8.825c-4.879 0-8.825 3.946-8.825 8.818v167.73c0 4.878 3.946 8.831 8.818 8.831h77.688c2.44 0 3.087-1.977 3.087-4.416v-101.22c0-25.222 31.914-36.166 47.395-16.255l48.391 62.243V44.14c0-4.879.455-8.825-4.416-8.825H44.14Z"
+    />
+    <path
+      fill="#63F655"
+      d="M211.861 0C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723a4.409 4.409 0 0 0 4.409-4.409V115.058c0-25.223 31.914-36.167 47.395-16.256l48.391 62.243V8.825c0-4.871-3.953-8.825-8.832-8.825Z"
+    />
+  </svg>
+);
+
+export { Neon };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/openai.tsx b/apps/web/src/components/ui/svgs/openai.tsx
new file mode 100644
index 0000000..8ffb1ed
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/openai.tsx
@@ -0,0 +1,9 @@
+import type { SVGProps } from "react";
+
+const Openai = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 260">
+    <path d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z" />
+  </svg>
+);
+
+export { Openai };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/openaiDark.tsx b/apps/web/src/components/ui/svgs/openaiDark.tsx
new file mode 100644
index 0000000..f70bd96
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/openaiDark.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+const OpenaiDark = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 260">
+    <path
+      fill="#fff"
+      d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z"
+    />
+  </svg>
+);
+
+export { OpenaiDark };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/paper.tsx b/apps/web/src/components/ui/svgs/paper.tsx
new file mode 100644
index 0000000..5ee333e
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/paper.tsx
@@ -0,0 +1,9 @@
+import type { SVGProps } from "react";
+
+const Paper = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 39 39" fill="none">
+    <path d="M39 24H24V6H6V24H24V39H0V6H6V0H39V24Z" fill="#81ADEC" />
+  </svg>
+);
+
+export { Paper };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/planetscale.tsx b/apps/web/src/components/ui/svgs/planetscale.tsx
new file mode 100644
index 0000000..9fcb46e
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/planetscale.tsx
@@ -0,0 +1,9 @@
+import type { SVGProps } from "react";
+
+const Planetscale = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 256">
+    <path d="M256 128a128 128 0 01-128 128zM128 0c52 0 96.7 31 116.8 75.5L75.5 244.8c-7.3-3.3-14.2-7.2-20.7-11.7L160 128h-32l-90.5 90.5A128 128 0 01128 0z" />
+  </svg>
+);
+
+export { Planetscale };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/planetscaleDark.tsx b/apps/web/src/components/ui/svgs/planetscaleDark.tsx
new file mode 100644
index 0000000..c0c1759
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/planetscaleDark.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+const PlanetscaleDark = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 256">
+    <path
+      fill="#fff"
+      d="M256 128a128 128 0 01-128 128zM128 0c52 0 96.7 31 116.8 75.5L75.5 244.8c-7.3-3.3-14.2-7.2-20.7-11.7L160 128h-32l-90.5 90.5A128 128 0 01128 0z"
+    />
+  </svg>
+);
+
+export { PlanetscaleDark };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/prisma.tsx b/apps/web/src/components/ui/svgs/prisma.tsx
new file mode 100644
index 0000000..e603299
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/prisma.tsx
@@ -0,0 +1,9 @@
+import type { SVGProps } from "react";
+
+const Prisma = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 256 310" preserveAspectRatio="xMidYMid">
+    <path d="M254.313 235.519L148 9.749A17.063 17.063 0 00133.473.037a16.87 16.87 0 00-15.533 8.052L2.633 194.848a17.465 17.465 0 00.193 18.747L59.2 300.896a18.13 18.13 0 0020.363 7.489l163.599-48.392a17.929 17.929 0 0011.26-9.722 17.542 17.542 0 00-.101-14.76l-.008.008zm-23.802 9.683l-138.823 41.05c-4.235 1.26-8.3-2.411-7.419-6.685l49.598-237.484c.927-4.443 7.063-5.147 9.003-1.035l91.814 194.973a6.63 6.63 0 01-4.18 9.18h.007z" />
+  </svg>
+);
+
+export { Prisma };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/prismaDark.tsx b/apps/web/src/components/ui/svgs/prismaDark.tsx
new file mode 100644
index 0000000..cf67c85
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/prismaDark.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+const PrismaDark = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 256 310" preserveAspectRatio="xMidYMid">
+    <path
+      fill="#fff"
+      d="M254.313 235.519L148 9.749A17.063 17.063 0 00133.473.037a16.87 16.87 0 00-15.533 8.052L2.633 194.848a17.465 17.465 0 00.193 18.747L59.2 300.896a18.13 18.13 0 0020.363 7.489l163.599-48.392a17.929 17.929 0 0011.26-9.722 17.542 17.542 0 00-.101-14.76l-.008.008zm-23.802 9.683l-138.823 41.05c-4.235 1.26-8.3-2.411-7.419-6.685l49.598-237.484c.927-4.443 7.063-5.147 9.003-1.035l91.814 194.973a6.63 6.63 0 01-4.18 9.18h.007z"
+    />
+  </svg>
+);
+
+export { PrismaDark };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/remixDark.tsx b/apps/web/src/components/ui/svgs/remixDark.tsx
new file mode 100644
index 0000000..3ac18ab
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/remixDark.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+const RemixDark = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 256 297">
+    <path
+      d="M141.675 0C218.047 0 256 36.35 256 94.414c0 43.43-26.707 71.753-62.785 76.474 30.455 6.137 48.259 23.604 51.54 58.065l.474 6.337.415 5.924.358 5.542.249 4.179.267 4.93.138 2.814.198 4.47.159 4.222.079 2.427.107 3.888.092 4.446.033 2.148.06 6.226.02 6.496v3.885h-78.758l.004-1.62.028-3.147.047-3.065.136-7.424.035-2.489.027-3.902-.004-2.496-.023-2.617-.032-2.054-.064-2.876-.094-3.05-.125-3.242-.16-3.455-.096-1.813-.16-2.833-.186-2.976-.287-4.204-.247-3.342a116.56 116.56 0 0 0-.247-3.02l-.202-1.934c-2.6-22.827-11.655-32.157-27.163-35.269l-1.307-.245a60.184 60.184 0 0 0-2.704-.408l-1.397-.164c-.236-.025-.472-.05-.71-.073l-1.442-.127-1.471-.103-1.502-.081-1.514-.058-1.544-.039-1.574-.018L0 198.74V136.9h127.62c2.086 0 4.108-.04 6.066-.12l1.936-.095 1.893-.122 1.85-.15c.305-.028.608-.056.909-.086l1.785-.193a86.3 86.3 0 0 0 3.442-.475l1.657-.28c20.709-3.755 31.063-14.749 31.063-36.2 0-24.075-16.867-38.666-50.602-38.666H0V0h141.675ZM83.276 250.785c10.333 0 14.657 5.738 16.197 11.23l.203.79.167.782.109.617.046.306.078.603.058.59.023.29.031.569.01.278.008.54v29.507H0v-46.102h83.276Z"
+      fill="#ffff"
+    />
+  </svg>
+);
+
+export { RemixDark };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/remixLight.tsx b/apps/web/src/components/ui/svgs/remixLight.tsx
new file mode 100644
index 0000000..ca4e781
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/remixLight.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+const RemixLight = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 256 297">
+    <path
+      d="M141.675 0C218.047 0 256 36.35 256 94.414c0 43.43-26.707 71.753-62.785 76.474 30.455 6.137 48.259 23.604 51.54 58.065l.474 6.337.415 5.924.358 5.542.249 4.179.267 4.93.138 2.814.198 4.47.159 4.222.079 2.427.107 3.888.092 4.446.033 2.148.06 6.226.02 6.496v3.885h-78.758l.004-1.62.028-3.147.047-3.065.136-7.424.035-2.489.027-3.902-.004-2.496-.023-2.617-.032-2.054-.064-2.876-.094-3.05-.125-3.242-.16-3.455-.096-1.813-.16-2.833-.186-2.976-.287-4.204-.247-3.342a116.56 116.56 0 0 0-.247-3.02l-.202-1.934c-2.6-22.827-11.655-32.157-27.163-35.269l-1.307-.245a60.184 60.184 0 0 0-2.704-.408l-1.397-.164c-.236-.025-.472-.05-.71-.073l-1.442-.127-1.471-.103-1.502-.081-1.514-.058-1.544-.039-1.574-.018L0 198.74V136.9h127.62c2.086 0 4.108-.04 6.066-.12l1.936-.095 1.893-.122 1.85-.15c.305-.028.608-.056.909-.086l1.785-.193a86.3 86.3 0 0 0 3.442-.475l1.657-.28c20.709-3.755 31.063-14.749 31.063-36.2 0-24.075-16.867-38.666-50.602-38.666H0V0h141.675ZM83.276 250.785c10.333 0 14.657 5.738 16.197 11.23l.203.79.167.782.109.617.046.306.078.603.058.59.023.29.031.569.01.278.008.54v29.507H0v-46.102h83.276Z"
+      fill="#121212"
+    />
+  </svg>
+);
+
+export { RemixLight };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/resendIconBlack.tsx b/apps/web/src/components/ui/svgs/resendIconBlack.tsx
new file mode 100644
index 0000000..5b1e85f
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/resendIconBlack.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+const ResendIconBlack = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 1800 1800" fill="none">
+    <path
+      d="M1000.46 450C1174.77 450 1278.43 553.669 1278.43 691.282C1278.43 828.896 1174.77 932.563 1000.46 932.563H912.382L1350 1350H1040.82L707.794 1033.48C683.944 1011.47 672.936 985.781 672.935 963.765C672.935 932.572 694.959 905.049 737.161 893.122L908.712 847.244C973.85 829.812 1018.81 779.353 1018.81 713.298C1018.8 632.567 952.745 585.78 871.095 585.78H450V450H1000.46Z"
+      fill="black"
+    />
+  </svg>
+);
+
+export { ResendIconBlack };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/resendIconWhite.tsx b/apps/web/src/components/ui/svgs/resendIconWhite.tsx
new file mode 100644
index 0000000..06de3a1
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/resendIconWhite.tsx
@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+const ResendIconWhite = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 1800 1800" fill="none">
+    <path
+      d="M1000.46 450C1174.77 450 1278.43 553.669 1278.43 691.282C1278.43 828.896 1174.77 932.563 1000.46 932.563H912.382L1350 1350H1040.82L707.794 1033.48C683.944 1011.47 672.936 985.781 672.935 963.765C672.935 932.572 694.959 905.049 737.161 893.122L908.712 847.244C973.85 829.812 1018.81 779.353 1018.81 713.298C1018.8 632.567 952.745 585.78 871.095 585.78H450V450H1000.46Z"
+      fill="#FDFDFD"
+    />
+  </svg>
+);
+
+export { ResendIconWhite };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/slack.tsx b/apps/web/src/components/ui/svgs/slack.tsx
new file mode 100644
index 0000000..b1025c9
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/slack.tsx
@@ -0,0 +1,26 @@
+import type { SVGProps } from "react";
+
+const Slack = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 2447.6 2452.5">
+    <g clipRule="evenodd" fillRule="evenodd">
+      <path
+        d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
+        fill="#36c5f0"
+      />
+      <path
+        d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
+        fill="#2eb67d"
+      />
+      <path
+        d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
+        fill="#ecb22e"
+      />
+      <path
+        d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
+        fill="#e01e5a"
+      />
+    </g>
+  </svg>
+);
+
+export { Slack };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/stripe.tsx b/apps/web/src/components/ui/svgs/stripe.tsx
new file mode 100644
index 0000000..b293b53
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/stripe.tsx
@@ -0,0 +1,14 @@
+import type { SVGProps } from "react";
+
+const Stripe = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} fill="none" viewBox="100 100 312 312">
+    <path
+      fill="#533afd"
+      fillRule="evenodd"
+      d="m120 392 272-57.683V120l-272 58.357z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export { Stripe };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/supabase.tsx b/apps/web/src/components/ui/svgs/supabase.tsx
new file mode 100644
index 0000000..bee6dd3
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/supabase.tsx
@@ -0,0 +1,45 @@
+import type { SVGProps } from "react";
+
+const Supabase = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 109 113" fill="none">
+    <path
+      d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z"
+      fill="url(#paint0_linear)"
+    />
+    <path
+      d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z"
+      fill="url(#paint1_linear)"
+      fillOpacity="0.2"
+    />
+    <path
+      d="M45.317 2.07103C48.1765 -1.53037 53.9745 0.442937 54.0434 5.041L54.4849 72.2922H9.83113C1.64038 72.2922 -2.92775 62.8321 2.1655 56.4175L45.317 2.07103Z"
+      fill="#3ECF8E"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear"
+        x1="53.9738"
+        y1="54.974"
+        x2="94.1635"
+        y2="71.8295"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#249361" />
+        <stop offset="1" stopColor="#3ECF8E" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear"
+        x1="36.1558"
+        y1="30.578"
+        x2="54.4844"
+        y2="65.0806"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop />
+        <stop offset="1" stopOpacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export { Supabase };
\ No newline at end of file
diff --git a/apps/web/src/components/ui/svgs/zoom.tsx b/apps/web/src/components/ui/svgs/zoom.tsx
new file mode 100644
index 0000000..c33d6c3
--- /dev/null
+++ b/apps/web/src/components/ui/svgs/zoom.tsx
@@ -0,0 +1,39 @@
+import { useId, type SVGProps } from "react"
+
+const Zoom = (props: SVGProps<SVGSVGElement>) => {
+  const gradientId = useId()
+
+  return (
+    <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 256">
+      <defs>
+        <linearGradient
+          id={gradientId}
+          x1="23.666%"
+          x2="76.334%"
+          y1="95.6118%"
+          y2="4.3882%"
+        >
+          <stop offset=".00006%" stopColor="#0845BF" />
+          <stop offset="19.11%" stopColor="#0950DE" />
+          <stop offset="38.23%" stopColor="#0B59F6" />
+          <stop offset="50%" stopColor="#0B5CFF" />
+          <stop offset="67.32%" stopColor="#0E5EFE" />
+          <stop offset="77.74%" stopColor="#1665FC" />
+          <stop offset="86.33%" stopColor="#246FF9" />
+          <stop offset="93.88%" stopColor="#387FF4" />
+          <stop offset="100%" stopColor="#4F90EE" />
+        </linearGradient>
+      </defs>
+      <path
+        fill={`url(#${gradientId})`}
+        d="M256 128c0 13.568-1.024 27.136-3.328 40.192-6.912 43.264-41.216 77.568-84.48 84.48C155.136 254.976 141.568 256 128 256c-13.568 0-27.136-1.024-40.192-3.328-43.264-6.912-77.568-41.216-84.48-84.48C1.024 155.136 0 141.568 0 128c0-13.568 1.024-27.136 3.328-40.192 6.912-43.264 41.216-77.568 84.48-84.48C100.864 1.024 114.432 0 128 0c13.568 0 27.136 1.024 40.192 3.328 43.264 6.912 77.568 41.216 84.48 84.48C254.976 100.864 256 114.432 256 128Z"
+      />
+      <path
+        fill="#FFF"
+        d="M204.032 207.872H75.008c-8.448 0-16.64-4.608-20.48-12.032-4.608-8.704-2.816-19.2 4.096-26.112l89.856-89.856H83.968c-17.664 0-32-14.336-32-32h118.784c8.448 0 16.64 4.608 20.48 12.032 4.608 8.704 2.816 19.2-4.096 26.112l-89.6 90.112h74.496c17.664 0 32 14.08 32 31.744Z"
+      />
+    </svg>
+  )
+}
+
+export { Zoom }
\ No newline at end of file
diff --git a/apps/web/src/hooks/use-copy-to-clipboard.ts b/apps/web/src/hooks/use-copy-to-clipboard.ts
new file mode 100644
index 0000000..ebabe90
--- /dev/null
+++ b/apps/web/src/hooks/use-copy-to-clipboard.ts
@@ -0,0 +1,37 @@
+"use client"
+
+import { useState } from "react"
+
+export function useCopyToClipboard({
+  timeout = 2000,
+  onCopy,
+}: {
+  timeout?: number
+  onCopy?: () => void
+} = {}) {
+  const [isCopied, setIsCopied] = useState(false)
+
+  const copyToClipboard = (value: string) => {
+    if (typeof window === "undefined" || !navigator.clipboard.writeText) {
+      return
+    }
+
+    if (!value) return
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true)
+
+      if (onCopy) {
+        onCopy()
+      }
+
+      if (timeout !== 0) {
+        setTimeout(() => {
+          setIsCopied(false)
+        }, timeout)
+      }
+    }, console.error)
+  }
+
+  return { isCopied, copyToClipboard }
+}
\ No newline at end of file
diff --git a/apps/web/src/hooks/use-mobile.ts b/apps/web/src/hooks/use-mobile.ts
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/apps/web/src/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/apps/web/src/lib/ui-surface.ts b/apps/web/src/lib/ui-surface.ts
new file mode 100644
index 0000000..5da44d4
--- /dev/null
+++ b/apps/web/src/lib/ui-surface.ts
@@ -0,0 +1,26 @@
+/**
+ * EvoBGP UI surface contract (ReUI Pro).
+ *
+ * Primary surface: **Card** via `PanelCard` / `DataGridCard`.
+ * All route-level panels, KPI tiles, charts and data grids use shadcn Card —
+ * not ReUI Frame — for visual consistency across screens.
+ *
+ * ReUI Frame blocks from registry are adapted into Card composition when installed.
+ *
+ * @see https://reui.io/blocks — card category
+ * @see `.agents/skills/shadcn-react/SKILL.md`
+ */
+export const UI_SURFACE = 'card' as const
+
+/** Shared padding for KPI / metric tiles inside PanelCard. */
+export const kpiCardContentClassName = 'flex flex-col items-start gap-4 p-5'
+
+/** Grid for dashboard-5 style KPI sparkline row (4 columns at xl). */
+export const kpiGridClassName =
+  'grid grid-cols-1 gap-4 @3xl:grid-cols-2 @6xl:grid-cols-4'
+
+/** Two-column chart panel row (monitoring / network overview). */
+export const chartPanelGridClassName = 'grid grid-cols-1 gap-4 @5xl:grid-cols-2'
+
+/** Main + sidebar layout (8+4) used on dashboard. */
+export const dashboardMainSidebarClassName = 'grid gap-4 xl:grid-cols-12 xl:items-start'
diff --git a/apps/web/src/routes/_auth/dashboard.tsx b/apps/web/src/routes/_auth/dashboard.tsx
index 5dfc8b3..cab046f 100644
--- a/apps/web/src/routes/_auth/dashboard.tsx
+++ b/apps/web/src/routes/_auth/dashboard.tsx
@@ -8,7 +8,7 @@ import { Skeleton } from '@evobgp/ui/components/skeleton'
 
 import { DashboardActivityTimeline } from '@/components/dashboard/dashboard-activity-timeline'
 import { DashboardFramePanel } from '@/components/dashboard/dashboard-frame-panel'
-import { DashboardKpiGrid } from '@/components/dashboard/dashboard-kpi-grid'
+import { DashboardKpiSparklineRow } from '@/components/dashboard/dashboard-kpi-sparkline-row'
 import { DashboardModulesGrid } from '@/components/dashboard/dashboard-modules-grid'
 import { DashboardNetworkHealth } from '@/components/dashboard/dashboard-network-health'
 import { DashboardOperationsBreakdown } from '@/components/dashboard/dashboard-operations-breakdown'
@@ -18,6 +18,7 @@ import { DashboardRecentRevisionsGrid } from '@/components/dashboard/dashboard-r
 import { PageHeader } from '@/components/page-header'
 import { AnalyticsDashboardSkeleton } from '@/components/skeletons'
 
+import { chartPanelGridClassName, dashboardMainSidebarClassName } from '@/lib/ui-surface'
 import {
   moduleNameById,
   overviewJobsQueryOptions,
@@ -91,14 +92,14 @@ function DashboardComponent() {
         <AnalyticsDashboardSkeleton />
       ) : (
         <>
-          <DashboardKpiGrid
+          <DashboardKpiSparklineRow
             modules={modules}
             peers={peers}
             speakers={speakers}
             jobs={jobs}
           />
 
-          <div className="grid gap-4 xl:grid-cols-12 xl:items-start">
+          <div className={dashboardMainSidebarClassName}>
             <div className="xl:col-span-8">
               <DashboardModulesGrid modules={modules} isLoading={refreshing} />
             </div>
@@ -112,7 +113,7 @@ function DashboardComponent() {
             </div>
           </div>
 
-          <div className="grid gap-4 lg:grid-cols-2">
+          <div className={chartPanelGridClassName}>
             <DashboardNetworkHealth peers={peers} speakers={speakers} jobs={jobs} />
             <DashboardOperationsBreakdown jobs={jobs} modules={modules} />
           </div>
diff --git a/apps/web/src/routes/_auth/modules/index.tsx b/apps/web/src/routes/_auth/modules/index.tsx
index 4e1f8bb..8bfe081 100644
--- a/apps/web/src/routes/_auth/modules/index.tsx
+++ b/apps/web/src/routes/_auth/modules/index.tsx
@@ -5,6 +5,7 @@ import { Plus, RefreshCw } from 'lucide-react'
 import { Button } from '@evobgp/ui/components/button'
 
 import { DataGridCard } from '@/components/data-grid-shell'
+import { ProjectsEmptyState } from '@/components/patterns/projects-empty-state'
 import { ModulesListGrid } from '@/components/modules/modules-list-grid'
 import { PageHeader } from '@/components/page-header'
 import { QueryState } from '@/components/query-state'
@@ -53,8 +54,7 @@ function ModulesListComponent() {
           isError={query.isError}
           error={query.error}
           empty={query.data?.items?.length === 0}
-          emptyTitle="Нет модулей"
-          emptyDescription="Создайте первый модуль (AS, CDN, домены, IP)."
+          emptyContent={<ProjectsEmptyState />}
           skeleton={<TableSkeleton rows={6} cols={5} />}
           onRetry={() => query.refetch()}
         >
diff --git a/apps/web/src/routes/_auth/monitoring.tsx b/apps/web/src/routes/_auth/monitoring.tsx
index 05825a9..a86ecf4 100644
--- a/apps/web/src/routes/_auth/monitoring.tsx
+++ b/apps/web/src/routes/_auth/monitoring.tsx
@@ -1,10 +1,9 @@
 import { createFileRoute, useSearch } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { Activity, AlertTriangle, Bird, RefreshCw } from 'lucide-react'
+import { AlertTriangle, Bird, Database, FileText, RefreshCw } from 'lucide-react'
 
 import { Button } from '@evobgp/ui/components/button'
 import { PanelCard } from '@/components/panel-card'
-import { Separator } from '@evobgp/ui/components/separator'
 import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import { DataGridCard } from '@/components/data-grid-shell'
 import { StatusBadge } from '@/components/status-badge'
@@ -16,6 +15,8 @@ import {
 import { MonitoringReadyGrid } from '@/components/monitoring/monitoring-ready-grid'
 import { PageHeader } from '@/components/page-header'
 import { QueryState } from '@/components/query-state'
+import { IllustratedEmptyState } from '@/components/patterns/illustrated-empty-state'
+import { SegmentedProgressCard } from '@/components/patterns/segmented-progress-card'
 import { AnalyticsDashboardSkeleton } from '@/components/skeletons'
 
 import {
@@ -164,52 +165,50 @@ function MonitoringComponent() {
           </div>
 
           <div className="grid gap-4 lg:grid-cols-2">
-            <PanelCard
-              title={
-                <span className="flex items-center gap-2">
-                  <Activity className="size-4" />
-                  Задачи
-                </span>
-              }
-              description="Последние 100 задач · GET /v1/jobs"
-              contentClassName="space-y-4 py-4"
-            >
-                <div className="flex flex-wrap gap-4 text-sm">
-                  <Metric label="Активных" value={jobs.filter((j) => j.status === 'running' || j.status === 'queued').length} />
-                  <Metric
-                    label="С ошибками"
-                    value={failed}
-                    valueClass={failed > 0 ? 'text-warning' : 'text-success'}
-                  />
-                  <Metric label="В выборке" value={jobs.length} />
-                </div>
-                <Separator />
-                {failedJobs.length > 0 ? (
-                  <div className="space-y-3">
-                    <p className="text-sm font-medium">Последние ошибки</p>
-                    <ul className="space-y-2">
-                      {failedJobs.map((job) => (
-                        <li key={job.job_id} className="rounded-lg border px-3 py-2 text-sm">
-                          <div className="flex items-start justify-between gap-2">
-                            <p className="font-medium">{jobKindRu(job.kind)}</p>
-                            <StatusBadge status={job.status} />
-                          </div>
-                          {job.error ? (
-                            <p className="mt-1 text-xs text-muted-foreground">
-                              {job.error.slice(0, 120)}
-                              {job.error.length > 120 ? '…' : ''}
-                            </p>
-                          ) : null}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                ) : (
-                  <p className="text-sm text-muted-foreground">
-                    Критичных сбоев в последних 100 задачах нет.
-                  </p>
-                )}
-            </PanelCard>
+            <div className="flex flex-col gap-4">
+              <SegmentedProgressCard
+                title="Задачи"
+                description="Последние 100 задач · GET /v1/jobs"
+                primary={{
+                  value: jobs.filter((j) => j.status === 'running' || j.status === 'queued').length,
+                  label: 'Активных',
+                  percent:
+                    jobs.length > 0
+                      ? Math.round(
+                          (jobs.filter((j) => j.status === 'running' || j.status === 'queued').length /
+                            jobs.length) *
+                            100,
+                        )
+                      : 0,
+                }}
+                secondary={{
+                  value: failed,
+                  label: 'С ошибками',
+                  percent: jobs.length > 0 ? Math.round((failed / jobs.length) * 100) : 0,
+                }}
+                footer={`В выборке: ${jobs.length} задач`}
+              />
+              {failedJobs.length > 0 ? (
+                <PanelCard title="Последние ошибки" contentClassName="space-y-2 py-4">
+                  <ul className="space-y-2">
+                    {failedJobs.map((job) => (
+                      <li key={job.job_id} className="rounded-lg border px-3 py-2 text-sm">
+                        <div className="flex items-start justify-between gap-2">
+                          <p className="font-medium">{jobKindRu(job.kind)}</p>
+                          <StatusBadge status={job.status} />
+                        </div>
+                        {job.error ? (
+                          <p className="mt-1 text-xs text-muted-foreground">
+                            {job.error.slice(0, 120)}
+                            {job.error.length > 120 ? '…' : ''}
+                          </p>
+                        ) : null}
+                      </li>
+                    ))}
+                  </ul>
+                </PanelCard>
+              ) : null}
+            </div>
 
             <PanelCard
               title={
@@ -246,28 +245,18 @@ function MonitoringComponent() {
         </TabsContent>
 
         <TabsContent value="postgres" className="mt-0">
-          <PanelCard
+          <IllustratedEmptyState
+            icon={Database}
             title="PostgreSQL"
-            description={
-              <>
-                Статус соединения и пул. PostgreSQL отображается в readiness-проверке на вкладке «Система»
-                (check <code className="text-xs">postgres</code>).
-              </>
-            }
-            contentClassName="py-4"
+            description="Статус соединения и пул отображаются в readiness-проверке на вкладке «Система» (check postgres)."
           />
         </TabsContent>
 
         <TabsContent value="runtime-logs" className="mt-0">
-          <PanelCard
+          <IllustratedEmptyState
+            icon={FileText}
             title="Файловые логи"
-            description={
-              <>
-                Логи API и pipeline настраиваются переменной <code className="text-xs">EVOBGP_LOG_*</code> и
-                управляются в tenant-settings.
-              </>
-            }
-            contentClassName="py-4"
+            description="Логи API и pipeline настраиваются переменной EVOBGP_LOG_* и управляются в tenant-settings."
           />
         </TabsContent>
       </BadgeTabs>
@@ -275,15 +264,6 @@ function MonitoringComponent() {
   )
 }
 
-function Metric({ label, value, valueClass }: { label: string; value: number | string; valueClass?: string }) {
-  return (
-    <div>
-      <p className="text-muted-foreground">{label}</p>
-      <p className={`text-2xl font-bold tabular-nums ${valueClass ?? ''}`}>{value}</p>
-    </div>
-  )
-}
-
 function formatVersion(version?: VersionInfo | null): string {
   if (!version) return '—'
   return version.version ?? version.app ?? '—'
diff --git a/apps/web/src/routes/_auth/operations.tsx b/apps/web/src/routes/_auth/operations.tsx
index 0c8c5da..ede4f08 100644
--- a/apps/web/src/routes/_auth/operations.tsx
+++ b/apps/web/src/routes/_auth/operations.tsx
@@ -10,7 +10,7 @@ import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import { DataGridCard } from '@/components/data-grid-shell'
 import { OperationsAnalyticsCard } from '@/components/analytics'
 import { SelectMenu } from '@/components/select-field'
-import { OperationsJobsGrid } from '@/components/operations/operations-jobs-grid'
+import { OperationsJobsCard } from '@/components/operations/operations-jobs-card'
 import { OperationsRevisionsGrid } from '@/components/operations/operations-revisions-grid'
 import { PageHeader } from '@/components/page-header'
 import { QueryState } from '@/components/query-state'
@@ -162,26 +162,15 @@ function OperationsComponent() {
         </TabsContent>
 
         <TabsContent value="jobs" className="mt-0">
-          <DataGridCard title="Задачи">
-            <QueryState
-              data={jobs}
-              isLoading={jobsQ.isLoading}
-              isError={jobsQ.isError}
-              error={jobsQ.error}
-              empty={jobs.length === 0}
-              emptyTitle="Нет задач"
-              onRetry={() => jobsQ.refetch()}
-            >
-              {(items) => (
-                <OperationsJobsGrid
-                  items={items}
-                  nameById={nameById}
-                  qc={qc}
-                  isLoading={jobsQ.isFetching && !jobsQ.isLoading}
-                />
-              )}
-            </QueryState>
-          </DataGridCard>
+          <OperationsJobsCard
+            jobs={jobs}
+            nameById={nameById}
+            qc={qc}
+            isLoading={jobsQ.isLoading}
+            isError={jobsQ.isError}
+            error={jobsQ.error}
+            onRetry={() => jobsQ.refetch()}
+          />
         </TabsContent>
       </BadgeTabs>
     </div>
diff --git a/apps/web/src/routes/_auth/schedule.tsx b/apps/web/src/routes/_auth/schedule.tsx
index 5d4749d..a51b2a2 100644
--- a/apps/web/src/routes/_auth/schedule.tsx
+++ b/apps/web/src/routes/_auth/schedule.tsx
@@ -7,6 +7,7 @@ import { useState } from 'react'
 import { Button } from '@evobgp/ui/components/button'
 import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import { DataGridCard } from '@/components/data-grid-shell'
+import { ScheduleAgendaPanel } from '@/components/schedule/schedule-agenda-panel'
 import { ScheduleJobsGrid } from '@/components/schedule/schedule-jobs-grid'
 import { ScheduleModulesGrid } from '@/components/schedule/schedule-modules-grid'
 import { PageHeader } from '@/components/page-header'
@@ -88,6 +89,8 @@ function ScheduleComponent() {
 
       {loading ? <SectionCardsSkeleton count={3} /> : <SectionCards items={items} />}
 
+      <ScheduleAgendaPanel jobs={jobs} isLoading={jobsQ.isLoading} />
+
       <DataGridCard
         title="Модули"
         description="Расписание обновления и ручной запуск обновления"
diff --git a/apps/web/src/routes/_auth/tenant-settings.tsx b/apps/web/src/routes/_auth/tenant-settings.tsx
index 712244d..aa78e10 100644
--- a/apps/web/src/routes/_auth/tenant-settings.tsx
+++ b/apps/web/src/routes/_auth/tenant-settings.tsx
@@ -11,6 +11,7 @@ import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import { DataGridCard } from '@/components/data-grid-shell'
 import { SelectField } from '@/components/select-field'
 import { SettingsKvGrid } from '@/components/settings/settings-kv-grid'
+import { SettingsSettingField } from '@/components/settings/settings-setting-field'
 import { PageHeader } from '@/components/page-header'
 import { QueryState } from '@/components/query-state'
 import { LoadingButton } from '@/components/loading-button'
@@ -137,20 +138,25 @@ function TenantSettingsComponent() {
                 onRetry={() => settingsQ.refetch()}
               >
                 {() => (
-                  <div className="grid gap-4 md:grid-cols-2">
-                    {BIRD_SETTING_KEYS.map((key) => (
-                      <div key={key} className="flex flex-col gap-1.5">
-                        <Label htmlFor={key}>{BIRD_LABELS[key]}</Label>
+                  <div className="flex flex-col">
+                    {BIRD_SETTING_KEYS.map((key, index) => (
+                      <SettingsSettingField
+                        key={key}
+                        title={BIRD_LABELS[key]}
+                        description={key}
+                        labelFor={key}
+                        badge={{ label: 'BIRD', variant: 'info-light' }}
+                        last={index === BIRD_SETTING_KEYS.length - 1}
+                      >
                         <Input
                           id={key}
                           value={birdForm[key] ?? ''}
                           onChange={(e) => setBirdForm((s) => ({ ...s, [key]: e.target.value }))}
                           placeholder={BIRD_LABELS[key]}
                         />
-                        <p className="font-mono text-xs text-muted-foreground">{key}</p>
-                      </div>
+                      </SettingsSettingField>
                     ))}
-                    <div className="md:col-span-2">
+                    <div className="px-4 py-4">
                       <LoadingButton onClick={saveBird} loading={patchMutation.isPending}>
                         <Save />
                         Сохранить
diff --git a/apps/web/tsconfig.tsbuildinfo b/apps/web/tsconfig.tsbuildinfo
index 14200e6..ed1837e 100644
--- a/apps/web/tsconfig.tsbuildinfo
+++ b/apps/web/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/main.tsx","./src/routetree.gen.ts","./src/components/badge-tabs.tsx","./src/components/category-badge.tsx","./src/components/confirm-dialog.tsx","./src/components/data-grid-cell.tsx","./src/components/data-grid-shell.tsx","./src/components/data-grid-toolbar.tsx","./src/components/drawer-layout.tsx","./src/components/empty-state.tsx","./src/components/form-drawer.tsx","./src/components/loading-button.tsx","./src/components/mode-toggle.tsx","./src/components/page-header.tsx","./src/components/page-shell.tsx","./src/components/panel-card.tsx","./src/components/query-state.tsx","./src/components/section-cards.tsx","./src/components/select-field.tsx","./src/components/skeletons.tsx","./src/components/status-badge.tsx","./src/components/theme-provider.tsx","./src/components/truncated-text.tsx","./src/components/access/access-api-keys-card.tsx","./src/components/access/access-api-keys-grid.tsx","./src/components/access/api-key-create-dialog.tsx","./src/components/access/api-key-token-dialog.tsx","./src/components/analytics/analytics-activity-list.tsx","./src/components/analytics/analytics-card-shell.tsx","./src/components/analytics/analytics-kpi-row.tsx","./src/components/analytics/analytics-progress.tsx","./src/components/analytics/analytics-segment-control.tsx","./src/components/analytics/chart-bar-strip.tsx","./src/components/analytics/chart-donut-metric.tsx","./src/components/analytics/dashboard-network-capacity-card.tsx","./src/components/analytics/dashboard-operations-flow-card.tsx","./src/components/analytics/dashboard-platform-card.tsx","./src/components/analytics/index.ts","./src/components/analytics/monitoring-health-card.tsx","./src/components/analytics/network-overview-analytics-card.tsx","./src/components/analytics/operations-analytics-card.tsx","./src/components/dashboard/card-dot-field.tsx","./src/components/dashboard/dashboard-activity-timeline.tsx","./src/components/dashboard/dashboard-frame-panel.tsx","./src/components/dashboard/dashboard-kpi-grid.tsx","./src/components/dashboard/dashboard-modules-grid.tsx","./src/components/dashboard/dashboard-network-health.tsx","./src/components/dashboard/dashboard-network-panel.tsx","./src/components/dashboard/dashboard-operations-breakdown.tsx","./src/components/dashboard/dashboard-quick-link-card.tsx","./src/components/dashboard/dashboard-quick-links.tsx","./src/components/dashboard/dashboard-recent-jobs-grid.tsx","./src/components/dashboard/dashboard-recent-revisions-grid.tsx","./src/components/directories/directories-communities-grid.tsx","./src/components/directories/directories-doh-grid.tsx","./src/components/examples/c-input-group-37.tsx","./src/components/examples/c-select-4.tsx","./src/components/examples/c-tabs-6.tsx","./src/components/examples/c-tabs-7.tsx","./src/components/firewall/firewall-clients-grid.tsx","./src/components/firewall/firewall-rule-create-dialog.tsx","./src/components/firewall/firewall-rules-grid.tsx","./src/components/layout/app-shell.tsx","./src/components/modules/community-select.tsx","./src/components/modules/module-as-entry-dialog.tsx","./src/components/modules/module-cdn-source-dialog.tsx","./src/components/modules/module-domain-entry-dialog.tsx","./src/components/modules/module-entries-grid.tsx","./src/components/modules/module-entries-section.tsx","./src/components/modules/module-ip-range-entry-dialog.tsx","./src/components/modules/module-kpi-cards.tsx","./src/components/modules/modules-list-grid.tsx","./src/components/monitoring/monitoring-ready-grid.tsx","./src/components/network/network-peers-card.tsx","./src/components/network/network-peers-grid.tsx","./src/components/network/network-speakers-card.tsx","./src/components/network/network-speakers-grid.tsx","./src/components/network/peer-form-dialog.tsx","./src/components/network/speaker-form-dialog.tsx","./src/components/operations/operations-jobs-grid.tsx","./src/components/operations/operations-revisions-grid.tsx","./src/components/reui/autocomplete.tsx","./src/components/reui/badge.tsx","./src/components/reui/date-selector.tsx","./src/components/reui/filters.tsx","./src/components/reui/frame.tsx","./src/components/reui/number-field.tsx","./src/components/reui/timeline.tsx","./src/components/reui/data-grid/data-grid-column-filter.tsx","./src/components/reui/data-grid/data-grid-column-header.tsx","./src/components/reui/data-grid/data-grid-column-visibility.tsx","./src/components/reui/data-grid/data-grid-pagination.tsx","./src/components/reui/data-grid/data-grid-scroll-area.tsx","./src/components/reui/data-grid/data-grid-table-dnd-rows.tsx","./src/components/reui/data-grid/data-grid-table-dnd.tsx","./src/components/reui/data-grid/data-grid-table-virtual.tsx","./src/components/reui/data-grid/data-grid-table.tsx","./src/components/reui/data-grid/data-grid.tsx","./src/components/schedule/schedule-jobs-grid.tsx","./src/components/schedule/schedule-modules-grid.tsx","./src/components/settings/settings-kv-grid.tsx","./src/hooks/use-client-data-grid.ts","./src/lib/api-client.ts","./src/lib/data-grid-defaults.ts","./src/lib/queryclient.ts","./src/lib/router.ts","./src/lib/ui-labels.ts","./src/lib/access/api-key-labels.ts","./src/lib/metrics/deployment-progress.ts","./src/lib/metrics/index.ts","./src/lib/metrics/job-status-breakdown.ts","./src/lib/metrics/module-type-breakdown.ts","./src/lib/metrics/peer-capacity-bars.ts","./src/lib/metrics/peer-session-breakdown.ts","./src/lib/metrics/readiness-breakdown.ts","./src/lib/metrics/recent-platform-activity.ts","./src/lib/metrics/types.ts","./src/lib/modules/display.ts","./src/lib/modules/helpers.ts","./src/queries/api-keys.ts","./src/queries/auth.ts","./src/queries/directories.ts","./src/queries/firewall.ts","./src/queries/modules.ts","./src/queries/monitoring.ts","./src/queries/network.ts","./src/queries/operations.ts","./src/queries/overview.ts","./src/queries/settings.ts","./src/routes/__root.tsx","./src/routes/_auth.tsx","./src/routes/index.tsx","./src/routes/_auth/access.tsx","./src/routes/_auth/dashboard.tsx","./src/routes/_auth/directories.tsx","./src/routes/_auth/firewall.tsx","./src/routes/_auth/monitoring.tsx","./src/routes/_auth/network.tsx","./src/routes/_auth/operations.tsx","./src/routes/_auth/schedule.tsx","./src/routes/_auth/settings.tsx","./src/routes/_auth/tenant-settings.tsx","./src/routes/_auth/modules/$moduleid.tsx","./src/routes/_auth/modules/index.tsx","./src/routes/_auth/modules/new.tsx","./src/types/api.ts","./vite.config.ts"],"version":"5.9.3"}
\ No newline at end of file
+{"root":["./src/main.tsx","./src/routetree.gen.ts","./src/components/badge-tabs.tsx","./src/components/category-badge.tsx","./src/components/confirm-dialog.tsx","./src/components/data-grid-cell.tsx","./src/components/data-grid-shell.tsx","./src/components/data-grid-toolbar.tsx","./src/components/drawer-layout.tsx","./src/components/empty-state.tsx","./src/components/form-drawer.tsx","./src/components/loading-button.tsx","./src/components/mode-toggle.tsx","./src/components/page-header.tsx","./src/components/page-shell.tsx","./src/components/panel-card.tsx","./src/components/query-state.tsx","./src/components/section-cards.tsx","./src/components/select-field.tsx","./src/components/skeletons.tsx","./src/components/status-badge.tsx","./src/components/theme-provider.tsx","./src/components/truncated-text.tsx","./src/components/access/access-api-keys-card.tsx","./src/components/access/access-api-keys-grid.tsx","./src/components/access/api-key-create-dialog.tsx","./src/components/access/api-key-token-dialog.tsx","./src/components/analytics/analytics-activity-list.tsx","./src/components/analytics/analytics-card-shell.tsx","./src/components/analytics/analytics-kpi-row.tsx","./src/components/analytics/analytics-progress.tsx","./src/components/analytics/analytics-segment-control.tsx","./src/components/analytics/chart-bar-strip.tsx","./src/components/analytics/chart-donut-metric.tsx","./src/components/analytics/dashboard-network-capacity-card.tsx","./src/components/analytics/dashboard-operations-flow-card.tsx","./src/components/analytics/dashboard-platform-card.tsx","./src/components/analytics/index.ts","./src/components/analytics/monitoring-health-card.tsx","./src/components/analytics/network-overview-analytics-card.tsx","./src/components/analytics/operations-analytics-card.tsx","./src/components/dashboard/card-dot-field.tsx","./src/components/dashboard/dashboard-activity-timeline.tsx","./src/components/dashboard/dashboard-frame-panel.tsx","./src/components/dashboard/dashboard-kpi-sparkline-row.tsx","./src/components/dashboard/dashboard-modules-grid.tsx","./src/components/dashboard/dashboard-network-health.tsx","./src/components/dashboard/dashboard-network-panel.tsx","./src/components/dashboard/dashboard-operations-breakdown.tsx","./src/components/dashboard/dashboard-quick-link-card.tsx","./src/components/dashboard/dashboard-quick-links.tsx","./src/components/dashboard/dashboard-recent-jobs-grid.tsx","./src/components/dashboard/dashboard-recent-revisions-grid.tsx","./src/components/directories/directories-communities-grid.tsx","./src/components/directories/directories-doh-grid.tsx","./src/components/examples/c-input-group-37.tsx","./src/components/examples/c-select-4.tsx","./src/components/examples/c-tabs-6.tsx","./src/components/examples/c-tabs-7.tsx","./src/components/firewall/firewall-clients-grid.tsx","./src/components/firewall/firewall-rule-create-dialog.tsx","./src/components/firewall/firewall-rules-grid.tsx","./src/components/layout/app-shell.tsx","./src/components/layout/command-palette.tsx","./src/components/layout/system-monitor-popover.tsx","./src/components/modules/community-select.tsx","./src/components/modules/module-as-entry-dialog.tsx","./src/components/modules/module-cdn-source-dialog.tsx","./src/components/modules/module-domain-entry-dialog.tsx","./src/components/modules/module-entries-grid.tsx","./src/components/modules/module-entries-section.tsx","./src/components/modules/module-ip-range-entry-dialog.tsx","./src/components/modules/module-kpi-cards.tsx","./src/components/modules/modules-list-grid.tsx","./src/components/monitoring/monitoring-ready-grid.tsx","./src/components/network/network-peers-card.tsx","./src/components/network/network-peers-grid.tsx","./src/components/network/network-speakers-card.tsx","./src/components/network/network-speakers-grid.tsx","./src/components/network/peer-form-dialog.tsx","./src/components/network/speaker-form-dialog.tsx","./src/components/operations/operations-jobs-card.tsx","./src/components/operations/operations-jobs-grid.tsx","./src/components/operations/operations-revisions-grid.tsx","./src/components/patterns/donut-breakdown-card.tsx","./src/components/patterns/illustrated-empty-state.tsx","./src/components/patterns/index.ts","./src/components/patterns/kpi-sparkline-card.tsx","./src/components/patterns/metric-tone-styles.ts","./src/components/patterns/panel-corners.tsx","./src/components/patterns/projects-empty-state.tsx","./src/components/patterns/segmented-progress-card.tsx","./src/components/reui/autocomplete.tsx","./src/components/reui/badge.tsx","./src/components/reui/date-selector.tsx","./src/components/reui/filters.tsx","./src/components/reui/frame.tsx","./src/components/reui/icon-stack.tsx","./src/components/reui/number-field.tsx","./src/components/reui/rating.tsx","./src/components/reui/timeline.tsx","./src/components/reui/data-grid/data-grid-column-filter.tsx","./src/components/reui/data-grid/data-grid-column-header.tsx","./src/components/reui/data-grid/data-grid-column-visibility.tsx","./src/components/reui/data-grid/data-grid-pagination.tsx","./src/components/reui/data-grid/data-grid-scroll-area.tsx","./src/components/reui/data-grid/data-grid-table-dnd-rows.tsx","./src/components/reui/data-grid/data-grid-table-dnd.tsx","./src/components/reui/data-grid/data-grid-table-virtual.tsx","./src/components/reui/data-grid/data-grid-table.tsx","./src/components/reui/data-grid/data-grid.tsx","./src/components/schedule/schedule-agenda-panel.tsx","./src/components/schedule/schedule-jobs-grid.tsx","./src/components/schedule/schedule-modules-grid.tsx","./src/components/settings/settings-kv-grid.tsx","./src/components/settings/settings-setting-field.tsx","./src/components/ui/svgs/anthropicblack.tsx","./src/components/ui/svgs/anthropicwhite.tsx","./src/components/ui/svgs/convex.tsx","./src/components/ui/svgs/discord.tsx","./src/components/ui/svgs/gemini.tsx","./src/components/ui/svgs/googlecloud.tsx","./src/components/ui/svgs/hono.tsx","./src/components/ui/svgs/loom.tsx","./src/components/ui/svgs/mintlify.tsx","./src/components/ui/svgs/n8n.tsx","./src/components/ui/svgs/neon.tsx","./src/components/ui/svgs/openai.tsx","./src/components/ui/svgs/openaidark.tsx","./src/components/ui/svgs/paper.tsx","./src/components/ui/svgs/planetscale.tsx","./src/components/ui/svgs/planetscaledark.tsx","./src/components/ui/svgs/prisma.tsx","./src/components/ui/svgs/prismadark.tsx","./src/components/ui/svgs/remixdark.tsx","./src/components/ui/svgs/remixlight.tsx","./src/components/ui/svgs/resendiconblack.tsx","./src/components/ui/svgs/resendiconwhite.tsx","./src/components/ui/svgs/slack.tsx","./src/components/ui/svgs/stripe.tsx","./src/components/ui/svgs/supabase.tsx","./src/components/ui/svgs/zoom.tsx","./src/hooks/use-client-data-grid.ts","./src/hooks/use-copy-to-clipboard.ts","./src/hooks/use-mobile.ts","./src/lib/api-client.ts","./src/lib/data-grid-defaults.ts","./src/lib/queryclient.ts","./src/lib/router.ts","./src/lib/ui-labels.ts","./src/lib/ui-surface.ts","./src/lib/access/api-key-labels.ts","./src/lib/metrics/deployment-progress.ts","./src/lib/metrics/index.ts","./src/lib/metrics/job-status-breakdown.ts","./src/lib/metrics/module-type-breakdown.ts","./src/lib/metrics/peer-capacity-bars.ts","./src/lib/metrics/peer-session-breakdown.ts","./src/lib/metrics/readiness-breakdown.ts","./src/lib/metrics/recent-platform-activity.ts","./src/lib/metrics/types.ts","./src/lib/modules/display.ts","./src/lib/modules/helpers.ts","./src/queries/api-keys.ts","./src/queries/auth.ts","./src/queries/directories.ts","./src/queries/firewall.ts","./src/queries/modules.ts","./src/queries/monitoring.ts","./src/queries/network.ts","./src/queries/operations.ts","./src/queries/overview.ts","./src/queries/settings.ts","./src/routes/__root.tsx","./src/routes/_auth.tsx","./src/routes/index.tsx","./src/routes/_auth/access.tsx","./src/routes/_auth/dashboard.tsx","./src/routes/_auth/directories.tsx","./src/routes/_auth/firewall.tsx","./src/routes/_auth/monitoring.tsx","./src/routes/_auth/network.tsx","./src/routes/_auth/operations.tsx","./src/routes/_auth/schedule.tsx","./src/routes/_auth/settings.tsx","./src/routes/_auth/tenant-settings.tsx","./src/routes/_auth/modules/$moduleid.tsx","./src/routes/_auth/modules/index.tsx","./src/routes/_auth/modules/new.tsx","./src/types/api.ts","./vite.config.ts"],"version":"5.9.3"}
\ No newline at end of file
diff --git a/packages/ui/src/components/chart.tsx b/packages/ui/src/components/chart.tsx
index 41f9adb..2ae0f0e 100644
--- a/packages/ui/src/components/chart.tsx
+++ b/packages/ui/src/components/chart.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as RechartsPrimitive from "recharts"
 import type { TooltipValueType } from "recharts"
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index 1dfcb8a..167ec53 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
 
diff --git a/packages/ui/src/components/empty.tsx b/packages/ui/src/components/empty.tsx
new file mode 100644
index 0000000..e9f10e2
--- /dev/null
+++ b/packages/ui/src/components/empty.tsx
@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn("flex max-w-sm flex-col items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn(
+        "text-sm font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}
diff --git a/packages/ui/src/components/field.tsx b/packages/ui/src/components/field.tsx
index 04ed7e9..b5a8f0b 100644
--- a/packages/ui/src/components/field.tsx
+++ b/packages/ui/src/components/field.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { useMemo } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
diff --git a/packages/ui/src/components/label.tsx b/packages/ui/src/components/label.tsx
index 94de395..b1e0ae7 100644
--- a/packages/ui/src/components/label.tsx
+++ b/packages/ui/src/components/label.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 
 import { cn } from "@evobgp/ui/lib/utils"
diff --git a/packages/ui/src/components/progress.tsx b/packages/ui/src/components/progress.tsx
index 55b6435..09d03ff 100644
--- a/packages/ui/src/components/progress.tsx
+++ b/packages/ui/src/components/progress.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
 
 import { cn } from "@evobgp/ui/lib/utils"
diff --git a/packages/ui/src/components/switch.tsx b/packages/ui/src/components/switch.tsx
new file mode 100644
index 0000000..ec7c5c9
--- /dev/null
+++ b/packages/ui/src/components/switch.tsx
@@ -0,0 +1,30 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index cca56fb..7d84d61 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -15,7 +15,7 @@ function Tabs({
       data-slot="tabs"
       data-orientation={orientation}
       className={cn(
-        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        "group/tabs flex gap-2 data-horizontal:flex-col",
         className
       )}
       {...props}
@@ -24,7 +24,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
@@ -58,10 +58,10 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       )}
       {...props}
diff --git a/packages/ui/src/components/toggle-group.tsx b/packages/ui/src/components/toggle-group.tsx
new file mode 100644
index 0000000..ffc172d
--- /dev/null
+++ b/packages/ui/src/components/toggle-group.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { toggleVariants } from "@evobgp/ui/components/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 2,
+  orientation: "horizontal",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 2,
+  orientation = "horizontal",
+  children,
+  ...props
+}: ToggleGroupPrimitive.Props &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }) {
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider
+        value={{ variant, size, spacing, orientation }}
+      >
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <TogglePrimitive
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </TogglePrimitive>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }