diff --git a/README.md b/README.md
index 722d7d2..f6e106e 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,9 @@
-**Contact Management App**
+# Contact Management App
 
 This React application serves as a straightforward contact management system,
 offering essential features for adding, searching, and deleting contacts.
 
-**Features**
+## Features
 
 1. **Add Contacts:** Use the provided form to easily add new contacts, including
    names and phone numbers.
@@ -14,7 +14,7 @@ offering essential features for adding, searching, and deleting contacts.
 3. **Contact Deletion:** Conveniently delete contacts that are no longer needed,
    enhancing the user's control over their contact list.
 
-**Usage**
+## Usage
 
 - **Adding New Contacts:**
 
@@ -36,7 +36,7 @@ offering essential features for adding, searching, and deleting contacts.
   - Look for a delete or remove option associated with each contact.
   - Click on the delete option to remove unwanted contacts from your list.
 
-**Project Structure**
+## Project Structure
 
 The project structure follows a modular approach with the following components:
 
diff --git a/package-lock.json b/package-lock.json
index e021151..24f3d5f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,14 +9,17 @@
       "version": "0.1.0",
       "dependencies": {
         "@testing-library/jest-dom": "^5.16.3",
-        "@testing-library/react": "^12.1.4",
         "@testing-library/user-event": "^13.5.0",
         "bootstrap": "^5.3.2",
-        "react": "^18.1.0",
+        "nanoid": "^5.0.4",
+        "react": "^18.2.0",
         "react-bootstrap": "^2.10.0",
-        "react-dom": "^18.1.0",
+        "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.3"
+      },
+      "devDependencies": {
+        "@testing-library/react": "^14.1.2"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -3945,7 +3948,6 @@
       "version": "9.3.4",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
       "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -3994,38 +3996,21 @@
       }
     },
     "node_modules/@testing-library/react": {
-      "version": "12.1.5",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.1.5.tgz",
-      "integrity": "sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==",
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.1.2.tgz",
+      "integrity": "sha512-z4p7DVBTPjKM5qDZ0t5ZjzkpSNb+fZy1u6bzO7kk8oeGagpPCAtgh4cx1syrfp7a+QWkM021jGqjJaxJJnXAZg==",
+      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@testing-library/dom": "^8.0.0",
-        "@types/react-dom": "<18.0.0"
+        "@testing-library/dom": "^9.0.0",
+        "@types/react-dom": "^18.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=14"
       },
       "peerDependencies": {
-        "react": "<18.0.0",
-        "react-dom": "<18.0.0"
-      }
-    },
-    "node_modules/@testing-library/react/node_modules/@testing-library/dom": {
-      "version": "8.20.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz",
-      "integrity": "sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==",
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.1.3",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=12"
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
       }
     },
     "node_modules/@testing-library/user-event": {
@@ -4337,11 +4322,12 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "17.0.25",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.25.tgz",
-      "integrity": "sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA==",
+      "version": "18.2.18",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz",
+      "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==",
+      "dev": true,
       "dependencies": {
-        "@types/react": "^17"
+        "@types/react": "*"
       }
     },
     "node_modules/@types/react-transition-group": {
@@ -12341,9 +12327,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.4.tgz",
+      "integrity": "sha512-vAjmBf13gsmhXSgBrtIclinISzFFy22WwCYoyilZlsrRXNIHSwgFQ1bEdjRwMT3aoadeIF6HMuDRlOxzfXV8ig==",
       "funding": [
         {
           "type": "github",
@@ -12351,10 +12337,10 @@
         }
       ],
       "bin": {
-        "nanoid": "bin/nanoid.cjs"
+        "nanoid": "bin/nanoid.js"
       },
       "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+        "node": "^18 || >=20"
       }
     },
     "node_modules/natural-compare": {
@@ -14217,6 +14203,23 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/postcss/node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -16688,16 +16691,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {
diff --git a/package.json b/package.json
index 8bececc..02db79b 100644
--- a/package.json
+++ b/package.json
@@ -5,12 +5,12 @@
   "homepage": "https://goitacademy.github.io/react-homework-template/",
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.3.2",
-    "react": "^18.1.0",
+    "nanoid": "^5.0.4",
+    "react": "^18.2.0",
     "react-bootstrap": "^2.10.0",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.3"
   },
@@ -38,5 +38,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.1.2"
   }
 }
diff --git a/public/index.html b/public/index.html
index 1043c6e..21bdac7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Contact Management App</title>
+    <title>Phonebook</title>
 
     <!-- Start Single Page Apps for GitHub Pages -->
     <script type="text/javascript">
diff --git a/src/components/App.jsx b/src/components/App.jsx
index 1eb3a80..469eb73 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,19 +1,68 @@
 import { Component } from 'react';
+import { ContactForm } from './ContactForm';
+import { ContactList } from './ContactList';
+import { Filter } from './Filter';
 
 export default class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      contacts: [],
