diff --git a/e2e/quick-add-server.spec.ts b/e2e/quick-add-server.spec.ts
new file mode 100644
index 0000000..aa4d5b6
--- /dev/null
+++ b/e2e/quick-add-server.spec.ts
@@ -0,0 +1,136 @@
+import { test, expect } from "./fixtures/api-mock";
+import { APP } from "./utils/paths";
+import type { CatalogServer } from "../src/generated/types";
+
+const DEEPWIKI: CatalogServer = {
+  id: "deepwiki",
+  name: "DeepWiki",
+  category: "RAG-as-a-Service",
+  url: "https://mcp.deepwiki.com/mcp",
+  auth_type: "Open",
+  provider: "Devin",
+  description: "Knowledge base with deep learning integration",
+  transport: null,
+  logo_url: "/static/catalog-icons/deepwiki.png",
+};
+
+const EXA_SEARCH: CatalogServer = {
+  id: "exa-search",
+  name: "Exa Search",
+  category: "RAG-as-a-Service",
+  url: "https://mcp.exa.ai/mcp",
+  auth_type: "Open",
+  provider: "Exa",
+  description: "AI-powered search engine for retrieving web content",
+  transport: "SSE",
+};
+
+async function mockCatalog(page: import("@playwright/test").Page, servers: CatalogServer[]) {
+  await page.route("**/v1/catalog*", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        servers,
+        total: servers.length,
+        categories: [],
+        auth_types: [],
+        providers: [],
+      }),
+    });
+  });
+}
+
+async function openQuickAddDialog(page: import("@playwright/test").Page) {
+  await page.route("**/gateways?*", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ gateways: [], nextCursor: null }),
+    });
+  });
+
+  await page.goto(APP.SERVERS);
+  await page.waitForLoadState("networkidle");
+
+  await page.getByRole("button", { name: /Connect/i }).click();
+  await page.getByRole("button", { name: /mcp server catalog/i }).click();
+  await expect(
+    page.getByRole("dialog").getByRole("heading", { name: "Connect MCP server" }),
+  ).toBeVisible();
+}
+
+test.describe("Quick Add server dialog", () => {
+  test.beforeEach(async ({ page, apiMock }) => {
+    await apiMock.mockSession();
+    await apiMock.mockPermissions();
+
+    await page.addInitScript(() => {
+      sessionStorage.setItem("mcpgateway_token", "mock-token-12345");
+    });
+  });
+
+  test("pre-fills the connect form from a picked catalog entry and submits a new gateway", async ({
+    page,
+  }) => {
+    await mockCatalog(page, [DEEPWIKI, EXA_SEARCH]);
+    await openQuickAddDialog(page);
+
+    // Only the curated entries render, in the configured order.
+    await expect(page.getByRole("radio", { name: /DeepWiki/i })).toBeVisible();
+    await expect(page.getByRole("radio", { name: /Exa Search/i })).toBeVisible();
+
+    const continueButton = page.getByRole("button", { name: "Continue" });
+    await expect(continueButton).toBeDisabled();
+
+    // The radio input is visually hidden (sr-only); a real user clicks the visible
+    // card, which the associated <label> forwards to the input.
+    await page.getByText("DeepWiki", { exact: true }).click();
+    await expect(page.getByRole("radio", { name: /DeepWiki/i })).toBeChecked();
+    await expect(continueButton).toBeEnabled();
+    await continueButton.click();
+
+    await expect(page.getByRole("dialog")).not.toBeVisible();
+    await expect(page.getByLabel(/Name/i)).toHaveValue("DeepWiki");
+    await expect(page.getByLabel(/URL/i)).toHaveValue("https://mcp.deepwiki.com/mcp");
+    await expect(page.getByPlaceholder(/Add an optional description/i)).toHaveValue(
+      "Knowledge base with deep learning integration",
+    );
+    await expect(page.getByRole("radio", { name: "Streamable HTTP" })).toBeChecked();
+
+    const createRequest = page.waitForRequest(
+      (request) => request.url().includes("/gateways") && request.method() === "POST",
+    );
+    await page.route(
+      (url) => url.pathname.endsWith("/gateways") || url.pathname.endsWith("/api/gateways"),
+      async (route) => {
+        if (route.request().method() !== "POST") return route.fallback();
+        await route.fulfill({
+          status: 200,
+          contentType: "application/json",
+          body: JSON.stringify({ id: "new-gateway-1", name: "DeepWiki" }),
+        });
+      },
+    );
+
+    await page.getByRole("button", { name: /Connect server/i }).click();
+
+    const request = await createRequest;
+    const body = request.postDataJSON() as { name?: string; url?: string; transport?: string };
+    expect(body.name).toBe("DeepWiki");
+    expect(body.url).toBe("https://mcp.deepwiki.com/mcp");
+    expect(body.transport).toBe("STREAMABLEHTTP");
+  });
+
+  test("Browse full catalog closes the connect form and navigates to the full catalog", async ({
+    page,
+  }) => {
+    await mockCatalog(page, [DEEPWIKI]);
+    await openQuickAddDialog(page);
+
+    await page.getByRole("button", { name: "server catalog" }).click();
+
+    await expect(page).toHaveURL(new RegExp(APP.SERVER_CATALOG));
+    await expect(page.getByRole("dialog")).not.toBeVisible();
+  });
+});
diff --git a/src/components/mcp-servers/MCPServerForm.test.tsx b/src/components/mcp-servers/MCPServerForm.test.tsx
index 4ed0017..c9cd57f 100644
--- a/src/components/mcp-servers/MCPServerForm.test.tsx
+++ b/src/components/mcp-servers/MCPServerForm.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach, beforeAll, afterAll, afterEach } from "vitest";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { render, screen, fireEvent, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { http, HttpResponse } from "msw";
 import { setupServer } from "msw/node";
@@ -7,24 +7,28 @@ import { MCPServerForm } from "./MCPServerForm";
 import { RouterProvider } from "@/router";
 import { I18nProvider } from "@/i18n";
 import { AuthProvider } from "@/auth/AuthContext";
+import { QUICK_ADD_CATALOG_IDS } from "@/config/quickAddServers";
 
 let mockHookActive = false;
 let mockHookReturnValue: Record<string, unknown> | null = null;
 
 vi.mock("@/hooks/useMCPServerForm", async (importOriginal) => {
   const actual = (await importOriginal()) as {
-    useMCPServerForm: (serverId?: string) => Record<string, unknown>;
+    useMCPServerForm: (
+      serverId?: string,
+      initialValues?: Record<string, unknown>,
+    ) => Record<string, unknown>;
   };
   return {
     ...actual,
-    useMCPServerForm: (serverId?: string) => {
+    useMCPServerForm: (serverId?: string, initialValues?: Record<string, unknown>) => {
       if (mockHookActive) {
         return {
-          ...actual.useMCPServerForm(serverId),
+          ...actual.useMCPServerForm(serverId, initialValues),
           ...mockHookReturnValue,
         };
       }
-      return actual.useMCPServerForm(serverId);
+      return actual.useMCPServerForm(serverId, initialValues);
     },
   };
 });
@@ -65,6 +69,37 @@ const server = setupServer(
       teams: [{ id: "team-personal", name: "Personal team", is_personal: true }],
     });
   }),
