diff --git a/apps/webapp/app/assets/images/integrations/github.png b/apps/webapp/app/assets/images/integrations/github.png
deleted file mode 100644
index 6cb3b705d..000000000
Binary files a/apps/webapp/app/assets/images/integrations/github.png and /dev/null differ
diff --git a/apps/webapp/app/components/integrations/ConnectButton.tsx b/apps/webapp/app/components/integrations/ConnectButton.tsx
index 7ec1d45c6..d11085e6f 100644
--- a/apps/webapp/app/components/integrations/ConnectButton.tsx
+++ b/apps/webapp/app/components/integrations/ConnectButton.tsx
@@ -1,4 +1,3 @@
-import githubLogo from "~/assets/images/integrations/logo-github.png";
 import { useCallback, useEffect } from "react";
 import Pizzly from "@nangohq/pizzly-frontend";
 import { useFetcher } from "@remix-run/react";
@@ -7,20 +6,7 @@ import type {
   Update,
   UpdateResponse,
 } from "~/routes/resources/connection";
-
-export type Integration = {
-  key: string;
-  name: string;
-  logo: string;
-};
-
-export const integrations: Integration[] = [
-  {
-    key: "github",
-    name: "GitHub",
-    logo: githubLogo,
-  },
-];
+import type { CatalogIntegration } from "internal-catalog";
 
 const actionPath = "/resources/connection";
 
