diff --git a/client/src/containers/story/index.tsx b/client/src/containers/story/index.tsx
index 995fb46..9de69d1 100644
--- a/client/src/containers/story/index.tsx
+++ b/client/src/containers/story/index.tsx
@@ -97,7 +97,7 @@ const Story = () => {
             </ScrollItem>
           );
         })}
-        <div className="fixed right-6 z-30 flex h-full flex-col justify-center">
+        <div className="fixed right-6 z-30 flex h-full flex-col justify-center gap-2">
           {steps?.map((s, index) => (
             <ScrollItemController
               className={cn(
@@ -106,7 +106,7 @@ const Story = () => {
               )}
               key={index}
               newStep={index}
-              title=""
+              title={s.title || ''}
             />
           ))}
         </div>
diff --git a/client/src/containers/story/steps/controller/controller-item.tsx b/client/src/containers/story/steps/controller/controller-item.tsx
index a19bd40..9a9abd4 100644
--- a/client/src/containers/story/steps/controller/controller-item.tsx
+++ b/client/src/containers/story/steps/controller/controller-item.tsx
@@ -31,7 +31,12 @@ export const ScrollItemController = ({ title, newStep, className }: ScrollItemCo
   return (
     <>
       <Tooltip delayDuration={300}>
-        <TooltipTrigger type="button" aria-label="Change layer opacity" className="h-5">
+        <TooltipTrigger
+          type="button"
+          aria-label={`Scroll to step ${newStep}`}
+          className="h-5"
+          asChild
+        >
           <Button variant="icon" className={className} onClick={handleSCrollToItem} size="icon" />
         </TooltipTrigger>