diff --git a/apps/webapp/app/components/integrations/ConnectionSelector.tsx b/apps/webapp/app/components/integrations/ConnectionSelector.tsx
index 50b8af3cf..08b1bb3bd 100644
--- a/apps/webapp/app/components/integrations/ConnectionSelector.tsx
+++ b/apps/webapp/app/components/integrations/ConnectionSelector.tsx
@@ -5,10 +5,12 @@ import classNames from "classnames";
 import type { CatalogIntegration } from "internal-catalog";
 import { Fragment } from "react";
 import type { APIConnection } from "~/models/apiConnection.server";
-import { BasicConnectButton, ConnectButton } from "./ConnectButton";
+import { BasicConnectButton } from "./ConnectButton";
+import { IntegrationIcon } from "./IntegrationIcon";
 
 type Props = {
-  sourceId: string;
+  type: "source" | "service";
+  sourceServiceId: string;
   organizationId: string;
   integration: CatalogIntegration;
   connections: Pick<APIConnection, "id" | "title">[];
@@ -16,7 +18,8 @@ type Props = {
 };
 
 export function ConnectionSelector({
-  sourceId,
+  type,
+  sourceServiceId,
   integration,
   connections,
   selectedConnectionId,
@@ -30,6 +33,8 @@ export function ConnectionSelector({
         key={integration.slug}
         integration={integration}
         organizationId={organizationId}
+        sourceId={type === "source" ? sourceServiceId : undefined}
+        serviceId={type === "service" ? sourceServiceId : undefined}
       />
     );
   }
@@ -80,7 +85,9 @@ export function ConnectionSelector({
                       return (
                         <fetcher.Form
                           key={connection.id}
-                          action={`/resources/sources/${sourceId}`}
+                          action={`/resources/${
+                            type === "source" ? "sources" : "services"
+                          }/${sourceServiceId}`}
                           method="put"
                         >
                           <input
@@ -88,6 +95,7 @@ export function ConnectionSelector({
                             name={"connectionId"}
                             value={connection.id}
                           />
+
                           <Popover.Button
                             className={classNames(
                               "flex items-center w-full justify-between gap-1.5 py-2 px-3 text-white rounded hover:bg-slate-800 transition",
diff --git a/apps/webapp/app/components/integrations/WorkflowConnections.tsx b/apps/webapp/app/components/integrations/WorkflowConnections.tsx
index 8a27c65ba..2ea680626 100644
--- a/apps/webapp/app/components/integrations/WorkflowConnections.tsx
+++ b/apps/webapp/app/components/integrations/WorkflowConnections.tsx
@@ -16,7 +16,8 @@ export function WorkflowConnections() {
         <div className="flex flex-col gap-1">
           <Body>{connectionSlots.source.integration.name}</Body>
           <ConnectionSelector
-            sourceId={connectionSlots.source.id}
+            type="source"
+            sourceServiceId={connectionSlots.source.id}
             organizationId={organization.id}
             integration={connectionSlots.source.integration}
             connections={connectionSlots.source.possibleConnections}
@@ -28,7 +29,8 @@ export function WorkflowConnections() {
         <div key={slot.id} className="flex flex-col gap-1">
           <Body>{slot.integration?.name}</Body>
           <ConnectionSelector
-            sourceId={slot.id}
+            type="service"
+            sourceServiceId={slot.id}
             organizationId={organization.id}
             integration={slot.integration}
             connections={slot.possibleConnections}
diff --git a/apps/webapp/app/routes/resources/services/$serviceId.ts b/apps/webapp/app/routes/resources/services/$serviceId.ts
new file mode 100644
index 000000000..9ffafb8bb
--- /dev/null
+++ b/apps/webapp/app/routes/resources/services/$serviceId.ts
@@ -0,0 +1,42 @@
+import type { ActionArgs } from "@remix-run/server-runtime";
+import { json } from "@remix-run/server-runtime";
+import { typedjson } from "remix-typedjson";
+import invariant from "tiny-invariant";
+import { z } from "zod";
+import { connectExternalService } from "~/models/externalService.server";
+import { internalPubSub } from "~/services/messageBroker.server";
+import { requireUserId } from "~/services/session.server";
+
+const requestSchema = z.object({
+  connectionId: z.string(),
+});
+
+// PUT /resources/sources/:sourceId
+/** This is used to connect an external source with a connection to an API */
+export async function action({ request, params }: ActionArgs) {
+  await requireUserId(request);
+
+  const { serviceId } = params;
+  invariant(serviceId, "serviceId is required");
+
+  // first make sure this is a PUT request
+  if (request.method.toUpperCase() !== "PUT") {
+    return json({ error: "Method not allowed" }, { status: 405 });
+  }
+
+  try {
+    const formData = await request.formData();
+    const formObject = Object.fromEntries(formData.entries());
+    const { connectionId } = requestSchema.parse(formObject);
+    await connectExternalService({ serviceId, connectionId });
+
+    await internalPubSub.publish("EXTERNAL_SERVICE_UPSERTED", {
+      id: serviceId,
+    });
+
+    return typedjson({ success: true });
+  } catch (error: any) {
+    console.error(error);
+    return typedjson({ error: error.message }, { status: 400 });
+  }
+}
