From bdeef45f2faf98a8594fa1c86e4882d72ac18c5b Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Tue, 18 Aug 2026 23:20:41 -0700
Subject: [PATCH 1/4] Adjust tools, resources & prompts light theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Applies PR #34's light-mode pass to the three surfaces it missed.

- Status tokens gain a `.dark` override; six sites that hardcoded the
  emerald/gray shades now use them, including the two server drawers.
- Drawer body and right rail both inherit `bg-popover`. The dark-only
  override they carried split the panes in dark and did nothing in light,
  where both were pure white.
- Scrim `bg-black/10` → `/50` on all five drawers.
- The three drawer tables adopt `ServersTable`'s card-per-row pattern,
  with rows a step down from the drawer body rather than up from the
  page. Hover and selected are pinned to the row fill.
- Page chrome moves to `text-foreground` / `text-muted-foreground`, the
  off-palette blue spinners are retinted, and two badges stop bypassing
  the icon tokens.

Also fixes an unrelated bug in `VirtualServerDetailsPanel`: the status
icon was unconditionally green while its label branched on `enabled`.

Forms keep their hardcoded neutrals, matching what PR #34 left behind.

2896 tests pass; tsc, eslint, prettier and build are clean.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 .../gateways/VirtualServerDetailsPanel.tsx    |  8 +++++--
 .../prompts/PromptDefinitionTable.tsx         | 20 ++++++++---------
 src/components/prompts/PromptDetailsPanel.tsx | 12 +++++-----
 .../resources/ResourceDetailsPanel.tsx        | 10 +++++----
 src/components/resources/ResourcesTable.tsx   | 16 +++++++-------
 .../servers/MCPServerDetailsPanel.tsx         |  6 +++--
 src/components/tools/ToolDetailsPanel.tsx     | 10 ++++-----
 src/components/tools/ToolsTable.tsx           | 18 +++++++--------
 src/index.css                                 |  6 +++--
 src/pages/Prompts.tsx                         | 12 +++++-----
 src/pages/Resources.tsx                       | 22 +++++++++----------
 src/pages/Tools.tsx                           | 12 +++++-----
 12 files changed, 82 insertions(+), 70 deletions(-)

