From f674ce0c22e7b0a9611636e0fe16d1d70019a4fe Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Mon, 23 Mar 2026 16:56:53 -0400
Subject: [PATCH] refine UI layout, theming, and component consistency across
 screens

- Add MCP logo (light/dark variants) to ConnectedLayout header
- Replace Tabs with SegmentedControl in header, split into 1/3 sections
- Wrap all screens in Container for consistent margins
- Use Card instead of Paper for panel backgrounds across all screens
- Add SubscribeButton atom, CopyButton for resource URI
- Move annotations from ResourceListItem to ResourcePreviewPanel
- Improve AnnotationBadge colors for dark mode visibility
- Add Tools, Resources, and Prompts headers to list panels
- Add ConnectedLayout stories for Tools, Resources, and Prompts tabs
- Remove unused onCopy prop and copy button from PromptMessagesDisplay

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../atoms/AnnotationBadge/AnnotationBadge.tsx |  17 +-
 .../SubscribeButton.stories.tsx               |  26 +++
 .../atoms/SubscribeButton/SubscribeButton.tsx |  17 ++
 .../ConnectedLayout.stories.tsx               | 148 +++++++++++++++++-
 .../ConnectedLayout/ConnectedLayout.tsx       |  52 +++---
 .../PromptArgumentsForm.tsx                   |   2 +-
 .../PromptMessagesDisplay.stories.tsx         |   4 +-
 .../PromptMessagesDisplay.tsx                 |   7 +-
 .../ResourceListItem/ResourceListItem.tsx     |  30 +---
 .../ResourcePreviewPanel.tsx                  |  89 ++++++-----
 .../ResourceTemplateInput.tsx                 |   1 -
 .../ToolDetailPanel/ToolDetailPanel.tsx       |   5 -
 .../organisms/LoggingScreen/LoggingScreen.tsx |   3 +
 .../PromptsScreen/PromptsScreen.stories.tsx   |   1 -
 .../organisms/PromptsScreen/PromptsScreen.tsx |  14 +-
 .../ResourcesScreen.stories.tsx               |   1 -
 .../ResourcesScreen/ResourcesScreen.tsx       |  31 ++--
 .../ServerListScreen/ServerListScreen.tsx     |   4 +-
 .../organisms/TasksScreen/TasksScreen.tsx     |  19 ++-
 .../organisms/ToolsScreen/ToolsScreen.tsx     |  19 ++-
 clients/web/src/theme/assets/MCP-dark.svg     |  12 ++
 clients/web/src/theme/assets/MCP.svg          |  12 ++
 22 files changed, 357 insertions(+), 157 deletions(-)
 create mode 100644 clients/web/src/components/atoms/SubscribeButton/SubscribeButton.stories.tsx
 create mode 100644 clients/web/src/components/atoms/SubscribeButton/SubscribeButton.tsx
 create mode 100644 clients/web/src/theme/assets/MCP-dark.svg
 create mode 100644 clients/web/src/theme/assets/MCP.svg

diff --git a/clients/web/src/components/atoms/AnnotationBadge/AnnotationBadge.tsx b/clients/web/src/components/atoms/AnnotationBadge/AnnotationBadge.tsx
index bf696577..a7490f70 100644
--- a/clients/web/src/components/atoms/AnnotationBadge/AnnotationBadge.tsx
+++ b/clients/web/src/components/atoms/AnnotationBadge/AnnotationBadge.tsx
@@ -1,4 +1,4 @@
-import { Badge } from "@mantine/core";
+import { Badge, useComputedColorScheme } from "@mantine/core";
 
 export type AnnotationVariant =
   | "audience"
@@ -17,11 +17,11 @@ const variantMap: Record<
   AnnotationVariant,
   { color: string; variant: string }
 > = {
-  audience: { color: "gray", variant: "outline" },
-  readOnly: { color: "dark", variant: "filled" },
-  destructive: { color: "red", variant: "outline" },
-  longRun: { color: "yellow", variant: "outline" },
-  priority: { color: "orange", variant: "light" },
+  audience: { color: "blue", variant: "outline" },
+  readOnly: { color: "green", variant: "filled" },
+  destructive: { color: "red", variant: "filled" },
+  longRun: { color: "yellow", variant: "filled" },
+  priority: { color: "orange", variant: "filled" },
   default: { color: "gray", variant: "light" },
 };
 