+  // Quick Add dialog's catalog fetch — one curated entry is enough to exercise selection/prefill.
+  http.get("/api/v1/catalog", () => {
+    return HttpResponse.json({
+      servers: [
+        {
+          id: QUICK_ADD_CATALOG_IDS[0],
+          name: "DeepWiki",
+          category: "RAG-as-a-Service",
+          url: "https://mcp.deepwiki.com/mcp",
+          auth_type: "Open",
+          provider: "Devin",
+          description: "Knowledge base with deep learning integration",
+          transport: null,
+        },
+        {
+          id: QUICK_ADD_CATALOG_IDS[1],
+          name: "Exa Search",
+          category: "RAG-as-a-Service",
+          url: "https://mcp.exa.ai/sse",
+          auth_type: "Open",
+          provider: "Exa",
+          description: "AI-powered search engine for retrieving web content",
+          transport: "SSE",
+        },
+      ],
+      total: 2,
+      categories: [],
+      auth_types: [],
+      providers: [],
+    });
+  }),
 );
 
 beforeAll(() => server.listen({ onUnhandledRequest: "warn" }));
@@ -128,13 +163,6 @@ describe("MCPServerForm", () => {
       renderWithRouter(<MCPServerForm isOpen={true} onToggle={vi.fn()} serverId="edit-123" />);
       expect(screen.getByRole("button", { name: /Save changes/i })).toBeInTheDocument();
     });
-
-    it("should render link to server catalog", () => {
-      renderWithRouter(<MCPServerForm {...defaultProps} />);
-
-      const catalogLink = screen.getByRole("button", { name: /mcp server catalog/i });
-      expect(catalogLink).toBeInTheDocument();
-    });
   });
 
   describe("Error States", () => {
@@ -612,23 +640,6 @@ describe("MCPServerForm", () => {
     });
   });
 
-  describe("Server Catalog Navigation", () => {
-    it("should navigate to server catalog when link is clicked", async () => {
-      const user = userEvent.setup();
-      const onToggle = vi.fn();
-      renderWithRouter(<MCPServerForm isOpen={true} onToggle={onToggle} />);
-
-      const catalogLink = screen.getByRole("button", { name: /mcp server catalog/i });
-      await user.click(catalogLink);
-
-      expect(onToggle).toHaveBeenCalledTimes(1);
-      // Verify navigation by checking window location
-      await waitFor(() => {
-        expect(window.location.pathname).toBe("/app/server-catalog");
-      });
-    });
-  });
-
   describe("Accessibility", () => {
     it("should have proper ARIA labels for transport type radio group", () => {
       renderWithRouter(<MCPServerForm {...defaultProps} />);
@@ -1217,4 +1228,63 @@ describe("MCPServerForm", () => {
       });
     });
   });
