From 3d71a7816df4711eeeecfbea7727529c247ddc79 Mon Sep 17 00:00:00 2001
From: Eric Gustin <eric@arcade.dev>
Date: Wed, 29 Apr 2026 14:06:00 -0700
Subject: [PATCH 1/5] Add tool feedback button to integrations CTA section

---
 .../integrations/components/toolkits-client.tsx        | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/en/resources/integrations/components/toolkits-client.tsx b/app/en/resources/integrations/components/toolkits-client.tsx
index c0ada8f28..c5503449b 100644
--- a/app/en/resources/integrations/components/toolkits-client.tsx
+++ b/app/en/resources/integrations/components/toolkits-client.tsx
@@ -120,7 +120,7 @@ export default function ToolkitsClient({ toolkits }: ToolkitsClientProps) {
                     Don't see what you need? Use Arcade's SDK to integrate with
                     any service or API.
                   </p>
-                  <div className="mt-3 mb-1">
+                  <div className="mt-3 mb-1 flex flex-wrap justify-center gap-2 md:justify-start">
                     <Link
                       className={cn(
                         buttonVariants({ variant: "default", size: "sm" }),
@@ -130,6 +130,14 @@ export default function ToolkitsClient({ toolkits }: ToolkitsClientProps) {
                     >
                       Learn how to build a MCP Server
                     </Link>
+                    <Link
+                      className={cn(
+                        buttonVariants({ variant: "outline", size: "sm" })
+                      )}
+                      href="/resources/integrations/tool-feedback"
+                    >
+                      Submit tool feedback
+                    </Link>
                   </div>
                 </div>
               </div>

From bef167c07057a7db4114221a7da829636d6ddb4e Mon Sep 17 00:00:00 2001
From: Eric Gustin <eric@arcade.dev>
Date: Wed, 29 Apr 2026 14:14:08 -0700
Subject: [PATCH 2/5] Integrate tool feedback link into description text
 instead of separate button

---
 .../components/toolkits-client.tsx            | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/app/en/resources/integrations/components/toolkits-client.tsx b/app/en/resources/integrations/components/toolkits-client.tsx
index c5503449b..e2451bdf6 100644
--- a/app/en/resources/integrations/components/toolkits-client.tsx
+++ b/app/en/resources/integrations/components/toolkits-client.tsx
@@ -117,10 +117,16 @@ export default function ToolkitsClient({ toolkits }: ToolkitsClientProps) {
                     Build your own MCP Server
                   </h2>
                   <p className="!mt-1.5 text-gray-700 text-sm dark:text-gray-300">
-                    Don't see what you need? Use Arcade's SDK to integrate with
-                    any service or API.
+                    Don't see what you need?{" "}
+                    <Link
+                      href="/resources/integrations/tool-feedback"
+                      className="font-semibold text-blue-600 hover:underline dark:text-blue-400"
+                    >
+                      Submit tool feedback
+                    </Link>
+                    {" "}or use Arcade's SDK to integrate with any service or API.
                   </p>
-                  <div className="mt-3 mb-1 flex flex-wrap justify-center gap-2 md:justify-start">
+                  <div className="mt-3 mb-1">
                     <Link
                       className={cn(
                         buttonVariants({ variant: "default", size: "sm" }),
@@ -130,14 +136,6 @@ export default function ToolkitsClient({ toolkits }: ToolkitsClientProps) {
                     >
                       Learn how to build a MCP Server
                     </Link>
-                    <Link
-                      className={cn(
-                        buttonVariants({ variant: "outline", size: "sm" })
-                      )}
-                      href="/resources/integrations/tool-feedback"
-                    >
-                      Submit tool feedback
-                    </Link>
                   </div>
                 </div>
               </div>

From 0c0f8033a672e070bdc268fd7819111bde732e9f Mon Sep 17 00:00:00 2001
From: Eric Gustin <eric@arcade.dev>
Date: Wed, 29 Apr 2026 14:14:37 -0700
Subject: [PATCH 3/5] Add two buttons side-by-side with flex-nowrap to prevent
 wrapping

---
 .../components/toolkits-client.tsx            | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/app/en/resources/integrations/components/toolkits-client.tsx b/app/en/resources/integrations/components/toolkits-client.tsx
index e2451bdf6..0aabc4abb 100644
--- a/app/en/resources/integrations/components/toolkits-client.tsx
+++ b/app/en/resources/integrations/components/toolkits-client.tsx
@@ -117,16 +117,10 @@ export default function ToolkitsClient({ toolkits }: ToolkitsClientProps) {
                     Build your own MCP Server
                   </h2>
                   <p className="!mt-1.5 text-gray-700 text-sm dark:text-gray-300">
-                    Don't see what you need?{" "}
-                    <Link
-                      href="/resources/integrations/tool-feedback"
-                      className="font-semibold text-blue-600 hover:underline dark:text-blue-400"
-                    >
-                      Submit tool feedback
-                    </Link>
-                    {" "}or use Arcade's SDK to integrate with any service or API.
+                    Don't see what you need? Use Arcade's SDK to integrate with
+                    any service or API.
                   </p>
-                  <div className="mt-3 mb-1">
+                  <div className="mt-3 mb-1 flex flex-nowrap gap-2">
                     <Link
                       className={cn(
                         buttonVariants({ variant: "default", size: "sm" }),
@@ -136,6 +130,14 @@ export default function ToolkitsClient({ toolkits }: ToolkitsClientProps) {
                     >
                       Learn how to build a MCP Server
                     </Link>
+                    <Link
+                      className={cn(
+                        buttonVariants({ variant: "outline", size: "sm" })
+                      )}
+                      href="/resources/integrations/tool-feedback"
+                    >
+                      Submit tool feedback
+                    </Link>
                   </div>
                 </div>
               </div>

From 9c173ab5d3ed2978e64ef4ff172a649948aa3869 Mon Sep 17 00:00:00 2001
From: Eric Gustin <eric@arcade.dev>
Date: Wed, 29 Apr 2026 14:15:15 -0700
Subject: [PATCH 4/5] Redesign CTA section: stack buttons vertically on mobile,
 side-by-side on desktop with equal width and proper spacing

---
 .../integrations/components/toolkits-client.tsx          | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/en/resources/integrations/components/toolkits-client.tsx b/app/en/resources/integrations/components/toolkits-client.tsx
index 0aabc4abb..8e44631e7 100644
--- a/app/en/resources/integrations/components/toolkits-client.tsx
+++ b/app/en/resources/integrations/components/toolkits-client.tsx
@@ -120,11 +120,11 @@ export default function ToolkitsClient({ toolkits }: ToolkitsClientProps) {
                     Don't see what you need? Use Arcade's SDK to integrate with
                     any service or API.
                   </p>
-                  <div className="mt-3 mb-1 flex flex-nowrap gap-2">
+                  <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:gap-3">
                     <Link
                       className={cn(
-                        buttonVariants({ variant: "default", size: "sm" }),
-                        "bg-blue-600 hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:active:bg-blue-600 dark:hover:bg-blue-600"
+                        buttonVariants({ variant: "default", size: "default" }),
+                        "bg-blue-600 hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:active:bg-blue-600 dark:hover:bg-blue-600 flex-1"
                       )}
                       href="/guides/create-tools/tool-basics/build-mcp-server"
                     >
@@ -132,7 +132,8 @@ export default function ToolkitsClient({ toolkits }: ToolkitsClientProps) {
                     </Link>
                     <Link
                       className={cn(
-                        buttonVariants({ variant: "outline", size: "sm" })
+                        buttonVariants({ variant: "outline", size: "default" }),
+                        "flex-1"
                       )}
                       href="/resources/integrations/tool-feedback"
                     >

From 1b1099da621b14d0d7b1beff1c51635c31b1f763 Mon Sep 17 00:00:00 2001
From: Eric Gustin <eric@arcade.dev>
Date: Wed, 29 Apr 2026 14:18:17 -0700
Subject: [PATCH 5/5] Reframe CTA section around user's question with two
 parallel paths
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace 'Build your own MCP Server' heading (which only fit one CTA) with
'Don't see what you need?' — the user's actual question. Present two equal
paths in side-by-side cards: build it yourself with the SDK, or tell us
what's missing.
---
 .../components/toolkits-client.tsx            | 75 +++++++++++--------
 1 file changed, 43 insertions(+), 32 deletions(-)

diff --git a/app/en/resources/integrations/components/toolkits-client.tsx b/app/en/resources/integrations/components/toolkits-client.tsx
index 8e44631e7..6481ec82f 100644
--- a/app/en/resources/integrations/components/toolkits-client.tsx
+++ b/app/en/resources/integrations/components/toolkits-client.tsx
@@ -7,7 +7,7 @@ import {
 } from "@arcadeai/design-system";
 import { Generic as GenericIcon } from "@arcadeai/design-system/components/ui/atoms/icons";
 import { cn } from "@arcadeai/design-system/lib/utils";
-import { Plus, Search } from "lucide-react";
+import { Code2, MessageSquarePlus, Search } from "lucide-react";
 import Link from "next/link";
 import { ComingSoonProvider } from "@/app/_components/coming-soon-context";
 import {
@@ -106,40 +106,51 @@ export default function ToolkitsClient({ toolkits }: ToolkitsClientProps) {
               )}
             </div>
 
-            {/* Custom Integration Call-to-Action */}
+            {/* Don't see what you need? Two paths to fix that. */}
             <div className="mt-4 rounded-lg border border-blue-500/50 border-dashed bg-blue-500/10 p-4 sm:mt-6 sm:p-5 dark:border-blue-400/50 dark:bg-blue-500/20">
-              <div className="flex flex-col items-center gap-3 sm:gap-4 md:flex-row md:gap-6">
-                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-500/20 dark:bg-blue-400/20">
-                  <Plus className="h-4 w-4 text-blue-600 dark:text-blue-400" />
-                </div>
-                <div className="text-center md:text-left">
-                  <h2 className="font-bold text-base text-gray-900 dark:text-gray-50">
-                    Build your own MCP Server
-                  </h2>
-                  <p className="!mt-1.5 text-gray-700 text-sm dark:text-gray-300">
-                    Don't see what you need? Use Arcade's SDK to integrate with
-                    any service or API.
+              <h2 className="text-center font-bold text-base text-gray-900 sm:text-left dark:text-gray-50">
+                Don't see what you need?
+              </h2>
+              <div className="mt-3 grid grid-cols-1 gap-3 sm:mt-4 sm:grid-cols-2 sm:gap-4">
+                <div className="flex flex-col rounded-md border border-blue-500/30 bg-white/70 p-4 dark:border-blue-400/30 dark:bg-gray-900/40">
+                  <div className="flex items-center gap-2">
+                    <Code2 className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+                    <h3 className="font-semibold text-gray-900 text-sm dark:text-gray-50">
+                      Build it yourself
+                    </h3>
+                  </div>
+                  <p className="!mt-2 flex-1 text-gray-700 text-xs leading-relaxed dark:text-gray-300">
+                    Use Arcade's SDK to integrate with any service or API.
                   </p>
-                  <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:gap-3">
-                    <Link
-                      className={cn(
-                        buttonVariants({ variant: "default", size: "default" }),
-                        "bg-blue-600 hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:active:bg-blue-600 dark:hover:bg-blue-600 flex-1"
-                      )}
-                      href="/guides/create-tools/tool-basics/build-mcp-server"
-                    >
-                      Learn how to build a MCP Server
-                    </Link>
-                    <Link
-                      className={cn(
-                        buttonVariants({ variant: "outline", size: "default" }),
-                        "flex-1"
-                      )}
-                      href="/resources/integrations/tool-feedback"
-                    >
-                      Submit tool feedback
-                    </Link>
+                  <Link
+                    className={cn(
+                      buttonVariants({ variant: "default", size: "sm" }),
+                      "mt-3 bg-blue-600 hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:active:bg-blue-600 dark:hover:bg-blue-600"
+                    )}
+                    href="/guides/create-tools/tool-basics/build-mcp-server"
+                  >
+                    Learn how to build a MCP Server
+                  </Link>
+                </div>
+                <div className="flex flex-col rounded-md border border-blue-500/30 bg-white/70 p-4 dark:border-blue-400/30 dark:bg-gray-900/40">
+                  <div className="flex items-center gap-2">
+                    <MessageSquarePlus className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+                    <h3 className="font-semibold text-gray-900 text-sm dark:text-gray-50">
+                      Tell us what's missing
+                    </h3>
                   </div>
+                  <p className="!mt-2 flex-1 text-gray-700 text-xs leading-relaxed dark:text-gray-300">
+                    Request a missing tool, suggest a feature, or report a bug.
+                  </p>
+                  <Link
+                    className={cn(
+                      buttonVariants({ variant: "outline", size: "sm" }),
+                      "mt-3"
+                    )}
+                    href="/resources/integrations/tool-feedback"
+                  >
+                    Submit tool feedback
+                  </Link>
                 </div>
               </div>
             </div>