@@ -61,6 +61,7 @@ A link replaces repeated detail only after the owner contains it. Keep a concise
 - Use Markdown lists and tables for simple procedures and reference data. Use tabs for distinct configurations and Steps for substantial sequential procedures.
 - Integration table cells use ordinary word wrapping so short field names and types stay readable. Keep long tokens within the existing table scroll container; do not let them widen the page.
 - On large integration references, keep action and trigger descriptions visible and fold their field tables into `ReferenceDetails`. Preserve headings inside each disclosure so direct links and browser search can reveal them. Setup requirements and consequential warnings stay outside the folded tables.
+- Integration logos belong beside the page title, using the generated `integration` frontmatter. Keep the regular docs header actions and do not repeat the logo in the article body.
 - Match inline code to Sim Chat: normal-weight monospace text, tight padding, and the existing borderless filled surface tokens. Scope the treatment to prose code; preserve fenced examples, API route bars, schema controls, and selector labels.
 - Use shared `ChipSelect` controls for API response and request-example pickers, with accessible names that include the current value, checked radio semantics for single choices, and menus aligned to their triggers. Keep docs pickers nonmodal so they do not hide lazily hydrating siblings. Keep response headings free of inherited extra margins. Scope dependency filter styling to `data-object-search-input`, including schema popovers portaled to the body; focus stays inside the field, and touch fields retain the shared target and text sizes.
 - Import authored tabs from `@/components/ui/tabs`. Mixed panels retain a content inset; only a single code fence fills the frame. Keep long tab lists horizontally scrollable and long prose references wrapped. For bookmarked panels, use explicit native `TabsList`/`TabsTrigger` controls with `aria-controls` matching each panel ID; changing a panel ID alone leaves the generated control pointing at a nonexistent element.
 
@@ -24,8 +24,8 @@ import { APIExampleSelector } from '@/components/ui/api-example-selector'
 import { APIRequestTabs } from '@/components/ui/api-request-tabs'
 import { CodeBlock } from '@/components/ui/code-block'
 import { Heading } from '@/components/ui/heading'
+import { IntegrationIcon } from '@/components/ui/integration-icon'
 import { ResponseSection } from '@/components/ui/response-section'
-import { getIntegrationLandingPage, INTEGRATION_LANDING_LABEL } from '@/lib/integration-landing'
 import { getApiSpecContent, getAuthenticatedCodeSamples, openapi } from '@/lib/openapi'
 import { simShikiOptions } from '@/lib/shiki-theme'
 import { type PageData, source } from '@/lib/source'
