diff --git a/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.tsx b/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.tsx
index f8d2d9c6688..f2c0d10c092 100644
--- a/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.tsx
+++ b/apps/sim/app/(landing)/components/footer/components/footer-wordmark-loop/footer-wordmark-loop.tsx
@@ -1,654 +1,11 @@
-'use client'
-
-import { type CSSProperties, useEffect, useId, useRef } from 'react'
-import { cn } from '@sim/emcn'
-import { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from '@/lib/branding/wordmark'
-
-/**
- * The mark's ink: the platform's thinking-loader gradient tokens, so it follows
- * the theme. Light resolves to the locked `GOO_GRADIENT` recipe; dark lifts it
- * to the loader's light-on-dark material. Set through `style`, where `var()`
- * is unambiguous, rather than as a presentation attribute.
- */
-const INK_STOP_INNER = { stopColor: 'var(--thinking-ink-inner)' } as const satisfies CSSProperties
-const INK_STOP_OUTER = { stopColor: 'var(--thinking-ink-outer)' } as const satisfies CSSProperties
-
-/**
- * The seven thinking-loader shapes in play order, each with its hold in ms.
- * Order, holds, and every timing constant below are the master's - the
- * "Sim loader wordmark" film's deterministic generator - so the footer plays
- * the same choreography frame for frame.
- */
-const SHAPES = [
-  ['metaballs', 2000],
-  ['relay', 1300],
-  ['compass', 2000],
-  ['corners', 800],
-  ['burst', 1300],
-  ['squeeze', 1200],
-  ['thinking', 2000],
-] as const
-
-type ShapeKey = (typeof SHAPES)[number][0]
-type StageKey = ShapeKey | 'orb' | 'wm'
-
-/** Crossfade between two consecutive shapes. */
-const MORPH = 500
-/** Liquid morph between the wordmark and the orb, on each side of the cycle. */
-const MORPH_LOGO = 1200
-/** Opening hold on the crisp wordmark. */
-const LOGO_HOLD = 1300
-/** Orb settle on either side of the shape cycle. */
-const ORB_BEAT = 450
-/** Closing hold on the wordmark before the loop wraps back to the opening hold. */
-const HOLD_LOGO_END = 1700
-const TAIL = 200
-/** Blur range for the filtered portion of the morph. */
-const GOO_HI = 5
-const GOO_LO = 0.55
-/**
- * Shapes that restart from compact when they appear and play exactly one pulse
- * of this many ms (just under a loop, so the dots reach the edge without
- * snapping back) instead of free-running on the shared clock.
- */
-const LOCAL_PULSE: Partial<Record<ShapeKey, number>> = { burst: 770 }
-/**
- * Longest step the clock advances per frame. A background tab or a stalled
- * frame resumes mid-choreography instead of skipping ahead.
- */
-const MAX_FRAME_STEP = 100
-
-const T_LOGO_HOLD_END = LOGO_HOLD
-const T_INTRO_END = T_LOGO_HOLD_END + MORPH_LOGO
-const FIRST_SHAPE_START = T_INTRO_END + ORB_BEAT
-
-/** Lays the shapes end to end from the first shape's start. */
-function buildShapeWindows(): {
-  windows: Record<ShapeKey, readonly [number, number]>
-  end: number
-} {
-  const windows: Partial<Record<ShapeKey, readonly [number, number]>> = {}
-  let cursor = FIRST_SHAPE_START
-  for (const [key, hold] of SHAPES) {
-    windows[key] = [cursor, cursor + hold]
-    cursor += hold
-  }
-  return { windows: windows as Record<ShapeKey, readonly [number, number]>, end: cursor }
-}
-
-const { windows: SHAPE_WINDOWS, end: SHAPES_END } = buildShapeWindows()
-const T_OUTRO_START = SHAPES_END + ORB_BEAT
-const T_OUTRO_END = T_OUTRO_START + MORPH_LOGO
-/** One full pass: wordmark → orb → seven shapes → orb → wordmark. */
-const CYCLE_MS = T_OUTRO_END + HOLD_LOGO_END + TAIL
-
-interface Track {
-  /** Period in ms. */
-  dur: number
-  /** Play backwards on odd iterations. */
-  alt?: boolean
-  /** Linear timing instead of the CSS default ease. */
-  lin?: boolean
-  /** `[progress, x, y]` keyframes in stage units. */
-  stops: ReadonlyArray<readonly [number, number, number]>
-  /** Optional `[progress, opacity]` keyframes. */
-  op?: ReadonlyArray<readonly [number, number]>
-}
-
-/** Per-element motion tracks - the loader's CSS keyframes, evaluated analytically. */
-const TRACKS = {
-  metaballsA: {
-    dur: 1000,
-    alt: true,
-    stops: [
-      [0, 0, 0],
-      [0.9, 28, 0],
-      [1, 28, 0],
-    ],
-  },
-  metaballsB: {
-    dur: 1000,
-    alt: true,
-    stops: [
-      [0, 0, 0],
-      [0.9, -28, 0],
-      [1, -28, 0],
-    ],
-  },
-  relayBall: {
-    dur: 1300,
-    lin: true,
-    stops: [
-      [0, 0, 0],
-      [1, 58, 0],
-    ],
-    op: [
-      [0, 0],
-      [0.2, 1],
-      [0.78, 1],
-      [1, 0],
-    ],
-  },
-  compassMover: {
-    dur: 2000,
-    stops: [
-      [0, 0, 0],
-      [0.25, 27, 27],
-      [0.5, 0, 54],
-      [0.75, -27, 27],
-      [1, 0, 0],
-    ],
-  },
-  cornersA: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, 46, 0],
-    ],
-  },
-  cornersB: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, 0, 46],
-    ],
-  },
-  cornersC: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, -46, 0],
-    ],
-  },
-  cornersD: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, 0, -46],
-    ],
-  },
-  burstUp: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, 0, -50],
-    ],
-  },
-  burstDown: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, 0, 50],
-    ],
-  },
-  burstLeft: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, -50, 0],
-    ],
-  },
-  burstRight: {
-    dur: 800,
-    stops: [
-      [0, 0, 0],
-      [1, 50, 0],
-    ],
-  },
-  squeezeBarL: {
-    dur: 600,
-    alt: true,
-    stops: [
-      [0, 0, 0],
-      [0.3, 0, 0],
-      [1, 10, 0],
-    ],
-  },
-  squeezeBarR: {
-    dur: 600,
-    alt: true,
-    stops: [
-      [0, 0, 0],
-      [0.3, 0, 0],
-      [1, -10, 0],
-    ],
-  },
-  thinkA: {
-    dur: 1600,
-    alt: true,
-    stops: [
-      [0, 0, 0],
-      [1, -20, -14],
-    ],
-  },
-  thinkB: {
-    dur: 1900,
-    alt: true,
-    stops: [
-      [0, 0, 0],
-      [1, 22, -10],
-    ],
-  },
-  thinkC: {
-    dur: 1300,
-    alt: true,
-    stops: [
-      [0, 0, 0],
-      [1, 2, 22],
-    ],
-  },
-} as const satisfies Record<string, Track>
-
-type AnimKey = keyof typeof TRACKS
-
-const clamp01 = (x: number): number => Math.max(0, Math.min(1, x))
-
-/** A CSS `cubic-bezier` timing function, solved for `x` by Newton iteration. */
-function cubicBezier(
-  p1x: number,
-  p1y: number,
-  p2x: number,
-  p2y: number
-): (progress: number) => number {
-  const cx = 3 * p1x
-  const bx = 3 * (p2x - p1x) - cx
-  const ax = 1 - cx - bx
-  const cy = 3 * p1y
-  const by = 3 * (p2y - p1y) - cy
-  const ay = 1 - cy - by
-  const sampleX = (t: number) => ((ax * t + bx) * t + cx) * t
-  const sampleY = (t: number) => ((ay * t + by) * t + cy) * t
-  const slopeX = (t: number) => (3 * ax * t + 2 * bx) * t + cx
-  return (progress) => {
-    let t = progress
-    for (let i = 0; i < 8; i++) {
-      const error = sampleX(t) - progress
-      if (Math.abs(error) < 1e-6) break
-      const slope = slopeX(t)
-      if (Math.abs(slope) < 1e-6) break
-      t -= error / slope
-    }
-    return sampleY(clamp01(t))
-  }
-}
-
-/** The CSS default `ease`. */
-const EASE = cubicBezier(0.25, 0.1, 0.25, 1)
-const LINEAR = (progress: number): number => progress
-
-/** Hermite smoothstep from `a` to `b`. */
-function smooth(a: number, b: number, x: number): number {
-  const t = clamp01((x - a) / (b - a))
-  return t * t * (3 - 2 * t)
-}
-
-/** Opacity envelope: rises over `[t0, t1]`, holds, falls over `[t2, t3]`. */
-function envelope(t: number, t0: number, t1: number, t2: number, t3: number): number {
-  return Math.min(smooth(t0, t1, t), 1 - smooth(t2, t3, t))
-}
-
-/** The keyframe pair around `frac` and the clamped progress between them. */
-function segment<T extends readonly [number, ...number[]]>(
-  stops: ReadonlyArray<T>,
-  frac: number
-): { a: T; b: T; p: number } {
-  let a = stops[0]
-  let b = stops[stops.length - 1]
-  for (let i = 0; i < stops.length - 1; i++) {
-    if (frac >= stops[i][0] && frac <= stops[i + 1][0]) {
-      a = stops[i]
-      b = stops[i + 1]
-      break
-    }
-  }
-  const span = b[0] - a[0] || 1
-  return { a, b, p: clamp01((frac - a[0]) / span) }
-}
-
-interface Sample {
-  x: number
-  y: number
-  opacity: number
-}
-
-/** Position and opacity of a track at `at` ms on its own clock. */
-function sampleTrack(track: Track, at: number): Sample {
-  const raw = at / track.dur
-  const iteration = Math.floor(raw)
-  let frac = raw - iteration
-  if (track.alt && iteration % 2 === 1) frac = 1 - frac
-  const { a, b, p } = segment(track.stops, frac)
-  const eased = (track.lin ? LINEAR : EASE)(p)
-  const x = a[1] + (b[1] - a[1]) * eased
-  const y = a[2] + (b[2] - a[2]) * eased
-  let opacity = 1
-  if (track.op) {
-    const o = segment(track.op, frac)
-    opacity = o.a[1] + (o.b[1] - o.a[1]) * o.p
-  }
-  return { x, y, opacity }
-}
-
-/**
- * The wordmark's width inside the 100-unit stage - the generator's 816×392
- * mark at 0.11164, so the word sits at the same size relative to the orb.
- */
-const WORDMARK_WIDTH = 91.1
-const WORDMARK_SCALE = WORDMARK_WIDTH / WORDMARK_VIEW_BOX.width
-const WORDMARK_HEIGHT = WORDMARK_VIEW_BOX.height * WORDMARK_SCALE
-const WORDMARK_X = (100 - WORDMARK_WIDTH) / 2
-const WORDMARK_Y = (100 - WORDMARK_HEIGHT) / 2
-const WORDMARK_CX = WORDMARK_VIEW_BOX.width / 2
-const WORDMARK_CY = WORDMARK_VIEW_BOX.height / 2
-
-const round = (n: number): string => n.toFixed(3)
-
-interface AnimatedNode {
-  el: SVGGraphicsElement
-  track: Track
-  stage: ShapeKey
-}
-
-interface StageNode {
-  el: SVGGElement
-  key: StageKey
-}
-
-interface GooFilterNodes {
-  blur: SVGFEGaussianBlurElement
-  matrix: SVGFEColorMatrixElement
-}
-
-/**
- * Paints one frame of the choreography at `t` ms into the cycle by writing
- * SVG attributes directly - no React render per frame.
- */
-function paintFrame(
-  t: number,
-  goo: GooFilterNodes,
-  stages: StageNode[],
-  anims: AnimatedNode[]
-): void {
-  for (const { el, track, stage } of anims) {
-    const pulse = LOCAL_PULSE[stage]
-    const clock =
-      pulse === undefined
-        ? t
-        : Math.max(0, Math.min(t - (SHAPE_WINDOWS[stage][0] + MORPH / 2), pulse))
-    const sample = sampleTrack(track, clock)
-    el.setAttribute('transform', `translate(${round(sample.x)} ${round(sample.y)})`)
-    if (track.op) el.setAttribute('opacity', sample.opacity.toFixed(4))
-  }
-
-  const introLogo = 1 - smooth(T_LOGO_HOLD_END, T_INTRO_END, t)
-  const outroLogo = smooth(T_OUTRO_START, T_OUTRO_END, t)
-  const logo = Math.max(introLogo, outroLogo)
-  const orbIn = envelope(
-    t,
-    T_LOGO_HOLD_END,
-    T_INTRO_END,
-    FIRST_SHAPE_START - MORPH / 2,
-    FIRST_SHAPE_START + MORPH / 2
-  )
-  const orbOut = envelope(
-    t,
-    SHAPES_END - MORPH / 2,
-    SHAPES_END + MORPH / 2,
-    T_OUTRO_START,
-    T_OUTRO_END
-  )
-  const orb = Math.max(orbIn, orbOut)
-
-  for (const { el, key } of stages) {
-    let opacity: number
-    if (key === 'wm') opacity = logo
-    else if (key === 'orb') opacity = orb
-    else {
-      const [start, end] = SHAPE_WINDOWS[key]
-      opacity = envelope(t, start - MORPH / 2, start + MORPH / 2, end - MORPH / 2, end + MORPH / 2)
-    }
-    el.setAttribute('opacity', opacity.toFixed(4))
-  }
-
-  const liquid = Math.min(
-    smooth(T_LOGO_HOLD_END, T_INTRO_END, t),
-    1 - smooth(T_OUTRO_START, T_OUTRO_END, t)
-  )
-  /** Ease the filter to identity at rest without overlaying the unfiltered shapes. */
-  const strength = Math.min(
-    smooth(T_LOGO_HOLD_END, T_LOGO_HOLD_END + MORPH, t),
-    1 - smooth(T_OUTRO_END - MORPH, T_OUTRO_END, t)
-  )
-  const deviation = round((GOO_LO + (GOO_HI - GOO_LO) * liquid) * strength)
-  if (goo.blur.getAttribute('stdDeviation') !== deviation) {
-    goo.blur.setAttribute('stdDeviation', deviation)
-  }
-  const matrix = `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${round(1 + 39 * strength)} ${round(-19 * strength)}`
-  if (goo.matrix.getAttribute('values') !== matrix) goo.matrix.setAttribute('values', matrix)
-}
+import { WordmarkMorph } from '@/components/ui/wordmark-morph'
 
 interface FooterWordmarkLoopProps {
-  /** Layout only - margins and alignment. The mark owns its size and chrome. */
+  /** Layout only: margins and alignment. */
   className?: string
 }
 
