diff --git a/parts/2/phoneBook/src/App.jsx b/parts/2/phoneBook/src/App.jsx
index a61b6cf..858c1f6 100644
--- a/parts/2/phoneBook/src/App.jsx
+++ b/parts/2/phoneBook/src/App.jsx
@@ -1,6 +1,14 @@
 import { useState } from "react";
 import PersonList from "./components/PersonList";
 
+const SearchArea = ({ onChangeHandler }) => {
+  return (
+    <div>
+      search name: <input onChange={onChangeHandler} />
+    </div>
+  );
+};
+
 const App = () => {
   const [persons, setPersons] = useState([
     { name: "Arto Hellas", number: 123 },
@@ -40,9 +48,7 @@ const App = () => {
   return (
     <div>
       <h2>Phonebook</h2>
-      <div>
-        search name: <input onChange={handleSearchChange} />
-      </div>
+      <SearchArea onChangeHandler={handleSearchChange} />
       <h3>Add new</h3>
       <form onSubmit={handleOnSubmit}>
         <div>