diff --git a/src/components/gateways/VirtualServerDetailsPanel.tsx b/src/components/gateways/VirtualServerDetailsPanel.tsx
index e97a34f..15eebaa 100644
--- a/src/components/gateways/VirtualServerDetailsPanel.tsx
+++ b/src/components/gateways/VirtualServerDetailsPanel.tsx
@@ -378,7 +378,7 @@ export function VirtualServerDetailsPanel({
         aria-hidden="true"
         onClick={onClose}
         className={cn(
-          "absolute inset-0 z-10 bg-black/10 transition-opacity duration-150 supports-backdrop-filter:backdrop-blur-xs",
+          "absolute inset-0 z-10 bg-black/50 transition-opacity duration-150 supports-backdrop-filter:backdrop-blur-xs",
           "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 data-[state=closed]:pointer-events-none",
         )}
       />
@@ -658,7 +658,11 @@ export function VirtualServerDetailsPanel({
                 <dl className="space-y-4">
                   <DetailRow label={intl.formatMessage({ id: "gateways.details.status" })}>
                     <span className="flex items-center gap-2">
-                      <Activity className="size-3.5 text-emerald-400" />
+                      <Activity
+                        className={`size-3.5 ${
+                          server.enabled ? "text-tool-status-active" : "text-tool-status-inactive"
+                        }`}
+                      />
                       {server.enabled
                         ? intl.formatMessage({ id: "gateways.details.status.active" })
                         : intl.formatMessage({ id: "gateways.details.status.inactive" })}
diff --git a/src/components/prompts/PromptDefinitionTable.tsx b/src/components/prompts/PromptDefinitionTable.tsx
index b345273..5da3caf 100644
--- a/src/components/prompts/PromptDefinitionTable.tsx
+++ b/src/components/prompts/PromptDefinitionTable.tsx
@@ -36,9 +36,9 @@ export interface PromptDefinitionTableProps {
  * updates the Prompt details sidebar. The overflow menu replaces the one that
  * previously sat beside the panel title.
  *
- * a11y: row selection is conveyed visually via `data-state` only, matching the
- * Tools/Resources tables. Exposing it to assistive tech (grid role +
- * aria-selected) is a cross-cutting follow-up across all three tables.
+ * Rows carry `data-state="selected"` but render no selected styling: all rows
+ * share one fill, matching the Tools/Resources tables. The attribute stays for
+ * tests and any future affordance.
  */
 export function PromptDefinitionTable({
   prompts,
@@ -51,19 +51,19 @@ export function PromptDefinitionTable({
   const intl = useIntl();
 
   return (
-    <Table>
+    <Table className="min-w-full border-separate border-spacing-y-1.5">
       <TableHeader>
-        <TableRow className="hover:bg-transparent">
-          <TableHead className="h-9 w-[30%] px-4 py-2.5 text-xs font-medium">
+        <TableRow className="border-none hover:bg-transparent">
+          <TableHead className="h-9 w-[30%] border-b border-border px-4 py-2.5 text-xs font-medium">
             {intl.formatMessage({ id: "prompts.details.label.name" })}
           </TableHead>
-          <TableHead className="h-9 px-4 py-2.5 text-xs font-medium">
+          <TableHead className="h-9 border-b border-border px-4 py-2.5 text-xs font-medium">
             {intl.formatMessage({ id: "prompts.details.label.promptId" })}
           </TableHead>
-          <TableHead className="h-9 w-[40px] px-4 py-2.5" />
+          <TableHead className="h-9 w-[40px] border-b border-border px-4 py-2.5" />
         </TableRow>
       </TableHeader>
-      <TableBody className="[&_tr]:border-0">
+      <TableBody>
         {prompts.map((prompt) => (
           <TableRow
             key={prompt.id}
@@ -79,7 +79,7 @@ export function PromptDefinitionTable({
                 onSelectPrompt(prompt);
               }
             }}
-            className="cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset"
+            className="cursor-pointer border-0 bg-neutral-50 hover:bg-neutral-50 data-[state=selected]:bg-neutral-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset dark:bg-neutral-800/50 dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800/50 [&>td:first-child]:rounded-l-lg [&>td:last-child]:rounded-r-lg"
           >
             <TableCell className="px-4 py-3 text-sm text-foreground">
               <span className="line-clamp-1">{prompt.displayName || prompt.name}</span>
diff --git a/src/components/prompts/PromptDetailsPanel.tsx b/src/components/prompts/PromptDetailsPanel.tsx
index 0f979b1..ae2e95a 100644
--- a/src/components/prompts/PromptDetailsPanel.tsx
+++ b/src/components/prompts/PromptDetailsPanel.tsx
@@ -142,7 +142,7 @@ export function PromptDetailsPanel({
         aria-hidden="true"
         onClick={onClose}
         className={cn(
-          "absolute inset-0 z-10 bg-black/10 transition-opacity duration-150 supports-backdrop-filter:backdrop-blur-xs",
+          "absolute inset-0 z-10 bg-black/50 transition-opacity duration-150 supports-backdrop-filter:backdrop-blur-xs",
           "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 data-[state=closed]:pointer-events-none",
         )}
       />
@@ -161,13 +161,13 @@ export function PromptDetailsPanel({
         )}
       >
         <div className="grid min-h-0 flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[minmax(0,1fr)_320px]">
-          <div className="min-w-0 overflow-y-auto bg-background px-6 py-8 dark:bg-neutral-900 lg:px-12">
+          <div className="min-w-0 overflow-y-auto px-6 py-8 lg:px-12">
             <h2 id={headingId} className="sr-only">
               {intl.formatMessage({ id: "prompts.details.srHeading" }, { title })}
             </h2>
 
             <div className="flex min-w-0 items-start gap-3">
-              <span className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-sm bg-emerald-300 text-neutral-950">
+              <span className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-sm bg-prompt-icon-bg text-neutral-950">
                 <MessageSquareCode className="size-4" />
               </span>
               <span aria-hidden="true" className="truncate text-xl font-semibold text-foreground">
@@ -263,7 +263,7 @@ export function PromptDetailsPanel({
             </Tabs>
           </div>
 
-          <aside className="relative overflow-y-auto border-t border-border bg-background lg:border-l lg:border-t-0 dark:bg-neutral-900">
+          <aside className="relative overflow-y-auto border-t border-border lg:border-l lg:border-t-0">
             <Button
               ref={closeButtonRef}
               type="button"
@@ -288,7 +288,9 @@ export function PromptDetailsPanel({
                       <span className="flex items-center gap-2">
                         <Activity
                           className={`size-3.5 ${
-                            selected.enabled ? "text-emerald-400" : "text-gray-400"
+                            selected.enabled
+                              ? "text-tool-status-active"
+                              : "text-tool-status-inactive"
                           }`}
                         />
                         {selected.enabled
diff --git a/src/components/resources/ResourceDetailsPanel.tsx b/src/components/resources/ResourceDetailsPanel.tsx
index b5fe90a..39f100b 100644
--- a/src/components/resources/ResourceDetailsPanel.tsx
+++ b/src/components/resources/ResourceDetailsPanel.tsx
@@ -127,7 +127,7 @@ export function ResourceDetailsPanel({
         aria-hidden="true"
         onClick={onClose}
         className={cn(
-          "absolute inset-0 z-10 bg-black/10 transition-opacity duration-150 supports-backdrop-filter:backdrop-blur-xs",
+          "absolute inset-0 z-10 bg-black/50 transition-opacity duration-150 supports-backdrop-filter:backdrop-blur-xs",
           "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 data-[state=closed]:pointer-events-none",
         )}
       />
@@ -147,7 +147,7 @@ export function ResourceDetailsPanel({
       >
         {resources.length > 0 && (
           <div className="grid min-h-0 flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[minmax(0,1fr)_320px]">
-            <div className="min-w-0 overflow-y-auto bg-background px-6 py-8 lg:px-12 dark:bg-neutral-900">
+            <div className="min-w-0 overflow-y-auto px-6 py-8 lg:px-12">
               <h2 id={headingId} className="sr-only">
                 {intl.formatMessage(
                   { id: "resources.details.resourcesFor" },
@@ -176,7 +176,7 @@ export function ResourceDetailsPanel({
               />
             </div>
 
-            <aside className="relative border-t border-border bg-background lg:border-l lg:border-t-0">
+            <aside className="relative border-t border-border lg:border-l lg:border-t-0">
               <Button
                 ref={closeButtonRef}
                 type="button"
@@ -203,7 +203,9 @@ export function ResourceDetailsPanel({
                         <span className="flex items-center gap-2">
                           <Activity
                             className={`size-3.5 ${
-                              selectedResource.enabled ? "text-emerald-400" : "text-gray-400"
+                              selectedResource.enabled
+                                ? "text-tool-status-active"
+                                : "text-tool-status-inactive"
                             }`}
                           />
                           {selectedResource.enabled
diff --git a/src/components/resources/ResourcesTable.tsx b/src/components/resources/ResourcesTable.tsx
index 4b19c70..39eb2b9 100644
--- a/src/components/resources/ResourcesTable.tsx
+++ b/src/components/resources/ResourcesTable.tsx
@@ -37,22 +37,22 @@ export function ResourcesTable({
   const intl = useIntl();
 
   return (
-    <Table>
+    <Table className="min-w-full border-separate border-spacing-y-1.5">
       <TableHeader>
-        <TableRow className="hover:bg-transparent">
-          <TableHead className="h-9 px-4 py-2.5 text-xs font-medium">
+        <TableRow className="border-none hover:bg-transparent">
+          <TableHead className="h-9 border-b border-border px-4 py-2.5 text-xs font-medium">
             {intl.formatMessage({ id: "resources.table.resource" })}
           </TableHead>
-          <TableHead className="h-9 px-4 py-2.5 text-xs font-medium">
+          <TableHead className="h-9 border-b border-border px-4 py-2.5 text-xs font-medium">
             {intl.formatMessage({ id: "resources.table.uri" })}
           </TableHead>
-          <TableHead className="h-9 px-4 py-2.5 text-xs font-medium">
+          <TableHead className="h-9 border-b border-border px-4 py-2.5 text-xs font-medium">
             {intl.formatMessage({ id: "resources.table.resourceId" })}
           </TableHead>
-          <TableHead className="h-9 w-[40px] px-4 py-2.5" />
+          <TableHead className="h-9 w-[40px] border-b border-border px-4 py-2.5" />
         </TableRow>
       </TableHeader>
-      <TableBody className="[&_tr]:border-0">
+      <TableBody>
         {resources.map((resource) => (
           <TableRow
             key={resource.id}
@@ -65,7 +65,7 @@ export function ResourcesTable({
                 onSelectResource(resource);
               }
             }}
-            className="cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset"
+            className="cursor-pointer border-0 bg-neutral-50 hover:bg-neutral-50 data-[state=selected]:bg-neutral-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset dark:bg-neutral-800/50 dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800/50 [&>td:first-child]:rounded-l-lg [&>td:last-child]:rounded-r-lg"
           >
             <TableCell className="px-4 py-3 text-sm text-foreground">
               <span className="line-clamp-1">{resource.title || resource.name}</span>
diff --git a/src/components/servers/MCPServerDetailsPanel.tsx b/src/components/servers/MCPServerDetailsPanel.tsx
index 2efd6a1..60a472a 100644
--- a/src/components/servers/MCPServerDetailsPanel.tsx
+++ b/src/components/servers/MCPServerDetailsPanel.tsx
@@ -306,7 +306,7 @@ export function MCPServerDetailsPanel({
         aria-hidden="true"
         onClick={onClose}
         className={cn(
-          "absolute inset-0 z-10 bg-black/10 transition-opacity duration-150 supports-backdrop-filter:backdrop-blur-xs",
+          "absolute inset-0 z-10 bg-black/50 transition-opacity duration-150 supports-backdrop-filter:backdrop-blur-xs",
           "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 data-[state=closed]:pointer-events-none",
         )}
       />
@@ -552,7 +552,9 @@ export function MCPServerDetailsPanel({
                     <span className="flex items-center gap-2">
                       <Activity
                         className={`size-3.5 ${
-                          server.enabled && server.reachable ? "text-emerald-400" : "text-gray-400"
+                          server.enabled && server.reachable
+                            ? "text-tool-status-active"
+                            : "text-tool-status-inactive"
                         }`}
                       />
                       {server.enabled ? (server.reachable ? "Active" : "Unreachable") : "Inactive"}
diff --git a/src/components/tools/ToolDetailsPanel.tsx b/src/components/tools/ToolDetailsPanel.tsx
index 4cc79a2..8abf09e 100644
--- a/src/components/tools/ToolDetailsPanel.tsx
+++ b/src/components/tools/ToolDetailsPanel.tsx
@@ -147,7 +147,7 @@ export function ToolDetailsPanel({
         aria-hidden="true"
         onClick={onClose}
         className={cn(
-          "absolute inset-0 z-10 bg-black/10 transition-opacity duration-150 supports-backdrop-filter:backdrop-blur-xs",
+          "absolute inset-0 z-10 bg-black/50 transition-opacity duration-150 supports-backdrop-filter:backdrop-blur-xs",
           "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 data-[state=closed]:pointer-events-none",
         )}
       />
@@ -167,7 +167,7 @@ export function ToolDetailsPanel({
       >
         {tools.length > 0 && (
           <div className="grid min-h-0 flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[minmax(0,1fr)_320px]">
-            <div className="min-w-0 overflow-y-auto bg-background px-6 py-8 lg:px-12 dark:bg-neutral-900">
+            <div className="min-w-0 overflow-y-auto px-6 py-8 lg:px-12">
               <h2 id={headingId} className="sr-only">
                 {intl.formatMessage({ id: "tools.details.toolsFor" }, { name: gatewaySlug })}
               </h2>
@@ -197,7 +197,7 @@ export function ToolDetailsPanel({
               />
             </div>
 
-            <aside className="relative border-t border-border bg-background lg:border-l lg:border-t-0">
+            <aside className="relative border-t border-border lg:border-l lg:border-t-0">
               <Button
                 ref={closeButtonRef}
                 type="button"
@@ -223,8 +223,8 @@ export function ToolDetailsPanel({
                           <Activity
                             className={`size-3.5 ${
                               selectedTool.enabled && selectedTool.reachable
-                                ? "text-emerald-400"
-                                : "text-gray-400"
+                                ? "text-tool-status-active"
+                                : "text-tool-status-inactive"
                             }`}
                           />
                           {selectedTool.enabled
diff --git a/src/components/tools/ToolsTable.tsx b/src/components/tools/ToolsTable.tsx
index 71d80bb..b2c9795 100644
--- a/src/components/tools/ToolsTable.tsx
+++ b/src/components/tools/ToolsTable.tsx
@@ -47,25 +47,25 @@ export function ToolsTable({
 
   return (
     <>
-      <Table>
+      <Table className="min-w-full border-separate border-spacing-y-1.5">
         <TableHeader>
-          <TableRow className="hover:bg-transparent">
-            <TableHead className="h-9 px-4 py-2.5 text-xs font-medium">
+          <TableRow className="border-none hover:bg-transparent">
+            <TableHead className="h-9 border-b border-border px-4 py-2.5 text-xs font-medium">
               {intl.formatMessage({ id: "tools.table.tool" })}
             </TableHead>
-            <TableHead className="h-9 px-4 py-2.5 text-xs font-medium">
+            <TableHead className="h-9 border-b border-border px-4 py-2.5 text-xs font-medium">
               {intl.formatMessage({ id: "tools.table.name" })}
             </TableHead>
-            <TableHead className="h-9 px-4 py-2.5 text-xs font-medium">
+            <TableHead className="h-9 border-b border-border px-4 py-2.5 text-xs font-medium">
               {intl.formatMessage({ id: "tools.table.toolId" })}
             </TableHead>
-            <TableHead className="h-9 w-[80px] px-4 py-2.5 text-xs font-medium">
+            <TableHead className="h-9 w-[80px] border-b border-border px-4 py-2.5 text-xs font-medium">
               {intl.formatMessage({ id: "tools.table.schema" })}
             </TableHead>
-            <TableHead className="h-9 w-[40px] px-4 py-2.5" />
+            <TableHead className="h-9 w-[40px] border-b border-border px-4 py-2.5" />
           </TableRow>
         </TableHeader>
-        <TableBody className="[&_tr]:border-0">
+        <TableBody>
           {tools.map((tool) => (
             <TableRow
               key={tool.id}
@@ -78,7 +78,7 @@ export function ToolsTable({
                   onSelectTool(tool);
                 }
               }}
-              className="cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset"
+              className="cursor-pointer border-0 bg-neutral-50 hover:bg-neutral-50 data-[state=selected]:bg-neutral-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset dark:bg-neutral-800/50 dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800/50 [&>td:first-child]:rounded-l-lg [&>td:last-child]:rounded-r-lg"
             >
               <TableCell className="px-4 py-3 text-sm text-foreground">
                 <span className="line-clamp-1">{tool.displayName || tool.title || tool.name}</span>
diff --git a/src/index.css b/src/index.css
index d4b28da..44f67d8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -129,8 +129,9 @@
   --destructive: oklch(0.577 0.245 27.325);
   --tool-icon-bg: var(--color-fuchsia-400);
   --prompt-icon-bg: #6fff9f;
-  --tool-status-active: var(--color-emerald-500);
-  --tool-status-inactive: var(--color-gray-500);
+  /* emerald-400 falls under 3:1 on white; .dark restores it */
+  --tool-status-active: var(--color-emerald-600);
+  --tool-status-inactive: var(--color-neutral-500);
   --tool-badge-bg: var(--color-neutral-200);
   --tool-badge-fg: var(--color-neutral-800);
   --tool-add-icon-bg: var(--color-neutral-900);
@@ -189,6 +190,7 @@
   --tool-badge-fg: var(--color-white);
   --tool-add-icon-bg: var(--color-white);
   --tool-add-icon-fg: var(--color-neutral-900);
+  --tool-status-active: var(--color-emerald-400);
   --selection: var(--color-orange-500);
   /* Status-headline icon accent (brand cyan) — bright on the dark background. */
   --status-icon: #70f9ff;
diff --git a/src/pages/Prompts.tsx b/src/pages/Prompts.tsx
index 8ba4f5f..40f767c 100644
--- a/src/pages/Prompts.tsx
+++ b/src/pages/Prompts.tsx
@@ -100,7 +100,7 @@ function PromptGroupCard({
           <div className="flex min-w-0 flex-1 items-center gap-2">
             <span
               title={group.label}
-              className="min-w-0 truncate text-sm font-semibold text-neutral-500 dark:text-neutral-400"
+              className="min-w-0 truncate text-sm font-semibold text-muted-foreground"
             >
               {group.label}
             </span>
@@ -168,7 +168,7 @@ function PromptGroupCard({
                       : "prompts.details.status.inactive",
                   })}
                   className={`mr-1 inline-block h-1.5 w-1.5 flex-shrink-0 rounded-full ${
-                    enabled ? "bg-emerald-400" : "bg-gray-400"
+                    enabled ? "bg-tool-status-active" : "bg-tool-status-inactive"
                   }`}
                 />
                 {getPromptLabel(prompt)}
@@ -221,13 +221,13 @@ function AddPromptsCard({
           <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded bg-tool-add-icon-bg shadow-sm">
             <Plus className="h-3.5 w-3.5 text-tool-add-icon-fg" />
           </div>
-          <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+          <span className="text-sm font-semibold text-foreground">
             {intl.formatMessage({ id: "prompts.add.title" })}
           </span>
         </div>
       </CardHeader>
       <CardContent>
-        <p className="text-sm leading-relaxed text-neutral-500 dark:text-neutral-400">
+        <p className="text-sm leading-relaxed text-muted-foreground">
           {intl.formatMessage({ id: "prompts.add.description" })}
         </p>
       </CardContent>
@@ -502,7 +502,7 @@ export function Prompts() {
         />
       ) : (
         <>
-          <h1 className="mb-6 text-base font-semibold text-neutral-900 dark:text-white">
+          <h1 className="mb-6 text-base font-semibold text-foreground">
             {intl.formatMessage({ id: "prompts.title" })}
           </h1>
 
@@ -514,7 +514,7 @@ export function Prompts() {
               className="flex items-center justify-center p-12"
             >
               <span className="sr-only">{intl.formatMessage({ id: "prompts.loading" })}</span>
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400" />
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-foreground" />
             </div>
           ) : (
             <>
diff --git a/src/pages/Resources.tsx b/src/pages/Resources.tsx
index 391d2da..1f9ed0d 100644
--- a/src/pages/Resources.tsx
+++ b/src/pages/Resources.tsx
@@ -98,11 +98,11 @@ const ResourceGroupCard = memo(function ResourceGroupCard({
           <div className="flex min-w-0 flex-1 items-center gap-2">
             <span
               title={group.gatewaySlug}
-              className="min-w-0 truncate text-sm font-semibold text-neutral-500 dark:text-neutral-400"
+              className="min-w-0 truncate text-sm font-semibold text-muted-foreground"
             >
               {group.gatewaySlug}
             </span>
-            <span className="whitespace-nowrap text-sm font-semibold text-neutral-900 dark:text-white">
+            <span className="whitespace-nowrap text-sm font-semibold text-foreground">
               {intl.formatMessage(
                 { id: "resources.card.resourceCount" },
                 { count: group.resources.length },
@@ -210,16 +210,16 @@ function AddResourcesCard({ onAddResource }: { onAddResource: () => void }) {
     >
       <CardHeader>
         <div className="flex items-center gap-3">
-          <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded bg-neutral-200 shadow-sm dark:bg-white">
-            <Plus className="h-3.5 w-3.5 text-neutral-700 dark:text-neutral-900" />
+          <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded bg-tool-add-icon-bg shadow-sm">
+            <Plus className="h-3.5 w-3.5 text-tool-add-icon-fg" />
           </div>
-          <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+          <span className="text-sm font-semibold text-foreground">
             {intl.formatMessage({ id: "resources.addResources.title" })}
           </span>
         </div>
       </CardHeader>
       <CardContent>
-        <p className="text-sm leading-relaxed text-neutral-500 dark:text-neutral-400">
+        <p className="text-sm leading-relaxed text-muted-foreground">
           {intl.formatMessage({ id: "resources.addResources.description" })}
         </p>
       </CardContent>
@@ -542,7 +542,7 @@ export function Resources() {
           <span className="sr-only">
             {intl.formatMessage({ id: "resources.form.loadingContent" })}
           </span>
-          <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400" />
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-foreground" />
         </div>
       ) : showForm && editingResource && resourceContentError ? (
         <div className="mx-auto mt-6 w-full max-w-3xl rounded-xl border border-red-200 bg-red-50 p-6 dark:border-red-800 dark:bg-red-900/20">
@@ -561,10 +561,10 @@ export function Resources() {
         </div>
       ) : showForm && editingResource && isEditingBinaryResource ? (
         <div className="mx-auto mt-6 w-full max-w-3xl rounded-xl border border-neutral-200 bg-inherit p-6 shadow-[0_12px_40px_rgba(15,23,42,0.12)] dark:border-neutral-800">
-          <h3 className="mb-1 font-semibold text-neutral-900 dark:text-white">
+          <h3 className="mb-1 font-semibold text-foreground">
             {intl.formatMessage({ id: "resources.form.binaryUnsupported" })}
           </h3>
-          <p className="mb-4 text-sm text-neutral-600 dark:text-neutral-400">
+          <p className="mb-4 text-sm text-muted-foreground">
             {intl.formatMessage({ id: "resources.form.binaryUnsupportedDescription" })}
           </p>
           <div className="flex justify-end">
@@ -588,7 +588,7 @@ export function Resources() {
           <h1
             ref={headingRef}
             tabIndex={-1}
-            className="mb-6 text-base font-semibold text-neutral-900 dark:text-white"
+            className="mb-6 text-base font-semibold text-foreground"
           >
             {intl.formatMessage({ id: "resources.title" })}
           </h1>
@@ -601,7 +601,7 @@ export function Resources() {
               className="flex items-center justify-center p-12"
             >
               <span className="sr-only">{intl.formatMessage({ id: "resources.loading" })}</span>
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400" />
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-foreground" />
             </div>
           )}
 
diff --git a/src/pages/Tools.tsx b/src/pages/Tools.tsx
index 5806822..eb202c5 100644
--- a/src/pages/Tools.tsx
+++ b/src/pages/Tools.tsx
@@ -74,11 +74,11 @@ function ToolGroupCard({
           <div className="flex min-w-0 flex-1 items-center gap-2">
             <span
               title={group.gatewaySlug}
-              className="min-w-0 truncate text-sm font-semibold text-neutral-500 dark:text-neutral-400"
+              className="min-w-0 truncate text-sm font-semibold text-muted-foreground"
             >
               {group.gatewaySlug}
             </span>
-            <span className="whitespace-nowrap text-sm font-semibold text-neutral-900 dark:text-white">
+            <span className="whitespace-nowrap text-sm font-semibold text-foreground">
               {intl.formatMessage({ id: "tools.card.toolCount" }, { count: group.tools.length })}
             </span>
             <span
@@ -160,13 +160,13 @@ function AddToolsCard({ onAddTool }: { onAddTool: () => void }) {
           <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded bg-tool-add-icon-bg shadow-sm">
             <Plus className="h-3.5 w-3.5 text-tool-add-icon-fg" />
           </div>
-          <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+          <span className="text-sm font-semibold text-foreground">
             {intl.formatMessage({ id: "tools.add.title" })}
           </span>
         </div>
       </CardHeader>
       <CardContent>
-        <p className="text-sm leading-relaxed text-neutral-500 dark:text-neutral-400">
+        <p className="text-sm leading-relaxed text-muted-foreground">
           {intl.formatMessage({ id: "tools.add.description" })}
         </p>
       </CardContent>
@@ -425,7 +425,7 @@ export function Tools() {
         />
       ) : (
         <>
-          <h1 className="mb-6 text-base font-semibold text-neutral-900 dark:text-white">
+          <h1 className="mb-6 text-base font-semibold text-foreground">
             {intl.formatMessage({ id: "tools.title" })}
           </h1>
 
@@ -437,7 +437,7 @@ export function Tools() {
               className="flex items-center justify-center p-12"
             >
               <span className="sr-only">{intl.formatMessage({ id: "tools.loading" })}</span>
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400" />
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-foreground" />
             </div>
           )}
 

From 8a07588779918dcd6c6b231d7de4b0ce86285d5b Mon Sep 17 00:00:00 2001
From: Marek Dano <mk.dano@gmail.com>
Date: Wed, 19 Aug 2026 10:35:02 +0100
Subject: [PATCH 2/4] fix(ui): restore row hover/selected contrast and drawer
 rail background

Signed-off-by: Marek Dano <mk.dano@gmail.com>
---
 src/components/gateways/VirtualServerDetailsPanel.tsx | 2 +-
 src/components/prompts/PromptDefinitionTable.tsx      | 8 ++++----
 src/components/resources/ResourcesTable.tsx           | 2 +-
 src/components/servers/MCPServerDetailsPanel.tsx      | 2 +-
 src/components/tools/ToolsTable.tsx                   | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/gateways/VirtualServerDetailsPanel.tsx b/src/components/gateways/VirtualServerDetailsPanel.tsx
index 15eebaa..a2e0338 100644
--- a/src/components/gateways/VirtualServerDetailsPanel.tsx
+++ b/src/components/gateways/VirtualServerDetailsPanel.tsx
@@ -637,7 +637,7 @@ export function VirtualServerDetailsPanel({
               </div>
             </div>
 
-            <aside className="relative border-t border-border bg-background lg:border-l lg:border-t-0">
+            <aside className="relative border-t border-border bg-popover lg:border-l lg:border-t-0">
               <Button
                 ref={closeButtonRef}
                 type="button"
diff --git a/src/components/prompts/PromptDefinitionTable.tsx b/src/components/prompts/PromptDefinitionTable.tsx
index 5da3caf..bdabc68 100644
--- a/src/components/prompts/PromptDefinitionTable.tsx
+++ b/src/components/prompts/PromptDefinitionTable.tsx
@@ -36,9 +36,9 @@ export interface PromptDefinitionTableProps {
  * updates the Prompt details sidebar. The overflow menu replaces the one that
  * previously sat beside the panel title.
  *
- * Rows carry `data-state="selected"` but render no selected styling: all rows
- * share one fill, matching the Tools/Resources tables. The attribute stays for
- * tests and any future affordance.
+ * a11y: row selection is conveyed visually via `data-state` only, matching the
+ * Tools/Resources tables. Exposing it to assistive tech (grid role +
+ * aria-selected) is a cross-cutting follow-up across all three tables.
  */
 export function PromptDefinitionTable({
   prompts,
@@ -79,7 +79,7 @@ export function PromptDefinitionTable({
                 onSelectPrompt(prompt);
               }
             }}
-            className="cursor-pointer border-0 bg-neutral-50 hover:bg-neutral-50 data-[state=selected]:bg-neutral-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset dark:bg-neutral-800/50 dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800/50 [&>td:first-child]:rounded-l-lg [&>td:last-child]:rounded-r-lg"
+            className="cursor-pointer border-0 bg-neutral-50 hover:bg-neutral-100 data-[state=selected]:bg-neutral-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset dark:bg-neutral-800/50 dark:hover:bg-neutral-700/60 dark:data-[state=selected]:bg-neutral-700 [&>td:first-child]:rounded-l-lg [&>td:last-child]:rounded-r-lg"
           >
             <TableCell className="px-4 py-3 text-sm text-foreground">
               <span className="line-clamp-1">{prompt.displayName || prompt.name}</span>
diff --git a/src/components/resources/ResourcesTable.tsx b/src/components/resources/ResourcesTable.tsx
index 39eb2b9..7a7f75c 100644
--- a/src/components/resources/ResourcesTable.tsx
+++ b/src/components/resources/ResourcesTable.tsx
@@ -65,7 +65,7 @@ export function ResourcesTable({
                 onSelectResource(resource);
               }
             }}
-            className="cursor-pointer border-0 bg-neutral-50 hover:bg-neutral-50 data-[state=selected]:bg-neutral-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset dark:bg-neutral-800/50 dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800/50 [&>td:first-child]:rounded-l-lg [&>td:last-child]:rounded-r-lg"
+            className="cursor-pointer border-0 bg-neutral-50 hover:bg-neutral-100 data-[state=selected]:bg-neutral-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset dark:bg-neutral-800/50 dark:hover:bg-neutral-700/60 dark:data-[state=selected]:bg-neutral-700 [&>td:first-child]:rounded-l-lg [&>td:last-child]:rounded-r-lg"
           >
             <TableCell className="px-4 py-3 text-sm text-foreground">
               <span className="line-clamp-1">{resource.title || resource.name}</span>
diff --git a/src/components/servers/MCPServerDetailsPanel.tsx b/src/components/servers/MCPServerDetailsPanel.tsx
index 60a472a..d113290 100644
--- a/src/components/servers/MCPServerDetailsPanel.tsx
+++ b/src/components/servers/MCPServerDetailsPanel.tsx
@@ -531,7 +531,7 @@ export function MCPServerDetailsPanel({
               </Tabs>
             </div>
 
-            <aside className="relative border-t border-border bg-background lg:border-l lg:border-t-0">
+            <aside className="relative border-t border-border bg-popover lg:border-l lg:border-t-0">
               <Button
                 ref={closeButtonRef}
                 type="button"
diff --git a/src/components/tools/ToolsTable.tsx b/src/components/tools/ToolsTable.tsx
index b2c9795..adb6115 100644
--- a/src/components/tools/ToolsTable.tsx
+++ b/src/components/tools/ToolsTable.tsx
@@ -78,7 +78,7 @@ export function ToolsTable({
                   onSelectTool(tool);
                 }
               }}
-              className="cursor-pointer border-0 bg-neutral-50 hover:bg-neutral-50 data-[state=selected]:bg-neutral-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset dark:bg-neutral-800/50 dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800/50 [&>td:first-child]:rounded-l-lg [&>td:last-child]:rounded-r-lg"
+              className="cursor-pointer border-0 bg-neutral-50 hover:bg-neutral-100 data-[state=selected]:bg-neutral-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset dark:bg-neutral-800/50 dark:hover:bg-neutral-700/60 dark:data-[state=selected]:bg-neutral-700 [&>td:first-child]:rounded-l-lg [&>td:last-child]:rounded-r-lg"
             >
               <TableCell className="px-4 py-3 text-sm text-foreground">
                 <span className="line-clamp-1">{tool.displayName || tool.title || tool.name}</span>

From f650dc39131db87652be628fdd900014b1ddaf83 Mon Sep 17 00:00:00 2001
From: Marek Dano <mk.dano@gmail.com>
Date: Wed, 19 Aug 2026 10:35:39 +0100
Subject: [PATCH 3/4] fix(ui): align Users/Teams pagination controls and status
 icons with theme tokens

Signed-off-by: Marek Dano <mk.dano@gmail.com>
---
 src/components/users/UsersTable.tsx | 6 ++++--
 src/pages/Teams.tsx                 | 9 +++------
 src/pages/Users.tsx                 | 2 +-
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/users/UsersTable.tsx b/src/components/users/UsersTable.tsx
index 155fa9d..a79dd07 100644
--- a/src/components/users/UsersTable.tsx
+++ b/src/components/users/UsersTable.tsx
@@ -87,7 +87,7 @@ export function UsersTable({ users, onDeleteClick, onEditClick }: UsersTableProp
               securityIconClass = "text-destructive";
             } else if (user.password_change_required) {
               securityLabel = intl.formatMessage({ id: "users.security.passwordReset" });
-              securityIconClass = "text-amber-400";
+              securityIconClass = "text-amber-600 dark:text-amber-400";
             } else if (user.email_verified) {
               securityLabel = intl.formatMessage({ id: "users.security.verified" });
               securityIconClass = "text-accent-foreground";
@@ -120,7 +120,9 @@ export function UsersTable({ users, onDeleteClick, onEditClick }: UsersTableProp
                   <div className="flex items-center gap-1.5 text-[13px] leading-4 text-muted-foreground">
                     <Check
                       className={
-                        user.is_active ? "h-3 w-3 text-emerald-400" : "h-3 w-3 text-neutral-500"
+                        user.is_active
+                          ? "h-3 w-3 text-emerald-600 dark:text-emerald-400"
+                          : "h-3 w-3 text-neutral-500"
                       }
                       strokeWidth={1.5}
                       aria-hidden="true"
diff --git a/src/pages/Teams.tsx b/src/pages/Teams.tsx
index 986b897..b949e4e 100644
--- a/src/pages/Teams.tsx
+++ b/src/pages/Teams.tsx
@@ -262,21 +262,18 @@ export function Teams() {
 
                   <div className="flex items-center justify-between mt-6">
                     <div className="flex items-center gap-4">
-                      <div className="text-sm text-gray-600 dark:text-gray-400">
+                      <div className="text-sm text-muted-foreground">
                         {intl.formatMessage({ id: "teams.showing" }, { count: results.length })}
                       </div>
                       <div className="flex items-center gap-2">
-                        <label
-                          htmlFor="limit-select"
-                          className="text-sm text-gray-600 dark:text-gray-400"
-                        >
+                        <label htmlFor="limit-select" className="text-sm text-muted-foreground">
                           {intl.formatMessage({ id: "teams.perPage" })}
                         </label>
                         <select
                           id="limit-select"
                           value={limit}
                           onChange={(e) => handleLimitChange(Number(e.target.value))}
-                          className="rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 px-2 py-1 text-sm"
+                          className="rounded-md border border-border bg-background px-2 py-1 text-sm"
                         >
                           <option value={10}>10</option>
                           <option value={25}>25</option>
diff --git a/src/pages/Users.tsx b/src/pages/Users.tsx
index efe41f9..8af984a 100644
--- a/src/pages/Users.tsx
+++ b/src/pages/Users.tsx
@@ -295,7 +295,7 @@ export function Users() {
                           id="users-limit-select"
                           value={limit}
                           onChange={(event) => handleLimitChange(Number(event.target.value))}
-                          className="rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 px-2 py-1 text-sm"
+                          className="rounded-md border border-border bg-background px-2 py-1 text-sm"
                         >
                           <option value={10}>10</option>
                           <option value={25}>25</option>

From 91539cfd17cff1ee68c9db31cff1acef3ab00fe9 Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Wed, 19 Aug 2026 03:19:37 -0700
Subject: [PATCH 4/4] Align Virtual Servers layout with the other components
 pages (#48)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Grid becomes `grid-cols-1 / lg:2 / 2xl:3`. `col-span-full` and
  `sortServersForLayout` both go — cards are uniform now, so empty
  servers no longer need sorting to the end to keep a full-width row from
  splitting the grid. Servers render in API order.
- Page shell moves from `space-y-9` to a `mb-6` heading, and the loading
  branch stops early-returning, so the title survives the spinner.
- Cards drop `min-h-29` / `min-h-35` and their `justify-*` pairs.
- New `--server-icon-bg` token joins `--tool-icon-bg` and
  `--prompt-icon-bg`; the card status dot stops hardcoding emerald/red
  and picks up `--tool-status-*`.
- `ConnectSourceCard` adopts `AddToolsCard`'s add-icon token, hover and
  description leading.

2896 tests pass; tsc, eslint, prettier and build are clean. The e2e suite
was not run — no local Chromium.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 e2e/virtual-servers.spec.ts                   | 31 +++++----
 src/components/gateways/ConnectSourceCard.tsx |  8 +--
 src/components/gateways/GatewayCards.test.tsx |  8 +--
 .../gateways/VirtualServerCard.test.tsx       | 13 ++--
 src/components/gateways/VirtualServerCard.tsx | 28 ++------
 src/index.css                                 |  5 ++
 src/pages/Gateways.test.tsx                   | 18 ++---
 src/pages/Gateways.tsx                        | 69 ++++++++-----------
 8 files changed, 82 insertions(+), 98 deletions(-)

diff --git a/e2e/virtual-servers.spec.ts b/e2e/virtual-servers.spec.ts
index 9fb903a..e794b03 100644
--- a/e2e/virtual-servers.spec.ts
+++ b/e2e/virtual-servers.spec.ts
@@ -367,7 +367,7 @@ test.describe("Virtual Servers page", () => {
     await expect(page.getByText("testVS")).toBeVisible();
 
     const card = page.getByTestId("virtual-server-card").filter({ hasText: "testVS" });
-    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-emerald-500/);
+    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-tool-status-active/);
     await expect(card.getByLabel("Enabled")).toBeVisible();
 
     await expect(card.getByTestId("tool-count")).toHaveText("2");
@@ -435,7 +435,7 @@ test.describe("Virtual Servers page", () => {
     await page.waitForLoadState("networkidle");
 
     const card = page.getByTestId("virtual-server-card").filter({ hasText: "testVS" });
-    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-red-500/);
+    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-tool-status-inactive/);
     await expect(card.getByLabel("Disabled")).toBeVisible();
 
     await page.getByRole("button", { name: "Actions for testVS" }).click();
@@ -443,7 +443,7 @@ test.describe("Virtual Servers page", () => {
 
     await expect.poll(() => stateRequestCount).toBe(1);
     await expect(page.getByRole("dialog")).toHaveCount(0);
-    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-emerald-500/);
+    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-tool-status-active/);
     await expect(card.getByLabel("Enabled")).toBeVisible();
     await expect(
       page.locator("[data-sonner-toast]").filter({ hasText: "testVS activated." }),
@@ -485,7 +485,7 @@ test.describe("Virtual Servers page", () => {
     await dialog.getByRole("button", { name: "Cancel" }).click();
     await expect(dialog).toHaveCount(0);
     expect(stateRequestCount).toBe(0);
-    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-emerald-500/);
+    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-tool-status-active/);
 
     await page.getByRole("button", { name: "Actions for testVS" }).click();
     await page.getByRole("menuitem", { name: "Deactivate" }).click();
@@ -496,7 +496,7 @@ test.describe("Virtual Servers page", () => {
 
     await expect.poll(() => stateRequestCount).toBe(1);
     await expect(dialog).toHaveCount(0);
-    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-red-500/);
+    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-tool-status-inactive/);
     await expect(card.getByLabel("Disabled")).toBeVisible();
     await expect(
       page.locator("[data-sonner-toast]").filter({ hasText: "testVS deactivated." }),
@@ -1116,7 +1116,7 @@ test.describe("Virtual Servers page", () => {
     );
   });
 
-  test("disables the Upload action button on virtual server cards", async ({ page }) => {
+  test("shows only the actions menu in the virtual server card header", async ({ page }) => {
     await page.route("**/servers?*", async (route) => {
       await route.fulfill({
         status: 200,
@@ -1128,7 +1128,8 @@ test.describe("Virtual Servers page", () => {
     await page.goto(APP.GATEWAYS);
     await page.waitForLoadState("networkidle");
 
-    await expect(page.getByRole("button", { name: /Open testVS \(coming soon\)/ })).toBeDisabled();
+    await expect(page.getByRole("button", { name: /Open testVS \(coming soon\)/ })).toHaveCount(0);
+    await expect(page.getByRole("button", { name: "Actions for testVS" })).toBeVisible();
   });
 
   test("navigates to create server UI from the create server card", async ({ page }) => {
@@ -1183,7 +1184,7 @@ test.describe("Virtual Servers page", () => {
 
     const card = page.getByTestId("virtual-server-card").filter({ hasText: "testVS" });
 
-    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-red-500/);
+    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-tool-status-inactive/);
     await expect(card.getByRole("img", { name: "Disabled" })).toBeVisible();
 
     await expect(card.getByText("disabled")).toBeVisible();
@@ -1220,7 +1221,7 @@ test.describe("Virtual Servers page", () => {
     await expect(card2.getByText("private")).toBeVisible();
   });
 
-  test("places empty virtual servers after servers with components", async ({ page }) => {
+  test("renders virtual servers in the order the API returned them", async ({ page }) => {
     const emptyServer = {
       ...MOCK_VIRTUAL_SERVER,
       id: "empty-server-id",
@@ -1244,13 +1245,15 @@ test.describe("Virtual Servers page", () => {
     await page.goto(APP.GATEWAYS);
     await page.waitForLoadState("networkidle");
 
+    // Cards are uniform now, so empty servers are no longer sorted to the end
+    // to keep a full-width row from splitting the grid.
     const cards = page.getByTestId("virtual-server-card");
     await expect(cards).toHaveCount(2);
-    await expect(cards.nth(0)).toHaveAttribute("data-server-name", "testVS");
-    await expect(cards.nth(1)).toHaveAttribute("data-server-name", "peach-thistle-shark");
-    await expect(cards.nth(1)).toHaveClass(/col-span-full/);
+    await expect(cards.nth(0)).toHaveAttribute("data-server-name", "peach-thistle-shark");
+    await expect(cards.nth(1)).toHaveAttribute("data-server-name", "testVS");
+    await expect(cards.nth(0)).not.toHaveClass(/col-span-full/);
     await expect(
-      cards.nth(1).getByRole("button", { name: "Add sources and components" }),
+      cards.nth(0).getByRole("button", { name: "Add sources and components" }),
     ).toBeVisible();
   });
 
@@ -1322,7 +1325,7 @@ test.describe("Virtual Servers page", () => {
 
     const card = page.getByTestId("virtual-server-card").filter({ hasText: "testVS" });
 
-    await expect(card).toHaveClass(/col-span-full/);
+    await expect(card).not.toHaveClass(/col-span-full/);
     await expect(card.getByRole("button", { name: "Add sources and components" })).toBeVisible();
     await expect(card.getByTestId("tool-count")).toHaveCount(0);
     await expect(card.getByTestId("resource-count")).toHaveCount(0);
diff --git a/src/components/gateways/ConnectSourceCard.tsx b/src/components/gateways/ConnectSourceCard.tsx
index 73f3ee9..a95fdfb 100644
--- a/src/components/gateways/ConnectSourceCard.tsx
+++ b/src/components/gateways/ConnectSourceCard.tsx
@@ -10,7 +10,7 @@ export function ConnectSourceCard({ onAction }: { onAction: () => void }) {
       size="sm"
       role="button"
       tabIndex={0}
-      className="min-h-35 cursor-pointer justify-center transition-colors hover:bg-muted/40"
+      className="cursor-pointer transition-opacity hover:opacity-90"
       onClick={onAction}
       onKeyDown={(event) => {
         if (event.key === "Enter" || event.key === " ") {
@@ -21,14 +21,14 @@ export function ConnectSourceCard({ onAction }: { onAction: () => void }) {
     >
       <CardHeader className="gap-3">
         <div className="flex items-center gap-3">
-          <span className="flex size-6 items-center justify-center rounded-sm bg-primary text-primary-foreground">
-            <Plus className="size-4" />
+          <span className="flex size-6 shrink-0 items-center justify-center rounded bg-tool-add-icon-bg text-tool-add-icon-fg shadow-sm">
+            <Plus className="size-3.5" />
           </span>
           <CardTitle>{intl.formatMessage({ id: "gateways.createServer.card.title" })}</CardTitle>
         </div>
       </CardHeader>
       <CardContent>
-        <CardDescription className="text-[13px] leading-4">
+        <CardDescription className="leading-relaxed">
           {intl.formatMessage({ id: "gateways.createServer.card.description" })}
         </CardDescription>
       </CardContent>
diff --git a/src/components/gateways/GatewayCards.test.tsx b/src/components/gateways/GatewayCards.test.tsx
index 0d6b25f..a09de87 100644
--- a/src/components/gateways/GatewayCards.test.tsx
+++ b/src/components/gateways/GatewayCards.test.tsx
@@ -92,14 +92,14 @@ describe("VirtualServerCard", () => {
     expect(screen.getByText("My Test Server")).toBeTruthy();
   });
 
-  it("shows green status indicator for enabled server", () => {
+  it("shows an active status indicator for enabled server", () => {
     renderWithProviders(<VirtualServerCard server={mockServer} onViewDetails={vi.fn()} />);
-    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-emerald-500");
+    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-tool-status-active");
   });
 
-  it("shows red status indicator for disabled server", () => {
+  it("shows an inactive status indicator for disabled server", () => {
     renderWithProviders(<VirtualServerCard server={emptyServer} onViewDetails={vi.fn()} />);
-    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-red-500");
+    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-tool-status-inactive");
   });
 
   it("calls onViewDetails when card is clicked", () => {
diff --git a/src/components/gateways/VirtualServerCard.test.tsx b/src/components/gateways/VirtualServerCard.test.tsx
index 000368d..6419209 100644
--- a/src/components/gateways/VirtualServerCard.test.tsx
+++ b/src/components/gateways/VirtualServerCard.test.tsx
@@ -77,19 +77,19 @@ describe("VirtualServerCard", () => {
     expect(onViewDetails).toHaveBeenCalledWith(expect.objectContaining({ id: "vs-1" }));
   });
 
-  it("shows a green enabled indicator for enabled server", () => {
+  it("shows an active enabled indicator for enabled server", () => {
     renderWithProviders(
       <VirtualServerCard server={makeServer({ enabled: true })} onViewDetails={vi.fn()} />,
     );
-    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-emerald-500");
+    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-tool-status-active");
     expect(screen.getByRole("img", { name: "Enabled" })).toBeTruthy();
   });
 
-  it("shows a red disabled indicator for disabled server", () => {
+  it("shows an inactive disabled indicator for disabled server", () => {
     renderWithProviders(
       <VirtualServerCard server={makeServer({ enabled: false })} onViewDetails={vi.fn()} />,
     );
-    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-red-500");
+    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-tool-status-inactive");
     expect(screen.getByRole("img", { name: "Disabled" })).toBeTruthy();
   });
 
@@ -231,13 +231,14 @@ describe("VirtualServerCard", () => {
     expect(document.querySelector(".custom-class")).toBeTruthy();
   });
 
-  it("shows upload button for non-empty server", () => {
+  it("shows only the actions menu in the card header", () => {
     renderWithProviders(
       <VirtualServerCard
         server={makeServer({ associatedTools: ["t1"] })}
         onViewDetails={vi.fn()}
       />,
     );
-    expect(screen.getByRole("button", { name: /Open.*coming soon/i })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: /Open.*coming soon/i })).toBeNull();
+    expect(screen.getByRole("button", { name: /Actions for/i })).toBeTruthy();
   });
 });
diff --git a/src/components/gateways/VirtualServerCard.tsx b/src/components/gateways/VirtualServerCard.tsx
index d101a48..e3bb937 100644
--- a/src/components/gateways/VirtualServerCard.tsx
+++ b/src/components/gateways/VirtualServerCard.tsx
@@ -16,7 +16,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import type { VirtualServer } from "@/types/server";
-import { Box, EllipsisVertical, MessageSquareCode, Plus, Upload, Wrench } from "lucide-react";
+import { Box, EllipsisVertical, MessageSquareCode, Plus, Wrench } from "lucide-react";
 import { useIntl } from "react-intl";
 
 export function VirtualServerCard({
@@ -52,26 +52,22 @@ export function VirtualServerCard({
   return (
     <Card
       size="sm"
-      className={cn(
-        isEmptyComposition ? "min-h-29 justify-center" : "min-h-35 justify-between",
-        "cursor-pointer transition-colors hover:bg-accent/50",
-        className,
-      )}
+      className={cn("cursor-pointer transition-colors hover:bg-accent/50", className)}
       data-testid="virtual-server-card"
       data-server-name={server.name}
       onClick={() => onViewDetails(server)}
     >
       <CardHeader className="gap-3">
         <div className="flex items-center gap-3">
-          <span className="flex size-6 shrink-0 items-center justify-center rounded-sm bg-primary text-primary-foreground">
-            <MCPIcon className="size-4 [&_path]:fill-current" />
+          <span className="flex size-6 shrink-0 items-center justify-center rounded bg-server-icon-bg text-black">
+            <MCPIcon className="size-3.5 [&_path]:fill-current" />
           </span>
           <div className="flex min-w-0 flex-1 items-center gap-2">
-            <CardTitle className="truncate">{server.name}</CardTitle>
+            <CardTitle className="truncate font-semibold">{server.name}</CardTitle>
             <span
               className={cn(
-                "size-1.5 rounded-full",
-                server.enabled ? "bg-emerald-500" : "bg-red-500",
+                "size-1.5 shrink-0 rounded-full",
+                server.enabled ? "bg-tool-status-active" : "bg-tool-status-inactive",
               )}
               data-testid="status-indicator"
               role="img"
@@ -81,16 +77,6 @@ export function VirtualServerCard({
             />
           </div>
           <div className="flex shrink-0 items-center gap-1">
-            {!isEmptyComposition && (
-              <Button
-                variant="ghost"
-                size="icon-xs"
-                aria-label={`Open ${server.name} (coming soon)`}
-                disabled
-              >
-                <Upload className="size-4" />
-              </Button>
-            )}
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
diff --git a/src/index.css b/src/index.css
index 44f67d8..d9e6d6a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -63,6 +63,7 @@
   /* Tool-specific semantic tokens */
   --color-tool-icon-bg: var(--tool-icon-bg);
   --color-prompt-icon-bg: var(--prompt-icon-bg);
+  --color-server-icon-bg: var(--server-icon-bg);
   --color-tool-status-active: var(--tool-status-active);
   --color-tool-status-inactive: var(--tool-status-inactive);
   --color-tool-badge-bg: var(--tool-badge-bg);
@@ -129,6 +130,10 @@
   --destructive: oklch(0.577 0.245 27.325);
   --tool-icon-bg: var(--color-fuchsia-400);
   --prompt-icon-bg: #6fff9f;
+  /* Brand cyan. Like the two above it this is a chip *background* carrying a
+     black glyph, so it needs no `.dark` override — only `--status-icon`, which
+     paints a foreground, has to step down on white. */
+  --server-icon-bg: #70f9ff;
   /* emerald-400 falls under 3:1 on white; .dark restores it */
   --tool-status-active: var(--color-emerald-600);
   --tool-status-inactive: var(--color-neutral-500);
diff --git a/src/pages/Gateways.test.tsx b/src/pages/Gateways.test.tsx
index 2d78e53..7fd60de 100644
--- a/src/pages/Gateways.test.tsx
+++ b/src/pages/Gateways.test.tsx
@@ -481,7 +481,7 @@ describe("Gateways", () => {
       expect(toast.error).toHaveBeenCalledWith("Failed to activate virtual server.");
     });
     expect(setData).not.toHaveBeenCalled();
-    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-red-500");
+    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-tool-status-inactive");
   });
 
   it("shows API error detail when activation fails", async () => {
@@ -502,7 +502,7 @@ describe("Gateways", () => {
     });
   });
 
-  it("renders empty virtual servers as full-width add-components rows", () => {
+  it("renders empty virtual servers as ordinary grid cards with an add-components row", () => {
     const mockServer = makeServer({
       id: "gateway-empty",
       name: "peach-thistle-shark",
@@ -522,14 +522,14 @@ describe("Gateways", () => {
 
     renderWithProviders(<Gateways />);
 
-    expect(screen.getByTestId("virtual-server-card")).toHaveClass("col-span-full");
+    expect(screen.getByTestId("virtual-server-card")).not.toHaveClass("col-span-full");
     expect(screen.getByText("peach-thistle-shark")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Add sources and components" })).toBeInTheDocument();
     expect(screen.queryByTestId("tool-count")).not.toBeInTheDocument();
     expect(screen.queryByTestId("last-updated")).not.toBeInTheDocument();
   });
 
-  it("renders empty virtual servers after servers with components", () => {
+  it("renders virtual servers in the order the API returned them", () => {
     const emptyServer = makeServer({
       id: "gateway-empty",
       name: "peach-thistle-shark",
@@ -556,11 +556,13 @@ describe("Gateways", () => {
 
     renderWithProviders(<Gateways />);
 
+    // Cards are uniform now, so empty servers are no longer sorted to the end
+    // to keep a full-width row from splitting the grid.
     const renderedCards = screen.getAllByTestId("virtual-server-card");
     expect(renderedCards).toHaveLength(2);
-    expect(renderedCards[0]).toHaveAttribute("data-server-name", "GH repo tasks");
-    expect(renderedCards[1]).toHaveAttribute("data-server-name", "peach-thistle-shark");
-    expect(renderedCards[1]).toHaveClass("col-span-full");
+    expect(renderedCards[0]).toHaveAttribute("data-server-name", "peach-thistle-shark");
+    expect(renderedCards[1]).toHaveAttribute("data-server-name", "GH repo tasks");
+    expect(renderedCards[0]).not.toHaveClass("col-span-full");
   });
 
   it("navigates to the create server UI when the create server card is clicked", async () => {
@@ -1161,7 +1163,7 @@ describe("Gateways", () => {
     expect(screen.getByText("Sparse server")).toBeInTheDocument();
     const card = screen.getByTestId("virtual-server-card");
     expect(card).toBeInTheDocument();
-    expect(card).toHaveClass("col-span-full");
+    expect(card).not.toHaveClass("col-span-full");
     expect(screen.getByRole("button", { name: "Add sources and components" })).toBeInTheDocument();
     expect(card.querySelector('[data-testid="tool-count"]')).not.toBeInTheDocument();
     expect(card.querySelector('[data-testid="resource-count"]')).not.toBeInTheDocument();
diff --git a/src/pages/Gateways.tsx b/src/pages/Gateways.tsx
index 127a442..930f821 100644
--- a/src/pages/Gateways.tsx
+++ b/src/pages/Gateways.tsx
@@ -5,7 +5,6 @@ import { toast } from "sonner";
 import { ConnectSourceCard } from "@/components/gateways/ConnectSourceCard";
 import { VirtualServerCard } from "@/components/gateways/VirtualServerCard";
 import { VirtualServerDetailsPanel } from "@/components/gateways/VirtualServerDetailsPanel";
-import { hasVirtualServerComponents } from "@/components/gateways/utils";
 import { ConfirmDialog } from "@/components/servers/ConfirmDialog";
 import { Loading } from "@/components/ui/loading";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
@@ -19,7 +18,6 @@ import { useAuth } from "@/auth/useAuth";
 import { useQuery } from "@/hooks/useQuery";
 import { useRouter } from "@/router";
 import type { VirtualServer, VirtualServersResponse } from "@/types/server";
-import { cn } from "@/lib/utils";
 import { extractApiErrorDetail, sanitizeError } from "@/utils/errors";
 
 const DEFAULT_PAGE_SIZE = 12;
@@ -27,12 +25,6 @@ const SERVERS_QUERY_PATH = `/servers?limit=${DEFAULT_PAGE_SIZE}&include_inactive
 const CREATE_SERVER_PATH = "/app/gateways/create-server";
 const EDIT_SERVER_ID_QUERY_PARAM = "editServerId";
 
-function sortServersForLayout(servers: VirtualServer[]): VirtualServer[] {
-  return [...servers].sort(
-    (a, b) => Number(hasVirtualServerComponents(b)) - Number(hasVirtualServerComponents(a)),
-  );
-}
-
 export function Gateways() {
   const intl = useIntl();
   const { navigate, path } = useRouter();
@@ -57,7 +49,6 @@ export function Gateways() {
     () => (data?.servers ?? []).filter((server) => !deletedServerIds.has(server.id)),
     [data?.servers, deletedServerIds],
   );
-  const layoutServers = useMemo(() => sortServersForLayout(servers), [servers]);
   const selectedSearchServerId = useMemo(() => {
     const queryString = path.split("?")[1] ?? "";
     return new URLSearchParams(queryString).get("selected")?.trim() || null;
@@ -227,25 +218,7 @@ export function Gateways() {
     setIsDetailsPanelOpen(true);
   }, [selectedSearchServerId, servers]);
 
-  if (isLoading) {
-    return (
-      <div className="p-6">
-        <div
-          role="status"
-          aria-live="polite"
-          aria-busy="true"
-          className="flex items-center justify-center p-12"
-        >
-          <Loading />
-          <span className="sr-only">
-            {intl.formatMessage({ id: "gateways.loadingVirtualServers" })}
-          </span>
-        </div>
-      </div>
-    );
-  }
-
-  if (error && servers.length === 0) {
+  if (error && !isLoading && servers.length === 0) {
     return (
       <div className="p-6">
         <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-4" role="alert">
@@ -259,8 +232,8 @@ export function Gateways() {
   }
 
   return (
-    <div className="space-y-9 p-6">
-      <div className="flex items-center gap-2">
+    <div className="p-6">
+      <div className="mb-6 flex items-center gap-2">
         <h1 ref={headingRef} tabIndex={-1} className="text-base font-semibold text-foreground">
           {intl.formatMessage({ id: "gateways.title" })}
         </h1>
@@ -279,8 +252,25 @@ export function Gateways() {
         </TooltipProvider>
       </div>
 
+      {isLoading && (
+        <div
+          role="status"
+          aria-live="polite"
+          aria-busy="true"
+          className="flex items-center justify-center p-12"
+        >
+          <Loading />
+          <span className="sr-only">
+            {intl.formatMessage({ id: "gateways.loadingVirtualServers" })}
+          </span>
+        </div>
+      )}
+
       {error && (
-        <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-4" role="alert">
+        <div
+          className="mb-6 rounded-lg border border-destructive/30 bg-destructive/10 p-4"
+          role="alert"
+        >
           <h2 className="font-semibold text-destructive">
             {intl.formatMessage({ id: "gateways.errorLoadingVirtualServers" })}
           </h2>
@@ -288,12 +278,10 @@ export function Gateways() {
         </div>
       )}
 
-      <div className="grid gap-6 lg:grid-cols-2">
-        {canCreateServer && <ConnectSourceCard onAction={() => navigate(CREATE_SERVER_PATH)} />}
-        {layoutServers.map((server) => {
-          const hasComponents = hasVirtualServerComponents(server);
-
-          return (
+      {!isLoading && (
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 2xl:grid-cols-3">
+          {canCreateServer && <ConnectSourceCard onAction={() => navigate(CREATE_SERVER_PATH)} />}
+          {servers.map((server) => (
             <VirtualServerCard
               key={server.id}
               server={server}
@@ -310,11 +298,10 @@ export function Gateways() {
               deleteDisabled={
                 isTogglePending || (isDeletePending && pendingDeleteServerId !== server.id)
               }
-              className={cn(!hasComponents && "col-span-full")}
             />
-          );
-        })}
-      </div>
+          ))}
+        </div>
+      )}
 
       {detailsServerId && (
         <VirtualServerDetailsPanelContainer