diff --git a/react_test/tutorial/app/like-button.js b/react_test/tutorial/app/like-button.js
new file mode 100644
index 0000000..a770e42
--- /dev/null
+++ b/react_test/tutorial/app/like-button.js
@@ -0,0 +1,11 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function LikeButton() {
+    const [likes, setLikes] = useState(0);
+    function handleClick(){
+        setLikes(likes + 1);
+    }
+    return <button onClick={handleClick}>Likes ({likes})</button>
+}
\ No newline at end of file
diff --git a/react_test/tutorial/app/page.js b/react_test/tutorial/app/page.js
index 0370333..0d2935c 100644
--- a/react_test/tutorial/app/page.js
+++ b/react_test/tutorial/app/page.js
@@ -1,5 +1,4 @@
-
-import { useState } from 'react';
+import LikeButton from "./like-button";
 
 function Header({ title }) {
   return <h1>{title ? title : 'Default Title'}</h1>;
@@ -7,11 +6,8 @@ function Header({ title }) {
 export default function HomePage() {
   const names = ['Ada Lovlace', 'Grace Hopper', 'Margaret Hamilton'];
 
-  const [likes, setLikes] = React.useState(0);
+  
 
-  function handleClick() {
-    setLikes(likes + 1);
-  }
   return (
     <div>
       <Header title="Develop. Preview. Ship." />
@@ -20,7 +16,7 @@ export default function HomePage() {
           <li key={name}>{name}</li>
         ))}
       </ul>
-      <button onClick={handleClick}>Likes ({likes})</button>
+      <LikeButton />
     </div>
   );
 }