diff --git a/apps/docs/content/docs/agents/skills.mdx b/apps/docs/content/docs/agents/skills.mdx
index 5723fcf2d68..5690219d80a 100644
--- a/apps/docs/content/docs/agents/skills.mdx
+++ b/apps/docs/content/docs/agents/skills.mdx
@@ -4,6 +4,7 @@ description: Reusable instruction packages your agents load on demand, managed f
 ---
 
 import { Callout } from 'fumadocs-ui/components/callout'
+import { Image } from '@/components/ui/image'
 
 Agent Skills are reusable packages of instructions that give your AI agents specialized capabilities. Based on the open [Agent Skills](https://agentskills.io) format, skills let you capture domain expertise, workflows, and best practices that agents can load on demand.
 
@@ -93,7 +94,7 @@ Tagging a skill loads its full instructions into the conversation, so Sim follow
 
 Open any **Agent** block and find the **Skills** dropdown below the tools section. Select the skills you want the agent to have access to.
 
-![Add Skill](/static/skills/add-skill.png)
+<Image src="/static/skills/add-skill.png" alt="Add Skill" width={756} height={428} className="mx-auto h-auto w-full max-w-sm" />
 
 Selected skills appear as cards that you can click to edit or remove.
 
diff --git a/apps/docs/content/docs/knowledgebase/connectors.mdx b/apps/docs/content/docs/knowledgebase/connectors.mdx
index 9d03f0be246..52da0ef7f74 100644
--- a/apps/docs/content/docs/knowledgebase/connectors.mdx
+++ b/apps/docs/content/docs/knowledgebase/connectors.mdx
@@ -14,7 +14,7 @@ Connectors continuously sync documents from external services into your knowledg
 
 ## Available Connectors
 
-<Image src="/static/connectors/connectors-sources.png" alt="The current Connect Source picker showing searchable connectors including Airtable, Asana, Ashby, Azure DevOps, Bitbucket, Box, and ClickUp" width={750} height={680} />
+<Image src="/static/connectors/connectors-sources.png" alt="The current Connect Source picker showing searchable connectors including Airtable, Asana, Ashby, Azure DevOps, Bitbucket, Box, and ClickUp" width={750} height={680} className="mx-auto h-auto w-full max-w-md" />
 
 Sim ships with 64 built-in connectors:
 
@@ -125,7 +125,7 @@ Click **Connect & Sync** to save the connector and trigger the first sync. Docum
 
 Open **Connected Sources** from the knowledge base to see all active connectors. Each card shows the connector's status, the last sync time and document count, and the next scheduled sync:
 
-<Image src="/static/connectors/connectors-sync-history.png" alt="Connected Sources panel showing a Google Docs connector with Active status, last sync details, and a sync history log with dated entries" width={800} height={466} />
+<Image src="/static/connectors/connectors-sync-history.png" alt="Connected Sources panel showing a Google Docs connector with Active status, last sync details, and a sync history log with dated entries" width={800} height={466} className="mx-auto h-auto w-full max-w-xl" />
 
 The action buttons on each connector card:
 
@@ -159,7 +159,7 @@ The log retains the most recent 10 sync runs.
 
 Sometimes a connector syncs documents you don't want in your knowledge base — drafts, templates, confidential pages, and so on. You can exclude them individually.
 
-<Image src="/static/connectors/connectors-excluded.png" alt="Edit Google Docs modal showing the Documents tab with Active (37) and Excluded (0) filter buttons and a 'No excluded documents' message" width={800} height={774} />
+<Image src="/static/connectors/connectors-excluded.png" alt="Edit Google Docs modal showing the Documents tab with Active (37) and Excluded (0) filter buttons and a 'No excluded documents' message" width={800} height={774} className="mx-auto h-auto w-full max-w-md" />
 
 To exclude a document, open the connector's settings modal, go to the **Documents** tab, and click **Exclude** next to any document. Excluded documents are skipped on every subsequent sync even if the source content changes.
 
diff --git a/apps/docs/content/docs/knowledgebase/tags.mdx b/apps/docs/content/docs/knowledgebase/tags.mdx
index e563295787e..1d84bb9835c 100644
--- a/apps/docs/content/docs/knowledgebase/tags.mdx
+++ b/apps/docs/content/docs/knowledgebase/tags.mdx
@@ -36,11 +36,11 @@ The type dropdown in the creation form shows current slot usage for each type (e
 
 Tag definitions live at the knowledge base level. To manage them, click the knowledge base name in the header to open the context menu and select **Tags**:
 
-<Image src="/static/tags/tags-kb-menu.png" alt="Knowledge base header showing the dropdown menu with Rename, Tags, and Delete options" width={700} height={346} />
+<Image src="/static/tags/tags-kb-menu.png" alt="Knowledge base header showing the dropdown menu with Rename, Tags, and Delete options" width={700} height={346} className="mx-auto h-auto w-full max-w-md" />
 
 This opens the Tags modal, which lists all defined tags and shows how many documents each one is assigned to. Click **Add Tag** to define a new one:
 
-<Image src="/static/tags/tags-create.png" alt="Tags modal showing 0 defined tags, a Tag Name input field, and a Type dropdown set to Text (0/7), with Cancel and Create Tag buttons" width={700} height={471} />
+<Image src="/static/tags/tags-create.png" alt="Tags modal showing 0 defined tags, a Tag Name input field, and a Type dropdown set to Text (0/7), with Cancel and Create Tag buttons" width={700} height={471} className="mx-auto h-auto w-full max-w-md" />
 
 Enter a **Tag Name** and pick a **Type**, then click **Create Tag**. The name must be unique within the knowledge base. The type dropdown only shows types that still have available slots. Press Enter to submit or Escape to cancel.
 
diff --git a/apps/docs/content/docs/logs-debugging/index.mdx b/apps/docs/content/docs/logs-debugging/index.mdx
index 6ca2d2a973e..14edf8f61a9 100644
--- a/apps/docs/content/docs/logs-debugging/index.mdx
+++ b/apps/docs/content/docs/logs-debugging/index.mdx
@@ -35,6 +35,7 @@ Open a run and **Log Details** shows the trace. The **Trace** tab lists each blo
   alt="The current Log Details Trace tab showing workflow, agent, model, and tool spans with their durations"
   width={518}
   height={540}
+  className="mx-auto h-auto w-full max-w-md"
 />
 
 This is the level you debug at, because a run fails when one of its blocks fails, and a block usually fails because of the input it received. In this run, one glance at the spans shows where the time went: Agent 1 took 7.84s of the 7.86s total.
diff --git a/apps/docs/content/docs/logs-debugging/logging.mdx b/apps/docs/content/docs/logs-debugging/logging.mdx
index 68dd52ed6b6..d974e26782a 100644
--- a/apps/docs/content/docs/logs-debugging/logging.mdx
+++ b/apps/docs/content/docs/logs-debugging/logging.mdx
@@ -47,7 +47,7 @@ Click any entry to open its sidebar: the run's timeline (start/end, total durati
     alt="The current Log Details sidebar with run metadata, output, and credit total"
     width={518}
     height={760}
-    className="my-6"
+    className="my-6 mx-auto h-auto w-full max-w-sm"
   />
 </div>
 
@@ -70,7 +70,7 @@ Click any entry to open its sidebar: the run's timeline (start/end, total durati
     alt="Workflow Snapshot"
     width={600}
     height={628}
-    className="my-6"
+    className="my-6 mx-auto h-auto w-full max-w-md"
   />
 </div>
 
diff --git a/apps/docs/content/docs/platform/credentials.mdx b/apps/docs/content/docs/platform/credentials.mdx
index a80862d3e2b..742fbe1f48d 100644
--- a/apps/docs/content/docs/platform/credentials.mdx
+++ b/apps/docs/content/docs/platform/credentials.mdx
@@ -18,6 +18,7 @@ To manage secrets, open your workspace **Settings** and navigate to the **Secret
   alt="Secrets tab showing Workspace and Personal sections with inline key-value rows"
   width={700}
   height={479}
+  className="mx-auto h-auto w-full max-w-xl"
 />
 
 Secrets are organized into two sections:
@@ -54,6 +55,7 @@ To reference a secret in any input field, type `{{` to open the variable dropdow
   alt="Typing {{ in an input opens a dropdown showing available secrets"
   width={400}
   height={165}
+  className="mx-auto h-auto w-full max-w-[400px]"
 />
 
 Select the secret you want to use. The reference appears highlighted in blue and is resolved to its actual value at runtime.
@@ -63,6 +65,7 @@ Select the secret you want to use. The reference appears highlighted in blue and
   alt="A resolved secret reference shown as {{OPENAI_API_KEY}}"
   width={400}
   height={166}
+  className="mx-auto h-auto w-full max-w-[400px]"
 />
 
 ### Execution log protection
@@ -114,6 +117,7 @@ Click **Details** on any secret row to open its detail view.
   alt="Secret details view showing Key, Value, Description, and Members sections"
   width={700}
   height={351}
+  className="mx-auto h-auto w-full max-w-xl"
 />
 
 From here you can:
diff --git a/apps/docs/content/docs/platform/enterprise/access-control.mdx b/apps/docs/content/docs/platform/enterprise/access-control.mdx
index fe907d92411..d5ccb0d225c 100644
--- a/apps/docs/content/docs/platform/enterprise/access-control.mdx
+++ b/apps/docs/content/docs/platform/enterprise/access-control.mdx
@@ -37,7 +37,7 @@ When a user runs a workflow or uses Chat, Sim reads the resolved group's configu
 
 Go to **Settings → Organization → Permission groups** from any workspace in your organization. Permission groups are defined once at the organization level and apply to every workspace under it. Only organization owners and admins can manage them.
 
-<Image src="/static/enterprise/access-control-groups.png" alt="Access Control settings showing a list of permission groups: Contractors, Sales, Engineering, and Marketing, each with Details and Delete actions" width={900} height={477} />
+<Image src="/static/enterprise/access-control-groups.png" alt="Access Control settings showing a list of permission groups: Contractors, Sales, Engineering, and Marketing, each with Details and Delete actions" width={900} height={477} className="mx-auto h-auto w-full max-w-xl" />
 
 ### 2. Create a permission group
 
@@ -59,7 +59,7 @@ A workspace-scoped group with **no members** applies to everyone in its workspac
 
 Controls which AI model providers members of this group can use.
 
-<Image src="/static/enterprise/access-control-model-providers.png" alt="Model Providers tab showing a grid of AI providers including Ollama, vLLM, OpenAI, Anthropic, Google, Azure OpenAI, and others with checkboxes to allow or restrict access" width={900} height={430} />
+<Image src="/static/enterprise/access-control-model-providers.png" alt="Model Providers tab showing a grid of AI providers including Ollama, vLLM, OpenAI, Anthropic, Google, Azure OpenAI, and others with checkboxes to allow or restrict access" width={900} height={430} className="mx-auto h-auto w-full max-w-xl" />
 
 The list shows all providers available in Sim.
 
@@ -89,7 +89,7 @@ Expand an integration block to reach its **tool denylist**. Clearing individual
 
 Controls the modules, actions, and credentials available to group members. Every row refuses at the API, not only in the UI — clearing a box revokes the access; it does not merely hide a tab.
 
-<Image src="/static/enterprise/access-control-platform.png" alt="Platform tab showing feature toggles grouped by category" width={900} height={566} />
+<Image src="/static/enterprise/access-control-platform.png" alt="Platform tab showing feature toggles grouped by category" width={900} height={566} className="mx-auto h-auto w-full max-w-xl" />
 
 **Modules**
 
diff --git a/apps/docs/content/docs/platform/enterprise/audit-logs.mdx b/apps/docs/content/docs/platform/enterprise/audit-logs.mdx
index e5df0940922..089d8b46190 100644
--- a/apps/docs/content/docs/platform/enterprise/audit-logs.mdx
+++ b/apps/docs/content/docs/platform/enterprise/audit-logs.mdx
@@ -16,7 +16,7 @@ Audit logs record configuration and security events across your organization, in
 
 Go to **Settings → Organization → Audit logs** in your workspace. Logs are displayed in a table with the following columns:
 
-<Image src="/static/enterprise/audit-logs.png" alt="Audit Logs settings showing a table of events with columns for Timestamp, Event, Description, and Actor, along with search and filter controls" width={900} height={830} />
+<Image src="/static/enterprise/audit-logs.png" alt="Audit Logs settings showing a table of events with columns for Timestamp, Event, Description, and Actor, along with search and filter controls" width={900} height={830} className="mx-auto h-auto w-full max-w-xl" />
 
 | Column | Description |
 |--------|-------------|
diff --git a/apps/docs/content/docs/platform/enterprise/custom-blocks.mdx b/apps/docs/content/docs/platform/enterprise/custom-blocks.mdx
index 45761df87d3..7184c315202 100644
--- a/apps/docs/content/docs/platform/enterprise/custom-blocks.mdx
+++ b/apps/docs/content/docs/platform/enterprise/custom-blocks.mdx
@@ -92,7 +92,7 @@ Click **Save changes**. The block is published immediately and becomes available
 
 In the workflow editor, open the block toolbar. Published custom blocks appear under a **Custom blocks** section. Drag one into your workflow like any other block, fill in its inputs (using the placeholders as a guide), and reference its outputs in downstream blocks.
 
-<Image src="/static/enterprise/custom-blocks-toolbar.png" alt="Workflow editor block toolbar with a Custom Blocks section listing two published blocks below Core Blocks" width={400} height={476} />
+<Image src="/static/enterprise/custom-blocks-toolbar.png" alt="Workflow editor block toolbar with a Custom Blocks section listing two published blocks below Core Blocks" width={400} height={476} className="mx-auto h-auto w-full max-w-xs" />
 
 Consumers don't need any access to the source workflow. The block runs on its own, using only the inputs provided, and returns only the outputs you exposed. Its internal steps, models, and intermediate values stay hidden unless the block's publisher turned on **Trace runs in consumer logs**, in which case they appear under the block in the run's trace.
 
diff --git a/apps/docs/content/docs/platform/enterprise/data-drains.mdx b/apps/docs/content/docs/platform/enterprise/data-drains.mdx
index 4305d250c87..44bb8d617a7 100644
--- a/apps/docs/content/docs/platform/enterprise/data-drains.mdx
+++ b/apps/docs/content/docs/platform/enterprise/data-drains.mdx
@@ -16,9 +16,9 @@ Drains are independent of [Data Retention](/platform/enterprise/data-retention)
 
 Go to **Settings → Organization → Data drains** in your workspace, then click **New drain**.
 
-<Image src="/static/enterprise/data-drains-list.png" alt="Data Drains settings page showing two configured drains — one exporting workflow logs to Amazon S3 daily, another exporting Chat conversations to an HTTPS webhook hourly" width={900} height={885} />
+<Image src="/static/enterprise/data-drains-list.png" alt="Data Drains settings page showing two configured drains — one exporting workflow logs to Amazon S3 daily, another exporting Chat conversations to an HTTPS webhook hourly" width={900} height={885} className="mx-auto h-auto w-full max-w-md" />
 
-<Image src="/static/enterprise/data-drains-new.png" alt="New data drain dialog with fields for name, source, cadence, destination, and S3 credentials" width={900} height={491} />
+<Image src="/static/enterprise/data-drains-new.png" alt="New data drain dialog with fields for name, source, cadence, destination, and S3 credentials" width={900} height={491} className="mx-auto h-auto w-full max-w-xl" />
 
 Each drain has four pieces:
 
diff --git a/apps/docs/content/docs/platform/enterprise/forks.mdx b/apps/docs/content/docs/platform/enterprise/forks.mdx
index cfe4879dbe5..4c0851c53a0 100644
--- a/apps/docs/content/docs/platform/enterprise/forks.mdx
+++ b/apps/docs/content/docs/platform/enterprise/forks.mdx
@@ -44,7 +44,7 @@ You will see:
 
 Click **Create fork**. Name the child (defaults to `{workspace} (fork)`), then review **Copy resources**.
 
-<Image src="/static/enterprise/forks-create-modal.png" alt="Fork workspace modal with name field and Copy resources list fully selected" width={900} height={884} />
+<Image src="/static/enterprise/forks-create-modal.png" alt="Fork workspace modal with name field and Copy resources list fully selected" width={900} height={884} className="mx-auto h-auto w-full max-w-md" />
 
 Everything under **Copy resources** starts **selected**. That is usually what you want: tables, knowledge bases, files, custom tools, skills, and MCP servers the child will need.
 
@@ -52,7 +52,7 @@ Everything under **Copy resources** starts **selected**. That is usually what yo
   If you deselect a resource, references to it in the forked workflows are **cleared** in the child. You will see a warning before you confirm.
 </Callout>
 
-<Image src="/static/enterprise/forks-create-warning.png" alt="Fork workspace modal showing a warning that deselected resources will clear references in the fork" width={900} height={953} />
+<Image src="/static/enterprise/forks-create-warning.png" alt="Fork workspace modal showing a warning that deselected resources will clear references in the fork" width={900} height={953} className="mx-auto h-auto w-full max-w-md" />
 
 Click **Fork**. The child workspace is created immediately. Deployed workflows land as **drafts** in the child. Large content (table rows, knowledge base files, file blobs) may finish copying in the background — watch **Activity** on the source workspace.
 
@@ -94,11 +94,11 @@ On the sync page you will see direction (**Push** / **Pull**), deployed workflow
 
 Both are force operations. Confirm carefully.
 
-<Image src="/static/enterprise/forks-copy-resources.png" alt="Copy resources section showing resources used by workflows and a Not used by any workflow group" width={900} height={334} />
+<Image src="/static/enterprise/forks-copy-resources.png" alt="Copy resources section showing resources used by workflows and a Not used by any workflow group" width={900} height={334} className="mx-auto h-auto w-full max-w-xl" />
 
 Resources referenced by the workflows in the sync default to selected for copy. Unused ones sit under **Not used by any workflow** (off by default). If you **map** a resource, it leaves the copy list — maps win.
 
-<Image src="/static/enterprise/forks-reconfigure.png" alt="Dependent field reconfigure card under a mapped resource with a required field marked" width={900} height={242} />
+<Image src="/static/enterprise/forks-reconfigure.png" alt="Dependent field reconfigure card under a mapped resource with a required field marked" width={900} height={242} className="mx-auto h-auto w-full max-w-xl" />
 
 **Sync** stays disabled until:
 
@@ -111,7 +111,7 @@ Resources referenced by the workflows in the sync default to selected for copy.
 
 Click **Sync**. You will get an overwrite confirmation.
 
-<Image src="/static/enterprise/forks-sync-confirm.png" alt="Overwrite target workspace confirmation dialog warning that syncing overwrites changes on the target" width={900} height={438} />
+<Image src="/static/enterprise/forks-sync-confirm.png" alt="Overwrite target workspace confirmation dialog warning that syncing overwrites changes on the target" width={900} height={438} className="mx-auto h-auto w-full max-w-md" />
 
 On success you will see a toast such as **Pushed to "…"** or **Pulled from "…"**. If some workflows fail to redeploy, you get a warning to open and redeploy them manually.
 
@@ -134,7 +134,7 @@ The setting belongs to **this workspace's copy** only. Excluding a workflow here
 
 **See activity** (or the Activity view from the Forks header) lists forks, pushes, pulls, and rollbacks that involve this workspace — including events recorded on the other side of the edge.
 
-<Image src="/static/enterprise/forks-activity.png" alt="Activity view showing Fork and Push events with expandable detail rows" width={900} height={614} />
+<Image src="/static/enterprise/forks-activity.png" alt="Activity view showing Fork and Push events with expandable detail rows" width={900} height={614} className="mx-auto h-auto w-full max-w-xl" />
 
 Expand a row for names of workflows and resources that were created, updated, or archived, and any warnings (for example failed background copies or deploy failures). A push or pull that copies resources fills their content in the background, and that progress and outcome show in the same row.
 
diff --git a/apps/docs/content/docs/platform/enterprise/scim/entra.mdx b/apps/docs/content/docs/platform/enterprise/scim/entra.mdx
index dac483eec86..8009198537f 100644
--- a/apps/docs/content/docs/platform/enterprise/scim/entra.mdx
+++ b/apps/docs/content/docs/platform/enterprise/scim/entra.mdx
@@ -5,6 +5,7 @@ description: Connect Microsoft Entra ID to Sim and verify user and group provisi
 
 import { Callout } from 'fumadocs-ui/components/callout'
 import { Step, Steps } from 'fumadocs-ui/components/steps'
+import { Image } from '@/components/ui/image'
 
 Use a non-gallery enterprise application in Microsoft Entra ID to create, update, and deactivate Sim members. Configure [single sign-on](/platform/enterprise/sso) separately for authentication.
 
@@ -48,7 +49,7 @@ In the new application's **Provisioning** page, select **New configuration**. Ch
 
 Select **Test connection**, then **Create** after the test succeeds. Entra adds the bearer prefix itself. A successful connection test verifies connectivity and authentication; continue with a test assignment to verify provisioning.
 
-![Entra provisioning connection settings with the deployment URL redacted and secret token masked](/static/enterprise/entra/connection.png)
+<Image src="/static/enterprise/entra/connection.png" alt="Entra provisioning connection settings with the deployment URL redacted and secret token masked" width={808} height={305} className="mx-auto h-auto w-full max-w-xl" />
 
 <Callout type="info">
   These steps use Entra's current provisioning experience. In the legacy experience, choose **Automatic** provisioning, enter the same credentials under **Admin Credentials**, test the connection, and save. See [Microsoft's SCIM configuration guide](https://learn.microsoft.com/en-us/entra/identity/app-provisioning/use-scim-to-provision-users-and-groups).
@@ -67,7 +68,7 @@ Under **Attribute mapping**, review the user mappings. The defaults map `userPri
 
 If **Mail** is empty, Entra omits the work email and Sim uses `userName` as the account email. That UPN must be a valid email address in a verified Sim domain.
 
-![Entra provisioning properties restricted to assigned users and groups](/static/enterprise/entra/scope.png)
+<Image src="/static/enterprise/entra/scope.png" alt="Entra provisioning properties restricted to assigned users and groups" width={810} height={250} className="mx-auto h-auto w-full max-w-xl" />
 </Step>
 
 </Steps>
@@ -76,7 +77,7 @@ If **Mail** is empty, Entra omits the work email and Sim uses `userName` as the
 
 Open **Provision on demand**, search for the assigned test user, and select **Provision**. Review the import, scope, matching, and action results. In Sim, confirm that the member appears under **Organization → Members** and that **Single sign-on → Provisioning → Activity** shows successful requests.
 
-![Successful on-demand user provisioning in Entra with account details redacted](/static/enterprise/entra/provision-user.png)
+<Image src="/static/enterprise/entra/provision-user.png" alt="Successful on-demand user provisioning in Entra with account details redacted" width={812} height={626} className="mx-auto h-auto w-full max-w-xl" />
 
 Change the test user's display name in Entra and provision them again. Confirm the new name in Sim. Repeating provisioning without changes should report that the source and target already match.
 
diff --git a/apps/docs/content/docs/platform/enterprise/scim/index.mdx b/apps/docs/content/docs/platform/enterprise/scim/index.mdx
index fe540d080cb..c75d13bbaf5 100644
--- a/apps/docs/content/docs/platform/enterprise/scim/index.mdx
+++ b/apps/docs/content/docs/platform/enterprise/scim/index.mdx
@@ -141,7 +141,7 @@ Mapping a permission group to a directory group switches that permission group t
 
 </Steps>
 
-<Image src="/static/enterprise/scim-provisioning.png" alt="Provisioning tab with an active SCIM connection, tokens, provisioning rules, group mappings, and recent activity" width={832} height={1284} />
+<Image src="/static/enterprise/scim-provisioning.png" alt="Provisioning tab with an active SCIM connection, tokens, provisioning rules, group mappings, and recent activity" width={832} height={1284} className="mx-auto h-auto w-full max-w-md" />
 
 ## How access is withdrawn
 
diff --git a/apps/docs/content/docs/platform/enterprise/scim/okta.mdx b/apps/docs/content/docs/platform/enterprise/scim/okta.mdx
index 1bbba4218cb..7fcd660cbd3 100644
--- a/apps/docs/content/docs/platform/enterprise/scim/okta.mdx
+++ b/apps/docs/content/docs/platform/enterprise/scim/okta.mdx
@@ -5,6 +5,7 @@ description: Connect a private Okta SCIM integration to Sim and verify user and
 
 import { Callout } from 'fumadocs-ui/components/callout'
 import { Step, Steps } from 'fumadocs-ui/components/steps'
+import { Image } from '@/components/ui/image'
 
 Use an Okta SCIM integration to create, update, and deactivate Sim members. This guide covers provisioning; configure [single sign-on](/platform/enterprise/sso) separately for authentication.
 
@@ -53,7 +54,7 @@ Select **Test API Credentials** and save after the test succeeds. A successful c
 
 The Header Auth template sends this field as the complete `Authorization` header. Entering only the token produces **A bearer token is required**.
 
-![Okta API integration with a successful credential test; the test deployment URL is redacted](/static/enterprise/okta/api-integration.png)
+<Image src="/static/enterprise/okta/api-integration.png" alt="Okta API integration with a successful credential test; the test deployment URL is redacted" width={1001} height={678} className="mx-auto h-auto w-full max-w-xl" />
 </Step>
 
 <Step>
@@ -63,7 +64,7 @@ Under **Provisioning → To App**, select **Edit**, enable **Create Users**, **U
 
 Use an email address from a verified Sim domain for the application username and primary email. Review the attribute mappings if your Okta usernames differ from users' email addresses.
 
-![Okta provisioning actions with Create Users, Update User Attributes, and Deactivate Users enabled, and Sync Password disabled](/static/enterprise/okta/provisioning-actions.png)
+<Image src="/static/enterprise/okta/provisioning-actions.png" alt="Okta provisioning actions with Create Users, Update User Attributes, and Deactivate Users enabled, and Sync Password disabled" width={1001} height={832} className="mx-auto h-auto w-full max-w-xl" />
 </Step>
 
 </Steps>
@@ -82,7 +83,7 @@ Okta deactivates users over SCIM; it does not send a SCIM DELETE. Sim suspends a
 
 Use separate groups for app assignment and Group Push. Okta does not support using the same group for both purposes. Assign the users to the app first. Under **Push Groups → Find groups by name**, select the group, leave **Push group memberships immediately** enabled, and save with **Create Group** selected for a new downstream group.
 
-![Okta Group Push selecting an engineering group and creating its downstream group in Sim](/static/enterprise/okta/group-push.png)
+<Image src="/static/enterprise/okta/group-push.png" alt="Okta Group Push selecting an engineering group and creating its downstream group in Sim" width={1001} height={927} className="mx-auto h-auto w-full max-w-xl" />
 
 Once the group appears under **Single sign-on → Provisioning → Group mappings** in Sim, map it to a workspace, permission group, or the organization admin role. Workspace access requires a workspace mapping. If name matching is enabled, Sim can automatically map matching permission groups.
 
diff --git a/apps/docs/content/docs/platform/enterprise/sso.mdx b/apps/docs/content/docs/platform/enterprise/sso.mdx
index d2396800960..828f2c8d47b 100644
--- a/apps/docs/content/docs/platform/enterprise/sso.mdx
+++ b/apps/docs/content/docs/platform/enterprise/sso.mdx
@@ -49,7 +49,7 @@ An organization can run several identity providers at once, each serving a diffe
 
 ### 3. Fill in the form
 
-<Image src="/static/enterprise/sso-form.png" alt="Sign-in tab showing the OIDC configuration form with advanced options collapsed" width={832} height={1095} />
+<Image src="/static/enterprise/sso-form.png" alt="Sign-in tab showing the OIDC configuration form with advanced options collapsed" width={832} height={1095} className="mx-auto h-auto w-full max-w-md" />
 
 **Fields required for both protocols:**
 
diff --git a/apps/docs/content/docs/platform/enterprise/usage-tracking.mdx b/apps/docs/content/docs/platform/enterprise/usage-tracking.mdx
index ccdd786d662..09e62e9b3af 100644
--- a/apps/docs/content/docs/platform/enterprise/usage-tracking.mdx
+++ b/apps/docs/content/docs/platform/enterprise/usage-tracking.mdx
@@ -17,7 +17,7 @@ All figures are in **credits** (1 credit = $0.005). See [cost calculation](/plat
 
 Go to **Settings → Organization → Usage tracking** in your workspace.
 
-<Image src="/static/enterprise/usage-tracking-overview.png" alt="Usage tracking Overview tab showing the period selector, credits used against the organization limit, a daily usage chart, and a Sources section pairing a ranked list of sources with a radar chart of the same mix" width={900} height={781} />
+<Image src="/static/enterprise/usage-tracking-overview.png" alt="Usage tracking Overview tab showing the period selector, credits used against the organization limit, a daily usage chart, and a Sources section pairing a ranked list of sources with a radar chart of the same mix" width={900} height={781} className="mx-auto h-auto w-full max-w-xl" />
 
 The period selector applies to every tab:
 
@@ -43,7 +43,7 @@ The period selector applies to every tab:
 
 Selecting a workspace opens its detail view, which splits that workspace's usage into **Sources** (what kind of work) and **Workflows** (the individual workflow runs). **Open logs** jumps to [audit logs](/platform/enterprise/audit-logs) filtered to that workspace.
 
-<Image src="/static/enterprise/usage-tracking-workspace-detail.png" alt="A workspace's detail view with a Sources section listing Sim Chat and Workflow, and a Workflows section ranking individual workflows by credits" width={900} height={598} />
+<Image src="/static/enterprise/usage-tracking-workspace-detail.png" alt="A workspace's detail view with a Sources section listing Sim Chat and Workflow, and a Workflows section ranking individual workflows by credits" width={900} height={598} className="mx-auto h-auto w-full max-w-xl" />
 
 **Sources** adds up to the workspace's total, while **Workflows** covers only the workflow-run part of it. In the example above, Sources totals 4,435 credits but the workflows list only accounts for the 161 credits under Workflow — the other 4,274 came from Chat, which no workflow produced.
 
diff --git a/apps/docs/content/docs/platform/enterprise/verified-domains.mdx b/apps/docs/content/docs/platform/enterprise/verified-domains.mdx
index 68df8d9618c..377a7e359ce 100644
--- a/apps/docs/content/docs/platform/enterprise/verified-domains.mdx
+++ b/apps/docs/content/docs/platform/enterprise/verified-domains.mdx
@@ -19,7 +19,7 @@ Verified Domains let organization owners and admins on Enterprise plans prove th
 
 Go to **Settings → Organization → Single sign-on → Domains**. The **Verified domains** section is shared by sign-in and directory provisioning.
 
-<Image src="/static/enterprise/sso-domains.png" loading="eager" alt="Domains tab showing a verified domain and the DNS record for a pending domain" width={832} height={663} />
+<Image src="/static/enterprise/sso-domains.png" loading="eager" alt="Domains tab showing a verified domain and the DNS record for a pending domain" width={832} height={663} className="mx-auto h-auto w-full max-w-xl" />
 
 1. Enter the domain, for example `acme.com`, and click **Add domain**.
 2. Sim shows a DNS **TXT record** to publish — a host (`_sim-challenge.acme.com`) and a unique value (`sim-domain-verification=…`).
diff --git a/apps/docs/content/docs/platform/enterprise/whitelabeling.mdx b/apps/docs/content/docs/platform/enterprise/whitelabeling.mdx
index 9d9c1d2905f..82f26eb4380 100644
--- a/apps/docs/content/docs/platform/enterprise/whitelabeling.mdx
+++ b/apps/docs/content/docs/platform/enterprise/whitelabeling.mdx
@@ -16,7 +16,7 @@ White-labeling lets you replace Sim's default branding — logo, colors, and sup
 
 Go to **Settings → Organization → White-labeling** in your workspace.
 
-<Image src="/static/enterprise/whitelabeling.png" alt="Whitelabeling settings showing brand identity fields (Logo, Wordmark, Brand name), color pickers for primary and accent colors, and link fields for support email and documentation URL" width={900} height={884} />
+<Image src="/static/enterprise/whitelabeling.png" alt="Whitelabeling settings showing brand identity fields (Logo, Wordmark, Brand name), color pickers for primary and accent colors, and link fields for support email and documentation URL" width={900} height={884} className="mx-auto h-auto w-full max-w-xl" />
 
 ### 2. Configure brand identity
 
diff --git a/apps/docs/content/docs/tables/workflow-columns.mdx b/apps/docs/content/docs/tables/workflow-columns.mdx
index daf9f76e629..86b9c8c44f4 100644
--- a/apps/docs/content/docs/tables/workflow-columns.mdx
+++ b/apps/docs/content/docs/tables/workflow-columns.mdx
@@ -42,6 +42,7 @@ The unit you configure is a **group**: something that runs once per row, fed by
   alt="The New column menu: Enrichments at the top, the plain column types, and Workflow at the bottom"
   width={340}
   height={351}
+  className="mx-auto h-auto w-full max-w-[340px]"
 />
 
 ### Enrichments
@@ -57,6 +58,7 @@ A **workflow group** runs one of your own [workflows](/workflows) per row — us
   alt="The Configure workflow panel for Lead Score Enrichment: a preview of the LeadScorer workflow, the workflow picker, three output columns selected, Auto-run on, and six Run after dependencies"
   width={400}
   height={634}
+  className="mx-auto h-auto w-full max-w-[360px]"
 />
 
 - **Workflow** picks which workflow runs per row; here, *Lead Score Enrichment*.
@@ -75,6 +77,7 @@ Everything from here applies to both kinds. A group's configuration is a set of
   alt="A group's bindings: the required Company domain input bound to the domain column, and the employee count and description outputs bound to their column names"
   width={380}
   height={499}
+  className="mx-auto h-auto w-full max-w-[380px]"
 />
 
 When a group runs a row, the bound column values become its inputs; it only sees the columns you mapped, the rest of the row is untouched, and inputs are read-only during the run. Every output you selected is written to its column, and outputs you didn't select are discarded.
@@ -126,6 +129,7 @@ Every value in a workflow column comes from a real workflow run, and each one is
   alt="A lead_score cell's menu: View execution, Re-run cell, insert and duplicate row actions, and Delete row"
   width={800}
   height={369}
+  className="mx-auto h-auto w-full max-w-xl"
 />
 
 **View execution** opens the run's trace: each block with its status, timing, and credit cost, the same view as the [Logs](/logs-debugging) page. Here, the row's score came from a 1.86s run of the LeadScorer workflow:
@@ -135,6 +139,7 @@ Every value in a workflow column comes from a real workflow run, and each one is
   alt="The Log Details trace for one row's run: Workflow Execution at 1.86s with Start and LeadScorer spans, marked Success"
   width={650}
   height={386}
+  className="mx-auto h-auto w-full max-w-xl"
 />
 
 **Re-run cell** runs the group again for just that row, replacing its values when the run finishes.
diff --git a/apps/docs/content/docs/workflows/deployment/api.mdx b/apps/docs/content/docs/workflows/deployment/api.mdx
index aaa272807a1..2eaf1b5e36b 100644
--- a/apps/docs/content/docs/workflows/deployment/api.mdx
+++ b/apps/docs/content/docs/workflows/deployment/api.mdx
@@ -13,7 +13,7 @@ Deploy your workflow as a REST API endpoint that any application can call direct
 
 Open your workflow and click **Deploy**. The **General** tab opens first and shows you the current deployment state:
 
-<Image src="/static/api-deployment/api-versions.png" alt="General tab of the Workflow Deployment modal showing a live workflow preview, a Versions table with v2 (live) and v1, and Undeploy / Update buttons" width={800} height={597} />
+<Image src="/static/api-deployment/api-versions.png" alt="General tab of the Workflow Deployment modal showing a live workflow preview, a Versions table with v2 (live) and v1, and Undeploy / Update buttons" width={800} height={597} className="mx-auto h-auto w-full max-w-xl" />
 
 The **General** tab contains:
 
@@ -37,7 +37,7 @@ POST https://sim.ai/api/v2/workflows/{workflow-id}/execute
 
 When you modify the workflow canvas after deploying, an **Update deployment** badge appears at the bottom of the screen as a reminder that your live version is out of date:
 
-<Image src="/static/api-deployment/api-update-button.png" alt="Canvas toolbar showing the Update and Run buttons with an Update deployment tooltip" width={400} height={186} />
+<Image src="/static/api-deployment/api-update-button.png" alt="Canvas toolbar showing the Update and Run buttons with an Update deployment tooltip" width={400} height={186} className="mx-auto h-auto w-full max-w-[240px]" />
 
 You can click the **Update** button directly from the canvas toolbar — you don't need to open the Deploy modal every time.
 
@@ -45,7 +45,7 @@ You can click the **Update** button directly from the canvas toolbar — you don
 
 Every time you deploy or update, a new version is recorded in the Versions table. You can manage past versions using the context menu (⋮) next to any row:
 
-<Image src="/static/api-deployment/api-versions-menu.png" alt="Versions table showing v2 (live) and v1 with a context menu open offering Rename, Add description, Promote to live, and Load deployment options" width={800} height={346} />
+<Image src="/static/api-deployment/api-versions-menu.png" alt="Versions table showing v2 (live) and v1 with a context menu open offering Rename, Add description, Promote to live, and Load deployment options" width={800} height={346} className="mx-auto h-auto w-full max-w-xl" />
 
 | Action | Description |
 |--------|-------------|
@@ -82,7 +82,7 @@ Rollback re-activates an existing deployment version — the same operation as *
 
 Switch to the **API** tab in the Deploy modal to see ready-to-use code for all three execution modes:
 
-<Image src="/static/api-deployment/api-tab.png" alt="API tab showing cURL, Python, JavaScript, and TypeScript language options, with Run workflow, Run workflow (stream response), and Run workflow (async) code sections" width={800} height={653} />
+<Image src="/static/api-deployment/api-tab.png" alt="API tab showing cURL, Python, JavaScript, and TypeScript language options, with Run workflow, Run workflow (stream response), and Run workflow (async) code sections" width={800} height={653} className="mx-auto h-auto w-full max-w-xl" />
 
 The language selector at the top lets you switch between **cURL**, **Python**, **JavaScript**, and **TypeScript**. Each mode — synchronous, streaming, and async — has its own code block that you can copy directly. The code is pre-filled with your workflow ID and a masked version of your API key.
 
@@ -106,7 +106,7 @@ curl -X POST https://sim.ai/api/v2/workflows/{workflow-id}/execute \
 
 Click **Edit API Info** to add a description and change the access mode:
 
-<Image src="/static/api-deployment/api-info.png" alt="Edit API Info modal with a Description textarea and an Access section toggling between API Key and Public modes" width={800} height={439} />
+<Image src="/static/api-deployment/api-info.png" alt="Edit API Info modal with a Description textarea and an Access section toggling between API Key and Public modes" width={800} height={439} className="mx-auto h-auto w-full max-w-md" />
 
 | Access Mode | Description |
 |-------------|-------------|
@@ -170,7 +170,7 @@ Stream the response token-by-token as it is generated. Add `"stream": true` to y
 
 Use the **Select outputs** dropdown in the API tab to choose which fields to stream:
 
-<Image src="/static/api-deployment/api-select-outputs.png" alt="Select outputs dropdown open showing Agent 1 block with selectable output fields: content, model, tokens, toolCalls, providerTiming, cost" width={800} height={677} />
+<Image src="/static/api-deployment/api-select-outputs.png" alt="Select outputs dropdown open showing Agent 1 block with selectable output fields: content, model, tokens, toolCalls, providerTiming, cost" width={800} height={677} className="mx-auto h-auto w-full max-w-xl" />
 
 The dropdown groups available outputs by block. The most common choice is `content` from an Agent block, which streams the generated text. You can select fields from multiple blocks simultaneously.
 
diff --git a/apps/docs/content/docs/workflows/deployment/chat.mdx b/apps/docs/content/docs/workflows/deployment/chat.mdx
index 404dfc509da..3238706fce6 100644
--- a/apps/docs/content/docs/workflows/deployment/chat.mdx
+++ b/apps/docs/content/docs/workflows/deployment/chat.mdx
@@ -21,7 +21,7 @@ Chat executions run against your workflow's active deployment snapshot. Publish
 
 Open your workflow, click **Deploy**, and select the **Chat** tab. You'll see the chat configuration panel:
 
-<Image src="/static/chat/chat-deploy-config.png" alt="Chat deployment configuration panel showing URL, Title, Output, Access control, and Welcome message fields" width={800} height={597} />
+<Image src="/static/chat/chat-deploy-config.png" alt="Chat deployment configuration panel showing URL, Title, Output, Access control, and Welcome message fields" width={800} height={597} className="mx-auto h-auto w-full max-w-xl" />
 
 Configure the following fields, then click **Launch Chat**:
 
@@ -37,13 +37,13 @@ Configure the following fields, then click **Launch Chat**:
 
 ### Output Selection
 
-<Image src="/static/chat/chat-deploy-output.png" alt="Output dropdown showing Agent 1 block with selectable fields: content, model, tokens, toolCalls, providerTiming, cost" width={800} height={358} />
+<Image src="/static/chat/chat-deploy-output.png" alt="Output dropdown showing Agent 1 block with selectable fields: content, model, tokens, toolCalls, providerTiming, cost" width={800} height={358} className="mx-auto h-auto w-full max-w-md" />
 
 The output dropdown groups available fields by block. For an Agent block, you can choose from `content`, `model`, `tokens`, `toolCalls`, `providerTiming`, and `cost`. In most cases, selecting `content` from the final Agent block is all you need — it streams the agent's text response directly to the user.
 
 ## Access Control
 
-<Image src="/static/chat/chat-deploy-access-email.png" alt="Access control section with Email tab selected, showing an Allowed emails field with @sim.ai domain added" width={800} height={386} />
+<Image src="/static/chat/chat-deploy-access-email.png" alt="Access control section with Email tab selected, showing an Allowed emails field with @sim.ai domain added" width={800} height={386} className="mx-auto h-auto w-full max-w-sm" />
 
 | Mode | Description |
 |------|-------------|
diff --git a/apps/docs/content/docs/workflows/deployment/index.mdx b/apps/docs/content/docs/workflows/deployment/index.mdx
index 332f55a515f..d97801d67bd 100644
--- a/apps/docs/content/docs/workflows/deployment/index.mdx
+++ b/apps/docs/content/docs/workflows/deployment/index.mdx
@@ -18,7 +18,7 @@ A **snapshot** is an immutable copy of your workflow taken at the moment you dep
 
 Each snapshot is recorded as a numbered **version** (v1, v2, and so on) in the Versions table, tagged with who deployed it and when. Versions are independent: one is live at a time, marked with a green dot, and the rest stay available to rename, describe, load back to the canvas, or promote. You publish v1 with **Deploy** and every later **Update** adds the next version.
 
-<Image src="/static/api-deployment/api-versions-menu.png" alt="Versions table with v2 live and the v1 menu open on Promote to live" width={700} height={303} />
+<Image src="/static/api-deployment/api-versions-menu.png" alt="Versions table with v2 live and the v1 menu open on Promote to live" width={700} height={303} className="mx-auto h-auto w-full max-w-xl" />
 
 ### Live version
 
diff --git a/apps/docs/content/docs/workflows/deployment/mcp.mdx b/apps/docs/content/docs/workflows/deployment/mcp.mdx
index 9da8a9c5820..45429ab3c20 100644
--- a/apps/docs/content/docs/workflows/deployment/mcp.mdx
+++ b/apps/docs/content/docs/workflows/deployment/mcp.mdx
@@ -40,7 +40,7 @@ MCP servers group your workflow tools together. Create and manage them in worksp
     alt="Add New MCP Server modal"
     width={550}
     height={371}
-    className="my-6"
+    className="my-6 mx-auto h-auto w-full max-w-md"
   />
 </div>
 
@@ -53,7 +53,7 @@ MCP servers group your workflow tools together. Create and manage them in worksp
     alt="MCP Server details view"
     width={700}
     height={491}
-    className="my-6"
+    className="my-6 mx-auto h-auto w-full max-w-xl"
   />
 </div>
 
@@ -120,7 +120,7 @@ Sim generates a ready-to-paste configuration for every supported client. To get
     alt="MCP client configuration panel"
     width={700}
     height={517}
-    className="my-6"
+    className="my-6 mx-auto h-auto w-full max-w-xl"
   />
 </div>