+      filter: '',
+    };
+
+    this.addContact = this.addContact.bind(this);
+    this.handleFilterChange = this.handleFilterChange.bind(this);
+    this.handleDeleteContact = this.handleDeleteContact.bind(this);
+  }
+
+  addContact = newContact => {
+    this.setState(prevState => ({
+      contacts: [...prevState.contacts, newContact],
+    }));
+  };
+
+  handleFilterChange = e => {
+    this.setState({ filter: e.target.value.toLowerCase() });
+  };
+
+  handleDeleteContact = contactId => {
+    this.setState(prevState => ({
+      contacts: prevState.contacts.filter(contact => contact.id !== contactId),
+    }));
+  };
+
   render() {
+    const { contacts, filter } = this.state;
+
+    const filteredContacts = contacts.filter(contact =>
+      contact.name.toLowerCase().includes(filter)
+    );
+
     return (
       <div
         style={{
           height: '100vh',
           display: 'flex',
+          flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',
           fontSize: 40,
           color: '#010101',
         }}
       >
-        Contact Management App
+        Phonebook
+        <ContactForm
+          addContact={this.addContact}
+          contacts={this.state.contacts}
+        />
+        Contacts
+        <Filter value={filter} onChange={this.handleFilterChange} />
+        <ContactList
+          contacts={filteredContacts}
+          onDeleteContact={this.handleDeleteContact}
+        />
       </div>
     );
   }
diff --git a/src/components/ContactForm.jsx b/src/components/ContactForm.jsx
new file mode 100644
index 0000000..30ffb83
--- /dev/null
+++ b/src/components/ContactForm.jsx
@@ -0,0 +1,76 @@
+import { Component } from 'react';
+import { nanoid } from 'nanoid';
+
+export class ContactForm extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      name: '',
+      number: '',
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+  }
+
+  handleChange = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+
+  handleFormSubmit = e => {
+    e.preventDefault();
+
+    const { name, number } = this.state;
+    const { contacts, addContact } = this.props;
+
+    if (contacts.some(contact => contact.name === name)) {
+      alert(`Contact with name "${name}" already exists!`);
+      return;
+    }
+
+    const newContact = {
+      id: nanoid(),
+      name,
+      number,
+    };
+
+    addContact(newContact);
+
+    this.setState({ name: '', number: '' });
+  };
+
+  render() {
+    const { name, number } = this.state;
+
+    return (
+      <form onSubmit={this.handleFormSubmit}>
+        <label>
+          Name:
+          <input
+            type="text"
+            name="name"
+            value={name}
+            onChange={this.handleChange}
+            pattern="^[a-zA-Zа-яА-Я]+(([' -][a-zA-Zа-яА-Я ])?[a-zA-Zа-яА-Я]*)*$"
+            title="Name may contain only letters, apostrophe, dash and spaces. For example Adrian, Jacob Mercer, Charles de Batz de Castelmore d'Artagnan"
+            required
+          />
+        </label>
+        <label>
+          Phone Number:
+          <input
+            type="tel"
+            name="number"
+            value={number}
+            onChange={this.handleChange}
+            pattern="\+?\d{1,4}?[-.\s]?\(?\d{1,3}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9}"
+            title="Phone number must be digits and can contain spaces, dashes, parentheses and can start with +"
+            required
+          />
+        </label>
+        <button type="submit">Add Contact</button>
+      </form>
+    );
+  }
+}
diff --git a/src/components/ContactList.jsx b/src/components/ContactList.jsx
new file mode 100644
index 0000000..daac8e5
--- /dev/null
+++ b/src/components/ContactList.jsx
@@ -0,0 +1,26 @@
+export const ContactList = ({ contacts, onDeleteContact }) => {
+  return (
+    <ul>
+      {contacts.map(contact => (
+        <Item
+          key={contact.id}
+          contact={contact}
+          onDeleteContact={onDeleteContact}
+        />
+      ))}
+    </ul>
+  );
+};
+
+const Item = ({ contact, onDeleteContact }) => {
+  return (
+    <li>
+      <span>{contact.name}: </span> <span>{contact.number}</span>
+      <button type="button" onClick={() => onDeleteContact(contact.id)}>
+        Delete
+      </button>
+    </li>
+  );
+};
+
+ContactList.Item = Item;
diff --git a/src/components/Filter.jsx b/src/components/Filter.jsx
new file mode 100644
index 0000000..d4c367d
--- /dev/null
+++ b/src/components/Filter.jsx
@@ -0,0 +1,15 @@
+export const Filter = ({ value, onChange }) => {
+  return (
+    <div>
+      <label>
+        Filter by Name:
+        <input
+          type="text"
+          value={value}
+          onChange={onChange}
+          placeholder="Enter name to filter"
+        />
+      </label>
+    </div>
+  );
+};