diff --git a/apps/sim/app/(landing)/components/hero/components/icon-button.tsx b/apps/sim/app/(landing)/components/hero/components/icon-button.tsx
index c8e523e2f86..fd6a0901839 100644
--- a/apps/sim/app/(landing)/components/hero/components/icon-button.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/icon-button.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type React from 'react'
+import { motion } from 'framer-motion'
 
 interface IconButtonProps {
   children: React.ReactNode
@@ -8,7 +9,7 @@ interface IconButtonProps {
   onMouseEnter?: () => void
   style?: React.CSSProperties
   'aria-label': string
-  isAutoHovered?: boolean
+  isActive?: boolean
 }
 
 export function IconButton({
@@ -17,7 +18,7 @@ export function IconButton({
   onMouseEnter,
   style,
   'aria-label': ariaLabel,
-  isAutoHovered = false,
+  isActive = false,
 }: IconButtonProps) {
   return (
     <button
@@ -25,14 +26,17 @@ export function IconButton({
       aria-label={ariaLabel}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
-      className={`flex items-center justify-center rounded-xl border p-2 outline-none transition-all duration-300 ${
-        isAutoHovered
-          ? 'border-[#E5E5E5] shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
-          : 'border-transparent hover:border-[#E5E5E5] hover:shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
-      }`}
+      className='relative flex items-center justify-center rounded-xl p-2 outline-none'
       style={style}
     >
-      {children}
+      {isActive && (
+        <motion.div
+          layoutId='icon-highlight-pill'
+          className='absolute inset-0 rounded-xl border border-[#E5E5E5] shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
+          transition={{ type: 'spring', stiffness: 400, damping: 30 }}
+        />
+      )}
+      <span className='relative z-[1]'>{children}</span>
     </button>
   )
 }
diff --git a/apps/sim/app/(landing)/components/hero/hero.tsx b/apps/sim/app/(landing)/components/hero/hero.tsx
index 546dc47627f..7817c082886 100644
--- a/apps/sim/app/(landing)/components/hero/hero.tsx
+++ b/apps/sim/app/(landing)/components/hero/hero.tsx
@@ -149,7 +149,7 @@ export default function Hero() {
    */
   const [autoHoverIndex, setAutoHoverIndex] = React.useState(1)
   const [isUserHovering, setIsUserHovering] = React.useState(false)
-  const [lastHoveredIndex, setLastHoveredIndex] = React.useState<number | null>(null)
+  const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null)
   const intervalRef = React.useRef<NodeJS.Timeout | null>(null)
 
   /**
@@ -225,6 +225,12 @@ export default function Hero() {
     }
   }, [isUserHovering, visibleIconCount])
 
+  /**
+   * The active icon index used to position the shared highlight pill.
+   * When the user is hovering, use their hovered icon; otherwise use auto-hover.
+   */
+  const activeIconIndex = isUserHovering && hoveredIndex !== null ? hoveredIndex : autoHoverIndex
+
   /**
    * Handle mouse enter on icon container
    */
@@ -239,10 +245,12 @@ export default function Hero() {
    * Handle mouse leave on icon container
    */
   const handleIconContainerMouseLeave = () => {
+    const lastIndex = hoveredIndex
     setIsUserHovering(false)
+    setHoveredIndex(null)
     // Start from the next icon after the last hovered one
-    if (lastHoveredIndex !== null) {
-      setAutoHoverIndex((lastHoveredIndex + 1) % visibleIconCount)
+    if (lastIndex !== null) {
+      setAutoHoverIndex((lastIndex + 1) % visibleIconCount)
     }
   }
 
@@ -389,9 +397,9 @@ export default function Hero() {
               key={service.key}
               aria-label={service.label}
               onClick={() => handleServiceClick(service.key as keyof typeof SERVICE_TEMPLATES)}
-              onMouseEnter={() => setLastHoveredIndex(index)}
+              onMouseEnter={() => setHoveredIndex(index)}
               style={service.style}
-              isAutoHovered={!isUserHovering && index === autoHoverIndex}
+              isActive={index === activeIconIndex}
             >
               <Icon className='h-5 w-5 sm:h-6 sm:w-6' />
             </IconButton>