From 6081826853e6eb882c3903d462c1a52c37760545 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Thu, 14 May 2026 21:48:06 -0700
Subject: [PATCH] improvement(platform): integration block + connected
 credential pages, top-level skills route, sidebar+settings polish,
 integrations taxonomy rework, core block list

---
 apps/docs/components/icons.tsx                |   53 +-
 apps/docs/components/ui/icon-mapping.ts       |   44 -
 .../docs/en/{tools => blocks}/knowledge.mdx   |    0
 apps/docs/content/docs/en/blocks/meta.json    |    2 +
 .../docs/en/{tools => blocks}/table.mdx       |    0
 apps/docs/content/docs/en/tools/a2a.mdx       |  212 ---
 apps/docs/content/docs/en/tools/ahrefs.mdx    |    2 +-
 apps/docs/content/docs/en/tools/airtable.mdx  |    2 +-
 apps/docs/content/docs/en/tools/apify.mdx     |    2 +-
 apps/docs/content/docs/en/tools/arxiv.mdx     |    2 +-
 apps/docs/content/docs/en/tools/asana.mdx     |    2 +-
 .../docs/content/docs/en/tools/brightdata.mdx |    2 +-
 .../content/docs/en/tools/browser_use.mdx     |   80 --
 apps/docs/content/docs/en/tools/clay.mdx      |    2 +-
 .../docs/content/docs/en/tools/cloudwatch.mdx |   48 +
 .../docs/content/docs/en/tools/confluence.mdx |    2 +-
 apps/docs/content/docs/en/tools/dspy.mdx      |    2 +-
 .../content/docs/en/tools/elasticsearch.mdx   |   18 +-
 apps/docs/content/docs/en/tools/evernote.mdx  |    2 +-
 apps/docs/content/docs/en/tools/file.mdx      |   96 --
 apps/docs/content/docs/en/tools/github.mdx    |   17 -
 apps/docs/content/docs/en/tools/gitlab.mdx    |    2 +-
 apps/docs/content/docs/en/tools/gmail.mdx     |    2 +-
 .../docs/content/docs/en/tools/google_ads.mdx |    2 +-
 .../content/docs/en/tools/google_bigquery.mdx |    2 +-
 .../content/docs/en/tools/google_books.mdx    |    2 +-
 .../content/docs/en/tools/google_calendar.mdx |    2 +-
 .../content/docs/en/tools/google_contacts.mdx |    2 +-
 .../content/docs/en/tools/google_docs.mdx     |    2 +-
 .../content/docs/en/tools/google_drive.mdx    |    2 +-
 .../content/docs/en/tools/google_forms.mdx    |    2 +-
 .../content/docs/en/tools/google_maps.mdx     |    2 +-
 .../content/docs/en/tools/google_meet.mdx     |    2 +-
 .../docs/en/tools/google_pagespeed.mdx        |    2 +-
 .../content/docs/en/tools/google_search.mdx   |    2 +-
 .../content/docs/en/tools/google_sheets.mdx   |    2 +-
 .../content/docs/en/tools/google_slides.mdx   |    2 +-
 .../content/docs/en/tools/google_tasks.mdx    |    2 +-
 .../docs/en/tools/google_translate.mdx        |    2 +-
 apps/docs/content/docs/en/tools/grafana.mdx   |    2 +-
 apps/docs/content/docs/en/tools/greptile.mdx  |    2 +-
 apps/docs/content/docs/en/tools/hunter.mdx    |    2 +-
 .../content/docs/en/tools/image_generator.mdx |   68 -
 .../docs/content/docs/en/tools/incidentio.mdx |    2 +-
 apps/docs/content/docs/en/tools/intercom.mdx  |   19 +-
 apps/docs/content/docs/en/tools/jira.mdx      |    2 +-
 .../docs/en/tools/jira_service_management.mdx |    2 +-
 apps/docs/content/docs/en/tools/mailgun.mdx   |    2 +-
 apps/docs/content/docs/en/tools/memory.mdx    |  113 --
 apps/docs/content/docs/en/tools/meta.json     |   19 -
 .../docs/en/tools/microsoft_dataverse.mdx     |    2 +-
 .../content/docs/en/tools/microsoft_excel.mdx |    2 +-
 .../docs/en/tools/microsoft_planner.mdx       |    2 +-
 .../content/docs/en/tools/microsoft_teams.mdx |    2 +-
 apps/docs/content/docs/en/tools/mongodb.mdx   |   17 +-
 apps/docs/content/docs/en/tools/mysql.mdx     |  183 ---
 apps/docs/content/docs/en/tools/neo4j.mdx     |  213 ---
 apps/docs/content/docs/en/tools/onedrive.mdx  |    2 +-
 .../content/docs/en/tools/onepassword.mdx     |    2 +-
 apps/docs/content/docs/en/tools/outlook.mdx   |    2 +-
 .../content/docs/en/tools/parallel_ai.mdx     |    2 +-
 apps/docs/content/docs/en/tools/pinecone.mdx  |   17 -
 .../docs/content/docs/en/tools/postgresql.mdx |  205 ---
 apps/docs/content/docs/en/tools/posthog.mdx   |    2 +-
 apps/docs/content/docs/en/tools/pulse.mdx     |    2 +-
 apps/docs/content/docs/en/tools/qdrant.mdx    |   21 -
 apps/docs/content/docs/en/tools/redis.mdx     |   16 -
 apps/docs/content/docs/en/tools/s3.mdx        |   17 -
 .../docs/content/docs/en/tools/salesforce.mdx |    2 +-
 apps/docs/content/docs/en/tools/search.mdx    |   54 -
 apps/docs/content/docs/en/tools/sentry.mdx    |    2 +-
 apps/docs/content/docs/en/tools/sftp.mdx      |  184 ---
 .../docs/content/docs/en/tools/sharepoint.mdx |    2 +-
 apps/docs/content/docs/en/tools/smtp.mdx      |   73 --
 apps/docs/content/docs/en/tools/ssh.mdx       |  403 ------
 apps/docs/content/docs/en/tools/stt.mdx       |  212 ---
 apps/docs/content/docs/en/tools/supabase.mdx  |   24 -
 apps/docs/content/docs/en/tools/telegram.mdx  |    2 +-
 apps/docs/content/docs/en/tools/translate.mdx |   68 -
 apps/docs/content/docs/en/tools/tts.mdx       |  256 ----
 apps/docs/content/docs/en/tools/upstash.mdx   |   16 -
 .../content/docs/en/tools/video_generator.mdx |  192 ---
 apps/docs/content/docs/en/tools/vision.mdx    |   60 -
 apps/docs/content/docs/en/tools/wealthbox.mdx |    2 +-
 apps/docs/content/docs/en/tools/webflow.mdx   |    2 +-
 apps/docs/content/docs/en/tools/zendesk.mdx   |    2 +-
 .../content/docs/en/triggers/airtable.mdx     |    2 +-
 .../content/docs/en/triggers/confluence.mdx   |    2 +-
 apps/docs/content/docs/en/triggers/gmail.mdx  |    2 +-
 .../docs/en/triggers/google-calendar.mdx      |    2 +-
 .../content/docs/en/triggers/google-drive.mdx |    2 +-
 .../docs/en/triggers/google-sheets.mdx        |    2 +-
 .../content/docs/en/triggers/google_forms.mdx |    2 +-
 .../content/docs/en/triggers/intercom.mdx     |    2 +-
 apps/docs/content/docs/en/triggers/jira.mdx   |    2 +-
 .../docs/en/triggers/microsoft-teams.mdx      |    2 +-
 .../docs/content/docs/en/triggers/outlook.mdx |    2 +-
 .../content/docs/en/triggers/salesforce.mdx   |    2 +-
 .../content/docs/en/triggers/telegram.mdx     |    2 +-
 .../docs/content/docs/en/triggers/webflow.mdx |    2 +-
 .../(landing)/blog/[slug]/share-button.tsx    |   10 +-
 .../features/components/features-preview.tsx  |    2 +-
 .../landing-preview-home.tsx                  |  332 +++--
 .../landing-preview-logs.tsx                  |   17 +-
 .../landing-preview-panel.tsx                 |  310 +++--
 .../landing-preview-sidebar.tsx               |    4 +-
 .../[slug]/components/integration-faq.tsx     |    2 +-
 .../integrations/(shell)/[slug]/page.tsx      |   16 +-
 .../(landing)/integrations/(shell)/page.tsx   |   14 +-
 .../components/integration-card.tsx           |    2 +-
 .../components/integration-grid.tsx           |   42 +-
 .../integrations/data/icon-mapping.ts         |   41 -
 .../app/(landing)/integrations/data/index.ts  |   38 +
 .../integrations/data/integrations.json       | 1137 ++++------------
 .../integrations/data/templates.ts}           |    0
 .../app/(landing)/integrations/data/types.ts  |    6 +-
 apps/sim/app/_styles/globals.css              |    6 +-
 apps/sim/app/chat/components/input/input.tsx  |    2 +-
 .../message/components/file-download.tsx      |   20 +-
 .../app/chat/components/message/message.tsx   |   99 +-
 apps/sim/app/playground/page.tsx              |    2 -
 apps/sim/app/sitemap.ts                       |    4 +-
 apps/sim/app/templates/[id]/template.tsx      |   46 +-
 .../components/conversation-list-item.tsx     |   30 +-
 .../[workspaceId]/components/index.ts         |    1 +
 .../message-actions/message-actions.tsx       |   12 +-
 .../components/product-tour/index.ts          |    2 -
 .../components/product-tour/nav-tour-steps.ts |   76 --
 .../components/product-tour/product-tour.tsx  |   60 -
 .../components/product-tour/tour-shared.tsx   |  163 ---
 .../components/product-tour/use-tour.ts       |  236 ----
 .../product-tour/workflow-tour-steps.ts       |   56 -
 .../components/product-tour/workflow-tour.tsx |   59 -
 .../components/resource/resource.tsx          |    6 +-
 .../components/task-status-dot.tsx            |   61 +
 .../components/action-bar/action-bar.tsx      |    4 +-
 .../file-row-context-menu.tsx                 |    4 +-
 .../file-viewer/editor-context-menu.tsx       |    6 +-
 .../workspace/[workspaceId]/files/files.tsx   |    5 +-
 .../components/chat-context-kind-registry.tsx |    4 +-
 .../components/credits-chip/credits-chip.tsx  |   34 +
 .../home/components/credits-chip/index.ts     |    1 +
 .../[workspaceId]/home/components/index.ts    |    9 +-
 .../components/agent-group/agent-group.tsx    |   21 +-
 .../components/agent-group/tool-call-item.tsx |    2 +-
 .../components/special-tags/special-tags.tsx  |   36 +-
 .../thinking-block/thinking-block.tsx         |    4 +-
 .../message-content/message-content.tsx       |   18 +-
 .../mothership-chat-skeleton.tsx              |    2 +-
 .../mothership-chat/mothership-chat.tsx       |    4 +-
 .../resource-content/resource-content.tsx     |    7 +-
 .../resource-registry/resource-registry.tsx   |    8 +-
 .../components/suggested-actions/index.ts     |    1 +
 .../suggested-actions/suggested-actions.tsx   |  297 +++++
 .../home/components/template-prompts/index.ts |    3 -
 .../template-prompts/template-prompts.tsx     |  392 ------
 .../user-input/components/mic-button.tsx      |    4 +-
 .../components/plus-menu-dropdown.tsx         |   12 +-
 .../user-input/components/send-button.tsx     |    7 +-
 .../home/components/user-input/user-input.tsx |   34 +-
 .../app/workspace/[workspaceId]/home/home.tsx |   46 +-
 .../[block]/integration-block-detail.tsx      |  138 ++
 .../integrations/[block]/page.tsx             |   28 +
 .../components/integration-tabs-header.tsx    |   46 +
 .../components/integrations-showcase.tsx      |  119 ++
 .../components/showcase-with-explore.tsx      |   39 +
 .../connected-credential-detail.tsx           |  693 ++++++++++
 .../connected/[credentialId]/page.tsx         |   15 +
 .../fixtures/sample-credentials.ts            |  104 ++
 .../integrations.tsx}                         | 1161 +++++++++--------
 .../[workspaceId]/integrations/layout.tsx     |    3 +
 .../[workspaceId]/integrations/page.tsx       |    8 +
 .../chunk-context-menu/chunk-context-menu.tsx |    4 +-
 .../add-connector-modal.tsx                   |    2 +-
 .../knowledge-base-context-menu.tsx           |    4 +-
 .../app/workspace/[workspaceId]/layout.tsx    |    2 -
 .../execution-snapshot/execution-snapshot.tsx |    4 +-
 .../file-download/file-download.tsx           |   34 +-
 .../components/trace-view/trace-view.tsx      |    4 +-
 .../components/log-details/log-details.tsx    |    7 +-
 .../log-row-context-menu.tsx                  |    4 +-
 .../app/workspace/[workspaceId]/logs/logs.tsx |    4 +-
 .../settings/[section]/loading.tsx            |   15 -
 .../[workspaceId]/settings/[section]/page.tsx |    2 -
 .../settings/[section]/settings.tsx           |  212 +--
 .../components/admin/admin-skeleton.tsx       |   72 -
 .../settings/components/admin/admin.tsx       |    9 -
 .../components/api-keys/api-key-skeleton.tsx  |   56 -
 .../settings/components/api-keys/api-keys.tsx |   41 +-
 .../components/byok/byok-skeleton.tsx         |   45 -
 .../settings/components/byok/byok.tsx         |   11 +-
 .../components/copilot/copilot-skeleton.tsx   |   14 -
 .../settings/components/copilot/copilot.tsx   |   11 +-
 .../credential-sets-skeleton.tsx              |   41 -
 .../credential-sets/credential-sets.tsx       |   52 +-
 .../custom-tools/custom-tool-skeleton.tsx     |   38 -
 .../components/custom-tools/custom-tools.tsx  |   11 +-
 .../components/general/general-skeleton.tsx   |   63 -
 .../settings/components/general/general.tsx   |    3 +-
 .../components/inbox/inbox-settings-tab.tsx   |    7 +-
 .../components/inbox/inbox-skeleton.tsx       |   84 --
 .../components/inbox/inbox-task-list.tsx      |   11 +-
 .../settings/components/inbox/inbox.tsx       |    3 +-
 .../integrations/credential-skeleton.tsx      |   22 -
 .../integrations/integrations-skeleton.tsx    |   23 -
 .../components/integrations/integrations.tsx  |    9 -
 .../components/mcp/components/index.ts        |    1 -
 .../mcp-server-skeleton.tsx                   |   23 -
 .../settings/components/mcp/mcp-skeleton.tsx  |   21 -
 .../settings/components/mcp/mcp.tsx           |   12 +-
 .../components/mothership/mothership.tsx      |   44 +-
 .../deleted-item-skeleton.tsx                 |   17 -
 .../recently-deleted-skeleton.tsx             |   33 -
 .../recently-deleted/recently-deleted.tsx     |   11 +-
 .../components/secrets/secrets-manager.tsx    |   59 +-
 .../components/secrets/secrets-skeleton.tsx   |   49 -
 .../components/skills/skill-skeleton.tsx      |   14 -
 .../settings/components/skills/skills.tsx     |  200 ---
 .../components/subscription/subscription.tsx  |   67 +-
 .../team-seats-overview.tsx                   |   27 +-
 .../team-management/team-management.tsx       |   64 +-
 .../workflow-mcp-servers-skeleton.tsx         |    6 -
 .../workflow-mcp-servers.tsx                  |   21 +-
 .../[workspaceId]/settings/navigation.ts      |    7 +-
 .../skills/components/skill-import.tsx        |    5 +-
 .../skills/components/skill-modal.tsx         |    2 +-
 .../skills/components/utils.test.ts           |    0
 .../skills/components/utils.ts                |    0
 .../skills/fixtures/sample-skills.ts          |   57 +
 .../workspace/[workspaceId]/skills/layout.tsx |    3 +
 .../workspace/[workspaceId]/skills/page.tsx   |    8 +
 .../workspace/[workspaceId]/skills/skills.tsx |  238 ++++
 .../[workspaceId]/tables/[tableId]/table.tsx  |    4 +-
 .../table-context-menu/table-context-menu.tsx |    7 +-
 .../components/action-bar/action-bar.tsx      |   41 +-
 .../w/[workflowId]/components/chat/chat.tsx   |   43 +-
 .../components/command-list/command-list.tsx  |    1 -
 .../sub-block/components/code/code.tsx        |    9 +-
 .../components/skill-input/skill-input.tsx    |   29 +-
 .../panel/components/toolbar/toolbar.tsx      |    4 +-
 .../w/[workflowId]/components/panel/panel.tsx |   37 +-
 .../components/structured-output.tsx          |    2 +-
 .../components/output-panel/output-panel.tsx  |   46 +-
 .../components/terminal/terminal.tsx          |  108 +-
 .../[workflowId]/components/terminal/utils.ts |    2 +-
 .../workflow-controls/workflow-controls.tsx   |    3 +-
 .../[workspaceId]/w/[workflowId]/layout.tsx   |    2 -
 .../[workspaceId]/w/[workflowId]/workflow.tsx |    6 +-
 .../collapsed-sidebar-menu.tsx                |  251 ++--
 .../nav-item-context-menu.tsx                 |    4 +-
 .../search-modal/components/command-items.tsx |   34 +-
 .../components/search-modal/search-modal.tsx  |  118 +-
 .../sidebar/components/search-modal/utils.ts  |    6 +-
 .../settings-sidebar/settings-sidebar.tsx     |  267 ++--
 .../usage-indicator/usage-indicator.tsx       |   16 +-
 .../components/context-menu/context-menu.tsx  |   50 +-
 .../components/folder-item/folder-item.tsx    |    8 +-
 .../workflow-item/workflow-item.tsx           |    8 +-
 .../workflow-list/workflow-list.tsx           |    4 +-
 .../workspace-header/workspace-header.tsx     |  805 +++++-------
 .../w/components/sidebar/constants.ts         |   24 +
 .../sidebar/hooks/use-workspace-management.ts |    2 +-
 .../w/components/sidebar/sidebar.tsx          |  605 ++++-----
 .../w/components/sidebar/utils.ts             |   13 +-
 apps/sim/blocks/blocks/a2a.ts                 |    4 +-
 apps/sim/blocks/blocks/ahrefs.ts              |    2 +-
 apps/sim/blocks/blocks/airtable.ts            |    2 +-
 apps/sim/blocks/blocks/api.ts                 |    2 +-
 apps/sim/blocks/blocks/apify.ts               |    2 +-
 apps/sim/blocks/blocks/arxiv.ts               |    2 +-
 apps/sim/blocks/blocks/asana.ts               |    2 +-
 apps/sim/blocks/blocks/attio.ts               |    2 +-
 apps/sim/blocks/blocks/box.ts                 |    2 +-
 apps/sim/blocks/blocks/brightdata.ts          |    2 +-
 apps/sim/blocks/blocks/browser_use.ts         |    2 +-
 apps/sim/blocks/blocks/clay.ts                |    2 +-
 apps/sim/blocks/blocks/cloudflare.ts          |    2 +-
 apps/sim/blocks/blocks/cloudformation.ts      |    2 +-
 apps/sim/blocks/blocks/cloudwatch.ts          |    2 +-
 apps/sim/blocks/blocks/confluence.ts          |    2 +-
 apps/sim/blocks/blocks/cursor.ts              |    2 +-
 apps/sim/blocks/blocks/dagster.ts             |    2 +-
 apps/sim/blocks/blocks/datadog.ts             |    2 +-
 apps/sim/blocks/blocks/devin.ts               |    2 +-
 apps/sim/blocks/blocks/dropbox.ts             |    2 +-
 apps/sim/blocks/blocks/dspy.ts                |    2 +-
 apps/sim/blocks/blocks/dub.ts                 |    2 +-
 apps/sim/blocks/blocks/elasticsearch.ts       |    2 +-
 apps/sim/blocks/blocks/evaluator.ts           |    2 +-
 apps/sim/blocks/blocks/evernote.ts            |    2 +-
 apps/sim/blocks/blocks/file.ts                |    8 +-
 apps/sim/blocks/blocks/gamma.ts               |    2 +-
 apps/sim/blocks/blocks/github.ts              |    4 +-
 apps/sim/blocks/blocks/gitlab.ts              |    4 +-
 apps/sim/blocks/blocks/gmail.ts               |    2 +-
 apps/sim/blocks/blocks/google.ts              |    2 +-
 apps/sim/blocks/blocks/google_ads.ts          |    2 +-
 apps/sim/blocks/blocks/google_bigquery.ts     |    2 +-
 apps/sim/blocks/blocks/google_books.ts        |    2 +-
 apps/sim/blocks/blocks/google_calendar.ts     |    2 +-
 apps/sim/blocks/blocks/google_contacts.ts     |    2 +-
 apps/sim/blocks/blocks/google_docs.ts         |    2 +-
 apps/sim/blocks/blocks/google_drive.ts        |    4 +-
 apps/sim/blocks/blocks/google_forms.ts        |    2 +-
 apps/sim/blocks/blocks/google_maps.ts         |    4 +-
 apps/sim/blocks/blocks/google_meet.ts         |    2 +-
 apps/sim/blocks/blocks/google_pagespeed.ts    |    2 +-
 apps/sim/blocks/blocks/google_sheets.ts       |    4 +-
 apps/sim/blocks/blocks/google_slides.ts       |    2 +-
 apps/sim/blocks/blocks/google_tasks.ts        |    2 +-
 apps/sim/blocks/blocks/google_translate.ts    |    2 +-
 apps/sim/blocks/blocks/grafana.ts             |    4 +-
 apps/sim/blocks/blocks/greptile.ts            |    4 +-
 apps/sim/blocks/blocks/hubspot.ts             |    2 +-
 apps/sim/blocks/blocks/hunter.ts              |    2 +-
 apps/sim/blocks/blocks/iam.ts                 |    2 +-
 apps/sim/blocks/blocks/image_generator.ts     |    2 +-
 apps/sim/blocks/blocks/incidentio.ts          |    4 +-
 apps/sim/blocks/blocks/intercom.ts            |    6 +-
 apps/sim/blocks/blocks/jira.ts                |    2 +-
 .../blocks/blocks/jira_service_management.ts  |    4 +-
 apps/sim/blocks/blocks/langsmith.ts           |    2 +-
 apps/sim/blocks/blocks/launchdarkly.ts        |    2 +-
 apps/sim/blocks/blocks/mailgun.ts             |    2 +-
 apps/sim/blocks/blocks/mcp.ts                 |    4 +-
 apps/sim/blocks/blocks/microsoft_dataverse.ts |    2 +-
 apps/sim/blocks/blocks/microsoft_excel.ts     |    4 +-
 apps/sim/blocks/blocks/microsoft_planner.ts   |    2 +-
 apps/sim/blocks/blocks/microsoft_teams.ts     |    2 +-
 apps/sim/blocks/blocks/mongodb.ts             |    2 +-
 apps/sim/blocks/blocks/mysql.ts               |    4 +-
 apps/sim/blocks/blocks/neo4j.ts               |    2 +-
 apps/sim/blocks/blocks/onedrive.ts            |    4 +-
 apps/sim/blocks/blocks/onepassword.ts         |    2 +-
 apps/sim/blocks/blocks/outlook.ts             |    2 +-
 apps/sim/blocks/blocks/pagerduty.ts           |    2 +-
 apps/sim/blocks/blocks/parallel.ts            |    2 +-
 apps/sim/blocks/blocks/pipedrive.ts           |    2 +-
 apps/sim/blocks/blocks/postgresql.ts          |    2 +-
 apps/sim/blocks/blocks/posthog.ts             |    2 +-
 apps/sim/blocks/blocks/pulse.ts               |    2 +-
 apps/sim/blocks/blocks/quiver.ts              |    2 +-
 apps/sim/blocks/blocks/revenuecat.ts          |    2 +-
 apps/sim/blocks/blocks/rootly.ts              |    2 +-
 apps/sim/blocks/blocks/s3.ts                  |    2 +-
 apps/sim/blocks/blocks/salesforce.ts          |    4 +-
 apps/sim/blocks/blocks/sap_concur.ts          |    2 +-
 apps/sim/blocks/blocks/sap_s4hana.ts          |    2 +-
 apps/sim/blocks/blocks/search.ts              |    2 +-
 apps/sim/blocks/blocks/secrets_manager.ts     |    2 +-
 apps/sim/blocks/blocks/sentry.ts              |    4 +-
 apps/sim/blocks/blocks/servicenow.ts          |    2 +-
 apps/sim/blocks/blocks/sftp.ts                |    4 +-
 apps/sim/blocks/blocks/sharepoint.ts          |    2 +-
 apps/sim/blocks/blocks/shopify.ts             |    2 +-
 apps/sim/blocks/blocks/smtp.ts                |    2 +-
 apps/sim/blocks/blocks/sqs.ts                 |    2 +-
 apps/sim/blocks/blocks/ssh.ts                 |    4 +-
 apps/sim/blocks/blocks/stripe.ts              |    2 +-
 apps/sim/blocks/blocks/stt.ts                 |    2 +-
 apps/sim/blocks/blocks/telegram.ts            |    2 +-
 apps/sim/blocks/blocks/translate.ts           |    2 +-
 apps/sim/blocks/blocks/tts.ts                 |    2 +-
 apps/sim/blocks/blocks/vercel.ts              |    2 +-
 apps/sim/blocks/blocks/video_generator.ts     |    2 +-
 apps/sim/blocks/blocks/vision.ts              |    2 +-
 apps/sim/blocks/blocks/wealthbox.ts           |    4 +-
 apps/sim/blocks/blocks/webflow.ts             |    4 +-
 apps/sim/blocks/blocks/wordpress.ts           |    2 +-
 apps/sim/blocks/blocks/zendesk.ts             |    4 +-
 apps/sim/blocks/core.ts                       |   51 +
 apps/sim/blocks/registry.ts                   |    4 +-
 apps/sim/blocks/types.ts                      |   41 +-
 .../emcn/components/button/button.tsx         |    1 +
 .../emcn/components/code/copy-code-button.tsx |    4 +-
 .../emcn/components/combobox/combobox.tsx     |   36 +-
 .../dropdown-menu/dropdown-menu.tsx           |  173 ++-
 apps/sim/components/emcn/components/index.ts  |    2 +-
 .../emcn/components/popover/popover.tsx       |   10 +-
 .../emcn/components/s-modal/s-modal.tsx       |    2 +-
 .../secret-reveal/secret-reveal.tsx           |   10 +-
 .../emcn/components/tooltip/tooltip.tsx       |    2 +-
 .../components/tour-tooltip/tour-tooltip.tsx  |  228 ----
 .../emcn/icons/animate/copy.module.css        |   74 --
 apps/sim/components/emcn/icons/arrow-down.tsx |    2 +-
 apps/sim/components/emcn/icons/arrow-left.tsx |    2 +-
 .../sim/components/emcn/icons/arrow-right.tsx |    2 +-
 .../components/emcn/icons/arrow-up-down.tsx   |    2 +-
 apps/sim/components/emcn/icons/arrow-up.tsx   |    2 +-
 apps/sim/components/emcn/icons/asterisk.tsx   |    2 +-
 apps/sim/components/emcn/icons/bell.tsx       |    2 +-
 apps/sim/components/emcn/icons/book-open.tsx  |    2 +-
 apps/sim/components/emcn/icons/bug.tsx        |    2 +-
 apps/sim/components/emcn/icons/calendar.tsx   |    2 +-
 apps/sim/components/emcn/icons/check.tsx      |    2 +-
 .../components/emcn/icons/chevron-down.tsx    |    2 +-
 .../components/emcn/icons/clipboard-list.tsx  |    2 +-
 apps/sim/components/emcn/icons/clock.tsx      |   26 +
 apps/sim/components/emcn/icons/columns2.tsx   |    2 +-
 apps/sim/components/emcn/icons/columns3.tsx   |    2 +-
 apps/sim/components/emcn/icons/copy.tsx       |   52 -
 apps/sim/components/emcn/icons/credit.tsx     |   26 +
 apps/sim/components/emcn/icons/cursor.tsx     |    2 +-
 apps/sim/components/emcn/icons/database-x.tsx |    2 +-
 apps/sim/components/emcn/icons/database.tsx   |    2 +-
 apps/sim/components/emcn/icons/download.tsx   |    2 +-
 apps/sim/components/emcn/icons/duplicate.tsx  |   18 +-
 apps/sim/components/emcn/icons/expand.tsx     |    8 +-
 apps/sim/components/emcn/icons/eye.tsx        |   22 +-
 apps/sim/components/emcn/icons/file-x.tsx     |    2 +-
 apps/sim/components/emcn/icons/file.tsx       |    2 +-
 apps/sim/components/emcn/icons/files.tsx      |   27 +
 .../sim/components/emcn/icons/fingerprint.tsx |    2 +-
 .../sim/components/emcn/icons/folder-plus.tsx |    6 +-
 apps/sim/components/emcn/icons/hammer.tsx     |    2 +-
 apps/sim/components/emcn/icons/hand.tsx       |    8 +-
 .../sim/components/emcn/icons/help-circle.tsx |    2 +-
 apps/sim/components/emcn/icons/hex-simple.tsx |    4 +-
 apps/sim/components/emcn/icons/home.tsx       |    2 +-
 apps/sim/components/emcn/icons/image-up.tsx   |   29 +
 apps/sim/components/emcn/icons/index.ts       |    8 +-
 .../sim/components/emcn/icons/integration.tsx |    9 +-
 apps/sim/components/emcn/icons/key-square.tsx |    2 +-
 apps/sim/components/emcn/icons/key.tsx        |    2 +-
 apps/sim/components/emcn/icons/layout.tsx     |    2 +-
 apps/sim/components/emcn/icons/library.tsx    |    2 +-
 apps/sim/components/emcn/icons/link.tsx       |    2 +-
 .../sim/components/emcn/icons/list-filter.tsx |    2 +-
 apps/sim/components/emcn/icons/loader.tsx     |    2 +-
 apps/sim/components/emcn/icons/lock.tsx       |    2 +-
 apps/sim/components/emcn/icons/log-in.tsx     |    2 +-
 apps/sim/components/emcn/icons/log-out.tsx    |    2 +-
 apps/sim/components/emcn/icons/mail.tsx       |    2 +-
 apps/sim/components/emcn/icons/mic.tsx        |   27 +
 apps/sim/components/emcn/icons/no-wrap.tsx    |    2 +-
 apps/sim/components/emcn/icons/palette.tsx    |    2 +-
 apps/sim/components/emcn/icons/panel-left.tsx |    2 +-
 apps/sim/components/emcn/icons/paperclip.tsx  |   25 +
 apps/sim/components/emcn/icons/pause.tsx      |    2 +-
 apps/sim/components/emcn/icons/pencil.tsx     |    6 +-
 apps/sim/components/emcn/icons/play.tsx       |    2 +-
 apps/sim/components/emcn/icons/plus.tsx       |    2 +-
 apps/sim/components/emcn/icons/redo.tsx       |    4 +-
 apps/sim/components/emcn/icons/refresh-cw.tsx |    2 +-
 apps/sim/components/emcn/icons/rocket.tsx     |    2 +-
 apps/sim/components/emcn/icons/rows3.tsx      |    2 +-
 apps/sim/components/emcn/icons/search.tsx     |    2 +-
 apps/sim/components/emcn/icons/send.tsx       |    2 +-
 apps/sim/components/emcn/icons/server.tsx     |    2 +-
 apps/sim/components/emcn/icons/settings.tsx   |    2 +-
 .../components/emcn/icons/shield-check.tsx    |    2 +-
 .../emcn/icons/square-arrow-up-right.tsx      |    2 +-
 apps/sim/components/emcn/icons/table-x.tsx    |    2 +-
 apps/sim/components/emcn/icons/table.tsx      |    2 +-
 apps/sim/components/emcn/icons/tag.tsx        |    2 +-
 apps/sim/components/emcn/icons/task.tsx       |   26 +
 .../sim/components/emcn/icons/thumbs-down.tsx |    2 +-
 apps/sim/components/emcn/icons/thumbs-up.tsx  |    2 +-
 .../components/emcn/icons/trash-outline.tsx   |    2 +-
 .../components/emcn/icons/type-boolean.tsx    |    2 +-
 apps/sim/components/emcn/icons/type-json.tsx  |    2 +-
 .../sim/components/emcn/icons/type-number.tsx |    2 +-
 apps/sim/components/emcn/icons/type-text.tsx  |    2 +-
 apps/sim/components/emcn/icons/undo.tsx       |    4 +-
 apps/sim/components/emcn/icons/unlock.tsx     |    2 +-
 apps/sim/components/emcn/icons/upload.tsx     |    8 +-
 apps/sim/components/emcn/icons/user-plus.tsx  |   14 +-
 apps/sim/components/emcn/icons/user.tsx       |    2 +-
 apps/sim/components/emcn/icons/users.tsx      |    2 +-
 apps/sim/components/emcn/icons/workflow-x.tsx |    2 +-
 apps/sim/components/emcn/icons/wrap.tsx       |    2 +-
 apps/sim/components/emcn/icons/wrench.tsx     |    2 +-
 apps/sim/components/emcn/icons/x.tsx          |    2 +-
 apps/sim/components/emcn/icons/zoom-in.tsx    |    8 +-
 apps/sim/components/emcn/icons/zoom-out.tsx   |    6 +-
 apps/sim/components/icons.tsx                 |   30 +-
 .../components/access-control.tsx             |   48 +-
 .../components/audit-logs-skeleton.tsx        |   27 -
 .../ee/audit-logs/components/audit-logs.tsx   |   19 +-
 apps/sim/ee/sso/components/sso-settings.tsx   |   23 +-
 apps/sim/hooks/queries/tasks.ts               |   37 +-
 apps/sim/hooks/queries/workspace.ts           |    2 +-
 apps/sim/lib/posthog/events.ts                |   13 -
 apps/sim/lib/workflows/colors.ts              |   75 +-
 apps/sim/package.json                         |    1 -
 apps/sim/stores/modals/search/store.ts        |    2 +-
 apps/sim/tailwind.config.ts                   |   12 +-
 bun.lock                                      |   35 +-
 scripts/generate-docs.ts                      |  368 ++----
 489 files changed, 5761 insertions(+), 10197 deletions(-)
 rename apps/docs/content/docs/en/{tools => blocks}/knowledge.mdx (100%)
 rename apps/docs/content/docs/en/{tools => blocks}/table.mdx (100%)
 delete mode 100644 apps/docs/content/docs/en/tools/a2a.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/browser_use.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/file.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/image_generator.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/memory.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/mysql.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/neo4j.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/postgresql.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/search.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/sftp.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/smtp.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/ssh.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/stt.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/translate.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/tts.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/video_generator.mdx
 delete mode 100644 apps/docs/content/docs/en/tools/vision.mdx
 create mode 100644 apps/sim/app/(landing)/integrations/data/index.ts
 rename apps/sim/app/{workspace/[workspaceId]/home/components/template-prompts/consts.ts => (landing)/integrations/data/templates.ts} (100%)
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/components/product-tour/index.ts
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/components/product-tour/nav-tour-steps.ts
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/components/product-tour/product-tour.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/components/product-tour/tour-shared.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/components/product-tour/use-tour.ts
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/components/product-tour/workflow-tour-steps.ts
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/components/product-tour/workflow-tour.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/components/task-status-dot.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/credits-chip/credits-chip.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/credits-chip/index.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/index.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/index.ts
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/template-prompts.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/integrations/[block]/page.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/integrations/components/integration-tabs-header.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/integrations/connected/[credentialId]/connected-credential-detail.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/integrations/connected/[credentialId]/page.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/integrations/fixtures/sample-credentials.ts
 rename apps/sim/app/workspace/[workspaceId]/{settings/components/integrations/integrations-manager.tsx => integrations/integrations.tsx} (54%)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/integrations/layout.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/integrations/page.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/[section]/loading.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/integrations/credential-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/secrets/secrets-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/skills/skill-skeleton.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/skills/skills.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers-skeleton.tsx
 rename apps/sim/app/workspace/[workspaceId]/{settings/components => }/skills/components/skill-import.tsx (98%)
 rename apps/sim/app/workspace/[workspaceId]/{settings/components => }/skills/components/skill-modal.tsx (98%)
 rename apps/sim/app/workspace/[workspaceId]/{settings/components => }/skills/components/utils.test.ts (100%)
 rename apps/sim/app/workspace/[workspaceId]/{settings/components => }/skills/components/utils.ts (100%)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/skills/fixtures/sample-skills.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/skills/layout.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/skills/page.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/skills/skills.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/constants.ts
 create mode 100644 apps/sim/blocks/core.ts
 delete mode 100644 apps/sim/components/emcn/components/tour-tooltip/tour-tooltip.tsx
 delete mode 100644 apps/sim/components/emcn/icons/animate/copy.module.css
 create mode 100644 apps/sim/components/emcn/icons/clock.tsx
 delete mode 100644 apps/sim/components/emcn/icons/copy.tsx
 create mode 100644 apps/sim/components/emcn/icons/credit.tsx
 create mode 100644 apps/sim/components/emcn/icons/files.tsx
 create mode 100644 apps/sim/components/emcn/icons/image-up.tsx
 create mode 100644 apps/sim/components/emcn/icons/mic.tsx
 create mode 100644 apps/sim/components/emcn/icons/paperclip.tsx
 create mode 100644 apps/sim/components/emcn/icons/task.tsx
 delete mode 100644 apps/sim/ee/audit-logs/components/audit-logs-skeleton.tsx

diff --git a/apps/docs/components/icons.tsx b/apps/docs/components/icons.tsx
index 9be42a362eb..dcc5b4dfbec 100644
--- a/apps/docs/components/icons.tsx
+++ b/apps/docs/components/icons.tsx
@@ -1909,9 +1909,7 @@ export function ConfluenceIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
       {...props}
-      width='24'
-      height='24'
-      viewBox='0 3 21 24'
+      viewBox='-0.5 4.25 24 24'
       focusable='false'
       fill='none'
       aria-hidden='true'
@@ -2282,9 +2280,7 @@ export function JiraIcon(props: SVGProps<SVGSVGElement>) {
     <svg
       {...props}
       xmlns='http://www.w3.org/2000/svg'
-      viewBox='0 0 30 30'
-      width='24'
-      height='24'
+      viewBox='3.5 4.5 25 25'
       focusable='false'
       aria-hidden='true'
     >
@@ -4084,7 +4080,7 @@ export function PipedriveIcon(props: SVGProps<SVGSVGElement>) {
         fillRule='evenodd'
       >
         <g transform='translate(67, 44)'>
-          <use fill='#FFFFFF' xlinkHref={`#${pathId}`} />
+          <use fill='currentColor' xlinkHref={`#${pathId}`} />
         </g>
       </g>
     </svg>
@@ -5640,12 +5636,22 @@ export function GreenhouseIcon(props: SVGProps<SVGSVGElement>) {
 
 export function GreptileIcon(props: SVGProps<SVGSVGElement>) {
   return (
-    <svg {...props} viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
+    <svg {...props} viewBox='0 0 367 420' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path
-        clipRule='evenodd'
-        fillRule='evenodd'
-        fill='#44A775'
-        d='M3.35.004a6.07 6.07 0 01-.265.05C2.63.12 2.09.348 1.71.63 1.43.846.72 1.58.557 1.82a3.36 3.36 0 00-.23 3.3c.154.32.35.59.71.97.187.2.434.49.55.64a6.63 6.63 0 11.31 3.55c.1.14.035 1.61.057 3.26.043 3.27.038 3.18.2 3.49.266.49.94.79 1.47.648.29-.77.46-.204 1.35-.986.96-.84 1.09-.932 1.45-.98.12-.17.63 0 1.66.05 1.51.08 1.62.079 1.85-.16.39-.164.54-.4.66-1.07.247-1.36 1.3-2.56 2.64-3.02.116-.4.37-.104.57-.144.2-.4.43-.102.51-.138.3-.136.51-.424.57-.744.02-.11-.007-.549-.089-1.6-.091-1.18-.107-1.48-.083-1.62.057-.342.14-.46 1.01-1.45.447-.506.85-.976.9-1.04.262-.39.29-.91.07-1.34a1.44 1.44 0 00-.822-.67c-.1-.029-.834-.037-3.54-.038H9.9l-.335-.063c-.958-.179-1.76-.49-2.48-.958-.362-.236-.583-.41-1.02-.804-.408-.37-.59-.502-.921-.67A3.02 3.02 0 3.74.005a3.94 3.94 0 00-.391 0zm15.73 5.86c-.132.05-.217.13-.48.44-.592.71-.74 1.34-.531 2.26.106.47.163.57.361.67.105.05.169.06 2.64.046l2.53-.9.12-.063a.551.55 0 0.1-.895 184.88 184.88 0 00-2.22-1.25c-2.29-1.28-2.28-1.28-2.51-1.19zm-3.22 6.71a9.26 9.26 0 00-1.36.696c-.844.56-1.45 1.36-1.92 2.53-.211.53-.202.75.4.93.111.09 6.48 3.14 6.67 3.2.153.05.27.03.43-.074a.538.54 0 00.24-.434c0-.06-.03-.18-.065-.264-.156-.368-3.1-6.47-3.16-6.54-.168-.222-.394-.232-.867-.042zm-8.48 5.46c-.453.1-.83.32-1.28.745-.296.28-.336.47-.167.8.53.1.61 1.1 1.24 2.22 1.3 2.32 1.22 2.21 1.56 2.2.152-.2.2-.15.3-.084a.662.66 0 0.17-.193c.058-.11.06-.152.08-2.59.018-1.93.02-2.51-.011-2.61a.569.57 0 00-.138-.227c-.09-.091-.14-.112-.406-.176-.582-.138-.992-.165-1.34-.088z'
+        d='M240.269 49.8154L166.804 115.963L115.966 159.44L181.335 220.585L249.784 162.048L196.78 112.47L253.068 61.7881L362.605 164.246L178.739 321.489L3.14502 157.242L187.011 0L240.269 49.8154Z'
+        fill='#28E99F'
+      />
+      <rect
+        width='236.453'
+        height='83.4566'
+        transform='matrix(0.75471 -0.656059 0 1 188.017 336.544)'
+        fill='#28E99F'
+      />
+      <rect
+        width='236.453'
+        height='83.4566'
+        transform='matrix(0.731354 0.681998 0 1 0 174.962)'
+        fill='#28E99F'
       />
     </svg>
   )
@@ -6849,3 +6855,26 @@ export function HexIcon(props: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+
+export function BigQueryIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <path
+        fill='#4386FA'
+        d='M12 2.5a9.5 9.5 0 1 0 5.81 17.02l3.4 3.4a1 1 0 0 0 1.41-1.42l-3.4-3.4A9.5 9.5 0 0 0 12 2.5Zm0 2a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Z'
+      />
+      <path fill='#4386FA' d='M8 11h1.6v4H8v-4Zm3 -2h1.6v6H11V9Zm3 1.5h1.6V15H14v-3.5Z' />
+    </svg>
+  )
+}
+
+export function SnowflakeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <path
+        fill='#29B5E8'
+        d='M12 2a1 1 0 0 1 1 1v3.59l2.3-2.3a1 1 0 1 1 1.4 1.42L13 9.41V12h2.6l3.7-3.7a1 1 0 0 1 1.4 1.4L18.42 12H22a1 1 0 1 1 0 2h-3.59l2.3 2.3a1 1 0 0 1-1.4 1.4L15.58 14H13v2.59l3.7 3.7a1 1 0 1 1-1.4 1.4L13 19.42V23a1 1 0 1 1-2 0v-3.58l-2.3 2.3a1 1 0 1 1-1.4-1.4l3.7-3.71V14H8.4l-3.7 3.7a1 1 0 0 1-1.4-1.4L5.58 14H2a1 1 0 0 1 0-2h3.59l-2.3-2.3a1 1 0 0 1 1.4-1.4L8.42 12H11V9.41L7.3 5.71a1 1 0 1 1 1.4-1.42l2.3 2.3V3a1 1 0 0 1 1-1Z'
+      />
+    </svg>
+  )
+}
diff --git a/apps/docs/components/ui/icon-mapping.ts b/apps/docs/components/ui/icon-mapping.ts
index 609f37382d7..ef028fe9af5 100644
--- a/apps/docs/components/ui/icon-mapping.ts
+++ b/apps/docs/components/ui/icon-mapping.ts
@@ -4,7 +4,6 @@
 
 import type { ComponentType, SVGProps } from 'react'
 import {
-  A2AIcon,
   AgentMailIcon,
   AgentPhoneIcon,
   AgiloftIcon,
@@ -22,13 +21,10 @@ import {
   AttioIcon,
   AzureIcon,
   BoxCompanyIcon,
-  BrainIcon,
   BrandfetchIcon,
   BrightDataIcon,
-  BrowserUseIcon,
   CalComIcon,
   CalendlyIcon,
-  CirclebackIcon,
   ClayIcon,
   ClerkIcon,
   CloudFormationIcon,
@@ -42,7 +38,6 @@ import {
   DatadogIcon,
   DevinIcon,
   DiscordIcon,
-  DocumentIcon,
   DocuSignIcon,
   DropboxIcon,
   DsPyIcon,
@@ -56,7 +51,6 @@ import {
   EvernoteIcon,
   ExaAIIcon,
   ExtendIcon,
-  EyeIcon,
   FathomIcon,
   FirecrawlIcon,
   FirefliesIcon,
@@ -94,7 +88,6 @@ import {
   HunterIOIcon,
   IAMIcon,
   IdentityCenterIcon,
-  ImageIcon,
   IncidentioIcon,
   InfisicalIcon,
   IntercomIcon,
@@ -113,7 +106,6 @@ import {
   LumaIcon,
   MailchimpIcon,
   MailgunIcon,
-  MailServerIcon,
   Mem0Icon,
   MicrosoftDataverseIcon,
   MicrosoftExcelIcon,
@@ -124,15 +116,12 @@ import {
   MistralIcon,
   MondayIcon,
   MongoDBIcon,
-  MySQLIcon,
-  Neo4jIcon,
   NotionIcon,
   ObsidianIcon,
   OktaIcon,
   OnePasswordIcon,
   OpenAIIcon,
   OutlookIcon,
-  PackageSearchIcon,
   PagerDutyIcon,
   ParallelIcon,
   PeopleDataLabsIcon,
@@ -140,7 +129,6 @@ import {
   PineconeIcon,
   PipedriveIcon,
   PolymarketIcon,
-  PostgresIcon,
   PosthogIcon,
   ProfoundIcon,
   PulseIcon,
@@ -159,22 +147,17 @@ import {
   SapConcurIcon,
   SapS4HanaIcon,
   SESIcon,
-  SearchIcon,
   SecretsManagerIcon,
   SendgridIcon,
   SentryIcon,
   SerperIcon,
   ServiceNowIcon,
-  SftpIcon,
   ShopifyIcon,
   SimilarwebIcon,
   SixtyfourIcon,
   SlackIcon,
-  SmtpIcon,
   SQSIcon,
-  SshIcon,
   STSIcon,
-  STTIcon,
   StagehandIcon,
   StripeIcon,
   SupabaseIcon,
@@ -183,14 +166,11 @@ import {
   TelegramIcon,
   TextractIcon,
   TinybirdIcon,
-  TranslateIcon,
   TrelloIcon,
-  TTSIcon,
   TwilioIcon,
   TypeformIcon,
   UpstashIcon,
   VercelIcon,
-  VideoIcon,
   WealthboxIcon,
   WebflowIcon,
   WhatsAppIcon,
@@ -207,7 +187,6 @@ import {
 type IconComponent = ComponentType<SVGProps<SVGSVGElement>>
 
 export const blockTypeToIconMap: Record<string, IconComponent> = {
-  a2a: A2AIcon,
   agentmail: AgentMailIcon,
   agentphone: AgentPhoneIcon,
   agiloft: AgiloftIcon,
@@ -226,10 +205,8 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   box: BoxCompanyIcon,
   brandfetch: BrandfetchIcon,
   brightdata: BrightDataIcon,
-  browser_use: BrowserUseIcon,
   calcom: CalComIcon,
   calendly: CalendlyIcon,
-  circleback: CirclebackIcon,
   clay: ClayIcon,
   clerk: ClerkIcon,
   cloudflare: CloudflareIcon,
@@ -260,8 +237,6 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   extend: ExtendIcon,
   extend_v2: ExtendIcon,
   fathom: FathomIcon,
-  file: DocumentIcon,
-  file_v3: DocumentIcon,
   firecrawl: FirecrawlIcon,
   fireflies: FirefliesIcon,
   fireflies_v2: FirefliesIcon,
@@ -304,8 +279,6 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   hunter: HunterIOIcon,
   iam: IAMIcon,
   identity_center: IdentityCenterIcon,
-  image_generator: ImageIcon,
-  imap: MailServerIcon,
   incidentio: IncidentioIcon,
   infisical: InfisicalIcon,
   intercom: IntercomIcon,
@@ -316,7 +289,6 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   kalshi: KalshiIcon,
   kalshi_v2: KalshiIcon,
   ketch: KetchIcon,
-  knowledge: PackageSearchIcon,
   langsmith: LangsmithIcon,
   launchdarkly: LaunchDarklyIcon,
   lemlist: LemlistIcon,
@@ -329,7 +301,6 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   mailchimp: MailchimpIcon,
   mailgun: MailgunIcon,
   mem0: Mem0Icon,
-  memory: BrainIcon,
   microsoft_ad: AzureIcon,
   microsoft_dataverse: MicrosoftDataverseIcon,
   microsoft_excel: MicrosoftExcelIcon,
@@ -340,8 +311,6 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   mistral_parse_v3: MistralIcon,
   monday: MondayIcon,
   mongodb: MongoDBIcon,
-  mysql: MySQLIcon,
-  neo4j: Neo4jIcon,
   notion: NotionIcon,
   notion_v2: NotionIcon,
   obsidian: ObsidianIcon,
@@ -357,7 +326,6 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   pinecone: PineconeIcon,
   pipedrive: PipedriveIcon,
   polymarket: PolymarketIcon,
-  postgresql: PostgresIcon,
   posthog: PosthogIcon,
   profound: ProfoundIcon,
   pulse: PulseIcon,
@@ -377,28 +345,22 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   salesforce: SalesforceIcon,
   sap_concur: SapConcurIcon,
   sap_s4hana: SapS4HanaIcon,
-  search: SearchIcon,
   secrets_manager: SecretsManagerIcon,
   sendgrid: SendgridIcon,
   sentry: SentryIcon,
   serper: SerperIcon,
   servicenow: ServiceNowIcon,
   ses: SESIcon,
-  sftp: SftpIcon,
   sharepoint: MicrosoftSharepointIcon,
   sharepoint_v2: MicrosoftSharepointIcon,
   shopify: ShopifyIcon,
   similarweb: SimilarwebIcon,
   sixtyfour: SixtyfourIcon,
   slack: SlackIcon,
-  smtp: SmtpIcon,
   sqs: SQSIcon,
-  ssh: SshIcon,
   stagehand: StagehandIcon,
   stripe: StripeIcon,
   sts: STSIcon,
-  stt: STTIcon,
-  stt_v2: STTIcon,
   supabase: SupabaseIcon,
   tailscale: TailscaleIcon,
   tavily: TavilyIcon,
@@ -406,18 +368,12 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   textract: TextractIcon,
   textract_v2: TextractIcon,
   tinybird: TinybirdIcon,
-  translate: TranslateIcon,
   trello: TrelloIcon,
-  tts: TTSIcon,
   twilio_sms: TwilioIcon,
   twilio_voice: TwilioIcon,
   typeform: TypeformIcon,
   upstash: UpstashIcon,
   vercel: VercelIcon,
-  video_generator: VideoIcon,
-  video_generator_v2: VideoIcon,
-  vision: EyeIcon,
-  vision_v2: EyeIcon,
   wealthbox: WealthboxIcon,
   webflow: WebflowIcon,
   whatsapp: WhatsAppIcon,
diff --git a/apps/docs/content/docs/en/tools/knowledge.mdx b/apps/docs/content/docs/en/blocks/knowledge.mdx
similarity index 100%
rename from apps/docs/content/docs/en/tools/knowledge.mdx
rename to apps/docs/content/docs/en/blocks/knowledge.mdx
diff --git a/apps/docs/content/docs/en/blocks/meta.json b/apps/docs/content/docs/en/blocks/meta.json
index 225d3ff8fb5..2e1ad2ccad4 100644
--- a/apps/docs/content/docs/en/blocks/meta.json
+++ b/apps/docs/content/docs/en/blocks/meta.json
@@ -9,10 +9,12 @@
     "function",
     "guardrails",
     "human-in-the-loop",
+    "knowledge",
     "loop",
     "parallel",
     "response",
     "router",
+    "table",
     "variables",
     "wait",
     "webhook",
diff --git a/apps/docs/content/docs/en/tools/table.mdx b/apps/docs/content/docs/en/blocks/table.mdx
similarity index 100%
rename from apps/docs/content/docs/en/tools/table.mdx
rename to apps/docs/content/docs/en/blocks/table.mdx
diff --git a/apps/docs/content/docs/en/tools/a2a.mdx b/apps/docs/content/docs/en/tools/a2a.mdx
deleted file mode 100644
index 01dca23691a..00000000000
--- a/apps/docs/content/docs/en/tools/a2a.mdx
+++ /dev/null
@@ -1,212 +0,0 @@
----
-title: A2A
-description: Interact with external A2A-compatible agents
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="a2a"
-  color="#4151B5"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-The A2A (Agent-to-Agent) protocol enables Sim to interact with external AI agents and systems that implement A2A-compatible APIs. With A2A, you can connect Sim’s automations and workflows to remote agents—such as LLM-powered bots, microservices, and other AI-based tools—using a standardized messaging format.
-
-Using the A2A tools in Sim, you can:
-
-- **Send Messages to External Agents**: Communicate directly with remote agents, providing prompts, commands, or data.
-- **Receive and Stream Responses**: Get structured responses, artifacts, or real-time updates from the agent as the task progresses.
-- **Continue Conversations or Tasks**: Carry on multi-turn conversations or workflows by referencing task and context IDs.
-- **Integrate Third-Party AI and Automation**: Leverage external A2A-compatible services as part of your Sim workflows.
-
-These features allow you to build advanced workflows that combine Sim’s native capabilities with the intelligence and automation of external AIs or custom agents. To use A2A integrations, you’ll need the external agent’s endpoint URL and, if required, an API key or credentials.
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Use the A2A (Agent-to-Agent) protocol to interact with external AI agents. 
-
-
-
-## Tools
-
-### `a2a_send_message`
-
-Send a message to an external A2A-compatible agent.
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `agentUrl` | string | Yes | The A2A agent endpoint URL |
-| `message` | string | Yes | Message to send to the agent |
-| `taskId` | string | No | Task ID for continuing an existing task |
-| `contextId` | string | No | Context ID for conversation continuity |
-| `data` | string | No | Structured data to include with the message \(JSON string\) |
-| `files` | array | No | Files to include with the message |
-| `apiKey` | string | No | API key for authentication |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `content` | string | Text response content from the agent |
-| `taskId` | string | Unique task identifier |
-| `contextId` | string | Groups related tasks/messages |
-| `state` | string | Current lifecycle state \(working, completed, failed, canceled, rejected, input_required, auth_required\) |
-| `artifacts` | array | Task output artifacts |
-| `history` | array | Conversation history \(Message array\) |
-
-### `a2a_get_task`
-
-Query the status of an existing A2A task.
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `agentUrl` | string | Yes | The A2A agent endpoint URL |
-| `taskId` | string | Yes | Task ID to query |
-| `apiKey` | string | No | API key for authentication |
-| `historyLength` | number | No | Number of history messages to include |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `taskId` | string | Unique task identifier |
-| `contextId` | string | Groups related tasks/messages |
-| `state` | string | Current lifecycle state \(working, completed, failed, canceled, rejected, input_required, auth_required\) |
-| `artifacts` | array | Task output artifacts |
-| `history` | array | Conversation history \(Message array\) |
-
-### `a2a_cancel_task`
-
-Cancel a running A2A task.
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `agentUrl` | string | Yes | The A2A agent endpoint URL |
-| `taskId` | string | Yes | Task ID to cancel |
-| `apiKey` | string | No | API key for authentication |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `cancelled` | boolean | Whether cancellation was successful |
-| `state` | string | Current lifecycle state \(working, completed, failed, canceled, rejected, input_required, auth_required\) |
-
-### `a2a_get_agent_card`
-
-Fetch the Agent Card (discovery document) for an A2A agent.
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `agentUrl` | string | Yes | The A2A agent endpoint URL |
-| `apiKey` | string | No | API key for authentication \(if required\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `name` | string | Agent display name |
-| `description` | string | Agent purpose/capabilities |
-| `url` | string | Service endpoint URL |
-| `provider` | object | Creator organization details |
-| `capabilities` | object | Feature support matrix |
-| `skills` | array | Available operations |
-| `version` | string | A2A protocol version supported by the agent |
-| `defaultInputModes` | array | Default input content types accepted by the agent |
-| `defaultOutputModes` | array | Default output content types produced by the agent |
-
-### `a2a_resubscribe`
-
-Reconnect to an ongoing A2A task stream after connection interruption.
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `agentUrl` | string | Yes | The A2A agent endpoint URL |
-| `taskId` | string | Yes | Task ID to resubscribe to |
-| `apiKey` | string | No | API key for authentication |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `taskId` | string | Unique task identifier |
-| `contextId` | string | Groups related tasks/messages |
-| `state` | string | Current lifecycle state \(working, completed, failed, canceled, rejected, input_required, auth_required\) |
-| `isRunning` | boolean | Whether the task is still running |
-| `artifacts` | array | Task output artifacts |
-| `history` | array | Conversation history \(Message array\) |
-
-### `a2a_set_push_notification`
-
-Configure a webhook to receive task update notifications.
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `agentUrl` | string | Yes | The A2A agent endpoint URL |
-| `taskId` | string | Yes | Task ID to configure notifications for |
-| `webhookUrl` | string | Yes | HTTPS webhook URL to receive notifications |
-| `token` | string | No | Token for webhook validation |
-| `apiKey` | string | No | API key for authentication |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `url` | string | HTTPS webhook URL for notifications |
-| `token` | string | Authentication token for webhook validation |
-| `success` | boolean | Whether the operation was successful |
-
-### `a2a_get_push_notification`
-
-Get the push notification webhook configuration for a task.
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `agentUrl` | string | Yes | The A2A agent endpoint URL |
-| `taskId` | string | Yes | Task ID to get notification config for |
-| `apiKey` | string | No | API key for authentication |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `token` | string | Authentication token for webhook validation |
-| `exists` | boolean | Whether the resource exists |
-
-### `a2a_delete_push_notification`
-
-Delete the push notification webhook configuration for a task.
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `agentUrl` | string | Yes | The A2A agent endpoint URL |
-| `taskId` | string | Yes | Task ID to delete notification config for |
-| `pushNotificationConfigId` | string | No | Push notification configuration ID to delete \(optional - server can derive from taskId\) |
-| `apiKey` | string | No | API key for authentication |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether the operation was successful |
-
-
diff --git a/apps/docs/content/docs/en/tools/ahrefs.mdx b/apps/docs/content/docs/en/tools/ahrefs.mdx
index d965e1f5b09..963d852eb8e 100644
--- a/apps/docs/content/docs/en/tools/ahrefs.mdx
+++ b/apps/docs/content/docs/en/tools/ahrefs.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="ahrefs"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/airtable.mdx b/apps/docs/content/docs/en/tools/airtable.mdx
index 73fbcb920bb..1d2c191534e 100644
--- a/apps/docs/content/docs/en/tools/airtable.mdx
+++ b/apps/docs/content/docs/en/tools/airtable.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="airtable"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/apify.mdx b/apps/docs/content/docs/en/tools/apify.mdx
index 66bfd18aa79..c56f99bc342 100644
--- a/apps/docs/content/docs/en/tools/apify.mdx
+++ b/apps/docs/content/docs/en/tools/apify.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="apify"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/arxiv.mdx b/apps/docs/content/docs/en/tools/arxiv.mdx
index 011a79929b8..eb5e3ef8162 100644
--- a/apps/docs/content/docs/en/tools/arxiv.mdx
+++ b/apps/docs/content/docs/en/tools/arxiv.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="arxiv"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/asana.mdx b/apps/docs/content/docs/en/tools/asana.mdx
index 2664696104c..4ab78d9478a 100644
--- a/apps/docs/content/docs/en/tools/asana.mdx
+++ b/apps/docs/content/docs/en/tools/asana.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="asana"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/brightdata.mdx b/apps/docs/content/docs/en/tools/brightdata.mdx
index 65f8327e862..f3d1772779b 100644
--- a/apps/docs/content/docs/en/tools/brightdata.mdx
+++ b/apps/docs/content/docs/en/tools/brightdata.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="brightdata"
-  color="#FFFFFF"
+  color="#0F4C81"
 />
 
 ## Usage Instructions
diff --git a/apps/docs/content/docs/en/tools/browser_use.mdx b/apps/docs/content/docs/en/tools/browser_use.mdx
deleted file mode 100644
index 26c1bc1e503..00000000000
--- a/apps/docs/content/docs/en/tools/browser_use.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Browser Use
-description: Run browser automation tasks
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="browser_use"
-  color="#181C1E"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-[BrowserUse](https://browser-use.com/) is a powerful browser automation platform that enables you to create and run browser tasks programmatically. It provides a way to automate web interactions through natural language instructions, allowing you to navigate websites, fill forms, extract data, and perform complex sequences of actions without writing code.
-
-With BrowserUse, you can:
-
-- **Automate web interactions**: Navigate to websites, click buttons, fill forms, and perform other browser actions
-- **Extract data**: Scrape content from websites, including text, images, and structured data
-- **Execute complex workflows**: Chain multiple actions together to complete sophisticated web tasks
-- **Monitor task execution**: Watch browser tasks run in real-time with visual feedback
-- **Process results programmatically**: Receive structured output from web automation tasks
-
-In Sim, the BrowserUse integration allows your agents to interact with the web as if they were human users. This enables scenarios like research, data collection, form submission, and web testing - all through simple natural language instructions. Your agents can gather information from websites, interact with web applications, and perform actions that would typically require manual browsing, expanding their capabilities to include the entire web as a resource.
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Integrate Browser Use into the workflow. Can navigate the web and perform actions as if a real user was interacting with the browser.
-
-
-
-## Tools
-
-### `browser_use_run_task`
-
-Runs a browser automation task using BrowserUse
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `task` | string | Yes | What should the browser agent do |
-| `startUrl` | string | No | Initial page URL to start the agent on \(reduces navigation steps\) |
-| `variables` | json | No | Optional secrets injected into the task \(format: \{key: value\}\) |
-| `allowedDomains` | string | No | Comma-separated list of domains the agent is allowed to visit |
-| `maxSteps` | number | No | Maximum number of steps the agent may take \(default 100, max 10000\) |
-| `flashMode` | boolean | No | Enable flash mode \(faster, less careful navigation\) |
-| `thinking` | boolean | No | Enable extended reasoning mode |
-| `vision` | string | No | Vision capability: "true", "false", or "auto" |
-| `systemPromptExtension` | string | No | Optional text appended to the agent system prompt \(max 2000 chars\) |
-| `structuredOutput` | string | No | Stringified JSON schema for the structured output |
-| `highlightElements` | boolean | No | Highlight interactive elements on the page \(default true\) |
-| `metadata` | json | No | Custom key-value metadata \(up to 10 pairs\) for tracking |
-| `model` | string | No | LLM model identifier \(e.g. browser-use-2.0\) |
-| `apiKey` | string | Yes | API key for BrowserUse API |
-| `profile_id` | string | No | Browser profile ID for persistent sessions \(cookies, login state\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `id` | string | Task execution identifier |
-| `success` | boolean | Task completion status |
-| `output` | json | Final task output \(string or structured\) |
-| `steps` | array | Steps the agent executed \(number, memory, nextGoal, url, actions, duration\) |
-|   ↳ `number` | number | Sequential step number |
-|   ↳ `memory` | string | Agent memory at this step |
-|   ↳ `evaluationPreviousGoal` | string | Evaluation of previous goal completion |
-|   ↳ `nextGoal` | string | Goal for the next step |
-|   ↳ `url` | string | Current URL of the browser |
-|   ↳ `screenshotUrl` | string | Optional screenshot URL |
-|   ↳ `actions` | array | Stringified JSON actions performed |
-|   ↳ `duration` | number | Step duration in seconds |
-| `liveUrl` | string | Embeddable live browser session URL \(active during execution\) |
-| `shareUrl` | string | Public shareable URL for the recorded session \(post-run\) |
-| `sessionId` | string | Browser Use session identifier |
-
-
diff --git a/apps/docs/content/docs/en/tools/clay.mdx b/apps/docs/content/docs/en/tools/clay.mdx
index 8b06513171f..7b20f02b1fb 100644
--- a/apps/docs/content/docs/en/tools/clay.mdx
+++ b/apps/docs/content/docs/en/tools/clay.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="clay"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/cloudwatch.mdx b/apps/docs/content/docs/en/tools/cloudwatch.mdx
index af0fc0a2b0e..3f0380743c8 100644
--- a/apps/docs/content/docs/en/tools/cloudwatch.mdx
+++ b/apps/docs/content/docs/en/tools/cloudwatch.mdx
@@ -257,4 +257,52 @@ List and filter CloudWatch alarms
 |   ↳ `threshold` | number | Threshold value \(MetricAlarm only\) |
 |   ↳ `stateUpdatedTimestamp` | number | Epoch ms when state last changed |
 
+### `cloudwatch_mute_alarm`
+
+Create a CloudWatch alarm mute rule that suppresses alarms for a fixed duration
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `awsRegion` | string | Yes | AWS region \(e.g., us-east-1\) |
+| `awsAccessKeyId` | string | Yes | AWS access key ID |
+| `awsSecretAccessKey` | string | Yes | AWS secret access key |
+| `muteRuleName` | string | Yes | Unique name for the mute rule \(used later to unmute\) |
+| `alarmNames` | array | Yes | Names of the CloudWatch alarms this mute rule targets |
+| `durationValue` | number | Yes | How long the mute lasts \(paired with durationUnit\) |
+| `durationUnit` | string | Yes | Unit for durationValue: minutes, hours, or days |
+| `description` | string | No | Optional description of why the alarms are being muted |
+| `startDate` | number | No | When the mute window begins as Unix epoch seconds. Defaults to now \(mute starts immediately\). |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `success` | boolean | Whether the mute rule was created successfully |
+| `muteRuleName` | string | Name of the mute rule that was created |
+| `alarmNames` | array | Names of the alarms this rule mutes |
+| `expression` | string | Schedule expression used by the mute rule |
+| `duration` | string | ISO 8601 duration of the mute window |
+
+### `cloudwatch_unmute_alarm`
+
+Delete a CloudWatch alarm mute rule, restoring alarm notifications
+
+#### Input
+
+| Parameter | Type | Required | Description |
+| --------- | ---- | -------- | ----------- |
+| `awsRegion` | string | Yes | AWS region \(e.g., us-east-1\) |
+| `awsAccessKeyId` | string | Yes | AWS access key ID |
+| `awsSecretAccessKey` | string | Yes | AWS secret access key |
+| `muteRuleName` | string | Yes | Name of the mute rule to delete |
+
+#### Output
+
+| Parameter | Type | Description |
+| --------- | ---- | ----------- |
+| `success` | boolean | Whether the mute rule was deleted successfully |
+| `muteRuleName` | string | Name of the mute rule that was deleted |
+
 
diff --git a/apps/docs/content/docs/en/tools/confluence.mdx b/apps/docs/content/docs/en/tools/confluence.mdx
index 967275020e4..8f49145ad31 100644
--- a/apps/docs/content/docs/en/tools/confluence.mdx
+++ b/apps/docs/content/docs/en/tools/confluence.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="confluence_v2"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/dspy.mdx b/apps/docs/content/docs/en/tools/dspy.mdx
index 5730c4e5477..a73007d739e 100644
--- a/apps/docs/content/docs/en/tools/dspy.mdx
+++ b/apps/docs/content/docs/en/tools/dspy.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="dspy"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/elasticsearch.mdx b/apps/docs/content/docs/en/tools/elasticsearch.mdx
index 5eaf4ae42e6..5dc077e6529 100644
--- a/apps/docs/content/docs/en/tools/elasticsearch.mdx
+++ b/apps/docs/content/docs/en/tools/elasticsearch.mdx
@@ -7,25 +7,9 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="elasticsearch"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
-{/* MANUAL-CONTENT-START:intro */}
-[Elasticsearch](https://www.elastic.co/elasticsearch/) is a powerful distributed search and analytics engine that enables you to index, search, and analyze large volumes of data in real time. It’s widely used for powering search features, log and event data analytics, observability, and more.
-
-With Elasticsearch in Sim, you gain programmatic access to core Elasticsearch capabilities, including:
-
-- **Search documents**: Perform advanced searches on structured or unstructured text using Query DSL, with support for sorting, pagination, and field selection.
-- **Index documents**: Add new documents or update existing ones in any Elasticsearch index for immediate retrieval and analysis.
-- **Get, update, or delete documents**: Retrieve, modify, or remove specific documents by ID.
-- **Bulk operations**: Execute multiple indexing or update actions in a single request for high-throughput data processing.
-- **Manage indexes**: Create, delete, or get details about indexes as part of your workflow automation.
-- **Cluster monitoring**: Check the health and stats of your Elasticsearch deployment.
-
-Sim's Elasticsearch tools work with both self-hosted and Elastic Cloud environments. Integrate Elasticsearch into your agent workflows to automate data ingestion, search across vast datasets, run reporting, or build custom search-powered applications – all without manual intervention.
-{/* MANUAL-CONTENT-END */}
-
-
 ## Usage Instructions
 
 Integrate Elasticsearch into workflows for powerful search, indexing, and data management. Supports document CRUD operations, advanced search queries, bulk operations, index management, and cluster monitoring. Works with both self-hosted and Elastic Cloud deployments.
diff --git a/apps/docs/content/docs/en/tools/evernote.mdx b/apps/docs/content/docs/en/tools/evernote.mdx
index a54840288f1..3a31f07459d 100644
--- a/apps/docs/content/docs/en/tools/evernote.mdx
+++ b/apps/docs/content/docs/en/tools/evernote.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="evernote"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/file.mdx b/apps/docs/content/docs/en/tools/file.mdx
deleted file mode 100644
index 2a13095afdd..00000000000
--- a/apps/docs/content/docs/en/tools/file.mdx
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: File
-description: Read and write workspace files
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="file_v3"
-  color="#40916C"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-The File Parser tool provides a powerful way to extract and process content from various file formats, making it easy to incorporate document data into your agent workflows. This tool supports multiple file formats and can handle files up to 200MB in size.
-
-With the File Parser, you can:
-
-- **Process multiple file formats**: Extract text from PDFs, CSVs, Word documents (DOCX), text files, and more
-- **Handle large files**: Process documents up to 200MB in size
-- **Parse files from URLs**: Directly extract content from files hosted online by providing their URLs
-- **Process multiple files at once**: Upload and parse several files in a single operation
-- **Extract structured data**: Maintain formatting and structure from the original documents when possible
-
-The File Parser tool is particularly useful for scenarios where your agents need to work with document content, such as analyzing reports, extracting data from spreadsheets, or processing text from various document sources. It simplifies the process of making document content available to your agents, allowing them to work with information stored in files just as easily as with direct text input.
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Read and parse files from uploads or URLs, write new workspace files, or append content to existing files.
-
-
-
-## Tools
-
-### `file_parser`
-
-Parse one or more uploaded files or files from URLs (text, PDF, CSV, images, etc.)
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `filePath` | string | No | Path to the file\(s\). Can be a single path, URL, or an array of paths. |
-| `file` | file | No | Uploaded file\(s\) to parse |
-| `fileType` | string | No | Type of file to parse \(auto-detected if not specified\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `files` | file[] | Parsed files as UserFile objects |
-| `combinedContent` | string | Combined content of all parsed files |
-
-### `file_write`
-
-Create a new workspace file. If a file with the same name already exists, a numeric suffix is added (e.g., 
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `fileName` | string | Yes | File name \(e.g., "data.csv"\). If a file with this name exists, a numeric suffix is added automatically. |
-| `content` | string | Yes | The text content to write to the file. |
-| `contentType` | string | No | MIME type for new files \(e.g., "text/plain"\). Auto-detected from file extension if omitted. |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `id` | string | File ID |
-| `name` | string | File name |
-| `size` | number | File size in bytes |
-| `url` | string | URL to access the file |
-
-### `file_append`
-
-Append content to an existing workspace file. The file must already exist. Content is added to the end of the file.
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `fileName` | string | Yes | Name of an existing workspace file to append to. |
-| `content` | string | Yes | The text content to append to the file. |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `id` | string | File ID |
-| `name` | string | File name |
-| `size` | number | File size in bytes |
-| `url` | string | URL to access the file |
-
-
diff --git a/apps/docs/content/docs/en/tools/github.mdx b/apps/docs/content/docs/en/tools/github.mdx
index 9ea94cb08da..1e107097801 100644
--- a/apps/docs/content/docs/en/tools/github.mdx
+++ b/apps/docs/content/docs/en/tools/github.mdx
@@ -10,23 +10,6 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
   color="#181C1E"
 />
 
-{/* MANUAL-CONTENT-START:intro */}
-[GitHub](https://github.com/) is the world’s leading platform for hosting, collaborating on, and managing source code. GitHub offers powerful tools for version control, code review, branching strategies, and team collaboration within the rich Git ecosystem, underpinning both open source and enterprise development worldwide.
-
-The GitHub integration in Sim allows your agents to seamlessly automate, interact with, and orchestrate workflows across your repositories. Using this integration, agents can perform an extended set of code and collaboration operations, enabling:
-
-- **Fetch pull request details:** Retrieve a full overview of any pull request, including file diffs, branch information, metadata, approvals, and a summary of changes, for automation or review workflows.
-- **Create pull request comments:** Automatically generate or post comments on PRs—such as reviews, suggestions, or status updates—enabling speedy feedback, documentation, or policy enforcement.
-- **Get repository information:** Access comprehensive repository metadata, including descriptions, visibility, topics, default branches, and contributors. This supports intelligent project analysis, dynamic workflow routing, and organizational reporting.
-- **Fetch the latest commit:** Quickly obtain details from the newest commit on any branch, including hashes, messages, authors, and timestamps. This is useful for monitoring development velocity, triggering downstream actions, or enforcing quality checks.
-- **Trigger workflows from GitHub events:** Set up Sim workflows to start automatically from key GitHub events, including pull request creation, review comments, or when new commits are pushed, through easy webhook integration. Automate actions such as deployments, notifications, compliance checks, or documentation updates in real time.
-- **Monitor and manage repository activity:** Programmatically track contributions, manage PR review states, analyze branch histories, and audit code changes. Empower agents to enforce requirements, coordinate releases, and respond dynamically to development patterns.
-- **Support for advanced automations:** Combine these operations—for example, fetch PR data, leave context-aware comments, and kick off multi-step Sim workflows on code pushes or PR merges—to automate your team’s engineering processes from end to end.
-
-By leveraging all of these capabilities, the Sim GitHub integration enables agents to engage deeply in the development lifecycle. Automate code reviews, streamline team feedback, synchronize project artifacts, accelerate CI/CD, and enforce best practices with ease. Bring security, speed, and reliability to your workflows—directly within your Sim-powered automation environment, with full integration into your organization’s GitHub strategy.
-{/* MANUAL-CONTENT-END */}
-
-
 ## Usage Instructions
 
 Integrate Github into the workflow. Can get get PR details, create PR comment, get repository info, and get latest commit. Can be used in trigger mode to trigger a workflow when a PR is created, commented on, or a commit is pushed.
diff --git a/apps/docs/content/docs/en/tools/gitlab.mdx b/apps/docs/content/docs/en/tools/gitlab.mdx
index e1b68a35ef0..64395a4178e 100644
--- a/apps/docs/content/docs/en/tools/gitlab.mdx
+++ b/apps/docs/content/docs/en/tools/gitlab.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="gitlab"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/gmail.mdx b/apps/docs/content/docs/en/tools/gmail.mdx
index 5aceafc2f6e..2a19aecc6f1 100644
--- a/apps/docs/content/docs/en/tools/gmail.mdx
+++ b/apps/docs/content/docs/en/tools/gmail.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="gmail_v2"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/google_ads.mdx b/apps/docs/content/docs/en/tools/google_ads.mdx
index cadc9af6fe4..5972f683e8f 100644
--- a/apps/docs/content/docs/en/tools/google_ads.mdx
+++ b/apps/docs/content/docs/en/tools/google_ads.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_ads"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/google_bigquery.mdx b/apps/docs/content/docs/en/tools/google_bigquery.mdx
index 609a6928559..048407c0fcf 100644
--- a/apps/docs/content/docs/en/tools/google_bigquery.mdx
+++ b/apps/docs/content/docs/en/tools/google_bigquery.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_bigquery"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/google_books.mdx b/apps/docs/content/docs/en/tools/google_books.mdx
index 6ab604483d2..7b3c77df1d3 100644
--- a/apps/docs/content/docs/en/tools/google_books.mdx
+++ b/apps/docs/content/docs/en/tools/google_books.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_books"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/google_calendar.mdx b/apps/docs/content/docs/en/tools/google_calendar.mdx
index 875b56d5d5d..825c2e109db 100644
--- a/apps/docs/content/docs/en/tools/google_calendar.mdx
+++ b/apps/docs/content/docs/en/tools/google_calendar.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_calendar_v2"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/google_contacts.mdx b/apps/docs/content/docs/en/tools/google_contacts.mdx
index b68c303a578..461aa7d4563 100644
--- a/apps/docs/content/docs/en/tools/google_contacts.mdx
+++ b/apps/docs/content/docs/en/tools/google_contacts.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_contacts"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 ## Usage Instructions
diff --git a/apps/docs/content/docs/en/tools/google_docs.mdx b/apps/docs/content/docs/en/tools/google_docs.mdx
index 35dbd4eae8d..0c7755987cd 100644
--- a/apps/docs/content/docs/en/tools/google_docs.mdx
+++ b/apps/docs/content/docs/en/tools/google_docs.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_docs"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/google_drive.mdx b/apps/docs/content/docs/en/tools/google_drive.mdx
index 629296fe92d..5e5b3d409be 100644
--- a/apps/docs/content/docs/en/tools/google_drive.mdx
+++ b/apps/docs/content/docs/en/tools/google_drive.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_drive"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/google_forms.mdx b/apps/docs/content/docs/en/tools/google_forms.mdx
index fd463521fab..a828ec9c61b 100644
--- a/apps/docs/content/docs/en/tools/google_forms.mdx
+++ b/apps/docs/content/docs/en/tools/google_forms.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_forms"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/google_maps.mdx b/apps/docs/content/docs/en/tools/google_maps.mdx
index 5439d99cbf1..958c36165a4 100644
--- a/apps/docs/content/docs/en/tools/google_maps.mdx
+++ b/apps/docs/content/docs/en/tools/google_maps.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_maps"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/google_meet.mdx b/apps/docs/content/docs/en/tools/google_meet.mdx
index f7b94f5db60..d7a294dbf8a 100644
--- a/apps/docs/content/docs/en/tools/google_meet.mdx
+++ b/apps/docs/content/docs/en/tools/google_meet.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_meet"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/google_pagespeed.mdx b/apps/docs/content/docs/en/tools/google_pagespeed.mdx
index d2cd247c851..6ce1231e5fd 100644
--- a/apps/docs/content/docs/en/tools/google_pagespeed.mdx
+++ b/apps/docs/content/docs/en/tools/google_pagespeed.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_pagespeed"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/google_search.mdx b/apps/docs/content/docs/en/tools/google_search.mdx
index 480ea4a1313..f6b8461b1d2 100644
--- a/apps/docs/content/docs/en/tools/google_search.mdx
+++ b/apps/docs/content/docs/en/tools/google_search.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_search"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/google_sheets.mdx b/apps/docs/content/docs/en/tools/google_sheets.mdx
index ac2f470a04b..e7efb3a8804 100644
--- a/apps/docs/content/docs/en/tools/google_sheets.mdx
+++ b/apps/docs/content/docs/en/tools/google_sheets.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_sheets_v2"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/google_slides.mdx b/apps/docs/content/docs/en/tools/google_slides.mdx
index 30d6a17d404..6d34d3760b1 100644
--- a/apps/docs/content/docs/en/tools/google_slides.mdx
+++ b/apps/docs/content/docs/en/tools/google_slides.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_slides_v2"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/google_tasks.mdx b/apps/docs/content/docs/en/tools/google_tasks.mdx
index d18f69defc6..c6997c3490b 100644
--- a/apps/docs/content/docs/en/tools/google_tasks.mdx
+++ b/apps/docs/content/docs/en/tools/google_tasks.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_tasks"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/google_translate.mdx b/apps/docs/content/docs/en/tools/google_translate.mdx
index a3b835f11be..288ce7a6698 100644
--- a/apps/docs/content/docs/en/tools/google_translate.mdx
+++ b/apps/docs/content/docs/en/tools/google_translate.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="google_translate"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/grafana.mdx b/apps/docs/content/docs/en/tools/grafana.mdx
index 47cbd9983d9..0636bf3726d 100644
--- a/apps/docs/content/docs/en/tools/grafana.mdx
+++ b/apps/docs/content/docs/en/tools/grafana.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="grafana"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/greptile.mdx b/apps/docs/content/docs/en/tools/greptile.mdx
index 7132bbb131c..d659cc4838d 100644
--- a/apps/docs/content/docs/en/tools/greptile.mdx
+++ b/apps/docs/content/docs/en/tools/greptile.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="greptile"
-  color="#e5e5e5"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/hunter.mdx b/apps/docs/content/docs/en/tools/hunter.mdx
index 113cbcc7e63..492edc864ca 100644
--- a/apps/docs/content/docs/en/tools/hunter.mdx
+++ b/apps/docs/content/docs/en/tools/hunter.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="hunter"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/image_generator.mdx b/apps/docs/content/docs/en/tools/image_generator.mdx
deleted file mode 100644
index 7e1f25bc642..00000000000
--- a/apps/docs/content/docs/en/tools/image_generator.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: Image Generator
-description: Generate images
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="image_generator"
-  color="#4D5FFF"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-[DALL-E](https://openai.com/dall-e-3) is OpenAI's advanced AI system designed to generate realistic images and art from natural language descriptions. As a state-of-the-art image generation model, DALL-E can create detailed and creative visuals based on text prompts, allowing users to transform their ideas into visual content without requiring artistic skills.
-
-With DALL-E, you can:
-
-- **Generate realistic images**: Create photorealistic visuals from textual descriptions
-- **Design conceptual art**: Transform abstract ideas into visual representations
-- **Produce variations**: Generate multiple interpretations of the same prompt
-- **Control artistic style**: Specify artistic styles, mediums, and visual aesthetics
-- **Create detailed scenes**: Describe complex scenes with multiple elements and relationships
-- **Visualize products**: Generate product mockups and design concepts
-- **Illustrate ideas**: Turn written concepts into visual illustrations
-
-In Sim, the DALL-E integration enables your agents to generate images programmatically as part of their workflows. This allows for powerful automation scenarios such as content creation, visual design, and creative ideation. Your agents can formulate detailed prompts, generate corresponding images, and incorporate these visuals into their outputs or downstream processes. This integration bridges the gap between natural language processing and visual content creation, enabling your agents to communicate not just through text but also through compelling imagery. By connecting Sim with DALL-E, you can create agents that produce visual content on demand, illustrate concepts, generate design assets, and enhance user experiences with rich visual elements - all without requiring human intervention in the creative process.
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Integrate Image Generator into the workflow. Can generate images using DALL-E 3, GPT Image 1, or GPT Image 2.
-
-
-
-## Tools
-
-### `openai_image`
-
-Generate images using OpenAI
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `model` | string | Yes | The model to use \(dall-e-3, gpt-image-1, or gpt-image-2\) |
-| `prompt` | string | Yes | A text description of the desired image |
-| `size` | string | Yes | Image size. dall-e-3: 1024x1024, 1024x1792, or 1792x1024. gpt-image-1: auto, 1024x1024, 1536x1024, or 1024x1536. gpt-image-2: auto or any size with edges ≤3840px and multiples of 16 \(e.g. 1024x1024, 1536x1024, 1024x1536, 2560x1440, 3840x2160\). |
-| `quality` | string | No | Quality. dall-e-3: standard\|hd. gpt-image-1/gpt-image-2: auto\|low\|medium\|high |
-| `style` | string | No | The style of the image \(vivid or natural\), only for dall-e-3 |
-| `background` | string | No | Background. gpt-image-1: auto\|transparent\|opaque. gpt-image-2: auto\|opaque \(transparent not supported\) |
-| `outputFormat` | string | No | Output image format \(png, jpeg, webp\), only for gpt-image-1 and gpt-image-2 |
-| `moderation` | string | No | Moderation level \(auto or low\), only for gpt-image-1 and gpt-image-2 |
-| `n` | number | No | The number of images to generate \(1-10\) |
-| `apiKey` | string | Yes | Your OpenAI API key |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Operation success status |
-| `output` | object | Generated image data |
-|   ↳ `content` | string | Image URL or identifier |
-|   ↳ `image` | string | Base64 encoded image data |
-|   ↳ `metadata` | object | Image generation metadata |
-|     ↳ `model` | string | Model used for image generation |
-
-
diff --git a/apps/docs/content/docs/en/tools/incidentio.mdx b/apps/docs/content/docs/en/tools/incidentio.mdx
index 3476d3535e7..c0c215bd8ae 100644
--- a/apps/docs/content/docs/en/tools/incidentio.mdx
+++ b/apps/docs/content/docs/en/tools/incidentio.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="incidentio"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/intercom.mdx b/apps/docs/content/docs/en/tools/intercom.mdx
index 6330cb03655..c81cb6d86fe 100644
--- a/apps/docs/content/docs/en/tools/intercom.mdx
+++ b/apps/docs/content/docs/en/tools/intercom.mdx
@@ -7,26 +7,9 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="intercom_v2"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
-{/* MANUAL-CONTENT-START:intro */}
-Supercharge your customer communications and relationship management with [Intercom](https://www.intercom.com/) – the all-in-one messaging platform for engaging, supporting, and retaining your customers. Integrate Intercom into your workflows to centralize conversations, contacts, support tickets, and more, all seamlessly accessible via automation.
-
-With the Intercom tool, you can:
-
-- **Create and manage contacts**: Easily add, update, search, list, and delete contacts to maintain a clean, actionable customer database. 
-- **Organize companies**: Create, get, and list companies to understand and support your customer organizations at scale.
-- **Centralize customer conversations**: Retrieve, list, reply to, and search customer conversations to ensure no message slips through the cracks and support responses are always timely.
-- **Manage tickets and messages**: Create and fetch tickets, as well as compose outbound messages, to deliver proactive, high-quality support experiences.
-- **Automate and extend workflows**: Connect Intercom operations with your automations to trigger follow-ups, orchestrate customer journeys, and sync data with your stack.
-
-Intercom empowers sales, support, and success teams to deliver personalized, efficient, and scalable customer experiences—whether you need to onboard new users, troubleshoot issues, or engage your customer base in real time.
-
-Drive deeper relationships, faster response times, and smarter workflows by integrating Intercom with your automated processes today.
-{/* MANUAL-CONTENT-END */}
-
-
 ## Usage Instructions
 
 Integrate Intercom into the workflow. Can create, get, update, list, search, and delete contacts; create, get, and list companies; get, list, reply, and search conversations; create and get tickets; and create messages.
diff --git a/apps/docs/content/docs/en/tools/jira.mdx b/apps/docs/content/docs/en/tools/jira.mdx
index 7164372612f..6df2f92b602 100644
--- a/apps/docs/content/docs/en/tools/jira.mdx
+++ b/apps/docs/content/docs/en/tools/jira.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="jira"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/jira_service_management.mdx b/apps/docs/content/docs/en/tools/jira_service_management.mdx
index 04aed8404ca..efd1ca28a4f 100644
--- a/apps/docs/content/docs/en/tools/jira_service_management.mdx
+++ b/apps/docs/content/docs/en/tools/jira_service_management.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="jira_service_management"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/mailgun.mdx b/apps/docs/content/docs/en/tools/mailgun.mdx
index 547f525785e..ef501aa628c 100644
--- a/apps/docs/content/docs/en/tools/mailgun.mdx
+++ b/apps/docs/content/docs/en/tools/mailgun.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="mailgun"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/memory.mdx b/apps/docs/content/docs/en/tools/memory.mdx
deleted file mode 100644
index ba5fcddf87a..00000000000
--- a/apps/docs/content/docs/en/tools/memory.mdx
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: Memory
-description: Add memory store
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="memory"
-  color="#F64F9E"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-The Memory tool enables your agents to store, retrieve, and manage conversation memories across workflows. It acts as a persistent memory store that agents can access to maintain conversation context, recall facts, or track actions over time.
-
-With the Memory tool, you can:
-
-- **Add new memories**: Store relevant information, events, or conversation history by saving agent or user messages into a structured memory database
-- **Retrieve memories**: Fetch specific memories or all memories tied to a conversation, helping agents recall previous interactions or facts
-- **Delete memories**: Remove outdated or incorrect memories from the database to maintain accurate context
-- **Append to existing conversations**: Update or expand on existing memory threads by appending new messages with the same conversation identifier
-
-Sim’s Memory block is especially useful for building agents that require persistent state—helping them remember what was said earlier in a conversation, persist facts between tasks, or apply long-term history in decision-making. By integrating Memory, you enable richer, more contextual, and more dynamic workflows for your agents.
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Integrate Memory into the workflow. Can add, get a memory, get all memories, and delete memories.
-
-
-
-## Tools
-
-### `memory_add`
-
-Add a new memory to the database or append to existing memory with the same ID.
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `conversationId` | string | No | Conversation identifier \(e.g., user-123, session-abc\). If a memory with this conversationId already exists, the new message will be appended to it. |
-| `id` | string | No | Legacy parameter for conversation identifier. Use conversationId instead. Provided for backwards compatibility. |
-| `role` | string | Yes | Role for agent memory \(user, assistant, or system\) |
-| `content` | string | Yes | Content for agent memory |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether the memory was added successfully |
-| `memories` | array | Array of memory objects including the new or updated memory |
-| `error` | string | Error message if operation failed |
-
-### `memory_get`
-
-Retrieve memory by conversationId. Returns matching memories.
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `conversationId` | string | No | Conversation identifier \(e.g., user-123, session-abc\). Returns memories for this conversation. |
-| `id` | string | No | Legacy parameter for conversation identifier. Use conversationId instead. Provided for backwards compatibility. |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether the memory was retrieved successfully |
-| `memories` | array | Array of memory objects with conversationId and data fields |
-| `message` | string | Success or error message |
-| `error` | string | Error message if operation failed |
-
-### `memory_get_all`
-
-Retrieve all memories from the database
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether all memories were retrieved successfully |
-| `memories` | array | Array of all memory objects with key, conversationId, and data fields |
-| `message` | string | Success or error message |
-| `error` | string | Error message if operation failed |
-
-### `memory_delete`
-
-Delete memories by conversationId.
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `conversationId` | string | No | Conversation identifier \(e.g., user-123, session-abc\). Deletes all memories for this conversation. |
-| `id` | string | No | Legacy parameter for conversation identifier. Use conversationId instead. Provided for backwards compatibility. |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether the memory was deleted successfully |
-| `message` | string | Success or error message |
-| `error` | string | Error message if operation failed |
-
-
diff --git a/apps/docs/content/docs/en/tools/meta.json b/apps/docs/content/docs/en/tools/meta.json
index ad0f6b437ad..2dfb758a5b1 100644
--- a/apps/docs/content/docs/en/tools/meta.json
+++ b/apps/docs/content/docs/en/tools/meta.json
@@ -1,7 +1,6 @@
 {
   "pages": [
     "index",
-    "a2a",
     "agentmail",
     "agentphone",
     "agiloft",
@@ -20,7 +19,6 @@
     "box",
     "brandfetch",
     "brightdata",
-    "browser_use",
     "calcom",
     "calendly",
     "circleback",
@@ -52,7 +50,6 @@
     "exa",
     "extend",
     "fathom",
-    "file",
     "firecrawl",
     "fireflies",
     "gamma",
@@ -89,7 +86,6 @@
     "hunter",
     "iam",
     "identity_center",
-    "image_generator",
     "imap",
     "incidentio",
     "infisical",
@@ -99,7 +95,6 @@
     "jira_service_management",
     "kalshi",
     "ketch",
-    "knowledge",
     "langsmith",
     "launchdarkly",
     "lemlist",
@@ -111,7 +106,6 @@
     "mailchimp",
     "mailgun",
     "mem0",
-    "memory",
     "microsoft_ad",
     "microsoft_dataverse",
     "microsoft_excel",
@@ -120,8 +114,6 @@
     "mistral_parse",
     "monday",
     "mongodb",
-    "mysql",
-    "neo4j",
     "notion",
     "obsidian",
     "okta",
@@ -136,7 +128,6 @@
     "pinecone",
     "pipedrive",
     "polymarket",
-    "postgresql",
     "posthog",
     "profound",
     "pulse",
@@ -154,43 +145,33 @@
     "salesforce",
     "sap_concur",
     "sap_s4hana",
-    "search",
     "secrets_manager",
     "sendgrid",
     "sentry",
     "serper",
     "servicenow",
     "ses",
-    "sftp",
     "sharepoint",
     "shopify",
     "similarweb",
     "sixtyfour",
     "slack",
-    "smtp",
     "sqs",
-    "ssh",
     "stagehand",
     "stripe",
     "sts",
-    "stt",
     "supabase",
-    "table",
     "tailscale",
     "tavily",
     "telegram",
     "textract",
     "tinybird",
-    "translate",
     "trello",
-    "tts",
     "twilio_sms",
     "twilio_voice",
     "typeform",
     "upstash",
     "vercel",
-    "video_generator",
-    "vision",
     "wealthbox",
     "webflow",
     "whatsapp",
diff --git a/apps/docs/content/docs/en/tools/microsoft_dataverse.mdx b/apps/docs/content/docs/en/tools/microsoft_dataverse.mdx
index e548c0ea0ef..eb3a5051f23 100644
--- a/apps/docs/content/docs/en/tools/microsoft_dataverse.mdx
+++ b/apps/docs/content/docs/en/tools/microsoft_dataverse.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="microsoft_dataverse"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/microsoft_excel.mdx b/apps/docs/content/docs/en/tools/microsoft_excel.mdx
index 08733e5eb30..35912dae3dd 100644
--- a/apps/docs/content/docs/en/tools/microsoft_excel.mdx
+++ b/apps/docs/content/docs/en/tools/microsoft_excel.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="microsoft_excel_v2"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/microsoft_planner.mdx b/apps/docs/content/docs/en/tools/microsoft_planner.mdx
index df2a1259278..9e88d5a50b7 100644
--- a/apps/docs/content/docs/en/tools/microsoft_planner.mdx
+++ b/apps/docs/content/docs/en/tools/microsoft_planner.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="microsoft_planner"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/microsoft_teams.mdx b/apps/docs/content/docs/en/tools/microsoft_teams.mdx
index 0d86d9aaa72..5523fe8d148 100644
--- a/apps/docs/content/docs/en/tools/microsoft_teams.mdx
+++ b/apps/docs/content/docs/en/tools/microsoft_teams.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="microsoft_teams"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/mongodb.mdx b/apps/docs/content/docs/en/tools/mongodb.mdx
index e785fa34c3b..dad5da15b35 100644
--- a/apps/docs/content/docs/en/tools/mongodb.mdx
+++ b/apps/docs/content/docs/en/tools/mongodb.mdx
@@ -7,24 +7,9 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="mongodb"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
-{/* MANUAL-CONTENT-START:intro */}
-The [MongoDB](https://www.mongodb.com/) tool enables you to connect to a MongoDB database and perform a wide range of document-oriented operations directly within your agentic workflows. With flexible configuration and secure connection management, you can easily interact with and manipulate your data.
-
-With the MongoDB tool, you can:
-
-- **Find documents**: Query collections and retrieve documents with the `mongodb_query` operation using rich query filters.
-- **Insert documents**: Add one or multiple documents to a collection using the `mongodb_insert` operation.
-- **Update documents**: Modify existing documents with the `mongodb_update` operation by specifying filter criteria and the update actions.
-- **Delete documents**: Remove documents from a collection using the `mongodb_delete` operation, specifying filters and deletion options.
-- **Aggregate data**: Run complex aggregation pipelines with the `mongodb_execute` operation to transform and analyze your data.
-
-The MongoDB tool is ideal for workflows where your agents need to manage or analyze structured, document-based data. Whether it's processing user-generated content, managing app data, or powering analytics, the MongoDB tool streamlines your data access and manipulation in a secure, programmatic way.
-{/* MANUAL-CONTENT-END */}
-
-
 ## Usage Instructions
 
 Integrate MongoDB into the workflow. Can find, insert, update, delete, and aggregate data.
diff --git a/apps/docs/content/docs/en/tools/mysql.mdx b/apps/docs/content/docs/en/tools/mysql.mdx
deleted file mode 100644
index 27e34d190db..00000000000
--- a/apps/docs/content/docs/en/tools/mysql.mdx
+++ /dev/null
@@ -1,183 +0,0 @@
----
-title: MySQL
-description: Connect to MySQL database
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="mysql"
-  color="#E0E0E0"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-The [MySQL](https://www.mysql.com/) tool enables you to connect to any MySQL database and perform a wide range of database operations directly within your agentic workflows. With secure connection handling and flexible configuration, you can easily manage and interact with your data.
-
-With the MySQL tool, you can:
-
-- **Query data**: Execute SELECT queries to retrieve data from your MySQL tables using the `mysql_query` operation.
-- **Insert records**: Add new rows to your tables with the `mysql_insert` operation by specifying the table and data to insert.
-- **Update records**: Modify existing data in your tables using the `mysql_update` operation, providing the table, new data, and WHERE conditions.
-- **Delete records**: Remove rows from your tables with the `mysql_delete` operation, specifying the table and WHERE conditions.
-- **Execute raw SQL**: Run any custom SQL command using the `mysql_execute` operation for advanced use cases.
-
-The MySQL tool is ideal for scenarios where your agents need to interact with structured data—such as automating reporting, syncing data between systems, or powering data-driven workflows. It streamlines database access, making it easy to read, write, and manage your MySQL data programmatically.
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Integrate MySQL into the workflow. Can query, insert, update, delete, and execute raw SQL.
-
-
-
-## Tools
-
-### `mysql_query`
-
-Execute SELECT query on MySQL database
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | MySQL server hostname or IP address |
-| `port` | number | Yes | MySQL server port \(default: 3306\) |
-| `database` | string | Yes | Database name to connect to \(e.g., my_database\) |
-| `username` | string | Yes | Database username |
-| `password` | string | Yes | Database password |
-| `ssl` | string | No | SSL connection mode \(disabled, required, preferred\) |
-| `query` | string | Yes | SQL SELECT query to execute \(e.g., SELECT * FROM users WHERE active = 1\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `rows` | array | Array of rows returned from the query |
-| `rowCount` | number | Number of rows returned |
-
-### `mysql_insert`
-
-Insert new record into MySQL database
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | MySQL server hostname or IP address |
-| `port` | number | Yes | MySQL server port \(default: 3306\) |
-| `database` | string | Yes | Database name to connect to \(e.g., my_database\) |
-| `username` | string | Yes | Database username |
-| `password` | string | Yes | Database password |
-| `ssl` | string | No | SSL connection mode \(disabled, required, preferred\) |
-| `table` | string | Yes | Table name to insert into \(e.g., users, orders\) |
-| `data` | object | Yes | Data to insert as key-value pairs |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `rows` | array | Array of inserted rows |
-| `rowCount` | number | Number of rows inserted |
-
-### `mysql_update`
-
-Update existing records in MySQL database
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | MySQL server hostname or IP address |
-| `port` | number | Yes | MySQL server port \(default: 3306\) |
-| `database` | string | Yes | Database name to connect to \(e.g., my_database\) |
-| `username` | string | Yes | Database username |
-| `password` | string | Yes | Database password |
-| `ssl` | string | No | SSL connection mode \(disabled, required, preferred\) |
-| `table` | string | Yes | Table name to update \(e.g., users, orders\) |
-| `data` | object | Yes | Data to update as key-value pairs |
-| `where` | string | Yes | WHERE clause condition \(without WHERE keyword\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `rows` | array | Array of updated rows |
-| `rowCount` | number | Number of rows updated |
-
-### `mysql_delete`
-
-Delete records from MySQL database
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | MySQL server hostname or IP address |
-| `port` | number | Yes | MySQL server port \(default: 3306\) |
-| `database` | string | Yes | Database name to connect to \(e.g., my_database\) |
-| `username` | string | Yes | Database username |
-| `password` | string | Yes | Database password |
-| `ssl` | string | No | SSL connection mode \(disabled, required, preferred\) |
-| `table` | string | Yes | Table name to delete from \(e.g., users, orders\) |
-| `where` | string | Yes | WHERE clause condition \(without WHERE keyword\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `rows` | array | Array of deleted rows |
-| `rowCount` | number | Number of rows deleted |
-
-### `mysql_execute`
-
-Execute raw SQL query on MySQL database
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | MySQL server hostname or IP address |
-| `port` | number | Yes | MySQL server port \(default: 3306\) |
-| `database` | string | Yes | Database name to connect to \(e.g., my_database\) |
-| `username` | string | Yes | Database username |
-| `password` | string | Yes | Database password |
-| `ssl` | string | No | SSL connection mode \(disabled, required, preferred\) |
-| `query` | string | Yes | Raw SQL query to execute \(e.g., CREATE TABLE users \(id INT PRIMARY KEY, name VARCHAR\(255\)\)\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `rows` | array | Array of rows returned from the query |
-| `rowCount` | number | Number of rows affected |
-
-### `mysql_introspect`
-
-Introspect MySQL database schema to retrieve table structures, columns, and relationships
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | MySQL server hostname or IP address |
-| `port` | number | Yes | MySQL server port \(default: 3306\) |
-| `database` | string | Yes | Database name to connect to \(e.g., my_database\) |
-| `username` | string | Yes | Database username |
-| `password` | string | Yes | Database password |
-| `ssl` | string | No | SSL connection mode \(disabled, required, preferred\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `tables` | array | Array of table schemas with columns, keys, and indexes |
-| `databases` | array | List of available databases on the server |
-
-
diff --git a/apps/docs/content/docs/en/tools/neo4j.mdx b/apps/docs/content/docs/en/tools/neo4j.mdx
deleted file mode 100644
index fea2a4832e0..00000000000
--- a/apps/docs/content/docs/en/tools/neo4j.mdx
+++ /dev/null
@@ -1,213 +0,0 @@
----
-title: Neo4j
-description: Connect to Neo4j graph database
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="neo4j"
-  color="#FFFFFF"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-Easily manage, analyze, and visualize connected data with [Neo4j](https://neo4j.com) – the industry-leading native graph database built for handling complex relationships at scale. Neo4j allows you to efficiently store, query, and explore data models that go beyond tables, making it ideal for real-time recommendations, fraud detection, knowledge graphs, and more.
-
-With Neo4j integrations, you can:
-
-- **Query complex relationships:** Use Cypher, Neo4j’s declarative graph query language, to easily find patterns, shortest paths, and recommendations within your graph data.
-- **Create and update nodes and relationships:** Seamlessly add, update, and delete both nodes and relationships to keep your graph database always up to date.
-- **Analyze graph structures:** Instantly analyze interconnected information, uncover hidden connections, and gain actionable insights not possible with traditional databases.
-- **Centralize graph data in your workflows:** Connect Neo4j to your automation, enabling data enrichment and advanced analytics directly in your workflow.
-- **Visualize and export results:** Retrieve query results for display in dashboards or export enriched data to other systems.
-- **Scale with confidence:** Neo4j is trusted by enterprises worldwide for mission-critical applications, ensuring performance and reliability.
-
-Whether building recommendation systems, anti-fraud solutions, knowledge graphs, or AI-powered applications, Neo4j empowers teams to unlock the full value of their connected data. Start integrating Neo4j into your workflows to make smarter decisions, faster.
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Integrate Neo4j graph database into the workflow. Can query, create, merge, update, and delete nodes and relationships.
-
-
-
-## Tools
-
-### `neo4j_query`
-
-Execute MATCH queries to read nodes and relationships from Neo4j graph database. For best performance and to prevent large result sets, include LIMIT in your query (e.g., 
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | Neo4j server hostname or IP address |
-| `port` | number | Yes | Neo4j server port \(default: 7687 for Bolt protocol\) |
-| `database` | string | Yes | Database name to connect to \(e.g., "neo4j", "movies", "social"\) |
-| `username` | string | Yes | Neo4j username |
-| `password` | string | Yes | Neo4j password |
-| `encryption` | string | No | Connection encryption mode \(enabled, disabled\) |
-| `cypherQuery` | string | Yes | Cypher query to execute \(e.g., "MATCH \(n:Person\) RETURN n LIMIT 10", "MATCH \(a\)-\[r\]-&gt;\(b\) WHERE a.name = $name RETURN a, r, b"\) |
-| `parameters` | object | No | Parameters for the Cypher query as a JSON object. Use for any dynamic values including LIMIT \(e.g., query: "MATCH \(n\) RETURN n LIMIT $limit", parameters: \{limit: 100\}\). |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `records` | array | Array of records returned from the query |
-| `recordCount` | number | Number of records returned |
-| `summary` | json | Query execution summary with timing and counters |
-
-### `neo4j_create`
-
-Execute CREATE statements to add new nodes and relationships to Neo4j graph database
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | Neo4j server hostname or IP address |
-| `port` | number | Yes | Neo4j server port \(default: 7687 for Bolt protocol\) |
-| `database` | string | Yes | Database name to connect to \(e.g., "neo4j", "movies", "social"\) |
-| `username` | string | Yes | Neo4j username |
-| `password` | string | Yes | Neo4j password |
-| `encryption` | string | No | Connection encryption mode \(enabled, disabled\) |
-| `cypherQuery` | string | Yes | Cypher CREATE statement to execute \(e.g., "CREATE \(n:Person \{name: $name, age: $age\}\)", "CREATE \(a\)-\[:KNOWS\]-&gt;\(b\)"\) |
-| `parameters` | object | No | Parameters for the Cypher query as a JSON object \(e.g., \{"name": "Alice", "age": 30\}\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `summary` | json | Creation summary with counters for nodes and relationships created |
-
-### `neo4j_merge`
-
-Execute MERGE statements to find or create nodes and relationships in Neo4j (upsert operation)
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | Neo4j server hostname or IP address |
-| `port` | number | Yes | Neo4j server port \(default: 7687 for Bolt protocol\) |
-| `database` | string | Yes | Database name to connect to \(e.g., "neo4j", "movies", "social"\) |
-| `username` | string | Yes | Neo4j username |
-| `password` | string | Yes | Neo4j password |
-| `encryption` | string | No | Connection encryption mode \(enabled, disabled\) |
-| `cypherQuery` | string | Yes | Cypher MERGE statement to execute \(e.g., "MERGE \(n:Person \{name: $name\}\) ON CREATE SET n.created = timestamp\(\)", "MERGE \(a\)-\[r:KNOWS\]-&gt;\(b\)"\) |
-| `parameters` | object | No | Parameters for the Cypher query as a JSON object \(e.g., \{"name": "Alice", "email": "alice@example.com"\}\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `summary` | json | Merge summary with counters for nodes/relationships created or matched |
-
-### `neo4j_update`
-
-Execute SET statements to update properties of existing nodes and relationships in Neo4j
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | Neo4j server hostname or IP address |
-| `port` | number | Yes | Neo4j server port \(default: 7687 for Bolt protocol\) |
-| `database` | string | Yes | Database name to connect to \(e.g., "neo4j", "movies", "social"\) |
-| `username` | string | Yes | Neo4j username |
-| `password` | string | Yes | Neo4j password |
-| `encryption` | string | No | Connection encryption mode \(enabled, disabled\) |
-| `cypherQuery` | string | Yes | Cypher query with MATCH and SET statements to update properties \(e.g., "MATCH \(n:Person \{name: $name\}\) SET n.age = $age", "MATCH \(n\) WHERE n.id = $id SET n += $props"\) |
-| `parameters` | object | No | Parameters for the Cypher query as a JSON object \(e.g., \{"name": "Alice", "age": 31, "props": \{"city": "NYC"\}\}\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `summary` | json | Update summary with counters for properties set |
-
-### `neo4j_delete`
-
-Execute DELETE or DETACH DELETE statements to remove nodes and relationships from Neo4j
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | Neo4j server hostname or IP address |
-| `port` | number | Yes | Neo4j server port \(default: 7687 for Bolt protocol\) |
-| `database` | string | Yes | Database name to connect to \(e.g., "neo4j", "movies", "social"\) |
-| `username` | string | Yes | Neo4j username |
-| `password` | string | Yes | Neo4j password |
-| `encryption` | string | No | Connection encryption mode \(enabled, disabled\) |
-| `cypherQuery` | string | Yes | Cypher query with MATCH and DELETE/DETACH DELETE statements \(e.g., "MATCH \(n:Person \{name: $name\}\) DELETE n", "MATCH \(n\) DETACH DELETE n"\) |
-| `parameters` | object | No | Parameters for the Cypher query as a JSON object \(e.g., \{"name": "Alice", "id": 123\}\) |
-| `detach` | boolean | No | Whether to use DETACH DELETE to remove relationships before deleting nodes |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `summary` | json | Delete summary with counters for nodes and relationships deleted |
-
-### `neo4j_execute`
-
-Execute arbitrary Cypher queries on Neo4j graph database for complex operations
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | Neo4j server hostname or IP address |
-| `port` | number | Yes | Neo4j server port \(default: 7687 for Bolt protocol\) |
-| `database` | string | Yes | Database name to connect to \(e.g., "neo4j", "movies", "social"\) |
-| `username` | string | Yes | Neo4j username |
-| `password` | string | Yes | Neo4j password |
-| `encryption` | string | No | Connection encryption mode \(enabled, disabled\) |
-| `cypherQuery` | string | Yes | Cypher query to execute \(e.g., "CALL db.labels\(\)", "MATCH \(n\) RETURN count\(n\)", "CREATE INDEX FOR \(n:Person\) ON \(n.name\)"\) |
-| `parameters` | object | No | Parameters for the Cypher query as a JSON object \(e.g., \{"name": "Alice", "limit": 100\}\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `records` | array | Array of records returned from the query |
-| `recordCount` | number | Number of records returned |
-| `summary` | json | Execution summary with timing and counters |
-
-### `neo4j_introspect`
-
-Introspect a Neo4j database to discover its schema including node labels, relationship types, properties, constraints, and indexes.
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | Neo4j server hostname or IP address |
-| `port` | number | Yes | Neo4j server port \(default: 7687 for Bolt protocol\) |
-| `database` | string | Yes | Database name to connect to \(e.g., "neo4j", "movies", "social"\) |
-| `username` | string | Yes | Neo4j username |
-| `password` | string | Yes | Neo4j password |
-| `encryption` | string | No | Connection encryption mode \(enabled, disabled\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `labels` | array | Array of node labels in the database |
-| `relationshipTypes` | array | Array of relationship types in the database |
-| `nodeSchemas` | array | Array of node schemas with their properties |
-| `relationshipSchemas` | array | Array of relationship schemas with their properties |
-| `constraints` | array | Array of database constraints |
-| `indexes` | array | Array of database indexes |
-
-
diff --git a/apps/docs/content/docs/en/tools/onedrive.mdx b/apps/docs/content/docs/en/tools/onedrive.mdx
index 2326f5e0f0b..b20dea513cb 100644
--- a/apps/docs/content/docs/en/tools/onedrive.mdx
+++ b/apps/docs/content/docs/en/tools/onedrive.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="onedrive"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/onepassword.mdx b/apps/docs/content/docs/en/tools/onepassword.mdx
index 7d35c55b47b..c9723cdaced 100644
--- a/apps/docs/content/docs/en/tools/onepassword.mdx
+++ b/apps/docs/content/docs/en/tools/onepassword.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="onepassword"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/outlook.mdx b/apps/docs/content/docs/en/tools/outlook.mdx
index aa31a8ff5e9..04f4075aea9 100644
--- a/apps/docs/content/docs/en/tools/outlook.mdx
+++ b/apps/docs/content/docs/en/tools/outlook.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="outlook"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/parallel_ai.mdx b/apps/docs/content/docs/en/tools/parallel_ai.mdx
index 55dbfaf10e3..b693afa7e72 100644
--- a/apps/docs/content/docs/en/tools/parallel_ai.mdx
+++ b/apps/docs/content/docs/en/tools/parallel_ai.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="parallel_ai"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/pinecone.mdx b/apps/docs/content/docs/en/tools/pinecone.mdx
index abda1f1f6cd..0a3a62afc25 100644
--- a/apps/docs/content/docs/en/tools/pinecone.mdx
+++ b/apps/docs/content/docs/en/tools/pinecone.mdx
@@ -10,23 +10,6 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
   color="#0D1117"
 />
 
-{/* MANUAL-CONTENT-START:intro */}
-[Pinecone](https://www.pinecone.io) is a vector database designed for building high-performance vector search applications. It enables efficient storage, management, and similarity search of high-dimensional vector embeddings, making it ideal for AI applications that require semantic search capabilities.
-
-With Pinecone, you can:
-
-- **Store vector embeddings**: Efficiently manage high-dimensional vectors at scale
-- **Perform similarity search**: Find the most similar vectors to a query vector in milliseconds
-- **Build semantic search**: Create search experiences based on meaning rather than keywords
-- **Implement recommendation systems**: Generate personalized recommendations based on content similarity
-- **Deploy machine learning models**: Operationalize ML models that rely on vector similarity
-- **Scale seamlessly**: Handle billions of vectors with consistent performance
-- **Maintain real-time indexes**: Update your vector database in real-time as new data arrives
-
-In Sim, the Pinecone integration enables your agents to leverage vector search capabilities programmatically as part of their workflows. This allows for sophisticated automation scenarios that combine natural language processing with semantic search and retrieval. Your agents can generate embeddings from text, store these vectors in Pinecone indexes, and perform similarity searches to find the most relevant information. This integration bridges the gap between your AI workflows and vector search infrastructure, enabling more intelligent information retrieval based on semantic meaning rather than exact keyword matching. By connecting Sim with Pinecone, you can create agents that understand context, retrieve relevant information from large datasets, and deliver more accurate and personalized responses to users - all without requiring complex infrastructure management or specialized knowledge of vector databases.
-{/* MANUAL-CONTENT-END */}
-
-
 ## Usage Instructions
 
 Integrate Pinecone into the workflow. Can generate embeddings, upsert text, search with text, fetch vectors, and search with vectors.
diff --git a/apps/docs/content/docs/en/tools/postgresql.mdx b/apps/docs/content/docs/en/tools/postgresql.mdx
deleted file mode 100644
index ee4a7678372..00000000000
--- a/apps/docs/content/docs/en/tools/postgresql.mdx
+++ /dev/null
@@ -1,205 +0,0 @@
----
-title: PostgreSQL
-description: Connect to PostgreSQL database
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="postgresql"
-  color="#336791"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-The [PostgreSQL](https://www.postgresql.org/) tool enables you to connect to any PostgreSQL database and perform a wide range of database operations directly within your agentic workflows. With secure connection handling and flexible configuration, you can easily manage and interact with your data.
-
-With the PostgreSQL tool, you can:
-
-- **Query data**: Execute SELECT queries to retrieve data from your PostgreSQL tables using the `postgresql_query` operation.
-- **Insert records**: Add new rows to your tables with the `postgresql_insert` operation by specifying the table and data to insert.
-- **Update records**: Modify existing data in your tables using the `postgresql_update` operation, providing the table, new data, and WHERE conditions.
-- **Delete records**: Remove rows from your tables with the `postgresql_delete` operation, specifying the table and WHERE conditions.
-- **Execute raw SQL**: Run any custom SQL command using the `postgresql_execute` operation for advanced use cases.
-
-The PostgreSQL tool is ideal for scenarios where your agents need to interact with structured data—such as automating reporting, syncing data between systems, or powering data-driven workflows. It streamlines database access, making it easy to read, write, and manage your PostgreSQL data programmatically.
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Integrate PostgreSQL into the workflow. Can query, insert, update, delete, and execute raw SQL.
-
-
-
-## Tools
-
-### `postgresql_query`
-
-Execute a SELECT query on PostgreSQL database
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | PostgreSQL server hostname or IP address |
-| `port` | number | Yes | PostgreSQL server port \(default: 5432\) |
-| `database` | string | Yes | Database name to connect to |
-| `username` | string | Yes | Database username |
-| `password` | string | Yes | Database password |
-| `ssl` | string | No | SSL connection mode \(disabled, required, preferred\) |
-| `query` | string | Yes | SQL SELECT query to execute |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `rows` | array | Array of rows returned from the query |
-| `rowCount` | number | Number of rows returned |
-
-### `postgresql_insert`
-
-Insert data into PostgreSQL database
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | PostgreSQL server hostname or IP address |
-| `port` | number | Yes | PostgreSQL server port \(default: 5432\) |
-| `database` | string | Yes | Database name to connect to |
-| `username` | string | Yes | Database username |
-| `password` | string | Yes | Database password |
-| `ssl` | string | No | SSL connection mode \(disabled, required, preferred\) |
-| `table` | string | Yes | Table name to insert data into |
-| `data` | object | Yes | Data object to insert \(key-value pairs\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `rows` | array | Inserted data \(if RETURNING clause used\) |
-| `rowCount` | number | Number of rows inserted |
-
-### `postgresql_update`
-
-Update data in PostgreSQL database
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | PostgreSQL server hostname or IP address |
-| `port` | number | Yes | PostgreSQL server port \(default: 5432\) |
-| `database` | string | Yes | Database name to connect to |
-| `username` | string | Yes | Database username |
-| `password` | string | Yes | Database password |
-| `ssl` | string | No | SSL connection mode \(disabled, required, preferred\) |
-| `table` | string | Yes | Table name to update data in |
-| `data` | object | Yes | Data object with fields to update \(key-value pairs\) |
-| `where` | string | Yes | WHERE clause condition \(without WHERE keyword\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `rows` | array | Updated data \(if RETURNING clause used\) |
-| `rowCount` | number | Number of rows updated |
-
-### `postgresql_delete`
-
-Delete data from PostgreSQL database
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | PostgreSQL server hostname or IP address |
-| `port` | number | Yes | PostgreSQL server port \(default: 5432\) |
-| `database` | string | Yes | Database name to connect to |
-| `username` | string | Yes | Database username |
-| `password` | string | Yes | Database password |
-| `ssl` | string | No | SSL connection mode \(disabled, required, preferred\) |
-| `table` | string | Yes | Table name to delete data from |
-| `where` | string | Yes | WHERE clause condition \(without WHERE keyword\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `rows` | array | Deleted data \(if RETURNING clause used\) |
-| `rowCount` | number | Number of rows deleted |
-
-### `postgresql_execute`
-
-Execute raw SQL query on PostgreSQL database
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | PostgreSQL server hostname or IP address |
-| `port` | number | Yes | PostgreSQL server port \(default: 5432\) |
-| `database` | string | Yes | Database name to connect to |
-| `username` | string | Yes | Database username |
-| `password` | string | Yes | Database password |
-| `ssl` | string | No | SSL connection mode \(disabled, required, preferred\) |
-| `query` | string | Yes | Raw SQL query to execute |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `rows` | array | Array of rows returned from the query |
-| `rowCount` | number | Number of rows affected |
-
-### `postgresql_introspect`
-
-Introspect PostgreSQL database schema to retrieve table structures, columns, and relationships
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | PostgreSQL server hostname or IP address |
-| `port` | number | Yes | PostgreSQL server port \(default: 5432\) |
-| `database` | string | Yes | Database name to connect to |
-| `username` | string | Yes | Database username |
-| `password` | string | Yes | Database password |
-| `ssl` | string | No | SSL connection mode \(disabled, required, preferred\) |
-| `schema` | string | No | Schema to introspect \(default: public\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `message` | string | Operation status message |
-| `tables` | array | Array of table schemas with columns, keys, and indexes |
-|   ↳ `name` | string | Table name |
-|   ↳ `schema` | string | Schema name \(e.g., public\) |
-|   ↳ `columns` | array | Table columns |
-|     ↳ `name` | string | Column name |
-|     ↳ `type` | string | Data type \(e.g., integer, varchar, timestamp\) |
-|     ↳ `nullable` | boolean | Whether the column allows NULL values |
-|     ↳ `default` | string | Default value expression |
-|     ↳ `isPrimaryKey` | boolean | Whether the column is part of the primary key |
-|     ↳ `isForeignKey` | boolean | Whether the column is a foreign key |
-|     ↳ `references` | object | Foreign key reference information |
-|       ↳ `table` | string | Referenced table name |
-|       ↳ `column` | string | Referenced column name |
-|   ↳ `primaryKey` | array | Primary key column names |
-|   ↳ `foreignKeys` | array | Foreign key constraints |
-|     ↳ `column` | string | Local column name |
-|     ↳ `referencesTable` | string | Referenced table name |
-|     ↳ `referencesColumn` | string | Referenced column name |
-|   ↳ `indexes` | array | Table indexes |
-|     ↳ `name` | string | Index name |
-|     ↳ `columns` | array | Columns included in the index |
-|     ↳ `unique` | boolean | Whether the index enforces uniqueness |
-| `schemas` | array | List of available schemas in the database |
-
-
diff --git a/apps/docs/content/docs/en/tools/posthog.mdx b/apps/docs/content/docs/en/tools/posthog.mdx
index 6b471ef60fb..f0fd26081c6 100644
--- a/apps/docs/content/docs/en/tools/posthog.mdx
+++ b/apps/docs/content/docs/en/tools/posthog.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="posthog"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/pulse.mdx b/apps/docs/content/docs/en/tools/pulse.mdx
index 46b275cb598..e924a9f4774 100644
--- a/apps/docs/content/docs/en/tools/pulse.mdx
+++ b/apps/docs/content/docs/en/tools/pulse.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="pulse_v2"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/qdrant.mdx b/apps/docs/content/docs/en/tools/qdrant.mdx
index a902750b808..77cf5cf90a0 100644
--- a/apps/docs/content/docs/en/tools/qdrant.mdx
+++ b/apps/docs/content/docs/en/tools/qdrant.mdx
@@ -10,27 +10,6 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
   color="#1A223F"
 />
 
-{/* MANUAL-CONTENT-START:intro */}
-[Qdrant](https://qdrant.tech) is an open-source vector database designed for efficient storage, management, and retrieval of high-dimensional vector embeddings. Qdrant enables fast and scalable semantic search, making it ideal for AI applications that require similarity search, recommendation systems, and contextual information retrieval.
-
-With Qdrant, you can:
-
-- **Store vector embeddings**: Efficiently manage and persist high-dimensional vectors at scale
-- **Perform semantic similarity search**: Find the most similar vectors to a query vector in real time
-- **Filter and organize data**: Use advanced filtering to narrow down search results based on metadata or payload
-- **Fetch specific points**: Retrieve vectors and their associated payloads by ID
-- **Scale seamlessly**: Handle large collections and high-throughput workloads
-
-In Sim, the Qdrant integration enables your agents to interact with Qdrant programmatically as part of their workflows. Supported operations include:
-
-- **Upsert**: Insert or update points (vectors and payloads) in a Qdrant collection
-- **Search**: Perform similarity search to find vectors most similar to a given query vector, with optional filtering and result customization
-- **Fetch**: Retrieve specific points from a collection by their IDs, with options to include payloads and vectors
-
-This integration allows your agents to leverage powerful vector search and management capabilities, enabling advanced automation scenarios such as semantic search, recommendation, and contextual retrieval. By connecting Sim with Qdrant, you can build agents that understand context, retrieve relevant information from large datasets, and deliver more intelligent and personalized responses—all without managing complex infrastructure.
-{/* MANUAL-CONTENT-END */}
-
-
 ## Usage Instructions
 
 Integrate Qdrant into the workflow. Can upsert, search, and fetch points.
diff --git a/apps/docs/content/docs/en/tools/redis.mdx b/apps/docs/content/docs/en/tools/redis.mdx
index cf862f762e6..2a97e3da38b 100644
--- a/apps/docs/content/docs/en/tools/redis.mdx
+++ b/apps/docs/content/docs/en/tools/redis.mdx
@@ -10,22 +10,6 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
   color="#FF4438"
 />
 
-{/* MANUAL-CONTENT-START:intro */}
-[Redis](https://redis.io/) is an open-source, in-memory data structure store, used as a distributed key-value database, cache, and message broker. Redis supports a variety of data structures including strings, hashes, lists, sets, and more, making it highly flexible for different application scenarios.
-
-With Redis, you can:
-
-- **Store and retrieve key-value data instantly**: Use Redis as a fast database, cache, or session store for high performance.
-- **Work with multiple data structures**: Manage not just strings, but also lists, hashes, sets, sorted sets, streams, and bitmaps.
-- **Perform atomic operations**: Safely manipulate data using atomic commands and transactions.
-- **Support pub/sub messaging**: Use Redis’s publisher/subscriber features for real-time event handling and messaging.
-- **Set automatic expiration policies**: Assign TTLs to keys for caching and time-sensitive data.
-- **Scale horizontally**: Use Redis Cluster for sharding, high availability, and scalable workloads.
-
-In Sim, the Redis integration lets your agents connect to any Redis-compatible instance to perform key-value, hash, list, and utility operations. You can build workflows that involve storing, retrieving, or manipulating data in Redis, or manage your app’s cache, sessions, or real-time messaging, directly within your Sim workspace.
-{/* MANUAL-CONTENT-END */}
-
-
 ## Usage Instructions
 
 Connect to any Redis instance to perform key-value, hash, list, and utility operations via a direct connection.
diff --git a/apps/docs/content/docs/en/tools/s3.mdx b/apps/docs/content/docs/en/tools/s3.mdx
index f7780eb585c..3d47041aec1 100644
--- a/apps/docs/content/docs/en/tools/s3.mdx
+++ b/apps/docs/content/docs/en/tools/s3.mdx
@@ -10,23 +10,6 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
   color="linear-gradient(45deg, #1B660F 0%, #6CAE3E 100%)"
 />
 
-{/* MANUAL-CONTENT-START:intro */}
-[Amazon S3](https://aws.amazon.com/s3/) is a highly scalable, secure, and durable cloud storage service provided by Amazon Web Services. It's designed to store and retrieve any amount of data from anywhere on the web, making it one of the most widely used cloud storage solutions for businesses of all sizes.
-
-With Amazon S3, you can:
-
-- **Store unlimited data**: Upload files of any size and type with virtually unlimited storage capacity
-- **Access from anywhere**: Retrieve your files from anywhere in the world with low-latency access
-- **Ensure data durability**: Benefit from 99.999999999% (11 9's) durability with automatic data replication
-- **Control access**: Manage permissions and access controls with fine-grained security policies
-- **Scale automatically**: Handle varying workloads without manual intervention or capacity planning
-- **Integrate seamlessly**: Connect with other AWS services and third-party applications easily
-- **Optimize costs**: Choose from multiple storage classes to optimize costs based on access patterns
-
-In Sim, the S3 integration enables your agents to retrieve and access files stored in your Amazon S3 buckets using secure presigned URLs. This allows for powerful automation scenarios such as processing documents, analyzing stored data, retrieving configuration files, and accessing media content as part of your workflows. Your agents can securely fetch files from S3 without exposing your AWS credentials, making it easy to incorporate cloud-stored assets into your automation processes. This integration bridges the gap between your cloud storage and AI workflows, enabling seamless access to your stored data while maintaining security best practices through AWS's robust authentication mechanisms.
-{/* MANUAL-CONTENT-END */}
-
-
 ## Usage Instructions
 
 Integrate S3 into the workflow. Upload files, download objects, list bucket contents, delete objects, and copy objects between buckets. Requires AWS access key and secret access key.
diff --git a/apps/docs/content/docs/en/tools/salesforce.mdx b/apps/docs/content/docs/en/tools/salesforce.mdx
index 4cb3e0103c2..ce4f86ff31b 100644
--- a/apps/docs/content/docs/en/tools/salesforce.mdx
+++ b/apps/docs/content/docs/en/tools/salesforce.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="salesforce"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/search.mdx b/apps/docs/content/docs/en/tools/search.mdx
deleted file mode 100644
index 882a18714d2..00000000000
--- a/apps/docs/content/docs/en/tools/search.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: Search
-description: Search the web ($0.01 per search)
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="search"
-  color="#3B82F6"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-The **Search** tool lets you search the web from within your Sim workflows using state-of-the-art search engines. Use it to pull in the latest information, news, facts, and web content directly into your agents, automations, or conversations.
-
-- **General web search**: Find up-to-date information from the internet to supplement your workflows.
-- **Automated queries**: Let agents or program logic submit search queries and handle the results automatically.
-- **Structured results**: Returns the most relevant web results, including title, link, snippet, and date for each result.
-
-> **Note:** Each search costs **$0.01** per query.
-
-This tool is ideal for any workflow where your agents need access to live web data or must reference current events, perform research, or fetch supplemental content.
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Search the web using the Search tool. Each search costs $0.01 per query.
-
-
-
-## Tools
-
-### `search_tool`
-
-Search the web. Returns the most relevant web results, including title, link, snippet, and date for each result.
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `query` | string | Yes | The search query |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `results` | json | Search results |
-| `query` | string | The search query |
-| `totalResults` | number | Total number of results |
-| `source` | string | Search source \(exa\) |
-| `cost` | json | Cost information \($0.01\) |
-
-
diff --git a/apps/docs/content/docs/en/tools/sentry.mdx b/apps/docs/content/docs/en/tools/sentry.mdx
index 724915e9855..c2802cc02ec 100644
--- a/apps/docs/content/docs/en/tools/sentry.mdx
+++ b/apps/docs/content/docs/en/tools/sentry.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="sentry"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/sftp.mdx b/apps/docs/content/docs/en/tools/sftp.mdx
deleted file mode 100644
index fd0ef6aa7f1..00000000000
--- a/apps/docs/content/docs/en/tools/sftp.mdx
+++ /dev/null
@@ -1,184 +0,0 @@
----
-title: SFTP
-description: Transfer files via SFTP (SSH File Transfer Protocol)
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="sftp"
-  color="#2D3748"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-[SFTP (SSH File Transfer Protocol)](https://en.wikipedia.org/wiki/SSH_File_Transfer_Protocol) is a secure network protocol that enables you to upload, download, and manage files on remote servers. SFTP operates over SSH, making it ideal for automated, encrypted file transfers and remote file management within modern workflows. 
-
-With SFTP tools integrated into Sim, you can easily automate the movement of files between your AI agents and external systems or servers. This empowers your agents to manage critical data exchanges, backups, document generation, and remote system orchestration—all with robust security.
-
-**Key functionality available via SFTP tools:**
-
-- **Upload Files:** Seamlessly transfer files of any type from your workflow to a remote server, with support for both password and SSH private key authentication.
-- **Download Files:** Retrieve files from remote SFTP servers directly for processing, archiving, or further automation.
-- **List & Manage Files:** Enumerate directories, delete or create files and folders, and manage file system permissions remotely.
-- **Flexible Authentication:** Connect using either traditional passwords or SSH keys, with support for passphrases and permissions control.
-- **Large File Support:** Programmatically manage large file uploads and downloads, with built-in size limits for safety.
-
-By integrating SFTP into Sim, you can automate secure file operations as part of any workflow, whether it’s data collection, reporting, remote system maintenance, or dynamic content exchange between platforms.
-
-The sections below describe the key SFTP tools available:
-
-- **sftp_upload:** Upload one or more files to a remote server.
-- **sftp_download:** Download files from a remote server to your workflow.
-- **sftp_list:** List directory contents on a remote SFTP server.
-- **sftp_delete:** Delete files or directories from a remote server.
-- **sftp_create:** Create new files on a remote SFTP server.
-- **sftp_mkdir:** Create new directories remotely.
-
-See the tool documentation below for detailed input and output parameters for each operation.
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Upload, download, list, and manage files on remote servers via SFTP. Supports both password and private key authentication for secure file transfers.
-
-
-
-## Tools
-
-### `sftp_upload`
-
-Upload files to a remote SFTP server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SFTP server hostname or IP address |
-| `port` | number | Yes | SFTP server port \(default: 22\) |
-| `username` | string | Yes | SFTP username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `remotePath` | string | Yes | Destination directory on the remote server |
-| `files` | file[] | No | Files to upload |
-| `fileContent` | string | No | Direct file content to upload \(for text files\) |
-| `fileName` | string | No | File name when using direct content |
-| `overwrite` | boolean | No | Whether to overwrite existing files \(default: true\) |
-| `permissions` | string | No | File permissions \(e.g., 0644\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether the upload was successful |
-| `uploadedFiles` | json | Array of uploaded file details \(name, remotePath, size\) |
-| `message` | string | Operation status message |
-
-### `sftp_download`
-
-Download a file from a remote SFTP server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SFTP server hostname or IP address |
-| `port` | number | Yes | SFTP server port \(default: 22\) |
-| `username` | string | Yes | SFTP username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `remotePath` | string | Yes | Path to the file on the remote server |
-| `encoding` | string | No | Output encoding: utf-8 for text, base64 for binary \(default: utf-8\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether the download was successful |
-| `file` | file | Downloaded file stored in execution files |
-| `fileName` | string | Name of the downloaded file |
-| `content` | string | File content \(text or base64 encoded\) |
-| `size` | number | File size in bytes |
-| `encoding` | string | Content encoding \(utf-8 or base64\) |
-| `message` | string | Operation status message |
-
-### `sftp_list`
-
-List files and directories on a remote SFTP server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SFTP server hostname or IP address |
-| `port` | number | Yes | SFTP server port \(default: 22\) |
-| `username` | string | Yes | SFTP username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `remotePath` | string | Yes | Directory path on the remote server |
-| `detailed` | boolean | No | Include detailed file information \(size, permissions, modified date\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether the operation was successful |
-| `path` | string | Directory path that was listed |
-| `entries` | json | Array of directory entries with name, type, size, permissions, modifiedAt |
-| `count` | number | Number of entries in the directory |
-| `message` | string | Operation status message |
-
-### `sftp_delete`
-
-Delete a file or directory on a remote SFTP server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SFTP server hostname or IP address |
-| `port` | number | Yes | SFTP server port \(default: 22\) |
-| `username` | string | Yes | SFTP username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `remotePath` | string | Yes | Path to the file or directory to delete |
-| `recursive` | boolean | No | Delete directories recursively |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether the deletion was successful |
-| `deletedPath` | string | Path that was deleted |
-| `message` | string | Operation status message |
-
-### `sftp_mkdir`
-
-Create a directory on a remote SFTP server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SFTP server hostname or IP address |
-| `port` | number | Yes | SFTP server port \(default: 22\) |
-| `username` | string | Yes | SFTP username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `remotePath` | string | Yes | Path for the new directory |
-| `recursive` | boolean | No | Create parent directories if they do not exist |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether the directory was created successfully |
-| `createdPath` | string | Path of the created directory |
-| `message` | string | Operation status message |
-
-
diff --git a/apps/docs/content/docs/en/tools/sharepoint.mdx b/apps/docs/content/docs/en/tools/sharepoint.mdx
index 05a425ba35e..7cb84dfb326 100644
--- a/apps/docs/content/docs/en/tools/sharepoint.mdx
+++ b/apps/docs/content/docs/en/tools/sharepoint.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="sharepoint_v2"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/smtp.mdx b/apps/docs/content/docs/en/tools/smtp.mdx
deleted file mode 100644
index 098deb7b2c1..00000000000
--- a/apps/docs/content/docs/en/tools/smtp.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: SMTP
-description: Send emails via any SMTP mail server
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="smtp"
-  color="#2D3748"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-[SMTP (Simple Mail Transfer Protocol)](https://en.wikipedia.org/wiki/Simple_Mail_Transfer_Protocol) is the foundational standard for email transmission across the Internet. By connecting to any SMTP-compatible server—such as Gmail, Outlook, or your organization's own mail infrastructure—you can send emails programmatically and automate your outbound communications.
-
-SMTP integration allows you to fully customize email sending through direct server connectivity, supporting both basic and advanced email use cases. With SMTP, you can control every aspect of message delivery, recipient management, and content formatting, making it suitable for transactional notifications, bulk mailings, and any automated workflow requiring robust outbound email delivery.
-
-**Key features available via SMTP integration include:**
-
-- **Universal Email Delivery:** Send emails using any SMTP server by configuring standard server connection parameters.
-- **Customizable Sender and Recipients:** Specify sender address, display name, primary recipients, as well as CC and BCC fields.
-- **Rich Content Support:** Send plain text or richly formatted HTML emails according to your requirements.
-- **Attachments:** Include multiple files as attachments in outgoing emails.
-- **Flexible Security:** Connect using TLS, SSL, or standard (unencrypted) protocols as supported by your SMTP provider.
-- **Advanced Headers:** Set reply-to headers and other advanced email options to cater for complex mailflows and user interactions.
-
-By integrating SMTP with Sim, agents and workflows can programmatically send emails as part of any automated process—ranging from sending notifications and confirmations, to automating external communications, reporting, and document delivery. This offers a highly flexible, provider-agnostic approach to managing email directly within your AI-driven processes.
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Send emails using any SMTP server (Gmail, Outlook, custom servers, etc.). Configure SMTP connection settings and send emails with full control over content, recipients, and attachments.
-
-
-
-## Tools
-
-### `smtp_send_mail`
-
-Send emails via SMTP server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `smtpHost` | string | Yes | SMTP server hostname \(e.g., smtp.gmail.com\) |
-| `smtpPort` | number | Yes | SMTP server port \(587 for TLS, 465 for SSL\) |
-| `smtpUsername` | string | Yes | SMTP authentication username |
-| `smtpPassword` | string | Yes | SMTP authentication password |
-| `smtpSecure` | string | Yes | Security protocol \(TLS, SSL, or None\) |
-| `from` | string | Yes | Sender email address |
-| `to` | string | Yes | Recipient email address |
-| `subject` | string | Yes | Email subject |
-| `body` | string | Yes | Email body content |
-| `contentType` | string | No | Content type \(text or html\) |
-| `fromName` | string | No | Display name for sender |
-| `cc` | string | No | CC recipients \(comma-separated\) |
-| `bcc` | string | No | BCC recipients \(comma-separated\) |
-| `replyTo` | string | No | Reply-to email address |
-| `attachments` | file[] | No | Files to attach to the email |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `success` | boolean | Whether the email was sent successfully |
-| `messageId` | string | Message ID from SMTP server |
-| `to` | string | Recipient email address |
-| `subject` | string | Email subject |
-| `error` | string | Error message if sending failed |
-
-
diff --git a/apps/docs/content/docs/en/tools/ssh.mdx b/apps/docs/content/docs/en/tools/ssh.mdx
deleted file mode 100644
index a8bd9809349..00000000000
--- a/apps/docs/content/docs/en/tools/ssh.mdx
+++ /dev/null
@@ -1,403 +0,0 @@
----
-title: SSH
-description: Connect to remote servers via SSH
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="ssh"
-  color="#000000"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-[SSH (Secure Shell)](https://en.wikipedia.org/wiki/Secure_Shell) is a widely-used protocol for securely connecting to remote servers, allowing you to execute commands, transfer files, and manage systems over encrypted channels.
-
-With SSH support in Sim, your agents can:
-
-- **Execute remote commands**: Run shell commands on any SSH-accessible server
-- **Upload and run scripts**: Easily transfer and execute multi-line scripts for advanced automation
-- **Transfer files securely**: Upload and download files as part of your workflows (coming soon or via command)
-- **Automate server management**: Perform updates, maintenance, monitoring, deployments, and configuration tasks programmatically
-- **Use flexible authentication**: Connect with password or private key authentication, including support for encrypted keys
-
-The following Sim SSH tools enable your agents to interact with servers as part of larger automations:
-
-- `ssh_execute_command`: Run any single shell command remotely and capture output, status, and errors.
-- `ssh_execute_script`: Upload and execute a full multi-line script on the remote system.
-- (Additional tools coming soon, such as file transfer.)
-
-By integrating SSH into your agent workflows, you can automate secure access, remote operations, and server orchestration—streamlining DevOps, IT automation, and custom remote management, all from within Sim.
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Execute commands, transfer files, and manage remote servers via SSH. Supports password and private key authentication for secure server access.
-
-
-
-## Tools
-
-### `ssh_execute_command`
-
-Execute a shell command on a remote SSH server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SSH server hostname or IP address |
-| `port` | number | Yes | SSH server port \(default: 22\) |
-| `username` | string | Yes | SSH username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `command` | string | Yes | Shell command to execute on the remote server |
-| `workingDirectory` | string | No | Working directory for command execution |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `stdout` | string | Standard output from command |
-| `stderr` | string | Standard error output |
-| `exitCode` | number | Command exit code |
-| `success` | boolean | Whether command succeeded \(exit code 0\) |
-| `message` | string | Operation status message |
-
-### `ssh_execute_script`
-
-Upload and execute a multi-line script on a remote SSH server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SSH server hostname or IP address |
-| `port` | number | Yes | SSH server port \(default: 22\) |
-| `username` | string | Yes | SSH username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `script` | string | Yes | Script content to execute \(bash, python, etc.\) |
-| `interpreter` | string | No | Script interpreter \(default: /bin/bash\) |
-| `workingDirectory` | string | No | Working directory for script execution |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `stdout` | string | Standard output from script |
-| `stderr` | string | Standard error output |
-| `exitCode` | number | Script exit code |
-| `success` | boolean | Whether script succeeded \(exit code 0\) |
-| `scriptPath` | string | Temporary path where script was uploaded |
-| `message` | string | Operation status message |
-
-### `ssh_check_command_exists`
-
-Check if a command/program exists on the remote SSH server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SSH server hostname or IP address |
-| `port` | number | Yes | SSH server port \(default: 22\) |
-| `username` | string | Yes | SSH username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `commandName` | string | Yes | Command name to check \(e.g., docker, git, python3\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `commandExists` | boolean | Whether the command exists |
-| `commandPath` | string | Full path to the command \(if found\) |
-| `version` | string | Command version output \(if applicable\) |
-| `message` | string | Operation status message |
-
-### `ssh_upload_file`
-
-Upload a file to a remote SSH server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SSH server hostname or IP address |
-| `port` | number | Yes | SSH server port \(default: 22\) |
-| `username` | string | Yes | SSH username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `fileContent` | string | Yes | File content to upload \(base64 encoded for binary files\) |
-| `fileName` | string | Yes | Name of the file being uploaded |
-| `remotePath` | string | Yes | Destination path on the remote server |
-| `permissions` | string | No | File permissions \(e.g., 0644\) |
-| `overwrite` | boolean | No | Whether to overwrite existing files \(default: true\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `uploaded` | boolean | Whether the file was uploaded successfully |
-| `remotePath` | string | Final path on the remote server |
-| `size` | number | File size in bytes |
-| `message` | string | Operation status message |
-
-### `ssh_download_file`
-
-Download a file from a remote SSH server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SSH server hostname or IP address |
-| `port` | number | Yes | SSH server port \(default: 22\) |
-| `username` | string | Yes | SSH username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `remotePath` | string | Yes | Path of the file on the remote server |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `downloaded` | boolean | Whether the file was downloaded successfully |
-| `file` | file | Downloaded file stored in execution files |
-| `fileContent` | string | File content \(base64 encoded for binary files\) |
-| `fileName` | string | Name of the downloaded file |
-| `remotePath` | string | Source path on the remote server |
-| `size` | number | File size in bytes |
-| `message` | string | Operation status message |
-
-### `ssh_list_directory`
-
-List files and directories in a remote directory
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SSH server hostname or IP address |
-| `port` | number | Yes | SSH server port \(default: 22\) |
-| `username` | string | Yes | SSH username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `path` | string | Yes | Remote directory path to list |
-| `detailed` | boolean | No | Include file details \(size, permissions, modified date\) |
-| `recursive` | boolean | No | List subdirectories recursively \(default: false\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `entries` | array | Array of file and directory entries |
-|   ↳ `name` | string | File or directory name |
-|   ↳ `type` | string | Entry type \(file, directory, symlink\) |
-|   ↳ `size` | number | File size in bytes |
-|   ↳ `permissions` | string | File permissions |
-|   ↳ `modified` | string | Last modified timestamp |
-| `totalFiles` | number | Total number of files |
-| `totalDirectories` | number | Total number of directories |
-| `message` | string | Operation status message |
-
-### `ssh_check_file_exists`
-
-Check if a file or directory exists on the remote SSH server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SSH server hostname or IP address |
-| `port` | number | Yes | SSH server port \(default: 22\) |
-| `username` | string | Yes | SSH username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `path` | string | Yes | Remote file or directory path to check |
-| `type` | string | No | Expected type: file, directory, or any \(default: any\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `exists` | boolean | Whether the path exists |
-| `type` | string | Type of path \(file, directory, symlink, not_found\) |
-| `size` | number | File size if it is a file |
-| `permissions` | string | File permissions \(e.g., 0755\) |
-| `modified` | string | Last modified timestamp |
-| `message` | string | Operation status message |
-
-### `ssh_create_directory`
-
-Create a directory on the remote SSH server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SSH server hostname or IP address |
-| `port` | number | Yes | SSH server port \(default: 22\) |
-| `username` | string | Yes | SSH username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `path` | string | Yes | Directory path to create |
-| `recursive` | boolean | No | Create parent directories if they do not exist \(default: true\) |
-| `permissions` | string | No | Directory permissions \(default: 0755\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `created` | boolean | Whether the directory was created successfully |
-| `remotePath` | string | Created directory path |
-| `alreadyExists` | boolean | Whether the directory already existed |
-| `message` | string | Operation status message |
-
-### `ssh_delete_file`
-
-Delete a file or directory from the remote SSH server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SSH server hostname or IP address |
-| `port` | number | Yes | SSH server port \(default: 22\) |
-| `username` | string | Yes | SSH username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `path` | string | Yes | Path to delete |
-| `recursive` | boolean | No | Recursively delete directories \(default: false\) |
-| `force` | boolean | No | Force deletion without confirmation \(default: false\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `deleted` | boolean | Whether the path was deleted successfully |
-| `remotePath` | string | Deleted path |
-| `message` | string | Operation status message |
-
-### `ssh_move_rename`
-
-Move or rename a file or directory on the remote SSH server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SSH server hostname or IP address |
-| `port` | number | Yes | SSH server port \(default: 22\) |
-| `username` | string | Yes | SSH username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `sourcePath` | string | Yes | Current path of the file or directory |
-| `destinationPath` | string | Yes | New path for the file or directory |
-| `overwrite` | boolean | No | Overwrite destination if it exists \(default: false\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `moved` | boolean | Whether the operation was successful |
-| `sourcePath` | string | Original path |
-| `destinationPath` | string | New path |
-| `message` | string | Operation status message |
-
-### `ssh_get_system_info`
-
-Retrieve system information from the remote SSH server
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SSH server hostname or IP address |
-| `port` | number | Yes | SSH server port \(default: 22\) |
-| `username` | string | Yes | SSH username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `hostname` | string | Server hostname |
-| `os` | string | Operating system \(e.g., Linux, Darwin\) |
-| `architecture` | string | CPU architecture \(e.g., x64, arm64\) |
-| `uptime` | number | System uptime in seconds |
-| `memory` | json | Memory information \(total, free, used\) |
-| `diskSpace` | json | Disk space information \(total, free, used\) |
-| `message` | string | Operation status message |
-
-### `ssh_read_file_content`
-
-Read the contents of a remote file
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SSH server hostname or IP address |
-| `port` | number | Yes | SSH server port \(default: 22\) |
-| `username` | string | Yes | SSH username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `path` | string | Yes | Remote file path to read |
-| `encoding` | string | No | File encoding \(default: utf-8\) |
-| `maxSize` | number | No | Maximum file size to read in MB \(default: 10\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `content` | string | File content as string |
-| `size` | number | File size in bytes |
-| `lines` | number | Number of lines in file |
-| `remotePath` | string | Remote file path |
-| `message` | string | Operation status message |
-
-### `ssh_write_file_content`
-
-Write or append content to a remote file
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `host` | string | Yes | SSH server hostname or IP address |
-| `port` | number | Yes | SSH server port \(default: 22\) |
-| `username` | string | Yes | SSH username |
-| `password` | string | No | Password for authentication \(if not using private key\) |
-| `privateKey` | string | No | Private key for authentication \(OpenSSH format\) |
-| `passphrase` | string | No | Passphrase for encrypted private key |
-| `path` | string | Yes | Remote file path to write to |
-| `content` | string | Yes | Content to write to the file |
-| `mode` | string | No | Write mode: overwrite, append, or create \(default: overwrite\) |
-| `permissions` | string | No | File permissions \(e.g., 0644\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `written` | boolean | Whether the file was written successfully |
-| `remotePath` | string | File path |
-| `size` | number | Final file size in bytes |
-| `message` | string | Operation status message |
-
-
diff --git a/apps/docs/content/docs/en/tools/stt.mdx b/apps/docs/content/docs/en/tools/stt.mdx
deleted file mode 100644
index eecd270fe1c..00000000000
--- a/apps/docs/content/docs/en/tools/stt.mdx
+++ /dev/null
@@ -1,212 +0,0 @@
----
-title: Speech-to-Text
-description: Convert speech to text using AI
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="stt_v2"
-  color="#181C1E"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-Transcribe speech to text using the latest AI models from world-class providers. Sim's Speech-to-Text (STT) tools empower you to turn audio and video into accurate, timestamped, and optionally translated transcripts—supporting a diversity of languages and enhanced with advanced features such as diarization and speaker identification.
-
-**Supported Providers & Models:**
-
-- **[OpenAI Whisper](https://platform.openai.com/docs/guides/speech-to-text/overview)** (OpenAI):  
-  OpenAI’s Whisper is an open-source deep learning model renowned for its robustness across languages and audio conditions. It supports advanced models such as `whisper-1`, excelling in transcription, translation, and tasks demanding high model generalization. Backed by OpenAI—the company known for ChatGPT and leading AI research—Whisper is widely used in research and as a baseline for comparative evaluation.
-
-- **[Deepgram](https://deepgram.com/)** (Deepgram Inc.):  
-  Based in San Francisco, Deepgram offers scalable, production-grade speech recognition APIs for developers and enterprises. Deepgram’s models include `nova-3`, `nova-2`, and `whisper-large`, offering real-time and batch transcription with industry-leading accuracy, multi-language support, automatic punctuation, intelligent diarization, call analytics, and features for use cases ranging from telephony to media production.
-
-- **[ElevenLabs](https://elevenlabs.io/)** (ElevenLabs):  
-  A leader in voice AI, ElevenLabs is especially known for premium voice synthesis and recognition. Its STT product delivers high-accuracy, natural understanding of numerous languages, dialects, and accents. Recent ElevenLabs STT models are optimized for clarity, speaker distinction, and are suitable for both creative and accessibility scenarios. ElevenLabs is recognized for cutting-edge advancements in AI-powered speech technologies.
-
-- **[AssemblyAI](https://www.assemblyai.com/)** (AssemblyAI Inc.):  
-  AssemblyAI provides API-driven, highly accurate speech recognition, with features such as auto chaptering, topic detection, summarization, sentiment analysis, and content moderation alongside transcription. Its proprietary model, including the acclaimed `Conformer-2`, powers some of the largest media, call center, and compliance applications in the industry. AssemblyAI is trusted by Fortune 500s and leading AI startups globally.
-
-- **[Google Cloud Speech-to-Text](https://cloud.google.com/speech-to-text)** (Google Cloud):  
-  Google’s enterprise-grade Speech-to-Text API supports over 125 languages and variants, offering high accuracy and features such as real-time streaming, word-level confidence, speaker diarization, automatic punctuation, custom vocabulary, and domain-specific tuning. Models such as `latest_long`, `video`, and domain-optimized models are available, powered by Google’s years of research and deployed for global scalability.
-
-- **[AWS Transcribe](https://aws.amazon.com/transcribe/)** (Amazon Web Services):  
-  AWS Transcribe leverages Amazon’s cloud infrastructure to deliver robust speech recognition as an API. It supports multiple languages and features such as speaker identification, custom vocabulary, channel identification (for call center audio), and medical-specific transcription. Popular models include `standard` and domain-specific variations. AWS Transcribe is ideal for organizations already using Amazon’s cloud.
-
-**How to Choose:**  
-Select the provider and model that fits your application—whether you need fast, enterprise-ready transcription with extra analytics (Deepgram, AssemblyAI, Google, AWS), high versatility and open-source access (OpenAI Whisper), or advanced speaker/contextual understanding (ElevenLabs). Consider the pricing, language coverage, accuracy, and any special features (like summarization, chaptering, or sentiment analysis) you might need.
-
-For more details on capabilities, pricing, feature highlights, and fine-tuning options, refer to each provider’s official documentation via the links above.
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Transcribe audio and video files to text using leading AI providers. Supports multiple languages, timestamps, and speaker diarization.
-
-
-
-## Tools
-
-### `stt_whisper`
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `provider` | string | Yes | STT provider \(whisper\) |
-| `apiKey` | string | Yes | OpenAI API key |
-| `model` | string | No | Whisper model to use \(default: whisper-1\) |
-| `audioFile` | file | No | Audio or video file to transcribe \(e.g., MP3, WAV, M4A, WEBM\) |
-| `audioFileReference` | file | No | Reference to audio/video file from previous blocks |
-| `audioUrl` | string | No | URL to audio or video file |
-| `language` | string | No | Language code \(e.g., "en", "es", "fr"\) or "auto" for auto-detection |
-| `timestamps` | string | No | Timestamp granularity: none, sentence, or word |
-| `translateToEnglish` | boolean | No | Translate audio to English |
-| `prompt` | string | No | Optional text to guide the model's style or continue a previous audio segment. Helps with proper nouns and context. |
-| `temperature` | number | No | Sampling temperature between 0 and 1. Higher values make output more random, lower values more focused and deterministic. |
-| `responseFormat` | string | No | Output format for the transcription \(e.g., "json", "text", "srt", "verbose_json", "vtt"\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `transcript` | string | Full transcribed text |
-| `segments` | array | Timestamped segments |
-|   ↳ `text` | string | Transcribed text for this segment |
-|   ↳ `start` | number | Start time in seconds |
-|   ↳ `end` | number | End time in seconds |
-|   ↳ `speaker` | string | Speaker identifier \(if diarization enabled\) |
-|   ↳ `confidence` | number | Confidence score \(0-1\) |
-| `language` | string | Detected or specified language |
-| `duration` | number | Audio duration in seconds |
-
-### `stt_deepgram`
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `provider` | string | Yes | STT provider \(deepgram\) |
-| `apiKey` | string | Yes | Deepgram API key |
-| `model` | string | No | Deepgram model to use \(nova-3, nova-2, whisper-large, etc.\) |
-| `audioFile` | file | No | Audio or video file to transcribe \(e.g., MP3, WAV, M4A, WEBM\) |
-| `audioFileReference` | file | No | Reference to audio/video file from previous blocks |
-| `audioUrl` | string | No | URL to audio or video file |
-| `language` | string | No | Language code \(e.g., "en", "es", "fr"\) or "auto" for auto-detection |
-| `timestamps` | string | No | Timestamp granularity: none, sentence, or word |
-| `diarization` | boolean | No | Enable speaker diarization |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `transcript` | string | Full transcribed text |
-| `segments` | array | Timestamped segments with speaker labels |
-|   ↳ `text` | string | Transcribed text for this segment |
-|   ↳ `start` | number | Start time in seconds |
-|   ↳ `end` | number | End time in seconds |
-|   ↳ `speaker` | string | Speaker identifier \(if diarization enabled\) |
-|   ↳ `confidence` | number | Confidence score \(0-1\) |
-| `language` | string | Detected or specified language |
-| `duration` | number | Audio duration in seconds |
-| `confidence` | number | Overall confidence score |
-
-### `stt_elevenlabs`
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `provider` | string | Yes | STT provider \(elevenlabs\) |
-| `apiKey` | string | Yes | ElevenLabs API key |
-| `model` | string | No | ElevenLabs model to use \(scribe_v2\) |
-| `audioFile` | file | No | Audio or video file to transcribe \(e.g., MP3, WAV, M4A, WEBM\) |
-| `audioFileReference` | file | No | Reference to audio/video file from previous blocks |
-| `audioUrl` | string | No | URL to audio or video file |
-| `language` | string | No | Language code \(e.g., "en", "es", "fr"\) or "auto" for auto-detection |
-| `timestamps` | string | No | Timestamp granularity: none, sentence, or word |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `transcript` | string | Full transcribed text |
-| `segments` | array | Timestamped segments |
-| `language` | string | Detected or specified language |
-| `duration` | number | Audio duration in seconds |
-| `confidence` | number | Overall confidence score |
-
-### `stt_assemblyai`
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `provider` | string | Yes | STT provider \(assemblyai\) |
-| `apiKey` | string | Yes | AssemblyAI API key |
-| `model` | string | No | AssemblyAI model to use \(default: best\) |
-| `audioFile` | file | No | Audio or video file to transcribe \(e.g., MP3, WAV, M4A, WEBM\) |
-| `audioFileReference` | file | No | Reference to audio/video file from previous blocks |
-| `audioUrl` | string | No | URL to audio or video file |
-| `language` | string | No | Language code \(e.g., "en", "es", "fr"\) or "auto" for auto-detection |
-| `timestamps` | string | No | Timestamp granularity: none, sentence, or word |
-| `diarization` | boolean | No | Enable speaker diarization |
-| `sentiment` | boolean | No | Enable sentiment analysis |
-| `entityDetection` | boolean | No | Enable entity detection |
-| `piiRedaction` | boolean | No | Enable PII redaction |
-| `summarization` | boolean | No | Enable automatic summarization |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `transcript` | string | Full transcribed text |
-| `segments` | array | Timestamped segments with speaker labels |
-|   ↳ `text` | string | Transcribed text for this segment |
-|   ↳ `start` | number | Start time in seconds |
-|   ↳ `end` | number | End time in seconds |
-|   ↳ `speaker` | string | Speaker identifier \(if diarization enabled\) |
-|   ↳ `confidence` | number | Confidence score \(0-1\) |
-| `language` | string | Detected or specified language |
-| `duration` | number | Audio duration in seconds |
-| `confidence` | number | Overall confidence score |
-| `sentiment` | array | Sentiment analysis results |
-|   ↳ `text` | string | Text that was analyzed |
-|   ↳ `sentiment` | string | Sentiment \(POSITIVE, NEGATIVE, NEUTRAL\) |
-|   ↳ `confidence` | number | Confidence score |
-|   ↳ `start` | number | Start time in milliseconds |
-|   ↳ `end` | number | End time in milliseconds |
-| `entities` | array | Detected entities |
-|   ↳ `entity_type` | string | Entity type \(e.g., person_name, location, organization\) |
-|   ↳ `text` | string | Entity text |
-|   ↳ `start` | number | Start time in milliseconds |
-|   ↳ `end` | number | End time in milliseconds |
-| `summary` | string | Auto-generated summary |
-
-### `stt_gemini`
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `provider` | string | Yes | STT provider \(gemini\) |
-| `apiKey` | string | Yes | Google API key |
-| `model` | string | No | Gemini model to use \(default: gemini-2.5-flash\) |
-| `audioFile` | file | No | Audio or video file to transcribe \(e.g., MP3, WAV, M4A, WEBM\) |
-| `audioFileReference` | file | No | Reference to audio/video file from previous blocks |
-| `audioUrl` | string | No | URL to audio or video file |
-| `language` | string | No | Language code \(e.g., "en", "es", "fr"\) or "auto" for auto-detection |
-| `timestamps` | string | No | Timestamp granularity: none, sentence, or word |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `transcript` | string | Full transcribed text |
-| `segments` | array | Timestamped segments |
-| `language` | string | Detected or specified language |
-| `duration` | number | Audio duration in seconds |
-| `confidence` | number | Overall confidence score |
-
-
diff --git a/apps/docs/content/docs/en/tools/supabase.mdx b/apps/docs/content/docs/en/tools/supabase.mdx
index a076f4e5ee2..b1013faa227 100644
--- a/apps/docs/content/docs/en/tools/supabase.mdx
+++ b/apps/docs/content/docs/en/tools/supabase.mdx
@@ -10,30 +10,6 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
   color="#1C1C1C"
 />
 
-{/* MANUAL-CONTENT-START:intro */}
-[Supabase](https://www.supabase.com/) is a powerful open-source backend-as-a-service platform that provides developers with a suite of tools to build, scale, and manage modern applications. Supabase offers a fully managed [PostgreSQL](https://www.postgresql.org/) database, robust authentication, instant RESTful and GraphQL APIs, real-time subscriptions, file storage, and edge functions—all accessible through a unified and developer-friendly interface. Its open-source nature and compatibility with popular frameworks make it a compelling alternative to Firebase, with the added benefit of SQL flexibility and transparency.
-
-**Why Supabase?**
-- **Instant APIs:** Every table and view in your database is instantly available via REST and GraphQL endpoints, making it easy to build data-driven applications without writing custom backend code.
-- **Real-time Data:** Supabase enables real-time subscriptions, allowing your apps to react instantly to changes in your database.
-- **Authentication & Authorization:** Built-in user management with support for email, OAuth, SSO, and more, plus row-level security for granular access control.
-- **Storage:** Securely upload, serve, and manage files with built-in storage that integrates seamlessly with your database.
-- **Edge Functions:** Deploy serverless functions close to your users for low-latency custom logic.
-
-**Using Supabase in Sim**
-
-Sim’s Supabase integration makes it effortless to connect your agentic workflows to your Supabase projects. With just a few configuration fields—your Project ID, Table name, and Service Role Secret—you can securely interact with your database directly from your Sim blocks. The integration abstracts away the complexity of API calls, letting you focus on building logic and automations.
-
-**Key benefits of using Supabase in Sim:**
-- **No-code/low-code database operations:** Query, insert, update, and delete rows in your Supabase tables without writing SQL or backend code.
-- **Flexible querying:** Use [PostgREST filter syntax](https://postgrest.org/en/stable/api.html#operators) to perform advanced queries, including filtering, ordering, and limiting results.
-- **Seamless integration:** Easily connect Supabase to other tools and services in your workflow, enabling powerful automations such as syncing data, triggering notifications, or enriching records.
-- **Secure and scalable:** All operations use your Supabase Service Role Secret, ensuring secure access to your data with the scalability of a managed cloud platform.
-
-Whether you’re building internal tools, automating business processes, or powering production applications, Supabase in Sim provides a fast, reliable, and developer-friendly way to manage your data and backend logic—no infrastructure management required. Simply configure your block, select the operation you need, and let Sim handle the rest.
-{/* MANUAL-CONTENT-END */}
-
-
 ## Usage Instructions
 
 Integrate Supabase into the workflow. Supports database operations (query, insert, update, delete, upsert), full-text search, RPC functions, row counting, vector search, and complete storage management (upload, download, list, move, copy, delete files and buckets).
diff --git a/apps/docs/content/docs/en/tools/telegram.mdx b/apps/docs/content/docs/en/tools/telegram.mdx
index 685cf2fb3de..14b61ff1759 100644
--- a/apps/docs/content/docs/en/tools/telegram.mdx
+++ b/apps/docs/content/docs/en/tools/telegram.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="telegram"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/translate.mdx b/apps/docs/content/docs/en/tools/translate.mdx
deleted file mode 100644
index 3c3f7dc75df..00000000000
--- a/apps/docs/content/docs/en/tools/translate.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: Translate
-description: Translate text to any language
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="translate"
-  color="#FF4B4B"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-Translate is a tool that allows you to translate text between languages.
-
-With Translate, you can:
-
-- **Translate text**: Translate text between languages
-- **Translate documents**: Translate documents between languages
-- **Translate websites**: Translate websites between languages
-- **Translate images**: Translate images between languages
-- **Translate audio**: Translate audio between languages
-- **Translate videos**: Translate videos between languages
-- **Translate speech**: Translate speech between languages
-- **Translate text**: Translate text between languages
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Integrate Translate into the workflow. Can translate text to any language.
-
-
-
-## Tools
-
-### `llm_chat`
-
-Send a chat completion request to any supported LLM provider
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `model` | string | Yes | The model to use \(e.g., gpt-4o, claude-sonnet-4-5, gemini-2.0-flash\) |
-| `systemPrompt` | string | No | System prompt to set the behavior of the assistant |
-| `context` | string | Yes | The user message or context to send to the model |
-| `apiKey` | string | No | API key for the provider \(uses platform key if not provided for hosted models\) |
-| `temperature` | number | No | Temperature for response generation \(0-2\) |
-| `maxTokens` | number | No | Maximum tokens in the response |
-| `azureEndpoint` | string | No | Azure OpenAI endpoint URL |
-| `azureApiVersion` | string | No | Azure OpenAI API version |
-| `vertexProject` | string | No | Google Cloud project ID for Vertex AI |
-| `vertexLocation` | string | No | Google Cloud location for Vertex AI \(defaults to us-central1\) |
-| `vertexCredential` | string | No | Google Cloud OAuth credential ID for Vertex AI |
-| `bedrockAccessKeyId` | string | No | AWS Access Key ID for Bedrock |
-| `bedrockSecretKey` | string | No | AWS Secret Access Key for Bedrock |
-| `bedrockRegion` | string | No | AWS region for Bedrock \(defaults to us-east-1\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `content` | string | The generated response content |
-| `model` | string | The model used for generation |
-| `tokens` | object | Token usage information |
-
-
diff --git a/apps/docs/content/docs/en/tools/tts.mdx b/apps/docs/content/docs/en/tools/tts.mdx
deleted file mode 100644
index 62d3f6ffb57..00000000000
--- a/apps/docs/content/docs/en/tools/tts.mdx
+++ /dev/null
@@ -1,256 +0,0 @@
----
-title: Text-to-Speech
-description: Convert text to speech using AI voices
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="tts"
-  color="#181C1E"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-Convert text to natural-sounding speech using the latest AI voices. Sim's Text-to-Speech (TTS) tools let you generate audio from written text in dozens of languages, with a choice of expressive voices, formats, and advanced controls like speed, style, emotion, and more.
-
-**Supported Providers & Models:**
-
-- **[OpenAI Text-to-Speech](https://platform.openai.com/docs/guides/text-to-speech/voice-options)** (OpenAI):  
-  OpenAI's TTS API offers ultra-realistic voices using advanced AI models like `tts-1`, `tts-1-hd`, and `gpt-4o-mini-tts`. Voices include both male and female, with options such as alloy, echo, fable, onyx, nova, shimmer, ash, ballad, coral, sage, and verse. Supports multiple audio formats (mp3, opus, aac, flac, wav, pcm), adjustable speed and streaming synthesis.
-
-- **[Deepgram Aura](https://deepgram.com/products/text-to-speech)** (Deepgram Inc.):  
-  Deepgram’s Aura provides expressive English and multilingual AI voices, optimized for conversational clarity, low latency, and customization. Models like `aura-asteria-en`, `aura-luna-en`, and others are available. Supports multiple encoding formats (linear16, mp3, opus, aac, flac) and fine tuning on speed, sample rate, and style.
-
-- **[ElevenLabs Text-to-Speech](https://elevenlabs.io/text-to-speech)** (ElevenLabs):  
-  ElevenLabs leads in lifelike, emotionally rich TTS, offering dozens of voices in 29+ languages and the ability to clone custom voices. Models support voice design, speech synthesis, and direct API access, with advanced controls for style, emotion, stability, and similarity. Suitable for audiobooks, content creation, accessibility, and more.
-
-- **[Cartesia TTS](https://docs.cartesia.ai/)** (Cartesia):  
-  Cartesia offers high-quality, fast, and secure text-to-speech with a focus on privacy and flexible deployment. It provides instant streaming, real-time synthesis, and supports multiple international voices and accents, accessible through a simple API.
-
-- **[Google Cloud Text-to-Speech](https://cloud.google.com/text-to-speech)** (Google Cloud):  
-  Google uses DeepMind WaveNet and Neural2 models to power high-fidelity voices in 50+ languages and variants. Features include voice selection, pitch, speaking rate, volume control, SSML tags, and access to both standard and studio-grade premium voices. Widely used for accessibility, IVR, and media.
-
-- **[Microsoft Azure Speech](https://azure.microsoft.com/en-us/products/ai-services/text-to-speech)** (Microsoft Azure):  
-  Azure provides over 400 neural voices across 140+ languages and locales, with unique voice customization, style, emotion, role, and real-time controls. Offers SSML support for pronunciation, intonation, and more. Ideal for global, enterprise, or creative TTS needs.
-
-- **[PlayHT](https://play.ht/)** (PlayHT):  
-  PlayHT specializes in realistic voice synthesis, voice cloning, and instant streaming playback with 800+ voices in over 100 languages. Features include emotion, pitch and speed controls, multi-voice audio, and custom voice creation via the API or online studio.
-
-**How to Choose:**  
-Pick your provider and model by prioritizing languages, supported voice types, desired formats (mp3, wav, etc.), control granularity (speed, emotion, etc.), and specialized features (voice cloning, accent, streaming). For creative, accessibility, or developer use cases, ensure compatibility with your application's requirements and compare costs.
-
-Visit each provider’s official site for up-to-date capabilities, pricing, and documentation details!
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Generate natural-sounding speech from text using state-of-the-art AI voices from OpenAI, Deepgram, ElevenLabs, Cartesia, Google Cloud, Azure, and PlayHT. Supports multiple voices, languages, and audio formats.
-
-
-
-## Tools
-
-### `tts_openai`
-
-Convert text to speech using OpenAI TTS models
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `text` | string | Yes | The text content to convert to speech \(e.g., "Hello, welcome to our service!"\) |
-| `apiKey` | string | Yes | OpenAI API key |
-| `model` | string | No | OpenAI TTS model identifier \(e.g., "tts-1", "tts-1-hd", "gpt-4o-mini-tts"\) |
-| `voice` | string | No | OpenAI voice identifier \(e.g., "alloy", "ash", "ballad", "coral", "echo", "sage", "shimmer"\) |
-| `responseFormat` | string | No | Audio format \(mp3, opus, aac, flac, wav, pcm\) |
-| `speed` | number | No | Speech speed multiplier from 0.25 to 4.0 \(e.g., 0.5 for slower, 1.0 for normal, 2.0 for faster\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `audioUrl` | string | URL to the generated audio file |
-| `audioFile` | file | Generated audio file object |
-| `duration` | number | Audio duration in seconds |
-| `characterCount` | number | Number of characters processed |
-| `format` | string | Audio format |
-| `provider` | string | TTS provider used |
-
-### `tts_deepgram`
-
-Convert text to speech using Deepgram Aura
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `text` | string | Yes | The text content to convert to speech \(e.g., "Hello, welcome to our service!"\) |
-| `apiKey` | string | Yes | Deepgram API key |
-| `model` | string | No | Deepgram model/voice identifier \(e.g., "aura-asteria-en", "aura-luna-en", "aura-2-luna-en"\) |
-| `voice` | string | No | Deepgram voice identifier, alternative to model param \(e.g., "aura-asteria-en", "aura-orion-en"\) |
-| `encoding` | string | No | Audio encoding \(linear16, mp3, opus, aac, flac\) |
-| `sampleRate` | number | No | Sample rate \(8000, 16000, 24000, 48000\) |
-| `bitRate` | number | No | Bit rate for compressed formats |
-| `container` | string | No | Container format \(none, wav, ogg\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `audioUrl` | string | URL to the generated audio file |
-| `audioFile` | file | Generated audio file object |
-| `duration` | number | Audio duration in seconds |
-| `characterCount` | number | Number of characters processed |
-| `format` | string | Audio format |
-| `provider` | string | TTS provider used |
-
-### `tts_elevenlabs`
-
-Convert text to speech using ElevenLabs voices
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `text` | string | Yes | The text content to convert to speech \(e.g., "Hello, welcome to our service!"\) |
-| `voiceId` | string | Yes | ElevenLabs voice identifier \(e.g., "21m00Tcm4TlvDq8ikWAM", "AZnzlk1XvdvUeBnXmlld"\) |
-| `apiKey` | string | Yes | ElevenLabs API key |
-| `modelId` | string | No | ElevenLabs model identifier \(e.g., "eleven_turbo_v2_5", "eleven_flash_v2_5", "eleven_multilingual_v2"\) |
-| `stability` | number | No | Voice stability \(0.0 to 1.0, default: 0.5\) |
-| `similarityBoost` | number | No | Similarity boost \(0.0 to 1.0, default: 0.8\) |
-| `style` | number | No | Style exaggeration \(0.0 to 1.0\) |
-| `useSpeakerBoost` | boolean | No | Use speaker boost \(default: true\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `audioUrl` | string | URL to the generated audio file |
-| `audioFile` | file | Generated audio file object |
-| `duration` | number | Audio duration in seconds |
-| `characterCount` | number | Number of characters processed |
-| `format` | string | Audio format |
-| `provider` | string | TTS provider used |
-
-### `tts_cartesia`
-
-Convert text to speech using Cartesia Sonic (ultra-low latency)
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `text` | string | Yes | The text content to convert to speech \(e.g., "Hello, welcome to our service!"\) |
-| `apiKey` | string | Yes | Cartesia API key |
-| `modelId` | string | No | Cartesia model identifier \(e.g., "sonic", "sonic-2", "sonic-3", "sonic-multilingual"\) |
-| `voice` | string | No | Cartesia voice identifier or embedding \(e.g., "a0e99841-438c-4a64-b679-ae501e7d6091"\) |
-| `language` | string | No | Language code for speech synthesis \(e.g., "en", "es", "fr", "de", "it", "pt"\) |
-| `outputFormat` | json | No | Output format configuration \(container, encoding, sampleRate\) |
-| `speed` | number | No | Speech speed multiplier \(e.g., 0.5 for slower, 1.0 for normal, 2.0 for faster\) |
-| `emotion` | array | No | Emotion tags for Sonic-3 \(e.g., \['positivity:high'\]\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `audioUrl` | string | URL to the generated audio file |
-| `audioFile` | file | Generated audio file object |
-| `duration` | number | Audio duration in seconds |
-| `characterCount` | number | Number of characters processed |
-| `format` | string | Audio format |
-| `provider` | string | TTS provider used |
-
-### `tts_google`
-
-Convert text to speech using Google Cloud Text-to-Speech
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `text` | string | Yes | The text content to convert to speech \(e.g., "Hello, welcome to our service!"\) |
-| `apiKey` | string | Yes | Google Cloud API key |
-| `voiceId` | string | No | Google Cloud voice identifier \(e.g., "en-US-Neural2-A", "en-US-Wavenet-D", "en-GB-Neural2-B"\) |
-| `languageCode` | string | Yes | BCP-47 language code for speech synthesis \(e.g., "en-US", "es-ES", "fr-FR", "de-DE"\) |
-| `gender` | string | No | Voice gender \(MALE, FEMALE, NEUTRAL\) |
-| `audioEncoding` | string | No | Audio encoding \(LINEAR16, MP3, OGG_OPUS, MULAW, ALAW\) |
-| `speakingRate` | number | No | Speaking rate multiplier from 0.25 to 2.0 \(e.g., 0.5 for slower, 1.0 for normal, 1.5 for faster\) |
-| `pitch` | number | No | Voice pitch \(-20.0 to 20.0, default: 0.0\) |
-| `volumeGainDb` | number | No | Volume gain in dB \(-96.0 to 16.0\) |
-| `sampleRateHertz` | number | No | Sample rate in Hz |
-| `effectsProfileId` | array | No | Effects profile \(e.g., \['headphone-class-device'\]\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `audioUrl` | string | URL to the generated audio file |
-| `audioFile` | file | Generated audio file object |
-| `duration` | number | Audio duration in seconds |
-| `characterCount` | number | Number of characters processed |
-| `format` | string | Audio format |
-| `provider` | string | TTS provider used |
-
-### `tts_azure`
-
-Convert text to speech using Azure Cognitive Services
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `text` | string | Yes | The text content to convert to speech \(e.g., "Hello, welcome to our service!"\) |
-| `apiKey` | string | Yes | Azure Speech Services API key |
-| `voiceId` | string | No | Azure voice identifier \(e.g., "en-US-JennyNeural", "en-US-GuyNeural", "en-GB-SoniaNeural"\) |
-| `region` | string | No | Azure region \(e.g., eastus, westus, westeurope\) |
-| `outputFormat` | string | No | Output audio format |
-| `rate` | string | No | Speaking rate \(e.g., +10%, -20%, 1.5\) |
-| `pitch` | string | No | Voice pitch \(e.g., +5Hz, -2st, low\) |
-| `style` | string | No | Speaking style \(e.g., cheerful, sad, angry - neural voices only\) |
-| `styleDegree` | number | No | Style intensity \(0.01 to 2.0\) |
-| `role` | string | No | Role \(e.g., Girl, Boy, YoungAdultFemale\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `audioUrl` | string | URL to the generated audio file |
-| `audioFile` | file | Generated audio file object |
-| `duration` | number | Audio duration in seconds |
-| `characterCount` | number | Number of characters processed |
-| `format` | string | Audio format |
-| `provider` | string | TTS provider used |
-
-### `tts_playht`
-
-Convert text to speech using PlayHT (voice cloning)
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `text` | string | Yes | The text content to convert to speech \(e.g., "Hello, welcome to our service!"\) |
-| `apiKey` | string | Yes | PlayHT API key \(AUTHORIZATION header\) |
-| `userId` | string | Yes | PlayHT user ID \(X-USER-ID header\) |
-| `voice` | string | No | PlayHT voice identifier or manifest URL \(e.g., "s3://voice-cloning-zero-shot/..."\) |
-| `quality` | string | No | Quality level \(draft, standard, premium\) |
-| `outputFormat` | string | No | Output format \(mp3, wav, ogg, flac, mulaw\) |
-| `speed` | number | No | Speech speed multiplier from 0.5 to 2.0 \(e.g., 0.5 for slower, 1.0 for normal, 1.5 for faster\) |
-| `temperature` | number | No | Creativity/randomness \(0.0 to 2.0\) |
-| `voiceGuidance` | number | No | Voice stability \(1.0 to 6.0\) |
-| `textGuidance` | number | No | Text adherence \(1.0 to 6.0\) |
-| `sampleRate` | number | No | Sample rate \(8000, 16000, 22050, 24000, 44100, 48000\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `audioUrl` | string | URL to the generated audio file |
-| `audioFile` | file | Generated audio file object |
-| `duration` | number | Audio duration in seconds |
-| `characterCount` | number | Number of characters processed |
-| `format` | string | Audio format |
-| `provider` | string | TTS provider used |
-
-
diff --git a/apps/docs/content/docs/en/tools/upstash.mdx b/apps/docs/content/docs/en/tools/upstash.mdx
index b67affe492e..a469aab519e 100644
--- a/apps/docs/content/docs/en/tools/upstash.mdx
+++ b/apps/docs/content/docs/en/tools/upstash.mdx
@@ -10,22 +10,6 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
   color="#181C1E"
 />
 
-{/* MANUAL-CONTENT-START:intro */}
-[Upstash](https://upstash.com/) is a serverless data platform designed for modern applications that need fast, simple, and scalable data storage with minimal setup. Upstash specializes in providing Redis and Kafka as fully managed, pay-per-request cloud services, making it a popular choice for developers building serverless, edge, and event-driven architectures.
-
-With Upstash Redis, you can:
-
-- **Store and retrieve data instantly**: Read and write key-value pairs, hashes, lists, sets, and more—all over a high-performance REST API.
-- **Scale serverlessly**: No infrastructure to manage. Upstash automatically scales with your app and charges only for what you use.
-- **Access globally**: Deploy near your users with multi-region support and global distribution.
-- **Integrate easily**: Use Upstash’s REST API in serverless functions, edge workers, Next.js, Vercel, Cloudflare Workers, and more.
-- **Automate with scripts**: Run Lua scripts for advanced transactions and automation.
-- **Ensure security**: Protect your data with built-in authentication and TLS encryption.
-
-In Sim, the Upstash integration empowers your agents and workflows to read, write, and manage data in Upstash Redis using simple, unified commands—perfect for building scalable automations, caching results, managing queues, and more, all without dealing with server management.
-{/* MANUAL-CONTENT-END */}
-
-
 ## Usage Instructions
 
 Connect to Upstash Redis to perform key-value, hash, list, and utility operations via the REST API.
diff --git a/apps/docs/content/docs/en/tools/video_generator.mdx b/apps/docs/content/docs/en/tools/video_generator.mdx
deleted file mode 100644
index a33492c95b9..00000000000
--- a/apps/docs/content/docs/en/tools/video_generator.mdx
+++ /dev/null
@@ -1,192 +0,0 @@
----
-title: Video Generator
-description: Generate videos from text using AI
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="video_generator_v2"
-  color="#181C1E"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-Create videos from text prompts using cutting-edge AI models from top providers. Sim's Video Generator brings powerful, creative video synthesis capabilities to your workflow—supporting diverse models, aspect ratios, resolutions, camera controls, native audio, and advanced style and consistency features.
-
-**Supported Providers & Models:**
-
-- **[Runway Gen-4](https://research.runwayml.com/gen2/)** (Runway ML):  
-  Runway is a pioneer in text-to-video generation, known for powerful models like Gen-2, Gen-3, and Gen-4. The latest [Gen-4](https://research.runwayml.com/gen2/) model (and Gen-4 Turbo for faster results) supports more realistic motion, greater world consistency, and visual references for character, object, style, and location. Supports 16:9, 9:16, and 1:1 aspect ratios, 5–10 second durations, up to 4K resolution, style presets, and direct upload of reference images for consistent generations. Runway powers creative tools for filmmakers, studios, and content creators worldwide.
-
-- **[Google Veo](https://deepmind.google/technologies/veo/)** (Google DeepMind):  
-  [Veo](https://deepmind.google/technologies/veo/) is Google’s next-generation video generation model, offering high-quality, native-audio videos up to 1080p and 16 seconds. Supports advanced motion, cinematic effects, and nuanced text understanding. Veo can generate videos with built-in sound—activating native audio as well as silent clips. Options include 16:9 aspect, variable duration, different models (veo-3, veo-3.1), and prompt-based controls. Ideal for storytelling, advertising, research, and ideation.
-
-- **[Luma Dream Machine](https://lumalabs.ai/dream-machine)** (Luma AI):  
-  [Dream Machine](https://lumalabs.ai/dream-machine) delivers jaw-droppingly realistic and fluid video from text. It incorporates advanced camera control, cinematography prompts, and supports both ray-1 and ray-2 models. Dream Machine supports precise aspect ratios (16:9, 9:16, 1:1), variable durations, and the specification of camera paths for intricate visual direction. Luma is renowned for breakthrough visual fidelity and is backed by leading AI vision researchers.
-
-- **[MiniMax Hailuo-02](https://minimax.chat/)** (via [Fal.ai](https://fal.ai/)):  
-  [MiniMax Hailuo-02](https://minimax.chat/) is a sophisticated Chinese generative video model, available globally through [Fal.ai](https://fal.ai/). Generate videos up to 16 seconds in landscape or portrait format, with options for prompt optimization to improve clarity and creativity. Pro and standard endpoints available, supporting high resolutions (up to 1920×1080). Well-suited for creative projects needing prompt translation and optimization, commercial storytelling, and rapid prototyping of visual ideas.
-
-**How to Choose:**  
-Pick your provider and model based on your needs for quality, speed, duration, audio, cost, and unique features. Runway and Veo offer world-leading realism and cinematic capabilities; Luma excels in fluid motion and camera control; MiniMax is ideal for Chinese-language prompts and offers fast, affordable access. Consider reference support, style presets, audio requirements, and pricing when selecting your tool.
-
-For more details on features, restrictions, pricing, and model advances, see each provider’s official documentation above.
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Generate high-quality videos from text prompts using leading AI providers. Supports multiple models, aspect ratios, resolutions, and provider-specific features like world consistency, camera controls, and audio generation.
-
-
-
-## Tools
-
-### `video_runway`
-
-Generate videos using Runway Gen-4 with world consistency and visual references
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `provider` | string | Yes | Video provider \(runway\) |
-| `apiKey` | string | Yes | Runway API key |
-| `model` | string | No | Runway model: gen-4 \(default, higher quality\) or gen-4-turbo \(faster\) |
-| `prompt` | string | Yes | Text prompt describing the video to generate |
-| `duration` | number | No | Video duration in seconds \(5 or 10, default: 5\) |
-| `aspectRatio` | string | No | Aspect ratio: 16:9 \(landscape\), 9:16 \(portrait\), or 1:1 \(square\) |
-| `resolution` | string | No | Video resolution \(720p output\). Note: Gen-4 Turbo outputs at 720p natively |
-| `visualReference` | file | Yes | Reference image REQUIRED for Gen-4 \(UserFile object\). Gen-4 only supports image-to-video, not text-only generation |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `videoUrl` | string | Generated video URL |
-| `videoFile` | file | Video file object with metadata |
-| `duration` | number | Video duration in seconds |
-| `width` | number | Video width in pixels |
-| `height` | number | Video height in pixels |
-| `provider` | string | Provider used \(runway\) |
-| `model` | string | Model used |
-| `jobId` | string | Runway job ID |
-
-### `video_veo`
-
-Generate videos using Google Veo 3/3.1 with native audio generation
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `provider` | string | Yes | Video provider \(veo\) |
-| `apiKey` | string | Yes | Google Gemini API key |
-| `model` | string | No | Veo model: veo-3 \(default, highest quality\), veo-3-fast \(faster\), or veo-3.1 \(latest\) |
-| `prompt` | string | Yes | Text prompt describing the video to generate |
-| `duration` | number | No | Video duration in seconds \(4, 6, or 8, default: 8\) |
-| `aspectRatio` | string | No | Aspect ratio: 16:9 \(landscape\) or 9:16 \(portrait\) |
-| `resolution` | string | No | Video resolution: 720p or 1080p \(default: 1080p\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `videoUrl` | string | Generated video URL |
-| `videoFile` | file | Video file object with metadata |
-| `duration` | number | Video duration in seconds |
-| `width` | number | Video width in pixels |
-| `height` | number | Video height in pixels |
-| `provider` | string | Provider used \(veo\) |
-| `model` | string | Model used |
-| `jobId` | string | Veo job ID |
-
-### `video_luma`
-
-Generate videos using Luma Dream Machine with advanced camera controls
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `provider` | string | Yes | Video provider \(luma\) |
-| `apiKey` | string | Yes | Luma AI API key |
-| `model` | string | No | Luma model: ray-2 \(default\) |
-| `prompt` | string | Yes | Text prompt describing the video to generate |
-| `duration` | number | No | Video duration in seconds \(5 or 9, default: 5\) |
-| `aspectRatio` | string | No | Aspect ratio: 16:9 \(landscape\), 9:16 \(portrait\), or 1:1 \(square\) |
-| `resolution` | string | No | Video resolution: 540p, 720p, or 1080p \(default: 1080p\) |
-| `cameraControl` | json | No | Camera controls as array of concept objects. Format: \[\{ "key": "concept_name" \}\]. Valid keys: truck_left, truck_right, pan_left, pan_right, tilt_up, tilt_down, zoom_in, zoom_out, push_in, pull_out, orbit_left, orbit_right, crane_up, crane_down, static, handheld, and 20+ more predefined options |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `videoUrl` | string | Generated video URL |
-| `videoFile` | file | Video file object with metadata |
-| `duration` | number | Video duration in seconds |
-| `width` | number | Video width in pixels |
-| `height` | number | Video height in pixels |
-| `provider` | string | Provider used \(luma\) |
-| `model` | string | Model used |
-| `jobId` | string | Luma job ID |
-
-### `video_minimax`
-
-Generate videos using MiniMax Hailuo through MiniMax Platform API with advanced realism and prompt optimization
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `provider` | string | Yes | Video provider \(minimax\) |
-| `apiKey` | string | Yes | MiniMax API key from platform.minimax.io |
-| `model` | string | No | MiniMax model: hailuo-02 \(default\) |
-| `prompt` | string | Yes | Text prompt describing the video to generate |
-| `duration` | number | No | Video duration in seconds \(6 or 10, default: 6\) |
-| `promptOptimizer` | boolean | No | Enable prompt optimization for better results \(default: true\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `videoUrl` | string | Generated video URL |
-| `videoFile` | file | Video file object with metadata |
-| `duration` | number | Video duration in seconds |
-| `width` | number | Video width in pixels |
-| `height` | number | Video height in pixels |
-| `provider` | string | Provider used \(minimax\) |
-| `model` | string | Model used |
-| `jobId` | string | MiniMax job ID |
-
-### `video_falai`
-
-Generate videos using Fal.ai platform with access to multiple models including Veo 3.1, Sora 2, Kling 2.5, MiniMax Hailuo, and more
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `provider` | string | Yes | Video provider \(falai\) |
-| `apiKey` | string | Yes | Fal.ai API key |
-| `model` | string | Yes | Fal.ai model: veo-3.1 \(Google Veo 3.1\), sora-2 \(OpenAI Sora 2\), kling-2.5-turbo-pro \(Kling 2.5 Turbo Pro\), kling-2.1-pro \(Kling 2.1 Master\), minimax-hailuo-2.3-pro \(MiniMax Hailuo Pro\), minimax-hailuo-2.3-standard \(MiniMax Hailuo Standard\), wan-2.1 \(WAN T2V\), ltxv-0.9.8 \(LTXV 13B\) |
-| `prompt` | string | Yes | Text prompt describing the video to generate |
-| `duration` | number | No | Video duration in seconds \(varies by model\) |
-| `aspectRatio` | string | No | Aspect ratio \(varies by model\): 16:9, 9:16, 1:1 |
-| `resolution` | string | No | Video resolution \(varies by model\): 540p, 720p, 1080p |
-| `promptOptimizer` | boolean | No | Enable prompt optimization for MiniMax models \(default: true\) |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `videoUrl` | string | Generated video URL |
-| `videoFile` | file | Video file object with metadata |
-| `duration` | number | Video duration in seconds |
-| `width` | number | Video width in pixels |
-| `height` | number | Video height in pixels |
-| `provider` | string | Provider used \(falai\) |
-| `model` | string | Model used |
-| `jobId` | string | Job ID |
-
-
diff --git a/apps/docs/content/docs/en/tools/vision.mdx b/apps/docs/content/docs/en/tools/vision.mdx
deleted file mode 100644
index 1ab0cee507c..00000000000
--- a/apps/docs/content/docs/en/tools/vision.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: Vision
-description: Analyze images with vision models
----
-
-import { BlockInfoCard } from "@/components/ui/block-info-card"
-
-<BlockInfoCard 
-  type="vision_v2"
-  color="#4D5FFF"
-/>
-
-{/* MANUAL-CONTENT-START:intro */}
-Vision is a tool that allows you to analyze images with vision models.
-
-With Vision, you can:
-
-- **Analyze images**: Analyze images with vision models
-- **Extract text**: Extract text from images
-- **Identify objects**: Identify objects in images
-- **Describe images**: Describe images in detail
-- **Generate images**: Generate images from text
-
-In Sim, the Vision integration enables your agents to analyze images with vision models as part of their workflows. This allows for powerful automation scenarios that require analyzing images with vision models. Your agents can analyze images with vision models, extract text from images, identify objects in images, describe images in detail, and generate images from text. This integration bridges the gap between your AI workflows and your image analysis needs, enabling more sophisticated and image-centric automations. By connecting Sim with Vision, you can create agents that stay current with the latest information, provide more accurate responses, and deliver more value to users - all without requiring manual intervention or custom code.
-{/* MANUAL-CONTENT-END */}
-
-
-## Usage Instructions
-
-Integrate Vision into the workflow. Can analyze images with vision models.
-
-
-
-## Tools
-
-### `vision_tool`
-
-#### Input
-
-| Parameter | Type | Required | Description |
-| --------- | ---- | -------- | ----------- |
-| `apiKey` | string | Yes | API key for the selected model provider |
-| `imageUrl` | string | No | Publicly accessible image URL |
-| `imageFile` | file | No | Image file to analyze |
-| `model` | string | No | Vision model to use \(gpt-4o, claude-3-opus-20240229, etc\) |
-| `prompt` | string | No | Custom prompt for image analysis |
-
-#### Output
-
-| Parameter | Type | Description |
-| --------- | ---- | ----------- |
-| `content` | string | The analyzed content and description of the image |
-| `model` | string | The vision model that was used for analysis |
-| `tokens` | number | Total tokens used for the analysis |
-| `usage` | object | Detailed token usage breakdown |
-|   ↳ `input_tokens` | number | Tokens used for input processing |
-|   ↳ `output_tokens` | number | Tokens used for response generation |
-|   ↳ `total_tokens` | number | Total tokens consumed |
-
-
diff --git a/apps/docs/content/docs/en/tools/wealthbox.mdx b/apps/docs/content/docs/en/tools/wealthbox.mdx
index 1a4db1c1329..0d62038f11f 100644
--- a/apps/docs/content/docs/en/tools/wealthbox.mdx
+++ b/apps/docs/content/docs/en/tools/wealthbox.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="wealthbox"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/webflow.mdx b/apps/docs/content/docs/en/tools/webflow.mdx
index def273f64ae..4d43da96c46 100644
--- a/apps/docs/content/docs/en/tools/webflow.mdx
+++ b/apps/docs/content/docs/en/tools/webflow.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="webflow"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/tools/zendesk.mdx b/apps/docs/content/docs/en/tools/zendesk.mdx
index 06b11c19be6..9cdd0f3658f 100644
--- a/apps/docs/content/docs/en/tools/zendesk.mdx
+++ b/apps/docs/content/docs/en/tools/zendesk.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard 
   type="zendesk"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
diff --git a/apps/docs/content/docs/en/triggers/airtable.mdx b/apps/docs/content/docs/en/triggers/airtable.mdx
index f053764c544..72821490bdc 100644
--- a/apps/docs/content/docs/en/triggers/airtable.mdx
+++ b/apps/docs/content/docs/en/triggers/airtable.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard
   type="airtable"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 Airtable provides 1 trigger for automating workflows based on events.
diff --git a/apps/docs/content/docs/en/triggers/confluence.mdx b/apps/docs/content/docs/en/triggers/confluence.mdx
index c2b6ca0dfa3..e624e05af08 100644
--- a/apps/docs/content/docs/en/triggers/confluence.mdx
+++ b/apps/docs/content/docs/en/triggers/confluence.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard
   type="confluence"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 Confluence provides 23 triggers for automating workflows based on events.
diff --git a/apps/docs/content/docs/en/triggers/gmail.mdx b/apps/docs/content/docs/en/triggers/gmail.mdx
index f71569a9c1c..c4555771468 100644
--- a/apps/docs/content/docs/en/triggers/gmail.mdx
+++ b/apps/docs/content/docs/en/triggers/gmail.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard
   type="gmail"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 Gmail provides 1 trigger for automating workflows based on events.
diff --git a/apps/docs/content/docs/en/triggers/google-calendar.mdx b/apps/docs/content/docs/en/triggers/google-calendar.mdx
index 0d8bd87211b..b60b09843eb 100644
--- a/apps/docs/content/docs/en/triggers/google-calendar.mdx
+++ b/apps/docs/content/docs/en/triggers/google-calendar.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard
   type="google_calendar"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 Google Calendar provides 1 trigger for automating workflows based on events.
diff --git a/apps/docs/content/docs/en/triggers/google-drive.mdx b/apps/docs/content/docs/en/triggers/google-drive.mdx
index 80105f62f4a..b0f7b35f34a 100644
--- a/apps/docs/content/docs/en/triggers/google-drive.mdx
+++ b/apps/docs/content/docs/en/triggers/google-drive.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard
   type="google_drive"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 Google Drive provides 1 trigger for automating workflows based on events.
diff --git a/apps/docs/content/docs/en/triggers/google-sheets.mdx b/apps/docs/content/docs/en/triggers/google-sheets.mdx
index eb48e512006..91c31509807 100644
--- a/apps/docs/content/docs/en/triggers/google-sheets.mdx
+++ b/apps/docs/content/docs/en/triggers/google-sheets.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard
   type="google_sheets"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 Google Sheets provides 1 trigger for automating workflows based on events.
diff --git a/apps/docs/content/docs/en/triggers/google_forms.mdx b/apps/docs/content/docs/en/triggers/google_forms.mdx
index 767d243316a..d60aa0d83d7 100644
--- a/apps/docs/content/docs/en/triggers/google_forms.mdx
+++ b/apps/docs/content/docs/en/triggers/google_forms.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard
   type="google_forms"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 Google Forms provides 1 trigger for automating workflows based on events.
diff --git a/apps/docs/content/docs/en/triggers/intercom.mdx b/apps/docs/content/docs/en/triggers/intercom.mdx
index e377f21adbe..6dd7b68f86e 100644
--- a/apps/docs/content/docs/en/triggers/intercom.mdx
+++ b/apps/docs/content/docs/en/triggers/intercom.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard
   type="intercom"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 Intercom provides 6 triggers for automating workflows based on events.
diff --git a/apps/docs/content/docs/en/triggers/jira.mdx b/apps/docs/content/docs/en/triggers/jira.mdx
index eff9d92990c..5f467a2147c 100644
--- a/apps/docs/content/docs/en/triggers/jira.mdx
+++ b/apps/docs/content/docs/en/triggers/jira.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard
   type="jira"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 Jira provides 15 triggers for automating workflows based on events.
diff --git a/apps/docs/content/docs/en/triggers/microsoft-teams.mdx b/apps/docs/content/docs/en/triggers/microsoft-teams.mdx
index 4bef68927b1..3af8b9e1344 100644
--- a/apps/docs/content/docs/en/triggers/microsoft-teams.mdx
+++ b/apps/docs/content/docs/en/triggers/microsoft-teams.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard
   type="microsoft_teams"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 Microsoft Teams provides 2 triggers for automating workflows based on events.
diff --git a/apps/docs/content/docs/en/triggers/outlook.mdx b/apps/docs/content/docs/en/triggers/outlook.mdx
index 42f1f9a54fe..1b304006d94 100644
--- a/apps/docs/content/docs/en/triggers/outlook.mdx
+++ b/apps/docs/content/docs/en/triggers/outlook.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard
   type="outlook"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 Outlook provides 1 trigger for automating workflows based on events.
diff --git a/apps/docs/content/docs/en/triggers/salesforce.mdx b/apps/docs/content/docs/en/triggers/salesforce.mdx
index bd228cf073b..a849dbb6e9f 100644
--- a/apps/docs/content/docs/en/triggers/salesforce.mdx
+++ b/apps/docs/content/docs/en/triggers/salesforce.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard
   type="salesforce"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 Salesforce provides 6 triggers for automating workflows based on events.
diff --git a/apps/docs/content/docs/en/triggers/telegram.mdx b/apps/docs/content/docs/en/triggers/telegram.mdx
index 5447bf20792..ab945b8a821 100644
--- a/apps/docs/content/docs/en/triggers/telegram.mdx
+++ b/apps/docs/content/docs/en/triggers/telegram.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard
   type="telegram"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 Telegram provides 1 trigger for automating workflows based on events.
diff --git a/apps/docs/content/docs/en/triggers/webflow.mdx b/apps/docs/content/docs/en/triggers/webflow.mdx
index c72b6f49577..2db6961641e 100644
--- a/apps/docs/content/docs/en/triggers/webflow.mdx
+++ b/apps/docs/content/docs/en/triggers/webflow.mdx
@@ -7,7 +7,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 
 <BlockInfoCard
   type="webflow"
-  color="#E0E0E0"
+  color="#FFFFFF"
 />
 
 Webflow provides 4 triggers for automating workflows based on events.
diff --git a/apps/sim/app/(landing)/blog/[slug]/share-button.tsx b/apps/sim/app/(landing)/blog/[slug]/share-button.tsx
index facde4b6c58..679c6f44c6e 100644
--- a/apps/sim/app/(landing)/blog/[slug]/share-button.tsx
+++ b/apps/sim/app/(landing)/blog/[slug]/share-button.tsx
@@ -8,7 +8,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/emcn'
-import { Copy } from '@/components/emcn/icons'
+import { Duplicate } from '@/components/emcn/icons'
 import { LinkedInIcon, xIcon as XIcon } from '@/components/icons'
 
 interface ShareButtonProps {
@@ -46,21 +46,21 @@ export function ShareButton({ url, title }: ShareButtonProps) {
           className='flex items-center gap-1.5 text-[var(--landing-text-muted)] text-sm hover:text-[var(--landing-text)]'
           aria-label='Share this post'
         >
-          <Share2 className='size-4' />
+          <Share2 className='h-4 w-4' />
           <span>Share</span>
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end'>
         <DropdownMenuItem onSelect={handleCopyLink}>
-          <Copy className='size-4' />
+          <Duplicate className='h-4 w-4' />
           {copied ? 'Copied!' : 'Copy link'}
         </DropdownMenuItem>
         <DropdownMenuItem onSelect={handleShareTwitter}>
-          <XIcon className='size-4' />
+          <XIcon className='h-4 w-4' />
           Share on X
         </DropdownMenuItem>
         <DropdownMenuItem onSelect={handleShareLinkedIn}>
-          <LinkedInIcon className='size-4' />
+          <LinkedInIcon className='h-4 w-4' />
           Share on LinkedIn
         </DropdownMenuItem>
       </DropdownMenuContent>
diff --git a/apps/sim/app/(landing)/components/features/components/features-preview.tsx b/apps/sim/app/(landing)/components/features/components/features-preview.tsx
index 2eab3ef253a..c3fae6f7baf 100644
--- a/apps/sim/app/(landing)/components/features/components/features-preview.tsx
+++ b/apps/sim/app/(landing)/components/features/components/features-preview.tsx
@@ -762,7 +762,7 @@ function MockFullLogs({ revealedRows }: { revealedRows: number }) {
               <tr>
                 {['Workflow', 'Date', 'Status', 'Cost', 'Trigger', 'Duration'].map((col) => (
                   <th key={col} className='h-10 px-6 py-2.5 text-left align-middle'>
-                    <span className='font-base text-[#999] text-[13px]'>{col}</span>
+                    <span className='text-[#999] text-[13px]'>{col}</span>
                   </th>
                 ))}
               </tr>
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx
index b6b8f7e1719..924b4b37c64 100644
--- a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx
+++ b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx
@@ -1,11 +1,10 @@
 'use client'
 
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
 import { ArrowUp, Table } from 'lucide-react'
 import { Blimp, Checkbox, ChevronDown } from '@/components/emcn'
 import { TypeBoolean, TypeNumber, TypeText } from '@/components/emcn/icons'
-import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { captureClientEvent } from '@/lib/posthog/client'
 import { useLandingSubmit } from '@/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel'
 import { EASE_OUT } from '@/app/(landing)/components/landing-preview/components/landing-preview-workflow/workflow-data'
@@ -178,183 +177,176 @@ export const LandingPreviewHome = memo(function LandingPreviewHome({
     const showToolCall = chatPhase === 'tool-call' || isResponding
 
     return (
-      <LazyMotion features={domAnimation}>
-        <div className='flex min-w-0 flex-1 overflow-hidden'>
-          {/* Chat area — matches mothership-view layout */}
-          <div className='min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-6 pt-4 pb-8'>
-            <div className='mx-auto max-w-[42rem] space-y-6'>
-              {/* User message — rounded bubble, right-aligned */}
-              <m.div
-                className='flex flex-col items-end gap-[6px] pt-3'
-                initial={{ opacity: 0, y: 12 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.3, ease: EASE_OUT }}
-              >
-                <div className='max-w-[70%] overflow-hidden rounded-[16px] bg-[#363636] px-3.5 py-2'>
-                  <p
-                    className='font-body text-[14px] leading-[1.5]'
-                    style={{ color: C.TEXT_PRIMARY }}
-                  >
-                    {AUTO_PROMPT}
-                  </p>
-                </div>
-              </m.div>
-
-              {/* Assistant — no bubble, full-width prose */}
-              <AnimatePresence>
-                {showToolCall && (
-                  <m.div
-                    className='space-y-2.5'
-                    initial={{ opacity: 0, y: 8 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.3, ease: EASE_OUT }}
+      <div className='flex min-w-0 flex-1 overflow-hidden'>
+        {/* Chat area — matches mothership-view layout */}
+        <div className='min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-6 pt-4 pb-8'>
+          <div className='mx-auto max-w-[42rem] space-y-6'>
+            {/* User message — rounded bubble, right-aligned */}
+            <motion.div
+              className='flex flex-col items-end gap-[6px] pt-3'
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3, ease: EASE_OUT }}
+            >
+              <div className='max-w-[70%] overflow-hidden rounded-[16px] bg-[#363636] px-3.5 py-2'>
+                <p
+                  className='font-body text-[14px] leading-[1.5]'
+                  style={{ color: C.TEXT_PRIMARY }}
+                >
+                  {AUTO_PROMPT}
+                </p>
+              </div>
+            </motion.div>
+
+            {/* Assistant — no bubble, full-width prose */}
+            <AnimatePresence>
+              {showToolCall && (
+                <motion.div
+                  className='space-y-2.5'
+                  initial={{ opacity: 0, y: 8 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.3, ease: EASE_OUT }}
+                >
+                  {/* Agent group header — icon + label + chevron */}
+                  <button
+                    type='button'
+                    onClick={() => setToolsExpanded((p) => !p)}
+                    className='flex cursor-pointer items-center gap-2'
                   >
-                    {/* Agent group header — icon + label + chevron */}
-                    <button
-                      type='button'
-                      onClick={() => setToolsExpanded((p) => !p)}
-                      className='flex cursor-pointer items-center gap-2'
-                    >
-                      <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
-                        <Blimp className='size-[16px]' style={{ color: C.TEXT_ICON }} />
-                      </div>
-                      <span className='font-base text-sm' style={{ color: C.TEXT_BODY }}>
-                        Mothership
-                      </span>
-                      <ChevronDown
-                        className='h-[7px] w-[9px] transition-transform duration-150'
-                        style={{
-                          color: C.TEXT_ICON,
-                          transform: toolsExpanded ? 'rotate(0deg)' : 'rotate(-90deg)',
-                        }}
-                      />
-                    </button>
-
-                    {/* Tool call items — collapsible */}
-                    <div
-                      className='grid transition-[grid-template-rows] duration-200 ease-out'
+                    <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
+                      <Blimp className='h-[16px] w-[16px]' style={{ color: C.TEXT_ICON }} />
+                    </div>
+                    <span className='text-sm' style={{ color: C.TEXT_BODY }}>
+                      Mothership
+                    </span>
+                    <ChevronDown
+                      className='h-[7px] w-[9px] transition-transform duration-150'
                       style={{
-                        gridTemplateRows: toolsExpanded ? '1fr' : '0fr',
+                        color: C.TEXT_ICON,
+                        transform: toolsExpanded ? 'rotate(0deg)' : 'rotate(-90deg)',
                       }}
-                    >
-                      <div className='overflow-hidden'>
-                        <div className='flex flex-col gap-1.5 pt-0.5'>
-                          <ToolCallRow
-                            icon={
-                              <Table className='size-[15px]' style={{ color: C.TEXT_TERTIARY }} />
-                            }
-                            title='Read Customer Leads'
-                          />
-                        </div>
+                    />
+                  </button>
+
+                  {/* Tool call items — collapsible */}
+                  <div
+                    className='grid transition-[grid-template-rows] duration-200 ease-out'
+                    style={{
+                      gridTemplateRows: toolsExpanded ? '1fr' : '0fr',
+                    }}
+                  >
+                    <div className='overflow-hidden'>
+                      <div className='flex flex-col gap-1.5 pt-0.5'>
+                        <ToolCallRow
+                          icon={
+                            <Table
+                              className='h-[15px] w-[15px]'
+                              style={{ color: C.TEXT_TERTIARY }}
+                            />
+                          }
+                          title='Read Customer Leads'
+                        />
                       </div>
                     </div>
-
-                    {/* Response prose — full width, no card */}
-                    {isResponding && (
-                      <m.div
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        transition={{ duration: 0.2, ease: EASE_OUT }}
-                      >
-                        <ChatMarkdown
-                          content={MOCK_RESPONSE}
-                          visibleLength={responseTypedLength}
-                          isTyping={chatPhase === 'responding'}
-                        />
-                      </m.div>
-                    )}
-                  </m.div>
-                )}
-              </AnimatePresence>
-            </div>
+                  </div>
+
+                  {/* Response prose — full width, no card */}
+                  {isResponding && (
+                    <motion.div
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      transition={{ duration: 0.2, ease: EASE_OUT }}
+                    >
+                      <ChatMarkdown
+                        content={MOCK_RESPONSE}
+                        visibleLength={responseTypedLength}
+                        isTyping={chatPhase === 'responding'}
+                      />
+                    </motion.div>
+                  )}
+                </motion.div>
+              )}
+            </AnimatePresence>
           </div>
-
-          {/* Resource panel — slides in from right */}
-          <AnimatePresence>
-            {showResourcePanel && (
-              <m.div
-                className='hidden h-full flex-shrink-0 overflow-hidden border-[#2c2c2c] border-l lg:flex'
-                initial={{ width: 0, opacity: 0 }}
-                animate={{ width: '55%', opacity: 1 }}
-                transition={{ duration: 0.35, ease: EASE_OUT }}
-              >
-                <MiniTablePanel />
-              </m.div>
-            )}
-          </AnimatePresence>
         </div>
-      </LazyMotion>
+
+        {/* Resource panel — slides in from right */}
+        <AnimatePresence>
+          {showResourcePanel && (
+            <motion.div
+              className='hidden h-full flex-shrink-0 overflow-hidden border-[#2c2c2c] border-l lg:flex'
+              initial={{ width: 0, opacity: 0 }}
+              animate={{ width: '55%', opacity: 1 }}
+              transition={{ duration: 0.35, ease: EASE_OUT }}
+            >
+              <MiniTablePanel />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
     )
   }
 
   return (
-    <LazyMotion features={domAnimation}>
-      <div className='flex min-w-0 flex-1 flex-col items-center justify-center px-6 pb-[2vh]'>
-        <m.p
-          role='presentation'
-          className='mb-6 max-w-[42rem] font-[430] font-season text-[32px] tracking-[-0.02em]'
-          style={{ color: C.TEXT_PRIMARY }}
-          initial={{ opacity: 0, y: 8 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.4, ease: EASE_OUT }}
+    <div className='flex min-w-0 flex-1 flex-col items-center justify-center px-6 pb-[2vh]'>
+      <motion.p
+        role='presentation'
+        className='mb-6 max-w-[42rem] font-[430] font-season text-[32px] tracking-[-0.02em]'
+        style={{ color: C.TEXT_PRIMARY }}
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, ease: EASE_OUT }}
+      >
+        What should we get done?
+      </motion.p>
+
+      <motion.div
+        className='w-full max-w-[32rem]'
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, delay: 0.1, ease: EASE_OUT }}
+      >
+        <div
+          className='cursor-text rounded-[20px] border px-2.5 py-2'
+          style={{ borderColor: C.BORDER, backgroundColor: C.SURFACE }}
+          onClick={() => textareaRef.current?.focus()}
         >
-          What should we get done?
-        </m.p>
-
-        <m.div
-          className='w-full max-w-[32rem]'
-          initial={{ opacity: 0, y: 12 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.4, delay: 0.1, ease: EASE_OUT }}
-        >
-          <div
-            role='group'
-            aria-label='Preview message input'
-            className='cursor-text rounded-[20px] border px-2.5 py-2'
-            style={{ borderColor: C.BORDER, backgroundColor: C.SURFACE }}
-            onClick={() => textareaRef.current?.focus()}
-            onKeyDown={(event) => {
-              if (event.target !== event.currentTarget) return
-              handleKeyboardActivation(event, () => textareaRef.current?.focus())
+          <textarea
+            ref={textareaRef}
+            value={inputValue}
+            onChange={(e) => {
+              if (!autoType) setInputValue(e.target.value)
             }}
-          >
-            <textarea
-              ref={textareaRef}
-              value={inputValue}
-              onChange={(e) => {
-                if (!autoType) setInputValue(e.target.value)
-              }}
-              onKeyDown={handleKeyDown}
-              onInput={handleInput}
-              placeholder={animatedPlaceholder}
-              rows={1}
-              readOnly={autoType}
-              className='m-0 box-border min-h-[24px] w-full resize-none overflow-y-auto border-0 bg-transparent p-1 font-body text-[15px] leading-[24px] tracking-[-0.015em] outline-none placeholder:font-[380] placeholder:text-[#787878] focus-visible:ring-0'
+            onKeyDown={handleKeyDown}
+            onInput={handleInput}
+            placeholder={animatedPlaceholder}
+            rows={1}
+            readOnly={autoType}
+            className='m-0 box-border min-h-[24px] w-full resize-none overflow-y-auto border-0 bg-transparent px-1 py-1 font-body text-[15px] leading-[24px] tracking-[-0.015em] outline-none placeholder:font-[380] placeholder:text-[#787878] focus-visible:ring-0'
+            style={{
+              color: C.TEXT_PRIMARY,
+              caretColor: autoType ? 'transparent' : C.TEXT_PRIMARY,
+              maxHeight: '200px',
+            }}
+          />
+          <div className='flex items-center justify-end'>
+            <button
+              type='button'
+              onClick={handleSubmit}
+              disabled={isEmpty}
+              aria-label='Submit message'
+              className='flex h-[28px] w-[28px] items-center justify-center rounded-full border-0 p-0 transition-colors'
               style={{
-                color: C.TEXT_PRIMARY,
-                caretColor: autoType ? 'transparent' : C.TEXT_PRIMARY,
-                maxHeight: '200px',
+                background: isEmpty ? '#808080' : '#e0e0e0',
+                cursor: isEmpty ? 'not-allowed' : 'pointer',
               }}
-            />
-            <div className='flex items-center justify-end'>
-              <button
-                type='button'
-                onClick={handleSubmit}
-                disabled={isEmpty}
-                aria-label='Submit message'
-                className='flex size-[28px] items-center justify-center rounded-full border-0 p-0 transition-colors'
-                style={{
-                  background: isEmpty ? '#808080' : '#e0e0e0',
-                  cursor: isEmpty ? 'not-allowed' : 'pointer',
-                }}
-              >
-                <ArrowUp size={16} strokeWidth={2.25} color='#1b1b1b' />
-              </button>
-            </div>
+            >
+              <ArrowUp size={16} strokeWidth={2.25} color='#1b1b1b' />
+            </button>
           </div>
-        </m.div>
-      </div>
-    </LazyMotion>
+        </div>
+      </motion.div>
+    </div>
   )
 })
 
@@ -365,8 +357,8 @@ export const LandingPreviewHome = memo(function LandingPreviewHome({
 function ToolCallRow({ icon, title }: { icon: React.ReactNode; title: string }) {
   return (
     <div className='flex items-center gap-[8px] pl-[24px]'>
-      <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>{icon}</div>
-      <span className='font-base text-[13px]' style={{ color: C.TEXT_SECONDARY }}>
+      <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>{icon}</div>
+      <span className='text-[13px]' style={{ color: C.TEXT_SECONDARY }}>
         {title}
       </span>
     </div>
@@ -393,7 +385,7 @@ function ChatMarkdown({
     <div className='font-body text-[14px] leading-[1.6]' style={{ color: C.TEXT_PRIMARY }}>
       <span dangerouslySetInnerHTML={{ __html: rendered }} />
       {isTyping && (
-        <m.span
+        <motion.span
           className='inline-block h-[14px] w-[1.5px] translate-y-[2px] bg-[#e6e6e6]'
           animate={{ opacity: [1, 0] }}
           transition={{
@@ -414,7 +406,7 @@ function MiniTablePanel() {
   return (
     <div className='flex h-full w-full flex-col bg-[var(--landing-bg)]'>
       <div className='flex items-center gap-2 border-[#2c2c2c] border-b px-3 py-2'>
-        <Table className='size-[14px]' style={{ color: C.TEXT_ICON }} />
+        <Table className='h-[14px] w-[14px]' style={{ color: C.TEXT_ICON }} />
         <span className='font-medium text-sm' style={{ color: C.TEXT_PRIMARY }}>
           Customer Leads
         </span>
@@ -436,7 +428,7 @@ function MiniTablePanel() {
                     className='border-[#2c2c2c] border-r border-b bg-[#1e1e1e] p-0 text-left'
                   >
                     <div className='flex items-center gap-1 px-2 py-1.5'>
-                      <Icon className='size-3 shrink-0' style={{ color: C.TEXT_ICON }} />
+                      <Icon className='h-3 w-3 shrink-0' style={{ color: C.TEXT_ICON }} />
                       <span className='font-medium text-[11px]' style={{ color: C.TEXT_PRIMARY }}>
                         {col.label}
                       </span>
@@ -452,7 +444,7 @@ function MiniTablePanel() {
           </thead>
           <tbody>
             {MINI_TABLE_ROWS.map((row, i) => (
-              <m.tr
+              <motion.tr
                 key={i}
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
@@ -480,7 +472,7 @@ function MiniTablePanel() {
                     </td>
                   )
                 })}
-              </m.tr>
+              </motion.tr>
             ))}
           </tbody>
         </table>
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-logs/landing-preview-logs.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-logs/landing-preview-logs.tsx
index 2387344d66d..d71ca9289fe 100644
--- a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-logs/landing-preview-logs.tsx
+++ b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-logs/landing-preview-logs.tsx
@@ -1,8 +1,7 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { Download } from 'lucide-react'
-import { ArrowUpDown, Badge, Library, ListFilter, Search } from '@/components/emcn'
+import { ArrowUpDown, Badge, Library, ListFilter, Search, Upload } from '@/components/emcn'
 import type { BadgeProps } from '@/components/emcn/components/badge/badge'
 import { cn } from '@/lib/core/utils/cn'
 import { workflowBorderColor } from '@/lib/workspaces/colors'
@@ -174,12 +173,12 @@ export function LandingPreviewLogs() {
       <div className='border-[var(--border)] border-b px-6 py-2.5'>
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-3'>
-            <Library className='size-[14px] text-[var(--text-icon)]' />
+            <Library className='h-[14px] w-[14px] text-[var(--text-icon)]' />
             <h1 className='font-medium text-[var(--text-body)] text-sm'>Logs</h1>
           </div>
           <div className='flex items-center gap-1'>
             <div className='flex cursor-default items-center rounded-md px-2 py-1 text-[var(--text-secondary)] text-caption'>
-              <Download className='mr-1.5 size-[14px] text-[var(--text-icon)]' />
+              <Upload className='mr-1.5 h-[14px] w-[14px] text-[var(--text-icon)]' />
               Export
             </div>
             <button
@@ -213,7 +212,7 @@ export function LandingPreviewLogs() {
       <div className='border-[var(--border)] border-b px-6 py-2.5'>
         <div className='flex items-center justify-between'>
           <div className='flex flex-1 items-center gap-2.5'>
-            <Search className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+            <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-icon)]' />
             <input
               type='text'
               value={search}
@@ -224,7 +223,7 @@ export function LandingPreviewLogs() {
           </div>
           <div className='flex items-center gap-1.5'>
             <div className='flex cursor-default items-center rounded-md px-2 py-1 text-[var(--text-secondary)] text-caption'>
-              <ListFilter className='mr-1.5 size-[14px] text-[var(--text-icon)]' />
+              <ListFilter className='mr-1.5 h-[14px] w-[14px] text-[var(--text-icon)]' />
               Filter
             </div>
             <button
@@ -232,7 +231,7 @@ export function LandingPreviewLogs() {
               onClick={() => handleSort(sortKey ?? 'workflowName')}
               className='flex cursor-default items-center rounded-md px-2 py-1 text-[var(--text-secondary)] text-caption transition-colors hover-hover:bg-[var(--surface-3)]'
             >
-              <ArrowUpDown className='mr-1.5 size-[14px] text-[var(--text-icon)]' />
+              <ArrowUpDown className='mr-1.5 h-[14px] w-[14px] text-[var(--text-icon)]' />
               Sort
             </button>
           </div>
@@ -266,7 +265,7 @@ export function LandingPreviewLogs() {
                     )}
                   >
                     {label}
-                    {sortKey === key && <ArrowUpDown className='size-[10px] opacity-60' />}
+                    {sortKey === key && <ArrowUpDown className='h-[10px] w-[10px] opacity-60' />}
                   </button>
                 </th>
               ))}
@@ -281,7 +280,7 @@ export function LandingPreviewLogs() {
                 <td className='px-6 align-middle'>
                   <div className='flex items-center gap-2'>
                     <div
-                      className='size-[10px] flex-shrink-0 rounded-[3px] border-[1.5px]'
+                      className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px] border-[1.5px]'
                       style={{
                         backgroundColor: log.workflowColor,
                         borderColor: workflowBorderColor(log.workflowColor),
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx
index b726f1d7ccd..3cc8232b77c 100644
--- a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx
+++ b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import { AnimatePresence, domMax, LazyMotion, m } from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
 import { ArrowUp } from 'lucide-react'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/navigation'
@@ -174,168 +174,166 @@ export const LandingPreviewPanel = memo(function LandingPreviewPanel({
   )
 
   return (
-    <LazyMotion features={domMax}>
-      <div className='flex h-full w-[280px] flex-shrink-0 flex-col bg-[#1e1e1e]'>
-        <div className='flex h-full flex-col border-[#2c2c2c] border-l pt-3.5'>
-          {/* Header */}
-          <div className='flex flex-shrink-0 items-center justify-between px-2'>
-            <div className='pointer-events-none flex gap-1.5'>
-              <div className='flex size-[30px] items-center justify-center rounded-[5px] border border-[#3d3d3d] bg-[#363636]'>
-                <MoreHorizontal className='size-[14px] text-[#e6e6e6]' />
+    <div className='flex h-full w-[280px] flex-shrink-0 flex-col bg-[#1e1e1e]'>
+      <div className='flex h-full flex-col border-[#2c2c2c] border-l pt-3.5'>
+        {/* Header */}
+        <div className='flex flex-shrink-0 items-center justify-between px-2'>
+          <div className='pointer-events-none flex gap-1.5'>
+            <div className='flex h-[30px] w-[30px] items-center justify-center rounded-[5px] border border-[#3d3d3d] bg-[#363636]'>
+              <MoreHorizontal className='h-[14px] w-[14px] text-[#e6e6e6]' />
+            </div>
+            <div className='flex h-[30px] w-[30px] items-center justify-center rounded-[5px] border border-[#3d3d3d] bg-[#363636]'>
+              <BubbleChatPreview className='h-[14px] w-[14px] text-[#e6e6e6]' />
+            </div>
+          </div>
+          <AuthModal defaultView='signup' source='landing_preview'>
+            <button
+              type='button'
+              className='flex gap-1.5'
+              onMouseMove={(e) => setCursorPos({ x: e.clientX, y: e.clientY })}
+              onMouseLeave={() => setCursorPos(null)}
+              onClick={() =>
+                trackLandingCta({
+                  label: 'Deploy',
+                  section: 'landing_preview',
+                  destination: 'auth_modal',
+                })
+              }
+            >
+              <div className='flex h-[30px] items-center rounded-[5px] bg-[#33C482] px-2.5 transition-colors hover:bg-[#2DAC72]'>
+                <span className='font-medium text-[#1b1b1b] text-[12px]'>Deploy</span>
               </div>
-              <div className='flex size-[30px] items-center justify-center rounded-[5px] border border-[#3d3d3d] bg-[#363636]'>
-                <BubbleChatPreview className='size-[14px] text-[#e6e6e6]' />
+              <div className='flex h-[30px] items-center gap-2 rounded-[5px] bg-[#33C482] px-2.5 transition-colors hover:bg-[#2DAC72]'>
+                <Play className='h-[11.5px] w-[11.5px] text-[#1b1b1b]' />
+                <span className='font-medium text-[#1b1b1b] text-[12px]'>Run</span>
               </div>
-            </div>
-            <AuthModal defaultView='signup' source='landing_preview'>
-              <button
-                type='button'
-                className='flex gap-1.5'
-                onMouseMove={(e) => setCursorPos({ x: e.clientX, y: e.clientY })}
-                onMouseLeave={() => setCursorPos(null)}
-                onClick={() =>
-                  trackLandingCta({
-                    label: 'Deploy',
-                    section: 'landing_preview',
-                    destination: 'auth_modal',
-                  })
-                }
+            </button>
+          </AuthModal>
+          {cursorPos &&
+            createPortal(
+              <div
+                className='pointer-events-none fixed z-[9999]'
+                style={{ left: cursorPos.x + 14, top: cursorPos.y + 14 }}
               >
-                <div className='flex h-[30px] items-center rounded-[5px] bg-[#33C482] px-2.5 transition-colors hover:bg-[#2DAC72]'>
-                  <span className='font-medium text-[#1b1b1b] text-[12px]'>Deploy</span>
+                <div className='flex h-[4px]'>
+                  <div className='h-full w-[8px] bg-[#2ABBF8]' />
+                  <div className='h-full w-[14px] bg-[#2ABBF8] opacity-60' />
+                  <div className='h-full w-[8px] bg-[#00F701]' />
+                  <div className='h-full w-[16px] bg-[#00F701] opacity-60' />
+                  <div className='h-full w-[8px] bg-[#FFCC02]' />
+                  <div className='h-full w-[10px] bg-[#FFCC02] opacity-60' />
+                  <div className='h-full w-[8px] bg-[#FA4EDF]' />
+                  <div className='h-full w-[14px] bg-[#FA4EDF] opacity-60' />
                 </div>
-                <div className='flex h-[30px] items-center gap-2 rounded-[5px] bg-[#33C482] px-2.5 transition-colors hover:bg-[#2DAC72]'>
-                  <Play className='size-[11.5px] text-[#1b1b1b]' />
-                  <span className='font-medium text-[#1b1b1b] text-[12px]'>Run</span>
+                <div className='flex items-center gap-[5px] bg-white px-1.5 py-1 font-medium text-[#1C1C1C] text-[11px]'>
+                  Get started
+                  <ChevronDown className='-rotate-90 h-[7px] w-[7px] text-[#1C1C1C]' />
                 </div>
-              </button>
-            </AuthModal>
-            {cursorPos &&
-              createPortal(
-                <div
-                  className='pointer-events-none fixed z-[9999]'
-                  style={{ left: cursorPos.x + 14, top: cursorPos.y + 14 }}
-                >
-                  <div className='flex h-[4px]'>
-                    <div className='h-full w-[8px] bg-[#2ABBF8]' />
-                    <div className='h-full w-[14px] bg-[#2ABBF8] opacity-60' />
-                    <div className='h-full w-[8px] bg-[#00F701]' />
-                    <div className='h-full w-[16px] bg-[#00F701] opacity-60' />
-                    <div className='h-full w-[8px] bg-[#FFCC02]' />
-                    <div className='h-full w-[10px] bg-[#FFCC02] opacity-60' />
-                    <div className='h-full w-[8px] bg-[#FA4EDF]' />
-                    <div className='h-full w-[14px] bg-[#FA4EDF] opacity-60' />
-                  </div>
-                  <div className='flex items-center gap-[5px] bg-white px-1.5 py-1 font-medium text-[#1C1C1C] text-[11px]'>
-                    Get started
-                    <ChevronDown className='-rotate-90 size-[7px] text-[#1C1C1C]' />
-                  </div>
-                </div>,
-                document.body
-              )}
-          </div>
+              </div>,
+              document.body
+            )}
+        </div>
 
-          {/* Tabs with sliding active indicator */}
-          <div className='flex flex-shrink-0 items-center px-2 pt-3.5'>
-            <div className='flex gap-1'>
-              {TABS_WITH_TOOLBAR.map((tab) => {
-                if (tab.disabled) {
-                  return (
-                    <div
-                      key={tab.id}
-                      className='pointer-events-none flex h-[28px] items-center rounded-md border border-transparent px-2 py-[5px]'
-                    >
-                      <span className='font-medium text-[#787878] text-[12.5px]'>{tab.label}</span>
-                    </div>
-                  )
-                }
-                const isActive = activeTab === tab.id
+        {/* Tabs with sliding active indicator */}
+        <div className='flex flex-shrink-0 items-center px-2 pt-3.5'>
+          <div className='flex gap-1'>
+            {TABS_WITH_TOOLBAR.map((tab) => {
+              if (tab.disabled) {
                 return (
-                  <button
+                  <div
                     key={tab.id}
-                    type='button'
-                    onClick={() => handleTabSwitch(tab.id as PanelTab)}
-                    className='relative flex h-[28px] items-center rounded-md border border-transparent px-2 py-[5px] font-medium text-[12.5px] transition-colors hover:border-[#3d3d3d] hover:bg-[#363636] hover:text-[#e6e6e6]'
-                    style={{ color: isActive ? '#e6e6e6' : '#787878' }}
+                    className='pointer-events-none flex h-[28px] items-center rounded-md border border-transparent px-2 py-[5px]'
                   >
-                    {isActive && (
-                      <m.div
-                        layoutId='panel-tab-indicator'
-                        className='absolute inset-0 rounded-md border border-[#3d3d3d] bg-[#363636]'
-                        transition={{ type: 'spring', stiffness: 400, damping: 30 }}
-                      />
-                    )}
-                    <span className='relative z-10'>{tab.label}</span>
-                  </button>
+                    <span className='font-medium text-[#787878] text-[12.5px]'>{tab.label}</span>
+                  </div>
                 )
-              })}
-            </div>
+              }
+              const isActive = activeTab === tab.id
+              return (
+                <button
+                  key={tab.id}
+                  type='button'
+                  onClick={() => handleTabSwitch(tab.id as PanelTab)}
+                  className='relative flex h-[28px] items-center rounded-md border border-transparent px-2 py-[5px] font-medium text-[12.5px] transition-colors hover:border-[#3d3d3d] hover:bg-[#363636] hover:text-[#e6e6e6]'
+                  style={{ color: isActive ? '#e6e6e6' : '#787878' }}
+                >
+                  {isActive && (
+                    <motion.div
+                      layoutId='panel-tab-indicator'
+                      className='absolute inset-0 rounded-md border border-[#3d3d3d] bg-[#363636]'
+                      transition={{ type: 'spring', stiffness: 400, damping: 30 }}
+                    />
+                  )}
+                  <span className='relative z-10'>{tab.label}</span>
+                </button>
+              )
+            })}
           </div>
+        </div>
 
-          {/* Tab content with cross-fade */}
-          <div className='flex flex-1 flex-col overflow-hidden pt-3'>
-            <AnimatePresence mode='wait'>
-              {activeTab === 'copilot' && (
-                <m.div
-                  key='copilot'
-                  className='flex h-full flex-col'
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.15, ease: EASE_OUT }}
-                >
-                  <div className='pointer-events-none mx-[-1px] flex flex-shrink-0 items-center justify-between gap-2 border border-[#2c2c2c] bg-[#292929] px-3 py-1.5'>
-                    <span className='min-w-0 flex-1 truncate font-medium text-[#e6e6e6] text-[14px]'>
-                      New Chat
-                    </span>
-                  </div>
-                  <div className='px-2 pt-3 pb-2'>
-                    <div className='rounded-[4px] border border-[#3d3d3d] bg-[#292929] p-1.5'>
-                      <textarea
-                        ref={textareaRef}
-                        value={inputValue}
-                        onChange={(e) => setInputValue(e.target.value)}
-                        onKeyDown={handleKeyDown}
-                        placeholder='Build an AI agent...'
-                        rows={2}
-                        className='mb-1.5 min-h-[48px] w-full cursor-text resize-none border-0 bg-transparent px-0.5 py-1 font-base text-[#e6e6e6] text-sm leading-[1.25rem] placeholder-[#787878] caret-[#e6e6e6] outline-none'
-                      />
-                      <div className='flex items-center justify-end'>
-                        <button
-                          type='button'
-                          onClick={handleSubmit}
-                          disabled={isEmpty}
-                          className='flex size-[22px] items-center justify-center rounded-full border-0 p-0 transition-colors'
-                          style={{
-                            background: isEmpty ? '#808080' : '#e0e0e0',
-                            cursor: isEmpty ? 'not-allowed' : 'pointer',
-                          }}
-                        >
-                          <ArrowUp size={14} strokeWidth={2.25} color='#1b1b1b' />
-                        </button>
-                      </div>
+        {/* Tab content with cross-fade */}
+        <div className='flex flex-1 flex-col overflow-hidden pt-3'>
+          <AnimatePresence mode='wait'>
+            {activeTab === 'copilot' && (
+              <motion.div
+                key='copilot'
+                className='flex h-full flex-col'
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.15, ease: EASE_OUT }}
+              >
+                <div className='pointer-events-none mx-[-1px] flex flex-shrink-0 items-center justify-between gap-2 border border-[#2c2c2c] bg-[#292929] px-3 py-1.5'>
+                  <span className='min-w-0 flex-1 truncate font-medium text-[#e6e6e6] text-[14px]'>
+                    New Chat
+                  </span>
+                </div>
+                <div className='px-2 pt-3 pb-2'>
+                  <div className='rounded-[4px] border border-[#3d3d3d] bg-[#292929] px-1.5 py-1.5'>
+                    <textarea
+                      ref={textareaRef}
+                      value={inputValue}
+                      onChange={(e) => setInputValue(e.target.value)}
+                      onKeyDown={handleKeyDown}
+                      placeholder='Build an AI agent...'
+                      rows={2}
+                      className='mb-1.5 min-h-[48px] w-full cursor-text resize-none border-0 bg-transparent px-0.5 py-1 text-[#e6e6e6] text-sm leading-[1.25rem] placeholder-[#787878] caret-[#e6e6e6] outline-none'
+                    />
+                    <div className='flex items-center justify-end'>
+                      <button
+                        type='button'
+                        onClick={handleSubmit}
+                        disabled={isEmpty}
+                        className='flex h-[22px] w-[22px] items-center justify-center rounded-full border-0 p-0 transition-colors'
+                        style={{
+                          background: isEmpty ? '#808080' : '#e0e0e0',
+                          cursor: isEmpty ? 'not-allowed' : 'pointer',
+                        }}
+                      >
+                        <ArrowUp size={14} strokeWidth={2.25} color='#1b1b1b' />
+                      </button>
                     </div>
                   </div>
-                </m.div>
-              )}
-
-              {activeTab === 'editor' && (
-                <m.div
-                  key='editor'
-                  className='flex h-full flex-col'
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.15, ease: EASE_OUT }}
-                >
-                  <EditorTabContent editorPrompt={editorPrompt} typedLength={typedLength} />
-                </m.div>
-              )}
-            </AnimatePresence>
-          </div>
+                </div>
+              </motion.div>
+            )}
+
+            {activeTab === 'editor' && (
+              <motion.div
+                key='editor'
+                className='flex h-full flex-col'
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.15, ease: EASE_OUT }}
+              >
+                <EditorTabContent editorPrompt={editorPrompt} typedLength={typedLength} />
+              </motion.div>
+            )}
+          </AnimatePresence>
         </div>
       </div>
-    </LazyMotion>
+    </div>
   )
 })
 
@@ -386,10 +384,10 @@ function EditorTabContent({ editorPrompt, typedLength }: EditorTabContentProps)
       <div className='mx-[-1px] flex flex-shrink-0 items-center gap-2 border border-[#2c2c2c] bg-[#292929] px-3 py-1.5'>
         {BlockIcon && (
           <div
-            className='flex size-[18px] flex-shrink-0 items-center justify-center rounded-sm'
+            className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm'
             style={{ background: bgColor }}
           >
-            <BlockIcon className='size-[12px] text-white' />
+            <BlockIcon className='h-[12px] w-[12px] text-white' />
           </div>
         )}
         <span className='min-w-0 flex-1 truncate font-medium text-[#e6e6e6] text-sm'>
@@ -405,11 +403,11 @@ function EditorTabContent({ editorPrompt, typedLength }: EditorTabContentProps)
             <div className='flex items-center pl-0.5'>
               <span className='font-medium text-[#e6e6e6] text-small'>System Prompt</span>
             </div>
-            <div className='rounded-[4px] border border-[#3d3d3d] bg-[#292929] p-2'>
+            <div className='rounded-[4px] border border-[#3d3d3d] bg-[#292929] px-2 py-2'>
               <p className='min-h-[48px] whitespace-pre-wrap break-words font-medium font-sans text-[#e6e6e6] text-sm leading-[1.5]'>
                 {visibleText}
                 {isTyping && (
-                  <m.span
+                  <motion.span
                     className='inline-block h-[14px] w-[1.5px] translate-y-[2px] bg-[#e6e6e6]'
                     animate={{ opacity: [1, 0] }}
                     transition={{
@@ -430,7 +428,7 @@ function EditorTabContent({ editorPrompt, typedLength }: EditorTabContentProps)
                 <span className='font-medium text-[#e6e6e6] text-small'>Model</span>
               </div>
               <div className='flex h-[32px] items-center gap-2 rounded-[4px] border border-[#3d3d3d] bg-[#292929] px-2'>
-                {ModelIcon && <ModelIcon className='size-[14px] text-[#e6e6e6]' />}
+                {ModelIcon && <ModelIcon className='h-[14px] w-[14px] text-[#e6e6e6]' />}
                 <span className='flex-1 truncate font-medium text-[#e6e6e6] text-sm'>{model}</span>
                 <ChevronDown className='h-[7px] w-[9px] text-[#636363]' />
               </div>
@@ -453,10 +451,10 @@ function EditorTabContent({ editorPrompt, typedLength }: EditorTabContentProps)
                     >
                       {ToolIcon && (
                         <div
-                          className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                          className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
                           style={{ background: tool.bgColor }}
                         >
-                          <ToolIcon className='size-[10px] text-white' />
+                          <ToolIcon className='h-[10px] w-[10px] text-white' />
                         </div>
                       )}
                       <span className='font-normal text-[#e6e6e6] text-[12px]'>{tool.name}</span>
@@ -476,7 +474,7 @@ function EditorTabContent({ editorPrompt, typedLength }: EditorTabContentProps)
             <div className='relative h-[6px] rounded-full bg-[#3d3d3d]'>
               <div className='h-full w-[70%] rounded-full bg-[#e6e6e6]' />
               <div
-                className='-translate-y-1/2 absolute top-1/2 size-[14px] rounded-full border-[#e6e6e6] border-[2px] bg-[#292929]'
+                className='-translate-y-1/2 absolute top-1/2 h-[14px] w-[14px] rounded-full border-[#e6e6e6] border-[2px] bg-[#292929]'
                 style={{ left: 'calc(70% - 7px)' }}
               />
             </div>
@@ -487,7 +485,7 @@ function EditorTabContent({ editorPrompt, typedLength }: EditorTabContentProps)
             <div className='flex items-center pl-0.5'>
               <span className='font-medium text-[#e6e6e6] text-small'>Response Format</span>
             </div>
-            <div className='rounded-[4px] border border-[#3d3d3d] bg-[#292929] p-2'>
+            <div className='rounded-[4px] border border-[#3d3d3d] bg-[#292929] px-2 py-2'>
               <span className='font-mono text-[#787878] text-[12px]'>plain text</span>
             </div>
           </div>
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx
index 74a029521f1..e79f5e63be8 100644
--- a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx
+++ b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx
@@ -169,7 +169,7 @@ export function LandingPreviewSidebar({
       {/* Workspace */}
       <div className='mt-3.5 flex flex-shrink-0 flex-col'>
         <div className='px-4 pb-1.5'>
-          <div className='font-base text-[12px]' style={{ color: C.TEXT_ICON }}>
+          <div className='text-[12px]' style={{ color: C.TEXT_ICON }}>
             Workspace
           </div>
         </div>
@@ -191,7 +191,7 @@ export function LandingPreviewSidebar({
         {/* Workflows */}
         <div className='flex flex-col'>
           <div className='px-4'>
-            <div className='font-base text-[12px]' style={{ color: C.TEXT_ICON }}>
+            <div className='text-[12px]' style={{ color: C.TEXT_ICON }}>
               Workflows
             </div>
           </div>
diff --git a/apps/sim/app/(landing)/integrations/(shell)/[slug]/components/integration-faq.tsx b/apps/sim/app/(landing)/integrations/(shell)/[slug]/components/integration-faq.tsx
index 6c71bc3e8e5..3e49493c3c0 100644
--- a/apps/sim/app/(landing)/integrations/(shell)/[slug]/components/integration-faq.tsx
+++ b/apps/sim/app/(landing)/integrations/(shell)/[slug]/components/integration-faq.tsx
@@ -1,5 +1,5 @@
 import { LandingFAQ } from '@/app/(landing)/components/landing-faq'
-import type { FAQItem } from '@/app/(landing)/integrations/data/types'
+import type { FAQItem } from '@/app/(landing)/integrations/data'
 
 interface IntegrationFAQProps {
   faqs: FAQItem[]
diff --git a/apps/sim/app/(landing)/integrations/(shell)/[slug]/page.tsx b/apps/sim/app/(landing)/integrations/(shell)/[slug]/page.tsx
index 000b26c523d..4fe198b07bb 100644
--- a/apps/sim/app/(landing)/integrations/(shell)/[slug]/page.tsx
+++ b/apps/sim/app/(landing)/integrations/(shell)/[slug]/page.tsx
@@ -7,12 +7,16 @@ import { IntegrationCtaButton } from '@/app/(landing)/integrations/(shell)/[slug
 import { IntegrationFAQ } from '@/app/(landing)/integrations/(shell)/[slug]/components/integration-faq'
 import { TemplateCardButton } from '@/app/(landing)/integrations/(shell)/[slug]/components/template-card-button'
 import { IntegrationIcon } from '@/app/(landing)/integrations/components/integration-icon'
-import { blockTypeToIconMap } from '@/app/(landing)/integrations/data/icon-mapping'
-import integrations from '@/app/(landing)/integrations/data/integrations.json'
-import type { AuthType, FAQItem, Integration } from '@/app/(landing)/integrations/data/types'
-import { TEMPLATES } from '@/app/workspace/[workspaceId]/home/components/template-prompts/consts'
-
-const allIntegrations = integrations as Integration[]
+import {
+  type AuthType,
+  blockTypeToIconMap,
+  type FAQItem,
+  INTEGRATIONS,
+  type Integration,
+  TEMPLATES,
+} from '@/app/(landing)/integrations/data'
+
+const allIntegrations = INTEGRATIONS
 const INTEGRATION_COUNT = allIntegrations.length
 const baseUrl = SITE_URL
 
diff --git a/apps/sim/app/(landing)/integrations/(shell)/page.tsx b/apps/sim/app/(landing)/integrations/(shell)/page.tsx
index 5d25f6a335a..73b26bafea0 100644
--- a/apps/sim/app/(landing)/integrations/(shell)/page.tsx
+++ b/apps/sim/app/(landing)/integrations/(shell)/page.tsx
@@ -4,12 +4,14 @@ import { SITE_URL } from '@/lib/core/utils/urls'
 import { IntegrationCard } from '@/app/(landing)/integrations/components/integration-card'
 import { IntegrationGrid } from '@/app/(landing)/integrations/components/integration-grid'
 import { RequestIntegrationModal } from '@/app/(landing)/integrations/components/request-integration-modal'
-import { blockTypeToIconMap } from '@/app/(landing)/integrations/data/icon-mapping'
-import integrations from '@/app/(landing)/integrations/data/integrations.json'
-import { POPULAR_WORKFLOWS } from '@/app/(landing)/integrations/data/popular-workflows'
-import type { Integration } from '@/app/(landing)/integrations/data/types'
-
-const allIntegrations = integrations as Integration[]
+import {
+  blockTypeToIconMap,
+  INTEGRATIONS,
+  type Integration,
+  POPULAR_WORKFLOWS,
+} from '@/app/(landing)/integrations/data'
+
+const allIntegrations = INTEGRATIONS
 const INTEGRATION_COUNT = allIntegrations.length
 
 /**
diff --git a/apps/sim/app/(landing)/integrations/components/integration-card.tsx b/apps/sim/app/(landing)/integrations/components/integration-card.tsx
index ef067006eec..34f034e23d3 100644
--- a/apps/sim/app/(landing)/integrations/components/integration-card.tsx
+++ b/apps/sim/app/(landing)/integrations/components/integration-card.tsx
@@ -1,6 +1,6 @@
 import type { ComponentType, SVGProps } from 'react'
 import Link from 'next/link'
-import type { Integration } from '@/app/(landing)/integrations/data/types'
+import type { Integration } from '@/app/(landing)/integrations/data'
 import { ChevronArrow } from '@/app/(landing)/models/components/model-primitives'
 import { IntegrationIcon } from './integration-icon'
 
diff --git a/apps/sim/app/(landing)/integrations/components/integration-grid.tsx b/apps/sim/app/(landing)/integrations/components/integration-grid.tsx
index aad53904070..d43c3b82a28 100644
--- a/apps/sim/app/(landing)/integrations/components/integration-grid.tsx
+++ b/apps/sim/app/(landing)/integrations/components/integration-grid.tsx
@@ -2,33 +2,15 @@
 
 import { useMemo, useState } from 'react'
 import { Input } from '@/components/emcn'
-import { blockTypeToIconMap } from '@/app/(landing)/integrations/data/icon-mapping'
-import type { Integration } from '@/app/(landing)/integrations/data/types'
+import {
+  blockTypeToIconMap,
+  formatIntegrationType,
+  type Integration,
+} from '@/app/(landing)/integrations/data'
 import { IntegrationRow } from './integration-card'
 
-const CATEGORY_LABELS: Record<string, string> = {
-  ai: 'AI',
-  analytics: 'Analytics',
-  communication: 'Communication',
-  crm: 'CRM',
-  'customer-support': 'Customer Support',
-  databases: 'Databases',
-  design: 'Design',
-  'developer-tools': 'Developer Tools',
-  documents: 'Documents',
-  ecommerce: 'E-commerce',
-  email: 'Email',
-  'file-storage': 'File Storage',
-  hr: 'HR',
-  productivity: 'Productivity',
-  sales: 'Sales',
-  search: 'Search',
-  security: 'Security',
-  other: 'Other',
-} as const
-
 interface IntegrationGridProps {
-  integrations: Integration[]
+  integrations: readonly Integration[]
 }
 
 export function IntegrationGrid({ integrations }: IntegrationGridProps) {
@@ -38,10 +20,8 @@ export function IntegrationGrid({ integrations }: IntegrationGridProps) {
   const availableCategories = useMemo(() => {
     const counts = new Map<string, number>()
     for (const i of integrations) {
-      if (i.integrationTypes) {
-        for (const t of i.integrationTypes) {
-          counts.set(t, (counts.get(t) || 0) + 1)
-        }
+      if (i.integrationType) {
+        counts.set(i.integrationType, (counts.get(i.integrationType) || 0) + 1)
       }
     }
     return Array.from(counts.entries())
@@ -53,7 +33,7 @@ export function IntegrationGrid({ integrations }: IntegrationGridProps) {
     let results = integrations
 
     if (activeCategory) {
-      results = results.filter((i) => i.integrationTypes?.includes(activeCategory))
+      results = results.filter((i) => i.integrationType === activeCategory)
     }
 
     const q = query.trim().toLowerCase()
@@ -121,7 +101,7 @@ export function IntegrationGrid({ integrations }: IntegrationGridProps) {
                 : 'border-[var(--landing-border-strong)] text-[var(--landing-text)] hover:bg-[var(--landing-bg-elevated)]'
             }`}
           >
-            {CATEGORY_LABELS[cat] || cat}
+            {formatIntegrationType(cat)}
           </button>
         ))}
       </div>
@@ -132,7 +112,7 @@ export function IntegrationGrid({ integrations }: IntegrationGridProps) {
         <p className='py-12 text-center text-[15px] text-[var(--landing-text-subtle)]'>
           No integrations found
           {query ? <> for &ldquo;{query}&rdquo;</> : null}
-          {activeCategory ? <> in {CATEGORY_LABELS[activeCategory] || activeCategory}</> : null}
+          {activeCategory ? <> in {formatIntegrationType(activeCategory)}</> : null}
         </p>
       ) : (
         <div>
diff --git a/apps/sim/app/(landing)/integrations/data/icon-mapping.ts b/apps/sim/app/(landing)/integrations/data/icon-mapping.ts
index c4b0dfba957..b5c65419bc2 100644
--- a/apps/sim/app/(landing)/integrations/data/icon-mapping.ts
+++ b/apps/sim/app/(landing)/integrations/data/icon-mapping.ts
@@ -4,7 +4,6 @@
 
 import type { ComponentType, SVGProps } from 'react'
 import {
-  A2AIcon,
   AgentMailIcon,
   AgentPhoneIcon,
   AgiloftIcon,
@@ -22,13 +21,10 @@ import {
   AttioIcon,
   AzureIcon,
   BoxCompanyIcon,
-  BrainIcon,
   BrandfetchIcon,
   BrightDataIcon,
-  BrowserUseIcon,
   CalComIcon,
   CalendlyIcon,
-  CirclebackIcon,
   ClayIcon,
   ClerkIcon,
   CloudFormationIcon,
@@ -42,7 +38,6 @@ import {
   DatadogIcon,
   DevinIcon,
   DiscordIcon,
-  DocumentIcon,
   DocuSignIcon,
   DropboxIcon,
   DsPyIcon,
@@ -56,7 +51,6 @@ import {
   EvernoteIcon,
   ExaAIIcon,
   ExtendIcon,
-  EyeIcon,
   FathomIcon,
   FirecrawlIcon,
   FirefliesIcon,
@@ -94,7 +88,6 @@ import {
   HunterIOIcon,
   IAMIcon,
   IdentityCenterIcon,
-  ImageIcon,
   IncidentioIcon,
   InfisicalIcon,
   IntercomIcon,
@@ -113,7 +106,6 @@ import {
   LumaIcon,
   MailchimpIcon,
   MailgunIcon,
-  MailServerIcon,
   Mem0Icon,
   MicrosoftDataverseIcon,
   MicrosoftExcelIcon,
@@ -124,15 +116,12 @@ import {
   MistralIcon,
   MondayIcon,
   MongoDBIcon,
-  MySQLIcon,
-  Neo4jIcon,
   NotionIcon,
   ObsidianIcon,
   OktaIcon,
   OnePasswordIcon,
   OpenAIIcon,
   OutlookIcon,
-  PackageSearchIcon,
   PagerDutyIcon,
   ParallelIcon,
   PeopleDataLabsIcon,
@@ -140,7 +129,6 @@ import {
   PineconeIcon,
   PipedriveIcon,
   PolymarketIcon,
-  PostgresIcon,
   PosthogIcon,
   ProfoundIcon,
   PulseIcon,
@@ -159,22 +147,17 @@ import {
   SapConcurIcon,
   SapS4HanaIcon,
   SESIcon,
-  SearchIcon,
   SecretsManagerIcon,
   SendgridIcon,
   SentryIcon,
   SerperIcon,
   ServiceNowIcon,
-  SftpIcon,
   ShopifyIcon,
   SimilarwebIcon,
   SixtyfourIcon,
   SlackIcon,
-  SmtpIcon,
   SQSIcon,
-  SshIcon,
   STSIcon,
-  STTIcon,
   StagehandIcon,
   StripeIcon,
   SupabaseIcon,
@@ -183,14 +166,11 @@ import {
   TelegramIcon,
   TextractIcon,
   TinybirdIcon,
-  TranslateIcon,
   TrelloIcon,
-  TTSIcon,
   TwilioIcon,
   TypeformIcon,
   UpstashIcon,
   VercelIcon,
-  VideoIcon,
   WealthboxIcon,
   WebflowIcon,
   WhatsAppIcon,
@@ -207,7 +187,6 @@ import {
 type IconComponent = ComponentType<SVGProps<SVGSVGElement>>
 
 export const blockTypeToIconMap: Record<string, IconComponent> = {
-  a2a: A2AIcon,
   agentmail: AgentMailIcon,
   agentphone: AgentPhoneIcon,
   agiloft: AgiloftIcon,
@@ -226,10 +205,8 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   box: BoxCompanyIcon,
   brandfetch: BrandfetchIcon,
   brightdata: BrightDataIcon,
-  browser_use: BrowserUseIcon,
   calcom: CalComIcon,
   calendly: CalendlyIcon,
-  circleback: CirclebackIcon,
   clay: ClayIcon,
   clerk: ClerkIcon,
   cloudflare: CloudflareIcon,
@@ -257,8 +234,6 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   exa: ExaAIIcon,
   extend_v2: ExtendIcon,
   fathom: FathomIcon,
-  file_v3: DocumentIcon,
-  file_v4: DocumentIcon,
   firecrawl: FirecrawlIcon,
   fireflies_v2: FirefliesIcon,
   gamma: GammaIcon,
@@ -295,8 +270,6 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   hunter: HunterIOIcon,
   iam: IAMIcon,
   identity_center: IdentityCenterIcon,
-  image_generator: ImageIcon,
-  imap: MailServerIcon,
   incidentio: IncidentioIcon,
   infisical: InfisicalIcon,
   intercom_v2: IntercomIcon,
@@ -305,7 +278,6 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   jira_service_management: JiraServiceManagementIcon,
   kalshi_v2: KalshiIcon,
   ketch: KetchIcon,
-  knowledge: PackageSearchIcon,
   langsmith: LangsmithIcon,
   launchdarkly: LaunchDarklyIcon,
   lemlist: LemlistIcon,
@@ -317,7 +289,6 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   mailchimp: MailchimpIcon,
   mailgun: MailgunIcon,
   mem0: Mem0Icon,
-  memory: BrainIcon,
   microsoft_ad: AzureIcon,
   microsoft_dataverse: MicrosoftDataverseIcon,
   microsoft_excel_v2: MicrosoftExcelIcon,
@@ -326,8 +297,6 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   mistral_parse_v3: MistralIcon,
   monday: MondayIcon,
   mongodb: MongoDBIcon,
-  mysql: MySQLIcon,
-  neo4j: Neo4jIcon,
   notion_v2: NotionIcon,
   obsidian: ObsidianIcon,
   okta: OktaIcon,
@@ -342,7 +311,6 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   pinecone: PineconeIcon,
   pipedrive: PipedriveIcon,
   polymarket: PolymarketIcon,
-  postgresql: PostgresIcon,
   posthog: PosthogIcon,
   profound: ProfoundIcon,
   pulse_v2: PulseIcon,
@@ -360,42 +328,33 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   salesforce: SalesforceIcon,
   sap_concur: SapConcurIcon,
   sap_s4hana: SapS4HanaIcon,
-  search: SearchIcon,
   secrets_manager: SecretsManagerIcon,
   sendgrid: SendgridIcon,
   sentry: SentryIcon,
   serper: SerperIcon,
   servicenow: ServiceNowIcon,
   ses: SESIcon,
-  sftp: SftpIcon,
   sharepoint_v2: MicrosoftSharepointIcon,
   shopify: ShopifyIcon,
   similarweb: SimilarwebIcon,
   sixtyfour: SixtyfourIcon,
   slack: SlackIcon,
-  smtp: SmtpIcon,
   sqs: SQSIcon,
-  ssh: SshIcon,
   stagehand: StagehandIcon,
   stripe: StripeIcon,
   sts: STSIcon,
-  stt_v2: STTIcon,
   supabase: SupabaseIcon,
   tailscale: TailscaleIcon,
   tavily: TavilyIcon,
   telegram: TelegramIcon,
   textract_v2: TextractIcon,
   tinybird: TinybirdIcon,
-  translate: TranslateIcon,
   trello: TrelloIcon,
-  tts: TTSIcon,
   twilio_sms: TwilioIcon,
   twilio_voice: TwilioIcon,
   typeform: TypeformIcon,
   upstash: UpstashIcon,
   vercel: VercelIcon,
-  video_generator_v2: VideoIcon,
-  vision_v2: EyeIcon,
   wealthbox: WealthboxIcon,
   webflow: WebflowIcon,
   whatsapp: WhatsAppIcon,
diff --git a/apps/sim/app/(landing)/integrations/data/index.ts b/apps/sim/app/(landing)/integrations/data/index.ts
new file mode 100644
index 00000000000..1fc2e417c37
--- /dev/null
+++ b/apps/sim/app/(landing)/integrations/data/index.ts
@@ -0,0 +1,38 @@
+/**
+ * Canonical entry point for everything integrations-related. Landing
+ * `/integrations`, workspace integrations, and the sitemap all import from
+ * here so the data shape and helpers stay in lockstep.
+ *
+ * `INTEGRATIONS` is the serialized projection of `BlockConfig` (in
+ * `apps/sim/blocks/blocks/*.ts`) — written by `scripts/generate-docs.ts` via
+ * `bun run generate-docs` whenever a block changes. The serialization exists
+ * because `BlockConfig` contains non-serializable values (React component
+ * refs, JSX, tool/param functions) that can't cheaply cross the
+ * client/server boundary, plus build-time enrichments from the tool registry
+ * (operation descriptions) and trigger registry (trigger details).
+ *
+ * Beyond the direct `BlockConfig` fields (`type`, `name`, `description`,
+ * `longDescription`, `category`, `integrationType`, `bgColor`, `tags`), the
+ * JSON adds:
+ *   • `slug` — URL slug derived from `name`
+ *   • `iconName` (string) — extracted from `BlockConfig.icon` (React component)
+ *   • `operations[].description` — enriched from the tool registry
+ *   • `triggers[]` — enriched from the trigger registry
+ *   • `authType` — inferred from `BlockConfig.subBlocks`
+ *   • `docsUrl`, `operationCount`, `triggerCount` — derived
+ *
+ * Block configs remain the source of truth for execution; this barrel is the
+ * source of truth for presentation/catalog consumers.
+ */
+
+import integrationsJson from '@/app/(landing)/integrations/data/integrations.json'
+import type { Integration } from '@/app/(landing)/integrations/data/types'
+
+/** All integrations surfaced in the catalog, ordered as written by `scripts/generate-docs.ts`. */
+export const INTEGRATIONS: readonly Integration[] = integrationsJson as readonly Integration[]
+
+export { blockTypeToIconMap } from '@/app/(landing)/integrations/data/icon-mapping'
+export { POPULAR_WORKFLOWS } from '@/app/(landing)/integrations/data/popular-workflows'
+export { TEMPLATES } from '@/app/(landing)/integrations/data/templates'
+export type { AuthType, FAQItem, Integration } from '@/app/(landing)/integrations/data/types'
+export { formatIntegrationType } from '@/blocks/types'
diff --git a/apps/sim/app/(landing)/integrations/data/integrations.json b/apps/sim/app/(landing)/integrations/data/integrations.json
index 0ba46960d75..3b31db1e099 100644
--- a/apps/sim/app/(landing)/integrations/data/integrations.json
+++ b/apps/sim/app/(landing)/integrations/data/integrations.json
@@ -5,7 +5,7 @@
     "name": "1Password",
     "description": "Manage secrets and items in 1Password vaults",
     "longDescription": "Access and manage secrets stored in 1Password vaults using the Connect API or Service Account SDK. List vaults, retrieve items with their fields and secrets, create new items, update existing ones, delete items, and resolve secret references.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "OnePasswordIcon",
     "docsUrl": "https://docs.sim.ai/tools/onepassword",
     "operations": [
@@ -51,60 +51,9 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["security"],
+    "integrationType": "security",
     "tags": ["secrets-management", "identity"]
   },
-  {
-    "type": "a2a",
-    "slug": "a2a",
-    "name": "A2A",
-    "description": "Interact with external A2A-compatible agents",
-    "longDescription": "Use the A2A (Agent-to-Agent) protocol to interact with external AI agents. ",
-    "bgColor": "#4151B5",
-    "iconName": "A2AIcon",
-    "docsUrl": "https://docs.sim.ai/blocks/a2a",
-    "operations": [
-      {
-        "name": "Send Message",
-        "description": "Send a message to an external A2A-compatible agent."
-      },
-      {
-        "name": "Get Task",
-        "description": "Query the status of an existing A2A task."
-      },
-      {
-        "name": "Cancel Task",
-        "description": "Cancel a running A2A task."
-      },
-      {
-        "name": "Get Agent Card",
-        "description": "Fetch the Agent Card (discovery document) for an A2A agent."
-      },
-      {
-        "name": "Resubscribe",
-        "description": "Reconnect to an ongoing A2A task stream after connection interruption."
-      },
-      {
-        "name": "Set Push Notification",
-        "description": "Configure a webhook to receive task update notifications."
-      },
-      {
-        "name": "Get Push Notification",
-        "description": "Get the push notification webhook configuration for a task."
-      },
-      {
-        "name": "Delete Push Notification",
-        "description": "Delete the push notification webhook configuration for a task."
-      }
-    ],
-    "operationCount": 8,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "api-key",
-    "category": "tools",
-    "integrationTypes": ["developer-tools", "ai"],
-    "tags": ["agentic", "automation"]
-  },
   {
     "type": "agentmail",
     "slug": "agentmail",
@@ -205,7 +154,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["email", "communication"],
+    "integrationType": "email",
     "tags": ["messaging"]
   },
   {
@@ -312,7 +261,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["communication", "developer-tools"],
+    "integrationType": "communication",
     "tags": ["messaging", "automation"]
   },
   {
@@ -383,7 +332,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["productivity", "developer-tools"],
+    "integrationType": "productivity",
     "tags": ["automation"]
   },
   {
@@ -392,7 +341,7 @@
     "name": "Ahrefs",
     "description": "SEO analysis with Ahrefs",
     "longDescription": "Integrate Ahrefs SEO tools into your workflow. Analyze domain ratings, backlinks, organic keywords, top pages, and more. Requires an Ahrefs Enterprise plan with API access.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "AhrefsIcon",
     "docsUrl": "https://docs.ahrefs.com/docs/api/reference/introduction",
     "operations": [
@@ -434,7 +383,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["analytics", "search"],
+    "integrationType": "analytics",
     "tags": ["seo", "marketing", "data-analytics"]
   },
   {
@@ -443,7 +392,7 @@
     "name": "Airtable",
     "description": "Read, create, and update Airtable",
     "longDescription": "Integrates Airtable into the workflow. Can list bases, list tables (with schema), and create, get, list, or update records. Can also be used in trigger mode to trigger a workflow when an update is made to an Airtable table.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "AirtableIcon",
     "docsUrl": "https://docs.sim.ai/tools/airtable",
     "operations": [
@@ -491,7 +440,7 @@
     "triggerCount": 1,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["databases", "developer-tools", "productivity"],
+    "integrationType": "databases",
     "tags": ["spreadsheet", "automation"]
   },
   {
@@ -509,7 +458,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["search", "ai", "documents"],
+    "integrationType": "search",
     "tags": ["vector-search", "knowledge-base"]
   },
   {
@@ -588,7 +537,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["search", "ai", "documents"],
+    "integrationType": "search",
     "tags": ["vector-search", "knowledge-base"]
   },
   {
@@ -635,7 +584,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["databases", "developer-tools"],
+    "integrationType": "databases",
     "tags": ["cloud", "data-warehouse"]
   },
   {
@@ -678,7 +627,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["databases", "developer-tools"],
+    "integrationType": "databases",
     "tags": ["cloud", "data-warehouse"]
   },
   {
@@ -701,7 +650,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["developer-tools", "communication"],
+    "integrationType": "devops",
     "tags": ["cloud", "messaging", "automation"]
   },
   {
@@ -764,7 +713,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["analytics"],
+    "integrationType": "analytics",
     "tags": ["data-analytics", "marketing"]
   },
   {
@@ -773,7 +722,7 @@
     "name": "Apify",
     "description": "Run Apify actors and retrieve results",
     "longDescription": "Integrate Apify into your workflow. Run any Apify actor with custom input and retrieve results. Supports both synchronous and asynchronous execution with automatic dataset fetching.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "ApifyIcon",
     "docsUrl": "https://docs.sim.ai/tools/apify",
     "operations": [
@@ -791,7 +740,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["search", "analytics", "developer-tools"],
+    "integrationType": "search",
     "tags": ["web-scraping", "automation", "data-analytics"]
   },
   {
@@ -910,7 +859,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["sales"],
+    "integrationType": "sales",
     "tags": ["enrichment", "sales-engagement"]
   },
   {
@@ -919,7 +868,7 @@
     "name": "ArXiv",
     "description": "Search and retrieve academic papers from ArXiv",
     "longDescription": "Integrates ArXiv into the workflow. Can search for papers, get paper details, and get author papers. Does not require OAuth or an API key.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "ArxivIcon",
     "docsUrl": "https://docs.sim.ai/tools/arxiv",
     "operations": [
@@ -941,7 +890,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["search", "documents"],
+    "integrationType": "search",
     "tags": ["document-processing", "knowledge-base"]
   },
   {
@@ -950,7 +899,7 @@
     "name": "Asana",
     "description": "Interact with Asana",
     "longDescription": "Integrate Asana into the workflow. Can read, write, and update tasks.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "AsanaIcon",
     "docsUrl": "https://docs.sim.ai/tools/asana",
     "operations": [
@@ -984,7 +933,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["productivity", "customer-support", "developer-tools"],
+    "integrationType": "productivity",
     "tags": ["project-management", "ticketing", "automation"]
   },
   {
@@ -1146,7 +1095,7 @@
     "triggerCount": 6,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["hr"],
+    "integrationType": "hr",
     "tags": ["hiring"]
   },
   {
@@ -1197,7 +1146,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["analytics", "developer-tools"],
+    "integrationType": "analytics",
     "tags": ["cloud", "data-analytics"]
   },
   {
@@ -1491,7 +1440,7 @@
     "triggerCount": 22,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["crm", "sales"],
+    "integrationType": "sales",
     "tags": ["sales-engagement", "enrichment"]
   },
   {
@@ -1594,7 +1543,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["developer-tools", "security"],
+    "integrationType": "security",
     "tags": ["cloud", "identity"]
   },
   {
@@ -1661,7 +1610,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["security", "developer-tools"],
+    "integrationType": "security",
     "tags": ["cloud", "identity"]
   },
   {
@@ -1700,7 +1649,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["developer-tools", "security"],
+    "integrationType": "security",
     "tags": ["cloud", "secrets-management"]
   },
   {
@@ -1755,7 +1704,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["email", "analytics", "developer-tools"],
+    "integrationType": "email",
     "tags": ["cloud", "marketing"]
   },
   {
@@ -1790,7 +1739,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["security", "developer-tools"],
+    "integrationType": "security",
     "tags": ["cloud"]
   },
   {
@@ -1808,7 +1757,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["ai", "developer-tools", "documents"],
+    "integrationType": "ai",
     "tags": ["document-processing", "ocr", "cloud"]
   },
   {
@@ -1879,7 +1828,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["security"],
+    "integrationType": "security",
     "tags": ["identity", "microsoft-365"]
   },
   {
@@ -1958,7 +1907,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["file-storage", "developer-tools", "documents"],
+    "integrationType": "documents",
     "tags": ["cloud", "content-management", "e-signatures"]
   },
   {
@@ -1985,7 +1934,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["sales", "analytics"],
+    "integrationType": "sales",
     "tags": ["enrichment", "marketing"]
   },
   {
@@ -1994,7 +1943,7 @@
     "name": "Bright Data",
     "description": "Scrape websites, search engines, and extract structured data",
     "longDescription": "Integrate Bright Data into the workflow. Scrape any URL with Web Unlocker, search Google and other engines with SERP API, discover web content ranked by intent, or trigger pre-built scrapers for structured data extraction.",
-    "bgColor": "#FFFFFF",
+    "bgColor": "#0F4C81",
     "iconName": "BrightDataIcon",
     "docsUrl": "https://docs.sim.ai/tools/brightdata",
     "operations": [
@@ -2036,27 +1985,9 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["search", "developer-tools"],
+    "integrationType": "search",
     "tags": ["web-scraping", "automation"]
   },
-  {
-    "type": "browser_use",
-    "slug": "browser-use",
-    "name": "Browser Use",
-    "description": "Run browser automation tasks",
-    "longDescription": "Integrate Browser Use into the workflow. Can navigate the web and perform actions as if a real user was interacting with the browser.",
-    "bgColor": "#181C1E",
-    "iconName": "BrowserUseIcon",
-    "docsUrl": "https://docs.sim.ai/tools/browser_use",
-    "operations": [],
-    "operationCount": 0,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "api-key",
-    "category": "tools",
-    "integrationTypes": ["ai", "developer-tools", "search"],
-    "tags": ["web-scraping", "automation", "agentic"]
-  },
   {
     "type": "calcom",
     "slug": "cal-com",
@@ -2195,7 +2126,7 @@
     "triggerCount": 9,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["productivity", "communication"],
+    "integrationType": "productivity",
     "tags": ["scheduling", "calendar", "meeting"]
   },
   {
@@ -2263,50 +2194,16 @@
     "triggerCount": 4,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["productivity", "communication"],
+    "integrationType": "productivity",
     "tags": ["scheduling", "calendar", "meeting"]
   },
-  {
-    "type": "circleback",
-    "slug": "circleback",
-    "name": "Circleback",
-    "description": "AI-powered meeting notes and action items",
-    "longDescription": "Receive meeting notes, action items, transcripts, and recordings when meetings are processed. Circleback uses webhooks to push data to your workflows.",
-    "bgColor": "linear-gradient(180deg, #E0F7FA 0%, #FFFFFF 100%)",
-    "iconName": "CirclebackIcon",
-    "docsUrl": "https://docs.sim.ai/tools/circleback",
-    "operations": [],
-    "operationCount": 0,
-    "triggers": [
-      {
-        "id": "circleback_meeting_completed",
-        "name": "Circleback Meeting Completed",
-        "description": "Trigger workflow when a meeting is processed and ready in Circleback"
-      },
-      {
-        "id": "circleback_meeting_notes",
-        "name": "Circleback Meeting Notes Ready",
-        "description": "Trigger workflow when meeting notes and action items are ready"
-      },
-      {
-        "id": "circleback_webhook",
-        "name": "Circleback Webhook",
-        "description": "Generic webhook trigger for all Circleback events"
-      }
-    ],
-    "triggerCount": 3,
-    "authType": "none",
-    "category": "triggers",
-    "integrationTypes": ["ai", "communication", "developer-tools", "documents", "productivity"],
-    "tags": ["meeting", "note-taking", "automation"]
-  },
   {
     "type": "clay",
     "slug": "clay",
     "name": "Clay",
     "description": "Populate Clay workbook",
     "longDescription": "Integrate Clay into the workflow. Can populate a table with data.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "ClayIcon",
     "docsUrl": "https://docs.sim.ai/tools/clay",
     "operations": [],
@@ -2315,7 +2212,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["sales", "analytics"],
+    "integrationType": "sales",
     "tags": ["enrichment", "sales-engagement", "data-analytics"]
   },
   {
@@ -2378,7 +2275,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["security", "developer-tools"],
+    "integrationType": "security",
     "tags": ["identity", "automation"]
   },
   {
@@ -2449,7 +2346,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["developer-tools", "analytics"],
+    "integrationType": "devops",
     "tags": ["cloud", "monitoring"]
   },
   {
@@ -2496,7 +2393,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["developer-tools"],
+    "integrationType": "devops",
     "tags": ["cloud"]
   },
   {
@@ -2540,14 +2437,22 @@
       {
         "name": "Describe Alarms",
         "description": "List and filter CloudWatch alarms"
+      },
+      {
+        "name": "Mute Alarm",
+        "description": "Create a CloudWatch alarm mute rule that suppresses alarms for a fixed duration"
+      },
+      {
+        "name": "Unmute Alarm",
+        "description": "Delete a CloudWatch alarm mute rule, restoring alarm notifications"
       }
     ],
-    "operationCount": 8,
+    "operationCount": 10,
     "triggers": [],
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["analytics", "developer-tools"],
+    "integrationType": "observability",
     "tags": ["cloud", "monitoring"]
   },
   {
@@ -2556,7 +2461,7 @@
     "name": "Confluence",
     "description": "Interact with Confluence",
     "longDescription": "Integrate Confluence into the workflow. Can read, create, update, delete pages, manage comments, attachments, labels, and search content.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "ConfluenceIcon",
     "docsUrl": "https://docs.sim.ai/tools/confluence",
     "operations": [
@@ -2866,7 +2771,7 @@
     "triggerCount": 23,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["documents", "productivity", "search"],
+    "integrationType": "documents",
     "tags": ["knowledge-base", "content-management", "note-taking"]
   },
   {
@@ -2897,7 +2802,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["security", "analytics", "developer-tools"],
+    "integrationType": "security",
     "tags": ["identity", "monitoring"]
   },
   {
@@ -2952,7 +2857,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["developer-tools", "ai"],
+    "integrationType": "devops",
     "tags": ["agentic", "automation"]
   },
   {
@@ -3027,7 +2932,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["analytics", "developer-tools"],
+    "integrationType": "observability",
     "tags": ["data-analytics", "automation"]
   },
   {
@@ -3078,7 +2983,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["databases", "analytics", "developer-tools"],
+    "integrationType": "databases",
     "tags": ["data-warehouse", "data-analytics", "cloud"]
   },
   {
@@ -3145,7 +3050,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["analytics", "developer-tools"],
+    "integrationType": "observability",
     "tags": ["monitoring", "incident-management", "error-tracking"]
   },
   {
@@ -3180,7 +3085,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["developer-tools", "ai"],
+    "integrationType": "devops",
     "tags": ["agentic", "automation"]
   },
   {
@@ -3339,7 +3244,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["communication", "developer-tools"],
+    "integrationType": "communication",
     "tags": ["messaging", "webhooks", "automation"]
   },
   {
@@ -3390,7 +3295,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["documents"],
+    "integrationType": "documents",
     "tags": ["e-signatures", "document-processing"]
   },
   {
@@ -3449,7 +3354,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["file-storage", "developer-tools", "documents"],
+    "integrationType": "documents",
     "tags": ["cloud", "document-processing"]
   },
   {
@@ -3458,7 +3363,7 @@
     "name": "DSPy",
     "description": "Run predictions using self-hosted DSPy programs",
     "longDescription": "Integrate with your self-hosted DSPy programs for LLM-powered predictions. Supports Predict, Chain of Thought, and ReAct agents. DSPy is the framework for programming—not prompting—language models.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "DsPyIcon",
     "docsUrl": "https://docs.sim.ai/tools/dspy",
     "operations": [
@@ -3480,7 +3385,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["ai", "developer-tools"],
+    "integrationType": "ai",
     "tags": ["llm", "agentic", "automation"]
   },
   {
@@ -3527,7 +3432,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["developer-tools", "analytics"],
+    "integrationType": "devops",
     "tags": ["link-management", "marketing", "data-analytics"]
   },
   {
@@ -3545,7 +3450,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["search", "analytics"],
+    "integrationType": "search",
     "tags": ["web-scraping", "seo"]
   },
   {
@@ -3554,7 +3459,7 @@
     "name": "Elasticsearch",
     "description": "Search, index, and manage data in Elasticsearch",
     "longDescription": "Integrate Elasticsearch into workflows for powerful search, indexing, and data management. Supports document CRUD operations, advanced search queries, bulk operations, index management, and cluster monitoring. Works with both self-hosted and Elastic Cloud deployments.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "ElasticsearchIcon",
     "docsUrl": "https://docs.sim.ai/tools/elasticsearch",
     "operations": [
@@ -3616,7 +3521,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["databases", "ai", "analytics", "search"],
+    "integrationType": "databases",
     "tags": ["vector-search", "data-analytics"]
   },
   {
@@ -3634,7 +3539,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["ai"],
+    "integrationType": "ai",
     "tags": ["text-to-speech"]
   },
   {
@@ -3705,7 +3610,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["email", "developer-tools", "sales"],
+    "integrationType": "email",
     "tags": ["sales-engagement", "email-marketing", "automation"]
   },
   {
@@ -3723,7 +3628,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["ai", "search"],
+    "integrationType": "ai",
     "tags": ["llm", "vector-search"]
   },
   {
@@ -3858,7 +3763,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["sales", "analytics"],
+    "integrationType": "sales",
     "tags": ["enrichment", "data-analytics"]
   },
   {
@@ -3867,7 +3772,7 @@
     "name": "Evernote",
     "description": "Manage notes, notebooks, and tags in Evernote",
     "longDescription": "Integrate with Evernote to manage notes, notebooks, and tags. Create, read, update, copy, search, and delete notes. Create and list notebooks and tags.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "EvernoteIcon",
     "docsUrl": "https://docs.sim.ai/tools/evernote",
     "operations": [
@@ -3921,7 +3826,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["documents", "productivity", "search"],
+    "integrationType": "documents",
     "tags": ["note-taking", "knowledge-base"]
   },
   {
@@ -3960,7 +3865,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["search", "sales"],
+    "integrationType": "search",
     "tags": ["web-scraping", "enrichment"]
   },
   {
@@ -3978,7 +3883,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["ai", "documents"],
+    "integrationType": "ai",
     "tags": ["document-processing", "ocr"]
   },
   {
@@ -4028,44 +3933,9 @@
     "triggerCount": 2,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["analytics", "communication", "documents", "productivity"],
+    "integrationType": "analytics",
     "tags": ["meeting", "note-taking"]
   },
-  {
-    "type": "file_v4",
-    "slug": "file",
-    "name": "File",
-    "description": "Read, fetch, write, and append files",
-    "longDescription": "Read workspace files by picker or canonical ID, fetch and parse files from URLs with optional headers, write new workspace files, or append content to existing files.",
-    "bgColor": "#40916C",
-    "iconName": "DocumentIcon",
-    "docsUrl": "https://docs.sim.ai/tools/file",
-    "operations": [
-      {
-        "name": "Read",
-        "description": "Get a workspace file object from a selected file or canonical workspace file ID."
-      },
-      {
-        "name": "Fetch",
-        "description": "Parse a file from a URL with optional custom headers for authenticated downloads."
-      },
-      {
-        "name": "Write",
-        "description": "Create a new workspace file. If a file with the same name already exists, a numeric suffix is added (e.g., "
-      },
-      {
-        "name": "Append",
-        "description": "Append content to an existing workspace file. The file must already exist. Content is added to the end of the file."
-      }
-    ],
-    "operationCount": 4,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "none",
-    "category": "tools",
-    "integrationTypes": ["file-storage", "documents"],
-    "tags": ["document-processing"]
-  },
   {
     "type": "firecrawl",
     "slug": "firecrawl",
@@ -4110,7 +3980,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["search", "developer-tools"],
+    "integrationType": "search",
     "tags": ["web-scraping", "automation"]
   },
   {
@@ -4175,7 +4045,7 @@
     "triggerCount": 1,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["productivity", "ai", "communication", "documents"],
+    "integrationType": "productivity",
     "tags": ["meeting", "speech-to-text", "note-taking"]
   },
   {
@@ -4214,7 +4084,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["design", "documents"],
+    "integrationType": "marketing",
     "tags": ["document-processing", "content-management"]
   },
   {
@@ -4621,7 +4491,7 @@
     "triggerCount": 11,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["developer-tools"],
+    "integrationType": "devops",
     "tags": ["version-control", "ci-cd"]
   },
   {
@@ -4630,7 +4500,7 @@
     "name": "GitLab",
     "description": "Interact with GitLab projects, issues, merge requests, and pipelines",
     "longDescription": "Integrate GitLab into the workflow. Can manage projects, issues, merge requests, pipelines, and add comments. Supports all core GitLab DevOps operations.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GitLabIcon",
     "docsUrl": "https://docs.sim.ai/tools/gitlab",
     "operations": [
@@ -4716,7 +4586,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["developer-tools"],
+    "integrationType": "devops",
     "tags": ["version-control", "ci-cd"]
   },
   {
@@ -4725,7 +4595,7 @@
     "name": "Gmail",
     "description": "Send, read, search, and move Gmail messages or trigger workflows from Gmail events",
     "longDescription": "Integrate Gmail into the workflow. Can send, read, search, and move emails. Can be used in trigger mode to trigger a workflow when a new email is received.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GmailIcon",
     "docsUrl": "https://docs.sim.ai/tools/gmail",
     "operations": [
@@ -4793,7 +4663,7 @@
     "triggerCount": 1,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["email", "communication"],
+    "integrationType": "email",
     "tags": ["google-workspace", "messaging"]
   },
   {
@@ -4895,7 +4765,7 @@
     "triggerCount": 2,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["sales", "ai", "communication", "productivity"],
+    "integrationType": "sales",
     "tags": ["meeting", "sales-engagement", "speech-to-text"]
   },
   {
@@ -4904,7 +4774,7 @@
     "name": "Google Ads",
     "description": "Query campaigns, ad groups, and performance metrics",
     "longDescription": "Connect to Google Ads to list accessible accounts, list campaigns, view ad group details, get performance metrics, and run custom GAQL queries.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GoogleAdsIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_ads",
     "operations": [
@@ -4938,7 +4808,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["analytics"],
+    "integrationType": "analytics",
     "tags": ["marketing", "google-workspace", "data-analytics"]
   },
   {
@@ -4947,7 +4817,7 @@
     "name": "Google BigQuery",
     "description": "Query, list, and insert data in Google BigQuery",
     "longDescription": "Connect to Google BigQuery to run SQL queries, list datasets and tables, get table metadata, and insert rows.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GoogleBigQueryIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_bigquery",
     "operations": [
@@ -4977,7 +4847,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["databases", "analytics"],
+    "integrationType": "databases",
     "tags": ["data-warehouse", "google-workspace", "data-analytics"]
   },
   {
@@ -4986,7 +4856,7 @@
     "name": "Google Books",
     "description": "Search and retrieve book information",
     "longDescription": "Search for books using the Google Books API. Find volumes by title, author, ISBN, or keywords, and retrieve detailed information about specific books including descriptions, ratings, and publication details.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GoogleBooksIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_books",
     "operations": [
@@ -5004,7 +4874,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["search", "documents"],
+    "integrationType": "search",
     "tags": ["google-workspace", "knowledge-base", "content-management"]
   },
   {
@@ -5013,7 +4883,7 @@
     "name": "Google Calendar",
     "description": "Manage Google Calendar events",
     "longDescription": "Integrate Google Calendar into the workflow. Can create, read, update, and list calendar events.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GoogleCalendarIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_calendar",
     "operations": [
@@ -5069,7 +4939,7 @@
     "triggerCount": 1,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["productivity"],
+    "integrationType": "productivity",
     "tags": ["calendar", "scheduling", "google-workspace"]
   },
   {
@@ -5078,7 +4948,7 @@
     "name": "Google Contacts",
     "description": "Manage Google Contacts",
     "longDescription": "Integrate Google Contacts into the workflow. Can create, read, update, delete, list, and search contacts.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GoogleContactsIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_contacts",
     "operations": [
@@ -5112,7 +4982,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["productivity", "customer-support", "sales"],
+    "integrationType": "productivity",
     "tags": ["google-workspace", "customer-support", "enrichment"]
   },
   {
@@ -5121,7 +4991,7 @@
     "name": "Google Docs",
     "description": "Read, write, and create documents",
     "longDescription": "Integrate Google Docs into the workflow. Can read, write, and create documents.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GoogleDocsIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_docs",
     "operations": [
@@ -5143,7 +5013,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["documents"],
+    "integrationType": "documents",
     "tags": ["google-workspace", "document-processing", "content-management"]
   },
   {
@@ -5152,7 +5022,7 @@
     "name": "Google Drive",
     "description": "Manage files, folders, and permissions",
     "longDescription": "Integrate Google Drive into the workflow. Can create, upload, download, copy, move, delete, share files and manage permissions.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GoogleDriveIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_drive",
     "operations": [
@@ -5240,7 +5110,7 @@
     "triggerCount": 1,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["file-storage", "developer-tools", "documents"],
+    "integrationType": "documents",
     "tags": ["cloud", "google-workspace", "document-processing"]
   },
   {
@@ -5249,7 +5119,7 @@
     "name": "Google Forms",
     "description": "Manage Google Forms and responses",
     "longDescription": "Integrate Google Forms into your workflow. Read form structure, get responses, create forms, update content, and manage notification watches.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GoogleFormsIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_forms",
     "operations": [
@@ -5301,7 +5171,7 @@
     "triggerCount": 1,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["documents", "analytics", "productivity"],
+    "integrationType": "documents",
     "tags": ["google-workspace", "forms", "data-analytics"]
   },
   {
@@ -5384,7 +5254,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["communication", "security"],
+    "integrationType": "communication",
     "tags": ["google-workspace", "messaging", "identity"]
   },
   {
@@ -5393,7 +5263,7 @@
     "name": "Google Maps",
     "description": "Geocoding, directions, places, and distance calculations",
     "longDescription": "Integrate Google Maps Platform APIs into your workflow. Supports geocoding addresses to coordinates, reverse geocoding, getting directions between locations, calculating distance matrices, searching for places, retrieving place details, elevation data, and timezone information.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GoogleMapsIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_maps",
     "operations": [
@@ -5455,7 +5325,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["developer-tools", "sales"],
+    "integrationType": "search",
     "tags": ["google-workspace", "enrichment"]
   },
   {
@@ -5464,7 +5334,7 @@
     "name": "Google Meet",
     "description": "Create and manage Google Meet meetings",
     "longDescription": "Integrate Google Meet into your workflow. Create meeting spaces, get space details, end conferences, list conference records, and view participants.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GoogleMeetIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_meet",
     "operations": [
@@ -5498,7 +5368,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["communication", "productivity"],
+    "integrationType": "communication",
     "tags": ["meeting", "google-workspace", "scheduling"]
   },
   {
@@ -5507,7 +5377,7 @@
     "name": "Google PageSpeed",
     "description": "Analyze webpage performance with Google PageSpeed Insights",
     "longDescription": "Analyze web pages for performance, accessibility, SEO, and best practices using Google PageSpeed Insights API powered by Lighthouse.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GooglePagespeedIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_pagespeed",
     "operations": [],
@@ -5516,7 +5386,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["analytics", "developer-tools", "search"],
+    "integrationType": "analytics",
     "tags": ["google-workspace", "seo", "monitoring"]
   },
   {
@@ -5525,7 +5395,7 @@
     "name": "Google Search",
     "description": "Search the web",
     "longDescription": "Integrate Google Search into the workflow. Can search the web.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GoogleIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_search",
     "operations": [],
@@ -5534,7 +5404,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["search", "analytics"],
+    "integrationType": "search",
     "tags": ["google-workspace", "web-scraping", "seo"]
   },
   {
@@ -5543,7 +5413,7 @@
     "name": "Google Sheets",
     "description": "Read, write, and update data with sheet selection",
     "longDescription": "Integrate Google Sheets into the workflow with explicit sheet selection. Can read, write, append, update, clear data, create spreadsheets, get spreadsheet info, and copy sheets.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GoogleSheetsIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_sheets",
     "operations": [
@@ -5603,7 +5473,7 @@
     "triggerCount": 1,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["documents", "analytics", "databases", "productivity"],
+    "integrationType": "documents",
     "tags": ["spreadsheet", "google-workspace", "data-analytics"]
   },
   {
@@ -5612,7 +5482,7 @@
     "name": "Google Slides",
     "description": "Read, write, and create presentations",
     "longDescription": "Integrate Google Slides into the workflow. Can read, write, create presentations, replace text, add slides, add images, get thumbnails, get page details, delete objects, duplicate objects, reorder slides, create tables, create shapes, and insert text.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GoogleSlidesIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_slides",
     "operations": [
@@ -5678,7 +5548,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["documents"],
+    "integrationType": "documents",
     "tags": ["google-workspace", "document-processing", "content-management"]
   },
   {
@@ -5687,7 +5557,7 @@
     "name": "Google Tasks",
     "description": "Manage Google Tasks",
     "longDescription": "Integrate Google Tasks into your workflow. Create, read, update, delete, and list tasks and task lists.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GoogleTasksIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_tasks",
     "operations": [
@@ -5721,7 +5591,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["productivity"],
+    "integrationType": "productivity",
     "tags": ["google-workspace", "project-management", "scheduling"]
   },
   {
@@ -5730,7 +5600,7 @@
     "name": "Google Translate",
     "description": "Translate text using Google Cloud Translation",
     "longDescription": "Translate and detect languages using the Google Cloud Translation API. Supports auto-detection of the source language.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GoogleTranslateIcon",
     "docsUrl": "https://docs.sim.ai/tools/google_translate",
     "operations": [
@@ -5748,7 +5618,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["ai", "developer-tools", "documents"],
+    "integrationType": "ai",
     "tags": ["google-workspace", "content-management", "automation"]
   },
   {
@@ -5795,7 +5665,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["security", "documents"],
+    "integrationType": "security",
     "tags": ["google-workspace", "secrets-management", "document-processing"]
   },
   {
@@ -5804,7 +5674,7 @@
     "name": "Grafana",
     "description": "Interact with Grafana dashboards, alerts, and annotations",
     "longDescription": "Integrate Grafana into workflows. Manage dashboards, alerts, annotations, data sources, folders, and monitor health status.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "GrafanaIcon",
     "docsUrl": "https://docs.sim.ai/tools/grafana",
     "operations": [
@@ -5890,7 +5760,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["analytics", "developer-tools"],
+    "integrationType": "observability",
     "tags": ["monitoring", "data-analytics"]
   },
   {
@@ -5986,7 +5856,7 @@
     "triggerCount": 8,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["productivity", "communication", "documents"],
+    "integrationType": "productivity",
     "tags": ["meeting", "note-taking"]
   },
   {
@@ -6013,7 +5883,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["productivity", "communication", "documents"],
+    "integrationType": "productivity",
     "tags": ["meeting", "note-taking"]
   },
   {
@@ -6117,7 +5987,7 @@
     "triggerCount": 8,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["hr"],
+    "integrationType": "hr",
     "tags": ["hiring"]
   },
   {
@@ -6126,7 +5996,7 @@
     "name": "Greptile",
     "description": "AI-powered codebase search and Q&A",
     "longDescription": "Query and search codebases using natural language with Greptile. Get AI-generated answers about your code, find relevant files, and understand complex codebases.",
-    "bgColor": "#e5e5e5",
+    "bgColor": "#FFFFFF",
     "iconName": "GreptileIcon",
     "docsUrl": "https://docs.sim.ai/tools/greptile",
     "operations": [
@@ -6152,7 +6022,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["developer-tools", "documents", "search"],
+    "integrationType": "devops",
     "tags": ["version-control", "knowledge-base"]
   },
   {
@@ -6235,7 +6105,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["analytics", "databases"],
+    "integrationType": "analytics",
     "tags": ["data-warehouse", "data-analytics"]
   },
   {
@@ -6506,7 +6376,7 @@
     "triggerCount": 27,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["crm", "analytics", "customer-support", "sales"],
+    "integrationType": "sales",
     "tags": ["marketing", "sales-engagement", "customer-support"]
   },
   {
@@ -6524,7 +6394,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["ai"],
+    "integrationType": "ai",
     "tags": ["llm", "agentic"]
   },
   {
@@ -6533,7 +6403,7 @@
     "name": "Hunter.io",
     "description": "Find and verify professional email addresses",
     "longDescription": "Integrate Hunter into the workflow. Can search domains, find email addresses, verify email addresses, discover companies, find companies, and count email addresses.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "HunterIOIcon",
     "docsUrl": "https://docs.sim.ai/tools/hunter",
     "operations": [
@@ -6567,58 +6437,16 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["sales"],
+    "integrationType": "sales",
     "tags": ["enrichment", "sales-engagement"]
   },
-  {
-    "type": "image_generator",
-    "slug": "image-generator",
-    "name": "Image Generator",
-    "description": "Generate images",
-    "longDescription": "Integrate Image Generator into the workflow. Can generate images using DALL-E 3, GPT Image 1, or GPT Image 2.",
-    "bgColor": "#4D5FFF",
-    "iconName": "ImageIcon",
-    "docsUrl": "https://docs.sim.ai/tools/image_generator",
-    "operations": [],
-    "operationCount": 0,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "api-key",
-    "category": "tools",
-    "integrationTypes": ["ai", "design"],
-    "tags": ["image-generation", "llm"]
-  },
-  {
-    "type": "imap",
-    "slug": "imap-email",
-    "name": "IMAP Email",
-    "description": "Trigger workflows when new emails arrive via IMAP (works with any email provider)",
-    "longDescription": "Connect to any email server via IMAP protocol to trigger workflows when new emails are received. Supports Gmail, Outlook, Yahoo, and any other IMAP-compatible email provider.",
-    "bgColor": "#6366F1",
-    "iconName": "MailServerIcon",
-    "docsUrl": "https://docs.sim.ai/tools/imap",
-    "operations": [],
-    "operationCount": 0,
-    "triggers": [
-      {
-        "id": "imap_poller",
-        "name": "IMAP Email Trigger",
-        "description": "Triggers when new emails are received via IMAP (works with any email provider)"
-      }
-    ],
-    "triggerCount": 1,
-    "authType": "none",
-    "category": "triggers",
-    "integrationTypes": ["email", "communication", "developer-tools"],
-    "tags": ["messaging", "automation"]
-  },
   {
     "type": "incidentio",
     "slug": "incidentio",
     "name": "incidentio",
     "description": "Manage incidents with incident.io",
     "longDescription": "Integrate incident.io into the workflow. Manage incidents, actions, follow-ups, workflows, schedules, escalations, custom fields, and more.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "IncidentioIcon",
     "docsUrl": "https://docs.sim.ai/tools/incidentio",
     "operations": [
@@ -6804,7 +6632,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["developer-tools", "analytics"],
+    "integrationType": "observability",
     "tags": ["incident-management", "monitoring"]
   },
   {
@@ -6843,7 +6671,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["security"],
+    "integrationType": "security",
     "tags": ["secrets-management"]
   },
   {
@@ -6852,7 +6680,7 @@
     "name": "Intercom",
     "description": "Manage contacts, companies, conversations, tickets, and messages in Intercom",
     "longDescription": "Integrate Intercom into the workflow. Can create, get, update, list, search, and delete contacts; create, get, and list companies; get, list, reply, and search conversations; create and get tickets; and create messages.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "IntercomIcon",
     "docsUrl": "https://docs.sim.ai/tools/intercom",
     "operations": [
@@ -7017,7 +6845,7 @@
     "triggerCount": 6,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["customer-support", "communication"],
+    "integrationType": "support",
     "tags": ["customer-support", "messaging"]
   },
   {
@@ -7044,7 +6872,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["search", "documents"],
+    "integrationType": "search",
     "tags": ["web-scraping", "knowledge-base"]
   },
   {
@@ -7053,7 +6881,7 @@
     "name": "Jira",
     "description": "Interact with Jira",
     "longDescription": "Integrate Jira into the workflow. Can read, write, and update issues. Can also trigger workflows based on Jira webhook events.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "JiraIcon",
     "docsUrl": "https://docs.sim.ai/tools/jira",
     "operations": [
@@ -7239,7 +7067,7 @@
     "triggerCount": 15,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["productivity", "customer-support"],
+    "integrationType": "productivity",
     "tags": ["project-management", "ticketing"]
   },
   {
@@ -7248,7 +7076,7 @@
     "name": "Jira Service Management",
     "description": "Interact with Jira Service Management",
     "longDescription": "Integrate with Jira Service Management for IT service management. Create and manage service requests, handle customers and organizations, track SLAs, and manage queues.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "JiraServiceManagementIcon",
     "docsUrl": "https://docs.sim.ai/tools/jira-service-management",
     "operations": [
@@ -7420,7 +7248,7 @@
     "triggerCount": 5,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["customer-support", "developer-tools", "productivity"],
+    "integrationType": "support",
     "tags": ["customer-support", "ticketing", "incident-management"]
   },
   {
@@ -7507,7 +7335,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["analytics"],
+    "integrationType": "analytics",
     "tags": ["prediction-markets", "data-analytics"]
   },
   {
@@ -7546,82 +7374,9 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["security"],
+    "integrationType": "security",
     "tags": ["identity"]
   },
-  {
-    "type": "knowledge",
-    "slug": "knowledge",
-    "name": "Knowledge",
-    "description": "Use vector search",
-    "longDescription": "Integrate Knowledge into the workflow. Perform full CRUD operations on documents, chunks, and tags.",
-    "bgColor": "#00B0B0",
-    "iconName": "PackageSearchIcon",
-    "docsUrl": "https://docs.sim.ai/blocks/knowledge",
-    "operations": [
-      {
-        "name": "Search",
-        "description": "Search for similar content in a knowledge base using vector similarity"
-      },
-      {
-        "name": "List Documents",
-        "description": "List documents in a knowledge base with optional filtering, search, and pagination"
-      },
-      {
-        "name": "Get Document",
-        "description": "Get full details of a single document including tags, connector metadata, and processing status"
-      },
-      {
-        "name": "Create Document",
-        "description": "Create a new document in a knowledge base"
-      },
-      {
-        "name": "Upsert Document",
-        "description": "Create or update a document in a knowledge base. If a document with the given ID or filename already exists, it will be replaced with the new content."
-      },
-      {
-        "name": "Delete Document",
-        "description": "Delete a document from a knowledge base"
-      },
-      {
-        "name": "List Chunks",
-        "description": "List chunks for a document in a knowledge base with optional filtering and pagination"
-      },
-      {
-        "name": "Upload Chunk",
-        "description": "Upload a new chunk to a document in a knowledge base"
-      },
-      {
-        "name": "Update Chunk",
-        "description": "Update the content or enabled status of a chunk in a knowledge base"
-      },
-      {
-        "name": "Delete Chunk",
-        "description": "Delete a chunk from a document in a knowledge base"
-      },
-      {
-        "name": "List Tags",
-        "description": "List all tag definitions for a knowledge base"
-      },
-      {
-        "name": "List Connectors",
-        "description": "List all connectors for a knowledge base, showing sync status, type, and document counts"
-      },
-      {
-        "name": "Get Connector",
-        "description": "Get detailed connector information including recent sync logs for monitoring sync health"
-      },
-      {
-        "name": "Trigger Sync",
-        "description": "Trigger a manual sync for a knowledge base connector"
-      }
-    ],
-    "operationCount": 14,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "api-key",
-    "category": "blocks"
-  },
   {
     "type": "langsmith",
     "slug": "langsmith",
@@ -7646,7 +7401,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["developer-tools", "ai", "analytics"],
+    "integrationType": "observability",
     "tags": ["monitoring", "llm", "data-analytics"]
   },
   {
@@ -7713,7 +7468,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["developer-tools"],
+    "integrationType": "observability",
     "tags": ["feature-flags", "ci-cd"]
   },
   {
@@ -7790,7 +7545,7 @@
     "triggerCount": 9,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["email", "developer-tools", "sales"],
+    "integrationType": "email",
     "tags": ["sales-engagement", "email-marketing", "automation"]
   },
   {
@@ -8197,7 +7952,7 @@
     "triggerCount": 15,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["productivity", "customer-support"],
+    "integrationType": "productivity",
     "tags": ["project-management", "ticketing"]
   },
   {
@@ -8224,7 +7979,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["sales", "analytics"],
+    "integrationType": "sales",
     "tags": ["marketing", "sales-engagement", "enrichment"]
   },
   {
@@ -8242,7 +7997,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["search", "sales"],
+    "integrationType": "search",
     "tags": ["web-scraping", "enrichment"]
   },
   {
@@ -8301,7 +8056,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["email", "analytics", "developer-tools"],
+    "integrationType": "email",
     "tags": ["email-marketing", "marketing", "automation"]
   },
   {
@@ -8344,7 +8099,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["productivity"],
+    "integrationType": "productivity",
     "tags": ["events", "calendar", "scheduling"]
   },
   {
@@ -8655,7 +8410,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["email", "analytics", "developer-tools"],
+    "integrationType": "email",
     "tags": ["email-marketing", "marketing", "automation"]
   },
   {
@@ -8664,7 +8419,7 @@
     "name": "Mailgun",
     "description": "Send emails and manage mailing lists with Mailgun",
     "longDescription": "Integrate Mailgun into your workflow. Send transactional emails, manage mailing lists and members, view domain information, and track email events. Supports text and HTML emails, tags for tracking, and comprehensive list management.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "MailgunIcon",
     "docsUrl": "https://docs.sim.ai/tools/mailgun",
     "operations": [
@@ -8706,7 +8461,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["email", "communication"],
+    "integrationType": "email",
     "tags": ["messaging", "email-marketing"]
   },
   {
@@ -8737,49 +8492,16 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["ai", "documents", "search"],
+    "integrationType": "ai",
     "tags": ["llm", "knowledge-base", "agentic"]
   },
-  {
-    "type": "memory",
-    "slug": "memory",
-    "name": "Memory",
-    "description": "Add memory store",
-    "longDescription": "Integrate Memory into the workflow. Can add, get a memory, get all memories, and delete memories.",
-    "bgColor": "#F64F9E",
-    "iconName": "BrainIcon",
-    "docsUrl": "https://docs.sim.ai/tools/memory",
-    "operations": [
-      {
-        "name": "Add Memory",
-        "description": "Add a new memory to the database or append to existing memory with the same ID."
-      },
-      {
-        "name": "Get All Memories",
-        "description": "Retrieve all memories from the database"
-      },
-      {
-        "name": "Get Memory",
-        "description": "Retrieve memory by conversationId. Returns matching memories."
-      },
-      {
-        "name": "Delete Memory",
-        "description": "Delete memories by conversationId."
-      }
-    ],
-    "operationCount": 4,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "none",
-    "category": "blocks"
-  },
   {
     "type": "microsoft_dataverse",
     "slug": "microsoft-dataverse",
     "name": "Microsoft Dataverse",
     "description": "Manage records in Microsoft Dataverse tables",
     "longDescription": "Integrate Microsoft Dataverse into your workflow. Create, read, update, delete, upsert, associate, query, search, and execute actions and functions against Dataverse tables using the Web API. Supports bulk operations, FetchXML, file uploads, and relevance search. Works with Dynamics 365, Power Platform, and custom Dataverse environments.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "MicrosoftDataverseIcon",
     "docsUrl": "https://docs.sim.ai/tools/microsoft_dataverse",
     "operations": [
@@ -8857,7 +8579,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["databases", "developer-tools"],
+    "integrationType": "databases",
     "tags": ["microsoft-365", "data-warehouse", "cloud"]
   },
   {
@@ -8866,7 +8588,7 @@
     "name": "Microsoft Excel",
     "description": "Read and write data with sheet selection",
     "longDescription": "Integrate Microsoft Excel into the workflow with explicit sheet selection. Can read and write data in specific sheets.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "MicrosoftExcelIcon",
     "docsUrl": "https://docs.sim.ai/tools/microsoft_excel",
     "operations": [
@@ -8884,7 +8606,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["documents", "databases", "productivity"],
+    "integrationType": "documents",
     "tags": ["spreadsheet", "microsoft-365"]
   },
   {
@@ -8893,7 +8615,7 @@
     "name": "Microsoft Planner",
     "description": "Manage tasks, plans, and buckets in Microsoft Planner",
     "longDescription": "Integrate Microsoft Planner into the workflow. Manage tasks, plans, buckets, and task details including checklists and references.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "MicrosoftPlannerIcon",
     "docsUrl": "https://docs.sim.ai/tools/microsoft_planner",
     "operations": [
@@ -8955,7 +8677,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["productivity", "customer-support"],
+    "integrationType": "productivity",
     "tags": ["project-management", "microsoft-365", "ticketing"]
   },
   {
@@ -8964,7 +8686,7 @@
     "name": "Microsoft Teams",
     "description": "Manage messages, reactions, and members in Teams",
     "longDescription": "Integrate Microsoft Teams into the workflow. Read, write, update, and delete chat and channel messages. Reply to messages, add reactions, and list team/channel members. Can be used in trigger mode to trigger a workflow when a message is sent to a chat or channel. To mention users in messages, wrap their name in `<at>` tags: `<at>userName</at>`",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "MicrosoftTeamsIcon",
     "docsUrl": "https://docs.sim.ai/tools/microsoft_teams",
     "operations": [
@@ -9036,7 +8758,7 @@
     "triggerCount": 1,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["communication"],
+    "integrationType": "communication",
     "tags": ["messaging", "microsoft-365"]
   },
   {
@@ -9054,7 +8776,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["ai", "documents"],
+    "integrationType": "ai",
     "tags": ["document-processing", "ocr"]
   },
   {
@@ -9171,7 +8893,7 @@
     "triggerCount": 9,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["productivity"],
+    "integrationType": "productivity",
     "tags": ["project-management"]
   },
   {
@@ -9180,7 +8902,7 @@
     "name": "MongoDB",
     "description": "Connect to MongoDB database",
     "longDescription": "Integrate MongoDB into the workflow. Can find, insert, update, delete, and aggregate data.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "MongoDBIcon",
     "docsUrl": "https://docs.sim.ai/tools/mongodb",
     "operations": [
@@ -9214,99 +8936,9 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["databases", "developer-tools"],
+    "integrationType": "databases",
     "tags": ["data-warehouse", "cloud"]
   },
-  {
-    "type": "mysql",
-    "slug": "mysql",
-    "name": "MySQL",
-    "description": "Connect to MySQL database",
-    "longDescription": "Integrate MySQL into the workflow. Can query, insert, update, delete, and execute raw SQL.",
-    "bgColor": "#E0E0E0",
-    "iconName": "MySQLIcon",
-    "docsUrl": "https://docs.sim.ai/tools/mysql",
-    "operations": [
-      {
-        "name": "Query (SELECT)",
-        "description": "Execute SELECT query on MySQL database"
-      },
-      {
-        "name": "Insert Data",
-        "description": "Insert new record into MySQL database"
-      },
-      {
-        "name": "Update Data",
-        "description": "Update existing records in MySQL database"
-      },
-      {
-        "name": "Delete Data",
-        "description": "Delete records from MySQL database"
-      },
-      {
-        "name": "Execute Raw SQL",
-        "description": "Execute raw SQL query on MySQL database"
-      },
-      {
-        "name": "Introspect Schema",
-        "description": "Introspect MySQL database schema to retrieve table structures, columns, and relationships"
-      }
-    ],
-    "operationCount": 6,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "none",
-    "category": "tools",
-    "integrationTypes": ["databases", "analytics"],
-    "tags": ["data-warehouse", "data-analytics"]
-  },
-  {
-    "type": "neo4j",
-    "slug": "neo4j",
-    "name": "Neo4j",
-    "description": "Connect to Neo4j graph database",
-    "longDescription": "Integrate Neo4j graph database into the workflow. Can query, create, merge, update, and delete nodes and relationships.",
-    "bgColor": "#FFFFFF",
-    "iconName": "Neo4jIcon",
-    "docsUrl": "https://docs.sim.ai/tools/neo4j",
-    "operations": [
-      {
-        "name": "Query (MATCH)",
-        "description": "Execute MATCH queries to read nodes and relationships from Neo4j graph database. For best performance and to prevent large result sets, include LIMIT in your query (e.g., "
-      },
-      {
-        "name": "Create Nodes/Relationships",
-        "description": "Execute CREATE statements to add new nodes and relationships to Neo4j graph database"
-      },
-      {
-        "name": "Merge (Find or Create)",
-        "description": "Execute MERGE statements to find or create nodes and relationships in Neo4j (upsert operation)"
-      },
-      {
-        "name": "Update Properties (SET)",
-        "description": "Execute SET statements to update properties of existing nodes and relationships in Neo4j"
-      },
-      {
-        "name": "Delete Nodes/Relationships",
-        "description": "Execute DELETE or DETACH DELETE statements to remove nodes and relationships from Neo4j"
-      },
-      {
-        "name": "Execute Cypher",
-        "description": "Execute arbitrary Cypher queries on Neo4j graph database for complex operations"
-      },
-      {
-        "name": "Introspect Schema",
-        "description": "Introspect a Neo4j database to discover its schema including node labels, relationship types, properties, constraints, and indexes."
-      }
-    ],
-    "operationCount": 7,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "none",
-    "category": "tools",
-    "integrationTypes": ["databases", "analytics"],
-    "tags": ["data-warehouse", "data-analytics"]
-  },
   {
     "type": "notion_v2",
     "slug": "notion",
@@ -9368,7 +9000,7 @@
     "triggerCount": 9,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["documents", "productivity", "search"],
+    "integrationType": "documents",
     "tags": ["note-taking", "knowledge-base", "content-management"]
   },
   {
@@ -9447,7 +9079,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["documents", "productivity", "search"],
+    "integrationType": "documents",
     "tags": ["note-taking", "knowledge-base"]
   },
   {
@@ -9538,7 +9170,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["security", "developer-tools"],
+    "integrationType": "security",
     "tags": ["identity", "automation"]
   },
   {
@@ -9547,7 +9179,7 @@
     "name": "OneDrive",
     "description": "Create, upload, download, list, and delete files",
     "longDescription": "Integrate OneDrive into the workflow. Can create text and Excel files, upload files, download files, list files, and delete files or folders.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "MicrosoftOneDriveIcon",
     "docsUrl": "https://docs.sim.ai/tools/onedrive",
     "operations": [
@@ -9581,7 +9213,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["file-storage", "developer-tools", "documents"],
+    "integrationType": "documents",
     "tags": ["microsoft-365", "cloud", "document-processing"]
   },
   {
@@ -9590,7 +9222,7 @@
     "name": "Outlook",
     "description": "Send, read, draft, forward, and move Outlook email messages",
     "longDescription": "Integrate Outlook into the workflow. Can read, draft, send, forward, and move email messages. Can be used in trigger mode to trigger a workflow when a new email is received.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "OutlookIcon",
     "docsUrl": "https://docs.sim.ai/tools/outlook",
     "operations": [
@@ -9642,7 +9274,7 @@
     "triggerCount": 1,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["email", "communication", "developer-tools"],
+    "integrationType": "email",
     "tags": ["microsoft-365", "messaging", "automation"]
   },
   {
@@ -9685,7 +9317,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["developer-tools", "analytics"],
+    "integrationType": "observability",
     "tags": ["incident-management", "monitoring"]
   },
   {
@@ -9694,7 +9326,7 @@
     "name": "Parallel AI",
     "description": "Web research with Parallel AI",
     "longDescription": "Integrate Parallel AI into the workflow. Can search the web, extract information from URLs, and conduct deep research.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "ParallelIcon",
     "docsUrl": "https://docs.sim.ai/tools/parallel-ai",
     "operations": [
@@ -9716,7 +9348,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["search", "ai"],
+    "integrationType": "search",
     "tags": ["web-scraping", "llm", "agentic"]
   },
   {
@@ -9779,7 +9411,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["sales"],
+    "integrationType": "sales",
     "tags": ["enrichment"]
   },
   {
@@ -9806,7 +9438,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["ai", "search"],
+    "integrationType": "ai",
     "tags": ["llm", "web-scraping", "agentic"]
   },
   {
@@ -9845,7 +9477,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["databases", "ai", "documents", "search"],
+    "integrationType": "databases",
     "tags": ["vector-search", "knowledge-base"]
   },
   {
@@ -9936,7 +9568,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["crm", "productivity", "sales"],
+    "integrationType": "sales",
     "tags": ["sales-engagement", "project-management"]
   },
   {
@@ -10035,59 +9667,16 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["analytics"],
+    "integrationType": "analytics",
     "tags": ["prediction-markets", "data-analytics"]
   },
-  {
-    "type": "postgresql",
-    "slug": "postgresql",
-    "name": "PostgreSQL",
-    "description": "Connect to PostgreSQL database",
-    "longDescription": "Integrate PostgreSQL into the workflow. Can query, insert, update, delete, and execute raw SQL.",
-    "bgColor": "#336791",
-    "iconName": "PostgresIcon",
-    "docsUrl": "https://docs.sim.ai/tools/postgresql",
-    "operations": [
-      {
-        "name": "Query (SELECT)",
-        "description": "Execute a SELECT query on PostgreSQL database"
-      },
-      {
-        "name": "Insert Data",
-        "description": "Insert data into PostgreSQL database"
-      },
-      {
-        "name": "Update Data",
-        "description": "Update data in PostgreSQL database"
-      },
-      {
-        "name": "Delete Data",
-        "description": "Delete data from PostgreSQL database"
-      },
-      {
-        "name": "Execute Raw SQL",
-        "description": "Execute raw SQL query on PostgreSQL database"
-      },
-      {
-        "name": "Introspect Schema",
-        "description": "Introspect PostgreSQL database schema to retrieve table structures, columns, and relationships"
-      }
-    ],
-    "operationCount": 6,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "none",
-    "category": "tools",
-    "integrationTypes": ["databases", "analytics"],
-    "tags": ["data-warehouse", "data-analytics"]
-  },
   {
     "type": "posthog",
     "slug": "posthog",
     "name": "PostHog",
     "description": "Product analytics and feature management",
     "longDescription": "Integrate PostHog into your workflow. Track events, manage feature flags, analyze user behavior, run experiments, create surveys, and access session recordings.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "PosthogIcon",
     "docsUrl": "https://docs.sim.ai/tools/posthog",
     "operations": [
@@ -10269,7 +9858,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["analytics", "developer-tools"],
+    "integrationType": "analytics",
     "tags": ["data-analytics", "monitoring"]
   },
   {
@@ -10384,7 +9973,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["analytics", "search"],
+    "integrationType": "analytics",
     "tags": ["seo", "data-analytics"]
   },
   {
@@ -10393,7 +9982,7 @@
     "name": "Pulse",
     "description": "Extract text from documents using Pulse OCR",
     "longDescription": "Integrate Pulse into the workflow. Extract text from PDF documents, images, and Office files via upload or file references.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "PulseIcon",
     "docsUrl": "https://docs.sim.ai/tools/pulse",
     "operations": [],
@@ -10402,7 +9991,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["ai", "documents"],
+    "integrationType": "ai",
     "tags": ["document-processing", "ocr"]
   },
   {
@@ -10433,7 +10022,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["databases", "ai", "documents", "search"],
+    "integrationType": "databases",
     "tags": ["vector-search", "knowledge-base"]
   },
   {
@@ -10464,7 +10053,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["design", "ai"],
+    "integrationType": "marketing",
     "tags": ["image-generation"]
   },
   {
@@ -10551,7 +10140,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["communication", "documents", "search"],
+    "integrationType": "communication",
     "tags": ["content-management", "web-scraping"]
   },
   {
@@ -10658,7 +10247,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["databases", "developer-tools"],
+    "integrationType": "databases",
     "tags": ["cloud", "data-warehouse"]
   },
   {
@@ -10676,7 +10265,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["ai", "documents"],
+    "integrationType": "ai",
     "tags": ["document-processing", "ocr"]
   },
   {
@@ -10768,7 +10357,7 @@
     "triggerCount": 8,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["email", "communication"],
+    "integrationType": "email",
     "tags": ["email-marketing", "messaging"]
   },
   {
@@ -10827,7 +10416,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["ecommerce"],
+    "integrationType": "commerce",
     "tags": ["payments", "subscriptions"]
   },
   {
@@ -11190,7 +10779,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["hr"],
+    "integrationType": "hr",
     "tags": ["hiring"]
   },
   {
@@ -11317,7 +10906,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["developer-tools", "analytics"],
+    "integrationType": "observability",
     "tags": ["incident-management", "monitoring"]
   },
   {
@@ -11356,7 +10945,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["file-storage", "databases", "developer-tools"],
+    "integrationType": "documents",
     "tags": ["cloud", "data-warehouse"]
   },
   {
@@ -11365,7 +10954,7 @@
     "name": "Salesforce",
     "description": "Interact with Salesforce CRM",
     "longDescription": "Integrate Salesforce into your workflow. Manage accounts, contacts, leads, opportunities, cases, and tasks with powerful automation capabilities.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "SalesforceIcon",
     "docsUrl": "https://docs.sim.ai/tools/salesforce",
     "operations": [
@@ -11546,7 +11135,7 @@
     "triggerCount": 6,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["crm", "customer-support", "sales"],
+    "integrationType": "sales",
     "tags": ["sales-engagement", "customer-support"]
   },
   {
@@ -11845,7 +11434,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["other", "developer-tools"],
+    "integrationType": "productivity",
     "tags": ["automation"]
   },
   {
@@ -12016,27 +11605,9 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["other", "developer-tools"],
+    "integrationType": "hr",
     "tags": ["automation"]
   },
-  {
-    "type": "search",
-    "slug": "search",
-    "name": "Search",
-    "description": "Search the web ($0.01 per search)",
-    "longDescription": "Search the web using the Search tool. Each search costs $0.01 per query.",
-    "bgColor": "#3B82F6",
-    "iconName": "SearchIcon",
-    "docsUrl": "https://docs.sim.ai/tools/search",
-    "operations": [],
-    "operationCount": 0,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "none",
-    "category": "tools",
-    "integrationTypes": ["search", "analytics"],
-    "tags": ["web-scraping", "seo"]
-  },
   {
     "type": "sendgrid",
     "slug": "sendgrid",
@@ -12117,7 +11688,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["email", "communication"],
+    "integrationType": "email",
     "tags": ["email-marketing", "messaging"]
   },
   {
@@ -12126,7 +11697,7 @@
     "name": "Sentry",
     "description": "Manage Sentry issues, projects, events, and releases",
     "longDescription": "Integrate Sentry into the workflow. Monitor issues, manage projects, track events, and coordinate releases across your applications.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "SentryIcon",
     "docsUrl": "https://docs.sim.ai/tools/sentry",
     "operations": [
@@ -12184,7 +11755,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["developer-tools", "analytics"],
+    "integrationType": "observability",
     "tags": ["error-tracking", "monitoring"]
   },
   {
@@ -12202,7 +11773,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["search", "analytics"],
+    "integrationType": "search",
     "tags": ["web-scraping", "seo"]
   },
   {
@@ -12263,59 +11834,16 @@
     "triggerCount": 5,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["customer-support", "developer-tools", "productivity"],
+    "integrationType": "support",
     "tags": ["customer-support", "ticketing", "incident-management"]
   },
-  {
-    "type": "sftp",
-    "slug": "sftp",
-    "name": "SFTP",
-    "description": "Transfer files via SFTP (SSH File Transfer Protocol)",
-    "longDescription": "Upload, download, list, and manage files on remote servers via SFTP. Supports both password and private key authentication for secure file transfers.",
-    "bgColor": "#2D3748",
-    "iconName": "SftpIcon",
-    "docsUrl": "https://docs.sim.ai/tools/sftp",
-    "operations": [
-      {
-        "name": "Upload Files",
-        "description": "Upload files to a remote SFTP server"
-      },
-      {
-        "name": "Create File",
-        "description": ""
-      },
-      {
-        "name": "Download File",
-        "description": "Download a file from a remote SFTP server"
-      },
-      {
-        "name": "List Directory",
-        "description": "List files and directories on a remote SFTP server"
-      },
-      {
-        "name": "Delete File/Directory",
-        "description": "Delete a file or directory on a remote SFTP server"
-      },
-      {
-        "name": "Create Directory",
-        "description": "Create a directory on a remote SFTP server"
-      }
-    ],
-    "operationCount": 6,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "none",
-    "category": "tools",
-    "integrationTypes": ["file-storage", "developer-tools"],
-    "tags": ["cloud", "automation"]
-  },
   {
     "type": "sharepoint_v2",
     "slug": "sharepoint",
     "name": "SharePoint",
     "description": "Work with pages and lists",
     "longDescription": "Integrate SharePoint into the workflow. Read/create pages, list sites, and work with lists (read, create, update items). Requires OAuth.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "MicrosoftSharepointIcon",
     "docsUrl": "https://docs.sim.ai/tools/sharepoint",
     "operations": [
@@ -12357,7 +11885,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["documents"],
+    "integrationType": "documents",
     "tags": ["microsoft-365", "content-management", "document-processing"]
   },
   {
@@ -12460,7 +11988,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["ecommerce"],
+    "integrationType": "commerce",
     "tags": ["payments", "subscriptions"]
   },
   {
@@ -12499,7 +12027,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["analytics", "search"],
+    "integrationType": "analytics",
     "tags": ["marketing", "data-analytics", "seo"]
   },
   {
@@ -12534,7 +12062,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["sales"],
+    "integrationType": "sales",
     "tags": ["enrichment", "sales-engagement"]
   },
   {
@@ -12675,116 +12203,9 @@
     "triggerCount": 1,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["communication", "developer-tools"],
+    "integrationType": "communication",
     "tags": ["messaging", "webhooks", "automation"]
   },
-  {
-    "type": "smtp",
-    "slug": "smtp",
-    "name": "SMTP",
-    "description": "Send emails via any SMTP mail server",
-    "longDescription": "Send emails using any SMTP server (Gmail, Outlook, custom servers, etc.). Configure SMTP connection settings and send emails with full control over content, recipients, and attachments.",
-    "bgColor": "#2D3748",
-    "iconName": "SmtpIcon",
-    "docsUrl": "https://docs.sim.ai/tools/smtp",
-    "operations": [],
-    "operationCount": 0,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "none",
-    "category": "tools",
-    "integrationTypes": ["email", "communication"],
-    "tags": ["email-marketing", "messaging"]
-  },
-  {
-    "type": "stt_v2",
-    "slug": "speech-to-text",
-    "name": "Speech-to-Text",
-    "description": "Convert speech to text using AI",
-    "longDescription": "Transcribe audio and video files to text using leading AI providers. Supports multiple languages, timestamps, and speaker diarization.",
-    "bgColor": "#181C1E",
-    "iconName": "STTIcon",
-    "docsUrl": "https://docs.sim.ai/tools/stt",
-    "operations": [],
-    "operationCount": 0,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "api-key",
-    "category": "tools",
-    "integrationTypes": ["ai", "documents"],
-    "tags": ["speech-to-text", "document-processing"]
-  },
-  {
-    "type": "ssh",
-    "slug": "ssh",
-    "name": "SSH",
-    "description": "Connect to remote servers via SSH",
-    "longDescription": "Execute commands, transfer files, and manage remote servers via SSH. Supports password and private key authentication for secure server access.",
-    "bgColor": "#000000",
-    "iconName": "SshIcon",
-    "docsUrl": "https://docs.sim.ai/tools/ssh",
-    "operations": [
-      {
-        "name": "Execute Command",
-        "description": "Execute a shell command on a remote SSH server"
-      },
-      {
-        "name": "Execute Script",
-        "description": "Upload and execute a multi-line script on a remote SSH server"
-      },
-      {
-        "name": "Check Command Exists",
-        "description": "Check if a command/program exists on the remote SSH server"
-      },
-      {
-        "name": "Upload File",
-        "description": "Upload a file to a remote SSH server"
-      },
-      {
-        "name": "Download File",
-        "description": "Download a file from a remote SSH server"
-      },
-      {
-        "name": "List Directory",
-        "description": "List files and directories in a remote directory"
-      },
-      {
-        "name": "Check File/Directory Exists",
-        "description": "Check if a file or directory exists on the remote SSH server"
-      },
-      {
-        "name": "Create Directory",
-        "description": "Create a directory on the remote SSH server"
-      },
-      {
-        "name": "Delete File/Directory",
-        "description": "Delete a file or directory from the remote SSH server"
-      },
-      {
-        "name": "Move/Rename",
-        "description": "Move or rename a file or directory on the remote SSH server"
-      },
-      {
-        "name": "Get System Info",
-        "description": "Retrieve system information from the remote SSH server"
-      },
-      {
-        "name": "Read File Content",
-        "description": "Read the contents of a remote file"
-      },
-      {
-        "name": "Write File Content",
-        "description": "Write or append content to a remote file"
-      }
-    ],
-    "operationCount": 13,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "none",
-    "category": "tools",
-    "integrationTypes": ["developer-tools"],
-    "tags": ["cloud", "automation"]
-  },
   {
     "type": "stagehand",
     "slug": "stagehand",
@@ -12809,7 +12230,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["ai", "developer-tools", "search"],
+    "integrationType": "ai",
     "tags": ["web-scraping", "automation", "agentic"]
   },
   {
@@ -13034,7 +12455,7 @@
     "triggerCount": 1,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["ecommerce", "developer-tools"],
+    "integrationType": "commerce",
     "tags": ["payments", "subscriptions", "webhooks"]
   },
   {
@@ -13141,7 +12562,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["databases", "ai", "developer-tools", "search"],
+    "integrationType": "databases",
     "tags": ["cloud", "data-warehouse", "vector-search"]
   },
   {
@@ -13240,7 +12661,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["security", "analytics", "developer-tools"],
+    "integrationType": "security",
     "tags": ["monitoring"]
   },
   {
@@ -13275,7 +12696,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["search", "sales"],
+    "integrationType": "search",
     "tags": ["web-scraping", "enrichment"]
   },
   {
@@ -13284,7 +12705,7 @@
     "name": "Telegram",
     "description": "Interact with Telegram",
     "longDescription": "Integrate Telegram into the workflow. Can send and delete messages. Can be used in trigger mode to trigger a workflow when a message is sent to a chat.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "TelegramIcon",
     "docsUrl": "https://docs.sim.ai/tools/telegram",
     "operations": [
@@ -13328,27 +12749,9 @@
     "triggerCount": 1,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["communication", "developer-tools"],
+    "integrationType": "communication",
     "tags": ["messaging", "webhooks", "automation"]
   },
-  {
-    "type": "tts",
-    "slug": "text-to-speech",
-    "name": "Text-to-Speech",
-    "description": "Convert text to speech using AI voices",
-    "longDescription": "Generate natural-sounding speech from text using state-of-the-art AI voices from OpenAI, Deepgram, ElevenLabs, Cartesia, Google Cloud, Azure, and PlayHT. Supports multiple voices, languages, and audio formats.",
-    "bgColor": "#181C1E",
-    "iconName": "TTSIcon",
-    "docsUrl": "https://docs.sim.ai/tools/tts",
-    "operations": [],
-    "operationCount": 0,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "api-key",
-    "category": "tools",
-    "integrationTypes": ["ai"],
-    "tags": ["text-to-speech", "llm"]
-  },
   {
     "type": "tinybird",
     "slug": "tinybird",
@@ -13373,27 +12776,9 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["analytics", "databases"],
+    "integrationType": "analytics",
     "tags": ["data-warehouse", "data-analytics"]
   },
-  {
-    "type": "translate",
-    "slug": "translate",
-    "name": "Translate",
-    "description": "Translate text to any language",
-    "longDescription": "Integrate Translate into the workflow. Can translate text to any language.",
-    "bgColor": "#FF4B4B",
-    "iconName": "TranslateIcon",
-    "docsUrl": "https://docs.sim.ai/tools/translate",
-    "operations": [],
-    "operationCount": 0,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "none",
-    "category": "tools",
-    "integrationTypes": ["ai", "documents"],
-    "tags": ["document-processing", "llm"]
-  },
   {
     "type": "trello",
     "slug": "trello",
@@ -13434,7 +12819,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["productivity", "customer-support"],
+    "integrationType": "productivity",
     "tags": ["project-management", "ticketing"]
   },
   {
@@ -13452,7 +12837,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["communication", "developer-tools"],
+    "integrationType": "communication",
     "tags": ["messaging", "automation"]
   },
   {
@@ -13489,7 +12874,7 @@
     "triggerCount": 1,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["communication", "ai"],
+    "integrationType": "communication",
     "tags": ["messaging", "text-to-speech"]
   },
   {
@@ -13546,7 +12931,7 @@
     "triggerCount": 1,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["documents", "analytics", "productivity"],
+    "integrationType": "documents",
     "tags": ["forms", "data-analytics"]
   },
   {
@@ -13629,7 +13014,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["databases", "developer-tools"],
+    "integrationType": "databases",
     "tags": ["cloud", "data-warehouse"]
   },
   {
@@ -13889,52 +13274,16 @@
     "triggerCount": 8,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["developer-tools"],
+    "integrationType": "devops",
     "tags": ["cloud", "ci-cd"]
   },
-  {
-    "type": "video_generator_v2",
-    "slug": "video-generator",
-    "name": "Video Generator",
-    "description": "Generate videos from text using AI",
-    "longDescription": "Generate high-quality videos from text prompts using leading AI providers. Supports multiple models, aspect ratios, resolutions, and provider-specific features like world consistency, camera controls, and audio generation.",
-    "bgColor": "#181C1E",
-    "iconName": "VideoIcon",
-    "docsUrl": "https://docs.sim.ai/tools/video-generator",
-    "operations": [],
-    "operationCount": 0,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "api-key",
-    "category": "tools",
-    "integrationTypes": ["ai", "design"],
-    "tags": ["video-generation", "llm"]
-  },
-  {
-    "type": "vision_v2",
-    "slug": "vision",
-    "name": "Vision",
-    "description": "Analyze images with vision models",
-    "longDescription": "Integrate Vision into the workflow. Can analyze images with vision models.",
-    "bgColor": "#4D5FFF",
-    "iconName": "EyeIcon",
-    "docsUrl": "https://docs.sim.ai/tools/vision",
-    "operations": [],
-    "operationCount": 0,
-    "triggers": [],
-    "triggerCount": 0,
-    "authType": "api-key",
-    "category": "tools",
-    "integrationTypes": ["ai", "documents"],
-    "tags": ["llm", "document-processing", "ocr"]
-  },
   {
     "type": "wealthbox",
     "slug": "wealthbox",
     "name": "Wealthbox",
     "description": "Interact with Wealthbox",
     "longDescription": "Integrate Wealthbox into the workflow. Can read and write notes, read and write contacts, and read and write tasks.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "WealthboxIcon",
     "docsUrl": "https://docs.sim.ai/tools/wealthbox",
     "operations": [
@@ -13968,7 +13317,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["crm", "customer-support", "sales"],
+    "integrationType": "sales",
     "tags": ["sales-engagement", "customer-support"]
   },
   {
@@ -13977,7 +13326,7 @@
     "name": "Webflow",
     "description": "Manage Webflow CMS collections",
     "longDescription": "Integrates Webflow CMS into the workflow. Can create, get, list, update, or delete items in Webflow CMS collections. Manage your Webflow content programmatically. Can be used in trigger mode to trigger workflows when collection items change or forms are submitted.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "WebflowIcon",
     "docsUrl": "https://docs.sim.ai/tools/webflow",
     "operations": [
@@ -14028,7 +13377,7 @@
     "triggerCount": 4,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["design", "analytics", "documents", "search"],
+    "integrationType": "marketing",
     "tags": ["content-management", "seo"]
   },
   {
@@ -14052,7 +13401,7 @@
     "triggerCount": 1,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["communication", "developer-tools"],
+    "integrationType": "communication",
     "tags": ["messaging", "automation"]
   },
   {
@@ -14087,7 +13436,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["search", "documents"],
+    "integrationType": "search",
     "tags": ["knowledge-base", "web-scraping"]
   },
   {
@@ -14210,7 +13559,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["design", "analytics", "documents", "search"],
+    "integrationType": "marketing",
     "tags": ["content-management", "seo"]
   },
   {
@@ -14269,7 +13618,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["hr", "productivity"],
+    "integrationType": "hr",
     "tags": ["hiring", "project-management"]
   },
   {
@@ -14400,7 +13749,7 @@
     "triggerCount": 0,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["communication", "analytics"],
+    "integrationType": "communication",
     "tags": ["marketing", "messaging"]
   },
   {
@@ -14455,7 +13804,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["communication", "analytics", "documents"],
+    "integrationType": "communication",
     "tags": ["google-workspace", "marketing", "content-management"]
   },
   {
@@ -14464,7 +13813,7 @@
     "name": "Zendesk",
     "description": "Manage support tickets, users, and organizations in Zendesk",
     "longDescription": "Integrate Zendesk into the workflow. Can get tickets, get ticket, create ticket, create tickets bulk, update ticket, update tickets bulk, delete ticket, merge tickets, get users, get user, get current user, search users, create user, create users bulk, update user, update users bulk, delete user, get organizations, get organization, autocomplete organizations, create organization, create organizations bulk, update organization, delete organization, search, search count.",
-    "bgColor": "#E0E0E0",
+    "bgColor": "#FFFFFF",
     "iconName": "ZendeskIcon",
     "docsUrl": "https://docs.sim.ai/tools/zendesk",
     "operations": [
@@ -14578,7 +13927,7 @@
     "triggerCount": 0,
     "authType": "none",
     "category": "tools",
-    "integrationTypes": ["customer-support", "productivity"],
+    "integrationType": "support",
     "tags": ["customer-support", "ticketing"]
   },
   {
@@ -14633,7 +13982,7 @@
     "triggerCount": 0,
     "authType": "api-key",
     "category": "tools",
-    "integrationTypes": ["ai", "documents", "search"],
+    "integrationType": "ai",
     "tags": ["llm", "knowledge-base", "agentic"]
   },
   {
@@ -14723,7 +14072,7 @@
     "triggerCount": 6,
     "authType": "oauth",
     "category": "tools",
-    "integrationTypes": ["communication", "productivity"],
+    "integrationType": "communication",
     "tags": ["meeting", "calendar", "scheduling"]
   }
 ]
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/consts.ts b/apps/sim/app/(landing)/integrations/data/templates.ts
similarity index 100%
rename from apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/consts.ts
rename to apps/sim/app/(landing)/integrations/data/templates.ts
diff --git a/apps/sim/app/(landing)/integrations/data/types.ts b/apps/sim/app/(landing)/integrations/data/types.ts
index 7ba6483d6b8..6ab2ed4be58 100644
--- a/apps/sim/app/(landing)/integrations/data/types.ts
+++ b/apps/sim/app/(landing)/integrations/data/types.ts
@@ -1,6 +1,8 @@
 // Shared types for the integrations section of the landing site.
 // Mirrors the shape written by scripts/generate-docs.ts → writeIntegrationsJson().
 
+import type { BlockCategory, IntegrationType } from '@/blocks/types'
+
 export type AuthType = 'oauth' | 'api-key' | 'none'
 
 interface TriggerInfo {
@@ -33,7 +35,7 @@ export interface Integration {
   triggers: TriggerInfo[]
   triggerCount: number
   authType: AuthType
-  category: string
-  integrationTypes?: string[]
+  category: BlockCategory
+  integrationType: IntegrationType
   tags?: string[]
 }
diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index 1608115e584..1aeee0860ef 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -185,7 +185,7 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
   :root,
   .light {
     --bg: #fefefe; /* main canvas - neutral near-white */
-    --surface-1: #f9f9f9; /* sidebar, panels */
+    --surface-1: #fbfbfb; /* sidebar, panels */
     --surface-2: #ffffff; /* blocks, cards, modals - pure white */
     --surface-3: #f7f7f7; /* popovers, headers */
     --surface-4: #f5f5f5; /* buttons base */
@@ -206,7 +206,7 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --text-muted: #707070;
     --text-subtle: #8c8c8c;
     --text-body: #3b3b3b;
-    --text-icon: #5e5e5e;
+    --text-icon: #525252;
 
     --text-inverse: #ffffff;
     --text-muted-inverse: #a0a0a0;
@@ -362,7 +362,7 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --text-muted: #787878;
     --text-subtle: #7d7d7d;
     --text-body: #cdcdcd;
-    --text-icon: #939393;
+    --text-icon: #a0a0a0;
 
     --text-inverse: #1b1b1b;
     --text-muted-inverse: #b3b3b3;
diff --git a/apps/sim/app/chat/components/input/input.tsx b/apps/sim/app/chat/components/input/input.tsx
index c49944cfcd3..c31342c1e64 100644
--- a/apps/sim/app/chat/components/input/input.tsx
+++ b/apps/sim/app/chat/components/input/input.tsx
@@ -193,7 +193,7 @@ export const ChatInput: React.FC<{
               handleKeyboardActivation(event, focusTextarea)
             }}
             className={cn(
-              'relative z-10 cursor-text rounded-[20px] border border-[var(--border-1)] bg-[var(--landing-bg-elevated)] px-2.5 py-2',
+              'relative z-10 cursor-text rounded-2xl border border-[var(--border-1)] bg-[var(--landing-bg-elevated)] px-2.5 py-2',
               isDragOver && 'border-purple-500'
             )}
             onDragEnter={(e) => {
diff --git a/apps/sim/app/chat/components/message/components/file-download.tsx b/apps/sim/app/chat/components/message/components/file-download.tsx
index 4126dd204d4..bd5aa880dcc 100644
--- a/apps/sim/app/chat/components/message/components/file-download.tsx
+++ b/apps/sim/app/chat/components/message/components/file-download.tsx
@@ -3,8 +3,8 @@
 import { useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { sleep } from '@sim/utils/helpers'
-import { ArrowDown, Download, Music } from 'lucide-react'
-import { Button, Loader } from '@/components/emcn'
+import { Music } from 'lucide-react'
+import { Button, Download, Loader } from '@/components/emcn'
 import { DefaultFileIcon, getDocumentIcon } from '@/components/icons/document-icons'
 import type { ChatFile } from '@/app/chat/components/message/message'
 
@@ -98,14 +98,14 @@ export function ChatFileDownload({ file }: ChatFileDownloadProps) {
 
   const renderIcon = () => {
     if (isAudioFile(file.type, file.name)) {
-      return <Music className='size-4 text-purple-500' />
+      return <Music className='h-4 w-4 text-purple-500' />
     }
     if (isImageFile(file.type)) {
       const ImageIcon = DefaultFileIcon
-      return <ImageIcon className='size-5' />
+      return <ImageIcon className='h-5 w-5' />
     }
     const DocumentIcon = getDocumentIcon(file.type, file.name)
-    return <DocumentIcon className='size-5' />
+    return <DocumentIcon className='h-5 w-5' />
   }
 
   return (
@@ -117,7 +117,7 @@ export function ChatFileDownload({ file }: ChatFileDownloadProps) {
       disabled={isDownloading}
       className='flex h-auto w-[200px] items-center gap-2 rounded-lg px-3 py-2'
     >
-      <div className='flex size-8 flex-shrink-0 items-center justify-center'>{renderIcon()}</div>
+      <div className='flex h-8 w-8 flex-shrink-0 items-center justify-center'>{renderIcon()}</div>
       <div className='min-w-0 flex-1 text-left'>
         <div className='w-[100px] truncate text-xs'>{file.name}</div>
         <div className='text-[var(--landing-text-muted)] text-micro'>
@@ -126,9 +126,9 @@ export function ChatFileDownload({ file }: ChatFileDownloadProps) {
       </div>
       <div className='flex-shrink-0'>
         {isDownloading ? (
-          <Loader className='size-3.5' animate />
+          <Loader className='h-3.5 w-3.5' animate />
         ) : (
-          <ArrowDown
+          <Download
             className={`h-3.5 w-3.5 transition-opacity ${isHovered ? 'opacity-100' : 'opacity-0'}`}
           />
         )}
@@ -176,9 +176,9 @@ export function ChatFileDownloadAll({ files }: ChatFileDownloadAllProps) {
       className='text-[var(--landing-text-muted)] transition-colors hover:bg-[var(--landing-bg-elevated)] disabled:opacity-50'
     >
       {isDownloading ? (
-        <Loader className='size-3' animate />
+        <Loader className='h-3 w-3' animate />
       ) : (
-        <Download className='size-3' strokeWidth={2} />
+        <Download className='h-3 w-3' strokeWidth={2} />
       )}
     </button>
   )
diff --git a/apps/sim/app/chat/components/message/message.tsx b/apps/sim/app/chat/components/message/message.tsx
index 5bd6ac264bf..708ddfa03cf 100644
--- a/apps/sim/app/chat/components/message/message.tsx
+++ b/apps/sim/app/chat/components/message/message.tsx
@@ -1,15 +1,15 @@
 'use client'
 
 import { memo, useState } from 'react'
-import { Check, Copy, File as FileIcon, FileText, Image as ImageIcon } from 'lucide-react'
-import { Tooltip } from '@/components/emcn'
+import { Check, File as FileIcon, FileText, Image as ImageIcon } from 'lucide-react'
+import { Duplicate, Tooltip } from '@/components/emcn'
 import {
   ChatFileDownload,
   ChatFileDownloadAll,
 } from '@/app/chat/components/message/components/file-download'
 import MarkdownRenderer from '@/app/chat/components/message/components/markdown-renderer'
 
-interface ChatAttachment {
+export interface ChatAttachment {
   id: string
   name: string
   type: string
@@ -83,63 +83,58 @@ export const ClientChatMessage = memo(
                       return `${Math.round((bytes / k ** i) * 10) / 10} ${sizes[i]}`
                     }
 
+                    const isInteractive =
+                      !!attachment.dataUrl?.trim() && attachment.dataUrl.startsWith('data:')
+
+                    const openAttachmentPreview = () => {
+                      const validDataUrl = attachment.dataUrl?.trim()
+                      if (!validDataUrl?.startsWith('data:')) return
+                      const newWindow = window.open('', '_blank')
+                      if (newWindow) {
+                        newWindow.document.write(`
+                          <!DOCTYPE html>
+                          <html>
+                            <head>
+                              <title>${attachment.name}</title>
+                              <style>
+                                body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; }
+                                img { max-width: 100%; max-height: 100vh; object-fit: contain; }
+                              </style>
+                            </head>
+                            <body>
+                              <img src="${validDataUrl}" alt="${attachment.name}" />
+                            </body>
+                          </html>
+                        `)
+                        newWindow.document.close()
+                      }
+                    }
+
                     return (
                       <div
                         key={attachment.id}
-                        role='button'
-                        aria-disabled={!attachment.dataUrl?.trim().startsWith('data:')}
-                        tabIndex={attachment.dataUrl?.trim().startsWith('data:') ? 0 : undefined}
+                        role={isInteractive ? 'button' : undefined}
+                        aria-disabled={!isInteractive}
+                        tabIndex={isInteractive ? 0 : undefined}
                         className={`relative overflow-hidden rounded-2xl border border-[var(--border-1)] bg-[var(--landing-bg-elevated)] ${
-                          attachment.dataUrl?.trim() && attachment.dataUrl.startsWith('data:')
-                            ? 'cursor-pointer'
-                            : ''
+                          isInteractive ? 'cursor-pointer' : ''
                         } ${
                           isImage
                             ? 'h-16 w-16 md:h-20 md:w-20'
                             : 'flex h-16 min-w-[140px] max-w-[220px] items-center gap-2 px-3 md:h-20 md:min-w-[160px] md:max-w-[240px]'
                         }`}
                         onClick={(e) => {
-                          const validDataUrl = attachment.dataUrl?.trim()
-                          if (validDataUrl?.startsWith('data:')) {
+                          if (!isInteractive) return
+                          e.preventDefault()
+                          e.stopPropagation()
+                          openAttachmentPreview()
+                        }}
+                        onKeyDown={(e) => {
+                          if (!isInteractive) return
+                          if (e.key === 'Enter' || e.key === ' ') {
                             e.preventDefault()
                             e.stopPropagation()
-                            const newWindow = window.open('', '_blank')
-                            if (newWindow) {
-                              newWindow.document.write(`
-                                <!DOCTYPE html>
-                                <html>
-                                  <head>
-                                    <title>${attachment.name}</title>
-                                    <style>
-                                      body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; }
-                                      img { max-width: 100%; max-height: 100vh; object-fit: contain; }
-                                    </style>
-                                  </head>
-                                  <body>
-                                    <img src="${validDataUrl}" alt="${attachment.name}" />
-                                  </body>
-                                </html>
-                              `)
-                              newWindow.document.close()
-                            }
-                          }
-                        }}
-                        onKeyDown={(event) => {
-                          const validDataUrl = attachment.dataUrl?.trim()
-                          if (!validDataUrl?.startsWith('data:')) return
-                          if (event.key === 'Enter' || event.key === ' ') {
-                            event.preventDefault()
-                            const newWindow = window.open('', '_blank')
-                            if (newWindow) {
-                              newWindow.document.write(`
-                                <html>
-                                  <head><title>${attachment.name}</title></head>
-                                  <body style="margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;background:#111;">
-                                    <img src="${validDataUrl}" alt="${attachment.name}" style="max-width:100%;max-height:100vh;object-fit:contain;" />
-                                  </body>
-                                </html>
-                              `)
-                            }
+                            openAttachmentPreview()
                           }
                         }}
                       >
@@ -194,7 +189,7 @@ export const ClientChatMessage = memo(
       ) : (
         <div className='px-4 pt-5 pb-2' data-message-id={message.id}>
           <div className='mx-auto max-w-3xl'>
-            <div className='flex flex-col gap-y-3'>
+            <div className='flex flex-col space-y-3'>
               {/* Direct content rendering - tool calls are now handled via SSE events */}
               <div>
                 <div className='break-words text-base'>
@@ -215,7 +210,7 @@ export const ClientChatMessage = memo(
                 </div>
               )}
               {message.type === 'assistant' && !isJsonObject && !message.isInitialMessage && (
-                <div className='flex items-center justify-start gap-x-2'>
+                <div className='flex items-center justify-start space-x-2'>
                   {/* Copy Button - Only show when not streaming */}
                   {!message.isStreaming && (
                     <Tooltip.Root delayDuration={300}>
@@ -233,9 +228,9 @@ export const ClientChatMessage = memo(
                           }}
                         >
                           {isCopied ? (
-                            <Check className='size-3' strokeWidth={2} />
+                            <Check className='h-3 w-3' strokeWidth={2} />
                           ) : (
-                            <Copy className='size-3' strokeWidth={2} />
+                            <Duplicate className='h-3 w-3' />
                           )}
                         </button>
                       </Tooltip.Trigger>
diff --git a/apps/sim/app/playground/page.tsx b/apps/sim/app/playground/page.tsx
index 716bb0e85d8..edc5e3daf27 100644
--- a/apps/sim/app/playground/page.tsx
+++ b/apps/sim/app/playground/page.tsx
@@ -20,7 +20,6 @@ import {
   Code,
   Combobox,
   Connections,
-  Copy,
   Cursor,
   DatePicker,
   DocumentAttachment,
@@ -1007,7 +1006,6 @@ export default function PlaygroundPage() {
                 { Icon: CardIcon, name: 'Card' },
                 { Icon: ChevronDown, name: 'ChevronDown' },
                 { Icon: Connections, name: 'Connections' },
-                { Icon: Copy, name: 'Copy' },
                 { Icon: Cursor, name: 'Cursor' },
                 { Icon: DocumentAttachment, name: 'DocumentAttachment' },
                 { Icon: Download, name: 'Download' },
diff --git a/apps/sim/app/sitemap.ts b/apps/sim/app/sitemap.ts
index 8107f3010c0..78a69f0252f 100644
--- a/apps/sim/app/sitemap.ts
+++ b/apps/sim/app/sitemap.ts
@@ -2,7 +2,7 @@ import type { MetadataRoute } from 'next'
 import { COURSES } from '@/lib/academy/content'
 import { getAllPostMeta } from '@/lib/blog/registry'
 import { SITE_URL } from '@/lib/core/utils/urls'
-import integrations from '@/app/(landing)/integrations/data/integrations.json'
+import { INTEGRATIONS } from '@/app/(landing)/integrations/data'
 import { ALL_CATALOG_MODELS, MODEL_PROVIDERS_WITH_CATALOGS } from '@/app/(landing)/models/utils'
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
@@ -79,7 +79,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     lastModified: date,
   }))
 
-  const integrationPages: MetadataRoute.Sitemap = integrations.map((integration) => ({
+  const integrationPages: MetadataRoute.Sitemap = INTEGRATIONS.map((integration) => ({
     url: `${baseUrl}/integrations/${integration.slug}`,
   }))
 
diff --git a/apps/sim/app/templates/[id]/template.tsx b/apps/sim/app/templates/[id]/template.tsx
index fe8d435e83b..158c1bd52db 100644
--- a/apps/sim/app/templates/[id]/template.tsx
+++ b/apps/sim/app/templates/[id]/template.tsx
@@ -19,11 +19,11 @@ import 'streamdown/styles.css'
 import {
   Breadcrumb,
   Button,
-  Copy,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  Duplicate,
   Popover,
   PopoverContent,
   PopoverItem,
@@ -96,18 +96,18 @@ function TemplateDetailsLoading({ isWorkspaceContext, workspaceId }: TemplateDet
           {/* Creator and stats row */}
           <div className='mt-4 flex items-center gap-2'>
             {/* Star icon and count */}
-            <Skeleton className='size-[14px] rounded-xs' />
+            <Skeleton className='h-[14px] w-[14px] rounded-xs' />
             <Skeleton className='h-[21px] w-[24px] rounded-sm' />
 
             {/* Views icon and count */}
-            <Skeleton className='size-[16px] rounded-xs' />
+            <Skeleton className='h-[16px] w-[16px] rounded-xs' />
             <Skeleton className='h-[21px] w-[32px] rounded-sm' />
 
             {/* Vertical divider */}
             <div className='mx-1 mb-[-1.5px] h-[18px] w-[1.25px] rounded-full bg-[var(--border)]' />
 
             {/* Creator profile pic */}
-            <Skeleton className='size-[16px] rounded-full' />
+            <Skeleton className='h-[16px] w-[16px] rounded-full' />
             {/* Creator name */}
             <Skeleton className='h-[21px] w-[100px] rounded-sm' />
           </div>
@@ -656,7 +656,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                           className='h-[32px] rounded-md'
                         >
                           {isUsing ? 'Importing...' : isLoadingWorkspaces ? 'Loading...' : 'Edit'}
-                          <ChevronDown className='ml-2 size-4' />
+                          <ChevronDown className='ml-2 h-4 w-4' />
                         </Button>
                       </DropdownMenuTrigger>
                       <DropdownMenuContent align='end'>
@@ -721,17 +721,17 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
               <Popover open={sharePopoverOpen} onOpenChange={setSharePopoverOpen}>
                 <PopoverTrigger asChild>
                   <Button variant='active' className='h-[32px] rounded-md px-3'>
-                    <Share2 className='size-[14px]' />
+                    <Share2 className='h-[14px] w-[14px]' />
                   </Button>
                 </PopoverTrigger>
                 <PopoverContent align='end' side='bottom' sideOffset={8}>
                   <PopoverItem onClick={handleCopyLink}>
-                    <Copy className='size-3' />
+                    <Duplicate className='h-3 w-3' />
                     <span>Copy link</span>
                   </PopoverItem>
                   <PopoverItem onClick={handleShareToTwitter}>
                     <svg
-                      className='size-3'
+                      className='h-3 w-3'
                       viewBox='0 0 24 24'
                       fill='currentColor'
                       xmlns='http://www.w3.org/2000/svg'
@@ -741,7 +741,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                     <span>Share on X</span>
                   </PopoverItem>
                   <PopoverItem onClick={handleShareToLinkedIn}>
-                    <Linkedin className='size-3' />
+                    <Linkedin className='h-3 w-3' />
                     <span>Share on LinkedIn</span>
                   </PopoverItem>
                 </PopoverContent>
@@ -772,7 +772,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
             </span>
 
             {/* Users icon and count */}
-            <ChartNoAxesColumn className='size-[16px] text-[var(--text-muted)]' />
+            <ChartNoAxesColumn className='h-[16px] w-[16px] text-[var(--text-muted)]' />
             <span className='font-medium text-[var(--text-muted)] text-sm'>{template.views}</span>
 
             {/* Vertical divider */}
@@ -780,7 +780,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
 
             {/* Creator profile pic */}
             {template.creator?.profileImageUrl ? (
-              <div className='size-[16px] flex-shrink-0 overflow-hidden rounded-full'>
+              <div className='h-[16px] w-[16px] flex-shrink-0 overflow-hidden rounded-full'>
                 <img
                   src={template.creator.profileImageUrl}
                   alt={template.creator.name}
@@ -788,8 +788,8 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                 />
               </div>
             ) : (
-              <div className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-2)]'>
-                <User className='size-[14px] text-[var(--text-muted)]' />
+              <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-2)]'>
+                <User className='h-[14px] w-[14px] text-[var(--text-muted)]' />
               </div>
             )}
             {/* Creator name */}
@@ -887,7 +887,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                     ),
                     li: ({ children }) => <li className='leading-[1.4rem]'>{children}</li>,
                     inlineCode: ({ children }) => (
-                      <code className='whitespace-normal rounded bg-muted px-1.5 py-0.5 font-mono text-[var(--caution)] not-italic'>
+                      <code className='rounded bg-muted px-1.5 py-0.5 font-mono text-[var(--caution)] text-xs'>
                         {children}
                       </code>
                     ),
@@ -950,7 +950,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                 <div className='flex items-start gap-4'>
                   {/* Creator profile image */}
                   {template.creator.profileImageUrl ? (
-                    <div className='size-[48px] flex-shrink-0 overflow-hidden rounded-full'>
+                    <div className='h-[48px] w-[48px] flex-shrink-0 overflow-hidden rounded-full'>
                       <img
                         src={template.creator.profileImageUrl}
                         alt={template.creator.name}
@@ -958,8 +958,8 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                       />
                     </div>
                   ) : (
-                    <div className='flex size-[48px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-2)]'>
-                      <User className='size-[24px] text-[var(--text-muted)]' />
+                    <div className='flex h-[48px] w-[48px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-2)]'>
+                      <User className='h-[24px] w-[24px] text-[var(--text-muted)]' />
                     </div>
                   )}
 
@@ -983,7 +983,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                             className='flex items-center text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)]'
                             aria-label='Website'
                           >
-                            <Globe className='size-[14px]' />
+                            <Globe className='h-[14px] w-[14px]' />
                           </a>
                         )}
                         {template.creator.details?.xUrl && (
@@ -994,7 +994,11 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                             className='flex items-center text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)]'
                             aria-label='X (Twitter)'
                           >
-                            <svg className='size-[14px]' viewBox='0 0 24 24' fill='currentColor'>
+                            <svg
+                              className='h-[14px] w-[14px]'
+                              viewBox='0 0 24 24'
+                              fill='currentColor'
+                            >
                               <path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z' />
                             </svg>
                           </a>
@@ -1007,7 +1011,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                             className='flex items-center text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)]'
                             aria-label='LinkedIn'
                           >
-                            <Linkedin className='size-[14px]' />
+                            <Linkedin className='h-[14px] w-[14px]' />
                           </a>
                         )}
                         {template.creator.details?.contactEmail && (
@@ -1016,7 +1020,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                             className='flex items-center text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)]'
                             aria-label='Email'
                           >
-                            <Mail className='size-[14px]' />
+                            <Mail className='h-[14px] w-[14px]' />
                           </a>
                         )}
                       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item.tsx b/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item.tsx
index a08333666df..0cfdf455ad3 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/conversation-list-item.tsx
@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react'
-import { Blimp } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 
 interface ConversationListItemProps {
@@ -21,28 +20,19 @@ export function ConversationListItem({
   statusIndicatorClassName,
   actions,
 }: ConversationListItemProps) {
+  const showStatusDot = isActive || isUnread
   return (
     <div className={cn('flex w-full min-w-0 items-center gap-2', className)}>
-      <span className='relative flex-shrink-0'>
-        <Blimp className='size-[16px] text-[var(--text-icon)]' />
-        {isActive && (
-          <span
-            className={cn(
-              '-right-[1px] -bottom-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-amber-400',
-              statusIndicatorClassName
-            )}
-          />
-        )}
-        {!isActive && isUnread && (
-          <span
-            className={cn(
-              '-right-[1px] -bottom-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-[var(--indicator-online)]',
-              statusIndicatorClassName
-            )}
-          />
-        )}
-      </span>
       <span className={cn('min-w-0 flex-1 truncate', titleClassName)}>{title}</span>
+      {showStatusDot && (
+        <span
+          aria-hidden='true'
+          className={cn('h-[6px] w-[6px] flex-shrink-0 rounded-full', statusIndicatorClassName)}
+          style={{
+            backgroundColor: isActive ? '#EAB308' : 'var(--brand-accent)',
+          }}
+        />
+      )}
       {actions && <div className='ml-auto flex flex-shrink-0 items-center'>{actions}</div>}
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/components/index.ts b/apps/sim/app/workspace/[workspaceId]/components/index.ts
index 66ba3cfdecf..5b3e0f2c66d 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/components/index.ts
@@ -26,3 +26,4 @@ export type {
   SelectableConfig,
 } from './resource/resource'
 export { Resource, ResourceTable } from './resource/resource'
+export { TaskStatusDot } from './task-status-dot'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
index 359f152fa0f..eb5c96dc480 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
@@ -6,7 +6,7 @@ import { useParams, useRouter } from 'next/navigation'
 import {
   Button,
   Check,
-  Copy,
+  Duplicate,
   Modal,
   ModalBody,
   ModalContent,
@@ -180,7 +180,7 @@ export const MessageActions = memo(function MessageActions({
                 onClick={copyToClipboard}
                 className={BUTTON_CLASS}
               >
-                {copied ? <Check className={ICON_CLASS} /> : <Copy className={ICON_CLASS} />}
+                {copied ? <Check className={ICON_CLASS} /> : <Duplicate className={ICON_CLASS} />}
               </button>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>
@@ -255,12 +255,12 @@ export const MessageActions = memo(function MessageActions({
                         type='button'
                         aria-label='Copy request ID'
                         onClick={copyRequestId}
-                        className='flex size-[22px] shrink-0 items-center justify-center rounded-full text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-hover)] focus-visible:outline-none'
+                        className='flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-hover)] focus-visible:outline-none'
                       >
                         {copiedRequestId ? (
-                          <Check className='size-[14px]' />
+                          <Check className='h-[14px] w-[14px]' />
                         ) : (
-                          <Copy className='size-[14px]' />
+                          <Duplicate className='h-[14px] w-[14px]' />
                         )}
                       </button>
                     </Tooltip.Trigger>
@@ -287,7 +287,7 @@ export const MessageActions = memo(function MessageActions({
               Cancel
             </Button>
             <Button variant='primary' onClick={handleSubmitFeedback}>
-              Submit feedback
+              Submit
             </Button>
           </ModalFooter>
         </ModalContent>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/product-tour/index.ts b/apps/sim/app/workspace/[workspaceId]/components/product-tour/index.ts
deleted file mode 100644
index 38779f28cbb..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/components/product-tour/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { NavTour, START_NAV_TOUR_EVENT } from './product-tour'
-export { START_WORKFLOW_TOUR_EVENT, WorkflowTour } from './workflow-tour'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/product-tour/nav-tour-steps.ts b/apps/sim/app/workspace/[workspaceId]/components/product-tour/nav-tour-steps.ts
deleted file mode 100644
index c18aae9734e..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/components/product-tour/nav-tour-steps.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import type { Step } from 'react-joyride'
-
-export const navTourSteps: Step[] = [
-  {
-    target: '[data-tour="nav-home"]',
-    title: 'Home',
-    content:
-      'Your starting point. Describe what you want to build in plain language or pick a template to get started.',
-    placement: 'right',
-    disableBeacon: true,
-    spotlightPadding: 0,
-  },
-  {
-    target: '[data-tour="nav-search"]',
-    title: 'Search',
-    content: 'Quickly find workflows, blocks, and tools. Use Cmd+K to open it from anywhere.',
-    placement: 'right',
-    disableBeacon: true,
-    spotlightPadding: 0,
-  },
-  {
-    target: '[data-tour="nav-tables"]',
-    title: 'Tables',
-    content:
-      'Store and query structured data. Your workflows can read and write to tables directly.',
-    placement: 'right',
-    disableBeacon: true,
-  },
-  {
-    target: '[data-tour="nav-files"]',
-    title: 'Files',
-    content: 'Upload and manage files that your workflows can process, transform, or reference.',
-    placement: 'right',
-    disableBeacon: true,
-  },
-  {
-    target: '[data-tour="nav-knowledge-base"]',
-    title: 'Knowledge Base',
-    content:
-      'Build knowledge bases from your documents. Set up connectors to give your agents realtime access to your data sources from sources like Notion, Drive, Slack, Confluence, and more.',
-    placement: 'right',
-    disableBeacon: true,
-  },
-  {
-    target: '[data-tour="nav-scheduled-tasks"]',
-    title: 'Scheduled Tasks',
-    content:
-      'View and manage background tasks. Set up new tasks, or view the tasks the Mothership is monitoring for upcoming or past executions.',
-    placement: 'right',
-    disableBeacon: true,
-  },
-  {
-    target: '[data-tour="nav-logs"]',
-    title: 'Logs',
-    content:
-      'Monitor every workflow execution. See inputs, outputs, errors, and timing for each run. View analytics on performance and costs, filter previous runs, and view snapshots of the workflow at the time of execution.',
-    placement: 'right',
-    disableBeacon: true,
-  },
-  {
-    target: '[data-tour="nav-tasks"]',
-    title: 'Tasks',
-    content:
-      'Tasks that work for you. Mothership can create, edit, and delete resources throughout the platform. It can also perform actions on your behalf, like sending emails, creating tasks, and more.',
-    placement: 'right',
-    disableBeacon: true,
-  },
-  {
-    target: '[data-tour="nav-workflows"]',
-    title: 'Workflows',
-    content:
-      'All your workflows live here. Create new ones with the + button and organize them into folders. Deploy your workflows as API, webhook, schedule, or chat widget. Then hit Run to test it out.',
-    placement: 'right',
-    disableBeacon: true,
-  },
-]
diff --git a/apps/sim/app/workspace/[workspaceId]/components/product-tour/product-tour.tsx b/apps/sim/app/workspace/[workspaceId]/components/product-tour/product-tour.tsx
deleted file mode 100644
index 11487f191db..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/components/product-tour/product-tour.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-
-import { useMemo } from 'react'
-import dynamic from 'next/dynamic'
-import { usePathname } from 'next/navigation'
-import { navTourSteps } from '@/app/workspace/[workspaceId]/components/product-tour/nav-tour-steps'
-import type { TourState } from '@/app/workspace/[workspaceId]/components/product-tour/tour-shared'
-import {
-  getSharedJoyrideProps,
-  TourStateContext,
-  TourTooltipAdapter,
-} from '@/app/workspace/[workspaceId]/components/product-tour/tour-shared'
-import { useTour } from '@/app/workspace/[workspaceId]/components/product-tour/use-tour'
-
-const Joyride = dynamic(() => import('react-joyride'), {
-  ssr: false,
-})
-
-export const START_NAV_TOUR_EVENT = 'start-nav-tour'
-
-export function NavTour() {
-  const pathname = usePathname()
-  const isWorkflowPage = /\/w\/[^/]+/.test(pathname)
-
-  const { run, stepIndex, tourKey, isTooltipVisible, isEntrance, handleCallback } = useTour({
-    steps: navTourSteps,
-    triggerEvent: START_NAV_TOUR_EVENT,
-    tourName: 'Navigation tour',
-    tourType: 'nav',
-    disabled: isWorkflowPage,
-  })
-
-  const tourState = useMemo<TourState>(
-    () => ({
-      isTooltipVisible,
-      isEntrance,
-      totalSteps: navTourSteps.length,
-    }),
-    [isTooltipVisible, isEntrance]
-  )
-
-  return (
-    <TourStateContext.Provider value={tourState}>
-      <Joyride
-        key={tourKey}
-        steps={navTourSteps}
-        run={run}
-        stepIndex={stepIndex}
-        callback={handleCallback}
-        continuous
-        disableScrolling
-        disableScrollParentFix
-        disableOverlayClose
-        spotlightPadding={4}
-        tooltipComponent={TourTooltipAdapter}
-        {...getSharedJoyrideProps({ spotlightBorderRadius: 8 })}
-      />
-    </TourStateContext.Provider>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/product-tour/tour-shared.tsx b/apps/sim/app/workspace/[workspaceId]/components/product-tour/tour-shared.tsx
deleted file mode 100644
index 774ed8ad876..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/components/product-tour/tour-shared.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-'use client'
-
-import { createContext, useCallback, useContext } from 'react'
-import type { TooltipRenderProps } from 'react-joyride'
-import { TourTooltip } from '@/components/emcn'
-
-/** Shared state passed from the tour component to the tooltip adapter via context */
-export interface TourState {
-  isTooltipVisible: boolean
-  isEntrance: boolean
-  totalSteps: number
-}
-
-export const TourStateContext = createContext<TourState>({
-  isTooltipVisible: true,
-  isEntrance: true,
-  totalSteps: 0,
-})
-
-/**
- * Maps Joyride placement strings to TourTooltip placement values.
- */
-function mapPlacement(placement?: string): 'top' | 'right' | 'bottom' | 'left' | 'center' {
-  switch (placement) {
-    case 'top':
-    case 'top-start':
-    case 'top-end':
-      return 'top'
-    case 'right':
-    case 'right-start':
-    case 'right-end':
-      return 'right'
-    case 'bottom':
-    case 'bottom-start':
-    case 'bottom-end':
-      return 'bottom'
-    case 'left':
-    case 'left-start':
-    case 'left-end':
-      return 'left'
-    case 'center':
-      return 'center'
-    default:
-      return 'bottom'
-  }
-}
-
-/**
- * Adapter that bridges Joyride's tooltip render props to the EMCN TourTooltip component.
- * Reads transition state from TourStateContext to coordinate fade animations.
- */
-export function TourTooltipAdapter({
-  step,
-  index,
-  isLastStep,
-  tooltipProps,
-  primaryProps,
-  backProps,
-  closeProps,
-}: TooltipRenderProps) {
-  const { isTooltipVisible, isEntrance, totalSteps } = useContext(TourStateContext)
-
-  const { target } = step
-  const targetEl =
-    typeof target === 'string'
-      ? document.querySelector<HTMLElement>(target)
-      : target instanceof HTMLElement
-        ? target
-        : null
-
-  /**
-   * Forwards the Joyride tooltip ref safely, handling both
-   * callback refs and RefObject refs from the library.
-   * Memoized to prevent ref churn (null → node cycling) on re-renders.
-   */
-  const setJoyrideRef = useCallback(
-    (node: HTMLDivElement | null) => {
-      const { ref } = tooltipProps
-      if (!ref) return
-      if (typeof ref === 'function') {
-        ref(node)
-      } else {
-        ;(ref as React.MutableRefObject<HTMLDivElement | null>).current = node
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [tooltipProps.ref]
-  )
-
-  const placement = mapPlacement(step.placement)
-
-  return (
-    <>
-      <div
-        ref={setJoyrideRef}
-        role={tooltipProps.role}
-        aria-modal={tooltipProps['aria-modal']}
-        style={{ position: 'absolute', opacity: 0, pointerEvents: 'none', width: 0, height: 0 }}
-      />
-      <TourTooltip
-        title={step.title as string}
-        description={step.content}
-        step={index + 1}
-        totalSteps={totalSteps}
-        placement={placement}
-        targetEl={targetEl}
-        isFirst={index === 0}
-        isLast={isLastStep}
-        isVisible={isTooltipVisible}
-        isEntrance={isEntrance && index === 0}
-        onNext={primaryProps.onClick as () => void}
-        onBack={backProps.onClick as () => void}
-        onClose={closeProps.onClick as () => void}
-      />
-    </>
-  )
-}
-
-const SPOTLIGHT_TRANSITION =
-  'top 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), left 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)'
-
-/**
- * Returns the shared Joyride floaterProps and styles config used by both tours.
- * Only `spotlightPadding` and spotlight `borderRadius` differ between tours.
- */
-export function getSharedJoyrideProps(overrides: { spotlightBorderRadius: number }) {
-  return {
-    floaterProps: {
-      disableAnimation: true,
-      hideArrow: true,
-      styles: {
-        floater: {
-          filter: 'none',
-          opacity: 0,
-          pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
-          width: 0,
-          height: 0,
-        },
-      },
-    },
-    styles: {
-      options: {
-        zIndex: 10000,
-      },
-      spotlight: {
-        backgroundColor: 'transparent',
-        border: '1px solid rgba(255, 255, 255, 0.1)',
-        borderRadius: overrides.spotlightBorderRadius,
-        boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.55)',
-        position: 'fixed' as React.CSSProperties['position'],
-        transition: SPOTLIGHT_TRANSITION,
-      },
-      overlay: {
-        backgroundColor: 'transparent',
-        mixBlendMode: 'unset' as React.CSSProperties['mixBlendMode'],
-        position: 'fixed' as React.CSSProperties['position'],
-        height: '100%',
-        overflow: 'visible',
-        pointerEvents: 'none' as React.CSSProperties['pointerEvents'],
-      },
-    },
-  } as const
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/product-tour/use-tour.ts b/apps/sim/app/workspace/[workspaceId]/components/product-tour/use-tour.ts
deleted file mode 100644
index dc41bf013fe..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/components/product-tour/use-tour.ts
+++ /dev/null
@@ -1,236 +0,0 @@
-'use client'
-
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { createLogger } from '@sim/logger'
-import { usePostHog } from 'posthog-js/react'
-import { ACTIONS, type CallBackProps, EVENTS, STATUS, type Step } from 'react-joyride'
-import { captureEvent } from '@/lib/posthog/client'
-
-const logger = createLogger('useTour')
-
-/** Transition delay before updating step index (ms) */
-const FADE_OUT_MS = 80
-
-interface UseTourOptions {
-  /** Tour step definitions */
-  steps: Step[]
-  /** Custom event name to listen for manual triggers */
-  triggerEvent?: string
-  /** Identifier for logging */
-  tourName?: string
-  /** Analytics tour type for PostHog events */
-  tourType?: 'nav' | 'workflow'
-  /** When true, stops a running tour (e.g. navigating away from the relevant page) */
-  disabled?: boolean
-}
-
-interface UseTourReturn {
-  /** Whether the tour is currently running */
-  run: boolean
-  /** Current step index */
-  stepIndex: number
-  /** Key to force Joyride remount on retrigger */
-  tourKey: number
-  /** Whether the tooltip is visible (false during step transitions) */
-  isTooltipVisible: boolean
-  /** Whether this is the initial entrance animation */
-  isEntrance: boolean
-  /** Joyride callback handler */
-  handleCallback: (data: CallBackProps) => void
-}
-
-/**
- * Shared hook for managing product tour state with smooth transitions.
- *
- * Handles manual triggering via custom events and coordinated fade
- * transitions between steps to prevent layout shift.
- */
-export function useTour({
-  steps,
-  triggerEvent,
-  tourName = 'tour',
-  tourType,
-  disabled = false,
-}: UseTourOptions): UseTourReturn {
-  const posthog = usePostHog()
-  const [run, setRun] = useState(false)
-  const [stepIndex, setStepIndex] = useState(0)
-  const [tourKey, setTourKey] = useState(0)
-  const [isTooltipVisible, setIsTooltipVisible] = useState(true)
-  const [isEntrance, setIsEntrance] = useState(true)
-
-  const retriggerTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const transitionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const rafRef = useRef<number | null>(null)
-
-  /**
-   * Schedules a two-frame rAF to reveal the tooltip after the browser
-   * finishes repositioning. Stores the outer frame ID in `rafRef` so
-   * it can be cancelled on unmount or when the tour is interrupted.
-   */
-  const scheduleReveal = useCallback(() => {
-    if (rafRef.current) {
-      cancelAnimationFrame(rafRef.current)
-    }
-    rafRef.current = requestAnimationFrame(() => {
-      rafRef.current = requestAnimationFrame(() => {
-        rafRef.current = null
-        setIsTooltipVisible(true)
-      })
-    })
-  }, [])
-
-  /** Cancels any pending transition timer and rAF reveal */
-  const cancelPendingTransitions = useCallback(() => {
-    if (transitionTimerRef.current) {
-      clearTimeout(transitionTimerRef.current)
-      transitionTimerRef.current = null
-    }
-    if (rafRef.current) {
-      cancelAnimationFrame(rafRef.current)
-      rafRef.current = null
-    }
-  }, [])
-
-  const stopTour = useCallback(() => {
-    cancelPendingTransitions()
-    setRun(false)
-    setIsTooltipVisible(true)
-    setIsEntrance(true)
-  }, [cancelPendingTransitions])
-
-  /** Transition to a new step with a coordinated fade-out/fade-in */
-  const transitionToStep = useCallback(
-    (newIndex: number) => {
-      if (newIndex < 0 || newIndex >= steps.length) {
-        stopTour()
-        return
-      }
-
-      setIsTooltipVisible(false)
-      cancelPendingTransitions()
-
-      transitionTimerRef.current = setTimeout(() => {
-        transitionTimerRef.current = null
-        setStepIndex(newIndex)
-        setIsEntrance(false)
-        scheduleReveal()
-      }, FADE_OUT_MS)
-    },
-    [steps.length, stopTour, cancelPendingTransitions, scheduleReveal]
-  )
-
-  useEffect(() => {
-    if (!run) return
-    const html = document.documentElement
-    const prev = html.style.scrollbarGutter
-    html.style.scrollbarGutter = 'stable'
-    return () => {
-      html.style.scrollbarGutter = prev
-    }
-  }, [run])
-
-  /** Stop the tour when disabled becomes true (e.g. navigating away from the relevant page) */
-  useEffect(() => {
-    if (disabled && run) {
-      stopTour()
-      logger.info(`${tourName} paused — disabled became true`)
-    }
-  }, [disabled, run, tourName, stopTour])
-
-  /** Listen for manual trigger events */
-  useEffect(() => {
-    if (!triggerEvent) return
-
-    const handleTrigger = () => {
-      setRun(false)
-      setTourKey((k) => k + 1)
-
-      if (retriggerTimerRef.current) {
-        clearTimeout(retriggerTimerRef.current)
-      }
-
-      retriggerTimerRef.current = setTimeout(() => {
-        retriggerTimerRef.current = null
-        setStepIndex(0)
-        setIsEntrance(true)
-        setIsTooltipVisible(false)
-        setRun(true)
-        logger.info(`${tourName} triggered via event`)
-        scheduleReveal()
-        if (tourType) {
-          captureEvent(posthog, 'tour_started', { tour_type: tourType })
-        }
-      }, 50)
-    }
-
-    window.addEventListener(triggerEvent, handleTrigger)
-    return () => {
-      window.removeEventListener(triggerEvent, handleTrigger)
-      if (retriggerTimerRef.current) {
-        clearTimeout(retriggerTimerRef.current)
-      }
-    }
-  }, [triggerEvent, tourName, scheduleReveal])
-
-  /** Clean up all pending async work on unmount */
-  useEffect(() => {
-    return () => {
-      cancelPendingTransitions()
-      if (retriggerTimerRef.current) {
-        clearTimeout(retriggerTimerRef.current)
-      }
-    }
-  }, [cancelPendingTransitions])
-
-  const handleCallback = useCallback(
-    (data: CallBackProps) => {
-      const { action, index, status, type } = data
-
-      if (status === STATUS.FINISHED || status === STATUS.SKIPPED) {
-        stopTour()
-        logger.info(`${tourName} ended`, { status })
-        if (tourType) {
-          if (status === STATUS.FINISHED) {
-            captureEvent(posthog, 'tour_completed', { tour_type: tourType })
-          } else {
-            captureEvent(posthog, 'tour_skipped', { tour_type: tourType, step_index: index })
-          }
-        }
-        return
-      }
-
-      if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) {
-        if (action === ACTIONS.CLOSE) {
-          stopTour()
-          logger.info(`${tourName} closed by user`)
-          if (tourType) {
-            captureEvent(posthog, 'tour_skipped', { tour_type: tourType, step_index: index })
-          }
-          return
-        }
-
-        const nextIndex = index + (action === ACTIONS.PREV ? -1 : 1)
-
-        if (type === EVENTS.TARGET_NOT_FOUND) {
-          logger.info(`${tourName} step target not found, skipping`, {
-            stepIndex: index,
-            target: steps[index]?.target,
-          })
-        }
-
-        transitionToStep(nextIndex)
-      }
-    },
-    [stopTour, transitionToStep, steps, tourName, tourType, posthog]
-  )
-
-  return {
-    run,
-    stepIndex,
-    tourKey,
-    isTooltipVisible,
-    isEntrance,
-    handleCallback,
-  }
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/product-tour/workflow-tour-steps.ts b/apps/sim/app/workspace/[workspaceId]/components/product-tour/workflow-tour-steps.ts
deleted file mode 100644
index cb7105eaf68..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/components/product-tour/workflow-tour-steps.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { Step } from 'react-joyride'
-
-export const workflowTourSteps: Step[] = [
-  {
-    target: '[data-tour="canvas"]',
-    title: 'The Canvas',
-    content:
-      'This is where you build visually. Drag blocks onto the canvas and connect them to create AI workflows.',
-    placement: 'center',
-    disableBeacon: true,
-  },
-  {
-    target: '[data-tour="tab-copilot"]',
-    title: 'AI Copilot',
-    content:
-      'Build and debug workflows using natural language. Describe what you want and Copilot creates the blocks for you.',
-    placement: 'bottom',
-    disableBeacon: true,
-    spotlightPadding: 0,
-  },
-  {
-    target: '[data-tour="tab-toolbar"]',
-    title: 'Block Library',
-    content:
-      'Browse all available blocks and triggers. Drag them onto the canvas to build your workflow step by step.',
-    placement: 'bottom',
-    disableBeacon: true,
-    spotlightPadding: 0,
-  },
-  {
-    target: '[data-tour="tab-editor"]',
-    title: 'Block Editor',
-    content:
-      'Click any block on the canvas to configure it here. Set inputs, credentials, and fine-tune behavior.',
-    placement: 'bottom',
-    disableBeacon: true,
-    spotlightPadding: 0,
-  },
-  {
-    target: '[data-tour="deploy-run"]',
-    title: 'Deploy & Run',
-    content:
-      'Deploy your workflow as an API, webhook, schedule, or chat widget. Then hit Run to test it out.',
-    placement: 'bottom',
-    disableBeacon: true,
-  },
-  {
-    target: '[data-tour="workflow-controls"]',
-    title: 'Canvas Controls',
-    content:
-      'Switch between pointer and hand mode, undo or redo changes, and fit the canvas to your view.',
-    placement: 'top',
-    spotlightPadding: 0,
-    disableBeacon: true,
-  },
-]
diff --git a/apps/sim/app/workspace/[workspaceId]/components/product-tour/workflow-tour.tsx b/apps/sim/app/workspace/[workspaceId]/components/product-tour/workflow-tour.tsx
deleted file mode 100644
index d9c7f334549..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/components/product-tour/workflow-tour.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-'use client'
-
-import { useMemo } from 'react'
-import dynamic from 'next/dynamic'
-import type { TourState } from '@/app/workspace/[workspaceId]/components/product-tour/tour-shared'
-import {
-  getSharedJoyrideProps,
-  TourStateContext,
-  TourTooltipAdapter,
-} from '@/app/workspace/[workspaceId]/components/product-tour/tour-shared'
-import { useTour } from '@/app/workspace/[workspaceId]/components/product-tour/use-tour'
-import { workflowTourSteps } from '@/app/workspace/[workspaceId]/components/product-tour/workflow-tour-steps'
-
-const Joyride = dynamic(() => import('react-joyride'), {
-  ssr: false,
-})
-
-export const START_WORKFLOW_TOUR_EVENT = 'start-workflow-tour'
-
-/**
- * Workflow tour that covers the canvas, blocks, copilot, and deployment.
- * Triggered via "Take a tour" in the sidebar menu.
- */
-export function WorkflowTour() {
-  const { run, stepIndex, tourKey, isTooltipVisible, isEntrance, handleCallback } = useTour({
-    steps: workflowTourSteps,
-    triggerEvent: START_WORKFLOW_TOUR_EVENT,
-    tourName: 'Workflow tour',
-    tourType: 'workflow',
-  })
-
-  const tourState = useMemo<TourState>(
-    () => ({
-      isTooltipVisible,
-      isEntrance,
-      totalSteps: workflowTourSteps.length,
-    }),
-    [isTooltipVisible, isEntrance]
-  )
-
-  return (
-    <TourStateContext.Provider value={tourState}>
-      <Joyride
-        key={tourKey}
-        steps={workflowTourSteps}
-        run={run}
-        stepIndex={stepIndex}
-        callback={handleCallback}
-        continuous
-        disableScrolling
-        disableScrollParentFix
-        disableOverlayClose
-        spotlightPadding={1}
-        tooltipComponent={TourTooltipAdapter}
-        {...getSharedJoyrideProps({ spotlightBorderRadius: 6 })}
-      />
-    </TourStateContext.Provider>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
index 931b59ea15a..ae9045b370c 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
@@ -309,7 +309,7 @@ export const ResourceTable = memo(function ResourceTable({
                   return (
                     <th
                       key={col.id}
-                      className='h-10 px-6 py-1.5 text-left align-middle font-base text-[var(--text-muted)] text-caption'
+                      className='h-10 px-6 py-1.5 text-left align-middle text-[var(--text-muted)] text-caption'
                     >
                       {col.header}
                     </th>
@@ -321,7 +321,7 @@ export const ResourceTable = memo(function ResourceTable({
                   <th key={col.id} className='h-10 px-4 py-1.5 text-left align-middle'>
                     <Button
                       variant='subtle'
-                      className='px-2 py-1 font-base text-[var(--text-muted)] hover-hover:text-[var(--text-muted)]'
+                      className='px-2 py-1 text-[var(--text-muted)] hover-hover:text-[var(--text-muted)]'
                       onClick={() =>
                         handleSort(
                           col.id,
@@ -703,7 +703,7 @@ const DataTableSkeleton = memo(function DataTableSkeleton({
               {columns.map((col) => (
                 <th
                   key={col.id}
-                  className='h-10 px-6 py-2.5 text-left align-middle font-base text-[var(--text-muted)]'
+                  className='h-10 px-6 py-2.5 text-left align-middle text-[var(--text-muted)]'
                 >
                   <div className='flex min-h-[20px] items-center'>
                     <Skeleton className='h-[12px] w-[56px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/components/task-status-dot.tsx b/apps/sim/app/workspace/[workspaceId]/components/task-status-dot.tsx
new file mode 100644
index 00000000000..f2cd5120869
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/components/task-status-dot.tsx
@@ -0,0 +1,61 @@
+import type { SVGProps } from 'react'
+import { cn } from '@/lib/core/utils/cn'
+
+type TaskStatus = 'active' | 'unread' | 'done'
+
+const STATUS_COLOR_CLASS: Record<TaskStatus, string> = {
+  active: 'text-yellow-500',
+  unread: 'text-[var(--brand-accent)]',
+  done: 'text-[var(--text-icon)]',
+}
+
+interface TaskStatusDotProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {
+  isActive?: boolean
+  isUnread?: boolean
+}
+
+/**
+ * Linear-style task status indicator.
+ *
+ * - **active** — outlined ring with a play wedge (in progress).
+ * - **unread** — outlined ring with a half-pie fill (started, awaiting attention).
+ * - **done** — filled disc with an inverse-color check (settled).
+ *
+ * Renders as a 16×16 SVG so it slots into rows beside other 16/14px row icons.
+ * Override size via `className` (e.g. `h-[14px] w-[14px]`) — the SVG scales.
+ */
+export function TaskStatusDot({ isActive, isUnread, className, ...props }: TaskStatusDotProps) {
+  const status: TaskStatus = isActive ? 'active' : isUnread ? 'unread' : 'done'
+
+  return (
+    <svg
+      aria-hidden='true'
+      viewBox='0 0 16 16'
+      fill='none'
+      className={cn('h-[16px] w-[16px] flex-shrink-0', STATUS_COLOR_CLASS[status], className)}
+      {...props}
+    >
+      {status === 'done' ? (
+        <>
+          <circle cx='8' cy='8' r='7' fill='currentColor' />
+          <path
+            d='M4.75 8.25 L6.85 10.35 L11.25 5.95'
+            stroke='var(--text-inverse)'
+            strokeWidth='1.5'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </>
+      ) : (
+        <>
+          <circle cx='8' cy='8' r='6.5' stroke='currentColor' strokeWidth='1.5' />
+          {status === 'active' ? (
+            <path d='M6.75 5.5 L10.5 8 L6.75 10.5 Z' fill='currentColor' />
+          ) : (
+            <path d='M8 3.25 A 4.75 4.75 0 0 1 8 12.75 Z' fill='currentColor' />
+          )}
+        </>
+      )}
+    </svg>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/action-bar/action-bar.tsx
index 125184647b9..f93fe046782 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/action-bar/action-bar.tsx
@@ -3,7 +3,6 @@
 import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
 import {
   Button,
-  Download,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -12,6 +11,7 @@ import {
   Folder,
   Tooltip,
   Trash2,
+  Upload,
 } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import type { MoveOptionNode } from '@/app/workspace/[workspaceId]/files/move-options'
@@ -64,7 +64,7 @@ export function FilesActionBar({
                         disabled={isLoading}
                         className='hover-hover:!text-[var(--text-inverse)] size-[28px] rounded-lg bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
                       >
-                        <Download className='size-[12px]' />
+                        <Upload className='size-[12px]' />
                       </Button>
                     </Tooltip.Trigger>
                     <Tooltip.Content side='top'>Download</Tooltip.Content>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-row-context-menu/file-row-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-row-context-menu/file-row-context-menu.tsx
index 1d545d0b9eb..42a45cc801a 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-row-context-menu/file-row-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-row-context-menu/file-row-context-menu.tsx
@@ -2,7 +2,6 @@
 
 import { memo } from 'react'
 import {
-  Download,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -16,6 +15,7 @@ import {
   FolderInput,
   Pencil,
   Trash2,
+  Upload,
 } from '@/components/emcn'
 import type { MoveOptionNode } from '@/app/workspace/[workspaceId]/files/move-options'
 import { renderMoveOption } from '@/app/workspace/[workspaceId]/files/move-options'
@@ -73,7 +73,7 @@ export const FileRowContextMenu = memo(function FileRowContextMenu({
         )}
         {onDownload && (
           <DropdownMenuItem onSelect={onDownload}>
-            <Download />
+            <Upload />
             {isMultiSelect ? `Download ${selectedCount} items` : 'Download'}
           </DropdownMenuItem>
         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/editor-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/editor-context-menu.tsx
index 77b5ed2cfdd..27ed6d8464c 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/editor-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/editor-context-menu.tsx
@@ -9,7 +9,7 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '@/components/emcn'
-import { Clipboard, Copy, Search, SelectAll } from '@/components/emcn/icons'
+import { Clipboard, Duplicate, Search, SelectAll } from '@/components/emcn/icons'
 
 interface EditorContextMenuProps {
   isOpen: boolean
@@ -68,12 +68,12 @@ export function EditorContextMenu({
           </DropdownMenuItem>
         )}
         <DropdownMenuItem disabled={!hasSelection} onSelect={onCopy}>
-          <Copy />
+          <Duplicate />
           Copy
           <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
         </DropdownMenuItem>
         <DropdownMenuItem onSelect={onCopyAll}>
-          <Copy />
+          <Duplicate />
           Copy all
         </DropdownMenuItem>
         {canEdit && (
diff --git a/apps/sim/app/workspace/[workspaceId]/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
index ec1147a8fee..6bb305e9811 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/files.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
@@ -9,7 +9,6 @@ import {
   Columns2,
   Combobox,
   type ComboboxOption,
-  Download,
   Eye,
   File as FilesIcon,
   Folder,
@@ -1041,7 +1040,7 @@ export function Files() {
             }
           : undefined,
         dropdownItems: [
-          { label: 'Download', icon: Download, onClick: handleDownloadSelected },
+          { label: 'Download', icon: Upload, onClick: handleDownloadSelected },
           ...(canEdit
             ? [
                 { label: 'Rename', icon: Pencil, onClick: handleStartHeaderRename },
@@ -1424,7 +1423,7 @@ export function Files() {
           : []),
       {
         label: 'Download',
-        icon: Download,
+        icon: Upload,
         onClick: handleDownloadSelected,
       },
       ...(canEdit
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/chat-context-kind-registry.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/chat-context-kind-registry.tsx
index 0ba36377e7f..f6652432733 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/chat-context-kind-registry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/chat-context-kind-registry.tsx
@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react'
 import {
-  Blimp,
   Database,
   Folder as FolderIcon,
   Library,
   Table as TableIcon,
+  Task,
 } from '@/components/emcn/icons'
 import { getDocumentIcon } from '@/components/icons/document-icons'
 import { cn } from '@/lib/core/utils/cn'
@@ -75,7 +75,7 @@ export const CHAT_CONTEXT_KIND_REGISTRY: Record<ChatContextKind, ChatContextKind
   },
   past_chat: {
     label: 'Past chat',
-    renderIcon: ({ className }) => <Blimp className={className} />,
+    renderIcon: ({ className }) => <Task className={className} />,
   },
   logs: {
     label: 'Logs',
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/credits-chip/credits-chip.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/credits-chip/credits-chip.tsx
new file mode 100644
index 00000000000..da13310ce9d
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/credits-chip/credits-chip.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { Credit } from '@/components/emcn/icons'
+import { formatCredits } from '@/lib/billing/credits/conversion'
+import { isBillingEnabled } from '@/app/workspace/[workspaceId]/settings/navigation'
+import { useSubscriptionData } from '@/hooks/queries/subscription'
+import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
+
+export function CreditsChip() {
+  if (!isBillingEnabled) return null
+
+  return <CreditsChipInner />
+}
+
+function CreditsChipInner() {
+  const { data, isLoading } = useSubscriptionData()
+  const { navigateToSettings } = useSettingsNavigation()
+
+  if (isLoading || !data?.data) return null
+
+  const chipLabel = formatCredits(data.data.creditBalance)
+
+  return (
+    <button
+      type='button'
+      aria-label='Manage subscription'
+      onClick={() => navigateToSettings({ section: 'subscription' })}
+      className='group mx-0.5 inline-flex h-[30px] items-center gap-1.5 rounded-lg px-2 transition-colors hover-hover:bg-[var(--surface-active)]'
+    >
+      <Credit className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+      <span className='text-[var(--text-body)] text-sm'>{chipLabel}</span>
+    </button>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/credits-chip/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/credits-chip/index.ts
new file mode 100644
index 00000000000..ba8f8d5aee4
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/credits-chip/index.ts
@@ -0,0 +1 @@
+export { CreditsChip } from './credits-chip'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/index.ts
index 654b0d573bd..aea7fb609c4 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/index.ts
@@ -1,5 +1,12 @@
 export { ChatMessageAttachments } from './chat-message-attachments'
+export { ContextMentionIcon } from './context-mention-icon'
+export { CreditsChip } from './credits-chip'
+export {
+  assistantMessageHasRenderableContent,
+  MessageContent,
+} from './message-content'
 export { MothershipChat } from './mothership-chat/mothership-chat'
 export { MothershipView } from './mothership-view'
-export { TemplatePrompts } from './template-prompts'
+export { QueuedMessages } from './queued-messages'
+export { SuggestedActions } from './suggested-actions'
 export { UserInput } from './user-input'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
index 59b530aabee..eb15e800d0a 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
@@ -42,7 +42,6 @@ export function AgentGroup({
 }: AgentGroupProps) {
   const AgentIcon = getAgentIcon(agentName)
   const hasItems = items.length > 0
-  const isSubagent = agentName !== 'mothership'
   const toolItems = items.filter(
     (item): item is Extract<AgentGroupItem, { type: 'tool' }> => item.type === 'tool'
   )
@@ -82,14 +81,14 @@ export function AgentGroup({
           }}
           className='flex cursor-pointer items-center gap-2'
         >
-          <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
+          <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
             {isDelegating ? (
-              <PillsRing className='size-[15px] text-[var(--text-icon)]' animate />
+              <PillsRing className='h-[15px] w-[15px] text-[var(--text-icon)]' animate />
             ) : (
-              <AgentIcon className='size-[16px] text-[var(--text-icon)]' />
+              <AgentIcon className='h-[16px] w-[16px] text-[var(--text-icon)]' />
             )}
           </div>
-          <span className='font-base text-[var(--text-body)] text-sm'>{agentLabel}</span>
+          <span className='text-[var(--text-body)] text-sm'>{agentLabel}</span>
           <ChevronDown
             className={cn(
               'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
@@ -99,21 +98,21 @@ export function AgentGroup({
         </button>
       ) : (
         <div className='flex items-center gap-2'>
-          <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
+          <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
             {isDelegating ? (
-              <PillsRing className='size-[15px] text-[var(--text-icon)]' animate />
+              <PillsRing className='h-[15px] w-[15px] text-[var(--text-icon)]' animate />
             ) : (
-              <AgentIcon className='size-[16px] text-[var(--text-icon)]' />
+              <AgentIcon className='h-[16px] w-[16px] text-[var(--text-icon)]' />
             )}
           </div>
-          <span className='font-base text-[var(--text-body)] text-sm'>{agentLabel}</span>
+          <span className='text-[var(--text-body)] text-sm'>{agentLabel}</span>
         </div>
       )}
       {hasItems && (
         <Expandable expanded={expanded}>
           <ExpandableContent>
             <BoundedViewport isStreaming={isStreaming}>
-              <div className={cn('flex flex-col gap-1.5 py-0.5', isSubagent && 'opacity-60')}>
+              <div className='flex flex-col gap-1.5 py-0.5'>
                 {items.map((item, idx) => {
                   if (item.type === 'tool') {
                     return (
@@ -129,7 +128,7 @@ export function AgentGroup({
                   return (
                     <span
                       key={`text-${idx}`}
-                      className='pl-6 font-base text-[13px] text-[var(--text-secondary)] leading-[18px]'
+                      className='pl-6 text-[13px] text-[var(--text-secondary)] leading-[18px] opacity-60'
                     >
                       {item.content.trim()}
                     </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
index 081899a2b7b..5b6f1c56ce8 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
@@ -98,7 +98,7 @@ export function ToolCallItem({ toolName, displayTitle, status, streamingArgs }:
       <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
         <StatusIcon status={status} toolName={toolName} />
       </div>
-      <span className='font-base text-[13px] text-[var(--text-secondary)]'>
+      <span className='text-[13px] text-[var(--text-secondary)]'>
         {liveWorkspaceFileTitle || displayTitle}
       </span>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
index 6307683e347..001d1e376ee 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
@@ -21,7 +21,7 @@ import { useTablesList } from '@/hooks/queries/tables'
 import { useWorkflows } from '@/hooks/queries/workflows'
 import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 
-interface OptionsItemData {
+export interface OptionsItemData {
   title: string
   description: string
 }
@@ -392,7 +392,7 @@ export function SpecialTags({
 export function PendingTagIndicator() {
   return (
     <div className='flex animate-stream-fade-in items-center gap-2 py-2'>
-      <div className='grid size-[16px] grid-cols-2 gap-[1.5px]'>
+      <div className='grid h-[16px] w-[16px] grid-cols-2 gap-[1.5px]'>
         {THINKING_BLOCKS.map((block, i) => (
           <div
             key={i}
@@ -401,7 +401,7 @@ export function PendingTagIndicator() {
           />
         ))}
       </div>
-      <span className='font-base text-[var(--text-body)] text-sm'>Thinking…</span>
+      <span className='text-[var(--text-body)] text-sm'>Thinking…</span>
     </div>
   )
 }
@@ -429,7 +429,7 @@ function OptionsDisplay({ data, onSelect }: OptionsDisplayProps) {
           aria-expanded={expanded}
           className='flex items-center gap-2'
         >
-          <span className='font-base text-[var(--text-body)] text-sm'>Suggested follow-ups</span>
+          <span className='text-[var(--text-body)] text-sm'>Suggested follow-ups</span>
           <ChevronDown
             className={cn(
               'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
@@ -438,7 +438,7 @@ function OptionsDisplay({ data, onSelect }: OptionsDisplayProps) {
           />
         </button>
       ) : (
-        <span className='font-base text-[var(--text-body)] text-sm'>Suggested follow-ups</span>
+        <span className='text-[var(--text-body)] text-sm'>Suggested follow-ups</span>
       )}
       <Expandable expanded={expanded}>
         <ExpandableContent className='mt-1.5'>
@@ -458,11 +458,11 @@ function OptionsDisplay({ data, onSelect }: OptionsDisplayProps) {
                     i > 0 && 'border-t'
                   )}
                 >
-                  <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
-                    <span className='font-base text-[var(--text-icon)] text-sm'>{i + 1}</span>
+                  <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
+                    <span className='text-[var(--text-icon)] text-sm'>{i + 1}</span>
                   </div>
-                  <span className='flex-1 font-base text-[var(--text-body)] text-sm'>{title}</span>
-                  <ArrowRight className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+                  <span className='flex-1 text-[var(--text-body)] text-sm'>{title}</span>
+                  <ArrowRight className='h-[16px] w-[16px] shrink-0 text-[var(--text-icon)]' />
                 </button>
               )
             })}
@@ -545,7 +545,7 @@ export function WorkspaceResourceDisplay({
       <ContextMentionIcon
         context={context}
         workflowColor={workflowColor}
-        className='relative top-0.5 size-[12px] flex-shrink-0 text-[var(--text-icon)]'
+        className='relative top-0.5 h-[12px] w-[12px] flex-shrink-0 text-[var(--text-icon)]'
       />
       {resource.title}
     </>
@@ -616,10 +616,8 @@ function CredentialDisplay({ data }: { data: CredentialTagData }) {
         className='flex items-center gap-2 rounded-lg border border-[var(--divider)] px-3 py-2.5 transition-colors hover-hover:bg-[var(--surface-5)]'
       >
         {createElement(Icon, { className: 'h-[16px] w-[16px] shrink-0' })}
-        <span className='flex-1 font-base text-[var(--text-body)] text-sm'>
-          Connect {data.provider}
-        </span>
-        <ArrowRight className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+        <span className='flex-1 text-[var(--text-body)] text-sm'>Connect {data.provider}</span>
+        <ArrowRight className='h-[16px] w-[16px] shrink-0 text-[var(--text-icon)]' />
       </a>
     )
   }
@@ -634,11 +632,7 @@ function CredentialDisplay({ data }: { data: CredentialTagData }) {
 function MothershipErrorDisplay({ data }: { data: MothershipErrorTagData }) {
   const detail = data.code ? `${data.message} (${data.code})` : data.message
 
-  return (
-    <p className='font-base text-[13px] text-[var(--text-secondary)] italic leading-[20px]'>
-      {detail}
-    </p>
-  )
+  return <p className='text-[13px] text-[var(--text-secondary)] italic leading-[20px]'>{detail}</p>
 }
 
 function UsageUpgradeDisplay({ data }: { data: UsageUpgradeTagData }) {
@@ -650,7 +644,7 @@ function UsageUpgradeDisplay({ data }: { data: UsageUpgradeTagData }) {
     <div className='rounded-xl border border-amber-300/40 bg-amber-50/50 px-4 py-3 dark:border-amber-500/20 dark:bg-amber-950/20'>
       <div className='flex items-center gap-2'>
         <svg
-          className='size-4 shrink-0 text-amber-600 dark:text-amber-400'
+          className='h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400'
           viewBox='0 0 16 16'
           fill='none'
           xmlns='http://www.w3.org/2000/svg'
@@ -676,7 +670,7 @@ function UsageUpgradeDisplay({ data }: { data: UsageUpgradeTagData }) {
         className='mt-2 inline-flex items-center gap-1 font-[500] text-amber-700 text-small underline decoration-dashed underline-offset-2 transition-colors hover-hover:text-amber-900 dark:text-amber-300 dark:hover-hover:text-amber-200'
       >
         {buttonLabel}
-        <ArrowRight className='size-3' />
+        <ArrowRight className='h-3 w-3' />
       </a>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/thinking-block/thinking-block.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/thinking-block/thinking-block.tsx
index b0140778f27..ce7788cb136 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/thinking-block/thinking-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/thinking-block/thinking-block.tsx
@@ -100,7 +100,7 @@ export function ThinkingBlock({
         <div className='flex size-[16px] flex-shrink-0 items-center justify-center'>
           <BrainIcon className='size-[14px] text-[var(--text-icon)]' />
         </div>
-        <span className='font-base text-[var(--text-body)] text-sm'>{label}</span>
+        <span className='text-[var(--text-body)] text-sm'>{label}</span>
         <ChevronDown
           className={cn(
             'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
@@ -112,7 +112,7 @@ export function ThinkingBlock({
       <Expandable expanded={expanded}>
         <ExpandableContent>
           <div ref={panelRef} className='max-h-[110px] overflow-y-scroll pt-0.5 pr-2 pl-6'>
-            <div className='whitespace-pre-wrap break-words font-base text-[13px] text-[var(--text-secondary)] leading-[18px] opacity-60'>
+            <div className='whitespace-pre-wrap break-words text-[13px] text-[var(--text-secondary)] leading-[18px] opacity-60'>
               {content}
             </div>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
index 725d9f08df4..428b45158a7 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
@@ -2,6 +2,7 @@
 
 import { memo, useMemo } from 'react'
 import { Read as ReadTool, WorkspaceFile } from '@/lib/copilot/generated/tool-catalog-v1'
+import { isToolHiddenInUi } from '@/lib/copilot/tools/client/hidden-tools'
 import { resolveToolDisplay } from '@/lib/copilot/tools/client/store-utils'
 import { ClientToolCallState } from '@/lib/copilot/tools/client/tool-call-state'
 import type { ContentBlock, MothershipResource, OptionItem, ToolCallData } from '../../types'
@@ -17,11 +18,6 @@ import {
 } from './components'
 
 const FILE_SUBAGENT_ID = 'file'
-const HIDDEN_TOOL_NAMES = new Set([
-  'tool_search_tool_regex',
-  'load_agent_skill',
-  'load_custom_tool',
-])
 
 interface TextSegment {
   type: 'text'
@@ -79,10 +75,6 @@ function isToolResultRead(params?: Record<string, unknown>): boolean {
   return typeof path === 'string' && path.startsWith('internal/tool-results/')
 }
 
-function isHiddenToolCall(toolName: string | undefined): boolean {
-  return !!toolName && HIDDEN_TOOL_NAMES.has(toolName)
-}
-
 function formatToolName(name: string): string {
   return name
     .replace(/_v\d+$/, '')
@@ -309,7 +301,7 @@ function parseBlocks(blocks: ContentBlock[]): MessageSegment[] {
     if (block.type === 'tool_call') {
       if (!block.toolCall) continue
       const tc = block.toolCall
-      if (isHiddenToolCall(tc.name)) continue
+      if (isToolHiddenInUi(tc.name)) continue
       if (tc.name === ReadTool.id && isToolResultRead(tc.params)) continue
       const isDispatch = SUBAGENT_KEYS.has(tc.name) && !tc.calledBy
 
@@ -527,10 +519,8 @@ function MessageContentInner({
           case 'stopped':
             return (
               <div key={`stopped-${i}`} className='flex items-center gap-[8px]'>
-                <CircleStop className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-                <span className='font-base text-[14px] text-[var(--text-body)]'>
-                  Stopped by user
-                </span>
+                <CircleStop className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+                <span className='text-[14px] text-[var(--text-body)]'>Stopped by user</span>
               </div>
             )
         }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat-skeleton.tsx
index 6a940e8bc35..9e543a57e6e 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat-skeleton.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from '@/components/emcn'
 
 const LAYOUT_SKELETON_STYLES = {
   'mothership-view': {
-    content: 'mx-auto max-w-[42rem] space-y-6',
+    content: 'mx-auto max-w-[48rem] space-y-6',
     userRow: 'flex flex-col items-end gap-[6px] pt-3',
   },
   'copilot-view': {
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
index 809c190ffea..a52c35db2b9 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
@@ -61,13 +61,13 @@ const LAYOUT_STYLES = {
   'mothership-view': {
     scrollContainer:
       'min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-6 pt-4 pb-8 [scrollbar-gutter:stable_both-edges]',
-    content: 'mx-auto max-w-[42rem] space-y-6',
+    content: 'mx-auto max-w-[48rem] space-y-6',
     userRow: 'flex flex-col items-end gap-[6px] pt-3',
     attachmentWidth: 'max-w-[70%]',
     userBubble: 'max-w-[70%] overflow-hidden rounded-[16px] bg-[var(--surface-5)] px-3.5 py-2',
     assistantRow: 'group/msg',
     footer: 'flex-shrink-0 px-[24px] pb-[16px]',
-    footerInner: 'mx-auto max-w-[42rem]',
+    footerInner: 'mx-auto max-w-[48rem]',
   },
   'copilot-view': {
     scrollContainer: 'min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-3 pt-2 pb-4',
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
index 1bfc2a5043c..57c2fb3f265 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
@@ -3,9 +3,8 @@
 import { lazy, memo, Suspense, useEffect, useMemo, useRef } from 'react'
 import { createLogger } from '@sim/logger'
 import { useRouter } from 'next/navigation'
-import { Button, PlayOutline, Skeleton, Tooltip } from '@/components/emcn'
+import { Button, PlayOutline, Skeleton, Tooltip, Upload } from '@/components/emcn'
 import {
-  Download,
   FileX,
   Folder as FolderIcon,
   Library,
@@ -410,7 +409,7 @@ function EmbeddedTableActions({ workspaceId, tableId, tableName }: EmbeddedTable
             className={RESOURCE_TAB_ICON_BUTTON_CLASS}
             aria-label='Export table as CSV'
           >
-            <Download className={RESOURCE_TAB_ICON_CLASS} />
+            <Upload className={RESOURCE_TAB_ICON_CLASS} />
           </Button>
         </Tooltip.Trigger>
         <Tooltip.Content side='bottom'>
@@ -472,7 +471,7 @@ function EmbeddedFileActions({ workspaceId, fileId }: EmbeddedFileActionsProps)
             className={RESOURCE_TAB_ICON_BUTTON_CLASS}
             aria-label='Download file'
           >
-            <Download className={RESOURCE_TAB_ICON_CLASS} />
+            <Upload className={RESOURCE_TAB_ICON_CLASS} />
           </Button>
         </Tooltip.Trigger>
         <Tooltip.Content side='bottom'>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
index 73d312c42ef..477aa36e380 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
@@ -4,12 +4,12 @@ import { type ElementType, type ReactNode, useMemo } from 'react'
 import type { QueryClient } from '@tanstack/react-query'
 import { useParams } from 'next/navigation'
 import {
-  Blimp,
   Database,
   File as FileIcon,
   Folder as FolderIcon,
   Library,
   Table as TableIcon,
+  Task,
   TerminalWindow,
 } from '@/components/emcn/icons'
 import { WorkflowIcon } from '@/components/icons'
@@ -193,11 +193,11 @@ export const RESOURCE_REGISTRY: Record<MothershipResourceType, ResourceTypeConfi
   task: {
     type: 'task',
     label: 'Tasks',
-    icon: Blimp,
+    icon: Task,
     renderTabIcon: (_resource, className) => (
-      <Blimp className={cn(className, 'text-[var(--text-icon)]')} />
+      <Task className={cn(className, 'text-[var(--text-icon)]')} />
     ),
-    renderDropdownItem: (props) => <IconDropdownItem {...props} icon={Blimp} />,
+    renderDropdownItem: (props) => <DefaultDropdownItem {...props} />,
   },
   log: {
     type: 'log',
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/index.ts
new file mode 100644
index 00000000000..bedde2535f8
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/index.ts
@@ -0,0 +1 @@
+export { SuggestedActions } from './suggested-actions'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx
new file mode 100644
index 00000000000..c3208dc0309
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx
@@ -0,0 +1,297 @@
+'use client'
+
+import { type ComponentType, useEffect, useMemo, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { ArrowRight, ChevronDown, Expandable, ExpandableContent } from '@/components/emcn'
+import { Table } from '@/components/emcn/icons'
+import {
+  GithubIcon,
+  GmailIcon,
+  GoogleCalendarIcon,
+  HubspotIcon,
+  JiraIcon,
+  LinearIcon,
+  NotionIcon,
+  SalesforceIcon,
+  SlackIcon,
+} from '@/components/icons'
+import { cn } from '@/lib/core/utils/cn'
+import { useWorkspaceCredentials } from '@/hooks/queries/credentials'
+import { useOAuthConnections } from '@/hooks/queries/oauth/oauth-connections'
+
+type Icon = ComponentType<{ className?: string }>
+
+type Action =
+  | { kind: 'prompt'; id: string; label: string; prompt: string; icon: Icon }
+  | { kind: 'integration'; id: string; label: string; icon: Icon }
+
+interface PromptOption {
+  id: string
+  label: string
+  prompt: string
+  icon: Icon
+  providerId?: string
+}
+
+const TABLE_PROMPTS: readonly PromptOption[] = [
+  {
+    id: 'crm',
+    label: 'Create a CRM with sample data',
+    prompt: 'Create a CRM with sample data.',
+    icon: Table,
+  },
+  {
+    id: 'project-tracker',
+    label: 'Build a project tracker',
+    prompt: 'Build a project tracker table.',
+    icon: Table,
+  },
+  {
+    id: 'content-calendar',
+    label: 'Create a content calendar',
+    prompt: 'Create a content calendar table.',
+    icon: Table,
+  },
+  {
+    id: 'expense-tracker',
+    label: 'Build an expense tracker',
+    prompt: 'Build an expense tracker table.',
+    icon: Table,
+  },
+  {
+    id: 'bug-tracker',
+    label: 'Create a bug tracker',
+    prompt: 'Create a bug tracker table.',
+    icon: Table,
+  },
+]
+
+const INTEGRATION_PROMPTS: readonly PromptOption[] = [
+  {
+    id: 'gmail-auto-reply',
+    providerId: 'gmail',
+    icon: GmailIcon,
+    label: 'Build an auto-reply email agent',
+    prompt:
+      'Create a workflow that reads my Gmail inbox, identifies emails that need a response, and drafts contextual replies for each one. Schedule it to run every hour.',
+  },
+  {
+    id: 'slack-qa',
+    providerId: 'slack',
+    icon: SlackIcon,
+    label: 'Build a Slack Q&A bot',
+    prompt:
+      'Create a knowledge base connected to my Notion workspace. Then build a workflow that monitors Slack channels for questions and answers them with source citations.',
+  },
+  {
+    id: 'jira-search',
+    providerId: 'jira',
+    icon: JiraIcon,
+    label: 'Search across Jira tickets',
+    prompt:
+      'Create a knowledge base connected to my Jira project so all tickets and resolutions are searchable. Then build an agent I can ask questions about past work.',
+  },
+  {
+    id: 'notion-search',
+    providerId: 'notion',
+    icon: NotionIcon,
+    label: 'Search across Notion',
+    prompt:
+      'Create a knowledge base connected to my Notion workspace. Then build an agent I can ask questions and get answers with page links.',
+  },
+  {
+    id: 'github-pr-review',
+    providerId: 'github',
+    icon: GithubIcon,
+    label: 'Review pull requests automatically',
+    prompt:
+      'Build a workflow that reviews new GitHub pull requests against my style guide and posts review comments with specific suggestions.',
+  },
+  {
+    id: 'meeting-prep',
+    providerId: 'google_calendar',
+    icon: GoogleCalendarIcon,
+    label: 'Prep for meetings automatically',
+    prompt:
+      'Create an agent that checks my Google Calendar each morning, researches every attendee, and prepares a brief for each meeting.',
+  },
+  {
+    id: 'linear-search',
+    providerId: 'linear',
+    icon: LinearIcon,
+    label: 'Search across Linear issues',
+    prompt:
+      'Create a knowledge base connected to my Linear workspace. Then build an agent I can ask questions about past issues and decisions.',
+  },
+  {
+    id: 'gmail-triage',
+    providerId: 'gmail',
+    icon: GmailIcon,
+    label: 'Triage your email inbox',
+    prompt:
+      'Build a workflow that scans my Gmail inbox hourly, categorizes emails by urgency, drafts replies for routine messages, and Slacks me a prioritized summary.',
+  },
+  {
+    id: 'hubspot-search',
+    providerId: 'hubspot',
+    icon: HubspotIcon,
+    label: 'Search HubSpot deals',
+    prompt:
+      'Create a knowledge base connected to my HubSpot account. Then build an agent I can ask questions about deals, contacts, and activity.',
+  },
+  {
+    id: 'salesforce-search',
+    providerId: 'salesforce',
+    icon: SalesforceIcon,
+    label: 'Search across Salesforce',
+    prompt:
+      'Create a knowledge base connected to my Salesforce account. Then build an agent I can ask questions about deals, contacts, and notes.',
+  },
+]
+
+const EMPTY_CREDENTIALS: NonNullable<ReturnType<typeof useWorkspaceCredentials>['data']> = []
+const EMPTY_SERVICES: NonNullable<ReturnType<typeof useOAuthConnections>['data']> = []
+
+type ServiceInfo = NonNullable<ReturnType<typeof useOAuthConnections>['data']>[number]
+
+/** Returns up to `n` random items from the array (Fisher–Yates). */
+function sample<T>(arr: readonly T[], n: number): T[] {
+  const out = arr.slice()
+  for (let i = out.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[out[i], out[j]] = [out[j], out[i]]
+  }
+  return out.slice(0, n)
+}
+
+function toPromptAction(option: PromptOption): Action {
+  return {
+    kind: 'prompt',
+    id: option.id,
+    label: option.label,
+    prompt: option.prompt,
+    icon: option.icon,
+  }
+}
+
+function toIntegrationAction(service: ServiceInfo): Action {
+  return {
+    kind: 'integration',
+    id: `integrate-${service.providerId}`,
+    label: `Integrate with ${service.name}`,
+    icon: service.icon,
+  }
+}
+
+/**
+ * Initial actions rendered on first paint, before OAuth/credentials queries resolve.
+ * For users with no connections this is also the final result, so the section never
+ * flashes. Users with existing connections briefly see this before the effect below
+ * replaces it with personalized integrations.
+ */
+const INITIAL_ACTIONS: Action[] = [
+  { kind: 'integration', id: 'integrate-slack', label: 'Integrate with Slack', icon: SlackIcon },
+  { kind: 'integration', id: 'integrate-gmail', label: 'Integrate with Gmail', icon: GmailIcon },
+  toPromptAction(TABLE_PROMPTS.find((p) => p.id === 'crm')!),
+  toPromptAction(INTEGRATION_PROMPTS.find((p) => p.id === 'github-pr-review')!),
+]
+
+interface SuggestedActionsProps {
+  onSelectPrompt: (prompt: string) => void
+}
+
+export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
+  const { workspaceId } = useParams<{ workspaceId: string }>()
+  const router = useRouter()
+  const [expanded, setExpanded] = useState(true)
+
+  const { data: credentials = EMPTY_CREDENTIALS } = useWorkspaceCredentials({
+    workspaceId,
+    enabled: Boolean(workspaceId),
+  })
+  const { data: services = EMPTY_SERVICES } = useOAuthConnections()
+
+  const connectedProviders = useMemo(
+    () =>
+      new Set(
+        credentials
+          .filter((c) => c.type === 'oauth' || c.type === 'service_account')
+          .map((c) => c.providerId)
+          .filter((id): id is string => Boolean(id))
+      ),
+    [credentials]
+  )
+
+  const [actions, setActions] = useState<Action[]>(INITIAL_ACTIONS)
+
+  useEffect(() => {
+    if (services.length === 0 || connectedProviders.size === 0) return
+
+    const availableServices = services.filter((s) => !connectedProviders.has(s.providerId))
+    const integrations = sample(availableServices, 2).map(toIntegrationAction)
+
+    const integrationPool = INTEGRATION_PROMPTS.filter(
+      (p) => !p.providerId || !connectedProviders.has(p.providerId)
+    )
+    const [tablePick] = sample(TABLE_PROMPTS, 1)
+    const [integrationPick] = sample(
+      integrationPool.length > 0 ? integrationPool : INTEGRATION_PROMPTS,
+      1
+    )
+
+    setActions([...integrations, toPromptAction(tablePick), toPromptAction(integrationPick)])
+  }, [connectedProviders, services])
+
+  const handleSelect = (action: Action) => {
+    if (action.kind === 'prompt') {
+      onSelectPrompt(action.prompt)
+      return
+    }
+    router.push(`/workspace/${workspaceId}/integrations`)
+  }
+
+  return (
+    <div className='mx-auto mt-7 w-full max-w-[48rem]'>
+      <button
+        type='button'
+        onClick={() => setExpanded((prev) => !prev)}
+        aria-expanded={expanded}
+        className='flex items-center gap-2'
+      >
+        <span className='text-[var(--text-muted)] text-small'>Suggested actions</span>
+        <ChevronDown
+          className={cn(
+            'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
+            !expanded && '-rotate-90'
+          )}
+        />
+      </button>
+      <Expandable expanded={expanded}>
+        <ExpandableContent className='mt-2'>
+          <div className='flex flex-col'>
+            {actions.map((action, i) => {
+              const Icon = action.icon
+              return (
+                <button
+                  key={action.id}
+                  type='button'
+                  onClick={() => handleSelect(action)}
+                  className={cn(
+                    'flex items-center gap-2 border-[var(--divider)] px-2 py-2 text-left transition-colors hover-hover:bg-[var(--surface-5)]',
+                    i > 0 && 'border-t'
+                  )}
+                >
+                  <Icon className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+                  <span className='flex-1 truncate text-[var(--text-body)] text-sm'>
+                    {action.label}
+                  </span>
+                  <ArrowRight className='h-[16px] w-[16px] shrink-0 text-[var(--text-icon)]' />
+                </button>
+              )
+            })}
+          </div>
+        </ExpandableContent>
+      </Expandable>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/index.ts
deleted file mode 100644
index 17388866dc9..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type { Category, ModuleTag, Tag, TemplatePrompt } from './consts'
-export { CATEGORY_META, MODULE_META, TEMPLATES } from './consts'
-export { TemplatePrompts } from './template-prompts'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/template-prompts.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/template-prompts.tsx
deleted file mode 100644
index e7a0fa3b91f..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/template-prompts.tsx
+++ /dev/null
@@ -1,392 +0,0 @@
-'use client'
-
-import { type ComponentType, memo, type SVGProps } from 'react'
-import Image from 'next/image'
-import { AgentIcon, ScheduleIcon, StartIcon } from '@/components/icons'
-import type { Category, ModuleTag } from './consts'
-import { CATEGORY_META, TEMPLATES } from './consts'
-
-const FEATURED_TEMPLATES = TEMPLATES.filter((t) => t.featured)
-const EXTRA_TEMPLATES = TEMPLATES.filter((t) => !t.featured)
-
-function getGroupedExtras() {
-  const groups: { category: Category; label: string; templates: typeof TEMPLATES }[] = []
-  const byCategory = new Map<Category, typeof TEMPLATES>()
-
-  for (const t of EXTRA_TEMPLATES) {
-    const existing = byCategory.get(t.category)
-    if (existing) {
-      existing.push(t)
-    } else {
-      const arr = [t]
-      byCategory.set(t.category, arr)
-    }
-  }
-
-  for (const [key, meta] of Object.entries(CATEGORY_META)) {
-    const cat = key as Category
-    if (cat === 'popular') continue
-    const items = byCategory.get(cat)
-    if (items?.length) {
-      groups.push({ category: cat, label: meta.label, templates: items })
-    }
-  }
-
-  return groups
-}
-
-const GROUPED_EXTRAS = getGroupedExtras()
-
-const MINI_TABLE_DATA = [
-  ['Sarah Chen', 'sarah@acme.co', 'Acme Inc', 'Qualified'],
-  ['James Park', 'james@globex.io', 'Globex', 'New'],
-  ['Maria Santos', 'maria@initech.com', 'Initech', 'Contacted'],
-  ['Alex Kim', 'alex@umbrella.co', 'Umbrella', 'Qualified'],
-  ['Emma Wilson', 'emma@stark.io', 'Stark Ind', 'New'],
-] as const
-
-const STATUS_DOT: Record<string, string> = {
-  Qualified: 'bg-emerald-400',
-  New: 'bg-blue-400',
-  Contacted: 'bg-amber-400',
-}
-
-const MINI_KB_DATA = [
-  ['product-specs.pdf', '4.2 MB', '12.4k', 'Enabled'],
-  ['eng-handbook.md', '1.8 MB', '8.2k', 'Enabled'],
-  ['api-reference.json', '920 KB', '4.1k', 'Enabled'],
-  ['release-notes.md', '340 KB', '2.8k', 'Enabled'],
-  ['onboarding.pdf', '2.1 MB', '6.5k', 'Processing'],
-] as const
-
-const KB_BADGE: Record<string, string> = {
-  Enabled: 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400',
-  Processing: 'bg-violet-500/15 text-violet-700 dark:text-violet-400',
-}
-
-interface WorkflowBlockDef {
-  color: string
-  name: string
-  icon: ComponentType<SVGProps<SVGSVGElement>>
-  rows: { title: string; value: string }[]
-}
-
-function PreviewTable() {
-  return (
-    <div className='flex h-full w-full flex-col overflow-hidden bg-[var(--surface-2)]'>
-      <div className='flex shrink-0 items-center border-[var(--border-1)] border-b bg-[var(--surface-3)]'>
-        {['Name', 'Email', 'Company', 'Status'].map((col) => (
-          <div key={col} className='flex flex-1 items-center px-1.5 py-[5px]'>
-            <span className='font-medium text-[7px] text-[var(--text-tertiary)]'>{col}</span>
-          </div>
-        ))}
-      </div>
-      {MINI_TABLE_DATA.map((row, i) => (
-        <div key={i} className='flex items-center border-[var(--border-1)] border-b'>
-          {row.map((cell, j) => (
-            <div key={j} className='flex flex-1 items-center px-1.5 py-[2.5px]'>
-              {j === 3 ? (
-                <div className='flex items-center gap-[3px]'>
-                  <div className={`h-[4px] w-[4px] shrink-0 rounded-full ${STATUS_DOT[cell]}`} />
-                  <span className='text-[6.5px] text-[var(--text-tertiary)]'>{cell}</span>
-                </div>
-              ) : (
-                <span
-                  className={`truncate text-[7px] leading-[1.2] ${j === 0 ? 'font-medium text-[var(--text-body)]' : 'text-[var(--text-tertiary)]'}`}
-                >
-                  {cell}
-                </span>
-              )}
-            </div>
-          ))}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function PreviewKnowledge() {
-  return (
-    <div className='flex h-full w-full flex-col overflow-hidden bg-[var(--surface-2)]'>
-      <div className='flex shrink-0 items-center border-[var(--border-1)] border-b bg-[var(--surface-3)]'>
-        {['Name', 'Size', 'Tokens', 'Status'].map((col) => (
-          <div key={col} className='flex flex-1 items-center px-1.5 py-[5px]'>
-            <span className='font-medium text-[7px] text-[var(--text-tertiary)]'>{col}</span>
-          </div>
-        ))}
-      </div>
-      {MINI_KB_DATA.map((row, i) => (
-        <div key={i} className='flex items-center border-[var(--border-1)] border-b'>
-          <div className='flex flex-1 items-center px-1.5 py-[2.5px]'>
-            <span className='truncate font-medium text-[7px] text-[var(--text-body)] leading-[1.2]'>
-              {row[0]}
-            </span>
-          </div>
-          <div className='flex flex-1 items-center px-1.5 py-[2.5px]'>
-            <span className='text-[7px] text-[var(--text-tertiary)] leading-[1.2]'>{row[1]}</span>
-          </div>
-          <div className='flex flex-1 items-center px-1.5 py-[2.5px]'>
-            <span className='text-[7px] text-[var(--text-tertiary)] leading-[1.2]'>{row[2]}</span>
-          </div>
-          <div className='flex flex-1 items-center px-1.5 py-[2.5px]'>
-            <span className={`inline-block rounded-full px-1 py-px text-[6px] ${KB_BADGE[row[3]]}`}>
-              {row[3]}
-            </span>
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function PreviewFile() {
-  return (
-    <div className='flex h-full w-full flex-col overflow-hidden bg-[var(--surface-2)]'>
-      <div className='flex shrink-0 items-center gap-1 border-[var(--border-1)] border-b px-2.5 py-[5px]'>
-        <span className='text-[7px] text-[var(--text-tertiary)]'>Files</span>
-        <span className='text-[7px] text-[var(--text-tertiary)] opacity-40'>/</span>
-        <span className='font-medium text-[7px] text-[var(--text-body)]'>meeting-notes.md</span>
-      </div>
-      <div className='flex-1 overflow-hidden px-2.5 py-1.5'>
-        <p className='font-semibold text-[8px] text-[var(--text-body)]'>Meeting Notes</p>
-        <p className='mt-1 font-medium text-[7px] text-[var(--text-body)]'>Action Items</p>
-        <p className='mt-[1px] text-[6.5px] text-[var(--text-tertiary)]'>
-          • Review Q1 metrics with Sarah
-        </p>
-        <p className='text-[6.5px] text-[var(--text-tertiary)]'>• Update API documentation</p>
-        <p className='text-[6.5px] text-[var(--text-tertiary)]'>
-          • Schedule design review for v2.0
-        </p>
-        <p className='mt-1 font-medium text-[7px] text-[var(--text-body)]'>Discussion Points</p>
-        <p className='mt-[1px] text-[6.5px] text-[var(--text-tertiary)]'>
-          The team agreed to prioritize the new onboarding flow…
-        </p>
-        <p className='mt-1 font-medium text-[7px] text-[var(--text-body)]'>Next Steps</p>
-        <p className='mt-[1px] text-[6.5px] text-[var(--text-tertiary)]'>
-          Follow up with engineering on the API v2 migration.
-        </p>
-      </div>
-    </div>
-  )
-}
-
-const WorkflowMiniBlock = memo(function WorkflowMiniBlock({
-  color,
-  name,
-  icon: Icon,
-  rows,
-}: WorkflowBlockDef) {
-  const hasRows = rows.length > 0
-  return (
-    <div className='w-[76px] rounded-sm border border-[var(--border-1)] bg-[var(--white)] dark:bg-[var(--surface-4)]'>
-      <div
-        className={`flex items-center gap-1 px-[5px] py-[3px] ${hasRows ? 'border-[var(--border-1)] border-b' : ''}`}
-      >
-        <div
-          className='flex size-[11px] shrink-0 items-center justify-center rounded-[3px]'
-          style={{ backgroundColor: color }}
-        >
-          <Icon className='size-[7px] text-white' />
-        </div>
-        <span className='truncate font-medium text-[6.5px] text-[var(--text-body)]'>{name}</span>
-      </div>
-      {rows.map((row) => (
-        <div key={row.title} className='flex items-center gap-[3px] px-[5px] py-0.5'>
-          <span className='shrink-0 text-[5.5px] text-[var(--text-tertiary)]'>{row.title}</span>
-          <span className='ml-auto truncate text-[5.5px] text-[var(--text-body)]'>{row.value}</span>
-        </div>
-      ))}
-    </div>
-  )
-})
-
-function buildWorkflowBlocks(template: (typeof TEMPLATES)[number]): WorkflowBlockDef[] {
-  const modules = template.modules
-  const toolName = template.title.split(' ')[0]
-  const hasAgent = modules.includes('agent')
-  const isScheduled = modules.includes('scheduled')
-
-  const starter: WorkflowBlockDef = isScheduled
-    ? {
-        color: '#6366F1',
-        name: 'Schedule',
-        icon: ScheduleIcon,
-        rows: [{ title: 'Cron', value: '0 9 * * 1' }],
-      }
-    : {
-        color: '#2FB3FF',
-        name: 'Starter',
-        icon: StartIcon,
-        rows: [{ title: 'Trigger', value: 'Manual' }],
-      }
-
-  const agent: WorkflowBlockDef = {
-    color: '#802FFF',
-    name: 'Agent',
-    icon: AgentIcon,
-    rows: [{ title: 'Model', value: 'gpt-4o' }],
-  }
-
-  const tool: WorkflowBlockDef = {
-    color: '#3B3B3B',
-    name: toolName,
-    icon: template.icon,
-    rows: [{ title: 'Action', value: 'Run' }],
-  }
-
-  if (hasAgent) return [starter, agent, tool]
-  return [starter, tool]
-}
-
-const BLOCK_W = 76
-const EDGE_W = 14
-
-function PreviewWorkflow({ template }: { template: (typeof TEMPLATES)[number] }) {
-  const blocks = buildWorkflowBlocks(template)
-  const goesUp = template.title.charCodeAt(0) % 2 === 0
-
-  const twoBlock = blocks.length === 2
-  const offsets = twoBlock
-    ? goesUp
-      ? [-10, 10]
-      : [10, -10]
-    : goesUp
-      ? [-12, 12, -12]
-      : [12, -12, 12]
-
-  const totalW = blocks.length * BLOCK_W + (blocks.length - 1) * EDGE_W
-
-  return (
-    <div className='flex h-full w-full items-center justify-center bg-[var(--surface-2)]'>
-      <div className='relative' style={{ width: totalW, height: 70 }}>
-        <svg
-          className='pointer-events-none absolute top-0 left-0 z-0'
-          width={totalW}
-          height={70}
-          fill='none'
-          style={{ overflow: 'visible' }}
-        >
-          {blocks.slice(1).map((_, i) => {
-            const x1 = i * (BLOCK_W + EDGE_W) + BLOCK_W
-            const y1 = 35 + offsets[i]
-            const x2 = (i + 1) * (BLOCK_W + EDGE_W)
-            const y2 = 35 + offsets[i + 1]
-            const midX = (x1 + x2) / 2
-            return (
-              <path
-                key={i}
-                d={`M${x1},${y1} C${midX},${y1} ${midX},${y2} ${x2},${y2}`}
-                className='stroke-[var(--text-icon)]'
-                strokeWidth={1}
-                opacity={0.3}
-              />
-            )
-          })}
-        </svg>
-
-        {blocks.map((block, i) => {
-          const x = i * (BLOCK_W + EDGE_W)
-          const yCenter = 35 + offsets[i]
-          return (
-            <div key={block.name} className='absolute z-10' style={{ left: x, top: yCenter - 20 }}>
-              <WorkflowMiniBlock {...block} />
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-function TemplatePreview({
-  modules,
-  template,
-}: {
-  modules: ModuleTag[]
-  template: (typeof TEMPLATES)[number]
-}) {
-  if (modules.includes('tables')) return <PreviewTable />
-  if (modules.includes('knowledge-base')) return <PreviewKnowledge />
-  if (modules.includes('files')) return <PreviewFile />
-  return <PreviewWorkflow template={template} />
-}
-
-interface TemplatePromptsProps {
-  onSelect: (prompt: string) => void
-}
-
-export function TemplatePrompts({ onSelect }: TemplatePromptsProps) {
-  return (
-    <div className='flex flex-col gap-6 lg:gap-8'>
-      <div className='grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-4 lg:grid-cols-3'>
-        {FEATURED_TEMPLATES.map((template) => (
-          <TemplateCard key={template.title} template={template} onSelect={onSelect} />
-        ))}
-      </div>
-
-      {GROUPED_EXTRAS.map((group) => (
-        <div
-          key={group.category}
-          className='flex flex-col gap-3'
-          style={{ contentVisibility: 'auto', containIntrinsicSize: 'auto 200px' }}
-        >
-          <h3 className='font-medium text-[var(--text-secondary)] text-small'>{group.label}</h3>
-          <div className='grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-4 lg:grid-cols-3'>
-            {group.templates.map((template) => (
-              <TemplateCard key={template.title} template={template} onSelect={onSelect} />
-            ))}
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-interface TemplateCardProps {
-  template: (typeof TEMPLATES)[number]
-  onSelect: (prompt: string) => void
-}
-
-const TemplateCard = memo(function TemplateCard({ template, onSelect }: TemplateCardProps) {
-  const Icon = template.icon
-
-  return (
-    <button
-      type='button'
-      onClick={() => {
-        import('@/lib/posthog/client')
-          .then(({ captureClientEvent }) => {
-            captureClientEvent('template_used', {
-              template_title: template.title,
-              template_modules: template.modules.join(' '),
-            })
-          })
-          .catch(() => {})
-        onSelect(template.prompt)
-      }}
-      aria-label={`Select template: ${template.title}`}
-      className='group flex cursor-pointer flex-col text-left'
-    >
-      <div className='overflow-hidden rounded-lg border border-[var(--border-1)] transition-colors group-hover:bg-[var(--surface-2)]'>
-        <div className='relative h-[120px] w-full overflow-hidden'>
-          {template.image ? (
-            <Image
-              src={template.image}
-              alt={template.title}
-              fill
-              unoptimized
-              sizes='(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw'
-              className='object-cover transition-transform duration-200 group-hover:scale-[1.02]'
-            />
-          ) : (
-            <TemplatePreview modules={template.modules} template={template} />
-          )}
-        </div>
-        <div className='flex items-center gap-1.5 border-[var(--border-1)] border-t bg-[var(--white)] px-3 py-2 transition-colors group-hover:bg-[var(--surface-2)] dark:bg-[var(--surface-4)]'>
-          <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />
-          <span className='text-[var(--text-body)] text-small'>{template.title}</span>
-        </div>
-      </div>
-    </button>
-  )
-})
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button.tsx
index 344a0f84c72..00ca759cd25 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mic-button.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import React from 'react'
-import { Mic } from 'lucide-react'
+import { Mic } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 
 interface MicButtonProps {
@@ -22,7 +22,7 @@ export const MicButton = React.memo(function MicButton({ isListening, onToggle }
       )}
       title={isListening ? 'Stop listening' : 'Voice input'}
     >
-      <Mic className='size-[16px]' strokeWidth={2} />
+      <Mic className='h-[16px] w-[16px]' />
     </button>
   )
 })
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx
index dcdaf517ebe..a226b153c43 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown.tsx
@@ -97,7 +97,6 @@ export const PlusMenuDropdown = React.memo(
         items.filter((item) => item.name.toLowerCase().includes(q)).map((item) => ({ type, item }))
       )
     }, [isMention, mentionQuery, search, availableResources])
-    const isRootMenu = !isMention && filteredItems === null
 
     const filteredItemsRef = useRef(filteredItems)
     filteredItemsRef.current = filteredItems
@@ -257,7 +256,6 @@ export const PlusMenuDropdown = React.memo(
             collisionPadding={8}
             className={cn(
               'flex flex-col overflow-hidden',
-              isRootMenu && 'max-h-none',
               // Plus-click shows short fixed labels (Workflows, Tables, …) — let it size
               // to its content via the emcn DropdownMenuContent default max-w.
               // Mention mode renders resource names directly, so widen for breathing room.
@@ -279,7 +277,7 @@ export const PlusMenuDropdown = React.memo(
                 onKeyDown={handleSearchKeyDown}
               />
             )}
-            <div className='min-h-0 flex-1 overflow-y-auto'>
+            <div className='min-h-0 flex-1 overflow-y-auto overscroll-none'>
               {/* Always-mounted; swapping this subtree with filtered results makes Radix's
                   menu FocusScope steal focus from the search input back to the content root. */}
               <div hidden={filteredItems !== null}>
@@ -287,7 +285,7 @@ export const PlusMenuDropdown = React.memo(
                   <DropdownMenuSub>
                     <DropdownMenuSubTrigger>
                       <div
-                        className='size-[14px] flex-shrink-0 rounded-[3px] border-[2px]'
+                        className='h-[14px] w-[14px] flex-shrink-0 rounded-[3px] border-[2px]'
                         style={{
                           backgroundColor: '#808080',
                           borderColor: '#80808060',
@@ -330,7 +328,7 @@ export const PlusMenuDropdown = React.memo(
                     return (
                       <DropdownMenuSub key={type}>
                         <DropdownMenuSubTrigger>
-                          <Icon className='size-[14px]' />
+                          <Icon className='h-[14px] w-[14px]' />
                           <span>{config.label}</span>
                         </DropdownMenuSubTrigger>
                         <DropdownMenuSubContent className='max-w-[min(300px,calc(100vw-32px))]'>
@@ -387,10 +385,10 @@ export const PlusMenuDropdown = React.memo(
           ref={buttonRef}
           type='button'
           onClick={() => doOpen()}
-          className='flex size-[28px] cursor-pointer items-center justify-center rounded-full border border-[var(--border-1)] transition-colors hover:bg-[var(--surface-hover)]'
+          className='flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-[var(--surface-hover)]'
           title='Add attachments or resources'
         >
-          <Plus className='size-[16px] text-[var(--text-icon)]' />
+          <Plus className='h-[16px] w-[16px] text-[var(--text-icon)]' />
         </button>
       </>
     )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/send-button.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/send-button.tsx
index b48d33dc71d..3eedfd22d3f 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/send-button.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/send-button.tsx
@@ -1,8 +1,7 @@
 'use client'
 
 import React from 'react'
-import { ArrowUp } from 'lucide-react'
-import { Button } from '@/components/emcn'
+import { ArrowUp, Button } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import {
   SEND_BUTTON_ACTIVE,
@@ -32,7 +31,7 @@ export const SendButton = React.memo(function SendButton({
         title='Stop generation'
       >
         <svg
-          className='block size-[14px] fill-white dark:fill-black'
+          className='block h-[14px] w-[14px] fill-white dark:fill-black'
           viewBox='0 0 24 24'
           xmlns='http://www.w3.org/2000/svg'
         >
@@ -48,7 +47,7 @@ export const SendButton = React.memo(function SendButton({
       disabled={!canSubmit}
       className={cn(SEND_BUTTON_BASE, canSubmit ? SEND_BUTTON_ACTIVE : SEND_BUTTON_DISABLED)}
     >
-      <ArrowUp className='block size-[16px] text-white dark:text-black' strokeWidth={2.25} />
+      <ArrowUp className='block h-[16px] w-[16px] text-white dark:text-black' />
     </Button>
   )
 })
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index 305bd53c0c7..9aa74ce5b1e 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -12,14 +12,12 @@ import {
   useState,
 } from 'react'
 import { createLogger } from '@sim/logger'
-import { Paperclip } from 'lucide-react'
 import { useParams } from 'next/navigation'
-import { Button, Tooltip } from '@/components/emcn'
+import { Button, Paperclip, Tooltip } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { getMothershipAttachmentPreviewUrl } from '@/lib/copilot/chat/attachment-preview'
 import { SIM_RESOURCE_DRAG_TYPE, SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { cn } from '@/lib/core/utils/cn'
-import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { CHAT_ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
 import { ContextMentionIcon } from '@/app/workspace/[workspaceId]/home/components/context-mention-icon'
 import { useAvailableResources } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown'
@@ -565,10 +563,6 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     return () => window.cancelAnimationFrame(raf)
   }, [textareaRef])
 
-  const focusTextarea = useCallback(() => {
-    textareaRef.current?.focus()
-  }, [textareaRef])
-
   const handleContainerClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
       if ((e.target as HTMLElement).closest('button')) return
@@ -872,18 +866,12 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
         <ContextMentionIcon
           context={matchingCtx}
           workflowColor={wfId ? (workflowsById[wfId]?.color ?? null) : null}
-          className='absolute inset-0 m-auto size-[12px] text-[var(--text-icon)]'
+          className='absolute inset-0 m-auto h-[12px] w-[12px] translate-y-[1.25px] text-[var(--text-icon)]'
         />
       ) : null
 
       elements.push(
-        <span
-          key={`mention-${i}-${range.start}-${range.end}`}
-          className='rounded-[5px] bg-[var(--surface-5)] py-0.5'
-          style={{
-            boxShadow: '-2px 0 0 var(--surface-5), 2px 0 0 var(--surface-5)',
-          }}
-        >
+        <span key={`mention-${i}-${range.start}-${range.end}`}>
           <span className='relative'>
             <span className='invisible'>{range.token.charAt(0)}</span>
             {mentionIconNode}
@@ -905,15 +893,9 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
 
   return (
     <div
-      role='group'
-      aria-label='Message input'
       onClick={handleContainerClick}
-      onKeyDown={(event) => {
-        if (event.target !== event.currentTarget) return
-        handleKeyboardActivation(event, focusTextarea)
-      }}
       className={cn(
-        'relative z-10 mx-auto w-full max-w-[42rem] cursor-text rounded-[20px] border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',
+        'relative z-10 mx-auto w-full max-w-[48rem] cursor-text rounded-2xl border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',
         isInitialView && 'shadow-sm'
       )}
       onDragEnter={handleDragEnter}
@@ -949,14 +931,14 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
           onSelect={handleSelectAdjust}
           onMouseUp={handleSelectAdjust}
           onScroll={handleScroll}
-          placeholder=''
+          placeholder='Ask Sim to '
           rows={1}
           className={cn(TEXTAREA_BASE_CLASSES, isInitialView ? 'max-h-[30vh]' : 'max-h-[200px]')}
         />
       </div>
 
       <div className='flex items-center justify-between'>
-        <div className='flex items-center gap-1.5'>
+        <div className='flex items-center gap-1'>
           <PlusMenuDropdown
             ref={plusMenuRef}
             availableResources={availableResources}
@@ -973,9 +955,9 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
                 variant='ghost'
                 onClick={handleFileSelectStable}
                 aria-label='Attach file'
-                className='size-[28px] rounded-full p-0 hover-hover:bg-[var(--surface-hover)]'
+                className='h-[28px] w-[28px] rounded-full p-0 hover-hover:bg-[var(--surface-hover)]'
               >
-                <Paperclip className='size-[14px] text-[var(--text-icon)]' strokeWidth={2} />
+                <Paperclip className='h-[16px] w-[16px] text-[var(--text-icon)]' />
               </Button>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>Attach file</Tooltip.Content>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index 52a3bf4442c..1ce64b08a88 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -18,7 +18,13 @@ import { captureEvent } from '@/lib/posthog/client'
 import { persistImportedWorkflow } from '@/lib/workflows/operations/import-export'
 import { useChatHistory, useMarkTaskRead } from '@/hooks/queries/tasks'
 import type { ChatContext } from '@/stores/panel'
-import { MothershipChat, MothershipView, TemplatePrompts, UserInput } from './components'
+import {
+  CreditsChip,
+  MothershipChat,
+  MothershipView,
+  SuggestedActions,
+  UserInput,
+} from './components'
 import { getMothershipUseChatOptions, useChat, useMothershipResize } from './hooks'
 import type { FileAttachmentForApi, MothershipResource, MothershipResourceType } from './types'
 
@@ -40,8 +46,6 @@ export function Home({ chatId }: HomeProps = {}) {
   const [initialPrompt, setInitialPrompt] = useState('')
   const hasCheckedLandingStorageRef = useRef(false)
   const initialViewInputRef = useRef<HTMLDivElement>(null)
-  const templateRef = useRef<HTMLDivElement>(null)
-  const baseInputHeightRef = useRef<number | null>(null)
 
   const [isInputEntering, setIsInputEntering] = useState(false)
 
@@ -287,34 +291,18 @@ export function Home({ chatId }: HomeProps = {}) {
   const showChatSkeleton = Boolean(chatId) && !hasMessages && isChatHistoryPending
   const draftScopeKey = `${workspaceId}:${chatId ?? 'new'}`
 
-  useEffect(() => {
-    if (hasMessages) return
-    const input = initialViewInputRef.current
-    const templates = templateRef.current
-    if (!input || !templates) return
-
-    const ro = new ResizeObserver((entries) => {
-      const height = entries[0].contentRect.height
-      if (baseInputHeightRef.current === null) baseInputHeightRef.current = height
-      const delta = Math.max(0, (height - baseInputHeightRef.current) / 2)
-      templates.style.marginTop = delta > 0 ? `calc(-30vh + ${delta}px)` : ''
-    })
-    ro.observe(input)
-    return () => ro.disconnect()
-  }, [hasMessages])
-
   if (!hasMessages && !showChatSkeleton) {
     return (
-      <div className='h-full overflow-y-auto bg-[var(--bg)] [scrollbar-gutter:stable_both-edges]'>
+      <div className='relative h-full overflow-y-auto bg-[var(--bg)] [scrollbar-gutter:stable_both-edges]'>
+        <div className='absolute top-[8.5px] right-[16px] z-10'>
+          <CreditsChip />
+        </div>
         <div className='flex min-h-full flex-col items-center justify-center px-6 pb-[2vh]'>
-          <h1
-            data-tour='home-greeting'
-            className='mb-6 max-w-[42rem] text-balance font-[430] font-season text-[32px] text-[var(--text-primary)] tracking-[-0.02em]'
-          >
+          <h1 className='mb-7 max-w-[48rem] text-balance font-season text-[30px] text-[var(--text-primary)]'>
             What should we get done
             {session?.user?.name ? `, ${session.user.name.split(' ')[0]}` : ''}?
           </h1>
-          <div ref={initialViewInputRef} className='w-full' data-tour='home-chat-input'>
+          <div ref={initialViewInputRef} className='w-full'>
             <UserInput
               defaultValue={initialPrompt}
               draftScopeKey={draftScopeKey}
@@ -325,15 +313,9 @@ export function Home({ chatId }: HomeProps = {}) {
               onContextAdd={handleContextAdd}
               onContextRemove={handleInitialContextRemove}
             />
+            <SuggestedActions onSelectPrompt={(prompt) => handleSubmit(prompt)} />
           </div>
         </div>
-        <div
-          ref={templateRef}
-          data-tour='home-templates'
-          className='-mt-[30vh] mx-auto w-full max-w-[68rem] px-4 pb-8 sm:px-6 lg:px-10'
-        >
-          <TemplatePrompts onSelect={handleSubmit} />
-        </div>
       </div>
     )
   }
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx
new file mode 100644
index 00000000000..13221d71f42
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx
@@ -0,0 +1,138 @@
+'use client'
+
+import { ArrowLeft } from 'lucide-react'
+import Link from 'next/link'
+import { blockTypeToIconMap, type Integration, TEMPLATES } from '@/app/(landing)/integrations/data'
+import { IntegrationTile } from '@/app/workspace/[workspaceId]/integrations/components/integrations-showcase'
+
+interface IntegrationBlockDetailProps {
+  integration: Integration
+  workspaceId: string
+}
+
+export function IntegrationBlockDetail({ integration, workspaceId }: IntegrationBlockDetailProps) {
+  const Icon = blockTypeToIconMap[integration.type]
+  const baseType = integration.type.replace(/_v\d+$/, '')
+
+  const matchingTemplates = TEMPLATES.filter(
+    (t) =>
+      t.integrationBlockTypes.includes(integration.type) ||
+      t.integrationBlockTypes.includes(baseType)
+  )
+
+  return (
+    <div className='flex h-full flex-col bg-[var(--bg)]'>
+      <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+        <Link
+          href={`/workspace/${workspaceId}/integrations`}
+          className='group mx-0.5 inline-flex h-[30px] items-center gap-1.5 rounded-lg px-2 transition-colors hover-hover:bg-[var(--surface-active)]'
+        >
+          <ArrowLeft className='h-[14px] w-[14px] text-[var(--text-icon)]' />
+          <span className='text-[var(--text-body)] text-sm'>Integrations</span>
+        </Link>
+      </div>
+      <div className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'>
+        <div className='mx-auto flex max-w-[48rem] flex-col gap-7 pb-3'>
+          <div className='flex flex-col gap-3'>
+            {Icon ? (
+              <IntegrationTile blockType={integration.type} icon={Icon} />
+            ) : (
+              <div
+                className='flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl border border-[var(--border-1)] text-white'
+                style={{ background: integration.bgColor }}
+              >
+                {integration.name.charAt(0)}
+              </div>
+            )}
+            <div className='flex flex-col gap-1'>
+              <h1 className='font-medium text-[var(--text-body)] text-lg'>{integration.name}</h1>
+              <p className='max-w-[36rem] text-[var(--text-muted)] text-md'>
+                {integration.description}
+              </p>
+            </div>
+          </div>
+
+          {matchingTemplates.length > 0 && (
+            <TemplatesSection integration={integration} templates={matchingTemplates} />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface TemplatesSectionProps {
+  integration: Integration
+  templates: typeof TEMPLATES
+}
+
+function TemplatesSection({ integration, templates }: TemplatesSectionProps) {
+  return (
+    <section className='flex flex-col gap-2'>
+      <div className='px-2'>
+        <span className='text-[var(--text-muted)] text-small'>Templates</span>
+      </div>
+      <div className='grid grid-cols-1 gap-2 sm:grid-cols-2'>
+        {templates.map((template) => (
+          <button
+            type='button'
+            key={template.title}
+            className='group flex flex-col gap-3 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] p-3.5 text-left transition-colors hover-hover:bg-[var(--surface-active)] dark:bg-[var(--surface-4)]'
+          >
+            <div className='flex items-center gap-1.5'>
+              <TemplateIcons
+                integration={integration}
+                blockTypes={template.integrationBlockTypes}
+              />
+            </div>
+            <div className='flex flex-col gap-1.5'>
+              <span className='text-[14px] text-[var(--text-body)] leading-snug'>
+                {template.title}
+              </span>
+              <p className='line-clamp-2 text-[12px] text-[var(--text-muted)] leading-[1.5]'>
+                {template.prompt}
+              </p>
+            </div>
+          </button>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+interface TemplateIconsProps {
+  integration: Integration
+  blockTypes: string[]
+}
+
+function TemplateIcons({ integration, blockTypes }: TemplateIconsProps) {
+  const ordered = [integration.type, ...blockTypes.filter((bt) => bt !== integration.type)]
+
+  return (
+    <>
+      {ordered.map((bt, idx) => {
+        const ToolIcon = blockTypeToIconMap[bt]
+        return (
+          <span key={bt} className='inline-flex items-center gap-1.5'>
+            {idx > 0 && (
+              <span aria-hidden className='text-[11px] text-[var(--text-muted)]'>
+                →
+              </span>
+            )}
+            {ToolIcon ? (
+              <IntegrationTile blockType={bt} icon={ToolIcon} />
+            ) : (
+              <span
+                aria-hidden
+                className='flex h-9 w-9 items-center justify-center rounded-xl border border-[var(--border-1)] text-small text-white'
+                style={{ background: 'var(--surface-active)' }}
+              >
+                {bt.charAt(0).toUpperCase()}
+              </span>
+            )}
+          </span>
+        )
+      })}
+    </>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/[block]/page.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/page.tsx
new file mode 100644
index 00000000000..1d209465258
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/page.tsx
@@ -0,0 +1,28 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { INTEGRATIONS } from '@/app/(landing)/integrations/data'
+import { IntegrationBlockDetail } from '@/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ block: string }>
+}): Promise<Metadata> {
+  const { block } = await params
+  const integration = INTEGRATIONS.find((i) => i.slug === block)
+  return {
+    title: integration ? `${integration.name} Integration` : 'Integration',
+  }
+}
+
+export default async function IntegrationBlockPage({
+  params,
+}: {
+  params: Promise<{ workspaceId: string; block: string }>
+}) {
+  const { workspaceId, block } = await params
+  const integration = INTEGRATIONS.find((i) => i.slug === block)
+  if (!integration) notFound()
+
+  return <IntegrationBlockDetail integration={integration} workspaceId={workspaceId} />
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/integration-tabs-header.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/integration-tabs-header.tsx
new file mode 100644
index 00000000000..80f806142d1
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/integration-tabs-header.tsx
@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react'
+import Link from 'next/link'
+import { cn } from '@/lib/core/utils/cn'
+
+interface IntegrationTabsHeaderProps {
+  active: 'integrations' | 'skills'
+  workspaceId: string
+  rightSlot?: ReactNode
+}
+
+const TAB_BASE =
+  'group mx-0.5 inline-flex h-[30px] items-center gap-1.5 rounded-lg px-2 transition-colors'
+
+export function IntegrationTabsHeader({
+  active,
+  workspaceId,
+  rightSlot,
+}: IntegrationTabsHeaderProps) {
+  return (
+    <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+      <Link
+        href={`/workspace/${workspaceId}/integrations`}
+        className={cn(
+          TAB_BASE,
+          active === 'integrations'
+            ? 'bg-[var(--surface-active)]'
+            : 'hover-hover:bg-[var(--surface-active)]'
+        )}
+      >
+        <span className='text-[var(--text-body)] text-sm'>Integrations</span>
+      </Link>
+      <Link
+        href={`/workspace/${workspaceId}/skills`}
+        className={cn(
+          TAB_BASE,
+          active === 'skills'
+            ? 'bg-[var(--surface-active)]'
+            : 'hover-hover:bg-[var(--surface-active)]'
+        )}
+      >
+        <span className='text-[var(--text-body)] text-sm'>Skills</span>
+      </Link>
+      {rightSlot && <div className='ml-auto flex items-center'>{rightSlot}</div>}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase.tsx
new file mode 100644
index 00000000000..fbe93120f2e
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase.tsx
@@ -0,0 +1,119 @@
+import type { ComponentType } from 'react'
+import { getBlock } from '@/blocks'
+
+const SHOWCASE_MASK_SVG = encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 144"><path d="M0 0L192 0L192 92A12 12 0 0 1 180 104L60 104A12 12 0 0 0 48 116L48 132A12 12 0 0 1 36 144L0 144Z" fill="white"/></svg>'
+)
+const SHOWCASE_MASK_IMAGE = `linear-gradient(white, white), url("data:image/svg+xml,${SHOWCASE_MASK_SVG}")`
+const SHOWCASE_OUTLINE_PATH =
+  'M 0 0.5 L 180 0.5 A 11.5 11.5 0 0 1 191.5 12 L 191.5 92 A 12 12 0 0 1 180 104 L 60 104 A 12 12 0 0 0 48 116 L 48 132 A 12 12 0 0 1 36 143.5 L 0 143.5'
+
+const SHOWCASE_TILES = [
+  { id: 'slack', col: 2, row: 1 },
+  { id: 'outlook', col: 5, row: 1 },
+  { id: 'notion', col: 8, row: 1 },
+  { id: 'linear', col: 10, row: 1 },
+  { id: 'jira', col: 13, row: 1 },
+  { id: 'google_calendar', col: 15, row: 1 },
+  { id: 'airtable', col: 3, row: 2 },
+  { id: 'hubspot', col: 7, row: 2 },
+  { id: 'salesforce', col: 11, row: 2 },
+  { id: 'microsoft_teams', col: 14, row: 2 },
+  { id: 'google_sheets', col: 4, row: 3 },
+  { id: 'asana', col: 6, row: 3 },
+  { id: 'confluence', col: 8, row: 3 },
+  { id: 'dropbox', col: 12, row: 3 },
+] as const
+
+export function resolveBrandTileBg(blockType: string): string | null {
+  return getBlock(blockType)?.bgColor || null
+}
+
+interface IntegrationTileProps {
+  blockType: string
+  icon: ComponentType<{ className?: string }>
+  framed?: boolean
+}
+
+export function IntegrationTile({ blockType, icon: Icon, framed = false }: IntegrationTileProps) {
+  const brandBg = resolveBrandTileBg(blockType)
+
+  if (!framed) {
+    return (
+      <div className='h-9 w-9 flex-shrink-0'>
+        <div
+          className='flex h-full w-full items-center justify-center rounded-xl border border-[var(--border-1)] bg-[var(--bg)]'
+          style={brandBg ? { background: brandBg } : undefined}
+        >
+          <Icon className='h-5 w-5 text-white' />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className='h-11 w-11 flex-shrink-0 rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-sm dark:bg-[var(--surface-5)]'>
+      <div
+        className='flex h-full w-full items-center justify-center rounded-[9px] border border-[var(--border-1)] bg-[var(--bg)]'
+        style={brandBg ? { background: brandBg } : undefined}
+      >
+        <Icon className='h-6 w-6 text-white' />
+      </div>
+    </div>
+  )
+}
+
+export function IntegrationsShowcase() {
+  return (
+    <div
+      aria-hidden
+      className='relative h-[144px] w-full overflow-hidden rounded-xl shadow-[var(--shadow-overlay)]'
+    >
+      <div
+        className='absolute inset-0 bg-[var(--surface-4)] dark:bg-[var(--surface-5)]'
+        style={{
+          backgroundImage:
+            'linear-gradient(to right, var(--border-1) 1px, transparent 1px), linear-gradient(to bottom, var(--border-1) 1px, transparent 1px)',
+          backgroundSize: '48px 48px',
+          WebkitMaskImage: SHOWCASE_MASK_IMAGE,
+          maskImage: SHOWCASE_MASK_IMAGE,
+          WebkitMaskRepeat: 'no-repeat',
+          maskRepeat: 'no-repeat',
+          WebkitMaskSize: 'calc(100% - 192px) 100%, 192px 144px',
+          maskSize: 'calc(100% - 192px) 100%, 192px 144px',
+          WebkitMaskPosition: 'top left, top right',
+          maskPosition: 'top left, top right',
+        }}
+      >
+        <div className='absolute inset-0 grid translate-x-[0.5px] translate-y-[0.5px] grid-cols-[repeat(auto-fill,48px)] grid-rows-[repeat(auto-fill,48px)]'>
+          {SHOWCASE_TILES.map((tile) => {
+            const block = getBlock(tile.id)
+            if (!block) return null
+            return (
+              <div
+                key={tile.id}
+                style={{ gridColumnStart: tile.col, gridRowStart: tile.row }}
+                className='m-0.5'
+              >
+                <IntegrationTile blockType={tile.id} icon={block.icon} framed />
+              </div>
+            )
+          })}
+        </div>
+      </div>
+      <div
+        className='pointer-events-none absolute top-0 bottom-0 left-0 rounded-l-xl border border-[var(--border-muted)] border-r-0'
+        style={{ width: 'calc(100% - 192px)' }}
+      />
+      <svg
+        className='pointer-events-none absolute top-0 right-0'
+        width='192'
+        height='144'
+        viewBox='0 0 192 144'
+        fill='none'
+      >
+        <path d={SHOWCASE_OUTLINE_PATH} stroke='var(--border-muted)' strokeWidth='1' />
+      </svg>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore.tsx
new file mode 100644
index 00000000000..9207cf1c810
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import { ArrowRight } from 'lucide-react'
+import { useParams, useRouter } from 'next/navigation'
+import { LandingPromptStorage } from '@/lib/core/utils/browser-storage'
+import { IntegrationsShowcase } from '@/app/workspace/[workspaceId]/integrations/components/integrations-showcase'
+
+interface ShowcaseWithExploreProps {
+  /** Prompt stored for the home page chat to consume after navigation. */
+  prompt: string
+}
+
+/**
+ * Renders the integrations showcase with an "Explore in chat" CTA pinned into
+ * the showcase's bottom-right mask notch. Clicking the CTA seeds the home page
+ * chat with `prompt` and navigates to the workspace home.
+ */
+export function ShowcaseWithExplore({ prompt }: ShowcaseWithExploreProps) {
+  const params = useParams()
+  const workspaceId = (params?.workspaceId as string) || ''
+  const router = useRouter()
+
+  return (
+    <div className='relative'>
+      <IntegrationsShowcase />
+      <button
+        type='button'
+        onClick={() => {
+          LandingPromptStorage.store(prompt)
+          router.push(`/workspace/${workspaceId}/home`)
+        }}
+        className='group absolute right-0 bottom-0 inline-flex h-[30px] items-center gap-1.5 rounded-lg bg-[var(--surface-active)] px-2 transition-colors hover-hover:bg-[var(--surface-6)]'
+      >
+        <span className='text-[var(--text-body)] text-sm'>Explore in chat</span>
+        <ArrowRight className='h-4 w-4 flex-shrink-0 text-[var(--text-icon)]' />
+      </button>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/connected/[credentialId]/connected-credential-detail.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/connected/[credentialId]/connected-credential-detail.tsx
new file mode 100644
index 00000000000..cfdb366aa45
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/connected/[credentialId]/connected-credential-detail.tsx
@@ -0,0 +1,693 @@
+'use client'
+
+import { type ComponentType, createElement, useCallback, useEffect, useMemo, useState } from 'react'
+import { createLogger } from '@sim/logger'
+import { getErrorMessage } from '@sim/utils/errors'
+import { AlertTriangle } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import {
+  Avatar,
+  AvatarFallback,
+  Button,
+  ChevronDown,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  Tooltip,
+} from '@/components/emcn'
+import { ArrowLeft, Check, Duplicate } from '@/components/emcn/icons'
+import { useSession } from '@/lib/auth/auth-client'
+import { cn } from '@/lib/core/utils/cn'
+import { writeOAuthReturnContext } from '@/lib/credentials/client-state'
+import { getServiceConfigByProviderId } from '@/lib/oauth'
+import { getUserColor } from '@/lib/workspaces/colors'
+import { INTEGRATIONS } from '@/app/(landing)/integrations/data'
+import { IntegrationTile } from '@/app/workspace/[workspaceId]/integrations/components/integrations-showcase'
+import {
+  getSampleConnectedCredentials,
+  getSampleConnectedMembers,
+  PREVIEW_CONNECTED_WITH_SAMPLES,
+} from '@/app/workspace/[workspaceId]/integrations/fixtures/sample-credentials'
+import {
+  useCreateCredentialDraft,
+  useDeleteWorkspaceCredential,
+  useRemoveWorkspaceCredentialMember,
+  useUpdateWorkspaceCredential,
+  useUpsertWorkspaceCredentialMember,
+  useWorkspaceCredentialMembers,
+  useWorkspaceCredentials,
+  type WorkspaceCredential,
+  type WorkspaceCredentialRole,
+} from '@/hooks/queries/credentials'
+import {
+  useConnectOAuthService,
+  useDisconnectOAuthService,
+  useOAuthConnections,
+} from '@/hooks/queries/oauth/oauth-connections'
+import { useWorkspacePermissionsQuery } from '@/hooks/queries/workspace'
+
+const logger = createLogger('ConnectedCredentialDetail')
+
+const ROLE_OPTIONS = [
+  { value: 'member', label: 'Member' },
+  { value: 'admin', label: 'Admin' },
+] as const
+
+interface ConnectedCredentialDetailProps {
+  workspaceId: string
+  credentialId: string
+}
+
+export function ConnectedCredentialDetail({
+  workspaceId,
+  credentialId,
+}: ConnectedCredentialDetailProps) {
+  const router = useRouter()
+  const integrationsHref = `/workspace/${workspaceId}/integrations`
+
+  const { data: session } = useSession()
+  const currentUserId = session?.user?.id || ''
+
+  const { data: credentials = [], isPending: credentialsLoading } = useWorkspaceCredentials({
+    workspaceId,
+    enabled: Boolean(workspaceId),
+  })
+
+  const { data: oauthConnections = [] } = useOAuthConnections()
+  const connectOAuthService = useConnectOAuthService()
+  const disconnectOAuthService = useDisconnectOAuthService()
+  const { data: workspacePermissions } = useWorkspacePermissionsQuery(workspaceId || null)
+
+  const createDraft = useCreateCredentialDraft()
+  const updateCredential = useUpdateWorkspaceCredential()
+  const deleteCredential = useDeleteWorkspaceCredential()
+  const upsertMember = useUpsertWorkspaceCredentialMember()
+  const removeMember = useRemoveWorkspaceCredentialMember()
+
+  const credential = useMemo<WorkspaceCredential | null>(() => {
+    const previewMatch = PREVIEW_CONNECTED_WITH_SAMPLES
+      ? getSampleConnectedCredentials(workspaceId, currentUserId).find((c) => c.id === credentialId)
+      : undefined
+    if (previewMatch) return previewMatch
+    return credentials.find((c) => c.id === credentialId) ?? null
+  }, [credentials, credentialId, workspaceId, currentUserId])
+
+  const { data: realMembers = [], isPending: realMembersLoading } = useWorkspaceCredentialMembers(
+    credential?.id
+  )
+  const isSamplePreview = PREVIEW_CONNECTED_WITH_SAMPLES && credentialId.startsWith('sample-')
+  const members = isSamplePreview ? getSampleConnectedMembers(credentialId) : realMembers
+  const membersLoading = isSamplePreview ? false : realMembersLoading
+
+  const oauthServiceNameByProviderId = useMemo(
+    () => new Map(oauthConnections.map((service) => [service.providerId, service.name])),
+    [oauthConnections]
+  )
+  const resolveProviderLabel = useCallback(
+    (providerId?: string | null): string => {
+      if (!providerId) return ''
+      return oauthServiceNameByProviderId.get(providerId) || providerId
+    },
+    [oauthServiceNameByProviderId]
+  )
+
+  const serviceConfig = useMemo(() => {
+    if (!credential?.providerId) return null
+    return getServiceConfigByProviderId(credential.providerId)
+  }, [credential])
+
+  /**
+   * Resolve the integration block type from the OAuth service name so the
+   * header tile can render with the same brand background used by the rows
+   * on the integrations list page.
+   */
+  const integrationBlockType = useMemo(() => {
+    const name = serviceConfig?.name.toLowerCase()
+    if (!name) return ''
+    const match = INTEGRATIONS.find((i) => i.name.toLowerCase() === name)
+    return match?.type ?? ''
+  }, [serviceConfig])
+
+  const isAdmin = credential?.role === 'admin'
+
+  const [displayNameDraft, setDisplayNameDraft] = useState('')
+  const [descriptionDraft, setDescriptionDraft] = useState('')
+  const [detailsError, setDetailsError] = useState<string | null>(null)
+  const [copyIdSuccess, setCopyIdSuccess] = useState(false)
+
+  const [isSharingWithWorkspace, setIsSharingWithWorkspace] = useState(false)
+
+  const [showDeleteConfirmDialog, setShowDeleteConfirmDialog] = useState(false)
+  const [deleteError, setDeleteError] = useState<string | null>(null)
+  const [showUnsavedChangesAlert, setShowUnsavedChangesAlert] = useState(false)
+
+  // Sync drafts when credential loads or changes.
+  useEffect(() => {
+    setDisplayNameDraft(credential?.displayName ?? '')
+    setDescriptionDraft(credential?.description ?? '')
+    setDetailsError(null)
+  }, [credential?.id, credential?.displayName, credential?.description])
+
+  const isDescriptionDirty = credential
+    ? descriptionDraft !== (credential.description || '')
+    : false
+  const isDisplayNameDirty = credential ? displayNameDraft !== credential.displayName : false
+  const isDetailsDirty = isDescriptionDirty || isDisplayNameDirty
+
+  const activeMembers = useMemo(() => members.filter((m) => m.status === 'active'), [members])
+  const adminMemberCount = activeMembers.filter((m) => m.role === 'admin').length
+
+  const workspaceUserOptions = useMemo(() => {
+    const activeMemberUserIds = new Set(activeMembers.map((m) => m.userId))
+    return (workspacePermissions?.users || [])
+      .filter((u) => !activeMemberUserIds.has(u.userId))
+      .map((u) => ({ value: u.userId, label: u.name || u.email }))
+  }, [workspacePermissions?.users, activeMembers])
+
+  // Browser-level guard against discarding unsaved changes.
+  useEffect(() => {
+    if (!isDetailsDirty) return
+    const handler = (e: BeforeUnloadEvent) => {
+      e.preventDefault()
+    }
+    window.addEventListener('beforeunload', handler)
+    return () => window.removeEventListener('beforeunload', handler)
+  }, [isDetailsDirty])
+
+  const handleBackClick = useCallback(
+    (event: React.MouseEvent) => {
+      if (isDetailsDirty && !updateCredential.isPending) {
+        event.preventDefault()
+        setShowUnsavedChangesAlert(true)
+      }
+    },
+    [isDetailsDirty, updateCredential.isPending]
+  )
+
+  const handleDiscardChanges = useCallback(() => {
+    setShowUnsavedChangesAlert(false)
+    router.push(integrationsHref)
+  }, [router, integrationsHref])
+
+  const handleSaveDetails = async () => {
+    if (!credential || !isAdmin || !isDetailsDirty || updateCredential.isPending) return
+    setDetailsError(null)
+    try {
+      await updateCredential.mutateAsync({
+        credentialId: credential.id,
+        ...(isDisplayNameDirty ? { displayName: displayNameDraft.trim() } : {}),
+        ...(isDescriptionDirty ? { description: descriptionDraft.trim() || null } : {}),
+      })
+      if (isDisplayNameDirty) setDisplayNameDraft((v) => v.trim())
+      if (isDescriptionDirty) setDescriptionDraft((v) => v.trim())
+    } catch (error: unknown) {
+      const message = getErrorMessage(error, 'Failed to save changes')
+      setDetailsError(message)
+      logger.error('Failed to save credential details', error)
+    }
+  }
+
+  const handleReconnectOAuth = async () => {
+    if (!credential || credential.type !== 'oauth' || !credential.providerId || !workspaceId) return
+    setDetailsError(null)
+    try {
+      await createDraft.mutateAsync({
+        workspaceId,
+        providerId: credential.providerId,
+        displayName: credential.displayName,
+        description: credential.description || undefined,
+        credentialId: credential.id,
+      })
+
+      const oauthPreCount = credentials.filter(
+        (c) => c.type === 'oauth' && c.providerId === credential.providerId
+      ).length
+      writeOAuthReturnContext({
+        origin: 'integrations',
+        displayName: credential.displayName,
+        providerId: credential.providerId,
+        preCount: oauthPreCount,
+        workspaceId,
+        reconnect: true,
+        requestedAt: Date.now(),
+      })
+
+      await connectOAuthService.mutateAsync({
+        providerId: credential.providerId,
+        callbackURL: window.location.href,
+      })
+    } catch (error: unknown) {
+      const message = getErrorMessage(error, 'Failed to start reconnect')
+      setDetailsError(message)
+      logger.error('Failed to reconnect OAuth credential', error)
+    }
+  }
+
+  const handleShareWithWorkspace = async () => {
+    if (!credential || !isAdmin || workspaceUserOptions.length === 0) return
+    setDetailsError(null)
+    setIsSharingWithWorkspace(true)
+    try {
+      for (const user of workspaceUserOptions) {
+        await upsertMember.mutateAsync({
+          credentialId: credential.id,
+          userId: user.value,
+          role: 'member',
+        })
+      }
+    } catch (error: unknown) {
+      const message = getErrorMessage(error, 'Failed to share with workspace')
+      setDetailsError(message)
+      logger.error('Failed to share credential with workspace', error)
+    } finally {
+      setIsSharingWithWorkspace(false)
+    }
+  }
+
+  const handleChangeMemberRole = async (userId: string, role: WorkspaceCredentialRole) => {
+    if (!credential) return
+    const current = activeMembers.find((m) => m.userId === userId)
+    if (current?.role === role) return
+    try {
+      await upsertMember.mutateAsync({ credentialId: credential.id, userId, role })
+    } catch (error) {
+      logger.error('Failed to change member role', error)
+    }
+  }
+
+  const handleRemoveMember = async (userId: string) => {
+    if (!credential) return
+    try {
+      await removeMember.mutateAsync({ credentialId: credential.id, userId })
+    } catch (error) {
+      logger.error('Failed to remove credential member', error)
+    }
+  }
+
+  const handleConfirmDelete = async () => {
+    if (!credential) return
+    setDeleteError(null)
+    try {
+      if (credential.type === 'service_account') {
+        await deleteCredential.mutateAsync(credential.id)
+      } else {
+        if (!credential.accountId || !credential.providerId) {
+          setDeleteError(
+            'Cannot disconnect: missing account information. Please try reconnecting this credential first.'
+          )
+          return
+        }
+        await disconnectOAuthService.mutateAsync({
+          provider: credential.providerId.split('-')[0] || credential.providerId,
+          providerId: credential.providerId,
+          serviceId: credential.providerId,
+          accountId: credential.accountId,
+        })
+        window.dispatchEvent(
+          new CustomEvent('oauth-credentials-updated', {
+            detail: { providerId: credential.providerId, workspaceId },
+          })
+        )
+      }
+      setShowDeleteConfirmDialog(false)
+      router.push(integrationsHref)
+    } catch (error) {
+      const message = getErrorMessage(error, 'Failed to disconnect integration')
+      setDeleteError(message)
+      logger.error('Failed to disconnect integration', error)
+    }
+  }
+
+  const headerJsx = (
+    <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+      <Link
+        href={integrationsHref}
+        onClick={handleBackClick}
+        className='group mx-0.5 inline-flex h-[30px] items-center gap-1.5 rounded-lg px-2 transition-colors hover-hover:bg-[var(--surface-active)]'
+      >
+        <ArrowLeft className='h-[14px] w-[14px] text-[var(--text-icon)]' />
+        <span className='text-[var(--text-body)] text-sm'>Integrations</span>
+      </Link>
+      {credential && isAdmin && (
+        <div className='flex items-center'>
+          {serviceConfig?.authType !== 'service_account' && (
+            <button
+              type='button'
+              onClick={handleReconnectOAuth}
+              disabled={connectOAuthService.isPending}
+              className='group mx-0.5 inline-flex h-[30px] items-center gap-1.5 rounded-lg px-2 transition-colors hover-hover:bg-[var(--surface-active)] disabled:cursor-not-allowed disabled:opacity-70'
+            >
+              {serviceConfig &&
+                createElement(serviceConfig.icon, { className: 'h-[14px] w-[14px]' })}
+              <span className='text-[var(--text-body)] text-sm'>Reconnect</span>
+            </button>
+          )}
+          {(workspaceUserOptions.length > 0 || isSharingWithWorkspace) && (
+            <button
+              type='button'
+              onClick={handleShareWithWorkspace}
+              disabled={isSharingWithWorkspace || workspaceUserOptions.length === 0}
+              className='group mx-0.5 inline-flex h-[30px] items-center gap-1.5 rounded-lg px-2 transition-colors hover-hover:bg-[var(--surface-active)] disabled:cursor-not-allowed disabled:opacity-70'
+            >
+              <span className='text-[var(--text-body)] text-sm'>
+                {isSharingWithWorkspace ? 'Sharing...' : 'Share with workspace'}
+              </span>
+            </button>
+          )}
+          <button
+            type='button'
+            onClick={() => {
+              setDeleteError(null)
+              setShowDeleteConfirmDialog(true)
+            }}
+            disabled={disconnectOAuthService.isPending || deleteCredential.isPending}
+            className='group mx-0.5 inline-flex h-[30px] items-center gap-1.5 rounded-lg px-2 transition-colors hover-hover:bg-[var(--surface-active)] disabled:cursor-not-allowed disabled:opacity-70'
+          >
+            <span className='text-[var(--text-body)] text-sm'>Disconnect</span>
+          </button>
+          <button
+            type='button'
+            onClick={handleSaveDetails}
+            disabled={!isDetailsDirty || updateCredential.isPending}
+            className='group mx-0.5 inline-flex h-[30px] items-center gap-1.5 rounded-lg px-2 transition-colors hover-hover:bg-[var(--surface-active)] disabled:cursor-not-allowed disabled:opacity-70'
+          >
+            <span className='text-[var(--text-body)] text-sm'>
+              {updateCredential.isPending ? 'Saving...' : 'Save'}
+            </span>
+          </button>
+        </div>
+      )}
+    </div>
+  )
+
+  if (credentialsLoading && !credential) {
+    return (
+      <div className='flex h-full flex-col bg-[var(--bg)]'>
+        {headerJsx}
+        <div className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'>
+          <div className='mx-auto flex max-w-[48rem] flex-col gap-7 pb-3'>
+            <p className='py-12 text-center text-[var(--text-muted)] text-sm'>Loading…</p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!credential) {
+    return (
+      <div className='flex h-full flex-col bg-[var(--bg)]'>
+        {headerJsx}
+        <div className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'>
+          <div className='mx-auto flex max-w-[48rem] flex-col gap-7 pb-3'>
+            <p className='py-12 text-center text-[var(--text-muted)] text-sm'>
+              Credential not found.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const serviceLabel =
+    serviceConfig?.name || resolveProviderLabel(credential.providerId) || 'Unknown service'
+
+  return (
+    <div className='flex h-full flex-col bg-[var(--bg)]'>
+      {headerJsx}
+      <div className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'>
+        <div className='mx-auto flex max-w-[48rem] flex-col gap-7 pb-3'>
+          {/* Header: icon tile + service name + service description (matches integrations row) */}
+          <div className='flex items-center gap-2.5'>
+            {serviceConfig ? (
+              <IntegrationTile
+                blockType={integrationBlockType}
+                icon={serviceConfig.icon as ComponentType<{ className?: string }>}
+              />
+            ) : (
+              <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl border border-[var(--border-1)] bg-[var(--bg)]'>
+                <span className='font-medium text-[var(--text-tertiary)] text-small'>
+                  {resolveProviderLabel(credential.providerId).slice(0, 1) || '?'}
+                </span>
+              </div>
+            )}
+            <div className='flex min-w-0 flex-1 flex-col'>
+              <span className='truncate text-[14px] text-[var(--text-body)]'>{serviceLabel}</span>
+              <span className='truncate text-[12px] text-[var(--text-muted)]'>
+                {serviceConfig?.description || 'Connected service'}
+              </span>
+            </div>
+          </div>
+
+          <section className='flex flex-col'>
+            <span className='pl-0.5 text-[var(--text-muted)] text-small'>Credential ID</span>
+            <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
+            <div className='flex h-[30px] items-center gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
+              <input
+                id='credential-id'
+                readOnly
+                value={credential.id}
+                className='h-full w-full cursor-default bg-transparent text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
+              />
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='quiet'
+                    className='h-[18px] w-[18px] rounded-sm p-0'
+                    onClick={() => {
+                      navigator.clipboard.writeText(credential.id)
+                      setCopyIdSuccess(true)
+                      setTimeout(() => setCopyIdSuccess(false), 2000)
+                    }}
+                    aria-label='Copy credential ID'
+                  >
+                    {copyIdSuccess ? (
+                      <Check className='h-[13px] w-[13px]' />
+                    ) : (
+                      <Duplicate className='h-[13px] w-[13px]' />
+                    )}
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  {copyIdSuccess ? 'Copied!' : 'Copy credential ID'}
+                </Tooltip.Content>
+              </Tooltip.Root>
+            </div>
+          </section>
+
+          <section className='flex flex-col'>
+            <span className='pl-0.5 text-[var(--text-muted)] text-small'>Display Name</span>
+            <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
+            <div className='flex h-[30px] items-center gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
+              <input
+                id='credential-display-name'
+                value={displayNameDraft}
+                onChange={(event) => setDisplayNameDraft(event.target.value)}
+                autoComplete='off'
+                data-lpignore='true'
+                disabled={!isAdmin}
+                className='h-full w-full bg-transparent text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-60'
+              />
+            </div>
+          </section>
+
+          <section className='flex flex-col'>
+            <span className='pl-0.5 text-[var(--text-muted)] text-small'>Description</span>
+            <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
+            <div className='flex items-start gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 dark:bg-[var(--surface-4)]'>
+              <textarea
+                id='credential-description'
+                rows={4}
+                value={descriptionDraft}
+                onChange={(event) => setDescriptionDraft(event.target.value)}
+                placeholder='Add a description...'
+                maxLength={500}
+                autoComplete='off'
+                data-lpignore='true'
+                disabled={!isAdmin}
+                className='w-full resize-none bg-transparent text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-60'
+              />
+            </div>
+          </section>
+
+          {detailsError && (
+            <div className='rounded-lg border border-[color-mix(in_srgb,var(--text-error)_40%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] px-2.5 py-2 text-[var(--text-error)] text-small'>
+              {detailsError}
+            </div>
+          )}
+
+          <section className='flex flex-col'>
+            <span className='pl-0.5 text-[var(--text-muted)] text-small'>
+              Members ({activeMembers.length})
+            </span>
+            <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
+
+            {membersLoading ? null : (
+              <div className='flex flex-col gap-2'>
+                {activeMembers.map((member) => {
+                  const roleLocked = member.role === 'admin' && adminMemberCount <= 1
+                  const roleDisabled = !isAdmin || roleLocked
+                  return (
+                    <div
+                      key={member.id}
+                      className={cn(
+                        'grid items-center gap-2',
+                        isAdmin ? 'grid-cols-[1fr_120px_72px]' : 'grid-cols-[1fr_200px]'
+                      )}
+                    >
+                      <div className='flex min-w-0 items-center gap-2.5'>
+                        <Avatar className='h-9 w-9 flex-shrink-0'>
+                          <AvatarFallback
+                            style={{
+                              background: getUserColor(member.userId || member.userEmail || ''),
+                            }}
+                            className='border border-[var(--border-1)] text-small text-white'
+                          >
+                            {(member.userName || member.userEmail || '?').charAt(0).toUpperCase()}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className='flex min-w-0 flex-col'>
+                          <span className='truncate text-[14px] text-[var(--text-body)]'>
+                            {member.userName || member.userEmail || member.userId}
+                          </span>
+                          <span className='truncate text-[12px] text-[var(--text-muted)]'>
+                            {member.userEmail || member.userId}
+                          </span>
+                        </div>
+                      </div>
+                      {roleDisabled ? (
+                        <button
+                          type='button'
+                          disabled
+                          className='inline-flex h-[30px] items-center justify-between gap-1.5 rounded-lg bg-[var(--surface-active)] px-2 transition-colors disabled:cursor-not-allowed disabled:opacity-70'
+                        >
+                          <span className='text-[var(--text-body)] text-sm'>
+                            {ROLE_OPTIONS.find((option) => option.value === member.role)?.label ||
+                              'Role'}
+                          </span>
+                          <ChevronDown className='h-[7px] w-[9px] text-[var(--text-icon)]' />
+                        </button>
+                      ) : (
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <button
+                              type='button'
+                              className='inline-flex h-[30px] items-center justify-between gap-1.5 rounded-lg bg-[var(--surface-active)] px-2 transition-colors hover-hover:bg-[var(--surface-6)]'
+                            >
+                              <span className='text-[var(--text-body)] text-sm'>
+                                {ROLE_OPTIONS.find((option) => option.value === member.role)
+                                  ?.label || 'Role'}
+                              </span>
+                              <ChevronDown className='h-[7px] w-[9px] text-[var(--text-icon)]' />
+                            </button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align='end' className='min-w-[160px]'>
+                            {ROLE_OPTIONS.map((option) => (
+                              <DropdownMenuItem
+                                key={option.value}
+                                onSelect={() => handleChangeMemberRole(member.userId, option.value)}
+                              >
+                                {option.label}
+                              </DropdownMenuItem>
+                            ))}
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      )}
+                      {isAdmin && (
+                        <button
+                          type='button'
+                          onClick={() => handleRemoveMember(member.userId)}
+                          disabled={roleLocked}
+                          className='inline-flex h-[30px] items-center gap-1.5 justify-self-end rounded-lg px-2 transition-colors hover-hover:bg-[var(--surface-active)] disabled:cursor-not-allowed disabled:opacity-70'
+                        >
+                          <span className='text-[var(--text-body)] text-sm'>Remove</span>
+                        </button>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </section>
+        </div>
+      </div>
+
+      <Modal
+        open={showDeleteConfirmDialog}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowDeleteConfirmDialog(false)
+            setDeleteError(null)
+          }
+        }}
+      >
+        <ModalContent size='sm'>
+          <ModalHeader>Disconnect Integration</ModalHeader>
+          <ModalBody>
+            <ModalDescription className='text-[var(--text-secondary)]'>
+              Are you sure you want to disconnect{' '}
+              <span className='font-medium text-[var(--text-primary)]'>
+                {credential.displayName}
+              </span>
+              ? This action cannot be undone.
+            </ModalDescription>
+            {deleteError && (
+              <div className='mt-3 rounded-lg border border-[color-mix(in_srgb,var(--text-error)_40%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] p-3'>
+                <div className='flex items-start gap-2.5'>
+                  <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-[var(--text-error)]' />
+                  <p className='text-[var(--text-error)] text-small'>{deleteError}</p>
+                </div>
+              </div>
+            )}
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              variant='default'
+              onClick={() => {
+                setShowDeleteConfirmDialog(false)
+                setDeleteError(null)
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant='destructive'
+              onClick={handleConfirmDelete}
+              disabled={disconnectOAuthService.isPending || deleteCredential.isPending}
+            >
+              {disconnectOAuthService.isPending || deleteCredential.isPending
+                ? 'Disconnecting...'
+                : 'Disconnect'}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+
+      <Modal open={showUnsavedChangesAlert} onOpenChange={setShowUnsavedChangesAlert}>
+        <ModalContent size='sm'>
+          <ModalHeader>Unsaved Changes</ModalHeader>
+          <ModalBody>
+            <ModalDescription className='text-[var(--text-secondary)]'>
+              You have unsaved changes. Are you sure you want to discard them?
+            </ModalDescription>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setShowUnsavedChangesAlert(false)}>
+              Keep Editing
+            </Button>
+            <Button variant='destructive' onClick={handleDiscardChanges}>
+              Discard Changes
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/connected/[credentialId]/page.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/connected/[credentialId]/page.tsx
new file mode 100644
index 00000000000..88003c84119
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/connected/[credentialId]/page.tsx
@@ -0,0 +1,15 @@
+import type { Metadata } from 'next'
+import { ConnectedCredentialDetail } from '@/app/workspace/[workspaceId]/integrations/connected/[credentialId]/connected-credential-detail'
+
+export const metadata: Metadata = {
+  title: 'Connected Integration',
+}
+
+export default async function ConnectedCredentialPage({
+  params,
+}: {
+  params: Promise<{ workspaceId: string; credentialId: string }>
+}) {
+  const { workspaceId, credentialId } = await params
+  return <ConnectedCredentialDetail workspaceId={workspaceId} credentialId={credentialId} />
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/fixtures/sample-credentials.ts b/apps/sim/app/workspace/[workspaceId]/integrations/fixtures/sample-credentials.ts
new file mode 100644
index 00000000000..62ade3df75f
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/fixtures/sample-credentials.ts
@@ -0,0 +1,104 @@
+import type {
+  WorkspaceCredential,
+  WorkspaceCredentialMember,
+} from '@/lib/api/contracts/credentials'
+
+/**
+ * Flip to `true` to preview the Connected section on the workspace
+ * integrations page with the sample data below. Leave `false` for shipping.
+ */
+export const PREVIEW_CONNECTED_WITH_SAMPLES = true
+
+/**
+ * Realistic `WorkspaceCredential` rows used to preview the Connected section
+ * without requiring real OAuth connections. Activated via the
+ * `PREVIEW_CONNECTED_WITH_SAMPLES` flag above.
+ *
+ * Each entry exercises a distinct rendering path:
+ * - Slack:   description present → renders as-is
+ * - Gmail:   description `null`  → falls back to "Gmail integration"
+ * - Jira:    description `""`    → falls back to "Jira integration"
+ * - Notion:  description present, role `member`
+ */
+export function getSampleConnectedCredentials(
+  workspaceId: string,
+  userId: string
+): WorkspaceCredential[] {
+  const now = new Date().toISOString()
+  const base = {
+    workspaceId,
+    envKey: null,
+    envOwnerUserId: null,
+    createdBy: userId,
+    createdAt: now,
+    updatedAt: now,
+    status: 'active' as const,
+  }
+  return [
+    {
+      ...base,
+      id: 'sample-slack',
+      type: 'oauth',
+      displayName: "Emir's Slack",
+      description: 'Workspace alerts and on-call routing',
+      providerId: 'slack',
+      accountId: 'sample-slack-account',
+      role: 'admin',
+    },
+    {
+      ...base,
+      id: 'sample-gmail',
+      type: 'oauth',
+      displayName: 'Personal Gmail',
+      description: null,
+      providerId: 'google-email',
+      accountId: 'sample-gmail-account',
+      role: 'admin',
+    },
+    {
+      ...base,
+      id: 'sample-jira',
+      type: 'oauth',
+      displayName: 'Engineering Jira',
+      description: '',
+      providerId: 'jira',
+      accountId: 'sample-jira-account',
+      role: 'member',
+    },
+    {
+      ...base,
+      id: 'sample-notion',
+      type: 'oauth',
+      displayName: 'Team Notion',
+      description: 'Docs, runbooks, and meeting notes',
+      providerId: 'notion',
+      accountId: 'sample-notion-account',
+      role: 'member',
+    },
+  ]
+}
+
+/**
+ * Returns sample members for a given sample credential id. Used by the
+ * credential-detail preview to demonstrate the Members section without a
+ * real workspace. Returns `[]` for any non-sample id.
+ */
+export function getSampleConnectedMembers(credentialId: string): WorkspaceCredentialMember[] {
+  if (credentialId !== 'sample-slack') return []
+  const now = new Date().toISOString()
+  return [
+    {
+      id: 'sample-slack-member-1',
+      userId: 'sample-user-emir',
+      role: 'admin',
+      status: 'active',
+      joinedAt: now,
+      invitedBy: null,
+      createdAt: now,
+      updatedAt: now,
+      userName: 'Emir Karabeg',
+      userEmail: 'emir@sim.ai',
+      userImage: null,
+    },
+  ]
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx
similarity index 54%
rename from apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
rename to apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx
index ab794a1cda4..349f0455bca 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx
@@ -1,16 +1,29 @@
 'use client'
 
-import { createElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  type ComponentType,
+  createElement,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { AlertTriangle, Check, Clipboard, Plus, Search, Share2 } from 'lucide-react'
+import { Check, Search } from 'lucide-react'
+import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import {
-  Avatar,
-  AvatarFallback,
+  ArrowRight,
   Badge,
   Button,
-  Combobox,
+  ChevronDown,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   focusFirstTextInputIn,
   Input,
   Label,
@@ -20,9 +33,7 @@ import {
   ModalDescription,
   ModalFooter,
   ModalHeader,
-  Skeleton,
   Textarea,
-  Tooltip,
 } from '@/components/emcn'
 import { Input as UiInput } from '@/components/ui'
 import { useSession } from '@/lib/auth/auth-client'
@@ -35,12 +46,20 @@ import {
   writeOAuthReturnContext,
 } from '@/lib/credentials/client-state'
 import { getCanonicalScopesForProvider, getServiceConfigByProviderId } from '@/lib/oauth'
-import { ATLASSIAN_SERVICE_ACCOUNT_PROVIDER_ID } from '@/lib/oauth/types'
 import { getScopeDescription } from '@/lib/oauth/utils'
-import { getUserColor } from '@/lib/workspaces/colors'
-import { AtlassianServiceAccountForm } from '@/app/workspace/[workspaceId]/settings/components/integrations/atlassian-service-account-form'
-import { CredentialSkeleton } from '@/app/workspace/[workspaceId]/settings/components/integrations/credential-skeleton'
-import { ServiceAccountForm } from '@/app/workspace/[workspaceId]/settings/components/integrations/service-account-form'
+import {
+  blockTypeToIconMap,
+  formatIntegrationType,
+  INTEGRATIONS,
+  type Integration,
+} from '@/app/(landing)/integrations/data'
+import { IntegrationTabsHeader } from '@/app/workspace/[workspaceId]/integrations/components/integration-tabs-header'
+import { IntegrationTile } from '@/app/workspace/[workspaceId]/integrations/components/integrations-showcase'
+import { ShowcaseWithExplore } from '@/app/workspace/[workspaceId]/integrations/components/showcase-with-explore'
+import {
+  getSampleConnectedCredentials,
+  PREVIEW_CONNECTED_WITH_SAMPLES,
+} from '@/app/workspace/[workspaceId]/integrations/fixtures/sample-credentials'
 import {
   useCreateCredentialDraft,
   useCreateWorkspaceCredential,
@@ -60,9 +79,8 @@ import {
 } from '@/hooks/queries/oauth/oauth-connections'
 import { useWorkspacePermissionsQuery } from '@/hooks/queries/workspace'
 import { useOAuthReturnRouter } from '@/hooks/use-oauth-return'
-import { useSettingsDirtyStore } from '@/stores/settings/dirty/store'
 
-const logger = createLogger('IntegrationsManager')
+const logger = createLogger('Integrations')
 
 const ROLE_OPTIONS = [
   { value: 'member', label: 'Member' },
@@ -74,13 +92,105 @@ const roleComboOptions = ROLE_OPTIONS.map((option) => ({
   label: option.label,
 }))
 
-export function IntegrationsManager() {
+const ALL_CATEGORY = 'All'
+const FEATURED_LABEL = 'Featured'
+const CONNECTED_LABEL = 'Connected'
+/** Slugs surfaced in the pinned Featured section, in display order. */
+const FEATURED_SLUGS = ['slack', 'gmail', 'jira', 'github', 'google-sheets', 'hubspot'] as const
+
+interface IntegrationItemProps {
+  blockType: string
+  slug: string
+  workspaceId: string
+  name: string
+  description?: string | null
+  icon: ComponentType<{ className?: string }>
+}
+
+function IntegrationItem({
+  blockType,
+  slug,
+  workspaceId,
+  name,
+  description,
+  icon: Icon,
+}: IntegrationItemProps) {
+  return (
+    <Link
+      href={`/workspace/${workspaceId}/integrations/${slug}`}
+      className='flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
+    >
+      <IntegrationTile blockType={blockType} icon={Icon} />
+      <div className='flex min-w-0 flex-1 flex-col'>
+        <span className='truncate text-[14px] text-[var(--text-body)]'>{name}</span>
+        {description && (
+          <span className='truncate text-[12px] text-[var(--text-muted)]'>{description}</span>
+        )}
+      </div>
+      <ArrowRight className='h-4 w-4 flex-shrink-0 text-[var(--text-icon)]' />
+    </Link>
+  )
+}
+
+interface ConnectedDisplayItem {
+  credential: WorkspaceCredential
+  name: string
+  description: string
+  serviceName: string
+  integrationType: string | null
+  blockType: string
+  icon: ComponentType<{ className?: string }>
+}
+
+interface ConnectedItemProps {
+  href: string
+  blockType: string
+  name: string
+  description: string
+  icon: ComponentType<{ className?: string }>
+}
+
+function ConnectedItem({ href, blockType, name, description, icon: Icon }: ConnectedItemProps) {
+  return (
+    <Link
+      href={href}
+      className='flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
+    >
+      <IntegrationTile blockType={blockType} icon={Icon} />
+      <div className='flex min-w-0 flex-1 flex-col'>
+        <span className='truncate text-[14px] text-[var(--text-body)]'>{name}</span>
+        <span className='truncate text-[12px] text-[var(--text-muted)]'>{description}</span>
+      </div>
+      <ArrowRight className='h-4 w-4 flex-shrink-0 text-[var(--text-icon)]' />
+    </Link>
+  )
+}
+
+interface IntegrationSectionProps {
+  label: string
+  children: ReactNode
+}
+
+function IntegrationSection({ label, children }: IntegrationSectionProps) {
+  return (
+    <section className='flex flex-col'>
+      <span className='pl-0.5 text-[var(--text-muted)] text-small'>{label}</span>
+      <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
+      <div className='-mx-2 grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-x-2 gap-y-0.5'>
+        {children}
+      </div>
+    </section>
+  )
+}
+
+export function Integrations() {
   const params = useParams()
   const workspaceId = (params?.workspaceId as string) || ''
 
   useOAuthReturnRouter()
 
   const [searchTerm, setSearchTerm] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState<string>(ALL_CATEGORY)
   const [selectedCredentialId, setSelectedCredentialId] = useState<string | null>(null)
   const [memberRole, setMemberRole] = useState<WorkspaceCredentialRole>('admin')
   const [memberUserId, setMemberUserId] = useState('')
@@ -113,6 +223,12 @@ export function IntegrationsManager() {
     | { type: 'kb-connectors'; knowledgeBaseId: string }
     | undefined
   >(undefined)
+  const [saJsonInput, setSaJsonInput] = useState('')
+  const [saDisplayName, setSaDisplayName] = useState('')
+  const [saDescription, setSaDescription] = useState('')
+  const [saError, setSaError] = useState<string | null>(null)
+  const [saIsSubmitting, setSaIsSubmitting] = useState(false)
+  const [saDragActive, setSaDragActive] = useState(false)
 
   const { data: session } = useSession()
   const currentUserId = session?.user?.id || ''
@@ -132,10 +248,11 @@ export function IntegrationsManager() {
 
   const { data: workspacePermissions } = useWorkspacePermissionsQuery(workspaceId || null)
 
-  const oauthCredentials = useMemo(
-    () => credentials.filter((c) => c.type === 'oauth' || c.type === 'service_account'),
-    [credentials]
-  )
+  const oauthCredentials = useMemo(() => {
+    const real = credentials.filter((c) => c.type === 'oauth' || c.type === 'service_account')
+    if (!PREVIEW_CONNECTED_WITH_SAMPLES) return real
+    return [...real, ...getSampleConnectedCredentials(workspaceId, currentUserId)]
+  }, [credentials, workspaceId, currentUserId])
 
   const selectedCredential = useMemo(
     () => oauthCredentials.find((credential) => credential.id === selectedCredentialId) || null,
@@ -183,12 +300,6 @@ export function IntegrationsManager() {
     })
   }, [filteredCredentials])
 
-  const filteredAvailableIntegrations = useMemo(() => {
-    if (!searchTerm.trim()) return oauthConnections
-    const normalized = searchTerm.toLowerCase()
-    return oauthConnections.filter((service) => service.name.toLowerCase().includes(normalized))
-  }, [oauthConnections, searchTerm])
-
   const oauthServiceOptions = useMemo(
     () =>
       oauthConnections.map((service) => ({
@@ -254,15 +365,6 @@ export function IntegrationsManager() {
 
   const isDetailsDirty = isDescriptionDirty || isDisplayNameDirty
 
-  const setNavGuardDirty = useSettingsDirtyStore((s) => s.setDirty)
-  const resetNavGuard = useSettingsDirtyStore((s) => s.reset)
-
-  useEffect(() => {
-    setNavGuardDirty(isDetailsDirty)
-  }, [isDetailsDirty, setNavGuardDirty])
-
-  useEffect(() => () => resetNavGuard(), [resetNavGuard])
-
   const handleSaveDetails = async () => {
     if (!selectedCredential || !isSelectedAdmin || !isDetailsDirty || updateCredential.isPending)
       return
@@ -383,6 +485,10 @@ export function IntegrationsManager() {
     setCreateError(null)
     setCreateStep(1)
     setServiceSearch('')
+    setSaJsonInput('')
+    setSaDisplayName('')
+    setSaDescription('')
+    setSaError(null)
     pendingReturnOriginRef.current = undefined
   }
 
@@ -625,27 +731,265 @@ export function IntegrationsManager() {
     }
   }
 
-  const hasCredentials = oauthCredentials && oauthCredentials.length > 0
+  const allIntegrations = useMemo(() => INTEGRATIONS, [])
 
-  const connectedProviderIds = useMemo(
-    () => new Set(oauthCredentials.map((c) => c.providerId).filter(Boolean) as string[]),
-    [oauthCredentials]
+  const featuredIntegrations = useMemo(() => {
+    const bySlug = new Map(allIntegrations.map((i) => [i.slug, i]))
+    return FEATURED_SLUGS.map((slug) => bySlug.get(slug)).filter(
+      (i): i is Integration => i !== undefined
+    )
+  }, [allIntegrations])
+
+  /** Lookup integration metadata by OAuth service display name (case-insensitive). */
+  const integrationByLowerName = useMemo(
+    () => new Map(allIntegrations.map((i) => [i.name.toLowerCase(), i])),
+    [allIntegrations]
   )
 
+  const connectedItems = useMemo<ConnectedDisplayItem[]>(() => {
+    return oauthCredentials.flatMap((credential) => {
+      if (!credential.providerId) return []
+      const service = getServiceConfigByProviderId(credential.providerId)
+      if (!service) return []
+      const integration = integrationByLowerName.get(service.name.toLowerCase())
+      return [
+        {
+          credential,
+          name: credential.displayName,
+          description: credential.description || `${service.name} integration`,
+          serviceName: service.name,
+          integrationType: integration?.integrationType ?? null,
+          blockType: integration?.type ?? '',
+          icon: service.icon as ComponentType<{ className?: string }>,
+        },
+      ]
+    })
+  }, [oauthCredentials, integrationByLowerName])
+
+  const allCategorySections = useMemo(() => {
+    const grouped = new Map<string, Integration[]>()
+    for (const integration of allIntegrations) {
+      const label = integration.integrationType
+      const bucket = grouped.get(label)
+      if (bucket) bucket.push(integration)
+      else grouped.set(label, [integration])
+    }
+    return Array.from(grouped, ([label, items]) => ({
+      label,
+      integrations: [...items].sort((a, b) => a.name.localeCompare(b.name)),
+    })).sort((a, b) => a.label.localeCompare(b.label))
+  }, [allIntegrations])
+
+  const categoryOptions = useMemo(
+    () => [
+      ALL_CATEGORY,
+      ...(connectedItems.length > 0 ? [CONNECTED_LABEL] : []),
+      FEATURED_LABEL,
+      ...allCategorySections.map((section) => section.label),
+    ],
+    [allCategorySections, connectedItems.length]
+  )
+
+  const isAllCategorySelected = selectedCategory === ALL_CATEGORY
+  const isFeaturedSelected = selectedCategory === FEATURED_LABEL
+  const isConnectedSelected = selectedCategory === CONNECTED_LABEL
+
+  const filteredCategorySections = useMemo(() => {
+    // Connected-only view: integration sections are suppressed entirely.
+    if (isConnectedSelected) return []
+
+    const normalizedSearch = searchTerm.trim().toLowerCase()
+    const matchesSearch = (integration: Integration) =>
+      !normalizedSearch ||
+      integration.name.toLowerCase().includes(normalizedSearch) ||
+      integration.description.toLowerCase().includes(normalizedSearch)
+
+    if (isFeaturedSelected) {
+      const items = featuredIntegrations.filter(matchesSearch)
+      return items.length > 0 ? [{ label: FEATURED_LABEL, integrations: items }] : []
+    }
+
+    const matchesCategory = (integration: Integration) =>
+      isAllCategorySelected || integration.integrationType === selectedCategory
+
+    // Featured is a curated home-row pin: hide it during search so results
+    // are not duplicated between the Featured section and the category list.
+    const featured = normalizedSearch ? [] : featuredIntegrations.filter(matchesCategory)
+    const featuredSection =
+      featured.length > 0 ? [{ label: FEATURED_LABEL, integrations: featured }] : []
+
+    if (isAllCategorySelected) {
+      const rest = allCategorySections
+        .map((section) => ({
+          label: section.label,
+          integrations: section.integrations.filter(matchesSearch),
+        }))
+        .filter((section) => section.integrations.length > 0)
+      return [...featuredSection, ...rest]
+    }
+
+    const integrations = allIntegrations
+      .filter(matchesCategory)
+      .filter(matchesSearch)
+      .sort((a, b) => a.name.localeCompare(b.name))
+
+    return [
+      ...featuredSection,
+      ...(integrations.length > 0 ? [{ label: selectedCategory, integrations }] : []),
+    ]
+  }, [
+    allCategorySections,
+    allIntegrations,
+    featuredIntegrations,
+    isAllCategorySelected,
+    isConnectedSelected,
+    isFeaturedSelected,
+    searchTerm,
+    selectedCategory,
+  ])
+
+  const visibleConnectedItems = useMemo(() => {
+    // Featured-only view: Connected is suppressed (mirror behavior of the
+    // Featured-only branch above, which renders only the Featured section).
+    if (isFeaturedSelected) return []
+
+    const normalizedSearch = searchTerm.trim().toLowerCase()
+    return connectedItems.filter((item) => {
+      const matchesCategory =
+        isAllCategorySelected || isConnectedSelected || item.integrationType === selectedCategory
+      if (!matchesCategory) return false
+      if (!normalizedSearch) return true
+      return (
+        item.name.toLowerCase().includes(normalizedSearch) ||
+        item.description.toLowerCase().includes(normalizedSearch) ||
+        item.serviceName.toLowerCase().includes(normalizedSearch)
+      )
+    })
+  }, [
+    connectedItems,
+    isAllCategorySelected,
+    isConnectedSelected,
+    isFeaturedSelected,
+    searchTerm,
+    selectedCategory,
+  ])
+
   const showNoResults =
-    searchTerm.trim() &&
-    sortedCredentials.length === 0 &&
-    filteredAvailableIntegrations.length === 0
+    Boolean(searchTerm.trim() || !isAllCategorySelected) &&
+    filteredCategorySections.length === 0 &&
+    visibleConnectedItems.length === 0
 
-  const handleAddForProvider = useCallback((providerId: string) => {
-    setCreateOAuthProviderId(providerId)
-    setCreateStep(2)
-    setCreateDisplayName('')
-    setCreateDescription('')
-    setCreateError(null)
-    setShowCreateModal(true)
+  const validateServiceAccountJson = (raw: string): { valid: boolean; error?: string } => {
+    let parsed: Record<string, unknown>
+    try {
+      parsed = JSON.parse(raw)
+    } catch {
+      return { valid: false, error: 'Invalid JSON. Paste the full service account key file.' }
+    }
+    if (parsed.type !== 'service_account') {
+      return { valid: false, error: 'JSON key must have "type": "service_account".' }
+    }
+    if (!parsed.client_email || typeof parsed.client_email !== 'string') {
+      return { valid: false, error: 'Missing "client_email" field.' }
+    }
+    if (!parsed.private_key || typeof parsed.private_key !== 'string') {
+      return { valid: false, error: 'Missing "private_key" field.' }
+    }
+    if (!parsed.project_id || typeof parsed.project_id !== 'string') {
+      return { valid: false, error: 'Missing "project_id" field.' }
+    }
+    return { valid: true }
+  }
+
+  const handleCreateServiceAccount = async () => {
+    setSaError(null)
+    const trimmed = saJsonInput.trim()
+    if (!trimmed) {
+      setSaError('Paste the service account JSON key.')
+      return
+    }
+    const validation = validateServiceAccountJson(trimmed)
+    if (!validation.valid) {
+      setSaError(validation.error ?? 'Invalid JSON')
+      return
+    }
+    setSaIsSubmitting(true)
+    try {
+      await createCredential.mutateAsync({
+        workspaceId,
+        type: 'service_account',
+        displayName: saDisplayName.trim() || undefined,
+        description: saDescription.trim() || undefined,
+        serviceAccountJson: trimmed,
+      })
+      setShowCreateModal(false)
+      resetCreateForm()
+    } catch (error: unknown) {
+      const message = getErrorMessage(error, 'Failed to add service account')
+      setSaError(message)
+      logger.error('Failed to create service account credential', error)
+    } finally {
+      setSaIsSubmitting(false)
+    }
+  }
+
+  const readSaJsonFile = useCallback(
+    (file: File) => {
+      if (!file.name.endsWith('.json')) {
+        setSaError('Only .json files are supported')
+        return
+      }
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        const text = e.target?.result
+        if (typeof text === 'string') {
+          setSaJsonInput(text)
+          setSaError(null)
+          try {
+            const parsed = JSON.parse(text)
+            if (parsed.client_email && !saDisplayName.trim()) {
+              setSaDisplayName(parsed.client_email)
+            }
+          } catch {
+            // validation will catch this on submit
+          }
+        }
+      }
+      reader.readAsText(file)
+    },
+    [saDisplayName]
+  )
+
+  const handleSaFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+    readSaJsonFile(file)
+    event.target.value = ''
+  }
+
+  const handleSaDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    setSaDragActive(true)
   }, [])
 
+  const handleSaDragLeave = useCallback((event: React.DragEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    setSaDragActive(false)
+  }, [])
+
+  const handleSaDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      setSaDragActive(false)
+      const file = event.dataTransfer.files[0]
+      if (file) readSaJsonFile(file)
+    },
+    [readSaJsonFile]
+  )
+
   const filteredServices = useMemo(() => {
     if (!serviceSearch.trim()) return oauthServiceOptions
     const q = serviceSearch.toLowerCase()
@@ -671,14 +1015,14 @@ export function IntegrationsManager() {
               <div className='flex flex-col gap-3'>
                 <div className='flex items-center gap-2 rounded-[8px] border border-[var(--border)] bg-transparent px-2 py-[5px]'>
                   <Search
-                    className='size-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+                    className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
                     strokeWidth={2}
                   />
                   <UiInput
                     placeholder='Search services...'
                     value={serviceSearch}
                     onChange={(e) => setServiceSearch(e.target.value)}
-                    className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+                    className='h-auto flex-1 border-0 bg-transparent p-0 leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
                   />
                 </div>
                 <div className='flex max-h-[320px] flex-col overflow-y-auto'>
@@ -694,9 +1038,9 @@ export function IntegrationsManager() {
                           setCreateStep(2)
                           setServiceSearch('')
                         }}
-                        className='h-auto w-full justify-start gap-2.5 rounded-[6px] p-2 text-left hover-hover:bg-[var(--surface-5)]'
+                        className='h-auto w-full justify-start gap-2.5 rounded-[6px] px-2 py-2 text-left hover-hover:bg-[var(--surface-5)]'
                       >
-                        <div className='flex size-8 flex-shrink-0 items-center justify-center rounded-[6px] bg-[var(--surface-5)]'>
+                        <div className='flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-[6px] bg-[var(--surface-5)]'>
                           {config ? (
                             createElement(config.icon, { className: 'h-4 w-4' })
                           ) : (
@@ -736,7 +1080,7 @@ export function IntegrationsManager() {
                     setCreateStep(1)
                     setCreateError(null)
                   }}
-                  className='size-6 rounded-[4px] p-0 text-[var(--text-muted)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
+                  className='h-6 w-6 rounded-[4px] p-0 text-[var(--text-muted)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
                   aria-label='Back'
                 >
                   ←
@@ -767,7 +1111,7 @@ export function IntegrationsManager() {
               )}
               <div className='flex flex-col gap-4'>
                 <div className='flex items-center gap-3'>
-                  <div className='flex size-[40px] flex-shrink-0 items-center justify-center rounded-[8px] bg-[var(--surface-5)]'>
+                  <div className='flex h-[40px] w-[40px] flex-shrink-0 items-center justify-center rounded-[8px] bg-[var(--surface-5)]'>
                     {selectedOAuthService &&
                       createElement(selectedOAuthService.icon, { className: 'h-[18px] w-[18px]' })}
                   </div>
@@ -791,8 +1135,8 @@ export function IntegrationsManager() {
                     <ul className='max-h-[200px] space-y-2.5 overflow-y-auto px-3.5 py-3'>
                       {createDisplayScopes.map((scope) => (
                         <li key={scope} className='flex items-start gap-2.5'>
-                          <div className='mt-0.5 flex size-[16px] flex-shrink-0 items-center justify-center'>
-                            <Check className='size-[10px] text-[var(--text-primary)]' />
+                          <div className='mt-0.5 flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
+                            <Check className='h-[10px] w-[10px] text-[var(--text-primary)]' />
                           </div>
                           <span className='text-[12px] text-[var(--text-primary)]'>
                             {getScopeDescription(scope)}
@@ -855,501 +1199,254 @@ export function IntegrationsManager() {
               </Button>
             </ModalFooter>
           </>
-        ) : selectedOAuthService?.providerId === ATLASSIAN_SERVICE_ACCOUNT_PROVIDER_ID ? (
-          <AtlassianServiceAccountForm
-            service={selectedOAuthService}
-            serviceLabel={selectedOAuthService.name || resolveProviderLabel(createOAuthProviderId)}
-            workspaceId={workspaceId}
-            onBack={() => setCreateStep(1)}
-            onCreate={(input) => createCredential.mutateAsync(input)}
-            onCreated={() => {
-              setShowCreateModal(false)
-              resetCreateForm()
-            }}
-          />
         ) : (
-          <ServiceAccountForm
-            service={selectedOAuthService}
-            serviceLabel={selectedOAuthService?.name || resolveProviderLabel(createOAuthProviderId)}
-            workspaceId={workspaceId}
-            setupGuideHref='https://docs.sim.ai/integrations/google-service-account'
-            onBack={() => setCreateStep(1)}
-            onCreate={(input) => createCredential.mutateAsync(input)}
-            onCreated={() => {
-              setShowCreateModal(false)
-              resetCreateForm()
-            }}
-          />
-        )}
-      </ModalContent>
-    </Modal>
-  )
-
-  const handleCloseDeleteDialog = () => {
-    setShowDeleteConfirmDialog(false)
-    setCredentialToDelete(null)
-    setDeleteError(null)
-  }
-
-  const deleteConfirmDialogJsx = (
-    <Modal
-      open={showDeleteConfirmDialog}
-      onOpenChange={(open) => !open && handleCloseDeleteDialog()}
-    >
-      <ModalContent size='sm'>
-        <ModalHeader>Disconnect Integration</ModalHeader>
-        <ModalBody>
-          <ModalDescription className='text-[var(--text-secondary)]'>
-            Are you sure you want to disconnect{' '}
-            <span className='font-medium text-[var(--text-primary)]'>
-              {credentialToDelete?.displayName}
-            </span>
-            ? This action cannot be undone.
-          </ModalDescription>
-          {deleteError && (
-            <div className='mt-3 rounded-lg border border-[color-mix(in_srgb,var(--text-error)_40%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] p-3'>
-              <div className='flex items-start gap-2.5'>
-                <AlertTriangle className='mt-[1px] size-4 flex-shrink-0 text-[var(--text-error)]' />
-                <p className='text-[var(--text-error)] text-small'>{deleteError}</p>
+          <>
+            <ModalHeader>
+              <div className='flex items-center gap-2.5'>
+                <Button
+                  type='button'
+                  variant='ghost'
+                  onClick={() => {
+                    setCreateStep(1)
+                    setSaError(null)
+                  }}
+                  className='h-6 w-6 rounded-[4px] p-0 text-[var(--text-muted)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
+                  aria-label='Back'
+                >
+                  ←
+                </Button>
+                <span>
+                  Add {selectedOAuthService?.name || resolveProviderLabel(createOAuthProviderId)}
+                </span>
               </div>
-            </div>
-          )}
-        </ModalBody>
-        <ModalFooter>
-          <Button variant='default' onClick={handleCloseDeleteDialog}>
-            Cancel
-          </Button>
-          <Button
-            variant='destructive'
-            onClick={handleConfirmDelete}
-            disabled={disconnectOAuthService.isPending || deleteCredential.isPending}
-          >
-            {disconnectOAuthService.isPending || deleteCredential.isPending
-              ? 'Disconnecting...'
-              : 'Disconnect'}
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  )
-
-  const unsavedChangesAlertJsx = (
-    <Modal open={showUnsavedChangesAlert} onOpenChange={setShowUnsavedChangesAlert}>
-      <ModalContent size='sm'>
-        <ModalHeader>Unsaved Changes</ModalHeader>
-        <ModalBody>
-          <ModalDescription className='text-[var(--text-secondary)]'>
-            You have unsaved changes. Are you sure you want to discard them?
-          </ModalDescription>
-        </ModalBody>
-        <ModalFooter>
-          <Button variant='default' onClick={() => setShowUnsavedChangesAlert(false)}>
-            Keep Editing
-          </Button>
-          <Button variant='destructive' onClick={handleDiscardChanges}>
-            Discard Changes
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  )
-
-  if (selectedCredential) {
-    return (
-      <>
-        <div className='flex h-full flex-col gap-4.5'>
-          <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='flex flex-col gap-4.5'>
-              <div className='flex items-center gap-2.5 border-[var(--border)] border-b pb-3'>
-                <div className='flex size-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[var(--surface-5)]'>
-                  {selectedOAuthServiceConfig ? (
-                    createElement(selectedOAuthServiceConfig.icon, {
-                      className: 'h-[18px] w-[18px]',
-                    })
-                  ) : (
-                    <span className='font-medium text-[var(--text-tertiary)] text-small'>
-                      {resolveProviderLabel(selectedCredential.providerId).slice(0, 1)}
-                    </span>
-                  )}
+            </ModalHeader>
+            <ModalBody>
+              {saError && (
+                <div className='mb-3'>
+                  <Badge variant='red' size='lg' dot className='max-w-full'>
+                    {saError}
+                  </Badge>
                 </div>
-                <div className='min-w-0 flex-1'>
-                  <div className='flex items-center gap-2'>
-                    <p className='truncate font-medium text-[var(--text-primary)] text-base'>
-                      {selectedOAuthServiceConfig?.name ||
-                        resolveProviderLabel(selectedCredential.providerId) ||
-                        'Unknown service'}
+              )}
+              <div className='flex flex-col gap-4'>
+                <div className='flex items-center gap-3'>
+                  <div className='flex h-[40px] w-[40px] flex-shrink-0 items-center justify-center rounded-[8px] bg-[var(--surface-5)]'>
+                    {selectedOAuthService &&
+                      createElement(selectedOAuthService.icon, { className: 'h-[18px] w-[18px]' })}
+                  </div>
+                  <div>
+                    <p className='font-medium text-[13px] text-[var(--text-primary)]'>
+                      Add {selectedOAuthService?.name || 'service account'}
                     </p>
-                    <Badge variant='gray-secondary' size='sm'>
-                      {selectedOAuthServiceConfig?.authType === 'service_account'
-                        ? 'service account'
-                        : 'oauth'}
-                    </Badge>
-                    {selectedCredential.role && (
-                      <Badge variant='gray-secondary' size='sm'>
-                        {selectedCredential.role}
-                      </Badge>
-                    )}
+                    <p className='text-[12px] text-[var(--text-tertiary)]'>
+                      {selectedOAuthService?.description || 'Paste or upload the JSON key file'}
+                    </p>
+                    <a
+                      href='https://docs.sim.ai/credentials/google-service-account'
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      className='text-[12px] text-[var(--accent)] hover:underline'
+                    >
+                      View setup guide
+                    </a>
                   </div>
-                  <p className='text-[var(--text-muted)] text-small'>
-                    {selectedOAuthServiceConfig?.description || 'Connected service'}
-                  </p>
-                </div>
-              </div>
-
-              <div className='flex flex-col gap-1.5'>
-                <Label className='flex items-center gap-1.5'>
-                  Display Name
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild>
-                      <Button
-                        type='button'
-                        variant='ghost'
-                        className='-my-1 size-5 p-0'
-                        onClick={() => {
-                          navigator.clipboard.writeText(selectedCredential.id)
-                          setCopyIdSuccess(true)
-                          setTimeout(() => setCopyIdSuccess(false), 2000)
-                        }}
-                        aria-label='Copy value'
-                      >
-                        {copyIdSuccess ? (
-                          <Check className='size-3 text-[var(--text-success)]' />
-                        ) : (
-                          <Clipboard className='size-3 text-[var(--text-icon)]' />
-                        )}
-                      </Button>
-                    </Tooltip.Trigger>
-                    <Tooltip.Content>
-                      {copyIdSuccess ? 'Copied!' : 'Copy credential ID'}
-                    </Tooltip.Content>
-                  </Tooltip.Root>
-                </Label>
-                <Input
-                  id='credential-display-name'
-                  value={selectedDisplayNameDraft}
-                  onChange={(event) => setSelectedDisplayNameDraft(event.target.value)}
-                  autoComplete='off'
-                  data-lpignore='true'
-                  disabled={!isSelectedAdmin}
-                />
-              </div>
-
-              <div className='flex flex-col gap-1.5'>
-                <Label>Description</Label>
-                <Textarea
-                  id='credential-description'
-                  value={selectedDescriptionDraft}
-                  onChange={(event) => setSelectedDescriptionDraft(event.target.value)}
-                  placeholder='Add a description...'
-                  maxLength={500}
-                  autoComplete='off'
-                  data-lpignore='true'
-                  disabled={!isSelectedAdmin}
-                  className='min-h-[60px] resize-none'
-                />
-              </div>
-
-              {detailsError && (
-                <div className='rounded-lg border border-[color-mix(in_srgb,var(--text-error)_40%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] px-2.5 py-2 text-[var(--text-error)] text-small'>
-                  {detailsError}
                 </div>
-              )}
-
-              <div className='flex flex-col gap-1.5 border-[var(--border)] border-t pt-4'>
-                <Label>Members ({activeMembers.length})</Label>
 
-                {membersLoading ? (
-                  <div className='flex flex-col gap-2'>
-                    <Skeleton className='h-[44px] w-full rounded-lg' />
-                    <Skeleton className='h-[44px] w-full rounded-lg' />
-                  </div>
-                ) : (
-                  <div className='flex flex-col gap-2'>
-                    {activeMembers.map((member) => (
-                      <div
-                        key={member.id}
-                        className={cn(
-                          'grid items-center gap-2',
-                          isSelectedAdmin ? 'grid-cols-[1fr_120px_72px]' : 'grid-cols-[1fr_200px]'
-                        )}
-                      >
-                        <div className='flex min-w-0 items-center gap-2.5'>
-                          <Avatar className='size-8 flex-shrink-0'>
-                            <AvatarFallback
-                              style={{
-                                background: getUserColor(member.userId || member.userEmail || ''),
-                              }}
-                              className='border-0 text-small text-white'
-                            >
-                              {(member.userName || member.userEmail || '?').charAt(0).toUpperCase()}
-                            </AvatarFallback>
-                          </Avatar>
-                          <div className='min-w-0'>
-                            <p className='truncate font-medium text-[var(--text-primary)] text-small'>
-                              {member.userName || member.userEmail || member.userId}
-                            </p>
-                            <p className='truncate text-[var(--text-tertiary)] text-caption'>
-                              {member.userEmail || member.userId}
-                            </p>
-                          </div>
-                        </div>
-
-                        <Combobox
-                          options={roleComboOptions}
-                          value={
-                            ROLE_OPTIONS.find((option) => option.value === member.role)?.label || ''
-                          }
-                          selectedValue={member.role}
-                          onChange={(value) =>
-                            handleChangeMemberRole(member.userId, value as WorkspaceCredentialRole)
-                          }
-                          placeholder='Role'
-                          disabled={
-                            !isSelectedAdmin || (member.role === 'admin' && adminMemberCount <= 1)
-                          }
-                          size='sm'
-                        />
-                        {isSelectedAdmin && (
-                          <Button
-                            variant='ghost'
-                            onClick={() => handleRemoveMember(member.userId)}
-                            disabled={member.role === 'admin' && adminMemberCount <= 1}
-                            className='w-full justify-end'
-                          >
-                            Remove
-                          </Button>
-                        )}
-                      </div>
-                    ))}
-                    {isSelectedAdmin && (
-                      <div className='grid grid-cols-[1fr_120px_72px] items-center gap-2 border-[var(--border)] border-t pt-2'>
-                        <Combobox
-                          options={workspaceUserOptions}
-                          value={
-                            workspaceUserOptions.find((option) => option.value === memberUserId)
-                              ?.label || ''
-                          }
-                          selectedValue={memberUserId}
-                          onChange={setMemberUserId}
-                          placeholder='Add member...'
-                          searchable
-                          searchPlaceholder='Search members...'
-                          size='sm'
-                        />
-                        <Combobox
-                          options={roleComboOptions}
-                          value={
-                            ROLE_OPTIONS.find((option) => option.value === memberRole)?.label || ''
-                          }
-                          selectedValue={memberRole}
-                          onChange={(value) => setMemberRole(value as WorkspaceCredentialRole)}
-                          placeholder='Role'
-                          size='sm'
-                        />
-                        <Button
-                          variant='ghost'
-                          onClick={handleAddMember}
-                          disabled={!memberUserId || upsertMember.isPending}
-                          className='w-full justify-end'
-                        >
-                          Add
-                        </Button>
+                <div>
+                  <Label>
+                    JSON Key<span className='ml-1'>*</span>
+                  </Label>
+                  <div
+                    onDragOver={handleSaDragOver}
+                    onDragLeave={handleSaDragLeave}
+                    onDrop={handleSaDrop}
+                    className={cn(
+                      'relative mt-1.5 rounded-md border-2 border-dashed transition-colors',
+                      saDragActive
+                        ? 'border-[var(--accent)] bg-[var(--accent)]/5'
+                        : 'border-transparent'
+                    )}
+                  >
+                    {saDragActive && (
+                      <div className='pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-md bg-[var(--accent)]/5'>
+                        <p className='font-medium text-[13px] text-[var(--accent)]'>
+                          Drop JSON key file here
+                        </p>
                       </div>
                     )}
+                    <Textarea
+                      value={saJsonInput}
+                      onChange={(event) => {
+                        setSaJsonInput(event.target.value)
+                        setSaError(null)
+                        if (!saDisplayName.trim()) {
+                          try {
+                            const parsed = JSON.parse(event.target.value)
+                            if (parsed.client_email) setSaDisplayName(parsed.client_email)
+                          } catch {
+                            // not valid yet
+                          }
+                        }
+                      }}
+                      placeholder='Paste your service account JSON key here or drag & drop a .json file...'
+                      autoComplete='off'
+                      data-lpignore='true'
+                      className={cn(
+                        'min-h-[120px] resize-none border-0 font-mono text-[12px]',
+                        saDragActive && 'opacity-30'
+                      )}
+                    />
                   </div>
-                )}
+                  <div className='mt-1.5'>
+                    <label className='inline-flex cursor-pointer items-center gap-1.5 text-[12px] text-[var(--text-muted)] hover:text-[var(--text-secondary)]'>
+                      <input
+                        type='file'
+                        accept='.json'
+                        onChange={handleSaFileUpload}
+                        className='hidden'
+                      />
+                      Or upload a .json file
+                    </label>
+                  </div>
+                </div>
+                <div>
+                  <Label>Display name</Label>
+                  <Input
+                    value={saDisplayName}
+                    onChange={(event) => setSaDisplayName(event.target.value)}
+                    placeholder='Auto-populated from client_email'
+                    autoComplete='off'
+                    data-lpignore='true'
+                    className='mt-1.5'
+                  />
+                </div>
+                <div>
+                  <Label>Description</Label>
+                  <Textarea
+                    value={saDescription}
+                    onChange={(event) => setSaDescription(event.target.value)}
+                    placeholder='Optional description'
+                    maxLength={500}
+                    autoComplete='off'
+                    data-lpignore='true'
+                    className='mt-1.5 min-h-[80px] resize-none'
+                  />
+                </div>
               </div>
-            </div>
-          </div>
-
-          <div className='mt-auto flex items-center justify-between border-[var(--border)] border-t pt-2.5'>
-            <div className='flex items-center gap-2'>
-              {isSelectedAdmin && (
-                <>
-                  {selectedOAuthServiceConfig?.authType !== 'service_account' && (
-                    <Button
-                      variant='default'
-                      onClick={handleReconnectOAuth}
-                      disabled={connectOAuthService.isPending}
-                    >
-                      {`Reconnect to ${
-                        resolveProviderLabel(selectedCredential.providerId) || 'service'
-                      }`}
-                    </Button>
-                  )}
-                  {(workspaceUserOptions.length > 0 || isSharingWithWorkspace) && (
-                    <Button
-                      variant='default'
-                      onClick={handleShareWithWorkspace}
-                      disabled={isSharingWithWorkspace || workspaceUserOptions.length === 0}
-                    >
-                      <Share2 className='mr-1.5 size-[13px]' />
-                      {isSharingWithWorkspace ? 'Sharing...' : 'Share with workspace'}
-                    </Button>
-                  )}
-                  <Button
-                    variant='ghost'
-                    onClick={() => handleDeleteClick(selectedCredential)}
-                    disabled={disconnectOAuthService.isPending || deleteCredential.isPending}
-                  >
-                    Disconnect
-                  </Button>
-                </>
-              )}
-            </div>
-            <div className='flex items-center gap-2'>
-              <Button onClick={handleBackAttempt} variant='default'>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                variant='default'
+                onClick={() => {
+                  setCreateStep(1)
+                  setSaError(null)
+                }}
+              >
                 Back
               </Button>
-              {isSelectedAdmin && (
-                <Button
-                  variant='primary'
-                  onClick={handleSaveDetails}
-                  disabled={!isDetailsDirty || updateCredential.isPending}
-                >
-                  {updateCredential.isPending ? 'Saving...' : 'Save'}
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {createModalJsx}
-        {deleteConfirmDialogJsx}
-        {unsavedChangesAlertJsx}
-      </>
-    )
-  }
+              <Button
+                variant='primary'
+                onClick={handleCreateServiceAccount}
+                disabled={!saJsonInput.trim() || saIsSubmitting}
+              >
+                {saIsSubmitting ? 'Adding...' : 'Add Service Account'}
+              </Button>
+            </ModalFooter>
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  )
 
   return (
-    <>
-      <div className='flex h-full flex-col gap-4.5'>
-        <div className='flex items-center gap-2'>
-          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-1.5 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
-            <Search
-              className='size-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
-              strokeWidth={2}
-            />
-            <UiInput
-              placeholder='Search integrations...'
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              disabled={credentialsLoading}
-              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
-            />
-          </div>
-          <Button
-            onClick={() => setShowCreateModal(true)}
-            disabled={credentialsLoading}
-            variant='primary'
-          >
-            <Plus className='mr-1.5 size-[13px]' />
-            Connect
-          </Button>
-        </div>
-
-        <div className='min-h-0 flex-1 overflow-y-auto'>
-          {credentialsLoading ? (
-            <div className='flex flex-col gap-2'>
-              <CredentialSkeleton />
-              <CredentialSkeleton />
-              <CredentialSkeleton />
+    <div className='flex h-full flex-col bg-[var(--bg)]'>
+      <IntegrationTabsHeader active='integrations' workspaceId={workspaceId} />
+      <div className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'>
+        <div className='mx-auto flex max-w-[48rem] flex-col gap-7 pb-3'>
+          <ShowcaseWithExplore prompt='Explain the integrations in Sim and what I should connect.' />
+          <div className='flex items-center gap-2'>
+            <div className='flex h-[30px] flex-1 items-center gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
+              <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-muted)]' />
+              <input
+                placeholder='Search integrations...'
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                disabled={credentialsLoading}
+                className='h-full w-full bg-transparent text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
+              />
             </div>
-          ) : (
-            <div className='flex flex-col gap-2'>
-              {sortedCredentials.map((credential) => {
-                const serviceConfig = credential.providerId
-                  ? getServiceConfigByProviderId(credential.providerId)
-                  : null
-                return (
-                  <div key={credential.id} className='flex items-center justify-between gap-3'>
-                    <div className='flex min-w-0 items-center gap-2.5'>
-                      {serviceConfig && (
-                        <div className='flex size-8 flex-shrink-0 items-center justify-center rounded-md bg-[var(--surface-5)]'>
-                          {createElement(serviceConfig.icon, { className: 'h-4 w-4' })}
-                        </div>
-                      )}
-                      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                        <span className='truncate font-medium text-base'>
-                          {credential.displayName}
-                        </span>
-                        <p className='truncate text-[var(--text-muted)] text-sm'>
-                          {credential.description || resolveProviderLabel(credential.providerId)}
-                        </p>
-                      </div>
-                    </div>
-                    <div className='flex flex-shrink-0 items-center gap-1'>
-                      {credential.role === 'admin' && (
-                        <Button
-                          variant='ghost'
-                          onClick={() => handleDeleteClick(credential)}
-                          disabled={
-                            credential.type === 'service_account'
-                              ? deleteCredential.isPending
-                              : disconnectOAuthService.isPending
-                          }
-                        >
-                          Disconnect
-                        </Button>
-                      )}
-                      <Button variant='default' onClick={() => handleSelectCredential(credential)}>
-                        Details
-                      </Button>
-                    </div>
-                  </div>
-                )
-              })}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button
+                  type='button'
+                  className='inline-flex h-[30px] items-center gap-1.5 rounded-lg bg-[var(--surface-active)] px-2 transition-colors hover-hover:bg-[var(--surface-6)]'
+                >
+                  <span className='text-[var(--text-body)] text-sm'>
+                    {selectedCategory === ALL_CATEGORY
+                      ? selectedCategory
+                      : formatIntegrationType(selectedCategory)}
+                  </span>
+                  <ChevronDown className='h-[7px] w-[9px] text-[var(--text-icon)]' />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align='end' className='min-w-[160px]'>
+                {categoryOptions.map((category) => (
+                  <DropdownMenuItem key={category} onSelect={() => setSelectedCategory(category)}>
+                    {category === ALL_CATEGORY ? category : formatIntegrationType(category)}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
 
-              {showNoResults && (
-                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
-                  No integrations found matching &ldquo;{searchTerm}&rdquo;
-                </div>
-              )}
+          <div className='flex flex-col gap-7'>
+            {visibleConnectedItems.length > 0 && (
+              <IntegrationSection label={CONNECTED_LABEL}>
+                {visibleConnectedItems.map((item) => (
+                  <ConnectedItem
+                    key={item.credential.id}
+                    href={`/workspace/${workspaceId}/integrations/connected/${item.credential.id}`}
+                    blockType={item.blockType}
+                    name={item.name}
+                    description={item.description}
+                    icon={item.icon}
+                  />
+                ))}
+              </IntegrationSection>
+            )}
+
+            {filteredCategorySections.map((section) => (
+              <IntegrationSection key={section.label} label={formatIntegrationType(section.label)}>
+                {section.integrations.map((integration) => {
+                  const Icon = blockTypeToIconMap[integration.type]
+                  if (!Icon) return null
+                  return (
+                    <IntegrationItem
+                      key={integration.type}
+                      blockType={integration.type}
+                      slug={integration.slug}
+                      workspaceId={workspaceId}
+                      name={integration.name}
+                      description={integration.description}
+                      icon={Icon}
+                    />
+                  )
+                })}
+              </IntegrationSection>
+            ))}
+
+            {showNoResults && (
+              <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
+                {searchTerm.trim()
+                  ? `No integrations found matching “${searchTerm}”`
+                  : 'No integrations in this category'}
+              </div>
+            )}
+          </div>
 
-              {filteredAvailableIntegrations.length > 0 && (
-                <div
-                  className={cn(
-                    'flex flex-col gap-2',
-                    (hasCredentials || showNoResults) && 'mt-2 border-[var(--border)] border-t pt-4'
-                  )}
-                >
-                  <p className='mb-1 font-medium text-[12px] text-[var(--text-muted)]'>
-                    Available integrations
-                  </p>
-                  {filteredAvailableIntegrations.map((service) => {
-                    const serviceConfig = getServiceConfigByProviderId(service.providerId)
-                    const isConnected = connectedProviderIds.has(service.providerId)
-                    return (
-                      <div
-                        key={service.providerId}
-                        className='flex items-center justify-between gap-3'
-                      >
-                        <div className='flex min-w-0 items-center gap-2.5'>
-                          {serviceConfig && (
-                            <div className='flex size-8 flex-shrink-0 items-center justify-center rounded-[6px] bg-[var(--surface-5)]'>
-                              {createElement(serviceConfig.icon, { className: 'h-4 w-4' })}
-                            </div>
-                          )}
-                          <span className='truncate font-medium text-[15px]'>{service.name}</span>
-                        </div>
-                        <Button
-                          variant='default'
-                          onClick={() => handleAddForProvider(service.providerId)}
-                        >
-                          {isConnected ? 'Add account' : 'Connect'}
-                        </Button>
-                      </div>
-                    )
-                  })}
-                </div>
-              )}
-            </div>
-          )}
+          {createModalJsx}
         </div>
       </div>
-
-      {createModalJsx}
-      {deleteConfirmDialogJsx}
-    </>
+    </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/layout.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/layout.tsx
new file mode 100644
index 00000000000..bc07dec142f
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/layout.tsx
@@ -0,0 +1,3 @@
+export default function IntegrationsLayout({ children }: { children: React.ReactNode }) {
+  return <div className='flex h-full flex-1 flex-col overflow-hidden'>{children}</div>
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/page.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/page.tsx
new file mode 100644
index 00000000000..81d4fe3a380
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/page.tsx
@@ -0,0 +1,8 @@
+import type { Metadata } from 'next'
+import { Integrations } from '@/app/workspace/[workspaceId]/integrations/integrations'
+
+export const metadata: Metadata = {
+  title: 'Integrations',
+}
+
+export default Integrations
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-context-menu/chunk-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-context-menu/chunk-context-menu.tsx
index f11d418b1da..ae7e9d0c89e 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-context-menu/chunk-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-context-menu/chunk-context-menu.tsx
@@ -7,7 +7,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/emcn'
-import { Copy, Eye, Pencil, Plus, SquareArrowUpRight, Trash } from '@/components/emcn/icons'
+import { Duplicate, Eye, Pencil, Plus, SquareArrowUpRight, Trash } from '@/components/emcn/icons'
 
 interface ChunkContextMenuProps {
   isOpen: boolean
@@ -115,7 +115,7 @@ export function ChunkContextMenu({
             )}
             {!isMultiSelect && onCopyContent && (
               <DropdownMenuItem onSelect={onCopyContent}>
-                <Copy />
+                <Duplicate />
                 Copy content
               </DropdownMenuItem>
             )}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
index ad215ab4a19..b4a36b14541 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
@@ -244,7 +244,7 @@ export function AddConnectorModal({
                     placeholder='Search sources...'
                     value={searchTerm}
                     onChange={(e) => setSearchTerm(e.target.value)}
-                    className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+                    className='h-auto flex-1 border-0 bg-transparent p-0 leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
                   />
                 </div>
                 <div className='min-h-[400px] overflow-y-auto'>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-base-context-menu/knowledge-base-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-base-context-menu/knowledge-base-context-menu.tsx
index 9993e71913e..dc2702ce252 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-base-context-menu/knowledge-base-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-base-context-menu/knowledge-base-context-menu.tsx
@@ -8,7 +8,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/emcn'
-import { Copy, Pencil, SquareArrowUpRight, TagIcon, Trash } from '@/components/emcn/icons'
+import { Duplicate, Pencil, SquareArrowUpRight, TagIcon, Trash } from '@/components/emcn/icons'
 
 interface KnowledgeBaseContextMenuProps {
   isOpen: boolean
@@ -92,7 +92,7 @@ export const KnowledgeBaseContextMenu = memo(function KnowledgeBaseContextMenu({
         )}
         {onCopyId && (
           <DropdownMenuItem onSelect={onCopyId}>
-            <Copy />
+            <Duplicate />
             Copy ID
           </DropdownMenuItem>
         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/layout.tsx b/apps/sim/app/workspace/[workspaceId]/layout.tsx
index ff0ce22c713..3ec0cd40544 100644
--- a/apps/sim/app/workspace/[workspaceId]/layout.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/layout.tsx
@@ -2,7 +2,6 @@ import { redirect } from 'next/navigation'
 import { ToastProvider } from '@/components/emcn'
 import { getSession } from '@/lib/auth'
 import { ImpersonationBanner } from '@/app/workspace/[workspaceId]/components/impersonation-banner'
-import { NavTour } from '@/app/workspace/[workspaceId]/components/product-tour'
 import { GlobalCommandsProvider } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { ProviderModelsLoader } from '@/app/workspace/[workspaceId]/providers/provider-models-loader'
 import { SettingsLoader } from '@/app/workspace/[workspaceId]/providers/settings-loader'
@@ -41,7 +40,6 @@ export default async function WorkspaceLayout({ children }: { children: React.Re
                   </div>
                 </div>
               </div>
-              <NavTour />
             </WorkspacePermissionsProvider>
           </div>
         </GlobalCommandsProvider>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
index 90645426d0e..64169b66793 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
@@ -5,11 +5,11 @@ import { useRef, useState } from 'react'
 import { AlertCircle } from 'lucide-react'
 import { createPortal } from 'react-dom'
 import {
-  Copy,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  Duplicate,
   Loader,
   Modal,
   ModalBody,
@@ -194,7 +194,7 @@ export function ExecutionSnapshot({
               onCloseAutoFocus={(e) => e.preventDefault()}
             >
               <DropdownMenuItem onSelect={handleCopyExecutionId}>
-                <Copy />
+                <Duplicate />
                 Copy Run ID
               </DropdownMenuItem>
             </DropdownMenuContent>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
index 1a0bfb5fd55..6e1b4119199 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
@@ -2,23 +2,31 @@
 
 import { useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ArrowDown } from 'lucide-react'
 import { useRouter } from 'next/navigation'
-import { Button, Loader } from '@/components/emcn'
-import { cn } from '@/lib/core/utils/cn'
+import { Button, Loader, Upload } from '@/components/emcn'
 import { extractWorkspaceIdFromExecutionKey, getViewerUrl } from '@/lib/uploads/utils/file-utils'
-import type { UserFile } from '@/executor/types'
 
 const logger = createLogger('FileCards')
 
+interface FileData {
+  id?: string
+  name: string
+  size: number
+  type: string
+  key: string
+  url: string
+  storageProvider?: 's3' | 'blob' | 'local'
+  bucketName?: string
+}
+
 interface FileCardsProps {
-  files: UserFile[]
+  files: FileData[]
   isExecutionFile?: boolean
   workspaceId?: string
 }
 
 interface FileCardProps {
-  file: UserFile
+  file: FileData
   isExecutionFile?: boolean
   workspaceId?: string
 }
@@ -107,9 +115,9 @@ function FileCard({ file, isExecutionFile = false, workspaceId }: FileCardProps)
           disabled={isDownloading}
         >
           {isDownloading ? (
-            <Loader className='mr-1 size-[10px]' animate />
+            <Loader className='mr-1 h-[10px] w-[10px]' animate />
           ) : (
-            <ArrowDown className='mr-1 size-[10px]' />
+            <Upload className='mr-1 h-[10px] w-[10px]' />
           )}
           {isDownloading ? 'Opening...' : 'Download'}
         </Button>
@@ -146,7 +154,7 @@ export function FileDownload({
   className,
   workspaceId,
 }: {
-  file: UserFile
+  file: FileData
   isExecutionFile?: boolean
   className?: string
   workspaceId?: string
@@ -209,16 +217,18 @@ export function FileDownload({
   return (
     <Button
       variant='ghost'
-      className={cn('h-7 px-2 text-xs', className)}
+      className={`h-7 px-2 text-xs ${className}`}
       onClick={handleDownload}
       disabled={isDownloading}
     >
       {isDownloading ? (
-        <Loader className='size-3' animate />
+        <Loader className='h-3 w-3' animate />
       ) : (
-        <ArrowDown className='size-[14px]' />
+        <Upload className='h-[14px] w-[14px]' />
       )}
       {isDownloading ? 'Downloading...' : 'Download'}
     </Button>
   )
 }
+
+export default FileCards
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
index 4bda12945a5..04c40f12b0b 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
@@ -19,12 +19,12 @@ import {
   Button,
   ChevronDown,
   Code,
-  Copy as CopyIcon,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  Duplicate,
   Input,
   Search as SearchIcon,
   Tooltip,
@@ -607,7 +607,7 @@ function DetailCodeSection({
                   onCloseAutoFocus={(e) => e.preventDefault()}
                 >
                   <DropdownMenuItem onSelect={handleCopy}>
-                    <CopyIcon />
+                    <Duplicate />
                     Copy
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
index a4bf55ea765..1eb7d8ba81d 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
@@ -2,17 +2,18 @@
 
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { formatDuration } from '@sim/utils/formatting'
-import { ArrowDown, ArrowUp, Check, ChevronUp, Clipboard, Eye, Search, X } from 'lucide-react'
+import { ArrowDown, ArrowUp, Check, ChevronUp, Clipboard, Search, X } from 'lucide-react'
 import { createPortal } from 'react-dom'
 import {
   Button,
   Code,
-  Copy as CopyIcon,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  Duplicate,
+  Eye,
   Input,
   Redo,
   Search as SearchIcon,
@@ -236,7 +237,7 @@ export const WorkflowOutputSection = memo(
                 onCloseAutoFocus={(e) => e.preventDefault()}
               >
                 <DropdownMenuItem onSelect={handleCopy}>
-                  <CopyIcon />
+                  <Duplicate />
                   Copy
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-row-context-menu/log-row-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-row-context-menu/log-row-context-menu.tsx
index d8435907db8..f9c4d743538 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-row-context-menu/log-row-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-row-context-menu/log-row-context-menu.tsx
@@ -2,12 +2,12 @@
 
 import { memo } from 'react'
 import {
-  Copy,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  Duplicate,
   Eye,
   Link,
   ListFilter,
@@ -103,7 +103,7 @@ export const LogRowContextMenu = memo(function LogRowContextMenu({
           </>
         )}
         <DropdownMenuItem disabled={!hasExecutionId} onSelect={onCopyExecutionId}>
-          <Copy />
+          <Duplicate />
           Copy Run ID
         </DropdownMenuItem>
         <DropdownMenuItem disabled={!hasExecutionId} onSelect={onCopyLink}>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
index 7ddf9eec8f2..b31605bea0a 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
@@ -19,10 +19,10 @@ import {
   Combobox,
   type ComboboxOption,
   DatePicker,
-  Download,
   Library,
   RefreshCw,
   toast,
+  Upload,
 } from '@/components/emcn'
 import type {
   WorkflowLogDetail,
@@ -1098,7 +1098,7 @@ export default function Logs() {
     () => [
       {
         label: 'Export',
-        icon: Download,
+        icon: Upload,
         onClick: handleExport,
         disabled: !userPermissions.canEdit || isExporting || logs.length === 0,
       },
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/[section]/loading.tsx b/apps/sim/app/workspace/[workspaceId]/settings/[section]/loading.tsx
deleted file mode 100644
index 1413bedfc79..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/[section]/loading.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-
-export default function SettingsLoading() {
-  return (
-    <div>
-      <Skeleton className='mb-[28px] h-[28px] w-[140px] rounded-[4px]' />
-      <div className='flex flex-col gap-[16px]'>
-        <Skeleton className='h-[20px] w-[200px] rounded-[4px]' />
-        <Skeleton className='h-[40px] w-full rounded-[8px]' />
-        <Skeleton className='h-[40px] w-full rounded-[8px]' />
-        <Skeleton className='h-[40px] w-full rounded-[8px]' />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/[section]/page.tsx b/apps/sim/app/workspace/[workspaceId]/settings/[section]/page.tsx
index ee6bdfe2310..d889c59182d 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/[section]/page.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/[section]/page.tsx
@@ -9,7 +9,6 @@ import { SettingsPage } from './settings'
 
 const SECTION_TITLES: Record<string, string> = {
   general: 'General',
-  integrations: 'Integrations',
   secrets: 'Secrets',
   'template-profile': 'Template Profile',
   'access-control': 'Access Control',
@@ -23,7 +22,6 @@ const SECTION_TITLES: Record<string, string> = {
   copilot: 'Copilot Keys',
   mcp: 'MCP Tools',
   'custom-tools': 'Custom Tools',
-  skills: 'Skills',
   'workflow-mcp-servers': 'MCP Servers',
   'credential-sets': 'Email Polling',
   'data-retention': 'Data Retention',
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
index cb697082685..d1425c8ec5c 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
@@ -4,191 +4,96 @@ import { useEffect } from 'react'
 import dynamic from 'next/dynamic'
 import { useSearchParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
-import { Skeleton } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
 import { captureEvent } from '@/lib/posthog/client'
-import { AdminSkeleton } from '@/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton'
-import { ApiKeysSkeleton } from '@/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton'
-import { BYOKSkeleton } from '@/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton'
-import { CopilotSkeleton } from '@/app/workspace/[workspaceId]/settings/components/copilot/copilot-skeleton'
-import { CredentialSetsSkeleton } from '@/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton'
-import { CustomToolsSkeleton } from '@/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton'
-import { GeneralSkeleton } from '@/app/workspace/[workspaceId]/settings/components/general/general-skeleton'
-import { InboxSkeleton } from '@/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton'
-import { IntegrationsSkeleton } from '@/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton'
-import { McpSkeleton } from '@/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton'
-import { RecentlyDeletedSkeleton } from '@/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton'
-import { SecretsSkeleton } from '@/app/workspace/[workspaceId]/settings/components/secrets/secrets-skeleton'
-import { SkillsSkeleton } from '@/app/workspace/[workspaceId]/settings/components/skills/skill-skeleton'
-import { WorkflowMcpServersSkeleton } from '@/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers-skeleton'
+import { General } from '@/app/workspace/[workspaceId]/settings/components/general/general'
 import type { SettingsSection } from '@/app/workspace/[workspaceId]/settings/navigation'
 import {
   allNavigationItems,
   isBillingEnabled,
   isCredentialSetsEnabled,
 } from '@/app/workspace/[workspaceId]/settings/navigation'
-import { AuditLogsSkeleton } from '@/ee/audit-logs/components/audit-logs-skeleton'
-import { DataDrainsSkeleton } from '@/ee/data-drains/components/data-drains-skeleton'
-import { DataRetentionSkeleton } from '@/ee/data-retention/components/data-retention-skeleton'
 
-/**
- * Generic skeleton fallback for sections without a dedicated skeleton.
- */
-function SettingsSectionSkeleton() {
-  return (
-    <div className='flex flex-col gap-4'>
-      <Skeleton className='h-[20px] w-[200px] rounded-sm' />
-      <Skeleton className='h-[40px] w-full rounded-lg' />
-      <Skeleton className='h-[40px] w-full rounded-lg' />
-      <Skeleton className='h-[40px] w-full rounded-lg' />
-    </div>
-  )
-}
-
-const General = dynamic(
-  () =>
-    import('@/app/workspace/[workspaceId]/settings/components/general/general').then(
-      (m) => m.General
-    ),
-  { loading: () => <GeneralSkeleton /> }
+const Admin = dynamic(() =>
+  import('@/app/workspace/[workspaceId]/settings/components/admin/admin').then((m) => m.Admin)
 )
-const Integrations = dynamic(
-  () =>
-    import('@/app/workspace/[workspaceId]/settings/components/integrations/integrations').then(
-      (m) => m.Integrations
-    ),
-  { loading: () => <IntegrationsSkeleton /> }
-)
-const Secrets = dynamic(
-  () =>
-    import('@/app/workspace/[workspaceId]/settings/components/secrets/secrets').then(
-      (m) => m.Secrets
-    ),
-  { loading: () => <SecretsSkeleton /> }
-)
-// const TemplateProfile = dynamic(
-//   () =>
-//     import(
-//       '@/app/workspace/[workspaceId]/settings/components/template-profile/template-profile'
-//     ).then((m) => m.TemplateProfile),
-//   { loading: () => <SettingsSectionSkeleton /> }
-// )
-const CredentialSets = dynamic(
-  () =>
-    import(
-      '@/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets'
-    ).then((m) => m.CredentialSets),
-  { loading: () => <CredentialSetsSkeleton /> }
-)
-const ApiKeys = dynamic(
-  () =>
-    import('@/app/workspace/[workspaceId]/settings/components/api-keys/api-keys').then(
-      (m) => m.ApiKeys
-    ),
-  { loading: () => <ApiKeysSkeleton /> }
+const ApiKeys = dynamic(() =>
+  import('@/app/workspace/[workspaceId]/settings/components/api-keys/api-keys').then(
+    (m) => m.ApiKeys
+  )
 )
-const Subscription = dynamic(
-  () =>
-    import('@/app/workspace/[workspaceId]/settings/components/subscription/subscription').then(
-      (m) => m.Subscription
-    ),
-  { loading: () => <SettingsSectionSkeleton /> }
+const BYOK = dynamic(() =>
+  import('@/app/workspace/[workspaceId]/settings/components/byok/byok').then((m) => m.BYOK)
 )
-const TeamManagement = dynamic(
-  () =>
-    import(
-      '@/app/workspace/[workspaceId]/settings/components/team-management/team-management'
-    ).then((m) => m.TeamManagement),
-  { loading: () => <SettingsSectionSkeleton /> }
+const Copilot = dynamic(() =>
+  import('@/app/workspace/[workspaceId]/settings/components/copilot/copilot').then((m) => m.Copilot)
 )
-const BYOK = dynamic(
-  () => import('@/app/workspace/[workspaceId]/settings/components/byok/byok').then((m) => m.BYOK),
-  { loading: () => <BYOKSkeleton /> }
+const CredentialSets = dynamic(() =>
+  import('@/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets').then(
+    (m) => m.CredentialSets
+  )
 )
-const Copilot = dynamic(
-  () =>
-    import('@/app/workspace/[workspaceId]/settings/components/copilot/copilot').then(
-      (m) => m.Copilot
-    ),
-  { loading: () => <CopilotSkeleton /> }
+const Secrets = dynamic(() =>
+  import('@/app/workspace/[workspaceId]/settings/components/secrets/secrets').then((m) => m.Secrets)
 )
-const MCP = dynamic(
-  () => import('@/app/workspace/[workspaceId]/settings/components/mcp/mcp').then((m) => m.MCP),
-  { loading: () => <McpSkeleton /> }
+const CustomTools = dynamic(() =>
+  import('@/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools').then(
+    (m) => m.CustomTools
+  )
 )
-const CustomTools = dynamic(
-  () =>
-    import('@/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools').then(
-      (m) => m.CustomTools
-    ),
-  { loading: () => <CustomToolsSkeleton /> }
+const Inbox = dynamic(() =>
+  import('@/app/workspace/[workspaceId]/settings/components/inbox/inbox').then((m) => m.Inbox)
 )
-const Skills = dynamic(
-  () =>
-    import('@/app/workspace/[workspaceId]/settings/components/skills/skills').then((m) => m.Skills),
-  { loading: () => <SkillsSkeleton /> }
+const MCP = dynamic(() =>
+  import('@/app/workspace/[workspaceId]/settings/components/mcp/mcp').then((m) => m.MCP)
 )
-const WorkflowMcpServers = dynamic(
-  () =>
-    import(
-      '@/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers'
-    ).then((m) => m.WorkflowMcpServers),
-  { loading: () => <WorkflowMcpServersSkeleton /> }
+const Mothership = dynamic(() =>
+  import('@/app/workspace/[workspaceId]/settings/components/mothership/mothership').then(
+    (m) => m.Mothership
+  )
 )
-const Inbox = dynamic(
-  () =>
-    import('@/app/workspace/[workspaceId]/settings/components/inbox/inbox').then((m) => m.Inbox),
-  { loading: () => <InboxSkeleton /> }
+const RecentlyDeleted = dynamic(() =>
+  import(
+    '@/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted'
+  ).then((m) => m.RecentlyDeleted)
 )
-const Admin = dynamic(
-  () =>
-    import('@/app/workspace/[workspaceId]/settings/components/admin/admin').then((m) => m.Admin),
-  { loading: () => <AdminSkeleton /> }
+const Subscription = dynamic(() =>
+  import('@/app/workspace/[workspaceId]/settings/components/subscription/subscription').then(
+    (m) => m.Subscription
+  )
 )
-const Mothership = dynamic(
-  () =>
-    import('@/app/workspace/[workspaceId]/settings/components/mothership/mothership').then(
-      (m) => m.Mothership
-    ),
-  { loading: () => <SettingsSectionSkeleton /> }
+const TeamManagement = dynamic(() =>
+  import('@/app/workspace/[workspaceId]/settings/components/team-management/team-management').then(
+    (m) => m.TeamManagement
+  )
 )
-const RecentlyDeleted = dynamic(
-  () =>
-    import(
-      '@/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted'
-    ).then((m) => m.RecentlyDeleted),
-  { loading: () => <RecentlyDeletedSkeleton /> }
+const WorkflowMcpServers = dynamic(() =>
+  import(
+    '@/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers'
+  ).then((m) => m.WorkflowMcpServers)
 )
-const AccessControl = dynamic(
-  () => import('@/ee/access-control/components/access-control').then((m) => m.AccessControl),
-  { loading: () => <SettingsSectionSkeleton /> }
+const AccessControl = dynamic(() =>
+  import('@/ee/access-control/components/access-control').then((m) => m.AccessControl)
 )
-const AuditLogs = dynamic(
-  () => import('@/ee/audit-logs/components/audit-logs').then((m) => m.AuditLogs),
-  { loading: () => <AuditLogsSkeleton /> }
+const AuditLogs = dynamic(() =>
+  import('@/ee/audit-logs/components/audit-logs').then((m) => m.AuditLogs)
 )
-const SSO = dynamic(() => import('@/ee/sso/components/sso-settings').then((m) => m.SSO), {
-  loading: () => <SettingsSectionSkeleton />,
-})
-const DataRetentionSettings = dynamic(
-  () =>
-    import('@/ee/data-retention/components/data-retention-settings').then(
-      (m) => m.DataRetentionSettings
-    ),
-  { loading: () => <DataRetentionSkeleton /> }
+const SSO = dynamic(() => import('@/ee/sso/components/sso-settings').then((m) => m.SSO))
+const DataRetentionSettings = dynamic(() =>
+  import('@/ee/data-retention/components/data-retention-settings').then(
+    (m) => m.DataRetentionSettings
+  )
 )
-const DataDrainsSettings = dynamic(
-  () =>
-    import('@/ee/data-drains/components/data-drains-settings').then((m) => m.DataDrainsSettings),
-  { loading: () => <DataDrainsSkeleton /> }
+const DataDrainsSettings = dynamic(() =>
+  import('@/ee/data-drains/components/data-drains-settings').then((m) => m.DataDrainsSettings)
 )
 const WhitelabelingSettings = dynamic(
   () =>
     import('@/ee/whitelabeling/components/whitelabeling-settings').then(
       (m) => m.WhitelabelingSettings
     ),
-  { loading: () => <SettingsSectionSkeleton />, ssr: false }
+  { ssr: false }
 )
 
 interface SettingsPageProps {
@@ -230,9 +135,7 @@ export function SettingsPage({ section }: SettingsPageProps) {
     >
       <h2 className='mb-7 font-medium text-[22px] text-[var(--text-primary)]'>{label}</h2>
       {effectiveSection === 'general' && <General />}
-      {effectiveSection === 'integrations' && <Integrations />}
       {effectiveSection === 'secrets' && <Secrets />}
-      {/* {effectiveSection === 'template-profile' && <TemplateProfile />} */}
       {effectiveSection === 'credential-sets' && <CredentialSets />}
       {effectiveSection === 'access-control' && <AccessControl />}
       {effectiveSection === 'audit-logs' && <AuditLogs />}
@@ -247,7 +150,6 @@ export function SettingsPage({ section }: SettingsPageProps) {
       {effectiveSection === 'copilot' && <Copilot />}
       {effectiveSection === 'mcp' && <MCP initialServerId={mcpServerId} />}
       {effectiveSection === 'custom-tools' && <CustomTools />}
-      {effectiveSection === 'skills' && <Skills />}
       {effectiveSection === 'workflow-mcp-servers' && <WorkflowMcpServers />}
       {effectiveSection === 'inbox' && <Inbox />}
       {effectiveSection === 'recently-deleted' && <RecentlyDeleted />}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx
deleted file mode 100644
index 5115edac650..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-
-/**
- * Skeleton component for admin settings loading state.
- * Matches the exact layout structure of the Admin component.
- */
-export function AdminSkeleton() {
-  return (
-    <div className='flex h-full flex-col gap-6'>
-      <div className='flex items-center justify-between'>
-        <Skeleton className='h-[14px] w-[120px]' />
-        <Skeleton className='h-[20px] w-[36px] rounded-full' />
-      </div>
-
-      <div className='h-px bg-[var(--border-secondary)]' />
-
-      <div className='flex flex-col gap-2'>
-        <Skeleton className='h-[14px] w-[340px]' />
-        <div className='flex gap-2'>
-          <Skeleton className='h-9 flex-1 rounded-md' />
-          <Skeleton className='h-9 w-[80px] rounded-md' />
-        </div>
-      </div>
-
-      <div className='h-px bg-[var(--border-secondary)]' />
-
-      <div className='flex flex-col gap-3'>
-        <Skeleton className='h-[14px] w-[120px]' />
-
-        <div className='flex gap-2'>
-          <Skeleton className='h-9 flex-1 rounded-md' />
-          <Skeleton className='h-9 w-[80px] rounded-md' />
-        </div>
-
-        <div className='flex flex-col gap-0.5'>
-          <div className='flex items-center gap-3 border-[var(--border-secondary)] border-b px-3 py-2'>
-            <Skeleton className='h-[12px] w-[200px]' />
-            <Skeleton className='h-[12px] flex-1' />
-            <Skeleton className='h-[12px] w-[80px]' />
-            <Skeleton className='h-[12px] w-[80px]' />
-            <Skeleton className='h-[12px] w-[250px]' />
-          </div>
-
-          {Array.from({ length: 5 }).map((_, i) => (
-            <div
-              key={i}
-              className='flex items-center gap-3 border-[var(--border-secondary)] border-b px-3 py-2 last:border-b-0'
-            >
-              <Skeleton className='h-[14px] w-[200px]' />
-              <Skeleton className='h-[14px] flex-1' />
-              <Skeleton className='h-[20px] w-[50px] rounded-full' />
-              <Skeleton className='h-[20px] w-[50px] rounded-full' />
-              <div className='flex w-[250px] justify-end gap-1'>
-                <Skeleton className='h-[28px] w-[80px] rounded-md' />
-                <Skeleton className='h-[28px] w-[64px] rounded-md' />
-                <Skeleton className='h-[28px] w-[40px] rounded-md' />
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <div className='flex items-center justify-between'>
-          <Skeleton className='h-[14px] w-[160px]' />
-          <div className='flex gap-1'>
-            <Skeleton className='h-[28px] w-[64px] rounded-md' />
-            <Skeleton className='h-[28px] w-[48px] rounded-md' />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
index f1be6c1b11b..eb78f8d6acb 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
@@ -11,7 +11,6 @@ import {
   type ComboboxOptionGroup,
   Input as EmcnInput,
   Label,
-  Skeleton,
   Switch,
 } from '@/components/emcn'
 import { AgentSkillsIcon, McpIcon } from '@/components/icons'
@@ -464,14 +463,6 @@ export function Admin() {
           </p>
         )}
 
-        {usersLoading && !usersData && (
-          <div className='flex flex-col gap-2'>
-            {Array.from({ length: 5 }).map((_, i) => (
-              <Skeleton key={i} className='h-[48px] w-full rounded-md' />
-            ))}
-          </div>
-        )}
-
         {searchQuery.length > 0 && usersData && (
           <>
             <div className='flex flex-col gap-0.5'>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx
deleted file mode 100644
index 443956bb34b..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-
-/**
- * Skeleton component for API key list items.
- */
-export function ApiKeySkeleton() {
-  return (
-    <div className='flex items-center justify-between gap-3'>
-      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-        <div className='flex items-center gap-1.5'>
-          <Skeleton className='h-5 w-[80px]' />
-          <Skeleton className='h-5 w-[140px]' />
-        </div>
-        <Skeleton className='h-5 w-[100px]' />
-      </div>
-      <Skeleton className='h-[26px] w-[48px] rounded-md' />
-    </div>
-  )
-}
-
-/**
- * Skeleton for the API Keys section shown during dynamic import loading.
- */
-export function ApiKeysSkeleton() {
-  return (
-    <div className='flex h-full flex-col gap-4.5'>
-      <div className='flex items-center gap-2'>
-        <Skeleton className='h-[38px] flex-1 rounded-lg' />
-        <Skeleton className='h-[38px] w-[90px] rounded-md' />
-      </div>
-
-      <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-4.5'>
-          <div className='flex flex-col gap-2'>
-            <Skeleton className='h-5 w-[80px]' />
-            <Skeleton className='h-5 w-[180px]' />
-          </div>
-
-          <div className='flex flex-col gap-2'>
-            <Skeleton className='h-5 w-[60px]' />
-            <ApiKeySkeleton />
-            <ApiKeySkeleton />
-          </div>
-        </div>
-      </div>
-
-      <div className='mt-6 flex items-center justify-between'>
-        <div className='flex items-center gap-2'>
-          <Skeleton className='h-5 w-[170px]' />
-          <Skeleton className='size-3 rounded-full' />
-        </div>
-        <Skeleton className='h-5 w-9 rounded-full' />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
index 7c35fee48b3..42590f1d595 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
@@ -13,14 +13,12 @@ import {
   ModalDescription,
   ModalFooter,
   ModalHeader,
-  Skeleton,
   Switch,
   Tooltip,
 } from '@/components/emcn'
 import { Input } from '@/components/ui'
 import { useSession } from '@/lib/auth/auth-client'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import { ApiKeySkeleton } from '@/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton'
 import {
   type ApiKey,
   useApiKeys,
@@ -127,16 +125,16 @@ export function ApiKeys() {
     <div className='flex h-full flex-col gap-4.5'>
       {/* Search Input and Create Button */}
       <div className='flex items-center gap-2'>
-        <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent p-2 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
+        <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-2 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
           <Search
-            className='size-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+            className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
             strokeWidth={2}
           />
           <Input
             placeholder='Search Sim keys...'
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+            className='h-auto flex-1 border-0 bg-transparent p-0 leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
           />
         </div>
         <Button
@@ -150,28 +148,14 @@ export function ApiKeys() {
           variant='primary'
           disabled={createButtonDisabled}
         >
-          <Plus className='mr-1.5 size-[13px]' />
+          <Plus className='mr-1.5 h-[13px] w-[13px]' />
           Create
         </Button>
       </div>
 
       {/* Scrollable Content */}
       <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
-        {isLoading ? (
-          <div className='flex flex-col gap-4.5'>
-            {/* Workspace section header */}
-            <div className='flex flex-col gap-2'>
-              <Skeleton className='h-5 w-[80px]' />
-              <Skeleton className='h-5 w-[180px]' />
-            </div>
-            {/* Personal section header + keys */}
-            <div className='flex flex-col gap-2'>
-              <Skeleton className='h-5 w-[60px]' />
-              <ApiKeySkeleton />
-              <ApiKeySkeleton />
-            </div>
-          </div>
-        ) : personalKeys.length === 0 && workspaceKeys.length === 0 ? (
+        {isLoading ? null : personalKeys.length === 0 && workspaceKeys.length === 0 ? (
           <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
             Click "Create" above to get started
           </div>
@@ -311,15 +295,6 @@ export function ApiKeys() {
       </div>
 
       {/* Allow Personal API Keys Toggle - Fixed at bottom */}
-      {isLoading && canManageWorkspaceKeys && (
-        <div className='mt-6 flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <Skeleton className='h-5 w-[170px]' />
-            <Skeleton className='size-3 rounded-full' />
-          </div>
-          <Skeleton className='h-5 w-9 rounded-full' />
-        </div>
-      )}
       {!isLoading && canManageWorkspaceKeys && (
         <Tooltip.Provider delayDuration={150}>
           <div className='mt-6 flex items-center justify-between'>
@@ -333,7 +308,7 @@ export function ApiKeys() {
                     type='button'
                     className='rounded-full p-1 text-[var(--text-muted)] transition hover-hover:text-[var(--text-primary)]'
                   >
-                    <Info className='size-[12px]' strokeWidth={2} />
+                    <Info className='h-[12px] w-[12px]' strokeWidth={2} />
                   </button>
                 </Tooltip.Trigger>
                 <Tooltip.Content side='top' className='max-w-xs text-small'>
@@ -341,9 +316,7 @@ export function ApiKeys() {
                 </Tooltip.Content>
               </Tooltip.Root>
             </div>
-            {isLoadingSettings ? (
-              <Skeleton className='h-5 w-16 rounded-full' />
-            ) : (
+            {isLoadingSettings ? null : (
               <Switch
                 checked={allowPersonalApiKeys}
                 disabled={!canManageWorkspaceKeys || updateSettingsMutation.isPending}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
deleted file mode 100644
index 3920cf67657..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-
-/**
- * Skeleton component for BYOK provider key items.
- */
-export function BYOKKeySkeleton() {
-  return (
-    <div className='flex items-center justify-between gap-3'>
-      <div className='flex items-center gap-3'>
-        <Skeleton className='size-9 flex-shrink-0 rounded-md' />
-        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-          <Skeleton className='h-[16px] w-[100px]' />
-          <Skeleton className='h-[14px] w-[200px]' />
-        </div>
-      </div>
-      <div className='flex flex-shrink-0 items-center gap-2'>
-        <Skeleton className='h-[32px] w-[72px] rounded-md' />
-        <Skeleton className='h-[32px] w-[64px] rounded-md' />
-      </div>
-    </div>
-  )
-}
-
-/**
- * Skeleton for the BYOK section shown during dynamic import loading.
- */
-export function BYOKSkeleton() {
-  return (
-    <div className='flex h-full flex-col gap-4.5'>
-      <div className='flex items-center gap-2'>
-        <Skeleton className='h-[30px] flex-1 rounded-lg' />
-      </div>
-      <Skeleton className='h-[14px] w-[280px]' />
-      <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-2'>
-          <BYOKKeySkeleton />
-          <BYOKKeySkeleton />
-          <BYOKKeySkeleton />
-          <BYOKKeySkeleton />
-          <BYOKKeySkeleton />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
index 306b62850cb..d42e5186cd1 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
@@ -32,7 +32,6 @@ import {
   SerperIcon,
 } from '@/components/icons'
 import { Input } from '@/components/ui'
-import { BYOKKeySkeleton } from '@/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton'
 import {
   type BYOKKey,
   useBYOKKeys,
@@ -238,7 +237,7 @@ export function BYOK() {
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               disabled={isLoading}
-              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+              className='h-auto flex-1 border-0 bg-transparent p-0 leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
             />
           </div>
         </div>
@@ -248,13 +247,7 @@ export function BYOK() {
         </p>
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
-          {isLoading ? (
-            <div className='flex flex-col gap-2'>
-              {PROVIDERS.map((p) => (
-                <BYOKKeySkeleton key={p.id} />
-              ))}
-            </div>
-          ) : (
+          {isLoading ? null : (
             <div className='flex flex-col gap-2'>
               {filteredProviders.map((provider) => {
                 const existingKey = getKeyForProvider(provider.id)
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot-skeleton.tsx
deleted file mode 100644
index 000b1e02691..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot-skeleton.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import {
-  ApiKeySkeleton,
-  ApiKeysSkeleton,
-} from '@/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton'
-
-/**
- * Re-export ApiKeySkeleton as CopilotKeySkeleton since both share identical markup.
- */
-export const CopilotKeySkeleton = ApiKeySkeleton
-
-/**
- * Skeleton for the Copilot section shown during dynamic import loading.
- */
-export const CopilotSkeleton = ApiKeysSkeleton
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
index 8cecdfbbd33..b7861cd4464 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
@@ -19,7 +19,6 @@ import {
 } from '@/components/emcn'
 import { Input } from '@/components/ui'
 // import { useMcpServers, useUpdateMcpServer } from '@/hooks/queries/mcp'
-import { CopilotKeySkeleton } from '@/app/workspace/[workspaceId]/settings/components/copilot/copilot-skeleton'
 import {
   type CopilotKey,
   useCopilotKeys,
@@ -187,7 +186,7 @@ export function Copilot() {
               placeholder='Search API keys...'
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+              className='h-auto flex-1 border-0 bg-transparent p-0 leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
             />
           </div>
           <Button
@@ -205,13 +204,7 @@ export function Copilot() {
 
         {/* Scrollable Content */}
         <div className='min-h-0 flex-1 overflow-y-auto'>
-          {isLoading ? (
-            <div className='flex flex-col gap-2'>
-              <CopilotKeySkeleton />
-              <CopilotKeySkeleton />
-              <CopilotKeySkeleton />
-            </div>
-          ) : showEmptyState ? (
+          {isLoading ? null : showEmptyState ? (
             <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
               Click "Create" above to get started
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx
deleted file mode 100644
index 08a0556f3a0..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-
-/**
- * Skeleton for the Credential Sets (Email Polling) section shown during dynamic import loading.
- */
-export function CredentialSetsSkeleton() {
-  return (
-    <div className='flex h-full flex-col gap-4.5'>
-      <div className='flex items-center gap-2'>
-        <Skeleton className='h-[30px] flex-1 rounded-lg' />
-        <Skeleton className='h-[30px] w-[80px] rounded-md' />
-      </div>
-      <div className='flex flex-col gap-2'>
-        <Skeleton className='h-[14px] w-[100px]' />
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-3'>
-            <Skeleton className='size-9 rounded-md' />
-            <div className='flex flex-col'>
-              <Skeleton className='h-[14px] w-[120px]' />
-              <Skeleton className='h-[12px] w-[80px]' />
-            </div>
-          </div>
-          <Skeleton className='h-[32px] w-[60px] rounded-md' />
-        </div>
-      </div>
-      <div className='flex flex-col gap-2'>
-        <Skeleton className='h-[14px] w-[60px]' />
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-3'>
-            <Skeleton className='size-9 rounded-md' />
-            <div className='flex flex-col'>
-              <Skeleton className='h-[14px] w-[140px]' />
-              <Skeleton className='h-[12px] w-[100px]' />
-            </div>
-          </div>
-          <Skeleton className='h-[32px] w-[80px] rounded-md' />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
index b21c6485362..19f6847f9b4 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
@@ -18,7 +18,6 @@ import {
   ModalDescription,
   ModalFooter,
   ModalHeader,
-  Skeleton,
   TagInput,
   type TagItem,
 } from '@/components/emcn'
@@ -31,7 +30,6 @@ import { getProviderDisplayName, type PollingProvider } from '@/lib/credential-s
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { getUserColor } from '@/lib/workspaces/colors'
 import { getUserRole } from '@/lib/workspaces/organization'
-import { CredentialSetsSkeleton } from '@/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton'
 import {
   type CredentialSet,
   useAcceptCredentialSetInvitation,
@@ -357,8 +355,8 @@ export function CredentialSets() {
   }, [deletingSet, activeOrganization?.id, deleteCredentialSet])
 
   const getProviderIcon = (providerId: string | null) => {
-    if (providerId === 'outlook') return <OutlookIcon className='size-4' />
-    return <GmailIcon className='size-4' />
+    if (providerId === 'outlook') return <OutlookIcon className='h-4 w-4' />
+    return <GmailIcon className='h-4 w-4' />
   }
 
   const activeMemberships = useMemo(
@@ -402,7 +400,7 @@ export function CredentialSets() {
     !hasNoContent
 
   if (membershipsLoading || invitationsLoading) {
-    return <CredentialSetsSkeleton />
+    return null
   }
 
   if (viewingSet) {
@@ -457,21 +455,7 @@ export function CredentialSets() {
               <div className='flex flex-col gap-4.5'>
                 <h4 className='font-medium text-[var(--text-primary)] text-base'>Members</h4>
 
-                {membersLoading || pendingInvitationsLoading ? (
-                  <div className='flex flex-col gap-4.5'>
-                    {[1, 2].map((i) => (
-                      <div key={i} className='flex items-center justify-between'>
-                        <div className='flex items-center gap-3'>
-                          <Skeleton className='size-8 rounded-full' />
-                          <div className='flex flex-col gap-1'>
-                            <Skeleton className='h-[14px] w-[100px]' />
-                            <Skeleton className='h-[12px] w-[150px]' />
-                          </div>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                ) : totalCount === 0 ? (
+                {membersLoading || pendingInvitationsLoading ? null : totalCount === 0 ? (
                   <p className='text-[var(--text-muted)] text-sm'>
                     No members yet. Send invitations above.
                   </p>
@@ -613,19 +597,19 @@ export function CredentialSets() {
         <div className='flex items-center gap-2'>
           <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-1.5 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
-              className='size-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+              className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
             />
             <BaseInput
               placeholder='Search polling groups...'
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+              className='h-auto flex-1 border-0 bg-transparent p-0 leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
             />
           </div>
           {canManageCredentialSets && (
             <Button variant='primary' onClick={() => setShowCreateModal(true)}>
-              <Plus className='mr-1.5 size-[13px]' />
+              <Plus className='mr-1.5 h-[13px] w-[13px]' />
               Create
             </Button>
           )}
@@ -654,7 +638,7 @@ export function CredentialSets() {
                       className='flex items-center justify-between'
                     >
                       <div className='flex items-center gap-3'>
-                        <div className='flex size-9 items-center justify-center rounded-md bg-[var(--surface-5)]'>
+                        <div className='flex h-9 w-9 items-center justify-center rounded-md bg-[var(--surface-5)]'>
                           {getProviderIcon(invitation.providerId)}
                         </div>
                         <div className='flex flex-col'>
@@ -689,7 +673,7 @@ export function CredentialSets() {
                       className='flex items-center justify-between'
                     >
                       <div className='flex items-center gap-3'>
-                        <div className='flex size-9 items-center justify-center rounded-md bg-[var(--surface-5)]'>
+                        <div className='flex h-9 w-9 items-center justify-center rounded-md bg-[var(--surface-5)]'>
                           {getProviderIcon(membership.providerId)}
                         </div>
                         <div className='flex flex-col'>
@@ -721,21 +705,7 @@ export function CredentialSets() {
                   (!searchTerm.trim() && ownedSets.length === 0)) && (
                   <div className='flex flex-col gap-2'>
                     <div className='font-medium text-[var(--text-secondary)] text-sm'>Manage</div>
-                    {ownedSetsLoading ? (
-                      <>
-                        {[1, 2].map((i) => (
-                          <div key={i} className='flex items-center justify-between'>
-                            <div className='flex items-center gap-3'>
-                              <Skeleton className='size-9 rounded-md' />
-                              <div className='flex flex-col gap-1'>
-                                <Skeleton className='h-[14px] w-[120px]' />
-                                <Skeleton className='h-[12px] w-[80px]' />
-                              </div>
-                            </div>
-                          </div>
-                        ))}
-                      </>
-                    ) : !searchTerm.trim() && ownedSets.length === 0 ? (
+                    {ownedSetsLoading ? null : !searchTerm.trim() && ownedSets.length === 0 ? (
                       <div className='text-[var(--text-muted)] text-sm'>
                         No polling groups created yet
                       </div>
@@ -743,7 +713,7 @@ export function CredentialSets() {
                       filteredOwnedSets.map((set) => (
                         <div key={set.id} className='flex items-center justify-between'>
                           <div className='flex items-center gap-3'>
-                            <div className='flex size-9 items-center justify-center rounded-md bg-[var(--surface-5)]'>
+                            <div className='flex h-9 w-9 items-center justify-center rounded-md bg-[var(--surface-5)]'>
                               {getProviderIcon(set.providerId)}
                             </div>
                             <div className='flex flex-col'>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx
deleted file mode 100644
index 6fe69f3630c..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-
-/**
- * Skeleton component for custom tool list items.
- */
-export function CustomToolSkeleton() {
-  return (
-    <div className='flex items-center justify-between gap-3'>
-      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-        <Skeleton className='h-4 w-[100px]' />
-        <Skeleton className='h-3.5 w-[200px]' />
-      </div>
-      <div className='flex flex-shrink-0 items-center gap-2'>
-        <Skeleton className='h-[30px] w-[52px] rounded-sm' />
-        <Skeleton className='h-[30px] w-[54px] rounded-sm' />
-      </div>
-    </div>
-  )
-}
-
-/**
- * Skeleton for the Custom Tools section shown during dynamic import loading.
- */
-export function CustomToolsSkeleton() {
-  return (
-    <div className='flex h-full flex-col gap-4.5'>
-      <div className='flex items-center gap-2'>
-        <Skeleton className='h-[30px] flex-1 rounded-lg' />
-        <Skeleton className='h-[30px] w-[64px] rounded-md' />
-      </div>
-      <div className='flex flex-col gap-2'>
-        <CustomToolSkeleton />
-        <CustomToolSkeleton />
-        <CustomToolSkeleton />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
index 01d6d027d93..2e21a1a5f28 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
@@ -15,7 +15,6 @@ import {
   ModalHeader,
 } from '@/components/emcn'
 import { Input } from '@/components/ui'
-import { CustomToolSkeleton } from '@/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton'
 import { CustomToolModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal'
 import { useCustomTools, useDeleteCustomTool } from '@/hooks/queries/custom-tools'
 
@@ -107,7 +106,7 @@ export function CustomTools() {
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               disabled={isLoading}
-              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+              className='h-auto flex-1 border-0 bg-transparent p-0 leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
             />
           </div>
           <Button onClick={() => setShowAddForm(true)} disabled={isLoading} variant='primary'>
@@ -123,13 +122,7 @@ export function CustomTools() {
                 {getErrorMessage(error, 'Failed to load tools')}
               </p>
             </div>
-          ) : isLoading ? (
-            <div className='flex flex-col gap-2'>
-              <CustomToolSkeleton />
-              <CustomToolSkeleton />
-              <CustomToolSkeleton />
-            </div>
-          ) : showEmptyState ? (
+          ) : isLoading ? null : showEmptyState ? (
             <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
               Click "Add" above to get started
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx
deleted file mode 100644
index 6a5a767d9cb..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-
-/**
- * Skeleton component for general settings loading state.
- * Matches the exact layout structure of the General component.
- */
-export function GeneralSkeleton() {
-  return (
-    <div className='flex h-full flex-col gap-4.5'>
-      <div className='flex items-center gap-3'>
-        <Skeleton className='size-9 rounded-full' />
-        <div className='flex flex-1 flex-col justify-center gap-[1px]'>
-          <div className='flex items-center gap-2'>
-            <Skeleton className='h-4 w-24' />
-            <Skeleton className='size-[10.5px]' />
-          </div>
-          <Skeleton className='h-3.5 w-40' />
-        </div>
-      </div>
-
-      <div className='flex items-center justify-between border-b pb-3'>
-        <Skeleton className='h-4 w-12' />
-        <Skeleton className='h-8 w-[100px] rounded-sm' />
-      </div>
-
-      <div className='flex items-center justify-between'>
-        <Skeleton className='h-4 w-36' />
-        <Skeleton className='h-[17px] w-[30px] rounded-full' />
-      </div>
-
-      <div className='flex items-center justify-between'>
-        <Skeleton className='h-4 w-40' />
-        <Skeleton className='h-[17px] w-[30px] rounded-full' />
-      </div>
-
-      <div className='flex items-center justify-between'>
-        <Skeleton className='h-4 w-20' />
-        <Skeleton className='h-8 w-[100px] rounded-sm' />
-      </div>
-
-      <div className='flex items-center justify-between'>
-        <Skeleton className='h-4 w-32' />
-        <Skeleton className='h-[17px] w-[30px] rounded-full' />
-      </div>
-
-      <div className='flex items-center justify-between border-t pt-4'>
-        <Skeleton className='h-4 w-44' />
-        <Skeleton className='h-[17px] w-[30px] rounded-full' />
-      </div>
-
-      <div className='-mt-2 flex flex-col gap-1'>
-        <Skeleton className='h-[12px] w-full' />
-        <Skeleton className='h-[12px] w-4/5' />
-      </div>
-
-      <div className='mt-auto flex items-center gap-2'>
-        <Skeleton className='h-8 w-20 rounded-sm' />
-        <Skeleton className='h-8 w-28 rounded-sm' />
-        <Skeleton className='ml-auto h-8 w-24 rounded-sm' />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
index 4b30ff81448..d36a3ce30ce 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
@@ -27,7 +27,6 @@ import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { isHosted } from '@/lib/core/config/feature-flags'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { getBaseUrl } from '@/lib/core/utils/urls'
-import { GeneralSkeleton } from '@/app/workspace/[workspaceId]/settings/components/general/general-skeleton'
 import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/settings/hooks/use-profile-picture-upload'
 import { useBrandConfig } from '@/ee/whitelabeling'
 import { useGeneralSettings, useUpdateGeneralSetting } from '@/hooks/queries/general-settings'
@@ -249,7 +248,7 @@ export function General() {
   const imageUrl = profilePictureUrl || profile?.image || brandConfig.logoUrl
 
   if (isLoading) {
-    return <GeneralSkeleton />
+    return null
   }
 
   return (
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx
index d796cb7f307..98e4ac98246 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx
@@ -14,7 +14,6 @@ import {
   ModalDescription,
   ModalFooter,
   ModalHeader,
-  Skeleton,
   Tooltip,
 } from '@/components/emcn'
 import {
@@ -162,11 +161,7 @@ export function InboxSettingsTab() {
           </p>
 
           <div className='mt-1 flex flex-col gap-[1px] overflow-hidden rounded-lg border border-[var(--border)]'>
-            {sendersLoading ? (
-              <div className='px-3 py-2.5'>
-                <Skeleton className='h-[16px] w-[200px]' />
-              </div>
-            ) : (
+            {sendersLoading ? null : (
               <>
                 {sendersData?.workspaceMembers.map((member) => (
                   <div
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx
deleted file mode 100644
index 50799564d41..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-
-/**
- * Skeleton for a single inbox task row.
- */
-export function InboxTaskSkeleton() {
-  return (
-    <div className='flex flex-col gap-1 rounded-lg border border-[var(--border)] p-3'>
-      <div className='flex items-center justify-between'>
-        <Skeleton className='h-[14px] w-[200px]' />
-        <Skeleton className='h-[12px] w-[50px]' />
-      </div>
-      <div className='flex items-center justify-between'>
-        <Skeleton className='h-[12px] w-[140px]' />
-        <Skeleton className='h-[20px] w-[70px] rounded-full' />
-      </div>
-      <Skeleton className='h-[12px] w-[260px]' />
-    </div>
-  )
-}
-
-/**
- * Skeleton for the full Inbox section shown while data is loading.
- */
-export function InboxSkeleton() {
-  return (
-    <div className='flex h-full flex-col gap-4.5'>
-      <div className='flex items-center justify-between'>
-        <div className='flex flex-col gap-0.5'>
-          <Skeleton className='h-[14px] w-[140px]' />
-          <Skeleton className='h-[13px] w-[260px]' />
-        </div>
-        <Skeleton className='h-[20px] w-[36px] rounded-full' />
-      </div>
-
-      <div className='border-[var(--border)] border-t' />
-
-      <div className='flex flex-col gap-6'>
-        <div className='flex flex-col gap-1.5'>
-          <Skeleton className='h-[14px] w-[90px]' />
-          <div className='flex items-center justify-between'>
-            <Skeleton className='h-[13px] w-[200px]' />
-            <div className='flex items-center gap-1.5'>
-              <Skeleton className='size-[12px] rounded-sm' />
-              <Skeleton className='size-[12px] rounded-sm' />
-            </div>
-          </div>
-          <Skeleton className='h-9 w-full rounded-md' />
-        </div>
-
-        <div className='flex flex-col gap-1.5'>
-          <Skeleton className='h-[14px] w-[110px]' />
-          <Skeleton className='h-[13px] w-[260px]' />
-          <div className='mt-1 overflow-hidden rounded-lg border border-[var(--border)]'>
-            <div className='px-3 py-2.5'>
-              <Skeleton className='h-[14px] w-[180px]' />
-            </div>
-            <div className='border-[var(--border)] border-t px-3 py-2.5'>
-              <Skeleton className='h-[14px] w-[160px]' />
-            </div>
-          </div>
-          <Skeleton className='mt-1 h-[32px] w-[100px] rounded-md' />
-        </div>
-      </div>
-
-      <div className='border-[var(--border)] border-t pt-4'>
-        <Skeleton className='h-[14px] w-[40px]' />
-        <Skeleton className='mt-0.5 h-[13px] w-[220px]' />
-      </div>
-
-      <div className='flex flex-col gap-3'>
-        <div className='flex items-center gap-2'>
-          <Skeleton className='h-[32px] flex-1 rounded-lg' />
-          <Skeleton className='h-[32px] w-[100px] rounded-md' />
-        </div>
-        <div className='flex flex-col gap-1'>
-          <InboxTaskSkeleton />
-          <InboxTaskSkeleton />
-          <InboxTaskSkeleton />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-task-list.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-task-list.tsx
index aacbd2f2e18..5ab1ddf9091 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-task-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-task-list.tsx
@@ -14,7 +14,6 @@ import {
   DropdownMenuTrigger,
 } from '@/components/emcn'
 import { Input } from '@/components/ui'
-import { InboxTaskSkeleton } from '@/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton'
 import type { InboxTaskItem } from '@/hooks/queries/inbox'
 import { useInboxConfig, useInboxTasks } from '@/hooks/queries/inbox'
 
@@ -86,7 +85,7 @@ export function InboxTaskList() {
             placeholder='Search tasks...'
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+            className='h-auto flex-1 border-0 bg-transparent p-0 leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
           />
         </div>
         <DropdownMenu>
@@ -119,13 +118,7 @@ export function InboxTaskList() {
       </div>
 
       <div className='min-h-0 flex-1 overflow-y-auto'>
-        {isLoading ? (
-          <div className='flex flex-col gap-1'>
-            {Array.from({ length: 3 }).map((_, i) => (
-              <InboxTaskSkeleton key={i} />
-            ))}
-          </div>
-        ) : filteredTasks.length === 0 ? (
+        {isLoading ? null : filteredTasks.length === 0 ? (
           <div className='flex h-[200px] items-center justify-center text-[var(--text-muted)] text-sm'>
             {searchTerm.trim()
               ? `No tasks matching "${searchTerm}"`
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx
index fb827380191..51a13241caf 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx
@@ -6,7 +6,6 @@ import { Button } from '@/components/emcn'
 import { getSubscriptionAccessState } from '@/lib/billing/client'
 import { InboxEnableToggle } from '@/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle'
 import { InboxSettingsTab } from '@/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab'
-import { InboxSkeleton } from '@/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton'
 import { InboxTaskList } from '@/app/workspace/[workspaceId]/settings/components/inbox/inbox-task-list'
 import { isBillingEnabled } from '@/app/workspace/[workspaceId]/settings/navigation'
 import { useInboxConfig } from '@/hooks/queries/inbox'
@@ -24,7 +23,7 @@ export function Inbox() {
   const subscriptionAccess = getSubscriptionAccessState(subscriptionResponse?.data)
 
   if (isLoading || (isBillingEnabled && isSubLoading)) {
-    return <InboxSkeleton />
+    return null
   }
 
   if (isBillingEnabled && !subscriptionAccess.hasUsableMaxAccess) {
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/credential-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/credential-skeleton.tsx
deleted file mode 100644
index f69b8e824cc..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/credential-skeleton.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-
-/**
- * Skeleton for a single integration credential row.
- */
-export function CredentialSkeleton() {
-  return (
-    <div className='flex items-center justify-between gap-3'>
-      <div className='flex min-w-0 items-center gap-2.5'>
-        <Skeleton className='size-8 flex-shrink-0 rounded-md' />
-        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-          <Skeleton className='h-4 w-[120px] rounded' />
-          <Skeleton className='h-3.5 w-[160px] rounded' />
-        </div>
-      </div>
-      <div className='flex flex-shrink-0 items-center gap-1'>
-        <Skeleton className='h-9 w-[60px] rounded-md' />
-        <Skeleton className='h-9 w-[88px] rounded-md' />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton.tsx
deleted file mode 100644
index 7936901af50..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-import { CredentialSkeleton } from '@/app/workspace/[workspaceId]/settings/components/integrations/credential-skeleton'
-
-/**
- * Skeleton for the Integrations section shown during dynamic import loading.
- */
-export function IntegrationsSkeleton() {
-  return (
-    <div className='flex h-full flex-col gap-4.5'>
-      <div className='flex items-center gap-2'>
-        <Skeleton className='h-[30px] flex-1 rounded-lg' />
-        <Skeleton className='h-[30px] w-[100px] rounded-md' />
-      </div>
-      <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-2'>
-          <CredentialSkeleton />
-          <CredentialSkeleton />
-          <CredentialSkeleton />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations.tsx
deleted file mode 100644
index 1c577e92c5a..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { IntegrationsManager } from '@/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager'
-
-export function Integrations() {
-  return (
-    <div className='h-full min-h-0'>
-      <IntegrationsManager />
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/index.ts b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/index.ts
index b1e672d1e81..7a1968f4fd9 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/index.ts
@@ -4,4 +4,3 @@ export type {
   McpServerFormModalProps,
 } from './mcp-server-form-modal/mcp-server-form-modal'
 export { McpServerFormModal } from './mcp-server-form-modal/mcp-server-form-modal'
-export { McpServerSkeleton } from './mcp-server-skeleton/mcp-server-skeleton'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
deleted file mode 100644
index f32b4591c3e..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-
-/**
- * Skeleton loader for MCP server list items.
- * Matches the structure of ServerListItem component.
- */
-export function McpServerSkeleton() {
-  return (
-    <div className='flex items-center justify-between gap-3'>
-      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-        <div className='flex items-center gap-1.5'>
-          <Skeleton className='h-4 w-[100px]' />
-          <Skeleton className='h-3.5 w-[80px]' />
-        </div>
-        <Skeleton className='h-3.5 w-[120px]' />
-      </div>
-      <div className='flex flex-shrink-0 items-center gap-1'>
-        <Skeleton className='h-[30px] w-[60px] rounded-sm' />
-        <Skeleton className='h-[30px] w-[54px] rounded-sm' />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx
deleted file mode 100644
index 8ac8f6282df..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-import { McpServerSkeleton } from '@/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton'
-
-/**
- * Skeleton for the MCP section shown during dynamic import loading.
- */
-export function McpSkeleton() {
-  return (
-    <div className='flex h-full flex-col gap-4.5'>
-      <div className='flex items-center gap-2'>
-        <Skeleton className='h-[30px] flex-1 rounded-lg' />
-        <Skeleton className='h-[30px] w-[64px] rounded-md' />
-      </div>
-      <div className='flex flex-col gap-2'>
-        <McpServerSkeleton />
-        <McpServerSkeleton />
-        <McpServerSkeleton />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
index a21da0f563e..899358b07fc 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
@@ -44,7 +44,7 @@ import { useAvailableEnvVarKeys } from '@/hooks/use-available-env-vars'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import type { BlockState } from '@/stores/workflows/workflow/types'
-import { McpServerFormModal, McpServerSkeleton } from './components'
+import { McpServerFormModal } from './components'
 
 const logger = createLogger('McpSettings')
 
@@ -616,7 +616,7 @@ export function MCP({ initialServerId }: MCPProps) {
               placeholder='Search MCPs...'
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+              className='h-auto flex-1 border-0 bg-transparent p-0 leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
             />
           </div>
           <Button onClick={() => setShowAddModal(true)} variant='primary' disabled={serversLoading}>
@@ -632,13 +632,7 @@ export function MCP({ initialServerId }: MCPProps) {
                 {getErrorMessage(error, 'Failed to load MCP servers')}
               </p>
             </div>
-          ) : serversLoading ? (
-            <div className='flex flex-col gap-2'>
-              <McpServerSkeleton />
-              <McpServerSkeleton />
-              <McpServerSkeleton />
-            </div>
-          ) : !hasServers ? (
+          ) : serversLoading ? null : !hasServers ? (
             <div className='flex h-full items-center justify-center'>
               <p className='text-[var(--text-muted)] text-sm'>Click "Add" above to get started</p>
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mothership/mothership.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mothership/mothership.tsx
index 261f5c9b536..8bfd1810c45 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mothership/mothership.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mothership/mothership.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo, useState } from 'react'
-import { Badge, Button, Input as EmcnInput, Label, Skeleton } from '@/components/emcn'
+import { Badge, Button, Input as EmcnInput, Label } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import {
   type MothershipEnv,
@@ -213,13 +213,6 @@ function OverviewTab({
 
       {/* User breakdown */}
       <SectionLabel>User Breakdown</SectionLabel>
-      {breakdownLoading && (
-        <div className='flex flex-col gap-2'>
-          {Array.from({ length: 5 }).map((_, i) => (
-            <Skeleton key={i} className='h-[36px] w-full rounded-md' />
-          ))}
-        </div>
-      )}
       {breakdown?.users && (
         <div className='flex flex-col gap-0.5'>
           <div className='flex items-center gap-3 border-[var(--border-secondary)] border-b px-3 py-2 text-[var(--text-tertiary)] text-caption'>
@@ -260,13 +253,6 @@ function OverviewTab({
       {/* Recent requests */}
       <Divider />
       <SectionLabel>Recent Requests ({requests?.count ?? '…'})</SectionLabel>
-      {requestsLoading && (
-        <div className='flex flex-col gap-2'>
-          {Array.from({ length: 5 }).map((_, i) => (
-            <Skeleton key={i} className='h-[36px] w-full rounded-md' />
-          ))}
-        </div>
-      )}
       {requests?.requests && (
         <div className='max-h-[400px] overflow-auto'>
           <div className='flex flex-col gap-0.5'>
@@ -413,14 +399,6 @@ function LicensesTab({ environment }: { environment: MothershipEnv }) {
       <Divider />
       <SectionLabel>All Licenses</SectionLabel>
 
-      {isLoading && (
-        <div className='flex flex-col gap-2'>
-          {Array.from({ length: 3 }).map((_, i) => (
-            <Skeleton key={i} className='h-[40px] w-full rounded-md' />
-          ))}
-        </div>
-      )}
-
       {data?.licenses && (
         <div className='flex flex-col gap-0.5'>
           <div className='flex items-center gap-3 border-[var(--border-secondary)] border-b px-3 py-2 text-[var(--text-tertiary)] text-caption'>
@@ -505,14 +483,6 @@ function EnterpriseTab({
 
       {error && <p className='text-[var(--text-error)] text-small'>{error.message}</p>}
 
-      {isLoading && customerType && (
-        <div className='flex flex-col gap-2'>
-          {Array.from({ length: 4 }).map((_, i) => (
-            <Skeleton key={i} className='h-[60px] w-full rounded-md' />
-          ))}
-        </div>
-      )}
-
       {data && (
         <>
           <div className='grid grid-cols-4 gap-3'>
@@ -615,14 +585,6 @@ function TracesTab({ environment }: { environment: MothershipEnv }) {
 
       {error && <p className='text-[var(--text-error)] text-small'>{error.message}</p>}
 
-      {isLoading && activeRequestId && (
-        <div className='flex flex-col gap-2'>
-          {Array.from({ length: 4 }).map((_, i) => (
-            <Skeleton key={i} className='h-[50px] w-full rounded-md' />
-          ))}
-        </div>
-      )}
-
       {trace && <TraceDetail trace={trace} />}
     </div>
   )
@@ -870,9 +832,7 @@ function StatCard({
   return (
     <div className='rounded-md border border-[var(--border-secondary)] p-3'>
       <p className='text-[var(--text-tertiary)] text-caption'>{label}</p>
-      {loading ? (
-        <Skeleton className='mt-1 h-[24px] w-[80px] rounded-sm' />
-      ) : (
+      {loading ? null : (
         <p className='mt-1 font-medium text-[18px] text-[var(--text-primary)]'>{value ?? '—'}</p>
       )}
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx
deleted file mode 100644
index e515a4e555a..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-
-/**
- * Skeleton component for recently deleted list items.
- */
-export function DeletedItemSkeleton() {
-  return (
-    <div className='flex items-center gap-3 rounded-md p-2'>
-      <Skeleton className='size-[14px] shrink-0 rounded-[3px]' />
-      <div className='flex min-w-0 flex-1 flex-col gap-0.5'>
-        <Skeleton className='h-[14px] w-[120px]' />
-        <Skeleton className='h-[12px] w-[180px]' />
-      </div>
-      <Skeleton className='h-[30px] w-[64px] shrink-0 rounded-md' />
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx
deleted file mode 100644
index 59846faac9a..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-import { DeletedItemSkeleton } from '@/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton'
-
-/**
- * Skeleton component for the entire Recently Deleted settings section.
- * Renders placeholder UI for the search bar, sort dropdown, tabs, and item list.
- */
-export function RecentlyDeletedSkeleton() {
-  return (
-    <div className='flex h-full flex-col gap-4.5'>
-      <div className='flex items-center gap-2'>
-        <Skeleton className='h-[30px] flex-1 rounded-lg' />
-        <Skeleton className='h-[30px] w-[190px] shrink-0 rounded-lg' />
-      </div>
-
-      <div className='relative flex gap-4 border-[var(--border)] border-b px-4'>
-        <Skeleton className='mb-2 h-[20px] w-[32px] rounded-sm' />
-        <Skeleton className='mb-2 h-[20px] w-[72px] rounded-sm' />
-        <Skeleton className='mb-2 h-[20px] w-[52px] rounded-sm' />
-        <Skeleton className='mb-2 h-[20px] w-[112px] rounded-sm' />
-        <Skeleton className='mb-2 h-[20px] w-[40px] rounded-sm' />
-      </div>
-
-      <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-2'>
-          <DeletedItemSkeleton />
-          <DeletedItemSkeleton />
-          <DeletedItemSkeleton />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
index e92493267a9..28bdd43c55e 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
@@ -17,7 +17,6 @@ import { Folder } from '@/components/emcn/icons'
 import { workflowBorderColor } from '@/lib/workspaces/colors'
 import { RESOURCE_REGISTRY } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry'
 import type { MothershipResourceType } from '@/app/workspace/[workspaceId]/home/types'
-import { DeletedItemSkeleton } from '@/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton'
 import { useFolders, useRestoreFolder } from '@/hooks/queries/folders'
 import { useKnowledgeBasesQuery, useRestoreKnowledgeBase } from '@/hooks/queries/kb/knowledge'
 import { useRestoreTable, useTablesList } from '@/hooks/queries/tables'
@@ -398,7 +397,7 @@ export function RecentlyDeleted() {
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
             disabled={isLoading}
-            className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+            className='h-auto flex-1 border-0 bg-transparent p-0 leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
           />
         </div>
         <div className='w-[190px] shrink-0'>
@@ -441,13 +440,7 @@ export function RecentlyDeleted() {
               {toError(error).message || 'Failed to load deleted items'}
             </p>
           </div>
-        ) : isLoading ? (
-          <div className='flex flex-col gap-2'>
-            <DeletedItemSkeleton />
-            <DeletedItemSkeleton />
-            <DeletedItemSkeleton />
-          </div>
-        ) : filtered.length === 0 ? (
+        ) : isLoading ? null : filtered.length === 0 ? (
           <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
             {showNoResults
               ? `No items found matching \u201c${searchTerm}\u201d`
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/secrets-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/secrets-manager.tsx
index 39798d3e3ce..50c77f038a7 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/secrets-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/secrets-manager.tsx
@@ -21,7 +21,6 @@ import {
   ModalDescription,
   ModalFooter,
   ModalHeader,
-  Skeleton,
   Textarea,
   Tooltip,
   Trash,
@@ -262,7 +261,7 @@ function WorkspaceVariableRow({
       {canEdit ? (
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
-            <Button variant='ghost' onClick={() => onDelete(envKey)} className='size-9'>
+            <Button variant='ghost' onClick={() => onDelete(envKey)} className='h-9 w-9'>
               <Trash />
             </Button>
           </Tooltip.Trigger>
@@ -417,7 +416,9 @@ export function SecretsManager() {
   const [renamingKey, setRenamingKey] = useState<string | null>(null)
   const [pendingKeyValue, setPendingKeyValue] = useState<string>('')
   const [selectedCredentialId, setSelectedCredentialId] = useState<string | null>(null)
-  const prevSelectedCredentialIdRef = useRef<string | null | undefined>(undefined)
+  const [prevSelectedCredentialId, setPrevSelectedCredentialId] = useState<
+    string | null | undefined
+  >(undefined)
   const [selectedDisplayNameDraft, setSelectedDisplayNameDraft] = useState('')
   const [selectedDescriptionDraft, setSelectedDescriptionDraft] = useState('')
   const [copyIdSuccess, setCopyIdSuccess] = useState(false)
@@ -449,8 +450,8 @@ export function SecretsManager() {
   )
 
   const currentCredentialId = selectedCredential?.id ?? null
-  if (currentCredentialId !== prevSelectedCredentialIdRef.current) {
-    prevSelectedCredentialIdRef.current = currentCredentialId
+  if (currentCredentialId !== prevSelectedCredentialId) {
+    setPrevSelectedCredentialId(currentCredentialId)
     if (!selectedCredential) {
       setSelectedDescriptionDraft('')
       setSelectedDisplayNameDraft('')
@@ -1188,8 +1189,8 @@ export function SecretsManager() {
           <div className='min-h-0 flex-1 overflow-y-auto'>
             <div className='flex flex-col gap-4.5'>
               <div className='flex items-center gap-2.5 border-[var(--border)] border-b pb-3'>
-                <div className='flex size-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[var(--surface-5)]'>
-                  <Key className='size-[18px] text-[var(--text-tertiary)]' />
+                <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[var(--surface-5)]'>
+                  <Key className='h-[18px] w-[18px] text-[var(--text-tertiary)]' />
                 </div>
                 <div className='min-w-0 flex-1'>
                   <div className='flex items-center gap-2'>
@@ -1221,7 +1222,7 @@ export function SecretsManager() {
                       <Button
                         variant='ghost'
                         type='button'
-                        className='-my-1 size-5 p-0'
+                        className='-my-1 h-5 w-5 p-0'
                         onClick={() => {
                           navigator.clipboard.writeText(selectedCredential.id)
                           setCopyIdSuccess(true)
@@ -1230,9 +1231,9 @@ export function SecretsManager() {
                         aria-label='Copy value'
                       >
                         {copyIdSuccess ? (
-                          <Check className='size-3 text-[var(--text-success)]' />
+                          <Check className='h-3 w-3 text-[var(--text-success)]' />
                         ) : (
-                          <Clipboard className='size-3 text-[var(--text-icon)]' />
+                          <Clipboard className='h-3 w-3 text-[var(--text-icon)]' />
                         )}
                       </Button>
                     </Tooltip.Trigger>
@@ -1275,12 +1276,7 @@ export function SecretsManager() {
               <div className='flex flex-col gap-1.5 border-[var(--border)] border-t pt-4'>
                 <Label>Members ({activeMembers.length})</Label>
 
-                {membersLoading ? (
-                  <div className='flex flex-col gap-2'>
-                    <Skeleton className='h-[44px] w-full rounded-lg' />
-                    <Skeleton className='h-[44px] w-full rounded-lg' />
-                  </div>
-                ) : (
+                {membersLoading ? null : (
                   <div className='flex flex-col gap-2'>
                     {activeMembers.map((member) => (
                       <div
@@ -1291,7 +1287,7 @@ export function SecretsManager() {
                         )}
                       >
                         <div className='flex min-w-0 items-center gap-2.5'>
-                          <Avatar className='size-8 flex-shrink-0'>
+                          <Avatar className='h-8 w-8 flex-shrink-0'>
                             <AvatarFallback
                               style={{
                                 background: getUserColor(member.userId || member.userEmail || ''),
@@ -1492,7 +1488,7 @@ export function SecretsManager() {
         <div className='flex items-center gap-2'>
           <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-1.5 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
-              className='size-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+              className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
             />
             <Input
@@ -1505,7 +1501,7 @@ export function SecretsManager() {
               spellCheck='false'
               readOnly
               onFocus={(e) => e.target.removeAttribute('readOnly')}
-              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+              className='h-auto flex-1 border-0 bg-transparent p-0 leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
             />
           </div>
           <Tooltip.Root>
@@ -1530,29 +1526,8 @@ export function SecretsManager() {
 
         <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
           <div className='flex flex-col gap-4'>
-            {isLoading ? (
-              <>
-                <div className='flex flex-col gap-2'>
-                  <Skeleton className='h-5 w-[70px]' />
-                  <div className='text-[var(--text-muted)] text-small'>
-                    <Skeleton className='h-5 w-[160px]' />
-                  </div>
-                </div>
-                <div className={cn(GRID_COLS, 'gap-y-2')}>
-                  <Skeleton className={cn(COL_SPAN_ALL, 'h-5 w-[55px]')} />
-                  {Array.from({ length: 2 }, (_, i) => (
-                    <div key={`personal-${i}`} className='contents'>
-                      <Skeleton className='h-9 rounded-md' />
-                      <div />
-                      <Skeleton className='h-9 rounded-md' />
-                      <Skeleton className='ml-2 h-9 w-[60px] rounded-md' />
-                      <Skeleton className='size-9 rounded-md' />
-                    </div>
-                  ))}
-                </div>
-              </>
-            ) : (
-              <div className={cn(GRID_COLS, 'gap-y-2')}>
+            {isLoading ? null : (
+              <div className={`${GRID_COLS} gap-y-2`}>
                 {(!searchTerm.trim() ||
                   filteredWorkspaceEntries.length > 0 ||
                   filteredNewWorkspaceRows.length > 0) && (
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/secrets-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/secrets-skeleton.tsx
deleted file mode 100644
index 32e848ad8de..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/secrets-skeleton.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-
-const GRID_COLS = 'grid grid-cols-[minmax(0,1fr)_8px_minmax(0,1fr)_auto_auto] items-center'
-const COL_SPAN_ALL = 'col-span-5'
-
-/**
- * Skeleton for a single secret row matching the secrets grid layout.
- */
-function SecretRowSkeleton() {
-  return (
-    <div className='contents'>
-      <Skeleton className='h-9 rounded-md' />
-      <div />
-      <Skeleton className='h-9 rounded-md' />
-      <Skeleton className='ml-2 h-9 w-[60px] rounded-md' />
-      <Skeleton className='size-9 rounded-md' />
-    </div>
-  )
-}
-
-/**
- * Skeleton for the Secrets page shown during dynamic import loading.
- */
-export function SecretsSkeleton() {
-  return (
-    <div className='flex h-full flex-col gap-4'>
-      <div className='flex items-center gap-2'>
-        <Skeleton className='h-[30px] flex-1 rounded-lg' />
-        <Skeleton className='h-[30px] w-[50px] rounded-md' />
-      </div>
-
-      <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-4'>
-          <div className={`${GRID_COLS} gap-y-2`}>
-            <Skeleton className={`${COL_SPAN_ALL} h-5 w-[70px]`} />
-            <SecretRowSkeleton />
-            <SecretRowSkeleton />
-
-            <div className={`${COL_SPAN_ALL} h-[8px]`} />
-
-            <Skeleton className={`${COL_SPAN_ALL} h-5 w-[55px]`} />
-            <SecretRowSkeleton />
-            <SecretRowSkeleton />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/skill-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/skills/skill-skeleton.tsx
deleted file mode 100644
index 991ec10cd1b..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/skill-skeleton.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import {
-  CustomToolSkeleton,
-  CustomToolsSkeleton,
-} from '@/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton'
-
-/**
- * Re-export CustomToolSkeleton as SkillSkeleton since both share identical markup.
- */
-export const SkillSkeleton = CustomToolSkeleton
-
-/**
- * Skeleton for the Skills section shown during dynamic import loading.
- */
-export const SkillsSkeleton = CustomToolsSkeleton
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/skills.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/skills/skills.tsx
deleted file mode 100644
index 788465b2057..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/skills.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { createLogger } from '@sim/logger'
-import { getErrorMessage } from '@sim/utils/errors'
-import { Plus, Search } from 'lucide-react'
-import { useParams } from 'next/navigation'
-import {
-  Button,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalDescription,
-  ModalFooter,
-  ModalHeader,
-} from '@/components/emcn'
-import { Input } from '@/components/ui'
-import { SkillModal } from '@/app/workspace/[workspaceId]/settings/components/skills/components/skill-modal'
-import { SkillSkeleton } from '@/app/workspace/[workspaceId]/settings/components/skills/skill-skeleton'
-import type { SkillDefinition } from '@/hooks/queries/skills'
-import { useDeleteSkill, useSkills } from '@/hooks/queries/skills'
-
-const logger = createLogger('SkillsSettings')
-
-export function Skills() {
-  const params = useParams()
-  const workspaceId = params.workspaceId as string
-
-  const { data: skills = [], isLoading, error, refetch: refetchSkills } = useSkills(workspaceId)
-  const deleteSkillMutation = useDeleteSkill()
-
-  const [searchTerm, setSearchTerm] = useState('')
-  const [deletingSkills, setDeletingSkills] = useState<Set<string>>(() => new Set())
-  const [editingSkill, setEditingSkill] = useState<SkillDefinition | null>(null)
-  const [showAddForm, setShowAddForm] = useState(false)
-  const [skillToDelete, setSkillToDelete] = useState<{ id: string; name: string } | null>(null)
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
-
-  const filteredSkills = skills.filter((s) => {
-    if (!searchTerm.trim()) return true
-    const searchLower = searchTerm.toLowerCase()
-    return (
-      s.name.toLowerCase().includes(searchLower) ||
-      s.description.toLowerCase().includes(searchLower)
-    )
-  })
-
-  const handleDeleteClick = (skillId: string) => {
-    const s = skills.find((sk) => sk.id === skillId)
-    if (!s) return
-
-    setSkillToDelete({ id: skillId, name: s.name })
-    setShowDeleteDialog(true)
-  }
-
-  const handleDeleteSkill = async () => {
-    if (!skillToDelete) return
-
-    setDeletingSkills((prev) => new Set(prev).add(skillToDelete.id))
-    setShowDeleteDialog(false)
-
-    try {
-      await deleteSkillMutation.mutateAsync({
-        workspaceId,
-        skillId: skillToDelete.id,
-      })
-      logger.info(`Deleted skill: ${skillToDelete.id}`)
-    } catch (error) {
-      logger.error('Error deleting skill:', error)
-    } finally {
-      setDeletingSkills((prev) => {
-        const next = new Set(prev)
-        next.delete(skillToDelete.id)
-        return next
-      })
-      setSkillToDelete(null)
-    }
-  }
-
-  const handleSkillSaved = () => {
-    setShowAddForm(false)
-    setEditingSkill(null)
-    refetchSkills()
-  }
-
-  const hasSkills = skills && skills.length > 0
-  const showEmptyState = !hasSkills && !showAddForm && !editingSkill
-  const showNoResults = searchTerm.trim() && filteredSkills.length === 0 && skills.length > 0
-
-  return (
-    <>
-      <div className='flex h-full flex-col gap-4.5'>
-        <div className='flex items-center gap-2'>
-          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-1.5 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
-            <Search
-              className='size-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
-              strokeWidth={2}
-            />
-            <Input
-              placeholder='Search skills...'
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              disabled={isLoading}
-              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
-            />
-          </div>
-          <Button onClick={() => setShowAddForm(true)} disabled={isLoading} variant='primary'>
-            <Plus className='mr-1.5 size-[13px]' />
-            Add
-          </Button>
-        </div>
-
-        <div className='min-h-0 flex-1 overflow-y-auto'>
-          {error ? (
-            <div className='flex h-full flex-col items-center justify-center gap-2'>
-              <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
-                {getErrorMessage(error, 'Failed to load skills')}
-              </p>
-            </div>
-          ) : isLoading ? (
-            <div className='flex flex-col gap-2'>
-              <SkillSkeleton />
-              <SkillSkeleton />
-              <SkillSkeleton />
-            </div>
-          ) : showEmptyState ? (
-            <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
-              Click "Add" above to get started
-            </div>
-          ) : (
-            <div className='flex flex-col gap-2'>
-              {filteredSkills.map((s) => (
-                <div key={s.id} className='flex items-center justify-between gap-3'>
-                  <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                    <span className='truncate font-medium text-base'>{s.name}</span>
-                    <p className='truncate text-[var(--text-muted)] text-sm'>{s.description}</p>
-                  </div>
-                  <div className='flex flex-shrink-0 items-center gap-2'>
-                    <Button variant='default' onClick={() => setEditingSkill(s)}>
-                      Edit
-                    </Button>
-                    <Button
-                      variant='ghost'
-                      onClick={() => handleDeleteClick(s.id)}
-                      disabled={deletingSkills.has(s.id)}
-                    >
-                      {deletingSkills.has(s.id) ? 'Deleting...' : 'Delete'}
-                    </Button>
-                  </div>
-                </div>
-              ))}
-              {showNoResults && (
-                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
-                  No skills found matching "{searchTerm}"
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-
-      <SkillModal
-        open={showAddForm || !!editingSkill}
-        onOpenChange={(open) => {
-          if (!open) {
-            setShowAddForm(false)
-            setEditingSkill(null)
-          }
-        }}
-        onSave={handleSkillSaved}
-        onDelete={(skillId) => {
-          setEditingSkill(null)
-          handleDeleteClick(skillId)
-        }}
-        initialValues={editingSkill ?? undefined}
-      />
-
-      <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <ModalContent size='sm'>
-          <ModalHeader>Delete Skill</ModalHeader>
-          <ModalBody>
-            <ModalDescription className='text-[var(--text-secondary)]'>
-              Are you sure you want to delete{' '}
-              <span className='font-medium text-[var(--text-primary)]'>{skillToDelete?.name}</span>?{' '}
-              This action cannot be undone.
-            </ModalDescription>
-          </ModalBody>
-          <ModalFooter>
-            <Button variant='default' onClick={() => setShowDeleteDialog(false)}>
-              Cancel
-            </Button>
-            <Button variant='destructive' onClick={handleDeleteSkill}>
-              Delete
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx
index 7408dc0e849..4e4a8dd213c 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx
@@ -16,7 +16,6 @@ import {
   ModalDescription,
   ModalFooter,
   ModalHeader,
-  Skeleton,
   Switch,
   Tooltip,
 } from '@/components/emcn'
@@ -102,60 +101,6 @@ interface WorkspaceAdmin {
   permissionType: string
 }
 
-function SubscriptionSkeleton() {
-  return (
-    <div className='flex h-full flex-col gap-5'>
-      <div className='flex flex-col gap-3'>
-        <div className='flex items-center justify-between'>
-          <div className='flex flex-col gap-1'>
-            <div className='flex h-[18px] items-center'>
-              <Skeleton className='h-[12px] w-[40px] rounded-sm' />
-            </div>
-            <div className='flex h-[21px] items-center gap-1'>
-              <Skeleton className='h-[14px] w-[50px] rounded-sm' />
-              <span className='font-medium text-[var(--text-primary)] text-base'>/</span>
-              <Skeleton className='h-[14px] w-[50px] rounded-sm' />
-            </div>
-          </div>
-          <div className='flex flex-col items-end gap-2'>
-            <div className='flex w-[100px] items-center gap-1'>
-              {[...Array(5)].map((_, i) => (
-                <Skeleton key={i} className='h-[6px] flex-1 rounded-xs' />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className='flex flex-col gap-2.5'>
-        <div className='grid grid-cols-2 gap-2.5'>
-          {[0, 1].map((i) => (
-            <article
-              key={i}
-              className='flex flex-1 flex-col overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'
-            >
-              <div className='flex items-center justify-between gap-2 px-3.5 py-2.5'>
-                <Skeleton className='h-[14px] w-[32px] rounded-sm' />
-                <Skeleton className='h-[14px] w-[50px] rounded-sm' />
-              </div>
-              <div className='flex flex-1 flex-col gap-4.5 rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-4'>
-                <ul className='flex flex-1 flex-col gap-3.5'>
-                  {[...Array(5)].map((_, j) => (
-                    <li key={j} className='flex items-center gap-2'>
-                      <Skeleton className='size-[12px] flex-shrink-0 rounded-sm' />
-                      <Skeleton className='h-[12px] w-[120px] rounded-sm' />
-                    </li>
-                  ))}
-                </ul>
-                <Skeleton className='h-[28px] w-full rounded-[5px]' />
-              </div>
-            </article>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
 const formatPlanName = getDisplayPlanName
 
 interface CreditPlanCardProps {
@@ -225,9 +170,9 @@ function CreditPlanCard({
 
       {features && features.length > 0 && (
         <ul className='flex flex-col gap-2.5 border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-3'>
-          {features.map((feature) => (
-            <li key={feature.text} className='flex items-center gap-2'>
-              <feature.icon className='size-[13px] flex-shrink-0 text-[var(--text-muted)]' />
+          {features.map((feature, idx) => (
+            <li key={idx} className='flex items-center gap-2'>
+              <feature.icon className='h-[13px] w-[13px] flex-shrink-0 text-[var(--text-muted)]' />
               <span className='text-[var(--text-secondary)] text-caption'>{feature.text}</span>
             </li>
           ))}
@@ -242,7 +187,7 @@ function CreditPlanCard({
         </div>
       )}
 
-      <div className='flex min-h-[60px] items-center border-[var(--border-1)] border-t bg-[var(--surface-4)] p-3.5'>
+      <div className='flex min-h-[60px] items-center border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-3.5'>
         {isCurrentPlan ? (
           <Button onClick={onManagePlan} className='h-[32px] w-full' variant='default'>
             {isCancelledAtPeriodEnd ? 'Restore Subscription' : 'Manage plan'}
@@ -574,7 +519,7 @@ export function Subscription() {
   const proDailyRefresh = Math.round(PRO_TIER.dollars * DAILY_REFRESH_RATE * CREDIT_MULTIPLIER)
   const maxDailyRefresh = Math.round(MAX_TIER.dollars * DAILY_REFRESH_RATE * CREDIT_MULTIPLIER)
 
-  if (isLoading) return <SubscriptionSkeleton />
+  if (isLoading) return null
 
   const showUpgradePlans = permissions.showUpgradePlans
   const hasEnterprise = visiblePlans.includes('enterprise')
@@ -1066,7 +1011,7 @@ export function Subscription() {
                 <Label htmlFor='billed-account'>Billed Account</Label>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <Info className='size-[12px] text-[var(--text-secondary)]' />
+                    <Info className='h-[12px] w-[12px] text-[var(--text-secondary)]' />
                   </Tooltip.Trigger>
                   <Tooltip.Content>
                     <span>Usage from this workspace will be billed to this account</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats-overview/team-seats-overview.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats-overview/team-seats-overview.tsx
index 52f6d11c67a..99893e1a685 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats-overview/team-seats-overview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats-overview/team-seats-overview.tsx
@@ -1,5 +1,5 @@
 import { useParams, useRouter } from 'next/navigation'
-import { Badge, Button, Skeleton } from '@/components/emcn'
+import { Badge, Button } from '@/components/emcn'
 import { checkEnterprisePlan } from '@/lib/billing/subscriptions/utils'
 import { cn } from '@/lib/core/utils/cn'
 
@@ -22,27 +22,6 @@ interface TeamSeatsOverviewProps {
   onAddSeatDialog: () => void
 }
 
-function TeamSeatsSkeleton() {
-  return (
-    <div className='overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'>
-      <div className='flex flex-col gap-2 px-3.5 py-3'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <Skeleton className='h-5 w-16 rounded-sm' />
-            <Skeleton className='h-4 w-20 rounded-sm' />
-          </div>
-          <div className='flex items-center gap-1 text-small'>
-            <Skeleton className='h-4 w-8 rounded-sm' />
-            <span className='text-[var(--text-muted)]'>/</span>
-            <Skeleton className='h-4 w-8 rounded-sm' />
-          </div>
-        </div>
-        <Skeleton className='h-[6px] w-full rounded-full' />
-      </div>
-    </div>
-  )
-}
-
 export function TeamSeatsOverview({
   subscriptionData,
   isLoadingSubscription,
@@ -56,7 +35,7 @@ export function TeamSeatsOverview({
   const workspaceId = params?.workspaceId
 
   if (isLoadingSubscription) {
-    return <TeamSeatsSkeleton />
+    return null
   }
 
   if (!subscriptionData) {
@@ -93,7 +72,7 @@ export function TeamSeatsOverview({
   const pillCount = Math.max(totalSeats, usedSeats)
 
   if (isSeatDataPending) {
-    return <TeamSeatsSkeleton />
+    return null
   }
 
   return (
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
index 6b79172526e..6f9ce491a0e 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Skeleton, type TagItem } from '@/components/emcn'
+import type { TagItem } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionAccessState } from '@/lib/billing/client/utils'
 import { getPlanTierCredits, getPlanTierDollars } from '@/lib/billing/plan-helpers'
@@ -353,67 +353,7 @@ export function TeamManagement() {
   const displayOrganization = organization || activeOrganization
 
   if (isLoading && !displayOrganization && !(hasTeamPlan || hasEnterprisePlan)) {
-    return (
-      <div className='flex h-full flex-col gap-4.5'>
-        {/* Team Seats Overview */}
-        <div>
-          <div className='rounded-lg border bg-[var(--surface-3)] p-4 shadow-xs'>
-            <div className='space-y-3'>
-              <div className='flex items-center justify-between'>
-                <Skeleton className='h-5 w-24' />
-                <Skeleton className='h-8 w-20 rounded-md' />
-              </div>
-              <div className='flex items-center gap-4.5'>
-                <div className='flex flex-col gap-1'>
-                  <Skeleton className='h-3 w-16' />
-                  <Skeleton className='h-6 w-8' />
-                </div>
-                <div className='h-8 w-px bg-[var(--border)]' />
-                <div className='flex flex-col gap-1'>
-                  <Skeleton className='h-3 w-20' />
-                  <Skeleton className='h-6 w-8' />
-                </div>
-                <div className='h-8 w-px bg-[var(--border)]' />
-                <div className='flex flex-col gap-1'>
-                  <Skeleton className='h-3 w-24' />
-                  <Skeleton className='h-6 w-12' />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Team Members */}
-        <div>
-          <Skeleton className='mb-3 h-5 w-32' />
-          <div className='space-y-2'>
-            {[...Array(3)].map((_, i) => (
-              <div key={i} className='flex items-center justify-between rounded-lg border p-3'>
-                <div className='flex items-center gap-3'>
-                  <Skeleton className='size-10 rounded-full' />
-                  <div className='space-y-1'>
-                    <Skeleton className='h-4 w-32' />
-                    <Skeleton className='h-3 w-24' />
-                  </div>
-                </div>
-                <Skeleton className='h-6 w-16 rounded-full' />
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Invite Member Card */}
-        <div>
-          <div className='rounded-lg border bg-[var(--surface-3)] p-4'>
-            <Skeleton className='mb-3 h-5 w-32' />
-            <div className='space-y-3'>
-              <Skeleton className='h-9 w-full rounded-lg' />
-              <Skeleton className='h-9 w-full rounded-lg' />
-            </div>
-          </div>
-        </div>
-      </div>
-    )
+    return null
   }
 
   if (!displayOrganization) {
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers-skeleton.tsx
deleted file mode 100644
index ec2b595a7b9..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers-skeleton.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { McpSkeleton } from '@/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton'
-
-/**
- * Re-export McpSkeleton as WorkflowMcpServersSkeleton since both share identical markup.
- */
-export const WorkflowMcpServersSkeleton = McpSkeleton
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
index 463793b2fd8..d47bd92694c 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
@@ -21,7 +21,6 @@ import {
   ModalDescription,
   ModalFooter,
   ModalHeader,
-  Skeleton,
   SModalTabs,
   SModalTabsBody,
   SModalTabsContent,
@@ -49,7 +48,7 @@ import {
 } from '@/hooks/queries/workflow-mcp-servers'
 import { useWorkspaceSettings } from '@/hooks/queries/workspace'
 import { CreateApiKeyModal } from '../api-keys/components'
-import { FormField, McpServerSkeleton } from '../mcp/components'
+import { FormField } from '../mcp/components'
 import { CreateWorkflowMcpServerModal } from './create-workflow-mcp-server-modal'
 
 const logger = createLogger('WorkflowMcpServers')
@@ -303,13 +302,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
   )
 
   if (isLoading) {
-    return (
-      <div className='flex h-full flex-col gap-4.5'>
-        <Skeleton className='h-[24px] w-[200px]' />
-        <Skeleton className='h-[100px] w-full' />
-        <Skeleton className='h-[150px] w-full' />
-      </div>
-    )
+    return null
   }
 
   if (error || !data) {
@@ -1032,7 +1025,7 @@ export function WorkflowMcpServers() {
               placeholder='Search servers...'
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+              className='h-auto flex-1 border-0 bg-transparent p-0 leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
             />
           </div>
           <Button onClick={() => setShowAddModal(true)} disabled={isLoading} variant='primary'>
@@ -1048,13 +1041,7 @@ export function WorkflowMcpServers() {
                 {getErrorMessage(error, 'Failed to load MCP servers')}
               </p>
             </div>
-          ) : isLoading ? (
-            <div className='flex flex-col gap-2'>
-              <McpServerSkeleton />
-              <McpServerSkeleton />
-              <McpServerSkeleton />
-            </div>
-          ) : !hasServers ? (
+          ) : isLoading ? null : !hasServers ? (
             <div className='flex h-full items-center justify-center'>
               <p className='text-[var(--text-muted)] text-sm'>Click "Add" above to get started</p>
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/navigation.ts b/apps/sim/app/workspace/[workspaceId]/settings/navigation.ts
index 6886e926024..4e5b6bd7003 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/navigation.ts
+++ b/apps/sim/app/workspace/[workspaceId]/settings/navigation.ts
@@ -1,7 +1,6 @@
 import {
   Card,
   ClipboardList,
-  Connections,
   Database,
   HexSimple,
   Key,
@@ -20,12 +19,11 @@ import {
   Users,
   Wrench,
 } from '@/components/emcn'
-import { AgentSkillsIcon, McpIcon } from '@/components/icons'
+import { McpIcon } from '@/components/icons'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
 
 export type SettingsSection =
   | 'general'
-  | 'integrations'
   | 'secrets'
   | 'template-profile'
   | 'credential-sets'
@@ -40,7 +38,6 @@ export type SettingsSection =
   | 'copilot'
   | 'mcp'
   | 'custom-tools'
-  | 'skills'
   | 'workflow-mcp-servers'
   | 'inbox'
   | 'admin'
@@ -133,10 +130,8 @@ export const allNavigationItems: NavigationItem[] = [
     requiresHosted: true,
     requiresTeam: true,
   },
-  { id: 'integrations', label: 'Integrations', icon: Connections, section: 'account' },
   { id: 'secrets', label: 'Secrets', icon: Key, section: 'account' },
   { id: 'custom-tools', label: 'Custom Tools', icon: Wrench, section: 'tools' },
-  { id: 'skills', label: 'Skills', icon: AgentSkillsIcon, section: 'tools' },
   { id: 'mcp', label: 'MCP Tools', icon: McpIcon, section: 'tools' },
   { id: 'apikeys', label: 'Sim Keys', icon: TerminalWindow, section: 'system' },
   { id: 'workflow-mcp-servers', label: 'MCP Servers', icon: Server, section: 'system' },
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-import.tsx b/apps/sim/app/workspace/[workspaceId]/skills/components/skill-import.tsx
similarity index 98%
rename from apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-import.tsx
rename to apps/sim/app/workspace/[workspaceId]/skills/components/skill-import.tsx
index 0efc4f2c463..83696ab8a97 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-import.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/skills/components/skill-import.tsx
@@ -8,7 +8,10 @@ import { Upload } from '@/components/emcn/icons'
 import { requestJson } from '@/lib/api/client/request'
 import { importSkillContract } from '@/lib/api/contracts'
 import { cn } from '@/lib/core/utils/cn'
-import { extractSkillFromZip, parseSkillMarkdown } from './utils'
+import {
+  extractSkillFromZip,
+  parseSkillMarkdown,
+} from '@/app/workspace/[workspaceId]/skills/components/utils'
 
 interface ImportedSkill {
   name: string
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-modal.tsx b/apps/sim/app/workspace/[workspaceId]/skills/components/skill-modal.tsx
similarity index 98%
rename from apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-modal.tsx
rename to apps/sim/app/workspace/[workspaceId]/skills/components/skill-modal.tsx
index 4495700864f..cca9e0c922a 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/skills/components/skill-modal.tsx
@@ -19,9 +19,9 @@ import {
   ModalTabsTrigger,
   Textarea,
 } from '@/components/emcn'
+import { SkillImport } from '@/app/workspace/[workspaceId]/skills/components/skill-import'
 import type { SkillDefinition } from '@/hooks/queries/skills'
 import { useCreateSkill, useUpdateSkill } from '@/hooks/queries/skills'
-import { SkillImport } from './skill-import'
 
 interface SkillModalProps {
   open: boolean
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/utils.test.ts b/apps/sim/app/workspace/[workspaceId]/skills/components/utils.test.ts
similarity index 100%
rename from apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/utils.test.ts
rename to apps/sim/app/workspace/[workspaceId]/skills/components/utils.test.ts
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/utils.ts b/apps/sim/app/workspace/[workspaceId]/skills/components/utils.ts
similarity index 100%
rename from apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/utils.ts
rename to apps/sim/app/workspace/[workspaceId]/skills/components/utils.ts
diff --git a/apps/sim/app/workspace/[workspaceId]/skills/fixtures/sample-skills.ts b/apps/sim/app/workspace/[workspaceId]/skills/fixtures/sample-skills.ts
new file mode 100644
index 00000000000..8946fb98d76
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/skills/fixtures/sample-skills.ts
@@ -0,0 +1,57 @@
+import type { SkillDefinition } from '@/hooks/queries/skills'
+
+/**
+ * Flip to `true` to seed the Skills page with the sample entries below
+ * so every workspace has a populated list out of the box.
+ */
+export const PREVIEW_SKILLS_WITH_SAMPLES = true
+
+/**
+ * Four out-of-the-box sample skills shown alongside any real skills the
+ * workspace has created. Each entry covers a distinct everyday agent task.
+ */
+export function getSampleSkills(workspaceId: string): SkillDefinition[] {
+  const now = new Date().toISOString()
+  const base = {
+    workspaceId,
+    userId: null,
+    createdAt: now,
+    updatedAt: now,
+  }
+  return [
+    {
+      ...base,
+      id: 'sample-skill-summarize-thread',
+      name: 'summarize-thread',
+      description: 'Condense a long Slack or email thread into the key decisions and action items.',
+      content:
+        '# Summarize Thread\n\nGiven a Slack or email thread, produce:\n- A 1-sentence TL;DR\n- Key decisions made\n- Action items with owners\n- Open questions',
+    },
+    {
+      ...base,
+      id: 'sample-skill-triage-inbox',
+      name: 'triage-inbox',
+      description:
+        'Sort incoming messages by urgency and draft replies for the highest priority items.',
+      content:
+        '# Triage Inbox\n\nFor each unread message:\n1. Classify as Urgent / Today / This week / FYI\n2. For Urgent + Today, draft a reply\n3. Suggest a calendar block if a meeting is needed',
+    },
+    {
+      ...base,
+      id: 'sample-skill-write-changelog',
+      name: 'write-changelog',
+      description: 'Turn a list of merged pull requests into a customer-facing changelog entry.',
+      content:
+        '# Write Changelog\n\nGiven a list of merged PRs, write a changelog entry:\n- Group by area (Features, Improvements, Fixes)\n- Plain-English titles\n- One-line descriptions, no jargon',
+    },
+    {
+      ...base,
+      id: 'sample-skill-prep-standup',
+      name: 'prep-standup',
+      description:
+        'Pull yesterday’s commits, tickets, and meetings into a ready-to-paste standup update.',
+      content:
+        '# Prep Standup\n\nProduce a 3-section update:\n- Yesterday: commits, closed tickets, completed meetings\n- Today: in-progress work, scheduled meetings\n- Blockers: anything waiting on someone else',
+    },
+  ]
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/skills/layout.tsx b/apps/sim/app/workspace/[workspaceId]/skills/layout.tsx
new file mode 100644
index 00000000000..df7553ef65e
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/skills/layout.tsx
@@ -0,0 +1,3 @@
+export default function SkillsLayout({ children }: { children: React.ReactNode }) {
+  return <div className='flex h-full flex-1 flex-col overflow-hidden'>{children}</div>
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/skills/page.tsx b/apps/sim/app/workspace/[workspaceId]/skills/page.tsx
new file mode 100644
index 00000000000..facda14621f
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/skills/page.tsx
@@ -0,0 +1,8 @@
+import type { Metadata } from 'next'
+import { Skills } from '@/app/workspace/[workspaceId]/skills/skills'
+
+export const metadata: Metadata = {
+  title: 'Skills',
+}
+
+export default Skills
diff --git a/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx b/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx
new file mode 100644
index 00000000000..b7fa065f468
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx
@@ -0,0 +1,238 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { createLogger } from '@sim/logger'
+import { getErrorMessage } from '@sim/utils/errors'
+import { ArrowRight, Plus, Search } from 'lucide-react'
+import { useParams } from 'next/navigation'
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn'
+import { AgentSkillsIcon } from '@/components/icons'
+import { IntegrationTabsHeader } from '@/app/workspace/[workspaceId]/integrations/components/integration-tabs-header'
+import { ShowcaseWithExplore } from '@/app/workspace/[workspaceId]/integrations/components/showcase-with-explore'
+import { SkillModal } from '@/app/workspace/[workspaceId]/skills/components/skill-modal'
+import {
+  getSampleSkills,
+  PREVIEW_SKILLS_WITH_SAMPLES,
+} from '@/app/workspace/[workspaceId]/skills/fixtures/sample-skills'
+import type { SkillDefinition } from '@/hooks/queries/skills'
+import { useDeleteSkill, useSkills } from '@/hooks/queries/skills'
+
+const logger = createLogger('SkillsSettings')
+
+const SKILLS_LABEL = 'Skills'
+
+function SkillTile() {
+  return (
+    <div className='h-9 w-9 flex-shrink-0'>
+      <div className='flex h-full w-full items-center justify-center rounded-xl border border-[var(--border-1)] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]'>
+        <AgentSkillsIcon className='h-5 w-5 text-[var(--text-icon)]' />
+      </div>
+    </div>
+  )
+}
+
+interface SkillItemProps {
+  name: string
+  description: string
+  onClick: () => void
+}
+
+function SkillItem({ name, description, onClick }: SkillItemProps) {
+  return (
+    <button
+      type='button'
+      onClick={onClick}
+      className='flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
+    >
+      <SkillTile />
+      <div className='flex min-w-0 flex-1 flex-col'>
+        <span className='truncate text-[14px] text-[var(--text-body)]'>{name}</span>
+        {description && (
+          <span className='truncate text-[12px] text-[var(--text-muted)]'>{description}</span>
+        )}
+      </div>
+      <ArrowRight className='h-4 w-4 flex-shrink-0 text-[var(--text-icon)]' />
+    </button>
+  )
+}
+
+interface SkillSectionProps {
+  label: string
+  children: React.ReactNode
+}
+
+function SkillSection({ label, children }: SkillSectionProps) {
+  return (
+    <section className='flex flex-col'>
+      <span className='pl-0.5 text-[var(--text-muted)] text-small'>{label}</span>
+      <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
+      <div className='-mx-2 grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-x-2 gap-y-0.5'>
+        {children}
+      </div>
+    </section>
+  )
+}
+
+export function Skills() {
+  const params = useParams()
+  const workspaceId = (params?.workspaceId as string) || ''
+
+  const { data: skills = [], isLoading, error } = useSkills(workspaceId)
+  const deleteSkillMutation = useDeleteSkill()
+
+  const [searchTerm, setSearchTerm] = useState('')
+  const [editingSkill, setEditingSkill] = useState<SkillDefinition | null>(null)
+  const [showAddForm, setShowAddForm] = useState(false)
+  const [skillToDelete, setSkillToDelete] = useState<{ id: string; name: string } | null>(null)
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+
+  const allSkills = useMemo(() => {
+    if (!PREVIEW_SKILLS_WITH_SAMPLES) return skills
+    return [...getSampleSkills(workspaceId), ...skills]
+  }, [skills, workspaceId])
+
+  const filteredSkills = allSkills.filter((s) => {
+    if (!searchTerm.trim()) return true
+    const searchLower = searchTerm.toLowerCase()
+    return (
+      s.name.toLowerCase().includes(searchLower) ||
+      s.description.toLowerCase().includes(searchLower)
+    )
+  })
+
+  const handleDeleteClick = (skillId: string) => {
+    const s = allSkills.find((sk) => sk.id === skillId)
+    if (!s) return
+
+    setSkillToDelete({ id: skillId, name: s.name })
+    setShowDeleteDialog(true)
+  }
+
+  const handleDeleteSkill = async () => {
+    if (!skillToDelete) return
+
+    setShowDeleteDialog(false)
+
+    try {
+      await deleteSkillMutation.mutateAsync({
+        workspaceId,
+        skillId: skillToDelete.id,
+      })
+      logger.info(`Deleted skill: ${skillToDelete.id}`)
+    } catch (error) {
+      logger.error('Error deleting skill:', error)
+    } finally {
+      setSkillToDelete(null)
+    }
+  }
+
+  const handleSkillSaved = () => {
+    setShowAddForm(false)
+    setEditingSkill(null)
+  }
+
+  const showNoResults = searchTerm.trim() && filteredSkills.length === 0
+
+  const addButton = (
+    <button
+      type='button'
+      onClick={() => setShowAddForm(true)}
+      disabled={isLoading}
+      className='group mx-0.5 inline-flex h-[30px] items-center gap-1.5 rounded-lg bg-[var(--text-primary)] px-2 text-[var(--text-inverse)] transition-colors hover-hover:bg-[var(--text-body)] hover-hover:text-[var(--text-inverse)] disabled:opacity-60 dark:bg-white dark:text-[var(--bg)] dark:hover-hover:bg-[var(--text-secondary)] dark:hover-hover:text-[var(--bg)]'
+    >
+      <Plus className='h-[16px] w-[16px] flex-shrink-0' />
+      <span className='text-sm'>Add</span>
+    </button>
+  )
+
+  return (
+    <div className='flex h-full flex-col bg-[var(--bg)]'>
+      <IntegrationTabsHeader active='skills' workspaceId={workspaceId} rightSlot={addButton} />
+      <div className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'>
+        <div className='mx-auto flex max-w-[48rem] flex-col gap-7 pb-3'>
+          <ShowcaseWithExplore prompt='Explain the skills in Sim and which ones I should add to my agents.' />
+          <div className='flex items-center gap-2'>
+            <div className='flex h-[30px] flex-1 items-center gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
+              <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-muted)]' />
+              <input
+                placeholder='Search skills...'
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                disabled={isLoading}
+                className='h-full w-full bg-transparent text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
+              />
+            </div>
+          </div>
+
+          <div className='flex flex-col gap-7'>
+            {error ? (
+              <div className='py-4 text-center text-[var(--error)] text-sm'>
+                {getErrorMessage(error, 'Failed to load skills')}
+              </div>
+            ) : filteredSkills.length > 0 ? (
+              <SkillSection label={SKILLS_LABEL}>
+                {filteredSkills.map((s) => (
+                  <SkillItem
+                    key={s.id}
+                    name={s.name}
+                    description={s.description}
+                    onClick={() => setEditingSkill(s)}
+                  />
+                ))}
+              </SkillSection>
+            ) : showNoResults ? (
+              <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
+                No skills found matching “{searchTerm}”
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+
+      <SkillModal
+        open={showAddForm || !!editingSkill}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowAddForm(false)
+            setEditingSkill(null)
+          }
+        }}
+        onSave={handleSkillSaved}
+        onDelete={(skillId) => {
+          setEditingSkill(null)
+          handleDeleteClick(skillId)
+        }}
+        initialValues={editingSkill ?? undefined}
+      />
+
+      <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <ModalContent size='sm'>
+          <ModalHeader>Delete Skill</ModalHeader>
+          <ModalBody>
+            <ModalDescription className='text-[var(--text-secondary)]'>
+              Are you sure you want to delete{' '}
+              <span className='font-medium text-[var(--text-primary)]'>{skillToDelete?.name}</span>?{' '}
+              This action cannot be undone.
+            </ModalDescription>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setShowDeleteDialog(false)}>
+              Cancel
+            </Button>
+            <Button variant='destructive' onClick={handleDeleteSkill}>
+              Delete
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx
index 13f3d0d1110..93503217983 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx
@@ -13,7 +13,7 @@ import {
   ModalHeader,
   toast,
 } from '@/components/emcn'
-import { Download, Pencil, Table as TableIcon, Trash, Upload } from '@/components/emcn/icons'
+import { Pencil, Table as TableIcon, Trash, Upload } from '@/components/emcn/icons'
 import type { RunMode } from '@/lib/api/contracts/tables'
 import type { ColumnDefinition, Filter, TableRow as TableRowType } from '@/lib/table'
 import {
@@ -398,7 +398,7 @@ export function Table({
             },
             {
               label: 'Export CSV',
-              icon: Download,
+              icon: Upload,
               onClick: () => void handleExportCsv(),
               disabled: tableData.rowCount === 0,
             },
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/components/table-context-menu/table-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/tables/components/table-context-menu/table-context-menu.tsx
index 873807b938e..4b38b1da506 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/components/table-context-menu/table-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/components/table-context-menu/table-context-menu.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import {
-  Download,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -9,7 +8,7 @@ import {
   DropdownMenuTrigger,
   Upload,
 } from '@/components/emcn'
-import { Copy, Database, Pencil, Trash } from '@/components/emcn/icons'
+import { Database, Duplicate, Pencil, Trash } from '@/components/emcn/icons'
 
 interface TableContextMenuProps {
   isOpen: boolean
@@ -85,7 +84,7 @@ export function TableContextMenu({
         )}
         {onExportCsv && (
           <DropdownMenuItem disabled={disableExport} onSelect={onExportCsv}>
-            <Download />
+            <Upload />
             Export CSV
           </DropdownMenuItem>
         )}
@@ -94,7 +93,7 @@ export function TableContextMenu({
         )}
         {onCopyId && (
           <DropdownMenuItem onSelect={onCopyId}>
-            <Copy />
+            <Duplicate />
             Copy ID
           </DropdownMenuItem>
         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
index f667857479c..1a2aae197be 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
@@ -1,7 +1,7 @@
 import { memo, useCallback } from 'react'
 import { ArrowLeftRight, ArrowUpDown, Circle, CircleOff, Lock, LogOut, Unlock } from 'lucide-react'
 import { useShallow } from 'zustand/react/shallow'
-import { Button, Copy, PlayOutline, Tooltip, Trash2 } from '@/components/emcn'
+import { Button, Duplicate, PlayOutline, Tooltip, Trash2 } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { isInputDefinitionTrigger } from '@/lib/workflows/triggers/input-definition-triggers'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -52,7 +52,7 @@ export const ActionBar = memo(
       collaborativeBatchToggleBlockHandles,
       collaborativeBatchToggleLocked,
     } = useCollaborativeWorkflow()
-    const setPendingSelection = useWorkflowRegistry((state) => state.setPendingSelection)
+    const { setPendingSelection } = useWorkflowRegistry()
     const { handleRunFromBlock } = useWorkflowExecution()
 
     const addNotification = useNotificationStore((s) => s.addNotification)
@@ -95,28 +95,23 @@ export const ActionBar = memo(
       isParentLocked,
       isParentDisabled,
     } = useWorkflowStore(
-      useShallow(
-        useCallback(
-          (state) => {
-            const block = state.blocks[blockId]
-            const parentId = block?.data?.parentId
-            const parentBlock = parentId ? state.blocks[parentId] : undefined
-            return {
-              isEnabled: block?.enabled ?? true,
-              horizontalHandles: block?.horizontalHandles ?? false,
-              parentId,
-              parentType: parentBlock?.type,
-              isLocked: block?.locked ?? false,
-              isParentLocked: parentBlock?.locked ?? false,
-              isParentDisabled: parentBlock ? !parentBlock.enabled : false,
-            }
-          },
-          [blockId]
-        )
-      )
+      useShallow((state) => {
+        const block = state.blocks[blockId]
+        const parentId = block?.data?.parentId
+        const parentBlock = parentId ? state.blocks[parentId] : undefined
+        return {
+          isEnabled: block?.enabled ?? true,
+          horizontalHandles: block?.horizontalHandles ?? false,
+          parentId,
+          parentType: parentBlock?.type,
+          isLocked: block?.locked ?? false,
+          isParentLocked: parentBlock?.locked ?? false,
+          isParentDisabled: parentBlock ? !parentBlock.enabled : false,
+        }
+      })
     )
 
-    const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
+    const { activeWorkflowId } = useWorkflowRegistry()
     const isExecuting = useIsCurrentWorkflowExecuting()
     const getLastExecutionSnapshot = useExecutionStore((s) => s.getLastExecutionSnapshot)
     const userPermissions = useUserPermissionsContext()
@@ -278,7 +273,7 @@ export const ActionBar = memo(
                 className={ACTION_BUTTON_STYLES}
                 disabled={disabled || isLocked || isParentLocked}
               >
-                <Copy className={ICON_SIZE} />
+                <Duplicate className={ICON_SIZE} />
               </Button>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
index 4d96752aa1d..84ef9b6f9d0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
@@ -3,15 +3,7 @@
 import { type KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
-import {
-  AlertCircle,
-  ArrowDownToLine,
-  ArrowUp,
-  MoreVertical,
-  Paperclip,
-  Square,
-  X,
-} from 'lucide-react'
+import { AlertCircle, ArrowUp, MoreVertical, Paperclip, Square, X } from 'lucide-react'
 import { useShallow } from 'zustand/react/shallow'
 import {
   Badge,
@@ -24,6 +16,7 @@ import {
   PopoverTrigger,
   Tooltip,
   Trash,
+  Upload,
 } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
@@ -928,7 +921,6 @@ export function Chat() {
 
         {/* Start inputs button and output selector - with max-width to prevent overflow */}
         <div
-          role='presentation'
           className='ml-auto flex min-w-0 flex-shrink items-center gap-1.5'
           onMouseDown={(e) => e.stopPropagation()}
         >
@@ -937,9 +929,7 @@ export function Chat() {
               type='button'
               className='flex flex-none cursor-pointer items-center whitespace-nowrap rounded-md border border-[var(--border-1)] bg-[var(--surface-5)] px-2.5 py-0.5 font-medium font-sans text-[var(--text-primary)] text-caption hover-hover:bg-[var(--surface-active)]'
               title='Add chat inputs to Start block'
-              onMouseDown={(e) => {
-                e.stopPropagation()
-              }}
+              onMouseDown={(e) => e.stopPropagation()}
               onClick={(e) => {
                 e.stopPropagation()
                 handleConfigureStartInputs()
@@ -969,7 +959,7 @@ export function Chat() {
                 className='!p-1.5 -m-1.5'
                 onClick={(e) => e.stopPropagation()}
               >
-                <MoreVertical className='size-[14px]' strokeWidth={2} />
+                <MoreVertical className='h-[14px] w-[14px]' strokeWidth={2} />
               </Button>
             </PopoverTrigger>
             <PopoverContent
@@ -987,8 +977,8 @@ export function Chat() {
                   }}
                   disabled={workflowMessages.length === 0}
                 >
-                  <ArrowDownToLine className='size-[13px]' />
-                  <span>Download</span>
+                  <Upload className='h-[13px] w-[13px]' />
+                  <span>Export</span>
                 </PopoverItem>
                 <PopoverItem
                   onClick={() => {
@@ -997,7 +987,7 @@ export function Chat() {
                   }}
                   disabled={workflowMessages.length === 0}
                 >
-                  <Trash className='size-[13px]' />
+                  <Trash className='h-[13px] w-[13px]' />
                   <span>Clear</span>
                 </PopoverItem>
               </PopoverScrollArea>
@@ -1006,7 +996,7 @@ export function Chat() {
 
           {/* Close button */}
           <Button variant='ghost' className='!p-1.5 -m-1.5' onClick={handleClose}>
-            <X className='size-[16px]' />
+            <X className='h-[16px] w-[16px]' />
           </Button>
         </div>
       </div>
@@ -1043,14 +1033,14 @@ export function Chat() {
             <div>
               <div className='rounded-lg border border-[var(--terminal-status-error-border)] bg-[var(--terminal-status-error-bg)]'>
                 <div className='flex items-start gap-2'>
-                  <AlertCircle className='mt-0.5 size-3 shrink-0 text-[var(--text-error)]' />
+                  <AlertCircle className='mt-0.5 h-3 w-3 shrink-0 text-[var(--text-error)]' />
                   <div className='flex-1'>
                     <div className='mb-1 font-medium text-[var(--text-error)] text-caption'>
                       File upload error
                     </div>
                     <div className='space-y-1'>
                       {uploadErrors.map((err, idx) => (
-                        <div key={`${err}-${idx}`} className='text-[var(--text-error)] text-micro'>
+                        <div key={idx} className='text-[var(--text-error)] text-micro'>
                           {err}
                         </div>
                       ))}
@@ -1106,9 +1096,9 @@ export function Chat() {
                           e.stopPropagation()
                           removeFile(file.id)
                         }}
-                        className='absolute top-0.5 right-0.5 size-4 p-0 opacity-0 transition-opacity group-hover:opacity-100'
+                        className='absolute top-0.5 right-0.5 h-4 w-4 p-0 opacity-0 transition-opacity group-hover:opacity-100'
                       >
-                        <X className='size-2.5' />
+                        <X className='h-2.5 w-2.5' />
                       </Button>
                     </div>
                   )
@@ -1153,9 +1143,9 @@ export function Chat() {
                   <Button
                     onClick={handleStopStreaming}
                     variant='ghost'
-                    className='size-[22px] rounded-full bg-[#383838] p-0 transition-colors hover-hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover-hover:bg-[#CFCFCF]'
+                    className='h-[22px] w-[22px] rounded-full bg-[#383838] p-0 transition-colors hover-hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover-hover:bg-[#CFCFCF]'
                   >
-                    <Square className='size-2.5 fill-white text-white dark:fill-black dark:text-black' />
+                    <Square className='h-2.5 w-2.5 fill-white text-white dark:fill-black dark:text-black' />
                   </Button>
                 ) : (
                   <Button
@@ -1174,7 +1164,10 @@ export function Chat() {
                         : 'bg-[#808080] dark:bg-[#808080]'
                     )}
                   >
-                    <ArrowUp className='size-3.5 text-white dark:text-black' strokeWidth={2.25} />
+                    <ArrowUp
+                      className='h-3.5 w-3.5 text-white dark:text-black'
+                      strokeWidth={2.25}
+                    />
                   </Button>
                 )}
               </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
index 7199904c104..f6a0518715f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
@@ -180,7 +180,6 @@ export function CommandList() {
       )}
     >
       <div
-        data-tour='command-list'
         className='pointer-events-auto flex flex-col gap-2'
         onDragOver={handleDragOver}
         onDrop={handleDrop}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
index ca4ec57afb1..3bec89fcdb7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react'
 import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { Check, Copy, Wand2 } from 'lucide-react'
+import { Check, Wand2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import 'prismjs/components/prism-python'
 import { createLogger } from '@sim/logger'
@@ -9,6 +9,7 @@ import {
   CODE_LINE_HEIGHT_PX,
   Code as CodeEditor,
   calculateGutterWidth,
+  Duplicate,
   getCodeEditorProps,
   highlight,
   languages,
@@ -787,7 +788,7 @@ export const Code = memo(function Code({
           )}
           aria-label='Copy code'
         >
-          {copied ? <Check className='size-3.5' /> : <Copy className='size-3.5' />}
+          {copied ? <Check className='h-3.5 w-3.5' /> : <Duplicate className='h-3.5 w-3.5' />}
         </Button>
       )}
       {!hideInternalWand && (
@@ -816,9 +817,9 @@ export const Code = memo(function Code({
                 onClick={isPromptVisible ? hidePromptInline : showPromptInline}
                 disabled={isAiLoading || isAiStreaming}
                 aria-label='Generate code with AI'
-                className='size-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
+                className='h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
               >
-                <Wand2 className='size-4' />
+                <Wand2 className='h-4 w-4' />
               </Button>
             )}
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
index 335a06ff0ef..f03e63a2ee9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
@@ -1,12 +1,11 @@
 'use client'
 
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { Plus, XIcon } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Combobox, type ComboboxOptionGroup } from '@/components/emcn'
 import { AgentSkillsIcon } from '@/components/icons'
-import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
-import { SkillModal } from '@/app/workspace/[workspaceId]/settings/components/skills/components/skill-modal'
+import { SkillModal } from '@/app/workspace/[workspaceId]/skills/components/skill-modal'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 import type { SkillDefinition } from '@/hooks/queries/skills'
 import { useSkills } from '@/hooks/queries/skills'
@@ -40,7 +39,7 @@ export function SkillInput({
   const [value, setValue] = useSubBlockValue<StoredSkill[]>(blockId, subBlockId)
   const [showCreateModal, setShowCreateModal] = useState(false)
   const [editingSkill, setEditingSkill] = useState<SkillDefinition | null>(null)
-  const openRef = useRef(false)
+  const [open, setOpen] = useState(false)
 
   const selectedSkills: StoredSkill[] = useMemo(() => {
     if (isPreview && previewValue) {
@@ -65,7 +64,7 @@ export function SkillInput({
             icon: Plus,
             onSelect: () => {
               setShowCreateModal(true)
-              openRef.current = false
+              setOpen(false)
             },
             disabled: isPreview,
           },
@@ -85,7 +84,7 @@ export function SkillInput({
             onSelect: () => {
               const newSkills: StoredSkill[] = [...selectedSkills, { skillId: s.id, name: s.name }]
               setValue(newSkills)
-              openRef.current = false
+              setOpen(false)
             },
           }
         }),
@@ -128,9 +127,7 @@ export function SkillInput({
           searchPlaceholder='Search skills...'
           maxHeight={240}
           emptyMessage='No skills found'
-          onOpenChange={(v) => {
-            openRef.current = v
-          }}
+          onOpenChange={setOpen}
         />
 
         {selectedSkills.length > 0 &&
@@ -142,27 +139,19 @@ export function SkillInput({
                 className='group relative flex flex-col overflow-hidden rounded-sm border border-[var(--border-1)] transition-all duration-200 ease-in-out'
               >
                 <div
-                  role='group'
-                  tabIndex={fullSkill && !disabled && !isPreview ? 0 : undefined}
-                  aria-label={resolveSkillName(stored)}
                   className='flex cursor-pointer items-center justify-between gap-2 rounded-t-[4px] bg-[var(--surface-4)] px-2 py-[6.5px]'
                   onClick={() => {
                     if (fullSkill && !disabled && !isPreview) {
                       setEditingSkill(fullSkill)
                     }
                   }}
-                  onKeyDown={(event) => {
-                    if (event.target !== event.currentTarget || !fullSkill || disabled || isPreview)
-                      return
-                    handleKeyboardActivation(event, () => setEditingSkill(fullSkill))
-                  }}
                 >
                   <div className='flex min-w-0 flex-1 items-center gap-2'>
                     <div
-                      className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm'
+                      className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
                       style={{ backgroundColor: '#e0e0e0' }}
                     >
-                      <AgentSkillsIcon className='size-[10px] text-[var(--border)]' />
+                      <AgentSkillsIcon className='h-[10px] w-[10px] text-[var(--border)]' />
                     </div>
                     <span className='truncate font-medium text-[var(--text-primary)] text-small'>
                       {resolveSkillName(stored)}
@@ -179,7 +168,7 @@ export function SkillInput({
                         className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-primary)]'
                         aria-label='Remove skill'
                       >
-                        <XIcon className='size-[13px]' />
+                        <XIcon className='h-[13px] w-[13px]' />
                       </button>
                     )}
                   </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
index 0eeebc4327f..693556a4f72 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
@@ -197,7 +197,9 @@ function getBlocks() {
   if (cachedBlocks === null) {
     const allBlocks = getBlocksForSidebar()
 
-    // Separate blocks by category
+    // Core blocks: every first-party block (`category === 'blocks'`). This covers
+    // both workflow primitives (agent, condition, ...) and first-party services
+    // (a2a, mysql, smtp, ...). Tools: third-party integrations (`category === 'tools'`).
     const regularBlockConfigs = allBlocks.filter((block) => block.category === 'blocks')
     const toolConfigs = allBlocks.filter((block) => block.category === 'tools')
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index 059db45a53a..0543e2ff631 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -4,7 +4,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { useQueryClient } from '@tanstack/react-query'
-import { History, Plus } from 'lucide-react'
+import { History, Plus, Square } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { useShallow } from 'zustand/react/shallow'
@@ -12,11 +12,11 @@ import {
   BubbleChatClose,
   BubbleChatPreview,
   Button,
-  Copy,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  Duplicate,
   Layout,
   Modal,
   ModalBody,
@@ -34,7 +34,7 @@ import {
   PopoverTrigger,
   Trash,
 } from '@/components/emcn'
-import { Lock, Square, Unlock, Upload } from '@/components/emcn/icons'
+import { Lock, Unlock, Upload } from '@/components/emcn/icons'
 import { VariableIcon } from '@/components/icons'
 import { requestJson } from '@/lib/api/client/request'
 import {
@@ -347,7 +347,6 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
     removeFromQueue: copilotRemoveFromQueue,
     sendNow: copilotSendNow,
     editQueuedMessage: copilotEditQueuedMessage,
-    getCurrentRequestId: getCopilotCurrentRequestId,
   } = useChat(
     workspaceId,
     copilotChatId,
@@ -423,10 +422,9 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
     captureEvent(posthogRef.current, 'task_generation_aborted', {
       workspace_id: workspaceId,
       view: 'copilot',
-      request_id: getCopilotCurrentRequestId(),
     })
     copilotStopGeneration()
-  }, [copilotStopGeneration, getCopilotCurrentRequestId, workspaceId])
+  }, [copilotStopGeneration, workspaceId])
 
   const handleCopilotSubmit = useCallback(
     (text: string, fileAttachments?: FileAttachmentForApi[], contexts?: ChatContext[]) => {
@@ -609,11 +607,12 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
   const hasValidationErrors = false // TODO: Add validation logic if needed
   const isWorkflowBlocked = isExecuting || hasValidationErrors
   const isButtonDisabled = !isExecuting && (isWorkflowBlocked || (!canRun && !isLoadingPermissions))
+
   /**
    * Register global keyboard shortcuts using the central commands registry.
    *
    * - Mod+Enter: Run / cancel workflow (matches the Run button behavior)
-   * - Mod+Alt+F: Focus Toolbar tab and search input
+   * - Mod+F: Focus Toolbar tab and search input
    */
   useRegisterGlobalCommands(() =>
     createCommands([
@@ -657,7 +656,7 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
             <div className='flex gap-1.5'>
               <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
                 <DropdownMenuTrigger asChild>
-                  <Button className='size-[30px] rounded-[5px]' data-tour='panel-menu'>
+                  <Button className='h-[30px] w-[30px] rounded-[5px]'>
                     <MoreHorizontal />
                   </Button>
                 </DropdownMenuTrigger>
@@ -701,7 +700,7 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
                     onSelect={handleDuplicateWorkflow}
                     disabled={!userPermissions.canEdit || isDuplicating}
                   >
-                    <Copy animate={isDuplicating} />
+                    <Duplicate />
                     Duplicate workflow
                   </DropdownMenuItem>
                   <DropdownMenuItem
@@ -716,7 +715,7 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
                 </DropdownMenuContent>
               </DropdownMenu>
               <Button
-                className='size-[30px] rounded-[5px]'
+                className='h-[30px] w-[30px] rounded-[5px]'
                 variant={isChatOpen ? 'active' : 'default'}
                 onClick={() => setIsChatOpen(!isChatOpen)}
               >
@@ -725,7 +724,7 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
             </div>
 
             {/* Deploy and Run */}
-            <div className='flex gap-1.5' data-tour='deploy-run'>
+            <div className='flex gap-1.5'>
               <Deploy
                 activeWorkflowId={activeWorkflowId}
                 userPermissions={userPermissions}
@@ -733,15 +732,14 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
               />
               <Button
                 className='h-[30px] gap-2 px-2.5'
-                data-tour='run-button'
                 variant={isExecuting ? 'active' : 'tertiary'}
                 onClick={isExecuting ? cancelWorkflow : () => runWorkflow()}
                 disabled={!isExecuting && isButtonDisabled}
               >
                 {isExecuting ? (
-                  <Square className='size-[11.5px] fill-current' />
+                  <Square className='h-[11.5px] w-[11.5px] fill-current' />
                 ) : (
-                  <Play className='size-[11.5px]' />
+                  <Play className='h-[11.5px] w-[11.5px]' />
                 )}
                 {isExecuting ? 'Stop' : 'Run'}
               </Button>
@@ -761,7 +759,6 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
                   variant={_hasHydrated && activeTab === 'copilot' ? 'active' : 'ghost'}
                   onClick={() => handleTabClick('copilot')}
                   data-tab-button='copilot'
-                  data-tour='tab-copilot'
                 >
                   Copilot
                 </Button>
@@ -775,7 +772,6 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
                 variant={_hasHydrated && activeTab === 'toolbar' ? 'active' : 'ghost'}
                 onClick={() => handleTabClick('toolbar')}
                 data-tab-button='toolbar'
-                data-tour='tab-toolbar'
               >
                 Toolbar
               </Button>
@@ -788,7 +784,6 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
                 variant={_hasHydrated && activeTab === 'editor' ? 'active' : 'ghost'}
                 onClick={() => handleTabClick('editor')}
                 data-tab-button='editor'
-                data-tour='tab-editor'
               >
                 Editor
               </Button>
@@ -815,7 +810,7 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
                   </h2>
                   <div className='flex items-center gap-2'>
                     <Button variant='ghost' className='p-0' onClick={handleCopilotNewChat}>
-                      <Plus className='size-[14px]' />
+                      <Plus className='h-[14px] w-[14px]' />
                     </Button>
                     <Popover
                       open={isCopilotHistoryOpen}
@@ -826,7 +821,7 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
                     >
                       <PopoverTrigger asChild>
                         <Button variant='ghost' className='p-0'>
-                          <History className='size-[14px]' />
+                          <History className='h-[14px] w-[14px]' />
                         </Button>
                       </PopoverTrigger>
                       <PopoverContent align='end' side='bottom' sideOffset={8} maxHeight={280}>
@@ -854,14 +849,14 @@ export const Panel = memo(function Panel({ workspaceId: propWorkspaceId }: Panel
                                         >
                                           <Button
                                             variant='ghost'
-                                            className='size-[16px] p-0'
+                                            className='h-[16px] w-[16px] p-0'
                                             onClick={(e) => {
                                               e.stopPropagation()
                                               handleCopilotDeleteChat(chat.id)
                                             }}
                                             aria-label='Delete chat'
                                           >
-                                            <Trash className='size-[10px]' />
+                                            <Trash className='h-[10px] w-[10px]' />
                                           </Button>
                                         </div>
                                       }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
index 3144de9d5e4..4b6588604f3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
@@ -65,7 +65,7 @@ const STYLES = {
   row: 'group flex min-h-[30px] cursor-pointer items-center gap-2 rounded-lg px-2 -mx-2 hover-hover:bg-[var(--surface-active)]',
   chevron:
     'h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
-  keyName: 'font-base text-sm text-[var(--text-primary)]',
+  keyName: 'text-sm text-[var(--text-primary)]',
   badge: 'rounded-sm px-1 py-[0px] text-xs',
   summary: 'text-sm text-[var(--text-secondary)]',
   indent: 'mt-0.5 ml-[3px] flex min-w-0 flex-col gap-0.5 border-[var(--border)] border-l pl-[9px]',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
index 49fd22e1083..95e9dadb31a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
@@ -4,7 +4,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import clsx from 'clsx'
 import {
   ArrowDown,
-  ArrowDownToLine,
   ArrowUp,
   Check,
   Clipboard,
@@ -26,8 +25,8 @@ import {
   PopoverItem,
   PopoverTrigger,
   Tooltip,
+  Upload,
 } from '@/components/emcn'
-import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { OutputContextMenu } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/output-context-menu'
 import { StructuredOutput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output'
 import { ToggleButton } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button'
@@ -269,7 +268,11 @@ export const OutputPanel = React.memo(function OutputPanel({
     return () => document.removeEventListener('selectionchange', handleSelectionChange)
   }, [isOutputMenuOpen])
 
-  const structuredSearchQuery = isOutputSearchActive ? outputSearchQuery : undefined
+  // Memoize the search query for structured output to avoid re-renders
+  const structuredSearchQuery = useMemo(
+    () => (isOutputSearchActive ? outputSearchQuery : undefined),
+    [isOutputSearchActive, outputSearchQuery]
+  )
 
   const outputDataStringified = useMemo(() => {
     if (
@@ -301,14 +304,8 @@ export const OutputPanel = React.memo(function OutputPanel({
 
         {/* Header */}
         <div
-          role='group'
-          aria-label='Output panel header'
           className='group flex h-[30px] flex-shrink-0 cursor-pointer items-center justify-between bg-[var(--bg)] pr-4 pl-2.5'
           onClick={handleHeaderClick}
-          onKeyDown={(event) => {
-            if (event.target !== event.currentTarget) return
-            handleKeyboardActivation(event, handleHeaderClick)
-          }}
         >
           <div className='flex items-center'>
             <Button
@@ -346,7 +343,7 @@ export const OutputPanel = React.memo(function OutputPanel({
                     aria-label='Close search'
                     className='!p-1.5 -m-1.5'
                   >
-                    <X className='size-3.5' />
+                    <X className='h-3.5 w-3.5' />
                   </Button>
                 </Tooltip.Trigger>
                 <Tooltip.Content>
@@ -362,7 +359,7 @@ export const OutputPanel = React.memo(function OutputPanel({
                     aria-label='Search in output'
                     className='!p-1.5 -m-1.5'
                   >
-                    <Search className='size-3.5' />
+                    <Search className='h-3.5 w-3.5' />
                   </Button>
                 </Tooltip.Trigger>
                 <Tooltip.Content>
@@ -380,7 +377,7 @@ export const OutputPanel = React.memo(function OutputPanel({
                       aria-label='Component Playground'
                       className='!p-1.5 -m-1.5'
                     >
-                      <Palette className='size-3.5' />
+                      <Palette className='h-3.5 w-3.5' />
                     </Button>
                   </Link>
                 </Tooltip.Trigger>
@@ -403,9 +400,9 @@ export const OutputPanel = React.memo(function OutputPanel({
                     )}
                   >
                     {isTraining ? (
-                      <Pause className='size-3.5' />
+                      <Pause className='h-3.5 w-3.5' />
                     ) : (
-                      <Database className='size-3.5' />
+                      <Database className='h-3.5 w-3.5' />
                     )}
                   </Button>
                 </Tooltip.Trigger>
@@ -424,9 +421,9 @@ export const OutputPanel = React.memo(function OutputPanel({
                   className='!p-1.5 -m-1.5'
                 >
                   {showCopySuccess ? (
-                    <Check className='size-3.5' />
+                    <Check className='h-3.5 w-3.5' />
                   ) : (
-                    <Clipboard className='size-3.5' />
+                    <Clipboard className='h-3.5 w-3.5' />
                   )}
                 </Button>
               </Tooltip.Trigger>
@@ -441,14 +438,14 @@ export const OutputPanel = React.memo(function OutputPanel({
                     <Button
                       variant='ghost'
                       onClick={handleExportConsole}
-                      aria-label='Download console CSV'
+                      aria-label='Export console CSV'
                       className='!p-1.5 -m-1.5'
                     >
-                      <ArrowDownToLine className='size-3.5' />
+                      <Upload className='h-3.5 w-3.5' />
                     </Button>
                   </Tooltip.Trigger>
                   <Tooltip.Content>
-                    <span>Download CSV</span>
+                    <span>Export CSV</span>
                   </Tooltip.Content>
                 </Tooltip.Root>
                 <Tooltip.Root>
@@ -459,7 +456,7 @@ export const OutputPanel = React.memo(function OutputPanel({
                       aria-label='Clear console'
                       className='!p-1.5 -m-1.5'
                     >
-                      <Trash2 className='size-3.5' />
+                      <Trash2 className='h-3.5 w-3.5' />
                     </Button>
                   </Tooltip.Trigger>
                   <Tooltip.Content>
@@ -476,7 +473,7 @@ export const OutputPanel = React.memo(function OutputPanel({
                   aria-label='Terminal options'
                   className='!p-1.5 -m-1.5'
                 >
-                  <MoreHorizontal className='size-3.5' />
+                  <MoreHorizontal className='h-3.5 w-3.5' />
                 </Button>
               </PopoverTrigger>
               <PopoverContent
@@ -514,7 +511,6 @@ export const OutputPanel = React.memo(function OutputPanel({
         {/* Search Overlay */}
         {isOutputSearchActive && (
           <div
-            role='presentation'
             className='absolute top-[30px] right-[8px] z-30 flex h-[34px] items-center gap-1.5 rounded-b-[4px] border border-[var(--border)] border-t-0 bg-[var(--bg)] px-1.5 shadow-sm'
             onClick={(e) => e.stopPropagation()}
             data-toolbar-root
@@ -543,7 +539,7 @@ export const OutputPanel = React.memo(function OutputPanel({
               className='!p-1.5 -m-1.5'
               disabled={matchCount === 0}
             >
-              <ArrowUp className='size-3.5' />
+              <ArrowUp className='h-3.5 w-3.5' />
             </Button>
             <Button
               variant='ghost'
@@ -552,7 +548,7 @@ export const OutputPanel = React.memo(function OutputPanel({
               className='!p-1.5 -m-1.5'
               disabled={matchCount === 0}
             >
-              <ArrowDown className='size-3.5' />
+              <ArrowDown className='h-3.5 w-3.5' />
             </Button>
             <Button
               variant='ghost'
@@ -560,7 +556,7 @@ export const OutputPanel = React.memo(function OutputPanel({
               aria-label='Close search'
               className='!p-1.5 -m-1.5'
             >
-              <X className='size-3.5' />
+              <X className='h-3.5 w-3.5' />
             </Button>
           </div>
         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
index 22231e763f7..0225f8c308c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
@@ -4,16 +4,7 @@ import type React from 'react'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { formatDuration } from '@sim/utils/formatting'
 import clsx from 'clsx'
-import {
-  ArrowDown,
-  ArrowDownToLine,
-  ArrowUp,
-  Database,
-  MoreHorizontal,
-  Palette,
-  Pause,
-  Trash2,
-} from 'lucide-react'
+import { ArrowDown, ArrowUp, Database, MoreHorizontal, Palette, Pause, Trash2 } from 'lucide-react'
 import Link from 'next/link'
 import { List, type RowComponentProps, useListRef } from 'react-window'
 import {
@@ -24,6 +15,7 @@ import {
   PopoverItem,
   PopoverTrigger,
   Tooltip,
+  Upload,
 } from '@/components/emcn'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
@@ -125,30 +117,27 @@ const BlockRow = memo(function BlockRow({
         e.stopPropagation()
         onSelect(entry)
       }}
-      onKeyDown={(event) => handleKeyboardActivation(event, () => onSelect(entry))}
+      onKeyDown={(event) =>
+        handleKeyboardActivation(event, () => onSelect(entry), { stopPropagation: true })
+      }
     >
       <div className='flex min-w-0 flex-1 items-center gap-2'>
         <div
-          className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm'
+          className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
           style={{ background: bgColor }}
         >
-          {BlockIcon && <BlockIcon className='size-[10px] text-white' />}
+          {BlockIcon && <BlockIcon className='h-[10px] w-[10px] text-white' />}
         </div>
         <span
           className={clsx(
-            'min-w-0 truncate font-base text-sm',
+            'min-w-0 truncate text-sm',
             hasError ? 'text-[var(--text-error)]' : 'text-[var(--text-primary)]'
           )}
         >
           {entry.blockName}
         </span>
       </div>
-      <span
-        className={clsx(
-          'flex-shrink-0 font-base text-sm',
-          !isRunning && 'text-[var(--text-secondary)]'
-        )}
-      >
+      <span className={clsx('flex-shrink-0 text-sm', !isRunning && 'text-[var(--text-secondary)]')}>
         <StatusDisplay
           isRunning={isRunning}
           isCanceled={isCanceled}
@@ -166,6 +155,8 @@ const IterationNodeRow = memo(function IterationNodeRow({
   node,
   selectedEntryId,
   onSelectEntry,
+  isExpanded,
+  onToggle,
   expandedNodes,
   onToggleNode,
   renderChildren = true,
@@ -173,20 +164,17 @@ const IterationNodeRow = memo(function IterationNodeRow({
   node: EntryNode
   selectedEntryId: string | null
   onSelectEntry: (entry: ConsoleEntry) => void
+  isExpanded: boolean
+  onToggle: () => void
   expandedNodes: Set<string>
   onToggleNode: (nodeId: string) => void
   renderChildren?: boolean
 }) {
   const { entry, children, iterationInfo } = node
-  const nodeId = entry.id
-  const isExpanded = expandedNodes.has(nodeId)
   const hasError = Boolean(entry.error) || children.some((c) => c.entry.error)
   const hasChildren = children.length > 0
   const hasRunningChild = children.some((c) => c.entry.isRunning)
   const hasCanceledChild = children.some((c) => c.entry.isCanceled) && !hasRunningChild
-  const handleToggle = useCallback(() => {
-    onToggleNode(nodeId)
-  }, [nodeId, onToggleNode])
 
   const iterationLabel = iterationInfo
     ? `Iteration ${iterationInfo.current + 1}${iterationInfo.total !== undefined ? ` / ${iterationInfo.total}` : ''}`
@@ -201,14 +189,14 @@ const IterationNodeRow = memo(function IterationNodeRow({
         className={clsx(ROW_STYLES.base, 'h-[30px]', ROW_STYLES.hover)}
         onClick={(e) => {
           e.stopPropagation()
-          handleToggle()
+          onToggle()
         }}
-        onKeyDown={(event) => handleKeyboardActivation(event, handleToggle)}
+        onKeyDown={(event) => handleKeyboardActivation(event, onToggle, { stopPropagation: true })}
       >
         <div className='flex min-w-0 flex-1 items-center gap-2'>
           <span
             className={clsx(
-              'min-w-0 truncate font-base text-sm',
+              'min-w-0 truncate text-sm',
               hasError ? 'text-[var(--text-error)]' : 'text-[var(--text-primary)]'
             )}
           >
@@ -225,7 +213,7 @@ const IterationNodeRow = memo(function IterationNodeRow({
         </div>
         <span
           className={clsx(
-            'flex-shrink-0 font-base text-sm',
+            'flex-shrink-0 text-sm',
             !hasRunningChild && 'text-[var(--text-secondary)]'
           )}
         >
@@ -303,18 +291,20 @@ const SubflowNodeRow = memo(function SubflowNodeRow({
           e.stopPropagation()
           onToggleNode(nodeId)
         }}
-        onKeyDown={(event) => handleKeyboardActivation(event, () => onToggleNode(nodeId))}
+        onKeyDown={(event) =>
+          handleKeyboardActivation(event, () => onToggleNode(nodeId), { stopPropagation: true })
+        }
       >
         <div className='flex min-w-0 flex-1 items-center gap-2'>
           <div
-            className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm'
+            className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
             style={{ background: bgColor }}
           >
-            {BlockIcon && <BlockIcon className='size-[10px] text-white' />}
+            {BlockIcon && <BlockIcon className='h-[10px] w-[10px] text-white' />}
           </div>
           <span
             className={clsx(
-              'min-w-0 truncate font-base text-sm',
+              'min-w-0 truncate text-sm',
               hasError ? 'text-[var(--text-error)]' : 'text-[var(--text-primary)]'
             )}
           >
@@ -331,7 +321,7 @@ const SubflowNodeRow = memo(function SubflowNodeRow({
         </div>
         <span
           className={clsx(
-            'flex-shrink-0 font-base text-sm',
+            'flex-shrink-0 text-sm',
             !hasRunningDescendant && 'text-[var(--text-secondary)]'
           )}
         >
@@ -352,6 +342,8 @@ const SubflowNodeRow = memo(function SubflowNodeRow({
               node={iterNode}
               selectedEntryId={selectedEntryId}
               onSelectEntry={onSelectEntry}
+              isExpanded={expandedNodes.has(iterNode.entry.id)}
+              onToggle={() => onToggleNode(iterNode.entry.id)}
               expandedNodes={expandedNodes}
               onToggleNode={onToggleNode}
             />
@@ -418,22 +410,26 @@ const WorkflowNodeRow = memo(function WorkflowNodeRow({
           if (hasChildren) onToggleNode(nodeId)
         }}
         onKeyDown={(event) =>
-          handleKeyboardActivation(event, () => {
-            if (!isSelected) onSelectEntry(entry)
-            if (hasChildren) onToggleNode(nodeId)
-          })
+          handleKeyboardActivation(
+            event,
+            () => {
+              if (!isSelected) onSelectEntry(entry)
+              if (hasChildren) onToggleNode(nodeId)
+            },
+            { stopPropagation: true }
+          )
         }
       >
         <div className='flex min-w-0 flex-1 items-center gap-2'>
           <div
-            className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm'
+            className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
             style={{ background: bgColor }}
           >
-            {BlockIcon && <BlockIcon className='size-[10px] text-white' />}
+            {BlockIcon && <BlockIcon className='h-[10px] w-[10px] text-white' />}
           </div>
           <span
             className={clsx(
-              'min-w-0 truncate font-base text-sm',
+              'min-w-0 truncate text-sm',
               hasError ? 'text-[var(--text-error)]' : 'text-[var(--text-primary)]'
             )}
           >
@@ -450,7 +446,7 @@ const WorkflowNodeRow = memo(function WorkflowNodeRow({
         </div>
         <span
           className={clsx(
-            'flex-shrink-0 font-base text-sm',
+            'flex-shrink-0 text-sm',
             !hasRunningDescendant && 'text-[var(--text-secondary)]'
           )}
         >
@@ -533,6 +529,8 @@ const EntryNodeRow = memo(function EntryNodeRow({
         node={node}
         selectedEntryId={selectedEntryId}
         onSelectEntry={onSelectEntry}
+        isExpanded={expandedNodes.has(node.entry.id)}
+        onToggle={() => onToggleNode(node.entry.id)}
         expandedNodes={expandedNodes}
         onToggleNode={onToggleNode}
         renderChildren={renderChildren}
@@ -1319,14 +1317,8 @@ export const Terminal = memo(function Terminal() {
           >
             {/* Header */}
             <div
-              role='group'
-              aria-label='Terminal logs header'
               className='group flex h-[30px] flex-shrink-0 cursor-pointer items-center justify-between bg-[var(--bg)] pr-4 pl-4'
               onClick={handleHeaderClick}
-              onKeyDown={(event) => {
-                if (event.target !== event.currentTarget) return
-                handleKeyboardActivation(event, handleHeaderClick)
-              }}
             >
               {/* Left side - Logs label */}
               <span className={TERMINAL_CONFIG.HEADER_TEXT_CLASS}>Logs</span>
@@ -1348,9 +1340,9 @@ export const Terminal = memo(function Terminal() {
                           className='!p-1.5 -m-1.5'
                         >
                           {sortConfig.direction === 'desc' ? (
-                            <ArrowDown className='size-3.5' />
+                            <ArrowDown className='h-3.5 w-3.5' />
                           ) : (
-                            <ArrowUp className='size-3.5' />
+                            <ArrowUp className='h-3.5 w-3.5' />
                           )}
                         </Button>
                       </Tooltip.Trigger>
@@ -1369,7 +1361,7 @@ export const Terminal = memo(function Terminal() {
                             aria-label='Component Playground'
                             className='!p-1.5 -m-1.5'
                           >
-                            <Palette className='size-3.5' />
+                            <Palette className='h-3.5 w-3.5' />
                           </Button>
                         </Link>
                       </Tooltip.Trigger>
@@ -1392,9 +1384,9 @@ export const Terminal = memo(function Terminal() {
                           )}
                         >
                           {isTraining ? (
-                            <Pause className='size-3.5' />
+                            <Pause className='h-3.5 w-3.5' />
                           ) : (
-                            <Database className='size-3.5' />
+                            <Database className='h-3.5 w-3.5' />
                           )}
                         </Button>
                       </Tooltip.Trigger>
@@ -1411,14 +1403,14 @@ export const Terminal = memo(function Terminal() {
                           <Button
                             variant='ghost'
                             onClick={handleExportConsole}
-                            aria-label='Download console CSV'
+                            aria-label='Export console CSV'
                             className='!p-1.5 -m-1.5'
                           >
-                            <ArrowDownToLine className='size-3.5' />
+                            <Upload className='h-3.5 w-3.5' />
                           </Button>
                         </Tooltip.Trigger>
                         <Tooltip.Content>
-                          <span>Download CSV</span>
+                          <span>Export CSV</span>
                         </Tooltip.Content>
                       </Tooltip.Root>
                       <Tooltip.Root>
@@ -1429,7 +1421,7 @@ export const Terminal = memo(function Terminal() {
                             aria-label='Clear console'
                             className='!p-1.5 -m-1.5'
                           >
-                            <Trash2 className='size-3.5' />
+                            <Trash2 className='h-3.5 w-3.5' />
                           </Button>
                         </Tooltip.Trigger>
                         <Tooltip.Content>
@@ -1449,7 +1441,7 @@ export const Terminal = memo(function Terminal() {
                         aria-label='Terminal options'
                         className='!p-1.5 -m-1.5'
                       >
-                        <MoreHorizontal className='size-3.5' />
+                        <MoreHorizontal className='h-3.5 w-3.5' />
                       </Button>
                     </PopoverTrigger>
                     <PopoverContent
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils.ts
index 347a5ffbc2f..f7f5400fbfd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils.ts
@@ -760,6 +760,6 @@ export function flattenVisibleExecutionRows(
 export const TERMINAL_CONFIG = {
   NEAR_MIN_THRESHOLD: 40,
   BLOCK_COLUMN_WIDTH_PX: TERMINAL_BLOCK_COLUMN_WIDTH,
-  HEADER_TEXT_CLASS: 'font-base text-[var(--text-icon)] text-small',
+  HEADER_TEXT_CLASS: 'text-[var(--text-icon)] text-small',
   LOG_ROW_HEIGHT_PX: 32,
 } as const
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
index aea70ad7cc1..39c97cb0b0f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
@@ -83,14 +83,13 @@ export const WorkflowControls = memo(function WorkflowControls() {
   }
 
   if (!showWorkflowControls) {
-    return <div data-tour='workflow-controls' className='hidden' />
+    return <div className='hidden' />
   }
 
   return (
     <>
       <div
         className='absolute bottom-4 left-[16px] z-10 flex h-[36px] items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--surface-1)] p-1'
-        data-tour='workflow-controls'
         onContextMenu={handleContextMenu}
       >
         {/* Canvas Mode Selector */}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/layout.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/layout.tsx
index 28acbac079a..73078feb796 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/layout.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/layout.tsx
@@ -1,11 +1,9 @@
-import { WorkflowTour } from '@/app/workspace/[workspaceId]/components/product-tour'
 import { ErrorBoundary } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/error'
 
 export default function WorkflowLayout({ children }: { children: React.ReactNode }) {
   return (
     <main className='flex h-full flex-1 flex-col overflow-hidden'>
       <ErrorBoundary>{children}</ErrorBoundary>
-      <WorkflowTour />
     </main>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index 0d05ff2a24a..2e69592dff4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -4098,11 +4098,7 @@ const WorkflowContent = React.memo(
     return (
       <div className='flex h-full w-full overflow-hidden'>
         <div className='flex min-w-0 flex-1 flex-col'>
-          <div
-            ref={canvasContainerRef}
-            className='relative flex-1 overflow-hidden'
-            data-tour='canvas'
-          >
+          <div ref={canvasContainerRef} className='relative flex-1 overflow-hidden'>
             {!isWorkflowReady && (
               <div className='absolute inset-0 z-[5] flex items-center justify-center bg-[var(--bg)]'>
                 <div
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
index 28b58005af0..a6f730d4eef 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
@@ -2,10 +2,10 @@ import { type MouseEvent as ReactMouseEvent, useState } from 'react'
 import { Folder, MoreHorizontal, Plus } from 'lucide-react'
 import Link from 'next/link'
 import {
-  Blimp,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuItemAction,
   DropdownMenuSeparator,
   DropdownMenuSub,
   DropdownMenuSubContent,
@@ -163,71 +163,12 @@ interface CollapsedWorkflowFlyoutItemProps {
 }
 
 const EDIT_ROW_CLASS =
-  'mx-0.5 flex min-h-[30px] min-w-0 cursor-default select-none items-center gap-2 rounded-[5px] bg-[var(--surface-active)] px-2 py-1.5 font-medium text-[12px] text-[var(--text-body)]'
-
-function FlyoutMoreButton({
-  ariaLabel,
-  onPointerDown,
-  onClick,
-  isVisible,
-}: {
-  ariaLabel: string
-  onPointerDown?: () => void
-  onClick: (e: ReactMouseEvent<HTMLButtonElement>) => void
-  isVisible?: boolean
-}) {
-  return (
-    <button
-      type='button'
-      aria-label={ariaLabel}
-      onPointerDown={onPointerDown}
-      onClick={onClick}
-      className={cn(
-        '-translate-y-1/2 absolute top-1/2 right-[8px] z-10 flex h-[18px] w-[18px] items-center justify-center rounded-sm opacity-0 transition-opacity group-hover:opacity-100',
-        isVisible && 'opacity-100'
-      )}
-    >
-      <MoreHorizontal className='size-[16px] text-[var(--text-icon)]' />
-    </button>
-  )
-}
-
-function TaskStatusIcon({
-  isActive,
-  isUnread,
-  hideStatusOnHover = false,
-}: {
-  isActive?: boolean
-  isUnread?: boolean
-  hideStatusOnHover?: boolean
-}) {
-  return (
-    <span className='relative flex-shrink-0'>
-      <Blimp className='size-[16px] text-[var(--text-icon)]' />
-      {isActive && (
-        <span
-          className={cn(
-            '-right-[1px] -bottom-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-amber-400',
-            hideStatusOnHover && 'group-hover:hidden'
-          )}
-        />
-      )}
-      {!isActive && isUnread && (
-        <span
-          className={cn(
-            '-right-[1px] -bottom-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-[var(--indicator-online)]',
-            hideStatusOnHover && 'group-hover:hidden'
-          )}
-        />
-      )}
-    </span>
-  )
-}
+  'flex h-[30px] min-w-0 cursor-default select-none items-center gap-2 rounded-lg bg-[var(--surface-active)] px-2 text-[var(--text-body)] text-small'
 
 function WorkflowColorSwatch({ color }: { color: string }) {
   return (
     <div
-      className='size-[16px] flex-shrink-0 rounded-sm border-[2.5px]'
+      className='h-[16px] w-[16px] flex-shrink-0 rounded-sm border-[2.5px]'
       style={{
         backgroundColor: color,
         borderColor: workflowBorderColor(color),
@@ -260,7 +201,7 @@ export function CollapsedSidebarMenu({
             <button
               type='button'
               aria-label={ariaLabel}
-              className='mx-0.5 flex h-[30px] items-center rounded-lg px-2 hover-hover:bg-[var(--surface-hover)]'
+              className='mx-0.5 flex h-[30px] items-center rounded-lg px-2 hover-hover:bg-[var(--surface-active)]'
             >
               {icon}
             </button>
@@ -270,7 +211,7 @@ export function CollapsedSidebarMenu({
           {primaryAction && (
             <>
               <DropdownMenuItem onSelect={primaryAction.onSelect}>
-                <Plus className='size-[14px]' />
+                <Plus className='h-[14px] w-[14px]' />
                 {primaryAction.label}
               </DropdownMenuItem>
               <DropdownMenuSeparator />
@@ -303,7 +244,6 @@ export function CollapsedTaskFlyoutItem({
   if (isEditing) {
     return (
       <div className={EDIT_ROW_CLASS}>
-        <TaskStatusIcon isActive={task.isActive} isUnread={task.isUnread} />
         <input
           aria-label={`Rename task ${task.name}`}
           ref={inputRef}
@@ -311,7 +251,7 @@ export function CollapsedTaskFlyoutItem({
           onChange={(e) => onEditValueChange?.(e.target.value)}
           onKeyDown={onEditKeyDown}
           onBlur={onEditBlur}
-          className='w-full min-w-0 border-0 bg-transparent p-0 font-medium text-[12px] text-[var(--text-body)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+          className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-small outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
           maxLength={100}
           disabled={isRenaming}
           onClick={(e) => {
@@ -328,14 +268,24 @@ export function CollapsedTaskFlyoutItem({
   }
 
   return (
-    <div className='group relative'>
+    <DropdownMenuItem
+      asChild
+      className={cn((isCurrentRoute || isMenuOpen) && 'bg-[var(--surface-active)]')}
+      action={
+        showActions ? (
+          <DropdownMenuItemAction
+            aria-label='Task options'
+            onPointerDown={onMorePointerDown}
+            onClick={(e) => onMoreClick?.(e, task.id)}
+            className={cn(isMenuOpen && 'opacity-100')}
+          >
+            <MoreHorizontal />
+          </DropdownMenuItemAction>
+        ) : undefined
+      }
+    >
       <Link
         href={task.href}
-        className={cn(
-          'flex min-w-0 cursor-default select-none items-center rounded-[5px] px-2 py-2 pr-[30px] font-medium text-[var(--text-body)] text-caption outline-none transition-colors',
-          !(isCurrentRoute || isMenuOpen) && 'group-hover:bg-[var(--surface-hover)]',
-          (isCurrentRoute || isMenuOpen) && 'bg-[var(--surface-active)]'
-        )}
         onContextMenu={
           task.id !== 'new' && onContextMenu ? (e) => onContextMenu(e, task.id) : undefined
         }
@@ -346,19 +296,7 @@ export function CollapsedTaskFlyoutItem({
           isUnread={!!task.isUnread}
         />
       </Link>
-      {showActions && (
-        <FlyoutMoreButton
-          ariaLabel='Task options'
-          onPointerDown={onMorePointerDown}
-          onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            onMoreClick?.(e, task.id)
-          }}
-          isVisible={isMenuOpen}
-        />
-      )}
-    </div>
+    </DropdownMenuItem>
   )
 }
 
@@ -382,42 +320,79 @@ export function CollapsedWorkflowFlyoutItem({
 
   if (isEditing) {
     return (
-      <div className='group relative'>
-        <div className='flex min-w-0 cursor-default select-none items-center gap-2 rounded-[5px] bg-[var(--surface-active)] p-2 font-medium text-[var(--text-body)] text-caption outline-none'>
-          <WorkflowColorSwatch color={workflow.color} />
-          <input
-            aria-label={`Rename workflow ${workflow.name}`}
-            ref={inputRef}
-            value={editValue ?? workflow.name}
-            onChange={(e) => onEditValueChange?.(e.target.value)}
-            onKeyDown={onEditKeyDown}
-            onBlur={onEditBlur}
-            className='w-full min-w-0 border-0 bg-transparent p-0 font-medium text-[var(--text-body)] text-caption outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
-            maxLength={100}
-            disabled={isRenaming}
-            onClick={(e) => {
-              e.preventDefault()
-              e.stopPropagation()
-            }}
-            autoComplete='off'
-            autoCorrect='off'
-            autoCapitalize='off'
-            spellCheck='false'
-          />
-        </div>
+      <div className={EDIT_ROW_CLASS}>
+        <WorkflowColorSwatch color={workflow.color} />
+        <input
+          aria-label={`Rename workflow ${workflow.name}`}
+          ref={inputRef}
+          value={editValue ?? workflow.name}
+          onChange={(e) => onEditValueChange?.(e.target.value)}
+          onKeyDown={onEditKeyDown}
+          onBlur={onEditBlur}
+          className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-small outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+          maxLength={100}
+          disabled={isRenaming}
+          onClick={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+          }}
+          autoComplete='off'
+          autoCorrect='off'
+          autoCapitalize='off'
+          spellCheck='false'
+        />
       </div>
     )
   }
 
   return (
-    <div className='group relative'>
+    <DropdownMenuItem
+      asChild
+      className={cn((isCurrentRoute || actionsOpen) && 'bg-[var(--surface-active)]')}
+      action={
+        hasActions ? (
+          <DropdownMenuSub
+            open={actionsOpen}
+            onOpenChange={(open) => {
+              if (!open) setActionsOpen(false)
+            }}
+          >
+            <DropdownMenuSubTrigger asChild>
+              <DropdownMenuItemAction
+                aria-label='Workflow options'
+                onClick={() => setActionsOpen((prev) => !prev)}
+                className={cn(actionsOpen && 'opacity-100')}
+              >
+                <MoreHorizontal />
+              </DropdownMenuItemAction>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              {onOpenInNewTab && (
+                <DropdownMenuItem onSelect={onOpenInNewTab}>
+                  <SquareArrowUpRight className='h-[14px] w-[14px]' />
+                  Open in new tab
+                </DropdownMenuItem>
+              )}
+              {onRename && (
+                <DropdownMenuItem
+                  disabled={!canRename}
+                  onSelect={(e) => {
+                    e.preventDefault()
+                    setActionsOpen(false)
+                    onRename()
+                  }}
+                >
+                  <Pencil className='h-[14px] w-[14px]' />
+                  Rename
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        ) : undefined
+      }
+    >
       <Link
         href={href}
-        className={cn(
-          'flex min-w-0 cursor-default select-none items-center gap-2 rounded-[5px] px-2 py-2 pr-[30px] font-medium text-[var(--text-body)] text-caption outline-none transition-colors',
-          !(isCurrentRoute || actionsOpen) && 'group-hover:bg-[var(--surface-hover)]',
-          (isCurrentRoute || actionsOpen) && 'bg-[var(--surface-active)]'
-        )}
         onContextMenu={
           hasActions
             ? (e) => {
@@ -430,47 +405,7 @@ export function CollapsedWorkflowFlyoutItem({
         <WorkflowColorSwatch color={workflow.color} />
         <span className='min-w-0 flex-1 truncate'>{workflow.name}</span>
       </Link>
-      {hasActions && (
-        <DropdownMenuSub
-          open={actionsOpen}
-          onOpenChange={(open) => {
-            if (!open) setActionsOpen(false)
-          }}
-        >
-          <DropdownMenuSubTrigger
-            aria-label='Workflow options'
-            className='-translate-y-1/2 absolute top-1/2 right-[8px] z-10 size-[18px] min-w-0 justify-center gap-0 rounded-sm p-0 opacity-0 transition-opacity focus:bg-transparent group-hover:opacity-100 data-[state=open]:bg-transparent data-[state=open]:opacity-100 [&>svg:last-child]:hidden [&_svg]:pointer-events-auto [&_svg]:size-[16px]'
-            onClick={(e) => {
-              e.stopPropagation()
-              setActionsOpen((prev) => !prev)
-            }}
-          >
-            <MoreHorizontal className='size-[16px] text-[var(--text-icon)]' />
-          </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent>
-            {onOpenInNewTab && (
-              <DropdownMenuItem onSelect={onOpenInNewTab}>
-                <SquareArrowUpRight className='size-[14px]' />
-                Open in new tab
-              </DropdownMenuItem>
-            )}
-            {onRename && (
-              <DropdownMenuItem
-                disabled={!canRename}
-                onSelect={(e) => {
-                  e.preventDefault()
-                  setActionsOpen(false)
-                  onRename()
-                }}
-              >
-                <Pencil className='size-[14px]' />
-                Rename
-              </DropdownMenuItem>
-            )}
-          </DropdownMenuSubContent>
-        </DropdownMenuSub>
-      )}
-    </div>
+    </DropdownMenuItem>
   )
 }
 
@@ -514,7 +449,7 @@ export function CollapsedFolderItems({
         if (!hasChildren) {
           return (
             <DropdownMenuItem key={folder.id} disabled>
-              <Folder className='size-[14px]' />
+              <Folder className='h-[14px] w-[14px]' />
               <span className='truncate'>{folder.name}</span>
             </DropdownMenuItem>
           )
@@ -522,8 +457,8 @@ export function CollapsedFolderItems({
 
         return (
           <DropdownMenuSub key={folder.id}>
-            <DropdownMenuSubTrigger className='focus:bg-[var(--surface-hover)] data-[state=open]:bg-[var(--surface-hover)]'>
-              <Folder className='size-[14px]' />
+            <DropdownMenuSubTrigger className='focus:bg-[var(--surface-active)] data-[state=open]:bg-[var(--surface-active)]'>
+              <Folder className='h-[14px] w-[14px]' />
               <span className='truncate'>{folder.name}</span>
             </DropdownMenuSubTrigger>
             <DropdownMenuSubContent>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/nav-item-context-menu/nav-item-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/nav-item-context-menu/nav-item-context-menu.tsx
index ca9c1e1e606..bdc18cfab7b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/nav-item-context-menu/nav-item-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/nav-item-context-menu/nav-item-context-menu.tsx
@@ -6,7 +6,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/emcn'
-import { Copy, SquareArrowUpRight } from '@/components/emcn/icons'
+import { Duplicate, SquareArrowUpRight } from '@/components/emcn/icons'
 
 interface NavItemContextMenuProps {
   isOpen: boolean
@@ -61,7 +61,7 @@ export function NavItemContextMenu({
             onClose()
           }}
         >
-          <Copy />
+          <Duplicate />
           Copy link
         </DropdownMenuItem>
       </DropdownMenuContent>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items.tsx
index 413b34a3886..fe5da46c746 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items.tsx
@@ -3,7 +3,6 @@
 import type { ComponentType } from 'react'
 import { memo } from 'react'
 import { Command } from 'cmdk'
-import { Blimp } from '@/components/emcn'
 import { File } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { workflowBorderColor } from '@/lib/workspaces/colors'
@@ -22,7 +21,7 @@ export const MemoizedCommandItem = memo(
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
         <div
-          className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
+          className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
           style={{ background: showColoredIcon ? bgColor : 'transparent' }}
         >
           <Icon
@@ -30,11 +29,11 @@ export const MemoizedCommandItem = memo(
               'transition-transform duration-100 group-hover:scale-110',
               showColoredIcon
                 ? '!h-[10px] !w-[10px] text-white'
-                : 'h-[14px] w-[14px] text-[var(--text-icon)]'
+                : 'h-[16px] w-[16px] text-[var(--text-icon)]'
             )}
           />
         </div>
-        <span className='truncate font-base text-[var(--text-body)]'>{children}</span>
+        <span className='truncate text-[var(--text-body)]'>{children}</span>
       </Command.Item>
     )
   },
@@ -65,19 +64,19 @@ export const MemoizedWorkflowItem = memo(
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
         <div
-          className='size-[14px] flex-shrink-0 rounded-sm border-[2px]'
+          className='h-[16px] w-[16px] flex-shrink-0 rounded-sm border-[2.5px]'
           style={{
             backgroundColor: color,
             borderColor: workflowBorderColor(color),
             backgroundClip: 'padding-box',
           }}
         />
-        <span className='flex min-w-0 max-w-[75%] flex-shrink-0 font-base text-[var(--text-body)]'>
+        <span className='flex min-w-0 max-w-[75%] flex-shrink-0 text-[var(--text-body)]'>
           <span className='truncate'>{name}</span>
           {isCurrent && <span className='flex-shrink-0 whitespace-pre'> (current)</span>}
         </span>
         {folderPath && folderPath.length > 0 && (
-          <span className='ml-auto flex min-w-0 pl-2 font-base text-[var(--text-subtle)] text-small'>
+          <span className='ml-auto flex min-w-0 pl-2 text-[var(--text-subtle)] text-small'>
             {folderPath.length > 1 && (
               <>
                 <span className='min-w-0 truncate [flex-shrink:9999]'>
@@ -158,10 +157,7 @@ export const MemoizedTaskItem = memo(
   }) {
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
-        <div className='relative flex size-[16px] flex-shrink-0 items-center justify-center'>
-          <Blimp className='size-[14px] text-[var(--text-icon)]' />
-        </div>
-        <span className='truncate font-base text-[var(--text-body)]'>{name}</span>
+        <span className='truncate text-[var(--text-body)]'>{name}</span>
       </Command.Item>
     )
   },
@@ -182,7 +178,7 @@ export const MemoizedWorkspaceItem = memo(
   }) {
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
-        <span className='flex min-w-0 font-base text-[var(--text-body)]'>
+        <span className='flex min-w-0 text-[var(--text-body)]'>
           <span className='truncate'>{name}</span>
           {isCurrent && <span className='flex-shrink-0 whitespace-pre'> (current)</span>}
         </span>
@@ -209,12 +205,10 @@ export const MemoizedPageItem = memo(
   }) {
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
-        <div className='relative flex size-[16px] flex-shrink-0 items-center justify-center'>
-          <Icon className='size-[14px] text-[var(--text-icon)]' />
-        </div>
-        <span className='truncate font-base text-[var(--text-body)]'>{name}</span>
+        <Icon className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+        <span className='truncate text-[var(--text-body)]'>{name}</span>
         {shortcut && (
-          <span className='ml-auto flex-shrink-0 font-base text-[var(--text-subtle)] text-small'>
+          <span className='ml-auto flex-shrink-0 text-[var(--text-subtle)] text-small'>
             {shortcut}
           </span>
         )}
@@ -242,10 +236,8 @@ export const MemoizedIconItem = memo(
   }) {
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
-        <div className='relative flex size-[16px] flex-shrink-0 items-center justify-center'>
-          <Icon className='size-[14px] text-[var(--text-icon)]' />
-        </div>
-        <span className='truncate font-base text-[var(--text-body)]'>{name}</span>
+        <Icon className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+        <span className='truncate text-[var(--text-body)]'>{name}</span>
       </Command.Item>
     )
   },
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
index 1808418c608..5cacb2e2627 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
@@ -6,11 +6,24 @@ import { useParams, useRouter } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { createPortal } from 'react-dom'
 import { Library } from '@/components/emcn'
-import { Calendar, Database, File, HelpCircle, Settings, Table } from '@/components/emcn/icons'
+import {
+  Calendar,
+  Database,
+  File,
+  HelpCircle,
+  Home,
+  Integration,
+  Settings,
+  Table,
+} from '@/components/emcn/icons'
 import { Search } from '@/components/emcn/icons/search'
 import { cn } from '@/lib/core/utils/cn'
 import { captureEvent } from '@/lib/posthog/client'
 import { hasTriggerCapability } from '@/lib/workflows/triggers/trigger-utils'
+import {
+  CMDK_ITEM_GAP_CLASS,
+  CMDK_SECTION_GAP_CLASS,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import { SIDEBAR_SCROLL_EVENT } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
@@ -44,24 +57,17 @@ import type {
 } from './utils'
 import { filterAndSort } from './utils'
 
-const EMPTY_WORKFLOWS: WorkflowItem[] = []
-const EMPTY_WORKSPACES: WorkspaceItem[] = []
-const EMPTY_TASKS: TaskItem[] = []
-const EMPTY_TABLES: TaskItem[] = []
-const EMPTY_FILES: FileItem[] = []
-const EMPTY_KNOWLEDGE_BASES: TaskItem[] = []
-
 export type { SearchModalProps } from './utils'
 
 export function SearchModal({
   open,
   onOpenChange,
-  workflows = EMPTY_WORKFLOWS,
-  workspaces = EMPTY_WORKSPACES,
-  tasks = EMPTY_TASKS,
-  tables = EMPTY_TABLES,
-  files = EMPTY_FILES,
-  knowledgeBases = EMPTY_KNOWLEDGE_BASES,
+  workflows = [],
+  workspaces = [],
+  tasks = [],
+  tables = [],
+  files = [],
+  knowledgeBases = [],
   isOnWorkflowPage = false,
 }: SearchModalProps) {
   const params = useParams()
@@ -95,6 +101,19 @@ export function SearchModal({
   const pages = useMemo(
     (): PageItem[] =>
       [
+        {
+          id: 'home',
+          name: 'Home',
+          icon: Home,
+          href: `/workspace/${workspaceId}/home`,
+        },
+        {
+          id: 'integrations',
+          name: 'Integrations',
+          icon: Integration,
+          href: `/workspace/${workspaceId}/integrations`,
+          hidden: permissionConfig.hideIntegrationsTab,
+        },
         {
           id: 'tables',
           name: 'Tables',
@@ -149,6 +168,7 @@ export function SearchModal({
       permissionConfig.hideKnowledgeBaseTab,
       permissionConfig.hideTablesTab,
       permissionConfig.hideFilesTab,
+      permissionConfig.hideIntegrationsTab,
     ]
   )
 
@@ -444,7 +464,6 @@ export function SearchModal({
   return createPortal(
     <>
       <div
-        role='presentation'
         className={cn(
           'fixed inset-0 z-40 transition-opacity duration-100',
           open ? 'opacity-100' : 'pointer-events-none opacity-0'
@@ -459,7 +478,7 @@ export function SearchModal({
         aria-hidden={!open}
         aria-label='Search'
         className={cn(
-          '-translate-x-1/2 fixed top-[15%] z-50 w-[500px] rounded-xl border-[4px] border-black/[0.06] bg-[var(--bg)] shadow-[0_24px_80px_-16px_rgba(0,0,0,0.15)] dark:border-white/[0.06] dark:shadow-[0_24px_80px_-16px_rgba(0,0,0,0.4)]',
+          '-translate-x-1/2 fixed top-[15%] z-50 w-[500px] rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-[var(--shadow-overlay)] dark:bg-[var(--surface-5)]',
           open ? 'visible opacity-100' : 'invisible opacity-0'
         )}
         style={{
@@ -468,35 +487,44 @@ export function SearchModal({
             : 'calc(var(--sidebar-width) / 2 + 50%)',
         }}
       >
-        <Command label='Search' shouldFilter={false}>
-          <div className='mx-2 mt-2 mb-1 flex items-center gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
-            <Search className='size-[14px] flex-shrink-0 text-[var(--text-muted)]' />
-            <Command.Input
-              ref={inputRef}
-              onValueChange={handleSearchChange}
-              placeholder='Search anything...'
-              className='w-full bg-transparent py-1.5 font-base text-[var(--text-primary)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
-            />
-          </div>
-          <Command.List className='scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent max-h-[400px] overflow-y-auto overflow-x-hidden p-2 [&_[cmdk-group]+[cmdk-group]]:mt-2.5'>
-            <Command.Empty className='flex items-center justify-center px-4 py-6 text-[var(--text-subtle)] text-sm'>
-              No results found.
-            </Command.Empty>
-
-            <BlocksGroup items={filteredBlocks} onSelect={handleBlockSelectAsBlock} />
-            <ToolsGroup items={filteredTools} onSelect={handleBlockSelectAsTool} />
-            <TriggersGroup items={filteredTriggers} onSelect={handleBlockSelectAsTrigger} />
-            <WorkflowsGroup items={filteredWorkflows} onSelect={handleWorkflowSelect} />
-            <TasksGroup items={filteredTasks} onSelect={handleTaskSelect} />
-            <TablesGroup items={filteredTables} onSelect={handleTableSelect} />
-            <FilesGroup items={filteredFiles} onSelect={handleFileSelect} />
-            <KnowledgeBasesGroup items={filteredKnowledgeBases} onSelect={handleKbSelect} />
-            <ToolOpsGroup items={filteredToolOps} onSelect={handleToolOperationSelect} />
-            <WorkspacesGroup items={filteredWorkspaces} onSelect={handleWorkspaceSelect} />
-            <DocsGroup items={filteredDocs} onSelect={handleDocSelect} />
-            <PagesGroup items={filteredPages} onSelect={handlePageSelect} />
-          </Command.List>
-        </Command>
+        <div className='overflow-hidden rounded-lg border border-[var(--border-1)] bg-[var(--bg)]'>
+          <Command label='Search' shouldFilter={false}>
+            <div className='mx-2 mt-2 flex h-[30px] items-center gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
+              <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-muted)]' />
+              <Command.Input
+                ref={inputRef}
+                autoFocus
+                onValueChange={handleSearchChange}
+                placeholder='Search anything...'
+                className='h-full w-full bg-transparent text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
+              />
+            </div>
+            <Command.List
+              className={cn(
+                'scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent max-h-[400px] overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [&_[cmdk-group-items]]:flex [&_[cmdk-group-items]]:flex-col',
+                CMDK_ITEM_GAP_CLASS,
+                CMDK_SECTION_GAP_CLASS
+              )}
+            >
+              <Command.Empty className='flex items-center justify-center px-4 py-6 text-[var(--text-subtle)] text-sm'>
+                No results found.
+              </Command.Empty>
+
+              <BlocksGroup items={filteredBlocks} onSelect={handleBlockSelectAsBlock} />
+              <ToolsGroup items={filteredTools} onSelect={handleBlockSelectAsTool} />
+              <TriggersGroup items={filteredTriggers} onSelect={handleBlockSelectAsTrigger} />
+              <TasksGroup items={filteredTasks} onSelect={handleTaskSelect} />
+              <WorkflowsGroup items={filteredWorkflows} onSelect={handleWorkflowSelect} />
+              <TablesGroup items={filteredTables} onSelect={handleTableSelect} />
+              <FilesGroup items={filteredFiles} onSelect={handleFileSelect} />
+              <KnowledgeBasesGroup items={filteredKnowledgeBases} onSelect={handleKbSelect} />
+              <ToolOpsGroup items={filteredToolOps} onSelect={handleToolOperationSelect} />
+              <WorkspacesGroup items={filteredWorkspaces} onSelect={handleWorkspaceSelect} />
+              <DocsGroup items={filteredDocs} onSelect={handleDocSelect} />
+              <PagesGroup items={filteredPages} onSelect={handlePageSelect} />
+            </Command.List>
+          </Command>
+        </div>
       </div>
     </>,
     document.body
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts
index 9318ad434cd..854ea7fde72 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts
@@ -61,12 +61,12 @@ export interface CommandItemProps {
 }
 
 export const GROUP_HEADING_CLASSNAME =
-  '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-0.5 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:font-base [&_[cmdk-group-heading]]:text-[12px] [&_[cmdk-group-heading]]:text-[var(--text-icon)]'
+  '[&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:h-[18px] [&_[cmdk-group-heading]]:items-center [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:mb-2 [&_[cmdk-group-heading]]:text-small [&_[cmdk-group-heading]]:text-[var(--text-muted)]'
 
 export const COMMAND_ITEM_CLASSNAME =
-  'group flex h-[30px] w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 text-left text-sm aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
+  'group mx-0.5 flex h-[30px] w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 text-left text-sm aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-active)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50'
 
-export function scoreMatch(value: string, search: string): number {
+function scoreMatch(value: string, search: string): number {
   if (!search) return 1
   const valueLower = value.toLowerCase()
   const searchLower = search.toLowerCase()
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
index f3fc89df15f..1ae7c1292ab 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { useParams, usePathname, useRouter } from 'next/navigation'
 import {
@@ -12,7 +12,6 @@ import {
   ModalDescription,
   ModalFooter,
   ModalHeader,
-  Skeleton,
 } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionAccessState } from '@/lib/billing/client'
@@ -25,6 +24,10 @@ import {
   isBillingEnabled,
   sectionConfig,
 } from '@/app/workspace/[workspaceId]/settings/navigation'
+import {
+  SIDEBAR_ITEM_GAP_CLASS,
+  SIDEBAR_SECTION_GAP_CLASS,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import { SidebarTooltip } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
 import { useSSOProviders } from '@/ee/sso/hooks/sso'
 import { prefetchWorkspaceCredentials } from '@/hooks/queries/credentials'
@@ -35,24 +38,6 @@ import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
 import { useSettingsDirtyStore } from '@/stores/settings/dirty/store'
 
-const SKELETON_SECTIONS = sectionConfig
-  .map(({ key }) =>
-    Math.min(
-      allNavigationItems.filter(
-        (item) =>
-          item.section === key &&
-          !(item.hideWhenBillingDisabled && !isBillingEnabled) &&
-          !item.requiresTeam &&
-          !item.requiresEnterprise &&
-          !item.requiresSuperUser &&
-          !item.requiresAdminRole &&
-          item.id !== 'template-profile'
-      ).length,
-      3
-    )
-  )
-  .filter((count) => count > 0)
-
 interface SettingsSidebarProps {
   isCollapsed?: boolean
   showCollapsedTooltips?: boolean
@@ -62,6 +47,9 @@ export function SettingsSidebar({
   isCollapsed = false,
   showCollapsedTooltips = false,
 }: SettingsSidebarProps) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const scrollContentRef = useRef<HTMLDivElement>(null)
+
   const params = useParams()
   const workspaceId = params.workspaceId as string
   const pathname = usePathname()
@@ -73,12 +61,14 @@ export function SettingsSidebar({
   const confirmNavigation = useSettingsDirtyStore((s) => s.confirmNavigation)
   const cancelNavigation = useSettingsDirtyStore((s) => s.cancelNavigation)
   const isDirty = useSettingsDirtyStore((s) => s.isDirty)
+
   const [showDiscardDialog, setShowDiscardDialog] = useState(false)
+  const [hasOverflowTop, setHasOverflowTop] = useState(false)
 
-  const { data: session, isPending: sessionLoading } = useSession()
-  const { data: organizationsData, isLoading: orgsLoading } = useOrganizations()
+  const { data: session } = useSession()
+  const { data: organizationsData } = useOrganizations()
   const { data: generalSettings } = useGeneralSettings()
-  const { data: subscriptionData, isLoading: subscriptionLoading } = useSubscriptionData({
+  const { data: subscriptionData } = useSubscriptionData({
     enabled: isBillingEnabled,
     staleTime: 5 * 60 * 1000,
   })
@@ -87,7 +77,7 @@ export function SettingsSidebar({
   })
 
   const activeOrganization = organizationsData?.activeOrganization
-  const { config: permissionConfig, isLoading: permissionLoading } = usePermissionConfig()
+  const { config: permissionConfig } = usePermissionConfig()
 
   const userEmail = session?.user?.email
   const userId = session?.user?.id
@@ -117,9 +107,6 @@ export function SettingsSidebar({
       if (item.id === 'template-profile') {
         return false
       }
-      if (item.id === 'integrations' && permissionConfig.hideIntegrationsTab) {
-        return false
-      }
       if (item.id === 'secrets' && permissionConfig.hideSecretsTab) {
         return false
       }
@@ -135,9 +122,6 @@ export function SettingsSidebar({
       if (item.id === 'custom-tools' && permissionConfig.disableCustomTools) {
         return false
       }
-      if (item.id === 'skills' && permissionConfig.disableSkills) {
-        return false
-      }
 
       if (item.selfHostedOverride && !isHosted) {
         if (item.id === 'sso') {
@@ -207,10 +191,6 @@ export function SettingsSidebar({
           prefetchGeneralSettings(queryClient)
           void import('@/app/workspace/[workspaceId]/settings/components/general/general')
           break
-        case 'integrations':
-          prefetchWorkspaceCredentials(queryClient, workspaceId)
-          void import('@/app/workspace/[workspaceId]/settings/components/integrations/integrations')
-          break
         case 'secrets':
           prefetchWorkspaceCredentials(queryClient, workspaceId)
           void import('@/app/workspace/[workspaceId]/settings/components/secrets/secrets')
@@ -249,127 +229,146 @@ export function SettingsSidebar({
     setShowDiscardDialog(false)
   }, [cancelNavigation])
 
+  useEffect(() => {
+    const container = scrollContainerRef.current
+    if (!container) return
+
+    const updateScrollState = () => {
+      setHasOverflowTop(container.scrollTop > 1)
+    }
+
+    updateScrollState()
+    container.addEventListener('scroll', updateScrollState, { passive: true })
+    const observer = new ResizeObserver(updateScrollState)
+    observer.observe(container)
+    if (scrollContentRef.current) {
+      observer.observe(scrollContentRef.current)
+    }
+
+    return () => {
+      container.removeEventListener('scroll', updateScrollState)
+      observer.disconnect()
+    }
+  }, [isCollapsed])
+
   return (
     <>
       {/* Back button */}
-      <div className='mt-2.5 flex flex-shrink-0 flex-col gap-0.5 px-2'>
+      <div
+        className={cn(
+          SIDEBAR_SECTION_GAP_CLASS,
+          SIDEBAR_ITEM_GAP_CLASS,
+          'flex flex-shrink-0 flex-col px-2 pb-1.5'
+        )}
+      >
         <SidebarTooltip label='Back' enabled={showCollapsedTooltips}>
           <button
             type='button'
             onClick={handleBack}
-            className='group mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-sm hover-hover:bg-[var(--surface-hover)]'
+            className='group mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-sm hover-hover:bg-[var(--surface-active)]'
           >
-            <div className='flex size-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]'>
-              <ChevronDown className='size-[10px] rotate-90' />
+            <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]'>
+              <ChevronDown className='h-[10px] w-[10px] rotate-90' />
             </div>
-            <span className='truncate font-base text-[var(--text-body)]'>Back</span>
+            <span className='sidebar-collapse-hide truncate text-[var(--text-body)]'>Back</span>
           </button>
         </SidebarTooltip>
       </div>
 
       {/* Settings sections */}
       <div
+        ref={isCollapsed ? undefined : scrollContainerRef}
         className={cn(
-          'mt-3.5 flex flex-1 flex-col gap-3.5 pb-2',
-          !isCollapsed && 'overflow-y-auto overflow-x-hidden'
+          'flex flex-1 flex-col overflow-y-auto overflow-x-hidden border-t pt-1.5 transition-colors duration-150',
+          !hasOverflowTop && 'border-transparent'
         )}
       >
-        {sessionLoading ||
-        orgsLoading ||
-        (isBillingEnabled && subscriptionLoading) ||
-        permissionLoading ||
-        (!isHosted && isLoadingSSO)
-          ? SKELETON_SECTIONS.map((count, i) => (
-              <div key={i} className='flex flex-shrink-0 flex-col'>
-                <div className='sidebar-collapse-hide px-4 pb-1.5'>
-                  <Skeleton className='h-[14px] w-[64px] rounded-sm' />
+        <div ref={scrollContentRef} className='flex flex-col'>
+          {sectionConfig
+            .map(({ key, title }) => ({
+              key,
+              title,
+              items: navigationItems.filter((item) => item.section === key),
+            }))
+            .filter(({ items }) => items.length > 0)
+            .map(({ key, title, items: sectionItems }, index) => (
+              <div
+                key={key}
+                className={cn(
+                  index > 0 && SIDEBAR_SECTION_GAP_CLASS,
+                  'flex flex-shrink-0 flex-col'
+                )}
+              >
+                <div className='px-4 pb-2'>
+                  <div className='text-[var(--text-muted)] text-small'>{title}</div>
                 </div>
-                <div className='flex flex-col gap-0.5 px-2'>
-                  {Array.from({ length: count }, (_, j) => (
-                    <div key={j} className='mx-0.5 flex h-[30px] items-center gap-2 px-2'>
-                      <Skeleton className='size-[16px] flex-shrink-0 rounded-sm' />
-                      <Skeleton className='sidebar-collapse-hide h-[14px] w-full rounded-sm' />
-                    </div>
-                  ))}
-                </div>
-              </div>
-            ))
-          : sectionConfig.map(({ key, title }) => {
-              const sectionItems = navigationItems.filter((item) => item.section === key)
-              if (sectionItems.length === 0) return null
-
-              return (
-                <div key={key} className='flex flex-shrink-0 flex-col'>
-                  <div className='px-4 pb-1.5'>
-                    <div className='font-base text-[var(--text-icon)] text-small'>{title}</div>
-                  </div>
-                  <div className='flex flex-col gap-0.5 px-2'>
-                    {sectionItems.map((item) => {
-                      const Icon = item.icon
-                      const active = activeSection === item.id
-                      const isLocked = item.requiresMax && !subscriptionAccess.hasUsableMaxAccess
-                      const itemClassName = cn(
-                        'group mx-0.5 flex h-[30px] items-center gap-2 rounded-[8px] px-2 text-[14px]',
-                        !active && 'hover-hover:bg-[var(--surface-hover)]',
-                        active && 'bg-[var(--surface-active)]'
-                      )
-                      const content = (
-                        <>
-                          <Icon className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-                          <span className='min-w-0 truncate font-base text-[var(--text-body)]'>
-                            {item.label}
+                <div className={cn(SIDEBAR_ITEM_GAP_CLASS, 'flex flex-col px-2')}>
+                  {sectionItems.map((item) => {
+                    const Icon = item.icon
+                    const active = activeSection === item.id
+                    const isLocked = item.requiresMax && !subscriptionAccess.hasUsableMaxAccess
+                    const itemClassName = cn(
+                      'group mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-sm',
+                      !active && 'hover-hover:bg-[var(--surface-active)]',
+                      active && 'bg-[var(--surface-active)]'
+                    )
+                    const content = (
+                      <>
+                        <Icon className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+                        <span className='sidebar-collapse-hide min-w-0 truncate text-[var(--text-body)]'>
+                          {item.label}
+                        </span>
+                        {isLocked && (
+                          <span className='sidebar-collapse-hide ml-auto shrink-0 rounded-[3px] bg-[var(--surface-5)] px-1 py-[1px] font-medium text-[9px] text-[var(--text-icon)] uppercase tracking-wide'>
+                            Max
                           </span>
-                          {isLocked && (
-                            <span className='ml-auto shrink-0 rounded-[3px] bg-[var(--surface-5)] px-1 py-[1px] font-medium text-[9px] text-[var(--text-icon)] uppercase tracking-wide'>
-                              Max
-                            </span>
-                          )}
-                        </>
-                      )
-
-                      const element = item.externalUrl ? (
-                        <a
-                          href={item.externalUrl}
-                          target='_blank'
-                          rel='noopener noreferrer'
-                          className={itemClassName}
-                        >
-                          {content}
-                        </a>
-                      ) : (
-                        <button
-                          type='button'
-                          className={itemClassName}
-                          onMouseEnter={() => handlePrefetch(item.id)}
-                          onFocus={() => handlePrefetch(item.id)}
-                          onClick={() => {
-                            const section = item.id as SettingsSection
-                            if (section === activeSection) return
-                            if (!requestNavigation(section)) {
-                              setShowDiscardDialog(true)
-                              return
-                            }
-                            router.replace(getSettingsHref({ section }), { scroll: false })
-                          }}
-                        >
-                          {content}
-                        </button>
-                      )
-
-                      return (
-                        <SidebarTooltip
-                          key={`${item.id}-${isCollapsed}`}
-                          label={item.label}
-                          enabled={showCollapsedTooltips}
-                        >
-                          {element}
-                        </SidebarTooltip>
-                      )
-                    })}
-                  </div>
+                        )}
+                      </>
+                    )
+
+                    const element = item.externalUrl ? (
+                      <a
+                        href={item.externalUrl}
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        className={itemClassName}
+                      >
+                        {content}
+                      </a>
+                    ) : (
+                      <button
+                        type='button'
+                        className={itemClassName}
+                        onMouseEnter={() => handlePrefetch(item.id)}
+                        onFocus={() => handlePrefetch(item.id)}
+                        onClick={() => {
+                          const section = item.id as SettingsSection
+                          if (section === activeSection) return
+                          if (!requestNavigation(section)) {
+                            setShowDiscardDialog(true)
+                            return
+                          }
+                          router.replace(getSettingsHref({ section }), { scroll: false })
+                        }}
+                      >
+                        {content}
+                      </button>
+                    )
+
+                    return (
+                      <SidebarTooltip
+                        key={item.id}
+                        label={item.label}
+                        enabled={showCollapsedTooltips}
+                      >
+                        {element}
+                      </SidebarTooltip>
+                    )
+                  })}
                 </div>
-              )
-            })}
+              </div>
+            ))}
+        </div>
       </div>
 
       <Modal open={showDiscardDialog} onOpenChange={(open) => !open && handleCancelDiscard()}>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx
index 84247435a9f..f6f0b4aeafe 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx
@@ -474,9 +474,7 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
     return (
       <div className='flex flex-shrink-0 flex-col border-t px-[13.5px] pt-2 pb-2.5'>
         <div className='flex h-[18px] items-center'>
-          <span className='font-base text-[var(--text-primary)] text-caption'>
-            {PLAN_NAMES[planType]}
-          </span>
+          <span className='text-[var(--text-primary)] text-caption'>{PLAN_NAMES[planType]}</span>
         </div>
       </div>
     )
@@ -499,7 +497,7 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
           <div className='flex min-w-0 flex-1 items-center gap-1.5'>
             {showPlanText && (
               <>
-                <span className='flex-shrink-0 font-base text-[var(--text-primary)] text-caption'>
+                <span className='flex-shrink-0 text-[var(--text-primary)] text-caption'>
                   {PLAN_NAMES[planType]}
                 </span>
                 <div className='h-[14px] w-[1.5px] flex-shrink-0 bg-[var(--divider)]' />
@@ -507,16 +505,14 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
             )}
             <div className='flex min-w-0 flex-1 items-center gap-1'>
               {statusText.isError ? (
-                <span className='font-base text-[var(--text-error)] text-caption'>
-                  {statusText.text}
-                </span>
+                <span className='text-[var(--text-error)] text-caption'>{statusText.text}</span>
               ) : (
                 <>
-                  <span className='font-base text-[var(--text-secondary)] text-caption tabular-nums'>
+                  <span className='text-[var(--text-secondary)] text-caption tabular-nums'>
                     {dollarsToCredits(usage.current).toLocaleString()}
                   </span>
-                  <span className='font-base text-[var(--text-secondary)] text-caption'>/</span>
-                  <span className='font-base text-[var(--text-secondary)] text-caption tabular-nums'>
+                  <span className='text-[var(--text-secondary)] text-caption'>/</span>
+                  <span className='text-[var(--text-secondary)] text-caption tabular-nums'>
                     {dollarsToCredits(usage.limit).toLocaleString()} credits
                   </span>
                 </>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
index 5c516adc01e..714ac35d8f9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
@@ -18,6 +18,7 @@ import {
   Duplicate,
   Eye,
   FolderPlus,
+  ImageUp,
   Lock,
   LogOut,
   Mail,
@@ -28,12 +29,11 @@ import {
   Trash,
   Unlock,
   Upload,
-  X,
 } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { WORKFLOW_COLORS } from '@/lib/workflows/colors'
 
-const GRID_COLUMNS = 6
+const GRID_ROWS = 6
 
 /**
  * Color grid with keyboard navigation support.
@@ -70,21 +70,25 @@ function ColorGrid({
       let newIndex = index
 
       switch (e.key) {
-        case 'ArrowRight':
+        case 'ArrowDown':
           e.preventDefault()
-          newIndex = index + 1 < totalItems ? index + 1 : index
+          if ((index + 1) % GRID_ROWS !== 0 && index + 1 < totalItems) {
+            newIndex = index + 1
+          }
           break
-        case 'ArrowLeft':
+        case 'ArrowUp':
           e.preventDefault()
-          newIndex = index - 1 >= 0 ? index - 1 : index
+          if (index % GRID_ROWS !== 0) {
+            newIndex = index - 1
+          }
           break
-        case 'ArrowDown':
+        case 'ArrowRight':
           e.preventDefault()
-          newIndex = index + GRID_COLUMNS < totalItems ? index + GRID_COLUMNS : index
+          newIndex = index + GRID_ROWS < totalItems ? index + GRID_ROWS : index
           break
-        case 'ArrowUp':
+        case 'ArrowLeft':
           e.preventDefault()
-          newIndex = index - GRID_COLUMNS >= 0 ? index - GRID_COLUMNS : index
+          newIndex = index - GRID_ROWS >= 0 ? index - GRID_ROWS : index
           break
         case 'Enter':
         case ' ':
@@ -106,7 +110,7 @@ function ColorGrid({
   )
 
   return (
-    <div className='grid grid-cols-6 gap-1' role='grid'>
+    <div className='grid grid-flow-col grid-rows-6 gap-1' role='grid'>
       {WORKFLOW_COLORS.map(({ color, name }, index) => (
         <button
           key={color}
@@ -273,11 +277,8 @@ interface ContextMenuProps {
   isLocked?: boolean
   showDelete?: boolean
   onUploadLogo?: () => void
-  onRemoveLogo?: () => void
   showUploadLogo?: boolean
-  showRemoveLogo?: boolean
   disableUploadLogo?: boolean
-  disableRemoveLogo?: boolean
 }
 
 /**
@@ -330,11 +331,8 @@ export function ContextMenu({
   isLocked = false,
   showDelete = true,
   onUploadLogo,
-  onRemoveLogo,
   showUploadLogo = false,
-  showRemoveLogo = false,
   disableUploadLogo = false,
-  disableRemoveLogo = false,
 }: ContextMenuProps) {
   const [hexInput, setHexInput] = useState(currentColor || '#ffffff')
 
@@ -392,8 +390,7 @@ export function ContextMenu({
     (showCreateFolder && onCreateFolder) ||
     (showColorChange && onColorChange) ||
     (showLock && onToggleLock) ||
-    (showUploadLogo && onUploadLogo) ||
-    (showRemoveLogo && onRemoveLogo)
+    (showUploadLogo && onUploadLogo)
   const hasCopySection = (showDuplicate && onDuplicate) || (showExport && onExport)
 
   return (
@@ -528,23 +525,10 @@ export function ContextMenu({
               onClose()
             }}
           >
-            <Upload />
+            <ImageUp />
             Upload logo
           </DropdownMenuItem>
         )}
-        {showRemoveLogo && onRemoveLogo && (
-          <DropdownMenuItem
-            disabled={disableRemoveLogo}
-            onSelect={() => {
-              onRemoveLogo()
-              onClose()
-            }}
-          >
-            <X />
-            Remove logo
-          </DropdownMenuItem>
-        )}
-
         {showLock && onToggleLock && (
           <DropdownMenuItem
             disabled={disableLock}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
index 6b81862db07..ec4bc8db24b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
@@ -50,7 +50,6 @@ const logger = createLogger('FolderItem')
 
 interface FolderItemProps {
   folder: FolderTreeNode
-  level: number
   dragDisabled?: boolean
   hoverHandlers?: {
     onDragEnter?: (e: React.DragEvent<HTMLElement>) => void
@@ -63,7 +62,6 @@ interface FolderItemProps {
 
 export function FolderItem({
   folder,
-  level,
   dragDisabled = false,
   hoverHandlers,
   onFolderClick,
@@ -494,7 +492,7 @@ export function FolderItem({
           !isSelected &&
             !isContextMenuOpen &&
             !isAnyDragActive &&
-            'hover-hover:bg-[var(--surface-hover)]',
+            'hover-hover:bg-[var(--surface-active)]',
           (isSelected || isContextMenuOpen) && 'bg-[var(--surface-active)]',
           (isDragging || (isAnyDragActive && isSelected)) && 'opacity-50'
         )}
@@ -531,7 +529,7 @@ export function FolderItem({
             onChange={(e) => setEditValue(e.target.value)}
             onKeyDown={handleRenameKeyDown}
             onBlur={handleInputBlur}
-            className='min-w-0 flex-1 border-0 bg-transparent p-0 font-base text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+            className='min-w-0 flex-1 border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
             maxLength={50}
             disabled={isRenaming}
             onClick={(e) => {
@@ -547,7 +545,7 @@ export function FolderItem({
           <div className='flex min-w-0 flex-1 items-center gap-2'>
             <div className='flex min-w-0 flex-1 items-center gap-1'>
               <span
-                className='min-w-0 truncate font-base text-[var(--text-body)]'
+                className='min-w-0 truncate text-[var(--text-body)]'
                 onDoubleClick={handleDoubleClick}
               >
                 {folder.name}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
index 1d8eb73f856..a3305f21c6d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
@@ -45,7 +45,6 @@ import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
 interface WorkflowItemProps {
   workflow: WorkflowMetadata
   active: boolean
-  level: number
   dragDisabled?: boolean
   onWorkflowClick: (workflowId: string, shiftKey: boolean) => void
   onDragStart?: () => void
@@ -62,7 +61,6 @@ interface WorkflowItemProps {
 export function WorkflowItem({
   workflow,
   active,
-  level,
   dragDisabled = false,
   onWorkflowClick,
   onDragStart: onDragStartProp,
@@ -422,7 +420,7 @@ export function WorkflowItem({
             !isContextMenuOpen &&
             !(isSelected && selectedWorkflows.size > 1) &&
             !isAnyDragActive &&
-            'hover-hover:bg-[var(--surface-hover)]',
+            'hover-hover:bg-[var(--surface-active)]',
           (isDragging || (isAnyDragActive && isSelected)) && 'opacity-50'
         )}
         draggable={!isEditing && !dragDisabled && !effectiveLocked}
@@ -448,7 +446,7 @@ export function WorkflowItem({
                 onChange={(e) => setEditValue(e.target.value)}
                 onKeyDown={handleKeyDown}
                 onBlur={handleInputBlur}
-                className='w-full min-w-0 border-0 bg-transparent p-0 font-base text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+                className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
                 maxLength={100}
                 disabled={isRenaming}
                 onClick={(e) => {
@@ -462,7 +460,7 @@ export function WorkflowItem({
               />
             ) : (
               <div
-                className='min-w-0 truncate font-base text-[var(--text-body)]'
+                className='min-w-0 truncate text-[var(--text-body)]'
                 onDoubleClick={handleDoubleClick}
               >
                 {workflow.name}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
index 58912bb8305..0c0e112e764 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
@@ -380,7 +380,6 @@ export const WorkflowList = memo(function WorkflowList({
             <WorkflowItem
               workflow={workflow}
               active={isWorkflowActive(workflow.id)}
-              level={level}
               dragDisabled={dragDisabled}
               onWorkflowClick={handleWorkflowClick}
               onDragStart={() => handleDragStart(folderId)}
@@ -460,7 +459,6 @@ export const WorkflowList = memo(function WorkflowList({
           >
             <FolderItem
               folder={folder}
-              level={level}
               dragDisabled={dragDisabled}
               onFolderClick={handleFolderClick}
               onDragStart={() => handleDragStart(parentFolderId)}
@@ -573,6 +571,7 @@ export const WorkflowList = memo(function WorkflowList({
         aria-label='Workflows'
         className='flex min-h-full flex-col pb-2'
         onClick={handleContainerClick}
+        onContextMenu={handleContainerContextMenu}
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
             if (e.target !== e.currentTarget) return
@@ -580,7 +579,6 @@ export const WorkflowList = memo(function WorkflowList({
             workflowId ? selectOnly(workflowId) : clearAllSelection()
           }
         }}
-        onContextMenu={handleContainerContextMenu}
         data-empty-area
       >
         <div
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
index 6fafb59682e..7a598dc9032 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
@@ -1,18 +1,15 @@
 'use client'
 
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { memo, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { MoreHorizontal, Search } from 'lucide-react'
-import { useRouter } from 'next/navigation'
+import { MoreHorizontal } from 'lucide-react'
 import {
   Button,
   ChevronDown,
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuGroup,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  Input,
   Modal,
   ModalBody,
   ModalContent,
@@ -20,27 +17,20 @@ import {
   ModalFooter,
   ModalHeader,
   Plus,
+  Send,
   Skeleton,
-  UserPlus,
 } from '@/components/emcn'
-import { getDisplayPlanName, isFree } from '@/lib/billing/plan-helpers'
-import { isBillingEnabled } from '@/lib/core/config/feature-flags'
+import { PanelLeft } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
-import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
 import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal'
 import { CreateWorkspaceModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/create-workspace-modal/create-workspace-modal'
 import { InviteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal'
-import { useSubscriptionData } from '@/hooks/queries/subscription'
 import type { Workspace, WorkspaceCreationPolicy } from '@/hooks/queries/workspace'
-import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
 
 const logger = createLogger('WorkspaceHeader')
 
-/** Minimum workspace count before the search input and keyboard navigation are shown. */
-const WORKSPACE_SEARCH_THRESHOLD = 3
-
 interface WorkspaceHeaderProps {
   /** The active workspace object */
   activeWorkspace?: { name: string } | null
@@ -71,17 +61,17 @@ interface WorkspaceHeaderProps {
   /** Callback to change the workspace color */
   onColorChange?: (workspaceId: string, color: string) => Promise<void>
   /** Callback to upload a workspace logo */
-  onUploadLogo?: (workspaceId: string) => void
-  /** Callback to remove the workspace logo */
-  onRemoveLogo?: (workspaceId: string) => Promise<void>
+  onUploadLogo: (workspaceId: string) => void
   /** Callback to leave the workspace */
-  onLeaveWorkspace?: (workspaceId: string) => Promise<void>
+  onLeaveWorkspace: (workspaceId: string) => Promise<void>
   /** Whether workspace leave is in progress */
   isLeavingWorkspace: boolean
   /** Current user's session ID for owner check */
   sessionUserId?: string
   /** Whether the sidebar is collapsed */
   isCollapsed?: boolean
+  /** Callback to expand the sidebar from collapsed state */
+  onExpandSidebar?: () => void
 }
 
 /**
@@ -103,13 +93,12 @@ function WorkspaceHeaderImpl({
   isDeletingWorkspace,
   onColorChange,
   onUploadLogo,
-  onRemoveLogo,
   onLeaveWorkspace,
   isLeavingWorkspace,
   sessionUserId,
   isCollapsed = false,
+  onExpandSidebar,
 }: WorkspaceHeaderProps) {
-  const router = useRouter()
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
   const [isInviteModalOpen, setIsInviteModalOpen] = useState(false)
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
@@ -119,22 +108,6 @@ function WorkspaceHeaderImpl({
   const [editingWorkspaceId, setEditingWorkspaceId] = useState<string | null>(null)
   const [editingName, setEditingName] = useState('')
   const [isListRenaming, setIsListRenaming] = useState(false)
-  const [workspaceSearch, setWorkspaceSearch] = useState('')
-  const [highlightedIndex, setHighlightedIndex] = useState(0)
-  const searchInputRef = useRef<HTMLInputElement>(null)
-  const workspaceListRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const row = workspaceListRef.current?.querySelector<HTMLElement>(
-      `[data-workspace-row-idx="${highlightedIndex}"]`
-    )
-    row?.scrollIntoView({ block: 'nearest' })
-  }, [highlightedIndex])
-
-  const searchQuery = workspaceSearch.trim().toLowerCase()
-  const filteredWorkspaces = searchQuery
-    ? workspaces.filter((w) => w.name.toLowerCase().includes(searchQuery))
-    : workspaces
 
   const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
@@ -151,46 +124,27 @@ function WorkspaceHeaderImpl({
     setIsMounted(true)
   }, [])
 
-  const { isInvitationsDisabled } = usePermissionConfig()
-  const { data: subscriptionResponse } = useSubscriptionData({ enabled: isBillingEnabled })
   const { navigateToSettings } = useSettingsNavigation()
-  const currentPlan = subscriptionResponse?.data?.plan
-  const showPlanInfo = isBillingEnabled && typeof currentPlan !== 'undefined'
-  const rawPlanName = showPlanInfo ? getDisplayPlanName(currentPlan) : ''
-  const planDisplayName = showPlanInfo
-    ? rawPlanName.includes('for Teams')
-      ? rawPlanName
-      : `${rawPlanName} Plan`
-    : ''
-  const isFreePlan = showPlanInfo && isFree(currentPlan)
+
   const activeWorkspaceFull = workspaces.find((w) => w.id === workspaceId) || null
+  const isWorkspaceReady = !isWorkspacesLoading && activeWorkspaceFull !== null
   const canCreateWorkspace = workspaceCreationPolicy?.canCreate ?? true
   const createWorkspaceDisabledReason =
     workspaceCreationPolicy?.canCreate === false ? workspaceCreationPolicy.reason : null
-  const inviteMembersEnabled = activeWorkspaceFull?.inviteMembersEnabled ?? false
-  const inviteUpgradeRequired = activeWorkspaceFull?.inviteUpgradeRequired ?? false
-  const inviteDisabledReason = inviteMembersEnabled
-    ? null
-    : (activeWorkspaceFull?.inviteDisabledReason ?? null)
-  const inviteButtonDisabled = !inviteMembersEnabled && !inviteUpgradeRequired
-
-  const handleInviteClick = useCallback(() => {
-    if (isInvitationsDisabled) return
-    if (!inviteMembersEnabled && inviteUpgradeRequired && workspaceId) {
-      router.push(`/workspace/${workspaceId}/settings/subscription`)
-      return
-    }
-    if (!inviteMembersEnabled) return
-    setIsInviteModalOpen(true)
-  }, [isInvitationsDisabled, inviteMembersEnabled, inviteUpgradeRequired, workspaceId, router])
+  const inviteDisabledReason = activeWorkspaceFull?.inviteDisabledReason ?? null
+  const isInvitationsDisabled = inviteDisabledReason !== null
 
   useEffect(() => {
     const handleOpenInvite = () => {
-      handleInviteClick()
+      if (isInvitationsDisabled) {
+        navigateToSettings({ section: 'subscription' })
+        return
+      }
+      setIsInviteModalOpen(true)
     }
     window.addEventListener('open-invite-modal', handleOpenInvite)
     return () => window.removeEventListener('open-invite-modal', handleOpenInvite)
-  }, [handleInviteClick])
+  }, [isInvitationsDisabled, navigateToSettings])
 
   /**
    * Save and exit edit mode when popover closes
@@ -205,14 +159,6 @@ function WorkspaceHeaderImpl({
     }
   }, [isWorkspaceMenuOpen, editingWorkspaceId, editingName, workspaces, onRenameWorkspace])
 
-  useEffect(() => {
-    if (isWorkspaceMenuOpen) {
-      setHighlightedIndex(0)
-      const id = requestAnimationFrame(() => searchInputRef.current?.focus())
-      return () => cancelAnimationFrame(id)
-    }
-    setWorkspaceSearch('')
-  }, [isWorkspaceMenuOpen])
   const workspaceInitial = (() => {
     const name = activeWorkspace?.name || ''
     const stripped = name.replace(/workspace/gi, '').trim()
@@ -303,29 +249,16 @@ function WorkspaceHeaderImpl({
     }
   }
 
-  /**
-   * Handles color change action from context menu
-   */
-  const handleColorChangeAction = async (color: string) => {
-    if (!capturedWorkspaceRef.current || !onColorChange) return
-    await onColorChange(capturedWorkspaceRef.current.id, color)
-  }
-
   const handleUploadLogoAction = () => {
-    if (!capturedWorkspaceRef.current || !onUploadLogo) return
+    if (!capturedWorkspaceRef.current) return
     onUploadLogo(capturedWorkspaceRef.current.id)
   }
 
-  const handleRemoveLogoAction = async () => {
-    if (!capturedWorkspaceRef.current || !onRemoveLogo) return
-    await onRemoveLogo(capturedWorkspaceRef.current.id)
-  }
-
   /**
    * Handle leave workspace after confirmation
    */
   const handleLeaveWorkspace = async () => {
-    if (!leaveTarget || !onLeaveWorkspace) return
+    if (!leaveTarget) return
 
     try {
       await onLeaveWorkspace(leaveTarget.id)
@@ -351,389 +284,347 @@ function WorkspaceHeaderImpl({
   }
 
   return (
-    <div className='min-w-0'>
-      {/* Workspace Name with Switcher */}
-      <div className='min-w-0'>
-        {isMounted ? (
-          <DropdownMenu
-            open={isWorkspaceMenuOpen}
-            onOpenChange={(open) => {
-              if (
-                !open &&
-                (isContextMenuOpen || isContextMenuOpeningRef.current || editingWorkspaceId)
-              ) {
-                return
-              }
-              setIsWorkspaceMenuOpen(open)
-            }}
-          >
-            <DropdownMenuTrigger asChild>
-              <button
-                type='button'
-                aria-label='Switch workspace'
-                className={cn(
-                  'group flex h-[32px] min-w-0 items-center rounded-lg border border-[var(--border)] bg-[var(--surface-2)] pl-[5px] transition-colors hover-hover:bg-[var(--surface-5)]',
-                  isCollapsed ? 'w-[32px]' : 'w-full cursor-pointer gap-2 pr-2'
-                )}
-                title={activeWorkspace?.name || 'Loading...'}
-                onContextMenu={(e) => {
-                  if (activeWorkspaceFull) {
-                    handleContextMenu(e, activeWorkspaceFull)
-                  }
-                }}
-              >
-                {activeWorkspaceFull ? (
-                  activeWorkspaceFull.logoUrl ? (
-                    <img
-                      src={activeWorkspaceFull.logoUrl}
-                      alt={activeWorkspaceFull.name || 'Workspace logo'}
-                      className='size-[20px] flex-shrink-0 rounded-sm object-cover'
-                    />
-                  ) : (
-                    <div
-                      className='flex size-[20px] flex-shrink-0 items-center justify-center rounded-sm font-medium text-caption text-white leading-none'
-                      style={{
-                        backgroundColor: activeWorkspaceFull.color ?? 'var(--brand-accent)',
-                      }}
-                    >
-                      {workspaceInitial}
-                    </div>
-                  )
+    <div className='min-w-0 flex-1'>
+      {isMounted && isCollapsed ? (
+        <button
+          type='button'
+          aria-label='Expand sidebar'
+          onClick={onExpandSidebar}
+          className='group mx-0.5 flex h-[30px] cursor-pointer items-center rounded-lg px-2 transition-colors hover-hover:bg-[var(--surface-active)]'
+        >
+          <div className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
+            {!activeWorkspaceFull ? (
+              <Skeleton className='h-[16px] w-[16px] rounded-sm' />
+            ) : (
+              <>
+                {activeWorkspaceFull.logoUrl ? (
+                  <img
+                    src={activeWorkspaceFull.logoUrl}
+                    alt={activeWorkspaceFull.name || 'Workspace logo'}
+                    className='h-[16px] w-[16px] rounded-sm object-cover group-hover:invisible'
+                  />
                 ) : (
-                  <Skeleton className='size-[20px] flex-shrink-0 rounded-sm' />
-                )}
-                {!isCollapsed && (
-                  <>
-                    <span className='min-w-0 flex-1 truncate text-left font-base text-[var(--text-primary)] text-sm'>
-                      {activeWorkspace?.name || 'Loading...'}
-                    </span>
-                    <ChevronDown className='sidebar-collapse-hide h-[8px] w-[10px] flex-shrink-0 text-[var(--text-muted)] group-hover:text-[var(--text-secondary)]' />
-                  </>
+                  <div
+                    className='flex h-[16px] w-[16px] items-center justify-center rounded-sm font-medium text-[9px] text-white leading-none group-hover:invisible'
+                    style={{
+                      backgroundColor: activeWorkspaceFull.color ?? 'var(--brand-accent)',
+                    }}
+                  >
+                    {workspaceInitial}
+                  </div>
                 )}
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              align='start'
-              side={isCollapsed ? 'right' : 'bottom'}
-              sideOffset={isCollapsed ? 16 : 8}
-              className='flex max-h-none flex-col overflow-hidden'
-              style={
-                isCollapsed
-                  ? {
-                      width: '248px',
-                      maxWidth: 'calc(100vw - 24px)',
-                    }
-                  : {
-                      width: 'var(--radix-dropdown-menu-trigger-width)',
-                      minWidth: 'var(--radix-dropdown-menu-trigger-width)',
-                      maxWidth: 'var(--radix-dropdown-menu-trigger-width)',
-                    }
-              }
-              onCloseAutoFocus={(e) => e.preventDefault()}
+                <PanelLeft
+                  aria-hidden
+                  className='pointer-events-none invisible absolute inset-0 m-auto h-[16px] w-[16px] rotate-180 text-[var(--text-icon)] group-hover:visible'
+                />
+              </>
+            )}
+          </div>
+        </button>
+      ) : isMounted && isWorkspaceReady ? (
+        <DropdownMenu
+          open={isWorkspaceMenuOpen}
+          onOpenChange={(open) => {
+            if (
+              !open &&
+              (isContextMenuOpen || isContextMenuOpeningRef.current || editingWorkspaceId)
+            ) {
+              return
+            }
+            setIsWorkspaceMenuOpen(open)
+          }}
+        >
+          <DropdownMenuTrigger asChild>
+            <button
+              type='button'
+              aria-label='Switch workspace'
+              className={cn(
+                'group mx-0.5 inline-flex h-[30px] min-w-0 max-w-full items-center rounded-lg px-2 transition-colors hover-hover:bg-[var(--surface-active)]',
+                !isCollapsed && 'cursor-pointer gap-2'
+              )}
+              title={activeWorkspace?.name}
+              onContextMenu={(e) => {
+                if (activeWorkspaceFull) {
+                  handleContextMenu(e, activeWorkspaceFull)
+                }
+              }}
             >
-              {isWorkspacesLoading ? (
-                <div className='px-2 py-[5px] font-medium text-[var(--text-secondary)] text-caption'>
-                  Loading workspaces…
-                </div>
+              {activeWorkspaceFull ? (
+                activeWorkspaceFull.logoUrl ? (
+                  <img
+                    src={activeWorkspaceFull.logoUrl}
+                    alt={activeWorkspaceFull.name || 'Workspace logo'}
+                    className='h-[16px] w-[16px] flex-shrink-0 rounded-sm object-cover'
+                  />
+                ) : (
+                  <div
+                    className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm font-medium text-[9px] text-white leading-none'
+                    style={{
+                      backgroundColor: activeWorkspaceFull.color ?? 'var(--brand-accent)',
+                    }}
+                  >
+                    {workspaceInitial}
+                  </div>
+                )
               ) : (
+                <Skeleton className='h-[16px] w-[16px] flex-shrink-0 rounded-sm' />
+              )}
+              {!isCollapsed && activeWorkspace?.name && (
                 <>
-                  <div className='flex items-center gap-2 p-0.5'>
-                    {activeWorkspaceFull ? (
-                      activeWorkspaceFull.logoUrl ? (
-                        <img
-                          src={activeWorkspaceFull.logoUrl}
-                          alt={activeWorkspaceFull.name || 'Workspace logo'}
-                          className='size-[32px] flex-shrink-0 rounded-md object-cover'
-                        />
-                      ) : (
-                        <div
-                          className='flex size-[32px] flex-shrink-0 items-center justify-center rounded-md font-medium text-caption text-white'
-                          style={{
-                            backgroundColor: activeWorkspaceFull.color ?? 'var(--brand-accent)',
-                          }}
-                        >
-                          {workspaceInitial}
-                        </div>
-                      )
-                    ) : (
-                      <Skeleton className='size-[32px] flex-shrink-0 rounded-md' />
-                    )}
-                    <div className='flex min-w-0 flex-1 flex-col'>
-                      <span className='truncate font-medium text-[var(--text-primary)] text-small'>
-                        {activeWorkspace?.name || 'Loading...'}
-                      </span>
-                      {showPlanInfo && (
-                        <div className='flex items-center gap-2'>
-                          <span className='truncate text-[var(--text-tertiary)] text-xs'>
-                            {planDisplayName}
-                          </span>
-                          {isFreePlan && (
-                            <button
-                              type='button'
-                              className='flex-shrink-0 rounded-full bg-[color-mix(in_srgb,var(--brand-accent)_16%,transparent)] px-2 py-0.5 font-medium text-[11px] text-[var(--brand-accent)] leading-none transition-opacity hover:opacity-85'
-                              onClick={(e) => {
-                                e.stopPropagation()
-                                setIsWorkspaceMenuOpen(false)
-                                navigateToSettings({ section: 'subscription' })
-                              }}
-                            >
-                              Upgrade
-                            </button>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-
-                  {workspaces.length > WORKSPACE_SEARCH_THRESHOLD && (
-                    <div className='mt-1 flex items-center gap-1.5 rounded-md border border-[var(--border)] bg-transparent px-2 py-1 transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
-                      <Search
-                        className='size-[12px] flex-shrink-0 text-[var(--text-tertiary)]'
-                        strokeWidth={2}
-                      />
-                      <Input
-                        ref={searchInputRef}
-                        placeholder='Search workspaces...'
-                        value={workspaceSearch}
-                        onChange={(e) => {
-                          setWorkspaceSearch(e.target.value)
-                          setHighlightedIndex(0)
-                        }}
-                        onKeyDown={(e) => {
-                          e.stopPropagation()
-                          if (filteredWorkspaces.length === 0) return
-                          if (e.key === 'ArrowDown') {
-                            e.preventDefault()
-                            setHighlightedIndex((i) => (i + 1) % filteredWorkspaces.length)
-                          } else if (e.key === 'ArrowUp') {
-                            e.preventDefault()
-                            setHighlightedIndex(
-                              (i) => (i - 1 + filteredWorkspaces.length) % filteredWorkspaces.length
-                            )
-                          } else if (e.key === 'Enter') {
-                            e.preventDefault()
-                            const target = filteredWorkspaces[highlightedIndex]
-                            if (target) onWorkspaceSwitch(target)
-                          }
-                        }}
-                        className='h-auto flex-1 border-0 bg-transparent p-0 text-caption leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
-                      />
-                    </div>
-                  )}
-                  <DropdownMenuGroup className='mt-2 min-h-0 flex-1'>
-                    <div
-                      ref={workspaceListRef}
-                      className='flex max-h-[130px] flex-col gap-0.5 overflow-y-auto'
-                    >
-                      {filteredWorkspaces.length === 0 && workspaceSearch && (
-                        <div className='px-2 py-[5px] text-[var(--text-tertiary)] text-caption'>
-                          No workspaces match "{workspaceSearch}"
-                        </div>
-                      )}
-                      {filteredWorkspaces.map((workspace, idx) => (
-                        <div
-                          key={workspace.id}
-                          data-workspace-row-idx={idx}
-                          onMouseEnter={() => setHighlightedIndex(idx)}
-                        >
-                          {editingWorkspaceId === workspace.id ? (
-                            <div className='flex items-center gap-2 rounded-[5px] bg-[var(--surface-active)] px-2 py-[5px]'>
-                              <input
-                                ref={(el) => {
-                                  if (el && !hasInputFocusedRef.current) {
-                                    hasInputFocusedRef.current = true
-                                    el.focus()
-                                    el.select()
-                                  }
+                  <span className='min-w-0 truncate text-[var(--text-body)] text-sm'>
+                    {activeWorkspace.name}
+                  </span>
+                  <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+                </>
+              )}
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align='start'
+            side={isCollapsed ? 'right' : 'bottom'}
+            sideOffset={isCollapsed ? 16 : 8}
+            className='flex max-h-none flex-col overflow-hidden'
+            style={{
+              width: '248px',
+              maxWidth: 'calc(100vw - 24px)',
+            }}
+            onCloseAutoFocus={(e) => e.preventDefault()}
+          >
+            {isWorkspacesLoading ? (
+              <div className='px-2 py-[5px] font-medium text-[var(--text-secondary)] text-caption'>
+                Loading workspaces...
+              </div>
+            ) : (
+              <>
+                <div className='-mx-1.5 -mt-1.5 flex max-h-[106px] flex-col gap-0.5 overflow-y-auto px-1.5 py-1.5'>
+                  {workspaces.map((workspace) => {
+                    const stripped = workspace.name.replace(/workspace/gi, '').trim()
+                    const initial = (stripped[0] || workspace.name[0] || 'W').toUpperCase()
+                    const isActive = workspace.id === workspaceId
+                    const isMenuOpen = menuOpenWorkspaceId === workspace.id
+
+                    return (
+                      <div key={workspace.id}>
+                        {editingWorkspaceId === workspace.id ? (
+                          <div className='flex h-[30px] items-center gap-2 rounded-lg bg-[var(--surface-active)] px-2'>
+                            {workspace.logoUrl ? (
+                              <img
+                                src={workspace.logoUrl}
+                                alt={workspace.name || 'Workspace logo'}
+                                className='h-[16px] w-[16px] flex-shrink-0 rounded-sm object-cover'
+                              />
+                            ) : (
+                              <div
+                                className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm font-medium text-[9px] text-white leading-none'
+                                style={{
+                                  backgroundColor: workspace.color ?? 'var(--brand-accent)',
                                 }}
-                                value={editingName}
-                                onChange={(e) => setEditingName(e.target.value)}
-                                onKeyDown={async (e) => {
-                                  e.stopPropagation()
-                                  if (e.key === 'Enter') {
-                                    e.preventDefault()
-                                    setIsListRenaming(true)
-                                    try {
-                                      await onRenameWorkspace(workspace.id, editingName.trim())
-                                      setEditingWorkspaceId(null)
-                                    } finally {
-                                      setIsListRenaming(false)
-                                    }
-                                  } else if (e.key === 'Escape') {
-                                    e.preventDefault()
+                              >
+                                {initial}
+                              </div>
+                            )}
+                            <input
+                              ref={(el) => {
+                                if (el && !hasInputFocusedRef.current) {
+                                  hasInputFocusedRef.current = true
+                                  el.focus()
+                                  el.select()
+                                }
+                              }}
+                              value={editingName}
+                              onChange={(e) => setEditingName(e.target.value)}
+                              onKeyDown={async (e) => {
+                                e.stopPropagation()
+                                if (e.key === 'Enter') {
+                                  e.preventDefault()
+                                  setIsListRenaming(true)
+                                  try {
+                                    await onRenameWorkspace(workspace.id, editingName.trim())
                                     setEditingWorkspaceId(null)
+                                  } finally {
+                                    setIsListRenaming(false)
                                   }
-                                }}
-                                onBlur={async () => {
-                                  if (!editingWorkspaceId) return
-                                  const trimmedName = editingName.trim()
-                                  if (trimmedName && trimmedName !== workspace.name) {
-                                    setIsListRenaming(true)
-                                    try {
-                                      await onRenameWorkspace(workspace.id, trimmedName)
-                                    } finally {
-                                      setIsListRenaming(false)
-                                    }
-                                  }
+                                } else if (e.key === 'Escape') {
+                                  e.preventDefault()
                                   setEditingWorkspaceId(null)
-                                }}
-                                className='w-full border-0 bg-transparent p-0 font-medium text-[var(--text-primary)] text-caption outline-none selection:bg-[var(--selection-bg)] selection:text-[var(--bg)] focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:selection:bg-[var(--selection-dark)] dark:selection:text-white'
-                                maxLength={100}
-                                autoComplete='off'
-                                autoCorrect='off'
-                                autoCapitalize='off'
-                                spellCheck='false'
-                                disabled={isListRenaming}
-                                onClick={(e) => {
-                                  e.stopPropagation()
-                                }}
-                              />
-                            </div>
-                          ) : (
-                            <div
-                              role='group'
-                              aria-label={workspace.name}
-                              className={cn(
-                                'group flex cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-[5px] font-medium text-[var(--text-body)] text-caption outline-none transition-colors',
-                                workspace.id !== workspaceId &&
-                                  menuOpenWorkspaceId !== workspace.id &&
-                                  'hover-hover:bg-[var(--surface-hover)]',
-                                (workspace.id === workspaceId ||
-                                  menuOpenWorkspaceId === workspace.id) &&
-                                  'bg-[var(--surface-active)]',
-                                idx === highlightedIndex &&
-                                  workspaces.length > WORKSPACE_SEARCH_THRESHOLD &&
-                                  workspace.id !== workspaceId &&
-                                  menuOpenWorkspaceId !== workspace.id &&
-                                  'bg-[var(--surface-hover)]'
-                              )}
-                              onClick={(e) => {
-                                if (e.metaKey || e.ctrlKey) {
-                                  window.open(`/workspace/${workspace.id}/home`, '_blank')
-                                  return
                                 }
-                                onWorkspaceSwitch(workspace)
                               }}
-                              onAuxClick={(e) => {
-                                if (e.button === 1) {
-                                  e.preventDefault()
-                                  window.open(`/workspace/${workspace.id}/home`, '_blank')
+                              onBlur={async () => {
+                                if (!editingWorkspaceId) return
+                                const trimmedName = editingName.trim()
+                                if (trimmedName && trimmedName !== workspace.name) {
+                                  setIsListRenaming(true)
+                                  try {
+                                    await onRenameWorkspace(workspace.id, trimmedName)
+                                  } finally {
+                                    setIsListRenaming(false)
+                                  }
                                 }
+                                setEditingWorkspaceId(null)
                               }}
-                              onContextMenu={(e) => handleContextMenu(e, workspace)}
-                              onKeyDown={(event) => {
-                                if (event.target !== event.currentTarget) return
-                                handleKeyboardActivation(event, () => onWorkspaceSwitch(workspace))
+                              className='w-full border-0 bg-transparent p-0 text-[var(--text-body)] text-sm outline-none selection:bg-[var(--selection-bg)] selection:text-[var(--bg)] focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:selection:bg-[var(--selection-dark)] dark:selection:text-white'
+                              maxLength={100}
+                              autoComplete='off'
+                              autoCorrect='off'
+                              autoCapitalize='off'
+                              spellCheck='false'
+                              disabled={isListRenaming}
+                              onClick={(e) => {
+                                e.stopPropagation()
                               }}
-                            >
-                              <span className='min-w-0 flex-1 truncate'>{workspace.name}</span>
-                              <button
-                                type='button'
-                                aria-label='Workspace options'
-                                onMouseDown={() => {
-                                  isContextMenuOpeningRef.current = true
-                                }}
-                                onClick={(e) => {
-                                  e.preventDefault()
-                                  e.stopPropagation()
-                                  const rect = e.currentTarget.getBoundingClientRect()
-                                  openContextMenuAt(workspace, rect.right, rect.top)
+                            />
+                          </div>
+                        ) : (
+                          <div
+                            className={cn(
+                              'group flex h-[30px] cursor-pointer select-none items-center gap-2 rounded-lg px-2 transition-colors',
+                              !isActive && !isMenuOpen && 'hover-hover:bg-[var(--surface-active)]',
+                              (isActive || isMenuOpen) && 'bg-[var(--surface-active)]'
+                            )}
+                            onClick={(e) => {
+                              if (e.metaKey || e.ctrlKey) {
+                                window.open(`/workspace/${workspace.id}/home`, '_blank')
+                                return
+                              }
+                              onWorkspaceSwitch(workspace)
+                            }}
+                            onAuxClick={(e) => {
+                              if (e.button === 1) {
+                                e.preventDefault()
+                                window.open(`/workspace/${workspace.id}/home`, '_blank')
+                              }
+                            }}
+                            onContextMenu={(e) => handleContextMenu(e, workspace)}
+                          >
+                            {workspace.logoUrl ? (
+                              <img
+                                src={workspace.logoUrl}
+                                alt={workspace.name || 'Workspace logo'}
+                                className='h-[16px] w-[16px] flex-shrink-0 rounded-sm object-cover'
+                              />
+                            ) : (
+                              <div
+                                className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm font-medium text-[9px] text-white leading-none'
+                                style={{
+                                  backgroundColor: workspace.color ?? 'var(--brand-accent)',
                                 }}
-                                className={cn(
-                                  'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm opacity-0 transition-opacity group-hover:opacity-100',
-                                  menuOpenWorkspaceId === workspace.id && 'opacity-100'
-                                )}
                               >
-                                <MoreHorizontal className='size-[14px] text-[var(--text-tertiary)]' />
-                              </button>
-                            </div>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  </DropdownMenuGroup>
-
-                  <div className='mt-1 flex flex-col gap-0.5'>
-                    <button
-                      type='button'
-                      className='flex w-full cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-[5px] font-medium text-[var(--text-body)] text-caption outline-none transition-colors hover-hover:bg-[var(--surface-hover)] disabled:pointer-events-none disabled:opacity-50'
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        setIsWorkspaceMenuOpen(false)
-                        setIsCreateModalOpen(true)
-                      }}
-                      disabled={isCreatingWorkspace || !canCreateWorkspace}
-                      title={createWorkspaceDisabledReason ?? undefined}
-                    >
-                      <Plus className='size-[14px] shrink-0 text-[var(--text-icon)]' />
-                      Create new workspace
-                    </button>
-                  </div>
+                                {initial}
+                              </div>
+                            )}
+                            <span className='min-w-0 flex-1 truncate text-[var(--text-body)] text-sm'>
+                              {workspace.name}
+                            </span>
+                            <button
+                              type='button'
+                              aria-label='Workspace options'
+                              onMouseDown={() => {
+                                isContextMenuOpeningRef.current = true
+                              }}
+                              onClick={(e) => {
+                                e.preventDefault()
+                                e.stopPropagation()
+                                const rect = e.currentTarget.getBoundingClientRect()
+                                openContextMenuAt(workspace, rect.right, rect.top)
+                              }}
+                              className={cn(
+                                'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm opacity-0 transition-opacity group-hover:opacity-100',
+                                isMenuOpen && 'opacity-100'
+                              )}
+                            >
+                              <MoreHorizontal className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
+                            </button>
+                          </div>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
 
-                  {!isInvitationsDisabled && (
-                    <>
-                      <DropdownMenuSeparator />
-                      <button
-                        type='button'
-                        className='flex w-full cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-[5px] font-medium text-[var(--text-body)] text-caption outline-none transition-colors hover-hover:bg-[var(--surface-hover)] disabled:pointer-events-none disabled:opacity-50'
-                        onClick={() => {
-                          setIsWorkspaceMenuOpen(false)
-                          handleInviteClick()
-                        }}
-                        disabled={inviteButtonDisabled}
-                        title={inviteDisabledReason ?? undefined}
-                      >
-                        <UserPlus className='size-[14px] shrink-0 text-[var(--text-icon)]' />
-                        Invite members
-                      </button>
-                    </>
-                  )}
-                </>
-              )}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        ) : (
-          <button
-            type='button'
-            aria-label='Switch workspace'
-            className={cn(
-              'flex h-[32px] min-w-0 items-center rounded-lg border border-[var(--border)] bg-[var(--surface-2)] pl-[5px]',
-              isCollapsed ? 'w-[32px]' : 'w-full gap-2 pr-2'
-            )}
-            title={activeWorkspace?.name || 'Loading...'}
-            disabled
-          >
-            {activeWorkspaceFull ? (
-              activeWorkspaceFull.logoUrl ? (
-                <img
-                  src={activeWorkspaceFull.logoUrl}
-                  alt={activeWorkspaceFull.name || 'Workspace logo'}
-                  className='size-[20px] flex-shrink-0 rounded-sm object-cover'
-                />
-              ) : (
-                <div
-                  className='flex size-[20px] flex-shrink-0 items-center justify-center rounded-sm font-medium text-caption text-white leading-none'
-                  style={{ backgroundColor: activeWorkspaceFull.color ?? 'var(--brand-accent)' }}
-                >
-                  {workspaceInitial}
+                <DropdownMenuSeparator className='mx-0 mt-0' />
+
+                <div className='flex flex-col gap-0.5'>
+                  <button
+                    type='button'
+                    className='flex h-[30px] w-full cursor-pointer select-none items-center gap-2 rounded-lg px-2 text-[var(--text-body)] text-sm transition-colors hover-hover:bg-[var(--surface-active)] disabled:pointer-events-none disabled:opacity-50'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      setIsWorkspaceMenuOpen(false)
+                      if (!canCreateWorkspace) {
+                        navigateToSettings({ section: 'subscription' })
+                        return
+                      }
+                      setIsCreateModalOpen(true)
+                    }}
+                    disabled={isCreatingWorkspace}
+                    title={createWorkspaceDisabledReason ?? undefined}
+                  >
+                    <Plus className='h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
+                    New workspace
+                  </button>
                 </div>
-              )
-            ) : (
-              <Skeleton className='size-[20px] flex-shrink-0 rounded-sm' />
-            )}
-            {!isCollapsed && (
-              <>
-                <span className='min-w-0 flex-1 truncate text-left font-base text-[var(--text-primary)] text-sm'>
-                  {activeWorkspace?.name || 'Loading...'}
-                </span>
-                <ChevronDown className='sidebar-collapse-hide h-[8px] w-[10px] flex-shrink-0 text-[var(--text-muted)]' />
+
+                <DropdownMenuSeparator className='mx-0' />
+                <button
+                  type='button'
+                  className='flex h-[30px] w-full cursor-pointer select-none items-center gap-2 rounded-lg px-2 text-[var(--text-body)] text-sm transition-colors hover-hover:bg-[var(--surface-active)]'
+                  onClick={() => {
+                    setIsWorkspaceMenuOpen(false)
+                    if (isInvitationsDisabled) {
+                      navigateToSettings({ section: 'subscription' })
+                      return
+                    }
+                    setIsInviteModalOpen(true)
+                  }}
+                  title={inviteDisabledReason ?? undefined}
+                >
+                  <Send className='h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
+                  Invite members
+                </button>
               </>
             )}
-          </button>
-        )}
-      </div>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : (
+        <button
+          type='button'
+          aria-label='Switch workspace'
+          className={cn(
+            'mx-0.5 h-[30px] items-center gap-2 rounded-lg px-2',
+            isCollapsed ? 'flex' : 'inline-flex min-w-0 max-w-full'
+          )}
+          title={activeWorkspace?.name}
+          disabled
+        >
+          {activeWorkspaceFull ? (
+            activeWorkspaceFull.logoUrl ? (
+              <img
+                src={activeWorkspaceFull.logoUrl}
+                alt={activeWorkspaceFull.name || 'Workspace logo'}
+                className='h-[16px] w-[16px] flex-shrink-0 rounded-sm object-cover'
+              />
+            ) : (
+              <div
+                className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm font-medium text-[9px] text-white leading-none'
+                style={{ backgroundColor: activeWorkspaceFull.color ?? 'var(--brand-accent)' }}
+              >
+                {workspaceInitial}
+              </div>
+            )
+          ) : (
+            <Skeleton className='h-[16px] w-[16px] flex-shrink-0 rounded-sm' />
+          )}
+          {!isCollapsed && activeWorkspace?.name && (
+            <>
+              <span className='min-w-0 truncate text-[var(--text-body)] text-sm'>
+                {activeWorkspace.name}
+              </span>
+              <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+            </>
+          )}
+        </button>
+      )}
 
-      {/* Context Menu */}
       {(() => {
         const capturedPermissions = capturedWorkspaceRef.current?.permissions
         const contextCanAdmin = capturedPermissions === 'admin'
@@ -749,25 +640,18 @@ function WorkspaceHeaderImpl({
             onRename={handleRenameAction}
             onDelete={handleDeleteAction}
             onLeave={handleLeaveAction}
-            onColorChange={onColorChange ? handleColorChangeAction : undefined}
-            onUploadLogo={onUploadLogo ? handleUploadLogoAction : undefined}
-            onRemoveLogo={onRemoveLogo ? handleRemoveLogoAction : undefined}
-            currentColor={capturedWorkspace?.color}
+            onUploadLogo={handleUploadLogoAction}
             showRename={true}
             showColorChange={!!onColorChange}
             showUploadLogo={!!onUploadLogo}
-            showRemoveLogo={!!onRemoveLogo && !!capturedWorkspace?.logoUrl}
             showLeave={!isOwner && !!onLeaveWorkspace}
             disableRename={!contextCanAdmin}
             disableDelete={!contextCanAdmin || workspaces.length <= 1}
-            disableColorChange={!contextCanAdmin}
             disableUploadLogo={!contextCanAdmin}
-            disableRemoveLogo={!contextCanAdmin}
           />
         )
       })()}
 
-      {/* Create Workspace Modal */}
       <CreateWorkspaceModal
         open={isCreateModalOpen}
         onOpenChange={setIsCreateModalOpen}
@@ -778,7 +662,6 @@ function WorkspaceHeaderImpl({
         isCreating={isCreatingWorkspace}
       />
 
-      {/* Invite Modal */}
       <InviteModal
         open={isInviteModalOpen}
         onOpenChange={setIsInviteModalOpen}
@@ -786,16 +669,14 @@ function WorkspaceHeaderImpl({
         inviteDisabledReason={inviteDisabledReason}
         organizationId={activeWorkspaceFull?.organizationId ?? null}
       />
-      {/* Delete Confirmation Modal */}
       <DeleteModal
         isOpen={isDeleteModalOpen}
         onClose={() => setIsDeleteModalOpen(false)}
         onConfirm={handleDeleteWorkspace}
         isDeleting={isDeletingWorkspace}
         itemType='workspace'
-        itemName={deleteTarget?.name || activeWorkspaceFull?.name || activeWorkspace?.name}
+        itemName={deleteTarget?.name}
       />
-      {/* Leave Confirmation Modal */}
       <Modal open={isLeaveModalOpen} onOpenChange={() => setIsLeaveModalOpen(false)}>
         <ModalContent size='sm'>
           <ModalHeader>Leave Workspace</ModalHeader>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/constants.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/constants.ts
new file mode 100644
index 00000000000..88a25c6de88
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/constants.ts
@@ -0,0 +1,24 @@
+/**
+ * Shared sidebar spacing tokens.
+ *
+ * Apply these Tailwind class names so the sidebar and any related surfaces
+ * (e.g. the workspace search modal) stay visually aligned. When the sidebar
+ * rhythm changes, update these values and every consumer follows.
+ */
+
+/** Vertical gap between sibling sidebar sections (12px). */
+export const SIDEBAR_SECTION_GAP_CLASS = 'mt-3'
+
+/** Vertical gap between items within a sidebar section (2px). */
+export const SIDEBAR_ITEM_GAP_CLASS = 'gap-0.5'
+
+/**
+ * Nested-selector variants for cmdk-based surfaces (e.g. the search modal).
+ * Written as complete literal strings so Tailwind's JIT can detect them.
+ */
+
+/** Matches {@link SIDEBAR_SECTION_GAP_CLASS} applied to adjacent cmdk groups. */
+export const CMDK_SECTION_GAP_CLASS = '[&_[cmdk-group]+[cmdk-group]]:mt-3'
+
+/** Matches {@link SIDEBAR_ITEM_GAP_CLASS} applied to cmdk item containers. */
+export const CMDK_ITEM_GAP_CLASS = '[&_[cmdk-group-items]]:gap-0.5'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workspace-management.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workspace-management.ts
index f96b43f8fd3..876045804f8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workspace-management.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workspace-management.ts
@@ -133,7 +133,7 @@ export function useWorkspaceManagement({
   const updateWorkspace = useCallback(
     async (
       workspaceId: string,
-      updates: { name?: string; color?: string; logoUrl?: string | null }
+      updates: { name?: string; logoUrl?: string | null; color?: string }
     ): Promise<boolean> => {
       try {
         await updateWorkspaceMutation.mutateAsync({ workspaceId, ...updates })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index 8fd9fae2109..08e42b01adc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -2,15 +2,12 @@
 
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Compass, MoreHorizontal, Pin } from 'lucide-react'
-import Image from 'next/image'
+import { MoreHorizontal, Pin } from 'lucide-react'
 import Link from 'next/link'
 import { useParams, usePathname, useRouter } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import {
-  Blimp,
   Button,
-  Download,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -21,20 +18,21 @@ import {
   Loader,
   Skeleton,
   Tooltip,
+  Upload,
 } from '@/components/emcn'
 import {
   BookOpen,
-  Calendar,
+  Clock,
   Database,
-  File,
+  Files,
   HelpCircle,
+  Integration,
   PanelLeft,
   Plus,
   Search,
   Settings,
-  Sim,
   Table,
-  Wordmark,
+  Task,
 } from '@/components/emcn/icons'
 import { useSession } from '@/lib/auth/auth-client'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
@@ -42,10 +40,6 @@ import { cn } from '@/lib/core/utils/cn'
 import { isMacPlatform } from '@/lib/core/utils/platform'
 import { buildFolderTree, getFolderPath } from '@/lib/folders/tree'
 import { captureEvent } from '@/lib/posthog/client'
-import {
-  START_NAV_TOUR_EVENT,
-  START_WORKFLOW_TOUR_EVENT,
-} from '@/app/workspace/[workspaceId]/components/product-tour'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-utils'
@@ -63,6 +57,10 @@ import {
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
 import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal'
+import {
+  SIDEBAR_ITEM_GAP_CLASS,
+  SIDEBAR_SECTION_GAP_CLASS,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import {
   useContextMenu,
   useFlyoutInlineRename,
@@ -80,12 +78,10 @@ import {
   groupWorkflowsByFolder,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
 import { useImportWorkflow } from '@/app/workspace/[workspaceId]/w/hooks'
-import { useOrgBrandConfig } from '@/ee/whitelabeling/components/branding-provider'
 import { useFolderMap, useFolders } from '@/hooks/queries/folders'
 import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
 import { useTablesList } from '@/hooks/queries/tables'
 import {
-  useCreateTask,
   useDeleteTask,
   useDeleteTasks,
   useMarkTaskRead,
@@ -133,8 +129,7 @@ export function SidebarTooltip({
 function SidebarItemSkeleton() {
   return (
     <div className='sidebar-collapse-hide mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2'>
-      <Skeleton className='size-[16px] flex-shrink-0 rounded-sm' />
-      <Skeleton className='h-[14px] w-full rounded-sm' />
+      <Skeleton className='h-[16px] w-[16px] flex-shrink-0 rounded-sm' />
     </div>
   )
 }
@@ -193,7 +188,7 @@ const SidebarTaskItem = memo(function SidebarTaskItem({
         href={task.href}
         className={cn(
           'group mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-sm',
-          !(isCurrentRoute || isSelected || isMenuOpen) && 'hover-hover:bg-[var(--surface-hover)]',
+          !(isCurrentRoute || isSelected || isMenuOpen) && 'hover-hover:bg-[var(--surface-active)]',
           (isCurrentRoute || isSelected || isMenuOpen) && 'bg-[var(--surface-active)]'
         )}
         onClick={(e) => {
@@ -210,38 +205,45 @@ const SidebarTaskItem = memo(function SidebarTaskItem({
         onDragStart={handleDragStart}
         onDragEnd={handleDragEnd}
       >
-        <Blimp className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-        <div className='min-w-0 flex-1 truncate font-base text-[var(--text-body)]'>{task.name}</div>
-        <div className='relative flex size-[18px] flex-shrink-0 items-center justify-center'>
-          {isActive && !isCurrentRoute && !isMenuOpen && (
-            <span className='absolute size-[7px] animate-ping rounded-full bg-amber-400 opacity-30 group-hover:hidden' />
-          )}
-          {isActive && !isCurrentRoute && !isMenuOpen && (
-            <span className='absolute size-[7px] rounded-full bg-amber-400 group-hover:hidden' />
-          )}
-          {!isActive && isUnread && !isCurrentRoute && !isMenuOpen && (
-            <span className='absolute size-[7px] rounded-full bg-[var(--brand-accent)] group-hover:hidden' />
-          )}
-          {!isActive && !isUnread && isPinned && !isCurrentRoute && !isMenuOpen && (
-            <Pin className='absolute size-[12px] text-[var(--text-icon)] group-hover:hidden' />
-          )}
-          <button
-            type='button'
-            aria-label='Task options'
-            onPointerDown={onMorePointerDown}
-            onClick={(e) => {
-              e.preventDefault()
-              e.stopPropagation()
-              onMoreClick(e, task.id)
-            }}
-            className={cn(
-              'flex h-[18px] w-[18px] items-center justify-center rounded-sm opacity-0 transition-opacity group-hover:opacity-100',
-              isMenuOpen && 'opacity-100'
+        <div className='min-w-0 flex-1 truncate text-[var(--text-body)]'>{task.name}</div>
+        {task.id !== 'new' && (
+          <div className='relative flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center'>
+            {(isActive || (!isCurrentRoute && isUnread)) && (
+              <span
+                aria-hidden='true'
+                className={cn(
+                  'h-[6px] w-[6px] rounded-full transition-opacity',
+                  isMenuOpen ? 'opacity-0' : 'group-hover:opacity-0'
+                )}
+                style={{
+                  backgroundColor: isActive ? '#EAB308' : 'var(--brand-accent)',
+                }}
+              />
             )}
-          >
-            <MoreHorizontal className='size-[16px] text-[var(--text-icon)]' />
-          </button>
-        </div>
+            {!isActive && !isUnread && isPinned && !isCurrentRoute && !isMenuOpen && (
+              <Pin
+                aria-hidden='true'
+                className='absolute size-[12px] text-[var(--text-icon)] group-hover:hidden'
+              />
+            )}
+            <button
+              type='button'
+              aria-label='Task options'
+              onPointerDown={onMorePointerDown}
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                onMoreClick(e, task.id)
+              }}
+              className={cn(
+                'absolute inset-0 flex items-center justify-center rounded-sm opacity-0 transition-opacity group-hover:opacity-100',
+                isMenuOpen && 'opacity-100'
+              )}
+            >
+              <MoreHorizontal className='h-[16px] w-[16px] text-[var(--text-icon)]' />
+            </button>
+          </div>
+        )}
       </Link>
     </SidebarTooltip>
   )
@@ -253,6 +255,19 @@ interface SidebarNavItemData {
   icon: React.ComponentType<{ className?: string }>
   href?: string
   onClick?: () => void
+  /** Extra path prefixes that should also mark this item as active (e.g. sibling tabs). */
+  additionalActivePaths?: string[]
+}
+
+/**
+ * Returns true when the current pathname matches `item.href` or any
+ * `additionalActivePaths` at a segment boundary (avoids `/foo` matching `/foo-bar`).
+ */
+function isNavItemActive(item: SidebarNavItemData, pathname: string | null): boolean {
+  if (!pathname) return false
+  const matches = (p: string) => pathname === p || pathname.startsWith(`${p}/`)
+  if (item.href && matches(item.href)) return true
+  return item.additionalActivePaths?.some(matches) ?? false
 }
 
 const SidebarNavItem = memo(function SidebarNavItem({
@@ -268,13 +283,13 @@ const SidebarNavItem = memo(function SidebarNavItem({
 }) {
   const Icon = item.icon
   const baseClasses = 'group flex h-[30px] items-center gap-2 rounded-lg mx-0.5 px-2 text-sm'
-  const hoverClasses = !active ? 'hover-hover:bg-[var(--surface-hover)]' : ''
+  const hoverClasses = !active ? 'hover-hover:bg-[var(--surface-active)]' : ''
   const activeClasses = active ? 'bg-[var(--surface-active)]' : ''
 
   const content = (
     <>
-      <Icon className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-      <span className='truncate font-base text-[var(--text-body)]'>{item.label}</span>
+      <Icon className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+      <span className='truncate text-[var(--text-body)]'>{item.label}</span>
     </>
   )
 
@@ -282,7 +297,6 @@ const SidebarNavItem = memo(function SidebarNavItem({
     <Link
       href={item.href}
       data-item-id={item.id}
-      data-tour={`nav-${item.id}`}
       className={`${baseClasses} ${hoverClasses} ${activeClasses}`}
       onClick={
         item.onClick
@@ -301,7 +315,6 @@ const SidebarNavItem = memo(function SidebarNavItem({
     <button
       type='button'
       data-item-id={item.id}
-      data-tour={`nav-${item.id}`}
       className={`${baseClasses} ${hoverClasses} ${activeClasses}`}
       onClick={item.onClick}
     >
@@ -342,21 +355,19 @@ const WORKFLOW_ICON_STYLE: React.CSSProperties = {
  * @returns Sidebar with workflows panel
  */
 export const Sidebar = memo(function Sidebar() {
-  const brand = useOrgBrandConfig()
   const params = useParams()
   const workspaceId = params.workspaceId as string
   const workflowId = params.workflowId as string | undefined
   const router = useRouter()
   const pathname = usePathname()
 
-  const sidebarRef = useRef<HTMLElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const scrollContentRef = useRef<HTMLDivElement>(null)
 
   const posthog = usePostHog()
   const { data: sessionData, isPending: sessionLoading } = useSession()
-  const { canEdit } = useUserPermissionsContext()
+  const { canEdit, isLoading: permissionsLoading } = useUserPermissionsContext()
   const { config: permissionConfig, filterBlocks } = usePermissionConfig()
   const { navigateToSettings, getSettingsHref } = useSettingsNavigation()
   const initializeSearchData = useSearchModalStore((state) => state.initializeData)
@@ -581,14 +592,12 @@ export const Sidebar = memo(function Sidebar() {
     }
   }, [activeNavItemHref])
 
-  const createTaskMutation = useCreateTask(workspaceId)
-  const isCreatingTaskRef = useRef(false)
   const deleteTaskMutation = useDeleteTask(workspaceId)
   const deleteTasksMutation = useDeleteTasks(workspaceId)
   const markTaskReadMutation = useMarkTaskRead(workspaceId)
   const markTaskUnreadMutation = useMarkTaskUnread(workspaceId)
-  const setTaskPinnedMutation = useSetTaskPinned(workspaceId)
   const renameTaskMutation = useRenameTask(workspaceId)
+  const setTaskPinnedMutation = useSetTaskPinned(workspaceId)
   const tasksHover = useHoverMenu()
   const workflowsHover = useHoverMenu()
 
@@ -697,21 +706,30 @@ export const Sidebar = memo(function Sidebar() {
   )
 
   const topNavItems = useMemo(
-    () => [
-      {
-        id: 'home',
-        label: 'Home',
-        icon: Home,
-        href: `/workspace/${workspaceId}/home`,
-      },
-      {
-        id: 'search',
-        label: 'Search',
-        icon: Search,
-        onClick: openSearchModal,
-      },
-    ],
-    [workspaceId, openSearchModal]
+    () =>
+      [
+        {
+          id: 'home',
+          label: 'Home',
+          icon: Home,
+          href: `/workspace/${workspaceId}/home`,
+        },
+        {
+          id: 'search',
+          label: 'Search',
+          icon: Search,
+          onClick: openSearchModal,
+        },
+        {
+          id: 'integrations',
+          label: 'Integrations',
+          icon: Integration,
+          href: `/workspace/${workspaceId}/integrations`,
+          additionalActivePaths: [`/workspace/${workspaceId}/skills`],
+          hidden: permissionConfig.hideIntegrationsTab,
+        },
+      ].filter((item) => !item.hidden),
+    [workspaceId, openSearchModal, permissionConfig.hideIntegrationsTab]
   )
 
   const workspaceNavItems = useMemo(
@@ -727,7 +745,7 @@ export const Sidebar = memo(function Sidebar() {
         {
           id: 'files',
           label: 'Files',
-          icon: File,
+          icon: Files,
           href: `/workspace/${workspaceId}/files`,
           hidden: permissionConfig.hideFilesTab,
         },
@@ -741,7 +759,7 @@ export const Sidebar = memo(function Sidebar() {
         {
           id: 'scheduled-tasks',
           label: 'Scheduled Tasks',
-          icon: Calendar,
+          icon: Clock,
           href: `/workspace/${workspaceId}/scheduled-tasks`,
         },
         {
@@ -777,13 +795,7 @@ export const Sidebar = memo(function Sidebar() {
     [navigateToSettings, getSettingsHref, setSidebarWidth]
   )
 
-  const handleStartTour = () => {
-    window.dispatchEvent(
-      new CustomEvent(isOnWorkflowPage ? START_WORKFLOW_TOUR_EVENT : START_NAV_TOUR_EVENT)
-    )
-  }
-
-  const { data: fetchedTasks, isLoading: tasksLoading } = useTasks(workspaceId)
+  const { data: fetchedTasks = [], isLoading: tasksLoading } = useTasks(workspaceId)
 
   useTaskEvents(workspaceId)
 
@@ -797,10 +809,6 @@ export const Sidebar = memo(function Sidebar() {
         : [],
     [fetchedTasks, workspaceId]
   )
-  const tasksRef = useRef(tasks)
-  useEffect(() => {
-    tasksRef.current = tasks
-  }, [tasks])
 
   const { data: fetchedTables = [] } = useTablesList(workspaceId)
   const { data: fetchedFiles = [] } = useWorkspaceFiles(workspaceId)
@@ -846,6 +854,7 @@ export const Sidebar = memo(function Sidebar() {
   const taskIds = useMemo(() => tasks.map((t) => t.id), [tasks])
 
   const { selectedTasks, handleTaskClick } = useTaskSelection({ taskIds })
+  const hasTaskMultiSelection = selectedTasks.size > 1
 
   const isMultiTaskContextMenu = contextMenuSelectionRef.current.taskIds.length > 1
   const activeTaskContextMenuItem =
@@ -942,24 +951,24 @@ export const Sidebar = memo(function Sidebar() {
     markTaskUnreadMutation.mutate(ids[0])
   }, [])
 
-  const handleToggleTaskPin = useCallback(() => {
+  const handleStartTaskRename = useCallback(() => {
     const { taskIds: ids } = contextMenuSelectionRef.current
     if (ids.length !== 1) return
     const taskId = ids[0]
-    const task = tasksRef.current.find((t) => t.id === taskId)
+    const task = tasks.find((t) => t.id === taskId)
     if (!task) return
-    setTaskPinnedMutation.mutate({ chatId: taskId, pinned: !task.isPinned })
-  }, [])
+    tasksHover.setLocked(true)
+    taskFlyoutRename.startRename({ id: taskId, name: task.name })
+  }, [taskFlyoutRename, tasks, tasksHover])
 
-  const handleStartTaskRename = useCallback(() => {
+  const handleToggleTaskPin = useCallback(() => {
     const { taskIds: ids } = contextMenuSelectionRef.current
     if (ids.length !== 1) return
     const taskId = ids[0]
     const task = tasks.find((t) => t.id === taskId)
     if (!task) return
-    tasksHover.setLocked(true)
-    taskFlyoutRename.startRename({ id: taskId, name: task.name })
-  }, [taskFlyoutRename, tasks, tasksHover])
+    setTaskPinnedMutation.mutate({ chatId: taskId, pinned: !task.isPinned })
+  }, [tasks, setTaskPinnedMutation])
 
   const handleCollapsedWorkflowOpenInNewTab = useCallback(
     (workflow: { id: string }) => {
@@ -1019,6 +1028,12 @@ export const Sidebar = memo(function Sidebar() {
     })
   }, [workflowId, workflowsLoading])
 
+  useEffect(() => {
+    if (!isOnWorkflowPage && !isCollapsed) {
+      setSidebarWidth(SIDEBAR_WIDTH.MIN)
+    }
+  }, [isOnWorkflowPage, isCollapsed, setSidebarWidth])
+
   const handleCreateWorkflow = useCallback(async () => {
     const workflowId = await createWorkflow()
     if (workflowId) {
@@ -1060,15 +1075,6 @@ export const Sidebar = memo(function Sidebar() {
     workflowId ? selectOnly(workflowId) : clearAllSelection()
   }
 
-  const handleSidebarKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      const target = e.target as HTMLElement
-      if (target.tagName === 'BUTTON' || target.closest('button, [role="button"], a')) return
-      const { selectOnly, clearAllSelection } = useFolderStore.getState()
-      workflowId ? selectOnly(workflowId) : clearAllSelection()
-    }
-  }
-
   const handleRenameWorkspace = useCallback(
     async (workspaceIdToRename: string, newName: string) => {
       await updateWorkspace(workspaceIdToRename, { name: newName })
@@ -1092,13 +1098,6 @@ export const Sidebar = memo(function Sidebar() {
     [logoFileInputRef, setLogoTargetWorkspaceId]
   )
 
-  const handleRemoveLogo = useCallback(
-    async (workspaceIdToUpdate: string) => {
-      await updateWorkspace(workspaceIdToUpdate, { logoUrl: null })
-    },
-    [updateWorkspace]
-  )
-
   const handleDeleteWorkspace = useCallback(
     async (workspaceIdToDelete: string) => {
       const workspaceToDelete = workspaces.find((w) => w.id === workspaceIdToDelete)
@@ -1119,7 +1118,7 @@ export const Sidebar = memo(function Sidebar() {
     [workspaces, handleLeaveWorkspace]
   )
 
-  const tasksCollapsedIcon = <Blimp className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+  const tasksCollapsedIcon = <Task className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
 
   const workflowsCollapsedIcon = (
     <div
@@ -1133,53 +1132,49 @@ export const Sidebar = memo(function Sidebar() {
     onSelect: handleCreateWorkflow,
   }
 
-  const handleExpandSidebar = (e: React.MouseEvent) => {
-    e.preventDefault()
-    toggleCollapsed()
-  }
-
-  const handleNewTask = useCallback(async () => {
-    if (!workspaceId || isCreatingTaskRef.current) return
-    isCreatingTaskRef.current = true
-    try {
-      const { id } = await createTaskMutation.mutateAsync()
-      useMothershipDraftsStore.getState().clearDraft(`${workspaceId}:new`)
-      navigateToPage(`/workspace/${workspaceId}/task/${id}`)
-    } catch {
-      navigateToPage(`/workspace/${workspaceId}/home`)
-    } finally {
-      isCreatingTaskRef.current = false
-    }
-  }, [workspaceId, navigateToPage])
+  const handleNewTask = useCallback(() => {
+    useMothershipDraftsStore.getState().clearDraft(`${workspaceId}:new`)
+    navigateToPage(`/workspace/${workspaceId}/home`)
+  }, [navigateToPage, workspaceId])
 
   const tasksPrimaryAction = {
     label: 'New task',
     onSelect: handleNewTask,
   }
 
-  const handleSeeMoreTasks = () => setVisibleTaskCount((prev) => prev + 5)
+  const handleSeeMoreTasks = useCallback(() => setVisibleTaskCount((prev) => prev + 5), [])
+  const handleSeeLessTasks = useCallback(() => setVisibleTaskCount(5), [])
 
-  const handleCloseTaskDeleteModal = () => setIsTaskDeleteModalOpen(false)
+  const handleCloseTaskDeleteModal = useCallback(() => setIsTaskDeleteModalOpen(false), [])
 
-  const handleEdgeKeyDown = (e: React.KeyboardEvent) => {
-    if (isCollapsed && (e.key === 'Enter' || e.key === ' ')) {
-      e.preventDefault()
-      toggleCollapsed()
-    }
-  }
+  const handleEdgeKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (isCollapsed && (e.key === 'Enter' || e.key === ' ')) {
+        e.preventDefault()
+        toggleCollapsed()
+      }
+    },
+    [isCollapsed, toggleCollapsed]
+  )
 
-  const handleOpenHelpFromMenu = () => setIsHelpModalOpen(true)
+  const handleOpenHelpFromMenu = useCallback(() => setIsHelpModalOpen(true), [])
 
-  const handleOpenDocs = () => {
+  const handleOpenDocs = useCallback(() => {
     window.open('https://docs.sim.ai', '_blank', 'noopener,noreferrer')
     captureEvent(posthog, 'docs_opened', { source: 'help_menu' })
-  }
+  }, [posthog])
 
-  const handleTaskRenameBlur = () => void taskFlyoutRename.saveRename()
+  const handleTaskRenameBlur = useCallback(
+    () => void taskFlyoutRename.saveRename(),
+    [taskFlyoutRename.saveRename]
+  )
 
-  const handleWorkflowRenameBlur = () => void workflowFlyoutRename.saveRename()
+  const handleWorkflowRenameBlur = useCallback(
+    () => void workflowFlyoutRename.saveRename(),
+    [workflowFlyoutRename.saveRename]
+  )
 
-  const resolveWorkspaceIdFromPath = (): string | undefined => {
+  const resolveWorkspaceIdFromPath = useCallback((): string | undefined => {
     if (workspaceId) return workspaceId
     if (typeof window === 'undefined') return undefined
 
@@ -1188,7 +1183,7 @@ export const Sidebar = memo(function Sidebar() {
     if (idx === -1) return undefined
 
     return parts[idx + 1]
-  }
+  }, [workspaceId])
 
   useRegisterGlobalCommands(() =>
     createCommands([
@@ -1206,22 +1201,6 @@ export const Sidebar = memo(function Sidebar() {
           }
         },
       },
-      // {
-      //   id: 'goto-templates',
-      //   handler: () => {
-      //     try {
-      //       const pathWorkspaceId = resolveWorkspaceIdFromPath()
-      //       if (pathWorkspaceId) {
-      //         navigateToPage(`/workspace/${pathWorkspaceId}/templates`)
-      //         logger.info('Navigated to templates', { workspaceId: pathWorkspaceId })
-      //       } else {
-      //         logger.warn('No workspace ID found, cannot navigate to templates')
-      //       }
-      //     } catch (err) {
-      //       logger.error('Failed to navigate to templates', { err })
-      //     }
-      //   },
-      // },
       {
         id: 'goto-logs',
         handler: () => {
@@ -1271,7 +1250,6 @@ export const Sidebar = memo(function Sidebar() {
       />
       <div className='relative h-full'>
         <aside
-          ref={sidebarRef}
           className={cn(
             'sidebar-container relative h-full overflow-hidden bg-[var(--surface-1)]',
             isResizing && 'is-resizing'
@@ -1279,81 +1257,9 @@ export const Sidebar = memo(function Sidebar() {
           data-collapsed={isCollapsed || undefined}
           aria-label='Workspace sidebar'
           onClick={handleSidebarClick}
-          onKeyDown={handleSidebarKeyDown}
         >
-          <div className='flex h-full flex-col pt-3'>
-            <div className='flex flex-shrink-0 items-center pr-2 pb-2 pl-2.5'>
-              <div className='flex h-[30px] items-center'>
-                <div className='relative h-[30px]'>
-                  <Link
-                    href={`/workspace/${workspaceId}/home`}
-                    className='sidebar-collapse-hide !transition-none group flex h-[30px] items-center rounded-[8px] px-[7px] hover-hover:bg-[var(--surface-hover)]'
-                    tabIndex={isCollapsed ? -1 : undefined}
-                    aria-label={brand.name}
-                  >
-                    {brand.wordmarkUrl ? (
-                      <Image
-                        src={brand.wordmarkUrl}
-                        alt={brand.name}
-                        height={16}
-                        width={80}
-                        className='h-[16px] w-auto flex-shrink-0 object-contain object-left'
-                        unoptimized
-                      />
-                    ) : brand.logoUrl ? (
-                      <Image
-                        src={brand.logoUrl}
-                        alt={brand.name}
-                        width={16}
-                        height={16}
-                        className='size-[16px] flex-shrink-0 object-contain'
-                        unoptimized
-                      />
-                    ) : (
-                      <Wordmark className='h-[16px] w-auto text-[var(--text-body)]' />
-                    )}
-                  </Link>
-                  <SidebarTooltip label='Expand sidebar' enabled={showCollapsedTooltips}>
-                    <Link
-                      href={`/workspace/${workspaceId}/home`}
-                      onClick={handleExpandSidebar}
-                      className='sidebar-collapse-show !transition-none group absolute top-0 left-0 flex size-[30px] items-center justify-center rounded-[8px] hover-hover:bg-[var(--surface-hover)]'
-                      tabIndex={isCollapsed ? undefined : -1}
-                      aria-label='Expand sidebar'
-                    >
-                      {brand.logoUrl ? (
-                        <Image
-                          src={brand.logoUrl}
-                          alt=''
-                          width={16}
-                          height={16}
-                          className='size-[16px] flex-shrink-0 object-contain group-hover:hidden'
-                          unoptimized
-                        />
-                      ) : (
-                        <Sim className='size-[16px] flex-shrink-0 group-hover:hidden' />
-                      )}
-                      <PanelLeft className='hidden size-[16px] rotate-180 text-[var(--text-icon)] group-hover:block' />
-                    </Link>
-                  </SidebarTooltip>
-                </div>
-              </div>
-              <SidebarTooltip label='Collapse sidebar' enabled={!isCollapsed} side='bottom'>
-                <button
-                  type='button'
-                  onClick={toggleCollapsed}
-                  className={cn(
-                    'sidebar-collapse-btn ml-auto flex h-[30px] items-center justify-center overflow-hidden rounded-lg transition-all duration-200 hover-hover:bg-[var(--surface-hover)]',
-                    isCollapsed ? 'w-0 opacity-0' : 'w-[30px] opacity-100'
-                  )}
-                  aria-label='Collapse sidebar'
-                >
-                  <PanelLeft className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-                </button>
-              </SidebarTooltip>
-            </div>
-
-            <div className='flex-shrink-0 pr-2.5 pl-[9px]'>
+          <div className='flex h-full flex-col'>
+            <div className='flex flex-shrink-0 items-center px-2 pt-3'>
               <WorkspaceHeader
                 activeWorkspace={activeWorkspace}
                 workspaceId={workspaceId}
@@ -1370,12 +1276,26 @@ export const Sidebar = memo(function Sidebar() {
                 isDeletingWorkspace={isDeletingWorkspace}
                 onColorChange={handleColorChangeWorkspace}
                 onUploadLogo={handleUploadLogo}
-                onRemoveLogo={handleRemoveLogo}
                 onLeaveWorkspace={handleLeaveWorkspaceWrapper}
                 isLeavingWorkspace={isLeavingWorkspace}
                 sessionUserId={sessionData?.user?.id}
                 isCollapsed={isCollapsed}
+                onExpandSidebar={toggleCollapsed}
               />
+              <SidebarTooltip label='Collapse sidebar' enabled={!isCollapsed} side='bottom'>
+                <button
+                  type='button'
+                  onClick={toggleCollapsed}
+                  className={cn(
+                    'sidebar-collapse-btn ml-2 flex h-[30px] items-center justify-center overflow-hidden rounded-lg transition-all duration-200 hover-hover:bg-[var(--surface-active)]',
+                    isCollapsed ? 'w-0 opacity-0' : 'w-[30px] opacity-100'
+                  )}
+                  aria-label='Collapse sidebar'
+                  tabIndex={isCollapsed ? -1 : undefined}
+                >
+                  <PanelLeft className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+                </button>
+              </SidebarTooltip>
             </div>
 
             {isOnSettingsPage ? (
@@ -1385,62 +1305,67 @@ export const Sidebar = memo(function Sidebar() {
               />
             ) : (
               <>
-                <div className='mt-2.5 flex flex-shrink-0 flex-col gap-0.5 px-2'>
+                <div
+                  className={cn(
+                    SIDEBAR_SECTION_GAP_CLASS,
+                    SIDEBAR_ITEM_GAP_CLASS,
+                    'flex flex-shrink-0 flex-col px-2 pb-1.5'
+                  )}
+                >
                   {topNavItems.map((item) => (
                     <SidebarNavItem
                       key={item.id}
                       item={item}
-                      active={item.href ? !!pathname?.startsWith(item.href) : false}
+                      active={isNavItemActive(item, pathname)}
                       showCollapsedTooltips={showCollapsedTooltips}
                       onContextMenu={item.href ? handleNavItemContextMenu : undefined}
                     />
                   ))}
                 </div>
 
-                <div className='mt-3.5 flex flex-shrink-0 flex-col pb-2'>
-                  <div className='px-4 pb-1.5'>
-                    <div className='font-base text-[var(--text-icon)] text-small'>Workspace</div>
-                  </div>
-                  <div className='flex flex-col gap-0.5 px-2'>
-                    {workspaceNavItems.map((item) => (
-                      <SidebarNavItem
-                        key={item.id}
-                        item={item}
-                        active={item.href ? !!pathname?.startsWith(item.href) : false}
-                        showCollapsedTooltips={showCollapsedTooltips}
-                        onContextMenu={handleNavItemContextMenu}
-                      />
-                    ))}
-                  </div>
-                </div>
-
                 <div
                   ref={isCollapsed ? undefined : scrollContainerRef}
                   className={cn(
-                    'flex flex-1 flex-col overflow-y-auto overflow-x-hidden border-t pt-2.5 transition-colors duration-150',
+                    'flex flex-1 flex-col overflow-y-auto overflow-x-hidden border-t pt-1.5 transition-colors duration-150',
                     !hasOverflowTop && 'border-transparent'
                   )}
                 >
                   <div ref={scrollContentRef} className='flex flex-col'>
+                    <div className='flex flex-shrink-0 flex-col'>
+                      <div className='px-4 pb-2'>
+                        <div className='text-[var(--text-muted)] text-small'>Workspace</div>
+                      </div>
+                      <div className={cn(SIDEBAR_ITEM_GAP_CLASS, 'flex flex-col px-2')}>
+                        {workspaceNavItems.map((item) => (
+                          <SidebarNavItem
+                            key={item.id}
+                            item={item}
+                            active={isNavItemActive(item, pathname)}
+                            showCollapsedTooltips={showCollapsedTooltips}
+                            onContextMenu={handleNavItemContextMenu}
+                          />
+                        ))}
+                      </div>
+                    </div>
+
                     <div
-                      className='tasks-section flex flex-shrink-0 flex-col'
-                      data-tour='nav-tasks'
+                      className={cn(
+                        SIDEBAR_SECTION_GAP_CLASS,
+                        'tasks-section flex flex-shrink-0 flex-col'
+                      )}
                     >
                       <div className='flex h-[18px] flex-shrink-0 items-center justify-between px-4'>
-                        <div className='font-base text-[var(--text-icon)] text-small'>
-                          All tasks
-                        </div>
+                        <div className='text-[var(--text-muted)] text-small'>Tasks</div>
                         {!isCollapsed && (
                           <div className='flex items-center justify-center gap-2'>
                             <Tooltip.Root>
                               <Tooltip.Trigger asChild>
                                 <Button
-                                  variant='ghost'
-                                  className='size-[18px] rounded-sm p-0 hover-hover:bg-[var(--surface-hover)]'
+                                  variant='quiet'
+                                  className='h-[18px] w-[18px] rounded-sm p-0'
                                   onClick={handleNewTask}
-                                  disabled={createTaskMutation.isPending}
                                 >
-                                  <Plus className='size-[16px]' />
+                                  <Plus className='h-[16px] w-[16px]' />
                                 </Button>
                               </Tooltip.Trigger>
                               <Tooltip.Content>
@@ -1457,13 +1382,13 @@ export const Sidebar = memo(function Sidebar() {
                           icon={tasksCollapsedIcon}
                           hover={tasksHover}
                           ariaLabel='Tasks'
-                          className='mt-1.5'
+                          className='mt-2'
                           primaryAction={tasksPrimaryAction}
                         >
                           {tasksLoading ? (
                             <DropdownMenuItem disabled>
-                              <Loader className='size-[14px]' animate />
-                              Loading…
+                              <Loader className='h-[14px] w-[14px]' animate />
+                              Loading...
                             </DropdownMenuItem>
                           ) : (
                             tasks.map((task) => (
@@ -1487,15 +1412,23 @@ export const Sidebar = memo(function Sidebar() {
                           )}
                         </CollapsedSidebarMenu>
                       ) : (
-                        <div className='mt-1.5 flex flex-col gap-0.5 px-2'>
+                        <div className={cn(SIDEBAR_ITEM_GAP_CLASS, 'mt-2 flex flex-col px-2')}>
                           {tasksLoading ? (
                             <SidebarItemSkeleton />
                           ) : (
                             <>
+                              {/* `selectTaskOnly` populates `selectedTasks` on every click, so
+                                  a single entry just means "last clicked" — already conveyed by
+                                  `isCurrentRoute`. Highlight from selection only for explicit
+                                  multi-selection (size > 1), otherwise it lingers after navigating
+                                  away from a task. */}
                               {tasks.slice(0, visibleTaskCount).map((task) => {
                                 const isCurrentRoute = pathname === task.href
                                 const isRenaming = taskFlyoutRename.editingId === task.id
-                                const isSelected = selectedTasks.has(task.id)
+                                const isSelected =
+                                  task.id !== 'new' &&
+                                  hasTaskMultiSelection &&
+                                  selectedTasks.has(task.id)
 
                                 if (isRenaming) {
                                   return (
@@ -1503,14 +1436,13 @@ export const Sidebar = memo(function Sidebar() {
                                       key={task.id}
                                       className='mx-0.5 flex h-[30px] items-center gap-2 rounded-lg bg-[var(--surface-active)] px-2 text-sm'
                                     >
-                                      <Blimp className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
                                       <input
                                         ref={taskFlyoutRename.inputRef}
                                         value={taskFlyoutRename.value}
                                         onChange={(e) => taskFlyoutRename.setValue(e.target.value)}
                                         onKeyDown={taskFlyoutRename.handleKeyDown}
                                         onBlur={handleTaskRenameBlur}
-                                        className='min-w-0 flex-1 border-none bg-transparent font-base text-[14px] text-[var(--text-body)] outline-none'
+                                        className='min-w-0 flex-1 border-none bg-transparent text-[14px] text-[var(--text-body)] outline-none'
                                       />
                                     </div>
                                   )
@@ -1534,14 +1466,17 @@ export const Sidebar = memo(function Sidebar() {
                                   />
                                 )
                               })}
-                              {tasks.length > visibleTaskCount && (
+                              {tasks.length > 5 && (
                                 <button
                                   type='button'
-                                  onClick={handleSeeMoreTasks}
-                                  className='mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-[var(--text-icon)] text-sm hover-hover:bg-[var(--surface-hover)]'
+                                  onClick={
+                                    tasks.length > visibleTaskCount
+                                      ? handleSeeMoreTasks
+                                      : handleSeeLessTasks
+                                  }
+                                  className='mx-0.5 flex h-[30px] items-center rounded-lg px-2 text-[var(--text-muted)] text-small hover-hover:bg-[var(--surface-active)]'
                                 >
-                                  <MoreHorizontal className='size-[16px] flex-shrink-0' />
-                                  <span className='font-base'>See more</span>
+                                  {tasks.length > visibleTaskCount ? 'See more' : 'See less'}
                                 </button>
                               )}
                             </>
@@ -1551,13 +1486,13 @@ export const Sidebar = memo(function Sidebar() {
                     </div>
 
                     <div
-                      className='workflows-section relative mt-3.5 flex flex-col'
-                      data-tour='nav-workflows'
+                      className={cn(
+                        SIDEBAR_SECTION_GAP_CLASS,
+                        'workflows-section relative flex flex-col'
+                      )}
                     >
                       <div className='flex h-[18px] flex-shrink-0 items-center justify-between px-4'>
-                        <div className='font-base text-[var(--text-icon)] text-small'>
-                          Workflows
-                        </div>
+                        <div className='text-[var(--text-muted)] text-small'>Workflows</div>
                         {!isCollapsed && (
                           <div className='flex items-center justify-center gap-2'>
                             <DropdownMenu>
@@ -1565,14 +1500,14 @@ export const Sidebar = memo(function Sidebar() {
                                 <Tooltip.Trigger asChild>
                                   <DropdownMenuTrigger asChild>
                                     <Button
-                                      variant='ghost'
-                                      className='size-[18px] rounded-sm p-0 hover-hover:bg-[var(--surface-hover)]'
-                                      disabled={!canEdit}
+                                      variant='quiet'
+                                      className='h-[18px] w-[18px] rounded-sm p-0'
+                                      disabled={!permissionsLoading && !canEdit}
                                     >
                                       {isImporting || isCreatingFolder ? (
-                                        <Loader className='size-[16px]' animate />
+                                        <Loader className='h-[16px] w-[16px]' animate />
                                       ) : (
-                                        <MoreHorizontal className='size-[16px]' />
+                                        <MoreHorizontal className='h-[16px] w-[16px]' />
                                       )}
                                     </Button>
                                   </DropdownMenuTrigger>
@@ -1590,7 +1525,7 @@ export const Sidebar = memo(function Sidebar() {
                                   onSelect={handleImportWorkflow}
                                   disabled={!canEdit || isImporting}
                                 >
-                                  <Download />
+                                  <Upload />
                                   {isImporting ? 'Importing...' : 'Import workflow'}
                                 </DropdownMenuItem>
                                 <DropdownMenuItem
@@ -1605,17 +1540,17 @@ export const Sidebar = memo(function Sidebar() {
                             <Tooltip.Root>
                               <Tooltip.Trigger asChild>
                                 <Button
-                                  variant='ghost'
-                                  className='size-[18px] rounded-sm p-0 hover-hover:bg-[var(--surface-hover)]'
+                                  variant='quiet'
+                                  className='h-[18px] w-[18px] rounded-sm p-0'
                                   onClick={handleCreateWorkflow}
-                                  disabled={isCreatingWorkflow || !canEdit}
+                                  disabled={isCreatingWorkflow || (!permissionsLoading && !canEdit)}
                                 >
-                                  <Plus className='size-[16px]' />
+                                  <Plus className='h-[16px] w-[16px]' />
                                 </Button>
                               </Tooltip.Trigger>
                               <Tooltip.Content>
                                 {isCreatingWorkflow ? (
-                                  <p>Creating workflow…</p>
+                                  <p>Creating workflow...</p>
                                 ) : (
                                   <Tooltip.Shortcut keys={isMac ? '⌘⇧P' : 'Ctrl+Shift+P'}>
                                     New workflow
@@ -1631,13 +1566,13 @@ export const Sidebar = memo(function Sidebar() {
                           icon={workflowsCollapsedIcon}
                           hover={workflowsHover}
                           ariaLabel='Workflows'
-                          className='mt-1.5'
+                          className='mt-2'
                           primaryAction={workflowsPrimaryAction}
                         >
                           {workflowsLoading && regularWorkflows.length === 0 ? (
                             <DropdownMenuItem disabled>
-                              <Loader className='size-[14px]' animate />
-                              Loading…
+                              <Loader className='h-[14px] w-[14px]' animate />
+                              Loading...
                             </DropdownMenuItem>
                           ) : regularWorkflows.length === 0 ? (
                             <DropdownMenuItem disabled>No workflows yet</DropdownMenuItem>
@@ -1687,23 +1622,24 @@ export const Sidebar = memo(function Sidebar() {
                           )}
                         </CollapsedSidebarMenu>
                       ) : (
-                        <div className='mt-1.5 px-2'>
-                          {workflowsLoading && regularWorkflows.length === 0 && (
+                        <div className='mt-2 px-2'>
+                          {workflowsLoading && regularWorkflows.length === 0 ? (
                             <SidebarItemSkeleton />
+                          ) : (
+                            <WorkflowList
+                              workspaceId={workspaceId}
+                              workflowId={workflowId}
+                              regularWorkflows={regularWorkflows}
+                              isLoading={isLoading}
+                              canReorder={canEdit}
+                              handleFileChange={handleImportFileChange}
+                              fileInputRef={fileInputRef}
+                              scrollContainerRef={scrollContainerRef}
+                              onCreateWorkflow={handleCreateWorkflow}
+                              onCreateFolder={handleCreateFolder}
+                              disableCreate={!canEdit || isCreatingWorkflow || isCreatingFolder}
+                            />
                           )}
-                          <WorkflowList
-                            workspaceId={workspaceId}
-                            workflowId={workflowId}
-                            regularWorkflows={regularWorkflows}
-                            isLoading={isLoading}
-                            canReorder={canEdit}
-                            handleFileChange={handleImportFileChange}
-                            fileInputRef={fileInputRef}
-                            scrollContainerRef={scrollContainerRef}
-                            onCreateWorkflow={handleCreateWorkflow}
-                            onCreateFolder={handleCreateFolder}
-                            disableCreate={!canEdit || isCreatingWorkflow || isCreatingFolder}
-                          />
                         </div>
                       )}
                     </div>
@@ -1712,7 +1648,8 @@ export const Sidebar = memo(function Sidebar() {
 
                 <div
                   className={cn(
-                    'flex flex-shrink-0 flex-col gap-0.5 border-t px-2 pt-[9px] pb-2 transition-colors duration-150',
+                    SIDEBAR_ITEM_GAP_CLASS,
+                    'flex flex-shrink-0 flex-col border-t px-2 pt-[9px] pb-2 transition-colors duration-150',
                     !hasOverflowBottom && 'border-transparent'
                   )}
                 >
@@ -1722,10 +1659,10 @@ export const Sidebar = memo(function Sidebar() {
                         <button
                           type='button'
                           data-item-id='help'
-                          className='group mx-0.5 flex h-[30px] items-center gap-2 rounded-[8px] px-2 text-[14px] hover-hover:bg-[var(--surface-hover)]'
+                          className='group mx-0.5 flex h-[30px] items-center gap-2 rounded-[8px] px-2 text-[14px] hover-hover:bg-[var(--surface-active)]'
                         >
-                          <HelpCircle className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-                          <span className='sidebar-collapse-hide truncate font-base text-[var(--text-body)]'>
+                          <HelpCircle className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+                          <span className='sidebar-collapse-hide truncate text-[var(--text-body)]'>
                             Help
                           </span>
                         </button>
@@ -1733,17 +1670,13 @@ export const Sidebar = memo(function Sidebar() {
                     </SidebarTooltip>
                     <DropdownMenuContent align='start' side='top' sideOffset={4}>
                       <DropdownMenuItem onSelect={handleOpenDocs}>
-                        <BookOpen className='size-[14px]' />
+                        <BookOpen className='h-[14px] w-[14px]' />
                         Docs
                       </DropdownMenuItem>
                       <DropdownMenuItem onSelect={handleOpenHelpFromMenu}>
-                        <HelpCircle className='size-[14px]' />
+                        <HelpCircle className='h-[14px] w-[14px]' />
                         Report an issue
                       </DropdownMenuItem>
-                      <DropdownMenuItem onSelect={handleStartTour}>
-                        <Compass className='size-[14px]' />
-                        Take a tour
-                      </DropdownMenuItem>
                     </DropdownMenuContent>
                   </DropdownMenu>
 
@@ -1807,19 +1740,21 @@ export const Sidebar = memo(function Sidebar() {
           </div>
         </aside>
 
-        <div
-          className={cn(
-            'absolute top-0 right-0 bottom-0 z-20 w-[8px] translate-x-1/2',
-            isCollapsed ? 'cursor-e-resize' : 'cursor-ew-resize'
-          )}
-          onMouseDown={isCollapsed ? undefined : handleMouseDown}
-          onClick={isCollapsed ? toggleCollapsed : undefined}
-          onKeyDown={handleEdgeKeyDown}
-          role={isCollapsed ? 'button' : 'separator'}
-          tabIndex={0}
-          aria-orientation={isCollapsed ? undefined : 'vertical'}
-          aria-label={isCollapsed ? 'Expand sidebar' : 'Resize sidebar'}
-        />
+        {(isCollapsed || isOnWorkflowPage) && (
+          <div
+            className={cn(
+              'absolute top-0 right-0 bottom-0 z-20 w-[8px] translate-x-1/2',
+              isCollapsed ? 'cursor-e-resize' : 'cursor-ew-resize'
+            )}
+            onMouseDown={isCollapsed ? undefined : handleMouseDown}
+            onClick={isCollapsed ? toggleCollapsed : undefined}
+            onKeyDown={isCollapsed ? handleEdgeKeyDown : undefined}
+            role={isCollapsed ? 'button' : 'separator'}
+            tabIndex={isCollapsed ? 0 : undefined}
+            aria-orientation={isCollapsed ? undefined : 'vertical'}
+            aria-label={isCollapsed ? 'Expand sidebar' : 'Resize sidebar'}
+          />
+        )}
       </div>
 
       <SearchModal
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/utils.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/utils.ts
index 848f0771cb0..7d3e896e298 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/utils.ts
@@ -36,8 +36,6 @@ export type SidebarDragGhostIcon =
 
 const FOLDER_SVG = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>`
 
-const BLIMP_SVG = `<svg width="14" height="14" viewBox="1.25 1.25 18 18" fill="currentColor" stroke="currentColor" stroke-width="0.75" stroke-linejoin="round" aria-hidden="true"><path transform="translate(20.5, 0) scale(-1, 1)" d="M18.24 9.18C18.16 8.94 18 8.74 17.83 8.56L17.83 8.56C17.67 8.4 17.49 8.25 17.3 8.11V5.48C17.3 5.32 17.24 5.17 17.14 5.06C17.06 4.95 16.93 4.89 16.79 4.89H15.93C15.61 4.89 15.32 5.11 15.19 5.44L14.68 6.77C14.05 6.51 13.23 6.22 12.15 6C11.04 5.77 9.66 5.61 7.9 5.61C5.97 5.61 4.56 6.13 3.61 6.89C3.14 7.28 2.78 7.72 2.54 8.19C2.29 8.66 2.18 9.15 2.18 9.63C2.18 10.1 2.29 10.59 2.52 11.06C2.87 11.76 3.48 12.41 4.34 12.89C4.91 13.2 5.61 13.44 6.43 13.56L6.8 14.78C6.94 15.27 7.33 15.59 7.78 15.59H10.56C11.06 15.59 11.48 15.18 11.58 14.61L11.81 13.29C12.31 13.2 12.75 13.09 13.14 12.99C13.74 12.82 14.24 12.64 14.67 12.48L15.19 13.82C15.32 14.16 15.61 14.38 15.93 14.38H16.79C16.93 14.38 17.06 14.31 17.14 14.2C17.24 14.1 17.29 13.95 17.3 13.79V11.15C17.33 11.12 17.37 11.09 17.42 11.07L17.4 11.07L17.42 11.07C17.65 10.89 17.87 10.69 18.04 10.46C18.12 10.35 18.19 10.22 18.24 10.08C18.29 9.94 18.32 9.79 18.32 9.63C18.32 9.47 18.29 9.32 18.24 9.18Z"/></svg>`
-
 /**
  * Creates a lightweight drag ghost pill showing an icon and label for the item(s) being dragged.
  * Append to `document.body`, pass to `e.dataTransfer.setDragImage`, then remove on dragend.
@@ -73,11 +71,20 @@ export function createSidebarDragGhost(label: string, icon?: SidebarDragGhostIco
         background: ${icon.color}; background-clip: padding-box;
       `
       ghost.appendChild(square)
+    } else if (icon.kind === 'task') {
+      const circle = document.createElement('div')
+      circle.style.cssText = `
+        width: 14px; height: 14px; flex-shrink: 0;
+        border-radius: 9999px;
+        border: 2px solid color-mix(in srgb, var(--text-icon) 38%, transparent);
+        background: var(--text-icon); background-clip: padding-box;
+      `
+      ghost.appendChild(circle)
     } else {
       const iconWrapper = document.createElement('div')
       iconWrapper.style.cssText =
         'display: flex; align-items: center; flex-shrink: 0; color: var(--text-icon);'
-      iconWrapper.innerHTML = icon.kind === 'folder' ? FOLDER_SVG : BLIMP_SVG
+      iconWrapper.innerHTML = FOLDER_SVG
       ghost.appendChild(iconWrapper)
     }
   }
diff --git a/apps/sim/blocks/blocks/a2a.ts b/apps/sim/blocks/blocks/a2a.ts
index 44b70d3803d..06d6bd68f63 100644
--- a/apps/sim/blocks/blocks/a2a.ts
+++ b/apps/sim/blocks/blocks/a2a.ts
@@ -63,8 +63,8 @@ export const A2ABlock: BlockConfig<A2AResponse> = {
     'Send messages, query task status, cancel tasks, or discover agent capabilities. ' +
     'Compatible with any A2A-compliant agent including LangGraph, Google ADK, and other Sim workflows.',
   docsLink: 'https://docs.sim.ai/blocks/a2a',
-  category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  category: 'blocks',
+  integrationType: IntegrationType.DevOps,
   tags: ['agentic', 'automation'],
   bgColor: '#4151B5',
   icon: A2AIcon,
diff --git a/apps/sim/blocks/blocks/ahrefs.ts b/apps/sim/blocks/blocks/ahrefs.ts
index 02857936b5c..19a90763e07 100644
--- a/apps/sim/blocks/blocks/ahrefs.ts
+++ b/apps/sim/blocks/blocks/ahrefs.ts
@@ -14,7 +14,7 @@ export const AhrefsBlock: BlockConfig<AhrefsResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Analytics,
   tags: ['seo', 'marketing', 'data-analytics'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: AhrefsIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/airtable.ts b/apps/sim/blocks/blocks/airtable.ts
index dd1a4b61d97..302cf5ee7dd 100644
--- a/apps/sim/blocks/blocks/airtable.ts
+++ b/apps/sim/blocks/blocks/airtable.ts
@@ -16,7 +16,7 @@ export const AirtableBlock: BlockConfig<AirtableResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Databases,
   tags: ['spreadsheet', 'automation'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: AirtableIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/api.ts b/apps/sim/blocks/blocks/api.ts
index 8eafbb423e3..dd1b79b4ecc 100644
--- a/apps/sim/blocks/blocks/api.ts
+++ b/apps/sim/blocks/blocks/api.ts
@@ -14,7 +14,7 @@ export const ApiBlock: BlockConfig<RequestResponse> = {
   - Curl the endpoint yourself before filling out the API block to make sure it's working IF you have the necessary authentication headers. Clarify with the user if you need any additional headers.
   `,
   category: 'blocks',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.DevOps,
   tags: ['automation', 'webhooks'],
   bgColor: '#2F55FF',
   icon: ApiIcon,
diff --git a/apps/sim/blocks/blocks/apify.ts b/apps/sim/blocks/blocks/apify.ts
index 4db48fcc194..4e974345e3b 100644
--- a/apps/sim/blocks/blocks/apify.ts
+++ b/apps/sim/blocks/blocks/apify.ts
@@ -13,7 +13,7 @@ export const ApifyBlock: BlockConfig<RunActorResult> = {
   category: 'tools',
   integrationType: IntegrationType.Search,
   tags: ['web-scraping', 'automation', 'data-analytics'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: ApifyIcon,
 
   subBlocks: [
diff --git a/apps/sim/blocks/blocks/arxiv.ts b/apps/sim/blocks/blocks/arxiv.ts
index c7bbbe1d905..34ebb82bf5a 100644
--- a/apps/sim/blocks/blocks/arxiv.ts
+++ b/apps/sim/blocks/blocks/arxiv.ts
@@ -13,7 +13,7 @@ export const ArxivBlock: BlockConfig<ArxivResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Search,
   tags: ['document-processing', 'knowledge-base'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: ArxivIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/asana.ts b/apps/sim/blocks/blocks/asana.ts
index 13e0e072725..b01bff2d382 100644
--- a/apps/sim/blocks/blocks/asana.ts
+++ b/apps/sim/blocks/blocks/asana.ts
@@ -14,7 +14,7 @@ export const AsanaBlock: BlockConfig<AsanaResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Productivity,
   tags: ['project-management', 'ticketing', 'automation'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: AsanaIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/attio.ts b/apps/sim/blocks/blocks/attio.ts
index 056d4c4e2ba..79691828c7c 100644
--- a/apps/sim/blocks/blocks/attio.ts
+++ b/apps/sim/blocks/blocks/attio.ts
@@ -12,7 +12,7 @@ export const AttioBlock: BlockConfig<AttioResponse> = {
     'Connect to Attio to manage CRM records (people, companies, custom objects), notes, tasks, lists, list entries, comments, workspace members, and webhooks.',
   docsLink: 'https://docs.sim.ai/tools/attio',
   category: 'tools',
-  integrationType: IntegrationType.CRM,
+  integrationType: IntegrationType.Sales,
   tags: ['sales-engagement', 'enrichment'],
   bgColor: '#1D1E20',
   icon: AttioIcon,
diff --git a/apps/sim/blocks/blocks/box.ts b/apps/sim/blocks/blocks/box.ts
index 27318f83531..a3ec6d33ca5 100644
--- a/apps/sim/blocks/blocks/box.ts
+++ b/apps/sim/blocks/blocks/box.ts
@@ -12,7 +12,7 @@ export const BoxBlock: BlockConfig = {
     'Integrate Box into your workflow to manage files, folders, and e-signatures. Upload and download files, search content, create folders, send documents for e-signature, track signing status, and more.',
   docsLink: 'https://docs.sim.ai/tools/box',
   category: 'tools',
-  integrationType: IntegrationType.FileStorage,
+  integrationType: IntegrationType.Documents,
   tags: ['cloud', 'content-management', 'e-signatures'],
   bgColor: '#FFFFFF',
   icon: BoxCompanyIcon,
diff --git a/apps/sim/blocks/blocks/brightdata.ts b/apps/sim/blocks/blocks/brightdata.ts
index ffc0dc1c385..2d23e62f510 100644
--- a/apps/sim/blocks/blocks/brightdata.ts
+++ b/apps/sim/blocks/blocks/brightdata.ts
@@ -14,7 +14,7 @@ export const BrightDataBlock: BlockConfig<BrightDataResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Search,
   tags: ['web-scraping', 'automation'],
-  bgColor: '#FFFFFF',
+  bgColor: '#0F4C81',
   icon: BrightDataIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/browser_use.ts b/apps/sim/blocks/blocks/browser_use.ts
index 1d8c8c28999..2dae6f57f4b 100644
--- a/apps/sim/blocks/blocks/browser_use.ts
+++ b/apps/sim/blocks/blocks/browser_use.ts
@@ -10,7 +10,7 @@ export const BrowserUseBlock: BlockConfig<BrowserUseResponse> = {
   longDescription:
     'Integrate Browser Use into the workflow. Can navigate the web and perform actions as if a real user was interacting with the browser.',
   docsLink: 'https://docs.sim.ai/tools/browser_use',
-  category: 'tools',
+  category: 'blocks',
   integrationType: IntegrationType.AI,
   tags: ['web-scraping', 'automation', 'agentic'],
   bgColor: '#181C1E',
diff --git a/apps/sim/blocks/blocks/clay.ts b/apps/sim/blocks/blocks/clay.ts
index afb10ba852a..57ef4a6a119 100644
--- a/apps/sim/blocks/blocks/clay.ts
+++ b/apps/sim/blocks/blocks/clay.ts
@@ -12,7 +12,7 @@ export const ClayBlock: BlockConfig<ClayPopulateResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Sales,
   tags: ['enrichment', 'sales-engagement', 'data-analytics'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: ClayIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/cloudflare.ts b/apps/sim/blocks/blocks/cloudflare.ts
index 9ef661fc819..cd6d32ac548 100644
--- a/apps/sim/blocks/blocks/cloudflare.ts
+++ b/apps/sim/blocks/blocks/cloudflare.ts
@@ -11,7 +11,7 @@ export const CloudflareBlock: BlockConfig<CloudflareResponse> = {
     'Integrate Cloudflare into the workflow. Manage zones (domains), DNS records, SSL/TLS certificates, zone settings, DNS analytics, and cache purging via the Cloudflare API.',
   docsLink: 'https://docs.sim.ai/tools/cloudflare',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.DevOps,
   tags: ['cloud', 'monitoring'],
   bgColor: '#F5F6FA',
   icon: CloudflareIcon,
diff --git a/apps/sim/blocks/blocks/cloudformation.ts b/apps/sim/blocks/blocks/cloudformation.ts
index ab5456d4c52..d4966294ae8 100644
--- a/apps/sim/blocks/blocks/cloudformation.ts
+++ b/apps/sim/blocks/blocks/cloudformation.ts
@@ -26,7 +26,7 @@ export const CloudFormationBlock: BlockConfig<
   longDescription:
     'Integrate AWS CloudFormation into workflows. Describe stacks, list resources, detect drift, view stack events, retrieve templates, and validate templates. Requires AWS access key and secret access key.',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.DevOps,
   tags: ['cloud'],
   docsLink: 'https://docs.sim.ai/tools/cloudformation',
   bgColor: 'linear-gradient(45deg, #B0084D 0%, #FF4F8B 100%)',
diff --git a/apps/sim/blocks/blocks/cloudwatch.ts b/apps/sim/blocks/blocks/cloudwatch.ts
index cbb303ceda8..0662a803ee1 100644
--- a/apps/sim/blocks/blocks/cloudwatch.ts
+++ b/apps/sim/blocks/blocks/cloudwatch.ts
@@ -32,7 +32,7 @@ export const CloudWatchBlock: BlockConfig<
   longDescription:
     'Integrate AWS CloudWatch into workflows. Run Log Insights queries, list log groups, retrieve log events, list and get metrics, and monitor alarms. Requires AWS access key and secret access key.',
   category: 'tools',
-  integrationType: IntegrationType.Analytics,
+  integrationType: IntegrationType.Observability,
   docsLink: 'https://docs.sim.ai/tools/cloudwatch',
   tags: ['cloud', 'monitoring'],
   bgColor: 'linear-gradient(45deg, #B0084D 0%, #FF4F8B 100%)',
diff --git a/apps/sim/blocks/blocks/confluence.ts b/apps/sim/blocks/blocks/confluence.ts
index bb45ee2a838..aaf12de2aba 100644
--- a/apps/sim/blocks/blocks/confluence.ts
+++ b/apps/sim/blocks/blocks/confluence.ts
@@ -18,7 +18,7 @@ export const ConfluenceBlock: BlockConfig<ConfluenceResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Documents,
   tags: ['knowledge-base', 'content-management', 'note-taking'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: ConfluenceIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/cursor.ts b/apps/sim/blocks/blocks/cursor.ts
index b6ef6a52411..802b3942112 100644
--- a/apps/sim/blocks/blocks/cursor.ts
+++ b/apps/sim/blocks/blocks/cursor.ts
@@ -12,7 +12,7 @@ export const CursorBlock: BlockConfig<CursorResponse> = {
     'Interact with Cursor Cloud Agents API to launch AI agents that can work on your GitHub repositories. Supports launching agents, adding follow-up instructions, checking status, viewing conversations, and managing agent lifecycle.',
   docsLink: 'https://cursor.com/docs/cloud-agent/api/endpoints',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.DevOps,
   tags: ['agentic', 'automation'],
   bgColor: '#1E1E1E',
   icon: CursorIcon,
diff --git a/apps/sim/blocks/blocks/dagster.ts b/apps/sim/blocks/blocks/dagster.ts
index 2446a4af417..632fdf67c5f 100644
--- a/apps/sim/blocks/blocks/dagster.ts
+++ b/apps/sim/blocks/blocks/dagster.ts
@@ -11,7 +11,7 @@ export const DagsterBlock: BlockConfig<DagsterResponse> = {
     'Connect to a Dagster instance to launch job runs, monitor run status, list available jobs across repositories, terminate or delete runs, reexecute failed runs, fetch run logs, and manage schedules and sensors. API token only required for Dagster+.',
   docsLink: 'https://docs.sim.ai/tools/dagster',
   category: 'tools',
-  integrationType: IntegrationType.Analytics,
+  integrationType: IntegrationType.Observability,
   tags: ['data-analytics', 'automation'],
   bgColor: '#ffffff',
   icon: DagsterIcon,
diff --git a/apps/sim/blocks/blocks/datadog.ts b/apps/sim/blocks/blocks/datadog.ts
index c66ad2dc1e4..87ee1c926b9 100644
--- a/apps/sim/blocks/blocks/datadog.ts
+++ b/apps/sim/blocks/blocks/datadog.ts
@@ -12,7 +12,7 @@ export const DatadogBlock: BlockConfig<DatadogResponse> = {
     'Integrate Datadog monitoring into workflows. Submit metrics, manage monitors, query logs, create events, handle downtimes, and more.',
   docsLink: 'https://docs.sim.ai/tools/datadog',
   category: 'tools',
-  integrationType: IntegrationType.Analytics,
+  integrationType: IntegrationType.Observability,
   tags: ['monitoring', 'incident-management', 'error-tracking'],
   bgColor: '#632CA6',
   icon: DatadogIcon,
diff --git a/apps/sim/blocks/blocks/devin.ts b/apps/sim/blocks/blocks/devin.ts
index 291722e7d7d..6ea43cf1f1c 100644
--- a/apps/sim/blocks/blocks/devin.ts
+++ b/apps/sim/blocks/blocks/devin.ts
@@ -17,7 +17,7 @@ export const DevinBlock: BlockConfig = {
   `,
   docsLink: 'https://docs.sim.ai/tools/devin',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.DevOps,
   tags: ['agentic', 'automation'],
   bgColor: '#12141A',
   icon: DevinIcon,
diff --git a/apps/sim/blocks/blocks/dropbox.ts b/apps/sim/blocks/blocks/dropbox.ts
index 12907877261..d12118f761a 100644
--- a/apps/sim/blocks/blocks/dropbox.ts
+++ b/apps/sim/blocks/blocks/dropbox.ts
@@ -14,7 +14,7 @@ export const DropboxBlock: BlockConfig<DropboxResponse> = {
     'Integrate Dropbox into your workflow for file management, sharing, and collaboration. Upload files, download content, create folders, manage shared links, and more.',
   docsLink: 'https://docs.sim.ai/tools/dropbox',
   category: 'tools',
-  integrationType: IntegrationType.FileStorage,
+  integrationType: IntegrationType.Documents,
   tags: ['cloud', 'document-processing'],
   icon: DropboxIcon,
   bgColor: '#0061FF',
diff --git a/apps/sim/blocks/blocks/dspy.ts b/apps/sim/blocks/blocks/dspy.ts
index 5cf823d99c8..e650a6a35e0 100644
--- a/apps/sim/blocks/blocks/dspy.ts
+++ b/apps/sim/blocks/blocks/dspy.ts
@@ -11,7 +11,7 @@ export const DSPyBlock: BlockConfig = {
   category: 'tools',
   integrationType: IntegrationType.AI,
   tags: ['llm', 'agentic', 'automation'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: DsPyIcon,
 
   subBlocks: [
diff --git a/apps/sim/blocks/blocks/dub.ts b/apps/sim/blocks/blocks/dub.ts
index 4894ab11523..9e2fc47f589 100644
--- a/apps/sim/blocks/blocks/dub.ts
+++ b/apps/sim/blocks/blocks/dub.ts
@@ -12,7 +12,7 @@ export const DubBlock: BlockConfig<DubResponse> = {
     'Create, manage, and track short links with Dub. Supports custom domains, UTM parameters, link analytics, and more.',
   docsLink: 'https://docs.sim.ai/tools/dub',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.DevOps,
   tags: ['link-management', 'marketing', 'data-analytics'],
   bgColor: '#181C1E',
   icon: DubIcon,
diff --git a/apps/sim/blocks/blocks/elasticsearch.ts b/apps/sim/blocks/blocks/elasticsearch.ts
index 952b2884555..476d2bf557c 100644
--- a/apps/sim/blocks/blocks/elasticsearch.ts
+++ b/apps/sim/blocks/blocks/elasticsearch.ts
@@ -14,7 +14,7 @@ export const ElasticsearchBlock: BlockConfig<ElasticsearchResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Databases,
   tags: ['vector-search', 'data-analytics'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: ElasticsearchIcon,
   subBlocks: [
     // Operation selector
diff --git a/apps/sim/blocks/blocks/evaluator.ts b/apps/sim/blocks/blocks/evaluator.ts
index bb53e6867b4..a8aab9d551a 100644
--- a/apps/sim/blocks/blocks/evaluator.ts
+++ b/apps/sim/blocks/blocks/evaluator.ts
@@ -154,7 +154,7 @@ export const EvaluatorBlock: BlockConfig<EvaluatorResponse> = {
   longDescription:
     'This is a core workflow block. Assess content quality using customizable evaluation metrics and scoring criteria. Create objective evaluation frameworks with numeric scoring to measure performance across multiple dimensions.',
   docsLink: 'https://docs.sim.ai/blocks/evaluator',
-  category: 'tools',
+  category: 'blocks',
   bgColor: '#4D5FFF',
   icon: ChartBarIcon,
   subBlocks: [
diff --git a/apps/sim/blocks/blocks/evernote.ts b/apps/sim/blocks/blocks/evernote.ts
index af80ad1cd82..d29e63bef0d 100644
--- a/apps/sim/blocks/blocks/evernote.ts
+++ b/apps/sim/blocks/blocks/evernote.ts
@@ -12,7 +12,7 @@ export const EvernoteBlock: BlockConfig = {
   category: 'tools',
   integrationType: IntegrationType.Documents,
   tags: ['note-taking', 'knowledge-base'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: EvernoteIcon,
   authMode: AuthMode.ApiKey,
 
diff --git a/apps/sim/blocks/blocks/file.ts b/apps/sim/blocks/blocks/file.ts
index 43904e9816f..fd6dc27f4d6 100644
--- a/apps/sim/blocks/blocks/file.ts
+++ b/apps/sim/blocks/blocks/file.ts
@@ -53,8 +53,8 @@ export const FileBlock: BlockConfig<FileParserOutput> = {
   - You should always use the File URL input method and enter the file URL if the user gives it to you or clarify if they have one.
   `,
   docsLink: 'https://docs.sim.ai/tools/file',
-  category: 'tools',
-  integrationType: IntegrationType.FileStorage,
+  category: 'blocks',
+  integrationType: IntegrationType.Documents,
   tags: ['document-processing'],
   bgColor: '#40916C',
   icon: DocumentIcon,
@@ -254,8 +254,8 @@ export const FileV3Block: BlockConfig<FileParserV3Output> = {
   longDescription:
     'Read and parse files from uploads or URLs, write new workspace files, or append content to existing files.',
   docsLink: 'https://docs.sim.ai/tools/file',
-  category: 'tools',
-  integrationType: IntegrationType.FileStorage,
+  category: 'blocks',
+  integrationType: IntegrationType.Documents,
   tags: ['document-processing'],
   bgColor: '#40916C',
   icon: DocumentIcon,
diff --git a/apps/sim/blocks/blocks/gamma.ts b/apps/sim/blocks/blocks/gamma.ts
index 5def6c2f201..d96a016a813 100644
--- a/apps/sim/blocks/blocks/gamma.ts
+++ b/apps/sim/blocks/blocks/gamma.ts
@@ -10,7 +10,7 @@ export const GammaBlock: BlockConfig<GammaResponse> = {
     'Integrate Gamma into the workflow. Can generate presentations, documents, webpages, and social posts from text, create from templates, check generation status, and browse themes and folders.',
   docsLink: 'https://docs.sim.ai/tools/gamma',
   category: 'tools',
-  integrationType: IntegrationType.Design,
+  integrationType: IntegrationType.Marketing,
   tags: ['document-processing', 'content-management'],
   bgColor: '#002253',
   icon: GammaIcon,
diff --git a/apps/sim/blocks/blocks/github.ts b/apps/sim/blocks/blocks/github.ts
index 4ce959f28e7..2f3a6bbce23 100644
--- a/apps/sim/blocks/blocks/github.ts
+++ b/apps/sim/blocks/blocks/github.ts
@@ -14,7 +14,7 @@ export const GitHubBlock: BlockConfig<GitHubResponse> = {
     'Integrate Github into the workflow. Can get get PR details, create PR comment, get repository info, and get latest commit. Can be used in trigger mode to trigger a workflow when a PR is created, commented on, or a commit is pushed.',
   docsLink: 'https://docs.sim.ai/tools/github',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.DevOps,
   tags: ['version-control', 'ci-cd'],
   bgColor: '#181C1E',
   icon: GithubIcon,
@@ -2025,7 +2025,7 @@ export const GitHubV2Block: BlockConfig<GitHubResponse> = {
   type: 'github_v2',
   name: 'GitHub',
   hideFromToolbar: false,
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.DevOps,
   tags: ['version-control', 'ci-cd'],
   tools: {
     ...GitHubBlock.tools,
diff --git a/apps/sim/blocks/blocks/gitlab.ts b/apps/sim/blocks/blocks/gitlab.ts
index 845ffa4f07e..564970f1333 100644
--- a/apps/sim/blocks/blocks/gitlab.ts
+++ b/apps/sim/blocks/blocks/gitlab.ts
@@ -13,10 +13,10 @@ export const GitLabBlock: BlockConfig<GitLabResponse> = {
     'Integrate GitLab into the workflow. Can manage projects, issues, merge requests, pipelines, and add comments. Supports all core GitLab DevOps operations.',
   docsLink: 'https://docs.sim.ai/tools/gitlab',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.DevOps,
   tags: ['version-control', 'ci-cd'],
   icon: GitLabIcon,
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   subBlocks: [
     {
       id: 'operation',
diff --git a/apps/sim/blocks/blocks/gmail.ts b/apps/sim/blocks/blocks/gmail.ts
index 4385e909521..bb202976450 100644
--- a/apps/sim/blocks/blocks/gmail.ts
+++ b/apps/sim/blocks/blocks/gmail.ts
@@ -54,7 +54,7 @@ export const GmailBlock: BlockConfig<GmailToolResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Email,
   tags: ['google-workspace', 'messaging'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GmailIcon,
   hideFromToolbar: true,
   triggerAllowed: true,
diff --git a/apps/sim/blocks/blocks/google.ts b/apps/sim/blocks/blocks/google.ts
index c7370af563b..58d3afaa547 100644
--- a/apps/sim/blocks/blocks/google.ts
+++ b/apps/sim/blocks/blocks/google.ts
@@ -13,7 +13,7 @@ export const GoogleSearchBlock: BlockConfig<GoogleSearchResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Search,
   tags: ['google-workspace', 'web-scraping', 'seo'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleIcon,
 
   subBlocks: [
diff --git a/apps/sim/blocks/blocks/google_ads.ts b/apps/sim/blocks/blocks/google_ads.ts
index 599f191d400..31a94b69fa5 100644
--- a/apps/sim/blocks/blocks/google_ads.ts
+++ b/apps/sim/blocks/blocks/google_ads.ts
@@ -13,7 +13,7 @@ export const GoogleAdsBlock: BlockConfig = {
   category: 'tools',
   integrationType: IntegrationType.Analytics,
   tags: ['marketing', 'google-workspace', 'data-analytics'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleAdsIcon,
   authMode: AuthMode.OAuth,
   subBlocks: [
diff --git a/apps/sim/blocks/blocks/google_bigquery.ts b/apps/sim/blocks/blocks/google_bigquery.ts
index 54c668780c0..8bb8d3256df 100644
--- a/apps/sim/blocks/blocks/google_bigquery.ts
+++ b/apps/sim/blocks/blocks/google_bigquery.ts
@@ -13,7 +13,7 @@ export const GoogleBigQueryBlock: BlockConfig = {
   category: 'tools',
   integrationType: IntegrationType.Databases,
   tags: ['data-warehouse', 'google-workspace', 'data-analytics'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleBigQueryIcon,
   authMode: AuthMode.OAuth,
   subBlocks: [
diff --git a/apps/sim/blocks/blocks/google_books.ts b/apps/sim/blocks/blocks/google_books.ts
index 033fd12948b..e733a9c9650 100644
--- a/apps/sim/blocks/blocks/google_books.ts
+++ b/apps/sim/blocks/blocks/google_books.ts
@@ -13,7 +13,7 @@ export const GoogleBooksBlock: BlockConfig = {
   category: 'tools',
   integrationType: IntegrationType.Search,
   tags: ['google-workspace', 'knowledge-base', 'content-management'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleBooksIcon,
 
   subBlocks: [
diff --git a/apps/sim/blocks/blocks/google_calendar.ts b/apps/sim/blocks/blocks/google_calendar.ts
index 307d3fe21a6..229ad95074b 100644
--- a/apps/sim/blocks/blocks/google_calendar.ts
+++ b/apps/sim/blocks/blocks/google_calendar.ts
@@ -17,7 +17,7 @@ export const GoogleCalendarBlock: BlockConfig<GoogleCalendarResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Productivity,
   tags: ['calendar', 'scheduling', 'google-workspace'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleCalendarIcon,
   hideFromToolbar: true,
   subBlocks: [
diff --git a/apps/sim/blocks/blocks/google_contacts.ts b/apps/sim/blocks/blocks/google_contacts.ts
index 6d35c583d44..e25794c9963 100644
--- a/apps/sim/blocks/blocks/google_contacts.ts
+++ b/apps/sim/blocks/blocks/google_contacts.ts
@@ -16,7 +16,7 @@ export const GoogleContactsBlock: BlockConfig<GoogleContactsResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Productivity,
   tags: ['google-workspace', 'customer-support', 'enrichment'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleContactsIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/google_docs.ts b/apps/sim/blocks/blocks/google_docs.ts
index a24832d7eb9..7923fb4852b 100644
--- a/apps/sim/blocks/blocks/google_docs.ts
+++ b/apps/sim/blocks/blocks/google_docs.ts
@@ -16,7 +16,7 @@ export const GoogleDocsBlock: BlockConfig<GoogleDocsResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Documents,
   tags: ['google-workspace', 'document-processing', 'content-management'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleDocsIcon,
   subBlocks: [
     // Operation selector
diff --git a/apps/sim/blocks/blocks/google_drive.ts b/apps/sim/blocks/blocks/google_drive.ts
index 495423beb22..d3b64a58b2c 100644
--- a/apps/sim/blocks/blocks/google_drive.ts
+++ b/apps/sim/blocks/blocks/google_drive.ts
@@ -15,9 +15,9 @@ export const GoogleDriveBlock: BlockConfig<GoogleDriveResponse> = {
     'Integrate Google Drive into the workflow. Can create, upload, download, copy, move, delete, share files and manage permissions.',
   docsLink: 'https://docs.sim.ai/tools/google_drive',
   category: 'tools',
-  integrationType: IntegrationType.FileStorage,
+  integrationType: IntegrationType.Documents,
   tags: ['cloud', 'google-workspace', 'document-processing'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleDriveIcon,
   subBlocks: [
     // Operation selector
diff --git a/apps/sim/blocks/blocks/google_forms.ts b/apps/sim/blocks/blocks/google_forms.ts
index cd96f1dcda9..27dad642bcc 100644
--- a/apps/sim/blocks/blocks/google_forms.ts
+++ b/apps/sim/blocks/blocks/google_forms.ts
@@ -15,7 +15,7 @@ export const GoogleFormsBlock: BlockConfig = {
   category: 'tools',
   integrationType: IntegrationType.Documents,
   tags: ['google-workspace', 'forms', 'data-analytics'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleFormsIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/google_maps.ts b/apps/sim/blocks/blocks/google_maps.ts
index 7331d45f28d..e9771d554a4 100644
--- a/apps/sim/blocks/blocks/google_maps.ts
+++ b/apps/sim/blocks/blocks/google_maps.ts
@@ -10,9 +10,9 @@ export const GoogleMapsBlock: BlockConfig = {
     'Integrate Google Maps Platform APIs into your workflow. Supports geocoding addresses to coordinates, reverse geocoding, getting directions between locations, calculating distance matrices, searching for places, retrieving place details, elevation data, and timezone information.',
   docsLink: 'https://docs.sim.ai/tools/google_maps',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.Search,
   tags: ['google-workspace', 'enrichment'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleMapsIcon,
 
   subBlocks: [
diff --git a/apps/sim/blocks/blocks/google_meet.ts b/apps/sim/blocks/blocks/google_meet.ts
index 5df6e9ca4c1..d3d7f586673 100644
--- a/apps/sim/blocks/blocks/google_meet.ts
+++ b/apps/sim/blocks/blocks/google_meet.ts
@@ -15,7 +15,7 @@ export const GoogleMeetBlock: BlockConfig<GoogleMeetResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Communication,
   tags: ['meeting', 'google-workspace', 'scheduling'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleMeetIcon,
   authMode: AuthMode.OAuth,
   subBlocks: [
diff --git a/apps/sim/blocks/blocks/google_pagespeed.ts b/apps/sim/blocks/blocks/google_pagespeed.ts
index fada86e3183..0014d62f501 100644
--- a/apps/sim/blocks/blocks/google_pagespeed.ts
+++ b/apps/sim/blocks/blocks/google_pagespeed.ts
@@ -12,7 +12,7 @@ export const GooglePagespeedBlock: BlockConfig<GooglePagespeedAnalyzeResponse> =
   category: 'tools',
   integrationType: IntegrationType.Analytics,
   tags: ['google-workspace', 'seo', 'monitoring'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GooglePagespeedIcon,
   authMode: AuthMode.ApiKey,
 
diff --git a/apps/sim/blocks/blocks/google_sheets.ts b/apps/sim/blocks/blocks/google_sheets.ts
index ef61d864445..d157fe023c0 100644
--- a/apps/sim/blocks/blocks/google_sheets.ts
+++ b/apps/sim/blocks/blocks/google_sheets.ts
@@ -19,7 +19,7 @@ export const GoogleSheetsBlock: BlockConfig<GoogleSheetsResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Documents,
   tags: ['spreadsheet', 'google-workspace', 'data-analytics'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleSheetsIcon,
   subBlocks: [
     // Operation selector
@@ -308,7 +308,7 @@ export const GoogleSheetsV2Block: BlockConfig<GoogleSheetsV2Response> = {
   category: 'tools',
   integrationType: IntegrationType.Documents,
   tags: ['spreadsheet', 'google-workspace', 'data-analytics'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleSheetsIcon,
   subBlocks: [
     // Operation selector
diff --git a/apps/sim/blocks/blocks/google_slides.ts b/apps/sim/blocks/blocks/google_slides.ts
index 09260f1b394..a1efe8e1f0b 100644
--- a/apps/sim/blocks/blocks/google_slides.ts
+++ b/apps/sim/blocks/blocks/google_slides.ts
@@ -18,7 +18,7 @@ export const GoogleSlidesBlock: BlockConfig<GoogleSlidesResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Documents,
   tags: ['google-workspace', 'document-processing', 'content-management'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleSlidesIcon,
   subBlocks: [
     // Operation selector
diff --git a/apps/sim/blocks/blocks/google_tasks.ts b/apps/sim/blocks/blocks/google_tasks.ts
index 8e3dbec0fea..55639271212 100644
--- a/apps/sim/blocks/blocks/google_tasks.ts
+++ b/apps/sim/blocks/blocks/google_tasks.ts
@@ -15,7 +15,7 @@ export const GoogleTasksBlock: BlockConfig<GoogleTasksResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Productivity,
   tags: ['google-workspace', 'project-management', 'scheduling'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleTasksIcon,
   authMode: AuthMode.OAuth,
 
diff --git a/apps/sim/blocks/blocks/google_translate.ts b/apps/sim/blocks/blocks/google_translate.ts
index 86d6cf131c8..cd0b6813969 100644
--- a/apps/sim/blocks/blocks/google_translate.ts
+++ b/apps/sim/blocks/blocks/google_translate.ts
@@ -147,7 +147,7 @@ export const GoogleTranslateBlock: BlockConfig = {
   category: 'tools',
   integrationType: IntegrationType.AI,
   tags: ['google-workspace', 'content-management', 'automation'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GoogleTranslateIcon,
   authMode: AuthMode.ApiKey,
   subBlocks: [
diff --git a/apps/sim/blocks/blocks/grafana.ts b/apps/sim/blocks/blocks/grafana.ts
index 1f65d255f79..56a58826ca7 100644
--- a/apps/sim/blocks/blocks/grafana.ts
+++ b/apps/sim/blocks/blocks/grafana.ts
@@ -12,9 +12,9 @@ export const GrafanaBlock: BlockConfig<GrafanaResponse> = {
     'Integrate Grafana into workflows. Manage dashboards, alerts, annotations, data sources, folders, and monitor health status.',
   docsLink: 'https://docs.sim.ai/tools/grafana',
   category: 'tools',
-  integrationType: IntegrationType.Analytics,
+  integrationType: IntegrationType.Observability,
   tags: ['monitoring', 'data-analytics'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: GrafanaIcon,
   subBlocks: [
     // Operation dropdown
diff --git a/apps/sim/blocks/blocks/greptile.ts b/apps/sim/blocks/blocks/greptile.ts
index 76cb142cf3c..72d040a7f63 100644
--- a/apps/sim/blocks/blocks/greptile.ts
+++ b/apps/sim/blocks/blocks/greptile.ts
@@ -12,9 +12,9 @@ export const GreptileBlock: BlockConfig<GreptileResponse> = {
     'Query and search codebases using natural language with Greptile. Get AI-generated answers about your code, find relevant files, and understand complex codebases.',
   docsLink: 'https://docs.sim.ai/tools/greptile',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.DevOps,
   tags: ['version-control', 'knowledge-base'],
-  bgColor: '#e5e5e5',
+  bgColor: '#FFFFFF',
   icon: GreptileIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/hubspot.ts b/apps/sim/blocks/blocks/hubspot.ts
index 5cbd9210264..86f0954315d 100644
--- a/apps/sim/blocks/blocks/hubspot.ts
+++ b/apps/sim/blocks/blocks/hubspot.ts
@@ -15,7 +15,7 @@ export const HubSpotBlock: BlockConfig<HubSpotResponse> = {
     'Integrate HubSpot into your workflow. Manage contacts, companies, deals, tickets, and other CRM objects with powerful automation capabilities. Can be used in trigger mode to start workflows when contacts are created, deleted, or updated.',
   docsLink: 'https://docs.sim.ai/tools/hubspot',
   category: 'tools',
-  integrationType: IntegrationType.CRM,
+  integrationType: IntegrationType.Sales,
   tags: ['marketing', 'sales-engagement', 'customer-support'],
   bgColor: '#FF7A59',
   icon: HubspotIcon,
diff --git a/apps/sim/blocks/blocks/hunter.ts b/apps/sim/blocks/blocks/hunter.ts
index 4c26bb85d43..b46d82f4a88 100644
--- a/apps/sim/blocks/blocks/hunter.ts
+++ b/apps/sim/blocks/blocks/hunter.ts
@@ -13,7 +13,7 @@ export const HunterBlock: BlockConfig<HunterResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Sales,
   tags: ['enrichment', 'sales-engagement'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: HunterIOIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/iam.ts b/apps/sim/blocks/blocks/iam.ts
index 96501f444a8..373c31bd4cc 100644
--- a/apps/sim/blocks/blocks/iam.ts
+++ b/apps/sim/blocks/blocks/iam.ts
@@ -11,7 +11,7 @@ export const IAMBlock: BlockConfig<IAMBaseResponse> = {
     'Integrate AWS Identity and Access Management into your workflow. Create and manage users, roles, policies, groups, and access keys.',
   docsLink: 'https://docs.sim.ai/tools/iam',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.Security,
   tags: ['cloud', 'identity'],
   bgColor: 'linear-gradient(45deg, #BD0816 0%, #FF5252 100%)',
   icon: IAMIcon,
diff --git a/apps/sim/blocks/blocks/image_generator.ts b/apps/sim/blocks/blocks/image_generator.ts
index 69f94cb49e2..47c6b3197a6 100644
--- a/apps/sim/blocks/blocks/image_generator.ts
+++ b/apps/sim/blocks/blocks/image_generator.ts
@@ -10,7 +10,7 @@ export const ImageGeneratorBlock: BlockConfig<DalleResponse> = {
   longDescription:
     'Integrate Image Generator into the workflow. Can generate images using DALL-E 3, GPT Image 1, or GPT Image 2.',
   docsLink: 'https://docs.sim.ai/tools/image_generator',
-  category: 'tools',
+  category: 'blocks',
   integrationType: IntegrationType.AI,
   tags: ['image-generation', 'llm'],
   bgColor: '#4D5FFF',
diff --git a/apps/sim/blocks/blocks/incidentio.ts b/apps/sim/blocks/blocks/incidentio.ts
index ad8c19949d6..c4f99dfe131 100644
--- a/apps/sim/blocks/blocks/incidentio.ts
+++ b/apps/sim/blocks/blocks/incidentio.ts
@@ -12,9 +12,9 @@ export const IncidentioBlock: BlockConfig<IncidentioResponse> = {
     'Integrate incident.io into the workflow. Manage incidents, actions, follow-ups, workflows, schedules, escalations, custom fields, and more.',
   docsLink: 'https://docs.sim.ai/tools/incidentio',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.Observability,
   tags: ['incident-management', 'monitoring'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: IncidentioIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/intercom.ts b/apps/sim/blocks/blocks/intercom.ts
index a044cb57ca0..29841e3953a 100644
--- a/apps/sim/blocks/blocks/intercom.ts
+++ b/apps/sim/blocks/blocks/intercom.ts
@@ -14,9 +14,9 @@ export const IntercomBlock: BlockConfig = {
   docsLink: 'https://docs.sim.ai/tools/intercom',
   authMode: AuthMode.ApiKey,
   category: 'tools',
-  integrationType: IntegrationType.CustomerSupport,
+  integrationType: IntegrationType.Support,
   tags: ['customer-support', 'messaging'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: IntercomIcon,
   subBlocks: [
     {
@@ -1407,7 +1407,7 @@ export const IntercomV2Block: BlockConfig = {
   ...IntercomBlock,
   type: 'intercom_v2',
   name: 'Intercom',
-  integrationType: IntegrationType.CustomerSupport,
+  integrationType: IntegrationType.Support,
   tags: ['customer-support', 'messaging'],
   hideFromToolbar: false,
   subBlocks: [
diff --git a/apps/sim/blocks/blocks/jira.ts b/apps/sim/blocks/blocks/jira.ts
index f5fd53cf39e..6400e199f05 100644
--- a/apps/sim/blocks/blocks/jira.ts
+++ b/apps/sim/blocks/blocks/jira.ts
@@ -18,7 +18,7 @@ export const JiraBlock: BlockConfig<JiraResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Productivity,
   tags: ['project-management', 'ticketing'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: JiraIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/jira_service_management.ts b/apps/sim/blocks/blocks/jira_service_management.ts
index 9e3952b7837..281b78201b4 100644
--- a/apps/sim/blocks/blocks/jira_service_management.ts
+++ b/apps/sim/blocks/blocks/jira_service_management.ts
@@ -14,9 +14,9 @@ export const JiraServiceManagementBlock: BlockConfig<JsmResponse> = {
     'Integrate with Jira Service Management for IT service management. Create and manage service requests, handle customers and organizations, track SLAs, and manage queues.',
   docsLink: 'https://docs.sim.ai/tools/jira-service-management',
   category: 'tools',
-  integrationType: IntegrationType.CustomerSupport,
+  integrationType: IntegrationType.Support,
   tags: ['customer-support', 'ticketing', 'incident-management'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: JiraServiceManagementIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/langsmith.ts b/apps/sim/blocks/blocks/langsmith.ts
index 378dfdfdca0..b83945453b6 100644
--- a/apps/sim/blocks/blocks/langsmith.ts
+++ b/apps/sim/blocks/blocks/langsmith.ts
@@ -11,7 +11,7 @@ export const LangsmithBlock: BlockConfig<LangsmithResponse> = {
     'Send run data to LangSmith to trace executions, attach metadata, and monitor workflow performance.',
   docsLink: 'https://docs.sim.ai/tools/langsmith',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.Observability,
   tags: ['monitoring', 'llm', 'data-analytics'],
   bgColor: '#181C1E',
   icon: LangsmithIcon,
diff --git a/apps/sim/blocks/blocks/launchdarkly.ts b/apps/sim/blocks/blocks/launchdarkly.ts
index dbc78c214ad..15f969d603f 100644
--- a/apps/sim/blocks/blocks/launchdarkly.ts
+++ b/apps/sim/blocks/blocks/launchdarkly.ts
@@ -10,7 +10,7 @@ export const LaunchDarklyBlock: BlockConfig = {
     'Integrate LaunchDarkly into your workflow. List, create, update, toggle, and delete feature flags. Manage projects, environments, segments, members, and audit logs. Requires API Key.',
   docsLink: 'https://docs.sim.ai/tools/launchdarkly',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.Observability,
   tags: ['feature-flags', 'ci-cd'],
   bgColor: '#191919',
   icon: LaunchDarklyIcon,
diff --git a/apps/sim/blocks/blocks/mailgun.ts b/apps/sim/blocks/blocks/mailgun.ts
index 5d06a21c218..07b1cf72aed 100644
--- a/apps/sim/blocks/blocks/mailgun.ts
+++ b/apps/sim/blocks/blocks/mailgun.ts
@@ -13,7 +13,7 @@ export const MailgunBlock: BlockConfig<SendMessageResult> = {
   category: 'tools',
   integrationType: IntegrationType.Email,
   tags: ['messaging', 'email-marketing'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: MailgunIcon,
 
   subBlocks: [
diff --git a/apps/sim/blocks/blocks/mcp.ts b/apps/sim/blocks/blocks/mcp.ts
index 3a0e51caeae..0b708f16aff 100644
--- a/apps/sim/blocks/blocks/mcp.ts
+++ b/apps/sim/blocks/blocks/mcp.ts
@@ -15,8 +15,8 @@ export const McpBlock: BlockConfig<McpResponse> = {
   longDescription:
     'Integrate MCP into the workflow. Can execute tools from MCP servers. Requires MCP servers in workspace settings.',
   docsLink: 'https://docs.sim.ai/mcp',
-  category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  category: 'blocks',
+  integrationType: IntegrationType.DevOps,
   tags: ['agentic', 'automation', 'llm'],
   bgColor: '#181C1E',
   icon: McpIcon,
diff --git a/apps/sim/blocks/blocks/microsoft_dataverse.ts b/apps/sim/blocks/blocks/microsoft_dataverse.ts
index 336b76e5df7..2936e722223 100644
--- a/apps/sim/blocks/blocks/microsoft_dataverse.ts
+++ b/apps/sim/blocks/blocks/microsoft_dataverse.ts
@@ -16,7 +16,7 @@ export const MicrosoftDataverseBlock: BlockConfig<DataverseResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Databases,
   tags: ['microsoft-365', 'data-warehouse', 'cloud'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: MicrosoftDataverseIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/microsoft_excel.ts b/apps/sim/blocks/blocks/microsoft_excel.ts
index ca0da941d21..e1358944960 100644
--- a/apps/sim/blocks/blocks/microsoft_excel.ts
+++ b/apps/sim/blocks/blocks/microsoft_excel.ts
@@ -20,7 +20,7 @@ export const MicrosoftExcelBlock: BlockConfig<MicrosoftExcelResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Documents,
   tags: ['spreadsheet', 'microsoft-365'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: MicrosoftExcelIcon,
   subBlocks: [
     {
@@ -359,7 +359,7 @@ export const MicrosoftExcelV2Block: BlockConfig<MicrosoftExcelV2Response> = {
   category: 'tools',
   integrationType: IntegrationType.Documents,
   tags: ['spreadsheet', 'microsoft-365'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: MicrosoftExcelIcon,
   subBlocks: [
     // Operation selector
diff --git a/apps/sim/blocks/blocks/microsoft_planner.ts b/apps/sim/blocks/blocks/microsoft_planner.ts
index cb7dcd1f1f8..fea80713f9d 100644
--- a/apps/sim/blocks/blocks/microsoft_planner.ts
+++ b/apps/sim/blocks/blocks/microsoft_planner.ts
@@ -37,7 +37,7 @@ export const MicrosoftPlannerBlock: BlockConfig<MicrosoftPlannerResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Productivity,
   tags: ['project-management', 'microsoft-365', 'ticketing'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: MicrosoftPlannerIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/microsoft_teams.ts b/apps/sim/blocks/blocks/microsoft_teams.ts
index 0812169a24d..81a0deca059 100644
--- a/apps/sim/blocks/blocks/microsoft_teams.ts
+++ b/apps/sim/blocks/blocks/microsoft_teams.ts
@@ -18,7 +18,7 @@ export const MicrosoftTeamsBlock: BlockConfig<MicrosoftTeamsResponse> = {
   integrationType: IntegrationType.Communication,
   tags: ['messaging', 'microsoft-365'],
   triggerAllowed: true,
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: MicrosoftTeamsIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/mongodb.ts b/apps/sim/blocks/blocks/mongodb.ts
index 1882bc120f9..3d7ef2935bc 100644
--- a/apps/sim/blocks/blocks/mongodb.ts
+++ b/apps/sim/blocks/blocks/mongodb.ts
@@ -14,7 +14,7 @@ export const MongoDBBlock: BlockConfig<MongoDBResponse | MongoDBIntrospectRespon
   category: 'tools',
   integrationType: IntegrationType.Databases,
   tags: ['data-warehouse', 'cloud'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: MongoDBIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/mysql.ts b/apps/sim/blocks/blocks/mysql.ts
index 4ace662d834..1926e6bfb7a 100644
--- a/apps/sim/blocks/blocks/mysql.ts
+++ b/apps/sim/blocks/blocks/mysql.ts
@@ -11,10 +11,10 @@ export const MySQLBlock: BlockConfig<MySQLResponse> = {
   longDescription:
     'Integrate MySQL into the workflow. Can query, insert, update, delete, and execute raw SQL.',
   docsLink: 'https://docs.sim.ai/tools/mysql',
-  category: 'tools',
+  category: 'blocks',
   integrationType: IntegrationType.Databases,
   tags: ['data-warehouse', 'data-analytics'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: MySQLIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/neo4j.ts b/apps/sim/blocks/blocks/neo4j.ts
index 5931f36cc9d..033ee6442f1 100644
--- a/apps/sim/blocks/blocks/neo4j.ts
+++ b/apps/sim/blocks/blocks/neo4j.ts
@@ -11,7 +11,7 @@ export const Neo4jBlock: BlockConfig<Neo4jResponse | Neo4jIntrospectResponse> =
   longDescription:
     'Integrate Neo4j graph database into the workflow. Can query, create, merge, update, and delete nodes and relationships.',
   docsLink: 'https://docs.sim.ai/tools/neo4j',
-  category: 'tools',
+  category: 'blocks',
   integrationType: IntegrationType.Databases,
   tags: ['data-warehouse', 'data-analytics'],
   bgColor: '#FFFFFF',
diff --git a/apps/sim/blocks/blocks/onedrive.ts b/apps/sim/blocks/blocks/onedrive.ts
index 4ecc27b97aa..195be3be0f6 100644
--- a/apps/sim/blocks/blocks/onedrive.ts
+++ b/apps/sim/blocks/blocks/onedrive.ts
@@ -18,9 +18,9 @@ export const OneDriveBlock: BlockConfig<OneDriveResponse> = {
     'Integrate OneDrive into the workflow. Can create text and Excel files, upload files, download files, list files, and delete files or folders.',
   docsLink: 'https://docs.sim.ai/tools/onedrive',
   category: 'tools',
-  integrationType: IntegrationType.FileStorage,
+  integrationType: IntegrationType.Documents,
   tags: ['microsoft-365', 'cloud', 'document-processing'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: MicrosoftOneDriveIcon,
   subBlocks: [
     // Operation selector
diff --git a/apps/sim/blocks/blocks/onepassword.ts b/apps/sim/blocks/blocks/onepassword.ts
index 80e5b4adef1..a4bc3aff7ca 100644
--- a/apps/sim/blocks/blocks/onepassword.ts
+++ b/apps/sim/blocks/blocks/onepassword.ts
@@ -11,7 +11,7 @@ export const OnePasswordBlock: BlockConfig = {
   category: 'tools',
   integrationType: IntegrationType.Security,
   tags: ['secrets-management', 'identity'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: OnePasswordIcon,
   authMode: AuthMode.ApiKey,
 
diff --git a/apps/sim/blocks/blocks/outlook.ts b/apps/sim/blocks/blocks/outlook.ts
index 50d7179931d..e3e47ce1497 100644
--- a/apps/sim/blocks/blocks/outlook.ts
+++ b/apps/sim/blocks/blocks/outlook.ts
@@ -18,7 +18,7 @@ export const OutlookBlock: BlockConfig<OutlookResponse> = {
   integrationType: IntegrationType.Email,
   tags: ['microsoft-365', 'messaging', 'automation'],
   triggerAllowed: true,
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: OutlookIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/pagerduty.ts b/apps/sim/blocks/blocks/pagerduty.ts
index 5cb6a4e88cc..3bd0591a24a 100644
--- a/apps/sim/blocks/blocks/pagerduty.ts
+++ b/apps/sim/blocks/blocks/pagerduty.ts
@@ -9,7 +9,7 @@ export const PagerDutyBlock: BlockConfig = {
     'Integrate PagerDuty into your workflow to list, create, and update incidents, add notes, list services, and check on-call schedules.',
   docsLink: 'https://docs.sim.ai/tools/pagerduty',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.Observability,
   tags: ['incident-management', 'monitoring'],
   bgColor: '#06AC38',
   icon: PagerDutyIcon,
diff --git a/apps/sim/blocks/blocks/parallel.ts b/apps/sim/blocks/blocks/parallel.ts
index b57dac65632..b8205b8ae30 100644
--- a/apps/sim/blocks/blocks/parallel.ts
+++ b/apps/sim/blocks/blocks/parallel.ts
@@ -13,7 +13,7 @@ export const ParallelBlock: BlockConfig<ToolResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Search,
   tags: ['web-scraping', 'llm', 'agentic'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: ParallelIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/pipedrive.ts b/apps/sim/blocks/blocks/pipedrive.ts
index 789ade9061e..60b3830aed4 100644
--- a/apps/sim/blocks/blocks/pipedrive.ts
+++ b/apps/sim/blocks/blocks/pipedrive.ts
@@ -13,7 +13,7 @@ export const PipedriveBlock: BlockConfig<PipedriveResponse> = {
     'Integrate Pipedrive into your workflow. Manage deals, contacts, sales pipeline, projects, activities, files, and communications with powerful CRM capabilities.',
   docsLink: 'https://docs.sim.ai/tools/pipedrive',
   category: 'tools',
-  integrationType: IntegrationType.CRM,
+  integrationType: IntegrationType.Sales,
   tags: ['sales-engagement', 'project-management'],
   bgColor: '#2E6936',
   icon: PipedriveIcon,
diff --git a/apps/sim/blocks/blocks/postgresql.ts b/apps/sim/blocks/blocks/postgresql.ts
index a447dc54728..bbeeed11283 100644
--- a/apps/sim/blocks/blocks/postgresql.ts
+++ b/apps/sim/blocks/blocks/postgresql.ts
@@ -11,7 +11,7 @@ export const PostgreSQLBlock: BlockConfig<PostgresResponse> = {
   longDescription:
     'Integrate PostgreSQL into the workflow. Can query, insert, update, delete, and execute raw SQL.',
   docsLink: 'https://docs.sim.ai/tools/postgresql',
-  category: 'tools',
+  category: 'blocks',
   integrationType: IntegrationType.Databases,
   tags: ['data-warehouse', 'data-analytics'],
   bgColor: '#336791',
diff --git a/apps/sim/blocks/blocks/posthog.ts b/apps/sim/blocks/blocks/posthog.ts
index e273c7d5691..4a9aa18ca03 100644
--- a/apps/sim/blocks/blocks/posthog.ts
+++ b/apps/sim/blocks/blocks/posthog.ts
@@ -14,7 +14,7 @@ export const PostHogBlock: BlockConfig<PostHogResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Analytics,
   tags: ['data-analytics', 'monitoring'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: PosthogIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/pulse.ts b/apps/sim/blocks/blocks/pulse.ts
index 5f4be6f873f..ec6b9143031 100644
--- a/apps/sim/blocks/blocks/pulse.ts
+++ b/apps/sim/blocks/blocks/pulse.ts
@@ -15,7 +15,7 @@ export const PulseBlock: BlockConfig<PulseParserOutput> = {
   category: 'tools',
   integrationType: IntegrationType.AI,
   tags: ['document-processing', 'ocr'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: PulseIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/quiver.ts b/apps/sim/blocks/blocks/quiver.ts
index 4f09fb0c37c..49951dc3e92 100644
--- a/apps/sim/blocks/blocks/quiver.ts
+++ b/apps/sim/blocks/blocks/quiver.ts
@@ -12,7 +12,7 @@ export const QuiverBlock: BlockConfig<QuiverSvgResponse> = {
     'Generate SVG images from text prompts or vectorize raster images into SVGs using QuiverAI. Supports reference images, style instructions, and multiple output generation.',
   docsLink: 'https://docs.sim.ai/tools/quiver',
   category: 'tools',
-  integrationType: IntegrationType.Design,
+  integrationType: IntegrationType.Marketing,
   tags: ['image-generation'],
   bgColor: '#000000',
   icon: QuiverIcon,
diff --git a/apps/sim/blocks/blocks/revenuecat.ts b/apps/sim/blocks/blocks/revenuecat.ts
index 7b676ddf905..ae395a1f1ae 100644
--- a/apps/sim/blocks/blocks/revenuecat.ts
+++ b/apps/sim/blocks/blocks/revenuecat.ts
@@ -12,7 +12,7 @@ export const RevenueCatBlock: BlockConfig<RevenueCatResponse> = {
     'Integrate RevenueCat into the workflow. Manage subscribers, entitlements, offerings, and Google Play subscriptions. Retrieve customer subscription status, grant or revoke promotional entitlements, record purchases, update subscriber attributes, and manage Google Play subscription billing.',
   docsLink: 'https://docs.sim.ai/tools/revenuecat',
   category: 'tools',
-  integrationType: IntegrationType.Ecommerce,
+  integrationType: IntegrationType.Commerce,
   tags: ['payments', 'subscriptions'],
   bgColor: '#F25A5A',
   icon: RevenueCatIcon,
diff --git a/apps/sim/blocks/blocks/rootly.ts b/apps/sim/blocks/blocks/rootly.ts
index 6a4486aa1f3..dfb93a9faa8 100644
--- a/apps/sim/blocks/blocks/rootly.ts
+++ b/apps/sim/blocks/blocks/rootly.ts
@@ -12,7 +12,7 @@ export const RootlyBlock: BlockConfig<RootlyResponse> = {
     'Integrate Rootly incident management into workflows. Create and manage incidents, alerts, services, severities, and retrospectives.',
   docsLink: 'https://docs.sim.ai/tools/rootly',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.Observability,
   tags: ['incident-management', 'monitoring'],
   bgColor: '#6C72C8',
   icon: RootlyIcon,
diff --git a/apps/sim/blocks/blocks/s3.ts b/apps/sim/blocks/blocks/s3.ts
index 5e93cdef6e9..0511620d2d6 100644
--- a/apps/sim/blocks/blocks/s3.ts
+++ b/apps/sim/blocks/blocks/s3.ts
@@ -13,7 +13,7 @@ export const S3Block: BlockConfig<S3Response> = {
     'Integrate S3 into the workflow. Upload files, download objects, list bucket contents, delete objects, and copy objects between buckets. Requires AWS access key and secret access key.',
   docsLink: 'https://docs.sim.ai/tools/s3',
   category: 'tools',
-  integrationType: IntegrationType.FileStorage,
+  integrationType: IntegrationType.Documents,
   tags: ['cloud', 'data-warehouse'],
   bgColor: 'linear-gradient(45deg, #1B660F 0%, #6CAE3E 100%)',
   icon: S3Icon,
diff --git a/apps/sim/blocks/blocks/salesforce.ts b/apps/sim/blocks/blocks/salesforce.ts
index 53302520ca9..55a4252a414 100644
--- a/apps/sim/blocks/blocks/salesforce.ts
+++ b/apps/sim/blocks/blocks/salesforce.ts
@@ -14,9 +14,9 @@ export const SalesforceBlock: BlockConfig<SalesforceResponse> = {
     'Integrate Salesforce into your workflow. Manage accounts, contacts, leads, opportunities, cases, and tasks with powerful automation capabilities.',
   docsLink: 'https://docs.sim.ai/tools/salesforce',
   category: 'tools',
-  integrationType: IntegrationType.CRM,
+  integrationType: IntegrationType.Sales,
   tags: ['sales-engagement', 'customer-support'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: SalesforceIcon,
   triggers: {
     enabled: true,
diff --git a/apps/sim/blocks/blocks/sap_concur.ts b/apps/sim/blocks/blocks/sap_concur.ts
index ac5ede1dcc9..c8fd6b60651 100644
--- a/apps/sim/blocks/blocks/sap_concur.ts
+++ b/apps/sim/blocks/blocks/sap_concur.ts
@@ -164,7 +164,7 @@ export const SapConcurBlock: BlockConfig<SapConcurProxyResponse> = {
     'Connect SAP Concur via OAuth 2.0. Manage expense reports and line items, allocations, attendees, comments, exceptions, quick expenses, receipts, travel requests and expected expenses, cash advances, itineraries, user identities, custom lists, budgets, exchange rates, and purchase requests across every Concur datacenter.',
   docsLink: 'https://docs.sim.ai/tools/sap_concur',
   category: 'tools',
-  integrationType: IntegrationType.Other,
+  integrationType: IntegrationType.Productivity,
   tags: ['automation'],
   bgColor: '#FFFFFF',
   icon: SapConcurIcon,
diff --git a/apps/sim/blocks/blocks/sap_s4hana.ts b/apps/sim/blocks/blocks/sap_s4hana.ts
index b5b985b461b..5910b62e9c0 100644
--- a/apps/sim/blocks/blocks/sap_s4hana.ts
+++ b/apps/sim/blocks/blocks/sap_s4hana.ts
@@ -12,7 +12,7 @@ export const SapS4HanaBlock: BlockConfig<SapProxyResponse> = {
     'Connect SAP S4HANA Cloud Public Edition with per-tenant OAuth 2.0 client credentials configured in your Communication Arrangements. Read and create business partners, customers, suppliers, sales orders, deliveries (inbound/outbound), billing documents, products, stock and material documents, purchase requisitions, purchase orders, and supplier invoices, or run arbitrary OData v2 queries against any whitelisted Communication Scenario.',
   docsLink: 'https://docs.sim.ai/tools/sap_s4hana',
   category: 'tools',
-  integrationType: IntegrationType.Other,
+  integrationType: IntegrationType.HR,
   tags: ['automation'],
   bgColor: '#FFFFFF',
   icon: SapS4HanaIcon,
diff --git a/apps/sim/blocks/blocks/search.ts b/apps/sim/blocks/blocks/search.ts
index 70f82ab211b..767cbcf6b8a 100644
--- a/apps/sim/blocks/blocks/search.ts
+++ b/apps/sim/blocks/blocks/search.ts
@@ -9,7 +9,7 @@ export const SearchBlock: BlockConfig = {
   longDescription: 'Search the web using the Search tool. Each search costs $0.01 per query.',
   bgColor: '#3B82F6',
   icon: SearchIcon,
-  category: 'tools',
+  category: 'blocks',
   integrationType: IntegrationType.Search,
   tags: ['web-scraping', 'seo'],
   docsLink: 'https://docs.sim.ai/tools/search',
diff --git a/apps/sim/blocks/blocks/secrets_manager.ts b/apps/sim/blocks/blocks/secrets_manager.ts
index a5c9a5bb16a..d175c1ed038 100644
--- a/apps/sim/blocks/blocks/secrets_manager.ts
+++ b/apps/sim/blocks/blocks/secrets_manager.ts
@@ -11,7 +11,7 @@ export const SecretsManagerBlock: BlockConfig<SecretsManagerBaseResponse> = {
     'Integrate AWS Secrets Manager into the workflow. Can retrieve, create, update, list, and delete secrets.',
   docsLink: 'https://docs.sim.ai/tools/secrets-manager',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.Security,
   tags: ['cloud', 'secrets-management'],
   bgColor: 'linear-gradient(45deg, #BD0816 0%, #FF5252 100%)',
   icon: SecretsManagerIcon,
diff --git a/apps/sim/blocks/blocks/sentry.ts b/apps/sim/blocks/blocks/sentry.ts
index 19d3b5be4cf..1aff9aed04f 100644
--- a/apps/sim/blocks/blocks/sentry.ts
+++ b/apps/sim/blocks/blocks/sentry.ts
@@ -12,9 +12,9 @@ export const SentryBlock: BlockConfig<SentryResponse> = {
     'Integrate Sentry into the workflow. Monitor issues, manage projects, track events, and coordinate releases across your applications.',
   docsLink: 'https://docs.sim.ai/tools/sentry',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.Observability,
   tags: ['error-tracking', 'monitoring'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: SentryIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/servicenow.ts b/apps/sim/blocks/blocks/servicenow.ts
index 06e7249f302..3b1b840c428 100644
--- a/apps/sim/blocks/blocks/servicenow.ts
+++ b/apps/sim/blocks/blocks/servicenow.ts
@@ -12,7 +12,7 @@ export const ServiceNowBlock: BlockConfig<ServiceNowResponse> = {
     'Integrate ServiceNow into your workflow. Create, read, update, and delete records in any ServiceNow table including incidents, tasks, change requests, users, and more.',
   docsLink: 'https://docs.sim.ai/tools/servicenow',
   category: 'tools',
-  integrationType: IntegrationType.CustomerSupport,
+  integrationType: IntegrationType.Support,
   tags: ['customer-support', 'ticketing', 'incident-management'],
   bgColor: '#032D42',
   icon: ServiceNowIcon,
diff --git a/apps/sim/blocks/blocks/sftp.ts b/apps/sim/blocks/blocks/sftp.ts
index 7a07bce06d9..860196d3d59 100644
--- a/apps/sim/blocks/blocks/sftp.ts
+++ b/apps/sim/blocks/blocks/sftp.ts
@@ -11,8 +11,8 @@ export const SftpBlock: BlockConfig<SftpUploadResult> = {
   longDescription:
     'Upload, download, list, and manage files on remote servers via SFTP. Supports both password and private key authentication for secure file transfers.',
   docsLink: 'https://docs.sim.ai/tools/sftp',
-  category: 'tools',
-  integrationType: IntegrationType.FileStorage,
+  category: 'blocks',
+  integrationType: IntegrationType.Documents,
   tags: ['cloud', 'automation'],
   bgColor: '#2D3748',
   icon: SftpIcon,
diff --git a/apps/sim/blocks/blocks/sharepoint.ts b/apps/sim/blocks/blocks/sharepoint.ts
index b881c46e24a..f01c341d61e 100644
--- a/apps/sim/blocks/blocks/sharepoint.ts
+++ b/apps/sim/blocks/blocks/sharepoint.ts
@@ -21,7 +21,7 @@ export const SharepointBlock: BlockConfig<SharepointResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Documents,
   tags: ['microsoft-365', 'content-management', 'document-processing'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: MicrosoftSharepointIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/shopify.ts b/apps/sim/blocks/blocks/shopify.ts
index b7ef72a708d..b8bfede2680 100644
--- a/apps/sim/blocks/blocks/shopify.ts
+++ b/apps/sim/blocks/blocks/shopify.ts
@@ -28,7 +28,7 @@ export const ShopifyBlock: BlockConfig<ShopifyResponse> = {
     'Integrate Shopify into your workflow. Manage products, orders, customers, and inventory. Create, read, update, and delete products. List and manage orders. Handle customer data and adjust inventory levels.',
   docsLink: 'https://docs.sim.ai/tools/shopify',
   category: 'tools',
-  integrationType: IntegrationType.Ecommerce,
+  integrationType: IntegrationType.Commerce,
   tags: ['payments', 'subscriptions'],
   icon: ShopifyIcon,
   bgColor: '#FFFFFF',
diff --git a/apps/sim/blocks/blocks/smtp.ts b/apps/sim/blocks/blocks/smtp.ts
index 43aeb757135..a3870685253 100644
--- a/apps/sim/blocks/blocks/smtp.ts
+++ b/apps/sim/blocks/blocks/smtp.ts
@@ -11,7 +11,7 @@ export const SmtpBlock: BlockConfig<SmtpSendMailResult> = {
   longDescription:
     'Send emails using any SMTP server (Gmail, Outlook, custom servers, etc.). Configure SMTP connection settings and send emails with full control over content, recipients, and attachments.',
   docsLink: 'https://docs.sim.ai/tools/smtp',
-  category: 'tools',
+  category: 'blocks',
   integrationType: IntegrationType.Email,
   tags: ['email-marketing', 'messaging'],
   bgColor: '#2D3748',
diff --git a/apps/sim/blocks/blocks/sqs.ts b/apps/sim/blocks/blocks/sqs.ts
index 702e44f4050..054fb8ac0c8 100644
--- a/apps/sim/blocks/blocks/sqs.ts
+++ b/apps/sim/blocks/blocks/sqs.ts
@@ -11,7 +11,7 @@ export const SQSBlock: BlockConfig<SqsResponse> = {
   longDescription: 'Integrate Amazon SQS into the workflow. Can send messages to SQS queues.',
   docsLink: 'https://docs.sim.ai/tools/sqs',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.DevOps,
   tags: ['cloud', 'messaging', 'automation'],
   bgColor: 'linear-gradient(45deg, #2E27AD 0%, #527FFF 100%)',
   icon: SQSIcon,
diff --git a/apps/sim/blocks/blocks/ssh.ts b/apps/sim/blocks/blocks/ssh.ts
index 23a8753e08c..7ebf91da349 100644
--- a/apps/sim/blocks/blocks/ssh.ts
+++ b/apps/sim/blocks/blocks/ssh.ts
@@ -11,8 +11,8 @@ export const SSHBlock: BlockConfig<SSHResponse> = {
   longDescription:
     'Execute commands, transfer files, and manage remote servers via SSH. Supports password and private key authentication for secure server access.',
   docsLink: 'https://docs.sim.ai/tools/ssh',
-  category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  category: 'blocks',
+  integrationType: IntegrationType.DevOps,
   tags: ['cloud', 'automation'],
   bgColor: '#000000',
   icon: SshIcon,
diff --git a/apps/sim/blocks/blocks/stripe.ts b/apps/sim/blocks/blocks/stripe.ts
index 1ffd43ab495..ac80453a645 100644
--- a/apps/sim/blocks/blocks/stripe.ts
+++ b/apps/sim/blocks/blocks/stripe.ts
@@ -13,7 +13,7 @@ export const StripeBlock: BlockConfig<StripeResponse> = {
     'Integrates Stripe into the workflow. Manage payment intents, customers, subscriptions, invoices, charges, products, prices, and events. Can be used in trigger mode to trigger a workflow when a Stripe event occurs.',
   docsLink: 'https://docs.sim.ai/tools/stripe',
   category: 'tools',
-  integrationType: IntegrationType.Ecommerce,
+  integrationType: IntegrationType.Commerce,
   tags: ['payments', 'subscriptions', 'webhooks'],
   bgColor: '#635BFF',
   icon: StripeIcon,
diff --git a/apps/sim/blocks/blocks/stt.ts b/apps/sim/blocks/blocks/stt.ts
index 9ad540b1d3d..2953bd2d7a7 100644
--- a/apps/sim/blocks/blocks/stt.ts
+++ b/apps/sim/blocks/blocks/stt.ts
@@ -12,7 +12,7 @@ export const SttBlock: BlockConfig<SttBlockResponse> = {
   longDescription:
     'Transcribe audio and video files to text using leading AI providers. Supports multiple languages, timestamps, and speaker diarization.',
   docsLink: 'https://docs.sim.ai/tools/stt',
-  category: 'tools',
+  category: 'blocks',
   integrationType: IntegrationType.AI,
   tags: ['speech-to-text', 'document-processing'],
   bgColor: '#181C1E',
diff --git a/apps/sim/blocks/blocks/telegram.ts b/apps/sim/blocks/blocks/telegram.ts
index 8e720f2c68f..743fad1e048 100644
--- a/apps/sim/blocks/blocks/telegram.ts
+++ b/apps/sim/blocks/blocks/telegram.ts
@@ -16,7 +16,7 @@ export const TelegramBlock: BlockConfig<TelegramResponse> = {
   category: 'tools',
   integrationType: IntegrationType.Communication,
   tags: ['messaging', 'webhooks', 'automation'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: TelegramIcon,
   triggerAllowed: true,
   subBlocks: [
diff --git a/apps/sim/blocks/blocks/translate.ts b/apps/sim/blocks/blocks/translate.ts
index b29079be194..ff4d6645969 100644
--- a/apps/sim/blocks/blocks/translate.ts
+++ b/apps/sim/blocks/blocks/translate.ts
@@ -16,7 +16,7 @@ export const TranslateBlock: BlockConfig = {
   authMode: AuthMode.ApiKey,
   longDescription: 'Integrate Translate into the workflow. Can translate text to any language.',
   docsLink: 'https://docs.sim.ai/tools/translate',
-  category: 'tools',
+  category: 'blocks',
   integrationType: IntegrationType.AI,
   tags: ['document-processing', 'llm'],
   bgColor: '#FF4B4B',
diff --git a/apps/sim/blocks/blocks/tts.ts b/apps/sim/blocks/blocks/tts.ts
index 62d050b0c91..bf2cf8c8339 100644
--- a/apps/sim/blocks/blocks/tts.ts
+++ b/apps/sim/blocks/blocks/tts.ts
@@ -10,7 +10,7 @@ export const TtsBlock: BlockConfig<TtsBlockResponse> = {
   longDescription:
     'Generate natural-sounding speech from text using state-of-the-art AI voices from OpenAI, Deepgram, ElevenLabs, Cartesia, Google Cloud, Azure, and PlayHT. Supports multiple voices, languages, and audio formats.',
   docsLink: 'https://docs.sim.ai/tools/tts',
-  category: 'tools',
+  category: 'blocks',
   integrationType: IntegrationType.AI,
   tags: ['text-to-speech', 'llm'],
   bgColor: '#181C1E',
diff --git a/apps/sim/blocks/blocks/vercel.ts b/apps/sim/blocks/blocks/vercel.ts
index 0993e6ed723..bb5e022ea85 100644
--- a/apps/sim/blocks/blocks/vercel.ts
+++ b/apps/sim/blocks/blocks/vercel.ts
@@ -11,7 +11,7 @@ export const VercelBlock: BlockConfig = {
     'Integrate with Vercel to manage deployments, projects, domains, DNS records, environment variables, aliases, edge configs, teams, and more.',
   docsLink: 'https://docs.sim.ai/tools/vercel',
   category: 'tools',
-  integrationType: IntegrationType.DeveloperTools,
+  integrationType: IntegrationType.DevOps,
   tags: ['cloud', 'ci-cd'],
   bgColor: '#171717',
   icon: VercelIcon,
diff --git a/apps/sim/blocks/blocks/video_generator.ts b/apps/sim/blocks/blocks/video_generator.ts
index eaccc6cde1f..8994c504723 100644
--- a/apps/sim/blocks/blocks/video_generator.ts
+++ b/apps/sim/blocks/blocks/video_generator.ts
@@ -12,7 +12,7 @@ export const VideoGeneratorBlock: BlockConfig<VideoBlockResponse> = {
   longDescription:
     'Generate high-quality videos from text prompts using leading AI providers. Supports multiple models, aspect ratios, resolutions, and provider-specific features like world consistency, camera controls, and audio generation.',
   docsLink: 'https://docs.sim.ai/tools/video-generator',
-  category: 'tools',
+  category: 'blocks',
   integrationType: IntegrationType.AI,
   tags: ['video-generation', 'llm'],
   bgColor: '#181C1E',
diff --git a/apps/sim/blocks/blocks/vision.ts b/apps/sim/blocks/blocks/vision.ts
index 46c910ad8f4..d12264a27fa 100644
--- a/apps/sim/blocks/blocks/vision.ts
+++ b/apps/sim/blocks/blocks/vision.ts
@@ -29,7 +29,7 @@ export const VisionBlock: BlockConfig<VisionResponse> = {
   authMode: AuthMode.ApiKey,
   longDescription: 'Integrate Vision into the workflow. Can analyze images with vision models.',
   docsLink: 'https://docs.sim.ai/tools/vision',
-  category: 'tools',
+  category: 'blocks',
   integrationType: IntegrationType.AI,
   tags: ['llm', 'document-processing', 'ocr'],
   bgColor: '#4D5FFF',
diff --git a/apps/sim/blocks/blocks/wealthbox.ts b/apps/sim/blocks/blocks/wealthbox.ts
index 222d94b5938..4d74a7360e2 100644
--- a/apps/sim/blocks/blocks/wealthbox.ts
+++ b/apps/sim/blocks/blocks/wealthbox.ts
@@ -13,9 +13,9 @@ export const WealthboxBlock: BlockConfig<WealthboxResponse> = {
     'Integrate Wealthbox into the workflow. Can read and write notes, read and write contacts, and read and write tasks.',
   docsLink: 'https://docs.sim.ai/tools/wealthbox',
   category: 'tools',
-  integrationType: IntegrationType.CRM,
+  integrationType: IntegrationType.Sales,
   tags: ['sales-engagement', 'customer-support'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: WealthboxIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/webflow.ts b/apps/sim/blocks/blocks/webflow.ts
index fcd106496ab..da6ee6778a3 100644
--- a/apps/sim/blocks/blocks/webflow.ts
+++ b/apps/sim/blocks/blocks/webflow.ts
@@ -14,10 +14,10 @@ export const WebflowBlock: BlockConfig<WebflowResponse> = {
     'Integrates Webflow CMS into the workflow. Can create, get, list, update, or delete items in Webflow CMS collections. Manage your Webflow content programmatically. Can be used in trigger mode to trigger workflows when collection items change or forms are submitted.',
   docsLink: 'https://docs.sim.ai/tools/webflow',
   category: 'tools',
-  integrationType: IntegrationType.Design,
+  integrationType: IntegrationType.Marketing,
   tags: ['content-management', 'seo'],
   triggerAllowed: true,
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: WebflowIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/wordpress.ts b/apps/sim/blocks/blocks/wordpress.ts
index 58ea0629dcf..82112068595 100644
--- a/apps/sim/blocks/blocks/wordpress.ts
+++ b/apps/sim/blocks/blocks/wordpress.ts
@@ -14,7 +14,7 @@ export const WordPressBlock: BlockConfig<WordPressResponse> = {
     'Integrate with WordPress to create, update, and manage posts, pages, media, comments, categories, tags, and users. Supports WordPress.com sites via OAuth and self-hosted WordPress sites using Application Passwords authentication.',
   docsLink: 'https://docs.sim.ai/tools/wordpress',
   category: 'tools',
-  integrationType: IntegrationType.Design,
+  integrationType: IntegrationType.Marketing,
   tags: ['content-management', 'seo'],
   bgColor: '#21759B',
   icon: WordpressIcon,
diff --git a/apps/sim/blocks/blocks/zendesk.ts b/apps/sim/blocks/blocks/zendesk.ts
index 1a994a6d4fa..be67caedf6e 100644
--- a/apps/sim/blocks/blocks/zendesk.ts
+++ b/apps/sim/blocks/blocks/zendesk.ts
@@ -11,9 +11,9 @@ export const ZendeskBlock: BlockConfig = {
   docsLink: 'https://docs.sim.ai/tools/zendesk',
   authMode: AuthMode.ApiKey,
   category: 'tools',
-  integrationType: IntegrationType.CustomerSupport,
+  integrationType: IntegrationType.Support,
   tags: ['customer-support', 'ticketing'],
-  bgColor: '#E0E0E0',
+  bgColor: '#FFFFFF',
   icon: ZendeskIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/core.ts b/apps/sim/blocks/core.ts
new file mode 100644
index 00000000000..a2e80c826e9
--- /dev/null
+++ b/apps/sim/blocks/core.ts
@@ -0,0 +1,51 @@
+/**
+ * Canonical list of core sim blocks — the first-party capabilities surfaced
+ * at the top of the workflow toolbar and the "Blocks" section of the search
+ * modal. Distinct from third-party integrations (`BlockConfig.category === 'tools'`)
+ * which render below this list.
+ *
+ * Add or remove an entry here to control what shows up in both the toolbar
+ * and the search modal. Order does not matter — both consumers sort
+ * alphabetically.
+ *
+ * `loop` and `parallel` are subflow primitives, not `BlockConfig` entries —
+ * they are still listed here so a single source of truth stays canonical.
+ */
+export const CORE_BLOCK_TYPES = [
+  'agent',
+  'api',
+  'condition',
+  'credential',
+  'evaluator',
+  'file',
+  'function',
+  'guardrails',
+  'human_in_the_loop',
+  'knowledge',
+  'logs',
+  'loop',
+  'memory',
+  'mothership',
+  'note',
+  'parallel',
+  'response',
+  'router',
+  'search',
+  'ssh',
+  'table',
+  'variables',
+  'wait',
+  'webhook_request',
+  'workflow',
+  'workflow_input',
+] as const
+
+export type CoreBlockType = (typeof CORE_BLOCK_TYPES)[number]
+
+const CORE_BLOCK_TYPE_SET: ReadonlySet<string> = new Set(CORE_BLOCK_TYPES)
+
+/** Strips a trailing `_vN` so versioned blocks (e.g. `router_v2`) match their base name. */
+const stripVersionSuffix = (type: string): string => type.replace(/_v\d+$/, '')
+
+export const isCoreBlockType = (type: string): boolean =>
+  CORE_BLOCK_TYPE_SET.has(type) || CORE_BLOCK_TYPE_SET.has(stripVersionSuffix(type))
diff --git a/apps/sim/blocks/registry.ts b/apps/sim/blocks/registry.ts
index cd6144ff5f7..e2aa3893582 100644
--- a/apps/sim/blocks/registry.ts
+++ b/apps/sim/blocks/registry.ts
@@ -232,7 +232,7 @@ import { YouTubeBlock } from '@/blocks/blocks/youtube'
 import { ZendeskBlock } from '@/blocks/blocks/zendesk'
 import { ZepBlock } from '@/blocks/blocks/zep'
 import { ZoomBlock } from '@/blocks/blocks/zoom'
-import type { BlockConfig } from '@/blocks/types'
+import type { BlockCategory, BlockConfig } from '@/blocks/types'
 
 // Registry of all available blocks, alphabetically sorted
 export const registry: Record<string, BlockConfig> = {
@@ -527,7 +527,7 @@ export const getBlockByToolName = (toolName: string): BlockConfig | undefined =>
   return Object.values(registry).find((block) => block.tools?.access?.includes(toolName))
 }
 
-export const getBlocksByCategory = (category: 'blocks' | 'tools' | 'triggers'): BlockConfig[] =>
+export const getBlocksByCategory = (category: BlockCategory): BlockConfig[] =>
   Object.values(registry).filter((block) => block.category === category)
 
 export const getAllBlockTypes = (): string[] => Object.keys(registry)
diff --git a/apps/sim/blocks/types.ts b/apps/sim/blocks/types.ts
index 4125cb1e928..c086634fbd3 100644
--- a/apps/sim/blocks/types.ts
+++ b/apps/sim/blocks/types.ts
@@ -19,22 +19,49 @@ export type BlockCategory = 'blocks' | 'tools' | 'triggers'
 export enum IntegrationType {
   AI = 'ai',
   Analytics = 'analytics',
+  Commerce = 'commerce',
   Communication = 'communication',
-  CRM = 'crm',
-  CustomerSupport = 'customer-support',
   Databases = 'databases',
-  Design = 'design',
-  DeveloperTools = 'developer-tools',
+  DevOps = 'devops',
   Documents = 'documents',
-  Ecommerce = 'ecommerce',
   Email = 'email',
-  FileStorage = 'file-storage',
   HR = 'hr',
-  Other = 'other',
+  Marketing = 'marketing',
+  Observability = 'observability',
   Productivity = 'productivity',
   Sales = 'sales',
   Search = 'search',
   Security = 'security',
+  Support = 'support',
+}
+
+/**
+ * Human-readable label for each canonical integration category. Used by every
+ * UI surface that renders a category name — landing /integrations grid,
+ * workspace integrations page, dropdowns, etc.
+ */
+export const INTEGRATION_TYPE_LABELS: Record<IntegrationType, string> = {
+  [IntegrationType.AI]: 'AI',
+  [IntegrationType.Analytics]: 'Analytics',
+  [IntegrationType.Commerce]: 'Commerce',
+  [IntegrationType.Communication]: 'Communication',
+  [IntegrationType.Databases]: 'Databases',
+  [IntegrationType.DevOps]: 'DevOps',
+  [IntegrationType.Documents]: 'Documents',
+  [IntegrationType.Email]: 'Email',
+  [IntegrationType.HR]: 'HR',
+  [IntegrationType.Marketing]: 'Marketing',
+  [IntegrationType.Observability]: 'Observability',
+  [IntegrationType.Productivity]: 'Productivity',
+  [IntegrationType.Sales]: 'Sales',
+  [IntegrationType.Search]: 'Search',
+  [IntegrationType.Security]: 'Security',
+  [IntegrationType.Support]: 'Support',
+}
+
+/** Format any category slug for display. Falls back to the slug if unknown. */
+export function formatIntegrationType(slug: string): string {
+  return INTEGRATION_TYPE_LABELS[slug as IntegrationType] ?? slug
 }
 
 export type IntegrationTag =
diff --git a/apps/sim/components/emcn/components/button/button.tsx b/apps/sim/components/emcn/components/button/button.tsx
index 136830debb9..d75a9d9d07d 100644
--- a/apps/sim/components/emcn/components/button/button.tsx
+++ b/apps/sim/components/emcn/components/button/button.tsx
@@ -25,6 +25,7 @@ const buttonVariants = cva(
         subtle:
           'text-[var(--text-body)] hover-hover:text-[var(--text-body)] hover-hover:bg-[var(--surface-4)]',
         'ghost-secondary': 'text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]',
+        quiet: 'text-[var(--text-secondary)] hover-hover:bg-[var(--surface-active)]',
       },
       size: {
         sm: 'px-1.5 py-1 text-[length:11px]',
diff --git a/apps/sim/components/emcn/components/code/copy-code-button.tsx b/apps/sim/components/emcn/components/code/copy-code-button.tsx
index 4ddcc2bfd40..e68493cea88 100644
--- a/apps/sim/components/emcn/components/code/copy-code-button.tsx
+++ b/apps/sim/components/emcn/components/code/copy-code-button.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Button, Check, Copy } from '@/components/emcn'
+import { Button, Check, Duplicate } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 
@@ -19,7 +19,7 @@ export function CopyCodeButton({ code, className }: CopyCodeButtonProps) {
       onClick={() => copy(code)}
       className={cn('flex items-center gap-1 rounded px-1.5 py-0.5 text-xs', className)}
     >
-      {copied ? <Check className='size-[14px]' /> : <Copy className='size-[14px]' />}
+      {copied ? <Check className='size-3.5' /> : <Duplicate className='size-3.5' />}
     </Button>
   )
 }
diff --git a/apps/sim/components/emcn/components/combobox/combobox.tsx b/apps/sim/components/emcn/components/combobox/combobox.tsx
index f423f7fa939..af7fa92219a 100644
--- a/apps/sim/components/emcn/components/combobox/combobox.tsx
+++ b/apps/sim/components/emcn/components/combobox/combobox.tsx
@@ -74,7 +74,7 @@ export type ComboboxOptionGroup = {
   items: ComboboxOption[]
 }
 
-interface ComboboxProps
+export interface ComboboxProps
   extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>,
     VariantProps<typeof comboboxVariants> {
   /** Available options for selection */
@@ -547,7 +547,9 @@ const Combobox = memo(
                           overlayContent
                         ) : (
                           <>
-                            {SelectedIcon && <SelectedIcon className='mr-2 size-3 flex-shrink-0' />}
+                            {SelectedIcon && (
+                              <SelectedIcon className='mr-2 h-3 w-3 flex-shrink-0' />
+                            )}
                             <span className='truncate text-[var(--text-primary)]'>
                               {selectedOption?.label}
                             </span>
@@ -563,7 +565,7 @@ const Combobox = memo(
                     >
                       <ChevronDown
                         className={cn(
-                          'h-4 w-4 opacity-50 transition-transform',
+                          'size-4 opacity-50 transition-transform',
                           open && 'rotate-180'
                         )}
                       />
@@ -642,10 +644,10 @@ const Combobox = memo(
             >
               {searchable && (
                 <div className='flex items-center px-2.5 pt-2 pb-1'>
-                  <Search className='mr-[7px] ml-[1px] size-[13px] shrink-0 text-[var(--text-muted)]' />
+                  <Search className='mr-[7px] ml-[1px] h-[13px] w-[13px] shrink-0 text-[var(--text-muted)]' />
                   <input
                     ref={searchInputRef}
-                    className='w-full bg-transparent font-base text-[var(--text-primary)] text-small placeholder:text-[var(--text-muted)] focus:outline-none'
+                    className='w-full bg-transparent text-[var(--text-primary)] text-small placeholder:text-[var(--text-muted)] focus:outline-none'
                     placeholder={searchPlaceholder}
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
@@ -690,17 +692,17 @@ const Combobox = memo(
                 <div ref={dropdownRef} role='listbox' id={listboxId}>
                   {isLoading ? (
                     <div className='flex items-center justify-center py-3.5'>
-                      <Loader className='size-[16px] text-[var(--text-muted)]' animate />
-                      <span className='ml-2 font-base text-[var(--text-muted)] text-caption'>
-                        Loading options…
+                      <Loader className='h-[16px] w-[16px] text-[var(--text-muted)]' animate />
+                      <span className='ml-2 text-[var(--text-muted)] text-caption'>
+                        Loading options...
                       </span>
                     </div>
                   ) : error ? (
-                    <div className='px-1.5 py-3.5 text-center font-base text-caption text-red-500'>
+                    <div className='px-1.5 py-3.5 text-center text-caption text-red-500'>
                       {error}
                     </div>
                   ) : filteredOptions.length === 0 ? (
-                    <div className='py-3.5 text-center font-base text-[var(--text-muted)] text-caption'>
+                    <div className='py-3.5 text-center text-[var(--text-muted)] text-caption'>
                       {emptyMessage ||
                         (searchQuery || (editable && value)
                           ? 'No matching options found'
@@ -714,7 +716,7 @@ const Combobox = memo(
                           {group.sectionElement
                             ? group.sectionElement
                             : group.section && (
-                                <div className='px-1.5 py-1 font-base text-[var(--text-tertiary)] text-xs first:pt-1'>
+                                <div className='px-1.5 py-1 text-[var(--text-tertiary)] text-xs first:pt-1'>
                                   {group.section}
                                 </div>
                               )}
@@ -756,14 +758,14 @@ const Combobox = memo(
                                 {option.iconElement
                                   ? option.iconElement
                                   : OptionIcon && (
-                                      <OptionIcon className='size-[14px] flex-shrink-0' />
+                                      <OptionIcon className='h-[14px] w-[14px] flex-shrink-0' />
                                     )}
                                 <span className='flex-1 truncate text-[var(--text-primary)]'>
                                   {option.label}
                                 </span>
                                 {option.suffixElement}
                                 {multiSelect && isSelected && (
-                                  <Check className='ml-2 size-[12px] flex-shrink-0 text-[var(--text-primary)]' />
+                                  <Check className='ml-2 h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
                                 )}
                               </div>
                             )
@@ -829,13 +831,15 @@ const Combobox = memo(
                           >
                             {option.iconElement
                               ? option.iconElement
-                              : OptionIcon && <OptionIcon className='size-[14px] flex-shrink-0' />}
+                              : OptionIcon && (
+                                  <OptionIcon className='h-[14px] w-[14px] flex-shrink-0' />
+                                )}
                             <span className='flex-1 truncate text-[var(--text-primary)]'>
                               {option.label}
                             </span>
                             {option.suffixElement}
                             {multiSelect && isSelected && (
-                              <Check className='ml-2 size-[12px] flex-shrink-0 text-[var(--text-primary)]' />
+                              <Check className='ml-2 h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
                             )}
                           </div>
                         )
@@ -854,4 +858,4 @@ const Combobox = memo(
 
 Combobox.displayName = 'Combobox'
 
-export { Combobox }
+export { Combobox, comboboxVariants }
diff --git a/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx b/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx
index 86d19c40e6f..c1bf395d3cf 100644
--- a/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx
+++ b/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx
@@ -28,6 +28,9 @@ import { cn } from '@/lib/core/utils/cn'
 const ANIMATION_CLASSES =
   'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none'
 
+const CONTENT_BASE_CLASSES =
+  'z-[var(--z-dropdown)] max-h-[240px] min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden overscroll-none border border-[var(--border)] bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-sm'
+
 const DropdownMenu = DropdownMenuPrimitive.Root
 
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
@@ -54,46 +57,61 @@ const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean
+    asChild?: boolean
   }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex min-w-0 cursor-default select-none items-center gap-2 rounded-[5px] px-2 py-2 font-medium text-[var(--text-body)] text-caption outline-none transition-colors focus:bg-[var(--surface-active)] data-[state=open]:bg-[var(--surface-active)] [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]',
-      inset && 'pl-7',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className='ml-auto shrink-0' />
-  </DropdownMenuPrimitive.SubTrigger>
-))
+>(({ className, inset, children, asChild, ...props }, ref) => {
+  if (asChild) {
+    return (
+      <DropdownMenuPrimitive.SubTrigger ref={ref} asChild className={className} {...props}>
+        {children}
+      </DropdownMenuPrimitive.SubTrigger>
+    )
+  }
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        'flex h-[30px] min-w-0 cursor-default select-none items-center gap-2 rounded-lg px-2 text-[var(--text-body)] text-small outline-none transition-colors focus:bg-[var(--surface-active)] data-[state=open]:bg-[var(--surface-active)] [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]',
+        inset && 'pl-7',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRight className='ml-auto shrink-0' />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+})
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      ANIMATION_CLASSES,
-      'z-[var(--z-dropdown)] max-h-[240px] min-w-[8rem] max-w-[280px] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-sm',
-      className
-    )}
-    {...props}
-  />
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.SubContent
+      ref={ref}
+      className={cn(ANIMATION_CLASSES, CONTENT_BASE_CLASSES, 'max-w-[280px] rounded-lg', className)}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
 ))
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
 
-type DropdownMenuContentProps = React.ComponentPropsWithoutRef<
-  typeof DropdownMenuPrimitive.Content
-> & {
+/**
+ * Props for {@link DropdownMenuContent}.
+ *
+ * Extends Radix's `DropdownMenu.Content` props with `onOpenAutoFocus`. Radix
+ * forwards this prop to the internal `FocusScope` (`onMountAutoFocus`) at
+ * runtime, but its public `DropdownMenuContentProps` type omits it. We surface
+ * it here so consumers can prevent the default open-focus behavior — useful
+ * when a sibling input must retain focus while the menu mounts.
+ */
+interface DropdownMenuContentProps
+  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
   /**
-   * Forwarded to Radix's internal FocusScope. The Radix primitive supports this prop at
-   * runtime but does not expose it in its public TypeScript types — surface it here so
-   * callers can opt out of the default focus-into-menu behavior on open.
+   * Fires when the content mounts and focus is about to move into it. Call
+   * `event.preventDefault()` to skip Radix's auto-focus.
    */
   onOpenAutoFocus?: (event: Event) => void
 }
@@ -106,34 +124,86 @@ const DropdownMenuContent = React.forwardRef<
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
-      className={cn(
-        ANIMATION_CLASSES,
-        'z-[var(--z-dropdown)] max-h-[240px] min-w-[8rem] max-w-[220px] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-sm',
-        className
-      )}
+      className={cn(ANIMATION_CLASSES, CONTENT_BASE_CLASSES, 'max-w-[220px] rounded-xl', className)}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
 ))
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
+const DROPDOWN_MENU_ITEM_BASE_CLASSES =
+  'relative flex h-[30px] min-w-0 cursor-pointer select-none items-center gap-2 rounded-lg px-2 text-[var(--text-body)] text-small outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]'
+
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean
+    /**
+     * Optional inline action rendered on the right edge of the item — e.g. a
+     * "more" icon button. Reveals on hover/focus of the row, and the row stays
+     * highlighted while the cursor is over the action.
+     */
+    action?: React.ReactNode
   }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
+>(({ className, inset, action, ...props }, ref) => {
+  if (action) {
+    return (
+      <div className='group/dropdownitem relative'>
+        <DropdownMenuPrimitive.Item
+          ref={ref}
+          className={cn(
+            DROPDOWN_MENU_ITEM_BASE_CLASSES,
+            'pr-[28px] group-focus-within/dropdownitem:bg-[var(--surface-active)] group-hover/dropdownitem:bg-[var(--surface-active)]',
+            inset && 'pl-7',
+            className
+          )}
+          {...props}
+        />
+        <div className='-translate-y-1/2 absolute top-1/2 right-1 flex items-center opacity-0 transition-opacity group-focus-within/dropdownitem:opacity-100 group-hover/dropdownitem:opacity-100'>
+          {action}
+        </div>
+      </div>
+    )
+  }
+  return (
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      className={cn(DROPDOWN_MENU_ITEM_BASE_CLASSES, inset && 'pl-7', className)}
+      {...props}
+    />
+  )
+})
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+/**
+ * Compact icon button intended to be used as the `action` slot on a
+ * `DropdownMenuItem`. Click events are stopped from bubbling so they don't
+ * trigger the parent item's selection.
+ */
+const DropdownMenuItemAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, onClick, onPointerDown, ...props }, ref) => (
+  <button
     ref={ref}
+    type='button'
+    onClick={(e) => {
+      e.stopPropagation()
+      e.preventDefault()
+      onClick?.(e)
+    }}
+    onPointerDown={(e) => {
+      e.stopPropagation()
+      onPointerDown?.(e)
+    }}
     className={cn(
-      'relative flex min-w-0 cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-1.5 font-medium text-[var(--text-body)] text-caption outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]',
-      inset && 'pl-7',
+      'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-[16px] [&_svg]:text-[var(--text-icon)]',
       className
     )}
     {...props}
   />
 ))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+DropdownMenuItemAction.displayName = 'DropdownMenuItemAction'
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -142,15 +212,15 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-[5px] py-[5px] pr-2 pl-7 font-medium text-[var(--text-body)] text-caption outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex h-[30px] cursor-default select-none items-center rounded-lg pr-2 pl-7 text-[var(--text-body)] text-small outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className='absolute left-2 flex size-[14px] items-center justify-center'>
+    <span className='absolute left-2 flex h-[14px] w-[14px] items-center justify-center'>
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className='size-[14px]' />
+        <Check className='h-[14px] w-[14px]' />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -165,14 +235,14 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-[5px] py-[5px] pr-2 pl-7 font-medium text-[var(--text-body)] text-caption outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex h-[30px] cursor-default select-none items-center rounded-lg pr-2 pl-7 text-[var(--text-body)] text-small outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
   >
-    <span className='absolute left-2 flex size-[14px] items-center justify-center'>
+    <span className='absolute left-2 flex h-[14px] w-[14px] items-center justify-center'>
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className='size-[6px] fill-current' />
+        <Circle className='h-[6px] w-[6px] fill-current' />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -204,14 +274,12 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1.5 my-1.5 h-px bg-[var(--border-1)]', className)}
+    className={cn('my-1.5 h-px bg-[var(--border-1)]', className)}
     {...props}
   />
 ))
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
-const stopPropagation = (e: React.KeyboardEvent) => e.stopPropagation()
-
 const DropdownMenuSearchInput = React.forwardRef<
   HTMLInputElement,
   React.InputHTMLAttributes<HTMLInputElement>
@@ -232,16 +300,16 @@ const DropdownMenuSearchInput = React.forwardRef<
   )
 
   return (
-    <div className='mx-0.5 mt-0.5 mb-0.5 flex shrink-0 items-center gap-2 rounded-[5px] border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
-      <Search className='size-[14px] shrink-0 text-[var(--text-muted)]' />
+    <div className='mx-0.5 mt-0.5 mb-0.5 flex h-[30px] shrink-0 items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
+      <Search className='h-[14px] w-[14px] shrink-0 text-[var(--text-muted)]' />
       <input
         ref={setRefs}
         onKeyDown={(e) => {
-          stopPropagation(e)
+          e.stopPropagation()
           onKeyDown?.(e)
         }}
         className={cn(
-          'w-full bg-transparent py-1 font-medium text-[var(--text-primary)] text-caption outline-none placeholder:text-[var(--text-muted)] focus:outline-none',
+          'h-full w-full bg-transparent text-[var(--text-body)] text-small outline-none placeholder:text-[var(--text-muted)] focus:outline-none',
           className
         )}
         {...props}
@@ -266,6 +334,7 @@ export {
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuItemAction,
   DropdownMenuCheckboxItem,
   DropdownMenuRadioItem,
   DropdownMenuLabel,
diff --git a/apps/sim/components/emcn/components/index.ts b/apps/sim/components/emcn/components/index.ts
index 50d9734135a..64354faf817 100644
--- a/apps/sim/components/emcn/components/index.ts
+++ b/apps/sim/components/emcn/components/index.ts
@@ -42,6 +42,7 @@ export {
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuItemAction,
   DropdownMenuLabel,
   DropdownMenuPortal,
   DropdownMenuRadioGroup,
@@ -140,5 +141,4 @@ export { TimePicker, timePickerVariants } from './time-picker/time-picker'
 export { CountdownRing } from './toast/countdown-ring'
 export { ToastProvider, toast, useToast } from './toast/toast'
 export { Tooltip } from './tooltip/tooltip'
-export { TourCard, TourTooltip } from './tour-tooltip/tour-tooltip'
 export { Wizard } from './wizard/wizard'
diff --git a/apps/sim/components/emcn/components/popover/popover.tsx b/apps/sim/components/emcn/components/popover/popover.tsx
index 513d5b53a95..c4525e9b16b 100644
--- a/apps/sim/components/emcn/components/popover/popover.tsx
+++ b/apps/sim/components/emcn/components/popover/popover.tsx
@@ -67,17 +67,17 @@ type PopoverVariant = 'default' | 'secondary'
 const STYLES = {
   /** Base classes shared by all interactive items */
   itemBase:
-    'flex min-w-0 cursor-pointer items-center gap-2 rounded-md px-1.5 font-medium disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed',
+    'flex min-w-0 cursor-pointer items-center gap-2 rounded-lg px-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed',
 
   /** Content container */
-  content: 'px-1.5 py-1.5 rounded-md',
+  content: 'px-1.5 py-1.5 rounded-xl',
 
   /** Size variants */
   size: {
     sm: { item: 'h-[22px] text-xs', icon: 'h-3 w-3', section: 'px-1.5 py-1 text-xs' },
     md: {
-      item: 'h-[26px] text-caption',
-      icon: 'h-3.5 w-3.5',
+      item: 'h-[30px] text-sm',
+      icon: 'h-[14px] w-[14px]',
       section: 'px-1.5 py-1 text-xs',
     },
   } satisfies Record<PopoverSize, { item: string; icon: string; section: string }>,
@@ -85,7 +85,7 @@ const STYLES = {
   /** Color scheme variants */
   colorScheme: {
     default: {
-      text: 'text-[var(--text-body)]',
+      text: 'text-[var(--text-body)] [&_svg]:text-[var(--text-icon)]',
       section: 'text-[var(--text-tertiary)]',
       search: 'text-[var(--text-muted)]',
       searchInput: 'text-[var(--text-primary)] placeholder:text-[var(--text-muted)]',
diff --git a/apps/sim/components/emcn/components/s-modal/s-modal.tsx b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
index ab7f2555670..b19662f65dc 100644
--- a/apps/sim/components/emcn/components/s-modal/s-modal.tsx
+++ b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
@@ -224,7 +224,7 @@ SModalMain.displayName = 'SModalMain'
 const SModalMainHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, children, ...props }, ref) => (
     <div ref={ref} className={cn('flex items-center justify-between', className)} {...props}>
-      <span className='font-base text-[var(--text-muted)] text-sm'>{children}</span>
+      <span className='text-[var(--text-muted)] text-sm'>{children}</span>
       <DialogPrimitive.Close asChild>
         <Button
           variant='ghost'
diff --git a/apps/sim/components/emcn/components/secret-reveal/secret-reveal.tsx b/apps/sim/components/emcn/components/secret-reveal/secret-reveal.tsx
index e3b93c4cd61..145f78b70c2 100644
--- a/apps/sim/components/emcn/components/secret-reveal/secret-reveal.tsx
+++ b/apps/sim/components/emcn/components/secret-reveal/secret-reveal.tsx
@@ -18,7 +18,7 @@
  */
 'use client'
 
-import { Button, Check, Copy } from '@/components/emcn'
+import { Button, Check, Duplicate } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 
@@ -61,10 +61,14 @@ export function SecretReveal({ value, className, redacted = false }: SecretRevea
       {!isHidden && (
         <Button
           variant='ghost'
-          className='-translate-y-1/2 absolute top-1/2 right-[4px] size-[28px] rounded-sm text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]'
+          className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-sm text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]'
           onClick={handleCopy}
         >
-          {copied ? <Check className='size-[14px]' /> : <Copy className='size-[14px]' />}
+          {copied ? (
+            <Check className='h-[14px] w-[14px]' />
+          ) : (
+            <Duplicate className='h-[14px] w-[14px]' />
+          )}
           <span className='sr-only'>Copy to clipboard</span>
         </Button>
       )}
diff --git a/apps/sim/components/emcn/components/tooltip/tooltip.tsx b/apps/sim/components/emcn/components/tooltip/tooltip.tsx
index e8a35718d89..1b666e181ae 100644
--- a/apps/sim/components/emcn/components/tooltip/tooltip.tsx
+++ b/apps/sim/components/emcn/components/tooltip/tooltip.tsx
@@ -50,7 +50,7 @@ const Content = React.forwardRef<
       collisionPadding={8}
       avoidCollisions
       className={cn(
-        'z-[var(--z-tooltip)] max-w-[260px] rounded-[4px] bg-[var(--tooltip-bg)] px-2 py-[3.5px] font-base text-white text-xs shadow-sm dark:text-black',
+        'z-[var(--z-tooltip)] max-w-[260px] rounded-[4px] bg-[var(--tooltip-bg)] px-2 py-[3.5px] text-white text-xs shadow-sm dark:text-black',
         className
       )}
       {...props}
diff --git a/apps/sim/components/emcn/components/tour-tooltip/tour-tooltip.tsx b/apps/sim/components/emcn/components/tour-tooltip/tour-tooltip.tsx
deleted file mode 100644
index 0c3319e9d94..00000000000
--- a/apps/sim/components/emcn/components/tour-tooltip/tour-tooltip.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-'use client'
-
-import type * as React from 'react'
-import { type RefObject, useRef } from 'react'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-import { X } from 'lucide-react'
-import { createPortal } from 'react-dom'
-import { Button } from '@/components/emcn/components/button/button'
-import { cn } from '@/lib/core/utils/cn'
-
-type TourTooltipPlacement = 'top' | 'right' | 'bottom' | 'left' | 'center'
-
-interface TourCardProps {
-  /** Title displayed in the card header */
-  title: string
-  /** Description text in the card body */
-  description: React.ReactNode
-  /** Current step number (1-based) */
-  step: number
-  /** Total number of steps in the tour */
-  totalSteps: number
-  /** Whether this is the first step (hides Back button) */
-  isFirst?: boolean
-  /** Whether this is the last step (changes Next to Done) */
-  isLast?: boolean
-  /** Called when the user clicks Next or Done */
-  onNext?: () => void
-  /** Called when the user clicks Back */
-  onBack?: () => void
-  /** Called when the user dismisses the tour */
-  onClose?: () => void
-}
-
-function TourCard({
-  title,
-  description,
-  step,
-  totalSteps,
-  isFirst,
-  isLast,
-  onNext,
-  onBack,
-  onClose,
-}: TourCardProps) {
-  return (
-    <>
-      <div className='flex items-center justify-between gap-2 px-4 pt-4 pb-2'>
-        <h3 className='min-w-0 font-medium text-[var(--text-primary)] text-small leading-none'>
-          {title}
-        </h3>
-        <Button
-          variant='ghost'
-          className='relative size-[16px] flex-shrink-0 p-0 before:absolute before:inset-[-14px] before:content-[""]'
-          onClick={onClose}
-          aria-label='Close tour'
-        >
-          <X className='size-[16px]' />
-          <span className='sr-only'>Close</span>
-        </Button>
-      </div>
-
-      <div className='px-4 pt-1 pb-3'>
-        <p className='text-[var(--text-secondary)] text-caption leading-[1.6]'>{description}</p>
-      </div>
-
-      <div className='flex items-center justify-between rounded-b-xl border-[var(--border)] border-t bg-[color-mix(in_srgb,var(--surface-3)_50%,transparent)] px-4 py-2'>
-        <span className='text-[var(--text-muted)] text-xs [font-variant-numeric:tabular-nums]'>
-          {step} / {totalSteps}
-        </span>
-        <div className='flex items-center gap-1.5'>
-          <Button
-            variant='default'
-            size='sm'
-            onClick={onBack}
-            tabIndex={isFirst ? -1 : undefined}
-            className={cn(isFirst && 'invisible')}
-          >
-            Back
-          </Button>
-          <Button variant='tertiary' size='sm' onClick={onNext}>
-            {isLast ? 'Done' : 'Next'}
-          </Button>
-        </div>
-      </div>
-    </>
-  )
-}
-
-interface TourTooltipProps extends TourCardProps {
-  /** Placement relative to the target element */
-  placement?: TourTooltipPlacement
-  /** Target DOM element to anchor the tooltip to */
-  targetEl: HTMLElement | null
-  /** Controls tooltip visibility for smooth transitions */
-  isVisible?: boolean
-  /** Whether this is the initial entrance (plays full entrance animation) */
-  isEntrance?: boolean
-  /** Additional class names for the tooltip card */
-  className?: string
-}
-
-const PLACEMENT_TO_SIDE: Record<
-  Exclude<TourTooltipPlacement, 'center'>,
-  'top' | 'right' | 'bottom' | 'left'
-> = {
-  top: 'top',
-  right: 'right',
-  bottom: 'bottom',
-  left: 'left',
-}
-
-/**
- * A positioned tooltip component for guided product tours.
- *
- * Anchors to a target DOM element using Radix Popover primitives for
- * collision-aware positioning. Supports centered placement for overlay steps.
- * The card surface matches the emcn Modal / DropdownMenu conventions.
- *
- * @example
- * ```tsx
- * <TourTooltip
- *   title="Welcome"
- *   description="This is your dashboard."
- *   step={1}
- *   totalSteps={5}
- *   placement="bottom"
- *   targetEl={document.querySelector('[data-tour="home"]')}
- *   onNext={handleNext}
- *   onClose={handleClose}
- * />
- * ```
- */
-function TourTooltip({
-  title,
-  description,
-  step,
-  totalSteps,
-  placement = 'bottom',
-  targetEl,
-  isFirst = false,
-  isLast = false,
-  isVisible = true,
-  isEntrance = false,
-  onNext,
-  onBack,
-  onClose,
-  className,
-}: TourTooltipProps) {
-  const virtualRef = useRef<HTMLElement | null>(null)
-  virtualRef.current = targetEl
-
-  if (typeof document === 'undefined') return null
-  if (!isVisible) return null
-
-  const isCentered = placement === 'center'
-
-  const cardClasses = cn(
-    'w-[260px] overflow-hidden rounded-xl bg-[var(--bg)]',
-    isEntrance && 'animate-tour-tooltip-in motion-reduce:animate-none',
-    className
-  )
-
-  const cardContent = (
-    <TourCard
-      title={title}
-      description={description}
-      step={step}
-      totalSteps={totalSteps}
-      isFirst={isFirst}
-      isLast={isLast}
-      onNext={onNext}
-      onBack={onBack}
-      onClose={onClose}
-    />
-  )
-
-  if (isCentered) {
-    return createPortal(
-      <div className='fixed inset-0 z-[10000300] flex items-center justify-center'>
-        <div
-          className={cn(
-            cardClasses,
-            'pointer-events-auto relative shadow-overlay ring-1 ring-foreground/10'
-          )}
-        >
-          {cardContent}
-        </div>
-      </div>,
-      document.body
-    )
-  }
-
-  if (!targetEl) return null
-
-  return createPortal(
-    <PopoverPrimitive.Root open>
-      <PopoverPrimitive.Anchor virtualRef={virtualRef as RefObject<HTMLElement>} />
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-          side={PLACEMENT_TO_SIDE[placement] || 'bottom'}
-          sideOffset={10}
-          collisionPadding={12}
-          avoidCollisions
-          className='z-[10000300] outline-none drop-shadow-tour'
-          onOpenAutoFocus={(e) => e.preventDefault()}
-          onCloseAutoFocus={(e) => e.preventDefault()}
-        >
-          <div className={cardClasses}>{cardContent}</div>
-          <PopoverPrimitive.Arrow width={14} height={7} asChild>
-            <svg
-              width={14}
-              height={7}
-              viewBox='0 0 14 7'
-              preserveAspectRatio='none'
-              className='-mt-px fill-[var(--bg)] stroke-[var(--border)]'
-            >
-              <polygon points='0,0 14,0 7,7' className='stroke-none' />
-              <polyline points='0,0 7,7 14,0' fill='none' strokeWidth={1} />
-            </svg>
-          </PopoverPrimitive.Arrow>
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Portal>
-    </PopoverPrimitive.Root>,
-    document.body
-  )
-}
-
-export { TourCard, TourTooltip }
diff --git a/apps/sim/components/emcn/icons/animate/copy.module.css b/apps/sim/components/emcn/icons/animate/copy.module.css
deleted file mode 100644
index e3d52509b92..00000000000
--- a/apps/sim/components/emcn/icons/animate/copy.module.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Copy icon animation
- * Creates a continuous flow where elements cycle through positions:
- * 1. Top-left segment moves away and disappears
- * 2. Bottom-right block slides to the top-left position
- * 3. New block appears in the bottom-right position
- */
-
-@keyframes segment-cycle {
-  0% {
-    transform: translate(0, 0);
-    opacity: 1;
-  }
-  25% {
-    transform: translate(-8px, -8px);
-    opacity: 0;
-  }
-  25.01% {
-    transform: translate(4px, 4px);
-    opacity: 0;
-  }
-  50% {
-    transform: translate(4px, 4px);
-    opacity: 0;
-  }
-  75% {
-    transform: translate(0, 0);
-    opacity: 1;
-  }
-  100% {
-    transform: translate(0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes block-slide {
-  0% {
-    transform: translate(0, 0);
-    opacity: 1;
-  }
-  25% {
-    transform: translate(0, 0);
-    opacity: 1;
-  }
-  50% {
-    transform: translate(-4px, -4px);
-    opacity: 1;
-  }
-  75% {
-    transform: translate(0, 0);
-    opacity: 1;
-  }
-  100% {
-    transform: translate(0, 0);
-    opacity: 1;
-  }
-}
-
-.animated-copy-svg .rect-bottom-right {
-  animation: block-slide 2s ease-in-out infinite;
-  transform-box: fill-box;
-}
-
-.animated-copy-svg .rect-top-left {
-  animation: segment-cycle 2s ease-in-out infinite;
-  transform-box: fill-box;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animated-copy-svg .rect-bottom-right,
-  .animated-copy-svg .rect-top-left {
-    animation: none;
-  }
-}
diff --git a/apps/sim/components/emcn/icons/arrow-down.tsx b/apps/sim/components/emcn/icons/arrow-down.tsx
index e1cbbd85595..baf36fa64d8 100644
--- a/apps/sim/components/emcn/icons/arrow-down.tsx
+++ b/apps/sim/components/emcn/icons/arrow-down.tsx
@@ -12,7 +12,7 @@ export function ArrowDown(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/arrow-left.tsx b/apps/sim/components/emcn/icons/arrow-left.tsx
index 729fd5547a6..e7835e2137e 100644
--- a/apps/sim/components/emcn/icons/arrow-left.tsx
+++ b/apps/sim/components/emcn/icons/arrow-left.tsx
@@ -12,7 +12,7 @@ export function ArrowLeft(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/arrow-right.tsx b/apps/sim/components/emcn/icons/arrow-right.tsx
index 2d98246046a..81d052f2ce5 100644
--- a/apps/sim/components/emcn/icons/arrow-right.tsx
+++ b/apps/sim/components/emcn/icons/arrow-right.tsx
@@ -12,7 +12,7 @@ export function ArrowRight(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/arrow-up-down.tsx b/apps/sim/components/emcn/icons/arrow-up-down.tsx
index 012511c209f..e22a0048168 100644
--- a/apps/sim/components/emcn/icons/arrow-up-down.tsx
+++ b/apps/sim/components/emcn/icons/arrow-up-down.tsx
@@ -12,7 +12,7 @@ export function ArrowUpDown(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/arrow-up.tsx b/apps/sim/components/emcn/icons/arrow-up.tsx
index f4272c4fa42..3444bf53f0e 100644
--- a/apps/sim/components/emcn/icons/arrow-up.tsx
+++ b/apps/sim/components/emcn/icons/arrow-up.tsx
@@ -12,7 +12,7 @@ export function ArrowUp(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/asterisk.tsx b/apps/sim/components/emcn/icons/asterisk.tsx
index d6bc5a52925..1bd4e9ae64f 100644
--- a/apps/sim/components/emcn/icons/asterisk.tsx
+++ b/apps/sim/components/emcn/icons/asterisk.tsx
@@ -12,7 +12,7 @@ export function Asterisk(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/bell.tsx b/apps/sim/components/emcn/icons/bell.tsx
index 58b82d8babf..2df065b92df 100644
--- a/apps/sim/components/emcn/icons/bell.tsx
+++ b/apps/sim/components/emcn/icons/bell.tsx
@@ -13,7 +13,7 @@ export function Bell(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='2'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       aria-hidden='true'
diff --git a/apps/sim/components/emcn/icons/book-open.tsx b/apps/sim/components/emcn/icons/book-open.tsx
index f83e0922a4e..d635e85a1fb 100644
--- a/apps/sim/components/emcn/icons/book-open.tsx
+++ b/apps/sim/components/emcn/icons/book-open.tsx
@@ -12,7 +12,7 @@ export function BookOpen(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/bug.tsx b/apps/sim/components/emcn/icons/bug.tsx
index 1f64918e473..6fda698dea5 100644
--- a/apps/sim/components/emcn/icons/bug.tsx
+++ b/apps/sim/components/emcn/icons/bug.tsx
@@ -12,7 +12,7 @@ export function Bug(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/calendar.tsx b/apps/sim/components/emcn/icons/calendar.tsx
index 5439c016827..a957bb9f6c3 100644
--- a/apps/sim/components/emcn/icons/calendar.tsx
+++ b/apps/sim/components/emcn/icons/calendar.tsx
@@ -12,7 +12,7 @@ export function Calendar(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/check.tsx b/apps/sim/components/emcn/icons/check.tsx
index 6d26915e200..6a7c153bc70 100644
--- a/apps/sim/components/emcn/icons/check.tsx
+++ b/apps/sim/components/emcn/icons/check.tsx
@@ -12,7 +12,7 @@ export function Check(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/chevron-down.tsx b/apps/sim/components/emcn/icons/chevron-down.tsx
index 56dc176d2c1..7a85e52f3bd 100644
--- a/apps/sim/components/emcn/icons/chevron-down.tsx
+++ b/apps/sim/components/emcn/icons/chevron-down.tsx
@@ -18,7 +18,7 @@ export function ChevronDown(props: SVGProps<SVGSVGElement>) {
       <path
         d='M1 1L5 5L9 1'
         stroke='currentColor'
-        strokeWidth='1.33'
+        strokeWidth='1.2'
         strokeLinecap='square'
         strokeLinejoin='miter'
         fill='none'
diff --git a/apps/sim/components/emcn/icons/clipboard-list.tsx b/apps/sim/components/emcn/icons/clipboard-list.tsx
index 4b045e9e5b8..605fd5543bf 100644
--- a/apps/sim/components/emcn/icons/clipboard-list.tsx
+++ b/apps/sim/components/emcn/icons/clipboard-list.tsx
@@ -12,7 +12,7 @@ export function ClipboardList(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/clock.tsx b/apps/sim/components/emcn/icons/clock.tsx
new file mode 100644
index 00000000000..4e423ffb290
--- /dev/null
+++ b/apps/sim/components/emcn/icons/clock.tsx
@@ -0,0 +1,26 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Clock icon component - circular clock face with hour and minute hands
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function Clock(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
+      {...props}
+    >
+      <circle cx='10.25' cy='9.75' r='9' />
+      <path d='M10.25 4.75V9.75L13.75 12.25' />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/columns2.tsx b/apps/sim/components/emcn/icons/columns2.tsx
index 9f61a86cca8..d5c5013ebc7 100644
--- a/apps/sim/components/emcn/icons/columns2.tsx
+++ b/apps/sim/components/emcn/icons/columns2.tsx
@@ -12,7 +12,7 @@ export function Columns2(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/columns3.tsx b/apps/sim/components/emcn/icons/columns3.tsx
index 23d0f5d244d..2d1b1eeb31b 100644
--- a/apps/sim/components/emcn/icons/columns3.tsx
+++ b/apps/sim/components/emcn/icons/columns3.tsx
@@ -12,7 +12,7 @@ export function Columns3(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/copy.tsx b/apps/sim/components/emcn/icons/copy.tsx
deleted file mode 100644
index ee18707e537..00000000000
--- a/apps/sim/components/emcn/icons/copy.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { SVGProps } from 'react'
-import styles from '@/components/emcn/icons/animate/copy.module.css'
-import { cn } from '@/lib/core/utils/cn'
-
-export interface CopyProps extends SVGProps<SVGSVGElement> {
-  /**
-   * Enable animation on the copy icon
-   * @default false
-   */
-  animate?: boolean
-}
-
-/**
- * Copy icon component with optional CSS-based animation
- * When animate is false, this is a lightweight static icon with no animation overhead.
- * When animate is true, CSS module animations are applied to swap the rectangles.
- * @param props - SVG properties including className, animate, etc.
- */
-export function Copy({ animate = false, className, ...props }: CopyProps) {
-  const svgClassName = cn(animate && styles['animated-copy-svg'], className)
-
-  return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='2'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      className={svgClassName}
-      aria-hidden='true'
-      {...props}
-    >
-      <rect
-        width='14'
-        height='14'
-        x='8'
-        y='8'
-        rx='2'
-        ry='2'
-        className={animate ? styles['rect-bottom-right'] : undefined}
-      />
-      <path
-        d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'
-        className={animate ? styles['rect-top-left'] : undefined}
-      />
-    </svg>
-  )
-}
diff --git a/apps/sim/components/emcn/icons/credit.tsx b/apps/sim/components/emcn/icons/credit.tsx
new file mode 100644
index 00000000000..5e5a4e0c43b
--- /dev/null
+++ b/apps/sim/components/emcn/icons/credit.tsx
@@ -0,0 +1,26 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Credit icon component - circular token with inner ring
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function Credit(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
+      {...props}
+    >
+      <circle cx='10.25' cy='9.75' r='8.5' />
+      <circle cx='10.25' cy='9.75' r='3.5' />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/cursor.tsx b/apps/sim/components/emcn/icons/cursor.tsx
index faf915f9909..9c0d3ad67f2 100644
--- a/apps/sim/components/emcn/icons/cursor.tsx
+++ b/apps/sim/components/emcn/icons/cursor.tsx
@@ -14,7 +14,7 @@ export function Cursor(props: SVGProps<SVGSVGElement>) {
       <path
         d='M20.51 10.78C21.12 10.54 21.431 10.42 21.52 10.25C21.59 10.099 21.59 9.92 21.51 9.78C21.42 9.61 21.109 9.5 20.486 9.28L4.6 3.57C4.09 3.39 3.83 3.3 3.67 3.36C3.52 3.41 3.41 3.52 3.36 3.66C3.3 3.83 3.39 4.09 3.57 4.6L9.277 20.49C9.5 21.11 9.61 21.42 9.78 21.51C9.92 21.59 10.1 21.59 10.25 21.52C10.42 21.43 10.54 21.12 10.78 20.51L13.37 13.83C13.42 13.707 13.44 13.65 13.48 13.6C13.51 13.55 13.55 13.51 13.6 13.479C13.65 13.44 13.71 13.42 13.828 13.37L20.51 10.78Z'
         stroke='currentColor'
-        strokeWidth='2'
+        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
diff --git a/apps/sim/components/emcn/icons/database-x.tsx b/apps/sim/components/emcn/icons/database-x.tsx
index 93a66829e06..0752bb28e23 100644
--- a/apps/sim/components/emcn/icons/database-x.tsx
+++ b/apps/sim/components/emcn/icons/database-x.tsx
@@ -12,7 +12,7 @@ export function DatabaseX(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/database.tsx b/apps/sim/components/emcn/icons/database.tsx
index 40d29d35d89..d0a221cdeb2 100644
--- a/apps/sim/components/emcn/icons/database.tsx
+++ b/apps/sim/components/emcn/icons/database.tsx
@@ -12,7 +12,7 @@ export function Database(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/download.tsx b/apps/sim/components/emcn/icons/download.tsx
index dc3418b1941..66d47d24b25 100644
--- a/apps/sim/components/emcn/icons/download.tsx
+++ b/apps/sim/components/emcn/icons/download.tsx
@@ -28,7 +28,7 @@ export function Download({ animate = false, className, ...props }: DownloadProps
       viewBox='0 0 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='2'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       className={svgClassName}
diff --git a/apps/sim/components/emcn/icons/duplicate.tsx b/apps/sim/components/emcn/icons/duplicate.tsx
index 410912d57c1..36e235f3fde 100644
--- a/apps/sim/components/emcn/icons/duplicate.tsx
+++ b/apps/sim/components/emcn/icons/duplicate.tsx
@@ -1,24 +1,26 @@
 import type { SVGProps } from 'react'
 
 /**
- * Ducpliate icon component
+ * Duplicate icon component - two overlapping rounded rectangles
  * @param props - SVG properties including className, fill, etc.
  */
 export function Duplicate(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      width='15'
-      height='15'
-      viewBox='0 0 15 15'
+      width='24'
+      height='24'
+      viewBox='-1 -2 24 24'
       fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path
-        d='M10.47 13.04C10.82 13.04 11.11 13.33 11.11 13.69C11.11 14.05 10.82 14.334 10.47 14.334H8.53C8.18 14.33 7.89 14.05 7.89 13.69C7.89 13.33 8.18 13.05 8.53 13.04H10.47ZM5.18 11.77C5.53 11.7 5.87 11.92 5.94 12.27C6 12.56 6.09 12.69 6.21 12.79C6.35 12.9 6.56 12.99 6.98 13.05C7.33 13.1 7.58 13.42 7.54 13.77C7.49 14.13 7.17 14.37 6.81 14.33C6.27 14.26 5.79 14.11 5.39 13.78C4.98 13.45 4.78 13.02 4.68 12.53C4.61 12.18 4.84 11.84 5.18 11.77ZM13.82 11.77C14.17 11.84 14.39 12.18 14.32 12.53C14.22 13.018 14.02 13.45 13.61 13.78C13.21 14.11 12.73 14.26 12.19 14.33C11.83 14.37 11.51 14.13 11.46 13.77C11.42 13.42 11.67 13.1 12.02 13.05C12.44 12.99 12.65 12.9 12.793 12.79C12.91 12.69 13 12.56 13.06 12.27C13.13 11.92 13.47 11.7 13.82 11.77ZM5.31 7.89C5.67 7.89 5.96 8.18 5.96 8.53V10.47C5.96 10.82 5.67 11.11 5.31 11.11C4.96 11.11 4.67 10.82 4.67 10.47V8.53C4.67 8.18 4.96 7.89 5.31 7.89ZM13.69 7.89C14.045 7.89 14.33 8.18 14.333 8.53V10.47C14.333 10.82 14.05 11.11 13.69 11.11C13.33 11.11 13.04 10.82 13.04 10.47V8.53C13.05 8.18 13.33 7.89 13.69 7.89ZM5.53 0C6.6 -7.74e-06 7.45 -2.54e-05 8.12 0.08C8.8 0.16 9.37 0.33 9.84 0.72C10 0.85 10.15 1 10.28 1.16C10.65 1.61 10.821 2.14 10.91 2.78C10.93 2.93 10.94 3.08 10.96 3.25C10.97 3.44 10.98 3.54 10.918 3.6C10.86 3.67 10.76 3.67 10.56 3.67H9.07C8.21 3.67 7.42 3.67 6.77 3.75C6.06 3.85 5.31 4.07 4.69 4.69C4.07 5.31 3.85 6.06 3.75 6.77C3.67 7.42 3.67 8.21 3.67 9.07V10.56C3.67 10.76 3.67 10.86 3.6 10.918C3.54 10.98 3.44 10.97 3.25 10.96C3.08 10.94 2.93 10.93 2.78 10.91C2.14 10.822 1.61 10.65 1.16 10.28C1 10.15 0.85 10 0.72 9.84C0.33 9.37 0.16 8.8 0.08 8.12C-2.62e-05 7.45 -7.89e-06 6.6 0 5.53V5.47C-7.74e-06 4.4 -3.3e-05 3.55 0.08 2.88C0.16 2.2 0.33 1.63 0.72 1.16C0.85 1 1 0.85 1.16 0.72C1.63 0.33 2.2 0.16 2.88 0.08C3.55 -2.66e-05 4.4 -7.9e-06 5.47 0H5.53ZM6.81 4.67C7.17 4.63 7.49 4.87 7.54 5.23C7.58 5.58 7.33 5.9 6.98 5.95C6.56 6.01 6.35 6.1 6.21 6.21C6.09 6.31 6 6.44 5.94 6.73C5.87 7.08 5.53 7.3 5.18 7.23C4.84 7.16 4.61 6.82 4.68 6.47C4.78 5.98 4.98 5.55 5.39 5.22C5.79 4.89 6.27 4.74 6.81 4.67ZM12.19 4.67C12.73 4.74 13.21 4.89 13.61 5.22C14.02 5.55 14.22 5.98 14.32 6.47C14.39 6.82 14.165 7.16 13.82 7.23C13.47 7.3 13.13 7.08 13.06 6.73C13 6.44 12.91 6.31 12.793 6.21C12.65 6.1 12.44 6.01 12.02 5.95C11.67 5.9 11.42 5.58 11.46 5.23C11.51 4.87 11.83 4.63 12.19 4.67ZM10.47 4.67C10.82 4.67 11.11 4.96 11.11 5.31C11.11 5.67 10.82 5.96 10.47 5.96H8.53C8.18 5.96 7.89 5.67 7.89 5.31C7.89 4.96 8.18 4.67 8.53 4.67H10.47Z'
-        fill='currentColor'
-      />
+      <path d='M14.25 0.75H2.75C1.64543 0.75 0.75 1.64543 0.75 2.75V14.25' />
+      <rect x='5.25' y='5.25' width='14' height='14' rx='2' />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/expand.tsx b/apps/sim/components/emcn/icons/expand.tsx
index 45d86e2dce9..7d5d4f048e8 100644
--- a/apps/sim/components/emcn/icons/expand.tsx
+++ b/apps/sim/components/emcn/icons/expand.tsx
@@ -14,28 +14,28 @@ export function Expand(props: SVGProps<SVGSVGElement>) {
       <path
         d='M15 3H21V9'
         stroke='currentColor'
-        strokeWidth='2'
+        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M9 21H3V15'
         stroke='currentColor'
-        strokeWidth='2'
+        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M21 3L14 10'
         stroke='currentColor'
-        strokeWidth='2'
+        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M3 21L10 14'
         stroke='currentColor'
-        strokeWidth='2'
+        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
diff --git a/apps/sim/components/emcn/icons/eye.tsx b/apps/sim/components/emcn/icons/eye.tsx
index 03ef284d675..dce17a570f7 100644
--- a/apps/sim/components/emcn/icons/eye.tsx
+++ b/apps/sim/components/emcn/icons/eye.tsx
@@ -1,28 +1,26 @@
 import type { SVGProps } from 'react'
 
 /**
- * Eye icon component
+ * Eye icon component - almond outline with circular pupil
  * @param props - SVG properties including className, fill, etc.
  */
 export function Eye(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      width='14'
-      height='11'
-      viewBox='0 0 14 11'
+      width='24'
+      height='24'
+      viewBox='-1 -2 24 24'
       fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path
-        d='M12.34 5.17C12.34 5.07 12.315 4.97 12.28 4.87L12.27 4.87C11.77 3.67 10.97 2.67 9.97 1.99C8.98 1.31 7.84 0.97 6.68 1C6.67 1 6.66 1 6.65 1C5.5 0.97 4.35 1.31 3.36 1.99C2.37 2.67 1.57 3.67 1.06 4.87L1.06 4.87C1.02 4.97 1 5.07 1 5.17C1 5.26 1.02 5.36 1.06 5.45C1.06 5.46 1.06 5.46 1.06 5.46C1.57 6.66 2.37 7.66 3.36 8.34C4.35 9.03 5.5 9.37 6.65 9.33H6.68C7.84 9.37 8.98 9.03 9.97 8.34C10.97 7.66 11.77 6.66 12.27 5.46L12.28 5.46L12.3 5.39C12.32 5.32 12.34 5.24 12.34 5.17ZM13.34 5.17C13.34 5.4 13.29 5.63 13.2 5.85C12.62 7.21 11.702 8.37 10.541 9.17C9.38 9.96 8.04 10.37 6.67 10.33C5.3 10.37 3.95 9.96 2.79 9.17C1.64 8.37 0.72 7.22 0.15 5.87C0.15 5.86 0.14 5.86 0.14 5.85C0.05 5.64 0 5.4 0 5.17C1.96e-05 4.93 0.05 4.7 0.14 4.48H0.14C0.71 3.12 1.63 1.96 2.79 1.17C3.95 0.37 5.3 -0.04 6.67 0C8.04 -0.04 9.38 0.37 10.541 1.17C11.7 1.96 12.62 3.12 13.196 4.48H13.2C13.29 4.7 13.34 4.93 13.34 5.17Z'
-        fill='currentColor'
-      />
-      <path
-        d='M8.5 5.17C8.5 4.93 8.45 4.69 8.36 4.47C8.27 4.24 8.13 4.04 7.96 3.87C7.79 3.7 7.59 3.57 7.37 3.47C7.15 3.38 6.91 3.33 6.67 3.33C6.18 3.33 5.71 3.53 5.37 3.87C5.03 4.21 4.83 4.68 4.83 5.17L4.84 5.35C4.88 5.77 5.07 6.16 5.37 6.46C5.71 6.81 6.18 7 6.67 7C6.91 7 7.15 6.95 7.37 6.86C7.59 6.77 7.79 6.63 7.96 6.46C8.13 6.29 8.27 6.09 8.36 5.87C8.45 5.65 8.5 5.41 8.5 5.17ZM9.5 5.17C9.5 5.54 9.43 5.91 9.29 6.25C9.14 6.6 8.93 6.91 8.67 7.17C8.41 7.43 8.1 7.64 7.75 7.79C7.41 7.93 7.04 8 6.67 8C5.92 8 5.2 7.7 4.66 7.17C4.17 6.67 3.87 6.01 3.84 5.31L3.83 5.17C3.83 4.42 4.13 3.7 4.66 3.16C5.2 2.63 5.92 2.33 6.67 2.33C7.04 2.33 7.41 2.41 7.75 2.55C8.1 2.69 8.41 2.9 8.67 3.16C8.93 3.43 9.14 3.74 9.29 4.08C9.43 4.427 9.5 4.8 9.5 5.17Z'
-        fill='currentColor'
-      />
+      <path d='M0.75 9.75C3 4.25 6.75 1.75 10.25 1.75C13.75 1.75 17.5 4.25 19.75 9.75C17.5 15.25 13.75 17.75 10.25 17.75C6.75 17.75 3 15.25 0.75 9.75Z' />
+      <circle cx='10.25' cy='9.75' r='3.25' />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/file-x.tsx b/apps/sim/components/emcn/icons/file-x.tsx
index f273c66a0a2..0d956f71337 100644
--- a/apps/sim/components/emcn/icons/file-x.tsx
+++ b/apps/sim/components/emcn/icons/file-x.tsx
@@ -12,7 +12,7 @@ export function FileX(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/file.tsx b/apps/sim/components/emcn/icons/file.tsx
index 8f26dddc857..42ec984b409 100644
--- a/apps/sim/components/emcn/icons/file.tsx
+++ b/apps/sim/components/emcn/icons/file.tsx
@@ -12,7 +12,7 @@ export function File(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/files.tsx b/apps/sim/components/emcn/icons/files.tsx
new file mode 100644
index 00000000000..c7ed29bfdbb
--- /dev/null
+++ b/apps/sim/components/emcn/icons/files.tsx
@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Files icon component - stacked documents with folded corner on the front doc
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function Files(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
+      {...props}
+    >
+      <path d='M11.25 1.75H4.25C3.14543 1.75 2.25 2.64543 2.25 3.75V14.75' />
+      <path d='M14.25 4.75H7.25C6.14543 4.75 5.25 5.64543 5.25 6.75V17.75C5.25 18.8546 6.14543 19.75 7.25 19.75H17.25C18.3546 19.75 19.25 18.8546 19.25 17.75V9.75L14.25 4.75Z' />
+      <path d='M14.25 4.75V9.75H19.25' />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/fingerprint.tsx b/apps/sim/components/emcn/icons/fingerprint.tsx
index 09a0cb5c41a..d801a4c3609 100644
--- a/apps/sim/components/emcn/icons/fingerprint.tsx
+++ b/apps/sim/components/emcn/icons/fingerprint.tsx
@@ -12,7 +12,7 @@ export function Fingerprint(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/folder-plus.tsx b/apps/sim/components/emcn/icons/folder-plus.tsx
index 9bf0544d64d..3962c329729 100644
--- a/apps/sim/components/emcn/icons/folder-plus.tsx
+++ b/apps/sim/components/emcn/icons/folder-plus.tsx
@@ -18,21 +18,21 @@ export function FolderPlus(props: SVGProps<SVGSVGElement>) {
       <path
         d='M10.3 20H4C3.47 20 2.96 19.79 2.59 19.41C2.21 19.04 2 18.53 2 18V5C2 4.47 2.21 3.96 2.59 3.59C2.96 3.21 3.47 3 4 3H7.98C8.31 3 8.64 3.08 8.94 3.23C9.23 3.39 9.49 3.62 9.67 3.9L10.33 5.1C10.51 5.38 10.76 5.6 11.05 5.76C11.343 5.92 11.67 6 12 6H20C20.53 6 21.04 6.21 21.41 6.59C21.79 6.96 22 7.47 22 8V11.3'
         stroke='currentColor'
-        strokeWidth='2'
+        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M18 15V21'
         stroke='currentColor'
-        strokeWidth='2'
+        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M15 18H21'
         stroke='currentColor'
-        strokeWidth='2'
+        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
diff --git a/apps/sim/components/emcn/icons/hammer.tsx b/apps/sim/components/emcn/icons/hammer.tsx
index ba2954ca1c4..eb187c4db8a 100644
--- a/apps/sim/components/emcn/icons/hammer.tsx
+++ b/apps/sim/components/emcn/icons/hammer.tsx
@@ -12,7 +12,7 @@ export function Hammer(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/hand.tsx b/apps/sim/components/emcn/icons/hand.tsx
index 147cb26b114..024e32b5563 100644
--- a/apps/sim/components/emcn/icons/hand.tsx
+++ b/apps/sim/components/emcn/icons/hand.tsx
@@ -14,28 +14,28 @@ export function Hand(props: SVGProps<SVGSVGElement>) {
       <path
         d='M6.5 11V6.5C6.5 5.67 7.17 5 8 5C8.83 5 9.5 5.67 9.5 6.5V11'
         stroke='currentColor'
-        strokeWidth='2'
+        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M9.5 10.5V5.5C9.5 4.67 10.17 4 11 4C11.83 4 12.5 4.67 12.5 5.5V10.5'
         stroke='currentColor'
-        strokeWidth='2'
+        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M12.5 10.5V6.5C12.5 5.67 13.17 5 14 5C14.83 5 15.5 5.67 15.5 6.5V10.5'
         stroke='currentColor'
-        strokeWidth='2'
+        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M15.5 10.5V8.5C15.5 7.67 16.17 7 17 7C17.83 7 18.5 7.67 18.5 8.5V15.5C18.5 18.81 15.81 21.5 12.5 21.5H11.5C8.19 21.5 5.5 18.81 5.5 15.5V13C5.5 12.17 6.17 11.5 7 11.5C7.83 11.5 8.5 12.17 8.5 13'
         stroke='currentColor'
-        strokeWidth='2'
+        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
diff --git a/apps/sim/components/emcn/icons/help-circle.tsx b/apps/sim/components/emcn/icons/help-circle.tsx
index 1e81e3eda83..8ea21b8f8cd 100644
--- a/apps/sim/components/emcn/icons/help-circle.tsx
+++ b/apps/sim/components/emcn/icons/help-circle.tsx
@@ -12,7 +12,7 @@ export function HelpCircle(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/hex-simple.tsx b/apps/sim/components/emcn/icons/hex-simple.tsx
index 84c806d7c16..5ef39ce1f59 100644
--- a/apps/sim/components/emcn/icons/hex-simple.tsx
+++ b/apps/sim/components/emcn/icons/hex-simple.tsx
@@ -19,10 +19,10 @@ export function HexSimple(props: SVGProps<SVGSVGElement>) {
         d='M12 2L20.66 7V17L12 22L3.34 17V7L12 2Z'
         fill='none'
         stroke='currentColor'
-        strokeWidth='2'
+        strokeWidth='1.55'
         strokeLinejoin='round'
       />
-      <circle cx='12' cy='12' r='4' fill='none' stroke='currentColor' strokeWidth='2' />
+      <circle cx='12' cy='12' r='4' fill='none' stroke='currentColor' strokeWidth='1.55' />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/home.tsx b/apps/sim/components/emcn/icons/home.tsx
index 0bb0e1d994c..4f2a46fd6d8 100644
--- a/apps/sim/components/emcn/icons/home.tsx
+++ b/apps/sim/components/emcn/icons/home.tsx
@@ -12,7 +12,7 @@ export function Home(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/image-up.tsx b/apps/sim/components/emcn/icons/image-up.tsx
new file mode 100644
index 00000000000..862595c7c47
--- /dev/null
+++ b/apps/sim/components/emcn/icons/image-up.tsx
@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+/**
+ * ImageUp icon component - picture frame with sun and mountain silhouette.
+ * Universal "image" glyph used for actions that set or upload an image
+ * (e.g., workspace logo).
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function ImageUp(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
+      {...props}
+    >
+      <rect x='0.75' y='0.75' width='18.5' height='18' rx='2.5' />
+      <circle cx='6.25' cy='6.25' r='1.75' />
+      <path d='M17.25 12.75L12.25 7.75L2.75 17.25' />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/index.ts b/apps/sim/components/emcn/icons/index.ts
index 83c087a599e..471659e8856 100644
--- a/apps/sim/components/emcn/icons/index.ts
+++ b/apps/sim/components/emcn/icons/index.ts
@@ -16,10 +16,11 @@ export { Check } from './check'
 export { ChevronDown } from './chevron-down'
 export { Clipboard } from './clipboard'
 export { ClipboardList } from './clipboard-list'
+export { Clock } from './clock'
 export { Columns2 } from './columns2'
 export { Columns3 } from './columns3'
 export { Connections } from './connections'
-export { Copy } from './copy'
+export { Credit } from './credit'
 export { Cursor } from './cursor'
 export { Database } from './database'
 export { DatabaseX } from './database-x'
@@ -31,6 +32,7 @@ export { Eye } from './eye'
 export { EyeOff } from './eye-off'
 export { File } from './file'
 export { FileX } from './file-x'
+export { Files } from './files'
 export { Fingerprint } from './fingerprint'
 export { Folder } from './folder'
 export { FolderCode } from './folder-code'
@@ -41,6 +43,7 @@ export { Hand } from './hand'
 export { HelpCircle } from './help-circle'
 export { HexSimple } from './hex-simple'
 export { Home } from './home'
+export { ImageUp } from './image-up'
 export { Integration } from './integration'
 export { Key } from './key'
 export { KeySquare } from './key-square'
@@ -53,10 +56,12 @@ export { Lock } from './lock'
 export { LogIn } from './log-in'
 export { LogOut } from './log-out'
 export { Mail } from './mail'
+export { Mic } from './mic'
 export { MoreHorizontal } from './more-horizontal'
 export { NoWrap } from './no-wrap'
 export { Palette } from './palette'
 export { PanelLeft } from './panel-left'
+export { Paperclip } from './paperclip'
 export { Pause } from './pause'
 export { Pencil } from './pencil'
 export { PillsRing } from './pills-ring'
@@ -78,6 +83,7 @@ export { SquareArrowUpRight } from './square-arrow-up-right'
 export { Table } from './table'
 export { TableX } from './table-x'
 export { TagIcon } from './tag'
+export { Task } from './task'
 export { TerminalWindow } from './terminal-window'
 export { ThumbsDown } from './thumbs-down'
 export { ThumbsUp } from './thumbs-up'
diff --git a/apps/sim/components/emcn/icons/integration.tsx b/apps/sim/components/emcn/icons/integration.tsx
index 1fa3e0cb1bb..84a19d170ae 100644
--- a/apps/sim/components/emcn/icons/integration.tsx
+++ b/apps/sim/components/emcn/icons/integration.tsx
@@ -1,7 +1,7 @@
 import type { SVGProps } from 'react'
 
 /**
- * Integration icon component - two connected blocks
+ * Integration icon component - two overlapping rounded squares, diagonally offset.
  * @param props - SVG properties including className, fill, etc.
  */
 export function Integration(props: SVGProps<SVGSVGElement>) {
@@ -12,16 +12,15 @@ export function Integration(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <rect x='1' y='6.5' width='7' height='7' rx='1.5' />
-      <rect x='14' y='6.5' width='7' height='7' rx='1.5' />
-      <path d='M8 10H14' />
+      <rect x='1.5' y='1' width='12' height='12' rx='2' />
+      <rect x='8.5' y='8' width='12' height='12' rx='2' />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/key-square.tsx b/apps/sim/components/emcn/icons/key-square.tsx
index 53fbedde978..085d8c7cfcf 100644
--- a/apps/sim/components/emcn/icons/key-square.tsx
+++ b/apps/sim/components/emcn/icons/key-square.tsx
@@ -12,7 +12,7 @@ export function KeySquare(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/key.tsx b/apps/sim/components/emcn/icons/key.tsx
index 11950dfbd9a..b8407642cb5 100644
--- a/apps/sim/components/emcn/icons/key.tsx
+++ b/apps/sim/components/emcn/icons/key.tsx
@@ -12,7 +12,7 @@ export function Key(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/layout.tsx b/apps/sim/components/emcn/icons/layout.tsx
index 163a8944bca..788e477426d 100644
--- a/apps/sim/components/emcn/icons/layout.tsx
+++ b/apps/sim/components/emcn/icons/layout.tsx
@@ -42,7 +42,7 @@ export function Layout({
       viewBox='0 0 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='2'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/library.tsx b/apps/sim/components/emcn/icons/library.tsx
index 4248633e246..1bd3d0b8428 100644
--- a/apps/sim/components/emcn/icons/library.tsx
+++ b/apps/sim/components/emcn/icons/library.tsx
@@ -12,7 +12,7 @@ export function Library(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/link.tsx b/apps/sim/components/emcn/icons/link.tsx
index 46ae6a130ea..b0a89c82da7 100644
--- a/apps/sim/components/emcn/icons/link.tsx
+++ b/apps/sim/components/emcn/icons/link.tsx
@@ -13,7 +13,7 @@ export function Link(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='2'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       aria-hidden='true'
diff --git a/apps/sim/components/emcn/icons/list-filter.tsx b/apps/sim/components/emcn/icons/list-filter.tsx
index 9d883ef33cb..71ca24cef27 100644
--- a/apps/sim/components/emcn/icons/list-filter.tsx
+++ b/apps/sim/components/emcn/icons/list-filter.tsx
@@ -12,7 +12,7 @@ export function ListFilter(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/loader.tsx b/apps/sim/components/emcn/icons/loader.tsx
index 1f91b4fb717..bb08fc5aad5 100644
--- a/apps/sim/components/emcn/icons/loader.tsx
+++ b/apps/sim/components/emcn/icons/loader.tsx
@@ -28,7 +28,7 @@ export function Loader({ animate = false, className, ...props }: LoaderProps) {
       viewBox='0 0 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='2'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       className={svgClassName}
diff --git a/apps/sim/components/emcn/icons/lock.tsx b/apps/sim/components/emcn/icons/lock.tsx
index 65028bf1098..e409698f54a 100644
--- a/apps/sim/components/emcn/icons/lock.tsx
+++ b/apps/sim/components/emcn/icons/lock.tsx
@@ -12,7 +12,7 @@ export function Lock(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/log-in.tsx b/apps/sim/components/emcn/icons/log-in.tsx
index e2505cff6dd..b75b8362783 100644
--- a/apps/sim/components/emcn/icons/log-in.tsx
+++ b/apps/sim/components/emcn/icons/log-in.tsx
@@ -12,7 +12,7 @@ export function LogIn(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/log-out.tsx b/apps/sim/components/emcn/icons/log-out.tsx
index e4f7e3439eb..658493c7591 100644
--- a/apps/sim/components/emcn/icons/log-out.tsx
+++ b/apps/sim/components/emcn/icons/log-out.tsx
@@ -12,7 +12,7 @@ export function LogOut(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/mail.tsx b/apps/sim/components/emcn/icons/mail.tsx
index 59f76e53eef..9901d405b31 100644
--- a/apps/sim/components/emcn/icons/mail.tsx
+++ b/apps/sim/components/emcn/icons/mail.tsx
@@ -12,7 +12,7 @@ export function Mail(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/mic.tsx b/apps/sim/components/emcn/icons/mic.tsx
new file mode 100644
index 00000000000..4a59eabd042
--- /dev/null
+++ b/apps/sim/components/emcn/icons/mic.tsx
@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Mic icon component - microphone with stand for voice input
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function Mic(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
+      {...props}
+    >
+      <rect x='7.25' y='0.75' width='6' height='12' rx='3' />
+      <path d='M3.75 9.25V10.25C3.75 13.8399 6.66015 16.75 10.25 16.75C13.8399 16.75 16.75 13.8399 16.75 10.25V9.25' />
+      <path d='M10.25 16.75V19.25' />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/no-wrap.tsx b/apps/sim/components/emcn/icons/no-wrap.tsx
index 01e62e1ca65..0bcabfa5f28 100644
--- a/apps/sim/components/emcn/icons/no-wrap.tsx
+++ b/apps/sim/components/emcn/icons/no-wrap.tsx
@@ -12,7 +12,7 @@ export function NoWrap(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='2'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/palette.tsx b/apps/sim/components/emcn/icons/palette.tsx
index e33264e28c5..ebfcd61fa7e 100644
--- a/apps/sim/components/emcn/icons/palette.tsx
+++ b/apps/sim/components/emcn/icons/palette.tsx
@@ -12,7 +12,7 @@ export function Palette(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/panel-left.tsx b/apps/sim/components/emcn/icons/panel-left.tsx
index ddcc454c089..136d2d137e0 100644
--- a/apps/sim/components/emcn/icons/panel-left.tsx
+++ b/apps/sim/components/emcn/icons/panel-left.tsx
@@ -12,7 +12,7 @@ export function PanelLeft(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/paperclip.tsx b/apps/sim/components/emcn/icons/paperclip.tsx
new file mode 100644
index 00000000000..02bbe9a66b4
--- /dev/null
+++ b/apps/sim/components/emcn/icons/paperclip.tsx
@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Paperclip icon component - attachment clip
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function Paperclip(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
+      {...props}
+    >
+      <path d='M18.25 9.75L10.4 17.6C8.46 19.54 5.31 19.54 3.37 17.6C1.43 15.66 1.43 12.51 3.37 10.57L11.22 2.72C12.51 1.43 14.61 1.43 15.9 2.72C17.19 4.01 17.19 6.11 15.9 7.4L8.05 15.25C7.4 15.9 6.35 15.9 5.7 15.25C5.05 14.6 5.05 13.55 5.7 12.9L12.9 5.7' />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/pause.tsx b/apps/sim/components/emcn/icons/pause.tsx
index c5ed4b10627..abb83672a77 100644
--- a/apps/sim/components/emcn/icons/pause.tsx
+++ b/apps/sim/components/emcn/icons/pause.tsx
@@ -12,7 +12,7 @@ export function Pause(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/pencil.tsx b/apps/sim/components/emcn/icons/pencil.tsx
index 7f521c3618d..5f3c7f5eee0 100644
--- a/apps/sim/components/emcn/icons/pencil.tsx
+++ b/apps/sim/components/emcn/icons/pencil.tsx
@@ -12,15 +12,15 @@ export function Pencil(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path d='M14.75 1.25L19.25 5.75L7.25 17.75H2.75V13.25L14.75 1.25Z' />
-      <path d='M12 4L16.5 8.5' />
+      <path d='M14.25 0.75L19.25 5.75L5.75 19.25H0.75V14.25L14.25 0.75Z' />
+      <path d='M10.75 4.25L15.75 9.25' />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/play.tsx b/apps/sim/components/emcn/icons/play.tsx
index de56ce846ef..dc292b3d39e 100644
--- a/apps/sim/components/emcn/icons/play.tsx
+++ b/apps/sim/components/emcn/icons/play.tsx
@@ -35,7 +35,7 @@ export function PlayOutline(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/plus.tsx b/apps/sim/components/emcn/icons/plus.tsx
index 48fb9d84b7d..90d9aab7c79 100644
--- a/apps/sim/components/emcn/icons/plus.tsx
+++ b/apps/sim/components/emcn/icons/plus.tsx
@@ -12,7 +12,7 @@ export function Plus(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/redo.tsx b/apps/sim/components/emcn/icons/redo.tsx
index b7141047f5e..b75c282e9ba 100644
--- a/apps/sim/components/emcn/icons/redo.tsx
+++ b/apps/sim/components/emcn/icons/redo.tsx
@@ -18,14 +18,14 @@ export function Redo(props: SVGProps<SVGSVGElement>) {
       <path
         d='M9.5 4.5H4C2.62 4.5 1.5 5.62 1.5 7C1.5 8.38 2.62 9.5 4 9.5H7'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M8 2.5L10 4.5L8 6.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
diff --git a/apps/sim/components/emcn/icons/refresh-cw.tsx b/apps/sim/components/emcn/icons/refresh-cw.tsx
index 97fc8173f8c..36536400194 100644
--- a/apps/sim/components/emcn/icons/refresh-cw.tsx
+++ b/apps/sim/components/emcn/icons/refresh-cw.tsx
@@ -15,7 +15,7 @@ export function RefreshCw({ animate = false, className, ...props }: RefreshCwPro
       viewBox='0 0 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='2'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       className={cn(animate && styles['animated-loader-svg'], className)}
diff --git a/apps/sim/components/emcn/icons/rocket.tsx b/apps/sim/components/emcn/icons/rocket.tsx
index 1e6f4621e72..5c224e0ccd7 100644
--- a/apps/sim/components/emcn/icons/rocket.tsx
+++ b/apps/sim/components/emcn/icons/rocket.tsx
@@ -12,7 +12,7 @@ export function Rocket(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/rows3.tsx b/apps/sim/components/emcn/icons/rows3.tsx
index 0aaa349d931..70ae9195db9 100644
--- a/apps/sim/components/emcn/icons/rows3.tsx
+++ b/apps/sim/components/emcn/icons/rows3.tsx
@@ -12,7 +12,7 @@ export function Rows3(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/search.tsx b/apps/sim/components/emcn/icons/search.tsx
index 75ab4694a3a..78a2742d707 100644
--- a/apps/sim/components/emcn/icons/search.tsx
+++ b/apps/sim/components/emcn/icons/search.tsx
@@ -12,7 +12,7 @@ export function Search(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/send.tsx b/apps/sim/components/emcn/icons/send.tsx
index ef7c3b904f8..3ec578aafd6 100644
--- a/apps/sim/components/emcn/icons/send.tsx
+++ b/apps/sim/components/emcn/icons/send.tsx
@@ -12,7 +12,7 @@ export function Send(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/server.tsx b/apps/sim/components/emcn/icons/server.tsx
index 05413e5ad51..5b2fbe32daf 100644
--- a/apps/sim/components/emcn/icons/server.tsx
+++ b/apps/sim/components/emcn/icons/server.tsx
@@ -12,7 +12,7 @@ export function Server(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/settings.tsx b/apps/sim/components/emcn/icons/settings.tsx
index 04ab7788f25..8064409535b 100644
--- a/apps/sim/components/emcn/icons/settings.tsx
+++ b/apps/sim/components/emcn/icons/settings.tsx
@@ -12,7 +12,7 @@ export function Settings(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/shield-check.tsx b/apps/sim/components/emcn/icons/shield-check.tsx
index 4dea50ea79b..97161d72608 100644
--- a/apps/sim/components/emcn/icons/shield-check.tsx
+++ b/apps/sim/components/emcn/icons/shield-check.tsx
@@ -12,7 +12,7 @@ export function ShieldCheck(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/square-arrow-up-right.tsx b/apps/sim/components/emcn/icons/square-arrow-up-right.tsx
index 898a22f5b3b..2afafc228e8 100644
--- a/apps/sim/components/emcn/icons/square-arrow-up-right.tsx
+++ b/apps/sim/components/emcn/icons/square-arrow-up-right.tsx
@@ -12,7 +12,7 @@ export function SquareArrowUpRight(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/table-x.tsx b/apps/sim/components/emcn/icons/table-x.tsx
index f86b0358d47..abbb3785d75 100644
--- a/apps/sim/components/emcn/icons/table-x.tsx
+++ b/apps/sim/components/emcn/icons/table-x.tsx
@@ -12,7 +12,7 @@ export function TableX(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/table.tsx b/apps/sim/components/emcn/icons/table.tsx
index 8c8a2e0d2a7..57be040a2c2 100644
--- a/apps/sim/components/emcn/icons/table.tsx
+++ b/apps/sim/components/emcn/icons/table.tsx
@@ -12,7 +12,7 @@ export function Table(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/tag.tsx b/apps/sim/components/emcn/icons/tag.tsx
index 17ac6afb0be..00741809712 100644
--- a/apps/sim/components/emcn/icons/tag.tsx
+++ b/apps/sim/components/emcn/icons/tag.tsx
@@ -12,7 +12,7 @@ export function TagIcon(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/task.tsx b/apps/sim/components/emcn/icons/task.tsx
new file mode 100644
index 00000000000..85b39b243b8
--- /dev/null
+++ b/apps/sim/components/emcn/icons/task.tsx
@@ -0,0 +1,26 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Task icon component - inbox tray representing incoming tasks
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function Task(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      aria-hidden='true'
+      {...props}
+    >
+      <polyline points='22 12 16 12 14 15 10 15 8 12 2 12' />
+      <path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z' />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/thumbs-down.tsx b/apps/sim/components/emcn/icons/thumbs-down.tsx
index 41b0a8f2e4e..1f3c3f59c36 100644
--- a/apps/sim/components/emcn/icons/thumbs-down.tsx
+++ b/apps/sim/components/emcn/icons/thumbs-down.tsx
@@ -12,7 +12,7 @@ export function ThumbsDown(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/thumbs-up.tsx b/apps/sim/components/emcn/icons/thumbs-up.tsx
index a82445f7ed5..771d7d15b24 100644
--- a/apps/sim/components/emcn/icons/thumbs-up.tsx
+++ b/apps/sim/components/emcn/icons/thumbs-up.tsx
@@ -12,7 +12,7 @@ export function ThumbsUp(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/trash-outline.tsx b/apps/sim/components/emcn/icons/trash-outline.tsx
index fef836dcbc1..7b112541b96 100644
--- a/apps/sim/components/emcn/icons/trash-outline.tsx
+++ b/apps/sim/components/emcn/icons/trash-outline.tsx
@@ -12,7 +12,7 @@ export function TrashOutline(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/type-boolean.tsx b/apps/sim/components/emcn/icons/type-boolean.tsx
index 099d3f48cc0..49f5c40bd54 100644
--- a/apps/sim/components/emcn/icons/type-boolean.tsx
+++ b/apps/sim/components/emcn/icons/type-boolean.tsx
@@ -12,7 +12,7 @@ export function TypeBoolean(props: SVGProps<SVGSVGElement>) {
       viewBox='-1.75 -1.5 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/type-json.tsx b/apps/sim/components/emcn/icons/type-json.tsx
index 8d101339872..1cceb276f18 100644
--- a/apps/sim/components/emcn/icons/type-json.tsx
+++ b/apps/sim/components/emcn/icons/type-json.tsx
@@ -12,7 +12,7 @@ export function TypeJson(props: SVGProps<SVGSVGElement>) {
       viewBox='-1.75 -1.75 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/type-number.tsx b/apps/sim/components/emcn/icons/type-number.tsx
index cb192038559..42f46ad47ba 100644
--- a/apps/sim/components/emcn/icons/type-number.tsx
+++ b/apps/sim/components/emcn/icons/type-number.tsx
@@ -12,7 +12,7 @@ export function TypeNumber(props: SVGProps<SVGSVGElement>) {
       viewBox='-1.75 -1.5 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/type-text.tsx b/apps/sim/components/emcn/icons/type-text.tsx
index 65e53fc03c1..63b2a01d97e 100644
--- a/apps/sim/components/emcn/icons/type-text.tsx
+++ b/apps/sim/components/emcn/icons/type-text.tsx
@@ -12,7 +12,7 @@ export function TypeText(props: SVGProps<SVGSVGElement>) {
       viewBox='-1.75 -1.5 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/undo.tsx b/apps/sim/components/emcn/icons/undo.tsx
index e193ba69ddd..c3ef3af85f1 100644
--- a/apps/sim/components/emcn/icons/undo.tsx
+++ b/apps/sim/components/emcn/icons/undo.tsx
@@ -18,14 +18,14 @@ export function Undo(props: SVGProps<SVGSVGElement>) {
       <path
         d='M2.5 4.5H8C9.38 4.5 10.5 5.62 10.5 7C10.5 8.38 9.38 9.5 8 9.5H5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M4 2.5L2 4.5L4 6.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
diff --git a/apps/sim/components/emcn/icons/unlock.tsx b/apps/sim/components/emcn/icons/unlock.tsx
index b762f8ac008..2311ce3e6c7 100644
--- a/apps/sim/components/emcn/icons/unlock.tsx
+++ b/apps/sim/components/emcn/icons/unlock.tsx
@@ -12,7 +12,7 @@ export function Unlock(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/upload.tsx b/apps/sim/components/emcn/icons/upload.tsx
index 626d6ad8b89..d1ac11b4a05 100644
--- a/apps/sim/components/emcn/icons/upload.tsx
+++ b/apps/sim/components/emcn/icons/upload.tsx
@@ -12,16 +12,16 @@ export function Upload(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path d='M10.25 14V3.5' />
-      <path d='M5.75 8L10.25 3.5L14.75 8' />
-      <path d='M3 17.5H17.5' />
+      <path d='M0.75 12.75V16.75C0.75 17.8546 1.64543 18.75 2.75 18.75H17.75C18.8546 18.75 19.75 17.8546 19.75 16.75V12.75' />
+      <path d='M10.25 14.75V1.75' />
+      <path d='M5.25 6.75L10.25 1.75L15.25 6.75' />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/user-plus.tsx b/apps/sim/components/emcn/icons/user-plus.tsx
index c551815c8df..d2c6a30ea71 100644
--- a/apps/sim/components/emcn/icons/user-plus.tsx
+++ b/apps/sim/components/emcn/icons/user-plus.tsx
@@ -1,7 +1,7 @@
 import type { SVGProps } from 'react'
 
 /**
- * UserPlus icon component — person silhouette with a plus sign for invite actions
+ * UserPlus icon component — person silhouette with a plus sign in the bottom-right
  * @param props - SVG properties including className, fill, etc.
  */
 export function UserPlus(props: SVGProps<SVGSVGElement>) {
@@ -9,20 +9,20 @@ export function UserPlus(props: SVGProps<SVGSVGElement>) {
     <svg
       width='24'
       height='24'
-      viewBox='0 0 24 24'
+      viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' />
-      <path d='M9 3a4 4 0 1 0 0 8 4 4 0 1 0 0-8' />
-      <path d='M19 8v6' />
-      <path d='M16 11h6' />
+      <path d='M4.5 5A2.5 2.5 0 1 0 9.5 5A2.5 2.5 0 1 0 4.5 5Z' />
+      <path d='M3 17V14A3 3 0 0 1 6 11H8A3 3 0 0 1 11 14' />
+      <path d='M15.5 13V17' />
+      <path d='M13.5 15H17.5' />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/user.tsx b/apps/sim/components/emcn/icons/user.tsx
index 93c7b957756..3241e182688 100644
--- a/apps/sim/components/emcn/icons/user.tsx
+++ b/apps/sim/components/emcn/icons/user.tsx
@@ -12,7 +12,7 @@ export function User(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/users.tsx b/apps/sim/components/emcn/icons/users.tsx
index ecfa6db3278..2169b250b1e 100644
--- a/apps/sim/components/emcn/icons/users.tsx
+++ b/apps/sim/components/emcn/icons/users.tsx
@@ -12,7 +12,7 @@ export function Users(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/workflow-x.tsx b/apps/sim/components/emcn/icons/workflow-x.tsx
index 354b046a34b..b7fe11530fe 100644
--- a/apps/sim/components/emcn/icons/workflow-x.tsx
+++ b/apps/sim/components/emcn/icons/workflow-x.tsx
@@ -12,7 +12,7 @@ export function WorkflowX(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/wrap.tsx b/apps/sim/components/emcn/icons/wrap.tsx
index b36a4555592..faaf08d9fc4 100644
--- a/apps/sim/components/emcn/icons/wrap.tsx
+++ b/apps/sim/components/emcn/icons/wrap.tsx
@@ -12,7 +12,7 @@ export function Wrap(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='2'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/wrench.tsx b/apps/sim/components/emcn/icons/wrench.tsx
index 3eae7c8162e..96c4e046426 100644
--- a/apps/sim/components/emcn/icons/wrench.tsx
+++ b/apps/sim/components/emcn/icons/wrench.tsx
@@ -12,7 +12,7 @@ export function Wrench(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/x.tsx b/apps/sim/components/emcn/icons/x.tsx
index d5bc45a5bab..b61874a492c 100644
--- a/apps/sim/components/emcn/icons/x.tsx
+++ b/apps/sim/components/emcn/icons/x.tsx
@@ -12,7 +12,7 @@ export function X(props: SVGProps<SVGSVGElement>) {
       viewBox='-1 -2 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.75'
+      strokeWidth='1.55'
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
diff --git a/apps/sim/components/emcn/icons/zoom-in.tsx b/apps/sim/components/emcn/icons/zoom-in.tsx
index 50e7240ee52..f83e6f5fc24 100644
--- a/apps/sim/components/emcn/icons/zoom-in.tsx
+++ b/apps/sim/components/emcn/icons/zoom-in.tsx
@@ -20,28 +20,28 @@ export function ZoomIn(props: SVGProps<SVGSVGElement>) {
         cy='5'
         r='3.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M5 3.5V6.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M3.5 5H6.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M7.5 7.5L10.5 10.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
diff --git a/apps/sim/components/emcn/icons/zoom-out.tsx b/apps/sim/components/emcn/icons/zoom-out.tsx
index 45dcdcb266b..d5a78f8e61e 100644
--- a/apps/sim/components/emcn/icons/zoom-out.tsx
+++ b/apps/sim/components/emcn/icons/zoom-out.tsx
@@ -20,21 +20,21 @@ export function ZoomOut(props: SVGProps<SVGSVGElement>) {
         cy='5'
         r='3.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M3.5 5H6.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M7.5 7.5L10.5 10.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
diff --git a/apps/sim/components/icons.tsx b/apps/sim/components/icons.tsx
index 95502bf3ff6..dcc5b4dfbec 100644
--- a/apps/sim/components/icons.tsx
+++ b/apps/sim/components/icons.tsx
@@ -1909,9 +1909,7 @@ export function ConfluenceIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
       {...props}
-      width='24'
-      height='24'
-      viewBox='0 3 21 24'
+      viewBox='-0.5 4.25 24 24'
       focusable='false'
       fill='none'
       aria-hidden='true'
@@ -2282,9 +2280,7 @@ export function JiraIcon(props: SVGProps<SVGSVGElement>) {
     <svg
       {...props}
       xmlns='http://www.w3.org/2000/svg'
-      viewBox='0 0 30 30'
-      width='24'
-      height='24'
+      viewBox='3.5 4.5 25 25'
       focusable='false'
       aria-hidden='true'
     >
@@ -4084,7 +4080,7 @@ export function PipedriveIcon(props: SVGProps<SVGSVGElement>) {
         fillRule='evenodd'
       >
         <g transform='translate(67, 44)'>
-          <use fill='#FFFFFF' xlinkHref={`#${pathId}`} />
+          <use fill='currentColor' xlinkHref={`#${pathId}`} />
         </g>
       </g>
     </svg>
@@ -5640,12 +5636,22 @@ export function GreenhouseIcon(props: SVGProps<SVGSVGElement>) {
 
 export function GreptileIcon(props: SVGProps<SVGSVGElement>) {
   return (
-    <svg {...props} viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
+    <svg {...props} viewBox='0 0 367 420' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path
-        clipRule='evenodd'
-        fillRule='evenodd'
-        fill='#44A775'
-        d='M3.35.004a6.07 6.07 0 01-.265.05C2.63.12 2.09.348 1.71.63 1.43.846.72 1.58.557 1.82a3.36 3.36 0 00-.23 3.3c.154.32.35.59.71.97.187.2.434.49.55.64a6.63 6.63 0 11.31 3.55c.1.14.035 1.61.057 3.26.043 3.27.038 3.18.2 3.49.266.49.94.79 1.47.648.29-.77.46-.204 1.35-.986.96-.84 1.09-.932 1.45-.98.12-.17.63 0 1.66.05 1.51.08 1.62.079 1.85-.16.39-.164.54-.4.66-1.07.247-1.36 1.3-2.56 2.64-3.02.116-.4.37-.104.57-.144.2-.4.43-.102.51-.138.3-.136.51-.424.57-.744.02-.11-.007-.549-.089-1.6-.091-1.18-.107-1.48-.083-1.62.057-.342.14-.46 1.01-1.45.447-.506.85-.976.9-1.04.262-.39.29-.91.07-1.34a1.44 1.44 0 00-.822-.67c-.1-.029-.834-.037-3.54-.038H9.9l-.335-.063c-.958-.179-1.76-.49-2.48-.958-.362-.236-.583-.41-1.02-.804-.408-.37-.59-.502-.921-.67A3.02 3.02 0 3.74.005a3.94 3.94 0 00-.391 0zm15.73 5.86c-.132.05-.217.13-.48.44-.592.71-.74 1.34-.531 2.26.106.47.163.57.361.67.105.05.169.06 2.64.046l2.53-.9.12-.063a.551.55 0 0.1-.895 184.88 184.88 0 00-2.22-1.25c-2.29-1.28-2.28-1.28-2.51-1.19zm-3.22 6.71a9.26 9.26 0 00-1.36.696c-.844.56-1.45 1.36-1.92 2.53-.211.53-.202.75.4.93.111.09 6.48 3.14 6.67 3.2.153.05.27.03.43-.074a.538.54 0 00.24-.434c0-.06-.03-.18-.065-.264-.156-.368-3.1-6.47-3.16-6.54-.168-.222-.394-.232-.867-.042zm-8.48 5.46c-.453.1-.83.32-1.28.745-.296.28-.336.47-.167.8.53.1.61 1.1 1.24 2.22 1.3 2.32 1.22 2.21 1.56 2.2.152-.2.2-.15.3-.084a.662.66 0 0.17-.193c.058-.11.06-.152.08-2.59.018-1.93.02-2.51-.011-2.61a.569.57 0 00-.138-.227c-.09-.091-.14-.112-.406-.176-.582-.138-.992-.165-1.34-.088z'
+        d='M240.269 49.8154L166.804 115.963L115.966 159.44L181.335 220.585L249.784 162.048L196.78 112.47L253.068 61.7881L362.605 164.246L178.739 321.489L3.14502 157.242L187.011 0L240.269 49.8154Z'
+        fill='#28E99F'
+      />
+      <rect
+        width='236.453'
+        height='83.4566'
+        transform='matrix(0.75471 -0.656059 0 1 188.017 336.544)'
+        fill='#28E99F'
+      />
+      <rect
+        width='236.453'
+        height='83.4566'
+        transform='matrix(0.731354 0.681998 0 1 0 174.962)'
+        fill='#28E99F'
       />
     </svg>
   )
diff --git a/apps/sim/ee/access-control/components/access-control.tsx b/apps/sim/ee/access-control/components/access-control.tsx
index 930c9da176b..94762b1e9de 100644
--- a/apps/sim/ee/access-control/components/access-control.tsx
+++ b/apps/sim/ee/access-control/components/access-control.tsx
@@ -146,12 +146,12 @@ function AddMembersModal({
             <div className='flex flex-col gap-3'>
               <div className='flex items-center gap-2'>
                 <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px]'>
-                  <Search className='size-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
+                  <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
                   <BaseInput
                     placeholder='Search members...'
                     value={searchTerm}
                     onChange={(e) => setSearchTerm(e.target.value)}
-                    className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+                    className='h-auto flex-1 border-0 bg-transparent p-0 text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
                   />
                 </div>
                 <Button variant='default' onClick={handleToggleAll}>
@@ -237,16 +237,18 @@ function AccessControlSkeleton() {
     <div className='flex h-full flex-col gap-4.5'>
       <div className='flex flex-col gap-2'>
         <Skeleton className='h-[14px] w-[100px]' />
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-3'>
-            <Skeleton className='size-9 rounded-md' />
-            <div className='flex flex-col gap-1'>
-              <Skeleton className='h-[14px] w-[120px]' />
-              <Skeleton className='h-[12px] w-[80px]' />
+        {[0, 1, 2].map((i) => (
+          <div key={i} className='flex items-center justify-between'>
+            <div className='flex items-center gap-3'>
+              <Skeleton className='size-9 rounded-md' />
+              <div className='flex flex-col gap-1'>
+                <Skeleton className='h-[14px] w-[120px]' />
+                <Skeleton className='h-[12px] w-[80px]' />
+              </div>
             </div>
+            <Skeleton className='h-[32px] w-[60px] rounded-md' />
           </div>
-          <Skeleton className='h-[32px] w-[60px] rounded-md' />
-        </div>
+        ))}
       </div>
     </div>
   )
@@ -804,7 +806,7 @@ export function AccessControl() {
               <div className='flex items-center justify-between'>
                 <span className='font-medium text-[var(--text-secondary)] text-sm'>Members</span>
                 <Button variant='primary' onClick={handleOpenAddMembersModal}>
-                  <Plus className='mr-1.5 size-[13px]' />
+                  <Plus className='mr-1.5 h-[13px] w-[13px]' />
                   Add
                 </Button>
               </div>
@@ -915,12 +917,12 @@ export function AccessControl() {
                 <ModalTabsContent value='providers'>
                   <div className='flex items-center gap-2 pb-3'>
                     <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px]'>
-                      <Search className='size-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
+                      <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
                       <BaseInput
                         placeholder='Search providers...'
                         value={providerSearchTerm}
                         onChange={(e) => setProviderSearchTerm(e.target.value)}
-                        className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+                        className='h-auto flex-1 border-0 bg-transparent p-0 text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
                       />
                     </div>
                     <Button
@@ -963,7 +965,7 @@ export function AccessControl() {
                             checked={isProviderAllowed(providerId)}
                             onCheckedChange={() => toggleProvider(providerId)}
                           />
-                          <div className='relative flex size-[16px] flex-shrink-0 items-center justify-center'>
+                          <div className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
                             {ProviderIcon && <ProviderIcon className='!h-[16px] !w-[16px]' />}
                           </div>
                           <span className='truncate font-medium text-sm'>{providerName}</span>
@@ -976,12 +978,12 @@ export function AccessControl() {
                 <ModalTabsContent value='blocks'>
                   <div className='flex items-center gap-2 pb-3'>
                     <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px]'>
-                      <Search className='size-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
+                      <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
                       <BaseInput
                         placeholder='Search blocks...'
                         value={integrationSearchTerm}
                         onChange={(e) => setIntegrationSearchTerm(e.target.value)}
-                        className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+                        className='h-auto flex-1 border-0 bg-transparent p-0 text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
                       />
                     </div>
                     <Button
@@ -1031,7 +1033,7 @@ export function AccessControl() {
                                   onCheckedChange={() => toggleIntegration(block.type)}
                                 />
                                 <div
-                                  className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
+                                  className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
                                   style={{ background: block.bgColor }}
                                 >
                                   {BlockIcon && (
@@ -1066,7 +1068,7 @@ export function AccessControl() {
                                   onCheckedChange={() => toggleIntegration(block.type)}
                                 />
                                 <div
-                                  className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
+                                  className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
                                   style={{ background: block.bgColor }}
                                 >
                                   {BlockIcon && (
@@ -1086,12 +1088,12 @@ export function AccessControl() {
                 <ModalTabsContent value='platform'>
                   <div className='flex items-center gap-2 pb-3'>
                     <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px]'>
-                      <Search className='size-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
+                      <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
                       <BaseInput
                         placeholder='Search features...'
                         value={platformSearchTerm}
                         onChange={(e) => setPlatformSearchTerm(e.target.value)}
-                        className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+                        className='h-auto flex-1 border-0 bg-transparent p-0 text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
                       />
                     </div>
                     <Button
@@ -1242,18 +1244,18 @@ export function AccessControl() {
         <div className='flex items-center gap-2'>
           <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
             <Search
-              className='size-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+              className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
             />
             <BaseInput
               placeholder='Search permission groups...'
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+              className='h-auto flex-1 border-0 bg-transparent p-0 leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
             />
           </div>
           <Button variant='primary' onClick={() => setShowCreateModal(true)}>
-            <Plus className='mr-1.5 size-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Create
           </Button>
         </div>
diff --git a/apps/sim/ee/audit-logs/components/audit-logs-skeleton.tsx b/apps/sim/ee/audit-logs/components/audit-logs-skeleton.tsx
deleted file mode 100644
index ae5504c7ffc..00000000000
--- a/apps/sim/ee/audit-logs/components/audit-logs-skeleton.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Skeleton } from '@/components/emcn'
-
-export function AuditLogsSkeleton() {
-  return (
-    <div className='flex h-full flex-col gap-4.5'>
-      <div className='flex items-center gap-2'>
-        <Skeleton className='h-[38px] flex-1 rounded-lg' />
-        <Skeleton className='h-[38px] w-[160px] rounded-lg' />
-        <Skeleton className='h-[38px] w-[140px] rounded-lg' />
-      </div>
-      <div className='flex items-center gap-4 border-[var(--border)] border-b pb-2'>
-        <Skeleton className='h-4 w-[140px]' />
-        <Skeleton className='h-4 w-[120px]' />
-        <Skeleton className='h-4 flex-1' />
-        <Skeleton className='h-4 w-[140px]' />
-      </div>
-      {Array.from({ length: 8 }).map((_, i) => (
-        <div key={i} className='flex items-center gap-4'>
-          <Skeleton className='h-4 w-[140px]' />
-          <Skeleton className='h-4 w-[120px]' />
-          <Skeleton className='h-4 flex-1' />
-          <Skeleton className='h-4 w-[140px]' />
-        </div>
-      ))}
-    </div>
-  )
-}
diff --git a/apps/sim/ee/audit-logs/components/audit-logs.tsx b/apps/sim/ee/audit-logs/components/audit-logs.tsx
index 960c97235eb..24b5c7da3d0 100644
--- a/apps/sim/ee/audit-logs/components/audit-logs.tsx
+++ b/apps/sim/ee/audit-logs/components/audit-logs.tsx
@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { formatDateTime } from '@sim/utils/formatting'
 import { ChevronDown, RefreshCw, Search } from 'lucide-react'
-import { Badge, Button, Combobox, type ComboboxOption, Skeleton } from '@/components/emcn'
+import { Badge, Button, Combobox, type ComboboxOption } from '@/components/emcn'
 import { Input } from '@/components/ui'
 import { cn } from '@/lib/core/utils/cn'
 import type { EnterpriseAuditLogEntry } from '@/app/api/v1/audit-logs/format'
@@ -299,7 +299,7 @@ export function AuditLogs() {
             placeholder='Search audit logs...'
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+            className='h-auto flex-1 border-0 bg-transparent p-0 leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
           />
         </div>
         <div className='w-[160px]'>
@@ -337,20 +337,7 @@ export function AuditLogs() {
         </div>
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
-          {isLoading ? (
-            <div className='flex flex-col gap-0.5'>
-              {Array.from({ length: 8 }).map((_, i) => (
-                <div key={i} className='rounded-md px-3 py-2'>
-                  <div className='flex items-center gap-3'>
-                    <Skeleton className='h-4 w-[140px]' />
-                    <Skeleton className='h-5 w-[120px] rounded-full' />
-                    <Skeleton className='h-4 flex-1' />
-                    <Skeleton className='h-4 w-[140px]' />
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : allEntries.length === 0 ? (
+          {isLoading ? null : allEntries.length === 0 ? (
             <div className='flex h-full items-center justify-center py-12 text-[var(--text-muted)] text-small'>
               {debouncedSearch ? `No results for "${debouncedSearch}"` : 'No audit logs found'}
             </div>
diff --git a/apps/sim/ee/sso/components/sso-settings.tsx b/apps/sim/ee/sso/components/sso-settings.tsx
index c7f0bf975be..7e07c684fef 100644
--- a/apps/sim/ee/sso/components/sso-settings.tsx
+++ b/apps/sim/ee/sso/components/sso-settings.tsx
@@ -11,7 +11,6 @@ import {
   ExpandableContent,
   FormField,
   Input,
-  Skeleton,
   Switch,
   Textarea,
   toast,
@@ -400,7 +399,7 @@ export function SSO() {
   }
 
   if (isLoadingProviders) {
-    return <SsoSkeleton />
+    return null
   }
 
   if (existingProvider && !isEditing) {
@@ -876,23 +875,3 @@ export function SSO() {
     </form>
   )
 }
-
-function SsoSkeleton() {
-  return (
-    <div className='flex h-full flex-col gap-4.5'>
-      <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-4.5'>
-          {Array.from({ length: 5 }).map((_, i) => (
-            <div key={i} className='flex flex-col gap-2'>
-              <Skeleton className='h-[13px] w-[80px]' />
-              <Skeleton className='h-9 w-full' />
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className='mt-auto flex items-center justify-end'>
-        <Skeleton className='h-9 w-[60px]' />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/hooks/queries/tasks.ts b/apps/sim/hooks/queries/tasks.ts
index 0aff534a77b..8afde3963c0 100644
--- a/apps/sim/hooks/queries/tasks.ts
+++ b/apps/sim/hooks/queries/tasks.ts
@@ -481,12 +481,31 @@ async function markTaskUnread(chatId: string): Promise<void> {
   })
 }
 
+function applyUnreadFlag(
+  queryClient: ReturnType<typeof useQueryClient>,
+  workspaceId: string | undefined,
+  chatId: string,
+  isUnread: boolean
+): void {
+  const current = queryClient.getQueryData<TaskMetadata[]>(taskKeys.list(workspaceId))
+  if (!current) return
+  queryClient.setQueryData<TaskMetadata[]>(
+    taskKeys.list(workspaceId),
+    current.map((task) => (task.id === chatId ? { ...task, isUnread } : task))
+  )
+}
+
 /**
  * Marks a task as read with optimistic update.
  *
  * The server only updates `lastSeenAt`, never `updatedAt`, so we deliberately
  * do not invalidate the list cache — that would trigger a refetch that can
  * reorder the sidebar if any unrelated server-side update landed in between.
+ *
+ * If there is no cached list yet (initial fetch still in flight, e.g. on
+ * task-page refresh), we skip cancellation entirely so the in-flight fetch
+ * can resolve normally — otherwise it would be orphaned and never refetched.
+ * `onSuccess` then reconciles whichever state the fetch produced.
  */
 export function useMarkTaskRead(workspaceId?: string) {
   const queryClient = useQueryClient()
@@ -494,15 +513,16 @@ export function useMarkTaskRead(workspaceId?: string) {
     mutationFn: markTaskRead,
     onMutate: async (chatId) => {
       const previousTasks = queryClient.getQueryData<TaskMetadata[]>(taskKeys.list(workspaceId))
-      if (!previousTasks) return { previousTasks: undefined }
+      if (!previousTasks) return { previousTasks }
 
       await queryClient.cancelQueries({ queryKey: taskKeys.list(workspaceId) })
-      queryClient.setQueryData<TaskMetadata[]>(taskKeys.list(workspaceId), (old) =>
-        old?.map((task) => (task.id === chatId ? { ...task, isUnread: false } : task))
-      )
+      applyUnreadFlag(queryClient, workspaceId, chatId, false)
 
       return { previousTasks }
     },
+    onSuccess: (_data, chatId) => {
+      applyUnreadFlag(queryClient, workspaceId, chatId, false)
+    },
     onError: (_err, _variables, context) => {
       if (context?.previousTasks) {
         queryClient.setQueryData(taskKeys.list(workspaceId), context.previousTasks)
@@ -523,15 +543,16 @@ export function useMarkTaskUnread(workspaceId?: string) {
     mutationFn: markTaskUnread,
     onMutate: async (chatId) => {
       const previousTasks = queryClient.getQueryData<TaskMetadata[]>(taskKeys.list(workspaceId))
-      if (!previousTasks) return { previousTasks: undefined }
+      if (!previousTasks) return { previousTasks }
 
       await queryClient.cancelQueries({ queryKey: taskKeys.list(workspaceId) })
-      queryClient.setQueryData<TaskMetadata[]>(taskKeys.list(workspaceId), (old) =>
-        old?.map((task) => (task.id === chatId ? { ...task, isUnread: true } : task))
-      )
+      applyUnreadFlag(queryClient, workspaceId, chatId, true)
 
       return { previousTasks }
     },
+    onSuccess: (_data, chatId) => {
+      applyUnreadFlag(queryClient, workspaceId, chatId, true)
+    },
     onError: (_err, _variables, context) => {
       if (context?.previousTasks) {
         queryClient.setQueryData(taskKeys.list(workspaceId), context.previousTasks)
diff --git a/apps/sim/hooks/queries/workspace.ts b/apps/sim/hooks/queries/workspace.ts
index 19a84b37c7f..9a7c0b9b322 100644
--- a/apps/sim/hooks/queries/workspace.ts
+++ b/apps/sim/hooks/queries/workspace.ts
@@ -170,7 +170,7 @@ type UpdateWorkspaceParams = { workspaceId: string } & Pick<
 >
 
 /**
- * Updates a workspace's properties (name, color, etc.).
+ * Updates a workspace's properties (name, logo, etc.).
  * Invalidates both the workspace list and the specific workspace detail cache.
  */
 export function useUpdateWorkspace() {
diff --git a/apps/sim/lib/posthog/events.ts b/apps/sim/lib/posthog/events.ts
index 73bce6f2ad1..bb006f3c299 100644
--- a/apps/sim/lib/posthog/events.ts
+++ b/apps/sim/lib/posthog/events.ts
@@ -458,19 +458,6 @@ export interface PostHogEventMap {
     user_message_id: string
   }
 
-  tour_started: {
-    tour_type: 'nav' | 'workflow'
-  }
-
-  tour_completed: {
-    tour_type: 'nav' | 'workflow'
-  }
-
-  tour_skipped: {
-    tour_type: 'nav' | 'workflow'
-    step_index: number
-  }
-
   docs_opened: {
     source: 'help_menu' | 'editor_button' | 'toolbar_context_menu'
     block_type?: string
diff --git a/apps/sim/lib/workflows/colors.ts b/apps/sim/lib/workflows/colors.ts
index 0b16c72b8b4..561352f9df4 100644
--- a/apps/sim/lib/workflows/colors.ts
+++ b/apps/sim/lib/workflows/colors.ts
@@ -16,53 +16,58 @@ import { randomItem } from '@sim/utils/random'
 /**
  * Full list of available workflow colors with names.
  * Used for color picker and random color assignment.
- * Each base color has 6 vibrant shades optimized for both light and dark themes.
+ *
+ * Ordered by hue family (Purple, Blue, Green, Red, Orange, Pink), each
+ * with 6 vibrant shades from brightest (1) to darkest (6). This grouping
+ * lets the color picker render hue families as columns.
  */
 export const WORKFLOW_COLORS = [
-  // Shade 1 - all base colors (brightest)
+  // Purple
   { color: '#c084fc', name: 'Purple 1' },
-  { color: '#5ed8ff', name: 'Blue 1' },
-  { color: '#ff6b6b', name: 'Red 1' },
-  { color: '#f472b6', name: 'Pink 1' },
-
-  // Shade 2 - all base colors
   { color: '#a855f7', name: 'Purple 2' },
-  { color: '#38c8ff', name: 'Blue 2' },
-  { color: '#2ed96a', name: 'Green 2' },
-  { color: '#ff5555', name: 'Red 2' },
-  { color: '#ff8328', name: 'Orange 2' },
-  { color: '#ec4899', name: 'Pink 2' },
-
-  // Shade 3 - all base colors
   { color: '#9333ea', name: 'Purple 3' },
-  { color: '#33b4ff', name: 'Blue 3' },
-  { color: '#22c55e', name: 'Green 3' },
-  { color: '#ef4444', name: 'Red 3' },
-  { color: '#f97316', name: 'Orange 3' },
-  { color: '#e11d89', name: 'Pink 3' },
-
-  // Shade 4 - all base colors
   { color: '#8e4cfb', name: 'Purple 4' },
-  { color: '#1e9de8', name: 'Blue 4' },
-  { color: '#18b04c', name: 'Green 4' },
-  { color: '#dc3535', name: 'Red 4' },
-  { color: '#e56004', name: 'Orange 4' },
-  { color: '#d61c7a', name: 'Pink 4' },
-
-  // Shade 5 - all base colors
   { color: '#7c3aed', name: 'Purple 5' },
-  { color: '#1486d1', name: 'Blue 5' },
-  { color: '#0e9b3a', name: 'Green 5' },
-  { color: '#c92626', name: 'Red 5' },
-  { color: '#d14d00', name: 'Orange 5' },
-  { color: '#be185d', name: 'Pink 5' },
-
-  // Shade 6 - all base colors (darkest)
   { color: '#6322c9', name: 'Purple 6' },
+
+  // Blue
+  { color: '#5ed8ff', name: 'Blue 1' },
+  { color: '#38c8ff', name: 'Blue 2' },
+  { color: '#33b4ff', name: 'Blue 3' },
+  { color: '#1e9de8', name: 'Blue 4' },
+  { color: '#1486d1', name: 'Blue 5' },
   { color: '#0a6fb8', name: 'Blue 6' },
+
+  // Green
+  { color: '#4ade80', name: 'Green 1' },
+  { color: '#2ed96a', name: 'Green 2' },
+  { color: '#22c55e', name: 'Green 3' },
+  { color: '#18b04c', name: 'Green 4' },
+  { color: '#0e9b3a', name: 'Green 5' },
   { color: '#048628', name: 'Green 6' },
+
+  // Red
+  { color: '#ff6b6b', name: 'Red 1' },
+  { color: '#ff5555', name: 'Red 2' },
+  { color: '#ef4444', name: 'Red 3' },
+  { color: '#dc3535', name: 'Red 4' },
+  { color: '#c92626', name: 'Red 5' },
   { color: '#b61717', name: 'Red 6' },
+
+  // Orange
+  { color: '#fb923c', name: 'Orange 1' },
+  { color: '#ff8328', name: 'Orange 2' },
+  { color: '#f97316', name: 'Orange 3' },
+  { color: '#e56004', name: 'Orange 4' },
+  { color: '#d14d00', name: 'Orange 5' },
   { color: '#bd3a00', name: 'Orange 6' },
+
+  // Pink
+  { color: '#f472b6', name: 'Pink 1' },
+  { color: '#ec4899', name: 'Pink 2' },
+  { color: '#e11d89', name: 'Pink 3' },
+  { color: '#d61c7a', name: 'Pink 4' },
+  { color: '#be185d', name: 'Pink 5' },
   { color: '#9d174d', name: 'Pink 6' },
 ] as const
 
diff --git a/apps/sim/package.json b/apps/sim/package.json
index 71521b166bb..01308a50c79 100644
--- a/apps/sim/package.json
+++ b/apps/sim/package.json
@@ -173,7 +173,6 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-hook-form": "^7.54.2",
-    "react-joyride": "2.9.3",
     "react-pdf": "10.4.1",
     "react-simple-code-editor": "^0.14.1",
     "react-window": "2.2.3",
diff --git a/apps/sim/stores/modals/search/store.ts b/apps/sim/stores/modals/search/store.ts
index 5a928246d34..9226e07b4b1 100644
--- a/apps/sim/stores/modals/search/store.ts
+++ b/apps/sim/stores/modals/search/store.ts
@@ -58,7 +58,7 @@ export const useSearchModalStore = create<SearchModalState>()(
             type: block.type,
           }
 
-          if (block.category === 'blocks' && block.type !== 'starter') {
+          if (block.category === 'blocks') {
             regularBlocks.push(searchItem)
           } else if (block.category === 'tools') {
             tools.push(searchItem)
diff --git a/apps/sim/tailwind.config.ts b/apps/sim/tailwind.config.ts
index 315e6ed2ff3..f37a89ed504 100644
--- a/apps/sim/tailwind.config.ts
+++ b/apps/sim/tailwind.config.ts
@@ -126,12 +126,7 @@ export default {
         'brand-inset': 'var(--shadow-brand-inset)',
         card: 'var(--shadow-card)',
       },
-      dropShadow: {
-        tour: [
-          '0 0 0.5px color-mix(in srgb, var(--text-primary) 10%, transparent)',
-          '0 4px 12px rgba(0,0,0,0.1)',
-        ],
-      },
+      dropShadow: {},
       transitionProperty: {
         width: 'width',
         left: 'left',
@@ -202,10 +197,6 @@ export default {
           from: { opacity: '0', transform: 'translateY(20px)' },
           to: { opacity: '1', transform: 'translateY(0)' },
         },
-        'tour-tooltip-in': {
-          from: { opacity: '0', transform: 'scale(0.96) translateY(4px)' },
-          to: { opacity: '1', transform: 'scale(1) translateY(0)' },
-        },
         'collapsible-down': {
           from: { height: '0' },
           to: { height: 'var(--radix-collapsible-content-height)' },
@@ -227,7 +218,6 @@ export default {
         'thinking-block': 'thinking-block 1.6s ease-in-out infinite',
         'slide-in-right': 'slide-in-right 350ms ease-out forwards',
         'slide-in-bottom': 'slide-in-bottom 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        'tour-tooltip-in': 'tour-tooltip-in 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
         'collapsible-down': 'collapsible-down 300ms cubic-bezier(0.4, 0, 0.2, 1)',
         'collapsible-up': 'collapsible-up 300ms cubic-bezier(0.4, 0, 0.2, 1)',
       },
diff --git a/bun.lock b/bun.lock
index b0776164d7c..bae5b986c49 100644
--- a/bun.lock
+++ b/bun.lock
@@ -228,7 +228,6 @@
         "react": "19.2.4",
         "react-dom": "19.2.4",
         "react-hook-form": "^7.54.2",
-        "react-joyride": "2.9.3",
         "react-pdf": "10.4.1",
         "react-simple-code-editor": "^0.14.1",
         "react-window": "2.2.3",
@@ -887,8 +886,6 @@
 
     "@fumari/stf": ["@fumari/stf@1.0.5", "", { "peerDependencies": { "@types/react": "*", "react": "^19.2.0", "react-dom": "^19.2.0" }, "optionalPeers": ["@types/react"] }, "sha512-O9UQIbV15ePV5vUgceCcaMDuBRYfrSuogDEY5E//CmrbIiWJ1Ji5VgGHHH0L0HQuRr5riUJuAEr9lYIvJl9OyQ=="],
 
-    "@gilbarbara/deep-equal": ["@gilbarbara/deep-equal@0.3.1", "", {}, "sha512-I7xWjLs2YSVMc5gGx1Z3ZG1lgFpITPndpi8Ku55GeEIKpACCPQNS/OTqQbxgTCfq0Ncvcc+CrFov96itVh6Qvw=="],
-
     "@google-cloud/precise-date": ["@google-cloud/precise-date@4.0.0", "", {}, "sha512-1TUx3KdaU3cN7nfCdNf+UVqA/PSX29Cjcox3fZZBtINlRrXVTmUkQnCKv2MbBUbCopbK4olAT1IHl76uZyCiVA=="],
 
     "@google/genai": ["@google/genai@1.34.0", "", { "dependencies": { "google-auth-library": "^10.3.0", "ws": "^8.18.0" }, "peerDependencies": { "@modelcontextprotocol/sdk": "^1.24.0" }, "optionalPeers": ["@modelcontextprotocol/sdk"] }, "sha512-vu53UMPvjmb7PGzlYu6Tzxso8Dfhn+a7eQFaS2uNemVtDZKwzSpJ5+ikqBbXplF7RGB1STcVDqCkPvquiwb2sw=="],
@@ -2261,8 +2258,6 @@
 
     "decompress-response": ["decompress-response@6.0.0", "", { "dependencies": { "mimic-response": "^3.1.0" } }, "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ=="],
 
-    "deep-diff": ["deep-diff@1.0.2", "", {}, "sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg=="],
-
     "deep-eql": ["deep-eql@5.0.2", "", {}, "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q=="],
 
     "deep-extend": ["deep-extend@0.6.0", "", {}, "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="],
@@ -2735,8 +2730,6 @@
 
     "is-interactive": ["is-interactive@2.0.0", "", {}, "sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ=="],
 
-    "is-lite": ["is-lite@1.2.1", "", {}, "sha512-pgF+L5bxC+10hLBgf6R2P4ZZUBOQIIacbdo8YvuCP8/JvsWxG7aZ9p10DYuLtifFci4l3VITphhMlMV4Y+urPw=="],
-
     "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
 
     "is-plain-obj": ["is-plain-obj@4.1.0", "", {}, "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg=="],
@@ -3325,8 +3318,6 @@
 
     "points-on-path": ["points-on-path@0.2.1", "", { "dependencies": { "path-data-parser": "0.1.0", "points-on-curve": "0.2.0" } }, "sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g=="],
 
-    "popper.js": ["popper.js@1.16.1", "", {}, "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="],
-
     "postcss": ["postcss@8.5.14", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg=="],
 
     "postcss-import": ["postcss-import@15.1.0", "", { "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", "resolve": "^1.1.7" }, "peerDependencies": { "postcss": "^8.0.0" } }, "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew=="],
@@ -3369,8 +3360,6 @@
 
     "prompts": ["prompts@2.4.2", "", { "dependencies": { "kleur": "^3.0.3", "sisteransi": "^1.0.5" } }, "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q=="],
 
-    "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
-
     "property-information": ["property-information@7.1.0", "", {}, "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ=="],
 
     "protobufjs": ["protobufjs@8.0.1", "", { "dependencies": { "@protobufjs/aspromise": "^1.1.2", "@protobufjs/base64": "^1.1.2", "@protobufjs/codegen": "^2.0.4", "@protobufjs/eventemitter": "^1.1.0", "@protobufjs/fetch": "^1.1.0", "@protobufjs/float": "^1.0.2", "@protobufjs/inquire": "^1.1.0", "@protobufjs/path": "^1.1.2", "@protobufjs/pool": "^1.1.0", "@protobufjs/utf8": "^1.1.0", "@types/node": ">=13.7.0", "long": "^5.0.0" } }, "sha512-NWWCCscLjs+cOKF/s/XVNFRW7Yih0fdH+9brffR5NZCy8k42yRdl5KlWKMVXuI1vfCoy4o1z80XR/W/QUb3V3w=="],
@@ -3417,16 +3406,8 @@
 
     "react-email": ["react-email@4.3.2", "", { "dependencies": { "@babel/parser": "^7.27.0", "@babel/traverse": "^7.27.0", "chokidar": "^4.0.3", "commander": "^13.0.0", "debounce": "^2.0.0", "esbuild": "^0.25.0", "glob": "^11.0.0", "jiti": "2.4.2", "log-symbols": "^7.0.0", "mime-types": "^3.0.0", "normalize-path": "^3.0.0", "nypm": "0.6.0", "ora": "^8.0.0", "prompts": "2.4.2", "socket.io": "^4.8.1", "tsconfig-paths": "4.2.0" }, "bin": { "email": "dist/index.js" } }, "sha512-WaZcnv9OAIRULY236zDRdk+8r511ooJGH5UOb7FnVsV33hGPI+l5aIZ6drVjXi4QrlLTmLm8PsYvmXRSv31MPA=="],
 
-    "react-floater": ["react-floater@0.7.9", "", { "dependencies": { "deepmerge": "^4.3.1", "is-lite": "^0.8.2", "popper.js": "^1.16.0", "prop-types": "^15.8.1", "tree-changes": "^0.9.1" }, "peerDependencies": { "react": "15 - 18", "react-dom": "15 - 18" } }, "sha512-NXqyp9o8FAXOATOEo0ZpyaQ2KPb4cmPMXGWkx377QtJkIXHlHRAGer7ai0r0C1kG5gf+KJ6Gy+gdNIiosvSicg=="],
-
     "react-hook-form": ["react-hook-form@7.75.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-Ovv94H+0p3sJ7B9B5QxPuCP1u8V/cHuVGyH55cSwodYDtoJwK+fqk3vjfIgSX59I2U/bU4z0nRJ9HMLpNiWEmw=="],
 
-    "react-innertext": ["react-innertext@1.1.5", "", { "peerDependencies": { "@types/react": ">=0.0.0 <=99", "react": ">=0.0.0 <=99" } }, "sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q=="],
-
-    "react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
-
-    "react-joyride": ["react-joyride@2.9.3", "", { "dependencies": { "@gilbarbara/deep-equal": "^0.3.1", "deep-diff": "^1.0.2", "deepmerge": "^4.3.1", "is-lite": "^1.2.1", "react-floater": "^0.7.9", "react-innertext": "^1.1.5", "react-is": "^16.13.1", "scroll": "^3.0.1", "scrollparent": "^2.1.0", "tree-changes": "^0.11.2", "type-fest": "^4.27.0" }, "peerDependencies": { "react": "15 - 18", "react-dom": "15 - 18" } }, "sha512-1+Mg34XK5zaqJ63eeBhqdbk7dlGCFp36FXwsEvgpjqrtyywX2C6h9vr3jgxP0bGHCw8Ilsp/nRDzNVq6HJ3rNw=="],
-
     "react-pdf": ["react-pdf@10.4.1", "", { "dependencies": { "clsx": "^2.0.0", "dequal": "^2.0.3", "make-cancellable-promise": "^2.0.0", "make-event-props": "^2.0.0", "merge-refs": "^2.0.0", "pdfjs-dist": "5.4.296", "tiny-invariant": "^1.0.0", "warning": "^4.0.0" }, "peerDependencies": { "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-kS/35staVCBqS29verTQJQZXw7RfsRCPO3fdJoW1KXylcv7A9dw6DZ3vJXC2w+bIBgLw5FN4pOFvKSQtkQhPfA=="],
 
     "react-promise-suspense": ["react-promise-suspense@0.3.4", "", { "dependencies": { "fast-deep-equal": "^2.0.1" } }, "sha512-I42jl7L3Ze6kZaq+7zXWSunBa3b1on5yfvUW6Eo/3fFOj6dZ5Bqmcd264nJbTK/gn1HjjILAjSwnZbV4RpSaNQ=="],
@@ -3573,12 +3554,8 @@
 
     "scmp": ["scmp@2.1.0", "", {}, "sha512-o/mRQGk9Rcer/jEEw/yw4mwo3EU/NvYvp577/Btqrym9Qy5/MdWGBqipbALgd2lrdWTJ5/gqDusxfnQBxOxT2Q=="],
 
-    "scroll": ["scroll@3.0.1", "", {}, "sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg=="],
-
     "scroll-into-view-if-needed": ["scroll-into-view-if-needed@3.1.0", "", { "dependencies": { "compute-scroll-into-view": "^3.0.2" } }, "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ=="],
 
-    "scrollparent": ["scrollparent@2.1.0", "", {}, "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA=="],
-
     "section-matter": ["section-matter@1.0.0", "", { "dependencies": { "extend-shallow": "^2.0.1", "kind-of": "^6.0.0" } }, "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA=="],
 
     "secure-json-parse": ["secure-json-parse@4.1.0", "", {}, "sha512-l4KnYfEyqYJxDwlNVyRfO2E4NTHfMKAWdUuA8J0yve2Dz/E/PdBepY03RvyJpssIpRFwJoCD55wA+mEDs6ByWA=="],
@@ -3807,8 +3784,6 @@
 
     "tr46": ["tr46@5.1.1", "", { "dependencies": { "punycode": "^2.3.1" } }, "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw=="],
 
-    "tree-changes": ["tree-changes@0.11.3", "", { "dependencies": { "@gilbarbara/deep-equal": "^0.3.1", "is-lite": "^1.2.1" } }, "sha512-r14mvDZ6tqz8PRQmlFKjhUVngu4VZ9d92ON3tp0EGpFBE6PAHOq8Bx8m8ahbNoGE3uI/npjYcJiqVydyOiYXag=="],
-
     "trim-lines": ["trim-lines@3.0.1", "", {}, "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg=="],
 
     "trough": ["trough@2.2.0", "", {}, "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw=="],
@@ -3839,7 +3814,7 @@
 
     "twilio": ["twilio@5.9.0", "", { "dependencies": { "axios": "^1.11.0", "dayjs": "^1.11.9", "https-proxy-agent": "^5.0.0", "jsonwebtoken": "^9.0.2", "qs": "^6.9.4", "scmp": "^2.1.0", "xmlbuilder": "^13.0.2" } }, "sha512-Ij+xT9MZZSjP64lsy+x6vYsCCb5m2Db9KffkMXBrN3zWbG3rbkXxl+MZVVzrvpwEdSbQD0vMuin+TTlQ6kR6Xg=="],
 
-    "type-fest": ["type-fest@4.41.0", "", {}, "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="],
+    "type-fest": ["type-fest@0.21.3", "", {}, "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="],
 
     "type-is": ["type-is@2.0.1", "", { "dependencies": { "content-type": "^1.0.5", "media-typer": "^1.1.0", "mime-types": "^3.0.0" } }, "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw=="],
 
@@ -4223,8 +4198,6 @@
 
     "ajv-formats/ajv": ["ajv@8.20.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA=="],
 
-    "ansi-escapes/type-fest": ["type-fest@0.21.3", "", {}, "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="],
-
     "anymatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
 
     "basic-auth/safe-buffer": ["safe-buffer@5.1.2", "", {}, "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="],
@@ -4455,10 +4428,6 @@
 
     "react-email/glob": ["glob@11.1.0", "", { "dependencies": { "foreground-child": "^3.3.1", "jackspeak": "^4.1.1", "minimatch": "^10.1.1", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^2.0.0" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw=="],
 
-    "react-floater/is-lite": ["is-lite@0.8.2", "", {}, "sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw=="],
-
-    "react-floater/tree-changes": ["tree-changes@0.9.3", "", { "dependencies": { "@gilbarbara/deep-equal": "^0.1.1", "is-lite": "^0.8.2" } }, "sha512-vvvS+O6kEeGRzMglTKbc19ltLWNtmNt1cpBoSYLj/iEcPVvpJasemKOlxBrmZaCtDJoF+4bwv3m01UKYi8mukQ=="],
-
     "react-promise-suspense/fast-deep-equal": ["fast-deep-equal@2.0.1", "", {}, "sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w=="],
 
     "readable-stream/safe-buffer": ["safe-buffer@5.1.2", "", {}, "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="],
@@ -4935,8 +4904,6 @@
 
     "react-email/chokidar/readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
 
-    "react-floater/tree-changes/@gilbarbara/deep-equal": ["@gilbarbara/deep-equal@0.1.2", "", {}, "sha512-jk+qzItoEb0D0xSSmrKDDzf9sheQj/BAPxlgNxgmOaA3mxpUa6ndJLYGZKsJnIVEQSD8zcTbyILz7I0HcnBCRA=="],
-
     "readable-web-to-node-stream/readable-stream/string_decoder": ["string_decoder@1.3.0", "", { "dependencies": { "safe-buffer": "~5.2.0" } }, "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA=="],
 
     "restore-cursor/onetime/mimic-fn": ["mimic-fn@2.1.0", "", {}, "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="],
diff --git a/scripts/generate-docs.ts b/scripts/generate-docs.ts
index 65d93e3e393..1fa142d032c 100755
--- a/scripts/generate-docs.ts
+++ b/scripts/generate-docs.ts
@@ -3,6 +3,8 @@ import fs from 'fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
 import { glob } from 'glob'
+import type { BlockCategory } from '../apps/sim/blocks/types'
+import { IntegrationType } from '../apps/sim/blocks/types'
 
 console.log('Starting documentation generator...')
 
@@ -99,12 +101,24 @@ if (!fs.existsSync(docsComponentsDir)) {
   fs.mkdirSync(docsComponentsDir, { recursive: true })
 }
 
+/** Runtime set of valid `IntegrationType` values, derived from the canonical enum. */
+const INTEGRATION_CATEGORY_VALUES: ReadonlySet<IntegrationType> = new Set(
+  Object.values(IntegrationType)
+)
+
+/**
+ * Defensive shape for blocks parsed out of source files. Fields stay loose
+ * (`string`) so the AST-style extractor can populate them progressively; the
+ * canonical taxonomy is enforced at the JSON-write boundary inside
+ * `writeIntegrationsJson`.
+ */
 interface BlockConfig {
   type: string
   name: string
   description: string
   longDescription?: string
   category: string
+  integrationType?: string
   bgColor?: string
   outputs?: Record<string, any>
   tools?: {
@@ -180,8 +194,8 @@ interface IntegrationEntry {
   triggers: TriggerInfo[]
   triggerCount: number
   authType: 'oauth' | 'api-key' | 'none'
-  category: string
-  integrationTypes?: string[]
+  category: BlockCategory
+  integrationType: IntegrationType
   tags?: string[]
 }
 
@@ -219,72 +233,16 @@ async function generateIconMapping(): Promise<Record<string, string>> {
     const iconMapping: Record<string, string> = {}
     const blockFiles = (await glob(`${BLOCKS_PATH}/*.ts`)).sort()
 
+    // Share the parser with `writeIntegrationsJson` so the icon map and the
+    // integrations dataset can never drift. `extractAllBlockConfigs` already
+    // resolves spread inheritance (e.g. V2 blocks built via `...BaseBlock`)
+    // and skips `hideFromToolbar: true`.
     for (const blockFile of blockFiles) {
       const fileContent = fs.readFileSync(blockFile, 'utf-8')
-
-      // For icon mapping, we need ALL blocks including hidden ones
-      // because V2 blocks inherit icons from legacy blocks via spread
-      // First, extract the primary icon from the file (usually the legacy block's icon)
-      const primaryIcon = extractIconNameFromContent(fileContent)
-
-      // Find all block exports and their types
-      const exportRegex = /export\s+const\s+(\w+)Block\s*:\s*BlockConfig[^=]*=\s*\{/g
-      let match
-
-      while ((match = exportRegex.exec(fileContent)) !== null) {
-        const blockName = match[1]
-        const startIndex = match.index + match[0].length - 1
-
-        // Extract the block content
-        const endIndex = findMatchingClose(fileContent, startIndex)
-
-        if (endIndex !== -1) {
-          const blockContent = fileContent.substring(startIndex, endIndex)
-
-          // Check hideFromToolbar - skip hidden blocks for docs but NOT for icon mapping
-          const hideFromToolbar = /hideFromToolbar\s*:\s*true/.test(blockContent)
-
-          // Get block type
-          const blockType =
-            extractStringPropertyFromContent(blockContent, 'type') || blockName.toLowerCase()
-
-          // Get icon - either from this block or inherited from primary
-          const iconName = extractIconNameFromContent(blockContent) || primaryIcon
-
-          if (!blockType || !iconName) {
-            continue
-          }
-
-          // Skip trigger/webhook/rss blocks
-          if (
-            blockType.includes('_trigger') ||
-            blockType.includes('_webhook') ||
-            blockType.includes('rss')
-          ) {
-            continue
-          }
-
-          // Get category for additional filtering
-          const category = extractStringPropertyFromContent(blockContent, 'category') || 'misc'
-
-          if (
-            (category === 'blocks' && blockType !== 'memory' && blockType !== 'knowledge') ||
-            blockType === 'evaluator' ||
-            blockType === 'number' ||
-            blockType === 'webhook' ||
-            blockType === 'schedule' ||
-            blockType === 'mcp' ||
-            blockType === 'generic_webhook' ||
-            blockType === 'rss'
-          ) {
-            continue
-          }
-
-          // Only add non-hidden blocks to icon mapping (docs won't be generated for hidden)
-          if (!hideFromToolbar) {
-            iconMapping[blockType] = iconName
-          }
-        }
+      for (const config of extractAllBlockConfigs(fileContent)) {
+        const { type, category, iconName } = config
+        if (category !== 'tools' || !type || !iconName) continue
+        iconMapping[type] = iconName
       }
     }
 
@@ -675,21 +633,27 @@ async function writeIntegrationsJson(iconMapping: Record<string, string>): Promi
       for (const config of configs) {
         const blockType = config.type
 
-        // Apply the same filters as docs/icon-mapping generation
-        if (
-          blockType.includes('_trigger') ||
-          blockType.includes('_webhook') ||
-          blockType.includes('rss') ||
-          (config.category === 'blocks' && blockType !== 'memory' && blockType !== 'knowledge') ||
-          blockType === 'evaluator' ||
-          blockType === 'number' ||
-          blockType === 'webhook' ||
-          blockType === 'schedule' ||
-          blockType === 'mcp' ||
-          blockType === 'generic_webhook'
-        ) {
-          continue
+        // Canonical integrations filter: only third-party tool blocks visible in the toolbar.
+        // The block registry's `category: 'tools'` is now the single source of truth for "is integration".
+        if (config.category !== 'tools') continue
+        if ((config as any).hideFromToolbar) continue
+
+        // Every tools-category block MUST declare an `integrationType` from the canonical
+        // 16-value enum (apps/sim/blocks/types.ts). Fail loudly so the catalog never
+        // ships a tool without a category bucket.
+        if (!config.integrationType) {
+          throw new Error(
+            `Block "${blockType}" has \`category: 'tools'\` but is missing required \`integrationType\`. ` +
+              `Add one of the IntegrationType values from apps/sim/blocks/types.ts.`
+          )
+        }
+        if (!INTEGRATION_CATEGORY_VALUES.has(config.integrationType as IntegrationType)) {
+          throw new Error(
+            `Block "${blockType}" has unrecognised \`integrationType: "${config.integrationType}"\`. ` +
+              `Use one of: ${[...INTEGRATION_CATEGORY_VALUES].join(', ')}.`
+          )
         }
+        const integrationType = config.integrationType as IntegrationType
 
         // Deduplicate by stripped base type
         const baseType = stripVersionSuffix(blockType)
@@ -766,15 +730,8 @@ async function writeIntegrationsJson(iconMapping: Record<string, string>): Promi
           triggers,
           triggerCount: triggers.length,
           authType,
-          category: config.category,
-          ...(config.integrationType || config.tags
-            ? {
-                integrationTypes: deriveIntegrationTypes(
-                  config.integrationType || null,
-                  config.tags || []
-                ),
-              }
-            : {}),
+          category: 'tools',
+          integrationType,
           ...(config.tags ? { tags: config.tags } : {}),
         })
       }
@@ -907,9 +864,7 @@ function extractBlockConfigFromContent(
       baseConfig?.longDescription ||
       ''
     const category =
-      extractStringPropertyFromContent(blockContent, 'category', true) ||
-      baseConfig?.category ||
-      'misc'
+      extractStringPropertyFromContent(blockContent, 'category', true) || baseConfig?.category || ''
     const bgColor =
       extractStringPropertyFromContent(blockContent, 'bgColor', true) ||
       baseConfig?.bgColor ||
@@ -1029,113 +984,31 @@ function extractStringPropertyFromContent(
 }
 
 /**
- * Tag-to-category mapping used by deriveIntegrationTypes to expand a block's
- * primary integrationType into a full set of categories for the landing page.
- */
-const TAG_TO_CATEGORIES: Record<string, string[]> = {
-  llm: ['ai'],
-  agentic: ['ai'],
-  'image-generation': ['ai', 'design'],
-  'video-generation': ['ai', 'design'],
-  'text-to-speech': ['ai'],
-  'speech-to-text': ['ai'],
-  ocr: ['ai', 'documents'],
-  'vector-search': ['ai', 'search'],
-  'document-processing': ['documents'],
-  'content-management': ['documents'],
-  'e-signatures': ['documents'],
-  'note-taking': ['productivity', 'documents'],
-  'knowledge-base': ['documents', 'search'],
-  'data-analytics': ['analytics'],
-  seo: ['analytics', 'search'],
-  monitoring: ['developer-tools', 'analytics'],
-  'error-tracking': ['developer-tools'],
-  'incident-management': ['developer-tools'],
-  'version-control': ['developer-tools'],
-  'ci-cd': ['developer-tools'],
-  'feature-flags': ['developer-tools'],
-  messaging: ['communication'],
-  meeting: ['communication', 'productivity'],
-  calendar: ['productivity'],
-  scheduling: ['productivity'],
-  'project-management': ['productivity'],
-  ticketing: ['productivity', 'customer-support'],
-  forms: ['productivity'],
-  spreadsheet: ['productivity', 'databases'],
-  'data-warehouse': ['databases'],
-  cloud: ['developer-tools'],
-  'web-scraping': ['search'],
-  'sales-engagement': ['sales'],
-  enrichment: ['sales'],
-  'email-marketing': ['email'],
-  marketing: ['analytics'],
-  payments: ['ecommerce'],
-  subscriptions: ['ecommerce'],
-  hiring: ['hr'],
-  identity: ['security'],
-  'secrets-management': ['security'],
-  'customer-support': ['customer-support'],
-  webhooks: ['developer-tools'],
-  automation: ['developer-tools'],
-}
-
-/**
- * Derive the full list of integration type categories from a block's primary
- * integrationType and its tags. The primary type is always first; additional
- * categories are inferred from tags via TAG_TO_CATEGORIES.
- */
-function deriveIntegrationTypes(primaryType: string | null, tags: string[]): string[] {
-  const types = new Set<string>()
-  if (primaryType) {
-    types.add(primaryType)
-  }
-  for (const tag of tags) {
-    const mapped = TAG_TO_CATEGORIES[tag]
-    if (mapped) {
-      for (const t of mapped) {
-        types.add(t)
-      }
-    }
-  }
-  // Return primary first, then the rest sorted for deterministic output
-  const result: string[] = []
-  if (primaryType && types.has(primaryType)) {
-    result.push(primaryType)
-    types.delete(primaryType)
-  }
-  result.push(...Array.from(types).sort())
-  return result
-}
-
-/**
- * Extract an enum property value from block content.
- * Matches patterns like `integrationType: IntegrationType.DeveloperTools`
- * and returns the string value (e.g., 'developer-tools').
+ * Extract an enum property value from block content. Maps an `IntegrationType`
+ * enum key (e.g. `Communication`) to its slug value (e.g. `'communication'`).
+ * Mirrors `apps/sim/blocks/types.ts → IntegrationType` — keep in sync.
  */
 function extractEnumPropertyFromContent(content: string, propName: string): string | null {
   const match = content.match(new RegExp(`${propName}\\s*:\\s*IntegrationType\\.(\\w+)`))
   if (!match) return null
   const enumKey = match[1]
-  // Convert enum key to kebab-case value (e.g., DeveloperTools -> developer-tools)
   const ENUM_MAP: Record<string, string> = {
     AI: 'ai',
     Analytics: 'analytics',
+    Commerce: 'commerce',
     Communication: 'communication',
-    CRM: 'crm',
-    CustomerSupport: 'customer-support',
     Databases: 'databases',
-    Design: 'design',
-    DeveloperTools: 'developer-tools',
+    DevOps: 'devops',
     Documents: 'documents',
-    Ecommerce: 'ecommerce',
     Email: 'email',
-    FileStorage: 'file-storage',
     HR: 'hr',
-    Other: 'other',
+    Marketing: 'marketing',
+    Observability: 'observability',
     Productivity: 'productivity',
     Sales: 'sales',
     Search: 'search',
     Security: 'security',
+    Support: 'support',
   }
   return ENUM_MAP[enumKey] || enumKey.toLowerCase()
 }
@@ -2566,29 +2439,10 @@ async function generateBlockDoc(blockPath: string) {
         continue
       }
 
-      if (
-        blockConfig.type.includes('_trigger') ||
-        blockConfig.type.includes('_webhook') ||
-        blockConfig.type.includes('rss')
-      ) {
-        console.log(`Skipping ${blockConfig.type} - contains '_trigger'`)
-        continue
-      }
-
-      if (
-        (blockConfig.category === 'blocks' &&
-          blockConfig.type !== 'memory' &&
-          blockConfig.type !== 'knowledge') ||
-        blockConfig.type === 'evaluator' ||
-        blockConfig.type === 'number' ||
-        blockConfig.type === 'webhook' ||
-        blockConfig.type === 'schedule' ||
-        blockConfig.type === 'mcp' ||
-        blockConfig.type === 'generic_webhook' ||
-        blockConfig.type === 'rss'
-      ) {
-        continue
-      }
+      // Canonical integrations filter: docs are written only for third-party tool blocks
+      // visible in the toolbar. Source of truth: BlockConfig.category === 'tools'.
+      if (blockConfig.category !== 'tools') continue
+      if ((blockConfig as any).hideFromToolbar) continue
 
       // Use stripped type for file name (removes _v2, _v3 suffixes for cleaner URLs)
       const displayType = stripVersionSuffix(blockConfig.type)
@@ -2627,7 +2481,6 @@ async function generateMarkdownForBlock(
     name,
     description,
     longDescription,
-    category,
     bgColor,
     outputs = {},
     tools = { access: [] },
@@ -2812,64 +2665,43 @@ ${toolsSection}
 }
 
 /**
- * Extract all hidden block types (blocks with hideFromToolbar: true) and
- * the set of display names that will be generated by visible blocks.
- * This is needed to avoid deleting docs for hidden V1 blocks when a visible V2 block
- * will regenerate them.
+ * Compute the canonical set of stripped block types that should have a
+ * `docs/tools/*.mdx` file — namely every visible `category: 'tools'` block
+ * (matching the writer filter at the top of this script). Any existing MDX
+ * not in this set is stale and gets cleaned up.
+ *
+ * Uses `extractAllBlockConfigs` so spread-inherited fields (e.g. a V2 that
+ * spreads `...GmailBlock` and inherits `category: 'tools'`) are resolved the
+ * same way the writer resolves them. `stripVersionSuffix` ensures V1 and V2
+ * map to the same doc filename — alphabetical glob order means the newest
+ * version naturally wins for both generation and cleanup.
  */
-async function getHiddenAndVisibleBlockTypes(): Promise<{
-  hiddenTypes: Set<string>
-  visibleDisplayNames: Set<string>
-}> {
-  const hiddenTypes = new Set<string>()
-  const visibleDisplayNames = new Set<string>()
+async function getCanonicalToolDocNames(): Promise<Set<string>> {
+  const validToolDocs = new Set<string>()
   const blockFiles = (await glob(`${BLOCKS_PATH}/*.ts`)).sort()
 
   for (const blockFile of blockFiles) {
     const fileContent = fs.readFileSync(blockFile, 'utf-8')
+    const configs = extractAllBlockConfigs(fileContent)
 
-    // Find all block exports
-    const exportRegex = /export\s+const\s+(\w+)Block\s*:\s*BlockConfig[^=]*=\s*\{/g
-    let match
-
-    while ((match = exportRegex.exec(fileContent)) !== null) {
-      const startIndex = match.index + match[0].length - 1
-
-      // Extract the block content
-      const endIndex = findMatchingClose(fileContent, startIndex)
-
-      if (endIndex !== -1) {
-        const blockContent = fileContent.substring(startIndex, endIndex)
-        const blockType = extractStringPropertyFromContent(blockContent, 'type', true)
-
-        if (blockType) {
-          // Check if this block has hideFromToolbar: true
-          if (/hideFromToolbar\s*:\s*true/.test(blockContent)) {
-            hiddenTypes.add(blockType)
-          } else {
-            // This block is visible - add its display name (stripped version)
-            visibleDisplayNames.add(stripVersionSuffix(blockType))
-          }
-        }
-      }
+    for (const config of configs) {
+      if (config.category !== 'tools') continue
+      if ((config as any).hideFromToolbar) continue
+      validToolDocs.add(stripVersionSuffix(config.type))
     }
   }
 
-  return { hiddenTypes, visibleDisplayNames }
+  return validToolDocs
 }
 
 /**
- * Remove documentation files for hidden blocks.
- * Skips deletion if a visible V2 block will regenerate the docs.
+ * Remove any `docs/tools/*.mdx` that no longer corresponds to a visible
+ * `category: 'tools'` block — covers both hidden blocks and blocks that
+ * have been re-categorized to `'blocks'` / `'triggers'`. Keeps the
+ * tools/ docs directory in lockstep with the canonical block registry.
  */
-function cleanupHiddenBlockDocs(hiddenTypes: Set<string>, visibleDisplayNames: Set<string>): void {
-  console.log('Cleaning up docs for hidden blocks...')
-
-  // Create a set of stripped hidden types (for matching doc files without version suffix)
-  const strippedHiddenTypes = new Set<string>()
-  for (const type of hiddenTypes) {
-    strippedHiddenTypes.add(stripVersionSuffix(type))
-  }
+function cleanupStaleToolDocs(validToolDocs: Set<string>): void {
+  console.log('Cleaning up stale tool docs...')
 
   const existingDocs = fs
     .readdirSync(DOCS_OUTPUT_PATH)
@@ -2879,27 +2711,19 @@ function cleanupHiddenBlockDocs(hiddenTypes: Set<string>, visibleDisplayNames: S
 
   for (const docFile of existingDocs) {
     const blockType = path.basename(docFile, '.mdx')
+    if (blockType === 'index') continue
+    if (validToolDocs.has(blockType)) continue
 
-    // Check both original type and stripped type (since doc files use stripped names)
-    if (hiddenTypes.has(blockType) || strippedHiddenTypes.has(blockType)) {
-      // Skip deletion if there's a visible V2 block that will regenerate this doc
-      // (e.g., don't delete intercom.mdx if IntercomV2Block is visible)
-      if (visibleDisplayNames.has(blockType)) {
-        console.log(`  Skipping deletion of ${blockType}.mdx - visible V2 block will regenerate it`)
-        continue
-      }
-
-      const docPath = path.join(DOCS_OUTPUT_PATH, docFile)
-      fs.unlinkSync(docPath)
-      console.log(`✓ Removed docs for hidden block: ${blockType}`)
-      removedCount++
-    }
+    const docPath = path.join(DOCS_OUTPUT_PATH, docFile)
+    fs.unlinkSync(docPath)
+    console.log(`✓ Removed stale tool doc: ${blockType}.mdx`)
+    removedCount++
   }
 
   if (removedCount > 0) {
-    console.log(`✓ Cleaned up ${removedCount} doc files for hidden blocks`)
+    console.log(`✓ Cleaned up ${removedCount} stale tool doc files`)
   } else {
-    console.log('✓ No hidden block docs to clean up')
+    console.log('✓ No stale tool docs to clean up')
   }
 }
 
@@ -3716,12 +3540,10 @@ async function generateAllBlockDocs() {
     await writeIntegrationsJson(iconMapping)
     writeIntegrationsIconMapping(iconMapping)
 
-    // Get hidden and visible block types before generating docs
-    const { hiddenTypes, visibleDisplayNames } = await getHiddenAndVisibleBlockTypes()
-    console.log(`Found ${hiddenTypes.size} hidden blocks: ${[...hiddenTypes].join(', ')}`)
-
-    // Clean up docs for hidden blocks (skipping those with visible V2 equivalents)
-    cleanupHiddenBlockDocs(hiddenTypes, visibleDisplayNames)
+    // Compute the canonical set of tool docs and clean up anything stale —
+    // covers hidden blocks AND blocks re-categorized away from `'tools'`.
+    const validToolDocs = await getCanonicalToolDocNames()
+    cleanupStaleToolDocs(validToolDocs)
 
     const blockFiles = (await glob(`${BLOCKS_PATH}/*.ts`)).sort()