diff --git a/src/components/InteractiveCode.astro b/src/components/InteractiveCode.astro
index d318ee8..2ab92d1 100644
--- a/src/components/InteractiveCode.astro
+++ b/src/components/InteractiveCode.astro
@@ -77,8 +77,10 @@ function highlightCode(lines: Array<string>): string {
 
     for (const line of lines) {
         const tokens = lex(line);
-        const lineArray = [];
-        
+        const lineArray = [
+            "<div class=\"inline-block w-full\" :class=\"line === 0? '': 'bg-red-400'\">"
+        ];
+
         for (const token of tokens) {
             if (token.token_type !== "") {
                 lineArray.push(`<span class="token ${token.token_type}">${token.v}</span>`);
@@ -86,6 +88,7 @@ function highlightCode(lines: Array<string>): string {
                 lineArray.push(token.v);
             }
         }
+        lineArray.push("</div>");
 
         outLines.push(lineArray.join(""));
     }
@@ -96,7 +99,7 @@ function highlightCode(lines: Array<string>): string {
 const codeHtml = highlightCode(trimAndDedent(code));
 ---
 
-<div class="bg-black rounded">
+<div class="bg-black rounded" x-data="editor">
     <span class="inline-block bg-[var(--code-theme-bg-acolor)] px-2 rounded-tl rounded-tr font-mono text-sm">thp code</span>
     <pre class="language-thp" style="margin: 0; border-top-left-radius: 0;" data-disabled><code set:html={codeHtml}></code></pre>
     <div class="grid grid-cols-2 font-mono text-sm">
@@ -115,4 +118,20 @@ const codeHtml = highlightCode(trimAndDedent(code));
             </div>
         </div>
     </div>
+    <div class="border-t border-white p-1">
+        <button class="font-mono px-1 rounded bg-pink-950" @click="line = 1">
+            Step
+        </button>
+    </div>
 </div>
+
+<script>
+    document.addEventListener("alpine:init", () => {
+        // @ts-ignore
+        const Alpine: any = window.Alpine;
+
+        Alpine.data("editor", () => ({
+            line: 0,
+        }));
+    });
+</script>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 9c14c7e..f16807e 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -35,5 +35,7 @@ const { title } = Astro.props;
 
     <body class="bg-c-bg text-c-text">
         <slot />
+
+        <script src="//unpkg.com/alpinejs" defer></script>
     </body>
 </html>
diff --git a/src/pages/learn/basics/hello-world.mdx b/src/pages/learn/basics/hello-world.mdx
index 19a5fae..537a43e 100644
--- a/src/pages/learn/basics/hello-world.mdx
+++ b/src/pages/learn/basics/hello-world.mdx
@@ -38,5 +38,26 @@ f(x, y)
 
     f(x, y)
     `}
-    attr="aa"
+    steps={`
+        step {
+            line 1
+        }
+        step {
+            line 1
+            set x 322
+        }
+        step {
+            line 2
+            set y 322
+        }
+        step {
+            line 8
+        }
+        step {
+            line 4
+            push f
+            set x 322
+            set y 322
+        }
+    `}
 ></InteractiveCode>
