diff --git a/.idea/vcs.xml b/.idea/vcs.xml
index 94a25f7..82c3e67 100644
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -1,5 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="GithubSharedProjectSettings">
+    <option name="branchProtectionPatterns">
+      <list>
+        <option value="TODO-search" />
+      </list>
+    </option>
+  </component>
   <component name="VcsDirectoryMappings">
     <mapping directory="$PROJECT_DIR$" vcs="Git" />
   </component>
diff --git a/public/index.html b/public/index.html
index 88ccc14..9e89833 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,7 +11,7 @@
     />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&family=Source+Sans+Pro:wght@400;500;600&display=swap" rel="stylesheet">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/src/__mocks__/fake-todo-data.ts b/src/__mocks__/fake-todo-data.ts
new file mode 100644
index 0000000..e8df588
--- /dev/null
+++ b/src/__mocks__/fake-todo-data.ts
@@ -0,0 +1,8 @@
+import { DataInterface } from "../components/todo-wrapper/todo-wrapper.component";
+
+export const temporaryToDoData: DataInterface[] = [
+  { id: 1, title: "First To-Do" },
+  { id: 2, title: "Second To-Do" },
+  { id: 3, title: "Third To-Do" },
+  { id: 4, title: "Fourth To-Do" },
+];
\ No newline at end of file
diff --git a/src/assets/icons/close-icon.tsx b/src/assets/icons/close-icon.tsx
new file mode 100644
index 0000000..e1294ef
--- /dev/null
+++ b/src/assets/icons/close-icon.tsx
@@ -0,0 +1,18 @@
+import { FC } from "react";
+
+const CloseIcon: FC = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="#000000"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" />
+    </svg>
+  );
+};
+
+export default CloseIcon;
diff --git a/src/assets/icons/delete-icon.tsx b/src/assets/icons/delete-icon.tsx
new file mode 100644
index 0000000..ab962ea
--- /dev/null
+++ b/src/assets/icons/delete-icon.tsx
@@ -0,0 +1,23 @@
+import { FC } from "react";
+
+interface Props {
+  id?: string;
+}
+
+const DeleteIcon: FC<Props> = ({id}) => {
+  return (
+    <svg
+      id={id}
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="#000000"
+    >
+      <path id={id} d="M0 0h24v24H0z" fill="none" />
+      <path id={id} d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+    </svg>
+  );
+};
+
+export default DeleteIcon;
diff --git a/src/assets/icons/plus-icon.tsx b/src/assets/icons/plus-icon.tsx
new file mode 100644
index 0000000..77e106d
--- /dev/null
+++ b/src/assets/icons/plus-icon.tsx
@@ -0,0 +1,18 @@
+import { FC } from "react";
+
+const PlusIcon: FC = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="#000000"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 14h-3v3h-2v-3H8v-2h3v-3h2v3h3v2zm-3-7V3.5L18.5 9H13z" />
+    </svg>
+  );
+};
+
+export default PlusIcon;
diff --git a/src/assets/icons/search-icon.tsx b/src/assets/icons/search-icon.tsx
new file mode 100644
index 0000000..f046184
--- /dev/null
+++ b/src/assets/icons/search-icon.tsx
@@ -0,0 +1,18 @@
+import { FC } from "react";
+
+const SearchIcon: FC = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="36px"
+      fill="#000000"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M20 19.59V8l-6-6H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c.45 0 .85-.15 1.19-.4l-4.43-4.43c-.8.52-1.74.83-2.76.83-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3-3 1.34-3 3z" />
+    </svg>
+  );
+};
+
+export default SearchIcon;
\ No newline at end of file
diff --git a/src/components/App/App.module.scss b/src/components/App/App.module.scss
index bd8719c..550bb9e 100644
--- a/src/components/App/App.module.scss
+++ b/src/components/App/App.module.scss
@@ -1,6 +1,7 @@
 .App {
-width: 100%;
-  height: 100%;
+  position: relative;
+  width: 100%;
+  height: 100vh;
 }
 
 