@@ -209,7 +209,6 @@ export default async function Page(props: { params: Promise<{ slug?: string[] }>
   }
   const isOpenAPI = '_openapi' in data && data._openapi != null
   const isApiReference = slug?.some((s) => s === 'api-reference') ?? false
-  const integrationLandingPage = getIntegrationLandingPage(slug)
   const isCli = slug?.[0] === 'cli'
   const isMcp = slug?.[0] === 'mcp'
 
@@ -354,7 +353,11 @@ export default async function Page(props: { params: Promise<{ slug?: string[] }>
           component: footer,
         }}
       >
-        <PageHeader title={data.title} className='max-sm:[&>h1]:basis-0 max-sm:[&_a]:size-10'>
+        <PageHeader
+          title={data.title}
+          icon={data.integration && <IntegrationIcon {...data.integration} />}
+          className='max-sm:[&>h1]:basis-0 max-sm:[&_a]:size-10'
+        >
           <div className='hidden sm:flex'>
             <LLMCopyButton content={markdownContent} />
           </div>
@@ -366,12 +369,6 @@ export default async function Page(props: { params: Promise<{ slug?: string[] }>
             slug?.[0] === 'integrations' && '[&_td]:[overflow-wrap:normal]'
           )}
         >
-          {integrationLandingPage && (
-            <p>
-              {INTEGRATION_LANDING_LABEL}{' '}
-              <a href={integrationLandingPage.url}>{integrationLandingPage.title}</a>
-            </p>
-          )}
           <MDX
             components={{
               ...defaultMdxComponents,
 
@@ -4,15 +4,22 @@ import { DocsTitle } from 'fumadocs-ui/page'
 
 interface PageHeaderProps {
   title: string
+  icon?: ReactNode
   children: ReactNode
   className?: string
 }
 
-export function PageHeader({ title, children, className }: PageHeaderProps) {
+export function PageHeader({ title, icon, children, className }: PageHeaderProps) {
   return (
     <div className={cn('flex flex-wrap items-start gap-x-4 gap-y-2', className)}>
-      <DocsTitle className='mb-2 min-w-0 flex-[1_1_16rem] [overflow-wrap:anywhere]'>
-        {title}
+      <DocsTitle
+        className={cn(
+          'mb-2 min-w-0 flex-[1_1_16rem] [overflow-wrap:anywhere]',
+          icon && 'flex items-center gap-3'
+        )}
+      >
+        {icon}
+        {icon ? <span className='min-w-0'>{title}</span> : title}
       </DocsTitle>
       <div className='ms-auto flex shrink-0 items-center gap-2 pt-1'>{children}</div>
     </div>
 
@@ -0,0 +1,32 @@
+'use client'
+
+import type * as React from 'react'
+import { cn } from '@sim/emcn'
+import { isLightTileColor } from '@sim/workflow-renderer/tile-icon-color'
+import { blockTypeToIconMap } from '@/components/ui/icon-mapping'
+
+interface IntegrationIconProps {
+  type: string
+  color: string
+}
+
+export function IntegrationIcon({ type, color }: IntegrationIconProps): React.ReactNode {
+  const ResolvedIcon = blockTypeToIconMap[type] || null
+  const iconColorClass = isLightTileColor(color) ? 'text-black' : 'text-white'
+
+  return (
+    <span
+      aria-hidden='true'
+      className='flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-lg'
+      style={{ background: color }}
+    >
+      {ResolvedIcon ? (
+        <ResolvedIcon className={cn('size-4', iconColorClass)} />
+      ) : (
+        <span className={cn('font-mono text-sm opacity-70', iconColorClass)}>
+          {type.substring(0, 2)}
+        </span>
+      )}
+    </span>
+  )
+}
@@ -1,15 +1,11 @@
 ---
 title: A2A
 description: Interact with external A2A-compatible agents
+integration:
+  type: "a2a"
+  color: "#4151B5"
 ---
 
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="a2a"
-  color="#4151B5"
-/>
-
 {/* MANUAL-CONTENT-START:intro */}
 Use the A2A (Agent-to-Agent) protocol to send messages, structured data, and files to external agents, inspect their Agent Cards, and track or cancel tasks. Provide the agent's endpoint URL and, when required, an API key. Sim sends that key in `X-API-Key` for task requests; agents that require a different authentication scheme need a compatible endpoint. Agent Card discovery runs before authentication, so the card must be reachable without that key.
 {/* MANUAL-CONTENT-END */}
 
@@ -1,15 +1,13 @@
 ---
 title: Affinity
 description: Read and write companies, people, lists, notes, and relationships in Affinity
+integration:
+  type: "affinity"
+  color: "#1B1C1E"
 ---
 
-import { BlockInfoCard } from "@/components/ui/block-info-card"
 import { ReferenceDetails } from "@/components/ui/reference-details"
 
-<BlockInfoCard 
-  type="affinity"
-  color="#1B1C1E"
-/>
 
 {/* MANUAL-CONTENT-START:intro */}
 [Affinity](https://www.affinity.co/) is a CRM for companies, people, opportunities, and relationship data. Its v2 integration reads companies, people, opportunities, lists, interactions, and transcripts; creates lists and reminders; manages notes; and updates field values and dropdown options.
@@ -26,7 +24,6 @@ Generate an API key from the **Manage Apps** page in your Affinity settings; it
 Some Affinity endpoints are still marked BETA — company, person, and list-entry search, the per-entity field-value reads, the inferred-connection operations, and the user operations. Affinity may change those without notice or versioning.
 {/* MANUAL-CONTENT-END */}
 
-
 ## Use the block [#usage-instructions]
 
 Read companies, people, opportunities, lists, and saved views; search companies, people, and list entries. Page through the rows of a list or saved view. Read field values and update them individually or in batches of up to 100 on one company, person, or list entry. Read, create, update, delete, and reply to notes; list or create reminders; retrieve logged calls, emails, chat messages, meetings, and transcripts. Search notes and files by keyword, find companies from a plain-language description with Semantic Search, discover possible introduction paths through shared work and investment history, and follow the field-value change feed for incremental synchronization. Access depends on the API key holder’s permissions.
 
@@ -1,21 +1,18 @@
 ---
 title: AgentMail
 description: Manage email inboxes, threads, and messages with AgentMail
+integration:
+  type: "agentmail"
+  color: "#000000"
 ---
 
-import { BlockInfoCard } from "@/components/ui/block-info-card"
 import { ReferenceDetails } from "@/components/ui/reference-details"
 
-<BlockInfoCard 
-  type="agentmail"
-  color="#000000"
-/>
 
 {/* MANUAL-CONTENT-START:intro */}
 [AgentMail](https://agentmail.to/) connects Sim workflows to email inboxes using an API key. Create inboxes, send and read messages, reply to or forward conversations, manage drafts, and apply labels to threads and messages. For review-before-send workflows, create a draft, update it with the reviewed content, then send it.
 {/* MANUAL-CONTENT-END */}
 
-
 ## Use the block [#usage-instructions]
 
 Create and manage email inboxes, send and receive messages, reply to threads, manage drafts, and organize threads with labels. Requires an API key.
 
@@ -1,23 +1,20 @@
 ---
 title: AgentPhone
 description: Provision numbers, send SMS and iMessage, and place voice calls with AgentPhone
+integration:
+  type: "agentphone"
+  color: "linear-gradient(135deg, #1a1a1a 0%, #0a2a14 100%)"
 ---
 
-import { BlockInfoCard } from "@/components/ui/block-info-card"
 import { ReferenceDetails } from "@/components/ui/reference-details"
 
-<BlockInfoCard 
-  type="agentphone"
-  color="linear-gradient(135deg, #1a1a1a 0%, #0a2a14 100%)"
-/>
 
 {/* MANUAL-CONTENT-START:intro */}
 Use [AgentPhone](https://agentphone.to/) to provision phone numbers, place outbound voice calls, send SMS or iMessage, and manage contacts and conversations from a workflow. Connect with an AgentPhone API key.
 
 Retrieve call transcripts and conversation history for downstream processing, and check usage before starting more calls or messages.
 {/* MANUAL-CONTENT-END */}
 
-
 ## Use the block [#usage-instructions]
 
 Provision SMS- and voice-enabled numbers, send messages and tapback reactions, place outbound calls, manage conversations and contacts, and inspect usage with an AgentPhone API key.
 
@@ -1,21 +1,18 @@
 ---
 title: Agiloft
 description: Manage records in Agiloft CLM
+integration:
+  type: "agiloft"
+  color: "#001028"
 ---
 
-import { BlockInfoCard } from "@/components/ui/block-info-card"
 import { ReferenceDetails } from "@/components/ui/reference-details"
 
-<BlockInfoCard 
-  type="agiloft"
-  color="#001028"
-/>
 
 {/* MANUAL-CONTENT-START:intro */}
 [Agiloft](https://www.agiloft.com/) stores records in knowledge-base tables. Use this integration to find, create, update, and delete records, work with attachments, manage record locks, and run action buttons. Select the target knowledge base and table for each operation; the action reference below lists its required fields.
 {/* MANUAL-CONTENT-END */}
 
-
 ## Use the block [#usage-instructions]
 
 Integrate with Agiloft contract lifecycle management to create, read, update, delete, and search records. Supports file attachments, SQL-based selection, saved searches, record locking, and running action buttons across any table in your knowledge base.