+
+  describe("Quick Add", () => {
+    it("navigates directly to the full catalog in edit mode instead of opening quick add", async () => {
+      const user = userEvent.setup();
+      const onToggleSpy = vi.fn();
+      renderWithRouter(<MCPServerForm isOpen={true} onToggle={onToggleSpy} serverId="edit-123" />);
+
+      await user.click(screen.getByRole("button", { name: /mcp server catalog/i }));
+
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+      expect(onToggleSpy).toHaveBeenCalled();
+      expect(window.location.pathname).toBe("/app/server-catalog");
+    });
+
+    it("opens the dialog from the catalog link and pre-fills the form on selection", async () => {
+      const user = userEvent.setup();
+      renderWithRouter(<MCPServerForm {...defaultProps} />);
+
+      await user.click(screen.getByRole("button", { name: /mcp server catalog/i }));
+      const dialog = screen.getByRole("dialog");
+      expect(
+        within(dialog).getByRole("heading", { name: "Connect MCP server" }),
+      ).toBeInTheDocument();
+
+      await user.click(screen.getByRole("radio", { name: /DeepWiki/i }));
+      await user.click(screen.getByRole("button", { name: "Continue" }));
+
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+      expect(screen.getByLabelText(/Name/i)).toHaveValue("DeepWiki");
+      expect(screen.getByLabelText(/URL/i)).toHaveValue("https://mcp.deepwiki.com/mcp");
+      expect(screen.getByPlaceholderText(/Add an optional description/i)).toHaveValue(
+        "Knowledge base with deep learning integration",
+      );
+      expect(screen.getByRole("radio", { name: "Streamable HTTP" })).toBeChecked();
+    });
+
+    it("maps a catalog entry's declared SSE transport onto the transport radio", async () => {
+      const user = userEvent.setup();
+      renderWithRouter(<MCPServerForm {...defaultProps} />);
+
+      await user.click(screen.getByRole("button", { name: /mcp server catalog/i }));
+      await user.click(screen.getByRole("radio", { name: /Exa Search/i }));
+      await user.click(screen.getByRole("button", { name: "Continue" }));
+
+      expect(screen.getByRole("radio", { name: "SSE" })).toBeChecked();
+    });
+
+    it("navigates to the full catalog and closes the form when Browse full catalog is clicked", async () => {
+      const user = userEvent.setup();
+      const onToggleSpy = vi.fn();
+      renderWithRouter(<MCPServerForm isOpen={true} onToggle={onToggleSpy} />);
+
+      await user.click(screen.getByRole("button", { name: /mcp server catalog/i }));
+      await user.click(screen.getByRole("button", { name: "server catalog" }));
+
+      expect(onToggleSpy).toHaveBeenCalled();
+      expect(window.location.pathname).toBe("/app/server-catalog");
+    });
+  });
 });
diff --git a/src/components/mcp-servers/MCPServerForm.tsx b/src/components/mcp-servers/MCPServerForm.tsx
index cb329c3..501002c 100644
--- a/src/components/mcp-servers/MCPServerForm.tsx
+++ b/src/components/mcp-servers/MCPServerForm.tsx
@@ -7,10 +7,22 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { MCPIcon } from "@/components/icons/MCPIcon";
 import { AdvancedSettings } from "@/components/mcp-servers/AdvancedSettings";
+import { QuickAddServerDialog } from "@/components/mcp-servers/QuickAddServerDialog";
 import { ExposeComponentsForm } from "@/components/gateways/ExposeComponentsForm";
 import { useRouter } from "@/router";
-import { useMCPServerForm, type TransportType } from "@/hooks/useMCPServerForm";
+import {
+  useMCPServerForm,
+  type MCPServerFormInitialValues,
+  type TransportType,
+} from "@/hooks/useMCPServerForm";
 import { STATUS_ICON } from "@/lib/status";
