diff --git a/.gitignore b/.gitignore
index a069fb5..fd6bff9 100755
--- a/.gitignore
+++ b/.gitignore
@@ -59,8 +59,9 @@ keyring passwords.py
 *github*
 
 *tech_spec*
-dashboards
-backend/mappings.db
+/dashboards
+dashboards_example/**/dashboards/
+backend/mappings.db
 
 
 backend/tasks.db
diff --git a/frontend/src/routes/dashboards/+page.svelte b/frontend/src/routes/dashboards/+page.svelte
new file mode 100644
index 0000000..348546d
--- /dev/null
+++ b/frontend/src/routes/dashboards/+page.svelte
@@ -0,0 +1,1258 @@
+<!-- [DEF:DashboardHub:Page] -->
+<script>
+  /**
+   * @TIER: CRITICAL
+   * @PURPOSE: Dashboard Hub - Central hub for managing dashboards with Git status and task actions
+   * @LAYER: UI
+   * @RELATION: BINDS_TO -> sidebarStore, taskDrawerStore
+   * @INVARIANT: Always shows environment selector and dashboard grid
+   *
+   * @UX_STATE: Loading -> Shows skeleton loader
+   * @UX_STATE: Loaded -> Shows dashboard grid with status badges
+   * @UX_STATE: Error -> Shows error banner with retry button
+   * @UX_STATE: Selecting -> Checkboxes checked, floating action panel appears
+   * @UX_STATE: BulkAction-Modal -> Migration or Backup modal open
+   * @UX_FEEDBACK: Clicking task status opens Task Drawer
+   * @UX_FEEDBACK: Floating panel slides up from bottom when items selected
+   * @UX_RECOVERY: Refresh button reloads dashboard list
+   */
+
+  import { onMount } from "svelte";
+  import { goto } from "$app/navigation";
+  import { t } from "$lib/i18n";
+  import { openDrawerForTask } from "$lib/stores/taskDrawer.js";
+  import { api } from "$lib/api.js";
+  import { debounce } from "$lib/utils/debounce.js";
+  import MappingTable from "$components/MappingTable.svelte";
+
+  // State
+  let selectedEnv = null;
+  let dashboards = [];
+  let isLoading = true;
+  let error = null;
+
+  // Pagination state
+  let currentPage = 1;
+  let pageSize = 10;
+  let totalPages = 1;
+  let total = 0;
+
+  // Selection state
+  let selectedIds = new Set();
+  let isAllSelected = false;
+  let isAllVisibleSelected = false;
+
+  // Search state
+  let searchQuery = "";
+
+  // Bulk action modal state
+  let showMigrateModal = false;
+  let showBackupModal = false;
+  let targetEnvId = null;
+  let backupSchedule = "";
+  let isSubmittingMigrate = false;
+  let isSubmittingBackup = false;
+  let dbMappings = {};
+  let availableDbMappings = [];
+  let sourceDatabases = [];
+  let targetDatabases = [];
+  let isEditingMappings = false;
+
+  // Individual action dropdown state
+  let openActionDropdown = null; // stores dashboard ID
+
+  // Validation state
+  let validatingIds = new Set();
+
+  // Environment options - will be loaded from API
+  let environments = [];
+
+  // Debounced search function
+  const debouncedSearch = debounce((query) => {
+    searchQuery = query;
+    loadDashboards();
+  }, 300);
+
+  // Load environments and dashboards on mount
+  onMount(async () => {
+    await loadEnvironments();
+    await loadDashboards();
+  });
+
+  // Handle document click to close dropdowns
+  function handleDocumentClick(event) {
+    if (!event.target.closest(".action-dropdown")) {
+      closeActionDropdown();
+    }
+  }
+
+  // Add document click listener
+  if (typeof document !== "undefined") {
+    document.addEventListener("click", handleDocumentClick);
+  }
+
+  // Load environments from API
+  async function loadEnvironments() {
+    try {
+      const response = await api.getEnvironments();
+      environments = response;
+      // Set first environment as default if no selection
+      if (environments.length > 0 && !selectedEnv) {
+        selectedEnv = environments[0].id;
+      }
+    } catch (err) {
+      console.error(
+        "[DashboardHub][Coherence:Failed] Failed to load environments:",
+        err,
+      );
+      // Use fallback environments if API fails
+      environments = [
+        { id: "development", name: "Development" },
+        { id: "staging", name: "Staging" },
+        { id: "production", name: "Production" },
+      ];
+    }
+  }
+
+  // Load dashboards from API
+  async function loadDashboards() {
+    if (!selectedEnv) return;
+
+    isLoading = true;
+    error = null;
+    try {
+      const response = await api.getDashboards(selectedEnv, {
+        search: searchQuery || undefined,
+        page: currentPage,
+        page_size: pageSize,
+      });
+
+      // Preserve selected IDs across pagination
+      const newSelectedIds = new Set();
+      response.dashboards.forEach((d) => {
+        if (selectedIds.has(d.id)) {
+          newSelectedIds.add(d.id);
+        }
+      });
+      selectedIds = newSelectedIds;
+
+      dashboards = response.dashboards.map((d) => ({
+        id: d.id,
+        title: d.title,
+        slug: d.slug,
+        gitStatus: d.git_status?.sync_status?.toLowerCase() || null,
+        lastTask: d.last_task
+          ? {
+              status: d.last_task.status?.toLowerCase() || null,
+              id: d.last_task.task_id,
+            }
+          : null,
+        actions: ["migrate", "backup"], // All dashboards have migrate and backup options
+      }));
+
+      // Update pagination state
+      total = response.total;
+      totalPages = response.total_pages;
+
+      // Update selection state
+      updateSelectionState();
+    } catch (err) {
+      error = err.message || "Failed to load dashboards";
+      console.error("[DashboardHub][Coherence:Failed]", err);
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  // Handle environment change
+  function handleEnvChange(event) {
+    selectedEnv = event.target.value;
+    currentPage = 1;
+    selectedIds.clear();
+    loadDashboards();
+  }
+
+  // Handle search input
+  function handleSearch(event) {
+    debouncedSearch(event.target.value);
+  }
+
+  // Handle page change
+  function handlePageChange(page) {
+    currentPage = page;
+    loadDashboards();
+  }
+
+  // Handle page size change
+  function handlePageSizeChange(event) {
+    pageSize = parseInt(event.target.value);
+    currentPage = 1;
+    loadDashboards();
+  }
+
+  // Update selection state based on current selection
+  function updateSelectionState() {
+    const visibleCount = dashboards.length;
+    const totalCount = total;
+
+    isAllSelected = selectedIds.size === totalCount && totalCount > 0;
+    isAllVisibleSelected =
+      selectedIds.size === visibleCount && visibleCount > 0;
+  }
+
+  // Handle checkbox change for individual dashboard
+  function handleCheckboxChange(dashboard, event) {
+    if (event.target.checked) {
+      selectedIds.add(dashboard.id);
+    } else {
+      selectedIds.delete(dashboard.id);
+    }
+    selectedIds = selectedIds; // Trigger reactivity
+    updateSelectionState();
+  }
+
+  // Handle select all
+  function handleSelectAll() {
+    if (isAllSelected) {
+      selectedIds.clear();
+    } else {
+      dashboards.forEach((d) => selectedIds.add(d.id));
+    }
+    selectedIds = selectedIds; // Trigger reactivity
+    updateSelectionState();
+  }
+
+  // Handle select visible
+  function handleSelectVisible() {
+    if (isAllVisibleSelected) {
+      dashboards.forEach((d) => selectedIds.delete(d.id));
+    } else {
+      dashboards.forEach((d) => selectedIds.add(d.id));
+    }
+    selectedIds = selectedIds; // Trigger reactivity
+    updateSelectionState();
+  }
+
+  // Toggle action dropdown
+  function toggleActionDropdown(dashboardId, event) {
+    event.stopPropagation();
+    openActionDropdown =
+      openActionDropdown === dashboardId ? null : dashboardId;
+  }
+
+  // Close action dropdown when clicking outside
+  function closeActionDropdown() {
+    openActionDropdown = null;
+  }
+
+  // Handle action click
+  async function handleAction(dashboard, action) {
+    console.log(
+      `[DashboardHub][Action] ${action} on dashboard ${dashboard.title}`,
+    );
+    closeActionDropdown();
+
+    try {
+      if (action === "migrate") {
+        // Select only this dashboard for migration
+        selectedIds.clear();
+        selectedIds.add(dashboard.id);
+        showMigrateModal = true;
+        targetEnvId = null;
+        dbMappings = {};
+        availableDbMappings = []; // Reset mappings until target env is selected
+        sourceDatabases = [];
+        targetDatabases = [];
+        isEditingMappings = false;
+      } else if (action === "backup") {
+        // Select only this dashboard for backup
+        selectedIds.clear();
+        selectedIds.add(dashboard.id);
+        showBackupModal = true;
+        backupSchedule = "";
+        // Force reactivity by updating selectedIds
+        selectedIds = new Set(selectedIds);
+      } else if (action === "commit") {
+        // Open commit modal or trigger commit task
+        // For now, we'll trigger a commit via git API
+        const response = await api.postApi(
+          `/git/repositories/${dashboard.id}/commit`,
+          {
+            message: `Update dashboard ${dashboard.title}`,
+          },
+        );
+        console.log("[DashboardHub][Action] Commit created:", response);
+      }
+    } catch (err) {
+      console.error("[DashboardHub][Coherence:Failed]", err);
+      // Error toast is already shown by api.postApi
+    }
+  }
+
+  // Handle validate - LLM dashboard validation
+  async function handleValidate(dashboard) {
+    if (validatingIds.has(dashboard.id)) return;
+    
+    validatingIds.add(dashboard.id);
+    validatingIds = new Set(validatingIds); // Trigger reactivity
+    
+    closeActionDropdown();
+    
+    try {
+      const response = await api.postApi('/tasks', {
+        plugin_id: 'llm_dashboard_validation',
+        params: {
+          dashboard_id: dashboard.id.toString(),
+          environment_id: selectedEnv
+        }
+      });
+      
+      console.log('[DashboardHub][Action] Validation task started:', response);
+      
+      // Open task drawer if task was created
+      if (response.task_id || response.id) {
+        const taskId = response.task_id || response.id;
+        openDrawerForTask(taskId);
+      }
+    } catch (err) {
+      console.error('[DashboardHub][Coherence:Failed] Validation failed:', err);
+      alert('Failed to start validation: ' + (err.message || 'Unknown error'));
+    } finally {
+      validatingIds.delete(dashboard.id);
+      validatingIds = new Set(validatingIds);
+    }
+  }
+
+  // Handle target environment change
+  async function handleTargetEnvChange(event) {
+    targetEnvId = event.target.value;
+    if (targetEnvId) {
+      await Promise.all([loadDbMappings(), loadDatabases()]);
+    } else {
+      availableDbMappings = [];
+      dbMappings = {};
+      sourceDatabases = [];
+      targetDatabases = [];
+    }
+  }
+
+  // Load databases for both environments
+  async function loadDatabases() {
+    if (!selectedEnv || !targetEnvId) return;
+    try {
+      const [sourceRes, targetRes] = await Promise.all([
+        api.getEnvironmentDatabases(selectedEnv),
+        api.getEnvironmentDatabases(targetEnvId),
+      ]);
+      sourceDatabases = sourceRes || [];
+      targetDatabases = targetRes || [];
+    } catch (err) {
+      console.error(
+        "[DashboardHub][Coherence:Failed] Failed to load databases:",
+        err,
+      );
+    }
+  }
+
+  // Handle mapping update from MappingTable
+  function handleMappingUpdate(event) {
+    const { sourceUuid, targetUuid } = event.detail;
+    dbMappings[sourceUuid] = targetUuid;
+    dbMappings = dbMappings; // Trigger reactivity
+  }
+
+  // Load database mappings for migration modal
+  async function loadDbMappings() {
+    if (!selectedEnv || !targetEnvId) return;
+
+    try {
+      console.log(
+        `[DashboardHub][Action] Loading DB mappings from ${selectedEnv} to ${targetEnvId}`,
+      );
+      const response = await api.getDatabaseMappings(selectedEnv, targetEnvId);
+      availableDbMappings = response.mappings || [];
+      console.log(
+        `[DashboardHub][Action] Loaded mappings:`,
+        availableDbMappings,
+      );
+
+      // Auto-select mappings with high confidence
+      dbMappings = {};
+      availableDbMappings.forEach((m) => {
+        if (m.confidence > 0.8) {
+          dbMappings[m.source_db_uuid] = m.target_db_uuid;
+        }
+      });
+    } catch (err) {
+      console.error(
+        "[DashboardHub][Coherence:Failed] Failed to load DB mappings:",
+        err,
+      );
+      availableDbMappings = [];
+    }
+  }
+
+  // Handle bulk migrate
+  async function handleBulkMigrate() {
+    if (isSubmittingMigrate) return;
+    if (selectedIds.size === 0) return;
+    if (!targetEnvId) {
+      alert("Please select a target environment");
+      return;
+    }
+
+    isSubmittingMigrate = true;
+    try {
+      const response = await api.postApi("/dashboards/migrate", {
+        source_env_id: selectedEnv,
+        target_env_id: targetEnvId,
+        dashboard_ids: Array.from(selectedIds),
+        db_mappings: dbMappings,
+        replace_db_config: Object.keys(dbMappings).length > 0,
+      });
+      console.log(
+        "[DashboardHub][Action] Bulk migration task created:",
+        response.task_id,
+      );
+
+      // Close modal and open task drawer
+      showMigrateModal = false;
+      selectedIds.clear();
+      updateSelectionState();
+
+      if (response.task_id) {
+        const taskId =
+          typeof response.task_id === "object"
+            ? response.task_id.id || response.task_id.task_id
+            : response.task_id;
+        openDrawerForTask(taskId);
+      }
+    } catch (err) {
+      console.error("[DashboardHub][Coherence:Failed]", err);
+      alert("Failed to create migration task");
+    } finally {
+      isSubmittingMigrate = false;
+    }
+  }
+
+  // Handle bulk backup
+  async function handleBulkBackup() {
+    if (isSubmittingBackup) return;
+    if (selectedIds.size === 0) return;
+
+    isSubmittingBackup = true;
+    try {
+      const response = await api.postApi("/dashboards/backup", {
+        env_id: selectedEnv,
+        dashboard_ids: Array.from(selectedIds),
+        schedule: backupSchedule || undefined,
+      });
+      console.log(
+        "[DashboardHub][Action] Bulk backup task created:",
+        response.task_id,
+      );
+
+      // Close modal and open task drawer
+      showBackupModal = false;
+      selectedIds.clear();
+      updateSelectionState();
+
+      if (response.task_id) {
+        const taskId =
+          typeof response.task_id === "object"
+            ? response.task_id.id || response.task_id.task_id
+            : response.task_id;
+        openDrawerForTask(taskId);
+      }
+    } catch (err) {
+      console.error("[DashboardHub][Coherence:Failed]", err);
+      alert("Failed to create backup task");
+    } finally {
+      isSubmittingBackup = false;
+    }
+  }
+
+  // Handle task status click - open Task Drawer
+  function handleTaskStatusClick(dashboard) {
+    if (dashboard.lastTask?.id) {
+      console.log(
+        `[DashboardHub][Action] Open task drawer for task ${dashboard.lastTask.id}`,
+      );
+      openDrawerForTask(dashboard.lastTask.id);
+    }
+  }
+
+  function navigateToDashboardDetail(dashboardId) {
+    goto(`/dashboards/${dashboardId}?env_id=${encodeURIComponent(selectedEnv)}`);
+  }
+
+  // Get status badge class
+  function getStatusBadgeClass(status) {
+    if (!status) return "bg-gray-100 text-gray-800";
+    switch (status.toLowerCase()) {
+      case "ok":
+        return "bg-green-100 text-green-800";
+      case "diff":
+        return "bg-yellow-100 text-yellow-800";
+      default:
+        return "bg-gray-100 text-gray-800";
+    }
+  }
+
+  // Get task status icon
+  function getTaskStatusIcon(status) {
+    if (!status) return "";
+    switch (status.toLowerCase()) {
+      case "running":
+        return '<svg class="animate-spin" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 0 0 1-8 8z"/></svg>';
+      case "success":
+        return '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>';
+      case "error":
+        return '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>';
+      case "waiting_input":
+        return '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>';
+      default:
+        return "";
+    }
+  }
+
+  // Generate pagination range with ellipsis
+  function getPaginationRange(current, total, maxVisible = 5) {
+    if (total <= maxVisible) {
+      return Array.from({ length: total }, (_, i) => i + 1);
+    }
+
+    const range = [];
+    const halfVisible = Math.floor(maxVisible / 2);
+
+    let start = Math.max(1, current - halfVisible);
+    let end = Math.min(total, current + halfVisible);
+
+    if (current <= halfVisible + 1) {
+      end = maxVisible;
+    } else if (current >= total - halfVisible) {
+      start = total - maxVisible + 1;
+    }
+
+    // Add first page and ellipsis if needed
+    if (start > 1) {
+      range.push(1);
+      if (start > 2) {
+        range.push("...");
+      }
+    }
+
+    // Add visible pages
+    for (let i = start; i <= end; i++) {
+      range.push(i);
+    }
+
+    // Add ellipsis and last page if needed
+    if (end < total) {
+      if (end < total - 1) {
+        range.push("...");
+      }
+      range.push(total);
+    }
+
+    return range;
+  }
+</script>
+
+<div class="mx-auto w-full max-w-7xl space-y-6">
+  <!-- Header -->
+  <div class="flex items-center justify-between">
+    <h1 class="text-2xl font-bold text-gray-900">{$t.nav?.dashboard || "Dashboards"}</h1>
+    <div class="flex items-center space-x-4">
+      <select
+        class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+        bind:value={selectedEnv}
+        on:change={handleEnvChange}
+      >
+        {#each environments as env}
+          <option value={env.id}>{env.name}</option>
+        {/each}
+      </select>
+      <button class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover" on:click={loadDashboards}>
+        {$t.common?.refresh || "Refresh"}
+      </button>
+    </div>
+  </div>
+
+  <!-- Error Banner -->
+  {#if error}
+    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4 flex items-center justify-between">
+      <span>{error}</span>
+      <button class="px-4 py-2 bg-destructive text-white rounded hover:bg-destructive-hover transition-colors" on:click={loadDashboards}>
+        {$t.common?.retry || "Retry"}
+      </button>
+    </div>
+  {/if}
+
+  <!-- Loading State -->
+  {#if isLoading}
+    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
+      <div class="grid grid-cols-12 gap-4 px-6 py-3 bg-gray-50 border-b border-gray-200 font-semibold text-sm text-gray-700">
+        <div class="col-span-1 skeleton h-4"></div>
+        <div class="col-span-3 font-medium text-gray-900 skeleton h-4"></div>
+        <div class="col-span-2 skeleton h-4"></div>
+        <div class="col-span-3 skeleton h-4"></div>
+        <div class="col-span-3 flex items-center skeleton h-4"></div>
+      </div>
+      {#each Array(5) as _}
+        <div class="grid grid-cols-12 gap-4 px-6 py-4 border-b border-gray-200 last:border-b-0 hover:bg-gray-50 transition-colors">
+          <div class="col-span-1 skeleton h-4"></div>
+          <div class="col-span-3 font-medium text-gray-900 skeleton h-4"></div>
+          <div class="col-span-2 skeleton h-4"></div>
+          <div class="col-span-3 skeleton h-4"></div>
+          <div class="col-span-3 flex items-center skeleton h-4"></div>
+        </div>
+      {/each}
+    </div>
+  {:else if dashboards.length === 0}
+    <!-- Empty State -->
+    <div class="py-12 text-center text-gray-500">
+      <svg
+        class="w-16 h-16 mx-auto mb-4 text-gray-400"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path d="M3 3h18v18H3V3zm16 16V5H5v14h14z" />
+      </svg>
+      <p>{$t.dashboards?.empty || "No dashboards found"}</p>
+    </div>
+  {:else}
+    <!-- Toolbar -->
+    <div class="flex items-center justify-between mb-4 gap-4">
+      <div class="flex items-center gap-2">
+        <button
+          class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
+          on:click={handleSelectAll}
+          disabled={total === 0}
+        >
+          {isAllSelected ? "Deselect All" : "Select All"}
+        </button>
+        <button
+          class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
+          on:click={handleSelectVisible}
+          disabled={dashboards.length === 0}
+        >
+          {isAllVisibleSelected ? "Deselect Visible" : "Select Visible"}
+        </button>
+        {#if selectedIds.size > 0}
+          <span class="text-sm text-gray-600">
+            {selectedIds.size} selected
+          </span>
+        {/if}
+      </div>
+      <div>
+        <input
+          type="text"
+          class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+          placeholder="Search dashboards..."
+          on:input={handleSearch}
+          value={searchQuery}
+        />
+      </div>
+    </div>
+
+    <!-- Dashboard Grid -->
+    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
+      <!-- Grid Header -->
+      <div class="grid grid-cols-12 gap-4 px-6 py-3 bg-gray-50 border-b border-gray-200 font-semibold text-sm text-gray-700">
+        <div class="col-span-1"></div>
+        <div class="col-span-3 font-medium text-gray-900">{$t.dashboards?.title || "Title"}</div>
+        <div class="col-span-2">{$t.dashboards?.git_status || "Git Status"}</div>
+        <div class="col-span-3">{$t.dashboards?.last_task || "Last Task"}</div>
+        <div class="col-span-3 flex items-center">{$t.dashboards?.actions || "Actions"}</div>
+      </div>
+
+      <!-- Grid Rows -->
+      {#each dashboards as dashboard}
+        <div class="grid grid-cols-12 gap-4 px-6 py-4 border-b border-gray-200 last:border-b-0 hover:bg-gray-50 transition-colors">
+          <!-- Checkbox -->
+          <div class="col-span-1">
+            <input
+              type="checkbox"
+              checked={selectedIds.has(dashboard.id)}
+              on:change={(e) => handleCheckboxChange(dashboard, e)}
+            />
+          </div>
+
+          <!-- Title -->
+          <div class="col-span-3 font-medium text-gray-900">
+            <button
+              class="text-left text-blue-700 hover:text-blue-900 hover:underline transition-colors"
+              on:click={() => navigateToDashboardDetail(dashboard.id)}
+              title="Open dashboard overview"
+            >
+              {dashboard.title}
+            </button>
+          </div>
+
+          <!-- Git Status -->
+          <div class="col-span-2">
+            {#if dashboard.gitStatus}
+              <span
+                class="status-badge {getStatusBadgeClass(dashboard.gitStatus)}"
+              >
+                {#if dashboard.gitStatus.toLowerCase() === "ok"}
+                  ✓ {$t.dashboards?.status_synced || "Synced"}
+                {:else if dashboard.gitStatus.toLowerCase() === "diff"}
+                  ! {$t.dashboards?.status_diff || "Diff"}
+                {/if}
+              </span>
+            {:else}
+              <span class="text-gray-400">-</span>
+            {/if}
+          </div>
+
+          <!-- Last Task -->
+          <div class="col-span-3">
+            {#if dashboard.lastTask}
+              <div
+                class="task-status-badge {dashboard.lastTask.status.toLowerCase()}"
+                on:click={() => handleTaskStatusClick(dashboard)}
+                on:keydown={(e) =>
+                  (e.key === "Enter" || e.key === " ") &&
+                  handleTaskStatusClick(dashboard)}
+                role="button"
+                tabindex="0"
+                aria-label={$t.dashboards?.view_task || "View task"}
+              >
+                {@html getTaskStatusIcon(dashboard.lastTask.status)}
+                <span class="ml-1">
+                  {#if dashboard.lastTask.status.toLowerCase() === "running"}
+                    {$t.dashboards?.task_running || "Running..."}
+                  {:else if dashboard.lastTask.status.toLowerCase() === "success"}
+                    {$t.dashboards?.task_done || "Done"}
+                  {:else if dashboard.lastTask.status.toLowerCase() === "error"}
+                    {$t.dashboards?.task_failed || "Failed"}
+                  {:else if dashboard.lastTask.status.toLowerCase() === "waiting_input"}
+                    {$t.dashboards?.task_waiting || "Waiting"}
+                  {/if}
+                </span>
+              </div>
+            {:else}
+              <span class="text-gray-400">-</span>
+            {/if}
+          </div>
+
+          <!-- Actions -->
+          <div class="col-span-3 flex items-center">
+            <div class="flex items-center gap-1">
+              <button
+                class="p-2 rounded border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                on:click={() => handleAction(dashboard, "migrate")}
+                title={$t.dashboards?.action_migrate || "Migrate"}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M5 12h14M12 5l7 7-7 7"/>
+                </svg>
+              </button>
+              <button
+                class="p-2 rounded border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                on:click={() => handleValidate(dashboard)}
+                disabled={validatingIds.has(dashboard.id)}
+                title={$t.dashboards?.action_validate || "Validate"}
+              >
+                {#if validatingIds.has(dashboard.id)}
+                  <svg class="animate-spin" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10" stroke-dasharray="32" stroke-dashoffset="12"/>
+                  </svg>
+                {:else}
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M9 12l2 2 4-4"/>
+                    <circle cx="12" cy="12" r="10"/>
+                  </svg>
+                {/if}
+              </button>
+              <button
+                class="p-2 rounded border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                on:click={() => handleAction(dashboard, "backup")}
+                title={$t.dashboards?.action_backup || "Backup"}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                  <polyline points="7,10 12,15 17,10"/>
+                  <line x1="12" y1="15" x2="12" y2="3"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+
+    <!-- Pagination -->
+    {#if totalPages > 1}
+      <div class="flex items-center justify-between px-4 py-3 bg-gray-50 border-t border-gray-200">
+        <div class="text-sm text-gray-600">
+          Showing {(currentPage - 1) * pageSize + 1}-{Math.min(
+            currentPage * pageSize,
+            total,
+          )} of {total}
+        </div>
+        <div class="flex items-center gap-1">
+          <button
+            class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
+            on:click={() => handlePageChange(1)}
+            disabled={currentPage === 1}
+          >
+            First
+          </button>
+          <button
+            class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
+            on:click={() => handlePageChange(currentPage - 1)}
+            disabled={currentPage === 1}
+          >
+            Previous
+          </button>
+          {#each getPaginationRange(currentPage, totalPages) as pageNum}
+            {#if pageNum === "..."}
+              <span class="px-2 py-1 text-gray-500">...</span>
+            {:else}
+              <button
+                class="page-btn {pageNum === currentPage ? 'active' : ''}"
+                on:click={() => handlePageChange(pageNum)}
+              >
+                {pageNum}
+              </button>
+            {/if}
+          {/each}
+          <button
+            class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
+            on:click={() => handlePageChange(currentPage + 1)}
+            disabled={currentPage === totalPages}
+          >
+            Next
+          </button>
+          <button
+            class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
+            on:click={() => handlePageChange(totalPages)}
+            disabled={currentPage === totalPages}
+          >
+            Last
+          </button>
+        </div>
+        <div>
+          <select
+            class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+            value={pageSize}
+            on:change={handlePageSizeChange}
+          >
+            <option value={5}>5 per page</option>
+            <option value={10}>10 per page</option>
+            <option value={25}>25 per page</option>
+            <option value={50}>50 per page</option>
+            <option value={100}>100 per page</option>
+          </select>
+        </div>
+      </div>
+    {/if}
+
+    <!-- Floating Bulk Action Panel -->
+    {#if selectedIds.size > 0}
+      <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg p-4 transition-transform transform translate-y-0">
+        <div class="flex items-center justify-between max-w-7xl mx-auto">
+          <div class="flex items-center gap-4">
+            <span class="font-medium">
+              ✓ {selectedIds.size} selected
+            </span>
+          </div>
+          <div class="flex gap-3">
+            <button
+              class="px-3 py-1 text-sm bg-primary text-white border-primary rounded hover:bg-primary-hover transition-colors"
+              on:click={() => {
+                showMigrateModal = true;
+                targetEnvId = null;
+                availableDbMappings = [];
+                dbMappings = {};
+                sourceDatabases = [];
+                targetDatabases = [];
+                isEditingMappings = false;
+              }}
+            >
+              Migrate
+            </button>
+            <button
+              class="px-3 py-1 text-sm bg-primary text-white border-primary rounded hover:bg-primary-hover transition-colors"
+              on:click={() => (showBackupModal = true)}
+            >
+              Backup
+            </button>
+            <button class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors" on:click={() => selectedIds.clear()}>
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    {/if}
+  {/if}
+
+  <!-- Migration Modal -->
+  {#if showMigrateModal}
+    <div
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+      on:click={() => (showMigrateModal = false)}
+      on:keydown={(e) => e.key === "Escape" && (showMigrateModal = false)}
+      role="presentation"
+    >
+      <div
+        class="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto"
+        on:click|stopPropagation
+        role="dialog"
+        aria-modal="true"
+        tabindex="-1"
+        aria-labelledby="migrate-modal-title"
+        on:keydown={(e) => e.stopPropagation()}
+      >
+        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between relative">
+          <h2 id="migrate-modal-title" class="text-xl font-bold">
+            Migrate {selectedIds.size} Dashboards
+          </h2>
+          <button
+            on:click={() => (showMigrateModal = false)}
+            class="absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-all"
+            aria-label="Close modal"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+        <div class="px-6 py-4">
+          <div class="space-y-6">
+            <!-- Source Env (Read-only) -->
+            <div>
+              <label
+                for="source-env"
+                class="block text-sm font-medium text-gray-500 mb-1"
+                >Source Environment</label
+              >
+              <div
+                id="source-env"
+                class="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-gray-700 font-medium"
+              >
+                {environments.find((e) => e.id === selectedEnv)?.name ||
+                  selectedEnv} (read-only)
+              </div>
+            </div>
+
+            <!-- Target Env -->
+            <div>
+              <label
+                for="target-env"
+                class="block text-sm font-medium text-gray-700 mb-2"
+                >Target Environment</label
+              >
+              <select
+                id="target-env"
+                class="env-dropdown w-full"
+                bind:value={targetEnvId}
+                on:change={handleTargetEnvChange}
+              >
+                <option value="">Select target environment...</option>
+                {#each environments.filter((e) => e.id !== selectedEnv) as env}
+                  <option value={env.id}>{env.name}</option>
+                {/each}
+              </select>
+            </div>
+
+            <!-- Database Mappings Table -->
+            <div>
+              <label
+                for="db-mappings-modal"
+                class="block text-sm font-medium text-gray-700"
+                >Database Mappings</label
+              >
+              <div class="flex items-center justify-between mb-2">
+                {#if availableDbMappings.length > 0}
+                  <button
+                    class="text-sm text-blue-600 hover:underline"
+                    on:click={() => (isEditingMappings = !isEditingMappings)}
+                  >
+                    {isEditingMappings ? "View Summary" : "Edit Mappings"}
+                  </button>
+                {/if}
+              </div>
+
+              {#if isEditingMappings}
+                <div class="border border-gray-200 rounded-lg overflow-hidden">
+                  <MappingTable
+                    {sourceDatabases}
+                    {targetDatabases}
+                    mappings={Object.entries(dbMappings).map(([s, t]) => ({
+                      source_db_uuid: s,
+                      target_db_uuid: t,
+                    }))}
+                    suggestions={availableDbMappings}
+                    on:update={handleMappingUpdate}
+                  />
+                </div>
+              {:else}
+                <div class="border border-gray-200 rounded-lg overflow-hidden">
+                  <table class="w-full text-sm text-left">
+                    <thead class="bg-gray-50 border-b border-gray-200">
+                      <tr>
+                        <th class="px-4 py-2 font-semibold text-gray-700"
+                          >Source Database</th
+                        >
+                        <th class="px-4 py-2 font-semibold text-gray-700"
+                          >Target Database</th
+                        >
+                        <th class="px-4 py-2 font-semibold text-gray-700"
+                          >Match %</th
+                        >
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {#if availableDbMappings.length > 0}
+                        {#each availableDbMappings as mapping}
+                          <tr class="border-b border-gray-200 last:border-b-0">
+                            <td class="px-4 py-2">{mapping.source_db}</td>
+                            <td class="px-4 py-2">
+                              {#if dbMappings[mapping.source_db_uuid]}
+                                {targetDatabases.find(
+                                  (d) =>
+                                    d.uuid ===
+                                    dbMappings[mapping.source_db_uuid],
+                                )?.database_name || mapping.target_db}
+                              {:else}
+                                <span class="text-red-500">Not mapped</span>
+                              {/if}
+                            </td>
+                            <td class="px-4 py-2">
+                              <span
+                                class="px-2 py-0.5 rounded-full text-xs font-medium {mapping.confidence >
+                                0.9
+                                  ? 'bg-green-100 text-green-800'
+                                  : 'bg-yellow-100 text-yellow-800'}"
+                              >
+                                {Math.round(mapping.confidence * 100)}%
+                              </span>
+                            </td>
+                          </tr>
+                        {/each}
+                      {:else}
+                        <tr>
+                          <td
+                            colspan="3"
+                            class="px-4 py-4 text-center text-gray-500 italic"
+                          >
+                            {targetEnvId
+                              ? "No databases found to map"
+                              : "Select target environment to see mappings"}
+                          </td>
+                        </tr>
+                      {/if}
+                    </tbody>
+                  </table>
+                </div>
+              {/if}
+            </div>
+
+            <!-- Selected Dashboards List -->
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-2"
+                >Selected Dashboards</label
+              >
+              <div
+                class="max-h-40 overflow-y-auto border border-gray-200 rounded-lg bg-gray-50 p-2"
+              >
+                {#each Array.from(selectedIds) as id}
+                  {#each dashboards as d}
+                    {#if d.id === id}
+                      <div class="flex items-center text-sm py-1 px-2">
+                        <span class="text-green-600 mr-2">☑</span>
+                        <span class="text-gray-700">{d.title}</span>
+                      </div>
+                    {/if}
+                  {/each}
+                {/each}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
+          <button class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors" on:click={() => (showMigrateModal = false)}
+            disabled={isSubmittingMigrate}
+            >Cancel</button
+          >
+          <button
+            class="px-3 py-1 text-sm bg-primary text-white border-primary rounded hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            on:click={handleBulkMigrate}
+            disabled={!targetEnvId || selectedIds.size === 0 || isSubmittingMigrate}
+          >
+            {isSubmittingMigrate ? "Starting..." : "Start Migration"}
+          </button>
+        </div>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Backup Modal -->
+  {#if showBackupModal}
+    <div
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+      on:click={() => (showBackupModal = false)}
+      on:keydown={(e) => e.key === "Escape" && (showBackupModal = false)}
+      role="presentation"
+    >
+      <div
+        class="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto"
+        on:click|stopPropagation
+        role="dialog"
+        aria-modal="true"
+        tabindex="-1"
+        aria-labelledby="backup-modal-title"
+        on:keydown={(e) => e.stopPropagation()}
+      >
+        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between relative">
+          <h2 id="backup-modal-title" class="text-xl font-bold">
+            Backup {selectedIds.size} Dashboards
+          </h2>
+          <button
+            on:click={() => (showBackupModal = false)}
+            class="absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-all"
+            aria-label="Close modal"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+        <div class="px-6 py-4">
+          <div class="space-y-6">
+            <!-- Env (Read-only) -->
+            <div>
+              <label
+                for="backup-env"
+                class="block text-sm font-medium text-gray-500 mb-1"
+                >Environment</label
+              >
+              <div
+                id="backup-env"
+                class="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-gray-700 font-medium"
+              >
+                {environments.find((e) => e.id === selectedEnv)?.name ||
+                  selectedEnv} (read-only)
+              </div>
+            </div>
+
+            <!-- Selected Dashboards List -->
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-2"
+                >Selected Dashboards</label
+              >
+              <div
+                class="max-h-40 overflow-y-auto border border-gray-200 rounded-lg bg-gray-50 p-2"
+              >
+                {#each Array.from(selectedIds) as id}
+                  {#each dashboards as d}
+                    {#if d.id === id}
+                      <div class="flex items-center text-sm py-1 px-2">
+                        <span class="text-green-600 mr-2">☑</span>
+                        <span class="text-gray-700">{d.title}</span>
+                      </div>
+                    {/if}
+                  {/each}
+                {/each}
+              </div>
+            </div>
+
+            <!-- Schedule -->
+            <div>
+              <label
+                id="backup-schedule-label"
+                class="block text-sm font-medium text-gray-700 mb-2"
+                >Schedule</label
+              >
+              <div class="space-y-3" aria-labelledby="backup-schedule-label">
+                <label class="flex items-center">
+                  <input
+                    type="radio"
+                    name="schedule"
+                    value=""
+                    bind:group={backupSchedule}
+                    class="mr-2"
+                  />
+                  <span class="text-sm">One-time backup</span>
+                </label>
+                <label class="flex items-center">
+                  <input
+                    type="radio"
+                    name="schedule"
+                    value="0 0 * * *"
+                    bind:group={backupSchedule}
+                    class="mr-2"
+                  />
+                  <span class="text-sm">Schedule backup</span>
+                </label>
+                {#if backupSchedule !== ""}
+                  <div class="ml-6">
+                    <label
+                      for="cron-expression"
+                      class="block text-xs text-gray-500 mb-1"
+                      >Cron expression</label
+                    >
+                    <input
+                      id="cron-expression"
+                      type="text"
+                      class="search-input w-full text-sm"
+                      placeholder="0 2 * * * (daily at 2 AM)"
+                      bind:value={backupSchedule}
+                    />
+                    <button class="text-xs text-blue-600 hover:underline mt-1"
+                      >Help with cron syntax</button
+                    >
+                  </div>
+                {/if}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
+          <button class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors" on:click={() => (showBackupModal = false)}
+            disabled={isSubmittingBackup}
+            >Cancel</button
+          >
+          <button
+            class="px-3 py-1 text-sm bg-primary text-white border-primary rounded hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            on:click={handleBulkBackup}
+            disabled={selectedIds.size === 0 || isSubmittingBackup}
+          >
+            {isSubmittingBackup ? "Starting..." : "Start Backup"}
+          </button>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- [/DEF:DashboardHub:Page] -->
diff --git a/frontend/src/routes/dashboards/[id]/+page.svelte b/frontend/src/routes/dashboards/[id]/+page.svelte
new file mode 100644
index 0000000..4a840fc
--- /dev/null
+++ b/frontend/src/routes/dashboards/[id]/+page.svelte
@@ -0,0 +1,208 @@
+<!-- [DEF:DashboardDetail:Page] -->
+<script>
+  /**
+   * @TIER: CRITICAL
+   * @PURPOSE: Dashboard Detail View - Overview of charts and datasets linked to a dashboard
+   * @LAYER: UI
+   * @RELATION: BINDS_TO -> dashboard detail API
+   * @INVARIANT: Shows dashboard metadata, charts, and datasets for selected environment
+   */
+
+  import { onMount } from "svelte";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
+  import { t } from "$lib/i18n";
+  import { api } from "$lib/api.js";
+  import Icon from "$lib/ui/Icon.svelte";
+
+  $: dashboardId = $page.params.id;
+  $: envId = $page.url.searchParams.get("env_id") || "";
+
+  let dashboard = null;
+  let isLoading = true;
+  let error = null;
+
+  onMount(async () => {
+    await loadDashboardDetail();
+  });
+
+  async function loadDashboardDetail() {
+    if (!dashboardId || !envId) {
+      error = "Missing dashboard ID or environment ID";
+      isLoading = false;
+      return;
+    }
+
+    isLoading = true;
+    error = null;
+    try {
+      dashboard = await api.getDashboardDetail(envId, dashboardId);
+    } catch (err) {
+      error = err.message || "Failed to load dashboard details";
+      console.error("[DashboardDetail][Coherence:Failed]", err);
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  function goBack() {
+    goto(`/dashboards?env_id=${encodeURIComponent(envId)}`);
+  }
+
+  function openDataset(datasetId) {
+    goto(`/datasets/${datasetId}?env_id=${encodeURIComponent(envId)}`);
+  }
+
+  function formatDate(value) {
+    if (!value) return "-";
+    const parsed = new Date(value);
+    if (Number.isNaN(parsed.getTime())) return "-";
+    return `${parsed.toLocaleDateString()} ${parsed.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`;
+  }
+</script>
+
+<div class="mx-auto w-full max-w-7xl space-y-6">
+  <div class="flex items-center justify-between">
+    <div>
+      <button
+        class="inline-flex items-center gap-2 rounded-lg px-2 py-1 text-sm text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
+        on:click={goBack}
+      >
+        <Icon name="chevronLeft" size={16} />
+        {$t.common?.back || "Back to Dashboards"}
+      </button>
+      <h1 class="mt-2 text-2xl font-bold text-slate-900">
+        {dashboard?.title || "Dashboard Overview"}
+      </h1>
+      <p class="mt-1 text-sm text-slate-500">
+        ID: {dashboardId}{#if dashboard?.slug} • {dashboard.slug}{/if}
+      </p>
+    </div>
+    <button
+      class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
+      on:click={loadDashboardDetail}
+    >
+      {$t.common?.refresh || "Refresh"}
+    </button>
+  </div>
+
+  {#if error}
+    <div class="flex items-center justify-between rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-red-700">
+      <span>{error}</span>
+      <button class="rounded bg-red-600 px-3 py-1.5 text-white hover:bg-red-700" on:click={loadDashboardDetail}>
+        {$t.common?.retry || "Retry"}
+      </button>
+    </div>
+  {/if}
+
+  {#if isLoading}
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+      {#each Array(3) as _}
+        <div class="h-24 animate-pulse rounded-xl border border-slate-200 bg-white"></div>
+      {/each}
+    </div>
+    <div class="h-64 animate-pulse rounded-xl border border-slate-200 bg-white"></div>
+  {:else if dashboard}
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+      <div class="rounded-xl border border-slate-200 bg-white p-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Last modified</p>
+        <p class="mt-2 text-lg font-semibold text-slate-900">{formatDate(dashboard.last_modified)}</p>
+      </div>
+      <div class="rounded-xl border border-slate-200 bg-white p-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Charts</p>
+        <p class="mt-2 text-lg font-semibold text-slate-900">{dashboard.chart_count || 0}</p>
+      </div>
+      <div class="rounded-xl border border-slate-200 bg-white p-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Datasets</p>
+        <p class="mt-2 text-lg font-semibold text-slate-900">{dashboard.dataset_count || 0}</p>
+      </div>
+    </div>
+
+    {#if dashboard.description}
+      <div class="rounded-xl border border-slate-200 bg-white p-4">
+        <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">Overview</h2>
+        <p class="mt-2 text-sm text-slate-700">{dashboard.description}</p>
+      </div>
+    {/if}
+
+    <div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
+      <div class="border-b border-slate-200 px-4 py-3">
+        <h2 class="text-lg font-semibold text-slate-900">Charts</h2>
+      </div>
+      {#if dashboard.charts && dashboard.charts.length > 0}
+        <div class="overflow-x-auto">
+          <table class="min-w-full divide-y divide-slate-200 text-sm">
+            <thead class="bg-slate-50">
+              <tr>
+                <th class="px-4 py-2 text-left font-semibold text-slate-600">Chart</th>
+                <th class="px-4 py-2 text-left font-semibold text-slate-600">Dataset</th>
+                <th class="px-4 py-2 text-left font-semibold text-slate-600">Overview</th>
+                <th class="px-4 py-2 text-left font-semibold text-slate-600">Last modified</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-100">
+              {#each dashboard.charts as chart}
+                <tr class="hover:bg-slate-50">
+                  <td class="px-4 py-3">
+                    <div class="font-medium text-slate-900">{chart.title}</div>
+                    <div class="text-xs text-slate-500">ID: {chart.id}{#if chart.viz_type} • {chart.viz_type}{/if}</div>
+                  </td>
+                  <td class="px-4 py-3">
+                    {#if chart.dataset_id}
+                      <button
+                        class="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-blue-700 hover:bg-blue-50 hover:text-blue-800"
+                        on:click={() => openDataset(chart.dataset_id)}
+                        title={`Open dataset ${chart.dataset_id}`}
+                      >
+                        Dataset {chart.dataset_id}
+                        <Icon name="chevronRight" size={12} className="text-blue-500" />
+                      </button>
+                    {:else}
+                      <span class="text-xs text-slate-400">-</span>
+                    {/if}
+                  </td>
+                  <td class="px-4 py-3 text-slate-700">{chart.overview || "-"}</td>
+                  <td class="px-4 py-3 text-slate-700">{formatDate(chart.last_modified)}</td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {:else}
+        <div class="px-4 py-8 text-sm text-slate-500">No charts found for this dashboard.</div>
+      {/if}
+    </div>
+
+    <div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
+      <div class="border-b border-slate-200 px-4 py-3">
+        <h2 class="text-lg font-semibold text-slate-900">Datasets</h2>
+      </div>
+      {#if dashboard.datasets && dashboard.datasets.length > 0}
+        <div class="divide-y divide-slate-100">
+          {#each dashboard.datasets as dataset}
+            <button
+              class="flex w-full items-center justify-between gap-4 px-4 py-3 text-left transition-colors hover:bg-slate-50"
+              on:click={() => openDataset(dataset.id)}
+            >
+              <div class="min-w-0">
+                <div class="truncate font-medium text-slate-900">{dataset.table_name}</div>
+                <div class="truncate text-xs text-slate-500">
+                  {dataset.overview || `${dataset.schema || ""}.${dataset.table_name}`}
+                  {#if dataset.database} • {dataset.database}{/if}
+                </div>
+              </div>
+              <div class="flex items-center gap-3">
+                <span class="text-xs text-slate-500">{formatDate(dataset.last_modified)}</span>
+                <Icon name="chevronRight" size={16} className="text-slate-400" />
+              </div>
+            </button>
+          {/each}
+        </div>
+      {:else}
+        <div class="px-4 py-8 text-sm text-slate-500">No datasets found for this dashboard.</div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<!-- [/DEF:DashboardDetail:Page] -->