-/**
- * The footer's closing brand beat: the "Sim loader wordmark" film, live. The
- * crisp `sim` wordmark goo-melts into the thinking loader's orb, cycles through
- * all seven loader shapes with gooey morphs between them, settles back to the
- * orb, and liquid-morphs back into the wordmark - then holds and repeats.
- * Same geometry, goo filter, ink gradient, and timeline as the master
- * generator and the product's `ThinkingLoader`, drawn in one 100-unit SVG
- * stage that scales with the viewport.
- *
- * The stage reserves a 5:3 slot rather than its full square: the crisp wordmark
- * only ever needs the middle band, and the orb and shapes overflow symmetrically
- * into the beat's margins while they play, so the footer stays short enough to
- * sit on one screen together with its link directory.
- *
- * Rendering budget: the server renders the resting frame (crisp wordmark) so
- * the mark is in the HTML with zero layout shift and needs no JS to look
- * finished. The `requestAnimationFrame` loop only runs while the stage is in
- * the viewport, writes attributes straight to the SVG (no React render per
- * frame), and never starts under `prefers-reduced-motion`, where the wordmark
- * simply stays put.
- */
+/** The footer's closing brand animation at its responsive display size. */
 export function FooterWordmarkLoop({ className }: FooterWordmarkLoopProps) {
-  const svgRef = useRef<SVGSVGElement>(null)
-  const id = useId().replace(/[^a-zA-Z0-9-]/g, '')
-  const gooId = `fwl-goo-${id}`
-  const inkId = `fwl-ink-${id}`
-  const wordmarkInkId = `fwl-wm-ink-${id}`
-  const clipId = `fwl-clip-${id}`
-  const windowId = `fwl-window-${id}`
-
-  useEffect(() => {
-    const svg = svgRef.current
-    if (!svg) return
-    const blur = svg.querySelector<SVGFEGaussianBlurElement>('[data-goo]')
-    const matrix = svg.querySelector<SVGFEColorMatrixElement>('[data-goo-matrix]')
-    if (!blur || !matrix) return
-    const goo: GooFilterNodes = { blur, matrix }
-
-    const stages: StageNode[] = Array.from(
-      svg.querySelectorAll<SVGGElement>('[data-stage]'),
-      (el) => ({ el, key: el.getAttribute('data-stage') as StageKey })
-    )
-    const anims: AnimatedNode[] = []
-    for (const el of svg.querySelectorAll<SVGGraphicsElement>('[data-anim]')) {
-      const stage = el.closest('[data-stage]')?.getAttribute('data-stage') as ShapeKey | undefined
-      if (stage) anims.push({ el, track: TRACKS[el.getAttribute('data-anim') as AnimKey], stage })
-    }
-
-    const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')
-    let frame: number | null = null
-    let previous: number | null = null
-    let elapsed = 0
-    let inView = false
-
-    const tick = (now: number) => {
-      if (previous !== null) elapsed += Math.min(now - previous, MAX_FRAME_STEP)
-      previous = now
-      paintFrame(elapsed % CYCLE_MS, goo, stages, anims)
-      frame = requestAnimationFrame(tick)
-    }
-    const play = () => {
-      if (frame !== null || !inView || reducedMotion?.matches) return
-      previous = null
-      frame = requestAnimationFrame(tick)
-    }
-    const pause = () => {
-      if (frame === null) return
-      cancelAnimationFrame(frame)
-      frame = null
-    }
-    const onMotionPreference = () => {
-      if (reducedMotion?.matches) {
-        pause()
-        elapsed = 0
-        paintFrame(0, goo, stages, anims)
-      } else {
-        play()
-      }
-    }
-    reducedMotion?.addEventListener('change', onMotionPreference)
-
-    let observer: IntersectionObserver | undefined
-    if (typeof IntersectionObserver === 'undefined') {
-      inView = true
-      play()
-    } else {
-      observer = new IntersectionObserver(([entry]) => {
-        inView = entry.isIntersecting
-        if (inView) play()
-        else pause()
-      })
-      observer.observe(svg)
-    }
-
-    return () => {
-      pause()
-      observer?.disconnect()
-      reducedMotion?.removeEventListener('change', onMotionPreference)
-    }
-  }, [])
-
-  return (
-    <div className={cn('relative mx-auto aspect-[5/3] w-[clamp(180px,17vw,320px)]', className)}>
-      <svg
-        ref={svgRef}
-        viewBox='0 0 100 100'
-        aria-hidden='true'
-        className='-translate-y-1/2 absolute inset-x-0 top-1/2 aspect-square w-full overflow-visible'
-      >
-        <defs>
-          <filter
-            id={gooId}
-            x='-30%'
-            y='-30%'
-            width='160%'
-            height='160%'
-            colorInterpolationFilters='sRGB'
-          >
-            <feGaussianBlur data-goo='' in='SourceGraphic' stdDeviation={0} result='blur' />
-            {/* A steep threshold: the melt between shapes keeps its liquid
-                merges, but every edge resolves within a pixel, so the mark
-                stays crisp at the cycle's full blur. */}
-            <feColorMatrix
-              data-goo-matrix=''
-              in='blur'
-              values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0'
-              result='goo'
-            />
-          </filter>
-          <radialGradient id={inkId} cx='0.5' cy='0.5' r='0.5'>
-            <stop style={INK_STOP_INNER} />
-            <stop offset='1' style={INK_STOP_OUTER} />
-          </radialGradient>
-          <radialGradient
-            id={wordmarkInkId}
-            cx='0'
-            cy='0'
-            r='1'
-            gradientUnits='userSpaceOnUse'
-            gradientTransform={`translate(${WORDMARK_CX} ${WORDMARK_CY}) rotate(90) scale(${WORDMARK_CY} ${WORDMARK_CX})`}
-          >
-            <stop style={INK_STOP_INNER} />
-            <stop offset='1' style={INK_STOP_OUTER} />
-          </radialGradient>
-          <clipPath id={clipId}>
-            <rect width='100' height='100' />
-          </clipPath>
-          <clipPath id={windowId}>
-            <rect x='12.5' y='12.5' width='75' height='75' />
-          </clipPath>
-        </defs>
-
-        <g
-          filter={`url(#${gooId})`}
-          fill={`url(#${inkId})`}
-          stroke={`url(#${inkId})`}
-          strokeWidth={0}
-        >
-          <g data-stage='metaballs' opacity={0} clipPath={`url(#${clipId})`}>
-            <circle data-anim='metaballsA' cx='22' cy='50' r='16' />
-            <circle data-anim='metaballsB' cx='78' cy='50' r='16' />
-          </g>
-          <g data-stage='relay' opacity={0} clipPath={`url(#${clipId})`}>
-            <rect x='13' y='28' width='16' height='44' />
-            <rect x='71' y='28' width='16' height='44' />
-            <circle data-anim='relayBall' cx='21' cy='50' r='14' />
-          </g>
-          <g data-stage='compass' opacity={0} clipPath={`url(#${clipId})`}>
-            <circle cx='50' cy='23' r='14' />
-            <circle cx='23' cy='50' r='14' />
-            <circle cx='77' cy='50' r='14' />
-            <circle cx='50' cy='77' r='14' />
-            <circle data-anim='compassMover' cx='50' cy='23' r='14' />
-          </g>
-          <g data-stage='corners' opacity={0} clipPath={`url(#${clipId})`}>
-            <rect x='27' y='27' width='46' height='46' />
-            <circle data-anim='cornersA' cx='27' cy='27' r='14' />
-            <circle data-anim='cornersB' cx='73' cy='27' r='14' />
-            <circle data-anim='cornersC' cx='73' cy='73' r='14' />
-            <circle data-anim='cornersD' cx='27' cy='73' r='14' />
-          </g>
-          <g data-stage='burst' opacity={0} clipPath={`url(#${windowId})`}>
-            <rect x='12.5' y='43.75' width='75' height='12.5' />
-            <rect x='43.75' y='12.5' width='12.5' height='75' />
-            <circle cx='50' cy='50' r='12.5' />
-            <circle data-anim='burstUp' cx='50' cy='50' r='12.5' />
-            <circle data-anim='burstDown' cx='50' cy='50' r='12.5' />
-            <circle data-anim='burstLeft' cx='50' cy='50' r='12.5' />
-            <circle data-anim='burstRight' cx='50' cy='50' r='12.5' />
-          </g>
-          <g data-stage='squeeze' opacity={0} clipPath={`url(#${clipId})`}>
-            <path d='M 21.36 37.5 A 31.25 31.25 0 0 1 78.64 37.5' fill='none' strokeWidth='12.5' />
-            <path d='M 21.36 62.5 A 31.25 31.25 0 0 0 78.64 62.5' fill='none' strokeWidth='12.5' />
-            <rect data-anim='squeezeBarL' x='15' y='37.5' width='12.5' height='25' />
-            <rect data-anim='squeezeBarR' x='72.5' y='37.5' width='12.5' height='25' />
-          </g>
-          <g data-stage='thinking' opacity={0} clipPath={`url(#${clipId})`}>
-            <circle cx='50' cy='50' r='15' />
-            <circle data-anim='thinkA' cx='50' cy='50' r='12' />
-            <circle data-anim='thinkB' cx='50' cy='50' r='12' />
-            <circle data-anim='thinkC' cx='50' cy='50' r='11' />
-          </g>
-          <g data-stage='orb' opacity={0}>
-            <circle cx='50' cy='50' r='42' />
-          </g>
-          <g
-            data-stage='wm'
-            opacity={1}
-            fill={`url(#${wordmarkInkId})`}
-            transform={`translate(${round(WORDMARK_X)} ${round(WORDMARK_Y)}) scale(${WORDMARK_SCALE.toFixed(5)})`}
-          >
-            {WORDMARK_PATHS.map((d) => (
-              <path key={d} d={d} />
-            ))}
-          </g>
-        </g>
-      </svg>
-    </div>
-  )
+  return <WordmarkMorph size='lg' className={className} />
 }
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 18e64a2a105..f02edf8e277 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
@@ -1,16 +1,18 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Button, cn, Tooltip, usePrefersReducedMotion } from '@sim/emcn'
 import {
-  Button,
-  cn,
+  Circle,
   Duplicate,
+  Loader,
+  Minus,
   PlayOutline,
-  Tooltip,
+  Plus,
+  Square,
   Trash,
-  usePrefersReducedMotion,
-} from '@sim/emcn'
-import { Circle, Minus, Plus, Square, Unlock } from '@sim/emcn/icons'
+  Unlock,
+} from '@sim/emcn/icons'
 import {
   CanvasSentenceView,
   InlineChip,
@@ -175,20 +177,9 @@ function RunningActionIcon() {
       <span className='sr-only'>Block running</span>
       <span
         aria-hidden='true'
-        className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 motion-safe:animate-spin motion-reduce:transition-none'
+        className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 motion-reduce:transition-none'
       >
-        <svg className='size-[14px]' viewBox='0 0 24 24' fill='none'>
-          <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='2' opacity='0.25' />
-          <circle
-            cx='12'
-            cy='12'
-            r='10'
-            stroke='currentColor'
-            strokeWidth='2'
-            strokeLinecap='round'
-            strokeDasharray='18 45'
-          />
-        </svg>
+        <Loader className='size-[14px]' animate />
       </span>
       <span
         aria-hidden='true'
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
index a679aef3881..03cc93c9dbf 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
@@ -1,18 +1,17 @@
 'use client'
 
 import { type ReactNode, useEffect, useRef, useState } from 'react'
+import { Button, cn, handleKeyboardActivation, Switch, Tooltip } from '@sim/emcn'
 import {
-  Button,
   Check,
-  cn,
+  Circle,
   Duplicate,
-  handleKeyboardActivation,
+  Loader,
   PlayOutline,
-  Switch,
-  Tooltip,
+  Square,
   Trash,
-} from '@sim/emcn'
-import { Circle, Square, Unlock } from '@sim/emcn/icons'
+  Unlock,
+} from '@sim/emcn/icons'
 import {
   BLOCK_DIMENSIONS,
   CanvasSentenceView,
@@ -163,20 +162,9 @@ function RunningActionIcon() {
       <span className='sr-only'>Block running</span>
       <span
         aria-hidden='true'
-        className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 group-focus-visible/run:opacity-0 motion-safe:animate-spin motion-reduce:transition-none'
+        className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 group-focus-visible/run:opacity-0 motion-reduce:transition-none'
       >
-        <svg className='size-[14px]' viewBox='0 0 24 24' fill='none'>
-          <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='2' opacity='0.25' />
-          <circle
-            cx='12'
-            cy='12'
-            r='10'
-            stroke='currentColor'
-            strokeWidth='2'
-            strokeLinecap='round'
-            strokeDasharray='18 45'
-          />
-        </svg>
+        <Loader className='size-[14px]' animate />
       </span>
       <Square
         aria-hidden='true'
diff --git a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview/workflow-menu-preview.test.tsx b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview/workflow-menu-preview.test.tsx
index aa7ac68b06d..a3e5d12ff17 100644
--- a/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview/workflow-menu-preview.test.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview/workflow-menu-preview.test.tsx
@@ -14,12 +14,8 @@ const { paintedCards, toolbarCallbacks } = vi.hoisted(() => ({
 vi.mock('@sim/emcn', () => ({
   cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
   Button: (props: ComponentProps<'button'>) => <button {...props} />,
-  Check: () => null,
-  Duplicate: () => null,
   handleKeyboardActivation: () => undefined,
-  PlayOutline: () => null,
   Switch: () => null,
-  Trash: () => null,
   Tooltip: {
     Root: ({ children }: { children: ReactNode }) => children,
     Trigger: ({ children }: { children: ReactNode }) => children,
@@ -28,6 +24,11 @@ vi.mock('@sim/emcn', () => ({
 }))
 
 vi.mock('@sim/emcn/icons', () => ({
+  Check: () => null,
+  Duplicate: () => null,
+  Loader: () => null,
+  PlayOutline: () => null,
+  Trash: () => null,
   Circle: () => null,
   Square: () => null,
   Unlock: () => null,
diff --git a/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx b/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
index ceb2b0b709b..46a02249072 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
@@ -106,7 +106,7 @@ export const FindBar = memo(function FindBar({
   function counterContent() {
     if (!hasQuery) return null
     if (hasMatches) return `${currentIndex + 1} of ${count}${truncated ? '+' : ''}`
-    return isLoading ? <Loader aria-hidden className='size-[13px] animate-spin' /> : 'No results'
+    return isLoading ? <Loader aria-hidden className='size-[14px]' animate /> : 'No results'
   }
 
   return (
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx
index 68ab142e2d8..cc8c536814c 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/connect-slack-bot-modal/connect-slack-bot-modal.tsx
@@ -633,7 +633,7 @@ function StepDone({ searchOnly, pending, created, error, onRetry }: StepDoneProp
   if (pending) {
     return (
       <div className='flex flex-col items-center gap-3 py-10 text-center'>
-        <Loader className='size-6 animate-spin text-[var(--text-muted)]' />
+        <Loader className='size-6 text-[var(--text-muted)]' animate />
         <p className='text-[var(--text-secondary)] text-sm'>Verifying your bot and connecting…</p>
       </div>
     )
diff --git a/apps/sim/app/workspace/[workspaceId]/layout.test.tsx b/apps/sim/app/workspace/[workspaceId]/layout.test.tsx
index 79f619de2cd..4bfa3596764 100644
--- a/apps/sim/app/workspace/[workspaceId]/layout.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/layout.test.tsx
@@ -34,6 +34,7 @@ vi.mock('next/headers', () => ({
 
 vi.mock('next/navigation', () => ({
   redirect: vi.fn(),
+  useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
 }))
 
 vi.mock('@/app/_shell/providers/get-query-client', () => ({
diff --git a/apps/sim/app/workspace/[workspaceId]/layout.tsx b/apps/sim/app/workspace/[workspaceId]/layout.tsx
index 1e93ff58add..44651833c96 100644
--- a/apps/sim/app/workspace/[workspaceId]/layout.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/layout.tsx
@@ -24,6 +24,7 @@ import { WorkspaceHostProvider } from '@/app/workspace/[workspaceId]/providers/w
 import { WorkspacePermissionsProvider } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { WorkspaceScopeSync } from '@/app/workspace/[workspaceId]/providers/workspace-scope-sync'
 import { Sidebar } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
+import { WorkflowNavigationProvider } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { BrandingProvider } from '@/ee/whitelabeling/components/branding-provider'
 import { getOrgWhitelabelSettings } from '@/ee/whitelabeling/org-branding'
 
@@ -83,12 +84,14 @@ export default async function WorkspaceLayout({
                 <SessionExpired />
                 <WorkspacePermissionsProvider>
                   <WorkspaceScopeSync />
-                  <WorkspaceChrome
-                    sidebar={<Sidebar />}
-                    initialSidebarCollapsed={initialSidebarCollapsed}
-                  >
-                    {children}
-                  </WorkspaceChrome>
+                  <WorkflowNavigationProvider>
+                    <WorkspaceChrome
+                      sidebar={<Sidebar />}
+                      initialSidebarCollapsed={initialSidebarCollapsed}
+                    >
+                      {children}
+                    </WorkspaceChrome>
+                  </WorkflowNavigationProvider>
                 </WorkspacePermissionsProvider>
               </div>
             </GlobalCommandsProvider>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
index 9ffff5c4db5..0a42f8b5c6f 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
@@ -17,7 +17,7 @@ import {
   Switch,
   Tooltip,
 } from '@sim/emcn'
-import { Camera, Check, CircleInfo, Pencil } from '@sim/emcn/icons'
+import { Camera, Check, CircleInfo, Loader, Pencil } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import dynamic from 'next/dynamic'
 import Image from 'next/image'
@@ -367,7 +367,7 @@ export function General() {
                     }`}
                   >
                     {isUploadingProfilePicture ? (
-                      <div className='size-4 animate-spin rounded-full border-2 border-white border-t-transparent' />
+                      <Loader className='size-4 text-[var(--white)]' animate />
                     ) : (
                       <Camera className='size-4 text-white' />
                     )}
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
index 03e835b4fb8..6e479cb6597 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
@@ -10,13 +10,12 @@ import {
   DashedDividerLine,
   FieldDivider,
   Label,
-  Loader,
   OverflowText,
   Switch,
   Tooltip,
   toast,
 } from '@sim/emcn'
-import { ArrowLeft, ChevronDown, SquareArrowUpRight, X } from '@sim/emcn/icons'
+import { ArrowLeft, ChevronDown, Loader, SquareArrowUpRight, X } from '@sim/emcn/icons'
 import { toError } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
 import { findValidationIssue, isValidationError } from '@/lib/api/client/errors'
@@ -698,7 +697,7 @@ export function WorkflowSidebarBody({
               <div className='relative h-[160px] overflow-hidden rounded-sm border border-[var(--border)]'>
                 {workflowState.isLoading ? (
                   <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
-                    <Loader className='size-5 animate-spin text-[var(--text-tertiary)]' />
+                    <Loader className='size-5 text-[var(--text-tertiary)]' animate />
                   </div>
                 ) : workflowState.data ? (
                   <>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
index 68bbc204861..0d653e63242 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
@@ -7,13 +7,22 @@ import {
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
-  Duplicate,
-  PlayOutline,
   Tooltip,
-  Trash,
   toast,
 } from '@sim/emcn'
-import { Ban, Circle, Lock, LogOut, Palette, Square, Unlock } from '@sim/emcn/icons'
+import {
+  Ban,
+  Circle,
+  Duplicate,
+  Loader,
+  Lock,
+  LogOut,
+  Palette,
+  PlayOutline,
+  Square,
+  Trash,
+  Unlock,
+} from '@sim/emcn/icons'
 import {
   DEFAULT_NOTE_COLOR,
   isNoteColor,
@@ -91,27 +100,32 @@ const ACTION_BUTTON_STYLES = [
 const RUNNING_FILL =
   'bg-[repeating-linear-gradient(75deg,var(--surface-2)_11.59px_22.805px,transparent_23.555px_24.735px,var(--surface-2)_25.485px_36.7px)]'
 
-/** Left edge of the fill: clears the run/stop button, which stays live mid-run. */
-const RUNNING_FILL_INSET_SWELL = 'left-[42px]'
+/** Matches the Stop highlight's 2px inset plus the node's 0.75px outer stroke. */
+const RUNNING_FILL_INSET_SWELL = 'left-[42.75px]'
 const RUNNING_FILL_INSET_PLAIN = 'left-[26px]'
 
 /**
- * Trims the fill to the swell's tapered end.
- *
- * The row is a rectangle but the swell is not: its last slot cuts a diagonal
- * (`M16.25 0 … L36.59 19.9 …`) so the shape narrows toward the top. A rectangular
- * overlay therefore paints past the gray edge at the top while still sitting
- * inside it at the bottom — the fill visibly ran off the block. The per-slot
- * version never did, because each button's own clip contained it.
- *
- * Same taper, read off that path. Its straight run — (22.4, 2.88) to
- * (36.59, 19.9) in the slot's own 40×24 box — has a slope of 20/24, so across
- * the full row it moves from 20px in at the top to flush at the bottom. The
- * overlay spans the row, so those are its two numbers; they are the slot's own
- * edge continued, which is what puts the hatch's end exactly where a hovered
- * slot's fill ends. Changing the end silhouette means changing them with it.
+ * A vertical entry with 6px corners, matching the buttons’ rounded-md radius.
+ * The solid body overlaps each end cap
+ * by 1px to avoid seams at fractional zoom; the plain bar keeps a square end.
  */
-const RUNNING_FILL_END_TAPER = '[clip-path:polygon(0_0,calc(100%_-_20px)_0,100%_100%,0_100%)]'
+const RUNNING_FILL_MASK = [
+  '[mask-image:linear-gradient(black,black),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2024%22%3E%3Cpath%20d%3D%22M6%200H16V24H6A6%206%200%200%201%200%2018V6A6%206%200%200%201%206%200Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"),var(--running-fill-end-mask,linear-gradient(black,black))]',
+  '[mask-size:calc(100%_-_54px)_100%,16px_100%,40px_100%]',
+  '[mask-position:15px_top,left_top,right_top]',
+  '[mask-repeat:no-repeat]',
+].join(' ')
+
+/** Uses the delete button's rounded contour for the swell's right end cap. */
+const RUNNING_FILL_ROUNDED_END =
+  '[--running-fill-end-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2024%22%3E%3Cpath%20d%3D%22M0%200H16.25A8%208%200%200%201%2022.4%202.88L36.59%2019.9A2.5%202.5%200%200%201%2034.66%2024H0Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E")]'
+
+/** Keeps the outer shoulder and matches the buttons’ 6px rounded-md inner corners. */
+const RUNNING_BUTTON_CLIP_SWELL =
+  "[clip-path:path('M23.75_0A8_8_0_0_0_17.6_2.88L3.41_19.9A2.5_2.5_0_0_0_5.34_24H34A6_6_0_0_0_40_18V6A6_6_0_0_0_34_0Z')]"
+
+/** The clip path owns the corners within the standard 40px slot. */
+const RUNNING_BUTTON_LAYOUT_SWELL = 'relative w-[40px]! shrink-0 rounded-none'
 
 const ICON_SIZE = 'size-[14px]'
 
@@ -128,26 +142,15 @@ type ActionId = 'run' | 'enabled' | 'lock' | 'duplicate' | 'remove' | 'delete' |
 function RunningActionIcon() {
   return (
     <span
-      className='relative grid size-[14px] translate-x-[8px] translate-y-px place-items-center'
+      className='relative grid size-[18px] translate-x-[8px] translate-y-px place-items-center'
       role='status'
     >
       <span className='sr-only'>Block running</span>
       <span
         aria-hidden='true'
-        className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 group-focus-visible/run:opacity-0 motion-safe:animate-spin motion-reduce:transition-none'
+        className='-translate-x-[1px] col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 group-focus-visible/run:opacity-0 motion-reduce:transition-none'
       >
-        <svg className='size-[14px]' viewBox='0 0 24 24' fill='none'>
-          <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='2' opacity='0.25' />
-          <circle
-            cx='12'
-            cy='12'
-            r='10'
-            stroke='currentColor'
-            strokeWidth='2'
-            strokeLinecap='round'
-            strokeDasharray='18 45'
-          />
-        </svg>
+        <Loader className='size-[18px]' animate />
       </span>
       <span
         aria-hidden='true'
@@ -345,8 +348,12 @@ export const ActionBar = memo(
             'dark:focus-visible:bg-[var(--surface-4)]! dark:focus-visible:text-[var(--text-primary)]!',
           ],
         isSwell &&
-          actionId === firstActionId &&
-          "w-[40px]! [clip-path:path('M23.75_0A8_8_0_0_0_17.6_2.88L3.41_19.9A2.5_2.5_0_0_0_5.34_24L36_24A4_4_0_0_0_40_20L40_4A4_4_0_0_0_36_0Z')] [&>svg]:translate-y-px",
+          actionId === firstActionId && [
+            '[&>svg]:translate-y-px',
+            isSweeping && actionId === 'run'
+              ? [RUNNING_BUTTON_LAYOUT_SWELL, RUNNING_BUTTON_CLIP_SWELL]
+              : "w-[40px]! [clip-path:path('M23.75_0A8_8_0_0_0_17.6_2.88L3.41_19.9A2.5_2.5_0_0_0_5.34_24L36_24A4_4_0_0_0_40_20L40_4A4_4_0_0_0_36_0Z')]",
+          ],
         isSwell &&
           actionId === firstActionId &&
           (actionId === 'run' || actionId === 'color'
@@ -443,7 +450,8 @@ export const ActionBar = memo(
                    the container's own inset. */
                 'pointer-events-none absolute inset-y-0 right-0 overflow-hidden',
                 isSwell ? RUNNING_FILL_INSET_SWELL : RUNNING_FILL_INSET_PLAIN,
-                isSwell && RUNNING_FILL_END_TAPER
+                RUNNING_FILL_MASK,
+                isSwell && RUNNING_FILL_ROUNDED_END
               )}
             >
               <span
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
index 3d2e7e8b88a..fb434cd8d9f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
@@ -1,12 +1,13 @@
 'use client'
 
 import { useCallback } from 'react'
-import { Button, cn, handleKeyboardActivation, Library } from '@sim/emcn'
-import { Search } from '@sim/emcn/icons'
+import { Button, buttonVariants, cn } from '@sim/emcn'
+import { Library, Search } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
-import Image from 'next/image'
 import { useParams, useRouter } from 'next/navigation'
 import { AgentIcon } from '@/components/icons'
+import { WordmarkFrame } from '@/components/ui/wordmark-frame'
+import { WORDMARK_MORPH_TRANSFORM, WORDMARK_PATHS } from '@/lib/branding/wordmark'
 import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useSearchModalStore } from '@/stores/modals/search/store'
 
@@ -47,7 +48,7 @@ const commands: CommandItem[] = [
 
 /**
  * CommandList component that displays available commands with keyboard shortcuts
- * Centered on the screen for empty workflows
+ * Centers the Sim mark and commands together within the canvas.
  */
 export function CommandList() {
   const params = useParams()
@@ -157,75 +158,58 @@ export function CommandList() {
   }, [])
 
   return (
-    <div
-      ref={preventZoomRef}
-      className={cn(
-        'pointer-events-none absolute inset-0 mb-[50px] flex items-center justify-center'
-      )}
-    >
+    <div ref={preventZoomRef} className='pointer-events-none absolute inset-0 flex overflow-y-auto'>
       <div
-        className='pointer-events-auto flex flex-col gap-2'
+        className='pointer-events-auto m-auto flex flex-col items-center py-4'
         onDragOver={handleDragOver}
         onDrop={handleDrop}
       >
-        {/* Logo */}
-        <div className='mb-5 flex justify-center'>
-          <Image
-            src='/logo/b&w/text/b&w.svg'
-            alt='Sim'
-            width={99.56}
-            height={48.56}
-            className='opacity-70'
-            style={{
-              filter:
-                'brightness(0) saturate(100%) invert(69%) sepia(0%) saturate(0%) hue-rotate(202deg) brightness(94%) contrast(89%)',
-            }}
-          />
-        </div>
+        <WordmarkFrame label='Sim'>
+          <g fill='currentColor' transform={WORDMARK_MORPH_TRANSFORM}>
+            {WORDMARK_PATHS.map((d) => (
+              <path key={d} d={d} />
+            ))}
+          </g>
+        </WordmarkFrame>
+
+        <div className='flex w-max flex-col gap-2 pt-5'>
+          {commands.map((command) => {
+            const Icon = command.icon
+            const shortcuts = Array.isArray(command.shortcut)
+              ? command.shortcut
+              : [command.shortcut]
+            return (
+              <Button
+                key={command.label}
+                type='button'
+                variant='ghost'
+                className='group justify-between gap-[60px] p-0 text-left'
+                onClick={() => handleCommandClick(command.label)}
+              >
+                <span className='flex items-center gap-2'>
+                  <Icon className='size-[14px] text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]' />
+                  <span className='text-[var(--text-tertiary)] text-sm group-hover:text-[var(--text-primary)]'>
+                    {command.label}
+                  </span>
+                </span>
 
-        {commands.map((command) => {
-          const Icon = command.icon
-          const shortcuts = Array.isArray(command.shortcut) ? command.shortcut : [command.shortcut]
-          return (
-            <div
-              key={command.label}
-              role='button'
-              tabIndex={0}
-              className='group flex cursor-pointer items-center justify-between gap-[60px]'
-              onClick={() => handleCommandClick(command.label)}
-              onKeyDown={(event) =>
-                handleKeyboardActivation(event, () => handleCommandClick(command.label))
-              }
-            >
-              {/* Left side: Icon and Label */}
-              <div className='flex items-center gap-2'>
-                <Icon className='size-[14px] text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]' />
-                <span className='text-[var(--text-tertiary)] text-sm group-hover:text-[var(--text-primary)]'>
-                  {command.label}
+                <span className='flex items-center gap-1'>
+                  {['⌘', ...shortcuts].map((shortcut) => (
+                    <kbd
+                      key={shortcut}
+                      className={cn(
+                        buttonVariants({ variant: '3d' }),
+                        'group-hover:-translate-y-0.5 w-[26px] py-[3px] font-sans text-caption hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
+                      )}
+                    >
+                      {shortcut}
+                    </kbd>
+                  ))}
                 </span>
-              </div>
-
-              {/* Right side: Keyboard Shortcut */}
-              <div className='flex items-center gap-1'>
-                <Button
-                  className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-caption hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
-                  variant='3d'
-                >
-                  <span>⌘</span>
-                </Button>
-                {shortcuts.map((shortcut) => (
-                  <Button
-                    key={shortcut}
-                    className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-caption hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
-                    variant='3d'
-                  >
-                    {shortcut}
-                  </Button>
-                ))}
-              </div>
-            </div>
-          )
-        })}
+              </Button>
+            )
+          })}
+        </div>
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
index 4bfa6ac5db3..4bdc3ed907d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, Combobox, cn } from '@sim/emcn'
-import { X } from '@sim/emcn/icons'
+import { Loader, X } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { generateShortId } from '@sim/utils/id'
@@ -216,7 +216,7 @@ function SingleFileSelector({
         disabled={isDeleting}
       >
         {isDeleting ? (
-          <div className='size-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
+          <Loader className='size-4' animate />
         ) : (
           <X className='size-4 opacity-50 hover-hover:opacity-100' />
         )}
@@ -768,11 +768,7 @@ export function FileUpload({
           onClick={(e) => handleRemoveFile(file, e)}
           disabled={isDeleting}
         >
-          {isDeleting ? (
-            <div className='size-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
-          ) : (
-            <X className='size-4 opacity-50' />
-          )}
+          {isDeleting ? <Loader className='size-4' animate /> : <X className='size-4 opacity-50' />}
         </Button>
       </div>
     )
@@ -791,7 +787,7 @@ export function FileUpload({
           </span>
         </div>
         <div className='flex size-5 shrink-0 items-center justify-center'>
-          <div className='size-3.5 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
+          <Loader className='size-3.5' animate />
         </div>
       </div>
     )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index 7b77fb5678b..60c2ff6c10d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -28,7 +28,7 @@ import { BubbleChatDelay, Download, Lock, Plus, Unlock } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { useQueryClient } from '@tanstack/react-query'
-import { useParams, useRouter } from 'next/navigation'
+import { useParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { useShallow } from 'zustand/react/shallow'
 import { VariableIcon } from '@/components/icons'
@@ -70,6 +70,7 @@ import { useAutoLayout } from '@/app/workspace/[workspaceId]/w/[workflowId]/hook
 import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-current-workflow'
 import { useWorkflowExecution } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution'
 import { getWorkflowLockToggleIds } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useDeleteWorkflow, useImportWorkflow } from '@/app/workspace/[workspaceId]/w/hooks'
 import { useCopilotChatSelection } from '@/hooks/queries/copilot-chat-selection'
 import {
@@ -132,7 +133,7 @@ function copilotDraftKey(
  * @returns Panel on the right side of the workflow
  */
 export const Panel = memo(function Panel() {
-  const router = useRouter()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const params = useParams()
   const workspaceId = params.workspaceId as string
   const routeWorkflowId = params.workflowId as string | undefined
@@ -646,7 +647,7 @@ export const Panel = memo(function Panel() {
         folderId: sourceWorkflow.folderId,
       })
       if (result?.id) {
-        router.push(`/workspace/${workspaceId}/w/${result.id}`)
+        navigateToWorkflow(`/workspace/${workspaceId}/w/${result.id}`)
       }
     } catch (error) {
       logger.error('Error duplicating workflow:', error)
@@ -654,7 +655,14 @@ export const Panel = memo(function Panel() {
       setIsDuplicating(false)
       setIsMenuOpen(false)
     }
-  }, [activeWorkflowId, userPermissions.canEdit, isDuplicating, workflows, router, workspaceId])
+  }, [
+    activeWorkflowId,
+    userPermissions.canEdit,
+    isDuplicating,
+    workflows,
+    navigateToWorkflow,
+    workspaceId,
+  ])
 
   /**
    * Toggles the locked state of all blocks in the workflow
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index 475d610c851..23a7e9617c6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -125,6 +125,7 @@ import {
   reactFlowProOptions,
   reactFlowStyles,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants'
+import { WorkflowLoadingOverlay } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
 import { getBlock } from '@/blocks'
 import { isAnnotationOnlyBlock } from '@/executor/constants'
@@ -5124,20 +5125,7 @@ const WorkflowContent = React.memo(
                as well as the canvas, and that grey is ~1.1:1 against one. */
             className='relative flex-1 overflow-hidden [--connection-line-stroke:var(--text-secondary)] data-[connection-line=error]:[--connection-line-stroke:var(--text-error)] data-[connection-active=true]:[&_.react-flow__handle.source]:pointer-events-none'
           >
-            {!isWorkflowReady && (
-              <div className='absolute inset-0 z-[5] flex items-center justify-center bg-[var(--bg)]'>
-                <div
-                  className='size-[18px] animate-spin rounded-full'
-                  style={{
-                    background:
-                      'conic-gradient(from 0deg, hsl(var(--muted-foreground)) 0deg 120deg, transparent 120deg 180deg, hsl(var(--muted-foreground)) 180deg 300deg, transparent 300deg 360deg)',
-                    mask: 'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-                    WebkitMask:
-                      'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-                  }}
-                />
-              </div>
-            )}
+            <WorkflowLoadingOverlay isLoading={!isWorkflowReady} embedded={embedded} />
 
             {isWorkflowReady && (
               <>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index 0a3654a72ac..b41eee295d7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -29,6 +29,7 @@ import {
 import { formatDuration } from '@sim/utils/formatting'
 import { ReactFlowProvider } from '@xyflow/react'
 import { useParams } from 'next/navigation'
+import { WorkflowLoader } from '@/components/ui/workflow-loader'
 import { extractReferencePrefixes } from '@/lib/workflows/sanitization/references'
 import {
   buildCanonicalIndexForSurface,
@@ -1347,16 +1348,7 @@ function PreviewEditorContent({
                   <div className='relative h-[160px] overflow-hidden rounded-sm border border-[var(--border)]'>
                     {resolvedIsLoadingChildWorkflow ? (
                       <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
-                        <div
-                          className='size-[18px] animate-spin rounded-full'
-                          style={{
-                            background:
-                              'conic-gradient(from 0deg, var(--text-tertiary) 0deg 120deg, transparent 120deg 180deg, var(--text-tertiary) 180deg 300deg, transparent 300deg 360deg)',
-                            mask: 'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-                            WebkitMask:
-                              'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-                          }}
-                        />
+                        <WorkflowLoader label='Loading child workflow' />
                       </div>
                     ) : resolvedChildWorkflowState ? (
                       <>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
index 04c633b19fe..1198a672c08 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
@@ -12,10 +12,9 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-  Loader,
   OverflowText,
 } from '@sim/emcn'
-import { MoreHorizontal, Pencil, Pin, Plus, SquareArrowUpRight } from '@sim/emcn/icons'
+import { Loader, MoreHorizontal, Pencil, Pin, Plus, SquareArrowUpRight } from '@sim/emcn/icons'
 import Link from 'next/link'
 import { ConversationListItem } from '@/app/workspace/[workspaceId]/components'
 import type { FlyoutEntry } from '@/app/workspace/[workspaceId]/components/folders'
@@ -27,6 +26,7 @@ import {
 import { SIDEBAR_RAIL_CHIP_CLASS } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import type { useHoverMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
 import { interleaveSiblings } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
+import { WorkflowNavigationLink } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import type { FolderTreeNode } from '@/stores/folders/types'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
 
@@ -453,7 +453,7 @@ export function CollapsedWorkflowFlyoutItem({
         ) : undefined
       }
     >
-      <Link
+      <WorkflowNavigationLink
         href={href}
         onContextMenu={
           hasActions
@@ -465,7 +465,7 @@ export function CollapsedWorkflowFlyoutItem({
         }
       >
         <OverflowText label={workflow.name} className='flex-1' />
-      </Link>
+      </WorkflowNavigationLink>
     </DropdownMenuItem>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
index 5597803ef7b..bdf04bafeae 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
@@ -9,7 +9,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import { cn, Library, useNativeSurfaceOcclusionReady } from '@sim/emcn'
+import { cn, useNativeSurfaceOcclusionReady } from '@sim/emcn'
 import {
   Columns3,
   Database,
@@ -22,6 +22,7 @@ import {
   Home,
   Integration,
   Key,
+  Library,
   Pencil,
   Play,
   Plus,
@@ -88,6 +89,7 @@ import {
   CMDK_SECTION_GAP_CLASS,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import { SIDEBAR_SCROLL_EVENT } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
+import { useWorkflowNavigation } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useFolderMap } from '@/hooks/queries/folders'
 import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
 import { useTablesList } from '@/hooks/queries/tables'
@@ -154,6 +156,7 @@ function SearchModalContent({
 }: SearchModalContentProps) {
   const params = useParams()
   const router = useRouter()
+  const navigateToWorkflow = useWorkflowNavigation()
   const { chatEnabled } = useDeploymentShape()
   const workspaceId = params.workspaceId as string
   const currentWorkflowId = params.workflowId as string | undefined
@@ -804,7 +807,8 @@ function SearchModalContent({
   const handleWorkflowSelect = useCallback(
     (workflow: WorkflowItem) => {
       if (!workflow.isCurrent && workflow.href) {
-        routerRef.current.push(workflow.href)
+        if (navigateToWorkflow) navigateToWorkflow(workflow.href)
+        else routerRef.current.push(workflow.href)
         window.dispatchEvent(
           new CustomEvent(SIDEBAR_SCROLL_EVENT, { detail: { itemId: workflow.id } })
         )
@@ -816,7 +820,7 @@ function SearchModalContent({
       })
       onOpenChangeRef.current(false)
     },
-    [workspaceId]
+    [workspaceId, navigateToWorkflow]
   )
 
   const handleWorkspaceSelect = useCallback(
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
index 914643aeba4..1c48f819f20 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
@@ -13,7 +13,6 @@ import { ChevronRight, Folder, FolderOpen, Lock, MoreHorizontal } from '@sim/emc
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
-import { useRouter } from 'next/navigation'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { generateSubfolderName } from '@/lib/workspaces/naming'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -30,6 +29,7 @@ import {
   buildDragResources,
   createSidebarDragGhost,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import {
   useCanDelete,
   useDeleteFolder,
@@ -69,7 +69,7 @@ export const FolderItem = memo(function FolderItem({ workspaceId, folder }: Fold
     onItemDragStart,
     onItemDragEnd,
   } = useSidebarListContext()
-  const router = useRouter()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const updateFolderMutation = useUpdateFolder()
   const createWorkflowMutation = useCreateWorkflow()
   const createWorkflowMutate = createWorkflowMutation.mutate
@@ -167,9 +167,16 @@ export const FolderItem = memo(function FolderItem({ workspaceId, folder }: Fold
 
     useWorkflowRegistry.getState().markWorkflowCreating(id)
     expandFolder()
-    router.push(`/workspace/${workspaceId}/w/${id}`)
+    navigateToWorkflow(`/workspace/${workspaceId}/w/${id}`)
     window.dispatchEvent(new CustomEvent(SIDEBAR_SCROLL_EVENT, { detail: { itemId: id } }))
-  }, [createWorkflowMutate, workspaceId, folder.id, effectiveLocked, router, expandFolder])
+  }, [
+    createWorkflowMutate,
+    workspaceId,
+    folder.id,
+    effectiveLocked,
+    navigateToWorkflow,
+    expandFolder,
+  ])
 
   const handleCreateFolderInFolder = useCallback(async () => {
     if (effectiveLocked) return
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
index 734aefef876..c51bddcdead 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
@@ -3,7 +3,6 @@
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import { chipVariants, cn, OverflowText } from '@sim/emcn'
 import { Lock, MoreHorizontal } from '@sim/emcn/icons'
-import Link from 'next/link'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
@@ -18,6 +17,7 @@ import {
   buildDragResources,
   createSidebarDragGhost,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
+import { WorkflowNavigationLink } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import {
   useCanDelete,
   useDeleteSelection,
@@ -402,7 +402,7 @@ export const WorkflowItem = memo(function WorkflowItem({
 
   return (
     <>
-      <Link
+      <WorkflowNavigationLink
         href={`/workspace/${workspaceId}/w/${workflow.id}`}
         data-item-id={workflow.id}
         className={cn(
@@ -486,7 +486,7 @@ export const WorkflowItem = memo(function WorkflowItem({
             </button>
           </div>
         )}
-      </Link>
+      </WorkflowNavigationLink>
 
       <ContextMenu
         isOpen={isContextMenuOpen}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workflow-operations.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workflow-operations.ts
index e1409b70339..de08036fac8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workflow-operations.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workflow-operations.ts
@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react'
 import { generateId } from '@sim/utils/id'
-import { useRouter } from 'next/navigation'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useCreateWorkflow, useWorkflowMap } from '@/hooks/queries/workflows'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
@@ -11,7 +11,7 @@ interface UseWorkflowOperationsProps {
 }
 
 export function useWorkflowOperations({ workspaceId }: UseWorkflowOperationsProps) {
-  const router = useRouter()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const { data: workflows = {}, isLoading: workflowsLoading } = useWorkflowMap(workspaceId)
   const createWorkflowMutation = useCreateWorkflow()
 
@@ -42,9 +42,9 @@ export function useWorkflowOperations({ workspaceId }: UseWorkflowOperationsProp
     })
 
     useWorkflowRegistry.getState().markWorkflowCreating(id)
-    router.push(`/workspace/${workspaceId}/w/${id}`)
+    navigateToWorkflow(`/workspace/${workspaceId}/w/${id}`)
     return Promise.resolve(id)
-  }, [createWorkflowMutate, workspaceId, router])
+  }, [createWorkflowMutate, workspaceId, navigateToWorkflow])
 
   return {
     workflows,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/index.ts
new file mode 100644
index 00000000000..e36dbd64a61
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/index.ts
@@ -0,0 +1,7 @@
+export { WorkflowLoadingOverlay } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-loading-overlay'
+export { WorkflowNavigationLink } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-link'
+export {
+  useNavigateToWorkflow,
+  useWorkflowNavigation,
+  WorkflowNavigationProvider,
+} from '@/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-loading-overlay.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-loading-overlay.tsx
new file mode 100644
index 00000000000..1139cfac93a
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-loading-overlay.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import { WorkflowLoader } from '@/components/ui/workflow-loader'
+import { usePendingWorkflowNavigation } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider'
+
+interface WorkflowLoadingOverlayProps {
+  isLoading: boolean
+  embedded?: boolean
+}
+
+/** Covers the current canvas from navigation intent through destination hydration. */
+export function WorkflowLoadingOverlay({
+  isLoading,
+  embedded = false,
+}: WorkflowLoadingOverlayProps) {
+  const isNavigating = usePendingWorkflowNavigation()
+  if (!isLoading && (embedded || !isNavigating)) return null
+
+  return (
+    <div className='absolute inset-0 z-[5] flex items-center justify-center bg-[var(--bg)]'>
+      <WorkflowLoader />
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-link.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-link.tsx
new file mode 100644
index 00000000000..7201a5583a9
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-link.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import type { ComponentProps } from 'react'
+import Link from 'next/link'
+import { useWorkflowNavigation } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider'
+
+interface WorkflowNavigationLinkProps
+  extends Omit<ComponentProps<typeof Link>, 'href' | 'onNavigate'> {
+  href: string
+}
+
+/** Preserves Link's selection and new-tab behavior while announcing same-tab navigation. */
+export function WorkflowNavigationLink({
+  href,
+  replace,
+  scroll,
+  transitionTypes,
+  ...props
+}: WorkflowNavigationLinkProps) {
+  const navigate = useWorkflowNavigation()
+
+  return (
+    <Link
+      {...props}
+      href={href}
+      replace={replace}
+      scroll={scroll}
+      transitionTypes={transitionTypes}
+      onNavigate={
+        navigate
+          ? (event) => {
+              event.preventDefault()
+              navigate(href, { replace, scroll, transitionTypes })
+            }
+          : undefined
+      }
+    />
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider.tsx
new file mode 100644
index 00000000000..15d34cb02cb
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation-provider.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import {
+  createContext,
+  type ReactNode,
+  startTransition,
+  useCallback,
+  useContext,
+  useOptimistic,
+} from 'react'
+import { useRouter } from 'next/navigation'
+
+interface WorkflowNavigationOptions {
+  replace?: boolean
+  scroll?: boolean
+  transitionTypes?: string[]
+}
+
+type NavigateToWorkflow = (href: string, options?: WorkflowNavigationOptions) => void
+
+const NavigateContext = createContext<NavigateToWorkflow | null>(null)
+const PendingNavigationContext = createContext(false)
+
+interface WorkflowNavigationProviderProps {
+  children: ReactNode
+}
+
+/** Shows navigation intent immediately, then lets React clear it when routing settles. */
+export function WorkflowNavigationProvider({ children }: WorkflowNavigationProviderProps) {
+  const router = useRouter()
+  const [isNavigating, setIsNavigating] = useOptimistic(false)
+
+  const navigate = useCallback<NavigateToWorkflow>(
+    (href, options) => {
+      const destination = new URL(href, window.location.href)
+      const isWorkflowSwitch =
+        destination.origin === window.location.origin &&
+        /^\/workspace\/[^/]+\/w\/[^/]+\/?$/.test(destination.pathname) &&
+        destination.pathname !== window.location.pathname
+
+      startTransition(() => {
+        setIsNavigating(isWorkflowSwitch)
+        if (options?.replace) {
+          router.replace(href, { scroll: options.scroll, transitionTypes: options.transitionTypes })
+        } else if (options) {
+          router.push(href, { scroll: options.scroll, transitionTypes: options.transitionTypes })
+        } else {
+          router.push(href)
+        }
+      })
+    },
+    [router, setIsNavigating]
+  )
+
+  return (
+    <NavigateContext.Provider value={navigate}>
+      <PendingNavigationContext.Provider value={isNavigating}>
+        {children}
+      </PendingNavigationContext.Provider>
+    </NavigateContext.Provider>
+  )
+}
+
+/** Returns provider-backed navigation, or null so links outside the provider retain native behavior. */
+export function useWorkflowNavigation() {
+  return useContext(NavigateContext)
+}
+
+/** Navigates with immediate workflow feedback, falling back to router push/replace outside the provider. */
+export function useNavigateToWorkflow() {
+  const navigate = useWorkflowNavigation()
+  const router = useRouter()
+  const fallback = useCallback<NavigateToWorkflow>(
+    (href, options) => {
+      if (options?.replace) {
+        router.replace(href, { scroll: options.scroll, transitionTypes: options.transitionTypes })
+      } else if (options) {
+        router.push(href, { scroll: options.scroll, transitionTypes: options.transitionTypes })
+      } else {
+        router.push(href)
+      }
+    },
+    [router]
+  )
+  return navigate ?? fallback
+}
+
+/** Reports pending workflow navigation within the provider; returns false outside it. */
+export function usePendingWorkflowNavigation() {
+  return useContext(PendingNavigationContext)
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation.test.tsx
new file mode 100644
index 00000000000..51059c4e83b
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-navigation/workflow-navigation.test.tsx
@@ -0,0 +1,251 @@
+/** @vitest-environment jsdom */
+import { act, Suspense, useState } from 'react'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  useNavigateToWorkflow,
+  WorkflowLoadingOverlay,
+  WorkflowNavigationLink,
+  WorkflowNavigationProvider,
+} from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
+
+const { router } = vi.hoisted(() => ({
+  router: {
+    route: '/workspace/workspace-1/w/workflow-a',
+    pathname: '/workspace/workspace-1/w/workflow-a',
+    asPath: '/workspace/workspace-1/w/workflow-a',
+    query: {},
+    basePath: '',
+    isFallback: false,
+    isReady: true,
+    isPreview: false,
+    isLocaleDomain: false,
+    events: { on: vi.fn(), off: vi.fn(), emit: vi.fn() },
+    beforePopState: vi.fn(),
+    reload: vi.fn(),
+    push: vi.fn(),
+    replace: vi.fn(),
+    refresh: vi.fn(),
+    back: vi.fn(),
+    forward: vi.fn(),
+    prefetch: vi.fn(),
+  },
+}))
+
+vi.mock('next/navigation', () => ({ useRouter: () => router }))
+
+const PATH_A = '/workspace/workspace-1/w/workflow-a'
+const PATH_B = '/workspace/workspace-1/w/workflow-b'
+const PATH_C = '/workspace/workspace-1/w/workflow-c'
+
+function FallbackNavigation() {
+  const navigate = useNavigateToWorkflow()
+  return (
+    <button type='button' onClick={() => navigate(PATH_B, { replace: true, scroll: false })}>
+      Replace workflow
+    </button>
+  )
+}
+
+interface PendingRoute {
+  ready: boolean
+  promise: Promise<void>
+  resolve: () => void
+}
+
+function pendingRoute(): PendingRoute {
+  let resolve!: () => void
+  const route = {
+    ready: false,
+    promise: new Promise<void>((done) => {
+      resolve = done
+    }),
+    resolve: () => {
+      route.ready = true
+      resolve()
+    },
+  }
+  return route
+}
+
+interface DestinationProps {
+  path: string
+  embedded?: boolean
+}
+
+describe('workflow navigation feedback', () => {
+  let container: HTMLDivElement
+  let root: Root
+  let routes: Map<string, PendingRoute>
+  let hydrated: Set<string>
+  let updatePath: (path: string) => void
+  let rerenderDestination: () => void
+
+  function Destination({ path, embedded }: DestinationProps) {
+    const route = routes.get(path)
+    if (route && !route.ready) throw route.promise
+    return (
+      <main data-route={path}>
+        <WorkflowLoadingOverlay isLoading={!hydrated.has(path)} embedded={embedded} />
+      </main>
+    )
+  }
+
+  interface HarnessProps {
+    embedded?: boolean
+  }
+
+  function Harness({ embedded = false }: HarnessProps) {
+    const [path, setPath] = useState(PATH_A)
+    const [, forceRender] = useState(0)
+    updatePath = setPath
+    rerenderDestination = () => forceRender((value) => value + 1)
+
+    return (
+      <RouterContext.Provider value={router}>
+        <WorkflowNavigationProvider>
+          <nav>
+            <WorkflowNavigationLink href={PATH_A} prefetch={false}>
+              A
+            </WorkflowNavigationLink>
+            <WorkflowNavigationLink href={PATH_B} prefetch={false}>
+              B
+            </WorkflowNavigationLink>
+            <WorkflowNavigationLink href={PATH_C} prefetch={false}>
+              C
+            </WorkflowNavigationLink>
+            <WorkflowNavigationLink href={PATH_B} prefetch={false} target='_blank'>
+              New tab
+            </WorkflowNavigationLink>
+            <WorkflowNavigationLink
+              href={PATH_B}
+              prefetch={false}
+              onClick={(event) => event.preventDefault()}
+            >
+              Cancelled click
+            </WorkflowNavigationLink>
+          </nav>
+          <Suspense fallback={<div>Route fallback</div>}>
+            <Destination path={path} embedded={embedded} />
+          </Suspense>
+        </WorkflowNavigationProvider>
+      </RouterContext.Provider>
+    )
+  }
+
+  function click(label: string, options: MouseEventInit = {}) {
+    const link = Array.from(container.querySelectorAll('a')).find(
+      (item) => item.textContent === label
+    )
+    if (!link) throw new Error(`Missing link: ${label}`)
+    act(() =>
+      link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, ...options }))
+    )
+  }
+
+  const preventBrowserNavigation = (event: Event) => event.preventDefault()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+    vi.stubGlobal('matchMedia', () => ({
+      matches: true,
+      addEventListener() {},
+      removeEventListener() {},
+    }))
+    window.history.replaceState(null, '', PATH_A)
+    routes = new Map([
+      [PATH_B, pendingRoute()],
+      [PATH_C, pendingRoute()],
+    ])
+    hydrated = new Set([PATH_A])
+    router.push.mockImplementation((path: string) => updatePath(path))
+    router.replace.mockImplementation((path: string) => updatePath(path))
+    container = document.createElement('div')
+    document.body.append(container)
+    root = createRoot(container)
+    document.addEventListener('click', preventBrowserNavigation)
+    act(() => root.render(<Harness />))
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    container.remove()
+    document.removeEventListener('click', preventBrowserNavigation)
+    vi.unstubAllGlobals()
+  })
+
+  it('preserves replace navigation outside the workflow provider', () => {
+    router.replace.mockImplementation(() => undefined)
+    act(() => root.render(<FallbackNavigation />))
+    act(() => container.querySelector('button')?.click())
+    expect(router.replace).toHaveBeenCalledWith(PATH_B, {
+      scroll: false,
+      transitionTypes: undefined,
+    })
+    expect(router.push).not.toHaveBeenCalled()
+  })
+
+  it('shows the wordmark while the old route is still displayed and keeps it through hydration', async () => {
+    expect(container.querySelector('[role="status"]')).toBeNull()
+    click('B')
+    expect(router.push).toHaveBeenCalledWith(PATH_B, expect.any(Object))
+    expect(container.querySelector('main')?.dataset.route).toBe(PATH_A)
+    expect(container.querySelector('[role="status"]')?.textContent).toBe('Loading workflow')
+    expect(container.querySelector('[data-stage="wm"]')?.getAttribute('opacity')).toBe('1')
+
+    await act(async () => routes.get(PATH_B)?.resolve())
+    expect(container.querySelector('main')?.dataset.route).toBe(PATH_B)
+    expect(container.querySelector('[role="status"]')).not.toBeNull()
+
+    hydrated.add(PATH_B)
+    act(() => rerenderDestination())
+    expect(container.querySelector('[role="status"]')).toBeNull()
+  })
+
+  it('lets a newer destination complete without waiting for the abandoned route', async () => {
+    click('B')
+    click('C')
+    hydrated.add(PATH_C)
+    await act(async () => routes.get(PATH_C)?.resolve())
+    expect(container.querySelector('main')?.dataset.route).toBe(PATH_C)
+    expect(container.querySelector('[role="status"]')).toBeNull()
+
+    await act(async () => routes.get(PATH_B)?.resolve())
+    expect(container.querySelector('main')?.dataset.route).toBe(PATH_C)
+    expect(container.querySelector('[role="status"]')).toBeNull()
+  })
+
+  it('clears navigation feedback when switching back to the current workflow', () => {
+    click('B')
+    expect(container.querySelector('[role="status"]')).not.toBeNull()
+    click('A')
+    expect(container.querySelector('main')?.dataset.route).toBe(PATH_A)
+    expect(container.querySelector('[role="status"]')).toBeNull()
+  })
+
+  it.each([{ metaKey: true }, { ctrlKey: true }, { shiftKey: true }, { altKey: true }])(
+    'leaves modified clicks to the browser: %j',
+    (options) => {
+      click('B', options)
+      expect(router.push).not.toHaveBeenCalled()
+      expect(container.querySelector('[role="status"]')).toBeNull()
+    }
+  )
+
+  it.each(['New tab', 'Cancelled click', 'A'])(
+    'does not show navigation feedback for %s',
+    (label) => {
+      click(label)
+      expect(container.querySelector('[role="status"]')).toBeNull()
+      if (label !== 'A') expect(router.push).not.toHaveBeenCalled()
+    }
+  )
+
+  it('does not cover embedded workflows when the main workspace navigates', () => {
+    act(() => root.render(<Harness embedded />))
+    click('B')
+    expect(container.querySelector('[role="status"]')).toBeNull()
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-selection.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-selection.ts
index 2a126ea4df5..1a068f57413 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-selection.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-selection.ts
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { useRouter } from 'next/navigation'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useDeleteFolderMutation } from '@/hooks/queries/folders'
 import { useDeleteWorkflowMutation, useWorkflows } from '@/hooks/queries/workflows'
 import { useFolderStore } from '@/stores/folders/store'
@@ -45,7 +45,7 @@ export function useDeleteSelection({
   isActiveWorkflow,
   onSuccess,
 }: UseDeleteSelectionProps) {
-  const router = useRouter()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const { data: workflowList = [] } = useWorkflows(workspaceId)
   const deleteWorkflowMutation = useDeleteWorkflowMutation()
   const deleteFolderMutation = useDeleteFolderMutation()
@@ -117,9 +117,9 @@ export function useDeleteSelection({
 
       if (needsNavigation) {
         if (nextWorkflowId) {
-          router.push(`/workspace/${workspaceId}/w/${nextWorkflowId}`)
+          navigateToWorkflow(`/workspace/${workspaceId}/w/${nextWorkflowId}`)
         } else {
-          router.push(`/workspace/${workspaceId}`)
+          navigateToWorkflow(`/workspace/${workspaceId}`)
         }
       }
 
@@ -158,7 +158,7 @@ export function useDeleteSelection({
     workflowList,
     workspaceId,
     isActiveWorkflow,
-    router,
+    navigateToWorkflow,
     onSuccess,
   ])
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-workflow.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-workflow.ts
index 9db4fa5a163..90df911b2ab 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-workflow.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-delete-workflow.ts
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { useRouter } from 'next/navigation'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useDeleteWorkflowMutation, useWorkflows } from '@/hooks/queries/workflows'
 import { useFolderStore } from '@/stores/folders/store'
 
@@ -38,7 +38,7 @@ export function useDeleteWorkflow({
   isActive = false,
   onSuccess,
 }: UseDeleteWorkflowProps) {
-  const router = useRouter()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const { data: workflowList = [] } = useWorkflows(workspaceId)
   const deleteWorkflowMutation = useDeleteWorkflowMutation()
   const [isDeleting, setIsDeleting] = useState(false)
@@ -96,9 +96,9 @@ export function useDeleteWorkflow({
 
       if (isActiveWorkflowBeingDeleted) {
         if (nextWorkflowId) {
-          router.push(`/workspace/${workspaceId}/w/${nextWorkflowId}`)
+          navigateToWorkflow(`/workspace/${workspaceId}/w/${nextWorkflowId}`)
         } else {
-          router.push(`/workspace/${workspaceId}`)
+          navigateToWorkflow(`/workspace/${workspaceId}`)
         }
       }
 
@@ -125,7 +125,7 @@ export function useDeleteWorkflow({
     workflowList,
     workspaceId,
     isActive,
-    router,
+    navigateToWorkflow,
     deleteWorkflowMutation,
     onSuccess,
   ])
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-selection.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-selection.ts
index af1db668ef3..274b424ec5e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-selection.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-selection.ts
@@ -1,8 +1,8 @@
 import { useCallback, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
-import { useRouter } from 'next/navigation'
 import { getChildFolders, getFolderById } from '@/lib/folders/tree'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useDuplicateFolderMutation } from '@/hooks/queries/folders'
 import { getFolderMap } from '@/hooks/queries/utils/folder-cache'
 import { getWorkflows } from '@/hooks/queries/utils/workflow-cache'
@@ -30,7 +30,7 @@ interface UseDuplicateSelectionProps {
  * @returns Duplicate selection handlers and state
  */
 export function useDuplicateSelection({ workspaceId, onSuccess }: UseDuplicateSelectionProps) {
-  const router = useRouter()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const duplicateWorkflowMutation = useDuplicateWorkflowMutation()
   const duplicateFolderMutation = useDuplicateFolderMutation()
   const [isDuplicating, setIsDuplicating] = useState(false)
@@ -128,7 +128,7 @@ export function useDuplicateSelection({ workspaceId, onSuccess }: UseDuplicateSe
         })
 
         if (duplicatedWorkflowIds.length === 1 && duplicatedFolderIds.length === 0) {
-          router.push(`/workspace/${workspaceIdRef.current}/w/${duplicatedWorkflowIds[0]}`)
+          navigateToWorkflow(`/workspace/${workspaceIdRef.current}/w/${duplicatedWorkflowIds[0]}`)
         }
 
         onSuccessRef.current?.()
@@ -144,7 +144,7 @@ export function useDuplicateSelection({ workspaceId, onSuccess }: UseDuplicateSe
       generateDuplicateFolderName,
       duplicateFolderMutation,
       duplicateWorkflowMutation,
-      router,
+      navigateToWorkflow,
     ]
   )
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-workflow.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-workflow.ts
index 0786e2c7b81..5d70620fdf7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-workflow.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-workflow.ts
@@ -1,7 +1,7 @@
 import { useCallback, useRef } from 'react'
 import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
-import { useRouter } from 'next/navigation'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { getWorkflows } from '@/hooks/queries/utils/workflow-cache'
 import { useDuplicateWorkflowMutation } from '@/hooks/queries/workflows'
 import { useFolderStore } from '@/stores/folders/store'
@@ -26,7 +26,7 @@ interface UseDuplicateWorkflowProps {
  * @returns Duplicate workflow handlers and state
  */
 export function useDuplicateWorkflow({ workspaceId, onSuccess }: UseDuplicateWorkflowProps) {
-  const router = useRouter()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const duplicateMutation = useDuplicateWorkflowMutation()
 
   const workspaceIdRef = useRef(workspaceId)
@@ -91,7 +91,7 @@ export function useDuplicateWorkflow({ workspaceId, onSuccess }: UseDuplicateWor
         })
 
         if (duplicatedIds.length === 1) {
-          router.push(`/workspace/${workspaceIdRef.current}/w/${duplicatedIds[0]}`)
+          navigateToWorkflow(`/workspace/${workspaceIdRef.current}/w/${duplicatedIds[0]}`)
         }
 
         onSuccessRef.current?.()
@@ -100,7 +100,7 @@ export function useDuplicateWorkflow({ workspaceId, onSuccess }: UseDuplicateWor
         throw error
       }
     },
-    [router]
+    [navigateToWorkflow]
   )
 
   return {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workflow.ts b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workflow.ts
index a8f164ed9a7..10b19d939b7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workflow.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workflow.ts
@@ -1,7 +1,6 @@
 import { useCallback, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { useQueryClient } from '@tanstack/react-query'
-import { useRouter } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { captureEvent } from '@/lib/posthog/client'
 import {
@@ -10,6 +9,7 @@ import {
   persistImportedWorkflow,
   sanitizePathSegment,
 } from '@/lib/workflows/operations/import-export'
+import { useNavigateToWorkflow } from '@/app/workspace/[workspaceId]/w/components/workflow-navigation'
 import { useCreateFolder } from '@/hooks/queries/folders'
 import { folderKeys } from '@/hooks/queries/utils/folder-keys'
 import { invalidateWorkflowLists } from '@/hooks/queries/utils/invalidate-workflow-lists'
@@ -33,7 +33,7 @@ interface UseImportWorkflowProps {
  * @returns Import state and handlers
  */
 export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
-  const router = useRouter()
+  const navigateToWorkflow = useNavigateToWorkflow()
   const createWorkflowMutation = useCreateWorkflow()
   const queryClient = useQueryClient()
   const createFolderMutation = useCreateFolder()
@@ -213,7 +213,7 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
             workflow_count: importedWorkflowIds.length,
             format: hasZip && fileArray.length === 1 ? 'zip' : 'json',
           })
-          router.push(
+          navigateToWorkflow(
             `/workspace/${workspaceId}/w/${importedWorkflowIds[importedWorkflowIds.length - 1]}`
           )
         }
@@ -227,7 +227,7 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
         }
       }
     },
-    [importSingleWorkflow, workspaceId, router, createFolderMutation, queryClient]
+    [importSingleWorkflow, workspaceId, navigateToWorkflow, createFolderMutation, queryClient]
   )
 
   return {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/page.tsx b/apps/sim/app/workspace/[workspaceId]/w/page.tsx
index c07ff1b3799..ba05a95b78e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/page.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/page.tsx
@@ -5,6 +5,7 @@ import { Chip } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { ReactFlowProvider } from '@xyflow/react'
 import { useParams, useRouter } from 'next/navigation'
+import { WorkflowLoader } from '@/components/ui/workflow-loader'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { Panel, Terminal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components'
 import { useWorkflowOperations } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
@@ -12,21 +13,6 @@ import { useWorkflows } from '@/hooks/queries/workflows'
 
 const logger = createLogger('WorkflowsPage')
 
-function Spinner() {
-  return (
-    <div
-      className='size-[18px] animate-spin rounded-full'
-      style={{
-        background:
-          'conic-gradient(from 0deg, var(--text-icon) 0deg 120deg, transparent 120deg 180deg, var(--text-icon) 180deg 300deg, transparent 300deg 360deg)',
-        mask: 'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-        WebkitMask:
-          'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-      }}
-    />
-  )
-}
-
 export default function WorkflowsPage() {
   const router = useRouter()
   const params = useParams()
@@ -104,7 +90,7 @@ export default function WorkflowsPage() {
               )}
             </div>
           ) : (
-            <Spinner />
+            <WorkflowLoader />
           )}
         </div>
         <ReactFlowProvider>
diff --git a/apps/sim/app/workspace/page.tsx b/apps/sim/app/workspace/page.tsx
index e53c894085a..f3adf7d8969 100644
--- a/apps/sim/app/workspace/page.tsx
+++ b/apps/sim/app/workspace/page.tsx
@@ -5,6 +5,7 @@ import { Chip } from '@sim/emcn'
 import { CircleAlert } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { useRouter } from 'next/navigation'
+import { WorkflowLoader } from '@/components/ui/workflow-loader'
 import { isApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
 import { getWorkflowStateContract } from '@/lib/api/contracts/workflows'
@@ -222,16 +223,7 @@ export default function WorkspacePage() {
   return (
     <div className='desktop-title-bar-page flex w-full items-center justify-center'>
       <DesktopTitleBarLane />
-      <div
-        className='size-[18px] animate-spin rounded-full'
-        style={{
-          background:
-            'conic-gradient(from 0deg, hsl(var(--muted-foreground)) 0deg 120deg, transparent 120deg 180deg, hsl(var(--muted-foreground)) 180deg 300deg, transparent 300deg 360deg)',
-          mask: 'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-          WebkitMask:
-            'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-        }}
-      />
+      <WorkflowLoader label='Loading workspace' />
     </div>
   )
 }
diff --git a/apps/sim/components/ui/wordmark-frame.tsx b/apps/sim/components/ui/wordmark-frame.tsx
new file mode 100644
index 00000000000..139c3b4cba6
--- /dev/null
+++ b/apps/sim/components/ui/wordmark-frame.tsx
@@ -0,0 +1,46 @@
+import type { ReactNode, Ref } from 'react'
+import { cn } from '@sim/emcn'
+import { WORDMARK_FLAT_INK_CLASS } from '@/lib/branding/wordmark'
+
+interface WordmarkFrameProps {
+  children: ReactNode
+  className?: string
+  size?: 'sm' | 'lg'
+  variant?: 'gradient' | 'flat'
+  svgRef?: Ref<SVGSVGElement>
+  label?: string
+}
+
+/** Identical SVG viewport and canvas alignment for the resting and animated wordmarks. */
+export function WordmarkFrame({
+  children,
+  className,
+  size = 'sm',
+  variant = 'flat',
+  svgRef,
+  label,
+}: WordmarkFrameProps) {
+  return (
+    <div
+      className={cn(
+        'relative mx-auto aspect-[5/3] shrink-0',
+        size === 'sm' ? 'w-[108px]' : 'w-[clamp(180px,17vw,320px)]',
+        className
+      )}
+    >
+      <svg
+        ref={svgRef}
+        viewBox='0 0 100 100'
+        role={label ? 'img' : undefined}
+        aria-label={label}
+        aria-hidden={label ? undefined : true}
+        className={cn(
+          '-translate-y-1/2 absolute inset-x-0 top-1/2 aspect-square w-full overflow-visible',
+          variant === 'flat' && WORDMARK_FLAT_INK_CLASS
+        )}
+      >
+        {children}
+      </svg>
+    </div>
+  )
+}
diff --git a/apps/sim/components/ui/wordmark-morph.tsx b/apps/sim/components/ui/wordmark-morph.tsx
new file mode 100644
index 00000000000..0ebd116eb1d
--- /dev/null
+++ b/apps/sim/components/ui/wordmark-morph.tsx
@@ -0,0 +1,626 @@
+'use client'
+
+import { useEffect, useId, useRef } from 'react'
+import { WordmarkFrame } from '@/components/ui/wordmark-frame'
+import {
+  WORDMARK_MORPH_TRANSFORM,
+  WORDMARK_PATHS,
+  WORDMARK_VIEW_BOX,
+} from '@/lib/branding/wordmark'
+
+/** Theme-aware ink shared by the wordmark and every shape in its animation. */
+const INK_STOPS = {
+  inner: '[stop-color:var(--thinking-ink-inner)]',
+  outer: '[stop-color:var(--thinking-ink-outer)]',
+} as const
+
+/**
+ * The seven thinking-loader shapes in play order, each with its hold in ms.
+ * Order, holds, and every timing constant below are the master's - the
+ * "Sim loader wordmark" film's deterministic generator - so each instance plays
+ * the same choreography frame for frame.
+ */
+const SHAPES = [
+  ['metaballs', 2000],
+  ['relay', 1300],
+  ['compass', 2000],
+  ['corners', 800],
+  ['burst', 1300],
+  ['squeeze', 1200],
+  ['thinking', 2000],
+] as const
+
+type ShapeKey = (typeof SHAPES)[number][0]
+type StageKey = ShapeKey | 'orb' | 'wm'
+
+/** Crossfade between two consecutive shapes. */
+const MORPH = 500
+/** Liquid morph between the wordmark and the orb, on each side of the cycle. */
+const MORPH_LOGO = 1200
+/** Opening hold on the crisp wordmark. */
+const LOGO_HOLD = 1300
+/** Orb settle on either side of the shape cycle. */
+const ORB_BEAT = 450
+/** Closing hold on the wordmark before the loop wraps back to the opening hold. */
+const HOLD_LOGO_END = 1700
+const TAIL = 200
+/** Blur range for the filtered portion of the morph. */
+const GOO_HI = 5
+const GOO_LO = 0.55
+/**
+ * Shapes that restart from compact when they appear and play exactly one pulse
+ * of this many ms (just under a loop, so the dots reach the edge without
+ * snapping back) instead of free-running on the shared clock.
+ */
+const LOCAL_PULSE: Partial<Record<ShapeKey, number>> = { burst: 770 }
+/**
+ * Longest step the clock advances per frame. A background tab or a stalled
+ * frame resumes mid-choreography instead of skipping ahead.
+ */
+const MAX_FRAME_STEP = 100
+
+const T_LOGO_HOLD_END = LOGO_HOLD
+const T_INTRO_END = T_LOGO_HOLD_END + MORPH_LOGO
+const FIRST_SHAPE_START = T_INTRO_END + ORB_BEAT
+
+/** Lays the shapes end to end from the first shape's start. */
+function buildShapeWindows(): {
+  windows: Record<ShapeKey, readonly [number, number]>
+  end: number
+} {
+  const windows: Partial<Record<ShapeKey, readonly [number, number]>> = {}
+  let cursor = FIRST_SHAPE_START
+  for (const [key, hold] of SHAPES) {
+    windows[key] = [cursor, cursor + hold]
+    cursor += hold
+  }
+  return { windows: windows as Record<ShapeKey, readonly [number, number]>, end: cursor }
+}
+
+const { windows: SHAPE_WINDOWS, end: SHAPES_END } = buildShapeWindows()
+const T_OUTRO_START = SHAPES_END + ORB_BEAT
+const T_OUTRO_END = T_OUTRO_START + MORPH_LOGO
+/** One full pass: wordmark → orb → seven shapes → orb → wordmark. */
+const CYCLE_MS = T_OUTRO_END + HOLD_LOGO_END + TAIL
+
+interface Track {
+  /** Period in ms. */
+  dur: number
+  /** Play backwards on odd iterations. */
+  alt?: boolean
+  /** Linear timing instead of the CSS default ease. */
+  lin?: boolean
+  /** `[progress, x, y]` keyframes in stage units. */
+  stops: ReadonlyArray<readonly [number, number, number]>
+  /** Optional `[progress, opacity]` keyframes. */
+  op?: ReadonlyArray<readonly [number, number]>
+}
+
+/** Per-element motion tracks - the loader's CSS keyframes, evaluated analytically. */
+const TRACKS = {
+  metaballsA: {
+    dur: 1000,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [0.9, 28, 0],
+      [1, 28, 0],
+    ],
+  },
+  metaballsB: {
+    dur: 1000,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [0.9, -28, 0],
+      [1, -28, 0],
+    ],
+  },
+  relayBall: {
+    dur: 1300,
+    lin: true,
+    stops: [
+      [0, 0, 0],
+      [1, 58, 0],
+    ],
+    op: [
+      [0, 0],
+      [0.2, 1],
+      [0.78, 1],
+      [1, 0],
+    ],
+  },
+  compassMover: {
+    dur: 2000,
+    stops: [
+      [0, 0, 0],
+      [0.25, 27, 27],
+      [0.5, 0, 54],
+      [0.75, -27, 27],
+      [1, 0, 0],
+    ],
+  },
+  cornersA: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 46, 0],
+    ],
+  },
+  cornersB: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 0, 46],
+    ],
+  },
+  cornersC: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, -46, 0],
+    ],
+  },
+  cornersD: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 0, -46],
+    ],
+  },
+  burstUp: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 0, -50],
+    ],
+  },
+  burstDown: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 0, 50],
+    ],
+  },
+  burstLeft: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, -50, 0],
+    ],
+  },
+  burstRight: {
+    dur: 800,
+    stops: [
+      [0, 0, 0],
+      [1, 50, 0],
+    ],
+  },
+  squeezeBarL: {
+    dur: 600,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [0.3, 0, 0],
+      [1, 10, 0],
+    ],
+  },
+  squeezeBarR: {
+    dur: 600,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [0.3, 0, 0],
+      [1, -10, 0],
+    ],
+  },
+  thinkA: {
+    dur: 1600,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [1, -20, -14],
+    ],
+  },
+  thinkB: {
+    dur: 1900,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [1, 22, -10],
+    ],
+  },
+  thinkC: {
+    dur: 1300,
+    alt: true,
+    stops: [
+      [0, 0, 0],
+      [1, 2, 22],
+    ],
+  },
+} as const satisfies Record<string, Track>
+
+type AnimKey = keyof typeof TRACKS
+
+const clamp01 = (x: number): number => Math.max(0, Math.min(1, x))
+
+/** A CSS `cubic-bezier` timing function, solved for `x` by Newton iteration. */
+function cubicBezier(
+  p1x: number,
+  p1y: number,
+  p2x: number,
+  p2y: number
+): (progress: number) => number {
+  const cx = 3 * p1x
+  const bx = 3 * (p2x - p1x) - cx
+  const ax = 1 - cx - bx
+  const cy = 3 * p1y
+  const by = 3 * (p2y - p1y) - cy
+  const ay = 1 - cy - by
+  const sampleX = (t: number) => ((ax * t + bx) * t + cx) * t
+  const sampleY = (t: number) => ((ay * t + by) * t + cy) * t
+  const slopeX = (t: number) => (3 * ax * t + 2 * bx) * t + cx
+  return (progress) => {
+    let t = progress
+    for (let i = 0; i < 8; i++) {
+      const error = sampleX(t) - progress
+      if (Math.abs(error) < 1e-6) break
+      const slope = slopeX(t)
+      if (Math.abs(slope) < 1e-6) break
+      t -= error / slope
+    }
+    return sampleY(clamp01(t))
+  }
+}
+
+/** The CSS default `ease`. */
+const EASE = cubicBezier(0.25, 0.1, 0.25, 1)
+const LINEAR = (progress: number): number => progress
+
+/** Hermite smoothstep from `a` to `b`. */
+function smooth(a: number, b: number, x: number): number {
+  const t = clamp01((x - a) / (b - a))
+  return t * t * (3 - 2 * t)
+}
+
+/** Opacity envelope: rises over `[t0, t1]`, holds, falls over `[t2, t3]`. */
+function envelope(t: number, t0: number, t1: number, t2: number, t3: number): number {
+  return Math.min(smooth(t0, t1, t), 1 - smooth(t2, t3, t))
+}
+
+/** The keyframe pair around `frac` and the clamped progress between them. */
+function segment<T extends readonly [number, ...number[]]>(
+  stops: ReadonlyArray<T>,
+  frac: number
+): { a: T; b: T; p: number } {
+  let a = stops[0]
+  let b = stops[stops.length - 1]
+  for (let i = 0; i < stops.length - 1; i++) {
+    if (frac >= stops[i][0] && frac <= stops[i + 1][0]) {
+      a = stops[i]
+      b = stops[i + 1]
+      break
+    }
+  }
+  const span = b[0] - a[0] || 1
+  return { a, b, p: clamp01((frac - a[0]) / span) }
+}
+
+interface Sample {
+  x: number
+  y: number
+  opacity: number
+}
+
+/** Position and opacity of a track at `at` ms on its own clock. */
+function sampleTrack(track: Track, at: number): Sample {
+  const raw = at / track.dur
+  const iteration = Math.floor(raw)
+  let frac = raw - iteration
+  if (track.alt && iteration % 2 === 1) frac = 1 - frac
+  const { a, b, p } = segment(track.stops, frac)
+  const eased = (track.lin ? LINEAR : EASE)(p)
+  const x = a[1] + (b[1] - a[1]) * eased
+  const y = a[2] + (b[2] - a[2]) * eased
+  let opacity = 1
+  if (track.op) {
+    const o = segment(track.op, frac)
+    opacity = o.a[1] + (o.b[1] - o.a[1]) * o.p
+  }
+  return { x, y, opacity }
+}
+
+const WORDMARK_CX = WORDMARK_VIEW_BOX.width / 2
+const WORDMARK_CY = WORDMARK_VIEW_BOX.height / 2
+
+const round = (n: number): string => n.toFixed(3)
+
+interface AnimatedNode {
+  el: SVGGraphicsElement
+  track: Track
+  stage: ShapeKey
+}
+
+interface StageNode {
+  el: SVGGElement
+  key: StageKey
+}
+
+interface GooFilterNodes {
+  blur: SVGFEGaussianBlurElement
+  matrix: SVGFEColorMatrixElement
+}
+
+/**
+ * Paints one frame of the choreography at `t` ms into the cycle by writing
+ * SVG attributes directly - no React render per frame.
+ */
+function paintFrame(
+  t: number,
+  goo: GooFilterNodes,
+  stages: StageNode[],
+  anims: AnimatedNode[]
+): void {
+  for (const { el, track, stage } of anims) {
+    const pulse = LOCAL_PULSE[stage]
+    const clock =
+      pulse === undefined
+        ? t
+        : Math.max(0, Math.min(t - (SHAPE_WINDOWS[stage][0] + MORPH / 2), pulse))
+    const sample = sampleTrack(track, clock)
+    el.setAttribute('transform', `translate(${round(sample.x)} ${round(sample.y)})`)
+    if (track.op) el.setAttribute('opacity', sample.opacity.toFixed(4))
+  }
+
+  const introLogo = 1 - smooth(T_LOGO_HOLD_END, T_INTRO_END, t)
+  const outroLogo = smooth(T_OUTRO_START, T_OUTRO_END, t)
+  const logo = Math.max(introLogo, outroLogo)
+  const orbIn = envelope(
+    t,
+    T_LOGO_HOLD_END,
+    T_INTRO_END,
+    FIRST_SHAPE_START - MORPH / 2,
+    FIRST_SHAPE_START + MORPH / 2
+  )
+  const orbOut = envelope(
+    t,
+    SHAPES_END - MORPH / 2,
+    SHAPES_END + MORPH / 2,
+    T_OUTRO_START,
+    T_OUTRO_END
+  )
+  const orb = Math.max(orbIn, orbOut)
+
+  for (const { el, key } of stages) {
+    let opacity: number
+    if (key === 'wm') opacity = logo
+    else if (key === 'orb') opacity = orb
+    else {
+      const [start, end] = SHAPE_WINDOWS[key]
+      opacity = envelope(t, start - MORPH / 2, start + MORPH / 2, end - MORPH / 2, end + MORPH / 2)
+    }
+    el.setAttribute('opacity', opacity.toFixed(4))
+  }
+
+  const liquid = Math.min(
+    smooth(T_LOGO_HOLD_END, T_INTRO_END, t),
+    1 - smooth(T_OUTRO_START, T_OUTRO_END, t)
+  )
+  /** Ease the filter to identity at rest without overlaying the unfiltered shapes. */
+  const strength = Math.min(
+    smooth(T_LOGO_HOLD_END, T_LOGO_HOLD_END + MORPH, t),
+    1 - smooth(T_OUTRO_END - MORPH, T_OUTRO_END, t)
+  )
+  const deviation = round((GOO_LO + (GOO_HI - GOO_LO) * liquid) * strength)
+  if (goo.blur.getAttribute('stdDeviation') !== deviation) {
+    goo.blur.setAttribute('stdDeviation', deviation)
+  }
+  const matrix = `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${round(1 + 39 * strength)} ${round(-19 * strength)}`
+  if (goo.matrix.getAttribute('values') !== matrix) goo.matrix.setAttribute('values', matrix)
+}
+
+interface WordmarkMorphProps {
+  /** Layout only: sizing, margins and alignment. */
+  className?: string
+  /** Compact loading indicator or responsive footer mark. */
+  size?: 'sm' | 'lg'
+  /** Theme-aware gradient or solid gray ink. */
+  variant?: 'gradient' | 'flat'
+}
+
+/**
+ * The Sim wordmark melts into an orb, cycles through seven loader shapes,
+ * and returns to the wordmark. Shared by workflow loading and the footer.
+ * Renders a crisp resting frame, pauses outside the viewport, and stays
+ * still under reduced motion. Frames update SVG attributes without React renders.
+ */
+export function WordmarkMorph({
+  className,
+  size = 'sm',
+  variant = 'gradient',
+}: WordmarkMorphProps) {
+  const svgRef = useRef<SVGSVGElement>(null)
+  const id = useId().replace(/[^a-zA-Z0-9-]/g, '')
+  const gooId = `fwl-goo-${id}`
+  const inkId = `fwl-ink-${id}`
+  const wordmarkInkId = `fwl-wm-ink-${id}`
+  const clipId = `fwl-clip-${id}`
+  const windowId = `fwl-window-${id}`
+  const shapeInk = variant === 'flat' ? 'currentColor' : `url(#${inkId})`
+  const wordmarkInk = variant === 'flat' ? shapeInk : `url(#${wordmarkInkId})`
+
+  useEffect(() => {
+    const svg = svgRef.current
+    if (!svg) return
+    const blur = svg.querySelector<SVGFEGaussianBlurElement>('[data-goo]')
+    const matrix = svg.querySelector<SVGFEColorMatrixElement>('[data-goo-matrix]')
+    if (!blur || !matrix) return
+    const goo: GooFilterNodes = { blur, matrix }
+
+    const stages: StageNode[] = Array.from(
+      svg.querySelectorAll<SVGGElement>('[data-stage]'),
+      (el) => ({ el, key: el.getAttribute('data-stage') as StageKey })
+    )
+    const anims: AnimatedNode[] = []
+    for (const el of svg.querySelectorAll<SVGGraphicsElement>('[data-anim]')) {
+      const stage = el.closest('[data-stage]')?.getAttribute('data-stage') as ShapeKey | undefined
+      if (stage) anims.push({ el, track: TRACKS[el.getAttribute('data-anim') as AnimKey], stage })
+    }
+
+    const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')
+    let frame: number | null = null
+    let previous: number | null = null
+    let elapsed = 0
+    let inView = false
+
+    const tick = (now: number) => {
+      if (previous !== null) elapsed += Math.min(now - previous, MAX_FRAME_STEP)
+      previous = now
+      paintFrame(elapsed % CYCLE_MS, goo, stages, anims)
+      frame = requestAnimationFrame(tick)
+    }
+    const play = () => {
+      if (frame !== null || !inView || reducedMotion?.matches) return
+      previous = null
+      frame = requestAnimationFrame(tick)
+    }
+    const pause = () => {
+      if (frame === null) return
+      cancelAnimationFrame(frame)
+      frame = null
+    }
+    const onMotionPreference = () => {
+      if (reducedMotion?.matches) {
+        pause()
+        elapsed = 0
+        paintFrame(0, goo, stages, anims)
+      } else {
+        play()
+      }
+    }
+    reducedMotion?.addEventListener('change', onMotionPreference)
+
+    let observer: IntersectionObserver | undefined
+    if (typeof IntersectionObserver === 'undefined') {
+      inView = true
+      play()
+    } else {
+      observer = new IntersectionObserver(([entry]) => {
+        inView = entry.isIntersecting
+        if (inView) play()
+        else pause()
+      })
+      observer.observe(svg)
+    }
+
+    return () => {
+      pause()
+      observer?.disconnect()
+      reducedMotion?.removeEventListener('change', onMotionPreference)
+    }
+  }, [])
+
+  return (
+    <WordmarkFrame className={className} size={size} variant={variant} svgRef={svgRef}>
+      <defs>
+        <filter
+          id={gooId}
+          x='-30%'
+          y='-30%'
+          width='160%'
+          height='160%'
+          colorInterpolationFilters='sRGB'
+        >
+          <feGaussianBlur data-goo='' in='SourceGraphic' stdDeviation={0} result='blur' />
+          {/** The alpha threshold joins nearby shapes during the liquid morph. */}
+          <feColorMatrix
+            data-goo-matrix=''
+            in='blur'
+            values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0'
+            result='goo'
+          />
+        </filter>
+        {variant === 'gradient' && (
+          <>
+            <radialGradient id={inkId} cx='0.5' cy='0.5' r='0.5'>
+              <stop className={INK_STOPS.inner} />
+              <stop offset='1' className={INK_STOPS.outer} />
+            </radialGradient>
+            <radialGradient
+              id={wordmarkInkId}
+              cx='0'
+              cy='0'
+              r='1'
+              gradientUnits='userSpaceOnUse'
+              gradientTransform={`translate(${WORDMARK_CX} ${WORDMARK_CY}) rotate(90) scale(${WORDMARK_CY} ${WORDMARK_CX})`}
+            >
+              <stop className={INK_STOPS.inner} />
+              <stop offset='1' className={INK_STOPS.outer} />
+            </radialGradient>
+          </>
+        )}
+        <clipPath id={clipId}>
+          <rect width='100' height='100' />
+        </clipPath>
+        <clipPath id={windowId}>
+          <rect x='12.5' y='12.5' width='75' height='75' />
+        </clipPath>
+      </defs>
+
+      <g filter={`url(#${gooId})`} fill={shapeInk} stroke={shapeInk} strokeWidth={0}>
+        <g data-stage='metaballs' opacity={0} clipPath={`url(#${clipId})`}>
+          <circle data-anim='metaballsA' cx='22' cy='50' r='16' />
+          <circle data-anim='metaballsB' cx='78' cy='50' r='16' />
+        </g>
+        <g data-stage='relay' opacity={0} clipPath={`url(#${clipId})`}>
+          <rect x='13' y='28' width='16' height='44' />
+          <rect x='71' y='28' width='16' height='44' />
+          <circle data-anim='relayBall' cx='21' cy='50' r='14' />
+        </g>
+        <g data-stage='compass' opacity={0} clipPath={`url(#${clipId})`}>
+          <circle cx='50' cy='23' r='14' />
+          <circle cx='23' cy='50' r='14' />
+          <circle cx='77' cy='50' r='14' />
+          <circle cx='50' cy='77' r='14' />
+          <circle data-anim='compassMover' cx='50' cy='23' r='14' />
+        </g>
+        <g data-stage='corners' opacity={0} clipPath={`url(#${clipId})`}>
+          <rect x='27' y='27' width='46' height='46' />
+          <circle data-anim='cornersA' cx='27' cy='27' r='14' />
+          <circle data-anim='cornersB' cx='73' cy='27' r='14' />
+          <circle data-anim='cornersC' cx='73' cy='73' r='14' />
+          <circle data-anim='cornersD' cx='27' cy='73' r='14' />
+        </g>
+        <g data-stage='burst' opacity={0} clipPath={`url(#${windowId})`}>
+          <rect x='12.5' y='43.75' width='75' height='12.5' />
+          <rect x='43.75' y='12.5' width='12.5' height='75' />
+          <circle cx='50' cy='50' r='12.5' />
+          <circle data-anim='burstUp' cx='50' cy='50' r='12.5' />
+          <circle data-anim='burstDown' cx='50' cy='50' r='12.5' />
+          <circle data-anim='burstLeft' cx='50' cy='50' r='12.5' />
+          <circle data-anim='burstRight' cx='50' cy='50' r='12.5' />
+        </g>
+        <g data-stage='squeeze' opacity={0} clipPath={`url(#${clipId})`}>
+          <path d='M 21.36 37.5 A 31.25 31.25 0 0 1 78.64 37.5' fill='none' strokeWidth='12.5' />
+          <path d='M 21.36 62.5 A 31.25 31.25 0 0 0 78.64 62.5' fill='none' strokeWidth='12.5' />
+          <rect data-anim='squeezeBarL' x='15' y='37.5' width='12.5' height='25' />
+          <rect data-anim='squeezeBarR' x='72.5' y='37.5' width='12.5' height='25' />
+        </g>
+        <g data-stage='thinking' opacity={0} clipPath={`url(#${clipId})`}>
+          <circle cx='50' cy='50' r='15' />
+          <circle data-anim='thinkA' cx='50' cy='50' r='12' />
+          <circle data-anim='thinkB' cx='50' cy='50' r='12' />
+          <circle data-anim='thinkC' cx='50' cy='50' r='11' />
+        </g>
+        <g data-stage='orb' opacity={0}>
+          <circle cx='50' cy='50' r='42' />
+        </g>
+        <g data-stage='wm' opacity={1} fill={wordmarkInk} transform={WORDMARK_MORPH_TRANSFORM}>
+          {WORDMARK_PATHS.map((d) => (
+            <path key={d} d={d} />
+          ))}
+        </g>
+      </g>
+    </WordmarkFrame>
+  )
+}
diff --git a/apps/sim/components/ui/workflow-loader.tsx b/apps/sim/components/ui/workflow-loader.tsx
new file mode 100644
index 00000000000..622d7480693
--- /dev/null
+++ b/apps/sim/components/ui/workflow-loader.tsx
@@ -0,0 +1,15 @@
+import { WordmarkMorph } from '@/components/ui/wordmark-morph'
+
+interface WorkflowLoaderProps {
+  label?: string
+}
+
+/** Brand loading state for workspace navigation and workflow canvases. */
+export function WorkflowLoader({ label = 'Loading workflow' }: WorkflowLoaderProps) {
+  return (
+    <div role='status'>
+      <WordmarkMorph variant='flat' />
+      <span className='sr-only'>{label}</span>
+    </div>
+  )
+}
diff --git a/apps/sim/lib/branding/wordmark.ts b/apps/sim/lib/branding/wordmark.ts
index a02bf9cb782..823fca10492 100644
--- a/apps/sim/lib/branding/wordmark.ts
+++ b/apps/sim/lib/branding/wordmark.ts
@@ -9,6 +9,16 @@
  */
 export const WORDMARK_VIEW_BOX = { width: 441, height: 212 } as const
 
+/** Brand palette: Static on light backgrounds, Graphite on dark backgrounds. */
+export const WORDMARK_FLAT_INK_CLASS = '[color:#e6e6e6] dark:[color:#3b3b3b]'
+
+/** Resting mark geometry within the morph's 100-unit stage. */
+const WORDMARK_MORPH_WIDTH = 91.1
+const WORDMARK_MORPH_SCALE = WORDMARK_MORPH_WIDTH / WORDMARK_VIEW_BOX.width
+
+/** Shared resting position, preserving the animation's coordinate precision. */
+export const WORDMARK_MORPH_TRANSFORM = `translate(${((100 - WORDMARK_MORPH_WIDTH) / 2).toFixed(3)} ${((100 - WORDMARK_VIEW_BOX.height * WORDMARK_MORPH_SCALE) / 2).toFixed(3)}) scale(${WORDMARK_MORPH_SCALE.toFixed(5)})`
+
 /** Glyph outlines, drawn in `WORDMARK_VIEW_BOX` coordinates. */
 export const WORDMARK_PATHS: readonly string[] = [
   'M0 160.9H29.51C29.51 169.08 32.46 175.61 38.37 180.48C44.27 185.12 52.25 187.44 62.31 187.44C73.24 187.44 81.65 185.34 87.56 181.14C93.46 176.71 96.41 170.85 96.41 163.55C96.41 158.24 94.77 153.82 91.49 150.28C88.43 146.74 82.75 143.86 74.44 141.65L46.24 135.01C32.03 131.47 21.42 126.05 14.43 118.75C7.65 111.45 4.26 101.83 4.26 89.88C4.26 79.93 6.78 71.3 11.81 64C17.05 56.7 24.16 51.06 33.12 47.08C42.3 43.09 52.8 41.1 64.6 41.1C76.41 41.1 86.57 43.2 95.1 47.41C103.84 51.61 110.62 57.47 115.43 64.99C120.46 72.52 123.08 81.48 123.3 91.87H93.79C93.57 83.47 90.84 76.94 85.59 72.3C80.34 67.65 73.02 65.33 63.62 65.33C54 65.33 46.57 67.43 41.32 71.63C36.07 75.83 33.45 81.59 33.45 88.89C33.45 99.73 41.32 107.14 57.06 111.12L85.26 118.09C98.81 121.19 108.98 126.28 115.76 133.35C122.53 140.21 125.92 149.61 125.92 161.56C125.92 171.74 123.19 180.7 117.73 188.44C112.26 195.96 104.72 201.82 95.1 206.03C85.7 210.01 74.55 212 61.65 212C42.85 212 27.87 207.35 16.72 198.06C5.57 188.77 0 176.38 0 160.9Z',
diff --git a/packages/emcn/src/icons/animate/ring-loader.module.css b/packages/emcn/src/icons/animate/ring-loader.module.css
new file mode 100644
index 00000000000..7f1f91e2c10
--- /dev/null
+++ b/packages/emcn/src/icons/animate/ring-loader.module.css
@@ -0,0 +1,26 @@
+.animated {
+  animation: gravity-orbit var(--loader-duration, 1.4s) linear infinite;
+  transform-box: border-box;
+  transform-origin: center;
+}
+
+/** Matched speeds keep the loop continuous, with a gentle slowdown at the top. */
+@keyframes gravity-orbit {
+  0% {
+    transform: rotate(0deg);
+    animation-timing-function: cubic-bezier(0.55, 0.3, 0.8, 0.5);
+  }
+  50% {
+    transform: rotate(180deg);
+    animation-timing-function: cubic-bezier(0.2, 0.5, 0.45, 0.7);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animated {
+    animation: none;
+  }
+}
diff --git a/packages/emcn/src/icons/loader.tsx b/packages/emcn/src/icons/loader.tsx
index c5d2367e30b..6c213e30a35 100644
--- a/packages/emcn/src/icons/loader.tsx
+++ b/packages/emcn/src/icons/loader.tsx
@@ -1,27 +1,23 @@
+'use client'
+
 import type { SVGProps } from 'react'
-import { cn } from '../lib/cn'
-import styles from './animate/loader.module.css'
+import { cn } from '@sim/emcn'
+import styles from '@sim/emcn/icons/animate/ring-loader.module.css'
 
 export interface LoaderProps extends SVGProps<SVGSVGElement> {
   /**
-   * Enable animation on the loader icon
+   * Enable the weighted rotation. Otherwise the dot rests at the top of the ring.
    * @default false
    */
   animate?: boolean
 }
 
 /**
- * Loader icon component with optional CSS-based spinning animation
- * Based on refresh-cw but without the arrows, just the circular arcs.
- * When animate is false, this is a lightweight static icon with no animation overhead.
- * When animate is true, CSS module animations are applied for continuous spin;
- * the period defaults to 1s and follows `--loader-duration` when a consumer sets it
- * (for example `className='[--loader-duration:650ms]'`).
- * @param props - SVG properties including className, animate, etc.
+ * Shared loading ring with a dot that accelerates downward and slows on the climb.
+ * Inherits the caller's color and sizing; reduced motion holds the dot still.
+ * Consumers can override the 1.4s period with `--loader-duration`.
  */
 export function Loader({ animate = false, className, ...props }: LoaderProps) {
-  const svgClassName = cn(animate && styles['animated-loader-svg'], className)
-
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
@@ -29,16 +25,12 @@ export function Loader({ animate = false, className, ...props }: LoaderProps) {
       height='24'
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      className={svgClassName}
+      className={cn(animate && styles.animated, className)}
       aria-hidden='true'
       {...props}
     >
-      <path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74' />
-      <path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74' />
+      <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='4' opacity='.25' />
+      <circle cx='12' cy='2' r='2' fill='currentColor' />
     </svg>
   )
 }