+import type { CatalogServer } from "@/generated/types";
+
+// QuickAddServerDialog only surfaces entries with SSE, STREAMABLEHTTP, or no
+// transport set, so anything else here defaults to STREAMABLEHTTP.
+function mapCatalogTransport(transport: string | null | undefined): TransportType {
+  return transport === "SSE" ? "SSE" : "STREAMABLEHTTP";
+}
 
 interface MCPServerFormProps {
   isOpen: boolean;
@@ -28,6 +40,8 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
   const intl = useIntl();
   const { navigate } = useRouter();
   const [createdGateway, setCreatedGateway] = useState<CreatedGatewayInfo | null>(null);
+  const [quickAddOpen, setQuickAddOpen] = useState(false);
+  const [prefill, setPrefill] = useState<MCPServerFormInitialValues | undefined>();
   const {
     fetchError,
     name,
@@ -96,7 +110,7 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
     setQueryParamName,
     queryParamApiKey,
     setQueryParamApiKey,
-  } = useMCPServerForm(serverId);
+  } = useMCPServerForm(serverId, prefill);
 
   const handleRedirectUriChange = useCallback(
     (uri: string) => {
@@ -110,6 +124,22 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
     onToggle();
   };
 
+  const handleQuickAddSelect = useCallback((server: CatalogServer) => {
+    setPrefill({
+      name: server.name,
+      url: server.url,
+      description: server.description,
+      transport: mapCatalogTransport(server.transport),
+    });
+    setQuickAddOpen(false);
+  }, []);
+
+  const handleBrowseCatalog = useCallback(() => {
+    setQuickAddOpen(false);
+    onToggle();
+    navigate("/app/server-catalog");
+  }, [onToggle, navigate]);
+
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     handleSubmit(event, (response) => {
       // After successful creation, show the expose components form
@@ -180,10 +210,14 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
                       type="button"
                       variant="link"
                       onClick={() => {
-                        onToggle();
-                        navigate("/app/server-catalog");
+                        if (serverId) {
+                          onToggle();
+                          navigate("/app/server-catalog");
+                        } else {
+                          setQuickAddOpen(true);
+                        }
                       }}
-                      className="font-medium text-cyan-700 underline decoration-cyan-300 underline-offset-4 transition hover:text-cyan-800 dark:text-cyan-400 dark:decoration-cyan-700 dark:hover:text-cyan-300"
+                      className="inline h-auto p-0 font-medium text-cyan-700 decoration-cyan-300 underline-offset-4 transition hover:text-cyan-800 hover:no-underline dark:text-cyan-400 dark:decoration-cyan-700 dark:hover:text-cyan-300"
                     >
                       {chunks}
                     </Button>
@@ -447,6 +481,13 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
           </form>
         </div>
       </div>
+
+      <QuickAddServerDialog
+        open={quickAddOpen}
+        onOpenChange={setQuickAddOpen}
+        onSelect={handleQuickAddSelect}
+        onBrowseCatalog={handleBrowseCatalog}
+      />
     </>
   );
 }
diff --git a/src/components/mcp-servers/QuickAddServerDialog.test.tsx b/src/components/mcp-servers/QuickAddServerDialog.test.tsx
new file mode 100644
index 0000000..c5d5150
--- /dev/null
+++ b/src/components/mcp-servers/QuickAddServerDialog.test.tsx
@@ -0,0 +1,192 @@
+import { describe, expect, it, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import type { CatalogListResponse, CatalogServer } from "@/generated/types";
+import { useQuery } from "@/hooks/useQuery";
+import { renderWithProviders } from "@/test/test-utils";
+import { QUICK_ADD_CATALOG_IDS } from "@/config/quickAddServers";
+import { QuickAddServerDialog } from "./QuickAddServerDialog";
+
+vi.mock("@/hooks/useQuery", () => ({
+  useQuery: vi.fn(),
+}));
+
+const mockUseQuery = vi.mocked(useQuery);
+
+function catalogServer(
+  overrides: Partial<CatalogServer> & Pick<CatalogServer, "id">,
+): CatalogServer {
+  return {
+    name: overrides.id,
+    category: "Documentation",
+    url: `https://${overrides.id}.example/mcp`,
+    auth_type: "Open",
+    provider: overrides.id,
+    description: `${overrides.id} description`,
+    ...overrides,
+  };
+}
+
+// Only the first two curated ids, plus one non-curated id that must be filtered out.
+const catalogResponse: CatalogListResponse = {
+  servers: [
+    catalogServer({ id: QUICK_ADD_CATALOG_IDS[0] }),
+    catalogServer({ id: QUICK_ADD_CATALOG_IDS[1] }),
+    catalogServer({ id: "not-curated" }),
+  ],
+  total: 3,
+  categories: [],
+  auth_types: [],
+  providers: [],
+};
+
+// A curated id whose catalog entry has since drifted off the Quick Add contract:
+// non-Open auth and/or an unsupported transport must still be excluded.
+function catalogResponseWith(overrides: Partial<CatalogServer>): CatalogListResponse {
+  return {
+    servers: [
+      catalogServer({ id: QUICK_ADD_CATALOG_IDS[0], ...overrides }),
+      catalogServer({ id: QUICK_ADD_CATALOG_IDS[1] }),
+    ],
+    total: 2,
+    categories: [],
+    auth_types: [],
+    providers: [],
+  };
+}
+
+function mockCatalogQuery(overrides: Partial<ReturnType<typeof useQuery>> = {}) {
+  mockUseQuery.mockReturnValue({
+    data: catalogResponse,
+    error: null,
+    isLoading: false,
+    execute: vi.fn(),
+    refetch: vi.fn(),
+    setData: vi.fn(),
+    ...overrides,
+  } as ReturnType<typeof useQuery>);
+}
+
+describe("QuickAddServerDialog", () => {
+  it("renders only the curated catalog entries", () => {
+    mockCatalogQuery();
+    renderWithProviders(
+      <QuickAddServerDialog
+        open
+        onOpenChange={vi.fn()}
+        onSelect={vi.fn()}
+        onBrowseCatalog={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText(QUICK_ADD_CATALOG_IDS[0])).toBeInTheDocument();
+    expect(screen.getByText(QUICK_ADD_CATALOG_IDS[1])).toBeInTheDocument();
+    expect(screen.queryByText("not-curated")).not.toBeInTheDocument();
+  });
+
+  it("excludes a curated entry that is no longer Open auth", () => {
+    mockCatalogQuery({ data: catalogResponseWith({ auth_type: "oauth" }) });
+    renderWithProviders(
+      <QuickAddServerDialog
+        open
+        onOpenChange={vi.fn()}
+        onSelect={vi.fn()}
+        onBrowseCatalog={vi.fn()}
+      />,
+    );
+
+    expect(screen.queryByText(QUICK_ADD_CATALOG_IDS[0])).not.toBeInTheDocument();
+    expect(screen.getByText(QUICK_ADD_CATALOG_IDS[1])).toBeInTheDocument();
+  });
+
+  it("excludes a curated entry with an unsupported transport", () => {
+    mockCatalogQuery({ data: catalogResponseWith({ transport: "WEBSOCKET" }) });
+    renderWithProviders(
+      <QuickAddServerDialog
+        open
+        onOpenChange={vi.fn()}
+        onSelect={vi.fn()}
+        onBrowseCatalog={vi.fn()}
+      />,
+    );
+
+    expect(screen.queryByText(QUICK_ADD_CATALOG_IDS[0])).not.toBeInTheDocument();
+    expect(screen.getByText(QUICK_ADD_CATALOG_IDS[1])).toBeInTheDocument();
+  });
+
+  it("disables Continue until a card is selected, then calls onSelect with the picked server", async () => {
+    mockCatalogQuery();
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    renderWithProviders(
+      <QuickAddServerDialog
+        open
+        onOpenChange={vi.fn()}
+        onSelect={onSelect}
+        onBrowseCatalog={vi.fn()}
+      />,
+    );
+
+    const continueButton = screen.getByRole("button", { name: "Continue" });
+    expect(continueButton).toBeDisabled();
+
+    await user.click(screen.getByRole("radio", { name: new RegExp(QUICK_ADD_CATALOG_IDS[0]) }));
+    expect(continueButton).toBeEnabled();
+
+    await user.click(continueButton);
+    expect(onSelect).toHaveBeenCalledWith(
+      expect.objectContaining({ id: QUICK_ADD_CATALOG_IDS[0] }),
+    );
+  });
+
+  it("closes without selecting when Cancel is clicked", async () => {
+    mockCatalogQuery();
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    const onSelect = vi.fn();
+    renderWithProviders(
+      <QuickAddServerDialog
+        open
+        onOpenChange={onOpenChange}
+        onSelect={onSelect}
+        onBrowseCatalog={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it("calls onBrowseCatalog when the browse-catalog link is clicked", async () => {
+    mockCatalogQuery();
+    const user = userEvent.setup();
+    const onBrowseCatalog = vi.fn();
+    renderWithProviders(
+      <QuickAddServerDialog
+        open
+        onOpenChange={vi.fn()}
+        onSelect={vi.fn()}
+        onBrowseCatalog={onBrowseCatalog}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "server catalog" }));
+    expect(onBrowseCatalog).toHaveBeenCalled();
+  });
+
+  it("shows an error state when the catalog fails to load", () => {
+    mockCatalogQuery({ data: undefined, error: { message: "network error" } });
+    renderWithProviders(
+      <QuickAddServerDialog
+        open
+        onOpenChange={vi.fn()}
+        onSelect={vi.fn()}
+        onBrowseCatalog={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("Unable to load quick add servers. Try again.")).toBeInTheDocument();
+  });
+});
diff --git a/src/components/mcp-servers/QuickAddServerDialog.tsx b/src/components/mcp-servers/QuickAddServerDialog.tsx
new file mode 100644
index 0000000..801afb3
--- /dev/null
+++ b/src/components/mcp-servers/QuickAddServerDialog.tsx
@@ -0,0 +1,173 @@
+import { useEffect, useId, useMemo, useState, type ReactNode } from "react";
+import { useIntl } from "react-intl";
+
+import { MCPIcon } from "@/components/icons/MCPIcon";
+import { CatalogLogo } from "@/components/server-catalog/CatalogLogo";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { InlineNotification } from "@/components/ui/inline-notification";
+import { Label } from "@/components/ui/label";
+import { Loading } from "@/components/ui/loading";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { QUICK_ADD_CATALOG_IDS } from "@/config/quickAddServers";
+import type { CatalogListResponse, CatalogServer } from "@/generated/types";
+import { useQuery } from "@/hooks/useQuery";
+
+const CATALOG_PATH = "/v1/catalog?limit=1000";
+// Quick Add submits through the standard gateway-create form, which can't yet
+// complete an OAuth setup flow, and only supports these two transports.
+const OPEN_AUTH_TYPE = "Open";
+const SUPPORTED_TRANSPORTS: ReadonlySet<string> = new Set(["SSE", "STREAMABLEHTTP"]);
+
+function isQuickAddEligible(server: CatalogServer | undefined): server is CatalogServer {
+  if (!server) return false;
+  return (
+    server.auth_type === OPEN_AUTH_TYPE &&
+    (server.transport == null || SUPPORTED_TRANSPORTS.has(server.transport))
+  );
+}
+
+interface QuickAddServerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Called with the picked catalog entry. The caller is responsible for closing the dialog. */
+  onSelect: (server: CatalogServer) => void;
+  onBrowseCatalog: () => void;
+}
+
+export function QuickAddServerDialog({
+  open,
+  onOpenChange,
+  onSelect,
+  onBrowseCatalog,
+}: QuickAddServerDialogProps) {
+  const intl = useIntl();
+  const groupLabelId = useId();
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  const { data, error, isLoading } = useQuery<CatalogListResponse>(CATALOG_PATH, {
+    enabled: open,
+  });
+
+  useEffect(() => {
+    if (!open) setSelectedId(null);
+  }, [open]);
+
+  const servers = useMemo(() => {
+    if (!data?.servers) return [];
+    const byId = new Map(data.servers.map((server) => [server.id, server]));
+    return QUICK_ADD_CATALOG_IDS.map((id) => byId.get(id)).filter(isQuickAddEligible);
+  }, [data?.servers]);
+
+  const selectedServer = servers.find((server) => server.id === selectedId) ?? null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-3xl">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-orange-500 text-neutral-950 shadow-sm">
+              <MCPIcon className="h-4 w-4" />
+            </div>
+            <DialogTitle>
+              {intl.formatMessage({ id: "mcpServer.quickAdd.dialogTitle" })}
+            </DialogTitle>
+          </div>
+          <DialogDescription className="sr-only">
+            {intl.formatMessage({ id: "mcpServer.quickAdd.dialogDescription" })}
+          </DialogDescription>
+        </DialogHeader>
+
+        {isLoading && !data && <Loading variant="inline" />}
+
+        {error && !data && (
+          <InlineNotification
+            type="error"
+            message={intl.formatMessage({ id: "mcpServer.quickAdd.errorState" })}
+          />
+        )}
+
+        {data && servers.length === 0 && (
+          <p className="text-sm text-muted-foreground">
+            {intl.formatMessage({ id: "mcpServer.quickAdd.emptyState" })}
+          </p>
+        )}
+
+        {servers.length > 0 && (
+          <RadioGroup
+            value={selectedId ?? undefined}
+            onValueChange={setSelectedId}
+            aria-labelledby={groupLabelId}
+            className="grid grid-cols-2 gap-3 sm:grid-cols-4"
+          >
+            <span id={groupLabelId} className="sr-only">
+              {intl.formatMessage({ id: "mcpServer.quickAdd.radioGroupLabel" })}
+            </span>
+            {servers.map((server) => {
+              const inputId = `quick-add-${server.id}`;
+              return (
+                <div key={server.id}>
+                  <RadioGroupItem id={inputId} value={server.id} className="peer sr-only" />
+                  <Label
+                    htmlFor={inputId}
+                    className="flex h-full cursor-pointer flex-col rounded-xl border border-border p-3 font-normal transition-colors hover:border-ring peer-data-[state=checked]:border-ring peer-data-[state=checked]:ring-1 peer-data-[state=checked]:ring-ring peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 dark:hover:border-muted-foreground"
+                  >
+                    <div className="flex items-center gap-2">
+                      <CatalogLogo server={server} />
+                      <span className="truncate text-sm font-semibold text-foreground">
+                        {server.name}
+                      </span>
+                    </div>
+                    <span className="mt-2 line-clamp-2 text-xs text-muted-foreground">
+                      {server.description}
+                    </span>
+                  </Label>
+                </div>
+              );
+            })}
+          </RadioGroup>
+        )}
+
+        <div className="flex items-center justify-between pt-2">
+          <p className="text-sm text-muted-foreground">
+            {intl.formatMessage(
+              { id: "mcpServer.quickAdd.footerText" },
+              {
+                catalog: (chunks: ReactNode) => (
+                  <Button
+                    type="button"
+                    variant="link"
+                    onClick={onBrowseCatalog}
+                    className="inline h-auto p-0 font-medium text-cyan-700 decoration-cyan-300 underline-offset-4 transition hover:text-cyan-800 dark:text-cyan-400 dark:decoration-cyan-700 dark:hover:text-cyan-300"
+                  >
+                    {chunks}
+                  </Button>
+                ),
+              },
+            )}
+          </p>
+          <div className="flex items-center gap-2">
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+              {intl.formatMessage({ id: "mcpServer.quickAdd.cancel" })}
+            </Button>
+            <Button
+              type="button"
+              disabled={!selectedServer}
+              onClick={() => {
+                if (selectedServer) onSelect(selectedServer);
+              }}
+            >
+              {intl.formatMessage({ id: "mcpServer.quickAdd.continue" })}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/server-catalog/CatalogLogo.tsx b/src/components/server-catalog/CatalogLogo.tsx
new file mode 100644
index 0000000..8c64a0e
--- /dev/null
+++ b/src/components/server-catalog/CatalogLogo.tsx
@@ -0,0 +1,52 @@
+import { useState } from "react";
+
+import { ServerIcon } from "@/components/servers/ServerIcon";
+import type { CatalogServer } from "@/generated/types";
+
+const CATALOG_ICON_PATH = /^\/static\/catalog-icons\/[A-Za-z0-9][A-Za-z0-9._-]*\.png$/;
+
+function getSafeExternalUrl(value: string | null | undefined): string | null {
+  if (!value) return null;
+
+  // Catalog icons are packaged by the API under this fixed path. Route them
+  // through the authenticated BFF so the browser never needs an API origin.
+  if (CATALOG_ICON_PATH.test(value)) {
+    return `/api${value}`;
+  }
+
+  try {
+    const parsed = new URL(value);
+    return parsed.protocol === "https:" && !parsed.username && !parsed.password
+      ? parsed.href
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+export function CatalogLogo({ server }: { server: CatalogServer }) {
+  const [failedLogoUrl, setFailedLogoUrl] = useState<string | null>(null);
+  const logoUrl = getSafeExternalUrl(server.logo_url);
+
+  if (!logoUrl || failedLogoUrl === logoUrl) {
+    return (
+      <div aria-hidden="true">
+        <ServerIcon name={server.name} size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div aria-hidden="true" className="size-8 shrink-0">
+      <img
+        src={logoUrl}
+        alt=""
+        className="size-full object-contain"
+        loading="lazy"
+        decoding="async"
+        referrerPolicy="no-referrer"
+        onError={() => setFailedLogoUrl(logoUrl)}
+      />
+    </div>
+  );
+}
diff --git a/src/components/server-catalog/CatalogResults.tsx b/src/components/server-catalog/CatalogResults.tsx
index 8b46a63..5f9b3b0 100644
--- a/src/components/server-catalog/CatalogResults.tsx
+++ b/src/components/server-catalog/CatalogResults.tsx
@@ -1,11 +1,11 @@
-import { useEffect, useId, useRef, useState } from "react";
+import { useEffect, useId, useRef } from "react";
 import type { ReactNode } from "react";
 import { EllipsisVertical, FileText, Plus } from "lucide-react";
 import { useIntl } from "react-intl";
 import { STATUS_ICON } from "@/lib/status";
 
 import { EmptyStatePlaceholder } from "@/components/dashboard/EmptyStatePlaceholder";
-import { ServerIcon } from "@/components/servers/ServerIcon";
+import { CatalogLogo } from "@/components/server-catalog/CatalogLogo";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { CardTag } from "@/components/ui/card-tag";
@@ -27,53 +27,6 @@ import { useDebouncedValue } from "@/hooks/useDebouncedValue";
 import { getTagLabels } from "@/utils/tags";
 
 const EMPTY_PENDING_IDS: ReadonlySet<string> = new Set();
-const CATALOG_ICON_PATH = /^\/static\/catalog-icons\/[A-Za-z0-9][A-Za-z0-9._-]*\.png$/;
-
-function getSafeExternalUrl(value: string | null | undefined): string | null {
-  if (!value) return null;
-
-  // Catalog icons are packaged by the API under this fixed path. Route them
-  // through the authenticated BFF so the browser never needs an API origin.
-  if (CATALOG_ICON_PATH.test(value)) {
-    return `/api${value}`;
-  }
-
-  try {
-    const parsed = new URL(value);
-    return parsed.protocol === "https:" && !parsed.username && !parsed.password
-      ? parsed.href
-      : null;
-  } catch {
-    return null;
-  }
-}
-
-function CatalogLogo({ server }: { server: CatalogServer }) {
-  const [failedLogoUrl, setFailedLogoUrl] = useState<string | null>(null);
-  const logoUrl = getSafeExternalUrl(server.logo_url);
-
-  if (!logoUrl || failedLogoUrl === logoUrl) {
-    return (
-      <div aria-hidden="true">
-        <ServerIcon name={server.name} size="lg" />
-      </div>
-    );
-  }
-
-  return (
-    <div aria-hidden="true" className="size-8 shrink-0">
-      <img
-        src={logoUrl}
-        alt=""
-        className="size-full object-contain"
-        loading="lazy"
-        decoding="async"
-        referrerPolicy="no-referrer"
-        onError={() => setFailedLogoUrl(logoUrl)}
-      />
-    </div>
-  );
-}
 
 function CatalogCard({
   server,
diff --git a/src/config/quickAddServers.ts b/src/config/quickAddServers.ts
new file mode 100644
index 0000000..71fc23e
--- /dev/null
+++ b/src/config/quickAddServers.ts
@@ -0,0 +1,19 @@
+/**
+ * Curated shortlist of catalog server ids shown in the Quick Add dialog
+ * (issue #4681). Every id must resolve to an `auth_type: "Open"` entry in
+ * the backend's `mcp-catalog.yml`, since Quick Add submits through the
+ * standard gateway-create form and can't yet complete an OAuth setup flow
+ * (blocked on https://github.com/IBM/mcp-context-forge/issues/5967).
+ *
+ * Order here is the display order in the dialog grid.
+ */
+export const QUICK_ADD_CATALOG_IDS = [
+  "deepwiki",
+  "exa-search",
+  "ferryhopper",
+  "hugging-face",
+  "remote-mcp",
+  "aws-knowledge",
+  "context-awesome",
+  "javadocs",
+] as const;
diff --git a/src/hooks/useMCPServerForm.test.ts b/src/hooks/useMCPServerForm.test.ts
index 81c1731..64d91be 100644
--- a/src/hooks/useMCPServerForm.test.ts
+++ b/src/hooks/useMCPServerForm.test.ts
@@ -3,7 +3,7 @@ import { renderHook, act, waitFor } from "@testing-library/react";
 import { http, HttpResponse } from "msw";
 import { server } from "@/test/mocks/server";
 import { serversApi } from "@/api/servers";
-import { useMCPServerForm } from "./useMCPServerForm";
+import { useMCPServerForm, type MCPServerFormInitialValues } from "./useMCPServerForm";
 
 describe("useMCPServerForm", () => {
   describe("Initial State", () => {
@@ -1706,6 +1706,50 @@ describe("useMCPServerForm", () => {
       expect(result.current.isValid).toBe(false);
     });
   });
+
+  describe("initialValues (Quick Add prefill)", () => {
+    it("seeds create-mode fields from initialValues", () => {
+      const { result } = renderHook(() =>
+        useMCPServerForm(undefined, {
+          name: "DeepWiki",
+          url: "https://mcp.deepwiki.com/mcp",
+          description: "Knowledge base with deep learning integration",
+          transport: "SSE",
+        }),
+      );
+
+      expect(result.current.name).toBe("DeepWiki");
+      expect(result.current.url).toBe("https://mcp.deepwiki.com/mcp");
+      expect(result.current.description).toBe("Knowledge base with deep learning integration");
+      expect(result.current.transport).toBe("SSE");
+    });
+
+    it("applies a later initialValues object once it arrives (Quick Add picked after the form opened)", () => {
+      const { result, rerender } = renderHook(
+        ({ initialValues }: { initialValues?: MCPServerFormInitialValues }) =>
+          useMCPServerForm(undefined, initialValues),
+        { initialProps: { initialValues: undefined as MCPServerFormInitialValues | undefined } },
+      );
+
+      expect(result.current.name).toBe("");
+
+      rerender({ initialValues: { name: "DeepWiki", url: "https://mcp.deepwiki.com/mcp" } });
+
+      expect(result.current.name).toBe("DeepWiki");
+      expect(result.current.url).toBe("https://mcp.deepwiki.com/mcp");
+    });
+
+    it("does not apply initialValues in edit mode", async () => {
+      const { result } = renderHook(() =>
+        useMCPServerForm("edit-123", { name: "Should not apply" }),
+      );
+
+      await waitFor(() => {
+        expect(result.current.name).toBe("Test Server");
+      });
+      expect(result.current.name).not.toBe("Should not apply");
+    });
+  });
 });
 
 // Restore all spies after each test in this file
diff --git a/src/hooks/useMCPServerForm.ts b/src/hooks/useMCPServerForm.ts
index a95a153..06492b1 100644
--- a/src/hooks/useMCPServerForm.ts
+++ b/src/hooks/useMCPServerForm.ts
@@ -17,6 +17,14 @@ import {
 export type TransportType = "SSE" | "STREAMABLEHTTP";
 export type AuthType = "none" | "basic" | "bearer" | "custom" | "oauth" | "query";
 
+/** Seeds a freshly-opened create-mode form, e.g. from a picked Quick Add catalog entry. */
+export interface MCPServerFormInitialValues {
+  name?: string;
+  url?: string;
+  description?: string;
+  transport?: TransportType;
+}
+
 export interface CustomHeader {
   id: string;
   key: string;
@@ -300,7 +308,10 @@ const initialState = {
   queryParamApiKey: "", // pragma: allowlist secret
 };
 
-export function useMCPServerForm(gatewayId?: string): UseMCPServerFormReturn {
+export function useMCPServerForm(
+  gatewayId?: string,
+  initialValues?: MCPServerFormInitialValues,
+): UseMCPServerFormReturn {
   const [name, setName] = useState(initialState.name);
   const [url, setUrl] = useState(initialState.url);
   const [description, setDescription] = useState(initialState.description);
@@ -455,6 +466,18 @@ export function useMCPServerForm(gatewayId?: string): UseMCPServerFormReturn {
     }
   }, [serverData, gatewayId]);
 
+  // Seeds a freshly-opened create-mode form from caller-supplied defaults (e.g. a
+  // picked Quick Add catalog entry). Runs once per new initialValues reference —
+  // the caller is expected to hand in a new object only when a fresh pick is made,
+  // not on every render. Edit mode owns its own prefill via the effect above.
+  useEffect(() => {
+    if (!initialValues || gatewayId) return;
+    if (initialValues.name !== undefined) setName(initialValues.name);
+    if (initialValues.url !== undefined) setUrl(initialValues.url);
+    if (initialValues.description !== undefined) setDescription(initialValues.description);
+    if (initialValues.transport !== undefined) setTransport(initialValues.transport);
+  }, [initialValues, gatewayId]);
+
   // Use useQuery for POST request to create MCP gateway
   const { execute: createGateway, isLoading: isCreating } = useQuery<unknown, MCPServerFormData>(
     "/gateways",
diff --git a/src/i18n/locales/en-US/mcpServer.json b/src/i18n/locales/en-US/mcpServer.json
index bd3f862..8b56881 100644
--- a/src/i18n/locales/en-US/mcpServer.json
+++ b/src/i18n/locales/en-US/mcpServer.json
@@ -31,6 +31,14 @@
   "mcpServer.form.waitingOAuth": "Waiting for OAuth…",
   "mcpServer.form.saveChanges": "Save changes",
   "mcpServer.form.connectServer": "Connect server",
+  "mcpServer.quickAdd.dialogTitle": "Connect MCP server",
+  "mcpServer.quickAdd.dialogDescription": "Pick a commonly used MCP server to pre-fill the form below.",
+  "mcpServer.quickAdd.radioGroupLabel": "Available servers",
+  "mcpServer.quickAdd.footerText": "Explore more options in the <catalog>server catalog</catalog>.",
+  "mcpServer.quickAdd.cancel": "Cancel",
+  "mcpServer.quickAdd.continue": "Continue",
+  "mcpServer.quickAdd.emptyState": "No quick add servers available right now.",
+  "mcpServer.quickAdd.errorState": "Unable to load quick add servers. Try again.",
   "mcpServer.table.caption": "List of MCP servers with status and actions",
   "mcpServer.table.name": "Name",
   "mcpServer.table.components": "Components",
diff --git a/src/i18n/locales/es-ES/mcpServer.json b/src/i18n/locales/es-ES/mcpServer.json
index c4fc58c..88515d2 100644
--- a/src/i18n/locales/es-ES/mcpServer.json
+++ b/src/i18n/locales/es-ES/mcpServer.json
@@ -31,6 +31,14 @@
   "mcpServer.form.waitingOAuth": "Esperando OAuth…",
   "mcpServer.form.saveChanges": "Guardar cambios",
   "mcpServer.form.connectServer": "Conectar servidor",
+  "mcpServer.quickAdd.dialogTitle": "Conectar servidor MCP",
+  "mcpServer.quickAdd.dialogDescription": "Elige un servidor MCP de uso frecuente para completar el formulario a continuación.",
+  "mcpServer.quickAdd.radioGroupLabel": "Servidores disponibles",
+  "mcpServer.quickAdd.footerText": "Explora más opciones en el <catalog>catálogo de servidores</catalog>.",
+  "mcpServer.quickAdd.cancel": "Cancelar",
+  "mcpServer.quickAdd.continue": "Continuar",
+  "mcpServer.quickAdd.emptyState": "No hay servidores de agregado rápido disponibles en este momento.",
+  "mcpServer.quickAdd.errorState": "No se pudieron cargar los servidores de agregado rápido. Vuelve a intentarlo.",
   "mcpServer.table.caption": "Lista de servidores MCP con estado y acciones",
   "mcpServer.table.name": "Nombre",
   "mcpServer.table.components": "Componentes",
diff --git a/src/i18n/locales/pt-BR/mcpServer.json b/src/i18n/locales/pt-BR/mcpServer.json
index 80c7846..cb1728c 100644
--- a/src/i18n/locales/pt-BR/mcpServer.json
+++ b/src/i18n/locales/pt-BR/mcpServer.json
@@ -31,6 +31,14 @@
   "mcpServer.form.waitingOAuth": "Aguardando OAuth…",
   "mcpServer.form.saveChanges": "Salvar alterações",
   "mcpServer.form.connectServer": "Conectar servidor",
+  "mcpServer.quickAdd.dialogTitle": "Conectar servidor MCP",
+  "mcpServer.quickAdd.dialogDescription": "Escolha um servidor MCP de uso comum para preencher o formulário abaixo.",
+  "mcpServer.quickAdd.radioGroupLabel": "Servidores disponíveis",
+  "mcpServer.quickAdd.footerText": "Explore mais opções no <catalog>catálogo de servidores</catalog>.",
+  "mcpServer.quickAdd.cancel": "Cancelar",
+  "mcpServer.quickAdd.continue": "Continuar",
+  "mcpServer.quickAdd.emptyState": "Nenhum servidor de adição rápida disponível no momento.",
+  "mcpServer.quickAdd.errorState": "Não foi possível carregar os servidores de adição rápida. Tente novamente.",
   "mcpServer.table.caption": "Lista de servidores MCP com status e ações",
   "mcpServer.table.name": "Nome",
   "mcpServer.table.components": "Componentes",