diff --git a/apps/mesh/src/web/components/connections/connection-instance-row.tsx b/apps/mesh/src/web/components/connections/connection-instance-row.tsx
new file mode 100644
index 0000000000..1b607aa9c3
--- /dev/null
+++ b/apps/mesh/src/web/components/connections/connection-instance-row.tsx
@@ -0,0 +1,92 @@
+import { IntegrationIcon } from "@/web/components/integration-icon.tsx";
+import { cn } from "@deco/ui/lib/utils.ts";
+import type { ConnectionEntity } from "@decocms/mesh-sdk";
+import { ChevronRight } from "@untitledui/icons";
+import { User } from "@/web/components/user/user.tsx";
+
+type StatusValue = "active" | "error" | "inactive";
+
+function StatusDot({ status }: { status: StatusValue }) {
+  if (status === "active") {
+    return (
+      <div className="flex items-center gap-1.5 shrink-0">
+        <span className="size-1.5 rounded-full bg-emerald-500 shrink-0" />
+        <span className="text-xs text-emerald-600">Connected</span>
+      </div>
+    );
+  }
+
+  if (status === "error") {
+    return (
+      <div className="flex items-center gap-1.5 shrink-0">
+        <span className="size-1.5 rounded-full bg-destructive shrink-0" />
+        <span className="text-xs text-destructive">Error</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-1.5 shrink-0">
+      <span className="size-1.5 rounded-full bg-muted-foreground/30 shrink-0" />
+      <span className="text-xs text-muted-foreground">Inactive</span>
+    </div>
+  );
+}
+
+export interface ConnectionInstanceRowProps {
+  connection: ConnectionEntity;
+  onClick: () => void;
+  /** Show the integration icon — used for solo connections that render without an accordion header */
+  showIcon?: boolean;
+}
+
+export function ConnectionInstanceRow({
+  connection,
+  onClick,
+  showIcon = false,
+}: ConnectionInstanceRowProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "group w-full flex items-center gap-3 px-4 py-3.5 text-left",
+        "border-b border-border last:border-b-0",
+        "hover:bg-muted/40 transition-colors",
+      )}
+    >
+      {showIcon && (
+        <IntegrationIcon
+          icon={connection.icon}
+          name={connection.title}
+          size="sm"
+          className="shrink-0"
+        />
+      )}
+
+      {/* Title and description */}
+      <div className="flex flex-col min-w-0 flex-1">
+        <span className="text-sm font-medium text-foreground truncate">
+          {connection.title}
+        </span>
+        {connection.description && (
+          <span className="text-xs text-muted-foreground truncate mt-0.5">
+            {connection.description}
+          </span>
+        )}
+      </div>
+
+      {/* Status indicator */}
+      <StatusDot status={connection.status} />
+
+      {/* Creator avatar */}
+      <User id={connection.created_by} size="xs" />
+
+      {/* Chevron */}
+      <ChevronRight
+        size={14}
+        className="text-muted-foreground/40 group-hover:text-muted-foreground transition-colors shrink-0"
+      />
+    </button>
+  );
+}
diff --git a/apps/mesh/src/web/components/connections/connection-service-group.tsx b/apps/mesh/src/web/components/connections/connection-service-group.tsx
new file mode 100644
index 0000000000..1a6f97b52c
--- /dev/null
+++ b/apps/mesh/src/web/components/connections/connection-service-group.tsx
@@ -0,0 +1,86 @@
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@deco/ui/components/collapsible.tsx";
+import type { ConnectionEntity } from "@decocms/mesh-sdk";
+import { ChevronDown, ChevronRight } from "@untitledui/icons";
+import { useState } from "react";
+import { IntegrationIcon } from "@/web/components/integration-icon.tsx";
+import { ConnectionInstanceRow } from "./connection-instance-row.tsx";
+
+export interface ConnectionServiceGroupProps {
+  serviceName: string;
+  icon: string | null;
+  instances: ConnectionEntity[];
+  defaultOpen?: boolean;
+  onInstanceClick: (connectionId: string) => void;
+}
+
+export function ConnectionServiceGroup({
+  serviceName,
+  icon,
+  instances,
+  defaultOpen,
+  onInstanceClick,
+}: ConnectionServiceGroupProps) {
+  const firstInstance = instances[0];
+  const isSolo =
+    instances.length === 1 && firstInstance != null && !firstInstance.app_name;
+  const resolvedDefaultOpen = defaultOpen ?? instances.length === 1;
+  const [open, setOpen] = useState(resolvedDefaultOpen);
+
+  if (isSolo && firstInstance != null) {
+    return (
+      <div className="border border-border rounded-xl overflow-hidden bg-card">
+        <ConnectionInstanceRow
+          connection={firstInstance}
+          onClick={() => onInstanceClick(firstInstance.id)}
+          showIcon
+        />
+      </div>
+    );
+  }
+
+  return (
+    <Collapsible
+      open={open}
+      onOpenChange={setOpen}
+      className="border border-border rounded-xl overflow-hidden bg-card"
+    >
+      <CollapsibleTrigger asChild>
+        <button
+          type="button"
+          className="w-full flex items-center gap-3 px-4 py-3.5 hover:bg-muted/30 transition-colors"
+        >
+          <IntegrationIcon icon={icon} name={serviceName} size="sm" />
+          <span className="text-sm font-medium text-foreground flex-1 text-left">
+            {serviceName}
+          </span>
+          <span className="text-xs text-muted-foreground">
+            {instances.length} instances
+          </span>
+          {open ? (
+            <ChevronDown size={14} className="text-muted-foreground shrink-0" />
+          ) : (
+            <ChevronRight
+              size={14}
+              className="text-muted-foreground shrink-0"
+            />
+          )}
+        </button>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="border-t border-border">
+          {instances.map((instance) => (
+            <ConnectionInstanceRow
+              key={instance.id}
+              connection={instance}
+              onClick={() => onInstanceClick(instance.id)}
+            />
+          ))}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
diff --git a/apps/mesh/src/web/components/details/connection/connection-activity.tsx b/apps/mesh/src/web/components/details/connection/connection-activity.tsx
new file mode 100644
index 0000000000..2fd7ff4344
--- /dev/null
+++ b/apps/mesh/src/web/components/details/connection/connection-activity.tsx
@@ -0,0 +1,217 @@
+import {
+  calculateStats,
+  type MonitoringLogsResponse as BaseMonitoringLogsResponse,
+} from "@/web/components/monitoring/monitoring-stats-row.tsx";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@deco/ui/components/chart.tsx";
+import { KEYS } from "@/web/lib/query-keys.ts";
+import { cn } from "@deco/ui/lib/utils.ts";
+import {
+  SELF_MCP_ALIAS_ID,
+  useMCPClient,
+  useProjectContext,
+} from "@decocms/mesh-sdk";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Suspense, useState } from "react";
+import { Bar, BarChart, Cell, XAxis } from "recharts";
+
+type Timeframe = "7d" | "14d" | "30d";
+
+const TIMEFRAMES: { value: Timeframe; label: string }[] = [
+  { value: "7d", label: "7d" },
+  { value: "14d", label: "14d" },
+  { value: "30d", label: "30d" },
+];
+
+function getDateRange(timeframe: Timeframe): {
+  startDate: Date;
+  endDate: Date;
+} {
+  const end = new Date();
+  const start = new Date(end);
+  if (timeframe === "7d") start.setDate(start.getDate() - 7);
+  else if (timeframe === "14d") start.setDate(start.getDate() - 14);
+  else start.setDate(start.getDate() - 30);
+  return { startDate: start, endDate: end };
+}
+
+const CHART_CONFIG = {
+  calls: { label: "Tool calls" },
+  errors: { label: "Errors" },
+};
+
+interface ActivityChartProps {
+  connectionId: string;
+  orgId: string;
+  timeframe: Timeframe;
+}
+
+function ActivityChart({ connectionId, orgId, timeframe }: ActivityChartProps) {
+  const client = useMCPClient({ connectionId: SELF_MCP_ALIAS_ID, orgId });
+  const dateRange = getDateRange(timeframe);
+
+  const { data } = useSuspenseQuery({
+    queryKey: KEYS.connectionActivity(connectionId, timeframe),
+    queryFn: async () => {
+      const result = (await client.callTool({
+        name: "MONITORING_LOGS_LIST",
+        arguments: {
+          startDate: dateRange.startDate.toISOString(),
+          endDate: dateRange.endDate.toISOString(),
+          connectionId,
+          limit: 2000,
+          offset: 0,
+        },
+      })) as { structuredContent?: unknown };
+      return (result.structuredContent ?? result) as BaseMonitoringLogsResponse;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const stats = calculateStats(data?.logs ?? [], dateRange);
+  const chartData = stats.data;
+  const hasData = stats.totalCalls > 0;
+
+  return (
+    <div className="px-5 pb-5">
+      {/* Summary numbers */}
+      <div className="flex gap-6 mb-4">
+        <div>
+          <p className="text-2xl font-semibold text-foreground tabular-nums">
+            {stats.totalCalls.toLocaleString()}
+          </p>
+          <p className="text-xs text-muted-foreground mt-0.5">Tool calls</p>
+        </div>
+        {stats.totalErrors > 0 && (
+          <div>
+            <p className="text-2xl font-semibold text-destructive tabular-nums">
+              {stats.totalErrors.toLocaleString()}
+            </p>
+            <p className="text-xs text-muted-foreground mt-0.5">Errors</p>
+          </div>
+        )}
+        {stats.avgDurationMs > 0 && (
+          <div>
+            <p className="text-2xl font-semibold text-foreground tabular-nums">
+              {Math.round(stats.avgDurationMs)}ms
+            </p>
+            <p className="text-xs text-muted-foreground mt-0.5">Avg latency</p>
+          </div>
+        )}
+      </div>
+
+      {hasData ? (
+        <ChartContainer config={CHART_CONFIG} className="h-20 w-full">
+          <BarChart data={chartData} barCategoryGap="20%">
+            <XAxis
+              dataKey="label"
+              tick={{ fontSize: 10, fill: "var(--muted-foreground)" }}
+              axisLine={false}
+              tickLine={false}
+              interval="preserveStartEnd"
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(_, payload) => {
+                    const first = Array.isArray(payload)
+                      ? payload[0]
+                      : undefined;
+                    return first &&
+                      typeof first === "object" &&
+                      "payload" in first
+                      ? ((first as { payload?: { label?: string } }).payload
+                          ?.label ?? "")
+                      : "";
+                  }}
+                />
+              }
+              cursor={{ fill: "var(--muted)" }}
+            />
+            <Bar dataKey="calls" radius={[2, 2, 0, 0]} minPointSize={1}>
+              {chartData.map((entry, index) => (
+                <Cell
+                  key={`cell-${index}`}
+                  fill={
+                    entry.errorRate > 50
+                      ? "var(--destructive)"
+                      : "var(--foreground)"
+                  }
+                  fillOpacity={
+                    entry.calls === 0 ? 0.2 : entry.errorRate > 50 ? 0.7 : 0.85
+                  }
+                />
+              ))}
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+      ) : (
+        <div className="h-20 flex items-center justify-center">
+          <p className="text-sm text-muted-foreground/60">
+            No activity in this period
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ActivitySkeleton() {
+  return (
+    <div className="px-5 pb-5">
+      <div className="flex gap-6 mb-4">
+        <div className="flex flex-col gap-1.5">
+          <div className="h-7 w-16 rounded-md bg-muted animate-pulse" />
+          <div className="h-3 w-14 rounded bg-muted animate-pulse" />
+        </div>
+      </div>
+      <div className="h-20 w-full rounded-md bg-muted animate-pulse" />
+    </div>
+  );
+}
+
+interface ConnectionActivityProps {
+  connectionId: string;
+}
+
+export function ConnectionActivity({ connectionId }: ConnectionActivityProps) {
+  const [timeframe, setTimeframe] = useState<Timeframe>("14d");
+  const { org } = useProjectContext();
+
+  return (
+    <div className="rounded-xl border border-border bg-card overflow-hidden">
+      <div className="px-5 py-4 flex items-center justify-between">
+        <div>
+          <h3 className="text-sm font-semibold text-foreground">Activity</h3>
+        </div>
+        <div className="flex items-center gap-0.5 bg-muted rounded-lg p-0.5">
+          {TIMEFRAMES.map((tf) => (
+            <button
+              key={tf.value}
+              type="button"
+              onClick={() => setTimeframe(tf.value)}
+              className={cn(
+                "px-2.5 py-1 text-xs font-medium rounded-md transition-colors",
+                timeframe === tf.value
+                  ? "bg-background text-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {tf.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <Suspense fallback={<ActivitySkeleton />}>
+        <ActivityChart
+          connectionId={connectionId}
+          orgId={org.id}
+          timeframe={timeframe}
+        />
+      </Suspense>
+    </div>
+  );
+}
diff --git a/apps/mesh/src/web/components/details/connection/connection-agents-panel.tsx b/apps/mesh/src/web/components/details/connection/connection-agents-panel.tsx
new file mode 100644
index 0000000000..4757115c2c
--- /dev/null
+++ b/apps/mesh/src/web/components/details/connection/connection-agents-panel.tsx
@@ -0,0 +1,32 @@
+import { useProjectContext } from "@decocms/mesh-sdk";
+import type { ConnectionEntity } from "@decocms/mesh-sdk";
+import { ConnectionVirtualMCPsSection } from "./settings-tab/connection-virtual-mcps-section";
+
+interface ConnectionAgentsPanelProps {
+  connection: ConnectionEntity;
+}
+
+export function ConnectionAgentsPanel({
+  connection,
+}: ConnectionAgentsPanelProps) {
+  const { org } = useProjectContext();
+
+  return (
+    <div className="rounded-xl border border-border bg-card overflow-hidden">
+      <div className="px-5 py-4 border-b border-border">
+        <h3 className="text-sm font-semibold text-foreground">
+          Used by agents
+        </h3>
+      </div>
+      <div className="px-2 py-2">
+        <ConnectionVirtualMCPsSection
+          connectionId={connection.id}
+          connectionTitle={connection.title}
+          connectionDescription={connection.description}
+          connectionIcon={connection.icon}
+          org={org.slug}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/mesh/src/web/components/details/connection/connection-capabilities.tsx b/apps/mesh/src/web/components/details/connection/connection-capabilities.tsx
new file mode 100644
index 0000000000..55d007bfc7
--- /dev/null
+++ b/apps/mesh/src/web/components/details/connection/connection-capabilities.tsx
@@ -0,0 +1,248 @@
+import { cn } from "@deco/ui/lib/utils.ts";
+import { BookOpen01, Columns01, Tool01 } from "@untitledui/icons";
+import { useState } from "react";
+
+/**
+ * Converts a snake_case or dot.case tool function name to readable English.
+ * e.g. "repos.list" -> "List Repos", "create_issue" -> "Create Issue"
+ */
+function humanizeName(name: string): string {
+  const parts = name.replace(/[._]/g, " ").trim().split(/\s+/);
+  const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+
+  const verbs = new Set([
+    "list",
+    "create",
+    "get",
+    "update",
+    "delete",
+    "fetch",
+    "search",
+    "run",
+    "trigger",
+    "review",
+    "send",
+    "check",
+  ]);
+
+  const words = parts.map(capitalize);
+  // If last word is a verb, move it to front for natural reading
+  const lastWord = parts[parts.length - 1];
+  if (words.length >= 2 && lastWord && verbs.has(lastWord)) {
+    const verb = words.pop()!;
+    return [verb, ...words].join(" ");
+  }
+  return words.join(" ");
+}
+
+interface Tool {
+  name: string;
+  description?: string;
+}
+
+interface Prompt {
+  name: string;
+  description?: string;
+}
+
+interface Resource {
+  name: string;
+  description?: string;
+  uri?: string;
+}
+
+interface ConnectionCapabilitiesProps {
+  tools: Tool[];
+  prompts?: Prompt[];
+  resources?: Resource[];
+}
+
+type Tab = "tools" | "prompts" | "resources";
+
+function EmptyCapabilities({ label }: { label: string }) {
+  return (
+    <div className="px-5 py-8 text-center">
+      <p className="text-sm text-muted-foreground">No {label} available.</p>
+    </div>
+  );
+}
+
+export function ConnectionCapabilities({
+  tools,
+  prompts = [],
+  resources = [],
+}: ConnectionCapabilitiesProps) {
+  const hasTools = tools.length > 0;
+  const hasPrompts = prompts.length > 0;
+  const hasResources = resources.length > 0;
+
+  const tabs = [
+    {
+      id: "tools" as Tab,
+      label: "Tools",
+      count: tools.length,
+      icon: Tool01,
+      show: true,
+    },
+    {
+      id: "prompts" as Tab,
+      label: "Prompts",
+      count: prompts.length,
+      icon: BookOpen01,
+      show: hasPrompts,
+    },
+    {
+      id: "resources" as Tab,
+      label: "Resources",
+      count: resources.length,
+      icon: Columns01,
+      show: hasResources,
+    },
+  ].filter((t) => t.show);
+
+  const [activeTab, setActiveTab] = useState<Tab>("tools");
+
+  // If the active tab has no content, reset to tools
+  const resolvedTab =
+    activeTab === "prompts" && !hasPrompts
+      ? "tools"
+      : activeTab === "resources" && !hasResources
+        ? "tools"
+        : activeTab;
+
+  const totalItems = tools.length + prompts.length + resources.length;
+
+  if (totalItems === 0) {
+    return (
+      <div className="rounded-xl border border-border bg-card p-5">
+        <h3 className="text-sm font-semibold text-foreground mb-1">
+          Capabilities
+        </h3>
+        <p className="text-sm text-muted-foreground">
+          No capabilities discovered yet. The connection may still be
+          connecting.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-xl border border-border bg-card overflow-hidden">
+      <div className="px-5 py-4 border-b border-border flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-foreground">Capabilities</h3>
+        {tabs.length > 1 && (
+          <div className="flex items-center gap-0.5 bg-muted rounded-lg p-0.5">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                type="button"
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  "px-2.5 py-1 text-xs font-medium rounded-md transition-colors flex items-center gap-1.5",
+                  resolvedTab === tab.id
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                {tab.label}
+                <span
+                  className={cn(
+                    "text-[10px] tabular-nums",
+                    resolvedTab === tab.id
+                      ? "text-muted-foreground"
+                      : "text-muted-foreground/60",
+                  )}
+                >
+                  {tab.count}
+                </span>
+              </button>
+            ))}
+          </div>
+        )}
+        {tabs.length === 1 && (
+          <p className="text-xs text-muted-foreground">
+            {tools.length} {tools.length === 1 ? "tool" : "tools"}
+          </p>
+        )}
+      </div>
+
+      {resolvedTab === "tools" && (
+        <div className="divide-y divide-border">
+          {hasTools ? (
+            tools.map((tool) => (
+              <div key={tool.name} className="flex items-start gap-3 px-5 py-3">
+                <div className="mt-0.5 shrink-0 size-7 rounded-md bg-muted flex items-center justify-center">
+                  <Tool01 size={13} className="text-muted-foreground" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium text-foreground">
+                    {humanizeName(tool.name)}
+                  </div>
+                  {tool.description && (
+                    <div className="text-xs text-muted-foreground mt-0.5 leading-relaxed line-clamp-2">
+                      {tool.description}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))
+          ) : (
+            <EmptyCapabilities label="tools" />
+          )}
+        </div>
+      )}
+
+      {resolvedTab === "prompts" && (
+        <div className="divide-y divide-border">
+          {prompts.map((prompt) => (
+            <div key={prompt.name} className="flex items-start gap-3 px-5 py-3">
+              <div className="mt-0.5 shrink-0 size-7 rounded-md bg-muted flex items-center justify-center">
+                <BookOpen01 size={13} className="text-muted-foreground" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-sm font-medium text-foreground">
+                  {humanizeName(prompt.name)}
+                </div>
+                {prompt.description && (
+                  <div className="text-xs text-muted-foreground mt-0.5 leading-relaxed line-clamp-2">
+                    {prompt.description}
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {resolvedTab === "resources" && (
+        <div className="divide-y divide-border">
+          {resources.map((resource) => (
+            <div
+              key={resource.uri ?? resource.name}
+              className="flex items-start gap-3 px-5 py-3"
+            >
+              <div className="mt-0.5 shrink-0 size-7 rounded-md bg-muted flex items-center justify-center">
+                <Columns01 size={13} className="text-muted-foreground" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-sm font-medium text-foreground">
+                  {resource.name}
+                </div>
+                {resource.description && (
+                  <div className="text-xs text-muted-foreground mt-0.5 leading-relaxed line-clamp-2">
+                    {resource.description}
+                  </div>
+                )}
+                {resource.uri && (
+                  <div className="text-xs text-muted-foreground/60 font-mono mt-0.5 truncate">
+                    {resource.uri}
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/mesh/src/web/components/details/connection/connection-detail-header.tsx b/apps/mesh/src/web/components/details/connection/connection-detail-header.tsx
new file mode 100644
index 0000000000..f0a9a42c56
--- /dev/null
+++ b/apps/mesh/src/web/components/details/connection/connection-detail-header.tsx
@@ -0,0 +1,82 @@
+import { IntegrationIcon } from "@/web/components/integration-icon.tsx";
+import { ConnectionStatus } from "@/web/components/connections/connection-status.tsx";
+import type { ConnectionEntity } from "@decocms/mesh-sdk";
+import { Badge } from "@deco/ui/components/badge.tsx";
+import { Button } from "@deco/ui/components/button.tsx";
+import { Settings01 } from "@untitledui/icons";
+
+interface ConnectionDetailHeaderProps {
+  connection: ConnectionEntity;
+  onOpenSettings: () => void;
+  onDisconnect: () => void;
+}
+
+export function ConnectionDetailHeader({
+  connection,
+  onOpenSettings,
+  onDisconnect,
+}: ConnectionDetailHeaderProps) {
+  return (
+    <div className="flex items-start gap-6 py-7 px-8 bg-background border-b border-border shrink-0">
+      <IntegrationIcon
+        icon={connection.icon}
+        name={connection.title}
+        size="xl"
+        className="shrink-0 mt-0.5"
+      />
+      <div className="flex-1 min-w-0">
+        <div className="flex flex-wrap items-center gap-2 mb-2">
+          <h1 className="text-xl font-semibold tracking-tight text-foreground leading-none">
+            {connection.title}
+          </h1>
+          <ConnectionStatus status={connection.status} />
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          {connection.app_name && (
+            <span className="text-sm text-muted-foreground">
+              {connection.app_name}
+            </span>
+          )}
+          {connection.app_name && connection.description && (
+            <span className="text-muted-foreground/30 text-sm">·</span>
+          )}
+          {connection.description && (
+            <p className="text-sm text-muted-foreground leading-relaxed">
+              {connection.description}
+            </p>
+          )}
+        </div>
+        {connection.tools && connection.tools.length > 0 && (
+          <div className="flex items-center gap-1.5 mt-3">
+            <Badge
+              variant="secondary"
+              className="text-xs font-normal px-2 py-0.5"
+            >
+              {connection.tools.length}{" "}
+              {connection.tools.length === 1 ? "tool" : "tools"}
+            </Badge>
+          </div>
+        )}
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onOpenSettings}
+          title="Configure connection"
+          className="h-8 w-8 text-muted-foreground hover:text-foreground"
+        >
+          <Settings01 size={15} />
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onDisconnect}
+          className="text-destructive border-destructive/25 hover:bg-destructive/5 hover:text-destructive hover:border-destructive/40"
+        >
+          Disconnect
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/mesh/src/web/components/details/connection/connection-info-card.tsx b/apps/mesh/src/web/components/details/connection/connection-info-card.tsx
new file mode 100644
index 0000000000..5027e86b89
--- /dev/null
+++ b/apps/mesh/src/web/components/details/connection/connection-info-card.tsx
@@ -0,0 +1,48 @@
+import { User } from "@/web/components/user/user.tsx";
+import { formatTimeAgo } from "@/web/lib/format-time.ts";
+import type { ConnectionEntity } from "@decocms/mesh-sdk";
+
+interface ConnectionInfoCardProps {
+  connection: ConnectionEntity;
+  onOpenSettings: () => void;
+}
+
+export function ConnectionInfoCard({
+  connection,
+  onOpenSettings,
+}: ConnectionInfoCardProps) {
+  return (
+    <div className="rounded-xl border border-border bg-card overflow-hidden">
+      <div className="px-5 py-4 border-b border-border flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-foreground">Connection</h3>
+        <button
+          type="button"
+          onClick={onOpenSettings}
+          className="text-xs text-muted-foreground hover:text-foreground underline underline-offset-2 transition-colors"
+        >
+          Configure
+        </button>
+      </div>
+      <div className="px-5 py-4 flex flex-col gap-3">
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-muted-foreground">Added by</span>
+          <User id={connection.created_by} size="2xs" />
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-muted-foreground">Updated</span>
+          <span className="text-xs text-foreground">
+            {connection.updated_at
+              ? formatTimeAgo(new Date(connection.updated_at))
+              : "—"}
+          </span>
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-muted-foreground">Protocol</span>
+          <span className="text-xs font-mono text-foreground">
+            {connection.connection_type}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/mesh/src/web/components/details/connection/connection-sidebar.tsx b/apps/mesh/src/web/components/details/connection/connection-sidebar.tsx
index 434d59884e..2e350d4a6c 100644
--- a/apps/mesh/src/web/components/details/connection/connection-sidebar.tsx
+++ b/apps/mesh/src/web/components/details/connection/connection-sidebar.tsx
@@ -54,7 +54,7 @@ interface ConnectionSidebarProps {
   onRemoveOAuth?: () => void | Promise<void>;
 }
 
-function ConnectionFields({
+export function ConnectionFields({
   form,
   connection,
   hasOAuthToken,
@@ -97,7 +97,7 @@ function ConnectionFields({
 
   if (isVirtualConnection) {
     return (
-      <div className="flex flex-col gap-4 p-5 border-b border-border">
+      <div className="flex flex-col gap-4 border-b border-border py-4">
         <div className="flex flex-col gap-3">
           <span className="text-xs text-muted-foreground font-medium">
             Type
@@ -129,7 +129,7 @@ function ConnectionFields({
   }
 
   return (
-    <div className="flex flex-col gap-4 p-5 border-b border-border">
+    <div className="flex flex-col gap-4 border-b border-border py-4">
       <FormField
         control={form.control}
         name="ui_type"
diff --git a/apps/mesh/src/web/components/details/connection/index.tsx b/apps/mesh/src/web/components/details/connection/index.tsx
index c3ac3bcf5c..aa25155aba 100644
--- a/apps/mesh/src/web/components/details/connection/index.tsx
+++ b/apps/mesh/src/web/components/details/connection/index.tsx
@@ -5,12 +5,7 @@ import {
   recordToEnvVars,
   type EnvVar,
 } from "@/web/components/env-vars-editor";
-import { getUIResourceUri } from "@/mcp-apps/types.ts";
-import { SaveActions } from "@/web/components/save-actions";
-import {
-  useBindingConnections,
-  useCollectionBindings,
-} from "@/web/hooks/use-binding";
+import { useBindingConnections } from "@/web/hooks/use-binding";
 import { useMCPAuthStatus } from "@/web/hooks/use-mcp-auth-status";
 import { authenticateMcp } from "@/web/lib/mcp-oauth";
 import { KEYS } from "@/web/lib/query-keys";
@@ -23,7 +18,22 @@ import {
   BreadcrumbSeparator,
 } from "@deco/ui/components/breadcrumb.tsx";
 import { Button } from "@deco/ui/components/button.tsx";
-import { CollectionTabs } from "@/web/components/collections/collection-tabs.tsx";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@deco/ui/components/sheet.tsx";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@deco/ui/components/form.tsx";
+import { Input } from "@deco/ui/components/input.tsx";
 import {
   isStdioParameters,
   ORG_ADMIN_PROJECT_SLUG,
@@ -41,29 +51,23 @@ import {
 } from "@decocms/mesh-sdk";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQueryClient } from "@tanstack/react-query";
-import {
-  Link,
-  useNavigate,
-  useParams,
-  useSearch,
-} from "@tanstack/react-router";
+import { Link, useNavigate, useParams } from "@tanstack/react-router";
 import { Loading01 } from "@untitledui/icons";
-import { Suspense } from "react";
+import { Suspense, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { ViewActions, ViewLayout } from "../layout";
-import { CollectionTab } from "./collection-tab";
-import { ConnectionSidebar } from "./connection-sidebar";
-import { PromptsTab } from "./prompts-tab";
-import { ReadmeTab } from "./readme-tab";
-import { ResourcesTab } from "./resources-tab";
+import { ViewLayout } from "../layout";
+import { ConnectionActivity } from "./connection-activity.tsx";
+import { ConnectionAgentsPanel } from "./connection-agents-panel.tsx";
+import { ConnectionCapabilities } from "./connection-capabilities.tsx";
+import { ConnectionDetailHeader } from "./connection-detail-header.tsx";
+import { ConnectionInfoCard } from "./connection-info-card.tsx";
+import { ConnectionFields } from "./connection-sidebar.tsx";
 import { SettingsTab } from "./settings-tab";
 import {
   connectionFormSchema,
   type ConnectionFormData,
 } from "./settings-tab/schema";
-import { ToolsTab } from "./tools-tab";
-import { UiTab } from "./ui-tab";
 
 /**
  * Check if STDIO params look like an NPX command
@@ -256,29 +260,17 @@ function ConnectionInspectorViewWithConnection({
   connection,
   connectionId,
   org,
-  requestedTabId,
-  collections,
   onUpdate,
   isUpdating,
+  tools,
   prompts,
   resources,
-  tools,
-  isLoadingTools,
 }: {
   connection: ConnectionEntity;
   connectionId: string;
   org: string;
-  requestedTabId: string;
-  collections: ReturnType<typeof useCollectionBindings>;
   onUpdate: (connection: Partial<ConnectionEntity>) => Promise<void>;
   isUpdating: boolean;
-  prompts: Array<{ name: string; description?: string }>;
-  resources: Array<{
-    uri: string;
-    name?: string;
-    description?: string;
-    mimeType?: string;
-  }>;
   tools: Array<{
     name: string;
     description?: string;
@@ -287,12 +279,15 @@ function ConnectionInspectorViewWithConnection({
     annotations?: ToolDefinition["annotations"];
     _meta?: Record<string, unknown>;
   }>;
-  isLoadingTools: boolean;
+  prompts: Array<{ name: string; description?: string }>;
+  resources: Array<{ name: string; description?: string; uri?: string }>;
 }) {
   const navigate = useNavigate({ from: "/$org/$project/mcps/$connectionId" });
   const queryClient = useQueryClient();
   const connectionActions = useConnectionActions();
 
+  const [settingsOpen, setSettingsOpen] = useState(false);
+
   const authStatus = useMCPAuthStatus({
     connectionId: connectionId,
   });
@@ -308,12 +303,6 @@ function ConnectionInspectorViewWithConnection({
   });
   const hasMcpBinding = mcpBindingConnections.length > 0;
 
-  // Check if connection has repository info for README tab (stored in metadata)
-  const repository = connection?.metadata?.repository as
-    | { url?: string; source?: string; subfolder?: string }
-    | undefined;
-  const hasRepository = !!repository?.url;
-
   // Form state lifted to parent
   const form = useForm<ConnectionFormData>({
     resolver: zodResolver(connectionFormSchema),
@@ -441,62 +430,20 @@ function ConnectionInspectorViewWithConnection({
     }
   };
 
-  const toolsCount = tools.length;
-  const promptsCount = prompts.length;
-  const resourcesCount = resources.length;
-  const uiToolsCount = tools.filter((t) => !!getUIResourceUri(t._meta)).length;
-
-  // Show Tools tab if we have tools OR if we're still loading them
-  // This handles VIRTUAL connections and others that fetch tools dynamically
-  const showToolsTab = toolsCount > 0 || isLoadingTools;
-
-  const tabs = [
-    { id: "settings", label: "Settings" },
-    ...(isMCPAuthenticated && showToolsTab
-      ? [
-          {
-            id: "tools",
-            label: "Tools",
-            count: isLoadingTools ? undefined : toolsCount,
-          },
-        ]
-      : []),
-    ...(isMCPAuthenticated && promptsCount > 0
-      ? [{ id: "prompts", label: "Prompts", count: promptsCount }]
-      : []),
-    ...(isMCPAuthenticated && resourcesCount > 0
-      ? [{ id: "resources", label: "Resources", count: resourcesCount }]
-      : []),
-    ...(isMCPAuthenticated && uiToolsCount > 0
-      ? [{ id: "ui", label: "UI", count: uiToolsCount }]
-      : []),
-    ...(isMCPAuthenticated
-      ? (collections || []).map((c) => ({ id: c.name, label: c.displayName }))
-      : []),
-    ...(hasRepository ? [{ id: "readme", label: "README" }] : []),
-  ];
-
-  // Default to "tools" when authenticated (if tools tab exists), otherwise "settings"
-  const defaultTab =
-    isMCPAuthenticated && tabs.some((t) => t.id === "tools")
-      ? "tools"
-      : "settings";
-
-  const activeTabId = tabs.some((t) => t.id === requestedTabId)
-    ? requestedTabId
-    : defaultTab;
-
-  const handleTabChange = (tabId: string) => {
+  const handleDisconnect = async () => {
+    if (
+      !window.confirm(
+        `Disconnect "${connection.title}"? This cannot be undone.`,
+      )
+    )
+      return;
+    await connectionActions.delete.mutateAsync(connection.id);
     navigate({
-      search: (prev: { tab?: string }) => ({ ...prev, tab: tabId }),
-      replace: true,
+      to: "/$org/$project/mcps",
+      params: { org, project: ORG_ADMIN_PROJECT_SLUG },
     });
   };
 
-  const activeCollection = (collections || []).find(
-    (c) => c.name === activeTabId,
-  );
-
   const breadcrumb = (
     <Breadcrumb>
       <BreadcrumbList>
@@ -519,110 +466,119 @@ function ConnectionInspectorViewWithConnection({
   );
 
   return (
-    <ViewLayout breadcrumb={breadcrumb}>
-      <ViewActions>
-        <SaveActions
-          onSave={handleSave}
-          onUndo={handleUndo}
-          isDirty={hasAnyChanges}
-          isSaving={isUpdating}
-        />
-      </ViewActions>
-      <div className="flex h-full w-full bg-background overflow-hidden">
-        {/* Fixed left sidebar */}
-        <div className="w-100 shrink-0 border-r border-border bg-background">
-          <ConnectionSidebar
-            form={form}
+    <>
+      {/* Settings Sheet */}
+      <Sheet open={settingsOpen} onOpenChange={setSettingsOpen}>
+        <SheetContent
+          side="right"
+          className="sm:max-w-[520px] p-0 flex flex-col gap-0 overflow-hidden"
+        >
+          <SheetHeader className="px-6 py-4 border-b border-border shrink-0">
+            <SheetTitle className="text-base">{connection.title}</SheetTitle>
+            <SheetDescription className="text-xs">
+              Update URL, authentication, and other settings
+            </SheetDescription>
+          </SheetHeader>
+          <Form {...form}>
+            <div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-6">
+              <div className="flex flex-col gap-4">
+                <FormField
+                  control={form.control}
+                  name="title"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Name</FormLabel>
+                      <FormControl>
+                        <Input {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Description</FormLabel>
+                      <FormControl>
+                        <Input {...field} value={field.value || ""} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+              <ConnectionFields
+                form={form}
+                connection={connection}
+                hasOAuthToken={authStatus.hasOAuthToken}
+                onReauthenticate={handleAuthenticate}
+                onRemoveOAuth={handleRemoveOAuth}
+              />
+              {hasMcpBinding && (
+                <SettingsTab
+                  connection={connection}
+                  form={form}
+                  hasMcpBinding={hasMcpBinding}
+                  isMCPAuthenticated={isMCPAuthenticated}
+                  supportsOAuth={authStatus.supportsOAuth}
+                  isServerError={authStatus.isServerError}
+                  onAuthenticate={handleAuthenticate}
+                  onViewReadme={undefined}
+                />
+              )}
+            </div>
+            <div className="px-6 py-4 border-t border-border flex gap-2 shrink-0">
+              <Button
+                onClick={handleSave}
+                disabled={!hasAnyChanges || isUpdating}
+                className="flex-1"
+              >
+                {isUpdating ? "Saving…" : "Save changes"}
+              </Button>
+              {hasAnyChanges && (
+                <Button variant="outline" onClick={handleUndo}>
+                  Undo
+                </Button>
+              )}
+            </div>
+          </Form>
+        </SheetContent>
+      </Sheet>
+
+      {/* Main page */}
+      <ViewLayout breadcrumb={breadcrumb}>
+        <div className="flex flex-col h-full overflow-hidden">
+          <ConnectionDetailHeader
             connection={connection}
-            isMCPAuthenticated={isMCPAuthenticated}
-            hasOAuthToken={authStatus.hasOAuthToken}
-            onReauthenticate={handleAuthenticate}
-            onRemoveOAuth={handleRemoveOAuth}
+            onOpenSettings={() => setSettingsOpen(true)}
+            onDisconnect={handleDisconnect}
           />
-        </div>
-
-        {/* Right side - Tabs + Content */}
-        <div className="flex-1 flex flex-col min-w-0 bg-background overflow-hidden">
-          {/* Tabs header */}
-          <div className="shrink-0 flex items-center gap-4 px-5 py-3 border-b border-border">
-            <CollectionTabs
-              tabs={tabs}
-              activeTab={activeTabId}
-              onTabChange={handleTabChange}
-              className="flex-1"
-            />
-          </div>
-
-          {/* Tab content */}
           <div className="flex-1 overflow-auto">
-            <ErrorBoundary key={activeTabId}>
-              <Suspense
-                fallback={
-                  <div className="flex h-full items-center justify-center">
-                    <Loading01
-                      size={32}
-                      className="animate-spin text-muted-foreground"
-                    />
-                  </div>
-                }
-              >
-                {activeTabId === "tools" ? (
-                  <ToolsTab
-                    tools={tools}
-                    connectionId={connectionId}
-                    org={org}
-                    isLoading={isLoadingTools}
-                  />
-                ) : activeTabId === "ui" ? (
-                  <UiTab tools={tools} connectionId={connectionId} org={org} />
-                ) : activeTabId === "prompts" ? (
-                  <PromptsTab
-                    prompts={prompts}
-                    connectionId={connectionId}
-                    org={org}
-                  />
-                ) : activeTabId === "resources" ? (
-                  <ResourcesTab
-                    resources={resources}
-                    connectionId={connectionId}
-                    org={org}
-                  />
-                ) : activeTabId === "settings" ? (
-                  <SettingsTab
-                    connection={connection}
-                    form={form}
-                    hasMcpBinding={hasMcpBinding}
-                    isMCPAuthenticated={isMCPAuthenticated}
-                    supportsOAuth={authStatus.supportsOAuth}
-                    isServerError={authStatus.isServerError}
-                    onAuthenticate={handleAuthenticate}
-                    onViewReadme={
-                      hasRepository
-                        ? () => handleTabChange("readme")
-                        : undefined
-                    }
-                  />
-                ) : activeTabId === "readme" && hasRepository ? (
-                  <ReadmeTab repository={repository} />
-                ) : activeCollection && isMCPAuthenticated ? (
-                  <CollectionTab
-                    key={activeTabId}
-                    connectionId={connectionId}
-                    org={org}
-                    activeCollection={activeCollection}
-                  />
-                ) : (
-                  <EmptyState
-                    title="Collection not found"
-                    description="This collection may have been deleted or you may not have access."
-                  />
-                )}
-              </Suspense>
-            </ErrorBoundary>
+            <div className="flex gap-6 p-6">
+              {/* Left column */}
+              <div className="flex-1 min-w-0 flex flex-col gap-5">
+                <ConnectionActivity connectionId={connectionId} />
+                <ConnectionCapabilities
+                  tools={tools}
+                  prompts={prompts}
+                  resources={resources}
+                />
+              </div>
+              {/* Right column */}
+              <div className="w-72 shrink-0 flex flex-col gap-5">
+                <ConnectionAgentsPanel connection={connection} />
+                <ConnectionInfoCard
+                  connection={connection}
+                  onOpenSettings={() => setSettingsOpen(true)}
+                />
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-    </ViewLayout>
+      </ViewLayout>
+    </>
   );
 }
 
@@ -633,26 +589,15 @@ function ConnectionInspectorViewContent() {
   });
   const { org: projectOrg } = useProjectContext();
 
-  // We can use search params for active tab if we want persistent tabs
-  const search = useSearch({ from: "/shell/$org/$project/mcps/$connectionId" });
-  const requestedTabId = search.tab ?? "";
-
   const connection = useConnection(connectionId);
   const actions = useConnectionActions();
 
-  // Detect collection bindings
-  const collections = useCollectionBindings(connection ?? undefined);
-
   // Get MCP client for this connection (suspense-based)
   const client = useMCPClient({
     connectionId,
     orgId: projectOrg.id,
   });
 
-  // Fetch prompts and resources using SDK hooks
-  const { data: promptsData } = useMCPPromptsListQuery({ client });
-  const { data: resourcesData } = useMCPResourcesListQuery({ client });
-
   // Fetch tools - uses cached if available, otherwise fetches dynamically
   // VIRTUAL connections always fetch dynamically because:
   // 1. Their tools column contains virtual tool definitions (code), not cached downstream tools
@@ -660,20 +605,11 @@ function ConnectionInspectorViewContent() {
   const isVirtualConnection = connection?.connection_type === "VIRTUAL";
   const hasCachedTools =
     !isVirtualConnection && connection?.tools && connection.tools.length > 0;
-  const { data: toolsData, isLoading: isLoadingTools } = useMCPToolsListQuery({
+  const { data: toolsData } = useMCPToolsListQuery({
     client,
     enabled: !hasCachedTools,
   });
 
-  const prompts = (promptsData?.prompts ?? []).map((p) => ({
-    name: p.name,
-    description: p.description,
-  }));
-  const resources = (resourcesData?.resources ?? []).map((r) => ({
-    uri: r.uri,
-    name: r.name,
-    description: r.description,
-  }));
   const tools = hasCachedTools
     ? (connection.tools ?? [])
     : (toolsData?.tools ?? []).map((t) => ({
@@ -684,6 +620,21 @@ function ConnectionInspectorViewContent() {
         _meta: t._meta as Record<string, unknown> | undefined,
       }));
 
+  // Fetch prompts and resources from the MCP connection
+  const { data: promptsData } = useMCPPromptsListQuery({ client });
+  const { data: resourcesData } = useMCPResourcesListQuery({ client });
+
+  const prompts = (promptsData?.prompts ?? []).map((p) => ({
+    name: p.name,
+    description: p.description,
+  }));
+
+  const resources = (resourcesData?.resources ?? []).map((r) => ({
+    name: r.name,
+    description: r.description,
+    uri: r.uri,
+  }));
+
   // Update connection handler
   const handleUpdateConnection = async (
     updatedConnection: Partial<ConnectionEntity>,
@@ -726,14 +677,11 @@ function ConnectionInspectorViewContent() {
       org={org}
       connection={connection}
       connectionId={connectionId}
-      requestedTabId={requestedTabId}
-      collections={collections}
       onUpdate={handleUpdateConnection}
       isUpdating={actions.update.isPending}
+      tools={tools}
       prompts={prompts}
       resources={resources}
-      tools={tools}
-      isLoadingTools={isLoadingTools}
     />
   );
 }
diff --git a/apps/mesh/src/web/components/details/connection/settings-tab/index.tsx b/apps/mesh/src/web/components/details/connection/settings-tab/index.tsx
index a46295c8b5..4f9380d866 100644
--- a/apps/mesh/src/web/components/details/connection/settings-tab/index.tsx
+++ b/apps/mesh/src/web/components/details/connection/settings-tab/index.tsx
@@ -1,4 +1,3 @@
-import { EmptyState } from "@/web/components/empty-state.tsx";
 import { ErrorBoundary } from "@/web/components/error-boundary.tsx";
 import {
   useMCPClient,
@@ -165,20 +164,11 @@ function McpConfigurationContent({
 
   if (!hasProperties) {
     return (
-      <div className="flex-1 flex items-center justify-center">
-        <EmptyState
-          image={
-            <img
-              src="/empty-state-success-muted.svg"
-              alt=""
-              width={220}
-              height={200}
-              aria-hidden="true"
-            />
-          }
-          title="This server is all set!"
-          description="No additional configuration is needed. Everything is ready to go."
-        />
+      <div className="flex items-center gap-2 py-1">
+        <div className="size-2 rounded-full bg-green-500 shrink-0" />
+        <span className="text-sm text-muted-foreground">
+          No additional configuration needed
+        </span>
       </div>
     );
   }
@@ -228,23 +218,14 @@ function SettingsTabContent(props: SettingsTabProps) {
     );
   }
 
-  // Authenticated but no MCP binding - show success state
+  // Authenticated but no MCP binding - no extra config needed
   if (!hasMcpBinding) {
     return (
-      <div className="flex-1 flex items-center justify-center">
-        <EmptyState
-          image={
-            <img
-              src="/empty-state-success-muted.svg"
-              alt=""
-              width={220}
-              height={200}
-              aria-hidden="true"
-            />
-          }
-          title="This server is all set!"
-          description="No additional configuration is needed. Everything is ready to go."
-        />
+      <div className="flex items-center gap-2 py-1">
+        <div className="size-2 rounded-full bg-green-500 shrink-0" />
+        <span className="text-sm text-muted-foreground">
+          No additional configuration needed
+        </span>
       </div>
     );
   }
diff --git a/apps/mesh/src/web/components/integration-icon.tsx b/apps/mesh/src/web/components/integration-icon.tsx
index d07a77590e..5e9104494d 100644
--- a/apps/mesh/src/web/components/integration-icon.tsx
+++ b/apps/mesh/src/web/components/integration-icon.tsx
@@ -16,6 +16,7 @@ const SIZE_CLASSES = {
   sm: "h-8 w-8",
   md: "h-12 w-12",
   lg: "h-16 w-16",
+  xl: "h-14 w-14",
 };
 
 type Size = keyof typeof SIZE_CLASSES;
@@ -26,6 +27,7 @@ const MIN_WIDTH_CLASSES: Record<Size, string> = {
   sm: "min-w-8",
   md: "min-w-12",
   lg: "min-w-16",
+  xl: "min-w-14",
 };
 
 const ICON_SIZES: Record<Size, number> = {
@@ -34,6 +36,7 @@ const ICON_SIZES: Record<Size, number> = {
   sm: 16,
   md: 24,
   lg: 32,
+  xl: 28,
 };
 
 export function IntegrationIcon({
diff --git a/apps/mesh/src/web/hooks/use-project-sidebar-items.tsx b/apps/mesh/src/web/hooks/use-project-sidebar-items.tsx
index bfa358d935..759b1d1405 100644
--- a/apps/mesh/src/web/hooks/use-project-sidebar-items.tsx
+++ b/apps/mesh/src/web/hooks/use-project-sidebar-items.tsx
@@ -8,7 +8,6 @@ import { usePreferences } from "@/web/hooks/use-preferences.ts";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 import {
   BarChart10,
-  Building02,
   CheckDone01,
   Container,
   Dataflow03,
@@ -103,18 +102,6 @@ export function useProjectSidebarItems(): SidebarSection[] {
       }),
   };
 
-  const storeItem: NavigationSidebarItem = {
-    key: "store",
-    label: "Store",
-    icon: <Building02 />,
-    isActive: isActiveRoute("store"),
-    onClick: () =>
-      navigate({
-        to: "/$org/$project/store",
-        params: { org, project: ORG_ADMIN_PROJECT_SLUG },
-      }),
-  };
-
   const agentsItem: NavigationSidebarItem = {
     key: "agents",
     label: "Agents",
@@ -234,7 +221,7 @@ export function useProjectSidebarItems(): SidebarSection[] {
         group: {
           id: "build",
           label: "Build",
-          items: [agentsItem, connectionsItem, storeItem],
+          items: [agentsItem, connectionsItem],
           defaultExpanded: true,
         },
       },
diff --git a/apps/mesh/src/web/lib/query-keys.ts b/apps/mesh/src/web/lib/query-keys.ts
index 20a38913a7..df4bd95e66 100644
--- a/apps/mesh/src/web/lib/query-keys.ts
+++ b/apps/mesh/src/web/lib/query-keys.ts
@@ -147,6 +147,8 @@ export const KEYS = {
   }) => ["monitoring", "logs", filters] as const,
   monitoringLogsInfinite: (locator: string, paramsKey: string) =>
     ["monitoring", "logs-infinite", locator, paramsKey] as const,
+  connectionActivity: (connectionId: string, timeframe: string) =>
+    ["monitoring", "activity", connectionId, timeframe] as const,
 
   // Monitoring dashboards
   monitoringDashboards: (locator: ProjectLocator) =>
diff --git a/apps/mesh/src/web/routes/orgs/connections.tsx b/apps/mesh/src/web/routes/orgs/connections.tsx
index 67517f5a63..7f6745bdc5 100644
--- a/apps/mesh/src/web/routes/orgs/connections.tsx
+++ b/apps/mesh/src/web/routes/orgs/connections.tsx
@@ -3,18 +3,20 @@ import { CollectionDisplayButton } from "@/web/components/collections/collection
 import { CollectionSearch } from "@/web/components/collections/collection-search.tsx";
 import { CollectionTableWrapper } from "@/web/components/collections/collection-table-wrapper.tsx";
 import { type TableColumn } from "@/web/components/collections/collection-table.tsx";
-import { ConnectionCard } from "@/web/components/connections/connection-card.tsx";
+import { ConnectionServiceGroup } from "@/web/components/connections/connection-service-group.tsx";
 import { ConnectionStatus } from "@/web/components/connections/connection-status.tsx";
 import { EmptyState } from "@/web/components/empty-state.tsx";
 import { ErrorBoundary } from "@/web/components/error-boundary";
 import { IntegrationIcon } from "@/web/components/integration-icon.tsx";
 import { Page } from "@/web/components/page";
+import { StoreDiscovery } from "@/web/components/store";
 import type { RegistryItem } from "@/web/components/store/types";
 import { User } from "@/web/components/user/user.tsx";
 import { useRegistryConnections } from "@/web/hooks/use-binding";
 import { useListState } from "@/web/hooks/use-list-state";
 import { authClient } from "@/web/lib/auth-client";
 import { useAuthConfig } from "@/web/providers/auth-config-provider";
+import { groupConnections } from "@/web/utils/group-connections.ts";
 import {
   extractItemsFromResponse,
   findListToolName,
@@ -90,7 +92,7 @@ import {
   Terminal,
   Trash01,
 } from "@untitledui/icons";
-import { Suspense, useEffect, useReducer } from "react";
+import { Suspense, useEffect, useReducer, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { formatTimeAgo } from "@/web/lib/format-time";
@@ -410,9 +412,12 @@ function OrgMcpsContent() {
   const { stdioEnabled } = useAuthConfig();
 
   // Consolidated list UI state (search, filters, sorting, view mode)
+  // Using "connections-v2" resource key to reset persisted view mode preference
+  // to "cards" now that the accordion design is the primary list view.
   const listState = useListState<ConnectionEntity>({
     namespace: org.slug,
-    resource: "connections",
+    resource: "connections-v2",
+    defaultViewMode: "cards",
   });
 
   const actions = useConnectionActions();
@@ -581,6 +586,8 @@ function OrgMcpsContent() {
     orgId: org.id,
   });
 
+  const [storeOpen, setStoreOpen] = useState(false);
+
   const invalidateConnections = () => {
     queryClient.invalidateQueries({
       predicate: (query) => {
@@ -1002,29 +1009,47 @@ function OrgMcpsContent() {
     <div className="flex items-center gap-2">
       <Button
         variant="outline"
-        onClick={() =>
-          navigate({
-            to: "/$org/$project/store",
-            params: { org: org.slug, project: ORG_ADMIN_PROJECT_SLUG },
-          })
-        }
+        onClick={() => setStoreOpen(true)}
         size="sm"
         className="h-7 px-3 rounded-lg text-sm font-medium"
       >
-        Browse Store
+        Add Connection
       </Button>
       <Button
         onClick={openCreateDialog}
         size="sm"
         className="h-7 px-3 rounded-lg text-sm font-medium"
       >
-        Custom Connection
+        Custom
       </Button>
     </div>
   );
 
   return (
     <Page>
+      {/* Store Modal */}
+      <Dialog open={storeOpen} onOpenChange={setStoreOpen}>
+        <DialogContent className="sm:max-w-3xl h-[85vh] p-0 flex flex-col gap-0 overflow-hidden">
+          <DialogHeader className="px-6 py-4 border-b border-border shrink-0">
+            <DialogTitle>Add Connection</DialogTitle>
+            <DialogDescription>
+              Browse the store to find and connect MCP servers
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex-1 overflow-hidden">
+            {registryId ? (
+              <StoreDiscovery registryId={registryId} />
+            ) : (
+              <div className="flex items-center justify-center h-full">
+                <p className="text-sm text-muted-foreground">
+                  No registries available. Add a registry connection first.
+                </p>
+              </div>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
       <Dialog
         open={isCreating || dialogState.mode === "editing"}
         onOpenChange={handleDialogClose}
@@ -1502,99 +1527,31 @@ function OrgMcpsContent() {
                   !listState.search && (
                     <Button
                       variant="outline"
-                      onClick={() =>
-                        navigate({
-                          to: "/$org/$project/store",
-                          params: {
-                            org: org.slug,
-                            project: ORG_ADMIN_PROJECT_SLUG,
-                          },
-                        })
-                      }
+                      onClick={() => setStoreOpen(true)}
                     >
-                      Browse Store
+                      Add Connection
                     </Button>
                   )
                 }
               />
             ) : (
-              <div className="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4">
-                {connections.map((connection) => (
-                  <ConnectionCard
-                    key={connection.id}
-                    connection={connection}
-                    fallbackIcon={<Container />}
-                    onClick={() =>
+              <div className="flex flex-col gap-2">
+                {groupConnections(connections).map((group) => (
+                  <ConnectionServiceGroup
+                    key={group.key}
+                    serviceName={group.serviceName}
+                    icon={group.icon}
+                    instances={group.instances}
+                    onInstanceClick={(id) =>
                       navigate({
                         to: "/$org/$project/mcps/$connectionId",
                         params: {
                           org: org.slug,
                           project: ORG_ADMIN_PROJECT_SLUG,
-                          connectionId: connection.id,
+                          connectionId: id,
                         },
                       })
                     }
-                    headerActions={
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-8 w-8 p-0"
-                            onClick={(e) => e.stopPropagation()}
-                          >
-                            <DotsVertical size={20} />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent
-                          align="end"
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          <DropdownMenuItem
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              navigate({
-                                to: "/$org/$project/mcps/$connectionId",
-                                params: {
-                                  org: org.slug,
-                                  project: ORG_ADMIN_PROJECT_SLUG,
-                                  connectionId: connection.id,
-                                },
-                              });
-                            }}
-                          >
-                            <Eye size={16} />
-                            Open
-                          </DropdownMenuItem>
-                          <DropdownMenuItem
-                            variant="destructive"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              dispatch({ type: "delete", connection });
-                            }}
-                          >
-                            <Trash01 size={16} />
-                            Delete
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    }
-                    body={<ConnectionStatus status={connection.status} />}
-                    footer={
-                      <div className="flex items-center justify-between text-xs text-muted-foreground w-full min-w-0">
-                        <div className="flex-1 min-w-0">
-                          <User
-                            id={connection.updated_by ?? connection.created_by}
-                            size="3xs"
-                          />
-                        </div>
-                        <span className="shrink-0 ml-2">
-                          {connection.updated_at
-                            ? formatTimeAgo(new Date(connection.updated_at))
-                            : "—"}
-                        </span>
-                      </div>
-                    }
                   />
                 ))}
               </div>
@@ -1652,17 +1609,9 @@ function OrgMcpsContent() {
                         actions={
                           <Button
                             variant="outline"
-                            onClick={() =>
-                              navigate({
-                                to: "/$org/$project/store",
-                                params: {
-                                  org: org.slug,
-                                  project: ORG_ADMIN_PROJECT_SLUG,
-                                },
-                              })
-                            }
+                            onClick={() => setStoreOpen(true)}
                           >
-                            Browse Store
+                            Add Connection
                           </Button>
                         }
                       />
diff --git a/apps/mesh/src/web/utils/group-connections.ts b/apps/mesh/src/web/utils/group-connections.ts
new file mode 100644
index 0000000000..2e654cb292
--- /dev/null
+++ b/apps/mesh/src/web/utils/group-connections.ts
@@ -0,0 +1,54 @@
+import type { ConnectionEntity } from "@decocms/mesh-sdk";
+
+export interface ConnectionGroup {
+  key: string;
+  serviceName: string;
+  icon: string | null;
+  instances: ConnectionEntity[];
+}
+
+export function groupConnections(
+  connections: ConnectionEntity[],
+): ConnectionGroup[] {
+  const grouped = new Map<string, ConnectionGroup>();
+
+  for (const conn of connections) {
+    if (!conn.app_name) {
+      // Solo group — keyed by connection id
+      const key = `__solo__${conn.id}`;
+      grouped.set(key, {
+        key,
+        serviceName: conn.title,
+        icon: conn.icon ?? null,
+        instances: [conn],
+      });
+    } else {
+      const existing = grouped.get(conn.app_name);
+      if (existing) {
+        existing.instances.push(conn);
+      } else {
+        grouped.set(conn.app_name, {
+          key: conn.app_name,
+          serviceName: conn.app_name,
+          icon: conn.icon ?? null,
+          instances: [conn],
+        });
+      }
+    }
+  }
+
+  const groups = Array.from(grouped.values());
+
+  // Sort: multi-instance groups first, then singles — within each tier, alphabetically
+  groups.sort((a, b) => {
+    const aIsMulti = a.instances.length > 1;
+    const bIsMulti = b.instances.length > 1;
+
+    if (aIsMulti && !bIsMulti) return -1;
+    if (!aIsMulti && bIsMulti) return 1;
+
+    return a.serviceName.localeCompare(b.serviceName);
+  });
+
+  return groups;
+}