diff --git a/react-foundations/app/like-button.js b/react-foundations/app/like-button.js
new file mode 100644
index 0000000..d8b388d
--- /dev/null
+++ b/react-foundations/app/like-button.js
@@ -0,0 +1,13 @@
+'use client';
+ 
+import { useState } from 'react';
+ 
+export default function LikeButton() {
+  const [likes, setLikes] = useState(0);
+ 
+  function handleClick() {
+    setLikes(likes + 1);
+  }
+ 
+  return <button onClick={handleClick}>Like ({likes})</button>;
+}
\ No newline at end of file
diff --git a/react-foundations/app/page.js b/react-foundations/app/page.js
index ead9686..d673573 100644
--- a/react-foundations/app/page.js
+++ b/react-foundations/app/page.js
@@ -1,18 +1,12 @@
-import { useState } from 'react';
-
+import LikeButton from './like-button';
+ 
 function Header({ title }) {
-  return <h1>{title ? title : "Default title"}</h1>
+  return <h1>{title ? title : 'Default title'}</h1>;
 }
-
+ 
 export default function HomePage() {
-  const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"]
-
-  const [likes, setLikes] = React.useState(0)
-
-  function handleClick() {
-    setLikes(likes + 1)
-  }
-
+  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
+ 
   return (
     <div>
       <Header title="Develop. Preview. Ship." />
@@ -21,8 +15,7 @@ export default function HomePage() {
           <li key={name}>{name}</li>
         ))}
       </ul>
-
-      <button onClick={handleClick}>Like ({likes})</button>
+      <LikeButton />
     </div>
-  )
+  );
 }
\ No newline at end of file