diff --git a/src/components/dashboards/PanelCard.test.ts b/src/components/dashboards/PanelCard.test.ts
new file mode 100644
index 0000000..c1663fc
--- /dev/null
+++ b/src/components/dashboards/PanelCard.test.ts
@@ -0,0 +1,130 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import PanelCard from "./PanelCard.vue";
+import { servingApi } from "@/services/api";
+import { observabilityApi } from "@/services/observability";
+
+vi.mock("@/services/api", () => ({
+  servingApi: { series: vi.fn() },
+}));
+vi.mock("@/services/observability", () => ({
+  observabilityApi: { timeseries: vi.fn() },
+}));
+
+// Stub the canvas chart; the test only checks the data handed to it.
+const TimeSeriesChartStub = {
+  name: "TimeSeriesChart",
+  props: ["containers", "timestamps", "values", "unit", "area"],
+  template: "<div class='chart-stub' />",
+};
+
+const mountPanel = (panel: any) =>
+  mount(PanelCard, {
+    props: { panel, since: "1h" },
+    global: { stubs: { TimeSeriesChart: TimeSeriesChartStub, Icon: true } },
+  });
+
+describe("PanelCard", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("adapts serving RED points into the chart's series shape", async () => {
+    vi.mocked(servingApi.series).mockResolvedValue({
+      data: {
+        deployment: "shop",
+        since: "1h",
+        points: [
+          { time: "2026-07-17T10:00:00Z", requests: 10, errors: 1, avg_time_ms: 40, p95_time_ms: 80 },
+          { time: "2026-07-17T10:01:00Z", requests: 20, errors: 0, avg_time_ms: 55, p95_time_ms: 90 },
+        ],
+      },
+    } as any);
+
+    const wrapper = mountPanel({
+      title: "Requests",
+      source: "serving",
+      series: "requests",
+      deployment: "shop",
+      type: "line",
+      width: 6,
+    });
+    await flushPromises();
+
+    expect(servingApi.series).toHaveBeenCalledWith("shop", "1h");
+    const chart = wrapper.findComponent(TimeSeriesChartStub);
+    expect(chart.exists()).toBe(true);
+    expect(chart.props("containers")).toEqual(["shop"]);
+    expect(chart.props("timestamps")).toEqual([
+      Date.parse("2026-07-17T10:00:00Z") / 1000,
+      Date.parse("2026-07-17T10:01:00Z") / 1000,
+    ]);
+    expect(chart.props("values")).toEqual([[10, 20]]);
+    expect(chart.props("unit")).toBe("count");
+  });
+
+  it("selects the latency field and ms unit for a latency panel", async () => {
+    vi.mocked(servingApi.series).mockResolvedValue({
+      data: { points: [{ time: "2026-07-17T10:00:00Z", requests: 5, errors: 0, avg_time_ms: 42, p95_time_ms: 90 }] },
+    } as any);
+
+    const wrapper = mountPanel({
+      title: "Latency",
+      source: "serving",
+      series: "latency",
+      deployment: "shop",
+      type: "line",
+      width: 6,
+    });
+    await flushPromises();
+
+    const chart = wrapper.findComponent(TimeSeriesChartStub);
+    expect(chart.props("values")).toEqual([[42]]);
+    expect(chart.props("unit")).toBe("ms");
+  });
+
+  it("pulls the named metric series out of a container timeseries response", async () => {
+    vi.mocked(observabilityApi.timeseries).mockResolvedValue({
+      data: {
+        metrics: {
+          "container.cpu.usage": { containers: ["shop-web"], timestamps: [1, 2], values: [[3.5, 4.0]] },
+        },
+      },
+    } as any);
+
+    const wrapper = mountPanel({
+      title: "CPU",
+      source: "container",
+      series: "container.cpu.usage",
+      deployment: "shop",
+      type: "line",
+      width: 6,
+    });
+    await flushPromises();
+
+    expect(observabilityApi.timeseries).toHaveBeenCalledWith("shop", "1h");
+    const chart = wrapper.findComponent(TimeSeriesChartStub);
+    expect(chart.props("values")).toEqual([[3.5, 4.0]]);
+    expect(chart.props("unit")).toBe("percent");
+  });
+
+  it("shows the latest value as a stat", async () => {
+    vi.mocked(observabilityApi.timeseries).mockResolvedValue({
+      data: {
+        metrics: {
+          "container.cpu.usage": { containers: ["shop-web"], timestamps: [1, 2], values: [[3.5, 7.25]] },
+        },
+      },
+    } as any);
+
+    const wrapper = mountPanel({
+      title: "CPU now",
+      source: "container",
+      series: "container.cpu.usage",
+      deployment: "shop",
+      type: "stat",
+      width: 3,
+    });
+    await flushPromises();
+
+    expect(wrapper.find(".stat-value").text()).toBe("7.3%");
+  });
+});
diff --git a/src/components/dashboards/PanelCard.vue b/src/components/dashboards/PanelCard.vue
new file mode 100644
index 0000000..2107665
--- /dev/null
+++ b/src/components/dashboards/PanelCard.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="panel-card" :style="{ gridColumn: `span ${clampWidth(panel.width)}` }">
+    <div class="panel-head">
+      <span class="panel-title">{{ panel.title }}</span>
+      <span class="panel-scope">{{ panel.deployment || "all deployments" }}</span>
+      <div v-if="editable" class="panel-actions">
+        <button class="icon-btn" title="Edit panel" @click="emit('edit')"><Icon name="pencil" :size="14" /></button>
+        <button class="icon-btn" title="Remove panel" @click="emit('remove')">
+          <Icon name="trash-2" :size="14" />
+        </button>
+      </div>
+    </div>
+
+    <div class="panel-body">
+      <div v-if="loading" class="panel-msg">Loading</div>
+      <div v-else-if="error" class="panel-msg error">{{ error }}</div>
+      <template v-else-if="panel.type === 'stat'">
+        <div class="stat-value">{{ statDisplay }}</div>
+        <div class="stat-sub">{{ seriesLabel }}</div>
+      </template>
+      <TimeSeriesChart
+        v-else-if="series && series.timestamps.length"
+        :containers="series.containers"
+        :timestamps="series.timestamps"
+        :values="series.values"
+        :unit="unit"
+        area
+      />
+      <div v-else class="panel-msg">No data in this range</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import Icon from "@/components/base/Icon.vue";
+import TimeSeriesChart from "@/components/charts/TimeSeriesChart.vue";
+import { observabilityApi, type MetricSeries } from "@/services/observability";
+import { servingApi, type DashboardPanel } from "@/services/api";
+
+const props = defineProps<{
+  panel: DashboardPanel;
+  since: string;
+  editable?: boolean;
+}>();
+
+const emit = defineEmits<{ edit: []; remove: [] }>();
+
+const loading = ref(false);
+const error = ref("");
+const series = ref<MetricSeries | null>(null);
+
+const unit = computed<"percent" | "bytes" | "ms" | "count">(() => {
+  if (props.panel.source === "serving") return props.panel.series === "latency" ? "ms" : "count";
+  if (props.panel.series.startsWith("container.cpu")) return "percent";
+  if (props.panel.series.startsWith("container.memory")) return "bytes";
+  if (props.panel.series.startsWith("container.network")) return "bytes";
+  return "count";
+});
+
+const seriesLabel = computed(() => {
+  if (props.panel.source === "serving") return `serving · ${props.panel.series}`;
+  return props.panel.series.replace("container.", "");
+});
+
+// The stat panel shows the most recent value across containers.
+const statDisplay = computed(() => {
+  if (!series.value) return "-";
+  let latest: number | null = null;
+  for (const row of series.value.values) {
+    for (let i = row.length - 1; i >= 0; i--) {
+      if (row[i] != null) {
+        latest = (latest ?? 0) + (row[i] as number);
+        break;
+      }
+    }
+  }
+  if (latest == null) return "-";
+  return formatStat(latest, unit.value);
+});
+
+function formatStat(v: number, u: string): string {
+  if (u === "percent") return `${v.toFixed(1)}%`;
+  if (u === "ms") return v >= 1000 ? `${(v / 1000).toFixed(2)}s` : `${v.toFixed(0)}ms`;
+  if (u === "bytes") {
+    if (v >= 1 << 30) return `${(v / (1 << 30)).toFixed(1)}G`;
+    if (v >= 1 << 20) return `${(v / (1 << 20)).toFixed(0)}M`;
+    if (v >= 1 << 10) return `${(v / (1 << 10)).toFixed(0)}K`;
+    return `${v}B`;
+  }
+  return v >= 1000 ? `${(v / 1000).toFixed(1)}k` : `${Math.round(v)}`;
+}
+
+function clampWidth(w: number): number {
+  if (!w || w < 1) return 6;
+  return Math.min(12, w);
+}
+
+async function load() {
+  loading.value = true;
+  error.value = "";
+  try {
+    if (props.panel.source === "serving") {
+      if (!props.panel.deployment) {
+        error.value = "No deployment set";
+        return;
+      }
+      const { data } = await servingApi.series(props.panel.deployment, props.since);
+      const points = data.points || [];
+      const field = props.panel.series;
+      series.value = {
+        containers: [props.panel.deployment],
+        timestamps: points.map((p) => Math.floor(Date.parse(p.time) / 1000)),
+        values: [points.map((p) => (field === "errors" ? p.errors : field === "latency" ? p.avg_time_ms : p.requests))],
+      };
+    } else {
+      const { data } = await observabilityApi.timeseries(props.panel.deployment || "", props.since);
+      series.value = data.metrics?.[props.panel.series] ?? { containers: [], timestamps: [], values: [] };
+    }
+  } catch (e: any) {
+    error.value = e.response?.data?.error || e.message || "Failed to load";
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(() => [props.panel.source, props.panel.series, props.panel.deployment, props.since], load, { immediate: true });
+</script>
+
+<style scoped>
+.panel-card {
+  display: flex;
+  flex-direction: column;
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  min-height: 200px;
+  overflow: hidden;
+}
+.panel-head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.panel-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+.panel-scope {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+.panel-actions {
+  display: flex;
+  gap: 0.25rem;
+}
+.icon-btn {
+  display: inline-flex;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+.icon-btn:hover {
+  color: var(--text);
+  background: var(--surface-inset);
+}
+.panel-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 1rem;
+  min-height: 140px;
+}
+.panel-msg {
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  text-align: center;
+}
+.panel-msg.error {
+  color: var(--danger, #ef4444);
+}
+.stat-value {
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.1;
+}
+.stat-sub {
+  margin-top: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+</style>
diff --git a/src/components/dashboards/PanelEditorModal.vue b/src/components/dashboards/PanelEditorModal.vue
new file mode 100644
index 0000000..ad6c79d
--- /dev/null
+++ b/src/components/dashboards/PanelEditorModal.vue
@@ -0,0 +1,200 @@
+<template>
+  <Teleport to="body">
+    <div class="modal-overlay" @click.self="emit('cancel')">
+      <div class="modal-dialog">
+        <div class="modal-header">
+          <h3>{{ panel ? "Edit panel" : "Add panel" }}</h3>
+          <button class="icon-btn" @click="emit('cancel')"><Icon name="x" :size="16" /></button>
+        </div>
+
+        <div class="modal-body">
+          <div class="form-group">
+            <label>Title</label>
+            <input v-model="form.title" type="text" class="form-input" placeholder="CPU usage" />
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>Source</label>
+              <select v-model="form.source" class="form-input" @change="onSourceChange">
+                <option value="container">Container metrics</option>
+                <option value="serving">Serving (proxy)</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>Metric</label>
+              <select v-model="form.series" class="form-input">
+                <option v-for="opt in seriesOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label>Deployment {{ form.source === "serving" ? "(required)" : "(optional, all if empty)" }}</label>
+            <select v-model="form.deployment" class="form-input">
+              <option value="">{{ form.source === "serving" ? "Select a deployment" : "All deployments" }}</option>
+              <option v-for="d in deployments" :key="d" :value="d">{{ d }}</option>
+            </select>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>Visualization</label>
+              <select v-model="form.type" class="form-input">
+                <option value="line">Line chart</option>
+                <option value="stat">Single stat</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>Width (of 12)</label>
+              <input v-model.number="form.width" type="number" min="1" max="12" class="form-input" />
+            </div>
+          </div>
+
+          <p v-if="validationError" class="form-error">{{ validationError }}</p>
+        </div>
+
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="emit('cancel')">Cancel</button>
+          <button class="btn btn-primary" :disabled="!!validationError" @click="save">Save panel</button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import Icon from "@/components/base/Icon.vue";
+import type { DashboardPanel } from "@/services/api";
+
+const props = defineProps<{
+  panel?: DashboardPanel | null;
+  deployments: string[];
+}>();
+
+const emit = defineEmits<{ save: [panel: DashboardPanel]; cancel: [] }>();
+
+const containerSeries = [
+  { value: "container.cpu.usage", label: "CPU usage" },
+  { value: "container.memory.usage", label: "Memory usage" },
+  { value: "container.memory.limit", label: "Memory limit" },
+  { value: "container.network.io.rx", label: "Network in" },
+  { value: "container.network.io.tx", label: "Network out" },
+];
+const servingSeries = [
+  { value: "requests", label: "Requests" },
+  { value: "errors", label: "Errors" },
+  { value: "latency", label: "Latency" },
+];
+
+const form = ref<DashboardPanel>({
+  id: props.panel?.id,
+  title: props.panel?.title ?? "",
+  source: props.panel?.source ?? "container",
+  series: props.panel?.series ?? "container.cpu.usage",
+  deployment: props.panel?.deployment ?? "",
+  type: props.panel?.type ?? "line",
+  width: props.panel?.width ?? 6,
+});
+
+const seriesOptions = computed(() => (form.value.source === "serving" ? servingSeries : containerSeries));
+
+function onSourceChange() {
+  // Keep series valid for the chosen source.
+  form.value.series = seriesOptions.value[0].value;
+}
+
+const validationError = computed(() => {
+  if (!form.value.title.trim()) return "A title is required.";
+  if (form.value.source === "serving" && !form.value.deployment) return "A serving panel needs a deployment.";
+  if (form.value.width < 1 || form.value.width > 12) return "Width must be between 1 and 12.";
+  return "";
+});
+
+function save() {
+  if (validationError.value) return;
+  emit("save", { ...form.value, title: form.value.title.trim() });
+}
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+.modal-dialog {
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  width: 100%;
+  max-width: 520px;
+}
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border);
+}
+.modal-header h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+.modal-body {
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.form-row {
+  display: flex;
+  gap: 1rem;
+}
+.form-row .form-group {
+  flex: 1;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.form-group label {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+.form-input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface-inset);
+  color: var(--text);
+  font-size: 0.875rem;
+}
+.form-error {
+  margin: 0;
+  color: var(--danger, #ef4444);
+  font-size: 0.8rem;
+}
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--border);
+}
+.icon-btn {
+  display: inline-flex;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+</style>
diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue
index 7a8d6da..581152d 100644
--- a/src/layouts/DashboardLayout.vue
+++ b/src/layouts/DashboardLayout.vue
@@ -203,6 +203,15 @@
               <Icon name="activity" :size="15" />
               Observability
             </router-link>
+            <router-link
+              v-if="authStore.hasPermission('deployments:read')"
+              to="/dashboards"
+              class="nav-subitem"
+              active-class="active"
+            >
+              <Icon name="layout-dashboard" :size="15" />
+              Dashboards
+            </router-link>
             <router-link
               v-if="authStore.hasPermission('deployments:read')"
               to="/observability/alerts"
diff --git a/src/router/index.ts b/src/router/index.ts
index aed780a..c15cc0b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -112,6 +112,18 @@ const routes: RouteRecordRaw[] = [
         component: () => import("@/views/PluginsView.vue"),
         meta: { permission: "templates:read" },
       },
+      {
+        path: "dashboards",
+        name: "dashboards",
+        component: () => import("@/views/DashboardsView.vue"),
+        meta: { permission: "deployments:read" },
+      },
+      {
+        path: "dashboards/:id",
+        name: "dashboard-detail",
+        component: () => import("@/views/DashboardDetailView.vue"),
+        meta: { permission: "deployments:read" },
+      },
       {
         path: "observability",
         name: "observability",
diff --git a/src/views/DashboardDetailView.vue b/src/views/DashboardDetailView.vue
new file mode 100644
index 0000000..a0b0a2a
--- /dev/null
+++ b/src/views/DashboardDetailView.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="dashboard-detail">
+    <div v-if="loading" class="empty-state">Loading dashboard</div>
+    <div v-else-if="error" class="empty-state error">{{ error }}</div>
+    <template v-else-if="dashboard">
+      <div class="view-header">
+        <div class="title-block">
+          <router-link to="/dashboards" class="back-link"><Icon name="arrow-left" :size="16" /></router-link>
+          <input v-model="dashboard.name" class="name-input" @change="persist" />
+        </div>
+        <div class="header-actions">
+          <select v-model="since" class="range-select">
+            <option value="15m">Last 15m</option>
+            <option value="1h">Last 1h</option>
+            <option value="6h">Last 6h</option>
+            <option value="24h">Last 24h</option>
+          </select>
+          <button class="btn btn-primary" @click="addPanel">
+            <Icon name="plus" :size="16" />
+            Add panel
+          </button>
+        </div>
+      </div>
+
+      <div v-if="dashboard.panels.length === 0" class="empty-state">
+        <Icon name="layout-dashboard" :size="32" />
+        <p>This dashboard has no panels</p>
+        <span>Add a panel to plot a container or serving metric.</span>
+      </div>
+
+      <div v-else class="panel-grid">
+        <PanelCard
+          v-for="(p, i) in dashboard.panels"
+          :key="p.id || i"
+          :panel="p"
+          :since="since"
+          editable
+          @edit="editPanel(i)"
+          @remove="removePanel(i)"
+        />
+      </div>
+    </template>
+
+    <PanelEditorModal
+      v-if="editorOpen"
+      :panel="editing"
+      :deployments="deployments"
+      @cancel="editorOpen = false"
+      @save="onPanelSaved"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import Icon from "@/components/base/Icon.vue";
+import PanelCard from "@/components/dashboards/PanelCard.vue";
+import PanelEditorModal from "@/components/dashboards/PanelEditorModal.vue";
+import { dashboardsApi, deploymentsApi, type Dashboard, type DashboardPanel } from "@/services/api";
+
+const route = useRoute();
+const id = route.params.id as string;
+
+const dashboard = ref<Dashboard | null>(null);
+const deployments = ref<string[]>([]);
+const loading = ref(false);
+const error = ref("");
+const since = ref("1h");
+
+const editorOpen = ref(false);
+const editing = ref<DashboardPanel | null>(null);
+const editingIndex = ref(-1);
+
+async function fetchDashboard() {
+  loading.value = true;
+  error.value = "";
+  try {
+    const { data } = await dashboardsApi.get(id);
+    dashboard.value = data;
+  } catch (e: any) {
+    error.value = e.response?.data?.error || e.message || "Failed to load dashboard";
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function fetchDeployments() {
+  try {
+    const { data } = await deploymentsApi.list();
+    deployments.value = (data.deployments || []).map((d) => d.name);
+  } catch {
+    deployments.value = [];
+  }
+}
+
+// Every panel change is saved through the store's validation, and the returned
+// copy (with server-assigned ids) becomes the new state.
+async function persist() {
+  if (!dashboard.value) return;
+  try {
+    const { data } = await dashboardsApi.save(dashboard.value);
+    dashboard.value = data;
+  } catch (e: any) {
+    error.value = e.response?.data?.error || e.message || "Failed to save dashboard";
+    await fetchDashboard();
+  }
+}
+
+function addPanel() {
+  editing.value = null;
+  editingIndex.value = -1;
+  editorOpen.value = true;
+}
+
+function editPanel(i: number) {
+  if (!dashboard.value) return;
+  editing.value = { ...dashboard.value.panels[i] };
+  editingIndex.value = i;
+  editorOpen.value = true;
+}
+
+async function onPanelSaved(panel: DashboardPanel) {
+  if (!dashboard.value) return;
+  if (editingIndex.value >= 0) {
+    dashboard.value.panels[editingIndex.value] = panel;
+  } else {
+    dashboard.value.panels.push(panel);
+  }
+  editorOpen.value = false;
+  await persist();
+}
+
+async function removePanel(i: number) {
+  if (!dashboard.value) return;
+  dashboard.value.panels.splice(i, 1);
+  await persist();
+}
+
+onMounted(() => {
+  fetchDashboard();
+  fetchDeployments();
+});
+</script>
+
+<style scoped>
+.dashboard-detail {
+  padding: 1.5rem;
+}
+.view-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+  gap: 1rem;
+}
+.title-block {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.back-link {
+  display: inline-flex;
+  color: var(--text-muted);
+}
+.name-input {
+  font-size: 1.35rem;
+  font-weight: 700;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text);
+  border-radius: var(--radius-sm);
+  padding: 0.25rem 0.5rem;
+}
+.name-input:hover,
+.name-input:focus {
+  border-color: var(--border);
+  background: var(--surface-inset);
+  outline: none;
+}
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.range-select {
+  padding: 0.4rem 0.65rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface-inset);
+  color: var(--text);
+  font-size: 0.85rem;
+}
+.panel-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1rem;
+}
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 3rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+.empty-state.error {
+  color: var(--danger, #ef4444);
+}
+</style>
diff --git a/src/views/DashboardsView.test.ts b/src/views/DashboardsView.test.ts
new file mode 100644
index 0000000..e785280
--- /dev/null
+++ b/src/views/DashboardsView.test.ts
@@ -0,0 +1,58 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { mount, flushPromises, type VueWrapper } from "@vue/test-utils";
+import DashboardsView from "./DashboardsView.vue";
+import { dashboardsApi } from "@/services/api";
+
+const push = vi.fn();
+vi.mock("vue-router", () => ({ useRouter: () => ({ push }) }));
+vi.mock("@/services/api", () => ({
+  dashboardsApi: { list: vi.fn(), save: vi.fn(), remove: vi.fn() },
+}));
+
+let wrapper: VueWrapper;
+const mountView = () => {
+  wrapper = mount(DashboardsView, { attachTo: document.body, global: { stubs: { Icon: true } } });
+  return wrapper;
+};
+
+describe("DashboardsView", () => {
+  beforeEach(() => vi.clearAllMocks());
+  afterEach(() => {
+    wrapper?.unmount();
+    document.body.innerHTML = "";
+  });
+
+  it("lists the stored dashboards", async () => {
+    vi.mocked(dashboardsApi.list).mockResolvedValue({
+      data: { dashboards: [{ id: "a", name: "Prod overview", panels: [{}, {}] }] },
+    } as any);
+
+    const wrapper = mountView();
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("Prod overview");
+    expect(wrapper.text()).toContain("2 panels");
+  });
+
+  it("creates a dashboard and navigates to it", async () => {
+    vi.mocked(dashboardsApi.list).mockResolvedValue({ data: { dashboards: [] } } as any);
+    vi.mocked(dashboardsApi.save).mockResolvedValue({ data: { id: "new1", name: "Fresh", panels: [] } } as any);
+
+    const w = mountView();
+    await flushPromises();
+
+    await w.find(".btn-primary").trigger("click"); // open create modal (teleported to body)
+
+    const input = document.querySelector<HTMLInputElement>(".modal-dialog input")!;
+    input.value = "Fresh";
+    input.dispatchEvent(new Event("input"));
+    await flushPromises();
+
+    const buttons = Array.from(document.querySelectorAll<HTMLButtonElement>(".modal-footer .btn-primary"));
+    buttons[buttons.length - 1].click(); // confirm create
+    await flushPromises();
+
+    expect(dashboardsApi.save).toHaveBeenCalledWith({ name: "Fresh", panels: [] });
+    expect(push).toHaveBeenCalledWith("/dashboards/new1");
+  });
+});
diff --git a/src/views/DashboardsView.vue b/src/views/DashboardsView.vue
new file mode 100644
index 0000000..09e6467
--- /dev/null
+++ b/src/views/DashboardsView.vue
@@ -0,0 +1,249 @@
+<template>
+  <div class="dashboards-view">
+    <div class="view-header">
+      <div>
+        <h1>Dashboards</h1>
+        <p class="subtitle">Build your own views over container and serving metrics.</p>
+      </div>
+      <button class="btn btn-primary" @click="showCreate = true">
+        <Icon name="plus" :size="16" />
+        New dashboard
+      </button>
+    </div>
+
+    <div v-if="loading" class="empty-state">Loading dashboards</div>
+    <div v-else-if="error" class="empty-state error">{{ error }}</div>
+    <div v-else-if="dashboards.length === 0" class="empty-state">
+      <Icon name="layout-dashboard" :size="32" />
+      <p>No dashboards yet</p>
+      <span>Create one to arrange the metrics you care about.</span>
+    </div>
+
+    <div v-else class="dashboard-grid">
+      <div v-for="d in dashboards" :key="d.id" class="dashboard-card" @click="open(d)">
+        <div class="card-main">
+          <Icon name="layout-dashboard" :size="18" />
+          <span class="card-name">{{ d.name }}</span>
+        </div>
+        <div class="card-foot">
+          <span>{{ d.panels.length }} {{ d.panels.length === 1 ? "panel" : "panels" }}</span>
+          <button class="icon-btn" title="Delete dashboard" @click.stop="remove(d)">
+            <Icon name="trash-2" :size="15" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <div v-if="showCreate" class="modal-overlay" @click.self="showCreate = false">
+        <div class="modal-dialog">
+          <div class="modal-header">
+            <h3>New dashboard</h3>
+            <button class="icon-btn" @click="showCreate = false"><Icon name="x" :size="16" /></button>
+          </div>
+          <div class="modal-body">
+            <label>Name</label>
+            <input
+              v-model="newName"
+              type="text"
+              class="form-input"
+              placeholder="Production overview"
+              @keyup.enter="create"
+            />
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-secondary" @click="showCreate = false">Cancel</button>
+            <button class="btn btn-primary" :disabled="!newName.trim() || creating" @click="create">Create</button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import Icon from "@/components/base/Icon.vue";
+import { dashboardsApi, type Dashboard } from "@/services/api";
+
+const router = useRouter();
+const dashboards = ref<Dashboard[]>([]);
+const loading = ref(false);
+const error = ref("");
+const showCreate = ref(false);
+const newName = ref("");
+const creating = ref(false);
+
+async function fetchDashboards() {
+  loading.value = true;
+  error.value = "";
+  try {
+    const { data } = await dashboardsApi.list();
+    dashboards.value = data.dashboards || [];
+  } catch (e: any) {
+    error.value = e.response?.data?.error || e.message || "Failed to load dashboards";
+  } finally {
+    loading.value = false;
+  }
+}
+
+function open(d: Dashboard) {
+  router.push(`/dashboards/${d.id}`);
+}
+
+async function create() {
+  if (!newName.value.trim()) return;
+  creating.value = true;
+  try {
+    const { data } = await dashboardsApi.save({ name: newName.value.trim(), panels: [] });
+    showCreate.value = false;
+    newName.value = "";
+    router.push(`/dashboards/${data.id}`);
+  } catch (e: any) {
+    error.value = e.response?.data?.error || e.message || "Failed to create dashboard";
+  } finally {
+    creating.value = false;
+  }
+}
+
+async function remove(d: Dashboard) {
+  if (!d.id || !confirm(`Delete dashboard "${d.name}"?`)) return;
+  try {
+    await dashboardsApi.remove(d.id);
+    dashboards.value = dashboards.value.filter((x) => x.id !== d.id);
+  } catch (e: any) {
+    error.value = e.response?.data?.error || e.message || "Failed to delete dashboard";
+  }
+}
+
+onMounted(fetchDashboards);
+</script>
+
+<style scoped>
+.dashboards-view {
+  padding: 1.5rem;
+}
+.view-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+}
+.view-header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+}
+.subtitle {
+  margin: 0.25rem 0 0;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 1rem;
+}
+.dashboard-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface-raised);
+  padding: 1rem;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+.dashboard-card:hover {
+  border-color: var(--primary, #6366f1);
+}
+.card-main {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+}
+.card-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 0.75rem;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 3rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+.empty-state.error {
+  color: var(--danger, #ef4444);
+}
+.icon-btn {
+  display: inline-flex;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+.icon-btn:hover {
+  color: var(--text);
+}
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+.modal-dialog {
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  width: 100%;
+  max-width: 420px;
+}
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border);
+}
+.modal-header h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+.modal-body {
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.modal-body label {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+.form-input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface-inset);
+  color: var(--text);
+  font-size: 0.875rem;
+}
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--border);
+}
+</style>