diff --git a/app/routes/_index/sections/hero.jsx b/app/routes/_index/sections/hero.jsx
index 6ec9194..8c26bef 100644
--- a/app/routes/_index/sections/hero.jsx
+++ b/app/routes/_index/sections/hero.jsx
@@ -1,6 +1,4 @@
 import * as React from 'react'
-// import { Button } from '@h2/new/Button'
-// import { Heading, Text } from '@h2/new/Text'
 
 export default function Hero() {
   return (
@@ -38,11 +36,10 @@ export default function Hero() {
 }
 
 function Counter() {
+  const [clickCount, setClickCount] = React.useState(0)
   const renderCount = React.useRef(0)
   renderCount.current += 1
 
-  const onClick = React.useCallback(())
-
   return (
     <div style={{ contain: 'layout' }}>
       <div>Render count:{renderCount.current}</div>
@@ -53,8 +50,12 @@ function Counter() {
           backgroundColor: 'red',
         }}
       />
-      <div
+      <button
+        onClick={() => {
+          setClickCount((prev) => prev + 1)
+        }}
         style={{
+          cursor: 'pointer',
           backgroundColor: '#aaaaaa33',
           position: 'absolute',
           left: 26,
@@ -63,9 +64,8 @@ function Counter() {
           height: 45,
         }}
       >
-        click me
-        <br />
-      </div>
+        click me {clickCount}
+      </button>
     </div>
   )
 }