@@ -31,7 +17,7 @@ export function ConnectButton({
   className,
   children,
 }: {
-  integration: Integration;
+  integration: CatalogIntegration;
   organizationId: string;
   sourceId?: string;
   className?: string;
@@ -43,7 +29,7 @@ export function ConnectButton({
     <createFetcher.Form method="post" action={actionPath}>
       <input type="hidden" name="type" value="create" />
       <input type="hidden" name="organizationId" value={organizationId} />
-      <input type="hidden" name="key" value={integration.key} />
+      <input type="hidden" name="key" value={integration.slug} />
       <button
         type="submit"
         disabled={status === "loading"}
diff --git a/apps/webapp/app/components/integrations/ConnectionSelector.tsx b/apps/webapp/app/components/integrations/ConnectionSelector.tsx
index 96b30fa1e..673f5a572 100644
--- a/apps/webapp/app/components/integrations/ConnectionSelector.tsx
+++ b/apps/webapp/app/components/integrations/ConnectionSelector.tsx
@@ -2,15 +2,15 @@ import { Popover, Transition } from "@headlessui/react";
 import { ChevronUpDownIcon, CheckIcon } from "@heroicons/react/24/outline";
 import { useFetcher } from "@remix-run/react";
 import classNames from "classnames";
+import type { CatalogIntegration } from "internal-catalog";
 import { Fragment } from "react";
 import type { APIConnection } from "~/models/apiConnection.server";
-import type { Integration } from "./ConnectButton";
 import { ConnectButton } from "./ConnectButton";
 
 type Props = {
   sourceId: string;
   organizationId: string;
-  integration: Integration;
+  integration: CatalogIntegration;
   connections: Pick<APIConnection, "id" | "title">[];
   selectedConnectionId?: string;
 };
@@ -27,7 +27,7 @@ export function ConnectionSelector({
   if (connections.length === 0) {
     return (
       <ConnectButton
-        key={integration.key}
+        key={integration.slug}
         integration={integration}
         organizationId={organizationId}
         sourceId={sourceId}
@@ -135,12 +135,12 @@ export function ConnectionSelector({
   );
 }
 
-function IntegrationIcon({ integration }: { integration: Integration }) {
+function IntegrationIcon({ integration }: { integration: CatalogIntegration }) {
   return (
     <img
-      src={integration.logo}
+      src={integration.icon}
       alt={integration.name}
-      className="h-8 w-8 shadow-lg group-hover:opacity-80 transition"
+      className="h-5 w-5 shadow-lg group-hover:opacity-80 transition"
     />
   );
 }
diff --git a/apps/webapp/app/components/integrations/WorkflowConnections.tsx b/apps/webapp/app/components/integrations/WorkflowConnections.tsx
index ccff1c209..6b31fe92f 100644
--- a/apps/webapp/app/components/integrations/WorkflowConnections.tsx
+++ b/apps/webapp/app/components/integrations/WorkflowConnections.tsx
@@ -2,7 +2,6 @@ import invariant from "tiny-invariant";
 import { useConnectionSlots } from "~/hooks/useConnectionSlots";
 import { useCurrentOrganization } from "~/hooks/useOrganizations";
 import { Body } from "../primitives/text/Body";
-import { integrations } from "./ConnectButton";
 import { ConnectionSelector } from "./ConnectionSelector";
 
 export function WorkflowConnections() {
@@ -19,7 +18,7 @@ export function WorkflowConnections() {
           <ConnectionSelector
             sourceId={slot.id}
             organizationId={organization.id}
-            integration={integrations[0]}
+            integration={slot.integration}
             connections={slot.possibleConnections}
             selectedConnectionId={slot.connection?.id}
           />
diff --git a/apps/webapp/app/models/integrations.server.ts b/apps/webapp/app/models/integrations.server.ts
new file mode 100644
index 000000000..1dce5e34f
--- /dev/null
+++ b/apps/webapp/app/models/integrations.server.ts
@@ -0,0 +1,7 @@
+import * as fs from "node:fs";
+import { getCatalog } from "internal-catalog";
+
+export function getIntegrations() {
+  const file = fs.readFileSync("./integrations.yml", "utf8");
+  return getCatalog(file);
+}
diff --git a/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/integrations.tsx b/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/integrations.tsx
index 75c922f00..477779436 100644
--- a/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/integrations.tsx
+++ b/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/integrations.tsx
@@ -1,8 +1,10 @@
+import { PlusCircleIcon } from "@heroicons/react/24/solid";
 import type { LoaderArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import invariant from "tiny-invariant";
+import { ConnectButton } from "~/components/integrations/ConnectButton";
 import { Container } from "~/components/layout/Container";
-import { Body } from "~/components/primitives/text/Body";
+import { List } from "~/components/layout/List";
 import {
   Header1,
   Header2,
@@ -10,15 +12,8 @@ import {
 } from "~/components/primitives/text/Headers";
 import { useCurrentOrganization } from "~/hooks/useOrganizations";
 import { getConnectedApiConnectionsForOrganizationSlug } from "~/models/apiConnection.server";
-import {
-  ConnectButton,
-  integrations,
-} from "~/components/integrations/ConnectButton";
+import { getIntegrations } from "~/models/integrations.server";
 import { requireUserId } from "~/services/session.server";
-import logoGithub from "~/assets/images/integrations/logo-github.png";
-import { ArrowsRightLeftIcon } from "@heroicons/react/24/outline";
-import { List } from "~/components/layout/List";
-import { PlusCircleIcon } from "@heroicons/react/24/solid";
 
 export const loader = async ({ request, params }: LoaderArgs) => {
   await requireUserId(request);
@@ -29,11 +24,11 @@ export const loader = async ({ request, params }: LoaderArgs) => {
     slug: organizationSlug,
   });
 
-  return typedjson({ connections });
+  return typedjson({ connections, integrations: getIntegrations() });
 };
 
 export default function Integrations() {
-  const { connections } = useTypedLoaderData<typeof loader>();
+  const { connections, integrations } = useTypedLoaderData<typeof loader>();
   const organization = useCurrentOrganization();
   invariant(organization, "Organization not found");
 
@@ -55,7 +50,11 @@ export default function Integrations() {
                   <div className="flex gap-4 items-center px-4 py-4">
                     <img
                       className="h-14 w-14 shadow-md"
-                      src={logoGithub}
+                      src={
+                        integrations.find(
+                          (i) => i.slug === connection.apiIdentifier
+                        )?.icon
+                      }
                       alt="Github integration logo"
                     />
                     <div className="flex flex-col gap-2">
@@ -87,7 +86,7 @@ export default function Integrations() {
         <div className="flex flex-wrap gap-2 w-full">
           {integrations.map((integration) => (
             <ConnectButton
-              key={integration.key}
+              key={integration.slug}
               integration={integration}
               organizationId={organization.id}
               className="flex flex-col group max-w-[160px] rounded-md bg-slate-800 border border-slate-800 gap-4 text-sm text-slate-200 items-center overflow-hidden hover:bg-slate-800/30 transition shadow-md disabled:opacity-50"
@@ -97,7 +96,7 @@ export default function Integrations() {
                   <div className="relative flex items-center justify-center w-full py-6 bg-black/20 border-b border-slate-800">
                     <PlusCircleIcon className="absolute h-7 w-7 top-[16px] right-[28px] z-10 text-slate-200 shadow-md" />
                     <img
-                      src={integration.logo}
+                      src={integration.icon}
                       alt={integration.name}
                       className="h-20 shadow-lg group-hover:opacity-80 transition"
                     />
diff --git a/apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug.tsx b/apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug.tsx
index d5980b1e8..0d08327fd 100644
--- a/apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug.tsx
+++ b/apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug.tsx
@@ -3,13 +3,13 @@ import type { LoaderArgs } from "@remix-run/server-runtime";
 import { TriggerMetadataSchema } from "@trigger.dev/common-schemas";
 import { typedjson } from "remix-typedjson";
 import invariant from "tiny-invariant";
-import { integrations } from "~/components/integrations/ConnectButton";
 import { Container } from "~/components/layout/Container";
 import {
   SideMenuContainer,
   WorkflowsSideMenu,
 } from "~/components/navigation/SideMenu";
 import { getConnectedApiConnectionsForOrganizationSlug } from "~/models/apiConnection.server";
+import { getIntegrations } from "~/models/integrations.server";
 import { getRuntimeEnvironmentFromRequest } from "~/models/runtimeEnvironment.server";
 import { getWorkflowFromSlugs } from "~/models/workflow.server";
 import { requireUserId } from "~/services/session.server";
@@ -50,7 +50,7 @@ export const loader = async ({ request, params }: LoaderArgs) => {
     possibleConnections: allConnections.filter(
       (a) => a.apiIdentifier === c.service
     ),
-    integration: integrations.find((i) => i.key === c.service),
+    integration: getIntegrations().find((i) => i.slug === c.service),
   }));
 
   return typedjson({
diff --git a/apps/webapp/app/routes/resources/connection.tsx b/apps/webapp/app/routes/resources/connection.tsx
index f1db45310..e53b92e47 100644
--- a/apps/webapp/app/routes/resources/connection.tsx
+++ b/apps/webapp/app/routes/resources/connection.tsx
@@ -6,12 +6,12 @@ import {
   createAPIConnection,
   setConnectedAPIConnection,
 } from "~/models/apiConnection.server";
-import { integrations } from "~/components/integrations/ConnectButton";
 import { requireUserId } from "~/services/session.server";
 import { APIConnectionType } from ".prisma/client";
 import { env } from "~/env.server";
 import { connectExternalSource } from "~/models/externalSource.server";
 import { internalPubSub } from "~/services/messageBroker.server";
+import { getIntegrations } from "~/models/integrations.server";
 
 const updateSchema = z.object({
   type: z.literal("update"),
@@ -59,7 +59,7 @@ export const action = async ({ request, params }: ActionArgs) => {
       case "create": {
         const { organizationId, key } = parsed;
 
-        const integrationInfo = integrations.find((i) => i.key === key);
+        const integrationInfo = getIntegrations().find((i) => i.slug === key);
         if (!integrationInfo) {
           throw new Error("Integration not found");
         }
diff --git a/apps/webapp/package.json b/apps/webapp/package.json
index e82da048f..9eed319ff 100644
--- a/apps/webapp/package.json
+++ b/apps/webapp/package.json
@@ -78,6 +78,7 @@
     "humanize-duration": "^3.27.3",
     "internal-integrations": "workspace:*",
     "internal-platform": "workspace:*",
+    "internal-catalog": "workspace:*",
     "javascript-time-ago": "^2.5.7",
     "json-query": "^2.2.2",
     "jsonata": "^1.8.6",
diff --git a/apps/webapp/public/integrations/github.png b/apps/webapp/public/integrations/github.png
new file mode 100644
index 000000000..e22a2ef3b
Binary files /dev/null and b/apps/webapp/public/integrations/github.png differ
diff --git a/apps/webapp/remix.config.js b/apps/webapp/remix.config.js
index 496b3a0d0..a6761507d 100644
--- a/apps/webapp/remix.config.js
+++ b/apps/webapp/remix.config.js
@@ -12,6 +12,7 @@ module.exports = {
     "axios",
     "internal-platform",
     "internal-integrations",
+    "internal-catalog",
     "@trigger.dev/common-schemas",
   ],
   watchPaths: async () => {
@@ -19,6 +20,7 @@ module.exports = {
       "../../packages/internal-platform/src/**/*",
       "../../packages/common-schemas/src/**/*",
       "../../packages/internal-integrations/src/**/*",
+      "../../packages/internal-catalog/src/**/*",
     ];
   },
 };
diff --git a/packages/internal-catalog/package.json b/packages/internal-catalog/package.json
index 865fd767e..4437ddced 100644
--- a/packages/internal-catalog/package.json
+++ b/packages/internal-catalog/package.json
@@ -1,6 +1,7 @@
 {
   "private": true,
   "name": "internal-catalog",
+  "type": "module",
   "version": "0.0.1",
   "description": "Get the API integration catalog",
   "main": "./src/index.ts",
diff --git a/packages/internal-catalog/src/index.ts b/packages/internal-catalog/src/index.ts
index 2df2f1545..82e1754bb 100644
--- a/packages/internal-catalog/src/index.ts
+++ b/packages/internal-catalog/src/index.ts
@@ -12,6 +12,9 @@ const schema = z.array(
   })
 );
 
+type Catalog = z.infer<typeof schema>;
+export type CatalogIntegration = Catalog[number];
+
 export function getCatalog(raw: string) {
   const doc = parseDocument(raw);
   const jsObject = doc.toJS();
diff --git a/packages/internal-cli/src/index.ts b/packages/internal-cli/src/index.ts
index fe4320171..88c7db420 100644
--- a/packages/internal-cli/src/index.ts
+++ b/packages/internal-cli/src/index.ts
@@ -15,7 +15,6 @@ async function run() {
 
   const file = fs.readFileSync(integrationFilePath, "utf8");
   const catalog = getCatalog(file);
-  console.log(catalog);
 }
 
 run();
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index efd3dd15c..dde7cf715 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -149,6 +149,7 @@ importers:
       glob: ^8.0.3
       happy-dom: ^6.0.4
       humanize-duration: ^3.27.3
+      internal-catalog: workspace:*
       internal-integrations: workspace:*
       internal-platform: workspace:*
       javascript-time-ago: ^2.5.7
@@ -245,6 +246,7 @@ importers:
       date-fns: 2.29.3
       express: 4.18.2
       humanize-duration: 3.27.3
+      internal-catalog: link:../../packages/internal-catalog
       internal-integrations: link:../../packages/internal-integrations
       internal-platform: link:../../packages/internal-platform
       javascript-time-ago: 2.5.9