diff --git a/src/components/interaction-area/interaction-area.component.tsx b/src/components/interaction-area/interaction-area.component.tsx
index b955d54..35d4ac5 100644
--- a/src/components/interaction-area/interaction-area.component.tsx
+++ b/src/components/interaction-area/interaction-area.component.tsx
@@ -1,21 +1,26 @@
-import React, {ChangeEvent, FC} from 'react'
-
+import React, {ChangeEvent, FC, KeyboardEvent} from "react";
+import styles from "./interaction-area.module.scss";
+import PlusIcon from "../../assets/icons/plus-icon";
 
 interface Props {
-    inputValue: string
-    handleInputCallBack: (event: ChangeEvent<HTMLInputElement>) => void
-    addButton: () => void;
-    addButtonText: string;
+  inputValue: string;
+  handleInputCallBack: (event: ChangeEvent<HTMLInputElement>) => void;
+  addButton: () => void;
+  addButtonText: string;
 }
-console.log('1')
-    const InteractionArea:FC<Props> = ({inputValue, handleInputCallBack, addButton, addButtonText}) => {
 
-    return(
-        <div>
-            <input value={inputValue} onChange={handleInputCallBack}/>
-            <button onClick={addButton}>{addButtonText}</button>
-        </div>
-    )
+const InteractionArea: FC<Props> = ({inputValue, handleInputCallBack, addButton}) => {
+  const handleTodoAddingOnKeyDown = (event: KeyboardEvent) => {
+    if (event.code === "Enter" || event.location === 3) {
+      addButton();
+    }
+  };
+  return (
+    <div className={styles.Container}>
+      <input onKeyPress={handleTodoAddingOnKeyDown} value={inputValue} onChange={handleInputCallBack}/>
+      <button onClick={addButton}><PlusIcon/></button>
+    </div>
+  )
 }
 
 export default InteractionArea
\ No newline at end of file
diff --git a/src/components/interaction-area/interaction-area.module.scss b/src/components/interaction-area/interaction-area.module.scss
new file mode 100644
index 0000000..ec20eff
--- /dev/null
+++ b/src/components/interaction-area/interaction-area.module.scss
@@ -0,0 +1,44 @@
+.Container {
+  display: flex;
+  justify-content: center;
+  width: 40%;
+  margin: 0 auto;
+  height: fit-content;
+
+  input {
+    box-sizing: border-box;
+    width: 100%;
+    margin-right: 2rem;
+    padding: 10px;
+    height: 48px;
+    outline: none;
+    border-radius: 12px;
+    border: 2px solid #222;
+    background-color: white;
+    font-size: 18px;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-weight: 500;
+  }
+
+  button {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    background-color: white;
+    color: #222222;
+    box-sizing: border-box;
+    font-size: 20px;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-weight: 500;
+    border: 2px solid #222222;
+    border-radius: 10px;
+
+    svg {
+      fill: #444444;
+    }
+
+    &:active {
+      border-top: 4px solid #222222;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/todo-list/todo-list.component.tsx b/src/components/todo-list/todo-list.component.tsx
index 3cd80b9..b096d45 100644
--- a/src/components/todo-list/todo-list.component.tsx
+++ b/src/components/todo-list/todo-list.component.tsx
@@ -1,36 +1,45 @@
-import React, {FC, MouseEvent} from 'react'
-import styles from './todo-list.module.scss'
-import {DataInterface} from "../todo-wrapper/todo-wrapper.component";
-
+import React, { FC, MouseEvent } from "react";
+import styles from "./todo-list.module.scss";
+import { DataInterface } from "../todo-wrapper/todo-wrapper.component";
+import DeleteIcon from "../../assets/icons/delete-icon";
 
 interface Props {
-    title: string;
-    data: DataInterface[]
-    cleanButtonTitle: string;
-    cleanButtonCallback: () => void
-    deleteListElementCallBack: (event: MouseEvent<HTMLButtonElement>) => void
+  title: string;
+  data: DataInterface[];
+  cleanButtonTitle: string;
+  cleanButtonCallback: () => void;
+  deleteListElementCallBack: (event: MouseEvent<HTMLDivElement>) => void;
 }
 
-const TodoList: FC<Props> = ({title, data, cleanButtonCallback, cleanButtonTitle, deleteListElementCallBack}) => {
-    return(
-        <div className={styles.todoList}>
-            <div className={styles.header}>
-                <span>{title}</span>
-            </div>
-
-            <div className={styles.box}>
-                {data.map(({id, title}) => {
-                    return <div key={id} className={styles.listElement}>{title}
-                    <button id={`${id}`} onClick={deleteListElementCallBack} >DELETE</button>
-                    </div>
-                })}
+const TodoList: FC<Props> = ({
+  title,
+  data,
+  cleanButtonCallback,
+  cleanButtonTitle,
+  deleteListElementCallBack,
+}) => {
+  return (
+    <div className={styles.todoList}>
+      <div className={styles.header}>
+        <span>{title}</span>
+      </div>
+      <div className={styles.cleanButtonArea}>
+        <button onClick={cleanButtonCallback}>{cleanButtonTitle} <DeleteIcon /></button>
+      </div>
+      <div className={styles.box}>
+        {data.map(({ id, title }) => {
+          return (
+            <div key={id} className={styles.listElement}>
+              {title}
+              <div className={styles.deleteItem} id={`${id}`} onClick={deleteListElementCallBack}>
+                <DeleteIcon id={`${id}`} />
+              </div>
             </div>
-            <div className={styles.cleanButtonArea}>
-                <button onClick={cleanButtonCallback}>{cleanButtonTitle}</button>
-            </div>
-        </div>
-    )
-}
-
+          );
+        })}
+      </div>
+    </div>
+  );
+};
 
-export default TodoList
\ No newline at end of file
+export default TodoList;
diff --git a/src/components/todo-list/todo-list.module.scss b/src/components/todo-list/todo-list.module.scss
index d28c27e..0426bf5 100644
--- a/src/components/todo-list/todo-list.module.scss
+++ b/src/components/todo-list/todo-list.module.scss
@@ -1,5 +1,116 @@
 .todoList{
-  width: 40%;
-  height: 100vh;
-  background: beige;
+  margin: 50px auto;
+  max-width: 40%;
+  min-width: 40%;
+  background: transparent;
+  box-sizing: border-box;
+
+  .header {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: fit-content;
+    margin: 10px 0;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-size: 48px;
+    color: white;
+  }
+
+  .cleanButtonArea {
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 1rem;
+    margin: 25px auto;
+
+    button {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      background-color: white;
+      color: #222222;
+      box-sizing: border-box;
+      font-size: 20px;
+      font-family: 'Source Sans Pro', sans-serif;
+      font-weight: 500;
+      border: 1px solid #222222;
+      border-radius: 10px;
+
+      &:hover {
+        background-color: #2700ee;
+        color: white;
+
+        svg {
+          fill: white;
+        }
+      }
+
+      svg {
+        fill: #444444;
+      }
+    }
+  }
+
+  .box {
+    position: relative;
+    background: inherit;
+    height: 50vh;
+    padding: 30px;
+    z-index: 1;
+
+    &:before {
+      content: "";
+      position: absolute;
+      background: inherit;
+      border-radius: 40px;
+      z-index: -1;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      box-shadow: inset 0 0 4000px whitesmoke;
+      filter: blur(2px);
+    }
+  }
+  .listElement {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 32px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 1rem;
+    border-radius: 12px;
+    background-color: white;
+    color: #222222;
+    word-break: break-word;
+    font-size: 18px;
+    text-align: left;
+
+    +.listElement {
+      margin-top: 10px;
+    }
+
+    .deleteItem {
+      box-sizing: border-box;
+      background-color: #444444;
+      border-radius: 10px;
+      height: 24px;
+      width: 24px;
+
+      &:hover {
+        background-color: darkred;
+
+        svg {
+          fill: white;
+        }
+      }
+
+      svg {
+        height: 24px;
+        width: 24px;
+        fill: white;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/todo-wrapper/todo-wrapper.component.tsx b/src/components/todo-wrapper/todo-wrapper.component.tsx
index 299c0a2..b733950 100644
--- a/src/components/todo-wrapper/todo-wrapper.component.tsx
+++ b/src/components/todo-wrapper/todo-wrapper.component.tsx
@@ -1,52 +1,116 @@
-import React, {ChangeEvent, MouseEvent, useCallback, useState} from 'react';
-import styles from './todo-wrapper.module.scss'
+import React, { ChangeEvent, MouseEvent, useCallback, useState } from "react";
+import styles from "./todo-wrapper.module.scss";
 import TodoList from "../todo-list/todo-list.component";
 import InteractionArea from "../interaction-area/interaction-area.component";
+import { temporaryToDoData } from "../../__mocks__/fake-todo-data";
+import SearchIcon from "../../assets/icons/search-icon";
+import Search from "../../shared/components/search-bar/search-bar.component";
+import CloseIcon from "../../assets/icons/close-icon";
 
-
-export interface DataInterface{
-    id: number;
-    title: string;
+export interface DataInterface {
+  id: number;
+  title: string;
 }
 
-const TODO_LIST_TITLE = 'GRISHA LIST!!!'
-const TODO_LIST_CLEAN_BUTTON_AREA_TITLE = "ПОМОЙ МЕНЯ!"
-const INTERACTION_AREA_ADD_BUTTON_TEXT = 'Добавить'
+const TODO_LIST_TITLE = `There's your To-Do list:`;
+const TODO_LIST_CLEAN_BUTTON_AREA_TITLE = "Delete all";
+const INTERACTION_AREA_ADD_BUTTON_TEXT = "Add";
+const RESULT_BOX_WAITING_TEXT = "Nothing was found...";
 
 const TodoWrapper = () => {
-    const [todoList, setTodoList] = useState<DataInterface[]>([])
-    const [value, setValue] = useState<string>('');
-
-    const handleInputValue = useCallback(({target}: ChangeEvent<HTMLInputElement>) => {
-            setValue(target.value);
-        }
-        , [])
+  const [searchBarActive, setSearchBarActive] = useState<boolean>(false);
+  const [searchValue, setSearchValue] = useState("");
+  const [searchResults, setSearchResults] = useState<DataInterface[]>([]);
+  const [todoList, setTodoList] = useState<DataInterface[]>(temporaryToDoData);
+  const [value, setValue] = useState<string>("");
 
+  const handleSearchInputValue = useCallback(
+    ({ target }: ChangeEvent<HTMLInputElement>) => {
+      setSearchValue(target.value);
+      setSearchResults(
+        todoList.filter(({ title }) =>
+          title.toLowerCase().includes(searchValue.toLowerCase())
+        )
+      );
+    },
+    [todoList, searchValue]
+  );
 
-    const handleAddTodoValueInList = useCallback(() => {
-        if(value.length > 0 ){
-            setTodoList(prev => prev.concat([{id: Math.random(), title: value}]))
-            setValue('')
-        }
+  const handleToggleSearchBoxView = () => {
+    setSearchBarActive((prevState) => !prevState);
+  };
 
-    }, [value])
+  const handleInputValue = useCallback(
+    ({ target }: ChangeEvent<HTMLInputElement>) => {
+      setValue(target.value);
+    },
+    []
+  );
 
-    const cleanAllList = useCallback(() => {
-            setTodoList([])
-    }, [])
+  const handleAddTodoValueInList = useCallback(() => {
+    if (value.length > 0) {
+      setTodoList((prev) => prev.concat([{ id: Math.random(), title: value }]));
+      setValue("");
+    }
+  }, [value]);
 
-    const deleteListElement = useCallback((event: MouseEvent<HTMLButtonElement>) => {
+  const cleanAllList = useCallback(() => {
+    setTodoList([]);
+  }, []);
 
-        setTodoList(todoList.filter(({id}) => id !== +(event.target as HTMLButtonElement).id))
-    }, [todoList])
+  const deleteListElement = useCallback(
+    (event: MouseEvent<HTMLDivElement>) => {
+      setTodoList(
+        todoList.filter(
+          ({ id }) => id !== +(event.target as HTMLButtonElement).id
+        )
+      );
+    },
+    [todoList]
+  );
 
-    return(
-        <div className={styles.todoWrapper}>
-            <TodoList title={TODO_LIST_TITLE} data={todoList} cleanButtonTitle={TODO_LIST_CLEAN_BUTTON_AREA_TITLE} cleanButtonCallback={cleanAllList} deleteListElementCallBack={deleteListElement}/>
-            <InteractionArea inputValue={value} handleInputCallBack={handleInputValue} addButton={handleAddTodoValueInList} addButtonText={INTERACTION_AREA_ADD_BUTTON_TEXT}/>
-        </div>
-    )
-
-}
+  return (
+    <div className={styles.todoWrapper}>
+      {!searchBarActive && (
+        <button
+          onClick={handleToggleSearchBoxView}
+          className={`${styles.openSearchBar}`}
+        >
+          <SearchIcon />
+        </button>
+      )}
+      {searchBarActive && (
+        <Search
+          searchContainerClassName={`${styles.searchContainer}`}
+          buttonClassName={styles.searchContainerButton}
+          buttonChildren={<CloseIcon />}
+          buttonOnClick={handleToggleSearchBoxView}
+          searchBoxClassName={`${styles.searchBox}`}
+          searchBoxProps={{
+            value: searchValue,
+            onChange: handleSearchInputValue,
+          }}
+          resultBoxClassName={`${styles.resultBox}`}
+          resultData={searchResults}
+          resultItemClassName={`${styles.resultItem}`}
+          resultBoxWaitingText={RESULT_BOX_WAITING_TEXT}
+        />
+      )}
+      <InteractionArea
+        inputValue={value}
+        handleInputCallBack={handleInputValue}
+        addButton={handleAddTodoValueInList}
+        addButtonText={INTERACTION_AREA_ADD_BUTTON_TEXT}
+      />
+      <TodoList
+        title={TODO_LIST_TITLE}
+        data={todoList}
+        cleanButtonTitle={TODO_LIST_CLEAN_BUTTON_AREA_TITLE}
+        cleanButtonCallback={cleanAllList}
+        deleteListElementCallBack={deleteListElement}
+      />
+    </div>
+  );
+};
 
-export default TodoWrapper
\ No newline at end of file
+export default TodoWrapper;
diff --git a/src/components/todo-wrapper/todo-wrapper.module.scss b/src/components/todo-wrapper/todo-wrapper.module.scss
index 06f4c02..c29d301 100644
--- a/src/components/todo-wrapper/todo-wrapper.module.scss
+++ b/src/components/todo-wrapper/todo-wrapper.module.scss
@@ -1,5 +1,119 @@
 .todoWrapper{
+  position: relative;
   width: 100%;
+  min-height: 100%;
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient(135deg, rgba(43,0,101,1) 30%, rgba(76,174,250,1) 100%);
+  padding: 50px;
+  box-sizing: border-box;
 
+  .openSearchBar {
+    box-sizing: border-box;
+    outline: none;
+    position: absolute;
+    width: 48px;
+    height: 48px;
+    top: 50px;
+    left: 50px;
+    border-radius: 25px;
+    border: 2px solid #444;
+    background-color: white;
+
+    svg {
+      height: 32px;
+      width: 32px;
+      fill: #444;
+    }
+  }
+
+  .searchContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 16%;
+    padding: 50px;
+    z-index: 1;
+
+    &:before {
+      content: "";
+      position: absolute;
+      background: inherit;
+      z-index: -1;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      box-shadow: inset 0 0 4000px whitesmoke;
+      filter: blur(4px);
+    }
+
+    .searchContainerButton {
+      outline: none;
+      width: 48px;
+      height: 48px;
+      border-radius: 24px;
+      border: 2px solid #444;
+      margin-bottom: 20px;
+
+      svg {
+        fill: #444444;
+      }
+    }
+
+    .searchBox {
+      width: 100%;
+      height: fit-content;
+      margin: 10px 0;
+
+      input {
+        outline: none;
+        box-sizing: border-box;
+        padding: 8px;
+        height: 36px;
+        width: 100%;
+        font-size: 18px;
+        line-height: 20px;
+        border-radius: 16px;
+        border: 2px solid #2700ee;
+      }
+
+    }
+
+    .resultBox {
+      display: flex;
+      flex-direction: column;
+      background-color: white;
+      box-sizing: border-box;
+      min-height: 60px;
+      width: 100%;
+      border-radius: 16px;
+      padding: 10px;
+      overflow-y: auto;
+
+      .resultItem {
+        box-sizing: border-box;
+        word-break: break-word;
+        min-width: 100%;
+        background-color: lightgray;
+        text-align: left;
+        padding: 5px;
+        font-size: 18px;
+        font-family: 'Source Sans Pro', sans-serif;
+        font-weight: 500;
+        line-height: 18px;
+        color: #444;
+        border-radius: 14px;
+
+        +.resultItem {
+          margin-top: 5px;
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/shared/components/search-bar/search-bar.component.tsx b/src/shared/components/search-bar/search-bar.component.tsx
new file mode 100644
index 0000000..73e700e
--- /dev/null
+++ b/src/shared/components/search-bar/search-bar.component.tsx
@@ -0,0 +1,58 @@
+import React, { ChangeEvent, FC } from "react";
+import { DataInterface } from "../../../components/todo-wrapper/todo-wrapper.component";
+
+export interface SearchInputProps {
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export interface SearchProps {
+  searchContainerClassName: string;
+  buttonClassName: string;
+  buttonChildren: React.ReactNode;
+  buttonOnClick: () => void;
+  searchBoxClassName: string;
+  searchBoxProps: SearchInputProps;
+  resultBoxClassName: string;
+  resultData: DataInterface[];
+  resultItemClassName: string;
+  resultBoxWaitingText: string;
+}
+
+const Search: FC<SearchProps> = ({
+  searchContainerClassName,
+  buttonClassName,
+  buttonChildren,
+  buttonOnClick,
+  searchBoxClassName,
+  searchBoxProps: { value, onChange},
+  resultBoxClassName,
+  resultData,
+  resultItemClassName,
+  resultBoxWaitingText,
+}) => {
+  debugger;
+  return (
+    <div className={searchContainerClassName}>
+      <button onClick={buttonOnClick} className={buttonClassName}>
+        {buttonChildren}
+      </button>
+      <div className={searchBoxClassName}>
+        <input type="text" value={value} onChange={onChange} />
+      </div>
+      <div className={resultBoxClassName}>
+        {resultData.length === 0 && (
+          <span className={resultItemClassName}>{resultBoxWaitingText}</span>
+        )}
+        {resultData.length > 0 &&
+          resultData.map(({ id, title }) => (
+            <span key={id} className={resultItemClassName}>
+              {title}
+            </span>
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default Search;
\ No newline at end of file