From 8fa4f3fdbb8b6453a099b4bfc9bc077f1022b7d5 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <33737564+Sg312@users.noreply.github.com>
Date: Tue, 17 Mar 2026 07:55:50 -0700
Subject: [PATCH] fix(mothership): thinking and subagent text (#3613)

* Thinking v0

* Change

* Fix

* improvement(ui/ux): mothership chat experience

* user input animation

* improvement(landing): desktop complete

* auth and 404

* mobile friendliness and home templates

* improvement(home): templates

* fix: feature flags

* address comments

---------

Co-authored-by: Emir Karabeg <emirkarabeg@berkeley.edu>
---
 apps/docs/app/layout.tsx                      |   28 +-
 apps/docs/public/favicon/site.webmanifest     |   33 +-
 apps/docs/public/icon.svg                     |   14 +
 .../app/(auth)/components/branded-button.tsx  |    2 +-
 .../(auth)/components/status-page-layout.tsx  |    8 +-
 apps/sim/app/(auth)/login/login-form.tsx      |    8 +-
 apps/sim/app/(auth)/oauth/consent/page.tsx    |   16 +-
 .../reset-password/reset-password-content.tsx |    6 +-
 apps/sim/app/(auth)/signup/signup-form.tsx    |    8 +-
 apps/sim/app/(auth)/verify/verify-content.tsx |    4 +-
 .../collaboration/collaboration.tsx           |   57 +-
 .../features/components/features-preview.tsx  | 1110 ++++++++++++++++-
 .../(home)/components/features/features.tsx   |   62 +-
 .../(home)/components/footer/footer-cta.tsx   |  100 ++
 .../app/(home)/components/footer/footer.tsx   |  303 +++--
 apps/sim/app/(home)/components/hero/hero.tsx  |    6 +-
 .../preview-block-node.tsx                    |    4 +
 .../landing-preview-workflow/workflow-data.ts |    6 +-
 .../landing-preview/landing-preview.tsx       |    2 +-
 .../navbar/components/blog-dropdown.tsx       |  101 ++
 .../navbar/components/docs-dropdown.tsx       |   92 ++
 .../app/(home)/components/navbar/navbar.tsx   |  335 ++++-
 .../app/(home)/components/pricing/pricing.tsx |    4 +-
 .../(home)/components/templates/templates.tsx |  211 ++--
 .../{studio => blog}/[slug]/back-link.tsx     |    4 +-
 .../{studio => blog}/[slug]/page.tsx          |    8 +-
 .../{studio => blog}/[slug]/share-button.tsx  |    0
 .../{studio => blog}/authors/[id]/page.tsx    |    4 +-
 .../app/(landing)/{studio => blog}/layout.tsx |    0
 .../app/(landing)/{studio => blog}/page.tsx   |   24 +-
 .../(landing)/{studio => blog}/post-grid.tsx  |    2 +-
 .../{studio => blog}/rss.xml/route.ts         |    2 +-
 .../sitemap-images.xml/route.ts               |    0
 .../(landing)/{studio => blog}/tags/page.tsx  |    4 +-
 .../(landing)/components/footer/footer.tsx    |    4 +-
 .../app/(landing)/components/legal-layout.tsx |    2 +-
 .../app/_shell/providers/theme-provider.tsx   |    2 +-
 apps/sim/app/changelog/layout.tsx             |    2 +-
 apps/sim/app/llms.txt/route.ts                |    2 +-
 apps/sim/app/not-found.tsx                    |   35 +-
 apps/sim/app/sitemap.ts                       |    4 +-
 .../components/agent-group/agent-group.tsx    |   11 +-
 .../components/agent-group/tool-call-item.tsx |  127 +-
 .../components/chat-content/chat-content.tsx  |    4 +-
 .../components/special-tags/special-tags.tsx  |   21 +-
 .../message-content/message-content.tsx       |   46 +-
 .../home/components/message-content/utils.ts  |    4 +-
 .../mothership-view/mothership-view.tsx       |    2 +-
 .../queued-messages/queued-messages.tsx       |   16 +-
 .../components/template-prompts/consts.ts     |    5 +-
 .../template-prompts/template-prompts.tsx     |  361 +++++-
 .../home/components/user-input/user-input.tsx |    4 +-
 .../user-message-content.tsx                  |    2 +-
 .../app/workspace/[workspaceId]/home/home.tsx |   57 +-
 .../[workspaceId]/home/hooks/use-chat.ts      |    5 +-
 .../app/workspace/[workspaceId]/home/types.ts |    9 +
 .../create-schedule-modal/schedule-modal.tsx  |    2 +-
 .../settings-sidebar/settings-sidebar.tsx     |    8 +-
 .../workspace-header/workspace-header.tsx     |    2 +-
 .../w/components/sidebar/sidebar.tsx          |  384 +++---
 .../emcn/icons/animate/pills-ring.module.css  |   22 +
 apps/sim/components/emcn/icons/index.ts       |    1 +
 apps/sim/components/emcn/icons/pills-ring.tsx |   52 +
 apps/sim/components/icons.tsx                 |    2 +-
 apps/sim/content/authors/adam.json            |    7 -
 apps/sim/content/authors/emir.json            |    2 +-
 apps/sim/content/authors/sid.json             |    2 +-
 apps/sim/content/authors/vik.json             |    2 +-
 apps/sim/content/authors/waleed.json          |    2 +-
 apps/sim/content/blog/copilot/index.mdx       |    4 +-
 apps/sim/content/blog/emcn/index.mdx          |    6 +-
 apps/sim/content/blog/enterprise/index.mdx    |   20 +-
 apps/sim/content/blog/executor/index.mdx      |   10 +-
 apps/sim/content/blog/multiplayer/index.mdx   |    4 +-
 .../blog/openai-vs-n8n-vs-sim/index.mdx       |   18 +-
 apps/sim/content/blog/series-a/index.mdx      |    6 +-
 apps/sim/content/blog/v0-5/index.mdx          |   18 +-
 apps/sim/lib/blog/seo.ts                      |    6 +-
 apps/sim/next.config.ts                       |   14 +-
 .../public/{studio => blog}/authors/emir.jpg  |  Bin
 .../public/{studio => blog}/authors/sid.jpg   |  Bin
 .../public/{studio => blog}/authors/vik.jpg   |  Bin
 .../{studio => blog}/authors/waleed.jpg       |  Bin
 .../public/{studio => blog}/copilot/cover.png |  Bin
 .../public/{studio => blog}/emcn/cover.png    |  Bin
 .../enterprise/access-control.png             |  Bin
 .../{studio => blog}/enterprise/byok.png      |  Bin
 .../enterprise/compliance.png                 |  Bin
 .../{studio => blog}/enterprise/cover.png     |  Bin
 .../enterprise/integration-controls.png       |  Bin
 .../enterprise/model-providers.png            |  Bin
 .../enterprise/platform-controls.png          |  Bin
 .../enterprise/self-hosted.png                |  Bin
 .../{studio => blog}/enterprise/sso.png       |  Bin
 .../{studio => blog}/executor/cover.png       |  Bin
 .../executor/edge-pruning.png                 |  Bin
 .../{studio => blog}/executor/hitl-loop.png   |  Bin
 .../executor/loop-sentinels.png               |  Bin
 .../{studio => blog}/multiplayer/cover.png    |  Bin
 .../openai-vs-n8n-vs-sim/copilot.png          |  Bin
 .../openai-vs-n8n-vs-sim/logs.png             |  Bin
 .../openai-vs-n8n-vs-sim/n8n.png              |  Bin
 .../openai-vs-n8n-vs-sim/openai.png           |  Bin
 .../openai-vs-n8n-vs-sim/sim.png              |  Bin
 .../openai-vs-n8n-vs-sim/templates.png        |  Bin
 .../openai-vs-n8n-vs-sim/widgets.png          |  Bin
 .../openai-vs-n8n-vs-sim/workflow.png         |  Bin
 .../{studio => blog}/series-a/cover.png       |  Bin
 .../public/{studio => blog}/series-a/team.jpg |  Bin
 apps/sim/public/blog/thumbnails/copilot.webp  |  Bin 0 -> 6774 bytes
 .../public/blog/thumbnails/enterprise.webp    |  Bin 0 -> 10156 bytes
 apps/sim/public/blog/thumbnails/executor.webp |  Bin 0 -> 3256 bytes
 .../public/blog/thumbnails/multiplayer.webp   |  Bin 0 -> 946 bytes
 apps/sim/public/blog/thumbnails/series-a.webp |  Bin 0 -> 4612 bytes
 apps/sim/public/blog/thumbnails/v0-5.webp     |  Bin 0 -> 3548 bytes
 .../{studio => blog}/v0-5/collaboration.jpg   |  Bin
 .../{studio => blog}/v0-5/collaboration.png   |  Bin
 .../public/{studio => blog}/v0-5/copilot.jpg  |  Bin
 .../public/{studio => blog}/v0-5/cover.png    |  Bin
 .../{studio => blog}/v0-5/dashboard.jpg       |  Bin
 .../{studio => blog}/v0-5/integrations.png    |  Bin
 apps/sim/public/{studio => blog}/v0-5/kb.png  |  Bin
 apps/sim/public/{studio => blog}/v0-5/mcp.png |  Bin
 .../{studio => blog}/v0-5/versioning.png      |  Bin
 .../public/landing/docs-getting-started.svg   |   21 +
 apps/sim/public/landing/docs-intro.svg        |   16 +
 apps/sim/tailwind.config.ts                   |    6 +
 127 files changed, 3106 insertions(+), 824 deletions(-)
 create mode 100644 apps/docs/public/icon.svg
 create mode 100644 apps/sim/app/(home)/components/footer/footer-cta.tsx
 create mode 100644 apps/sim/app/(home)/components/navbar/components/blog-dropdown.tsx
 create mode 100644 apps/sim/app/(home)/components/navbar/components/docs-dropdown.tsx
 rename apps/sim/app/(landing)/{studio => blog}/[slug]/back-link.tsx (94%)
 rename apps/sim/app/(landing)/{studio => blog}/[slug]/page.tsx (95%)
 rename apps/sim/app/(landing)/{studio => blog}/[slug]/share-button.tsx (100%)
 rename apps/sim/app/(landing)/{studio => blog}/authors/[id]/page.tsx (95%)
 rename apps/sim/app/(landing)/{studio => blog}/layout.tsx (100%)
 rename apps/sim/app/(landing)/{studio => blog}/page.tsx (75%)
 rename apps/sim/app/(landing)/{studio => blog}/post-grid.tsx (97%)
 rename apps/sim/app/(landing)/{studio => blog}/rss.xml/route.ts (97%)
 rename apps/sim/app/(landing)/{studio => blog}/sitemap-images.xml/route.ts (100%)
 rename apps/sim/app/(landing)/{studio => blog}/tags/page.tsx (91%)
 create mode 100644 apps/sim/components/emcn/icons/animate/pills-ring.module.css
 create mode 100644 apps/sim/components/emcn/icons/pills-ring.tsx
 delete mode 100644 apps/sim/content/authors/adam.json
 rename apps/sim/public/{studio => blog}/authors/emir.jpg (100%)
 rename apps/sim/public/{studio => blog}/authors/sid.jpg (100%)
 rename apps/sim/public/{studio => blog}/authors/vik.jpg (100%)
 rename apps/sim/public/{studio => blog}/authors/waleed.jpg (100%)
 rename apps/sim/public/{studio => blog}/copilot/cover.png (100%)
 rename apps/sim/public/{studio => blog}/emcn/cover.png (100%)
 rename apps/sim/public/{studio => blog}/enterprise/access-control.png (100%)
 rename apps/sim/public/{studio => blog}/enterprise/byok.png (100%)
 rename apps/sim/public/{studio => blog}/enterprise/compliance.png (100%)
 rename apps/sim/public/{studio => blog}/enterprise/cover.png (100%)
 rename apps/sim/public/{studio => blog}/enterprise/integration-controls.png (100%)
 rename apps/sim/public/{studio => blog}/enterprise/model-providers.png (100%)
 rename apps/sim/public/{studio => blog}/enterprise/platform-controls.png (100%)
 rename apps/sim/public/{studio => blog}/enterprise/self-hosted.png (100%)
 rename apps/sim/public/{studio => blog}/enterprise/sso.png (100%)
 rename apps/sim/public/{studio => blog}/executor/cover.png (100%)
 rename apps/sim/public/{studio => blog}/executor/edge-pruning.png (100%)
 rename apps/sim/public/{studio => blog}/executor/hitl-loop.png (100%)
 rename apps/sim/public/{studio => blog}/executor/loop-sentinels.png (100%)
 rename apps/sim/public/{studio => blog}/multiplayer/cover.png (100%)
 rename apps/sim/public/{studio => blog}/openai-vs-n8n-vs-sim/copilot.png (100%)
 rename apps/sim/public/{studio => blog}/openai-vs-n8n-vs-sim/logs.png (100%)
 rename apps/sim/public/{studio => blog}/openai-vs-n8n-vs-sim/n8n.png (100%)
 rename apps/sim/public/{studio => blog}/openai-vs-n8n-vs-sim/openai.png (100%)
 rename apps/sim/public/{studio => blog}/openai-vs-n8n-vs-sim/sim.png (100%)
 rename apps/sim/public/{studio => blog}/openai-vs-n8n-vs-sim/templates.png (100%)
 rename apps/sim/public/{studio => blog}/openai-vs-n8n-vs-sim/widgets.png (100%)
 rename apps/sim/public/{studio => blog}/openai-vs-n8n-vs-sim/workflow.png (100%)
 rename apps/sim/public/{studio => blog}/series-a/cover.png (100%)
 rename apps/sim/public/{studio => blog}/series-a/team.jpg (100%)
 create mode 100644 apps/sim/public/blog/thumbnails/copilot.webp
 create mode 100644 apps/sim/public/blog/thumbnails/enterprise.webp
 create mode 100644 apps/sim/public/blog/thumbnails/executor.webp
 create mode 100644 apps/sim/public/blog/thumbnails/multiplayer.webp
 create mode 100644 apps/sim/public/blog/thumbnails/series-a.webp
 create mode 100644 apps/sim/public/blog/thumbnails/v0-5.webp
 rename apps/sim/public/{studio => blog}/v0-5/collaboration.jpg (100%)
 rename apps/sim/public/{studio => blog}/v0-5/collaboration.png (100%)
 rename apps/sim/public/{studio => blog}/v0-5/copilot.jpg (100%)
 rename apps/sim/public/{studio => blog}/v0-5/cover.png (100%)
 rename apps/sim/public/{studio => blog}/v0-5/dashboard.jpg (100%)
 rename apps/sim/public/{studio => blog}/v0-5/integrations.png (100%)
 rename apps/sim/public/{studio => blog}/v0-5/kb.png (100%)
 rename apps/sim/public/{studio => blog}/v0-5/mcp.png (100%)
 rename apps/sim/public/{studio => blog}/v0-5/versioning.png (100%)
 create mode 100644 apps/sim/public/landing/docs-getting-started.svg
 create mode 100644 apps/sim/public/landing/docs-intro.svg

diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index 5548fd7e74..06e06b83ea 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -1,9 +1,21 @@
 import type { ReactNode } from 'react'
+import type { Viewport } from 'next'
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return children
 }
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
+    { media: '(prefers-color-scheme: dark)', color: '#0c0c0c' },
+  ],
+}
+
 export const metadata = {
   metadataBase: new URL('https://docs.sim.ai'),
   title: {
@@ -12,6 +24,9 @@ export const metadata = {
   },
   description:
     'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
+  applicationName: 'Sim Docs',
+  generator: 'Next.js',
+  referrer: 'origin-when-cross-origin' as const,
   keywords: [
     'AI agents',
     'agentic workforce',
@@ -37,17 +52,28 @@ export const metadata = {
   manifest: '/favicon/site.webmanifest',
   icons: {
     icon: [
+      { url: '/icon.svg', type: 'image/svg+xml', sizes: 'any' },
       { url: '/favicon/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
       { url: '/favicon/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
+      { url: '/favicon/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' },
+      { url: '/favicon/android-chrome-512x512.png', sizes: '512x512', type: 'image/png' },
     ],
     apple: '/favicon/apple-touch-icon.png',
-    shortcut: '/favicon/favicon.ico',
+    shortcut: '/icon.svg',
   },
   appleWebApp: {
     capable: true,
     statusBarStyle: 'default',
     title: 'Sim Docs',
   },
+  formatDetection: {
+    telephone: false,
+  },
+  other: {
+    'apple-mobile-web-app-capable': 'yes',
+    'mobile-web-app-capable': 'yes',
+    'msapplication-TileColor': '#33C482',
+  },
   openGraph: {
     type: 'website',
     locale: 'en_US',
diff --git a/apps/docs/public/favicon/site.webmanifest b/apps/docs/public/favicon/site.webmanifest
index 981d97f156..e0af1ce7df 100644
--- a/apps/docs/public/favicon/site.webmanifest
+++ b/apps/docs/public/favicon/site.webmanifest
@@ -1,21 +1,42 @@
 {
-  "name": "MyWebSite",
-  "short_name": "MySite",
+  "name": "Sim Documentation — Build AI Agents & Run Your Agentic Workforce",
+  "short_name": "Sim Docs",
+  "description": "Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.",
+  "start_url": "/",
+  "scope": "/",
   "icons": [
     {
-      "src": "/web-app-manifest-192x192.png",
+      "src": "/favicon/web-app-manifest-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "maskable"
     },
     {
-      "src": "/web-app-manifest-512x512.png",
+      "src": "/favicon/web-app-manifest-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "maskable"
+    },
+    {
+      "src": "/favicon/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
     }
   ],
-  "theme_color": "#ffffff",
+  "theme_color": "#33C482",
   "background_color": "#ffffff",
-  "display": "standalone"
+  "display": "standalone",
+  "categories": ["productivity", "developer", "business"],
+  "lang": "en-US",
+  "dir": "ltr"
 }
diff --git a/apps/docs/public/icon.svg b/apps/docs/public/icon.svg
new file mode 100644
index 0000000000..f5a6477f76
--- /dev/null
+++ b/apps/docs/public/icon.svg
@@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="16" height="16" rx="3" fill="#0B0B0B"/>
+  <g transform="translate(2.75,2.75) scale(0.0473)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M107.822 93.7612C107.822 97.3481 106.403 100.792 103.884 103.328L103.523 103.692C101.006 106.236 97.5855 107.658 94.0236 107.658H13.4455C6.02456 107.658 0 113.718 0 121.191V208.332C0 215.806 6.02456 221.866 13.4455 221.866H99.9622C107.383 221.866 113.4 215.806 113.4 208.332V126.745C113.4 123.419 114.71 120.228 117.047 117.874C119.377 115.527 122.546 114.207 125.849 114.207H207.777C215.198 114.207 221.214 108.148 221.214 100.674V13.5333C221.214 6.05956 215.198 0 207.777 0H121.26C113.839 0 107.822 6.05956 107.822 13.5333V93.7612ZM134.078 18.55H194.952C199.289 18.55 202.796 22.0893 202.796 26.4503V87.7574C202.796 92.1178 199.289 95.6577 194.952 95.6577H134.078C129.748 95.6577 126.233 92.1178 126.233 87.7574V26.4503C126.233 22.0893 129.748 18.55 134.078 18.55Z" fill="#33C482"/>
+    <path d="M207.878 129.57H143.554C135.756 129.57 129.434 135.937 129.434 143.791V207.784C129.434 215.638 135.756 222.005 143.554 222.005H207.878C215.677 222.005 221.999 215.638 221.999 207.784V143.791C221.999 135.937 215.677 129.57 207.878 129.57Z" fill="#33C482"/>
+    <path d="M207.878 129.266H143.554C135.756 129.266 129.434 135.632 129.434 143.487V207.479C129.434 215.333 135.756 221.699 143.554 221.699H207.878C215.677 221.699 221.999 215.333 221.999 207.479V143.487C221.999 135.632 215.677 129.266 207.878 129.266Z" fill="url(#paint0_linear)" fill-opacity="0.2"/>
+  </g>
+  <defs>
+    <linearGradient id="paint0_linear" x1="129.434" y1="129.266" x2="185.629" y2="185.33" gradientUnits="userSpaceOnUse">
+      <stop/>
+      <stop offset="1" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/apps/sim/app/(auth)/components/branded-button.tsx b/apps/sim/app/(auth)/components/branded-button.tsx
index b044e3f33c..245cd7c9c6 100644
--- a/apps/sim/app/(auth)/components/branded-button.tsx
+++ b/apps/sim/app/(auth)/components/branded-button.tsx
@@ -55,7 +55,7 @@ export const BrandedButton = forwardRef<HTMLButtonElement, BrandedButtonProps>(
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         className={cn(
-          'group inline-flex h-[30px] items-center justify-center gap-[7px] rounded-[5px] border px-[9px] text-[13.5px] transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+          'group inline-flex h-[32px] items-center justify-center gap-[8px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px] transition-colors disabled:cursor-not-allowed disabled:opacity-50',
           !hasCustomColor &&
             'border-[#FFFFFF] bg-[#FFFFFF] text-black hover:border-[#E0E0E0] hover:bg-[#E0E0E0]',
           fullWidth && 'w-full',
diff --git a/apps/sim/app/(auth)/components/status-page-layout.tsx b/apps/sim/app/(auth)/components/status-page-layout.tsx
index 30a1081930..7e353e0f19 100644
--- a/apps/sim/app/(auth)/components/status-page-layout.tsx
+++ b/apps/sim/app/(auth)/components/status-page-layout.tsx
@@ -28,8 +28,12 @@ export function StatusPageLayout({
           <div className='w-full max-w-lg px-4'>
             <div className='flex flex-col items-center justify-center'>
               <div className='space-y-1 text-center'>
-                <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>{title}</h1>
-                <p className='font-[380] text-[#999] text-[16px]'>{description}</p>
+                <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
+                  {title}
+                </h1>
+                <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+                  {description}
+                </p>
               </div>
               {children && <div className='mt-8 w-full max-w-[410px] space-y-3'>{children}</div>}
             </div>
diff --git a/apps/sim/app/(auth)/login/login-form.tsx b/apps/sim/app/(auth)/login/login-form.tsx
index 464071321a..85e924fd32 100644
--- a/apps/sim/app/(auth)/login/login-form.tsx
+++ b/apps/sim/app/(auth)/login/login-form.tsx
@@ -383,8 +383,12 @@ export default function LoginPage({
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>Sign in</h1>
-        <p className='font-[380] text-[#999] text-[16px]'>Enter your details</p>
+        <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
+          Sign in
+        </h1>
+        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+          Enter your details
+        </p>
       </div>
 
       {/* SSO Login Button (primary top-only when it is the only method) */}
diff --git a/apps/sim/app/(auth)/oauth/consent/page.tsx b/apps/sim/app/(auth)/oauth/consent/page.tsx
index 96269c586d..0138a7dd6d 100644
--- a/apps/sim/app/(auth)/oauth/consent/page.tsx
+++ b/apps/sim/app/(auth)/oauth/consent/page.tsx
@@ -127,10 +127,12 @@ export default function OAuthConsentPage() {
     return (
       <div className='flex flex-col items-center justify-center'>
         <div className='space-y-1 text-center'>
-          <h1 className={'font-[500] text-[#ECECEC] text-[32px] tracking-tight'}>
+          <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
             Authorize Application
           </h1>
-          <p className={'font-[380] text-[#999] text-[16px]'}>Loading application details...</p>
+          <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+            Loading application details...
+          </p>
         </div>
       </div>
     )
@@ -140,10 +142,12 @@ export default function OAuthConsentPage() {
     return (
       <div className='flex flex-col items-center justify-center'>
         <div className='space-y-1 text-center'>
-          <h1 className={'font-[500] text-[#ECECEC] text-[32px] tracking-tight'}>
+          <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
             Authorization Error
           </h1>
-          <p className={'font-[380] text-[#999] text-[16px]'}>{error}</p>
+          <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+            {error}
+          </p>
         </div>
         <div className='mt-8 w-full max-w-[410px] space-y-3'>
           <BrandedButton onClick={() => router.push('/')}>Return to Home</BrandedButton>
@@ -181,10 +185,10 @@ export default function OAuthConsentPage() {
       </div>
 
       <div className='space-y-1 text-center'>
-        <h1 className={'font-[500] text-[#ECECEC] text-[32px] tracking-tight'}>
+        <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           Authorize Application
         </h1>
-        <p className={'font-[380] text-[#999] text-[16px]'}>
+        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
           <span className='font-medium text-[#ECECEC]'>{clientName}</span> is requesting access to
           your account
         </p>
diff --git a/apps/sim/app/(auth)/reset-password/reset-password-content.tsx b/apps/sim/app/(auth)/reset-password/reset-password-content.tsx
index 8d72c687a6..9127c6e0b4 100644
--- a/apps/sim/app/(auth)/reset-password/reset-password-content.tsx
+++ b/apps/sim/app/(auth)/reset-password/reset-password-content.tsx
@@ -74,10 +74,12 @@ function ResetPasswordContent() {
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>
+        <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           Reset your password
         </h1>
-        <p className='font-[380] text-[#999] text-[16px]'>Enter a new password for your account</p>
+        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+          Enter a new password for your account
+        </p>
       </div>
 
       <div className='mt-8'>
diff --git a/apps/sim/app/(auth)/signup/signup-form.tsx b/apps/sim/app/(auth)/signup/signup-form.tsx
index 498ebf19d4..b04ad8af4c 100644
--- a/apps/sim/app/(auth)/signup/signup-form.tsx
+++ b/apps/sim/app/(auth)/signup/signup-form.tsx
@@ -341,8 +341,12 @@ function SignupFormContent({
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>Create an account</h1>
-        <p className='font-[380] text-[#999] text-[16px]'>Create an account or log in</p>
+        <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
+          Create an account
+        </h1>
+        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+          Create an account or log in
+        </p>
       </div>
 
       {/* SSO Login Button (primary top-only when it is the only method) */}
diff --git a/apps/sim/app/(auth)/verify/verify-content.tsx b/apps/sim/app/(auth)/verify/verify-content.tsx
index dafdf1f9e9..392811ff2e 100644
--- a/apps/sim/app/(auth)/verify/verify-content.tsx
+++ b/apps/sim/app/(auth)/verify/verify-content.tsx
@@ -59,10 +59,10 @@ function VerificationForm({
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>
+        <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           {isVerified ? 'Email Verified!' : 'Verify Your Email'}
         </h1>
-        <p className='font-[380] text-[#999] text-[16px]'>
+        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
           {isVerified
             ? 'Your email has been verified. Redirecting to dashboard...'
             : !isEmailVerificationEnabled
diff --git a/apps/sim/app/(home)/components/collaboration/collaboration.tsx b/apps/sim/app/(home)/components/collaboration/collaboration.tsx
index 9f6b2102f7..383779ac83 100644
--- a/apps/sim/app/(home)/components/collaboration/collaboration.tsx
+++ b/apps/sim/app/(home)/components/collaboration/collaboration.tsx
@@ -222,34 +222,15 @@ export default function Collaboration() {
       <style dangerouslySetInnerHTML={{ __html: CURSOR_KEYFRAMES }} />
 
       <DotGrid
-        className='border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
+        className='overflow-hidden border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
         cols={120}
         rows={1}
         gap={6}
       />
 
       <div className='relative overflow-hidden'>
-        <Link
-          href='/studio/multiplayer'
-          target='_blank'
-          rel='noopener noreferrer'
-          className='absolute bottom-10 left-4 z-20 flex cursor-none items-center gap-[14px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] px-[12px] py-[10px] transition-colors hover:border-[#3d3d3d] hover:bg-[#232323] sm:left-8 md:left-[80px]'
-        >
-          <div className='relative h-7 w-11 shrink-0'>
-            <Image src='/landing/multiplayer-cursors.svg' alt='' fill className='object-contain' />
-          </div>
-          <div className='flex flex-col gap-[2px]'>
-            <span className='font-[430] font-season text-[#F6F6F0]/50 text-[12px] uppercase leading-[100%] tracking-[0.08em]'>
-              Blog
-            </span>
-            <span className='font-[430] font-season text-[#F6F6F0] text-[14px] leading-[125%] tracking-[0.02em]'>
-              How we built realtime collaboration
-            </span>
-          </div>
-        </Link>
-
-        <div className='grid grid-cols-[auto_1fr]'>
-          <div className='flex flex-col items-start gap-3 px-4 pt-[100px] pb-8 sm:gap-4 sm:px-8 md:gap-[20px] md:px-[80px]'>
+        <div className='grid grid-cols-1 md:grid-cols-[auto_1fr]'>
+          <div className='flex flex-col items-start gap-3 px-4 pt-[60px] pb-8 sm:gap-4 sm:px-8 md:gap-[20px] md:px-[80px] md:pt-[100px]'>
             <Badge
               variant='blue'
               size='md'
@@ -268,8 +249,9 @@ export default function Collaboration() {
               collaboration
             </h2>
 
-            <p className='font-[430] font-season text-[#F6F6F0]/50 text-[18px] leading-[150%] tracking-[0.02em]'>
-              Grab your team. Build agents together <br /> in real-time inside your workspace.
+            <p className='font-[430] font-season text-[#F6F6F0]/50 text-[15px] leading-[150%] tracking-[0.02em] md:text-[18px]'>
+              Grab your team. Build agents together <br className='hidden md:block' />
+              in real-time inside your workspace.
             </p>
 
             <Link
@@ -298,14 +280,14 @@ export default function Collaboration() {
             </Link>
           </div>
 
-          <figure className='pointer-events-none relative h-[600px] w-full'>
-            <div className='-left-[18%] absolute inset-y-0 min-w-full'>
+          <figure className='pointer-events-none relative h-[220px] w-full md:h-[600px]'>
+            <div className='md:-left-[18%] -top-[10%] absolute inset-y-0 left-[7%] min-w-full md:top-0'>
               <Image
                 src='/landing/collaboration-visual.svg'
                 alt='Collaboration visual showing team workflows with real-time editing, shared cursors, and version control interface'
                 width={876}
                 height={480}
-                className='h-full w-auto min-w-[100vw] object-left'
+                className='h-full w-auto object-left md:min-w-[100vw]'
                 priority
               />
             </div>
@@ -319,10 +301,29 @@ export default function Collaboration() {
             </figcaption>
           </figure>
         </div>
+
+        <Link
+          href='/studio/multiplayer'
+          target='_blank'
+          rel='noopener noreferrer'
+          className='relative mx-4 mb-6 flex cursor-none items-center gap-[14px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] px-[12px] py-[10px] transition-colors hover:border-[#3d3d3d] hover:bg-[#232323] sm:mx-8 md:absolute md:bottom-10 md:left-[80px] md:z-20 md:mx-0 md:mb-0'
+        >
+          <div className='relative h-7 w-11 shrink-0'>
+            <Image src='/landing/multiplayer-cursors.svg' alt='' fill className='object-contain' />
+          </div>
+          <div className='flex flex-col gap-[2px]'>
+            <span className='font-[430] font-season text-[#F6F6F0]/50 text-[12px] uppercase leading-[100%] tracking-[0.08em]'>
+              Blog
+            </span>
+            <span className='font-[430] font-season text-[#F6F6F0] text-[14px] leading-[125%] tracking-[0.02em]'>
+              How we built realtime collaboration
+            </span>
+          </div>
+        </Link>
       </div>
 
       <DotGrid
-        className='border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
+        className='overflow-hidden border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
         cols={120}
         rows={1}
         gap={6}
diff --git a/apps/sim/app/(home)/components/features/components/features-preview.tsx b/apps/sim/app/(home)/components/features/components/features-preview.tsx
index f38e770d0d..e3b0ba60ec 100644
--- a/apps/sim/app/(home)/components/features/components/features-preview.tsx
+++ b/apps/sim/app/(home)/components/features/components/features-preview.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { type SVGProps, useRef } from 'react'
-import { motion, useInView } from 'framer-motion'
+import { type SVGProps, useEffect, useRef, useState } from 'react'
+import { AnimatePresence, motion, useInView } from 'framer-motion'
 import { ChevronDown } from '@/components/emcn'
 import { Database, File, Library, Table } from '@/components/emcn/icons'
 import {
@@ -15,6 +15,1070 @@ import {
   SlackIcon,
   xAIIcon,
 } from '@/components/icons'
+import { CsvIcon, JsonIcon, MarkdownIcon, PdfIcon } from '@/components/icons/document-icons'
+
+interface FeaturesPreviewProps {
+  activeTab: number
+}
+
+export function FeaturesPreview({ activeTab }: FeaturesPreviewProps) {
+  const isWorkspaceTab = activeTab <= 4
+
+  return (
+    <div className='relative h-[350px] w-full md:h-[560px]'>
+      <motion.div
+        className='absolute inset-0'
+        animate={{ opacity: isWorkspaceTab ? 1 : 0 }}
+        transition={{ duration: 0.15 }}
+        style={{ pointerEvents: isWorkspaceTab ? 'auto' : 'none' }}
+      >
+        <WorkspacePreview activeTab={activeTab} isActive={isWorkspaceTab} />
+      </motion.div>
+      <AnimatePresence>
+        {!isWorkspaceTab && (
+          <motion.div
+            key={activeTab}
+            className='absolute inset-0'
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.15 }}
+          >
+            <DefaultPreview />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}
+
+// ─── Mothership Preview ───────────────────────────────────────────
+
+const TYPING_PROMPT = 'Clear all my todos this week'
+const TYPE_SPEED = 45
+const TYPE_START_DELAY = 500
+const PAUSE_AFTER_TYPE = 800
+const CARD_SIZE = 100
+const CARD_GAP = 8
+const GRID_STEP = CARD_SIZE + CARD_GAP
+const GRID_PAD = 8
+
+type CardVariant = 'prompt' | 'table' | 'workflow' | 'knowledge' | 'logs' | 'file'
+
+interface CardDef {
+  row: number
+  col: number
+  variant: CardVariant
+  label: string
+  color?: string
+}
+
+const MOTHERSHIP_CARDS: CardDef[] = [
+  { row: 0, col: 0, variant: 'prompt', label: 'prompt.md' },
+  { row: 1, col: 0, variant: 'table', label: 'Leads' },
+  { row: 0, col: 1, variant: 'workflow', label: 'Email Bot', color: '#7C3AED' },
+  { row: 1, col: 1, variant: 'knowledge', label: 'Company KB' },
+  { row: 2, col: 0, variant: 'logs', label: 'Run Logs' },
+  { row: 0, col: 2, variant: 'file', label: 'notes.md' },
+  { row: 2, col: 1, variant: 'workflow', label: 'Onboarding', color: '#2563EB' },
+  { row: 1, col: 2, variant: 'table', label: 'Contacts' },
+  { row: 2, col: 2, variant: 'file', label: 'report.pdf' },
+  { row: 3, col: 0, variant: 'table', label: 'Tickets' },
+  { row: 0, col: 3, variant: 'knowledge', label: 'Product Wiki' },
+  { row: 3, col: 1, variant: 'logs', label: 'Audit Trail' },
+  { row: 1, col: 3, variant: 'workflow', label: 'Support', color: '#059669' },
+  { row: 2, col: 3, variant: 'file', label: 'data.csv' },
+  { row: 3, col: 2, variant: 'table', label: 'Users' },
+  { row: 3, col: 3, variant: 'knowledge', label: 'HR Docs' },
+  { row: 0, col: 4, variant: 'workflow', label: 'Pipeline', color: '#DC2626' },
+  { row: 1, col: 4, variant: 'logs', label: 'API Logs' },
+  { row: 2, col: 4, variant: 'table', label: 'Orders' },
+  { row: 3, col: 4, variant: 'file', label: 'config.json' },
+  { row: 0, col: 5, variant: 'logs', label: 'Deploys' },
+  { row: 1, col: 5, variant: 'table', label: 'Campaigns' },
+  { row: 2, col: 5, variant: 'workflow', label: 'Intake', color: '#D97706' },
+  { row: 3, col: 5, variant: 'knowledge', label: 'Research' },
+  { row: 4, col: 0, variant: 'file', label: 'readme.md' },
+  { row: 4, col: 1, variant: 'table', label: 'Revenue' },
+  { row: 4, col: 2, variant: 'workflow', label: 'Sync', color: '#0891B2' },
+  { row: 4, col: 3, variant: 'logs', label: 'Errors' },
+  { row: 4, col: 4, variant: 'table', label: 'Inventory' },
+  { row: 4, col: 5, variant: 'file', label: 'schema.json' },
+  { row: 0, col: 6, variant: 'table', label: 'Analytics' },
+  { row: 1, col: 6, variant: 'workflow', label: 'Digest', color: '#6366F1' },
+  { row: 0, col: 7, variant: 'file', label: 'brief.md' },
+  { row: 2, col: 6, variant: 'knowledge', label: 'Playbooks' },
+  { row: 1, col: 7, variant: 'logs', label: 'Webhooks' },
+  { row: 3, col: 6, variant: 'file', label: 'export.csv' },
+  { row: 2, col: 7, variant: 'workflow', label: 'Alerts', color: '#E11D48' },
+  { row: 4, col: 6, variant: 'logs', label: 'Metrics' },
+  { row: 3, col: 7, variant: 'table', label: 'Feedback' },
+  { row: 4, col: 7, variant: 'knowledge', label: 'Runbooks' },
+]
+
+const EXPAND_TARGETS: Record<number, { row: number; col: number }> = {
+  1: { row: 1, col: 0 },
+  2: { row: 0, col: 2 },
+  3: { row: 1, col: 1 },
+  4: { row: 2, col: 0 },
+}
+
+const EXPAND_ROW_COUNTS: Record<number, number> = {
+  1: 10,
+  2: 10,
+  3: 10,
+  4: 7,
+}
+
+function WorkspacePreview({ activeTab, isActive }: { activeTab: number; isActive: boolean }) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const inView = useInView(containerRef, { once: true, margin: '-80px' })
+
+  const [typedText, setTypedText] = useState('')
+  const [showGrid, setShowGrid] = useState(false)
+  const hasPlayedTyping = useRef(false)
+  const gridAnimateIn = useRef(true)
+
+  const [expandedTab, setExpandedTab] = useState<number | null>(null)
+  const [revealedRows, setRevealedRows] = useState(0)
+
+  const isMothership = activeTab === 0 && isActive
+  const isExpandTab = activeTab >= 1 && activeTab <= 4 && isActive
+  const expandTarget = EXPAND_TARGETS[activeTab] ?? null
+
+  useEffect(() => {
+    if (!inView || showGrid || !isActive || activeTab === 0) return
+    gridAnimateIn.current = false
+    setShowGrid(true)
+  }, [inView, isActive, activeTab, showGrid])
+
+  useEffect(() => {
+    if (!inView || !isMothership || hasPlayedTyping.current) return
+    hasPlayedTyping.current = true
+
+    const timers: ReturnType<typeof setTimeout>[] = []
+    let typeTimer: ReturnType<typeof setInterval> | undefined
+
+    timers.push(
+      setTimeout(() => {
+        let i = 0
+        typeTimer = setInterval(() => {
+          i++
+          setTypedText(TYPING_PROMPT.slice(0, i))
+          if (i >= TYPING_PROMPT.length) {
+            clearInterval(typeTimer)
+            typeTimer = undefined
+            timers.push(
+              setTimeout(() => {
+                gridAnimateIn.current = true
+                setShowGrid(true)
+              }, PAUSE_AFTER_TYPE)
+            )
+          }
+        }, TYPE_SPEED)
+      }, TYPE_START_DELAY)
+    )
+
+    return () => {
+      timers.forEach(clearTimeout)
+      if (typeTimer) clearInterval(typeTimer)
+    }
+  }, [inView, isMothership])
+
+  useEffect(() => {
+    if (!isExpandTab || !showGrid) {
+      if (!isExpandTab) {
+        setExpandedTab(null)
+        setRevealedRows(0)
+      }
+      return
+    }
+    setExpandedTab(null)
+    setRevealedRows(0)
+    const timer = setTimeout(() => setExpandedTab(activeTab), 300)
+    return () => clearTimeout(timer)
+  }, [isExpandTab, activeTab, showGrid])
+
+  useEffect(() => {
+    const maxRows = expandedTab !== null ? (EXPAND_ROW_COUNTS[expandedTab] ?? 0) : 0
+    if (expandedTab === null || revealedRows >= maxRows) return
+    const delay = revealedRows === 0 ? 800 : 150
+    const timer = setTimeout(() => setRevealedRows((prev) => prev + 1), delay)
+    return () => clearTimeout(timer)
+  }, [expandedTab, revealedRows])
+
+  const isExpanded = expandedTab !== null
+
+  return (
+    <div ref={containerRef} className='relative h-[350px] w-full overflow-hidden md:h-[560px]'>
+      <motion.div
+        aria-hidden='true'
+        className='absolute inset-0'
+        animate={{ opacity: isExpanded ? 0 : 1 }}
+        transition={{ duration: 0.3 }}
+        style={{
+          backgroundImage: 'radial-gradient(circle, #D4D4D4 0.75px, transparent 0.75px)',
+          backgroundSize: '12px 12px',
+          maskImage: 'radial-gradient(ellipse 70% 65% at 48% 50%, black 30%, transparent 80%)',
+          WebkitMaskImage:
+            'radial-gradient(ellipse 70% 65% at 48% 50%, black 30%, transparent 80%)',
+        }}
+      />
+
+      <AnimatePresence>
+        {isMothership && !showGrid && inView && (
+          <motion.div
+            key='mock-input'
+            className='absolute inset-0 z-10 flex items-center justify-center'
+            initial={{ opacity: 0, y: 12 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.5, x: -280, y: -180 }}
+            transition={{ duration: 0.45, ease: [0.4, 0, 0.2, 1] }}
+          >
+            <MockUserInput text={typedText} />
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {showGrid && (
+        <div
+          className='absolute inset-0'
+          style={{
+            maskImage:
+              'linear-gradient(to right, black 80%, transparent 100%), linear-gradient(to bottom, black 75%, transparent 100%)',
+            WebkitMaskImage:
+              'linear-gradient(to right, black 80%, transparent 100%), linear-gradient(to bottom, black 75%, transparent 100%)',
+            maskComposite: 'intersect',
+            WebkitMaskComposite: 'source-in' as string,
+          }}
+        >
+          {MOTHERSHIP_CARDS.map((card) => (
+            <motion.div
+              key={`${card.row}-${card.col}`}
+              className='absolute'
+              initial={gridAnimateIn.current ? { opacity: 0, scale: 0.7, y: 6 } : false}
+              animate={isExpanded ? { opacity: 0, scale: 0.95 } : { opacity: 1, scale: 1, y: 0 }}
+              transition={{
+                duration: isExpanded ? 0.25 : 0.3,
+                delay: isExpanded ? 0 : gridAnimateIn.current ? (card.row + card.col) * 0.12 : 0,
+                ease: [0.4, 0, 0.2, 1],
+              }}
+              style={{
+                top: GRID_PAD + card.row * GRID_STEP,
+                left: GRID_PAD + card.col * GRID_STEP,
+                width: CARD_SIZE,
+                height: CARD_SIZE,
+              }}
+            >
+              <MiniCard variant={card.variant} label={card.label} color={card.color} />
+            </motion.div>
+          ))}
+        </div>
+      )}
+
+      {isExpanded && expandTarget && (
+        <motion.div
+          key={expandedTab}
+          className='absolute inset-0 overflow-hidden border border-[#E5E5E5] bg-white'
+          initial={{ opacity: 0, scale: 0.15 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.55, ease: [0.4, 0, 0.2, 1] }}
+          style={{
+            transformOrigin: `${GRID_PAD + expandTarget.col * GRID_STEP + CARD_SIZE / 2}px ${GRID_PAD + expandTarget.row * GRID_STEP + CARD_SIZE / 2}px`,
+          }}
+        >
+          {expandedTab === 1 && <MockFullTable revealedRows={revealedRows} />}
+          {expandedTab === 2 && <MockFullFiles />}
+          {expandedTab === 3 && <MockFullKnowledgeBase revealedRows={revealedRows} />}
+          {expandedTab === 4 && <MockFullLogs revealedRows={revealedRows} />}
+        </motion.div>
+      )}
+    </div>
+  )
+}
+
+// ─── Mock User Input ──────────────────────────────────────────────
+
+function MockUserInput({ text }: { text: string }) {
+  return (
+    <div className='flex w-[380px] items-center gap-[6px] rounded-[16px] border border-[#E0E0E0] bg-white px-[10px] py-[8px] shadow-[0_2px_8px_rgba(0,0,0,0.06)]'>
+      <div className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-full border border-[#E8E8E8]'>
+        <svg width='12' height='12' viewBox='0 0 12 12' fill='none'>
+          <path d='M6 2.5v7M2.5 6h7' stroke='#999' strokeWidth='1.5' strokeLinecap='round' />
+        </svg>
+      </div>
+      <div className='min-h-[20px] flex-1 font-[430] text-[#1C1C1C] text-[13px] leading-[20px]'>
+        {text}
+        <motion.span
+          className='ml-[1px] inline-block h-[14px] w-[1.5px] bg-[#1C1C1C] align-text-bottom'
+          animate={{ opacity: [1, 0] }}
+          transition={{ duration: 0.5, repeat: Number.POSITIVE_INFINITY, repeatType: 'reverse' }}
+        />
+      </div>
+      <div className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-full bg-[#383838]'>
+        <svg width='12' height='12' viewBox='0 0 12 12' fill='none'>
+          <path
+            d='M6 9V3M3.5 5L6 2.5L8.5 5'
+            stroke='white'
+            strokeWidth='1.5'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      </div>
+    </div>
+  )
+}
+
+// ─── Mini Card Components ─────────────────────────────────────────
+
+function MiniCard({
+  variant,
+  label,
+  color,
+}: {
+  variant: CardVariant
+  label: string
+  color?: string
+}) {
+  return (
+    <div className='flex h-full w-full flex-col overflow-hidden rounded-[2px] border border-[#E5E5E5] bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)]'>
+      <MiniCardHeader variant={variant} label={label} color={color} />
+      <div className='flex-1 overflow-hidden'>
+        <MiniCardBody variant={variant} color={color} />
+      </div>
+    </div>
+  )
+}
+
+function MiniCardHeader({
+  variant,
+  label,
+  color,
+}: {
+  variant: CardVariant
+  label: string
+  color?: string
+}) {
+  return (
+    <div className='flex items-center gap-[4px] border-[#F0F0F0] border-b px-[8px] py-[5px]'>
+      <MiniCardIcon variant={variant} color={color} />
+      <span className='truncate font-medium text-[#888] text-[7px] leading-none'>{label}</span>
+    </div>
+  )
+}
+
+function MiniCardIcon({ variant, color }: { variant: CardVariant; color?: string }) {
+  const cls = 'h-[7px] w-[7px] flex-shrink-0 text-[#BBB]'
+
+  switch (variant) {
+    case 'prompt':
+    case 'file':
+      return <File className={cls} />
+    case 'table':
+      return <Table className={cls} />
+    case 'workflow': {
+      const c = color ?? '#7C3AED'
+      return (
+        <div
+          className='h-[7px] w-[7px] flex-shrink-0 rounded-[1.5px] border'
+          style={{
+            backgroundColor: c,
+            borderColor: `${c}60`,
+            backgroundClip: 'padding-box',
+          }}
+        />
+      )
+    }
+    case 'knowledge':
+      return <Database className={cls} />
+    case 'logs':
+      return <Library className={cls} />
+  }
+}
+
+function MiniCardBody({ variant, color }: { variant: CardVariant; color?: string }) {
+  switch (variant) {
+    case 'prompt':
+      return <PromptCardBody />
+    case 'file':
+      return <FileCardBody />
+    case 'table':
+      return <TableCardBody />
+    case 'workflow':
+      return <WorkflowCardBody color={color ?? '#7C3AED'} />
+    case 'knowledge':
+      return <KnowledgeCardBody />
+    case 'logs':
+      return <LogsCardBody />
+  }
+}
+
+function PromptCardBody() {
+  return (
+    <div className='px-[8px] py-[6px]'>
+      <p className='break-words text-[#AAAAAA] text-[6.5px] leading-[10px]'>{TYPING_PROMPT}</p>
+    </div>
+  )
+}
+
+function FileCardBody() {
+  return (
+    <div className='flex flex-col gap-[3px] px-[8px] py-[6px]'>
+      <div className='h-[2px] w-[78%] rounded-full bg-[#E8E8E8]' />
+      <div className='h-[2px] w-[92%] rounded-full bg-[#E8E8E8]' />
+      <div className='h-[2px] w-[62%] rounded-full bg-[#E8E8E8]' />
+      <div className='mt-[3px] h-[2px] w-[70%] rounded-full bg-[#F0F0F0]' />
+      <div className='h-[2px] w-[85%] rounded-full bg-[#F0F0F0]' />
+      <div className='h-[2px] w-[50%] rounded-full bg-[#F0F0F0]' />
+    </div>
+  )
+}
+
+const TABLE_ROW_WIDTHS = [
+  [22, 18, 14],
+  [16, 20, 10],
+  [24, 12, 16],
+  [18, 16, 12],
+  [20, 22, 18],
+  [14, 18, 8],
+] as const
+
+function TableCardBody() {
+  return (
+    <div className='flex flex-col'>
+      <div className='flex items-center gap-[4px] bg-[#FAFAFA] px-[6px] py-[3px]'>
+        <div className='h-[2px] flex-1 rounded-full bg-[#D4D4D4]' />
+        <div className='h-[2px] flex-1 rounded-full bg-[#D4D4D4]' />
+        <div className='h-[2px] flex-1 rounded-full bg-[#D4D4D4]' />
+      </div>
+      {TABLE_ROW_WIDTHS.map((row, i) => (
+        <div
+          key={i}
+          className='flex items-center gap-[4px] border-[#F5F5F5] border-b px-[6px] py-[3.5px]'
+        >
+          <div className='h-[1.5px] rounded-full bg-[#EBEBEB]' style={{ width: `${row[0]}%` }} />
+          <div className='h-[1.5px] rounded-full bg-[#EBEBEB]' style={{ width: `${row[1]}%` }} />
+          <div className='h-[1.5px] rounded-full bg-[#EBEBEB]' style={{ width: `${row[2]}%` }} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function WorkflowCardBody({ color }: { color: string }) {
+  return (
+    <div className='relative h-full w-full'>
+      <div className='absolute top-[10px] left-[10px] h-[14px] w-[14px] rounded-[3px] border border-[#E0E0E0] bg-[#F8F8F8]' />
+      <div className='absolute top-[16px] left-[24px] h-[1px] w-[16px] bg-[#D8D8D8]' />
+      <div
+        className='absolute top-[10px] left-[40px] h-[14px] w-[14px] rounded-[3px] border-[2px]'
+        style={{
+          backgroundColor: color,
+          borderColor: `${color}60`,
+          backgroundClip: 'padding-box',
+        }}
+      />
+      <div className='absolute top-[24px] left-[46px] h-[12px] w-[1px] bg-[#D8D8D8]' />
+      <div className='absolute top-[36px] left-[40px] h-[14px] w-[14px] rounded-[3px] border border-[#E0E0E0] bg-[#F8F8F8]' />
+      <div className='absolute top-[42px] left-[54px] h-[1px] w-[14px] bg-[#D8D8D8]' />
+      <div
+        className='absolute top-[36px] left-[68px] h-[14px] w-[14px] rounded-[3px] border-[2px]'
+        style={{
+          backgroundColor: color,
+          borderColor: `${color}60`,
+          backgroundClip: 'padding-box',
+          opacity: 0.5,
+        }}
+      />
+    </div>
+  )
+}
+
+const KB_WIDTHS = [70, 85, 55, 80, 48] as const
+
+function KnowledgeCardBody() {
+  return (
+    <div className='flex flex-col gap-[5px] px-[8px] py-[6px]'>
+      {KB_WIDTHS.map((w, i) => (
+        <div key={i} className='flex items-center gap-[4px]'>
+          <div className='h-[3px] w-[3px] flex-shrink-0 rounded-full bg-[#D4D4D4]' />
+          <div className='h-[1.5px] rounded-full bg-[#E8E8E8]' style={{ width: `${w}%` }} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const LOG_ENTRIES = [
+  { color: '#22C55E', width: 65 },
+  { color: '#22C55E', width: 78 },
+  { color: '#EAB308', width: 52 },
+  { color: '#22C55E', width: 70 },
+  { color: '#EF4444', width: 58 },
+  { color: '#22C55E', width: 74 },
+] as const
+
+function LogsCardBody() {
+  return (
+    <div className='flex flex-col gap-[3px] px-[6px] py-[4px]'>
+      {LOG_ENTRIES.map((entry, i) => (
+        <div key={i} className='flex items-center gap-[4px] py-[1px]'>
+          <div
+            className='h-[3px] w-[3px] flex-shrink-0 rounded-full'
+            style={{ backgroundColor: entry.color }}
+          />
+          <div
+            className='h-[1.5px] rounded-full bg-[#E8E8E8]'
+            style={{ width: `${entry.width}%` }}
+          />
+          <div className='ml-auto h-[1.5px] w-[10px] flex-shrink-0 rounded-full bg-[#F0F0F0]' />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ─── Tables Mock Data ─────────────────────────────────────────────
+
+const MOCK_TABLE_COLUMNS = ['Name', 'Email', 'Company', 'Status'] as const
+
+const MOCK_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 Corp', 'Qualified'],
+  ['Emma Wilson', 'emma@stark.io', 'Stark Industries', 'New'],
+  ['David Lee', 'david@waystar.com', 'Waystar', 'Contacted'],
+  ['Priya Patel', 'priya@hooli.io', 'Hooli', 'New'],
+  ['Tom Zhang', 'tom@weyland.co', 'Weyland Corp', 'Qualified'],
+  ['Nina Kowalski', 'nina@oscorp.io', 'Oscorp', 'Contacted'],
+  ['Ryan Murphy', 'ryan@massiveD.co', 'Massive Dynamic', 'New'],
+] as const
+
+const MOCK_MD_SOURCE = `# Meeting Notes
+
+## Action Items
+
+- Review Q1 metrics with Sarah
+- Update API documentation
+- Schedule design review for v2.0
+
+## Discussion Points
+
+The team agreed to prioritize the new onboarding flow. Key decisions:
+
+1. Migrate to the new auth provider by end of March
+2. Ship the dashboard redesign in two phases
+3. Add automated testing for all critical paths
+
+## Next Steps
+
+Follow up with engineering on the timeline for the API v2 migration. Draft the proposal for the board meeting next week.`
+
+const MOCK_KB_COLUMNS = ['Name', 'Size', 'Tokens', 'Chunks', 'Status'] as const
+
+const KB_FILE_ICONS: Record<string, React.ComponentType<SVGProps<SVGSVGElement>>> = {
+  pdf: PdfIcon,
+  md: MarkdownIcon,
+  csv: CsvIcon,
+  json: JsonIcon,
+}
+
+function getKBFileIcon(filename: string) {
+  const ext = filename.split('.').pop()?.toLowerCase() ?? ''
+  return KB_FILE_ICONS[ext] ?? File
+}
+
+const MOCK_KB_DATA = [
+  ['product-specs.pdf', '4.2 MB', '12.4k', '86', 'enabled'],
+  ['eng-handbook.md', '1.8 MB', '8.2k', '54', 'enabled'],
+  ['api-reference.json', '920 KB', '4.1k', '32', 'enabled'],
+  ['release-notes.md', '340 KB', '2.8k', '18', 'enabled'],
+  ['onboarding-guide.pdf', '2.1 MB', '6.5k', '42', 'processing'],
+  ['data-export.csv', '560 KB', '3.4k', '24', 'enabled'],
+  ['runbook.md', '280 KB', '1.9k', '14', 'enabled'],
+  ['compliance.pdf', '180 KB', '1.2k', '8', 'disabled'],
+  ['style-guide.md', '410 KB', '2.6k', '20', 'enabled'],
+  ['metrics.csv', '1.4 MB', '5.8k', '38', 'enabled'],
+] as const
+
+function MockFullFiles() {
+  return (
+    <div className='flex h-full flex-col'>
+      <div className='flex h-[44px] shrink-0 items-center border-[#E5E5E5] border-b px-[24px]'>
+        <div className='flex items-center gap-[6px]'>
+          <File className='h-[14px] w-[14px] text-[#999]' />
+          <span className='text-[#999] text-[13px]'>Files</span>
+          <span className='text-[#D4D4D4] text-[13px]'>/</span>
+          <span className='font-medium text-[#1C1C1C] text-[13px]'>meeting-notes.md</span>
+        </div>
+      </div>
+
+      <div className='flex flex-1 overflow-hidden'>
+        <motion.div
+          className='h-full w-1/2 shrink-0 overflow-hidden'
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.4, delay: 0.3 }}
+        >
+          <pre className='h-full overflow-auto whitespace-pre-wrap p-[24px] font-[300] font-mono text-[#1C1C1C] text-[12px] leading-[1.7]'>
+            {MOCK_MD_SOURCE}
+          </pre>
+        </motion.div>
+
+        <div className='h-full w-px shrink-0 bg-[#E5E5E5]' />
+
+        <motion.div
+          className='h-full min-w-0 flex-1 overflow-hidden'
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.4, delay: 0.5 }}
+        >
+          <div className='h-full overflow-auto p-[24px]'>
+            <h1 className='mb-4 border-[#E5E5E5] border-b pb-2 font-semibold text-[#1C1C1C] text-[20px]'>
+              Meeting Notes
+            </h1>
+            <h2 className='mt-5 mb-3 border-[#E5E5E5] border-b pb-1.5 font-semibold text-[#1C1C1C] text-[16px]'>
+              Action Items
+            </h2>
+            <ul className='mb-3 list-disc pl-[24px]'>
+              <li className='mb-1 text-[#1C1C1C] text-[14px] leading-[1.6]'>
+                Review Q1 metrics with Sarah
+              </li>
+              <li className='mb-1 text-[#1C1C1C] text-[14px] leading-[1.6]'>
+                Update API documentation
+              </li>
+              <li className='mb-1 text-[#1C1C1C] text-[14px] leading-[1.6]'>
+                Schedule design review for v2.0
+              </li>
+            </ul>
+            <h2 className='mt-5 mb-3 border-[#E5E5E5] border-b pb-1.5 font-semibold text-[#1C1C1C] text-[16px]'>
+              Discussion Points
+            </h2>
+            <p className='mb-3 text-[#1C1C1C] text-[14px] leading-[1.6]'>
+              The team agreed to prioritize the new onboarding flow. Key decisions:
+            </p>
+            <ol className='mb-3 list-decimal pl-[24px]'>
+              <li className='mb-1 text-[#1C1C1C] text-[14px] leading-[1.6]'>
+                Migrate to the new auth provider by end of March
+              </li>
+              <li className='mb-1 text-[#1C1C1C] text-[14px] leading-[1.6]'>
+                Ship the dashboard redesign in two phases
+              </li>
+              <li className='mb-1 text-[#1C1C1C] text-[14px] leading-[1.6]'>
+                Add automated testing for all critical paths
+              </li>
+            </ol>
+            <h2 className='mt-5 mb-3 border-[#E5E5E5] border-b pb-1.5 font-semibold text-[#1C1C1C] text-[16px]'>
+              Next Steps
+            </h2>
+            <p className='mb-3 text-[#1C1C1C] text-[14px] leading-[1.6]'>
+              Follow up with engineering on the timeline for the API v2 migration. Draft the
+              proposal for the board meeting next week.
+            </p>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  )
+}
+
+const KB_STATUS_STYLES: Record<string, { bg: string; text: string; label: string }> = {
+  enabled: { bg: '#DCFCE7', text: '#166534', label: 'Enabled' },
+  disabled: { bg: '#F3F4F6', text: '#6B7280', label: 'Disabled' },
+  processing: { bg: '#F3E8FF', text: '#7C3AED', label: 'Processing' },
+}
+
+function MockFullKnowledgeBase({ revealedRows }: { revealedRows: number }) {
+  return (
+    <div className='flex h-full flex-col'>
+      <div className='flex h-[44px] shrink-0 items-center border-[#E5E5E5] border-b px-[24px]'>
+        <div className='flex items-center gap-[6px]'>
+          <Database className='h-[14px] w-[14px] text-[#999]' />
+          <span className='text-[#999] text-[13px]'>Knowledge Base</span>
+          <span className='text-[#D4D4D4] text-[13px]'>/</span>
+          <span className='font-medium text-[#1C1C1C] text-[13px]'>Company KB</span>
+        </div>
+      </div>
+
+      <div className='flex h-[36px] shrink-0 items-center border-[#E5E5E5] border-b px-[24px]'>
+        <div className='flex items-center gap-[6px]'>
+          <div className='flex h-[24px] items-center gap-[4px] rounded-[6px] border border-[#E5E5E5] px-[8px] text-[#999] text-[12px]'>
+            Sort
+          </div>
+          <div className='flex h-[24px] items-center gap-[4px] rounded-[6px] border border-[#E5E5E5] px-[8px] text-[#999] text-[12px]'>
+            Filter
+          </div>
+        </div>
+      </div>
+
+      <div className='flex-1 overflow-hidden'>
+        <table className='w-full table-fixed border-separate border-spacing-0 text-[13px]'>
+          <colgroup>
+            <col style={{ width: 40 }} />
+            {MOCK_KB_COLUMNS.map((col) => (
+              <col key={col} />
+            ))}
+          </colgroup>
+          <thead>
+            <tr>
+              <th className='border-[#E5E5E5] border-r border-b bg-[#FAFAFA] px-[4px] py-[7px] text-center align-middle'>
+                <div className='flex items-center justify-center'>
+                  <div className='h-[13px] w-[13px] rounded-[2px] border border-[#D4D4D4]' />
+                </div>
+              </th>
+              {MOCK_KB_COLUMNS.map((col) => (
+                <th
+                  key={col}
+                  className='border-[#E5E5E5] border-r border-b bg-[#FAFAFA] px-[8px] py-[7px] text-left align-middle'
+                >
+                  <span className='font-base text-[#999] text-[13px]'>{col}</span>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {MOCK_KB_DATA.slice(0, revealedRows).map((row, i) => {
+              const status = KB_STATUS_STYLES[row[4]] ?? KB_STATUS_STYLES.enabled
+              const DocIcon = getKBFileIcon(row[0])
+              return (
+                <motion.tr
+                  key={i}
+                  initial={{ opacity: 0, y: 4 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.2, ease: 'easeOut' }}
+                >
+                  <td className='border-[#E5E5E5] border-r border-b px-[4px] py-[7px] text-center align-middle'>
+                    <span className='text-[#999] text-[11px] tabular-nums'>{i + 1}</span>
+                  </td>
+                  <td className='border-[#E5E5E5] border-r border-b px-[8px] py-[7px] align-middle'>
+                    <span className='flex items-center gap-[8px] text-[#1C1C1C] text-[13px]'>
+                      <DocIcon className='h-[14px] w-[14px] shrink-0' />
+                      <span className='truncate'>{row[0]}</span>
+                    </span>
+                  </td>
+                  {row.slice(1, 4).map((cell, j) => (
+                    <td
+                      key={j}
+                      className='border-[#E5E5E5] border-r border-b px-[8px] py-[7px] align-middle'
+                    >
+                      <span className='text-[#999] text-[13px]'>{cell}</span>
+                    </td>
+                  ))}
+                  <td className='border-[#E5E5E5] border-r border-b px-[8px] py-[7px] align-middle'>
+                    <span
+                      className='inline-flex items-center rounded-full px-[8px] py-[2px] font-medium text-[11px]'
+                      style={{ backgroundColor: status.bg, color: status.text }}
+                    >
+                      {status.label}
+                    </span>
+                  </td>
+                </motion.tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+const MOCK_LOG_COLORS = [
+  '#7C3AED',
+  '#2563EB',
+  '#059669',
+  '#DC2626',
+  '#D97706',
+  '#7C3AED',
+  '#0891B2',
+]
+
+const MOCK_LOG_DATA = [
+  ['Email Bot', 'Mar 17, 2:14 PM', 'success', '$0.003', 'API', '1.2s'],
+  ['Lead Scorer', 'Mar 17, 2:10 PM', 'success', '$0.008', 'Schedule', '3.4s'],
+  ['Support Bot', 'Mar 17, 1:55 PM', 'error', '$0.002', 'Webhook', '0.8s'],
+  ['Onboarding', 'Mar 17, 1:42 PM', 'success', '$0.005', 'Manual', '2.1s'],
+  ['Pipeline', 'Mar 17, 1:30 PM', 'success', '$0.012', 'API', '4.6s'],
+  ['Email Bot', 'Mar 17, 1:15 PM', 'success', '$0.003', 'Schedule', '1.1s'],
+  ['Intake', 'Mar 17, 12:58 PM', 'success', '$0.006', 'Webhook', '2.8s'],
+] as const
+
+const LOG_STATUS_STYLES: Record<string, { bg: string; text: string; label: string }> = {
+  success: { bg: '#DCFCE7', text: '#166534', label: 'Success' },
+  error: { bg: '#FEE2E2', text: '#991B1B', label: 'Error' },
+}
+
+function MockFullLogs({ revealedRows }: { revealedRows: number }) {
+  const [showSidebar, setShowSidebar] = useState(false)
+
+  useEffect(() => {
+    if (revealedRows < MOCK_LOG_DATA.length) return
+    const timer = setTimeout(() => setShowSidebar(true), 400)
+    return () => clearTimeout(timer)
+  }, [revealedRows])
+
+  const selectedRow = 0
+
+  return (
+    <div className='relative flex h-full'>
+      <div className='flex min-w-0 flex-1 flex-col'>
+        <div className='flex h-[44px] shrink-0 items-center border-[#E5E5E5] border-b px-[24px]'>
+          <div className='flex items-center gap-[6px]'>
+            <Library className='h-[14px] w-[14px] text-[#999]' />
+            <span className='font-medium text-[#1C1C1C] text-[13px]'>Logs</span>
+          </div>
+        </div>
+
+        <div className='flex-1 overflow-hidden'>
+          <table className='w-full table-fixed text-[13px]'>
+            <colgroup>
+              {['Workflow', 'Date', 'Status', 'Cost', 'Trigger', 'Duration'].map((col) => (
+                <col key={col} />
+              ))}
+            </colgroup>
+            <thead className='shadow-[inset_0_-1px_0_#E5E5E5]'>
+              <tr>
+                {['Workflow', 'Date', 'Status', 'Cost', 'Trigger', 'Duration'].map((col) => (
+                  <th key={col} className='h-10 px-[24px] py-[10px] text-left align-middle'>
+                    <span className='font-base text-[#999] text-[13px]'>{col}</span>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {MOCK_LOG_DATA.slice(0, revealedRows).map((row, i) => {
+                const statusStyle = LOG_STATUS_STYLES[row[2]] ?? LOG_STATUS_STYLES.success
+                const isSelected = showSidebar && i === selectedRow
+                return (
+                  <motion.tr
+                    key={i}
+                    initial={{ opacity: 0, y: 4 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.2, ease: 'easeOut' }}
+                    className={isSelected ? 'bg-[#F5F5F5]' : 'hover:bg-[#FAFAFA]'}
+                  >
+                    <td className='px-[24px] py-[10px] align-middle'>
+                      <span className='flex items-center gap-[12px] font-medium text-[#1C1C1C] text-[14px]'>
+                        <div
+                          className='h-[10px] w-[10px] shrink-0 rounded-[3px] border-[1.5px]'
+                          style={{
+                            backgroundColor: MOCK_LOG_COLORS[i],
+                            borderColor: `${MOCK_LOG_COLORS[i]}60`,
+                            backgroundClip: 'padding-box',
+                          }}
+                        />
+                        <span className='truncate'>{row[0]}</span>
+                      </span>
+                    </td>
+                    <td className='px-[24px] py-[10px] align-middle'>
+                      <span className='font-medium text-[#999] text-[14px]'>{row[1]}</span>
+                    </td>
+                    <td className='px-[24px] py-[10px] align-middle'>
+                      <span
+                        className='inline-flex items-center rounded-full px-[8px] py-[2px] font-medium text-[11px]'
+                        style={{ backgroundColor: statusStyle.bg, color: statusStyle.text }}
+                      >
+                        {statusStyle.label}
+                      </span>
+                    </td>
+                    <td className='px-[24px] py-[10px] align-middle'>
+                      <span className='font-medium text-[#999] text-[14px]'>{row[3]}</span>
+                    </td>
+                    <td className='px-[24px] py-[10px] align-middle'>
+                      <span className='rounded-[4px] bg-[#F5F5F5] px-[6px] py-[2px] text-[#666] text-[11px]'>
+                        {row[4]}
+                      </span>
+                    </td>
+                    <td className='px-[24px] py-[10px] align-middle'>
+                      <span className='font-medium text-[#999] text-[14px]'>{row[5]}</span>
+                    </td>
+                  </motion.tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <motion.div
+        className='absolute top-0 right-0 bottom-0 z-10 border-[#E5E5E5] border-l bg-white'
+        initial={{ x: '100%' }}
+        animate={{ x: showSidebar ? 0 : '100%' }}
+        transition={{ duration: 0.25, ease: [0.4, 0, 0.2, 1] }}
+        style={{ width: '45%' }}
+      >
+        <MockLogDetailsSidebar />
+      </motion.div>
+    </div>
+  )
+}
+
+function MockLogDetailsSidebar() {
+  return (
+    <div className='flex h-full flex-col px-[14px] pt-[12px]'>
+      <div className='flex items-center justify-between'>
+        <span className='font-medium text-[#1C1C1C] text-[14px]'>Log Details</span>
+        <div className='flex items-center gap-[1px]'>
+          <div className='flex h-[24px] w-[24px] items-center justify-center rounded-[4px] text-[#999] hover:bg-[#F5F5F5]'>
+            <ChevronDown className='h-[14px] w-[14px] rotate-180' />
+          </div>
+          <div className='flex h-[24px] w-[24px] items-center justify-center rounded-[4px] text-[#999] hover:bg-[#F5F5F5]'>
+            <ChevronDown className='h-[14px] w-[14px]' />
+          </div>
+        </div>
+      </div>
+
+      <div className='mt-[20px] flex flex-col gap-[10px]'>
+        <div className='flex items-center gap-[16px] px-[1px]'>
+          <div className='flex w-[120px] shrink-0 flex-col gap-[8px]'>
+            <span className='font-medium text-[#999] text-[12px]'>Timestamp</span>
+            <div className='flex items-center gap-[6px]'>
+              <span className='font-medium text-[#666] text-[13px]'>Mar 17</span>
+              <span className='font-medium text-[#666] text-[13px]'>2:14 PM</span>
+            </div>
+          </div>
+          <div className='flex min-w-0 flex-1 flex-col gap-[8px]'>
+            <span className='font-medium text-[#999] text-[12px]'>Workflow</span>
+            <div className='flex items-center gap-[8px]'>
+              <div
+                className='h-[10px] w-[10px] shrink-0 rounded-[3px] border-[1.5px]'
+                style={{
+                  backgroundColor: '#7C3AED',
+                  borderColor: '#7C3AED60',
+                  backgroundClip: 'padding-box',
+                }}
+              />
+              <span className='truncate font-medium text-[#666] text-[13px]'>Email Bot</span>
+            </div>
+          </div>
+        </div>
+
+        <div className='flex flex-col'>
+          <div className='flex h-[42px] items-center justify-between border-[#E5E5E5] border-b px-[8px]'>
+            <span className='font-medium text-[#999] text-[12px]'>Level</span>
+            <span className='inline-flex items-center rounded-full bg-[#DCFCE7] px-[8px] py-[2px] font-medium text-[#166534] text-[11px]'>
+              Success
+            </span>
+          </div>
+          <div className='flex h-[42px] items-center justify-between border-[#E5E5E5] border-b px-[8px]'>
+            <span className='font-medium text-[#999] text-[12px]'>Trigger</span>
+            <span className='rounded-[4px] bg-[#F5F5F5] px-[6px] py-[2px] text-[#666] text-[11px]'>
+              API
+            </span>
+          </div>
+          <div className='flex h-[42px] items-center justify-between px-[8px]'>
+            <span className='font-medium text-[#999] text-[12px]'>Duration</span>
+            <span className='font-medium text-[#666] text-[13px]'>1.2s</span>
+          </div>
+        </div>
+
+        <div className='flex flex-col gap-[6px] rounded-[6px] border border-[#E5E5E5] bg-[#FAFAFA] px-[10px] py-[8px]'>
+          <span className='font-medium text-[#999] text-[12px]'>Workflow Output</span>
+          <div className='rounded-[6px] bg-[#F0F0F0] p-[10px] font-mono text-[#555] text-[11px] leading-[1.5]'>
+            {'{\n  "result": "processed",\n  "emails": 3,\n  "status": "complete"\n}'}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function MockFullTable({ revealedRows }: { revealedRows: number }) {
+  return (
+    <div className='flex h-full flex-col'>
+      <div className='flex h-[44px] shrink-0 items-center border-[#E5E5E5] border-b px-[24px]'>
+        <div className='flex items-center gap-[6px]'>
+          <Table className='h-[14px] w-[14px] text-[#999]' />
+          <span className='text-[#999] text-[13px]'>Tables</span>
+          <span className='text-[#D4D4D4] text-[13px]'>/</span>
+          <span className='font-medium text-[#1C1C1C] text-[13px]'>Leads</span>
+        </div>
+      </div>
+
+      <div className='flex h-[36px] shrink-0 items-center border-[#E5E5E5] border-b px-[24px]'>
+        <div className='flex items-center gap-[6px]'>
+          <div className='flex h-[24px] items-center gap-[4px] rounded-[6px] border border-[#E5E5E5] px-[8px] text-[#999] text-[12px]'>
+            Sort
+          </div>
+          <div className='flex h-[24px] items-center gap-[4px] rounded-[6px] border border-[#E5E5E5] px-[8px] text-[#999] text-[12px]'>
+            Filter
+          </div>
+        </div>
+      </div>
+
+      <div className='flex-1 overflow-hidden'>
+        <table className='w-full table-fixed border-separate border-spacing-0 text-[13px]'>
+          <colgroup>
+            <col style={{ width: 40 }} />
+            {MOCK_TABLE_COLUMNS.map((col) => (
+              <col key={col} />
+            ))}
+          </colgroup>
+          <thead>
+            <tr>
+              <th className='border-[#E5E5E5] border-r border-b bg-[#FAFAFA] px-[4px] py-[7px] text-center align-middle'>
+                <div className='flex items-center justify-center'>
+                  <div className='h-[13px] w-[13px] rounded-[2px] border border-[#D4D4D4]' />
+                </div>
+              </th>
+              {MOCK_TABLE_COLUMNS.map((col) => (
+                <th
+                  key={col}
+                  className='border-[#E5E5E5] border-r border-b bg-[#FAFAFA] px-[8px] py-[7px] text-left align-middle'
+                >
+                  <div className='flex items-center gap-[6px]'>
+                    <ColumnTypeIcon />
+                    <span className='font-medium text-[#1C1C1C] text-[13px]'>{col}</span>
+                    <ChevronDown className='ml-auto h-[7px] w-[9px] shrink-0 text-[#CCC]' />
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {MOCK_TABLE_DATA.slice(0, revealedRows).map((row, i) => (
+              <motion.tr
+                key={i}
+                initial={{ opacity: 0, y: 4 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.2, ease: 'easeOut' }}
+              >
+                <td className='border-[#E5E5E5] border-r border-b px-[4px] py-[7px] text-center align-middle'>
+                  <span className='text-[#999] text-[11px] tabular-nums'>{i + 1}</span>
+                </td>
+                {row.map((cell, j) => (
+                  <td
+                    key={j}
+                    className='border-[#E5E5E5] border-r border-b px-[8px] py-[7px] align-middle'
+                  >
+                    <span className='block truncate text-[#1C1C1C] text-[13px]'>{cell}</span>
+                  </td>
+                ))}
+              </motion.tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+function ColumnTypeIcon() {
+  return (
+    <svg
+      className='h-3 w-3 shrink-0 text-[#999]'
+      viewBox='0 0 16 16'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.5'
+    >
+      <path d='M3 4h10M3 8h7M3 12h5' strokeLinecap='round' />
+    </svg>
+  )
+}
+
+// ─── Default Preview (scattered icons for other tabs) ─────────────
 
 interface IconEntry {
   key: string
@@ -31,25 +1095,53 @@ const SCATTERED_ICONS: IconEntry[] = [
   { key: 'anthropic', icon: AnthropicIcon, label: 'Anthropic', top: '10%', left: '78%' },
   { key: 'gmail', icon: GmailIcon, label: 'Gmail', top: '24%', left: '90%' },
   { key: 'salesforce', icon: SalesforceIcon, label: 'Salesforce', top: '28%', left: '6%' },
-  { key: 'table', icon: Table, label: 'Tables', top: '22%', left: '30%' },
+  {
+    key: 'table',
+    icon: Table,
+    label: 'Tables',
+    top: '22%',
+    left: '30%',
+    color: 'var(--text-icon)',
+  },
   { key: 'xai', icon: xAIIcon, label: 'xAI', top: '26%', left: '66%' },
-  { key: 'hubspot', icon: HubspotIcon, label: 'HubSpot', top: '55%', left: '4%', color: '#FF7A59' },
-  { key: 'database', icon: Database, label: 'Database', top: '74%', left: '68%' },
-  { key: 'file', icon: File, label: 'Files', top: '70%', left: '18%' },
+  {
+    key: 'hubspot',
+    icon: HubspotIcon,
+    label: 'HubSpot',
+    top: '55%',
+    left: '4%',
+    color: '#FF7A59',
+  },
+  {
+    key: 'database',
+    icon: Database,
+    label: 'Database',
+    top: '74%',
+    left: '68%',
+    color: 'var(--text-icon)',
+  },
+  { key: 'file', icon: File, label: 'Files', top: '70%', left: '18%', color: 'var(--text-icon)' },
   { key: 'gemini', icon: GeminiIcon, label: 'Gemini', top: '58%', left: '86%' },
-  { key: 'logs', icon: Library, label: 'Logs', top: '86%', left: '44%' },
+  {
+    key: 'logs',
+    icon: Library,
+    label: 'Logs',
+    top: '86%',
+    left: '44%',
+    color: 'var(--text-icon)',
+  },
   { key: 'groq', icon: GroqIcon, label: 'Groq', top: '90%', left: '82%' },
 ]
 
 const EXPLODE_STAGGER = 0.04
 const EXPLODE_BASE_DELAY = 0.1
 
-export function FeaturesPreview() {
+function DefaultPreview() {
   const containerRef = useRef<HTMLDivElement>(null)
   const inView = useInView(containerRef, { once: true, margin: '-80px' })
 
   return (
-    <div ref={containerRef} className='relative h-[560px] w-full overflow-hidden'>
+    <div ref={containerRef} className='relative h-[350px] w-full overflow-hidden md:h-[560px]'>
       <div
         aria-hidden='true'
         className='absolute inset-0'
diff --git a/apps/sim/app/(home)/components/features/features.tsx b/apps/sim/app/(home)/components/features/features.tsx
index 927e98c807..b22cbee92d 100644
--- a/apps/sim/app/(home)/components/features/features.tsx
+++ b/apps/sim/app/(home)/components/features/features.tsx
@@ -77,6 +77,7 @@ const FEATURE_TABS = [
   },
   {
     label: 'Knowledge Base',
+    mobileLabel: 'Knowledge',
     color: '#8B5CF6',
     title: 'Your context engine',
     description:
@@ -97,6 +98,7 @@ const FEATURE_TABS = [
   },
   {
     label: 'Logs',
+    hideOnMobile: true,
     color: '#FF6B35',
     title: 'Full visibility, every run',
     description:
@@ -150,7 +152,7 @@ function DotGrid({
   return (
     <div
       aria-hidden='true'
-      className={`shrink-0 bg-[#F6F6F6] p-[6px] ${borderLeft ? 'border-[#E9E9E9] border-l' : ''}`}
+      className={`h-full shrink-0 bg-[#F6F6F6] p-[6px] ${borderLeft ? 'border-[#E9E9E9] border-l' : ''}`}
       style={{
         width: width ? `${width}px` : undefined,
         display: 'grid',
@@ -192,8 +194,11 @@ export default function Features() {
         />
       </div>
 
-      <div className='relative z-10 pt-[100px]'>
-        <div ref={sectionRef} className='flex flex-col items-start gap-[20px] px-[80px]'>
+      <div className='relative z-10 pt-[60px] lg:pt-[100px]'>
+        <div
+          ref={sectionRef}
+          className='flex flex-col items-start gap-[20px] px-[24px] lg:px-[80px]'
+        >
           <Badge
             variant='blue'
             size='md'
@@ -211,7 +216,7 @@ export default function Features() {
           </Badge>
           <h2
             id='features-heading'
-            className='max-w-[900px] font-[430] font-season text-[#1C1C1C] text-[40px] leading-[110%] tracking-[-0.02em]'
+            className='max-w-[900px] font-[430] font-season text-[#1C1C1C] text-[28px] leading-[110%] tracking-[-0.02em] md:text-[40px]'
           >
             {HEADING_LETTERS.map((char, i) => (
               <ScrollLetter key={i} scrollYProgress={scrollYProgress} charIndex={i}>
@@ -225,18 +230,25 @@ export default function Features() {
           </h2>
         </div>
 
-        <div className='relative mt-[73px] pb-[80px]'>
+        <div className='relative mt-[40px] pb-[40px] lg:mt-[73px] lg:pb-[80px]'>
           <div
             aria-hidden='true'
-            className='absolute top-0 bottom-0 left-[80px] z-20 w-px bg-[#E9E9E9]'
+            className='absolute top-0 bottom-0 left-[80px] z-20 hidden w-px bg-[#E9E9E9] lg:block'
           />
           <div
             aria-hidden='true'
-            className='absolute top-0 right-[80px] bottom-0 z-20 w-px bg-[#E9E9E9]'
+            className='absolute top-0 right-[80px] bottom-0 z-20 hidden w-px bg-[#E9E9E9] lg:block'
           />
 
-          <div className='flex h-[68px] overflow-hidden border border-[#E9E9E9]'>
-            <DotGrid cols={10} rows={8} width={80} />
+          <div className='flex h-[68px] border border-[#E9E9E9] lg:overflow-hidden'>
+            <div className='h-full shrink-0'>
+              <div className='h-full lg:hidden'>
+                <DotGrid cols={3} rows={8} width={24} />
+              </div>
+              <div className='hidden h-full lg:block'>
+                <DotGrid cols={10} rows={8} width={80} />
+              </div>
+            </div>
 
             <div role='tablist' aria-label='Feature categories' className='flex flex-1'>
               {FEATURE_TABS.map((tab, index) => (
@@ -246,10 +258,17 @@ export default function Features() {
                   role='tab'
                   aria-selected={index === activeTab}
                   onClick={() => setActiveTab(index)}
-                  className='relative flex h-full flex-1 items-center justify-center border-[#E9E9E9] border-l font-medium font-season text-[#212121] text-[14px] uppercase'
+                  className={`relative h-full flex-1 items-center justify-center whitespace-nowrap px-[12px] font-medium font-season text-[#212121] text-[12px] uppercase lg:px-0 lg:text-[14px]${tab.hideOnMobile ? ' hidden lg:flex' : ' flex'}${index > 0 ? ' border-[#E9E9E9] border-l' : ''}`}
                   style={{ backgroundColor: index === activeTab ? '#FDFDFD' : '#F6F6F6' }}
                 >
-                  {tab.label}
+                  {tab.mobileLabel ? (
+                    <>
+                      <span className='lg:hidden'>{tab.mobileLabel}</span>
+                      <span className='hidden lg:inline'>{tab.label}</span>
+                    </>
+                  ) : (
+                    tab.label
+                  )}
                   {index === activeTab && (
                     <div className='absolute right-0 bottom-0 left-0 flex h-[6px]'>
                       {tab.segments.map(([opacity, width], i) => (
@@ -269,16 +288,23 @@ export default function Features() {
               ))}
             </div>
 
-            <DotGrid cols={10} rows={8} width={80} borderLeft />
+            <div className='h-full shrink-0'>
+              <div className='h-full lg:hidden'>
+                <DotGrid cols={3} rows={8} width={24} />
+              </div>
+              <div className='hidden h-full lg:block'>
+                <DotGrid cols={10} rows={8} width={80} />
+              </div>
+            </div>
           </div>
 
-          <div className='mt-[60px] grid grid-cols-[1fr_2.8fr] gap-[60px] px-[120px]'>
-            <div className='flex h-[560px] flex-col items-start justify-between pt-[20px]'>
+          <div className='mt-[32px] flex flex-col gap-[24px] px-[24px] lg:mt-[60px] lg:grid lg:grid-cols-[1fr_2.8fr] lg:gap-[60px] lg:px-[120px]'>
+            <div className='flex flex-col items-start justify-between gap-[24px] pt-[20px] lg:h-[560px] lg:gap-0'>
               <div className='flex flex-col items-start gap-[16px]'>
-                <h3 className='font-[430] font-season text-[#1C1C1C] text-[28px] leading-[120%] tracking-[-0.02em]'>
+                <h3 className='font-[430] font-season text-[#1C1C1C] text-[24px] leading-[120%] tracking-[-0.02em] lg:text-[28px]'>
                   {FEATURE_TABS[activeTab].title}
                 </h3>
-                <p className='font-[430] font-season text-[#1C1C1C]/50 text-[18px] leading-[150%] tracking-[0.02em]'>
+                <p className='font-[430] font-season text-[#1C1C1C]/50 text-[16px] leading-[150%] tracking-[0.02em] lg:text-[18px]'>
                   {FEATURE_TABS[activeTab].description}
                 </p>
               </div>
@@ -307,10 +333,10 @@ export default function Features() {
               </Link>
             </div>
 
-            <FeaturesPreview />
+            <FeaturesPreview activeTab={activeTab} />
           </div>
 
-          <div aria-hidden='true' className='mt-[60px] h-px bg-[#E9E9E9]' />
+          <div aria-hidden='true' className='mt-[60px] hidden h-px bg-[#E9E9E9] lg:block' />
         </div>
       </div>
     </section>
diff --git a/apps/sim/app/(home)/components/footer/footer-cta.tsx b/apps/sim/app/(home)/components/footer/footer-cta.tsx
new file mode 100644
index 0000000000..c01276e2b2
--- /dev/null
+++ b/apps/sim/app/(home)/components/footer/footer-cta.tsx
@@ -0,0 +1,100 @@
+'use client'
+
+import { useCallback, useRef, useState } from 'react'
+import { ArrowUp } from 'lucide-react'
+import Link from 'next/link'
+import { useLandingSubmit } from '@/app/(home)/components/landing-preview/components/landing-preview-panel/landing-preview-panel'
+import { useAnimatedPlaceholder } from '@/app/workspace/[workspaceId]/home/hooks/use-animated-placeholder'
+
+const MAX_HEIGHT = 120
+
+const CTA_BUTTON =
+  'inline-flex items-center h-[32px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px]'
+
+export function FooterCTA() {
+  const landingSubmit = useLandingSubmit()
+  const [inputValue, setInputValue] = useState('')
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const animatedPlaceholder = useAnimatedPlaceholder()
+
+  const isEmpty = inputValue.trim().length === 0
+
+  const handleSubmit = useCallback(() => {
+    if (isEmpty) return
+    landingSubmit(inputValue)
+  }, [isEmpty, inputValue, landingSubmit])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        handleSubmit()
+      }
+    },
+    [handleSubmit]
+  )
+
+  const handleInput = useCallback((e: React.FormEvent<HTMLTextAreaElement>) => {
+    const target = e.target as HTMLTextAreaElement
+    target.style.height = 'auto'
+    target.style.height = `${Math.min(target.scrollHeight, MAX_HEIGHT)}px`
+  }, [])
+
+  return (
+    <div className='flex flex-col items-center px-4 pt-[120px] pb-[100px] sm:px-8 md:px-[80px]'>
+      <h2 className='text-center font-[430] font-season text-[#1C1C1C] text-[28px] leading-[100%] tracking-[-0.02em] sm:text-[32px] md:text-[36px]'>
+        What should we get done?
+      </h2>
+
+      <div className='mt-8 w-full max-w-[42rem]'>
+        <div
+          className='cursor-text rounded-[20px] border border-[#E5E5E5] bg-white px-[10px] py-[8px] shadow-sm'
+          onClick={() => textareaRef.current?.focus()}
+        >
+          <textarea
+            ref={textareaRef}
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onInput={handleInput}
+            placeholder={animatedPlaceholder}
+            rows={2}
+            className='m-0 box-border min-h-[48px] w-full resize-none border-0 bg-transparent px-[4px] py-[4px] font-body text-[#1C1C1C] text-[15px] leading-[24px] tracking-[-0.015em] outline-none placeholder:font-[380] placeholder:text-[#999] focus-visible:ring-0'
+            style={{ caretColor: '#1C1C1C', maxHeight: `${MAX_HEIGHT}px` }}
+          />
+          <div className='flex items-center justify-end'>
+            <button
+              type='button'
+              onClick={handleSubmit}
+              disabled={isEmpty}
+              className='flex h-[28px] w-[28px] items-center justify-center rounded-full border-0 p-0 transition-colors'
+              style={{
+                background: isEmpty ? '#C0C0C0' : '#1C1C1C',
+                cursor: isEmpty ? 'not-allowed' : 'pointer',
+              }}
+            >
+              <ArrowUp size={16} strokeWidth={2.25} color='#FFFFFF' />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className='mt-8 flex gap-[8px]'>
+        <a
+          href='https://docs.sim.ai'
+          target='_blank'
+          rel='noopener noreferrer'
+          className={`${CTA_BUTTON} border-[#D4D4D4] text-[#1C1C1C] transition-colors hover:bg-[#E8E8E8]`}
+        >
+          Docs
+        </a>
+        <Link
+          href='/signup'
+          className={`${CTA_BUTTON} gap-[8px] border-[#1C1C1C] bg-[#1C1C1C] text-white transition-colors hover:border-[#333] hover:bg-[#333]`}
+        >
+          Get started
+        </Link>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(home)/components/footer/footer.tsx b/apps/sim/app/(home)/components/footer/footer.tsx
index 156f312945..adde492497 100644
--- a/apps/sim/app/(home)/components/footer/footer.tsx
+++ b/apps/sim/app/(home)/components/footer/footer.tsx
@@ -1,188 +1,165 @@
 import Image from 'next/image'
 import Link from 'next/link'
-import { FOOTER_BLOCKS, FOOTER_TOOLS } from '@/app/(landing)/components/footer/consts'
+import { FooterCTA } from '@/app/(home)/components/footer/footer-cta'
 
 const LINK_CLASS = 'text-[14px] text-[#999] transition-colors hover:text-[#ECECEC]'
 
-interface FooterLink {
+interface FooterItem {
   label: string
   href: string
   external?: boolean
 }
 
-const FOOTER_LINKS: FooterLink[] = [
-  { label: 'Docs', href: 'https://docs.sim.ai', external: true },
+const PRODUCT_LINKS: FooterItem[] = [
   { label: 'Pricing', href: '#pricing' },
   { label: 'Enterprise', href: 'https://form.typeform.com/to/jqCO12pF', external: true },
-  { label: 'Sim Studio', href: '/studio' },
-  { label: 'Changelog', href: '/changelog' },
+  { label: 'Self Hosting', href: 'https://docs.sim.ai/self-hosting', external: true },
+  { label: 'MCP', href: 'https://docs.sim.ai/mcp', external: true },
   { label: 'Status', href: 'https://status.sim.ai', external: true },
-  { label: 'Careers', href: 'https://jobs.ashbyhq.com/sim', external: true },
-  { label: 'SOC2', href: 'https://trust.delve.co/sim-studio', external: true },
-  { label: 'Privacy Policy', href: '/privacy', external: true },
-  { label: 'Terms of Service', href: '/terms', external: true },
 ]
 
-export default function Footer() {
+const RESOURCES_LINKS: FooterItem[] = [
+  { label: 'Blog', href: '/blog' },
+  { label: 'Docs', href: 'https://docs.sim.ai', external: true },
+  { label: 'Careers', href: 'https://jobs.ashbyhq.com/sim', external: true },
+  { label: 'Changelog', href: '/changelog' },
+]
+
+const BLOCK_LINKS: FooterItem[] = [
+  { label: 'Agent', href: 'https://docs.sim.ai/blocks/agent', external: true },
+  { label: 'Router', href: 'https://docs.sim.ai/blocks/router', external: true },
+  { label: 'Function', href: 'https://docs.sim.ai/blocks/function', external: true },
+  { label: 'Condition', href: 'https://docs.sim.ai/blocks/condition', external: true },
+  { label: 'API', href: 'https://docs.sim.ai/blocks/api', external: true },
+  { label: 'Workflow', href: 'https://docs.sim.ai/blocks/workflow', external: true },
+  { label: 'Parallel', href: 'https://docs.sim.ai/blocks/parallel', external: true },
+  { label: 'Guardrails', href: 'https://docs.sim.ai/blocks/guardrails', external: true },
+  { label: 'Evaluator', href: 'https://docs.sim.ai/blocks/evaluator', external: true },
+  { label: 'Loop', href: 'https://docs.sim.ai/blocks/loop', external: true },
+]
+
+const INTEGRATION_LINKS: FooterItem[] = [
+  { label: 'Confluence', href: 'https://docs.sim.ai/tools/confluence', external: true },
+  { label: 'Slack', href: 'https://docs.sim.ai/tools/slack', external: true },
+  { label: 'GitHub', href: 'https://docs.sim.ai/tools/github', external: true },
+  { label: 'Gmail', href: 'https://docs.sim.ai/tools/gmail', external: true },
+  { label: 'HubSpot', href: 'https://docs.sim.ai/tools/hubspot', external: true },
+  { label: 'Salesforce', href: 'https://docs.sim.ai/tools/salesforce', external: true },
+  { label: 'Notion', href: 'https://docs.sim.ai/tools/notion', external: true },
+  { label: 'Google Drive', href: 'https://docs.sim.ai/tools/google_drive', external: true },
+  { label: 'Google Sheets', href: 'https://docs.sim.ai/tools/google_sheets', external: true },
+  { label: 'Supabase', href: 'https://docs.sim.ai/tools/supabase', external: true },
+  { label: 'Stripe', href: 'https://docs.sim.ai/tools/stripe', external: true },
+  { label: 'Jira', href: 'https://docs.sim.ai/tools/jira', external: true },
+  { label: 'Linear', href: 'https://docs.sim.ai/tools/linear', external: true },
+  { label: 'Airtable', href: 'https://docs.sim.ai/tools/airtable', external: true },
+  { label: 'Firecrawl', href: 'https://docs.sim.ai/tools/firecrawl', external: true },
+  { label: 'Pinecone', href: 'https://docs.sim.ai/tools/pinecone', external: true },
+  { label: 'Discord', href: 'https://docs.sim.ai/tools/discord', external: true },
+  { label: 'Microsoft Teams', href: 'https://docs.sim.ai/tools/microsoft_teams', external: true },
+  { label: 'Outlook', href: 'https://docs.sim.ai/tools/outlook', external: true },
+  { label: 'Telegram', href: 'https://docs.sim.ai/tools/telegram', external: true },
+]
+
+const SOCIAL_LINKS: FooterItem[] = [
+  { label: 'X (Twitter)', href: 'https://x.com/simdotai', external: true },
+  { label: 'LinkedIn', href: 'https://www.linkedin.com/company/simstudioai/', external: true },
+  { label: 'Discord', href: 'https://discord.gg/Hr4UWYEcTT', external: true },
+  { label: 'GitHub', href: 'https://github.com/simstudioai/sim', external: true },
+]
+
+const LEGAL_LINKS: FooterItem[] = [
+  { label: 'Terms of Service', href: '/terms' },
+  { label: 'Privacy Policy', href: '/privacy' },
+]
+
+function FooterColumn({ title, items }: { title: string; items: FooterItem[] }) {
+  return (
+    <div>
+      <h3 className='mb-[16px] font-medium text-[#ECECEC] text-[14px]'>{title}</h3>
+      <div className='flex flex-col gap-[10px]'>
+        {items.map(({ label, href, external }) =>
+          external ? (
+            <a
+              key={label}
+              href={href}
+              target='_blank'
+              rel='noopener noreferrer'
+              className={LINK_CLASS}
+            >
+              {label}
+            </a>
+          ) : (
+            <Link key={label} href={href} className={LINK_CLASS}>
+              {label}
+            </Link>
+          )
+        )}
+      </div>
+    </div>
+  )
+}
+
+interface FooterProps {
+  hideCTA?: boolean
+}
+
+export default function Footer({ hideCTA }: FooterProps) {
   return (
     <footer
       role='contentinfo'
-      className='relative w-full overflow-hidden bg-[#1C1C1C] font-[430] font-season text-[14px]'
+      className={`bg-[#F6F6F6] pb-[40px] font-[430] font-season text-[14px]${hideCTA ? ' pt-[40px]' : ''}`}
     >
-      <div className='px-4 pt-[80px] pb-[40px] sm:px-8 sm:pb-[340px] md:px-[80px]'>
-        <nav aria-label='Footer navigation' className='flex justify-between'>
-          {/* Brand column */}
-          <div className='flex flex-col gap-[24px]'>
-            <Link href='/' aria-label='Sim home'>
-              <Image
-                src='/logo/sim-landing.svg'
-                alt='Sim'
-                width={71}
-                height={22}
-                className='h-[22px] w-auto'
-              />
-            </Link>
-          </div>
-
-          {/* Community column */}
-          <div>
-            <h3 className='mb-[16px] font-medium text-[#ECECEC] text-[14px]'>Community</h3>
-            <div className='flex flex-col gap-[12px]'>
-              <a
-                href='https://discord.gg/Hr4UWYEcTT'
-                target='_blank'
-                rel='noopener noreferrer'
-                className={LINK_CLASS}
-              >
-                Discord
-              </a>
-              <a
-                href='https://x.com/simdotai'
-                target='_blank'
-                rel='noopener noreferrer'
-                className={LINK_CLASS}
-              >
-                X (Twitter)
-              </a>
-              <a
-                href='https://www.linkedin.com/company/simstudioai/'
-                target='_blank'
-                rel='noopener noreferrer'
-                className={LINK_CLASS}
-              >
-                LinkedIn
-              </a>
-              <a
-                href='https://github.com/simstudioai/sim'
-                target='_blank'
-                rel='noopener noreferrer'
-                className={LINK_CLASS}
-              >
-                GitHub
-              </a>
+      {!hideCTA && <FooterCTA />}
+      <div className='px-4 sm:px-8 md:px-[80px]'>
+        <div className='relative overflow-hidden rounded-lg bg-[#1C1C1C] px-6 pt-[40px] pb-[32px] sm:px-10 sm:pt-[48px] sm:pb-[40px]'>
+          <nav
+            aria-label='Footer navigation'
+            className='relative z-[1] grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-3 lg:grid-cols-7'
+          >
+            <div className='col-span-2 flex flex-col gap-[24px] sm:col-span-1'>
+              <Link href='/' aria-label='Sim home'>
+                <Image
+                  src='/logo/sim-landing.svg'
+                  alt='Sim'
+                  width={85}
+                  height={26}
+                  className='h-[26.4px] w-auto'
+                />
+              </Link>
             </div>
-          </div>
 
-          {/* Links column */}
-          <div>
-            <h3 className='mb-[16px] font-medium text-[#ECECEC] text-[14px]'>More Sim</h3>
-            <div className='flex flex-col gap-[12px]'>
-              {FOOTER_LINKS.map(({ label, href, external }) =>
-                external ? (
-                  <a
-                    key={label}
-                    href={href}
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    className={LINK_CLASS}
-                  >
-                    {label}
-                  </a>
-                ) : (
-                  <Link key={label} href={href} className={LINK_CLASS}>
-                    {label}
-                  </Link>
-                )
-              )}
-            </div>
-          </div>
+            <FooterColumn title='Product' items={PRODUCT_LINKS} />
+            <FooterColumn title='Resources' items={RESOURCES_LINKS} />
+            <FooterColumn title='Blocks' items={BLOCK_LINKS} />
+            <FooterColumn title='Integrations' items={INTEGRATION_LINKS} />
+            <FooterColumn title='Socials' items={SOCIAL_LINKS} />
+            <FooterColumn title='Legal' items={LEGAL_LINKS} />
+          </nav>
 
-          {/* Blocks column */}
-          <div className='hidden sm:block'>
-            <h3 className='mb-[16px] font-medium text-[#ECECEC] text-[14px]'>Blocks</h3>
-            <div className='flex flex-col gap-[12px]'>
-              {FOOTER_BLOCKS.map((block) => (
-                <a
-                  key={block}
-                  href={`https://docs.sim.ai/blocks/${block.toLowerCase().replaceAll(' ', '-')}`}
-                  target='_blank'
-                  rel='noopener noreferrer'
-                  className={LINK_CLASS}
-                >
-                  {block}
-                </a>
-              ))}
-            </div>
-          </div>
-
-          {/* Tools columns */}
-          <div className='hidden sm:block'>
-            <h3 className='mb-[16px] font-medium text-[#ECECEC] text-[14px]'>Tools</h3>
-            <div className='flex gap-[80px]'>
-              {[0, 1, 2, 3].map((quarter) => {
-                const start = Math.ceil((FOOTER_TOOLS.length * quarter) / 4)
-                const end =
-                  quarter === 3
-                    ? FOOTER_TOOLS.length
-                    : Math.ceil((FOOTER_TOOLS.length * (quarter + 1)) / 4)
-                return (
-                  <div key={quarter} className='flex flex-col gap-[12px]'>
-                    {FOOTER_TOOLS.slice(start, end).map((tool) => (
-                      <a
-                        key={tool}
-                        href={`https://docs.sim.ai/tools/${tool.toLowerCase().replace(/\s+/g, '_')}`}
-                        target='_blank'
-                        rel='noopener noreferrer'
-                        className={`whitespace-nowrap ${LINK_CLASS}`}
-                      >
-                        {tool}
-                      </a>
-                    ))}
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        </nav>
-      </div>
-
-      {/* Large SIM wordmark — half cut off */}
-      <div className='-translate-x-1/2 pointer-events-none absolute bottom-[-240px] left-1/2 hidden sm:block'>
-        <svg
-          xmlns='http://www.w3.org/2000/svg'
-          width='1128'
-          height='550'
-          viewBox='0 0 1128 550'
-          fill='none'
-        >
-          <path
-            d='M3 420.942H77.9115C77.9115 441.473 85.4027 457.843 100.385 470.051C115.367 481.704 135.621 487.53 161.147 487.53C188.892 487.53 210.255 482.258 225.238 471.715C240.22 460.617 247.711 445.913 247.711 427.601C247.711 414.283 243.549 403.185 235.226 394.307C227.457 385.428 213.03 378.215 191.943 372.666L120.361 356.019C84.2929 347.14 57.3802 333.545 39.6234 315.234C22.4215 296.922 13.8206 272.784 13.8206 242.819C13.8206 217.849 20.2019 196.208 32.9646 177.896C46.2822 159.584 64.3165 145.434 87.0674 135.446C110.373 125.458 137.008 120.464 166.973 120.464C196.938 120.464 222.74 125.735 244.382 136.278C266.578 146.821 283.779 161.526 295.987 180.393C308.75 199.259 315.409 221.733 315.964 247.813H241.052C240.497 226.727 233.561 210.357 220.243 198.705C206.926 187.052 188.337 181.225 164.476 181.225C140.06 181.225 121.194 186.497 107.876 197.04C94.5585 207.583 87.8997 222.01 87.8997 240.322C87.8997 267.512 107.876 286.101 147.829 296.09L219.411 313.569C253.815 321.337 279.618 334.1 296.82 351.857C314.022 369.059 322.622 392.642 322.622 422.607C322.622 448.132 315.686 470.606 301.814 490.027C287.941 508.894 268.797 523.599 244.382 534.142C220.521 544.13 192.221 549.124 159.482 549.124C111.76 549.124 73.7498 537.471 45.4499 514.165C17.15 490.86 3 459.785 3 420.942Z'
-            fill='#2A2A2A'
-          />
-          <path
-            d='M377.713 539.136V132.117C408.911 143.439 422.667 143.439 455.954 132.117V539.136H377.713ZM416.001 105.211C402.129 105.211 389.921 100.217 379.378 90.2291C369.39 79.686 364.395 67.4782 364.395 53.6057C364.395 39.1783 369.39 26.9705 379.378 16.9823C389.921 6.9941 402.129 2 416.001 2C430.428 2 442.636 6.9941 452.625 16.9823C462.613 26.9705 467.607 39.1783 467.607 53.6057C467.607 67.4782 462.613 79.686 452.625 90.2291C442.636 100.217 430.428 105.211 416.001 105.211Z'
-            fill='#2A2A2A'
-          />
-          <path
-            d='M593.961 539.136H515.72V132.117H585.637V200.792C593.961 178.041 610.053 158.752 632.249 143.769C655 128.232 682.467 120.464 714.651 120.464C750.72 120.464 780.685 130.174 804.545 149.596C822.01 163.812 835.016 181.446 843.562 202.5C851.434 181.446 864.509 163.812 882.786 149.596C907.757 130.174 938.554 120.464 975.177 120.464C1021.79 120.464 1058.41 134.059 1085.05 161.249C1111.68 188.439 1125 225.617 1125 272.784V539.136H1048.42V291.928C1048.42 259.744 1040.1 235.051 1023.45 217.849C1007.36 200.092 985.443 191.213 957.698 191.213C938.276 191.213 921.074 195.653 906.092 204.531C891.665 212.855 880.289 225.062 871.966 241.154C863.642 257.247 859.48 276.113 859.48 297.754V539.136H782.072V291.095C782.072 258.911 774.026 234.496 757.934 217.849C741.841 200.647 719.923 192.046 692.178 192.046C672.756 192.046 655.555 196.485 640.572 205.363C626.145 213.687 614.769 225.895 606.446 241.987C598.122 257.524 593.961 276.113 593.961 297.754V539.136Z'
-            fill='#2A2A2A'
-          />
-          <path
-            d='M166.973 121.105C196.396 121.105 221.761 126.201 243.088 136.367L244.101 136.855L244.106 136.858C265.86 147.191 282.776 161.528 294.876 179.865L295.448 180.741L295.455 180.753C308.032 199.345 314.656 221.475 315.306 247.171H241.675C240.996 226.243 234.012 209.899 220.666 198.222C207.196 186.435 188.437 180.583 164.476 180.583C139.977 180.583 120.949 185.871 107.478 196.536C93.9928 207.212 87.2578 221.832 87.2578 240.322C87.2579 254.096 92.3262 265.711 102.444 275.127C112.542 284.524 127.641 291.704 147.673 296.712L147.677 296.713L219.259 314.192L219.27 314.195C253.065 321.827 278.469 334.271 295.552 351.48L296.358 352.304L296.365 352.311C313.42 369.365 321.98 392.77 321.98 422.606C321.98 448.005 315.082 470.343 301.297 489.646C287.502 508.408 268.456 523.046 244.134 533.55C220.369 543.498 192.157 548.482 159.481 548.482C111.864 548.482 74.0124 536.855 45.8584 513.67C17.8723 490.623 3.80059 459.948 3.64551 421.584H77.2734C77.4285 441.995 84.9939 458.338 99.9795 470.549L99.9854 470.553L99.9912 470.558C115.12 482.324 135.527 488.172 161.146 488.172C188.96 488.172 210.474 482.889 225.607 472.24L225.613 472.236L225.619 472.231C240.761 461.015 248.353 446.12 248.353 427.601C248.352 414.145 244.145 402.89 235.709 393.884C227.81 384.857 213.226 377.603 192.106 372.045L192.098 372.043L192.089 372.04L120.507 355.394C84.5136 346.533 57.7326 332.983 40.0908 314.794H40.0918C23.0227 296.624 14.4629 272.654 14.4629 242.819C14.4629 217.969 20.8095 196.463 33.4834 178.273C46.7277 160.063 64.6681 145.981 87.3252 136.034L87.3242 136.033C110.536 126.086 137.081 121.106 166.973 121.105ZM975.177 121.105C1021.66 121.105 1058.1 134.658 1084.59 161.698C1111.08 188.741 1124.36 225.743 1124.36 272.784V538.494H1049.07V291.928C1049.07 259.636 1040.71 234.76 1023.92 217.402H1023.91C1007.68 199.5 985.584 190.571 957.697 190.571C938.177 190.571 920.862 195.034 905.771 203.975C891.228 212.365 879.77 224.668 871.396 240.859C863.017 257.059 858.838 276.03 858.838 297.754V538.494H782.714V291.096C782.714 258.811 774.641 234.209 758.395 217.402C742.16 200.053 720.062 191.404 692.178 191.404C673.265 191.404 656.422 195.592 641.666 203.985L640.251 204.808C625.711 213.196 614.254 225.497 605.88 241.684C597.496 257.333 593.318 276.031 593.318 297.754V538.494H516.361V132.759H584.995V200.792L586.24 201.013C594.51 178.408 610.505 159.221 632.607 144.302L632.61 144.3C655.238 128.847 682.574 121.105 714.651 121.105C750.599 121.105 780.413 130.781 804.14 150.094C821.52 164.241 834.461 181.787 842.967 202.741L843.587 204.268L844.163 202.725C851.992 181.786 864.994 164.248 883.181 150.103C908.021 130.782 938.673 121.106 975.177 121.105ZM455.312 538.494H378.354V133.027C393.534 138.491 404.652 141.251 416.05 141.251C427.46 141.251 439.095 138.485 455.312 133.009V538.494ZM416.001 2.6416C430.262 2.6416 442.306 7.57157 452.171 17.4365C462.036 27.3014 466.965 39.3445 466.965 53.6055C466.965 67.3043 462.04 79.3548 452.16 89.7842C442.297 99.6427 430.258 104.569 416.001 104.569C402.303 104.569 390.254 99.6452 379.825 89.7676C369.957 79.3421 365.037 67.2967 365.037 53.6055C365.037 39.3444 369.966 27.3005 379.831 17.4355C390.258 7.56247 402.307 2.64163 416.001 2.6416Z'
-            stroke='#3D3D3D'
-            strokeWidth='1.28396'
-          />
-        </svg>
+          {/* <svg
+            aria-hidden='true'
+            className='pointer-events-none absolute bottom-0 left-[-60px] hidden w-[85%] sm:block'
+            viewBox='0 0 1800 316'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+          >
+            <path
+              d='M18.3562 305V48.95A30.594 30.594 0 0 1 48.95 18.356H917.05A30.594 30.594 0 0 1 947.644 48.95V273H1768C1777.11 273 1784.5 280.387 1784.5 289.5C1784.5 298.613 1777.11 306 1768 306H96.8603C78.635 306 63.8604 310 63.8604 305H18.3562'
+              stroke='#2A2A2A'
+              strokeWidth='2'
+            />
+            <rect
+              x='58'
+              y='58'
+              width='849.288'
+              height='199.288'
+              rx='14'
+              stroke='#2A2A2A'
+              strokeWidth='2'
+            />
+          </svg> */}
+        </div>
       </div>
     </footer>
   )
diff --git a/apps/sim/app/(home)/components/hero/hero.tsx b/apps/sim/app/(home)/components/hero/hero.tsx
index 9d9e8e4d10..d6c75765ca 100644
--- a/apps/sim/app/(home)/components/hero/hero.tsx
+++ b/apps/sim/app/(home)/components/hero/hero.tsx
@@ -34,7 +34,7 @@ export default function Hero() {
     <section
       id='hero'
       aria-labelledby='hero-heading'
-      className='relative flex flex-col items-center overflow-hidden bg-[#1C1C1C] pt-[100px] pb-[12px]'
+      className='relative flex flex-col items-center overflow-hidden bg-[#1C1C1C] pt-[60px] pb-[12px] lg:pt-[100px]'
     >
       <p className='sr-only'>
         Sim is the open-source platform to build AI agents and run your agentic workforce. Connect
@@ -61,11 +61,11 @@ export default function Hero() {
       <div className='relative z-10 flex flex-col items-center gap-[12px]'>
         <h1
           id='hero-heading'
-          className='font-[430] font-season text-[72px] text-white leading-[100%] tracking-[-0.02em]'
+          className='font-[430] font-season text-[36px] text-white leading-[100%] tracking-[-0.02em] sm:text-[48px] lg:text-[72px]'
         >
           Build AI Agents
         </h1>
-        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[15px] leading-[125%] tracking-[0.02em] lg:text-[18px]'>
           Sim is the AI Workspace for Agent Builders.
         </p>
 
diff --git a/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx
index 3fc2866331..3c6a7e4703 100644
--- a/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx
+++ b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx
@@ -14,6 +14,7 @@ import {
   GmailIcon,
   GoogleCalendarIcon,
   GoogleSheetsIcon,
+  HubspotIcon,
   JiraIcon,
   LinearIcon,
   LinkedInIcon,
@@ -22,6 +23,7 @@ import {
   OpenAIIcon,
   RedditIcon,
   ReductoIcon,
+  SalesforceIcon,
   ScheduleIcon,
   SlackIcon,
   StartIcon,
@@ -57,11 +59,13 @@ const BLOCK_ICONS: Record<string, React.ComponentType<{ className?: string }>> =
   google_calendar: GoogleCalendarIcon,
   gmail: GmailIcon,
   google_sheets: GoogleSheetsIcon,
+  hubspot: HubspotIcon,
   linear: LinearIcon,
   firecrawl: FirecrawlIcon,
   reddit: RedditIcon,
   notion: NotionIcon,
   reducto: ReductoIcon,
+  salesforce: SalesforceIcon,
   textract: TextractIcon,
   linkedin: LinkedInIcon,
   mothership: Blimp,
diff --git a/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data.ts b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data.ts
index 205aa44d88..6f89683801 100644
--- a/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data.ts
+++ b/apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data.ts
@@ -112,10 +112,14 @@ const SELF_HEALING_CRM_WORKFLOW: PreviewWorkflow = {
     },
     {
       id: 'mothership-1',
-      name: 'Update Agent',
+      name: 'CRM Agent',
       type: 'mothership',
       bgColor: '#33C482',
       rows: [{ title: 'Prompt', value: 'Audit CRM records, fix...' }],
+      tools: [
+        { name: 'HubSpot', type: 'hubspot', bgColor: '#FF7A59' },
+        { name: 'Salesforce', type: 'salesforce', bgColor: '#E0E0E0' },
+      ],
       position: { x: 420, y: 180 },
       hideSourceHandle: true,
     },
diff --git a/apps/sim/app/(home)/components/landing-preview/landing-preview.tsx b/apps/sim/app/(home)/components/landing-preview/landing-preview.tsx
index 04695537e3..91ef0a2a4d 100644
--- a/apps/sim/app/(home)/components/landing-preview/landing-preview.tsx
+++ b/apps/sim/app/(home)/components/landing-preview/landing-preview.tsx
@@ -95,7 +95,7 @@ export function LandingPreview() {
           onSelectHome={handleSelectHome}
         />
       </motion.div>
-      <div className='flex min-w-0 flex-1 flex-col p-[8px] pl-0'>
+      <div className='flex min-w-0 flex-1 flex-col py-[8px] pr-[8px] pl-[8px] lg:pl-0'>
         <div className='flex flex-1 overflow-hidden rounded-[8px] border border-[#2c2c2c] bg-[#1b1b1b]'>
           <div
             className={
diff --git a/apps/sim/app/(home)/components/navbar/components/blog-dropdown.tsx b/apps/sim/app/(home)/components/navbar/components/blog-dropdown.tsx
new file mode 100644
index 0000000000..ed7f1fabbb
--- /dev/null
+++ b/apps/sim/app/(home)/components/navbar/components/blog-dropdown.tsx
@@ -0,0 +1,101 @@
+import Link from 'next/link'
+import { cn } from '@/lib/core/utils/cn'
+
+const FEATURED_POST = {
+  title: 'Build with Sim for Enterprise',
+  slug: 'enterprise',
+  image: '/blog/thumbnails/enterprise.webp',
+} as const
+
+const POSTS = [
+  { title: 'Introducing Sim v0.5', slug: 'v0-5', image: '/blog/thumbnails/v0-5.webp' },
+  { title: '$7M Series A', slug: 'series-a', image: '/blog/thumbnails/series-a.webp' },
+  {
+    title: 'Realtime Collaboration',
+    slug: 'multiplayer',
+    image: '/blog/thumbnails/multiplayer.webp',
+  },
+  { title: 'Inside the Executor', slug: 'executor', image: '/blog/thumbnails/executor.webp' },
+  { title: 'Inside Sim Copilot', slug: 'copilot', image: '/blog/thumbnails/copilot.webp' },
+] as const
+
+function BlogCard({
+  slug,
+  image,
+  title,
+  imageHeight,
+  titleSize = '12px',
+  className,
+}: {
+  slug: string
+  image: string
+  title: string
+  imageHeight: string
+  titleSize?: string
+  className?: string
+}) {
+  return (
+    <Link
+      href={`/blog/${slug}`}
+      className={cn(
+        'group/card flex flex-col overflow-hidden rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] transition-colors hover:border-[#3D3D3D] hover:bg-[#2A2A2A]',
+        className
+      )}
+      prefetch={false}
+    >
+      <div className='w-full overflow-hidden bg-[#141414]' style={{ height: imageHeight }}>
+        <img
+          src={image}
+          alt={title}
+          decoding='async'
+          className='h-full w-full object-cover transition-transform duration-200 group-hover/card:scale-[1.02]'
+        />
+      </div>
+      <div className='flex-shrink-0 px-[10px] py-[6px]'>
+        <span
+          className='font-[430] font-season text-[#cdcdcd] leading-[140%]'
+          style={{ fontSize: titleSize }}
+        >
+          {title}
+        </span>
+      </div>
+    </Link>
+  )
+}
+
+export function BlogDropdown() {
+  return (
+    <div className='w-[560px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] p-[16px] shadow-[0_16px_48px_rgba(0,0,0,0.4)]'>
+      <div className='grid grid-cols-3 gap-[8px]'>
+        <BlogCard
+          slug={FEATURED_POST.slug}
+          image={FEATURED_POST.image}
+          title={FEATURED_POST.title}
+          imageHeight='190px'
+          titleSize='13px'
+          className='col-span-2 row-span-2'
+        />
+
+        {POSTS.slice(0, 2).map((post) => (
+          <BlogCard
+            key={post.slug}
+            slug={post.slug}
+            image={post.image}
+            title={post.title}
+            imageHeight='72px'
+          />
+        ))}
+
+        {POSTS.slice(2).map((post) => (
+          <BlogCard
+            key={post.slug}
+            slug={post.slug}
+            image={post.image}
+            title={post.title}
+            imageHeight='72px'
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(home)/components/navbar/components/docs-dropdown.tsx b/apps/sim/app/(home)/components/navbar/components/docs-dropdown.tsx
new file mode 100644
index 0000000000..9d5daa4fa2
--- /dev/null
+++ b/apps/sim/app/(home)/components/navbar/components/docs-dropdown.tsx
@@ -0,0 +1,92 @@
+import { AgentIcon, GithubOutlineIcon, McpIcon } from '@/components/icons'
+
+const PREVIEW_CARDS = [
+  {
+    title: 'Introduction',
+    href: 'https://docs.sim.ai',
+    image: '/landing/docs-getting-started.svg',
+  },
+  {
+    title: 'Getting Started',
+    href: 'https://docs.sim.ai/getting-started',
+    image: '/landing/docs-intro.svg',
+  },
+] as const
+
+const RESOURCE_CARDS = [
+  {
+    title: 'Agent',
+    description: 'Build AI agents',
+    href: 'https://docs.sim.ai/blocks/agent',
+    icon: AgentIcon,
+  },
+  {
+    title: 'MCP',
+    description: 'Connect tools',
+    href: 'https://docs.sim.ai/mcp',
+    icon: McpIcon,
+  },
+  {
+    title: 'Self-hosting',
+    description: 'Host on your infra',
+    href: 'https://docs.sim.ai/self-hosting',
+    icon: GithubOutlineIcon,
+  },
+] as const
+
+export function DocsDropdown() {
+  return (
+    <div className='w-[480px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] p-[16px] shadow-[0_16px_48px_rgba(0,0,0,0.4)]'>
+      <div className='grid grid-cols-2 gap-[10px]'>
+        {PREVIEW_CARDS.map((card) => (
+          <a
+            key={card.title}
+            href={card.href}
+            target='_blank'
+            rel='noopener noreferrer'
+            className='group/card overflow-hidden rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] transition-colors hover:border-[#3D3D3D] hover:bg-[#2A2A2A]'
+          >
+            <div className='h-[120px] w-full overflow-hidden bg-[#141414]'>
+              <img
+                src={card.image}
+                alt={card.title}
+                decoding='async'
+                className='h-full w-full scale-[1.04] object-cover transition-transform duration-200 group-hover/card:scale-[1.06]'
+              />
+            </div>
+            <div className='px-[10px] py-[8px]'>
+              <span className='font-[430] font-season text-[#cdcdcd] text-[13px]'>
+                {card.title}
+              </span>
+            </div>
+          </a>
+        ))}
+      </div>
+
+      <div className='mt-[8px] grid grid-cols-3 gap-[8px]'>
+        {RESOURCE_CARDS.map((card) => {
+          const Icon = card.icon
+          return (
+            <a
+              key={card.title}
+              href={card.href}
+              target='_blank'
+              rel='noopener noreferrer'
+              className='flex flex-col gap-[4px] rounded-[5px] border border-[#2A2A2A] px-[10px] py-[8px] transition-colors hover:border-[#3D3D3D] hover:bg-[#232323]'
+            >
+              <div className='flex items-center gap-[6px]'>
+                <Icon className='h-[13px] w-[13px] flex-shrink-0 text-[#939393]' />
+                <span className='font-[430] font-season text-[#cdcdcd] text-[12px]'>
+                  {card.title}
+                </span>
+              </div>
+              <span className='font-season text-[#939393] text-[11px] leading-[130%]'>
+                {card.description}
+              </span>
+            </a>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/(home)/components/navbar/navbar.tsx b/apps/sim/app/(home)/components/navbar/navbar.tsx
index a411a65f78..17337b6e73 100644
--- a/apps/sim/app/(home)/components/navbar/navbar.tsx
+++ b/apps/sim/app/(home)/components/navbar/navbar.tsx
@@ -1,27 +1,33 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
-import { ChevronDown } from '@/components/emcn'
+import { GithubOutlineIcon } from '@/components/icons'
+import { cn } from '@/lib/core/utils/cn'
+import { BlogDropdown } from '@/app/(home)/components/navbar/components/blog-dropdown'
+import { DocsDropdown } from '@/app/(home)/components/navbar/components/docs-dropdown'
 import { GitHubStars } from '@/app/(home)/components/navbar/components/github-stars'
 import { getBrandConfig } from '@/ee/whitelabeling'
 
+type DropdownId = 'docs' | 'blog' | null
+
 interface NavLink {
   label: string
   href: string
   external?: boolean
   icon?: 'chevron'
+  dropdown?: 'docs' | 'blog'
 }
 
 const NAV_LINKS: NavLink[] = [
-  { label: 'Docs', href: 'https://docs.sim.ai', external: true },
-  { label: 'Pricing', href: '/pricing' },
-  { label: 'Careers', href: '/careers' },
+  { label: 'Docs', href: 'https://docs.sim.ai', external: true, icon: 'chevron', dropdown: 'docs' },
+  { label: 'Blog', href: '/blog', icon: 'chevron', dropdown: 'blog' },
+  { label: 'Pricing', href: '#pricing' },
   { label: 'Enterprise', href: 'https://form.typeform.com/to/jqCO12pF', external: true },
 ]
 
-/** Logo and nav edge: horizontal padding (px) for left/right symmetry. */
-const LOGO_CELL = 'flex items-center px-[20px]'
-
-/** Links: even spacing between items. */
+const LOGO_CELL = 'flex items-center pl-[20px] lg:pl-[80px] pr-[20px]'
 const LINK_CELL = 'flex items-center px-[14px]'
 
 interface NavbarProps {
@@ -30,15 +36,58 @@ interface NavbarProps {
 
 export default function Navbar({ logoOnly = false }: NavbarProps) {
   const brand = getBrandConfig()
+  const [activeDropdown, setActiveDropdown] = useState<DropdownId>(null)
+  const [hoveredLink, setHoveredLink] = useState<string | null>(null)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const openDropdown = useCallback((id: DropdownId) => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+    setActiveDropdown(id)
+  }, [])
+
+  const scheduleClose = useCallback(() => {
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current)
+    closeTimerRef.current = setTimeout(() => {
+      setActiveDropdown(null)
+      closeTimerRef.current = null
+    }, 100)
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current)
+    }
+  }, [])
+
+  useEffect(() => {
+    document.body.style.overflow = mobileMenuOpen ? 'hidden' : ''
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [mobileMenuOpen])
+
+  useEffect(() => {
+    const mq = window.matchMedia('(min-width: 1024px)')
+    const handler = () => {
+      if (mq.matches) setMobileMenuOpen(false)
+    }
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [])
+
+  const anyHighlighted = activeDropdown !== null || hoveredLink !== null
 
   return (
     <nav
       aria-label='Primary navigation'
-      className='flex h-[52px] border-[#2A2A2A] border-b-[1px] bg-[#1C1C1C] font-[430] font-season text-[#ECECEC] text-[14px]'
+      className='relative flex h-[52px] border-[#2A2A2A] border-b-[1px] bg-[#1C1C1C] font-[430] font-season text-[#ECECEC] text-[14px]'
       itemScope
       itemType='https://schema.org/SiteNavigationElement'
     >
-      {/* Logo */}
       <Link href='/' className={LOGO_CELL} aria-label={`${brand.name} home`} itemProp='url'>
         <span itemProp='name' className='sr-only'>
           {brand.name}
@@ -67,37 +116,93 @@ export default function Navbar({ logoOnly = false }: NavbarProps) {
 
       {!logoOnly && (
         <>
-          {/* Links */}
-          <ul className='mt-[0.75px] flex'>
-            {NAV_LINKS.map(({ label, href, external, icon }) => (
-              <li key={label} className='flex'>
-                {external ? (
-                  <a href={href} target='_blank' rel='noopener noreferrer' className={LINK_CELL}>
-                    {label}
-                  </a>
-                ) : (
-                  <Link
-                    href={href}
-                    className={icon ? `${LINK_CELL} gap-[8px]` : LINK_CELL}
-                    aria-label={label}
+          <ul className='mt-[0.75px] hidden lg:flex'>
+            {NAV_LINKS.map(({ label, href, external, icon, dropdown }) => {
+              const hasDropdown = !!dropdown
+              const isActive = hasDropdown && activeDropdown === dropdown
+              const isThisHovered = hoveredLink === label
+              const isHighlighted = isActive || isThisHovered
+              const isDimmed = anyHighlighted && !isHighlighted
+              const linkClass = cn(
+                icon ? `${LINK_CELL} gap-[8px]` : LINK_CELL,
+                'transition-colors duration-200',
+                isDimmed && 'text-[#F6F6F6]/60'
+              )
+              const chevron = icon === 'chevron' && <NavChevron open={isActive} />
+
+              if (hasDropdown) {
+                return (
+                  <li
+                    key={label}
+                    className='relative flex'
+                    onMouseEnter={() => openDropdown(dropdown)}
+                    onMouseLeave={scheduleClose}
                   >
-                    {label}
-                    {icon === 'chevron' && (
-                      <ChevronDown className='mt-[1.75px] h-[10px] w-[10px] flex-shrink-0 text-[#ECECEC]' />
-                    )}
-                  </Link>
-                )}
-              </li>
-            ))}
-            <li className='flex'>
+                    <button
+                      type='button'
+                      className={cn(linkClass, 'h-full cursor-pointer')}
+                      aria-expanded={isActive}
+                      aria-haspopup='true'
+                    >
+                      {label}
+                      {chevron}
+                    </button>
+
+                    <div
+                      className={cn(
+                        '-mt-[2px] absolute top-full left-0 z-50',
+                        isActive
+                          ? 'pointer-events-auto opacity-100'
+                          : 'pointer-events-none opacity-0'
+                      )}
+                      style={{
+                        transform: isActive ? 'translateY(0)' : 'translateY(-6px)',
+                        transition: 'opacity 200ms ease, transform 200ms ease',
+                      }}
+                    >
+                      {dropdown === 'docs' && <DocsDropdown />}
+                      {dropdown === 'blog' && <BlogDropdown />}
+                    </div>
+                  </li>
+                )
+              }
+
+              return (
+                <li
+                  key={label}
+                  className='flex'
+                  onMouseEnter={() => setHoveredLink(label)}
+                  onMouseLeave={() => setHoveredLink(null)}
+                >
+                  {external ? (
+                    <a href={href} target='_blank' rel='noopener noreferrer' className={linkClass}>
+                      {label}
+                      {chevron}
+                    </a>
+                  ) : (
+                    <Link href={href} className={linkClass} aria-label={label}>
+                      {label}
+                      {chevron}
+                    </Link>
+                  )}
+                </li>
+              )
+            })}
+            <li
+              className={cn(
+                'flex transition-opacity duration-200',
+                anyHighlighted && hoveredLink !== 'github' && 'opacity-60'
+              )}
+              onMouseEnter={() => setHoveredLink('github')}
+              onMouseLeave={() => setHoveredLink(null)}
+            >
               <GitHubStars />
             </li>
           </ul>
 
-          <div className='flex-1' />
+          <div className='hidden flex-1 lg:block' />
 
-          {/* CTAs */}
-          <div className='flex items-center gap-[8px] px-[20px]'>
+          <div className='hidden items-center gap-[8px] pr-[80px] pl-[20px] lg:flex'>
             <Link
               href='/login'
               className='inline-flex h-[30px] items-center rounded-[5px] border border-[#3d3d3d] px-[9px] text-[#ECECEC] text-[13.5px] transition-colors hover:bg-[#2A2A2A]'
@@ -113,8 +218,168 @@ export default function Navbar({ logoOnly = false }: NavbarProps) {
               Get started
             </Link>
           </div>
+
+          <div className='flex flex-1 items-center justify-end pr-[20px] lg:hidden'>
+            <button
+              type='button'
+              className='flex h-[32px] w-[32px] items-center justify-center rounded-[5px] transition-colors hover:bg-[#2A2A2A]'
+              onClick={() => setMobileMenuOpen((prev) => !prev)}
+              aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
+              aria-expanded={mobileMenuOpen}
+            >
+              <MobileMenuIcon open={mobileMenuOpen} />
+            </button>
+          </div>
+
+          <div
+            className={cn(
+              'fixed inset-x-0 top-[52px] bottom-0 z-50 flex flex-col overflow-y-auto bg-[#1C1C1C] font-[430] font-season text-[14px] transition-all duration-200 lg:hidden',
+              mobileMenuOpen ? 'visible opacity-100' : 'invisible opacity-0'
+            )}
+          >
+            <ul className='flex flex-col'>
+              {NAV_LINKS.map(({ label, href, external }) => (
+                <li key={label} className='border-[#2A2A2A] border-b'>
+                  {external ? (
+                    <a
+                      href={href}
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      className='flex items-center justify-between px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
+                      onClick={() => setMobileMenuOpen(false)}
+                    >
+                      {label}
+                      <ExternalArrowIcon />
+                    </a>
+                  ) : (
+                    <Link
+                      href={href}
+                      className='flex items-center px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
+                      onClick={() => setMobileMenuOpen(false)}
+                    >
+                      {label}
+                    </Link>
+                  )}
+                </li>
+              ))}
+              <li className='border-[#2A2A2A] border-b'>
+                <a
+                  href='https://github.com/simstudioai/sim'
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  className='flex items-center gap-[8px] px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  <GithubOutlineIcon className='h-[14px] w-[14px]' />
+                  GitHub
+                </a>
+              </li>
+            </ul>
+
+            <div className='mt-auto flex flex-col gap-[10px] p-[20px]'>
+              <Link
+                href='/login'
+                className='flex h-[32px] items-center justify-center rounded-[5px] border border-[#3d3d3d] text-[#ECECEC] text-[14px] transition-colors active:bg-[#2A2A2A]'
+                onClick={() => setMobileMenuOpen(false)}
+                aria-label='Log in'
+              >
+                Log in
+              </Link>
+              <Link
+                href='/signup'
+                className='flex h-[32px] items-center justify-center rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
+                onClick={() => setMobileMenuOpen(false)}
+                aria-label='Get started with Sim'
+              >
+                Get started
+              </Link>
+            </div>
+          </div>
         </>
       )}
     </nav>
   )
 }
+
+interface NavChevronProps {
+  open: boolean
+}
+
+/**
+ * Animated chevron matching the exact geometry of the emcn ChevronDown SVG.
+ * Each arm rotates around its midpoint so the center vertex travels up/down
+ * while the outer endpoints adjust — producing a Stripe-style morph.
+ */
+function NavChevron({ open }: NavChevronProps) {
+  return (
+    <svg width='9' height='6' viewBox='0 0 10 6' fill='none' className='mt-[1.5px] flex-shrink-0'>
+      <line
+        x1='1'
+        y1='1'
+        x2='5'
+        y2='5'
+        stroke='currentColor'
+        strokeWidth='1.33'
+        strokeLinecap='square'
+        style={{
+          transformOrigin: '3px 3px',
+          transform: open ? 'rotate(-90deg)' : 'rotate(0deg)',
+          transition: 'transform 250ms cubic-bezier(0.4, 0, 0.2, 1)',
+        }}
+      />
+      <line
+        x1='5'
+        y1='5'
+        x2='9'
+        y2='1'
+        stroke='currentColor'
+        strokeWidth='1.33'
+        strokeLinecap='square'
+        style={{
+          transformOrigin: '7px 3px',
+          transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
+          transition: 'transform 250ms cubic-bezier(0.4, 0, 0.2, 1)',
+        }}
+      />
+    </svg>
+  )
+}
+
+function MobileMenuIcon({ open }: { open: boolean }) {
+  if (open) {
+    return (
+      <svg width='14' height='14' viewBox='0 0 14 14' fill='none'>
+        <path
+          d='M1 1L13 13M13 1L1 13'
+          stroke='currentColor'
+          strokeWidth='1.5'
+          strokeLinecap='round'
+        />
+      </svg>
+    )
+  }
+  return (
+    <svg width='16' height='12' viewBox='0 0 16 12' fill='none'>
+      <path
+        d='M0 1H16M0 6H16M0 11H16'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+    </svg>
+  )
+}
+
+function ExternalArrowIcon() {
+  return (
+    <svg width='12' height='12' viewBox='0 0 12 12' fill='none' className='text-[#666]'>
+      <path
+        d='M3.5 2.5H9.5V8.5M9 3L3 9'
+        stroke='currentColor'
+        strokeWidth='1.2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/app/(home)/components/pricing/pricing.tsx b/apps/sim/app/(home)/components/pricing/pricing.tsx
index 25e34505fe..89272b58e8 100644
--- a/apps/sim/app/(home)/components/pricing/pricing.tsx
+++ b/apps/sim/app/(home)/components/pricing/pricing.tsx
@@ -174,7 +174,7 @@ function PricingCard({ tier }: PricingCardProps) {
 export default function Pricing() {
   return (
     <section id='pricing' aria-labelledby='pricing-heading' className='bg-[#F6F6F6]'>
-      <div className='px-4 pt-[100px] pb-[80px] sm:px-8 md:px-[80px]'>
+      <div className='px-4 pt-[60px] pb-[40px] sm:px-8 sm:pt-[80px] sm:pb-0 md:px-[80px] md:pt-[100px]'>
         <div className='flex flex-col items-start gap-3 sm:gap-4 md:gap-[20px]'>
           <Badge
             variant='blue'
@@ -193,7 +193,7 @@ export default function Pricing() {
           </h2>
         </div>
 
-        <div className='mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'>
+        <div className='mt-8 grid grid-cols-1 gap-4 sm:mt-10 sm:grid-cols-2 md:mt-12 lg:grid-cols-4'>
           {PRICING_TIERS.map((tier) => (
             <PricingCard key={tier.id} tier={tier} />
           ))}
diff --git a/apps/sim/app/(home)/components/templates/templates.tsx b/apps/sim/app/(home)/components/templates/templates.tsx
index 3625501407..f38d69aba5 100644
--- a/apps/sim/app/(home)/components/templates/templates.tsx
+++ b/apps/sim/app/(home)/components/templates/templates.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { type MotionValue, motion, useScroll, useTransform } from 'framer-motion'
+import { AnimatePresence, type MotionValue, motion, useScroll, useTransform } from 'framer-motion'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/navigation'
 import { Badge, ChevronDown } from '@/components/emcn'
@@ -349,8 +349,17 @@ export default function Templates() {
   const sectionRef = useRef<HTMLDivElement>(null)
   const [activeIndex, setActiveIndex] = useState(0)
   const [isPreparingTemplate, setIsPreparingTemplate] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
   const router = useRouter()
 
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 1023px)')
+    setIsMobile(mq.matches)
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [])
+
   const { scrollYProgress } = useScroll({
     target: sectionRef,
     offset: ['start 0.9', 'start 0.2'],
@@ -415,8 +424,8 @@ export default function Templates() {
 
       <div className='bg-[#1C1C1C]'>
         <DotGrid
-          className='border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
-          cols={120}
+          className='overflow-hidden border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
+          cols={160}
           rows={1}
           gap={6}
         />
@@ -440,7 +449,7 @@ export default function Templates() {
             </svg>
           </div>
 
-          <div className='px-[80px] pt-[100px]'>
+          <div className='px-[20px] pt-[60px] lg:px-[80px] lg:pt-[100px]'>
             <div className='flex flex-col items-start gap-[20px]'>
               <Badge
                 variant='blue'
@@ -457,84 +466,132 @@ export default function Templates() {
 
               <h2
                 id='templates-heading'
-                className='font-[430] font-season text-[40px] text-white leading-[100%] tracking-[-0.02em]'
+                className='font-[430] font-season text-[28px] text-white leading-[100%] tracking-[-0.02em] lg:text-[40px]'
               >
                 Ship your agent in minutes
               </h2>
 
-              <p className='font-[430] font-season text-[#F6F6F0]/50 text-[18px] leading-[150%] tracking-[0.02em]'>
-                Pre-built templates for every use case—pick one, swap <br />
+              <p className='font-[430] font-season text-[#F6F6F0]/50 text-[15px] leading-[150%] tracking-[0.02em] lg:text-[18px]'>
+                Pre-built templates for every use case—pick one, swap{' '}
+                <br className='hidden lg:inline' />
                 models and tools to fit your stack, and deploy.
               </p>
             </div>
           </div>
 
-          <div className='mt-[73px] flex border-[#2A2A2A] border-y'>
-            <DotGrid
-              className='w-[80px] shrink-0 overflow-hidden border-[#2A2A2A] border-r p-[6px]'
-              cols={6}
-              rows={55}
-              gap={6}
-            />
+          <div className='mt-[40px] flex border-[#2A2A2A] border-y lg:mt-[73px]'>
+            <div className='shrink-0'>
+              <div className='h-full lg:hidden'>
+                <DotGrid
+                  className='h-full w-[24px] overflow-hidden border-[#2A2A2A] border-r p-[4px]'
+                  cols={2}
+                  rows={55}
+                  gap={4}
+                />
+              </div>
+              <div className='hidden h-full lg:block'>
+                <DotGrid
+                  className='h-full w-[80px] overflow-hidden border-[#2A2A2A] border-r p-[6px]'
+                  cols={8}
+                  rows={55}
+                  gap={6}
+                />
+              </div>
+            </div>
 
-            <div className='flex min-w-0 flex-1'>
+            <div className='flex min-w-0 flex-1 flex-col lg:flex-row'>
               <div
                 role='tablist'
                 aria-label='Workflow templates'
-                className='flex w-[300px] shrink-0 flex-col border-[#2A2A2A] border-r'
+                className='flex w-full shrink-0 flex-col border-[#2A2A2A] lg:w-[300px] lg:border-r'
               >
                 {TEMPLATE_WORKFLOWS.map((workflow, index) => {
                   const isActive = index === activeIndex
                   return (
-                    <button
-                      key={workflow.id}
-                      id={`template-tab-${index}`}
-                      type='button'
-                      role='tab'
-                      aria-selected={isActive}
-                      aria-controls={TEMPLATES_PANEL_ID}
-                      onClick={() => setActiveIndex(index)}
-                      className={cn(
-                        'relative text-left',
-                        isActive
-                          ? 'z-10'
-                          : 'flex items-center px-[12px] py-[10px] shadow-[inset_0_-1px_0_0_#2A2A2A] last:shadow-none hover:bg-[#232323]/50'
-                      )}
-                    >
-                      {isActive ? (
-                        (() => {
-                          const depth = DEPTH_CONFIGS[workflow.id]
-                          return (
-                            <>
-                              <div
-                                className='absolute top-[-8px] bottom-0 left-0 w-2'
-                                style={{
-                                  clipPath: LEFT_WALL_CLIP,
-                                  backgroundColor: hexToRgba(depth.color, 0.63),
-                                }}
-                              />
-                              <div
-                                className='absolute right-[-8px] bottom-0 left-2 h-2'
-                                style={buildBottomWallStyle(depth)}
-                              />
-                              <div className='-translate-y-2 relative flex translate-x-2 items-center bg-[#242424] px-[12px] py-[10px] shadow-[inset_0_0_0_1.5px_#3E3E3E]'>
-                                <span className='flex-1 font-[430] font-season text-[16px] text-white'>
-                                  {workflow.name}
-                                </span>
-                                <ChevronDown
-                                  className='-rotate-90 h-[11px] w-[11px] shrink-0'
-                                  style={{ color: depth.color }}
+                    <div key={workflow.id}>
+                      <button
+                        id={`template-tab-${index}`}
+                        type='button'
+                        role='tab'
+                        aria-selected={isActive}
+                        aria-controls={TEMPLATES_PANEL_ID}
+                        onClick={() => setActiveIndex(index)}
+                        className={cn(
+                          'relative w-full text-left',
+                          isActive
+                            ? 'z-10'
+                            : cn(
+                                'flex items-center px-[12px] py-[10px] hover:bg-[#232323]/50',
+                                index < TEMPLATE_WORKFLOWS.length - 1 &&
+                                  'shadow-[inset_0_-1px_0_0_#2A2A2A]'
+                              )
+                        )}
+                      >
+                        {isActive ? (
+                          (() => {
+                            const depth = DEPTH_CONFIGS[workflow.id]
+                            return (
+                              <>
+                                <div
+                                  className='absolute top-[-8px] bottom-0 left-0 w-2'
+                                  style={{
+                                    clipPath: LEFT_WALL_CLIP,
+                                    backgroundColor: hexToRgba(depth.color, 0.63),
+                                  }}
                                 />
-                              </div>
-                            </>
-                          )
-                        })()
-                      ) : (
-                        <span className='font-[430] font-season text-[#F6F6F0]/50 text-[16px]'>
-                          {workflow.name}
-                        </span>
-                      )}
-                    </button>
+                                <div
+                                  className='absolute right-[-8px] bottom-0 left-2 h-2'
+                                  style={buildBottomWallStyle(depth)}
+                                />
+                                <div className='-translate-y-2 relative flex translate-x-2 items-center bg-[#242424] px-[12px] py-[10px] shadow-[inset_0_0_0_1.5px_#3E3E3E]'>
+                                  <span className='flex-1 font-[430] font-season text-[16px] text-white'>
+                                    {workflow.name}
+                                  </span>
+                                  <ChevronDown
+                                    className='-rotate-90 h-[11px] w-[11px] shrink-0'
+                                    style={{ color: depth.color }}
+                                  />
+                                </div>
+                              </>
+                            )
+                          })()
+                        ) : (
+                          <span className='font-[430] font-season text-[#F6F6F0]/50 text-[16px]'>
+                            {workflow.name}
+                          </span>
+                        )}
+                      </button>
+
+                      <AnimatePresence>
+                        {isActive && isMobile && (
+                          <motion.div
+                            initial={{ height: 0, opacity: 0 }}
+                            animate={{ height: 'auto', opacity: 1 }}
+                            exit={{ height: 0, opacity: 0 }}
+                            transition={{ duration: 0.25, ease: [0.4, 0, 0.2, 1] }}
+                            className='overflow-hidden'
+                          >
+                            <div className='aspect-[16/10] w-full border-[#2A2A2A] border-y bg-[#1b1b1b]'>
+                              <LandingPreviewWorkflow
+                                workflow={workflow}
+                                animate
+                                fitViewOptions={{ padding: 0.15, maxZoom: 1.3 }}
+                              />
+                            </div>
+                            <div className='p-[12px]'>
+                              <button
+                                type='button'
+                                onClick={handleUseTemplate}
+                                disabled={isPreparingTemplate}
+                                className='inline-flex h-[32px] w-full cursor-pointer items-center justify-center gap-[6px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] font-[430] font-season text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
+                              >
+                                {isPreparingTemplate ? 'Preparing...' : 'Use template'}
+                              </button>
+                            </div>
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </div>
                   )
                 })}
               </div>
@@ -582,12 +639,24 @@ export default function Templates() {
               </div>
             </div>
 
-            <DotGrid
-              className='w-[80px] shrink-0 overflow-hidden border-[#2A2A2A] border-l p-[6px]'
-              cols={6}
-              rows={55}
-              gap={6}
-            />
+            <div className='shrink-0'>
+              <div className='h-full lg:hidden'>
+                <DotGrid
+                  className='h-full w-[24px] overflow-hidden border-[#2A2A2A] border-l p-[4px]'
+                  cols={2}
+                  rows={55}
+                  gap={4}
+                />
+              </div>
+              <div className='hidden h-full lg:block'>
+                <DotGrid
+                  className='h-full w-[80px] overflow-hidden border-[#2A2A2A] border-l p-[6px]'
+                  cols={8}
+                  rows={55}
+                  gap={6}
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/apps/sim/app/(landing)/studio/[slug]/back-link.tsx b/apps/sim/app/(landing)/blog/[slug]/back-link.tsx
similarity index 94%
rename from apps/sim/app/(landing)/studio/[slug]/back-link.tsx
rename to apps/sim/app/(landing)/blog/[slug]/back-link.tsx
index c75dd93409..179223a0b8 100644
--- a/apps/sim/app/(landing)/studio/[slug]/back-link.tsx
+++ b/apps/sim/app/(landing)/blog/[slug]/back-link.tsx
@@ -9,7 +9,7 @@ export function BackLink() {
 
   return (
     <Link
-      href='/studio'
+      href='/blog'
       className='group flex items-center gap-1 text-[#999] text-sm hover:text-[#ECECEC]'
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
@@ -21,7 +21,7 @@ export function BackLink() {
           <ChevronLeft className='h-4 w-4' aria-hidden='true' />
         )}
       </span>
-      Back to Sim Studio
+      Back to Blog
     </Link>
   )
 }
diff --git a/apps/sim/app/(landing)/studio/[slug]/page.tsx b/apps/sim/app/(landing)/blog/[slug]/page.tsx
similarity index 95%
rename from apps/sim/app/(landing)/studio/[slug]/page.tsx
rename to apps/sim/app/(landing)/blog/[slug]/page.tsx
index 8b49912ea0..d5ed263e2b 100644
--- a/apps/sim/app/(landing)/studio/[slug]/page.tsx
+++ b/apps/sim/app/(landing)/blog/[slug]/page.tsx
@@ -6,8 +6,8 @@ import { FAQ } from '@/lib/blog/faq'
 import { getAllPostMeta, getPostBySlug, getRelatedPosts } from '@/lib/blog/registry'
 import { buildArticleJsonLd, buildBreadcrumbJsonLd, buildPostMetadata } from '@/lib/blog/seo'
 import { getBaseUrl } from '@/lib/core/utils/urls'
-import { BackLink } from '@/app/(landing)/studio/[slug]/back-link'
-import { ShareButton } from '@/app/(landing)/studio/[slug]/share-button'
+import { BackLink } from '@/app/(landing)/blog/[slug]/back-link'
+import { ShareButton } from '@/app/(landing)/blog/[slug]/share-button'
 
 export async function generateStaticParams() {
   const posts = await getAllPostMeta()
@@ -95,7 +95,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                   </div>
                 ))}
               </div>
-              <ShareButton url={`${getBaseUrl()}/studio/${slug}`} title={post.title} />
+              <ShareButton url={`${getBaseUrl()}/blog/${slug}`} title={post.title} />
             </div>
           </div>
         </div>
@@ -134,7 +134,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
           <h2 className='mb-4 font-[500] text-[#ECECEC] text-[24px]'>Related posts</h2>
           <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3'>
             {related.map((p) => (
-              <Link key={p.slug} href={`/studio/${p.slug}`} className='group'>
+              <Link key={p.slug} href={`/blog/${p.slug}`} className='group'>
                 <div className='overflow-hidden rounded-lg border border-[#2A2A2A]'>
                   <Image
                     src={p.ogImage}
diff --git a/apps/sim/app/(landing)/studio/[slug]/share-button.tsx b/apps/sim/app/(landing)/blog/[slug]/share-button.tsx
similarity index 100%
rename from apps/sim/app/(landing)/studio/[slug]/share-button.tsx
rename to apps/sim/app/(landing)/blog/[slug]/share-button.tsx
diff --git a/apps/sim/app/(landing)/studio/authors/[id]/page.tsx b/apps/sim/app/(landing)/blog/authors/[id]/page.tsx
similarity index 95%
rename from apps/sim/app/(landing)/studio/authors/[id]/page.tsx
rename to apps/sim/app/(landing)/blog/authors/[id]/page.tsx
index 4b59111e5d..9cb330c396 100644
--- a/apps/sim/app/(landing)/studio/authors/[id]/page.tsx
+++ b/apps/sim/app/(landing)/blog/authors/[id]/page.tsx
@@ -31,7 +31,7 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
     '@context': 'https://schema.org',
     '@type': 'Person',
     name: author.name,
-    url: `https://sim.ai/studio/authors/${author.id}`,
+    url: `https://sim.ai/blog/authors/${author.id}`,
     sameAs: author.url ? [author.url] : [],
     image: author.avatarUrl,
   }
@@ -56,7 +56,7 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
       </div>
       <div className='grid grid-cols-1 gap-8 sm:grid-cols-2'>
         {posts.map((p) => (
-          <Link key={p.slug} href={`/studio/${p.slug}`} className='group'>
+          <Link key={p.slug} href={`/blog/${p.slug}`} className='group'>
             <div className='overflow-hidden rounded-lg border border-[#2A2A2A]'>
               <Image
                 src={p.ogImage}
diff --git a/apps/sim/app/(landing)/studio/layout.tsx b/apps/sim/app/(landing)/blog/layout.tsx
similarity index 100%
rename from apps/sim/app/(landing)/studio/layout.tsx
rename to apps/sim/app/(landing)/blog/layout.tsx
diff --git a/apps/sim/app/(landing)/studio/page.tsx b/apps/sim/app/(landing)/blog/page.tsx
similarity index 75%
rename from apps/sim/app/(landing)/studio/page.tsx
rename to apps/sim/app/(landing)/blog/page.tsx
index e05376cbd1..359464e320 100644
--- a/apps/sim/app/(landing)/studio/page.tsx
+++ b/apps/sim/app/(landing)/blog/page.tsx
@@ -1,16 +1,16 @@
 import type { Metadata } from 'next'
 import Link from 'next/link'
 import { getAllPostMeta } from '@/lib/blog/registry'
-import { PostGrid } from '@/app/(landing)/studio/post-grid'
+import { PostGrid } from '@/app/(landing)/blog/post-grid'
 
 export const metadata: Metadata = {
-  title: 'Studio',
+  title: 'Blog',
   description: 'Announcements, insights, and guides from the Sim team.',
 }
 
 export const revalidate = 3600
 
-export default async function StudioIndex({
+export default async function BlogIndex({
   searchParams,
 }: {
   searchParams: Promise<{ page?: string; tag?: string }>
@@ -36,11 +36,11 @@ export default async function StudioIndex({
   const posts = sorted.slice(start, start + perPage)
   // Tag filter chips are intentionally disabled for now.
   // const tags = await getAllTags()
-  const studioJsonLd = {
+  const blogJsonLd = {
     '@context': 'https://schema.org',
     '@type': 'Blog',
-    name: 'Sim Studio',
-    url: 'https://sim.ai/studio',
+    name: 'Sim Blog',
+    url: 'https://sim.ai/blog',
     description: 'Announcements, insights, and guides for building AI agent workflows.',
   }
 
@@ -48,10 +48,10 @@ export default async function StudioIndex({
     <main className='mx-auto max-w-[1200px] px-6 py-12 sm:px-8 md:px-12'>
       <script
         type='application/ld+json'
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(studioJsonLd) }}
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(blogJsonLd) }}
       />
       <h1 className='mb-3 font-[500] text-[#ECECEC] text-[40px] leading-tight sm:text-[56px]'>
-        Sim Studio
+        Blog
       </h1>
       <p className='mb-10 text-[#999] text-[18px]'>
         Announcements, insights, and guides for building AI agent workflows.
@@ -59,9 +59,9 @@ export default async function StudioIndex({
 
       {/* Tag filter chips hidden until we have more posts */}
       {/* <div className='mb-10 flex flex-wrap gap-3'>
-        <Link href='/studio' className={`rounded-full border px-3 py-1 text-sm ${!tag ? 'border-black bg-black text-white' : 'border-gray-300'}`}>All</Link>
+        <Link href='/blog' className={`rounded-full border px-3 py-1 text-sm ${!tag ? 'border-black bg-black text-white' : 'border-gray-300'}`}>All</Link>
         {tags.map((t) => (
-          <Link key={t.tag} href={`/studio?tag=${encodeURIComponent(t.tag)}`} className={`rounded-full border px-3 py-1 text-sm ${tag === t.tag ? 'border-black bg-black text-white' : 'border-gray-300'}`}>
+          <Link key={t.tag} href={`/blog?tag=${encodeURIComponent(t.tag)}`} className={`rounded-full border px-3 py-1 text-sm ${tag === t.tag ? 'border-black bg-black text-white' : 'border-gray-300'}`}>
             {t.tag} ({t.count})
           </Link>
         ))}
@@ -74,7 +74,7 @@ export default async function StudioIndex({
         <div className='mt-10 flex items-center justify-center gap-3'>
           {pageNum > 1 && (
             <Link
-              href={`/studio?page=${pageNum - 1}${tag ? `&tag=${encodeURIComponent(tag)}` : ''}`}
+              href={`/blog?page=${pageNum - 1}${tag ? `&tag=${encodeURIComponent(tag)}` : ''}`}
               className='rounded-[5px] border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
             >
               Previous
@@ -85,7 +85,7 @@ export default async function StudioIndex({
           </span>
           {pageNum < totalPages && (
             <Link
-              href={`/studio?page=${pageNum + 1}${tag ? `&tag=${encodeURIComponent(tag)}` : ''}`}
+              href={`/blog?page=${pageNum + 1}${tag ? `&tag=${encodeURIComponent(tag)}` : ''}`}
               className='rounded-[5px] border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
             >
               Next
diff --git a/apps/sim/app/(landing)/studio/post-grid.tsx b/apps/sim/app/(landing)/blog/post-grid.tsx
similarity index 97%
rename from apps/sim/app/(landing)/studio/post-grid.tsx
rename to apps/sim/app/(landing)/blog/post-grid.tsx
index bb90b7328c..918d6782f5 100644
--- a/apps/sim/app/(landing)/studio/post-grid.tsx
+++ b/apps/sim/app/(landing)/blog/post-grid.tsx
@@ -26,7 +26,7 @@ export function PostGrid({ posts }: { posts: Post[] }) {
   return (
     <div className='grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
       {posts.map((p, index) => (
-        <Link key={p.slug} href={`/studio/${p.slug}`} className='group flex flex-col'>
+        <Link key={p.slug} href={`/blog/${p.slug}`} className='group flex flex-col'>
           <div className='flex h-full flex-col overflow-hidden rounded-xl border border-[#2A2A2A] transition-colors duration-300 hover:border-[#3d3d3d]'>
             {/* Image container with fixed aspect ratio to prevent layout shift */}
             <div className='relative aspect-video w-full overflow-hidden'>
diff --git a/apps/sim/app/(landing)/studio/rss.xml/route.ts b/apps/sim/app/(landing)/blog/rss.xml/route.ts
similarity index 97%
rename from apps/sim/app/(landing)/studio/rss.xml/route.ts
rename to apps/sim/app/(landing)/blog/rss.xml/route.ts
index 348557c124..c57975aa00 100644
--- a/apps/sim/app/(landing)/studio/rss.xml/route.ts
+++ b/apps/sim/app/(landing)/blog/rss.xml/route.ts
@@ -11,7 +11,7 @@ export async function GET() {
   const xml = `<?xml version="1.0" encoding="UTF-8" ?>
 <rss version="2.0">
   <channel>
-    <title>Sim Studio</title>
+    <title>Sim Blog</title>
     <link>${site}</link>
     <description>Announcements, insights, and guides for AI agent workflows.</description>
     ${items
diff --git a/apps/sim/app/(landing)/studio/sitemap-images.xml/route.ts b/apps/sim/app/(landing)/blog/sitemap-images.xml/route.ts
similarity index 100%
rename from apps/sim/app/(landing)/studio/sitemap-images.xml/route.ts
rename to apps/sim/app/(landing)/blog/sitemap-images.xml/route.ts
diff --git a/apps/sim/app/(landing)/studio/tags/page.tsx b/apps/sim/app/(landing)/blog/tags/page.tsx
similarity index 91%
rename from apps/sim/app/(landing)/studio/tags/page.tsx
rename to apps/sim/app/(landing)/blog/tags/page.tsx
index 0f5066dc43..a36ca97fd0 100644
--- a/apps/sim/app/(landing)/studio/tags/page.tsx
+++ b/apps/sim/app/(landing)/blog/tags/page.tsx
@@ -13,7 +13,7 @@ export default async function TagsIndex() {
       <h1 className='mb-6 font-[500] text-[#ECECEC] text-[32px] leading-tight'>Browse by tag</h1>
       <div className='flex flex-wrap gap-3'>
         <Link
-          href='/studio'
+          href='/blog'
           className='rounded-full border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
         >
           All
@@ -21,7 +21,7 @@ export default async function TagsIndex() {
         {tags.map((t) => (
           <Link
             key={t.tag}
-            href={`/studio?tag=${encodeURIComponent(t.tag)}`}
+            href={`/blog?tag=${encodeURIComponent(t.tag)}`}
             className='rounded-full border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
           >
             {t.tag} ({t.count})
diff --git a/apps/sim/app/(landing)/components/footer/footer.tsx b/apps/sim/app/(landing)/components/footer/footer.tsx
index 9bc672c9bd..9ed8d03c84 100644
--- a/apps/sim/app/(landing)/components/footer/footer.tsx
+++ b/apps/sim/app/(landing)/components/footer/footer.tsx
@@ -57,10 +57,10 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                 Enterprise
               </Link>
               <Link
-                href='/studio'
+                href='/blog'
                 className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
               >
-                Sim Studio
+                Blog
               </Link>
               <Link
                 href='/changelog'
diff --git a/apps/sim/app/(landing)/components/legal-layout.tsx b/apps/sim/app/(landing)/components/legal-layout.tsx
index c0c8649986..2e115c0a28 100644
--- a/apps/sim/app/(landing)/components/legal-layout.tsx
+++ b/apps/sim/app/(landing)/components/legal-layout.tsx
@@ -23,7 +23,7 @@ export default function LegalLayout({ title, children }: LegalLayoutProps) {
         </div>
       </div>
 
-      {isHosted && <Footer />}
+      {isHosted && <Footer hideCTA />}
     </main>
   )
 }
diff --git a/apps/sim/app/_shell/providers/theme-provider.tsx b/apps/sim/app/_shell/providers/theme-provider.tsx
index b4ad531e59..43a6f0af2b 100644
--- a/apps/sim/app/_shell/providers/theme-provider.tsx
+++ b/apps/sim/app/_shell/providers/theme-provider.tsx
@@ -20,7 +20,7 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
     pathname.startsWith('/verify') ||
     pathname.startsWith('/changelog') ||
     pathname.startsWith('/chat') ||
-    pathname.startsWith('/studio') ||
+    pathname.startsWith('/blog') ||
     pathname.startsWith('/resume') ||
     pathname.startsWith('/form') ||
     pathname.startsWith('/oauth')
diff --git a/apps/sim/app/changelog/layout.tsx b/apps/sim/app/changelog/layout.tsx
index 2714b3a51f..e7d7153dfc 100644
--- a/apps/sim/app/changelog/layout.tsx
+++ b/apps/sim/app/changelog/layout.tsx
@@ -11,7 +11,7 @@ export default function ChangelogLayout({ children }: { children: React.ReactNod
         <Navbar />
       </header>
       {children}
-      <Footer />
+      <Footer hideCTA />
     </div>
   )
 }
diff --git a/apps/sim/app/llms.txt/route.ts b/apps/sim/app/llms.txt/route.ts
index e38d203c1b..d604ff443f 100644
--- a/apps/sim/app/llms.txt/route.ts
+++ b/apps/sim/app/llms.txt/route.ts
@@ -14,7 +14,7 @@ Sim lets teams create agents, workflows, knowledge bases, tables, and docs. Over
 - [Homepage](${baseUrl}): Product overview, features, and pricing
 - [Templates](${baseUrl}/templates): Pre-built workflow templates to get started quickly
 - [Changelog](${baseUrl}/changelog): Product updates and release notes
-- [Sim Studio Blog](${baseUrl}/studio): Announcements, insights, and guides
+- [Sim Blog](${baseUrl}/blog): Announcements, insights, and guides
 
 ## Documentation
 
diff --git a/apps/sim/app/not-found.tsx b/apps/sim/app/not-found.tsx
index 4715d5079f..90be7c5df3 100644
--- a/apps/sim/app/not-found.tsx
+++ b/apps/sim/app/not-found.tsx
@@ -1,28 +1,33 @@
-'use client'
-
-import { useRouter } from 'next/navigation'
+import Link from 'next/link'
 import AuthBackground from '@/app/(auth)/components/auth-background'
-import { BrandedButton } from '@/app/(auth)/components/branded-button'
 import Navbar from '@/app/(home)/components/navbar/navbar'
 
-export default function NotFound() {
-  const router = useRouter()
+const CTA_BASE =
+  'inline-flex items-center h-[32px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px]'
 
+export default function NotFound() {
   return (
     <AuthBackground className='dark font-[430] font-season'>
       <main className='relative flex min-h-full flex-col text-[#ECECEC]'>
         <header className='shrink-0 bg-[#1C1C1C]'>
           <Navbar />
         </header>
-        <div className='relative z-30 flex flex-1 flex-col items-center justify-center px-4 pb-24'>
-          <h1 className='font-[500] text-[48px] tracking-tight'>Page Not Found</h1>
-          <p className='mt-2 text-[#999] text-[16px]'>
-            The page you&apos;re looking for doesn&apos;t exist or has been moved.
-          </p>
-          <div className='mt-8 w-full max-w-[200px]'>
-            <BrandedButton onClick={() => router.push('/')} showArrow={false}>
-              Return to Home
-            </BrandedButton>
+        <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
+          <div className='flex flex-col items-center gap-[12px]'>
+            <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
+              Page Not Found
+            </h1>
+            <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+              The page you&apos;re looking for doesn&apos;t exist or has been moved.
+            </p>
+            <div className='mt-[12px] flex items-center gap-[8px]'>
+              <Link
+                href='/'
+                className={`${CTA_BASE} gap-[8px] border-[#FFFFFF] bg-[#FFFFFF] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]`}
+              >
+                Return to Home
+              </Link>
+            </div>
           </div>
         </div>
       </main>
diff --git a/apps/sim/app/sitemap.ts b/apps/sim/app/sitemap.ts
index 2c6da9db7d..3472ff961b 100644
--- a/apps/sim/app/sitemap.ts
+++ b/apps/sim/app/sitemap.ts
@@ -13,11 +13,11 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
       lastModified: now,
     },
     {
-      url: `${baseUrl}/studio`,
+      url: `${baseUrl}/blog`,
       lastModified: now,
     },
     {
-      url: `${baseUrl}/studio/tags`,
+      url: `${baseUrl}/blog/tags`,
       lastModified: now,
     },
     {
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 5cdb9c6a78..c48bec55ab 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
@@ -58,7 +58,7 @@ export function AgentGroup({
   }, [expanded])
 
   return (
-    <div className='flex flex-col gap-1.5'>
+    <div className='flex flex-col gap-[6px]'>
       {hasItems ? (
         <button
           type='button'
@@ -87,7 +87,7 @@ export function AgentGroup({
       {hasItems && mounted && (
         <div
           className={cn(
-            'flex flex-col gap-3 transition-opacity duration-300 ease-out',
+            'flex flex-col gap-[6px] transition-opacity duration-300 ease-out',
             expanded ? 'opacity-100' : 'opacity-0'
           )}
         >
@@ -98,14 +98,15 @@ export function AgentGroup({
                 toolName={item.data.toolName}
                 displayTitle={item.data.displayTitle}
                 status={item.data.status}
+                result={item.data.result}
               />
             ) : (
-              <p
+              <span
                 key={`text-${idx}`}
-                className='whitespace-pre-wrap pl-[24px] font-base text-[13px] text-[var(--text-secondary)]'
+                className='pl-[24px] font-base text-[13px] text-[var(--text-secondary)]'
               >
                 {item.content.trim()}
-              </p>
+              </span>
             )
           )}
         </div>
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 e4b2c68a24..2c683cd809 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
@@ -1,7 +1,29 @@
-import { Loader } from '@/components/emcn'
-import type { ToolCallStatus } from '../../../../types'
+'use client'
+
+import { useMemo } from 'react'
+import { PillsRing } from '@/components/emcn'
+import type { ToolCallResult, ToolCallStatus } from '../../../../types'
 import { getToolIcon } from '../../utils'
 
+/** Tools that render as cards with result data on success. */
+const CARD_TOOLS = new Set<string>([
+  'function_execute',
+  'search_online',
+  'scrape_page',
+  'get_page_contents',
+  'search_library_docs',
+  'superagent',
+  'run',
+  'plan',
+  'debug',
+  'edit',
+  'fast_edit',
+  'custom_tool',
+  'research',
+  'agent',
+  'job',
+])
+
 function CircleCheck({ className }: { className?: string }) {
   return (
     <svg
@@ -40,29 +62,100 @@ export function CircleStop({ className }: { className?: string }) {
   )
 }
 
-interface ToolCallItemProps {
+function StatusIcon({ status, toolName }: { status: ToolCallStatus; toolName: string }) {
+  if (status === 'executing') {
+    return <PillsRing className='h-[15px] w-[15px] text-[var(--text-tertiary)]' animate />
+  }
+  if (status === 'cancelled') {
+    return <CircleStop className='h-[15px] w-[15px] text-[var(--text-tertiary)]' />
+  }
+  const Icon = getToolIcon(toolName)
+  if (Icon) {
+    return <Icon className='h-[15px] w-[15px] text-[var(--text-tertiary)]' />
+  }
+  return <CircleCheck className='h-[15px] w-[15px] text-[var(--text-tertiary)]' />
+}
+
+function FlatToolLine({
+  toolName,
+  displayTitle,
+  status,
+}: {
   toolName: string
   displayTitle: string
   status: ToolCallStatus
-}
-
-export function ToolCallItem({ toolName, displayTitle, status }: ToolCallItemProps) {
-  const Icon = getToolIcon(toolName)
-
+}) {
   return (
     <div className='flex items-center gap-[8px] pl-[24px]'>
       <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
-        {status === 'executing' ? (
-          <Loader className='h-[15px] w-[15px] text-[var(--text-tertiary)]' animate />
-        ) : status === 'cancelled' ? (
-          <CircleStop className='h-[15px] w-[15px] text-[var(--text-tertiary)]' />
-        ) : Icon ? (
-          <Icon className='h-[15px] w-[15px] text-[var(--text-tertiary)]' />
-        ) : (
-          <CircleCheck className='h-[15px] w-[15px] text-[var(--text-tertiary)]' />
-        )}
+        <StatusIcon status={status} toolName={toolName} />
       </div>
       <span className='font-base text-[13px] text-[var(--text-secondary)]'>{displayTitle}</span>
     </div>
   )
 }
+
+function formatToolOutput(output: unknown): string {
+  if (output === null || output === undefined) return ''
+  if (typeof output === 'string') return output
+  try {
+    return JSON.stringify(output, null, 2)
+  } catch {
+    return String(output)
+  }
+}
+
+interface ToolCallItemProps {
+  toolName: string
+  displayTitle: string
+  status: ToolCallStatus
+  result?: ToolCallResult
+}
+
+export function ToolCallItem({ toolName, displayTitle, status, result }: ToolCallItemProps) {
+  const showCard =
+    CARD_TOOLS.has(toolName) &&
+    status === 'success' &&
+    result?.output !== undefined &&
+    result?.output !== null
+
+  if (showCard) {
+    return <ToolCallCard toolName={toolName} displayTitle={displayTitle} result={result!} />
+  }
+
+  return <FlatToolLine toolName={toolName} displayTitle={displayTitle} status={status} />
+}
+
+function ToolCallCard({
+  toolName,
+  displayTitle,
+  result,
+}: {
+  toolName: string
+  displayTitle: string
+  result: ToolCallResult
+}) {
+  const body = useMemo(() => formatToolOutput(result.output), [result.output])
+  const Icon = getToolIcon(toolName)
+  const ResolvedIcon = Icon ?? CircleCheck
+
+  return (
+    <div className='animate-stream-fade-in pl-[24px]'>
+      <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-3)]'>
+        <div className='flex items-center gap-[8px] px-[10px] py-[6px]'>
+          <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
+            <ResolvedIcon className='h-[15px] w-[15px] text-[var(--text-tertiary)]' />
+          </div>
+          <span className='font-base text-[13px] text-[var(--text-secondary)]'>{displayTitle}</span>
+        </div>
+        {body && (
+          <div className='border-[var(--border)] border-t px-[10px] py-[6px]'>
+            <pre className='max-h-[200px] overflow-y-auto whitespace-pre-wrap break-all font-mono text-[12px] text-[var(--text-body)] leading-[1.5]'>
+              {body}
+            </pre>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
index 082224f2cd..eb3db2357a 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
@@ -216,9 +216,9 @@ export function ChatContent({ content, isStreaming = false, onOptionSelect }: Ch
     return (
       <div className='space-y-3'>
         {parsed.segments.map((segment, i) => {
-          if (segment.type === 'text') {
+          if (segment.type === 'text' || segment.type === 'thinking') {
             return (
-              <div key={`text-${i}`} className={PROSE_CLASSES}>
+              <div key={`${segment.type}-${i}`} className={PROSE_CLASSES}>
                 <ReactMarkdown remarkPlugins={REMARK_PLUGINS} components={MARKDOWN_COMPONENTS}>
                   {segment.content}
                 </ReactMarkdown>
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 e20b5ed876..7a3d98df50 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
@@ -27,6 +27,7 @@ export interface CredentialTagData {
 
 export type ContentSegment =
   | { type: 'text'; content: string }
+  | { type: 'thinking'; content: string }
   | { type: 'options'; data: OptionsTagData }
   | { type: 'usage_upgrade'; data: UsageUpgradeTagData }
   | { type: 'credential'; data: CredentialTagData }
@@ -36,7 +37,7 @@ export interface ParsedSpecialContent {
   hasPendingTag: boolean
 }
 
-const SPECIAL_TAG_NAMES = ['options', 'usage_upgrade', 'credential'] as const
+const SPECIAL_TAG_NAMES = ['thinking', 'options', 'usage_upgrade', 'credential'] as const
 
 /**
  * Parses inline special tags (`<options>`, `<usage_upgrade>`) from streamed
@@ -103,11 +104,17 @@ export function parseSpecialTags(content: string, isStreaming: boolean): ParsedS
     }
 
     const body = content.slice(bodyStart, closeIdx)
-    try {
-      const data = JSON.parse(body)
-      segments.push({ type: nearestTagName as 'options' | 'usage_upgrade' | 'credential', data })
-    } catch {
-      /* malformed JSON — drop the tag silently */
+    if (nearestTagName === 'thinking') {
+      if (body.trim()) {
+        segments.push({ type: 'thinking', content: body })
+      }
+    } else {
+      try {
+        const data = JSON.parse(body)
+        segments.push({ type: nearestTagName as 'options' | 'usage_upgrade' | 'credential', data })
+      } catch {
+        /* malformed JSON — drop the tag silently */
+      }
     }
 
     cursor = closeIdx + closeTag.length
@@ -137,6 +144,8 @@ interface SpecialTagsProps {
  */
 export function SpecialTags({ segment, onOptionSelect }: SpecialTagsProps) {
   switch (segment.type) {
+    case 'thinking':
+      return null
     case 'options':
       return <OptionsDisplay data={segment.data} onSelect={onOptionSelect} />
     case 'usage_upgrade':
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 d4f7430478..c3503ad30a 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
@@ -3,7 +3,7 @@
 import type { ContentBlock, OptionItem, SubagentName, ToolCallData } from '../../types'
 import { SUBAGENT_LABELS } from '../../types'
 import type { AgentGroupItem } from './components'
-import { AgentGroup, ChatContent, CircleStop, Options } from './components'
+import { AgentGroup, ChatContent, CircleStop, Options, PendingTagIndicator } from './components'
 
 interface TextSegment {
   type: 'text'
@@ -49,6 +49,7 @@ function toToolData(tc: NonNullable<ContentBlock['toolCall']>): ToolCallData {
     toolName: tc.name,
     displayTitle: tc.displayTitle || formatToolName(tc.name),
     status: tc.status,
+    result: tc.result,
   }
 }
 
@@ -78,6 +79,15 @@ function parseBlocks(blocks: ContentBlock[]): MessageSegment[] {
 
     if (block.type === 'text') {
       if (!block.content?.trim()) continue
+      if (block.subagent && group && group.agentName === block.subagent) {
+        const lastItem = group.items[group.items.length - 1]
+        if (lastItem?.type === 'text') {
+          lastItem.content += block.content
+        } else {
+          group.items.push({ type: 'text', content: block.content })
+        }
+        continue
+      }
       if (group) {
         segments.push(group)
         group = null
@@ -177,6 +187,14 @@ function parseBlocks(blocks: ContentBlock[]): MessageSegment[] {
       continue
     }
 
+    if (block.type === 'subagent_end') {
+      if (group) {
+        segments.push(group)
+        group = null
+      }
+      continue
+    }
+
     if (block.type === 'stopped') {
       if (group) {
         segments.push(group)
@@ -214,6 +232,27 @@ export function MessageContent({
 
   if (segments.length === 0) return null
 
+  const lastSegment = segments[segments.length - 1]
+  const hasTrailingContent = lastSegment.type === 'text' || lastSegment.type === 'stopped'
+
+  let allLastGroupToolsDone = false
+  if (lastSegment.type === 'agent_group') {
+    const toolItems = lastSegment.items.filter((item) => item.type === 'tool')
+    allLastGroupToolsDone =
+      toolItems.length > 0 &&
+      toolItems.every(
+        (t) =>
+          t.type === 'tool' &&
+          (t.data.status === 'success' ||
+            t.data.status === 'error' ||
+            t.data.status === 'cancelled')
+      )
+  }
+
+  const hasSubagentEnded = blocks.some((b) => b.type === 'subagent_end')
+  const showTrailingThinking =
+    isStreaming && !hasTrailingContent && (hasSubagentEnded || allLastGroupToolsDone)
+
   return (
     <div className='space-y-[10px]'>
       {segments.map((segment, i) => {
@@ -270,6 +309,11 @@ export function MessageContent({
             )
         }
       })}
+      {showTrailingThinking && (
+        <div className='animate-stream-fade-in-delayed opacity-0'>
+          <PendingTagIndicator />
+        </div>
+      )}
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts
index b7dbdaef2e..94fad449be 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts
@@ -2,7 +2,6 @@ import type { ComponentType, SVGProps } from 'react'
 import {
   Asterisk,
   Blimp,
-  BubbleChatPreview,
   Bug,
   Calendar,
   ClipboardList,
@@ -23,6 +22,7 @@ import {
   Wrench,
 } from '@/components/emcn'
 import { Table as TableIcon } from '@/components/emcn/icons'
+import { AgentIcon } from '@/components/icons'
 import type { MothershipToolName, SubagentName } from '../../types'
 
 export type IconComponent = ComponentType<SVGProps<SVGSVGElement>>
@@ -53,7 +53,7 @@ const TOOL_ICONS: Record<MothershipToolName | SubagentName | 'mothership', IconC
   knowledge_base: Database,
   table: TableIcon,
   job: Calendar,
-  agent: BubbleChatPreview,
+  agent: AgentIcon,
   custom_tool: Wrench,
   research: Search,
   plan: ClipboardList,
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
index 70c28ad28b..56f8281dc3 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
@@ -59,7 +59,7 @@ export const MothershipView = memo(function MothershipView({
   return (
     <div
       className={cn(
-        'flex h-full flex-col overflow-hidden border-[var(--border)] transition-[width,min-width,border-width] duration-300 ease-out',
+        'relative z-10 flex h-full flex-col overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-300 ease-out',
         isCollapsed ? 'w-0 min-w-0 border-l-0' : 'w-[50%] min-w-[400px] border-l',
         className
       )}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
index b049c329a1..06bb5dd4cc 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
@@ -18,16 +18,16 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
   if (messageQueue.length === 0) return null
 
   return (
-    <div className='-mb-[12px] mx-[14px] overflow-hidden rounded-t-[16px] border border-[var(--border-1)] border-b-0 bg-[var(--surface-2)] pb-[12px] dark:bg-[var(--surface-3)]'>
+    <div className='-mb-[12px] mx-[14px] overflow-hidden rounded-t-[16px] border border-[var(--border-1)] border-b-0 bg-[var(--surface-3)] pb-[12px]'>
       <button
         type='button'
         onClick={() => setIsExpanded(!isExpanded)}
-        className='flex w-full items-center gap-[6px] px-[14px] py-[8px] transition-colors hover:bg-black/[0.03] dark:hover:bg-white/[0.03]'
+        className='flex w-full items-center gap-[6px] px-[14px] py-[8px] transition-colors hover:bg-[var(--surface-active)]'
       >
         {isExpanded ? (
-          <ChevronDown className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
+          <ChevronDown className='h-[14px] w-[14px] text-[var(--text-icon)]' />
         ) : (
-          <ChevronRight className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
+          <ChevronRight className='h-[14px] w-[14px] text-[var(--text-icon)]' />
         )}
         <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
           {messageQueue.length} Queued
@@ -39,7 +39,7 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
           {messageQueue.map((msg) => (
             <div
               key={msg.id}
-              className='flex items-center gap-[8px] px-[14px] py-[6px] transition-colors hover:bg-black/[0.03] dark:hover:bg-white/[0.03]'
+              className='flex items-center gap-[8px] px-[14px] py-[6px] transition-colors hover:bg-[var(--surface-active)]'
             >
               <div className='flex h-[16px] w-[16px] shrink-0 items-center justify-center'>
                 <div className='h-[10px] w-[10px] rounded-full border-[1.5px] border-[var(--text-tertiary)]/40' />
@@ -58,7 +58,7 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
                         e.stopPropagation()
                         onEdit(msg.id)
                       }}
-                      className='rounded-[6px] p-[5px] text-[var(--text-tertiary)] transition-colors hover:bg-black/[0.06] hover:text-[var(--text-primary)] dark:hover:bg-white/[0.06]'
+                      className='rounded-[6px] p-[5px] text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-active)] hover:text-[var(--text-primary)]'
                     >
                       <Pencil className='h-[13px] w-[13px]' />
                     </button>
@@ -76,7 +76,7 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
                         e.stopPropagation()
                         void onSendNow(msg.id)
                       }}
-                      className='rounded-[6px] p-[5px] text-[var(--text-tertiary)] transition-colors hover:bg-black/[0.06] hover:text-[var(--text-primary)] dark:hover:bg-white/[0.06]'
+                      className='rounded-[6px] p-[5px] text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-active)] hover:text-[var(--text-primary)]'
                     >
                       <ArrowUp className='h-[13px] w-[13px]' />
                     </button>
@@ -94,7 +94,7 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
                         e.stopPropagation()
                         onRemove(msg.id)
                       }}
-                      className='rounded-[6px] p-[5px] text-[var(--text-tertiary)] transition-colors hover:bg-black/[0.06] hover:text-[var(--text-primary)] dark:hover:bg-white/[0.06]'
+                      className='rounded-[6px] p-[5px] text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-active)] hover:text-[var(--text-primary)]'
                     >
                       <Trash2 className='h-[13px] w-[13px]' />
                     </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/consts.ts b/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/consts.ts
index 0f99b81fc2..fd7425794a 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/consts.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/consts.ts
@@ -11,7 +11,6 @@ import {
   Hammer,
   Integration,
   Layout,
-  Library,
   Mail,
   Pencil,
   Rocket,
@@ -199,7 +198,7 @@ export const TEMPLATES: TemplatePrompt[] = [
     tags: ['sales', 'content', 'enterprise'],
   },
   {
-    icon: Library,
+    icon: File,
     title: 'Competitive battle cards',
     prompt:
       'Create an agent that deep-researches each of my competitors using web search — their product features, pricing, positioning, strengths, and weaknesses — and generates a structured battle card document for each one that my sales team can reference during calls.',
@@ -830,7 +829,7 @@ export const TEMPLATES: TemplatePrompt[] = [
     tags: ['hr', 'automation', 'team'],
   },
   {
-    icon: Library,
+    icon: ClipboardList,
     title: 'Candidate screening assistant',
     prompt:
       'Create a knowledge base from my job descriptions and hiring criteria, then build a workflow that takes uploaded resumes, evaluates candidates against the requirements, scores them on experience, skills, and culture fit, and populates a comparison table with a summary and recommendation for each.',
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
index e5f97897de..c0057396e2 100644
--- 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
@@ -1,15 +1,14 @@
 'use client'
 
-import { useState } from 'react'
+import { type ComponentType, memo, type SVGProps } from 'react'
 import Image from 'next/image'
-import { ChevronDown } from '@/components/emcn/icons'
+import { AgentIcon, ScheduleIcon, StartIcon } from '@/components/icons'
 import type { Category, ModuleTag } from './consts'
-import { CATEGORY_META, MODULE_META, TEMPLATES } from './consts'
+import { CATEGORY_META, TEMPLATES } from './consts'
 
 const FEATURED_TEMPLATES = TEMPLATES.filter((t) => t.featured)
 const EXTRA_TEMPLATES = TEMPLATES.filter((t) => !t.featured)
 
-/** Group non-featured templates by category, preserving category order. */
 function getGroupedExtras() {
   const groups: { category: Category; label: string; templates: typeof TEMPLATES }[] = []
   const byCategory = new Map<Category, typeof TEMPLATES>()
@@ -38,72 +37,309 @@ function getGroupedExtras() {
 
 const GROUPED_EXTRAS = getGroupedExtras()
 
-function ModulePills({ modules }: { modules: ModuleTag[] }) {
+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 flex-wrap gap-[4px]'>
-      {modules.map((mod) => (
-        <span
-          key={mod}
-          className='rounded-full bg-[var(--surface-3)] px-[6px] py-[1px] text-[11px] text-[var(--text-secondary)]'
-        >
-          {MODULE_META[mod].label}
-        </span>
+    <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-[6px] 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-[6px] 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-[6px] 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-[6px] 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-[6px] 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-[6px] 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-[6px] py-[2.5px]'>
+            <span
+              className={`inline-block rounded-full px-[4px] 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-[4px] border-[var(--border-1)] border-b px-[10px] 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-[10px] py-[6px]'>
+        <p className='font-semibold text-[8px] text-[var(--text-body)]'>Meeting Notes</p>
+        <p className='mt-[4px] 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-[4px] 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-[4px] 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-[4px] border border-[var(--border-1)] bg-[var(--white)] dark:bg-[var(--surface-4)]'>
+      <div
+        className={`flex items-center gap-[4px] px-[5px] py-[3px] ${hasRows ? 'border-[var(--border-1)] border-b' : ''}`}
+      >
+        <div
+          className='flex h-[11px] w-[11px] shrink-0 items-center justify-center rounded-[3px]'
+          style={{ backgroundColor: color }}
+        >
+          <Icon className='h-[7px] w-[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-[2px]'>
+          <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) {
-  const [expanded, setExpanded] = useState(false)
-
   return (
-    <div className='flex flex-col gap-[24px]'>
-      {/* Featured grid */}
-      <div className='grid grid-cols-3 gap-[16px]'>
+    <div className='flex flex-col gap-[24px] lg:gap-[32px]'>
+      <div className='grid grid-cols-1 gap-[12px] md:grid-cols-2 md:gap-[16px] lg:grid-cols-3'>
         {FEATURED_TEMPLATES.map((template) => (
           <TemplateCard key={template.title} template={template} onSelect={onSelect} />
         ))}
       </div>
 
-      {/* Expand / collapse */}
-      <button
-        type='button'
-        onClick={() => setExpanded((prev) => !prev)}
-        aria-expanded={expanded}
-        className='flex items-center justify-center gap-[6px] text-[13px] text-[var(--text-secondary)] transition-colors hover:text-[var(--text-body)]'
-      >
-        {expanded ? (
-          <>
-            Show less <ChevronDown className='h-[14px] w-[14px] rotate-180' />
-          </>
-        ) : (
-          <>
-            More examples <ChevronDown className='h-[14px] w-[14px]' />
-          </>
-        )}
-      </button>
-
-      {/* Categorized extras */}
-      {expanded && (
-        <div className='flex flex-col gap-[32px]'>
-          {GROUPED_EXTRAS.map((group) => (
-            <div key={group.category} className='flex flex-col gap-[12px]'>
-              <h3 className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                {group.label}
-              </h3>
-              <div className='grid grid-cols-3 gap-[16px]'>
-                {group.templates.map((template) => (
-                  <TemplateCard key={template.title} template={template} onSelect={onSelect} />
-                ))}
-              </div>
-            </div>
-          ))}
+      {GROUPED_EXTRAS.map((group) => (
+        <div
+          key={group.category}
+          className='flex flex-col gap-[12px]'
+          style={{ contentVisibility: 'auto', containIntrinsicSize: 'auto 200px' }}
+        >
+          <h3 className='font-medium text-[13px] text-[var(--text-secondary)]'>{group.label}</h3>
+          <div className='grid grid-cols-1 gap-[12px] md:grid-cols-2 md:gap-[16px] lg:grid-cols-3'>
+            {group.templates.map((template) => (
+              <TemplateCard key={template.title} template={template} onSelect={onSelect} />
+            ))}
+          </div>
         </div>
-      )}
+      ))}
     </div>
   )
 }
@@ -113,7 +349,7 @@ interface TemplateCardProps {
   onSelect: (prompt: string) => void
 }
 
-function TemplateCard({ template, onSelect }: TemplateCardProps) {
+const TemplateCard = memo(function TemplateCard({ template, onSelect }: TemplateCardProps) {
   const Icon = template.icon
 
   return (
@@ -123,7 +359,7 @@ function TemplateCard({ template, onSelect }: TemplateCardProps) {
       aria-label={`Select template: ${template.title}`}
       className='group flex cursor-pointer flex-col text-left'
     >
-      <div className='overflow-hidden rounded-[10px] border border-[var(--border-1)]'>
+      <div className='overflow-hidden rounded-[8px] 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
@@ -131,22 +367,17 @@ function TemplateCard({ template, onSelect }: TemplateCardProps) {
               alt={template.title}
               fill
               unoptimized
-              className='object-cover transition-transform duration-300 group-hover:scale-105'
+              className='object-cover transition-transform duration-200 group-hover:scale-[1.02]'
             />
           ) : (
-            <div className='flex h-full w-full items-center justify-center bg-[var(--surface-3)] transition-colors group-hover:bg-[var(--surface-4)]'>
-              <Icon className='h-[32px] w-[32px] text-[var(--text-icon)] opacity-40' />
-            </div>
+            <TemplatePreview modules={template.modules} template={template} />
           )}
         </div>
-        <div className='flex flex-col gap-[4px] border-[var(--border-1)] border-t bg-[var(--white)] px-[10px] py-[6px] dark:bg-[var(--surface-4)]'>
-          <div className='flex items-center gap-[6px]'>
-            <Icon className='h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
-            <span className='font-base text-[14px] text-[var(--text-body)]'>{template.title}</span>
-          </div>
-          <ModulePills modules={template.modules} />
+        <div className='flex items-center gap-[6px] border-[var(--border-1)] border-t bg-[var(--white)] px-[12px] py-[8px] transition-colors group-hover:bg-[var(--surface-2)] dark:bg-[var(--surface-4)]'>
+          <Icon className='h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
+          <span className='text-[13px] text-[var(--text-body)]'>{template.title}</span>
         </div>
       </div>
     </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 2c36371c45..1c106b9064 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
@@ -84,7 +84,7 @@ import { useAnimatedPlaceholder } from '../../hooks'
 
 const TEXTAREA_BASE_CLASSES = cn(
   'm-0 box-border h-auto min-h-[24px] w-full resize-none',
-  'overflow-y-auto overflow-x-hidden break-words border-0 bg-transparent',
+  'overflow-y-auto overflow-x-hidden break-all border-0 bg-transparent',
   'px-[4px] py-[4px] font-body text-[15px] leading-[24px] tracking-[-0.015em]',
   'text-transparent caret-[var(--text-primary)] outline-none',
   'placeholder:font-[380] placeholder:text-[var(--text-subtle)]',
@@ -94,7 +94,7 @@ const TEXTAREA_BASE_CLASSES = cn(
 
 const OVERLAY_CLASSES = cn(
   'pointer-events-none absolute top-0 left-0 m-0 box-border h-auto w-full resize-none',
-  'overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-0 bg-transparent',
+  'overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-all border-0 bg-transparent',
   'px-[4px] py-[4px] font-body text-[15px] leading-[24px] tracking-[-0.015em]',
   'text-[var(--text-primary)] outline-none',
   '[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
index 53e5a36e51..b9a679bb26 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
@@ -6,7 +6,7 @@ import type { ChatMessageContext } from '@/app/workspace/[workspaceId]/home/type
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 const USER_MESSAGE_CLASSES =
-  'whitespace-pre-wrap font-[430] font-[family-name:var(--font-inter)] text-[15px] text-[var(--text-primary)] leading-[23px] tracking-[0] antialiased'
+  'whitespace-pre-wrap break-all font-[430] font-[family-name:var(--font-inter)] text-[15px] text-[var(--text-primary)] leading-[23px] tracking-[0] antialiased'
 
 interface UserMessageContentProps {
   content: string
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index 78097c32a6..8bc0dac39b 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -3,7 +3,6 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { useParams, useRouter } from 'next/navigation'
-import { Skeleton } from '@/components/emcn'
 import { PanelLeft } from '@/components/emcn/icons'
 import { getDocumentIcon } from '@/components/icons/document-icons'
 import { useSession } from '@/lib/auth/auth-client'
@@ -46,23 +45,6 @@ function FileAttachmentPill({ mediaType, filename }: FileAttachmentPillProps) {
   )
 }
 
-const SKELETON_LINE_COUNT = 4
-
-function ChatSkeleton({ children }: { children: React.ReactNode }) {
-  return (
-    <div className='flex h-full flex-col bg-[var(--bg)]'>
-      <div className='min-h-0 flex-1 overflow-hidden px-6 py-4'>
-        <div className='mx-auto max-w-[42rem] space-y-[10px] pt-3'>
-          {Array.from({ length: SKELETON_LINE_COUNT }).map((_, i) => (
-            <Skeleton key={i} className='h-[16px]' style={{ width: `${120 + (i % 4) * 48}px` }} />
-          ))}
-        </div>
-      </div>
-      <div className='flex-shrink-0 px-[24px] pb-[16px]'>{children}</div>
-    </div>
-  )
-}
-
 interface HomeProps {
   chatId?: string
 }
@@ -77,6 +59,8 @@ export function Home({ chatId }: HomeProps = {}) {
   const templateRef = useRef<HTMLDivElement>(null)
   const baseInputHeightRef = useRef<number | null>(null)
 
+  const [isInputEntering, setIsInputEntering] = useState(false)
+
   const createWorkflowFromLandingSeed = useCallback(
     async (seed: LandingWorkflowSeed) => {
       try {
@@ -150,7 +134,7 @@ export function Home({ chatId }: HomeProps = {}) {
 
   const wasSendingRef = useRef(false)
 
-  const { isLoading: isLoadingHistory } = useChatHistory(chatId)
+  useChatHistory(chatId)
   const { mutate: markRead } = useMarkTaskRead(workspaceId)
 
   const [isResourceCollapsed, setIsResourceCollapsed] = useState(true)
@@ -177,7 +161,6 @@ export function Home({ chatId }: HomeProps = {}) {
   const {
     messages,
     isSending,
-    isReconnecting,
     sendMessage,
     stopGeneration,
     resolvedChatId,
@@ -245,6 +228,11 @@ export function Home({ chatId }: HomeProps = {}) {
     (text: string, fileAttachments?: FileAttachmentForApi[], contexts?: ChatContext[]) => {
       const trimmed = text.trim()
       if (!trimmed && !(fileAttachments && fileAttachments.length > 0)) return
+
+      if (initialViewInputRef.current) {
+        setIsInputEntering(true)
+      }
+
       sendMessage(trimmed || 'Analyze the attached file(s).', fileAttachments, contexts)
     },
     [sendMessage]
@@ -339,22 +327,7 @@ export function Home({ chatId }: HomeProps = {}) {
     return () => ro.disconnect()
   }, [hasMessages])
 
-  if (chatId && (isLoadingHistory || isReconnecting)) {
-    return (
-      <ChatSkeleton>
-        <UserInput
-          onSubmit={handleSubmit}
-          isSending={isSending}
-          onStopGeneration={stopGeneration}
-          isInitialView={false}
-          userId={session?.user?.id}
-          onContextAdd={handleContextAdd}
-        />
-      </ChatSkeleton>
-    )
-  }
-
-  if (!hasMessages) {
+  if (!hasMessages && !chatId) {
     return (
       <div className='h-full overflow-y-auto bg-[var(--bg)] [scrollbar-gutter:stable]'>
         <div className='flex min-h-full flex-col items-center justify-center px-[24px] pb-[2vh]'>
@@ -373,7 +346,10 @@ export function Home({ chatId }: HomeProps = {}) {
             />
           </div>
         </div>
-        <div ref={templateRef} className='-mt-[30vh] mx-auto w-full max-w-[42rem] pb-[32px]'>
+        <div
+          ref={templateRef}
+          className='-mt-[30vh] mx-auto w-full max-w-[68rem] px-[16px] pb-[32px] sm:px-[24px] lg:px-[40px]'
+        >
           <TemplatePrompts onSelect={handleSubmit} />
         </div>
       </div>
@@ -418,7 +394,7 @@ export function Home({ chatId }: HomeProps = {}) {
                         })}
                       </div>
                     )}
-                    <div className='max-w-[70%] rounded-[16px] bg-[var(--surface-5)] px-3.5 py-2'>
+                    <div className='max-w-[70%] overflow-hidden rounded-[16px] bg-[var(--surface-5)] px-3.5 py-2'>
                       <UserMessageContent content={msg.content} contexts={msg.contexts} />
                     </div>
                   </div>
@@ -451,7 +427,10 @@ export function Home({ chatId }: HomeProps = {}) {
           </div>
         </div>
 
-        <div className='flex-shrink-0 px-[24px] pb-[16px]'>
+        <div
+          className={`flex-shrink-0 px-[24px] pb-[16px]${isInputEntering ? ' animate-slide-in-bottom' : ''}`}
+          onAnimationEnd={isInputEntering ? () => setIsInputEntering(false) : undefined}
+        >
           <div className='mx-auto max-w-[42rem]'>
             <QueuedMessages
               messageQueue={messageQueue}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts b/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts
index e527144fdc..2aef0e02c2 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts
@@ -515,7 +515,7 @@ export function useChat(
 
       const ensureTextBlock = (): ContentBlock => {
         const last = blocks[blocks.length - 1]
-        if (last?.type === 'text') return last
+        if (last?.type === 'text' && last.subagent === activeSubagent) return last
         const b: ContentBlock = { type: 'text', content: '' }
         blocks.push(b)
         return b
@@ -561,7 +561,6 @@ export function useChat(
           }
 
           logger.debug('SSE event received', parsed)
-
           switch (parsed.type) {
             case 'chat_id': {
               if (parsed.chatId) {
@@ -610,6 +609,7 @@ export function useChat(
                 const tb = ensureTextBlock()
                 const normalizedChunk = needsBoundaryNewline ? `\n${chunk}` : chunk
                 tb.content = (tb.content ?? '') + normalizedChunk
+                if (activeSubagent) tb.subagent = activeSubagent
                 runningText += normalizedChunk
                 lastContentSource = contentSource
                 streamingContentRef.current = runningText
@@ -834,6 +834,7 @@ export function useChat(
             }
             case 'subagent_end': {
               activeSubagent = undefined
+              blocks.push({ type: 'subagent_end' })
               flush()
               break
             }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/types.ts b/apps/sim/app/workspace/[workspaceId]/home/types.ts
index 0f34f0daa2..1ed8d0ac65 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/types.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/types.ts
@@ -129,11 +129,18 @@ export type ToolPhase =
 
 export type ToolCallStatus = 'executing' | 'success' | 'error' | 'cancelled'
 
+export interface ToolCallResult {
+  success: boolean
+  output?: unknown
+  error?: string
+}
+
 export interface ToolCallData {
   id: string
   toolName: string
   displayTitle: string
   status: ToolCallStatus
+  result?: ToolCallResult
 }
 
 export interface ToolCallInfo {
@@ -155,6 +162,7 @@ export type ContentBlockType =
   | 'text'
   | 'tool_call'
   | 'subagent'
+  | 'subagent_end'
   | 'subagent_text'
   | 'options'
   | 'stopped'
@@ -162,6 +170,7 @@ export type ContentBlockType =
 export interface ContentBlock {
   type: ContentBlockType
   content?: string
+  subagent?: string
   toolCall?: ToolCallInfo
   options?: OptionItem[]
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx
index 5adce99b22..f0dea2817f 100644
--- a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx
@@ -486,7 +486,7 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
                 onValueChange={(value) => setLifecycle(value as 'persistent' | 'until_complete')}
               >
                 <ButtonGroupItem value='persistent'>Recurring</ButtonGroupItem>
-                <ButtonGroupItem value='until_complete'>Until Complete</ButtonGroupItem>
+                <ButtonGroupItem value='until_complete'>Number of runs</ButtonGroupItem>
               </ButtonGroup>
             </div>
 
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 349f0fb84a..463d5a415b 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
@@ -243,11 +243,9 @@ export function SettingsSidebar({
 
             return (
               <div key={key} className='flex flex-shrink-0 flex-col'>
-                {!isCollapsed && (
-                  <div className='sidebar-collapse-remove px-[16px] pb-[6px]'>
-                    <div className='font-base text-[var(--text-icon)] text-small'>{title}</div>
-                  </div>
-                )}
+                <div className='px-[16px] pb-[6px]'>
+                  <div className='font-base text-[var(--text-icon)] text-small'>{title}</div>
+                </div>
                 <div className='flex flex-col gap-[2px] px-[8px]'>
                   {sectionItems.map((item) => {
                     const Icon = item.icon
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 04bfafe163..c932493470 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
@@ -495,7 +495,7 @@ export function WorkspaceHeader({
                     </div>
                   </DropdownMenuGroup>
 
-                  <div className='flex flex-col gap-[2px]'>
+                  <div className='mt-[4px] flex flex-col gap-[2px]'>
                     <button
                       type='button'
                       className='flex w-full cursor-pointer select-none items-center gap-[8px] rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-body)] outline-none transition-colors hover:bg-[var(--surface-active)] disabled:pointer-events-none disabled:opacity-50'
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 ae5807694f..1dc9064122 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -1078,11 +1078,9 @@ export const Sidebar = memo(function Sidebar() {
 
               {/* Workspace */}
               <div className='mt-[14px] flex flex-shrink-0 flex-col pb-[8px]'>
-                {!isCollapsed && (
-                  <div className='sidebar-collapse-remove px-[16px] pb-[6px]'>
-                    <div className='font-base text-[var(--text-icon)] text-small'>Workspace</div>
-                  </div>
-                )}
+                <div className='px-[16px] pb-[6px]'>
+                  <div className='font-base text-[var(--text-icon)] text-small'>Workspace</div>
+                </div>
                 <div className='flex flex-col gap-[2px] px-[8px]'>
                   {workspaceNavItems.map((item) => (
                     <SidebarNavItem
@@ -1106,6 +1104,27 @@ export const Sidebar = memo(function Sidebar() {
               >
                 {/* Tasks */}
                 <div className='flex flex-shrink-0 flex-col'>
+                  <div className='flex h-[18px] flex-shrink-0 items-center justify-between px-[16px]'>
+                    <div className='font-base text-[var(--text-icon)] text-small'>All tasks</div>
+                    {!isCollapsed && (
+                      <div className='flex items-center justify-center gap-[8px]'>
+                        <Tooltip.Root>
+                          <Tooltip.Trigger asChild>
+                            <Button
+                              variant='ghost'
+                              className='h-[18px] w-[18px] rounded-[4px] p-0 hover:bg-[var(--surface-active)]'
+                              onClick={() => router.push(`/workspace/${workspaceId}/home`)}
+                            >
+                              <Plus className='h-[16px] w-[16px]' />
+                            </Button>
+                          </Tooltip.Trigger>
+                          <Tooltip.Content>
+                            <p>New task</p>
+                          </Tooltip.Content>
+                        </Tooltip.Root>
+                      </div>
+                    )}
+                  </div>
                   {isCollapsed ? (
                     <CollapsedSidebarMenu
                       icon={
@@ -1114,6 +1133,7 @@ export const Sidebar = memo(function Sidebar() {
                       hover={tasksHover}
                       onClick={() => router.push(`/workspace/${workspaceId}/home`)}
                       ariaLabel='Tasks'
+                      className='mt-[6px]'
                     >
                       {tasksLoading ? (
                         <DropdownMenuItem disabled>
@@ -1140,211 +1160,183 @@ export const Sidebar = memo(function Sidebar() {
                       )}
                     </CollapsedSidebarMenu>
                   ) : (
-                    <div className='sidebar-collapse-remove'>
-                      <div className='flex flex-shrink-0 flex-col space-y-[4px] px-[16px]'>
-                        <div className='flex items-center justify-between'>
-                          <div className='font-base text-[var(--text-icon)] text-small'>
-                            All tasks
-                          </div>
-                          <div className='flex items-center justify-center gap-[8px]'>
-                            <Tooltip.Root>
-                              <Tooltip.Trigger asChild>
-                                <Button
-                                  variant='ghost'
-                                  className='h-[18px] w-[18px] rounded-[4px] p-0 hover:bg-[var(--surface-active)]'
-                                  onClick={() => router.push(`/workspace/${workspaceId}/home`)}
-                                >
-                                  <Plus className='h-[16px] w-[16px]' />
-                                </Button>
-                              </Tooltip.Trigger>
-                              <Tooltip.Content>
-                                <p>New task</p>
-                              </Tooltip.Content>
-                            </Tooltip.Root>
-                          </div>
-                        </div>
-                      </div>
-                      <div className='mt-[6px] flex flex-col gap-[2px] px-[8px]'>
-                        {tasksLoading ? (
-                          <SidebarItemSkeleton />
-                        ) : (
-                          <>
-                            {tasks.slice(0, visibleTaskCount).map((task) => {
-                              const isCurrentRoute = task.id !== 'new' && pathname === task.href
-                              const isRenaming = renamingTaskId === task.id
-                              const isSelected = task.id !== 'new' && selectedTasks.has(task.id)
-
-                              if (isRenaming) {
-                                return (
-                                  <div
-                                    key={task.id}
-                                    className='mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] bg-[var(--surface-active)] px-[8px] text-[14px]'
-                                  >
-                                    <Blimp className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-                                    <input
-                                      ref={renameInputRef}
-                                      value={renameValue}
-                                      onChange={(e) => setRenameValue(e.target.value)}
-                                      onKeyDown={handleRenameKeyDown}
-                                      onBlur={handleSaveTaskRename}
-                                      className='min-w-0 flex-1 border-none bg-transparent font-base text-[14px] text-[var(--text-body)] outline-none'
-                                    />
-                                  </div>
-                                )
-                              }
+                    <div className='mt-[6px] flex flex-col gap-[2px] px-[8px]'>
+                      {tasksLoading ? (
+                        <SidebarItemSkeleton />
+                      ) : (
+                        <>
+                          {tasks.slice(0, visibleTaskCount).map((task) => {
+                            const isCurrentRoute = task.id !== 'new' && pathname === task.href
+                            const isRenaming = renamingTaskId === task.id
+                            const isSelected = task.id !== 'new' && selectedTasks.has(task.id)
 
+                            if (isRenaming) {
                               return (
-                                <SidebarTaskItem
+                                <div
                                   key={task.id}
-                                  task={task}
-                                  isCurrentRoute={isCurrentRoute}
-                                  isSelected={isSelected}
-                                  isActive={!!task.isActive}
-                                  isUnread={!!task.isUnread}
-                                  showCollapsedContent={showCollapsedContent}
-                                  onMultiSelectClick={handleTaskClick}
-                                  onContextMenu={handleTaskContextMenu}
-                                  onMorePointerDown={handleTaskMorePointerDown}
-                                  onMoreClick={handleTaskMoreClick}
-                                />
+                                  className='mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] bg-[var(--surface-active)] px-[8px] text-[14px]'
+                                >
+                                  <Blimp className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+                                  <input
+                                    ref={renameInputRef}
+                                    value={renameValue}
+                                    onChange={(e) => setRenameValue(e.target.value)}
+                                    onKeyDown={handleRenameKeyDown}
+                                    onBlur={handleSaveTaskRename}
+                                    className='min-w-0 flex-1 border-none bg-transparent font-base text-[14px] text-[var(--text-body)] outline-none'
+                                  />
+                                </div>
                               )
-                            })}
-                            {tasks.length > visibleTaskCount && (
-                              <button
-                                type='button'
-                                onClick={() => setVisibleTaskCount((prev) => prev + 5)}
-                                className='mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] text-[var(--text-icon)] hover:bg-[var(--surface-active)]'
-                              >
-                                <MoreHorizontal className='h-[16px] w-[16px] flex-shrink-0' />
-                                <span className='font-base'>See more</span>
-                              </button>
-                            )}
-                          </>
-                        )}
-                      </div>
+                            }
+
+                            return (
+                              <SidebarTaskItem
+                                key={task.id}
+                                task={task}
+                                isCurrentRoute={isCurrentRoute}
+                                isSelected={isSelected}
+                                isActive={!!task.isActive}
+                                isUnread={!!task.isUnread}
+                                showCollapsedContent={showCollapsedContent}
+                                onMultiSelectClick={handleTaskClick}
+                                onContextMenu={handleTaskContextMenu}
+                                onMorePointerDown={handleTaskMorePointerDown}
+                                onMoreClick={handleTaskMoreClick}
+                              />
+                            )
+                          })}
+                          {tasks.length > visibleTaskCount && (
+                            <button
+                              type='button'
+                              onClick={() => setVisibleTaskCount((prev) => prev + 5)}
+                              className='mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] text-[var(--text-icon)] hover:bg-[var(--surface-active)]'
+                            >
+                              <MoreHorizontal className='h-[16px] w-[16px] flex-shrink-0' />
+                              <span className='font-base'>See more</span>
+                            </button>
+                          )}
+                        </>
+                      )}
                     </div>
                   )}
                 </div>
 
                 {/* Workflows */}
-                {isCollapsed ? (
-                  <CollapsedSidebarMenu
-                    icon={
-                      <div
-                        className='h-[16px] w-[16px] flex-shrink-0 rounded-[3px] border-[2px]'
-                        style={{
-                          backgroundColor: 'var(--text-icon)',
-                          borderColor: 'color-mix(in srgb, var(--text-icon) 60%, transparent)',
-                          backgroundClip: 'padding-box',
-                        }}
-                      />
-                    }
-                    hover={workflowsHover}
-                    onClick={handleCreateWorkflow}
-                    ariaLabel='Workflows'
-                    className='mt-[14px]'
-                  >
-                    {workflowsLoading && regularWorkflows.length === 0 ? (
-                      <DropdownMenuItem disabled>
-                        <Loader className='h-[14px] w-[14px]' animate />
-                        Loading...
-                      </DropdownMenuItem>
-                    ) : regularWorkflows.length === 0 ? (
-                      <DropdownMenuItem disabled>No workflows yet</DropdownMenuItem>
-                    ) : (
-                      <>
-                        <CollapsedFolderItems
-                          nodes={folderTree}
-                          workflowsByFolder={workflowsByFolder}
-                          workspaceId={workspaceId}
-                        />
-                        {(workflowsByFolder.root || []).map((workflow) => (
-                          <DropdownMenuItem key={workflow.id} asChild>
-                            <Link href={`/workspace/${workspaceId}/w/${workflow.id}`}>
-                              <div
-                                className='h-[14px] w-[14px] flex-shrink-0 rounded-[3px] border-[2px]'
-                                style={{
-                                  backgroundColor: workflow.color,
-                                  borderColor: `${workflow.color}60`,
-                                  backgroundClip: 'padding-box',
-                                }}
-                              />
-                              <span className='truncate'>{workflow.name}</span>
-                            </Link>
-                          </DropdownMenuItem>
-                        ))}
-                      </>
-                    )}
-                  </CollapsedSidebarMenu>
-                ) : (
-                  <div className='sidebar-collapse-remove workflows-section relative mt-[14px] flex flex-col'>
-                    <div className='flex flex-shrink-0 flex-col space-y-[4px] px-[16px]'>
-                      <div className='flex items-center justify-between'>
-                        <div className='font-base text-[var(--text-icon)] text-small'>
-                          Workflows
-                        </div>
-                        <div className='flex items-center justify-center gap-[8px]'>
-                          <DropdownMenu>
-                            <Tooltip.Root>
-                              <Tooltip.Trigger asChild>
-                                <DropdownMenuTrigger asChild>
-                                  <Button
-                                    variant='ghost'
-                                    className='h-[18px] w-[18px] rounded-[4px] p-0 hover:bg-[var(--surface-active)]'
-                                    disabled={!canEdit}
-                                  >
-                                    {isImporting || isCreatingFolder ? (
-                                      <Loader className='h-[16px] w-[16px]' animate />
-                                    ) : (
-                                      <MoreHorizontal className='h-[16px] w-[16px]' />
-                                    )}
-                                  </Button>
-                                </DropdownMenuTrigger>
-                              </Tooltip.Trigger>
-                              <Tooltip.Content>
-                                <p>More actions</p>
-                              </Tooltip.Content>
-                            </Tooltip.Root>
-                            <DropdownMenuContent
-                              align='start'
-                              sideOffset={8}
-                              className='min-w-[160px]'
-                            >
-                              <DropdownMenuItem
-                                onSelect={handleImportWorkflow}
-                                disabled={!canEdit || isImporting}
-                              >
-                                <Download />
-                                {isImporting ? 'Importing...' : 'Import workflow'}
-                              </DropdownMenuItem>
-                              <DropdownMenuItem
-                                onSelect={handleCreateFolder}
-                                disabled={!canEdit || isCreatingFolder}
-                              >
-                                <FolderPlus />
-                                {isCreatingFolder ? 'Creating folder...' : 'Create folder'}
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
+                <div className='workflows-section relative mt-[14px] flex flex-col'>
+                  <div className='flex h-[18px] flex-shrink-0 items-center justify-between px-[16px]'>
+                    <div className='font-base text-[var(--text-icon)] text-small'>Workflows</div>
+                    {!isCollapsed && (
+                      <div className='flex items-center justify-center gap-[8px]'>
+                        <DropdownMenu>
                           <Tooltip.Root>
                             <Tooltip.Trigger asChild>
-                              <Button
-                                variant='ghost'
-                                className='h-[18px] w-[18px] rounded-[4px] p-0 hover:bg-[var(--surface-active)]'
-                                onClick={handleCreateWorkflow}
-                                disabled={isCreatingWorkflow || !canEdit}
-                              >
-                                <Plus className='h-[16px] w-[16px]' />
-                              </Button>
+                              <DropdownMenuTrigger asChild>
+                                <Button
+                                  variant='ghost'
+                                  className='h-[18px] w-[18px] rounded-[4px] p-0 hover:bg-[var(--surface-active)]'
+                                  disabled={!canEdit}
+                                >
+                                  {isImporting || isCreatingFolder ? (
+                                    <Loader className='h-[16px] w-[16px]' animate />
+                                  ) : (
+                                    <MoreHorizontal className='h-[16px] w-[16px]' />
+                                  )}
+                                </Button>
+                              </DropdownMenuTrigger>
                             </Tooltip.Trigger>
                             <Tooltip.Content>
-                              <p>{isCreatingWorkflow ? 'Creating workflow...' : 'New workflow'}</p>
+                              <p>More actions</p>
                             </Tooltip.Content>
                           </Tooltip.Root>
-                        </div>
+                          <DropdownMenuContent
+                            align='start'
+                            sideOffset={8}
+                            className='min-w-[160px]'
+                          >
+                            <DropdownMenuItem
+                              onSelect={handleImportWorkflow}
+                              disabled={!canEdit || isImporting}
+                            >
+                              <Download />
+                              {isImporting ? 'Importing...' : 'Import workflow'}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              onSelect={handleCreateFolder}
+                              disabled={!canEdit || isCreatingFolder}
+                            >
+                              <FolderPlus />
+                              {isCreatingFolder ? 'Creating folder...' : 'Create folder'}
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                        <Tooltip.Root>
+                          <Tooltip.Trigger asChild>
+                            <Button
+                              variant='ghost'
+                              className='h-[18px] w-[18px] rounded-[4px] p-0 hover:bg-[var(--surface-active)]'
+                              onClick={handleCreateWorkflow}
+                              disabled={isCreatingWorkflow || !canEdit}
+                            >
+                              <Plus className='h-[16px] w-[16px]' />
+                            </Button>
+                          </Tooltip.Trigger>
+                          <Tooltip.Content>
+                            <p>{isCreatingWorkflow ? 'Creating workflow...' : 'New workflow'}</p>
+                          </Tooltip.Content>
+                        </Tooltip.Root>
                       </div>
-                    </div>
-
+                    )}
+                  </div>
+                  {isCollapsed ? (
+                    <CollapsedSidebarMenu
+                      icon={
+                        <div
+                          className='h-[16px] w-[16px] flex-shrink-0 rounded-[3px] border-[2px]'
+                          style={{
+                            backgroundColor: 'var(--text-icon)',
+                            borderColor: 'color-mix(in srgb, var(--text-icon) 60%, transparent)',
+                            backgroundClip: 'padding-box',
+                          }}
+                        />
+                      }
+                      hover={workflowsHover}
+                      onClick={handleCreateWorkflow}
+                      ariaLabel='Workflows'
+                      className='mt-[6px]'
+                    >
+                      {workflowsLoading && regularWorkflows.length === 0 ? (
+                        <DropdownMenuItem disabled>
+                          <Loader className='h-[14px] w-[14px]' animate />
+                          Loading...
+                        </DropdownMenuItem>
+                      ) : regularWorkflows.length === 0 ? (
+                        <DropdownMenuItem disabled>No workflows yet</DropdownMenuItem>
+                      ) : (
+                        <>
+                          <CollapsedFolderItems
+                            nodes={folderTree}
+                            workflowsByFolder={workflowsByFolder}
+                            workspaceId={workspaceId}
+                          />
+                          {(workflowsByFolder.root || []).map((workflow) => (
+                            <DropdownMenuItem key={workflow.id} asChild>
+                              <Link href={`/workspace/${workspaceId}/w/${workflow.id}`}>
+                                <div
+                                  className='h-[14px] w-[14px] flex-shrink-0 rounded-[3px] border-[2px]'
+                                  style={{
+                                    backgroundColor: workflow.color,
+                                    borderColor: `${workflow.color}60`,
+                                    backgroundClip: 'padding-box',
+                                  }}
+                                />
+                                <span className='truncate'>{workflow.name}</span>
+                              </Link>
+                            </DropdownMenuItem>
+                          ))}
+                        </>
+                      )}
+                    </CollapsedSidebarMenu>
+                  ) : (
                     <div className='mt-[6px] px-[8px]'>
                       {workflowsLoading && regularWorkflows.length === 0 && <SidebarItemSkeleton />}
                       <WorkflowList
@@ -1361,8 +1353,8 @@ export const Sidebar = memo(function Sidebar() {
                         disableCreate={!canEdit || isCreatingWorkflow || isCreatingFolder}
                       />
                     </div>
-                  </div>
-                )}
+                  )}
+                </div>
               </div>
 
               {/* Footer */}
diff --git a/apps/sim/components/emcn/icons/animate/pills-ring.module.css b/apps/sim/components/emcn/icons/animate/pills-ring.module.css
new file mode 100644
index 0000000000..20e46e6fd4
--- /dev/null
+++ b/apps/sim/components/emcn/icons/animate/pills-ring.module.css
@@ -0,0 +1,22 @@
+/**
+ * PillsRing icon animation
+ * Pills arranged in a ring fade in/out sequentially,
+ * creating a chasing spinner effect.
+ * Individual pill delays are set via inline style.
+ */
+
+@keyframes pill-fade {
+  0%,
+  50%,
+  100% {
+    opacity: 0.15;
+  }
+  25% {
+    opacity: 1;
+  }
+}
+
+.animated-pills-ring-svg .pill {
+  animation: pill-fade 1.2s ease-in-out infinite;
+  will-change: opacity;
+}
diff --git a/apps/sim/components/emcn/icons/index.ts b/apps/sim/components/emcn/icons/index.ts
index 2bf3a99317..21c3fb3204 100644
--- a/apps/sim/components/emcn/icons/index.ts
+++ b/apps/sim/components/emcn/icons/index.ts
@@ -53,6 +53,7 @@ export { Palette } from './palette'
 export { PanelLeft } from './panel-left'
 export { Pause } from './pause'
 export { Pencil } from './pencil'
+export { PillsRing } from './pills-ring'
 export { Play, PlayOutline } from './play'
 export { Plus } from './plus'
 export { Redo } from './redo'
diff --git a/apps/sim/components/emcn/icons/pills-ring.tsx b/apps/sim/components/emcn/icons/pills-ring.tsx
new file mode 100644
index 0000000000..94167283fc
--- /dev/null
+++ b/apps/sim/components/emcn/icons/pills-ring.tsx
@@ -0,0 +1,52 @@
+import type { SVGProps } from 'react'
+import styles from '@/components/emcn/icons/animate/pills-ring.module.css'
+
+export interface PillsRingProps extends SVGProps<SVGSVGElement> {
+  /**
+   * Enable the chasing fade animation
+   * @default false
+   */
+  animate?: boolean
+}
+
+const PILL_COUNT = 8
+const DURATION_S = 1.2
+
+/**
+ * Ring of pill-shaped elements with optional chasing fade animation.
+ * Static render shows pills at graded opacities; animated render
+ * fades them sequentially around the ring via CSS module keyframes.
+ * @param props - SVG properties including className, animate, etc.
+ */
+export function PillsRing({ animate = false, className, ...props }: PillsRingProps) {
+  const svgClassName = animate
+    ? `${styles['animated-pills-ring-svg']} ${className || ''}`.trim()
+    : className
+
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='currentColor'
+      className={svgClassName}
+      {...props}
+    >
+      {Array.from({ length: PILL_COUNT }).map((_, i) => (
+        <rect
+          key={i}
+          x='10.75'
+          y='2.5'
+          width='2.5'
+          height='5'
+          rx='1.25'
+          transform={`rotate(${i * 45} 12 12)`}
+          className={animate ? styles.pill : undefined}
+          style={animate ? { animationDelay: `${(i * DURATION_S) / PILL_COUNT}s` } : undefined}
+          opacity={animate ? undefined : 0.15 + (0.85 * (PILL_COUNT - i)) / PILL_COUNT}
+        />
+      ))}
+    </svg>
+  )
+}
diff --git a/apps/sim/components/icons.tsx b/apps/sim/components/icons.tsx
index b098e616a2..a1c6beb37f 100644
--- a/apps/sim/components/icons.tsx
+++ b/apps/sim/components/icons.tsx
@@ -1390,7 +1390,7 @@ export function AmplitudeIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg {...props} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 49'>
       <path
-        fill='#FFFFFF'
+        fill='currentColor'
         d='M23.4,15.3c0.6,1.8,1.2,4.1,1.9,6.7c-2.6,0-5.3-0.1-7.8-0.1h-1.3c1.5-5.7,3.2-10.1,4.6-11.1 c0.1-0.1,0.2-0.1,0.4-0.1c0.2,0,0.3,0.1,0.5,0.3C21.9,11.5,22.5,12.7,23.4,15.3z M49,24.5C49,38,38,49,24.5,49S0,38,0,24.5 S11,0,24.5,0S49,11,49,24.5z M42.7,23.9c0-0.6-0.4-1.2-1-1.3l0,0l0,0l0,0c-0.1,0-0.1,0-0.2,0h-0.2c-4.1-0.3-8.4-0.4-12.4-0.5l0,0 C27,14.8,24.5,7.4,21.3,7.4c-3,0-5.8,4.9-8.2,14.5c-1.7,0-3.2,0-4.6-0.1c-0.1,0-0.2,0-0.2,0c-0.3,0-0.5,0-0.5,0 c-0.8,0.1-1.4,0.9-1.4,1.7c0,0.8,0.6,1.6,1.5,1.7l0,0h4.6c-0.4,1.9-0.8,3.8-1.1,5.6l-0.1,0.8l0,0c0,0.6,0.5,1.1,1.1,1.1 c0.4,0,0.8-0.2,1-0.5l0,0l2.2-7.1h10.7c0.8,3.1,1.7,6.3,2.8,9.3c0.6,1.6,2,5.4,4.4,5.4l0,0c3.6,0,5-5.8,5.9-9.6 c0.2-0.8,0.4-1.5,0.5-2.1l0.1-0.2l0,0c0-0.1,0-0.2,0-0.3c-0.1-0.2-0.2-0.3-0.4-0.4c-0.3-0.1-0.5,0.1-0.6,0.4l0,0l-0.1,0.2 c-0.3,0.8-0.6,1.6-0.8,2.3v0.1c-1.6,4.4-2.3,6.4-3.7,6.4l0,0l0,0l0,0c-1.8,0-3.5-7.3-4.1-10.1c-0.1-0.5-0.2-0.9-0.3-1.3h11.7 c0.2,0,0.4-0.1,0.6-0.1l0,0c0,0,0,0,0.1,0c0,0,0,0,0.1,0l0,0c0,0,0.1,0,0.1-0.1l0,0C42.5,24.6,42.7,24.3,42.7,23.9z'
       />
     </svg>
diff --git a/apps/sim/content/authors/adam.json b/apps/sim/content/authors/adam.json
deleted file mode 100644
index 3f089f7906..0000000000
--- a/apps/sim/content/authors/adam.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "id": "adam",
-  "name": "Adam Gough",
-  "url": "https://x.com/adamgough",
-  "xHandle": "adamgough",
-  "avatarUrl": "/studio/authors/adam.png"
-}
diff --git a/apps/sim/content/authors/emir.json b/apps/sim/content/authors/emir.json
index f317287e23..eb0e5305d2 100644
--- a/apps/sim/content/authors/emir.json
+++ b/apps/sim/content/authors/emir.json
@@ -3,5 +3,5 @@
   "name": "Emir Karabeg",
   "url": "https://x.com/karabegemir",
   "xHandle": "karabegemir",
-  "avatarUrl": "/studio/authors/emir.jpg"
+  "avatarUrl": "/blog/authors/emir.jpg"
 }
diff --git a/apps/sim/content/authors/sid.json b/apps/sim/content/authors/sid.json
index 1703337f92..e799abd015 100644
--- a/apps/sim/content/authors/sid.json
+++ b/apps/sim/content/authors/sid.json
@@ -3,5 +3,5 @@
   "name": "Siddharth",
   "url": "https://x.com/sidganesan",
   "xHandle": "sidganesan",
-  "avatarUrl": "/studio/authors/sid.jpg"
+  "avatarUrl": "/blog/authors/sid.jpg"
 }
diff --git a/apps/sim/content/authors/vik.json b/apps/sim/content/authors/vik.json
index 859e491c36..5b514fd51a 100644
--- a/apps/sim/content/authors/vik.json
+++ b/apps/sim/content/authors/vik.json
@@ -3,5 +3,5 @@
   "name": "Vikhyath Mondreti",
   "url": "https://github.com/icecrasher321",
   "xHandle": "icecrasher321",
-  "avatarUrl": "/studio/authors/vik.jpg"
+  "avatarUrl": "/blog/authors/vik.jpg"
 }
diff --git a/apps/sim/content/authors/waleed.json b/apps/sim/content/authors/waleed.json
index b6cf7c8a57..4fe2ca3355 100644
--- a/apps/sim/content/authors/waleed.json
+++ b/apps/sim/content/authors/waleed.json
@@ -3,5 +3,5 @@
   "name": "Waleed Latif",
   "url": "https://x.com/typingwala",
   "xHandle": "typingwala",
-  "avatarUrl": "/studio/authors/waleed.jpg"
+  "avatarUrl": "/blog/authors/waleed.jpg"
 }
diff --git a/apps/sim/content/blog/copilot/index.mdx b/apps/sim/content/blog/copilot/index.mdx
index b68ceb5f6e..98add96484 100644
--- a/apps/sim/content/blog/copilot/index.mdx
+++ b/apps/sim/content/blog/copilot/index.mdx
@@ -8,11 +8,11 @@ authors:
   - sid
 readingTime: 7
 tags: [Copilot, AI Assistant, Benchmarks, Architecture, Sim]
-ogImage: /studio/copilot/cover.png
+ogImage: /blog/copilot/cover.png
 ogAlt: 'Sim Copilot technical overview'
 about: ['AI Assistants', 'Agentic Workflows', 'Retrieval Augmented Generation']
 timeRequired: PT7M
-canonical: https://sim.ai/studio/copilot
+canonical: https://sim.ai/blog/copilot
 featured: false
 draft: true
 ---
diff --git a/apps/sim/content/blog/emcn/index.mdx b/apps/sim/content/blog/emcn/index.mdx
index f03a855bd9..9dddba8244 100644
--- a/apps/sim/content/blog/emcn/index.mdx
+++ b/apps/sim/content/blog/emcn/index.mdx
@@ -8,18 +8,18 @@ authors:
   - emir
 readingTime: 6
 tags: [Design, Emcn, UI, UX, Components, Sim]
-ogImage: /studio/emcn/cover.png
+ogImage: /blog/emcn/cover.png
 ogAlt: 'Emcn design system cover'
 about: ['Design Systems', 'Component Libraries', 'Design Tokens', 'Accessibility']
 timeRequired: PT6M
-canonical: https://sim.ai/studio/emcn
+canonical: https://sim.ai/blog/emcn
 featured: false
 draft: true
 ---
 
 > This post is the scaffolding for Emcn, our new design system. We’ll fill it in as we publish the full documentation and component gallery.
 
-![Emcn cover placeholder](/studio/emcn/cover.png)
+![Emcn cover placeholder](/blog/emcn/cover.png)
 
 ## What is Emcn?
 
diff --git a/apps/sim/content/blog/enterprise/index.mdx b/apps/sim/content/blog/enterprise/index.mdx
index 2a04d8af43..f97fbeef10 100644
--- a/apps/sim/content/blog/enterprise/index.mdx
+++ b/apps/sim/content/blog/enterprise/index.mdx
@@ -8,11 +8,11 @@ authors:
   - vik
 readingTime: 10
 tags: [Enterprise, Security, Self-Hosted, SSO, SAML, Compliance, BYOK, Access Control, Copilot, Whitelabel, API, Import, Export]
-ogImage: /studio/enterprise/cover.png
+ogImage: /blog/enterprise/cover.png
 ogAlt: 'Sim Enterprise features overview'
 about: ['Enterprise Software', 'Security', 'Compliance', 'Self-Hosting']
 timeRequired: PT10M
-canonical: https://sim.ai/studio/enterprise
+canonical: https://sim.ai/blog/enterprise
 featured: true
 draft: false
 ---
@@ -21,13 +21,13 @@ We've been working with security teams at larger organizations to bring Sim into
 
 ## Access Control
 
-![Access Control Settings](/studio/enterprise/access-control.png)
+![Access Control Settings](/blog/enterprise/access-control.png)
 
 Permission groups let administrators control what features and integrations are available to different teams within an organization. This isn't just UI filtering—restrictions are enforced at the execution layer.
 
 ### Model Provider Restrictions
 
-![Model Provider Restrictions](/studio/enterprise/model-providers.png)
+![Model Provider Restrictions](/blog/enterprise/model-providers.png)
 
 Allowlist specific providers while blocking others. Users in a restricted group see only approved providers in the model selector. A workflow that tries to use an unapproved provider won't execute.
 
@@ -35,13 +35,13 @@ This is useful when you've approved certain providers for production use, negoti
 
 ### Integration Controls
 
-![Integration Controls](/studio/enterprise/integration-controls.png)
+![Integration Controls](/blog/enterprise/integration-controls.png)
 
 Restrict which workflow blocks appear in the editor. Disable the HTTP block to prevent arbitrary external API calls. Block access to integrations that haven't completed your security review.
 
 ### Platform Feature Toggles
 
-![Platform Feature Toggles](/studio/enterprise/platform-controls.png)
+![Platform Feature Toggles](/blog/enterprise/platform-controls.png)
 
 Control access to platform capabilities per permission group:
 
@@ -56,7 +56,7 @@ Users not assigned to any permission group have full access, so restrictions are
 
 ## Bring Your Own Keys
 
-![BYOK Configuration](/studio/enterprise/byok.png)
+![BYOK Configuration](/blog/enterprise/byok.png)
 
 When you configure your own API keys for model providers—OpenAI, Anthropic, Google, Azure OpenAI, AWS Bedrock, or any supported provider—your prompts and completions route directly between Sim and that provider. The traffic doesn't pass through our infrastructure.
 
@@ -70,7 +70,7 @@ A healthcare organization can use Azure OpenAI with their BAA-covered subscripti
 
 ## Self-Hosted Deployments
 
-![Self-Hosted Architecture](/studio/enterprise/self-hosted.png)
+![Self-Hosted Architecture](/blog/enterprise/self-hosted.png)
 
 Run Sim entirely on your infrastructure. Deploy with [Docker Compose](https://docs.sim.ai/self-hosting/docker) or [Helm charts](https://docs.sim.ai/self-hosting/kubernetes) for Kubernetes—the application, WebSocket server, and PostgreSQL database all stay within your network.
 
@@ -96,7 +96,7 @@ This is particularly relevant for organizations where the context Copilot needs
 
 ## SSO & SAML
 
-![SSO Configuration](/studio/enterprise/sso.png)
+![SSO Configuration](/blog/enterprise/sso.png)
 
 Integrate with your existing identity provider through SAML 2.0 or OIDC. We support Okta, Azure AD (Entra ID), Google Workspace, OneLogin, Auth0, JumpCloud, Ping Identity, ADFS, and any compliant identity provider.
 
@@ -126,7 +126,7 @@ This is useful for internal platforms, customer-facing deployments, or any scena
 
 ## Compliance & Data Retention
 
-![Compliance Certifications](/studio/enterprise/compliance.png)
+![Compliance Certifications](/blog/enterprise/compliance.png)
 
 Sim maintains **SOC 2 Type II** certification with annual audits covering security, availability, and confidentiality controls. We share our SOC 2 report directly with prospective customers under NDA.
 
diff --git a/apps/sim/content/blog/executor/index.mdx b/apps/sim/content/blog/executor/index.mdx
index 21cbe5b4a7..61c9407ee4 100644
--- a/apps/sim/content/blog/executor/index.mdx
+++ b/apps/sim/content/blog/executor/index.mdx
@@ -8,11 +8,11 @@ authors:
   - sid
 readingTime: 12
 tags: [Executor, Architecture, DAG, Orchestration]
-ogImage: /studio/executor/cover.png
+ogImage: /blog/executor/cover.png
 ogAlt: 'Sim Executor technical overview'
 about: ['Execution', 'Workflow Orchestration']
 timeRequired: PT12M
-canonical: https://sim.ai/studio/executor
+canonical: https://sim.ai/blog/executor
 featured: false
 draft: false
 ---
@@ -106,7 +106,7 @@ Behind the scenes, this expands to the same branch‑indexed DAG structure. The
 
 Loops present a challenge for DAGs: graphs are acyclic, but loops repeat. We handle this by expanding loops into sentinel nodes during compilation.
 
-![Loop sentinel nodes](/studio/executor/loop-sentinels.png)
+![Loop sentinel nodes](/blog/executor/loop-sentinels.png)
 *Loops expand into sentinel start and end nodes. The backward edge only activates when the loop continues, preserving the DAG's acyclic property.*
 
 A loop is bookended by two nodes: a sentinel start and a sentinel end. The sentinel start activates the first blocks inside the loop. When terminal blocks complete, they route to the sentinel end. The sentinel end evaluates the loop condition and returns either "continue" (which routes back to the start) or "exit" (which activates blocks after the loop).
@@ -135,7 +135,7 @@ This makes AI-driven routing deterministic and traceable. You can inspect the ex
 
 When a condition or router executes, it evaluates its logic and returns a single selection. The edge manager checks each outgoing edge to see if its label matches the selection. The matching edge activates; the rest deactivate.
 
-![Edge activation and pruning](/studio/executor/edge-pruning.png)
+![Edge activation and pruning](/blog/executor/edge-pruning.png)
 *When a condition selects one path, the chosen edge activates while unselected paths deactivate recursively, preventing unreachable blocks from executing.*
 
 Deactivation cascades. If an edge deactivates, the executor recursively deactivates all edges downstream from its target—unless that target has other active incoming edges. This automatic pruning prevents unreachable blocks from ever entering the ready queue.
@@ -182,7 +182,7 @@ The lock also prevents a resumed node from racing with other executing nodes. Wh
 
 ### Example
 
-![Iterative agent refinement with human feedback](/studio/executor/hitl-loop.png)
+![Iterative agent refinement with human feedback](/blog/executor/hitl-loop.png)
 *A common pattern: agent generates output, pauses for human review, router decides pass/fail based on feedback, saves to workflow variable, and loop continues until approved.*
 
 A while loop runs an agent with previous feedback as context. The agent's output goes to a human‑in‑the‑loop block, which pauses execution and sends a notification. The user reviews the output and provides feedback via the resume link.
diff --git a/apps/sim/content/blog/multiplayer/index.mdx b/apps/sim/content/blog/multiplayer/index.mdx
index f0dd28826a..58b5997081 100644
--- a/apps/sim/content/blog/multiplayer/index.mdx
+++ b/apps/sim/content/blog/multiplayer/index.mdx
@@ -8,8 +8,8 @@ authors:
   - vik
 readingTime: 12
 tags: [Multiplayer, Realtime, Collaboration, WebSockets, Architecture]
-ogImage: /studio/multiplayer/cover.png
-canonical: https://sim.ai/studio/multiplayer
+ogImage: /blog/multiplayer/cover.png
+canonical: https://sim.ai/blog/multiplayer
 draft: false
 ---
 
diff --git a/apps/sim/content/blog/openai-vs-n8n-vs-sim/index.mdx b/apps/sim/content/blog/openai-vs-n8n-vs-sim/index.mdx
index c57f73d01f..f570590bd5 100644
--- a/apps/sim/content/blog/openai-vs-n8n-vs-sim/index.mdx
+++ b/apps/sim/content/blog/openai-vs-n8n-vs-sim/index.mdx
@@ -8,8 +8,8 @@ authors:
   - emir
 readingTime: 9
 tags: [AI Agents, Workflow Automation, OpenAI AgentKit, n8n, Sim, MCP]
-ogImage: /studio/openai-vs-n8n-vs-sim/workflow.png
-canonical: https://sim.ai/studio/openai-vs-n8n-vs-sim
+ogImage: /blog/openai-vs-n8n-vs-sim/workflow.png
+canonical: https://sim.ai/blog/openai-vs-n8n-vs-sim
 draft: false
 ---
 
@@ -19,7 +19,7 @@ When building AI agent workflows, developers often evaluate multiple platforms t
 
 OpenAI AgentKit is a set of building blocks designed to help developers take AI agents from prototype to production. Built on top of the OpenAI Responses API, it provides a structured approach to building and deploying intelligent agents.
 
-![OpenAI AgentKit workflow interface](/studio/openai-vs-n8n-vs-sim/openai.png)
+![OpenAI AgentKit workflow interface](/blog/openai-vs-n8n-vs-sim/openai.png)
 
 ### Core Features
 
@@ -31,7 +31,7 @@ AgentKit provides a visual canvas where developers can design and build agents.
 
 ChatKit enables developers to embed chat interfaces to run workflows directly within their applications. It includes custom widgets that you can create and integrate, with the ability to preview interfaces right in the workflow builder before deployment.
 
-![OpenAI AgentKit custom widgets interface](/studio/openai-vs-n8n-vs-sim/widgets.png)
+![OpenAI AgentKit custom widgets interface](/blog/openai-vs-n8n-vs-sim/widgets.png)
 
 #### Comprehensive Evaluation System
 
@@ -65,7 +65,7 @@ While AgentKit is powerful for building agents, it has some limitations:
 
 n8n is a workflow automation platform that excels at connecting various services and APIs together. While it started as a general automation tool, n8n has evolved to support AI agent workflows alongside its traditional integration capabilities.
 
-![n8n workflow automation interface](/studio/openai-vs-n8n-vs-sim/n8n.png)
+![n8n workflow automation interface](/blog/openai-vs-n8n-vs-sim/n8n.png)
 
 ### Core Capabilities
 
@@ -117,19 +117,19 @@ Sim is a fully open-source platform (Apache 2.0 license) specifically designed f
 
 Sim provides an intuitive drag-and-drop canvas where developers can build complex AI agent workflows visually. The platform supports sophisticated agent architectures, including multi-agent systems, conditional logic, loops, and parallel execution paths. Additionally, Sim's built-in AI Copilot can assist you directly in the editor, helping you build and modify workflows faster with intelligent suggestions and explanations.
 
-![Sim visual workflow builder with AI agent blocks](/studio/openai-vs-n8n-vs-sim/sim.png)
+![Sim visual workflow builder with AI agent blocks](/blog/openai-vs-n8n-vs-sim/sim.png)
 
 #### AI Copilot for Workflow Building
 
 Sim includes an intelligent in-editor AI assistant that helps you build and edit workflows faster. Copilot can explain complex concepts, suggest best practices, and even make changes to your workflow when you approve them. Using the @ context menu, you can reference workflows, blocks, knowledge bases, documentation, templates, and execution logs—giving Copilot the full context it needs to provide accurate, relevant assistance. This dramatically accelerates workflow development compared to building from scratch.
 
-![Sim AI Copilot assisting with workflow development](/studio/openai-vs-n8n-vs-sim/copilot.png)
+![Sim AI Copilot assisting with workflow development](/blog/openai-vs-n8n-vs-sim/copilot.png)
 
 #### Pre-Built Workflow Templates
 
 Get started quickly with Sim's extensive library of pre-built workflow templates. Browse templates across categories like Marketing, Sales, Finance, Support, and Artificial Intelligence. Each template is a production-ready workflow you can customize for your needs, saving hours of development time. Templates are created by the Sim team and community members, with popularity ratings and integration counts to help you find the right starting point.
 
-![Sim workflow templates gallery](/studio/openai-vs-n8n-vs-sim/templates.png)
+![Sim workflow templates gallery](/blog/openai-vs-n8n-vs-sim/templates.png)
 
 #### 80+ Built-in Integrations
 
@@ -155,7 +155,7 @@ Sim's native knowledge base goes far beyond simple document storage. Powered by
 
 Sim provides enterprise-grade logging that captures every detail of workflow execution. Track workflow runs with execution IDs, view block-level logs with precise timing and duration metrics, monitor token usage and costs per execution, and debug failures with detailed error traces and trace spans. The logging system integrates with Copilot—you can reference execution logs directly in your Copilot conversations to understand what happened and troubleshoot issues. This level of observability is essential for production AI agents where understanding behavior and debugging issues quickly is critical.
 
-![Sim execution logs and monitoring dashboard](/studio/openai-vs-n8n-vs-sim/logs.png)
+![Sim execution logs and monitoring dashboard](/blog/openai-vs-n8n-vs-sim/logs.png)
 
 #### Custom Integrations via MCP Protocol
 
diff --git a/apps/sim/content/blog/series-a/index.mdx b/apps/sim/content/blog/series-a/index.mdx
index 2c4c0daa14..e029c884a2 100644
--- a/apps/sim/content/blog/series-a/index.mdx
+++ b/apps/sim/content/blog/series-a/index.mdx
@@ -9,16 +9,16 @@ authors:
   - emir
 readingTime: 4
 tags: [Announcement, Funding, Series A, Sim, YCombinator]
-ogImage: /studio/series-a/cover.png
+ogImage: /blog/series-a/cover.png
 ogAlt: 'Sim team photo in front of neon logo'
 about: ['Artificial Intelligence', 'Agentic Workflows', 'Startups', 'Funding']
 timeRequired: PT4M
-canonical: https://sim.ai/studio/series-a
+canonical: https://sim.ai/blog/series-a
 featured: true
 draft: false
 ---
 
-![Sim team photo](/studio/series-a/team.jpg)
+![Sim team photo](/blog/series-a/team.jpg)
 
 ## Why we’re excited
 
diff --git a/apps/sim/content/blog/v0-5/index.mdx b/apps/sim/content/blog/v0-5/index.mdx
index 9d3bd131f9..b97609f41c 100644
--- a/apps/sim/content/blog/v0-5/index.mdx
+++ b/apps/sim/content/blog/v0-5/index.mdx
@@ -8,11 +8,11 @@ authors:
   - waleed
 readingTime: 8
 tags: [Release, Copilot, MCP, Observability, Collaboration, Integrations, Sim]
-ogImage: /studio/v0-5/cover.png
+ogImage: /blog/v0-5/cover.png
 ogAlt: 'Sim v0.5 release announcement'
 about: ['AI Agents', 'Workflow Automation', 'Developer Tools']
 timeRequired: PT8M
-canonical: https://sim.ai/studio/v0-5
+canonical: https://sim.ai/blog/v0-5
 featured: true
 draft: false
 ---
@@ -21,7 +21,7 @@ draft: false
 
 ## Copilot
 
-![Sim Copilot](/studio/v0-5/copilot.jpg)
+![Sim Copilot](/blog/v0-5/copilot.jpg)
 
 Copilot is a context-aware assistant embedded in the Sim editor. Unlike general-purpose AI assistants, Copilot has direct access to your workspace: workflows, block configurations, execution logs, connected credentials, and documentation. It can also search the web to pull in external context when needed.
 
@@ -45,7 +45,7 @@ For complex tasks, Copilot uses subagents—breaking requests into discrete oper
 
 ## MCP Deployment
 
-![MCP Deployment](/studio/v0-5/mcp.png)
+![MCP Deployment](/blog/v0-5/mcp.png)
 
 Deploy any workflow as an [MCP](https://modelcontextprotocol.io) server. Once deployed, the workflow becomes a callable tool for any MCP-compatible agent—[Claude Desktop](https://claude.ai/download), [Cursor](https://cursor.com), or your own applications.
 
@@ -57,7 +57,7 @@ This pattern scales to research pipelines, data processing workflows, approval c
 
 ## Logs & Dashboard
 
-![Logs & Dashboard](/studio/v0-5/dashboard.jpg)
+![Logs & Dashboard](/blog/v0-5/dashboard.jpg)
 
 Every workflow execution generates a full trace. Each block records its start time, end time, inputs, outputs, and any errors. For LLM blocks, we capture prompt tokens, completion tokens, and cost by model.
 
@@ -73,7 +73,7 @@ This level of observability is necessary when workflows handle production traffi
 
 ## Realtime Collaboration
 
-![Realtime Collaboration](/studio/v0-5/collaboration.png)
+![Realtime Collaboration](/blog/v0-5/collaboration.png)
 
 Multiple users can edit the same workflow simultaneously. Changes propagate in real time—you see teammates' cursors, block additions, and configuration updates as they happen.
 
@@ -83,7 +83,7 @@ This is particularly useful during development sessions where engineers, product
 
 ## Versioning
 
-![Versioning](/studio/v0-5/versioning.png)
+![Versioning](/blog/v0-5/versioning.png)
 
 Every deployment creates a new version. The version history shows who deployed what and when, with a preview of the workflow state at that point in time. Roll back to any previous version with one click—the live deployment updates immediately.
 
@@ -93,7 +93,7 @@ This matters when something breaks in production. You can instantly revert to th
 
 ## 100+ Integrations
 
-![Integrations](/studio/v0-5/integrations.png)
+![Integrations](/blog/v0-5/integrations.png)
 
 v0.5 adds **100+ integrations** with **300+ actions**. These cover the specific operations you need—not just generic CRUD, but actions like "send Slack message to channel," "create Jira ticket with custom fields," "query Postgres with parameterized SQL," or "enrich contact via Apollo."
 
@@ -130,7 +130,7 @@ Workflows can be triggered through multiple mechanisms:
 
 ## Knowledge Base
 
-![Knowledge Base](/studio/v0-5/kb.png)
+![Knowledge Base](/blog/v0-5/kb.png)
 
 Upload documents—PDFs, text files, markdown, HTML—and make them queryable by your agents. This is [RAG](https://en.wikipedia.org/wiki/Retrieval-augmented_generation) (Retrieval Augmented Generation) built directly into Sim.
 
diff --git a/apps/sim/lib/blog/seo.ts b/apps/sim/lib/blog/seo.ts
index 0d62048d06..ef314d2385 100644
--- a/apps/sim/lib/blog/seo.ts
+++ b/apps/sim/lib/blog/seo.ts
@@ -108,7 +108,7 @@ export function buildBreadcrumbJsonLd(post: BlogMeta) {
     '@type': 'BreadcrumbList',
     itemListElement: [
       { '@type': 'ListItem', position: 1, name: 'Home', item: 'https://sim.ai' },
-      { '@type': 'ListItem', position: 2, name: 'Sim Studio', item: 'https://sim.ai/studio' },
+      { '@type': 'ListItem', position: 2, name: 'Blog', item: 'https://sim.ai/blog' },
       { '@type': 'ListItem', position: 3, name: post.title, item: post.canonical },
     ],
   }
@@ -131,8 +131,8 @@ export function buildBlogJsonLd() {
   return {
     '@context': 'https://schema.org',
     '@type': 'Blog',
-    name: 'Sim Studio',
-    url: 'https://sim.ai/studio',
+    name: 'Sim Blog',
+    url: 'https://sim.ai/blog',
     description: 'Announcements, insights, and guides for building AI agent workflows.',
   }
 }
diff --git a/apps/sim/next.config.ts b/apps/sim/next.config.ts
index f1058f5834..e5975cc6e9 100644
--- a/apps/sim/next.config.ts
+++ b/apps/sim/next.config.ts
@@ -337,30 +337,30 @@ const nextConfig: NextConfig = {
       }
     )
 
-    // Redirect /building and /blog to /studio (legacy URL support)
+    // Redirect /building and /studio to /blog (legacy URL support)
     redirects.push(
       {
         source: '/building/:path*',
-        destination: 'https://sim.ai/studio/:path*',
+        destination: 'https://sim.ai/blog/:path*',
         permanent: true,
       },
       {
-        source: '/blog/:path*',
-        destination: 'https://sim.ai/studio/:path*',
+        source: '/studio/:path*',
+        destination: 'https://sim.ai/blog/:path*',
         permanent: true,
       }
     )
 
-    // Move root feeds to studio namespace
+    // Move root feeds to blog namespace
     redirects.push(
       {
         source: '/rss.xml',
-        destination: '/studio/rss.xml',
+        destination: '/blog/rss.xml',
         permanent: true,
       },
       {
         source: '/sitemap-images.xml',
-        destination: '/studio/sitemap-images.xml',
+        destination: '/blog/sitemap-images.xml',
         permanent: true,
       }
     )
diff --git a/apps/sim/public/studio/authors/emir.jpg b/apps/sim/public/blog/authors/emir.jpg
similarity index 100%
rename from apps/sim/public/studio/authors/emir.jpg
rename to apps/sim/public/blog/authors/emir.jpg
diff --git a/apps/sim/public/studio/authors/sid.jpg b/apps/sim/public/blog/authors/sid.jpg
similarity index 100%
rename from apps/sim/public/studio/authors/sid.jpg
rename to apps/sim/public/blog/authors/sid.jpg
diff --git a/apps/sim/public/studio/authors/vik.jpg b/apps/sim/public/blog/authors/vik.jpg
similarity index 100%
rename from apps/sim/public/studio/authors/vik.jpg
rename to apps/sim/public/blog/authors/vik.jpg
diff --git a/apps/sim/public/studio/authors/waleed.jpg b/apps/sim/public/blog/authors/waleed.jpg
similarity index 100%
rename from apps/sim/public/studio/authors/waleed.jpg
rename to apps/sim/public/blog/authors/waleed.jpg
diff --git a/apps/sim/public/studio/copilot/cover.png b/apps/sim/public/blog/copilot/cover.png
similarity index 100%
rename from apps/sim/public/studio/copilot/cover.png
rename to apps/sim/public/blog/copilot/cover.png
diff --git a/apps/sim/public/studio/emcn/cover.png b/apps/sim/public/blog/emcn/cover.png
similarity index 100%
rename from apps/sim/public/studio/emcn/cover.png
rename to apps/sim/public/blog/emcn/cover.png
diff --git a/apps/sim/public/studio/enterprise/access-control.png b/apps/sim/public/blog/enterprise/access-control.png
similarity index 100%
rename from apps/sim/public/studio/enterprise/access-control.png
rename to apps/sim/public/blog/enterprise/access-control.png
diff --git a/apps/sim/public/studio/enterprise/byok.png b/apps/sim/public/blog/enterprise/byok.png
similarity index 100%
rename from apps/sim/public/studio/enterprise/byok.png
rename to apps/sim/public/blog/enterprise/byok.png
diff --git a/apps/sim/public/studio/enterprise/compliance.png b/apps/sim/public/blog/enterprise/compliance.png
similarity index 100%
rename from apps/sim/public/studio/enterprise/compliance.png
rename to apps/sim/public/blog/enterprise/compliance.png
diff --git a/apps/sim/public/studio/enterprise/cover.png b/apps/sim/public/blog/enterprise/cover.png
similarity index 100%
rename from apps/sim/public/studio/enterprise/cover.png
rename to apps/sim/public/blog/enterprise/cover.png
diff --git a/apps/sim/public/studio/enterprise/integration-controls.png b/apps/sim/public/blog/enterprise/integration-controls.png
similarity index 100%
rename from apps/sim/public/studio/enterprise/integration-controls.png
rename to apps/sim/public/blog/enterprise/integration-controls.png
diff --git a/apps/sim/public/studio/enterprise/model-providers.png b/apps/sim/public/blog/enterprise/model-providers.png
similarity index 100%
rename from apps/sim/public/studio/enterprise/model-providers.png
rename to apps/sim/public/blog/enterprise/model-providers.png
diff --git a/apps/sim/public/studio/enterprise/platform-controls.png b/apps/sim/public/blog/enterprise/platform-controls.png
similarity index 100%
rename from apps/sim/public/studio/enterprise/platform-controls.png
rename to apps/sim/public/blog/enterprise/platform-controls.png
diff --git a/apps/sim/public/studio/enterprise/self-hosted.png b/apps/sim/public/blog/enterprise/self-hosted.png
similarity index 100%
rename from apps/sim/public/studio/enterprise/self-hosted.png
rename to apps/sim/public/blog/enterprise/self-hosted.png
diff --git a/apps/sim/public/studio/enterprise/sso.png b/apps/sim/public/blog/enterprise/sso.png
similarity index 100%
rename from apps/sim/public/studio/enterprise/sso.png
rename to apps/sim/public/blog/enterprise/sso.png
diff --git a/apps/sim/public/studio/executor/cover.png b/apps/sim/public/blog/executor/cover.png
similarity index 100%
rename from apps/sim/public/studio/executor/cover.png
rename to apps/sim/public/blog/executor/cover.png
diff --git a/apps/sim/public/studio/executor/edge-pruning.png b/apps/sim/public/blog/executor/edge-pruning.png
similarity index 100%
rename from apps/sim/public/studio/executor/edge-pruning.png
rename to apps/sim/public/blog/executor/edge-pruning.png
diff --git a/apps/sim/public/studio/executor/hitl-loop.png b/apps/sim/public/blog/executor/hitl-loop.png
similarity index 100%
rename from apps/sim/public/studio/executor/hitl-loop.png
rename to apps/sim/public/blog/executor/hitl-loop.png
diff --git a/apps/sim/public/studio/executor/loop-sentinels.png b/apps/sim/public/blog/executor/loop-sentinels.png
similarity index 100%
rename from apps/sim/public/studio/executor/loop-sentinels.png
rename to apps/sim/public/blog/executor/loop-sentinels.png
diff --git a/apps/sim/public/studio/multiplayer/cover.png b/apps/sim/public/blog/multiplayer/cover.png
similarity index 100%
rename from apps/sim/public/studio/multiplayer/cover.png
rename to apps/sim/public/blog/multiplayer/cover.png
diff --git a/apps/sim/public/studio/openai-vs-n8n-vs-sim/copilot.png b/apps/sim/public/blog/openai-vs-n8n-vs-sim/copilot.png
similarity index 100%
rename from apps/sim/public/studio/openai-vs-n8n-vs-sim/copilot.png
rename to apps/sim/public/blog/openai-vs-n8n-vs-sim/copilot.png
diff --git a/apps/sim/public/studio/openai-vs-n8n-vs-sim/logs.png b/apps/sim/public/blog/openai-vs-n8n-vs-sim/logs.png
similarity index 100%
rename from apps/sim/public/studio/openai-vs-n8n-vs-sim/logs.png
rename to apps/sim/public/blog/openai-vs-n8n-vs-sim/logs.png
diff --git a/apps/sim/public/studio/openai-vs-n8n-vs-sim/n8n.png b/apps/sim/public/blog/openai-vs-n8n-vs-sim/n8n.png
similarity index 100%
rename from apps/sim/public/studio/openai-vs-n8n-vs-sim/n8n.png
rename to apps/sim/public/blog/openai-vs-n8n-vs-sim/n8n.png
diff --git a/apps/sim/public/studio/openai-vs-n8n-vs-sim/openai.png b/apps/sim/public/blog/openai-vs-n8n-vs-sim/openai.png
similarity index 100%
rename from apps/sim/public/studio/openai-vs-n8n-vs-sim/openai.png
rename to apps/sim/public/blog/openai-vs-n8n-vs-sim/openai.png
diff --git a/apps/sim/public/studio/openai-vs-n8n-vs-sim/sim.png b/apps/sim/public/blog/openai-vs-n8n-vs-sim/sim.png
similarity index 100%
rename from apps/sim/public/studio/openai-vs-n8n-vs-sim/sim.png
rename to apps/sim/public/blog/openai-vs-n8n-vs-sim/sim.png
diff --git a/apps/sim/public/studio/openai-vs-n8n-vs-sim/templates.png b/apps/sim/public/blog/openai-vs-n8n-vs-sim/templates.png
similarity index 100%
rename from apps/sim/public/studio/openai-vs-n8n-vs-sim/templates.png
rename to apps/sim/public/blog/openai-vs-n8n-vs-sim/templates.png
diff --git a/apps/sim/public/studio/openai-vs-n8n-vs-sim/widgets.png b/apps/sim/public/blog/openai-vs-n8n-vs-sim/widgets.png
similarity index 100%
rename from apps/sim/public/studio/openai-vs-n8n-vs-sim/widgets.png
rename to apps/sim/public/blog/openai-vs-n8n-vs-sim/widgets.png
diff --git a/apps/sim/public/studio/openai-vs-n8n-vs-sim/workflow.png b/apps/sim/public/blog/openai-vs-n8n-vs-sim/workflow.png
similarity index 100%
rename from apps/sim/public/studio/openai-vs-n8n-vs-sim/workflow.png
rename to apps/sim/public/blog/openai-vs-n8n-vs-sim/workflow.png
diff --git a/apps/sim/public/studio/series-a/cover.png b/apps/sim/public/blog/series-a/cover.png
similarity index 100%
rename from apps/sim/public/studio/series-a/cover.png
rename to apps/sim/public/blog/series-a/cover.png
diff --git a/apps/sim/public/studio/series-a/team.jpg b/apps/sim/public/blog/series-a/team.jpg
similarity index 100%
rename from apps/sim/public/studio/series-a/team.jpg
rename to apps/sim/public/blog/series-a/team.jpg
diff --git a/apps/sim/public/blog/thumbnails/copilot.webp b/apps/sim/public/blog/thumbnails/copilot.webp
new file mode 100644
index 0000000000000000000000000000000000000000..50c0e934868c35eaba2c70a42a0ee85bf3eeb487
GIT binary patch
literal 6774
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
YvP1B9mM)8D*5H;&VH;%=bH)$=0It$Y?f?J)

literal 0
HcmV?d00001

diff --git a/apps/sim/public/blog/thumbnails/enterprise.webp b/apps/sim/public/blog/thumbnails/enterprise.webp
new file mode 100644
index 0000000000000000000000000000000000000000..4e73f5af6b56d9e485277cabdec42f35b4ea55c4
GIT binary patch
literal 10156
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
Bqi6sC

literal 0
HcmV?d00001

diff --git a/apps/sim/public/blog/thumbnails/executor.webp b/apps/sim/public/blog/thumbnails/executor.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6b133cdcfdea9de93bc8e172cffb48c53c1eeaff
GIT binary patch
literal 3256
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

literal 0
HcmV?d00001

diff --git a/apps/sim/public/blog/thumbnails/multiplayer.webp b/apps/sim/public/blog/thumbnails/multiplayer.webp
new file mode 100644
index 0000000000000000000000000000000000000000..bf0fb376a00553b1ec0311ee0d3b566d26934630
GIT binary patch
literal 946
zcmWIYbaPw9%)k)t>J$(bU=hK^z`!5?#IcMFM;I6!eF8jGfILR=4?q5QbT}2NNKVlI
zDYzu!`|}wc|I$~tJ+%M#*#2L?)6x~pK-~%nK$AAeGt6bwieo&=U^mfYk<Zd4i<J~_
za7b(r;>^r@Shi7GY}T{S?=-$Kd}Z9W{tWxPbPx6)d<*z$^V4KHcdIY%I)5QD?~CWp
zlB36%9<N~t_lZf+vpT>E;@*EE9Ap}zC+gsJ<5Eh=&zKs2y%{?WM1SU<7CT+|!H#DQ
z(N~h<Tg-)@vplF4wUo&YkM7Pj-ZiU1yQhKqZ^}ZB+6zk+-=)^a%dG5Q@mKZ@*lg{b
zlNaSh{>M07j&k_Qy-d$QTsDC%Y{t7~3%Fi(_plz1U|0vVBc`;0H0}%rhJXK8tYV1!
z`%7-&pAXYls{15}NX%~J*!O0Qm{pwf_3kTIrzF_q*0EWCJz?ZJ@#C@|&gDCdzCL{a
zPV<oU<J_6vk5i0!%Zy|HUio5hM31N3X_C?|qsZsC`|bCN)?GG#|14Iv#c}h?sJ+hL
zuX_KE@NoQc%s((~p9~}0N7iXm{@pZ;t5{@W?yWTKsnSB0itmrOb2AUEs53vZqOC4s
zc8U(SVzBR`?sv=%(+s?V<1hYuq}MwqMQ4_m(%(15em8Eu{~;waZ|41X5fXamGN*7}
zTwU>TQMqT&0j1W=Fb_6^vyDfd$1Q8Up%BRJu%lzwEaP;wM{$xI%THeS{q|$YT#+eh
z|5bi_*e(8(cvVO(c|*AKVeL7au72zJ&hmZz=6Ab{-fAvSFlNe9JM;VF+LBgzU5Rta
zcYmr>#lL2J5K!l)|KPwf>BBYW^y3`1fAjfel^C{S^4<IiFF%PyUc1j`q*H%q--!im
zr^DZSxrcvEuiVSAbjI12t0WpNTdqIfmiuy6;Kg_QtbRJ_+;#c=^~NN%$Zc#EtGe$`
zzRn{w+xFzr^KTyn-TUizP$=@M#}X#fy>={*?;h;iQNmfr5w0~yrDCP$1<{m=^Xk{k
z+<sV|ZH3a}%$6FqfVkI&0oQV~FI%pev-mdW3gZP`;`%WsX19L(X&+)JvF(9@PNYJ|
zgZS3a5?NKf+LBb}PF6*Zy#n3`UawP>?OHJ5${aWDi-{pY@hiDcUz;g@@>RxiHmC1@
z4kTsVtlzgZ=raG!JB<YlJ3d8icWF#8j+=X~fLrRx>(95BvuEt;FKRp`$oIDam<_=I
E08Kr=6aWAK

literal 0
HcmV?d00001

diff --git a/apps/sim/public/blog/thumbnails/series-a.webp b/apps/sim/public/blog/thumbnails/series-a.webp
new file mode 100644
index 0000000000000000000000000000000000000000..0326140d58c137b290a31b7c4353cfa24f1d122f
GIT binary patch
literal 4612
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

literal 0
HcmV?d00001

diff --git a/apps/sim/public/blog/thumbnails/v0-5.webp b/apps/sim/public/blog/thumbnails/v0-5.webp
new file mode 100644
index 0000000000000000000000000000000000000000..cc9718399668c2ea5dfa947f67edd74a8d5baf9c
GIT binary patch
literal 3548
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
W>BBng+6|3ocftjyMpe?!hrj?dGR~y{

literal 0
HcmV?d00001

diff --git a/apps/sim/public/studio/v0-5/collaboration.jpg b/apps/sim/public/blog/v0-5/collaboration.jpg
similarity index 100%
rename from apps/sim/public/studio/v0-5/collaboration.jpg
rename to apps/sim/public/blog/v0-5/collaboration.jpg
diff --git a/apps/sim/public/studio/v0-5/collaboration.png b/apps/sim/public/blog/v0-5/collaboration.png
similarity index 100%
rename from apps/sim/public/studio/v0-5/collaboration.png
rename to apps/sim/public/blog/v0-5/collaboration.png
diff --git a/apps/sim/public/studio/v0-5/copilot.jpg b/apps/sim/public/blog/v0-5/copilot.jpg
similarity index 100%
rename from apps/sim/public/studio/v0-5/copilot.jpg
rename to apps/sim/public/blog/v0-5/copilot.jpg
diff --git a/apps/sim/public/studio/v0-5/cover.png b/apps/sim/public/blog/v0-5/cover.png
similarity index 100%
rename from apps/sim/public/studio/v0-5/cover.png
rename to apps/sim/public/blog/v0-5/cover.png
diff --git a/apps/sim/public/studio/v0-5/dashboard.jpg b/apps/sim/public/blog/v0-5/dashboard.jpg
similarity index 100%
rename from apps/sim/public/studio/v0-5/dashboard.jpg
rename to apps/sim/public/blog/v0-5/dashboard.jpg
diff --git a/apps/sim/public/studio/v0-5/integrations.png b/apps/sim/public/blog/v0-5/integrations.png
similarity index 100%
rename from apps/sim/public/studio/v0-5/integrations.png
rename to apps/sim/public/blog/v0-5/integrations.png
diff --git a/apps/sim/public/studio/v0-5/kb.png b/apps/sim/public/blog/v0-5/kb.png
similarity index 100%
rename from apps/sim/public/studio/v0-5/kb.png
rename to apps/sim/public/blog/v0-5/kb.png
diff --git a/apps/sim/public/studio/v0-5/mcp.png b/apps/sim/public/blog/v0-5/mcp.png
similarity index 100%
rename from apps/sim/public/studio/v0-5/mcp.png
rename to apps/sim/public/blog/v0-5/mcp.png
diff --git a/apps/sim/public/studio/v0-5/versioning.png b/apps/sim/public/blog/v0-5/versioning.png
similarity index 100%
rename from apps/sim/public/studio/v0-5/versioning.png
rename to apps/sim/public/blog/v0-5/versioning.png
diff --git a/apps/sim/public/landing/docs-getting-started.svg b/apps/sim/public/landing/docs-getting-started.svg
new file mode 100644
index 0000000000..e34beec1f3
--- /dev/null
+++ b/apps/sim/public/landing/docs-getting-started.svg
@@ -0,0 +1,21 @@
+<svg width="591" height="476" viewBox="0 0 591 476" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.30078" y="1.29688" width="587.97" height="472.934" stroke="#313131" stroke-width="2.6011"/>
+<path d="M308.405 122.733V109.269H311.485V110.587H309.833V121.415H311.485V122.733H308.405ZM317.474 121.336L314.298 110.905L314.012 109.952V109.889H315.775L315.806 109.952L316.06 110.905L317.934 117.494C318.103 118.097 318.225 118.594 318.299 118.986C318.373 119.378 318.41 119.574 318.41 119.574C318.41 119.574 318.447 119.378 318.521 118.986C318.606 118.594 318.728 118.097 318.887 117.494L320.649 111.159L320.712 110.905L320.966 109.952L320.982 109.889H322.903L323.158 110.905L324.983 117.494C325.132 118.108 325.243 118.61 325.317 119.002C325.401 119.394 325.444 119.589 325.444 119.589C325.444 119.589 325.481 119.394 325.555 119.002C325.64 118.61 325.761 118.108 325.92 117.494L327.778 110.905L328.032 109.952L328.064 109.889H329.81V109.952L329.508 110.905L326.381 121.336H324.491L322.443 114.144C322.274 113.54 322.147 113.043 322.062 112.651C321.988 112.26 321.951 112.064 321.951 112.064C321.951 112.064 321.909 112.26 321.824 112.651C321.739 113.043 321.607 113.54 321.427 114.144L319.347 121.336H317.474ZM330.601 121.336V109.889H338.111V111.333H332.252V114.556H336.952V116.017H332.252V121.336H330.601ZM337.5 117.875V116.525H342.374V117.875H337.5ZM347.689 121.495C346.737 121.495 345.927 121.251 345.26 120.764C344.604 120.267 344.106 119.579 343.768 118.7C343.429 117.811 343.259 116.779 343.259 115.604C343.259 114.429 343.429 113.403 343.768 112.524C344.106 111.635 344.604 110.947 345.26 110.46C345.927 109.973 346.737 109.73 347.689 109.73C348.642 109.73 349.446 109.973 350.103 110.46C350.769 110.947 351.272 111.63 351.611 112.508C351.96 113.387 352.135 114.419 352.135 115.604C352.135 116.79 351.96 117.827 351.611 118.716C351.272 119.595 350.769 120.277 350.103 120.764C349.446 121.251 348.642 121.495 347.689 121.495ZM347.689 120.05C348.599 120.05 349.282 119.648 349.737 118.843C350.203 118.028 350.436 116.949 350.436 115.604C350.436 114.26 350.203 113.186 349.737 112.381C349.282 111.577 348.599 111.175 347.689 111.175C346.789 111.175 346.107 111.577 345.641 112.381C345.186 113.175 344.958 114.249 344.958 115.604C344.958 116.959 345.186 118.039 345.641 118.843C346.107 119.648 346.789 120.05 347.689 120.05ZM357.419 121.495C356.466 121.495 355.657 121.251 354.99 120.764C354.333 120.267 353.836 119.579 353.497 118.7C353.159 117.811 352.989 116.779 352.989 115.604C352.989 114.429 353.159 113.403 353.497 112.524C353.836 111.635 354.333 110.947 354.99 110.46C355.657 109.973 356.466 109.73 357.419 109.73C358.372 109.73 359.176 109.973 359.832 110.46C360.499 110.947 361.002 111.63 361.341 112.508C361.69 113.387 361.864 114.419 361.864 115.604C361.864 116.79 361.69 117.827 361.341 118.716C361.002 119.595 360.499 120.277 359.832 120.764C359.176 121.251 358.372 121.495 357.419 121.495ZM357.419 120.05C358.329 120.05 359.012 119.648 359.467 118.843C359.933 118.028 360.166 116.949 360.166 115.604C360.166 114.26 359.933 113.186 359.467 112.381C359.012 111.577 358.329 111.175 357.419 111.175C356.519 111.175 355.836 111.577 355.371 112.381C354.916 113.175 354.688 114.249 354.688 115.604C354.688 116.959 354.916 118.039 355.371 118.843C355.836 119.648 356.519 120.05 357.419 120.05ZM364.784 121.336V113.08H362.323V111.826C363.022 111.815 363.561 111.762 363.943 111.667C364.324 111.571 364.599 111.386 364.768 111.111C364.948 110.836 365.075 110.428 365.149 109.889H366.435V121.336H364.784ZM372.147 121.495C371.216 121.495 370.422 121.257 369.766 120.78C369.12 120.293 368.628 119.637 368.289 118.811C367.961 117.975 367.797 117.028 367.797 115.969C367.797 114.699 367.988 113.598 368.369 112.667C368.75 111.725 369.29 111 369.988 110.492C370.687 109.984 371.507 109.73 372.449 109.73C373.084 109.73 373.666 109.841 374.196 110.063C374.735 110.275 375.185 110.598 375.545 111.032C375.916 111.466 376.159 112.011 376.275 112.667L374.688 112.937H374.624C374.561 112.387 374.328 111.958 373.926 111.651C373.523 111.333 373.037 111.175 372.465 111.175C371.851 111.175 371.317 111.355 370.861 111.714C370.406 112.064 370.052 112.545 369.798 113.159C369.544 113.773 369.411 114.477 369.401 115.271C369.401 115.313 369.395 115.356 369.385 115.398C369.385 115.44 369.385 115.498 369.385 115.573C369.639 115.054 370.036 114.625 370.576 114.286C371.115 113.937 371.756 113.763 372.497 113.763C373.206 113.763 373.846 113.921 374.418 114.239C375 114.556 375.46 114.996 375.799 115.557C376.148 116.118 376.323 116.769 376.323 117.51C376.323 118.282 376.143 118.97 375.783 119.574C375.423 120.177 374.931 120.648 374.307 120.987C373.682 121.325 372.962 121.495 372.147 121.495ZM372.179 120.05C372.655 120.05 373.079 119.939 373.449 119.716C373.82 119.494 374.106 119.193 374.307 118.811C374.518 118.43 374.624 117.996 374.624 117.51C374.624 116.79 374.397 116.202 373.942 115.747C373.486 115.292 372.899 115.064 372.179 115.064C371.502 115.064 370.941 115.276 370.496 115.7C370.062 116.112 369.755 116.647 369.575 117.303C369.628 118.15 369.898 118.822 370.385 119.32C370.872 119.806 371.47 120.05 372.179 120.05ZM382.857 109.269V122.733H379.777V121.415H381.444V110.587H379.777V109.269H382.857Z" fill="#FDFDF8"/>
+<path d="M364.041 321.664V320.314H368.915V321.664H364.041ZM369.833 321.664V320.314H374.707V321.664H369.833ZM378.66 323.442V321.886L384.439 319.504L378.66 317.155V315.583L386.376 318.838V320.187L378.66 323.442ZM393.356 325.125V313.678H396.96C397.775 313.678 398.527 313.82 399.215 314.106C399.914 314.381 400.517 314.778 401.025 315.297C401.533 315.805 401.925 316.408 402.2 317.107C402.486 317.806 402.629 318.568 402.629 319.393C402.629 320.219 402.486 320.981 402.2 321.68C401.925 322.378 401.533 322.987 401.025 323.506C400.517 324.014 399.914 324.411 399.215 324.696C398.527 324.982 397.775 325.125 396.96 325.125H393.356ZM395.008 323.68H396.96C397.733 323.68 398.416 323.495 399.009 323.124C399.612 322.754 400.083 322.246 400.422 321.6C400.76 320.955 400.93 320.219 400.93 319.393C400.93 318.568 400.76 317.832 400.422 317.186C400.083 316.541 399.612 316.038 399.009 315.678C398.416 315.308 397.733 315.122 396.96 315.122H395.008V323.68ZM403.815 325.125V313.678H411.325V315.122H405.466V318.345H410.166V319.806H405.466V323.68H411.325V325.125H403.815ZM412.459 325.125V313.678H417.159C418.291 313.678 419.18 313.985 419.826 314.598C420.472 315.202 420.795 316.017 420.795 317.044C420.795 317.71 420.646 318.303 420.35 318.822C420.064 319.33 419.646 319.727 419.096 320.013C418.556 320.298 417.91 320.441 417.159 320.441H414.11V325.125H412.459ZM414.11 318.996H416.968C417.646 318.996 418.17 318.822 418.54 318.472C418.911 318.113 419.096 317.636 419.096 317.044C419.096 316.451 418.911 315.985 418.54 315.646C418.17 315.297 417.646 315.122 416.968 315.122H414.11V318.996ZM421.755 325.125V313.678H423.406V323.68H428.963V325.125H421.755ZM433.978 325.284C433.152 325.284 432.396 325.141 431.708 324.855C431.02 324.559 430.422 324.146 429.913 323.617C429.405 323.087 429.008 322.468 428.723 321.759C428.447 321.039 428.31 320.251 428.31 319.393C428.31 318.547 428.447 317.769 428.723 317.059C429.008 316.34 429.405 315.715 429.913 315.186C430.422 314.657 431.02 314.249 431.708 313.963C432.396 313.667 433.152 313.519 433.978 313.519C434.793 313.519 435.545 313.667 436.233 313.963C436.931 314.249 437.534 314.657 438.043 315.186C438.551 315.705 438.942 316.324 439.217 317.044C439.503 317.753 439.646 318.536 439.646 319.393C439.646 320.251 439.503 321.039 439.217 321.759C438.942 322.479 438.551 323.103 438.043 323.633C437.534 324.151 436.931 324.559 436.233 324.855C435.545 325.141 434.793 325.284 433.978 325.284ZM433.978 323.839C434.751 323.839 435.433 323.648 436.026 323.267C436.629 322.876 437.101 322.347 437.439 321.68C437.778 321.013 437.947 320.251 437.947 319.393C437.947 318.536 437.778 317.774 437.439 317.107C437.101 316.44 436.629 315.916 436.026 315.535C435.433 315.154 434.751 314.964 433.978 314.964C433.205 314.964 432.517 315.154 431.914 315.535C431.321 315.916 430.855 316.44 430.517 317.107C430.178 317.774 430.009 318.536 430.009 319.393C430.009 320.251 430.178 321.013 430.517 321.68C430.855 322.347 431.321 322.876 431.914 323.267C432.517 323.648 433.205 323.839 433.978 323.839ZM442.807 325.125V320.346L439.409 314.694L438.837 313.741V313.678H440.631L440.663 313.741L441.219 314.694L443.632 318.774L446.077 314.694L446.633 313.741L446.681 313.678H448.427V313.741L447.855 314.694L444.458 320.346V325.125H442.807ZM454.464 326.522V313.058H457.544V314.376H455.893V325.204H457.544V326.522H454.464ZM459.977 325.125V325.061L460.358 324.109L464.471 313.678H466.074L470.186 324.109L470.583 325.061V325.125H468.805L468.773 325.061L468.424 324.109L467.725 322.283H462.788L462.089 324.109L461.724 325.061L461.692 325.125H459.977ZM463.343 320.838H467.17L465.264 315.869L463.343 320.838ZM476.005 325.284C475.274 325.284 474.576 325.162 473.909 324.919C473.242 324.675 472.644 324.31 472.115 323.823C471.596 323.336 471.183 322.728 470.876 321.997C470.58 321.256 470.432 320.388 470.432 319.393C470.432 318.409 470.585 317.552 470.892 316.821C471.199 316.08 471.612 315.466 472.131 314.98C472.66 314.493 473.258 314.127 473.925 313.884C474.592 313.641 475.285 313.519 476.005 313.519C476.862 313.519 477.64 313.667 478.339 313.963C479.037 314.26 479.614 314.678 480.069 315.218C480.535 315.747 480.826 316.371 480.942 317.091L479.307 317.472H479.244C479.169 316.975 478.979 316.541 478.672 316.17C478.376 315.789 477.995 315.493 477.529 315.281C477.074 315.069 476.566 314.964 476.005 314.964C475.264 314.964 474.597 315.138 474.004 315.488C473.422 315.826 472.962 316.324 472.623 316.98C472.295 317.636 472.131 318.441 472.131 319.393C472.131 320.346 472.295 321.156 472.623 321.823C472.962 322.479 473.422 322.982 474.004 323.331C474.597 323.67 475.264 323.839 476.005 323.839C476.851 323.839 477.566 323.611 478.148 323.156C478.741 322.691 479.106 322.045 479.244 321.219L480.942 321.473C480.805 322.288 480.503 322.982 480.037 323.553C479.572 324.114 478.99 324.543 478.291 324.839C477.603 325.136 476.841 325.284 476.005 325.284ZM484.222 325.125V315.122H480.618V313.678H489.461V315.122H485.873V325.125H484.222ZM492.053 324.109V325.061V325.125H490.401V325.061V324.109V314.694V313.741V313.678H492.053V313.741V314.694V324.109ZM497.23 325.125L493.293 314.694L492.927 313.741V313.678H494.69L494.722 313.741L495.071 314.694L498.056 322.934L501.025 314.694L501.374 313.741L501.406 313.678H503.136V313.741L502.771 314.694L498.834 325.125H497.23ZM503.889 325.125V313.678H511.398V315.122H505.54V318.345H510.239V319.806H505.54V323.68H511.398V325.125H503.889ZM517.792 313.058V326.522H514.711V325.204H516.379V314.376H514.711V313.058H517.792Z" fill="#FDFDF8"/>
+<rect x="137.172" y="159.391" width="259.957" height="15.0011" rx="7.50055" fill="#F9D0DE"/>
+<rect x="137.172" y="188.359" width="140.758" height="15.0011" rx="7.50055" fill="#FF22FC"/>
+<rect x="137.172" y="217.32" width="175.307" height="15.0011" rx="7.50055" fill="#64FEFB"/>
+<path d="M382.049 117.258H416.553C418.746 117.258 420.523 119.035 420.523 121.227V247.686C420.523 249.878 418.746 251.655 416.553 251.655H122.176C119.984 251.655 118.207 249.878 118.207 247.686V121.227C118.207 119.035 119.984 117.258 122.176 117.258H299.261" stroke="#4D4D4D" stroke-width="1.98464"/>
+<path d="M199.48 339.633L428.597 339.633L532.697 339.633C534.889 339.633 536.666 337.856 536.666 335.664L536.666 302.475C536.666 300.283 534.889 298.506 532.697 298.506L199.48 298.506C197.287 298.506 195.51 300.283 195.51 302.475L195.51 335.663C195.51 337.856 197.287 339.633 199.48 339.633Z" stroke="#4D4D4D" stroke-width="1.98464"/>
+<rect x="430.33" y="213.617" width="18.23" height="18.23" transform="rotate(90 430.33 213.617)" fill="#B4FDF9"/>
+<path d="M416.953 223.126L417.695 222.37L420.321 225.009L420.321 218.026L421.49 218.026L421.49 224.996L424.129 222.384L424.857 223.14L420.898 227.071L416.953 223.126Z" fill="#1B1B1B"/>
+<rect width="15.3731" height="15.3731" rx="3.08019" transform="matrix(1 0 0 -1 236.812 326.75)" fill="#FA4EDF"/>
+<rect width="15.3731" height="15.3731" rx="3.08019" transform="matrix(1 0 0 -1 311.371 326.75)" fill="#FA4EDF"/>
+<rect x="212.579" y="311.999" width="14.141" height="14.141" rx="2.46415" stroke="#FFCC02" stroke-width="1.23208"/>
+<path d="M289.602 311.999H298.814C300.175 311.999 301.278 313.102 301.278 314.463V323.676C301.278 325.037 300.175 326.14 298.814 326.14H289.602C288.241 326.14 287.138 325.037 287.138 323.676V314.463C287.138 313.102 288.241 311.999 289.602 311.999Z" stroke="#FFCC02" stroke-width="1.23208"/>
+<rect width="15.3731" height="15.3731" rx="3.08019" transform="matrix(1 0 0 -1 261.672 326.766)" fill="#FA4EDF" fill-opacity="0.48"/>
+<rect width="15.3731" height="15.3731" rx="3.08019" transform="matrix(1 0 0 -1 336.221 326.766)" fill="#FA4EDF" fill-opacity="0.48"/>
+<path d="M217.22 117.364V95.1378C217.22 92.9457 215.443 91.1686 213.251 91.1686H172.831C170.638 91.1686 168.861 89.3915 168.861 87.1993V2.00781" stroke="#4D4D4D" stroke-width="1.98464"/>
+<path d="M221.242 252.867V296.692" stroke="#4D4D4D" stroke-width="1.98464"/>
+<path d="M496.906 339.617V472.937" stroke="#4D4D4D" stroke-width="1.98464"/>
+</svg>
diff --git a/apps/sim/public/landing/docs-intro.svg b/apps/sim/public/landing/docs-intro.svg
new file mode 100644
index 0000000000..4a4e8cec2d
--- /dev/null
+++ b/apps/sim/public/landing/docs-intro.svg
@@ -0,0 +1,16 @@
+<svg width="591" height="476" viewBox="0 0 591 476" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.30078" y="1.29688" width="587.97" height="472.934" stroke="#313131" stroke-width="2.6011"/>
+<rect x="116.34" y="90.0234" width="357.91" height="295.456" rx="3.96928" stroke="#4D4D4D" stroke-width="1.98464"/>
+<path d="M118.119 138.312H473.765" stroke="#4D4D4D" stroke-width="1.98464"/>
+<path d="M444.871 118.25V118.194L445.399 117.361L448.191 112.971L445.788 109.123L445.26 108.289V108.234H446.857L446.885 108.289L447.413 109.123L449.011 111.665L450.581 109.123L451.095 108.289L451.136 108.234H452.692V108.289L452.164 109.123L449.761 112.887L452.567 117.361L453.095 118.194V118.25H451.498L451.456 118.194L450.942 117.361L448.955 114.179L446.982 117.361L446.455 118.194L446.413 118.25H444.871Z" fill="#FDFDF8"/>
+<path d="M428.855 114.304L417.394 114.304L417.394 112.999L428.855 112.999L428.855 114.304Z" fill="#FDFDF8"/>
+<path d="M139.119 170.89V169.541H143.993V170.89H139.119ZM144.911 170.89V169.541H149.785V170.89H144.911ZM153.738 172.669V171.113L159.517 168.731L153.738 166.381V164.809L161.454 168.064V169.414L153.738 172.669ZM168.434 174.352V162.904H172.039C172.854 162.904 173.605 163.047 174.293 163.333C174.992 163.608 175.595 164.005 176.103 164.524C176.611 165.032 177.003 165.635 177.278 166.334C177.564 167.032 177.707 167.794 177.707 168.62C177.707 169.446 177.564 170.208 177.278 170.906C177.003 171.605 176.611 172.213 176.103 172.732C175.595 173.24 174.992 173.637 174.293 173.923C173.605 174.209 172.854 174.352 172.039 174.352H168.434ZM170.086 172.907H172.039C172.811 172.907 173.494 172.722 174.087 172.351C174.69 171.981 175.161 171.473 175.5 170.827C175.839 170.181 176.008 169.446 176.008 168.62C176.008 167.794 175.839 167.059 175.5 166.413C175.161 165.767 174.69 165.265 174.087 164.905C173.494 164.534 172.811 164.349 172.039 164.349H170.086V172.907ZM178.893 174.352V162.904H186.403V164.349H180.544V167.572H185.244V169.033H180.544V172.907H186.403V174.352H178.893ZM187.537 174.352V162.904H192.237C193.369 162.904 194.259 163.211 194.904 163.825C195.55 164.428 195.873 165.243 195.873 166.27C195.873 166.937 195.725 167.53 195.428 168.048C195.142 168.556 194.724 168.953 194.174 169.239C193.634 169.525 192.988 169.668 192.237 169.668H189.188V174.352H187.537ZM189.188 168.223H192.046C192.724 168.223 193.248 168.048 193.618 167.699C193.989 167.339 194.174 166.863 194.174 166.27C194.174 165.677 193.989 165.212 193.618 164.873C193.248 164.524 192.724 164.349 192.046 164.349H189.188V168.223ZM196.833 174.352V162.904H198.484V172.907H204.041V174.352H196.833ZM209.056 174.51C208.231 174.51 207.474 174.367 206.786 174.082C206.098 173.785 205.5 173.372 204.992 172.843C204.484 172.314 204.087 171.695 203.801 170.986C203.526 170.266 203.388 169.477 203.388 168.62C203.388 167.773 203.526 166.995 203.801 166.286C204.087 165.566 204.484 164.942 204.992 164.412C205.5 163.883 206.098 163.476 206.786 163.19C207.474 162.894 208.231 162.745 209.056 162.745C209.871 162.745 210.623 162.894 211.311 163.19C212.009 163.476 212.613 163.883 213.121 164.412C213.629 164.931 214.02 165.55 214.296 166.27C214.581 166.979 214.724 167.763 214.724 168.62C214.724 169.477 214.581 170.266 214.296 170.986C214.02 171.705 213.629 172.33 213.121 172.859C212.613 173.378 212.009 173.785 211.311 174.082C210.623 174.367 209.871 174.51 209.056 174.51ZM209.056 173.066C209.829 173.066 210.512 172.875 211.104 172.494C211.708 172.102 212.179 171.573 212.517 170.906C212.856 170.239 213.025 169.477 213.025 168.62C213.025 167.763 212.856 167 212.517 166.334C212.179 165.667 211.708 165.143 211.104 164.762C210.512 164.381 209.829 164.19 209.056 164.19C208.283 164.19 207.595 164.381 206.992 164.762C206.399 165.143 205.934 165.667 205.595 166.334C205.256 167 205.087 167.763 205.087 168.62C205.087 169.477 205.256 170.239 205.595 170.906C205.934 171.573 206.399 172.102 206.992 172.494C207.595 172.875 208.283 173.066 209.056 173.066ZM217.885 174.352V169.573L214.487 163.92L213.915 162.968V162.904H215.71L215.741 162.968L216.297 163.92L218.71 168.001L221.155 163.92L221.711 162.968L221.759 162.904H223.505V162.968L222.934 163.92L219.536 169.573V174.352H217.885ZM229.542 175.749V162.285H232.622V163.603H230.971V174.431H232.622V175.749H229.542ZM240.22 174.51C239.448 174.51 238.733 174.357 238.077 174.05C237.431 173.743 236.907 173.325 236.505 172.796C236.103 172.266 235.87 171.668 235.806 171.001L237.346 170.652H237.41C237.452 171.118 237.606 171.536 237.87 171.906C238.135 172.266 238.468 172.552 238.871 172.764C239.283 172.965 239.733 173.066 240.22 173.066C240.972 173.066 241.564 172.901 241.998 172.573C242.443 172.235 242.665 171.801 242.665 171.271C242.665 170.795 242.517 170.414 242.221 170.128C241.924 169.842 241.543 169.631 241.078 169.493L239.029 168.89C238.532 168.742 238.072 168.551 237.648 168.318C237.225 168.075 236.886 167.757 236.632 167.366C236.378 166.963 236.251 166.455 236.251 165.841C236.251 165.217 236.415 164.677 236.743 164.222C237.082 163.756 237.542 163.396 238.124 163.142C238.717 162.878 239.389 162.745 240.141 162.745C240.861 162.745 241.512 162.872 242.094 163.126C242.686 163.37 243.168 163.714 243.539 164.158C243.909 164.592 244.126 165.095 244.19 165.667L242.681 166.032H242.618C242.512 165.482 242.242 165.037 241.808 164.698C241.374 164.36 240.818 164.19 240.141 164.19C239.453 164.19 238.913 164.333 238.521 164.619C238.14 164.894 237.95 165.275 237.95 165.762C237.95 166.185 238.087 166.519 238.363 166.762C238.648 167.006 239.014 167.191 239.458 167.318L241.554 167.921C242.073 168.07 242.544 168.271 242.967 168.525C243.39 168.779 243.729 169.123 243.983 169.557C244.237 169.98 244.364 170.525 244.364 171.192C244.364 171.859 244.19 172.441 243.84 172.938C243.501 173.436 243.02 173.822 242.395 174.098C241.771 174.373 241.046 174.51 240.22 174.51ZM247.834 174.352V164.349H244.23V162.904H253.073V164.349H249.485V174.352H247.834ZM251.274 174.352V174.288L251.655 173.335L255.768 162.904H257.371L261.483 173.335L261.88 174.288V174.352H260.102L260.07 174.288L259.721 173.335L259.022 171.51H254.085L253.386 173.335L253.021 174.288L252.989 174.352H251.274ZM254.64 170.065H258.467L256.561 165.095L254.64 170.065ZM263.68 174.352V164.349H260.076V162.904H268.92V164.349H265.332V174.352H263.68ZM274.036 174.51C273.168 174.51 272.4 174.346 271.734 174.018C271.077 173.69 270.564 173.219 270.194 172.605C269.823 171.981 269.638 171.234 269.638 170.366V162.904H271.289V170.446C271.289 171.271 271.543 171.917 272.051 172.383C272.559 172.838 273.221 173.066 274.036 173.066C274.851 173.066 275.512 172.838 276.02 172.383C276.539 171.917 276.798 171.271 276.798 170.446V162.904H278.45V170.366C278.45 171.234 278.264 171.981 277.894 172.605C277.523 173.219 277.005 173.69 276.338 174.018C275.682 174.346 274.914 174.51 274.036 174.51ZM283.768 174.51C282.995 174.51 282.28 174.357 281.624 174.05C280.979 173.743 280.455 173.325 280.052 172.796C279.65 172.266 279.417 171.668 279.354 171.001L280.894 170.652H280.957C281 171.118 281.153 171.536 281.418 171.906C281.682 172.266 282.016 172.552 282.418 172.764C282.831 172.965 283.281 173.066 283.768 173.066C284.519 173.066 285.112 172.901 285.546 172.573C285.99 172.235 286.213 171.801 286.213 171.271C286.213 170.795 286.064 170.414 285.768 170.128C285.472 169.842 285.091 169.631 284.625 169.493L282.577 168.89C282.079 168.742 281.619 168.551 281.195 168.318C280.772 168.075 280.433 167.757 280.179 167.366C279.925 166.963 279.798 166.455 279.798 165.841C279.798 165.217 279.962 164.677 280.291 164.222C280.629 163.756 281.09 163.396 281.672 163.142C282.265 162.878 282.937 162.745 283.688 162.745C284.408 162.745 285.059 162.872 285.641 163.126C286.234 163.37 286.715 163.714 287.086 164.158C287.456 164.592 287.673 165.095 287.737 165.667L286.229 166.032H286.165C286.059 165.482 285.789 165.037 285.355 164.698C284.921 164.36 284.366 164.19 283.688 164.19C283 164.19 282.46 164.333 282.069 164.619C281.688 164.894 281.497 165.275 281.497 165.762C281.497 166.185 281.635 166.519 281.91 166.762C282.196 167.006 282.561 167.191 283.005 167.318L285.101 167.921C285.62 168.07 286.091 168.271 286.514 168.525C286.938 168.779 287.276 169.123 287.53 169.557C287.785 169.98 287.912 170.525 287.912 171.192C287.912 171.859 287.737 172.441 287.388 172.938C287.049 173.436 286.567 173.822 285.943 174.098C285.318 174.373 284.593 174.51 283.768 174.51ZM294.327 162.285V175.749H291.247V174.431H292.914V163.603H291.247V162.285H294.327Z" fill="#FDFDF8"/>
+<path opacity="0.3" d="M143.231 212.432C142.459 212.432 141.744 212.279 141.088 211.972C140.442 211.665 139.918 211.247 139.516 210.717C139.114 210.188 138.881 209.59 138.818 208.923L140.358 208.574H140.421C140.463 209.04 140.617 209.458 140.882 209.828C141.146 210.188 141.48 210.474 141.882 210.686C142.295 210.887 142.744 210.987 143.231 210.987C143.983 210.987 144.576 210.823 145.01 210.495C145.454 210.156 145.676 209.723 145.676 209.193C145.676 208.717 145.528 208.336 145.232 208.05C144.936 207.764 144.554 207.553 144.089 207.415L142.041 206.812C141.543 206.664 141.083 206.473 140.659 206.24C140.236 205.997 139.897 205.679 139.643 205.287C139.389 204.885 139.262 204.377 139.262 203.763C139.262 203.139 139.426 202.599 139.754 202.144C140.093 201.678 140.553 201.318 141.136 201.064C141.728 200.8 142.4 200.667 143.152 200.667C143.872 200.667 144.523 200.794 145.105 201.048C145.698 201.292 146.179 201.636 146.55 202.08C146.92 202.514 147.137 203.017 147.201 203.589L145.692 203.954H145.629C145.523 203.403 145.253 202.959 144.819 202.62C144.385 202.281 143.829 202.112 143.152 202.112C142.464 202.112 141.924 202.255 141.533 202.541C141.151 202.816 140.961 203.197 140.961 203.684C140.961 204.107 141.099 204.441 141.374 204.684C141.66 204.928 142.025 205.113 142.469 205.24L144.565 205.843C145.084 205.991 145.555 206.192 145.978 206.447C146.402 206.701 146.74 207.045 146.994 207.479C147.248 207.902 147.375 208.447 147.375 209.114C147.375 209.781 147.201 210.363 146.851 210.86C146.513 211.358 146.031 211.744 145.407 212.019C144.782 212.295 144.057 212.432 143.231 212.432ZM152.835 212.432C151.967 212.432 151.2 212.268 150.533 211.94C149.877 211.612 149.363 211.141 148.993 210.527C148.622 209.902 148.437 209.156 148.437 208.288V200.826H150.088V208.368C150.088 209.193 150.342 209.839 150.85 210.305C151.358 210.76 152.02 210.987 152.835 210.987C153.65 210.987 154.312 210.76 154.82 210.305C155.338 209.839 155.598 209.193 155.598 208.368V200.826H157.249V208.288C157.249 209.156 157.064 209.902 156.693 210.527C156.323 211.141 155.804 211.612 155.137 211.94C154.481 212.268 153.713 212.432 152.835 212.432ZM163.932 212.432C163.202 212.432 162.503 212.31 161.836 212.067C161.17 211.824 160.572 211.458 160.042 210.972C159.524 210.485 159.111 209.876 158.804 209.146C158.508 208.405 158.359 207.537 158.359 206.542C158.359 205.557 158.513 204.7 158.82 203.97C159.127 203.229 159.54 202.615 160.058 202.128C160.587 201.641 161.185 201.276 161.852 201.032C162.519 200.789 163.212 200.667 163.932 200.667C164.79 200.667 165.568 200.815 166.266 201.112C166.965 201.408 167.542 201.826 167.997 202.366C168.462 202.895 168.754 203.52 168.87 204.24L167.235 204.621H167.171C167.097 204.123 166.907 203.689 166.6 203.319C166.303 202.938 165.922 202.641 165.456 202.43C165.001 202.218 164.493 202.112 163.932 202.112C163.191 202.112 162.524 202.287 161.932 202.636C161.35 202.975 160.889 203.472 160.55 204.128C160.222 204.785 160.058 205.589 160.058 206.542C160.058 207.494 160.222 208.304 160.55 208.971C160.889 209.627 161.35 210.13 161.932 210.479C162.524 210.818 163.191 210.987 163.932 210.987C164.779 210.987 165.493 210.76 166.076 210.305C166.668 209.839 167.034 209.193 167.171 208.368L168.87 208.622C168.732 209.437 168.431 210.13 167.965 210.702C167.499 211.263 166.917 211.691 166.219 211.988C165.53 212.284 164.768 212.432 163.932 212.432ZM174.98 212.432C174.249 212.432 173.551 212.31 172.884 212.067C172.217 211.824 171.619 211.458 171.09 210.972C170.571 210.485 170.158 209.876 169.852 209.146C169.555 208.405 169.407 207.537 169.407 206.542C169.407 205.557 169.56 204.7 169.867 203.97C170.174 203.229 170.587 202.615 171.106 202.128C171.635 201.641 172.233 201.276 172.9 201.032C173.567 200.789 174.26 200.667 174.98 200.667C175.837 200.667 176.615 200.815 177.314 201.112C178.012 201.408 178.589 201.826 179.044 202.366C179.51 202.895 179.801 203.52 179.918 204.24L178.282 204.621H178.219C178.145 204.123 177.954 203.689 177.647 203.319C177.351 202.938 176.97 202.641 176.504 202.43C176.049 202.218 175.541 202.112 174.98 202.112C174.239 202.112 173.572 202.287 172.979 202.636C172.397 202.975 171.937 203.472 171.598 204.128C171.27 204.785 171.106 205.589 171.106 206.542C171.106 207.494 171.27 208.304 171.598 208.971C171.937 209.627 172.397 210.13 172.979 210.479C173.572 210.818 174.239 210.987 174.98 210.987C175.827 210.987 176.541 210.76 177.123 210.305C177.716 209.839 178.081 209.193 178.219 208.368L179.918 208.622C179.78 209.437 179.478 210.13 179.013 210.702C178.547 211.263 177.965 211.691 177.266 211.988C176.578 212.284 175.816 212.432 174.98 212.432ZM180.962 212.273V200.826H188.472V202.271H182.613V205.494H187.313V206.955H182.613V210.829H188.472V212.273H180.962ZM193.244 212.432C192.472 212.432 191.757 212.279 191.101 211.972C190.455 211.665 189.931 211.247 189.529 210.717C189.127 210.188 188.894 209.59 188.831 208.923L190.371 208.574H190.434C190.476 209.04 190.63 209.458 190.895 209.828C191.159 210.188 191.493 210.474 191.895 210.686C192.308 210.887 192.757 210.987 193.244 210.987C193.996 210.987 194.589 210.823 195.023 210.495C195.467 210.156 195.689 209.723 195.689 209.193C195.689 208.717 195.541 208.336 195.245 208.05C194.949 207.764 194.567 207.553 194.102 207.415L192.054 206.812C191.556 206.664 191.096 206.473 190.672 206.24C190.249 205.997 189.91 205.679 189.656 205.287C189.402 204.885 189.275 204.377 189.275 203.763C189.275 203.139 189.439 202.599 189.767 202.144C190.106 201.678 190.566 201.318 191.149 201.064C191.741 200.8 192.413 200.667 193.165 200.667C193.885 200.667 194.536 200.794 195.118 201.048C195.711 201.292 196.192 201.636 196.563 202.08C196.933 202.514 197.15 203.017 197.214 203.589L195.705 203.954H195.642C195.536 203.403 195.266 202.959 194.832 202.62C194.398 202.281 193.842 202.112 193.165 202.112C192.477 202.112 191.937 202.255 191.546 202.541C191.164 202.816 190.974 203.197 190.974 203.684C190.974 204.107 191.112 204.441 191.387 204.684C191.673 204.928 192.038 205.113 192.482 205.24L194.578 205.843C195.097 205.991 195.568 206.192 195.991 206.447C196.414 206.701 196.753 207.045 197.007 207.479C197.261 207.902 197.388 208.447 197.388 209.114C197.388 209.781 197.214 210.363 196.864 210.86C196.526 211.358 196.044 211.744 195.42 212.019C194.795 212.295 194.07 212.432 193.244 212.432ZM202.276 212.432C201.504 212.432 200.789 212.279 200.133 211.972C199.487 211.665 198.963 211.247 198.561 210.717C198.159 210.188 197.926 209.59 197.863 208.923L199.403 208.574H199.466C199.508 209.04 199.662 209.458 199.927 209.828C200.191 210.188 200.525 210.474 200.927 210.686C201.34 210.887 201.789 210.987 202.276 210.987C203.028 210.987 203.621 210.823 204.055 210.495C204.499 210.156 204.721 209.723 204.721 209.193C204.721 208.717 204.573 208.336 204.277 208.05C203.98 207.764 203.599 207.553 203.134 207.415L201.086 206.812C200.588 206.664 200.128 206.473 199.704 206.24C199.281 205.997 198.942 205.679 198.688 205.287C198.434 204.885 198.307 204.377 198.307 203.763C198.307 203.139 198.471 202.599 198.799 202.144C199.138 201.678 199.598 201.318 200.181 201.064C200.773 200.8 201.445 200.667 202.197 200.667C202.917 200.667 203.568 200.794 204.15 201.048C204.743 201.292 205.224 201.636 205.595 202.08C205.965 202.514 206.182 203.017 206.246 203.589L204.737 203.954H204.674C204.568 203.403 204.298 202.959 203.864 202.62C203.43 202.281 202.874 202.112 202.197 202.112C201.509 202.112 200.969 202.255 200.577 202.541C200.196 202.816 200.006 203.197 200.006 203.684C200.006 204.107 200.144 204.441 200.419 204.684C200.705 204.928 201.07 205.113 201.514 205.24L203.61 205.843C204.129 205.991 204.6 206.192 205.023 206.447C205.446 206.701 205.785 207.045 206.039 207.479C206.293 207.902 206.42 208.447 206.42 209.114C206.42 209.781 206.246 210.363 205.896 210.86C205.558 211.358 205.076 211.744 204.452 212.019C203.827 212.295 203.102 212.432 202.276 212.432Z" fill="#FDFDF8"/>
+<path opacity="0.3" d="M143.517 236.049C142.565 236.049 141.755 235.806 141.088 235.319C140.432 234.822 139.934 234.134 139.596 233.255C139.257 232.366 139.087 231.334 139.087 230.159C139.087 228.984 139.257 227.957 139.596 227.079C139.934 226.19 140.432 225.502 141.088 225.015C141.755 224.528 142.565 224.284 143.517 224.284C144.47 224.284 145.274 224.528 145.93 225.015C146.597 225.502 147.1 226.184 147.439 227.063C147.788 227.941 147.963 228.973 147.963 230.159C147.963 231.344 147.788 232.382 147.439 233.271C147.1 234.149 146.597 234.832 145.93 235.319C145.274 235.806 144.47 236.049 143.517 236.049ZM143.517 234.605C144.427 234.605 145.11 234.202 145.565 233.398C146.031 232.583 146.264 231.503 146.264 230.159C146.264 228.815 146.031 227.74 145.565 226.936C145.11 226.131 144.427 225.729 143.517 225.729C142.617 225.729 141.935 226.131 141.469 226.936C141.014 227.73 140.786 228.804 140.786 230.159C140.786 231.514 141.014 232.593 141.469 233.398C141.935 234.202 142.617 234.605 143.517 234.605ZM150.882 235.891V227.635H148.421V226.38C149.12 226.37 149.66 226.317 150.041 226.221C150.422 226.126 150.697 225.941 150.866 225.666C151.046 225.391 151.173 224.983 151.247 224.443H152.534V235.891H150.882ZM153.927 232.429V231.08H158.801V232.429H153.927ZM163.783 236.049C162.989 236.049 162.28 235.917 161.656 235.652C161.031 235.377 160.539 234.986 160.179 234.478C159.819 233.969 159.639 233.356 159.639 232.636C159.639 231.98 159.83 231.403 160.211 230.905C160.592 230.397 161.095 230.043 161.719 229.841C161.211 229.619 160.798 229.28 160.481 228.825C160.163 228.37 160.004 227.899 160.004 227.412C160.004 226.798 160.163 226.258 160.481 225.793C160.798 225.316 161.237 224.946 161.798 224.681C162.37 224.417 163.032 224.284 163.783 224.284C164.545 224.284 165.207 224.417 165.768 224.681C166.339 224.946 166.784 225.316 167.101 225.793C167.419 226.258 167.578 226.798 167.578 227.412C167.578 227.899 167.419 228.37 167.101 228.825C166.784 229.28 166.371 229.619 165.863 229.841C166.488 230.043 166.99 230.397 167.371 230.905C167.752 231.403 167.943 231.98 167.943 232.636C167.943 233.356 167.763 233.969 167.403 234.478C167.043 234.986 166.551 235.377 165.927 235.652C165.302 235.917 164.588 236.049 163.783 236.049ZM163.783 234.684C164.535 234.684 165.138 234.504 165.593 234.144C166.048 233.774 166.276 233.281 166.276 232.668C166.276 232.043 166.048 231.546 165.593 231.175C165.138 230.805 164.535 230.619 163.783 230.619C163.042 230.619 162.444 230.805 161.989 231.175C161.534 231.546 161.306 232.043 161.306 232.668C161.306 233.281 161.534 233.774 161.989 234.144C162.444 234.504 163.042 234.684 163.783 234.684ZM163.783 229.238C164.429 229.238 164.947 229.079 165.339 228.762C165.741 228.434 165.942 228.016 165.942 227.507C165.942 226.957 165.747 226.513 165.355 226.174C164.963 225.825 164.439 225.65 163.783 225.65C163.137 225.65 162.619 225.825 162.227 226.174C161.836 226.513 161.64 226.957 161.64 227.507C161.64 228.016 161.836 228.434 162.227 228.762C162.629 229.079 163.148 229.238 163.783 229.238ZM170.861 235.891V227.635H168.4V226.38C169.099 226.37 169.639 226.317 170.02 226.221C170.401 226.126 170.676 225.941 170.846 225.666C171.026 225.391 171.153 224.983 171.227 224.443H172.513V235.891H170.861ZM177.971 236.049C177.177 236.049 176.468 235.917 175.843 235.652C175.219 235.377 174.727 234.986 174.367 234.478C174.007 233.969 173.827 233.356 173.827 232.636C173.827 231.98 174.017 231.403 174.398 230.905C174.78 230.397 175.282 230.043 175.907 229.841C175.399 229.619 174.986 229.28 174.668 228.825C174.351 228.37 174.192 227.899 174.192 227.412C174.192 226.798 174.351 226.258 174.668 225.793C174.986 225.316 175.425 224.946 175.986 224.681C176.558 224.417 177.219 224.284 177.971 224.284C178.733 224.284 179.394 224.417 179.955 224.681C180.527 224.946 180.972 225.316 181.289 225.793C181.607 226.258 181.765 226.798 181.765 227.412C181.765 227.899 181.607 228.37 181.289 228.825C180.972 229.28 180.559 229.619 180.051 229.841C180.675 230.043 181.178 230.397 181.559 230.905C181.94 231.403 182.131 231.98 182.131 232.636C182.131 233.356 181.951 233.969 181.591 234.478C181.231 234.986 180.739 235.377 180.114 235.652C179.49 235.917 178.775 236.049 177.971 236.049ZM177.971 234.684C178.722 234.684 179.326 234.504 179.781 234.144C180.236 233.774 180.464 233.281 180.464 232.668C180.464 232.043 180.236 231.546 179.781 231.175C179.326 230.805 178.722 230.619 177.971 230.619C177.23 230.619 176.632 230.805 176.177 231.175C175.722 231.546 175.494 232.043 175.494 232.668C175.494 233.281 175.722 233.774 176.177 234.144C176.632 234.504 177.23 234.684 177.971 234.684ZM177.971 229.238C178.616 229.238 179.135 229.079 179.527 228.762C179.929 228.434 180.13 228.016 180.13 227.507C180.13 226.957 179.934 226.513 179.543 226.174C179.151 225.825 178.627 225.65 177.971 225.65C177.325 225.65 176.806 225.825 176.415 226.174C176.023 226.513 175.827 226.957 175.827 227.507C175.827 228.016 176.023 228.434 176.415 228.762C176.817 229.079 177.336 229.238 177.971 229.238ZM185.049 235.891V227.635H182.588V226.38C183.287 226.37 183.827 226.317 184.208 226.221C184.589 226.126 184.864 225.941 185.033 225.666C185.213 225.391 185.34 224.983 185.414 224.443H186.7V235.891H185.049ZM192.159 236.049C191.365 236.049 190.655 235.917 190.031 235.652C189.406 235.377 188.914 234.986 188.554 234.478C188.195 233.969 188.015 233.356 188.015 232.636C188.015 231.98 188.205 231.403 188.586 230.905C188.967 230.397 189.47 230.043 190.094 229.841C189.586 229.619 189.174 229.28 188.856 228.825C188.539 228.37 188.38 227.899 188.38 227.412C188.38 226.798 188.539 226.258 188.856 225.793C189.174 225.316 189.613 224.946 190.174 224.681C190.745 224.417 191.407 224.284 192.159 224.284C192.921 224.284 193.582 224.417 194.143 224.681C194.715 224.946 195.159 225.316 195.477 225.793C195.794 226.258 195.953 226.798 195.953 227.412C195.953 227.899 195.794 228.37 195.477 228.825C195.159 229.28 194.746 229.619 194.238 229.841C194.863 230.043 195.366 230.397 195.747 230.905C196.128 231.403 196.318 231.98 196.318 232.636C196.318 233.356 196.138 233.969 195.778 234.478C195.419 234.986 194.926 235.377 194.302 235.652C193.677 235.917 192.963 236.049 192.159 236.049ZM192.159 234.684C192.91 234.684 193.513 234.504 193.969 234.144C194.424 233.774 194.651 233.281 194.651 232.668C194.651 232.043 194.424 231.546 193.969 231.175C193.513 230.805 192.91 230.619 192.159 230.619C191.418 230.619 190.82 230.805 190.364 231.175C189.909 231.546 189.682 232.043 189.682 232.668C189.682 233.281 189.909 233.774 190.364 234.144C190.82 234.504 191.418 234.684 192.159 234.684ZM192.159 229.238C192.804 229.238 193.323 229.079 193.714 228.762C194.117 228.434 194.318 228.016 194.318 227.507C194.318 226.957 194.122 226.513 193.73 226.174C193.339 225.825 192.815 225.65 192.159 225.65C191.513 225.65 190.994 225.825 190.603 226.174C190.211 226.513 190.015 226.957 190.015 227.507C190.015 228.016 190.211 228.434 190.603 228.762C191.005 229.079 191.523 229.238 192.159 229.238ZM196.935 235.891V234.478L201.19 230.826C201.835 230.275 202.306 229.762 202.603 229.286C202.91 228.799 203.063 228.296 203.063 227.777C203.063 227.153 202.873 226.655 202.492 226.285C202.111 225.914 201.603 225.729 200.967 225.729C200.205 225.729 199.634 225.989 199.253 226.507C198.872 227.015 198.713 227.693 198.776 228.54H198.713L197.125 228.317C197.083 227.534 197.215 226.841 197.522 226.237C197.84 225.623 198.295 225.147 198.888 224.808C199.48 224.459 200.174 224.284 200.967 224.284C201.73 224.284 202.396 224.433 202.968 224.729C203.54 225.015 203.979 225.417 204.286 225.936C204.603 226.454 204.762 227.068 204.762 227.777C204.762 228.487 204.556 229.175 204.143 229.841C203.741 230.508 203.09 231.212 202.19 231.953L199.269 234.446H204.762V235.891H196.935ZM205.424 235.891V234.478L209.679 230.826C210.325 230.275 210.796 229.762 211.092 229.286C211.399 228.799 211.553 228.296 211.553 227.777C211.553 227.153 211.362 226.655 210.981 226.285C210.6 225.914 210.092 225.729 209.457 225.729C208.695 225.729 208.123 225.989 207.742 226.507C207.361 227.015 207.202 227.693 207.266 228.54H207.202L205.615 228.317C205.572 227.534 205.704 226.841 206.011 226.237C206.329 225.623 206.784 225.147 207.377 224.808C207.97 224.459 208.663 224.284 209.457 224.284C210.219 224.284 210.886 224.433 211.457 224.729C212.029 225.015 212.468 225.417 212.775 225.936C213.093 226.454 213.251 227.068 213.251 227.777C213.251 228.487 213.045 229.175 212.632 229.841C212.23 230.508 211.579 231.212 210.679 231.953L207.758 234.446H213.251V235.891H205.424ZM213.825 232.429V231.08H218.7V232.429H213.825ZM224.015 236.049C223.062 236.049 222.253 235.806 221.586 235.319C220.929 234.822 220.432 234.134 220.093 233.255C219.755 232.366 219.585 231.334 219.585 230.159C219.585 228.984 219.755 227.957 220.093 227.079C220.432 226.19 220.929 225.502 221.586 225.015C222.253 224.528 223.062 224.284 224.015 224.284C224.967 224.284 225.772 224.528 226.428 225.015C227.095 225.502 227.598 226.184 227.937 227.063C228.286 227.941 228.46 228.973 228.46 230.159C228.46 231.344 228.286 232.382 227.937 233.271C227.598 234.149 227.095 234.832 226.428 235.319C225.772 235.806 224.967 236.049 224.015 236.049ZM224.015 234.605C224.925 234.605 225.608 234.202 226.063 233.398C226.529 232.583 226.762 231.503 226.762 230.159C226.762 228.815 226.529 227.74 226.063 226.936C225.608 226.131 224.925 225.729 224.015 225.729C223.115 225.729 222.432 226.131 221.967 226.936C221.512 227.73 221.284 228.804 221.284 230.159C221.284 231.514 221.512 232.593 221.967 233.398C222.432 234.202 223.115 234.605 224.015 234.605ZM233.745 236.049C232.792 236.049 231.982 235.806 231.315 235.319C230.659 234.822 230.162 234.134 229.823 233.255C229.484 232.366 229.315 231.334 229.315 230.159C229.315 228.984 229.484 227.957 229.823 227.079C230.162 226.19 230.659 225.502 231.315 225.015C231.982 224.528 232.792 224.284 233.745 224.284C234.697 224.284 235.502 224.528 236.158 225.015C236.825 225.502 237.328 226.184 237.666 227.063C238.016 227.941 238.19 228.973 238.19 230.159C238.19 231.344 238.016 232.382 237.666 233.271C237.328 234.149 236.825 234.832 236.158 235.319C235.502 235.806 234.697 236.049 233.745 236.049ZM233.745 234.605C234.655 234.605 235.338 234.202 235.793 233.398C236.258 232.583 236.491 231.503 236.491 230.159C236.491 228.815 236.258 227.74 235.793 226.936C235.338 226.131 234.655 225.729 233.745 225.729C232.845 225.729 232.162 226.131 231.696 226.936C231.241 227.73 231.014 228.804 231.014 230.159C231.014 231.514 231.241 232.593 231.696 233.398C232.162 234.202 232.845 234.605 233.745 234.605ZM241.11 235.891V227.635H238.649V226.38C239.347 226.37 239.887 226.317 240.268 226.221C240.649 226.126 240.924 225.941 241.094 225.666C241.274 225.391 241.401 224.983 241.475 224.443H242.761V235.891H241.11ZM248.298 224.284C249.24 224.284 250.034 224.528 250.68 225.015C251.326 225.491 251.813 226.147 252.141 226.984C252.479 227.809 252.649 228.751 252.649 229.81C252.649 231.08 252.458 232.186 252.077 233.128C251.696 234.059 251.156 234.779 250.458 235.287C249.759 235.795 248.939 236.049 247.997 236.049C247.372 236.049 246.79 235.944 246.25 235.732C245.71 235.51 245.261 235.181 244.901 234.747C244.541 234.313 244.297 233.768 244.17 233.112L245.758 232.842H245.822C245.885 233.393 246.118 233.827 246.52 234.144C246.922 234.451 247.409 234.605 247.981 234.605C248.605 234.605 249.14 234.43 249.584 234.081C250.04 233.721 250.394 233.234 250.648 232.62C250.902 231.995 251.035 231.292 251.045 230.508C251.045 230.466 251.045 230.424 251.045 230.381C251.056 230.339 251.061 230.281 251.061 230.207C250.807 230.725 250.41 231.159 249.87 231.509C249.341 231.847 248.701 232.017 247.949 232.017C247.24 232.017 246.594 231.858 246.012 231.54C245.441 231.223 244.98 230.783 244.631 230.222C244.292 229.661 244.123 229.011 244.123 228.27C244.123 227.486 244.303 226.798 244.663 226.206C245.022 225.602 245.515 225.131 246.139 224.793C246.774 224.454 247.494 224.284 248.298 224.284ZM248.267 225.729C247.79 225.729 247.367 225.84 246.997 226.063C246.637 226.285 246.351 226.587 246.139 226.968C245.927 227.349 245.822 227.783 245.822 228.27C245.822 228.979 246.049 229.566 246.504 230.032C246.97 230.487 247.558 230.715 248.267 230.715C248.944 230.715 249.505 230.503 249.95 230.08C250.394 229.656 250.701 229.122 250.871 228.476C250.828 227.629 250.558 226.962 250.061 226.475C249.574 225.978 248.976 225.729 248.267 225.729ZM255.623 235.891V227.635H253.162V226.38C253.861 226.37 254.4 226.317 254.782 226.221C255.163 226.126 255.438 225.941 255.607 225.666C255.787 225.391 255.914 224.983 255.988 224.443H257.274V235.891H255.623ZM258.668 232.429V231.08H263.542V232.429H258.668ZM262.968 235.891V235.827L263.571 234.874L266.763 229.857L264.016 225.459L263.413 224.507V224.443H265.238L265.27 224.507L265.874 225.459L267.699 228.365L269.494 225.459L270.081 224.507L270.129 224.443H271.907V224.507L271.304 225.459L268.557 229.762L271.764 234.874L272.367 235.827V235.891H270.541L270.494 235.827L269.906 234.874L267.636 231.239L265.381 234.874L264.778 235.827L264.73 235.891H262.968ZM277.312 236.049C276.486 236.049 275.729 235.907 275.041 235.621C274.353 235.324 273.755 234.912 273.247 234.382C272.739 233.853 272.342 233.234 272.056 232.525C271.781 231.805 271.644 231.016 271.644 230.159C271.644 229.312 271.781 228.534 272.056 227.825C272.342 227.105 272.739 226.481 273.247 225.952C273.755 225.422 274.353 225.015 275.041 224.729C275.729 224.433 276.486 224.284 277.312 224.284C278.127 224.284 278.878 224.433 279.566 224.729C280.265 225.015 280.868 225.422 281.376 225.952C281.884 226.47 282.276 227.089 282.551 227.809C282.837 228.518 282.98 229.302 282.98 230.159C282.98 231.016 282.837 231.805 282.551 232.525C282.276 233.244 281.884 233.869 281.376 234.398C280.868 234.917 280.265 235.324 279.566 235.621C278.878 235.907 278.127 236.049 277.312 236.049ZM277.312 234.605C278.084 234.605 278.767 234.414 279.36 234.033C279.963 233.641 280.434 233.112 280.773 232.445C281.112 231.778 281.281 231.016 281.281 230.159C281.281 229.302 281.112 228.54 280.773 227.873C280.434 227.206 279.963 226.682 279.36 226.301C278.767 225.92 278.084 225.729 277.312 225.729C276.539 225.729 275.851 225.92 275.248 226.301C274.655 226.682 274.189 227.206 273.85 227.873C273.512 228.54 273.342 229.302 273.342 230.159C273.342 231.016 273.512 231.778 273.85 232.445C274.189 233.112 274.655 233.641 275.248 234.033C275.851 234.414 276.539 234.605 277.312 234.605Z" fill="#FDFDF8"/>
+<rect width="15.3731" height="46.6255" rx="3.08019" transform="matrix(1 0 0 -1 163.01 363.938)" fill="#14E700"/>
+<rect width="15.3731" height="65.4267" rx="3.08019" transform="matrix(1 0 0 -1 237.559 363.938)" fill="#14E700"/>
+<rect x="138.768" y="305.671" width="14.141" height="57.6317" rx="2.46415" stroke="#33B4FF" stroke-width="1.23208"/>
+<path d="M215.789 317.905L225.002 317.905C226.363 317.905 227.466 319.008 227.466 320.369L227.466 360.834C227.466 362.195 226.363 363.299 225.002 363.299L215.789 363.299C214.428 363.299 213.325 362.195 213.325 360.834L213.325 320.369C213.325 319.008 214.428 317.905 215.789 317.905Z" stroke="#33B4FF" stroke-width="1.23208"/>
+<rect width="15.3731" height="30.0487" rx="3.08019" transform="matrix(1 0 0 -1 187.859 363.945)" fill="#14E700" fill-opacity="0.48"/>
+<rect width="15.3731" height="46.6255" rx="3.08019" transform="matrix(1 0 0 -1 262.408 363.945)" fill="#14E700" fill-opacity="0.48"/>
+</svg>
diff --git a/apps/sim/tailwind.config.ts b/apps/sim/tailwind.config.ts
index 6ca5e4ab95..f12f246837 100644
--- a/apps/sim/tailwind.config.ts
+++ b/apps/sim/tailwind.config.ts
@@ -176,6 +176,10 @@ export default {
           from: { transform: 'translateX(40px)' },
           to: { transform: 'translateX(0)' },
         },
+        'slide-in-bottom': {
+          from: { opacity: '0', transform: 'translateY(20px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
       },
       animation: {
         'caret-blink': 'caret-blink 1.25s ease-out infinite',
@@ -185,8 +189,10 @@ export default {
         'placeholder-pulse': 'placeholder-pulse 1.5s ease-in-out infinite',
         'ring-pulse': 'ring-pulse 1.5s ease-in-out infinite',
         'stream-fade-in': 'stream-fade-in 300ms ease-out forwards',
+        'stream-fade-in-delayed': 'stream-fade-in 300ms ease-out 1.5s forwards',
         '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)',
       },
     },
   },