diff --git a/apps/sim/app/(landing)/components/featured-customer/featured-customer-card.tsx b/apps/sim/app/(landing)/components/featured-customer/featured-customer-card.tsx
index 0b8520a57e1..d4e35f0c036 100644
--- a/apps/sim/app/(landing)/components/featured-customer/featured-customer-card.tsx
+++ b/apps/sim/app/(landing)/components/featured-customer/featured-customer-card.tsx
@@ -52,7 +52,7 @@ export function FeaturedCustomerCard({ story, active, emphasized }: FeaturedCust
 
     /**
      * The film streams only while the slide is on screen in a visible tab:
-     * `play()` defeats `preload='metadata'`, so calling it at mount would pull
+     * `play()` defeats `preload='none'`, so calling it at mount would pull
      * the whole file for a section well below the fold. Autoplay may still be
      * blocked, in which case the poster remains the fallback.
      */
@@ -82,8 +82,8 @@ export function FeaturedCustomerCard({ story, active, emphasized }: FeaturedCust
     <article
       aria-hidden={!active}
       className={cn(
-        'relative isolate size-full overflow-hidden',
-        isFilm ? 'bg-[var(--text-primary)]' : 'bg-[var(--surface-4)]',
+        'relative isolate size-full overflow-hidden [clip-path:border-box]',
+        isFilm ? 'bg-black' : 'bg-[var(--surface-4)]',
         LANDING_STAGE_RADIUS
       )}
     >
@@ -103,7 +103,7 @@ export function FeaturedCustomerCard({ story, active, emphasized }: FeaturedCust
             loop
             muted
             playsInline
-            preload='metadata'
+            preload='none'
             src={story.media.src}
             tabIndex={-1}
             className='pointer-events-none absolute inset-0 size-full object-cover motion-reduce:hidden'
diff --git a/apps/sim/app/(landing)/components/featured-customer/featured-customer.test.tsx b/apps/sim/app/(landing)/components/featured-customer/featured-customer.test.tsx
index fb3ea91cb76..fc854b8dc42 100644
--- a/apps/sim/app/(landing)/components/featured-customer/featured-customer.test.tsx
+++ b/apps/sim/app/(landing)/components/featured-customer/featured-customer.test.tsx
@@ -85,10 +85,17 @@ describe('FeaturedCustomer', () => {
     expect(rivian.querySelector('video')?.getAttribute('src')).toBe(
       '/landing/customer-stories/rivian-r2-loop.mp4'
     )
-    expect(expRealty.querySelector('video')).toBeNull()
+    const expVideo = expRealty.querySelector('video') as HTMLVideoElement
+    expect(expVideo.getAttribute('src')).toBe('/landing/customer-stories/exp-house-color-loop.mp4')
+    expect(expVideo.getAttribute('preload')).toBe('none')
+    expect(expVideo.muted).toBe(true)
+    expect(vi.mocked(video.play).mock.contexts).not.toContain(expVideo)
     expect(
       [...expRealty.querySelectorAll('img')].map((image) => image.getAttribute('src'))
-    ).toEqual(['/landing/logos/exp-realty.svg'])
+    ).toEqual([
+      '/landing/customer-stories/exp-house-color-poster.jpg',
+      '/landing/logos/exp-realty.svg',
+    ])
 
     const controls = nextButton.parentElement as HTMLElement
     expect(controls.className).toContain('justify-end')
@@ -122,6 +129,7 @@ describe('FeaturedCustomer', () => {
     expect(rivian.querySelector('article')?.getAttribute('aria-hidden')).toBe('true')
     expect(rivian.className).toContain('-translate-x-[calc(100%_+_1.5rem)]')
     expect(expRealty.getAttribute('aria-current')).toBe('true')
+    expect(vi.mocked(video.play).mock.contexts).toContain(expVideo)
     expect(expRealty.querySelector('article')?.getAttribute('aria-hidden')).toBe('false')
     expect(expRealty.className).toContain('translate-x-0')
     expect(expRealty.className).toContain('opacity-100')
@@ -140,10 +148,15 @@ describe('FeaturedCustomer', () => {
     expect(expRealty.querySelector('img[alt="eXp Realty"]')).not.toBeNull()
     expect(host.querySelector('video')).toBe(video)
     expect(video.currentTime).toBe(12)
-    expect(video.pause).toHaveBeenCalledOnce()
+    expect(
+      vi.mocked(video.pause).mock.contexts.filter((context) => context === video)
+    ).toHaveLength(1)
     expect(
       [...expRealty.querySelectorAll('img')].map((image) => image.getAttribute('src'))
-    ).toEqual(['/landing/logos/exp-realty.svg'])
+    ).toEqual([
+      '/landing/customer-stories/exp-house-color-poster.jpg',
+      '/landing/logos/exp-realty.svg',
+    ])
     expect(
       [...host.querySelectorAll('[data-testid="customer-tooltip"]')].map((node) => node.textContent)
     ).toEqual(['View Rivian customer story'])
@@ -156,7 +169,9 @@ describe('FeaturedCustomer', () => {
     expect(expRealty.getAttribute('aria-current')).toBeNull()
     expect(rivian.querySelector('video')).toBe(video)
     expect(video.currentTime).toBe(12)
-    expect(video.play).toHaveBeenCalledTimes(2)
+    expect(vi.mocked(video.play).mock.contexts.filter((context) => context === video)).toHaveLength(
+      2
+    )
 
     act(() => {
       root.unmount()
@@ -173,7 +188,9 @@ describe('FeaturedCustomer', () => {
     act(() => root.render(<FeaturedCustomer />))
     const video = host.querySelector('video') as HTMLVideoElement
     expect(video.play).not.toHaveBeenCalled()
-    expect(video.pause).toHaveBeenCalledOnce()
+    expect(
+      vi.mocked(video.pause).mock.contexts.filter((context) => context === video)
+    ).toHaveLength(1)
 
     motionPreference.reduced = false
     act(() => root.render(<FeaturedCustomer />))
@@ -181,7 +198,9 @@ describe('FeaturedCustomer', () => {
 
     motionPreference.reduced = true
     act(() => root.render(<FeaturedCustomer />))
-    expect(video.pause).toHaveBeenCalledTimes(2)
+    expect(
+      vi.mocked(video.pause).mock.contexts.filter((context) => context === video)
+    ).toHaveLength(2)
 
     act(() => root.unmount())
   })
diff --git a/apps/sim/app/(landing)/components/featured-customer/featured-customer.tsx b/apps/sim/app/(landing)/components/featured-customer/featured-customer.tsx
index 87b84700eb4..391fca73637 100644
--- a/apps/sim/app/(landing)/components/featured-customer/featured-customer.tsx
+++ b/apps/sim/app/(landing)/components/featured-customer/featured-customer.tsx
@@ -35,7 +35,12 @@ const CUSTOMER_STORIES: FeaturedCustomerStory[] = [
     id: 'exp-realty',
     company: 'eXp Realty',
     caption: 'Bring teams, shared knowledge, and AI agents into one workspace with Sim.',
-    media: { kind: 'brand' },
+    media: {
+      kind: 'video',
+      poster: '/landing/customer-stories/exp-house-color-poster.jpg',
+      src: '/landing/customer-stories/exp-house-color-loop.mp4',
+      alt: 'An eXp Realty sign and the exterior of a modern home',
+    },
     logo: { src: '/landing/logos/exp-realty.svg', alt: 'eXp Realty', aspect: 1.84, height: 32 },
   },
 ]
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-resource-panel.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-resource-panel.tsx
index a5d484f3285..d6bdb2a11a7 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-resource-panel.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-resource-panel.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { type ComponentType, useState } from 'react'
+import type { ComponentType } from 'react'
 import {
   Button,
   cn,
@@ -21,6 +21,8 @@ import {
   Workflow,
 } from '@sim/emcn/icons'
 import { HeroWorkflowStage } from '@/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage'
+import type { LeadRecord } from '@/app/(landing)/tables/components/tables-records-preview/data'
+import { TablesRecordsTable } from '@/app/(landing)/tables/components/tables-records-preview/tables-records-table'
 import {
   RESOURCE_HEADER_CLASSES,
   RESOURCE_TAB_ICON_BUTTON_CLASS,
@@ -41,11 +43,11 @@ const HERO_RESOURCES: readonly HeroResourceDefinition[] = [
   { id: 'brief', title: 'lead-enrichment-brief.md', icon: FileText },
 ] as const
 
-const TABLE_ROWS = [
-  { id: 'northstar', lead: 'Maya Chen', company: 'Northstar', score: '94', status: 'Qualified' },
-  { id: 'arcadia', lead: 'Jon Bell', company: 'Arcadia', score: '88', status: 'Qualified' },
-  { id: 'hearth', lead: 'Priya Shah', company: 'Hearth', score: '79', status: 'Review' },
-  { id: 'lattice', lead: 'Noah Kim', company: 'Lattice', score: '72', status: 'Review' },
+const TABLE_ROWS: readonly LeadRecord[] = [
+  { id: 'northstar', contact: 'Maya Chen', company: 'Northstar', score: 94, status: 'Qualified' },
+  { id: 'arcadia', contact: 'Jon Bell', company: 'Arcadia', score: 88, status: 'Qualified' },
+  { id: 'hearth', contact: 'Priya Shah', company: 'Hearth', score: 79, status: 'Review' },
+  { id: 'lattice', contact: 'Noah Kim', company: 'Lattice', score: 72, status: 'Review' },
 ] as const
 
 interface HeroResourcePanelProps {
@@ -60,52 +62,6 @@ interface HeroResourcePanelProps {
   onRunWorkflow: () => void
 }
 
-function HeroTableResource() {
-  const [selectedId, setSelectedId] = useState<string | null>('northstar')
-
-  return (
-    <div className='flex h-full flex-col bg-[var(--bg)]'>
-      <div className='flex h-10 shrink-0 items-center border-[var(--border)] border-b px-4'>
-        <span className='text-[var(--text-body)] text-sm'>Qualified leads</span>
-        <span className='ml-auto text-[var(--text-muted)] text-caption'>4 rows</span>
-      </div>
-      <div className='grid grid-cols-[1.25fr_1fr_72px_96px] border-[var(--border)] border-b bg-[var(--surface-1)] px-4 py-2 text-[var(--text-muted)] text-caption'>
-        <span>Lead</span>
-        <span>Company</span>
-        <span>Score</span>
-        <span>Status</span>
-      </div>
-      <div className='min-h-0 flex-1 overflow-y-auto'>
-        {TABLE_ROWS.map((row) => (
-          <button
-            key={row.id}
-            type='button'
-            aria-pressed={selectedId === row.id}
-            onClick={() => setSelectedId(row.id)}
-            className={cn(
-              'grid w-full grid-cols-[1.25fr_1fr_72px_96px] items-center border-[var(--border)] border-b px-4 py-3 text-left text-sm transition-colors hover-hover:bg-[var(--surface-hover)]',
-              selectedId === row.id && 'bg-[var(--surface-active)]'
-            )}
-          >
-            <span className='truncate text-[var(--text-body)]'>{row.lead}</span>
-            <span className='truncate text-[var(--text-secondary)]'>{row.company}</span>
-            <span className='text-[var(--text-body)] tabular-nums'>{row.score}</span>
-            <span className='flex items-center gap-1.5 text-[var(--text-secondary)]'>
-              <span
-                className={cn(
-                  'size-1.5 rounded-full',
-                  row.status === 'Qualified' ? 'bg-[var(--brand-accent)]' : 'bg-[var(--text-muted)]'
-                )}
-              />
-              {row.status}
-            </span>
-          </button>
-        ))}
-      </div>
-    </div>
-  )
-}
-
 function HeroFileResource() {
   return (
     <div className='h-full overflow-y-auto bg-[var(--bg)]'>
@@ -237,7 +193,7 @@ export function HeroResourcePanel({
         {activeId === 'workflow' ? (
           <HeroWorkflowStage key={workflowKey} builtCount={builtCount} interactive />
         ) : activeId === 'table' ? (
-          <HeroTableResource />
+          <TablesRecordsTable initialRows={TABLE_ROWS} />
         ) : activeId === 'brief' ? (
           <HeroFileResource />
         ) : (
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.tsx
index 190e33863e1..18e64a2a105 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/production-workflow-stage.tsx
@@ -14,6 +14,7 @@ import { Circle, Minus, Plus, Square, Unlock } from '@sim/emcn/icons'
 import {
   CanvasSentenceView,
   InlineChip,
+  useCanvasColorMode,
   WorkflowBlockView,
   WorkflowEdgeView,
 } from '@sim/workflow-renderer'
@@ -482,6 +483,7 @@ function ProductionWorkflowCanvas({
   scripted,
   viewportInset,
 }: ProductionWorkflowStageProps) {
+  const colorMode = useCanvasColorMode()
   const { getNode, getViewport, setCenter, setViewport } = useReactFlow()
   const containerRef = useRef<HTMLDivElement>(null)
   const focusFrameRef = useRef(0)
@@ -738,6 +740,7 @@ function ProductionWorkflowCanvas({
       )}
     >
       <ReactFlow
+        colorMode={colorMode}
         onInit={handleInit}
         nodes={nodes}
         edges={flowEdges}
@@ -762,7 +765,10 @@ function ProductionWorkflowCanvas({
         onNodeClick={interactive ? handleNodeClick : undefined}
         onNodeDragStart={interactive ? (_event, node) => setSelectedId(node.id) : undefined}
         proOptions={{ hideAttribution: true }}
-        className={REACT_FLOW_STYLES}
+        className={cn(
+          REACT_FLOW_STYLES,
+          interactive ? '[--xy-background-color:var(--bg)]' : '[--xy-background-color:transparent]'
+        )}
       />
       {interactive && <CanvasZoomControls />}
       {interactive && (
diff --git a/apps/sim/app/(landing)/components/navbar/components/mobile-nav/mobile-nav.tsx b/apps/sim/app/(landing)/components/navbar/components/mobile-nav/mobile-nav.tsx
index 7f00d954553..d778c8e2d87 100644
--- a/apps/sim/app/(landing)/components/navbar/components/mobile-nav/mobile-nav.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/mobile-nav/mobile-nav.tsx
@@ -145,16 +145,6 @@ export function MobileNav({ stars }: MobileNavProps) {
               <span className='px-3 pt-2.5 pb-1 text-[13px] text-[var(--text-muted)]'>
                 {menu.label}
               </span>
-              {menu.index && (
-                <Link
-                  href={menu.index.href}
-                  prefetch={open ? null : false}
-                  onClick={() => updateOpen(false)}
-                  className={SHEET_ROW}
-                >
-                  {menu.index.label}
-                </Link>
-              )}
               {menu.sections.map((section) => (
                 <div key={section.label} className='flex flex-col'>
                   {section.items.map((item) => {
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/models-menu-preview/models-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/models-menu-preview/models-menu-preview.tsx
index 505130f40c8..eb422972338 100644
--- a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/models-menu-preview/models-menu-preview.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/models-menu-preview/models-menu-preview.tsx
@@ -1,16 +1,23 @@
+import 'server-only'
+
 import { BrainCircuit, Search } from '@sim/emcn/icons'
-import { AnthropicIcon, GeminiIcon, OpenAIIcon } from '@/components/icons'
 import { MenuPreviewFrame } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-frame'
 import {
   MenuPreviewHeader,
   MenuPreviewToolbar,
 } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+import { MODEL_CATALOG_PROVIDERS } from '@/app/(landing)/models/utils'
 
-const MODELS = [
-  { name: 'GPT-6 Astra', provider: 'OpenAI', icon: OpenAIIcon },
-  { name: 'Claude Sonnet 5', provider: 'Anthropic', icon: AnthropicIcon },
-  { name: 'Gemini 3.6 Flash', provider: 'Google', icon: GeminiIcon },
-] as const
+const FEATURED_MODELS = MODEL_CATALOG_PROVIDERS.flatMap((provider) =>
+  provider.models
+    .filter((model) => model.featured)
+    .map((model) => ({
+      id: model.id,
+      name: model.displayName,
+      provider: provider.name,
+      icon: provider.icon ?? BrainCircuit,
+    }))
+)
 
 /** A quiet model directory extending past the preview's right and bottom edges. */
 export function ModelsMenuPreview() {
@@ -25,8 +32,8 @@ export function ModelsMenuPreview() {
           </span>
         </MenuPreviewToolbar>
         <div className='divide-y divide-[var(--border)]'>
-          {MODELS.map(({ name, provider, icon: Icon }) => (
-            <div key={name} className='flex h-[76px] items-center gap-3 px-4'>
+          {FEATURED_MODELS.map(({ id, name, provider, icon: Icon }) => (
+            <div key={id} className='flex h-[76px] items-center gap-3 px-4'>
               <Icon className='size-7 shrink-0 text-[var(--text-primary)]' />
               <div>
                 <p className='text-[var(--text-primary)] text-base'>{name}</p>
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/nav-menu-preview.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/nav-menu-preview.tsx
index ac5c4d7f9b3..52d7193703c 100644
--- a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/nav-menu-preview.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/nav-menu-preview.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import { ArrowRight, BookOpen } from '@sim/emcn/icons'
 import { BlogMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/blog-menu-preview'
 import { ChangelogMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/changelog-menu-preview'
@@ -8,7 +9,6 @@ import { IntegrationsMenuPreview } from '@/app/(landing)/components/navbar/compo
 import { KnowledgeMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/knowledge-menu-preview'
 import { LibraryMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/library-menu-preview'
 import { LogsMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/logs-menu-preview'
-import { ModelsMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/models-menu-preview'
 import { OverviewMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/overview-menu-preview'
 import { TablesMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/tables-menu-preview'
 import { WorkflowMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview'
@@ -19,6 +19,7 @@ import type {
 
 interface NavMenuPreviewProps {
   item: NavMenuItemData
+  modelsPreview: ReactNode
 }
 
 interface PreviewGraphicProps {
@@ -26,7 +27,7 @@ interface PreviewGraphicProps {
 }
 
 interface ProductGraphicProps extends PreviewGraphicProps {
-  kind: NavMenuPreviewKind
+  kind: Exclude<NavMenuPreviewKind, 'models'>
 }
 
 const PREVIEW_ROW =
@@ -79,8 +80,6 @@ function PreviewGraphic({ kind, details }: ProductGraphicProps) {
       return <IntegrationsMenuPreview />
     case 'library':
       return <LibraryMenuPreview />
-    case 'models':
-      return <ModelsMenuPreview />
     case 'overview':
       return <OverviewMenuPreview />
     case 'workflows':
@@ -102,13 +101,17 @@ function PreviewGraphic({ kind, details }: ProductGraphicProps) {
   }
 }
 
-export function NavMenuPreview({ item }: NavMenuPreviewProps) {
+export function NavMenuPreview({ item, modelsPreview }: NavMenuPreviewProps) {
   return (
     <div
       data-nav-menu-preview
       className='relative min-h-[340px] w-full self-stretch overflow-hidden rounded-[10px] bg-[var(--surface-3)]'
     >
-      <PreviewGraphic kind={item.preview.kind} details={item.preview.details} />
+      {item.preview.kind === 'models' ? (
+        modelsPreview
+      ) : (
+        <PreviewGraphic kind={item.preview.kind} details={item.preview.details} />
+      )}
     </div>
   )
 }
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/constants.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/constants.ts
index 0310e61df18..5030ff0928c 100644
--- a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/constants.ts
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/constants.ts
@@ -209,7 +209,6 @@ export const RESOURCES_MENU: NavMenu = {
  */
 export const CUSTOMERS_MENU: NavMenu = {
   label: 'Customers',
-  index: { label: 'All customers', href: '/customers' },
   eyebrow: 'Customers',
   heading: 'Teams building with Sim',
   description: 'How enterprise teams build, govern, and operate AI agents with Sim.',
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.test.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.test.tsx
index cdd4168099b..1d6352e9652 100644
--- a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.test.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.test.tsx
@@ -37,7 +37,13 @@ vi.mock('@/app/(landing)/components/navbar/components/navbar-shell', () => ({
 }))
 vi.mock(
   '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-card',
-  () => ({ NavMenuCard: () => null })
+  () => ({
+    NavMenuCard: ({ item, prefetch }: { item: NavMenuItemData; prefetch?: boolean | null }) => (
+      <a href={item.href} data-prefetch={prefetch === false ? 'disabled' : 'auto'}>
+        {item.title}
+      </a>
+    ),
+  })
 )
 vi.mock(
   '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-logo-marquee',
@@ -67,7 +73,7 @@ beforeEach(() => {
   host = document.createElement('div')
   document.body.append(host)
   root = createRoot(host)
-  act(() => root.render(<NavMenuCluster menus={NAV_MENUS} />))
+  act(() => root.render(<NavMenuCluster menus={NAV_MENUS} modelsPreview={<div>Models</div>} />))
 })
 
 afterEach(() => {
@@ -100,7 +106,7 @@ function expectSelected(href: string, kind: string) {
 describe('NavMenuCluster feature selection', () => {
   it('prefetches destinations only while their menu is open', () => {
     const overview = element('a[href="/platform"]')
-    const customers = element('#nav-customers-menu a[href="/customers"]')
+    const customers = element('#nav-customers-menu a[href="/customers/rivian"]')
     expect(overview.dataset.prefetch).toBe('disabled')
     expect(customers.dataset.prefetch).toBe('disabled')
 
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.tsx
index 4060b3975f9..80afd4e6fc2 100644
--- a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.tsx
@@ -1,10 +1,8 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { type ReactNode, useEffect, useRef, useState } from 'react'
 import { ChipChevronDown, chipContentLabelClass, chipVariants, cn } from '@sim/emcn'
-import Link from 'next/link'
 import { flushSync } from 'react-dom'
-import { ChevronArrow } from '@/app/(landing)/components/chevron-arrow'
 import {
   HOME_INSET,
   LANDING_CONTENT_WIDTH,
@@ -21,6 +19,7 @@ import { useNavbarMenu } from '@/app/(landing)/components/navbar/hooks/use-navba
 interface NavMenuClusterProps {
   /** Non-empty group of mega-menus that share one stable panel. */
   menus: readonly [NavMenu, ...NavMenu[]]
+  modelsPreview: ReactNode
 }
 
 const PANEL_BASE =
@@ -61,7 +60,7 @@ const floatingPanelIdFor = (menu: NavMenu) => `nav-${menu.label.toLowerCase()}-m
  * panel under its trigger instead of the shared surface, which keeps the
  * last surface menu so it can fade out with its content intact.
  */
-export function NavMenuCluster({ menus }: NavMenuClusterProps) {
+export function NavMenuCluster({ menus, modelsPreview }: NavMenuClusterProps) {
   const rootRef = useRef<HTMLDivElement>(null)
   const { open, updateOpen } = useNavbarMenu('desktop')
   const [activeMenu, setActiveMenu] = useState<NavMenu>(menus[0])
@@ -209,17 +208,6 @@ export function NavMenuCluster({ menus }: NavMenuClusterProps) {
                       )}
                     </div>
                     {menu.marquee === 'customers' && <NavMenuLogoMarquee />}
-                    {menu.index && (
-                      <Link
-                        href={menu.index.href}
-                        prefetch={active ? null : false}
-                        onClick={handleSelect}
-                        className='group/link flex items-center justify-between rounded-lg px-2 py-1 text-[var(--text-body)] text-small transition-colors hover:bg-[var(--surface-hover)]'
-                      >
-                        {menu.index.label}
-                        <ChevronArrow />
-                      </Link>
-                    )}
                   </div>
                 </div>
               )}
@@ -282,7 +270,7 @@ export function NavMenuCluster({ menus }: NavMenuClusterProps) {
                 ))}
               </div>
 
-              <NavMenuPreview item={activeItem} />
+              <NavMenuPreview item={activeItem} modelsPreview={modelsPreview} />
             </div>
           </div>
         </div>
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/types.ts b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/types.ts
index 61d75d2c422..cf8a1f3561e 100644
--- a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/types.ts
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/types.ts
@@ -85,8 +85,6 @@ export interface NavMenuSection {
 export interface NavMenu {
   /** Trigger label and accessible name of the panel. */
   label: string
-  /** Index destination shown alongside a menu's featured links. */
-  index?: { label: string; href: string }
   /** Small label above the menu heading. */
   eyebrow: string
   /** Menu-level positioning statement. */
diff --git a/apps/sim/app/(landing)/components/navbar/navbar.tsx b/apps/sim/app/(landing)/components/navbar/navbar.tsx
index 5a6fbbd364e..3bd927b3160 100644
--- a/apps/sim/app/(landing)/components/navbar/navbar.tsx
+++ b/apps/sim/app/(landing)/components/navbar/navbar.tsx
@@ -13,6 +13,7 @@ import {
   NavMenuCluster,
   SimWordmark,
 } from '@/app/(landing)/components/navbar/components'
+import { ModelsMenuPreview } from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/models-menu-preview'
 import { DEMO_HREF } from '@/app/(landing)/constants'
 
 /**
@@ -60,7 +61,7 @@ export function Navbar({ stars }: NavbarProps) {
         </Link>
 
         <div className='absolute inset-x-0 hidden items-center justify-center gap-1 xl:flex'>
-          <NavMenuCluster menus={NAV_MENUS} />
+          <NavMenuCluster menus={NAV_MENUS} modelsPreview={<ModelsMenuPreview />} />
           <div className='relative z-10 flex items-center gap-1'>
             <ChipLink href='/pricing' itemProp='url' shape='round' className='px-3'>
               Pricing
diff --git a/apps/sim/app/(landing)/components/shared/cli-graphic/cli-graphic.module.css b/apps/sim/app/(landing)/components/shared/cli-graphic/cli-graphic.module.css
new file mode 100644
index 00000000000..06534ad2f36
--- /dev/null
+++ b/apps/sim/app/(landing)/components/shared/cli-graphic/cli-graphic.module.css
@@ -0,0 +1,45 @@
+@keyframes enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.codeLine {
+  animation: enter 300ms ease-out both;
+}
+
+.codeLine:nth-child(2) {
+  animation-delay: 300ms;
+}
+
+.codeLine:nth-child(3) {
+  animation-delay: 500ms;
+}
+
+.codeLine:nth-child(4) {
+  animation-delay: 700ms;
+}
+
+.codeLine:nth-child(5) {
+  animation-delay: 900ms;
+}
+
+.codeLine:nth-child(6) {
+  animation-delay: 1200ms;
+}
+
+.composer {
+  animation: enter 400ms 1600ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .codeLine,
+  .composer {
+    animation: none;
+  }
+}
diff --git a/apps/sim/app/(landing)/components/shared/cli-graphic/cli-graphic.tsx b/apps/sim/app/(landing)/components/shared/cli-graphic/cli-graphic.tsx
index 67daf216fd7..5a8514d7bdf 100644
--- a/apps/sim/app/(landing)/components/shared/cli-graphic/cli-graphic.tsx
+++ b/apps/sim/app/(landing)/components/shared/cli-graphic/cli-graphic.tsx
@@ -1,42 +1,74 @@
-import { TerminalWindow } from '@sim/emcn/icons'
+import { cn } from '@sim/emcn'
+import { ArrowUp, FolderCode, TerminalWindow } from '@sim/emcn/icons'
+import styles from '@/app/(landing)/components/shared/cli-graphic/cli-graphic.module.css'
+import type { CodeSegment } from '@/app/(landing)/components/shared/code-window-graphic/code-window-graphic'
 import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics/feature-graphic-shell'
 import { FeaturePlatformPanel } from '@/app/(landing)/enterprise/components/feature-graphics/feature-platform-panel'
 
-/** A terminal session showing Claude Code using the supported Sim CLI commands. */
+const CODE_LINES: readonly (readonly CodeSegment[])[] = [
+  [{ text: 'sim workflows list' }],
+  [{ text: 'sim workflows run \\' }],
+  [{ text: '  "$WORKFLOW_ID" --manual \\', tone: 'muted' }],
+  [{ text: '  --input ', tone: 'muted' }, { text: '@ticket.json \\' }],
+  [{ text: '  --follow', tone: 'muted' }],
+  [{ text: 'sim logs list ' }, { text: '--limit 5', tone: 'muted' }],
+]
+
+/** The original editor-and-composer composition, with supported CLI commands in a shell script. */
 export function CliGraphic() {
   return (
     <FeatureGraphicShell variant='portrait'>
       <div className='absolute inset-[10px]'>
-        <FeaturePlatformPanel framed icon={TerminalWindow} title='Claude Code · Sim CLI'>
-          <div className='min-w-0 p-5 text-caption leading-[1.5]'>
-            <p className='mb-4 font-mono text-[var(--text-primary)]'>
-              <span className='mr-2 text-[var(--text-muted)]'>$</span>
-              sim login
-            </p>
-            <p className='rounded-md bg-[var(--surface-3)] px-3 py-2 text-[var(--text-body)]'>
-              Run my support agent in Sim.
-            </p>
-
-            <div className='mt-5 space-y-4 font-mono'>
-              <div className='flex gap-2'>
-                <span className='text-[var(--text-muted)]'>›</span>
-                <code className='min-w-0 text-[var(--text-primary)]'>sim workflows list</code>
-              </div>
-              <div className='flex gap-2'>
-                <span className='text-[var(--text-muted)]'>›</span>
-                <code className='min-w-0 text-[var(--text-primary)]'>
-                  {'sim workflows run \\'}
-                  <span className='block text-[var(--text-muted)]'>{'<workflowId> --manual'}</span>
+        <FeaturePlatformPanel framed icon={FolderCode} title='support-agent.sh'>
+          <div className='space-y-2 overflow-hidden p-5 font-mono text-caption leading-[1.7] max-sm:space-y-1 max-sm:p-4 max-sm:text-[11px] max-sm:leading-[1.5]'>
+            {CODE_LINES.map((line, index) => (
+              <div
+                key={index}
+                className={cn(
+                  'flex gap-3 whitespace-pre',
+                  styles.codeLine,
+                  (index === 1 || index === 5) && 'sm:pt-4'
+                )}
+              >
+                <span className='w-3 shrink-0 select-none text-right text-[var(--text-muted)]'>
+                  {index + 1}
+                </span>
+                <code>
+                  {line.map((segment, segmentIndex) => (
+                    <span
+                      key={segmentIndex}
+                      className={
+                        segment.tone === 'muted'
+                          ? 'text-[var(--text-secondary)]'
+                          : 'text-[var(--text-primary)]'
+                      }
+                    >
+                      {segment.text}
+                    </span>
+                  ))}
                 </code>
               </div>
-            </div>
-
-            <div className='mt-5 flex items-center gap-2 border-[var(--border)] border-t pt-4 text-[var(--text-secondary)]'>
-              <span className='size-1.5 shrink-0 rounded-full bg-[var(--text-secondary)]' />
-              <span>Run completed</span>
-            </div>
+            ))}
           </div>
         </FeaturePlatformPanel>
+        <div
+          aria-hidden='true'
+          className={cn(
+            'absolute right-4 bottom-4 left-4 rounded-xl border border-[var(--border)] bg-[var(--surface-2)] px-3 py-3 shadow-xs dark:bg-[var(--surface-4)]',
+            styles.composer
+          )}
+        >
+          <p className='px-1 text-[var(--text-primary)] text-caption leading-[1.5]'>
+            Run my support agent in Sim.
+          </p>
+          <div className='mt-3 flex items-center gap-2 px-1 text-[var(--text-secondary)] text-caption'>
+            <TerminalWindow className='size-[14px] text-[var(--text-icon)]' />
+            <span>Claude Code · Sim CLI</span>
+            <span className='ml-auto flex size-7 shrink-0 items-center justify-center rounded-full bg-[var(--text-primary)]'>
+              <ArrowUp className='size-[14px] text-[var(--text-inverse)]' />
+            </span>
+          </div>
+        </div>
       </div>
     </FeatureGraphicShell>
   )
diff --git a/apps/sim/app/(landing)/components/shared/code-window-graphic/code-window-graphic.tsx b/apps/sim/app/(landing)/components/shared/code-window-graphic/code-window-graphic.tsx
index 339d41860eb..2f8aab2eed9 100644
--- a/apps/sim/app/(landing)/components/shared/code-window-graphic/code-window-graphic.tsx
+++ b/apps/sim/app/(landing)/components/shared/code-window-graphic/code-window-graphic.tsx
@@ -37,7 +37,7 @@ const LINE_STEP_CLASSES = [
 /** Segment inks on the dark tile - the deploy tile's dark-surface palette. */
 const SEGMENT_TONE_CLASS = {
   muted: 'text-[var(--text-muted-inverse)]',
-  primary: 'text-[var(--text-inverse)]',
+  primary: 'text-[var(--text-inverse)] dark:text-[var(--text-primary)]',
 } as const
 
 /** Shared hairline ink for the window outline, header rule, and icon box. */
@@ -76,7 +76,9 @@ export function CodeWindowGraphic({ icon, filename, lines }: CodeWindowGraphicPr
           >
             {icon}
           </span>
-          <span className='text-[var(--text-inverse)] text-base'>{filename}</span>
+          <span className='text-[var(--text-inverse)] text-base dark:text-[var(--text-primary)]'>
+            {filename}
+          </span>
         </div>
 
         <div className='space-y-2 overflow-x-auto p-4 font-mono text-[var(--text-muted-inverse)] text-caption leading-[1.7] max-sm:text-[11px]'>
@@ -101,7 +103,7 @@ export function CodeWindowGraphic({ icon, filename, lines }: CodeWindowGraphicPr
                   </span>
                 ))}
                 {index === lines.length - 1 && (
-                  <span className='ml-px inline-block h-[1.1em] w-px translate-y-[2px] animate-pulse bg-[var(--text-inverse)] align-text-bottom motion-reduce:animate-none' />
+                  <span className='ml-px inline-block h-[1.1em] w-px translate-y-[2px] animate-pulse bg-[var(--text-inverse)] align-text-bottom motion-reduce:animate-none dark:bg-[var(--text-primary)]' />
                 )}
               </code>
             </div>
diff --git a/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-code-example.tsx b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-code-example.tsx
index 780e11c5ac4..81826a1ec85 100644
--- a/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-code-example.tsx
+++ b/apps/sim/app/(landing)/components/solutions-page/components/solutions-product-page/components/product-code-example.tsx
@@ -36,7 +36,7 @@ export function ProductCodeExample({ example }: ProductCodeExampleProps) {
             </LandingCtaLink>
           </div>
         </div>
-        <div className='min-w-0 overflow-hidden rounded-xl bg-[var(--text-secondary)] pt-8 pl-8 max-sm:pt-5 max-sm:pl-5'>
+        <div className='min-w-0 overflow-hidden rounded-xl bg-[var(--text-secondary)] pt-8 pl-8 max-sm:pt-5 max-sm:pl-5 dark:bg-[var(--surface-3)]'>
           <CodeWindowGraphic
             icon={<TerminalWindow className='size-[14px] text-[var(--text-muted-inverse)]' />}
             filename={example.filename}
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx
index 0ab291f45ab..3a6b538ce57 100644
--- a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage.tsx
@@ -52,7 +52,7 @@ interface ComposerProps {
  */
 function Composer({ children, active }: ComposerProps) {
   return (
-    <div className='w-full rounded-2xl border border-[var(--border)] bg-[var(--white)] px-2.5 py-2 shadow-[0_1px_2px_0_rgba(18,18,18,0.05)]'>
+    <div className='w-full rounded-2xl border border-[var(--border)] bg-[var(--white)] px-2.5 py-2 shadow-[0_1px_2px_0_rgba(18,18,18,0.05)] dark:bg-[var(--surface-4)]'>
       <p className='min-h-[24px] px-1.5 pt-1 text-[15px] text-[var(--text-primary)] leading-[24px]'>
         {children}
       </p>
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/audit-trail-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/audit-trail-graphic.tsx
index 16b0093323d..1860c3f478f 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/audit-trail-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/audit-trail-graphic.tsx
@@ -138,7 +138,7 @@ export function AuditTrailGraphic({ entries = ENTRIES }: AuditTrailGraphicProps
                     'flex items-center gap-3 px-3 py-2.5',
                     newest &&
                       cn(
-                        'rounded-xl border border-[var(--border-1)] bg-[var(--white)] shadow-xs',
+                        'rounded-xl border border-[var(--border-1)] bg-[var(--white)] shadow-xs dark:bg-[var(--surface-4)]',
                         styles.stampIn
                       )
                   )}
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/it-platform-teams-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/it-platform-teams-graphic.tsx
index 1707e0dbf5d..d92847a3704 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/it-platform-teams-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/it-platform-teams-graphic.tsx
@@ -107,7 +107,7 @@ export function ItPlatformTeamsGraphic({
             </span>
           </div>
 
-          <div className='flex items-center gap-3 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs'>
+          <div className='flex items-center gap-3 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs dark:bg-[var(--surface-4)]'>
             <span className='min-w-0 flex-1'>
               <span className='block truncate text-[var(--text-primary)] text-small'>
                 {cardTitle}
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/run-monitoring-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/run-monitoring-graphic.tsx
index 23a0c0dc469..22a775e7499 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/run-monitoring-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/run-monitoring-graphic.tsx
@@ -145,7 +145,7 @@ export function RunMonitoringGraphic({
 
           <div className='mt-2'>
             <span className='block text-[var(--text-muted)] text-caption'>{outputLabel}</span>
-            <div className='mt-1.5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2 font-mono text-caption leading-[1.6] shadow-xs'>
+            <div className='mt-1.5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2 font-mono text-caption leading-[1.6] shadow-xs dark:bg-[var(--surface-4)]'>
               <div className='truncate whitespace-pre'>
                 <span className='text-[var(--text-muted)]'>{`{ "${outputPairs[0].key}": `}</span>
                 <span className='text-[var(--text-secondary)]'>{outputPairs[0].value}</span>
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/staging-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/staging-graphic.tsx
index 26157cfea69..27f1c279279 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/staging-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/staging-graphic.tsx
@@ -107,7 +107,7 @@ export function StagingGraphic({
           </div>
 
           <div className='px-3 py-2.5'>
-            <div className='rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs'>
+            <div className='rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs dark:bg-[var(--surface-4)]'>
               <span className='flex items-center gap-2'>
                 <ChipTag variant='mono'>{changeTag}</ChipTag>
                 <span className='min-w-0 truncate text-[var(--text-primary)] text-small'>
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/technical-teams-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/technical-teams-graphic.tsx
index cbddeac12eb..1eadc07d7f1 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/technical-teams-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/technical-teams-graphic.tsx
@@ -114,7 +114,7 @@ export function TechnicalTeamsGraphic({
             ))}
           </div>
 
-          <div className='mt-3 flex items-center gap-3 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs'>
+          <div className='mt-3 flex items-center gap-3 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs dark:bg-[var(--surface-4)]'>
             <span className='relative size-7 shrink-0 overflow-hidden rounded-full shadow-xs'>
               <Image
                 src='/landing/team-avatar-2.jpg'
diff --git a/apps/sim/app/(landing)/solutions/components/feature-graphics/document-draft-graphic.tsx b/apps/sim/app/(landing)/solutions/components/feature-graphics/document-draft-graphic.tsx
index 300a9c17147..9bfcbe28a76 100644
--- a/apps/sim/app/(landing)/solutions/components/feature-graphics/document-draft-graphic.tsx
+++ b/apps/sim/app/(landing)/solutions/components/feature-graphics/document-draft-graphic.tsx
@@ -92,7 +92,7 @@ export function DocumentDraftGraphic({
             />
           ))}
 
-          <div className='mt-2 flex items-center gap-2 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs'>
+          <div className='mt-2 flex items-center gap-2 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs dark:bg-[var(--surface-4)]'>
             <CircleCheck className='size-[13px] shrink-0 text-[var(--text-icon)]' />
             <span className='min-w-0 flex-1 truncate text-[var(--text-primary)] text-small'>
               {footerLabel}
diff --git a/apps/sim/app/(landing)/solutions/components/feature-graphics/knowledge-answer-graphic.tsx b/apps/sim/app/(landing)/solutions/components/feature-graphics/knowledge-answer-graphic.tsx
index 79cd1e6c58e..59f7da35103 100644
--- a/apps/sim/app/(landing)/solutions/components/feature-graphics/knowledge-answer-graphic.tsx
+++ b/apps/sim/app/(landing)/solutions/components/feature-graphics/knowledge-answer-graphic.tsx
@@ -59,7 +59,7 @@ export function KnowledgeAnswerGraphic({
         <div className='flex w-full max-w-[312px] flex-col gap-3 sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
           <div
             className={cn(
-              'max-w-[85%] self-end rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2 text-[var(--text-primary)] text-caption leading-[1.5]',
+              'max-w-[85%] self-end rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2 text-[var(--text-primary)] text-caption leading-[1.5] dark:bg-[var(--surface-4)]',
               styles.stepQuestion
             )}
           >
@@ -77,7 +77,7 @@ export function KnowledgeAnswerGraphic({
 
           <div
             className={cn(
-              'flex items-center gap-2.5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs',
+              'flex items-center gap-2.5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs dark:bg-[var(--surface-4)]',
               styles.stepSource
             )}
           >
diff --git a/apps/sim/app/(landing)/solutions/finance/components/feature-graphics/reconcile-graphic.tsx b/apps/sim/app/(landing)/solutions/finance/components/feature-graphics/reconcile-graphic.tsx
index c42beb382dc..47285a83a62 100644
--- a/apps/sim/app/(landing)/solutions/finance/components/feature-graphics/reconcile-graphic.tsx
+++ b/apps/sim/app/(landing)/solutions/finance/components/feature-graphics/reconcile-graphic.tsx
@@ -85,7 +85,7 @@ export function ReconcileGraphic() {
 
           <div
             className={cn(
-              'mt-2 flex items-center gap-3 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs',
+              'mt-2 flex items-center gap-3 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-xs dark:bg-[var(--surface-4)]',
               styles.exceptionIn
             )}
           >
diff --git a/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-list/lead-record-list.tsx b/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-list/lead-record-list.tsx
index 3d4fedb1acf..c9e3e525b97 100644
--- a/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-list/lead-record-list.tsx
+++ b/apps/sim/app/(landing)/tables/components/tables-records-preview/components/lead-record-list/lead-record-list.tsx
@@ -21,8 +21,13 @@ const COLUMNS = [
 export function LeadRecordList({ rows, selectedId, onSelect, showContact }: LeadRecordListProps) {
   const columns = showContact ? COLUMNS : COLUMNS.slice(0, 3)
   return (
-    <div className='h-[354px] overflow-auto'>
-      <table className='w-full min-w-[600px] table-fixed border-collapse text-left text-small'>
+    <div className='min-h-0 flex-1 overflow-auto'>
+      <table
+        className={cn(
+          'w-full table-fixed border-collapse text-left text-small',
+          showContact ? 'min-w-[618px]' : 'min-w-[434px]'
+        )}
+      >
         <colgroup>
           <col className='w-10' />
           <col className='w-[174px]' />
diff --git a/apps/sim/app/(landing)/tables/components/tables-records-preview/tables-records-preview.tsx b/apps/sim/app/(landing)/tables/components/tables-records-preview/tables-records-preview.tsx
index b134303c7cb..2401e673318 100644
--- a/apps/sim/app/(landing)/tables/components/tables-records-preview/tables-records-preview.tsx
+++ b/apps/sim/app/(landing)/tables/components/tables-records-preview/tables-records-preview.tsx
@@ -1,109 +1,17 @@
-'use client'
-
-import { useRef, useState } from 'react'
-import {
-  Chip,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@sim/emcn'
-import { Check, ChevronDown, Columns3, ListFilter, Table } from '@sim/emcn/icons'
-import {
-  MenuPreviewHeader,
-  MenuPreviewToolbar,
-} from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
 import { EdgeFade } from '@/app/(landing)/components/shared/edge-fade'
-import { usePreviewDialogFocus } from '@/app/(landing)/hooks/use-preview-dialog-focus'
-import { LeadRecordDetail } from '@/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail'
-import { LeadRecordList } from '@/app/(landing)/tables/components/tables-records-preview/components/lead-record-list'
-import {
-  type LeadRecord,
-  ROWS,
-} from '@/app/(landing)/tables/components/tables-records-preview/data'
+import { TablesRecordsTable } from '@/app/(landing)/tables/components/tables-records-preview/tables-records-table'
 
-/** The native ruled Tables grid and Edit Row dialog, backed only by local demo records. */
+/** A framed view of the same interactive Tables surface used in the homepage resource pane. */
 export function TablesRecordsPreview() {
-  const filterButtonRef = useRef<HTMLButtonElement>(null)
-  const [rows, setRows] = useState<readonly LeadRecord[]>(ROWS)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const [status, setStatus] = useState<LeadRecord['status'] | null>(null)
-  const [showContact, setShowContact] = useState(true)
-  const selected = rows.find((row) => row.id === selectedId)
-  const visibleRows = rows.filter((row) => !status || row.status === status)
-  const dialogOpenerRef = usePreviewDialogFocus(Boolean(selected), filterButtonRef)
-
   return (
     <div className='absolute inset-0 isolate overflow-hidden bg-[var(--bg)]'>
       <div className='-translate-x-1/2 absolute top-20 left-1/2 h-[440px] w-[780px] max-w-[calc(100%_-_48px)] max-sm:top-8 max-sm:h-[410px]'>
-        <div className='h-full overflow-hidden rounded-[10px] border border-[var(--border)] bg-[var(--bg)] text-[var(--text-body)] text-small shadow-xs'>
-          <MenuPreviewHeader
-            icon={Table}
-            title='Qualified leads'
-            actions={`${visibleRows.length} rows`}
-          />
-          <MenuPreviewToolbar>
-            <span aria-hidden='true' inert>
-              <Chip rightIcon={ChevronDown}>All records</Chip>
-            </span>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Chip ref={filterButtonRef} leftIcon={ListFilter} active={status !== null}>
-                  Filter
-                </Chip>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align='start'>
-                <DropdownMenuItem onSelect={() => setStatus(null)} active={status === null}>
-                  All statuses
-                </DropdownMenuItem>
-                {(['Qualified', 'Review'] as const).map((value) => (
-                  <DropdownMenuItem
-                    key={value}
-                    onSelect={() => setStatus(value)}
-                    active={status === value}
-                  >
-                    {value}
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <span className='ml-auto'>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Chip leftIcon={Columns3}>Columns</Chip>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align='end'>
-                  <DropdownMenuItem onSelect={() => setShowContact((value) => !value)}>
-                    {showContact && <Check />}Contact
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </span>
-          </MenuPreviewToolbar>
-          <LeadRecordList
-            rows={visibleRows}
-            selectedId={selectedId}
-            onSelect={(id, opener) => {
-              dialogOpenerRef.current = opener
-              setSelectedId(id)
-            }}
-            showContact={showContact}
-          />
+        <div className='h-full overflow-hidden rounded-[10px] border border-[var(--border)] shadow-xs'>
+          <TablesRecordsTable />
         </div>
         <EdgeFade ground='canvas' edges={['bottom']} depth='stage' />
       </div>
       <EdgeFade ground='canvas' edges={['top', 'left', 'right']} depth='preview' />
-      {selected && (
-        <LeadRecordDetail
-          key={selected.id}
-          record={selected}
-          onClose={() => setSelectedId(null)}
-          onSave={(record) => {
-            setRows((current) => current.map((row) => (row.id === record.id ? record : row)))
-            setSelectedId(null)
-          }}
-        />
-      )}
     </div>
   )
 }
diff --git a/apps/sim/app/(landing)/tables/components/tables-records-preview/tables-records-table.tsx b/apps/sim/app/(landing)/tables/components/tables-records-preview/tables-records-table.tsx
new file mode 100644
index 00000000000..808da77d971
--- /dev/null
+++ b/apps/sim/app/(landing)/tables/components/tables-records-preview/tables-records-table.tsx
@@ -0,0 +1,106 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import {
+  Chip,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@sim/emcn'
+import { Check, ChevronDown, Columns3, ListFilter, Table } from '@sim/emcn/icons'
+import {
+  MenuPreviewHeader,
+  MenuPreviewToolbar,
+} from '@/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/menu-preview-header/menu-preview-header'
+import { usePreviewDialogFocus } from '@/app/(landing)/hooks/use-preview-dialog-focus'
+import { LeadRecordDetail } from '@/app/(landing)/tables/components/tables-records-preview/components/lead-record-detail'
+import { LeadRecordList } from '@/app/(landing)/tables/components/tables-records-preview/components/lead-record-list'
+import {
+  type LeadRecord,
+  ROWS,
+} from '@/app/(landing)/tables/components/tables-records-preview/data'
+
+interface TablesRecordsTableProps {
+  initialRows?: readonly LeadRecord[]
+}
+
+/** The native ruled Tables grid and Edit Row dialog, backed only by local demo records. */
+export function TablesRecordsTable({ initialRows = ROWS }: TablesRecordsTableProps) {
+  const filterButtonRef = useRef<HTMLButtonElement>(null)
+  const [rows, setRows] = useState<readonly LeadRecord[]>(initialRows)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [status, setStatus] = useState<LeadRecord['status'] | null>(null)
+  const [showContact, setShowContact] = useState(true)
+  const selected = rows.find((row) => row.id === selectedId)
+  const visibleRows = rows.filter((row) => !status || row.status === status)
+  const dialogOpenerRef = usePreviewDialogFocus(Boolean(selected), filterButtonRef)
+
+  return (
+    <div className='relative flex h-full min-h-0 flex-col overflow-hidden bg-[var(--bg)] text-[var(--text-body)] text-small'>
+      <MenuPreviewHeader
+        icon={Table}
+        title='Qualified leads'
+        actions={`${visibleRows.length} rows`}
+      />
+      <MenuPreviewToolbar>
+        <span aria-hidden='true' inert>
+          <Chip rightIcon={ChevronDown}>All records</Chip>
+        </span>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Chip ref={filterButtonRef} leftIcon={ListFilter} active={status !== null}>
+              Filter
+            </Chip>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align='start'>
+            <DropdownMenuItem onSelect={() => setStatus(null)} active={status === null}>
+              All statuses
+            </DropdownMenuItem>
+            {(['Qualified', 'Review'] as const).map((value) => (
+              <DropdownMenuItem
+                key={value}
+                onSelect={() => setStatus(value)}
+                active={status === value}
+              >
+                {value}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <span className='ml-auto'>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Chip leftIcon={Columns3}>Columns</Chip>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align='end'>
+              <DropdownMenuItem onSelect={() => setShowContact((value) => !value)}>
+                {showContact && <Check />}Contact
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </span>
+      </MenuPreviewToolbar>
+      <LeadRecordList
+        rows={visibleRows}
+        selectedId={selectedId}
+        onSelect={(id, opener) => {
+          dialogOpenerRef.current = opener
+          setSelectedId(id)
+        }}
+        showContact={showContact}
+      />
+      {selected && (
+        <LeadRecordDetail
+          key={selected.id}
+          record={selected}
+          onClose={() => setSelectedId(null)}
+          onSave={(record) => {
+            setRows((current) => current.map((row) => (row.id === record.id ? record : row)))
+            setSelectedId(null)
+          }}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/public/landing/customer-stories/exp-house-color-loop.mp4 b/apps/sim/public/landing/customer-stories/exp-house-color-loop.mp4
new file mode 100644
index 00000000000..54103b50671
Binary files /dev/null and b/apps/sim/public/landing/customer-stories/exp-house-color-loop.mp4 differ
diff --git a/apps/sim/public/landing/customer-stories/exp-house-color-poster.jpg b/apps/sim/public/landing/customer-stories/exp-house-color-poster.jpg
new file mode 100644
index 00000000000..12cd7002f7f
Binary files /dev/null and b/apps/sim/public/landing/customer-stories/exp-house-color-poster.jpg differ