diff --git a/src/components/App.jsx b/src/components/App.jsx
index ce3f3bf..0243ef8 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,16 +1,20 @@
+import ContactForm from './ContactForm/ContactForm';
+import ContactList from './ContactList/ContactList';
+import Filter from './Filter/Filter';
+
+import { Card, Descr } from './ContactForm/ContactForm.styled';
+
 export const App = () => {
   return (
-    <div
-      style={{
-        height: '100vh',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        fontSize: 40,
-        color: '#010101'
-      }}
-    >
-      React homework template
-    </div>
+    <Card>
+      <h1>Phonebook</h1>
+      <ContactForm />
+      <h2>Contacts</h2>
+      <Descr>Find contacts by name</Descr>
+      <Filter />
+      <ContactList />
+    </Card>
   );
 };
+
+export default App;
\ No newline at end of file
diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx
new file mode 100644
index 0000000..4da39c7
--- /dev/null
+++ b/src/components/Filter/Filter.jsx
@@ -0,0 +1,23 @@
+import { useDispatch } from 'react-redux';
+import { updateFilterValue } from 'Redux/filterSlice';
+
+import { Input } from '../ContactList/ContactList.styled';
+
+const Filter = () => {
+  const dispatch = useDispatch();
+
+  const handleChange = ({ target: { value } }) => {
+    dispatch(updateFilterValue(value));
+  };
+
+  return (
+    <Input
+      type="text"
+      name="filter"
+      placeholder="Search contacts"
+      onChange={handleChange}
+    />
+  );
+};
+
+export default Filter;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 1aac5f6..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,15 +0,0 @@
-@import-normalize; /* bring in normalize.css styles */
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/src/index.js b/src/index.js
index 2bde91e..31ae9f3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from 'components/App';
-import './index.css';
+import { Global } from '@emotion/react';
+import { Provider } from 'react-redux';
+import { store } from './Redux/store';
+import { GlobalStyles } from '../src/Styles/GlobalStyles';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <Global styles={GlobalStyles} />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>
-);
+);
\ No newline at end of file