diff --git a/apps/workflows-dashboard/src/pages/WorkflowDefinition/WorkflowDefinition.tsx b/apps/workflows-dashboard/src/pages/WorkflowDefinition/WorkflowDefinition.tsx
index 7ebe7032e..4bf6da96c 100644
--- a/apps/workflows-dashboard/src/pages/WorkflowDefinition/WorkflowDefinition.tsx
+++ b/apps/workflows-dashboard/src/pages/WorkflowDefinition/WorkflowDefinition.tsx
@@ -13,6 +13,10 @@ import { useWorkflowDefinitionExtensionsEdit } from '@/pages/WorkflowDefinition/
 import { ViewWorkflow } from '@/pages/Workflows/components/organisms/WorkflowsList/components/ViewWorkflow';
 import { isAxiosError } from 'axios';
 import { Link, useParams } from 'react-router-dom';
+import { Dialog } from '@/components/atoms/Dialog';
+import { useState } from 'react';
+import { Button } from '@/components/atoms/Button';
+import { ClipboardIcon } from '@heroicons/react/24/outline';
 
 export const VENDOR_DETAILS = {
   'dow-jones': {
@@ -24,7 +28,7 @@ export const VENDOR_DETAILS = {
     description:
       'ComplyAdvantage offers AI-driven sanctions screening and monitoring for individuals',
   },
-  asiaverify: {
+  'asia-verify': {
     logoUrl: 'https://cdn.ballerine.io/logos/AsiaVerify_Logo.png',
     description:
       'AsiaVerify provides company screening, UBO verification and registry information services focused on APAC region',
@@ -57,6 +61,11 @@ export const WorkflowDefinition = () => {
     useWorkflowDefinitionExtensionsEdit(data);
   const { mutate: upgradeWorkflowDefinitionVersion } =
     useUpgradeWorkflowDefinitionVersionMutation();
+  const [isIntegrationCatalogOpen, setIsIntegrationCatalogOpen] = useState(false);
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+  };
 
   if (isLoading) {
     return (
@@ -93,165 +102,272 @@ export const WorkflowDefinition = () => {
   if (!data) return null;
 
   return (
-    <DashboardLayout pageName={`Workflow Definition - ${data?.displayName || data?.name}`}>
-      <div className="flex flex-col gap-4">
-        <div className="flex flex-row items-stretch gap-2">
-          <div className="w-[75%]">
-            <Card className="h-full bg-gradient-to-br from-slate-50 to-white shadow-lg">
-              <CardHeader className="flex flex-row justify-between border-b border-slate-200 bg-white/50">
-                <h2 className="text-lg font-bold text-slate-800">X-State Visualizer</h2>
-                <ViewWorkflow
-                  workflow={{ state: '', workflowDefinitionId: data?.id } as IWorkflow}
-                />
-              </CardHeader>
-              <CardContent className="mr-6 flex h-[400px] flex-row overflow-hidden">
-                <XstateVisualizer
-                  stateDefinition={data?.definition}
-                  state={''}
-                  key={JSON.stringify(data?.definition || {})}
-                />
-              </CardContent>
-            </Card>
-          </div>
-          <div className="w-[25%]">
-            <WorkflowDefinitionSummaryCard workflowDefinition={data} />
-          </div>
-        </div>
-        <div className="flex flex-row gap-2">
-          <div className="w-1/2">
-            <WorkflowDefinitionEditor workflowDefinition={data} />
+    <>
+      <DashboardLayout pageName={`Workflow Definition - ${data?.displayName || data?.name}`}>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-row items-stretch gap-2">
+            <div className="w-[75%]">
+              <Card className="h-full bg-gradient-to-br from-slate-50 to-white shadow-lg">
+                <CardHeader className="flex flex-row justify-between border-b border-slate-200 bg-white/50">
+                  <h2 className="text-lg font-bold text-slate-800">X-State Visualizer</h2>
+                  <ViewWorkflow
+                    workflow={{ state: '', workflowDefinitionId: data?.id } as IWorkflow}
+                  />
+                </CardHeader>
+                <CardContent className="mr-6 flex h-[400px] flex-row overflow-hidden">
+                  <XstateVisualizer
+                    stateDefinition={data?.definition}
+                    state={''}
+                    key={JSON.stringify(data?.definition || {})}
+                  />
+                </CardContent>
+              </Card>
+            </div>
+            <div className="w-[25%]">
+              <WorkflowDefinitionSummaryCard workflowDefinition={data} />
+            </div>
           </div>
-          <div className="w-1/2">
-            <EditorCard
-              title="Config"
-              value={data.config}
-              onChange={value => {
-                console.log('changed value', value);
-              }}
-              onUpgrade={() => upgradeWorkflowDefinitionVersion({ workflowDefinitionId: data.id! })}
-            />
+          <div className="flex flex-row gap-2">
+            <div className="w-1/2">
+              <WorkflowDefinitionEditor workflowDefinition={data} />
+            </div>
+            <div className="w-1/2">
+              <EditorCard
+                title="Config"
+                value={data.config}
+                onChange={value => {
+                  console.log('changed value', value);
+                }}
+                onUpgrade={() =>
+                  upgradeWorkflowDefinitionVersion({ workflowDefinitionId: data.id! })
+                }
+              />
+            </div>
           </div>
-        </div>
-        <div className="flex flex-row gap-2">
-          <div className="w-1/2">
-            <EditorCard
-              title="Plugins"
-              value={workflowDefinitionExtensions || {}}
-              onSave={handleWorkflowExtensionsSave}
-              onUpgrade={() => upgradeWorkflowDefinitionVersion({ workflowDefinitionId: data.id! })}
-              enableViewMode={true}
-              viewDialogContent={
-                <div className="flex flex-col gap-8 bg-slate-50 p-6">
-                  {Object.entries(workflowDefinitionExtensions || {}).map(([category, plugins]) => (
-                    <div
-                      key={category}
-                      className="rounded-xl border border-slate-200 bg-white p-8 shadow-md transition-shadow hover:shadow-lg"
-                    >
-                      <h3 className="mb-8 flex items-center gap-3 text-2xl font-bold text-slate-800">
-                        <div className="h-10 w-1 rounded-full bg-blue-500" />
-                        {category
-                          .split(/(?=[A-Z])/)
-                          .join(' ')
-                          .replace('Plugins', '')
-                          .replace(/^\w/, c => c.toUpperCase())}{' '}
-                        Plugins
-                      </h3>
-                      <div className="grid grid-cols-3 gap-6">
-                        {(plugins as any[]).map(plugin => (
-                          <div
-                            key={plugin.name}
-                            className="group flex flex-col gap-4 rounded-xl border border-slate-100 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:border-blue-200 hover:shadow-lg"
-                          >
-                            <div className="flex items-center gap-4">
-                              <div className="relative h-14 w-14 overflow-hidden rounded-xl border border-slate-100 bg-white p-2 shadow-sm transition-all group-hover:border-blue-100 group-hover:shadow-md">
-                                {plugin.vendor === 'test' ? (
-                                  <div className="flex h-full w-full items-center justify-center">
-                                    <span className="text-sm font-medium text-slate-400">Test</span>
-                                  </div>
-                                ) : plugin.vendor ? (
-                                  <img
-                                    src={
-                                      VENDOR_DETAILS[plugin.vendor as VendorId]?.logoUrl ||
-                                      `https://cdn.ballerine.io/logos/${plugin.vendor.toLowerCase()}-logo.png`
-                                    }
-                                    alt={plugin.vendor}
-                                    className="h-full w-full object-contain"
-                                    onError={e => {
-                                      e.currentTarget.src =
-                                        'https://cdn.ballerine.io/logos/ballerine-logo.png';
-                                    }}
-                                  />
-                                ) : (
-                                  <img
-                                    src="https://cdn.ballerine.io/logos/ballerine-logo.png"
-                                    alt="Ballerine"
-                                    className="h-full w-full object-contain"
-                                  />
-                                )}
-                              </div>
-                              <div>
-                                <h4 className="font-semibold text-slate-800 transition-colors group-hover:text-blue-600">
-                                  {(plugin.displayName || plugin.name).split(/(?=[A-Z])/).join(' ')}
-                                </h4>
-                                <p className="text-sm font-medium text-slate-400">
-                                  {plugin.pluginKind}
-                                </p>
+          <div className="flex flex-row gap-2">
+            <div className="w-1/2">
+              <EditorCard
+                title="Plugins"
+                value={workflowDefinitionExtensions || {}}
+                onSave={handleWorkflowExtensionsSave}
+                onUpgrade={() =>
+                  upgradeWorkflowDefinitionVersion({ workflowDefinitionId: data.id! })
+                }
+                enableViewMode={true}
+                viewDialogContent={
+                  <div className="flex flex-col gap-8 bg-slate-50 p-6">
+                    <div className="flex justify-end">
+                      <Button onClick={() => setIsIntegrationCatalogOpen(true)}>
+                        View Integration Catalog
+                      </Button>
+                    </div>
+                    {isIntegrationCatalogOpen && (
+                      <div className="fixed inset-0 z-50 flex items-center justify-center">
+                        <Dialog
+                          open={isIntegrationCatalogOpen}
+                          onOpenChange={setIsIntegrationCatalogOpen}
+                        >
+                          <div className="max-h-[90vh] w-[90vw] overflow-y-auto rounded-xl bg-white p-8 shadow-2xl">
+                            <div className="flex flex-col gap-4">
+                              <div className="flex items-center justify-between">
+                                <h2 className="text-2xl font-semibold">Integration Catalog</h2>
+                                <Button
+                                  variant="ghost"
+                                  onClick={() => setIsIntegrationCatalogOpen(false)}
+                                  className="rounded-full p-2 hover:bg-slate-100"
+                                >
+                                  <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    className="h-6 w-6"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    stroke="currentColor"
+                                  >
+                                    <path
+                                      strokeLinecap="round"
+                                      strokeLinejoin="round"
+                                      strokeWidth={2}
+                                      d="M6 18L18 6M6 6l12 12"
+                                    />
+                                  </svg>
+                                </Button>
                               </div>
-                            </div>
-
-                            {plugin.stateNames?.length > 0 && (
-                              <div className="flex flex-wrap gap-2">
-                                {plugin.stateNames?.map((state: string) => (
-                                  <span
-                                    key={state}
-                                    className="rounded-full border border-blue-100 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-600 shadow-sm"
+                              <div className="grid grid-cols-2 gap-6 p-6">
+                                {Object.entries(VENDOR_DETAILS).map(([vendorKey, vendorInfo]) => (
+                                  <div
+                                    key={vendorKey}
+                                    className="flex flex-col gap-4 rounded-xl border border-slate-200 p-6 shadow-sm"
                                   >
-                                    {state}
-                                  </span>
+                                    <div className="flex items-center gap-4">
+                                      <div className="h-16 w-16 overflow-hidden rounded-lg border border-slate-100 bg-white p-2">
+                                        <img
+                                          src={vendorInfo.logoUrl}
+                                          alt={vendorKey}
+                                          className="h-full w-full object-contain"
+                                          onError={e => {
+                                            e.currentTarget.src =
+                                              'https://cdn.ballerine.io/logos/ballerine-logo.png';
+                                          }}
+                                        />
+                                      </div>
+                                      <div className="flex flex-col gap-2">
+                                        <div className="flex items-center gap-2">
+                                          <h4 className="font-semibold text-slate-800">
+                                            {vendorKey
+                                              .split('-')
+                                              .map(
+                                                word =>
+                                                  word.charAt(0).toUpperCase() + word.slice(1),
+                                              )
+                                              .join(' ')}
+                                          </h4>
+                                          <button
+                                            onClick={() => copyToClipboard(vendorKey)}
+                                            className="rounded-md p-1 hover:bg-slate-100"
+                                            title="Copy vendor key"
+                                          >
+                                            <ClipboardIcon className="h-4 w-4 text-slate-500" />
+                                          </button>
+                                        </div>
+                                        <p className="text-sm text-slate-600">
+                                          {vendorInfo.description}
+                                        </p>
+                                      </div>
+                                    </div>
+                                  </div>
                                 ))}
                               </div>
-                            )}
-
-                            <div className="mt-auto flex flex-col gap-2 border-t border-slate-100 pt-4">
-                              {plugin.successAction && (
-                                <div className="flex items-center gap-2 text-sm">
-                                  <span className="font-medium text-slate-600">Success:</span>
-                                  <span className="rounded-md bg-emerald-50 px-2 py-0.5 font-medium text-emerald-600">
-                                    {plugin.successAction}
-                                  </span>
+                            </div>
+                          </div>
+                        </Dialog>
+                      </div>
+                    )}
+                    {Object.entries(workflowDefinitionExtensions || {}).map(
+                      ([category, plugins]) => (
+                        <div
+                          key={category}
+                          className="rounded-xl border border-slate-200 bg-white p-8 shadow-md transition-shadow hover:shadow-lg"
+                        >
+                          <h3 className="mb-8 flex items-center gap-3 text-2xl font-bold text-slate-800">
+                            <div className="h-10 w-1 rounded-full bg-blue-500" />
+                            {category
+                              .split(/(?=[A-Z])/)
+                              .join(' ')
+                              .replace('Plugins', '')
+                              .replace(/^\w/, c => c.toUpperCase())}{' '}
+                            Plugins
+                          </h3>
+                          <div className="grid grid-cols-3 gap-6">
+                            {(plugins as any[]).map(plugin => (
+                              <div
+                                key={plugin.name}
+                                className="group flex flex-col gap-4 rounded-xl border border-slate-100 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:border-blue-200 hover:shadow-lg"
+                              >
+                                <div className="flex items-center gap-4">
+                                  <div className="relative h-20 w-20 overflow-hidden rounded-xl border border-slate-100 bg-white p-3 shadow-sm transition-all group-hover:border-blue-100 group-hover:shadow-md">
+                                    {plugin.vendor === 'test' ? (
+                                      <div className="flex h-full w-full items-center justify-center">
+                                        <span className="text-lg font-medium text-slate-400">
+                                          Test
+                                        </span>
+                                      </div>
+                                    ) : plugin.vendor ? (
+                                      <img
+                                        src={
+                                          VENDOR_DETAILS[plugin.vendor as VendorId]?.logoUrl ||
+                                          `https://cdn.ballerine.io/logos/${plugin.vendor.toLowerCase()}-logo.png`
+                                        }
+                                        alt={plugin.vendor}
+                                        className="h-full w-full object-contain"
+                                        onError={e => {
+                                          e.currentTarget.src =
+                                            'https://cdn.ballerine.io/logos/ballerine-logo.png';
+                                        }}
+                                      />
+                                    ) : (
+                                      <img
+                                        src="https://cdn.ballerine.io/logos/ballerine-logo.png"
+                                        alt="Ballerine"
+                                        className="mx-auto h-12 w-12 rounded-full object-contain"
+                                      />
+                                    )}
+                                  </div>
+                                  <div>
+                                    <h4 className="font-semibold text-slate-800 transition-colors group-hover:text-blue-600">
+                                      {(plugin.displayName || plugin.name)
+                                        .split(/(?=[A-Z])/)
+                                        .join(' ')}
+                                    </h4>
+                                    <div className="flex flex-col gap-1">
+                                      <p className="text-sm font-medium text-slate-400">
+                                        {plugin.pluginKind}
+                                      </p>
+                                      {plugin.vendor && (
+                                        <p className="text-sm font-medium text-slate-500">
+                                          by {plugin.vendor}
+                                        </p>
+                                      )}
+                                    </div>
+                                  </div>
                                 </div>
-                              )}
 
-                              {plugin.errorAction && (
-                                <div className="flex items-center gap-2 text-sm">
-                                  <span className="font-medium text-slate-600">Error:</span>
-                                  <span className="rounded-md bg-red-50 px-2 py-0.5 font-medium text-red-600">
-                                    {plugin.errorAction}
-                                  </span>
+                                {plugin.stateNames?.length > 0 && (
+                                  <div className="flex flex-wrap gap-2">
+                                    {plugin.stateNames?.map((state: string) => (
+                                      <span
+                                        key={state}
+                                        className="rounded-full border border-blue-100 bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-600 shadow-sm"
+                                      >
+                                        {state}
+                                      </span>
+                                    ))}
+                                  </div>
+                                )}
+
+                                <div className="mt-auto flex flex-col gap-2 border-t border-slate-100 pt-4">
+                                  {plugin.successAction && (
+                                    <div className="flex items-center gap-2 text-sm">
+                                      <span className="font-medium text-slate-600">Success:</span>
+                                      <span className="rounded-md bg-emerald-50 px-2 py-0.5 font-medium text-emerald-600">
+                                        {plugin.successAction}
+                                      </span>
+                                    </div>
+                                  )}
+
+                                  {plugin.errorAction && (
+                                    <div className="flex items-center gap-2 text-sm">
+                                      <span className="font-medium text-slate-600">Error:</span>
+                                      <span className="rounded-md bg-red-50 px-2 py-0.5 font-medium text-red-600">
+                                        {plugin.errorAction}
+                                      </span>
+                                    </div>
+                                  )}
                                 </div>
-                              )}
-                            </div>
+                              </div>
+                            ))}
                           </div>
-                        ))}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              }
-            />
-          </div>
-          <div className="w-1/2">
-            <EditorCard
-              title="Context Schema"
-              value={data.contextSchema}
-              onChange={value => {
-                console.log('changed value', value);
-              }}
-              onUpgrade={() => upgradeWorkflowDefinitionVersion({ workflowDefinitionId: data.id! })}
-            />
+                        </div>
+                      ),
+                    )}
+                  </div>
+                }
+              />
+            </div>
+            <div className="w-1/2">
+              <EditorCard
+                title="Context Schema"
+                value={data.contextSchema}
+                onChange={value => {
+                  console.log('changed value', value);
+                }}
+                onUpgrade={() =>
+                  upgradeWorkflowDefinitionVersion({ workflowDefinitionId: data.id! })
+                }
+              />
+            </div>
           </div>
         </div>
-      </div>
-    </DashboardLayout>
+      </DashboardLayout>
+    </>
   );
 };