diff --git a/admin/ui/e2e/specs/dashboard.spec.js b/admin/ui/e2e/specs/dashboard.spec.js
index 3b6bc0c..e33a489 100644
--- a/admin/ui/e2e/specs/dashboard.spec.js
+++ b/admin/ui/e2e/specs/dashboard.spec.js
@@ -93,8 +93,10 @@ test.describe('Fleet Dashboard', () => {
 
     const cardCount = await page.getByTestId('instance-card').count();
 
-    // Click remove on last card
-    await page.getByTestId('instance-card').last().getByTestId('instance-delete').click();
+    // Open the actions menu on the last card and click Remove
+    const lastCard = page.getByTestId('instance-card').last();
+    await lastCard.getByTestId('instance-actions').click();
+    await lastCard.getByTestId('instance-delete').click();
 
     // Confirm dialog
     await expect(page.getByTestId('confirm-ok')).toBeVisible();
diff --git a/admin/ui/src/assets/cloudblue-logo-white.png b/admin/ui/src/assets/cloudblue-logo-white.png
new file mode 100644
index 0000000..17008ff
Binary files /dev/null and b/admin/ui/src/assets/cloudblue-logo-white.png differ
diff --git a/admin/ui/src/components/FleetKpiPanel.vue b/admin/ui/src/components/FleetKpiPanel.vue
index d0f38e7..0ad400a 100644
--- a/admin/ui/src/components/FleetKpiPanel.vue
+++ b/admin/ui/src/components/FleetKpiPanel.vue
@@ -67,10 +67,22 @@ const scopeNote = computed(() => {
 
 .grid {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+	grid-template-columns: repeat(4, minmax(0, 1fr));
 	gap: var(--space-3);
 }
 
+@media (max-width: 900px) {
+	.grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+
+@media (max-width: 520px) {
+	.grid {
+		grid-template-columns: 1fr;
+	}
+}
+
 .scope {
 	font-size: var(--font-size-xs);
 	color: var(--color-text-tertiary);
diff --git a/admin/ui/src/components/InstanceActionMenu.vue b/admin/ui/src/components/InstanceActionMenu.vue
new file mode 100644
index 0000000..661ff37
--- /dev/null
+++ b/admin/ui/src/components/InstanceActionMenu.vue
@@ -0,0 +1,163 @@
+<template>
+	<div ref="root" :class="$style.menu">
+		<BaseButton
+			:class="$style.trigger"
+			size="sm"
+			variant="ghost"
+			type="button"
+			data-testid="instance-actions"
+			:aria-label="`More actions for ${label}`"
+			aria-haspopup="menu"
+			:aria-expanded="open ? 'true' : 'false'"
+			@click.stop="toggleMenu"
+		>
+			<svg
+				width="16"
+				height="16"
+				viewBox="0 0 16 16"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="1.5"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<circle cx="3" cy="8" r="1" fill="currentColor" stroke="none" />
+				<circle cx="8" cy="8" r="1" fill="currentColor" stroke="none" />
+				<circle cx="13" cy="8" r="1" fill="currentColor" stroke="none" />
+			</svg>
+		</BaseButton>
+		<div v-if="open" :class="$style.panel" role="menu">
+			<button
+				:class="$style.item"
+				type="button"
+				role="menuitem"
+				data-testid="instance-delete"
+				@click.stop="handleRemove"
+			>
+				Remove
+			</button>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { onBeforeUnmount, ref, watch } from 'vue';
+import BaseButton from './BaseButton.vue';
+
+defineProps({
+	label: { type: String, required: true },
+});
+
+const emit = defineEmits(['remove']);
+
+const open = ref(false);
+const root = ref(null);
+
+function closeMenu() {
+	open.value = false;
+}
+
+function toggleMenu() {
+	open.value = !open.value;
+}
+
+function handleRemove() {
+	closeMenu();
+	emit('remove');
+}
+
+function handleDocumentClick(event) {
+	if (!open.value || root.value?.contains(event.target)) {
+		return;
+	}
+
+	closeMenu();
+}
+
+function handleDocumentKeydown(event) {
+	if (event.key === 'Escape') {
+		closeMenu();
+	}
+}
+
+watch(open, (isOpen) => {
+	if (typeof document === 'undefined') {
+		return;
+	}
+
+	const method = isOpen ? 'addEventListener' : 'removeEventListener';
+	document[method]('click', handleDocumentClick);
+	document[method]('keydown', handleDocumentKeydown);
+});
+
+onBeforeUnmount(() => {
+	if (typeof document === 'undefined') {
+		return;
+	}
+
+	document.removeEventListener('click', handleDocumentClick);
+	document.removeEventListener('keydown', handleDocumentKeydown);
+});
+</script>
+
+<style module>
+.menu {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+}
+
+.trigger {
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	border-color: var(--color-border);
+	color: var(--color-text-secondary);
+	background-color: var(--color-bg-surface);
+	border-radius: var(--radius-md);
+	flex-shrink: 0;
+}
+
+.trigger:hover:not(:disabled),
+.trigger[aria-expanded='true'] {
+	background-color: var(--color-bg-primary);
+	color: var(--color-text-primary);
+	border-color: var(--color-border);
+}
+
+.panel {
+	position: absolute;
+	top: calc(100% + var(--space-2));
+	right: 0;
+	min-width: 132px;
+	padding: var(--space-1);
+	background-color: var(--color-bg-surface);
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius-lg);
+	box-shadow: var(--shadow-md);
+	z-index: 10;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.item {
+	width: 100%;
+	padding: var(--space-2) var(--space-3);
+	border: none;
+	border-radius: var(--radius-md);
+	background: transparent;
+	color: var(--color-error);
+	text-align: left;
+	font-size: var(--font-size-sm);
+	font-weight: var(--font-weight-medium);
+	cursor: pointer;
+}
+
+.item:hover,
+.item:focus-visible {
+	background-color: var(--color-error-bg);
+	outline: none;
+}
+</style>
diff --git a/admin/ui/src/components/InstanceCard.vue b/admin/ui/src/components/InstanceCard.vue
index 26ffcf2..6a76af1 100644
--- a/admin/ui/src/components/InstanceCard.vue
+++ b/admin/ui/src/components/InstanceCard.vue
@@ -11,7 +11,9 @@
 	>
 		<div :class="$style.header">
 			<div :class="$style.titleRow">
-				<h3 :class="$style.name">{{ instance.name }}</h3>
+				<h3 :class="$style.name">
+					<span :class="$style.nameLink">{{ instance.name }}</span>
+				</h3>
 				<StatusIndicator
 					:status="instance.status"
 					:label="getStatusLabel(instance.status)"
@@ -20,14 +22,14 @@
 			<div :class="$style.address">{{ instance.address }}</div>
 		</div>
 		<div :class="$style.meta">
-			<div v-if="instance.version" :class="$style.metaItem">
+			<div :class="$style.metaItem">
 				<span :class="$style.metaLabel">Version</span>
-				<span :class="$style.metaValue">{{ instance.version }}</span>
+				<span :class="$style.metaValue">{{ instance.version || '—' }}</span>
 			</div>
-			<div v-if="instance.last_seen_at" :class="$style.metaItem">
+			<div :class="$style.metaItem">
 				<span :class="$style.metaLabel">Last seen</span>
 				<span :class="$style.metaValue">{{
-					formatTime(instance.last_seen_at)
+					formatTime(instance.last_seen_at) || '—'
 				}}</span>
 			</div>
 		</div>
@@ -40,14 +42,10 @@
 			>
 				Edit
 			</BaseButton>
-			<BaseButton
-				size="sm"
-				variant="ghost"
-				data-testid="instance-delete"
-				@click.stop="$emit('delete', instance)"
-			>
-				Remove
-			</BaseButton>
+			<InstanceActionMenu
+				:label="instance.name"
+				@remove="$emit('delete', instance)"
+			/>
 		</div>
 	</BaseCard>
 </template>
@@ -55,6 +53,7 @@
 <script setup>
 import BaseCard from './BaseCard.vue';
 import BaseButton from './BaseButton.vue';
+import InstanceActionMenu from './InstanceActionMenu.vue';
 import StatusIndicator from './StatusIndicator.vue';
 import { formatTime, getStatusLabel } from '../utils/instance.js';
 
@@ -98,6 +97,19 @@ function onCardKeydown(e) {
 	margin: 0;
 }
 
+.nameLink {
+	color: var(--color-accent);
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.14em;
+	transition: color 0.15s;
+}
+
+.card:hover .nameLink,
+.card:focus-visible .nameLink {
+	color: var(--color-accent-hover);
+}
+
 .address {
 	font-size: var(--font-size-xs);
 	color: var(--color-text-secondary);
@@ -106,7 +118,8 @@ function onCardKeydown(e) {
 }
 
 .meta {
-	display: flex;
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
 	gap: var(--space-5);
 	margin-bottom: var(--space-3);
 }
@@ -131,6 +144,8 @@ function onCardKeydown(e) {
 
 .actions {
 	display: flex;
+	align-items: center;
+	justify-content: space-between;
 	gap: var(--space-2);
 	padding-top: var(--space-3);
 	border-top: 1px solid var(--color-border-light);
diff --git a/admin/ui/src/components/InstanceTable.vue b/admin/ui/src/components/InstanceTable.vue
index 3f9352d..dd4c26c 100644
--- a/admin/ui/src/components/InstanceTable.vue
+++ b/admin/ui/src/components/InstanceTable.vue
@@ -24,27 +24,30 @@
 					@keydown.space="onRowKeydown($event, inst)"
 				>
 					<td :class="$style.td">
-						<StatusIndicator :status="inst.status" />
+						<StatusIndicator
+							:status="inst.status"
+							:label="getStatusLabel(inst.status)"
+						/>
 					</td>
 					<td :class="[$style.td, $style.name]">{{ inst.name }}</td>
 					<td :class="[$style.td, $style.mono]">{{ inst.address }}</td>
 					<td :class="$style.td">{{ inst.version || '—' }}</td>
 					<td :class="$style.td">{{ formatTime(inst.last_seen_at) || '—' }}</td>
 					<td :class="[$style.td, $style.actionsCol]">
-						<BaseButton
-							size="sm"
-							variant="secondary"
-							@click.stop="$emit('edit', inst)"
-						>
-							Edit
-						</BaseButton>
-						<BaseButton
-							size="sm"
-							variant="ghost"
-							@click.stop="$emit('delete', inst)"
-						>
-							Remove
-						</BaseButton>
+						<div :class="$style.actionGroup">
+							<BaseButton
+								size="sm"
+								variant="secondary"
+								@click.stop="$emit('edit', inst)"
+							>
+								Edit
+							</BaseButton>
+							<InstanceActionMenu
+								:label="inst.name"
+								@click.stop
+								@remove="$emit('delete', inst)"
+							/>
+						</div>
 					</td>
 				</tr>
 			</tbody>
@@ -53,9 +56,10 @@
 </template>
 
 <script setup>
+import InstanceActionMenu from './InstanceActionMenu.vue';
 import StatusIndicator from './StatusIndicator.vue';
 import BaseButton from './BaseButton.vue';
-import { formatTime } from '../utils/instance.js';
+import { formatTime, getStatusLabel } from '../utils/instance.js';
 
 defineProps({
 	instances: { type: Array, required: true },
@@ -128,11 +132,10 @@ function onRowKeydown(e, inst) {
 	white-space: nowrap;
 }
 
-.actionsCol :global(button) {
-	margin-left: var(--space-2);
-}
-
-.actionsCol :global(button:first-child) {
-	margin-left: 0;
+.actionGroup {
+	display: inline-flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: var(--space-2);
 }
 </style>
diff --git a/admin/ui/src/components/OverviewTab.vue b/admin/ui/src/components/OverviewTab.vue
index 712a53f..838bb11 100644
--- a/admin/ui/src/components/OverviewTab.vue
+++ b/admin/ui/src/components/OverviewTab.vue
@@ -32,6 +32,7 @@
 		<div :class="$style.chartSection">
 			<h3 id="latency-chart-title" :class="$style.chartTitle">
 				Latency Over Time
+				<span :class="$style.chartHint">· P50, P95, P99, in ms</span>
 			</h3>
 			<div
 				:class="$style.chartContainer"
@@ -89,7 +90,13 @@ const hasSeries = computed(
 const latencyChartOption = computed(() => {
 	const series = props.metrics.series || [];
 	return {
-		grid: { top: 40, right: 16, bottom: 40, left: 56 },
+		grid: {
+			top: 0,
+			right: 0,
+			bottom: 28,
+			left: 0,
+			containLabel: true,
+		},
 		tooltip: {
 			trigger: 'axis',
 			formatter(params) {
@@ -113,8 +120,6 @@ const latencyChartOption = computed(() => {
 		},
 		yAxis: {
 			type: 'value',
-			name: 'ms',
-			nameTextStyle: { fontSize: 11 },
 			axisLabel: { fontSize: 11 },
 			splitLine: { lineStyle: { color: '#f0f0f0' } },
 		},
@@ -161,7 +166,7 @@ const latencyChartOption = computed(() => {
 
 .kpiGrid {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+	grid-template-columns: repeat(5, minmax(0, 1fr));
 	gap: var(--space-3);
 }
 
@@ -179,6 +184,11 @@ const latencyChartOption = computed(() => {
 	margin: 0 0 var(--space-3) 0;
 }
 
+.chartHint {
+	color: var(--color-text-tertiary);
+	font-weight: var(--font-weight-normal);
+}
+
 .chartContainer {
 	position: relative;
 }
@@ -196,4 +206,22 @@ const latencyChartOption = computed(() => {
 	color: var(--color-text-tertiary);
 	font-size: var(--font-size-sm);
 }
+
+@media (max-width: 1200px) {
+	.kpiGrid {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+}
+
+@media (max-width: 900px) {
+	.kpiGrid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+
+@media (max-width: 520px) {
+	.kpiGrid {
+		grid-template-columns: 1fr;
+	}
+}
 </style>
diff --git a/admin/ui/src/components/StatusIndicator.vue b/admin/ui/src/components/StatusIndicator.vue
index 87d33fa..9fd13dc 100644
--- a/admin/ui/src/components/StatusIndicator.vue
+++ b/admin/ui/src/components/StatusIndicator.vue
@@ -40,7 +40,7 @@ const computedAriaLabel = computed(() => {
 .indicator {
 	display: inline-flex;
 	align-items: center;
-	gap: var(--space-2);
+	gap: 4px;
 }
 
 .dot {
diff --git a/admin/ui/src/components/TrafficTab.vue b/admin/ui/src/components/TrafficTab.vue
index c22bc38..358e798 100644
--- a/admin/ui/src/components/TrafficTab.vue
+++ b/admin/ui/src/components/TrafficTab.vue
@@ -15,6 +15,7 @@
 			<div :class="$style.chartSection">
 				<h3 id="rps-chart-title" :class="$style.chartTitle">
 					Requests Per Second
+					<span :class="$style.chartHint">· per vendor, req/s</span>
 				</h3>
 				<div role="img" aria-labelledby="rps-chart-title">
 					<VChart
@@ -29,6 +30,7 @@
 			<div :class="$style.chartSection">
 				<h3 id="latency-vendor-chart-title" :class="$style.chartTitle">
 					Latency
+					<span :class="$style.chartHint">{{ latencyHint }}</span>
 				</h3>
 				<div role="img" aria-labelledby="latency-vendor-chart-title">
 					<VChart
@@ -41,7 +43,10 @@
 				</div>
 			</div>
 			<div :class="$style.chartSection">
-				<h3 id="error-chart-title" :class="$style.chartTitle">Error Rate</h3>
+				<h3 id="error-chart-title" :class="$style.chartTitle">
+					Error Rate
+					<span :class="$style.chartHint">· per vendor, %</span>
+				</h3>
 				<div role="img" aria-labelledby="error-chart-title">
 					<VChart
 						ref="errorChartRef"
@@ -102,6 +107,9 @@ const hasVendorSeries = computed(() => {
 const vendorIds = computed(() => sortedVendors.value.map((v) => v.vendor_id));
 
 const colorMap = computed(() => assignVendorColors(vendorIds.value));
+const latencyHint = computed(() =>
+	singleVendor.value ? '· P50, P95, P99, in ms' : '· P99 per vendor, in ms',
+);
 
 // Auto-select top 3 vendors by RPS when vendor list changes
 watch(
@@ -159,7 +167,13 @@ function syncZoom(source, event) {
 
 function buildBaseOption() {
 	return {
-		grid: { top: 16, right: 16, bottom: 56, left: 56 },
+		grid: {
+			top: 0,
+			right: 0,
+			bottom: 40,
+			left: 0,
+			containLabel: true,
+		},
 		xAxis: {
 			type: 'time',
 			axisLabel: { fontSize: 11 },
@@ -180,6 +194,8 @@ function buildBaseOption() {
 				xAxisIndex: 0,
 				start: zoomStart.value,
 				end: zoomEnd.value,
+				zoomOnMouseWheel: 'alt',
+				moveOnMouseWheel: false,
 			},
 		],
 		animationDuration: 300,
@@ -193,8 +209,6 @@ const rpsChartOption = computed(() => {
 		...base,
 		yAxis: {
 			type: 'value',
-			name: 'req/s',
-			nameTextStyle: { fontSize: 11 },
 			axisLabel: { fontSize: 11 },
 			splitLine: { lineStyle: { color: '#f0f0f0' } },
 		},
@@ -278,8 +292,6 @@ const latencyChartOption = computed(() => {
 		...base,
 		yAxis: {
 			type: 'value',
-			name: 'ms',
-			nameTextStyle: { fontSize: 11 },
 			axisLabel: { fontSize: 11 },
 			splitLine: { lineStyle: { color: '#f0f0f0' } },
 		},
@@ -305,8 +317,6 @@ const errorChartOption = computed(() => {
 		...base,
 		yAxis: {
 			type: 'value',
-			name: '%',
-			nameTextStyle: { fontSize: 11 },
 			axisLabel: {
 				fontSize: 11,
 				formatter: (v) => `${(v * 100).toFixed(1)}`,
@@ -366,6 +376,11 @@ const errorChartOption = computed(() => {
 	margin: 0 0 var(--space-2) 0;
 }
 
+.chartHint {
+	color: var(--color-text-tertiary);
+	font-weight: var(--font-weight-normal);
+}
+
 .chart {
 	width: 100%;
 	height: 220px;
diff --git a/admin/ui/src/layouts/AppLayout.vue b/admin/ui/src/layouts/AppLayout.vue
index 84ad48b..fc52882 100644
--- a/admin/ui/src/layouts/AppLayout.vue
+++ b/admin/ui/src/layouts/AppLayout.vue
@@ -23,7 +23,11 @@
 					<line x1="3" y1="18" x2="21" y2="18" />
 				</svg>
 			</button>
-			<RouterLink to="/" :class="$style.mobileTitle">Chaperone</RouterLink>
+			<RouterLink to="/" :class="$style.mobileTitle">
+				<span>Chaperone</span>
+				<span :class="$style.mobileTitleMuted">by</span>
+				<img :class="$style.mobileLogo" :src="cloudBlueLogo" alt="CloudBlue" />
+			</RouterLink>
 		</header>
 
 		<!-- Backdrop for mobile sidebar -->
@@ -35,7 +39,17 @@
 
 		<aside :class="[$style.sidebar, sidebarOpen && $style.sidebarOpen]">
 			<div :class="$style.logo">
-				<RouterLink to="/" :class="$style.logoText">Chaperone</RouterLink>
+				<RouterLink to="/" :class="$style.logoText">
+					<span :class="$style.logoPrimary">Chaperone</span>
+					<span :class="$style.logoSecondary">
+						<span :class="$style.logoSecondaryMuted">by</span>
+						<img
+							:class="$style.logoMark"
+							:src="cloudBlueLogo"
+							alt="CloudBlue"
+						/>
+					</span>
+				</RouterLink>
 				<button
 					:class="$style.closeButton"
 					aria-label="Close navigation"
@@ -199,6 +213,7 @@
 import { ref, watch } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import { useAuthStore } from '../stores/auth.js';
+import cloudBlueLogo from '../assets/cloudblue-logo-white.png';
 
 const route = useRoute();
 const router = useRouter();
@@ -254,13 +269,46 @@ async function handleLogout() {
 }
 
 .logoText {
-	font-size: var(--font-size-md);
-	font-weight: var(--font-weight-bold);
+	display: inline-flex;
+	flex-direction: column;
+	gap: var(--space-1);
 	color: var(--color-text-sidebar-active);
-	letter-spacing: -0.01em;
 	text-decoration: none;
 }
 
+.logoText:hover {
+	text-decoration: none;
+}
+
+.logoPrimary {
+	font-size: var(--font-size-2xl);
+	line-height: 1.05;
+	font-weight: var(--font-weight-bold);
+	letter-spacing: -0.03em;
+}
+
+.logoSecondary {
+	display: inline-flex;
+	align-items: baseline;
+	gap: var(--space-2);
+	font-size: var(--font-size-sm);
+	line-height: 1;
+	color: var(--color-text-sidebar-active);
+	letter-spacing: -0.02em;
+}
+
+.logoSecondaryMuted {
+	font-weight: var(--font-weight-normal);
+	color: var(--color-text-sidebar);
+}
+
+.logoMark {
+	height: 1.1rem;
+	width: auto;
+	object-fit: contain;
+	transform: translateY(1px);
+}
+
 .nav {
 	display: flex;
 	flex-direction: column;
@@ -386,12 +434,31 @@ async function handleLogout() {
 	}
 
 	.mobileTitle {
-		font-size: var(--font-size-md);
+		display: inline-flex;
+		align-items: baseline;
+		gap: var(--space-2);
+		font-size: var(--font-size-lg);
 		font-weight: var(--font-weight-bold);
 		color: var(--color-text-sidebar-active);
 		text-decoration: none;
 	}
 
+	.mobileTitle:hover {
+		text-decoration: none;
+	}
+
+	.mobileTitleMuted {
+		font-weight: var(--font-weight-normal);
+		color: var(--color-text-sidebar);
+	}
+
+	.mobileLogo {
+		height: 1rem;
+		width: auto;
+		object-fit: contain;
+		transform: translateY(1px);
+	}
+
 	.menuButton {
 		display: flex;
 		align-items: center;
diff --git a/admin/ui/src/utils/metrics.js b/admin/ui/src/utils/metrics.js
index 7077e78..f6ec5b3 100644
--- a/admin/ui/src/utils/metrics.js
+++ b/admin/ui/src/utils/metrics.js
@@ -57,8 +57,16 @@ export function trendDirection(value) {
 
 export function assignVendorColors(vendorIds) {
 	const map = {};
-	vendorIds.forEach((id, i) => {
-		map[id] = VENDOR_COLORS[i % VENDOR_COLORS.length];
+	vendorIds.forEach((id) => {
+		map[id] = VENDOR_COLORS[colorIndexForVendor(id)];
 	});
 	return map;
 }
+
+function colorIndexForVendor(id) {
+	let hash = 0;
+	for (let index = 0; index < id.length; index += 1) {
+		hash = (hash * 31 + id.charCodeAt(index)) >>> 0;
+	}
+	return hash % VENDOR_COLORS.length;
+}
diff --git a/admin/ui/src/utils/metrics.test.js b/admin/ui/src/utils/metrics.test.js
index b83cc22..acd03d1 100644
--- a/admin/ui/src/utils/metrics.test.js
+++ b/admin/ui/src/utils/metrics.test.js
@@ -120,20 +120,26 @@ describe('trendDirection', () => {
 });
 
 describe('assignVendorColors', () => {
-	it('assigns unique colors to vendors', () => {
-		const map = assignVendorColors(['a', 'b', 'c']);
-		expect(map.a).toBe(VENDOR_COLORS[0]);
-		expect(map.b).toBe(VENDOR_COLORS[1]);
-		expect(map.c).toBe(VENDOR_COLORS[2]);
-	});
-
-	it('wraps around when more vendors than colors', () => {
-		const ids = Array.from(
-			{ length: VENDOR_COLORS.length + 1 },
-			(_, i) => `v${i}`,
-		);
-		const map = assignVendorColors(ids);
-		expect(map[`v${VENDOR_COLORS.length}`]).toBe(VENDOR_COLORS[0]);
+	it('assigns palette colors to vendors deterministically', () => {
+		const map = assignVendorColors(['alpha', 'beta', 'gamma']);
+		expect(VENDOR_COLORS).toContain(map.alpha);
+		expect(VENDOR_COLORS).toContain(map.beta);
+		expect(VENDOR_COLORS).toContain(map.gamma);
+	});
+
+	it('keeps the same color when vendor order changes', () => {
+		const first = assignVendorColors(['alpha', 'beta', 'gamma']);
+		const second = assignVendorColors(['gamma', 'alpha', 'beta']);
+		expect(second.alpha).toBe(first.alpha);
+		expect(second.beta).toBe(first.beta);
+		expect(second.gamma).toBe(first.gamma);
+	});
+
+	it('keeps existing vendor colors when new vendors appear', () => {
+		const base = assignVendorColors(['alpha', 'beta']);
+		const expanded = assignVendorColors(['zeta', 'alpha', 'beta', 'omega']);
+		expect(expanded.alpha).toBe(base.alpha);
+		expect(expanded.beta).toBe(base.beta);
 	});
 
 	it('returns empty map for empty input', () => {
diff --git a/admin/ui/src/views/InstanceDetailView.vue b/admin/ui/src/views/InstanceDetailView.vue
index 3ee67c8..2a925d6 100644
--- a/admin/ui/src/views/InstanceDetailView.vue
+++ b/admin/ui/src/views/InstanceDetailView.vue
@@ -6,32 +6,65 @@
 				to="/"
 				:class="$style.breadcrumbLink"
 				data-testid="breadcrumb-fleet"
-				>Fleet</RouterLink
 			>
-			<span :class="$style.breadcrumbSep" aria-hidden="true">/</span>
-			<span :class="$style.breadcrumbCurrent">{{
-				instance?.name ?? 'Loading...'
-			}}</span>
+				<svg
+					width="16"
+					height="16"
+					viewBox="0 0 16 16"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<path d="M10 3 5 8l5 5" />
+				</svg>
+				Fleet</RouterLink
+			>
 		</nav>
 
 		<!-- Header -->
 		<div v-if="instance" :class="$style.header">
-			<div>
+			<div :class="$style.headerContent">
 				<h1 ref="headingRef" :class="$style.title" tabindex="-1">
 					{{ instance.name }}
 				</h1>
 				<div :class="$style.meta">
-					<StatusIndicator
-						:status="instance.status"
-						:label="getStatusLabel(instance.status)"
-						size="sm"
-					/>
-					<span :class="$style.address">{{ instance.address }}</span>
-					<span v-if="instance.version" :class="$style.version"
-						>v{{ instance.version }}</span
-					>
+					<div :class="$style.metaItem">
+						<span :class="$style.metaLabel">Status</span>
+						<StatusIndicator
+							:status="instance.status"
+							:label="getStatusLabel(instance.status)"
+						/>
+					</div>
+					<div :class="$style.metaItem">
+						<span :class="$style.metaLabel">Address</span>
+						<span :class="[$style.metaValue, $style.metaMono]">{{
+							instance.address
+						}}</span>
+					</div>
+					<div :class="$style.metaItem">
+						<span :class="$style.metaLabel">Version</span>
+						<span :class="$style.metaValue">{{ instance.version || '—' }}</span>
+					</div>
+					<div :class="$style.metaItem">
+						<span :class="$style.metaLabel">Last seen</span>
+						<span :class="$style.metaValue">{{
+							formatTime(instance.last_seen_at) || '—'
+						}}</span>
+					</div>
 				</div>
 			</div>
+			<div :class="$style.actions">
+				<BaseButton size="sm" variant="secondary" @click="handleEdit(instance)">
+					Edit
+				</BaseButton>
+				<InstanceActionMenu
+					:label="instance.name"
+					@remove="handleDelete(instance)"
+				/>
+			</div>
 		</div>
 
 		<!-- Tabs -->
@@ -65,6 +98,23 @@
 			<TrafficTab v-else :metrics="metrics" />
 		</div>
 
+		<AddInstanceModal
+			v-if="showModal"
+			:instance="editingInstance"
+			@close="closeModal"
+			@saved="handleSaved"
+		/>
+
+		<ConfirmDialog
+			v-if="deletingInstance"
+			title="Remove instance"
+			:description="`This will stop monitoring &quot;${deletingInstance.name}&quot; and remove it from the registry. Metrics history for this instance will be lost.`"
+			confirm-label="Remove"
+			:destructive="true"
+			@confirm="onConfirmDelete"
+			@cancel="cancelDelete"
+		/>
+
 		<!-- Collecting data state -->
 		<div
 			v-else-if="instance && !metrics && !metricsStore.instanceError"
@@ -101,17 +151,23 @@
 
 <script setup>
 import { ref, computed, watch, onUnmounted, nextTick } from 'vue';
-import { useRoute, RouterLink } from 'vue-router';
+import { useRoute, useRouter, RouterLink } from 'vue-router';
+import BaseButton from '../components/BaseButton.vue';
 import StatusIndicator from '../components/StatusIndicator.vue';
+import InstanceActionMenu from '../components/InstanceActionMenu.vue';
+import AddInstanceModal from '../components/AddInstanceModal.vue';
+import ConfirmDialog from '../components/ConfirmDialog.vue';
 import BaseEmptyState from '../components/BaseEmptyState.vue';
 import LoadingSpinner from '../components/LoadingSpinner.vue';
 import OverviewTab from '../components/OverviewTab.vue';
 import TrafficTab from '../components/TrafficTab.vue';
 import { useInstanceStore } from '../stores/instances.js';
 import { useMetricsStore } from '../stores/metrics.js';
-import { getStatusLabel } from '../utils/instance.js';
+import { getStatusLabel, formatTime } from '../utils/instance.js';
 import { usePolling } from '../composables/usePolling.js';
+import { useConfirmDialog } from '../composables/useConfirmDialog.js';
 
+const router = useRouter();
 const route = useRoute();
 const store = useInstanceStore();
 const metricsStore = useMetricsStore();
@@ -122,6 +178,8 @@ const tabs = [
 
 const activeTab = ref('overview');
 const headingRef = ref(null);
+const showModal = ref(false);
+const editingInstance = ref(null);
 
 const instanceId = computed(() => Number(route.params.id));
 
@@ -131,6 +189,13 @@ const instance = computed(() =>
 
 const metrics = computed(() => metricsStore.instance);
 
+const {
+	pending: deletingInstance,
+	requestConfirm: handleDelete,
+	confirm: confirmDelete,
+	cancel: cancelDelete,
+} = useConfirmDialog();
+
 function activateTab(tabId) {
 	activeTab.value = tabId;
 	document.getElementById(`tab-${tabId}`)?.focus();
@@ -161,6 +226,27 @@ watch(instanceId, () => {
 	activeTab.value = 'overview';
 });
 
+function handleEdit(inst) {
+	editingInstance.value = inst;
+	showModal.value = true;
+}
+
+function handleSaved() {
+	store.fetchInstances();
+}
+
+function closeModal() {
+	showModal.value = false;
+	editingInstance.value = null;
+}
+
+function onConfirmDelete() {
+	confirmDelete(async (inst) => {
+		await store.deleteInstance(inst.id);
+		router.push({ name: 'dashboard' });
+	});
+}
+
 onUnmounted(() => metricsStore.clearInstance());
 </script>
 
@@ -168,17 +254,20 @@ onUnmounted(() => metricsStore.clearInstance());
 .page {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-5);
+	gap: var(--space-4);
 }
 
 .breadcrumb {
 	display: flex;
 	align-items: center;
-	gap: var(--space-2);
+	gap: 6px;
 	font-size: var(--font-size-sm);
 }
 
 .breadcrumbLink {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
 	color: var(--color-text-secondary);
 	text-decoration: none;
 }
@@ -187,19 +276,18 @@ onUnmounted(() => metricsStore.clearInstance());
 	color: var(--color-accent);
 }
 
-.breadcrumbSep {
-	color: var(--color-text-tertiary);
-}
-
-.breadcrumbCurrent {
-	color: var(--color-text-primary);
-	font-weight: var(--font-weight-medium);
-}
-
 .header {
 	display: flex;
 	align-items: flex-start;
 	justify-content: space-between;
+	gap: var(--space-4);
+}
+
+.headerContent {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-3);
+	min-width: 0;
 }
 
 .title {
@@ -212,20 +300,40 @@ onUnmounted(() => metricsStore.clearInstance());
 
 .meta {
 	display: flex;
-	align-items: center;
-	gap: var(--space-3);
-	margin-top: var(--space-2);
+	flex-wrap: wrap;
+	align-items: flex-start;
+	gap: var(--space-8);
+}
+
+.metaItem {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
 }
 
-.address {
+.metaLabel {
 	font-size: var(--font-size-xs);
+	color: var(--color-text-tertiary);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+}
+
+.metaValue {
+	font-size: var(--font-size-sm);
+	color: var(--color-text-primary);
+}
+
+.metaMono {
 	font-family: var(--font-family-mono);
+	font-size: var(--font-size-xs);
 	color: var(--color-text-secondary);
 }
 
-.version {
-	font-size: var(--font-size-xs);
-	color: var(--color-text-tertiary);
+.actions {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	flex-shrink: 0;
 }
 
 .tabs {
@@ -269,4 +377,14 @@ onUnmounted(() => metricsStore.clearInstance());
 	justify-content: center;
 	padding: var(--space-8) 0;
 }
+
+@media (max-width: 768px) {
+	.header {
+		flex-direction: column;
+	}
+
+	.actions {
+		align-self: flex-start;
+	}
+}
 </style>
diff --git a/admin/ui/src/views/LoginView.vue b/admin/ui/src/views/LoginView.vue
index e2509e7..db7d93d 100644
--- a/admin/ui/src/views/LoginView.vue
+++ b/admin/ui/src/views/LoginView.vue
@@ -40,6 +40,11 @@
 				</BaseButton>
 			</form>
 		</div>
+		<div :class="$style.branding" aria-label="Chaperone, a CloudBlue project">
+			<span>Chaperone &mdash; a</span>
+			<img :class="$style.brandingLogo" :src="cloudBlueLogo" alt="CloudBlue" />
+			<span>project</span>
+		</div>
 	</div>
 </template>
 
@@ -49,6 +54,7 @@ import { useRouter } from 'vue-router';
 import { useAuthStore } from '../stores/auth.js';
 import BaseInput from '../components/BaseInput.vue';
 import BaseButton from '../components/BaseButton.vue';
+import cloudBlueLogo from '../assets/cloudblue-logo-white.png';
 
 const router = useRouter();
 const auth = useAuthStore();
@@ -82,10 +88,13 @@ async function handleSubmit() {
 <style module>
 .page {
 	display: flex;
+	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	min-height: 100vh;
 	background-color: var(--color-bg-primary);
+	padding: var(--space-8) var(--space-4);
+	gap: var(--space-6);
 }
 
 .card {
@@ -134,4 +143,28 @@ async function handleSubmit() {
 	color: var(--color-error);
 	font-size: var(--font-size-sm);
 }
+
+.branding {
+	display: inline-flex;
+	align-items: baseline;
+	gap: var(--space-3);
+	margin: 0;
+	font-size: var(--font-size-xs);
+	color: var(--color-text-secondary);
+	text-align: center;
+	letter-spacing: -0.02em;
+}
+
+.brandingLogo {
+	height: 1.3rem;
+	width: auto;
+	filter: brightness(0) saturate(100%);
+}
+
+@media (max-width: 520px) {
+	.branding {
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+}
 </style>