@@ -29,10 +29,13 @@ export function AnnotationBadge({
   label,
   variant = "default",
 }: AnnotationBadgeProps) {
+  const colorScheme = useComputedColorScheme();
   const { color, variant: badgeVariant } = variantMap[variant];
+  const textColor =
+    (variant === "priority" || variant === "destructive") && colorScheme === "dark" ? "black" : undefined;
 
   return (
-    <Badge color={color} variant={badgeVariant}>
+    <Badge color={color} variant={badgeVariant} c={textColor}>
       {label}
     </Badge>
   );
diff --git a/clients/web/src/components/atoms/SubscribeButton/SubscribeButton.stories.tsx b/clients/web/src/components/atoms/SubscribeButton/SubscribeButton.stories.tsx
new file mode 100644
index 00000000..c2bbdfdb
--- /dev/null
+++ b/clients/web/src/components/atoms/SubscribeButton/SubscribeButton.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { SubscribeButton } from "./SubscribeButton";
+
+const meta: Meta<typeof SubscribeButton> = {
+  title: "Atoms/SubscribeButton",
+  component: SubscribeButton,
+  args: {
+    onToggle: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SubscribeButton>;
+
+export const Subscribed: Story = {
+  args: {
+    subscribed: true,
+  },
+};
+
+export const Unsubscribed: Story = {
+  args: {
+    subscribed: false,
+  },
+};
diff --git a/clients/web/src/components/atoms/SubscribeButton/SubscribeButton.tsx b/clients/web/src/components/atoms/SubscribeButton/SubscribeButton.tsx
new file mode 100644
index 00000000..3b0ccc36
--- /dev/null
+++ b/clients/web/src/components/atoms/SubscribeButton/SubscribeButton.tsx
@@ -0,0 +1,17 @@
+import { Button } from "@mantine/core";
+
+export interface SubscribeButtonProps {
+  subscribed: boolean;
+  onToggle: () => void;
+}
+
+export function SubscribeButton({
+  subscribed,
+  onToggle,
+}: SubscribeButtonProps) {
+  return (
+    <Button variant="outline" size="sm" onClick={onToggle}>
+      {subscribed ? "Unsubscribe" : "Subscribe"}
+    </Button>
+  );
+}
diff --git a/clients/web/src/components/layouts/ConnectedLayout/ConnectedLayout.stories.tsx b/clients/web/src/components/layouts/ConnectedLayout/ConnectedLayout.stories.tsx
index 2980c32b..c86161b9 100644
--- a/clients/web/src/components/layouts/ConnectedLayout/ConnectedLayout.stories.tsx
+++ b/clients/web/src/components/layouts/ConnectedLayout/ConnectedLayout.stories.tsx
@@ -2,6 +2,9 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 import { Text } from "@mantine/core";
 import { ConnectedLayout } from "./ConnectedLayout";
+import { ToolsScreen } from "../../organisms/ToolsScreen/ToolsScreen";
+import { ResourcesScreen } from "../../organisms/ResourcesScreen/ResourcesScreen";
+import { PromptsScreen } from "../../organisms/PromptsScreen/PromptsScreen";
 
 const allTabs = ["Tools", "Resources", "Prompts", "Logs", "Tasks", "History"];
 
@@ -27,14 +30,153 @@ type Story = StoryObj<typeof ConnectedLayout>;
 export const ToolsActive: Story = {
   args: {
     activeTab: "Tools",
-    children: <Text>Tools screen content</Text>,
+    children: (
+      <ToolsScreen
+        tools={[
+          { name: "send_message", title: "Send Message", selected: false, onClick: fn() },
+          { name: "create_record", title: "Create Record", selected: true, onClick: fn() },
+          { name: "delete_records", selected: false, onClick: fn() },
+          { name: "list_users", selected: false, onClick: fn() },
+          { name: "batch_process", selected: false, onClick: fn() },
+        ]}
+        selectedTool={{
+          name: "create_record",
+          title: "Create Record",
+          description: "Creates a new record with the given parameters",
+          schema: {
+            type: "object",
+            properties: {
+              title: { type: "string", description: "Record title" },
+              count: { type: "number", description: "Number of items" },
+              enabled: { type: "boolean", description: "Whether the record is active" },
+            },
+            required: ["title"],
+          },
+          formValues: {},
+          isExecuting: false,
+          onFormChange: fn(),
+          onExecute: fn(),
+          onCancel: fn(),
+        }}
+        result={{
+          content: [
+            {
+              type: "text",
+              text: JSON.stringify(
+                { id: 42, title: "New Record", count: 5, enabled: true, createdAt: "2026-03-17T12:00:00Z" },
+                null,
+                2,
+              ),
+            },
+          ],
+          onClear: fn(),
+        }}
+        searchText=""
+        listChanged={false}
+        onSearchChange={fn()}
+        onRefreshList={fn()}
+        onSelectTool={fn()}
+      />
+    ),
   },
 };
 
 export const ResourcesActive: Story = {
   args: {
     activeTab: "Resources",
-    children: <Text>Resources screen content</Text>,
+    children: (
+      <ResourcesScreen
+        resources={[
+          {
+            name: "config.json",
+            uri: "file:///config.json",
+            annotations: { audience: "developer", priority: 0.8 },
+            selected: true,
+            onClick: fn(),
+          },
+          {
+            name: "README.md",
+            uri: "file:///README.md",
+            selected: false,
+            onClick: fn(),
+          },
+          {
+            name: "schema.sql",
+            uri: "file:///schema.sql",
+            annotations: { priority: 0.5 },
+            selected: false,
+            onClick: fn(),
+          },
+        ]}
+        templates={[
+          {
+            template: "file:///users/{userId}/profile",
+            variables: { userId: "" },
+            onVariableChange: fn(),
+            onSubmit: fn(),
+          },
+        ]}
+        subscriptions={[
+          { name: "config.json", lastUpdated: "2026-03-17T10:30:00Z" },
+        ]}
+        selectedResource={{
+          uri: "file:///config.json",
+          mimeType: "application/json",
+          annotations: { audience: "developer", priority: 0.8 },
+          content: JSON.stringify(
+            { name: "my-project", version: "1.0.0", settings: { debug: true, logLevel: "info" } },
+            null,
+            2,
+          ),
+          lastUpdated: "2026-03-17T10:30:00Z",
+          isSubscribed: true,
+          onSubscribe: fn(),
+          onUnsubscribe: fn(),
+        }}
+        listChanged={false}
+        searchText=""
+        onSearchChange={fn()}
+        onRefreshList={fn()}
+        onSelectResource={fn()}
+      />
+    ),
+  },
+};
+
+export const PromptsActive: Story = {
+  args: {
+    activeTab: "Prompts",
+    children: (
+      <PromptsScreen
+        promptForm={{
+          prompts: [
+            { name: "summarize", description: "Summarize a document" },
+            { name: "translate", description: "Translate text to another language" },
+            { name: "code-review", description: "Review code for issues" },
+          ],
+          selectedPrompt: "translate",
+          arguments: [
+            { name: "text", required: true, description: "The text to translate" },
+            { name: "targetLanguage", required: true, description: "Target language code" },
+          ],
+          argumentValues: {
+            text: "Hello, how are you?",
+            targetLanguage: "es",
+          },
+          onSelectPrompt: fn(),
+          onArgumentChange: fn(),
+          onGetPrompt: fn(),
+        }}
+        messages={{
+          messages: [
+            { role: "user", content: 'Translate the following text to Spanish: "Hello, how are you?"' },
+            { role: "assistant", content: "Hola, como estas?" },
+          ],
+        }}
+        listChanged={false}
+        onRefreshList={fn()}
+      />
+    ),
   },
 };
 
@@ -47,7 +189,7 @@ export const LimitedTabs: Story = {
 
 export const LongServerName: Story = {
   args: {
-    serverName: "my-very-long-server-name-that-might-overflow",
+    serverName: "my-very-long-server-name-that-might-overflow-is",
     children: <Text>Tools screen content</Text>,
   },
 };
diff --git a/clients/web/src/components/layouts/ConnectedLayout/ConnectedLayout.tsx b/clients/web/src/components/layouts/ConnectedLayout/ConnectedLayout.tsx
index 2417be8c..8cc850bb 100644
--- a/clients/web/src/components/layouts/ConnectedLayout/ConnectedLayout.tsx
+++ b/clients/web/src/components/layouts/ConnectedLayout/ConnectedLayout.tsx
@@ -1,7 +1,9 @@
 import type { ReactNode } from "react";
-import { ActionIcon, AppShell, Button, Group, Tabs, Text } from "@mantine/core";
+import { ActionIcon, AppShell, Button, Group, Image, SegmentedControl, Text } from "@mantine/core";
 import { useComputedColorScheme } from "@mantine/core";
 import { StatusIndicator } from "../../atoms/StatusIndicator/StatusIndicator";
+import mcpLogo from "../../../theme/assets/MCP.svg";
+import mcpLogoDark from "../../../theme/assets/MCP-dark.svg";
 
 export interface ConnectedLayoutProps {
   serverName: string;
@@ -18,6 +20,8 @@ export interface ConnectedLayoutProps {
 const ServerName = Text.withProps({
   fw: 600,
   size: "lg",
+  truncate: "end",
+  maw: "calc(100% - 40px)",
 });
 
 export function ConnectedLayout({
@@ -36,35 +40,23 @@ export function ConnectedLayout({
   return (
     <AppShell header={{ height: 60 }} padding="md">
       <AppShell.Header>
-        <Group h="100%" px="md" justify="space-between" wrap="nowrap">
-          <Group gap="md" wrap="nowrap">
+        <Group h="100%" px="md" wrap="nowrap" gap={0}>
+          <Group gap="md" wrap="nowrap" w="33.33%" miw={0}>
+            <Image src={colorScheme === "dark" ? mcpLogoDark : mcpLogo} alt="MCP" w={28} h={28} fit="contain" />
             <ServerName>{serverName}</ServerName>
-            <StatusIndicator status={status} latencyMs={latencyMs} />
           </Group>
 
-          <Tabs
-            value={activeTab}
-            onChange={(value) => value && onTabChange(value)}
-            variant="default"
-          >
-            <Tabs.List>
-              {availableTabs.map((tab) => (
-                <Tabs.Tab key={tab} value={tab}>
-                  {tab}
-                </Tabs.Tab>
-              ))}
-            </Tabs.List>
-          </Tabs>
+          <Group w="33.33%" justify="center">
+            <SegmentedControl
+              value={activeTab}
+              onChange={onTabChange}
+              data={availableTabs}
+              size="sm"
+            />
+          </Group>
 
-          <Group gap="sm">
-            <ActionIcon
-              variant="default"
-              size="lg"
-              aria-label="Toggle color scheme"
-              onClick={onToggleTheme}
-            >
-              {colorScheme === "dark" ? "\u2600" : "\u263E"}
-            </ActionIcon>
+          <Group gap="sm" w="33.33%" justify="flex-end">
+            <StatusIndicator status={status} latencyMs={latencyMs} />
             <Button
               variant="outline"
               color="red"
@@ -73,6 +65,14 @@ export function ConnectedLayout({
             >
               Disconnect
             </Button>
+            <ActionIcon
+              variant="default"
+              size="lg"
+              aria-label="Toggle color scheme"
+              onClick={onToggleTheme}
+            >
+              {colorScheme === "dark" ? "\u2600" : "\u263E"}
+            </ActionIcon>
           </Group>
         </Group>
       </AppShell.Header>
diff --git a/clients/web/src/components/molecules/PromptArgumentsForm/PromptArgumentsForm.tsx b/clients/web/src/components/molecules/PromptArgumentsForm/PromptArgumentsForm.tsx
index 3281729f..0194f920 100644
--- a/clients/web/src/components/molecules/PromptArgumentsForm/PromptArgumentsForm.tsx
+++ b/clients/web/src/components/molecules/PromptArgumentsForm/PromptArgumentsForm.tsx
@@ -34,7 +34,7 @@ export function PromptArgumentsForm({
 
   return (
     <Stack gap="md">
-      <Title order={4}>Select Prompt</Title>
+      <Title order={4}>Prompts</Title>
       <Select
         data={prompts.map((p) => ({ value: p.name, label: p.name }))}
         value={selectedPrompt ?? null}
diff --git a/clients/web/src/components/molecules/PromptMessagesDisplay/PromptMessagesDisplay.stories.tsx b/clients/web/src/components/molecules/PromptMessagesDisplay/PromptMessagesDisplay.stories.tsx
index f9dca729..18bc5184 100644
--- a/clients/web/src/components/molecules/PromptMessagesDisplay/PromptMessagesDisplay.stories.tsx
+++ b/clients/web/src/components/molecules/PromptMessagesDisplay/PromptMessagesDisplay.stories.tsx
@@ -5,9 +5,7 @@ import { PromptMessagesDisplay } from "./PromptMessagesDisplay";
 const meta: Meta<typeof PromptMessagesDisplay> = {
   title: "Molecules/PromptMessagesDisplay",
   component: PromptMessagesDisplay,
-  args: {
-    onCopy: fn(),
-  },
+  args: {},
 };
 
 export default meta;
diff --git a/clients/web/src/components/molecules/PromptMessagesDisplay/PromptMessagesDisplay.tsx b/clients/web/src/components/molecules/PromptMessagesDisplay/PromptMessagesDisplay.tsx
index fad05017..ec42ef13 100644
--- a/clients/web/src/components/molecules/PromptMessagesDisplay/PromptMessagesDisplay.tsx
+++ b/clients/web/src/components/molecules/PromptMessagesDisplay/PromptMessagesDisplay.tsx
@@ -1,4 +1,4 @@
-import { Button, Stack, Text, Title } from "@mantine/core";
+import { Stack, Text, Title } from "@mantine/core";
 import { MessageBubble } from "../../atoms/MessageBubble/MessageBubble";
 
 export interface PromptMessage {
@@ -10,12 +10,10 @@ export interface PromptMessage {
 
 export interface PromptMessagesDisplayProps {
   messages: PromptMessage[];
-  onCopy: () => void;
 }
 
 export function PromptMessagesDisplay({
   messages,
-  onCopy,
 }: PromptMessagesDisplayProps) {
   return (
     <Stack gap="md">
@@ -34,9 +32,6 @@ export function PromptMessagesDisplay({
           />
         ))
       )}
-      <Button variant="light" size="sm" onClick={onCopy}>
-        Copy
-      </Button>
     </Stack>
   );
 }
diff --git a/clients/web/src/components/molecules/ResourceListItem/ResourceListItem.tsx b/clients/web/src/components/molecules/ResourceListItem/ResourceListItem.tsx
index f2106a7e..4628e8c0 100644
--- a/clients/web/src/components/molecules/ResourceListItem/ResourceListItem.tsx
+++ b/clients/web/src/components/molecules/ResourceListItem/ResourceListItem.tsx
@@ -1,5 +1,4 @@
-import { Group, Stack, Text, UnstyledButton } from "@mantine/core";
-import { AnnotationBadge } from "../../atoms/AnnotationBadge/AnnotationBadge";
+import { Text, UnstyledButton } from "@mantine/core";
 
 export interface ResourceAnnotations {
   audience?: string;
@@ -14,15 +13,8 @@ export interface ResourceListItemProps {
   onClick: () => void;
 }
 
-function priorityLabel(priority: number): string {
-  if (priority >= 0.7) return "priority: high";
-  if (priority >= 0.4) return "priority: medium";
-  return "priority: low";
-}
-
 export function ResourceListItem({
   name,
-  annotations,
   selected,
   onClick,
 }: ResourceListItemProps) {
@@ -34,25 +26,7 @@ export function ResourceListItem({
       style={{ borderRadius: "var(--mantine-radius-md)" }}
       onClick={onClick}
     >
-      <Stack gap="xs">
-        <Text fw={500}>{name}</Text>
-        {annotations && (
-          <Group gap="xs">
-            {annotations.audience && (
-              <AnnotationBadge
-                label={annotations.audience}
-                variant="audience"
-              />
-            )}
-            {annotations.priority !== undefined && (
-              <AnnotationBadge
-                label={priorityLabel(annotations.priority)}
-                variant="priority"
-              />
-            )}
-          </Group>
-        )}
-      </Stack>
+      <Text fw={500}>{name}</Text>
     </UnstyledButton>
   );
 }
diff --git a/clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.tsx b/clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.tsx
index 9e9c479b..562a5b66 100644
--- a/clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.tsx
+++ b/clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.tsx
@@ -1,5 +1,8 @@
-import { Button, Group, Stack, Text, Title } from "@mantine/core";
+import { Group, Stack, Text, Title } from "@mantine/core";
+import { AnnotationBadge } from "../../atoms/AnnotationBadge/AnnotationBadge";
 import { ContentViewer } from "../../atoms/ContentViewer/ContentViewer";
+import { CopyButton } from "../../atoms/CopyButton/CopyButton";
+import { SubscribeButton } from "../../atoms/SubscribeButton/SubscribeButton";
 
 export interface ResourcePreviewPanelProps {
   uri: string;
@@ -12,6 +15,12 @@ export interface ResourcePreviewPanelProps {
   onUnsubscribe: () => void;
 }
 
+function priorityLabel(priority: number): string {
+  if (priority >= 0.7) return "priority: high";
+  if (priority >= 0.4) return "priority: medium";
+  return "priority: low";
+}
+
 function resolveContentType(mimeType: string): "json" | "image" | "text" {
   if (mimeType === "application/json") return "json";
   if (mimeType.startsWith("image/")) return "image";
@@ -30,51 +39,53 @@ export function ResourcePreviewPanel({
 }: ResourcePreviewPanelProps) {
   return (
     <Stack gap="md">
-      <Title order={4}>Content Preview</Title>
-      <Text size="sm">
-        URI:{" "}
-        <Text span c="blue">
-          {uri}
-        </Text>
-      </Text>
-      <Text size="sm" c="dimmed">
-        MIME: {mimeType}
-      </Text>
-      {annotations && (
-        <Stack gap="xs">
-          <Text size="sm">Annotations:</Text>
-          {annotations.audience && (
-            <Text size="sm" c="dimmed">
-              Audience: {annotations.audience}
-            </Text>
-          )}
-          {annotations.priority !== undefined && (
-            <Text size="sm" c="dimmed">
-              Priority: {annotations.priority}
-            </Text>
-          )}
-        </Stack>
-      )}
+      <Group justify="space-between" wrap="nowrap">
+        <Title order={4}>Resource</Title>
+        <Group gap="xs" wrap="nowrap">
+          <Text size="sm" c="blue" truncate="end">
+            {uri}
+          </Text>
+          <CopyButton value={uri} />
+        </Group>
+      </Group>
       <ContentViewer
         type={resolveContentType(mimeType)}
         content={content}
         mimeType={mimeType}
         copyable
       />
-      <Group>
-        <Button
-          variant="light"
-          size="sm"
-          onClick={isSubscribed ? onUnsubscribe : onSubscribe}
-        >
-          {isSubscribed ? "Unsubscribe" : "Subscribe"}
-        </Button>
-      </Group>
-      {lastUpdated && (
-        <Text size="xs" c="dimmed" ta="right">
-          Last updated: {lastUpdated}
+      <Group justify="space-between" wrap="nowrap">
+        {lastUpdated ? (
+          <Text size="xs" c="dimmed">
+            Last updated: {lastUpdated}
+          </Text>
+        ) : (
+          <span />
+        )}
+        <Text size="sm" c="dimmed">
+          {mimeType}
         </Text>
-      )}
+      </Group>
+      <Group justify="space-between">
+        <Group gap="xs">
+          {annotations?.audience && (
+            <AnnotationBadge
+              label={annotations.audience}
+              variant="audience"
+            />
+          )}
+          {annotations?.priority !== undefined && (
+            <AnnotationBadge
+              label={priorityLabel(annotations.priority)}
+              variant="priority"
+            />
+          )}
+        </Group>
+        <SubscribeButton
+          subscribed={isSubscribed}
+          onToggle={isSubscribed ? onUnsubscribe : onSubscribe}
+        />
+      </Group>
     </Stack>
   );
 }
diff --git a/clients/web/src/components/molecules/ResourceTemplateInput/ResourceTemplateInput.tsx b/clients/web/src/components/molecules/ResourceTemplateInput/ResourceTemplateInput.tsx
index 1a3207c1..2f04603e 100644
--- a/clients/web/src/components/molecules/ResourceTemplateInput/ResourceTemplateInput.tsx
+++ b/clients/web/src/components/molecules/ResourceTemplateInput/ResourceTemplateInput.tsx
@@ -55,7 +55,6 @@ export function ResourceTemplateInput({
           <TextInput
             key={part.value}
             size="sm"
-            label={part.value}
             placeholder={part.value}
             value={variables[part.value] ?? ""}
             onChange={(e) =>
diff --git a/clients/web/src/components/molecules/ToolDetailPanel/ToolDetailPanel.tsx b/clients/web/src/components/molecules/ToolDetailPanel/ToolDetailPanel.tsx
index d507188e..aeb81277 100644
--- a/clients/web/src/components/molecules/ToolDetailPanel/ToolDetailPanel.tsx
+++ b/clients/web/src/components/molecules/ToolDetailPanel/ToolDetailPanel.tsx
@@ -52,11 +52,6 @@ export function ToolDetailPanel({
       <Text fw={700} size="lg" truncate="end">
         {title ?? name}
       </Text>
-      {title && (
-        <Text size="sm" c="dimmed" truncate="end">
-          {name}
-        </Text>
-      )}
       {hasAnnotations && (
         <Group gap="xs">
           {annotations.audience && (
diff --git a/clients/web/src/components/organisms/LoggingScreen/LoggingScreen.tsx b/clients/web/src/components/organisms/LoggingScreen/LoggingScreen.tsx
index 91697b88..9d32d31b 100644
--- a/clients/web/src/components/organisms/LoggingScreen/LoggingScreen.tsx
+++ b/clients/web/src/components/organisms/LoggingScreen/LoggingScreen.tsx
@@ -1,6 +1,7 @@
 import {
   Button,
   Checkbox,
+  Container,
   Grid,
   Group,
   Paper,
@@ -30,6 +31,7 @@ export function LoggingScreen({
   onCopyAll,
 }: LoggingScreenProps) {
   return (
+    <Container size="xl" py="xl">
     <Grid align="stretch">
       <Grid.Col span={3}>
         <Paper withBorder p="md" h="100%">
@@ -69,5 +71,6 @@ export function LoggingScreen({
         </Paper>
       </Grid.Col>
     </Grid>
+    </Container>
   );
 }
diff --git a/clients/web/src/components/organisms/PromptsScreen/PromptsScreen.stories.tsx b/clients/web/src/components/organisms/PromptsScreen/PromptsScreen.stories.tsx
index 85ad79a8..6628082f 100644
--- a/clients/web/src/components/organisms/PromptsScreen/PromptsScreen.stories.tsx
+++ b/clients/web/src/components/organisms/PromptsScreen/PromptsScreen.stories.tsx
@@ -76,7 +76,6 @@ export const WithResult: Story = {
           content: "Hola, como estas?",
         },
       ],
-      onCopy: fn(),
     },
     listChanged: false,
   },
diff --git a/clients/web/src/components/organisms/PromptsScreen/PromptsScreen.tsx b/clients/web/src/components/organisms/PromptsScreen/PromptsScreen.tsx
index 3653d2bd..247d8a85 100644
--- a/clients/web/src/components/organisms/PromptsScreen/PromptsScreen.tsx
+++ b/clients/web/src/components/organisms/PromptsScreen/PromptsScreen.tsx
@@ -1,4 +1,4 @@
-import { Grid, Paper, Stack, Text } from "@mantine/core";
+import { Card, Container, Grid, Stack, Text } from "@mantine/core";
 import { PromptArgumentsForm } from "../../molecules/PromptArgumentsForm/PromptArgumentsForm";
 import { PromptMessagesDisplay } from "../../molecules/PromptMessagesDisplay/PromptMessagesDisplay";
 import { ListChangedIndicator } from "../../atoms/ListChangedIndicator/ListChangedIndicator";
@@ -19,9 +19,10 @@ export function PromptsScreen({
   onRefreshList,
 }: PromptsScreenProps) {
   return (
-    <Grid>
+    <Container size="xl" py="xl">
+    <Grid align="stretch">
       <Grid.Col span={5}>
-        <Paper withBorder p="md">
+        <Card withBorder padding="lg" h="100%">
           <Stack gap="md">
             <ListChangedIndicator
               visible={listChanged}
@@ -29,10 +30,10 @@ export function PromptsScreen({
             />
             <PromptArgumentsForm {...promptForm} />
           </Stack>
-        </Paper>
+        </Card>
       </Grid.Col>
       <Grid.Col span={7}>
-        <Paper withBorder p="md">
+        <Card withBorder padding="lg" h="100%">
           {messages ? (
             <PromptMessagesDisplay {...messages} />
           ) : (
@@ -40,8 +41,9 @@ export function PromptsScreen({
               Select a prompt and click Get Prompt to see messages
             </Text>
           )}
-        </Paper>
+        </Card>
       </Grid.Col>
     </Grid>
+    </Container>
   );
 }
diff --git a/clients/web/src/components/organisms/ResourcesScreen/ResourcesScreen.stories.tsx b/clients/web/src/components/organisms/ResourcesScreen/ResourcesScreen.stories.tsx
index c00c265d..be87c5e8 100644
--- a/clients/web/src/components/organisms/ResourcesScreen/ResourcesScreen.stories.tsx
+++ b/clients/web/src/components/organisms/ResourcesScreen/ResourcesScreen.stories.tsx
@@ -75,7 +75,6 @@ const selectedResourceProps: ResourcePreviewPanelProps = {
   ),
   lastUpdated: "2026-03-17T10:30:00Z",
   isSubscribed: true,
-  onCopy: fn(),
   onSubscribe: fn(),
   onUnsubscribe: fn(),
 };
diff --git a/clients/web/src/components/organisms/ResourcesScreen/ResourcesScreen.tsx b/clients/web/src/components/organisms/ResourcesScreen/ResourcesScreen.tsx
index 4899f896..0cfa340b 100644
--- a/clients/web/src/components/organisms/ResourcesScreen/ResourcesScreen.tsx
+++ b/clients/web/src/components/organisms/ResourcesScreen/ResourcesScreen.tsx
@@ -1,4 +1,4 @@
-import { Accordion, Grid, Paper, Stack, Text, TextInput } from "@mantine/core";
+import { Accordion, Card, Container, Grid, Stack, Text, TextInput, Title } from "@mantine/core";
 import { ListChangedIndicator } from "../../atoms/ListChangedIndicator/ListChangedIndicator";
 import { ResourceListItem } from "../../molecules/ResourceListItem/ResourceListItem";
 import { ResourcePreviewPanel } from "../../molecules/ResourcePreviewPanel/ResourcePreviewPanel";
@@ -38,11 +38,19 @@ export function ResourcesScreen({
     r.name.toLowerCase().includes(searchText.toLowerCase()),
   );
 
+  const openSections = [
+    ...(filteredResources.length > 0 ? ["resources"] : []),
+    ...(templates.length > 0 ? ["templates"] : []),
+    ...(subscriptions.length > 0 ? ["subscriptions"] : []),
+  ];
+
   return (
-    <Grid>
+    <Container size="xl" py="xl">
+    <Grid align="stretch">
       <Grid.Col span={4}>
-        <Paper withBorder p="md">
+        <Card withBorder padding="lg" h="100%">
           <Stack gap="sm">
+            <Title order={4}>Resources</Title>
             <ListChangedIndicator
               visible={listChanged}
               onRefresh={onRefreshList}
@@ -54,11 +62,11 @@ export function ResourcesScreen({
             />
             <Accordion
               multiple
-              defaultValue={["resources", "templates", "subscriptions"]}
+              defaultValue={openSections}
             >
               <Accordion.Item value="resources">
-                <Accordion.Control>
-                  Resources ({filteredResources.length})
+                <Accordion.Control disabled={filteredResources.length === 0}>
+                  URIs ({filteredResources.length})
                 </Accordion.Control>
                 <Accordion.Panel>
                   <Stack gap="xs">
@@ -70,7 +78,7 @@ export function ResourcesScreen({
               </Accordion.Item>
 
               <Accordion.Item value="templates">
-                <Accordion.Control>
+                <Accordion.Control disabled={templates.length === 0}>
                   Templates ({templates.length})
                 </Accordion.Control>
                 <Accordion.Panel>
@@ -86,7 +94,7 @@ export function ResourcesScreen({
               </Accordion.Item>
 
               <Accordion.Item value="subscriptions">
-                <Accordion.Control>
+                <Accordion.Control disabled={subscriptions.length === 0}>
                   Subscriptions ({subscriptions.length})
                 </Accordion.Control>
                 <Accordion.Panel>
@@ -107,11 +115,11 @@ export function ResourcesScreen({
               </Accordion.Item>
             </Accordion>
           </Stack>
-        </Paper>
+        </Card>
       </Grid.Col>
 
       <Grid.Col span={8}>
-        <Paper withBorder p="md">
+        <Card withBorder padding="lg">
           {selectedResource ? (
             <ResourcePreviewPanel {...selectedResource} />
           ) : (
@@ -119,8 +127,9 @@ export function ResourcesScreen({
               Select a resource to preview
             </Text>
           )}
-        </Paper>
+        </Card>
       </Grid.Col>
     </Grid>
+    </Container>
   );
 }
diff --git a/clients/web/src/components/organisms/ServerListScreen/ServerListScreen.tsx b/clients/web/src/components/organisms/ServerListScreen/ServerListScreen.tsx
index 3822a75d..a7e6a86d 100644
--- a/clients/web/src/components/organisms/ServerListScreen/ServerListScreen.tsx
+++ b/clients/web/src/components/organisms/ServerListScreen/ServerListScreen.tsx
@@ -4,7 +4,6 @@ import {
   SimpleGrid,
   Stack,
   Text,
-  Title,
 } from "@mantine/core";
 import { ServerCard } from "../../molecules/ServerCard/ServerCard";
 import { AddServerMenu } from "../../molecules/AddServerMenu/AddServerMenu";
@@ -26,8 +25,7 @@ export function ServerListScreen({
   return (
     <Container size="xl" py="xl">
       <Stack gap="lg">
-        <Group justify="space-between">
-          <Title order={1}>MCP Inspector</Title>
+        <Group justify="flex-end">
           <AddServerMenu
             onAddManually={onAddManually}
             onImportConfig={onImportConfig}
diff --git a/clients/web/src/components/organisms/TasksScreen/TasksScreen.tsx b/clients/web/src/components/organisms/TasksScreen/TasksScreen.tsx
index 5cb92aa7..27273599 100644
--- a/clients/web/src/components/organisms/TasksScreen/TasksScreen.tsx
+++ b/clients/web/src/components/organisms/TasksScreen/TasksScreen.tsx
@@ -1,4 +1,4 @@
-import { Button, Group, Stack, Text, Title } from "@mantine/core";
+import { Button, Container, Group, Stack, Text, Title } from "@mantine/core";
 import { TaskCard } from "../../molecules/TaskCard/TaskCard";
 import type { TaskCardProps } from "../../molecules/TaskCard/TaskCard";
 
@@ -16,11 +16,11 @@ export function TasksScreen({
   onClearHistory,
 }: TasksScreenProps) {
   return (
+    <Container size="xl" py="xl">
     <Stack gap="lg">
-      <Group justify="space-between">
-        <Title order={2}>Tasks</Title>
-        <Button variant="light" onClick={onRefresh}>
-          Refresh
+      <Group justify="flex-end">
+        <Button variant="dark" onClick={onRefresh}>
+          Refresh Tasks
         </Button>
       </Group>
 
@@ -37,9 +37,11 @@ export function TasksScreen({
 
       <Group justify="space-between">
         <Title order={4}>Completed Tasks ({completedTasks.length})</Title>
-        <Button variant="light" size="xs" onClick={onClearHistory}>
-          Clear History
-        </Button>
+        {completedTasks.length > 0 && (
+          <Button variant="light" size="xs" onClick={onClearHistory}>
+            Clear History
+          </Button>
+        )}
       </Group>
       {completedTasks.length === 0 ? (
         <Text c="dimmed">No completed tasks</Text>
@@ -51,5 +53,6 @@ export function TasksScreen({
         </Stack>
       )}
     </Stack>
+    </Container>
   );
 }
diff --git a/clients/web/src/components/organisms/ToolsScreen/ToolsScreen.tsx b/clients/web/src/components/organisms/ToolsScreen/ToolsScreen.tsx
index d69b5349..3150d3e2 100644
--- a/clients/web/src/components/organisms/ToolsScreen/ToolsScreen.tsx
+++ b/clients/web/src/components/organisms/ToolsScreen/ToolsScreen.tsx
@@ -1,4 +1,4 @@
-import { Grid, Paper, Stack, Text, TextInput } from "@mantine/core";
+import { Card, Container, Grid, Stack, Text, TextInput, Title } from "@mantine/core";
 import { ListChangedIndicator } from "../../atoms/ListChangedIndicator/ListChangedIndicator";
 import { ToolListItem } from "../../molecules/ToolListItem/ToolListItem";
 import { ToolDetailPanel } from "../../molecules/ToolDetailPanel/ToolDetailPanel";
@@ -35,10 +35,12 @@ export function ToolsScreen({
     : tools;
 
   return (
-    <Grid>
+    <Container size="xl" py="xl">
+    <Grid align="stretch">
       <Grid.Col span={3}>
-        <Paper withBorder p="md">
+        <Card withBorder padding="lg" h="100%">
           <Stack gap="sm">
+            <Title order={4}>Tools</Title>
             <ListChangedIndicator
               visible={listChanged}
               onRefresh={onRefreshList}
@@ -56,11 +58,11 @@ export function ToolsScreen({
               />
             ))}
           </Stack>
-        </Paper>
+        </Card>
       </Grid.Col>
 
       <Grid.Col span={5}>
-        <Paper withBorder p="md" variant="contained">
+        <Card withBorder padding="lg" h="100%">
           {selectedTool ? (
             <ToolDetailPanel {...selectedTool} />
           ) : (
@@ -68,11 +70,11 @@ export function ToolsScreen({
               Select a tool to view details
             </Text>
           )}
-        </Paper>
+        </Card>
       </Grid.Col>
 
       <Grid.Col span={4}>
-        <Paper withBorder p="md">
+        <Card withBorder padding="lg" h="100%">
           {result ? (
             <ResultPanel {...result} />
           ) : (
@@ -80,8 +82,9 @@ export function ToolsScreen({
               Results will appear here
             </Text>
           )}
-        </Paper>
+        </Card>
       </Grid.Col>
     </Grid>
+    </Container>
   );
 }
diff --git a/clients/web/src/theme/assets/MCP-dark.svg b/clients/web/src/theme/assets/MCP-dark.svg
new file mode 100644
index 00000000..8cb6dea7
--- /dev/null
+++ b/clients/web/src/theme/assets/MCP-dark.svg
@@ -0,0 +1,12 @@
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19_13)">
+<path d="M18 84.8528L85.8822 16.9706C95.2548 7.59798 110.451 7.59798 119.823 16.9706V16.9706C129.196 26.3431 129.196 41.5391 119.823 50.9117L68.5581 102.177" stroke="white" stroke-width="12" stroke-linecap="round"/>
+<path d="M69.2652 101.47L119.823 50.9117C129.196 41.5391 144.392 41.5391 153.765 50.9117L154.118 51.2652C163.491 60.6378 163.491 75.8338 154.118 85.2063L92.7248 146.6C89.6006 149.724 89.6006 154.789 92.7248 157.913L105.331 170.52" stroke="white" stroke-width="12" stroke-linecap="round"/>
+<path d="M102.853 33.9411L52.6482 84.1457C43.2756 93.5183 43.2756 108.714 52.6482 118.087V118.087C62.0208 127.459 77.2167 127.459 86.5893 118.087L136.794 67.8822" stroke="white" stroke-width="12" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_19_13">
+<rect width="180" height="180" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/clients/web/src/theme/assets/MCP.svg b/clients/web/src/theme/assets/MCP.svg
new file mode 100644
index 00000000..03d9f85d
--- /dev/null
+++ b/clients/web/src/theme/assets/MCP.svg
@@ -0,0 +1,12 @@
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19_13)">
+<path d="M18 84.8528L85.8822 16.9706C95.2548 7.59798 110.451 7.59798 119.823 16.9706V16.9706C129.196 26.3431 129.196 41.5391 119.823 50.9117L68.5581 102.177" stroke="black" stroke-width="12" stroke-linecap="round"/>
+<path d="M69.2652 101.47L119.823 50.9117C129.196 41.5391 144.392 41.5391 153.765 50.9117L154.118 51.2652C163.491 60.6378 163.491 75.8338 154.118 85.2063L92.7248 146.6C89.6006 149.724 89.6006 154.789 92.7248 157.913L105.331 170.52" stroke="black" stroke-width="12" stroke-linecap="round"/>
+<path d="M102.853 33.9411L52.6482 84.1457C43.2756 93.5183 43.2756 108.714 52.6482 118.087V118.087C62.0208 127.459 77.2167 127.459 86.5893 118.087L136.794 67.8822" stroke="black" stroke-width="12" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_19_13">
+<rect width="180" height="180" fill="white"/>
+</clipPath>
+</defs>
+</svg>