diff --git a/src/App.css b/src/App.css
index fedc064..a670741 100644
--- a/src/App.css
+++ b/src/App.css
@@ -25,7 +25,7 @@ h1 {
 }
 
 .todowrapper {
-   background-color: white;
+  background-color: white;
   margin-top: 5rem;
   padding: 2rem;
   border-radius: 5px;
@@ -74,4 +74,74 @@ h1 {
 
 .todo.checked{
   background-color: rgb(14, 168, 14);
-}
\ No newline at end of file
+}
+.Filter-Component{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+}
+.searchInput {
+  margin-top: 105px;
+  display: flex;
+ 
+  
+}
+.searchInput input{
+  background-color: white;
+  border: 0.5px solid black;
+  border-radius: 2px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  font-size: 14px;
+  padding: 15px;
+  height: 30px;
+  width: 150px;
+}
+.sort{
+  margin-top: 105px;
+  display: flex;
+ margin-left: 10px;
+}
+.status{
+  margin-top: 105px;
+  display: flex;
+  margin-left: 10px;
+ 
+}
+
+.searchInput input {
+  background-color: white;
+  border: 0;
+  border-radius: 2px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  font-size: 14px;
+  padding: 15px;
+  height: 30px;
+  width: 150px;
+}
+
+.searchIcon {
+  height: 30px;
+  width: 30px;
+  background-color: white;
+  display: grid;
+  place-items: center;
+}
+.searchResults{
+  margin-top: 5px;
+  width: 300px;
+  height: 50px;
+  background-color: white;
+  overflow-y: scroll;
+  overflow-block: hidden;
+  font-size: small;
+  text-align: left;
+}
+.sortIcon{
+  
+  margin-left: 5px;
+ 
+}
+
diff --git a/src/App.js b/src/App.js
index 374f4e4..72b8779 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,12 @@
 import './App.css';
 import TodoWrapper from './TodoComponent/TodoWrapper';
+// import SearchBar from './TodoComponent/searchBar';
+// import TodoData from './data/data.json'
 
 function App() {
   return (
     <div className="App">
- 
+      {/* <SearchBar placeholder="Enter a Todo..." data={TodoData}></SearchBar> */}
       <TodoWrapper/>
     </div>
   );
diff --git a/src/TodoComponent/Todo.js b/src/TodoComponent/Todo.js
deleted file mode 100644
index de0a974..0000000
--- a/src/TodoComponent/Todo.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { useState } from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTrash } from '@fortawesome/free-solid-svg-icons'
-//import { faCheckSquare } from '@fortawesome/free-solid-svg-icons'
-
-const Todo = ({task,HandleDelete}) => {
-   
-    const[ischecked,SetisChecked]=useState(false)
-    function ChangeColor(){
-        SetisChecked(!ischecked)
-    }
-    
-    return ( 
-        <form className={`todo ${ischecked ? 'checked' : ''}`}>
-            <input type="checkbox" id={task.id} onClick={ChangeColor}/>
-            <p>{task.task}</p>
-            <div>
-            <FontAwesomeIcon icon={faTrash} onClick={()=>{
-                HandleDelete(task.id)
-            }}/>
-           
-            </div>
-        </form>
-     );
-}
- 
-export default Todo;
\ No newline at end of file
diff --git a/src/TodoComponent/Todo.jsx b/src/TodoComponent/Todo.jsx
new file mode 100644
index 0000000..624d35a
--- /dev/null
+++ b/src/TodoComponent/Todo.jsx
@@ -0,0 +1,30 @@
+// import React, { useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTrash } from '@fortawesome/free-solid-svg-icons'
+
+//import { faCheckSquare } from '@fortawesome/free-solid-svg-icons'
+
+const Todo = ({ task, HandleDelete, toggle }) => {
+
+    // const[ischecked,SetisChecked]=useState(false)
+    // function ChangeColor(){
+    //     SetisChecked(!ischecked)
+    // }
+
+    console.log('task>>>', task);
+    return (
+        <div className={`todo ${task.completed ? 'checked' : ''}`}>
+
+            <input type="checkbox" id={task.id} onClick={()=> {toggle(task.id)}} />
+            <p>{task.task}  </p>
+            <div>
+                <FontAwesomeIcon icon={faTrash} onClick={()=>{
+                    HandleDelete(task.id)
+                 } } />
+
+            </div>
+        </div>
+    );
+}
+
+export default Todo
\ No newline at end of file
diff --git a/src/TodoComponent/TodoForm.js b/src/TodoComponent/TodoForm.js
index 854503a..f8a16a9 100644
--- a/src/TodoComponent/TodoForm.js
+++ b/src/TodoComponent/TodoForm.js
@@ -1,3 +1,4 @@
+
 import {  useState } from "react";
 
 const TodoForm = ({addTodo}) => {
@@ -8,18 +9,28 @@ const TodoForm = ({addTodo}) => {
         if(value){
             addTodo(value)
             setValue("")
+           
         }
      
        
     }
     return ( 
         <form  onSubmit={handleSubmit} className="TodoForm">
+       
             <input type="text" className="todo-input" value={value} placeholder="What is the task?" onChange={
                 (e)=>{
                    setValue(e.target.value)
                 }
             }/>
             <button type="submit" className="todo-btn" >Add Task</button>
+            
+          
+           
+
+        
+           
+            
+            
 
         </form >
      );
diff --git a/src/TodoComponent/TodoWrapper.js b/src/TodoComponent/TodoWrapper.js
index 3d2125e..800c4ae 100644
--- a/src/TodoComponent/TodoWrapper.js
+++ b/src/TodoComponent/TodoWrapper.js
@@ -1,35 +1,172 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import TodoForm from "./TodoForm";
 import { v4 as uuidv4 } from "uuid";
 import Todo from "./Todo";
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSortAlphaAsc } from "@fortawesome/free-solid-svg-icons";
 
 
 
 const TodoWrapper = () => {
+
+
+    const [todoList, setTodoList] = useState([
+        {
+            id: 1,
+            "task": "naaz",
+            completed: false
+        },
+        {
+            id: 2,
+            "task": "neha",
+            completed: false
+        },
+        {
+            id: 3,
+            "task": "pneha",
+            completed: false
+        },
+        {
+            id: 4,
+            "task": "pnaaz",
+            completed: false
+        }
+    ])
+    const [filterData, setfilterData] = useState([])
+
+    const[searchinput,setsearch]=useState("")
+    const[searchResults,setsearchResults]=useState([])
+    const [statusFilter, setStatusFilter] = useState("all");
+
+
+
+
+
+    const addTodo = useCallback((todo) => {
+        setTodoList([...todoList, { id: uuidv4(), task: todo, completed: false }])
+    }, [todoList])
+
+    const handleSort = useCallback(() => {
    
+        const sortedData =  filterData.length && [...filterData].sort((a, b) => 
+           (a.task < b.task ? -1 : a.task > b.task ? 1 : 0) 
+        )
+        // setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+        setfilterData(sortedData)
 
-    const [todoList, setTodoList] = useState([])
+    }, [filterData])
+    console.log(filterData)
+  
+    //console.log('sortorder>>>>>>',sortData)
 
-    function addTodo(todo) {
-        setTodoList([...todoList,{ id: uuidv4(), task: todo, completed: false}])
-       
-    }
-    function HandleDelete(id){
-       let updatedTasks=todoList.filter(todo=>todo.id!==id)
+    const HandleDelete = useCallback((id) => {
+        let updatedTasks = [...todoList].filter(todo => todo.id !== id)
         setTodoList(updatedTasks)
-    }
+        let filteredTasks=[...filterData].filter(todo => todo.id !== id)
+        setfilterData(filteredTasks)
+
+    }, [todoList,filterData])
+    const handleSearch = useCallback((e) => {
+        const searchinput = e.target.value
+        setsearch(searchinput)
+        const search = todoList.filter((el) => {
+            return el.task.toLowerCase().includes(searchinput.toLowerCase())
+        })
+        console.log("filterdata",searchResults)
+        setfilterData(search)
+        setsearchResults(search)
+        
+    }, [todoList])
+
+    const toggleComplete = useCallback((id) => {
+        let toggledData = todoList.map((todo) =>
+        {
+            if(todo.id === id ){
+                todo.completed=!todo.completed;
+            }
+
+            return todo;
+    })
+        console.log("toggledData", toggledData);
+        setTodoList(toggledData);
+    }, [todoList])
+
+    const handleStatusChange = useCallback((e) => {
+        const selectedStatus = e.target.value;
+        setStatusFilter(selectedStatus);
+
+        console.log('=> ', searchResults);
+   
+        if (selectedStatus === "completed") {
+            const completedTasks = searchResults.filter((todo) => todo.completed === true);
+            console.log(completedTasks)
+            setfilterData(completedTasks);
+    
+        }
+        else if (selectedStatus === "pending") {
+            
+            const pendingTasks = searchResults.filter((todo) => todo.completed === false);
+            setfilterData(pendingTasks);
+            console.log(pendingTasks)
+        }
+        else {
+            setfilterData(todoList);
+        }
+    }, [todoList, searchResults]);
+
+    console.log('todo list data>>>>>>>>', todoList, filterData)
+
+
+
     return (
+
         <div className="todowrapper">
-            
-            <h1>Get Things Done !</h1><TodoForm addTodo={addTodo}></TodoForm>
-            {todoList.map((todo,index)=>
-                <Todo  task={todo} key={index} HandleDelete={HandleDelete}/>
-                
-            
-            )}
-        
+            <h1>Get Things Done !</h1>
+            <div className="Filter-Component">
+                <div className="searchInput">
+
+
+                    <input type="text" onChange={handleSearch} />
+                    <div className="searchIcon">
+                        <FontAwesomeIcon icon={faSearch}></FontAwesomeIcon>
+                    </div>
+
+                </div>
+
+                <div className="sort">
+                    <label >Task</label>
+                    <div className="sortIcon" onClick={handleSort}>
+                        <FontAwesomeIcon icon={faSortAlphaAsc}></FontAwesomeIcon>
+                    </div>
+                </div>
+
+
+                <div className="status">
+                    <label for="status">Status:</label>
+                    <select id="status" name="status" onChange={handleStatusChange} value={statusFilter}>
+                        <option value="">All</option>
+                        <option value="pending">Pending</option>
+                        <option value="completed" >Completed </option>
+
+                    </select>
+                </div>
+            </div>
+
+            <TodoForm addTodo={addTodo}></TodoForm>
+
+            <div>
+                {
+                    searchinput.length && filterData.length ? filterData.map((todo, index) =>
+                        <Todo task={todo} key={index} HandleDelete={HandleDelete} toggle={toggleComplete} />
+                    ) : todoList.map((todo, index) =>
+                        <Todo task={todo} key={index} HandleDelete={HandleDelete} toggle={toggleComplete} />
+                    )}
+            </div>
+          
+
         </div>
     );
 
-            }
+}
 export default TodoWrapper;
\ No newline at end of file
diff --git a/src/TodoComponent/createTodo.js b/src/TodoComponent/createTodo.js
new file mode 100644
index 0000000..73a1fc7
--- /dev/null
+++ b/src/TodoComponent/createTodo.js
@@ -0,0 +1,47 @@
+import { useState } from "react";
+
+
+
+const CreateTodo = () => {
+    
+    let [title,setTitle]= useState('')
+    let[Due_Date,setDue_Date]=useState('')
+    
+    const HandleSubmit=(e)=>{
+       
+         e.preventDefault()
+         const todo={title,Due_Date}
+         fetch('http://localhost:8000/todo',{
+            method:'POST',
+            headers:{"Content-Type": "application/json"},
+            body:JSON.stringify(todo)
+         }).then(()=>{
+            console.log("data is added")
+         })
+
+    }
+     return   <div className="createTodo">
+            <form id="form_id" name="onSubmit" onSubmit={HandleSubmit}>
+            <label >Todo_Title : 
+            <input type="text" 
+            onChange={(e)=>{setTitle(e.target.value)}}/>
+            </label>
+            <label >Due_Date: 
+            <input type="text"
+             onChange={(e)=>{setDue_Date(e.target.value)}}/>
+            </label>
+            </form>
+            <button type="submit">Submit</button>
+            <p>{title}</p>
+            <p>{Due_Date}</p>
+        </div>
+    
+    
+       
+        
+     ;
+}
+
+
+ 
+export default CreateTodo;
\ No newline at end of file
diff --git a/src/TodoComponent/searchBar.js b/src/TodoComponent/searchBar.js
new file mode 100644
index 0000000..b25e959
--- /dev/null
+++ b/src/TodoComponent/searchBar.js
@@ -0,0 +1,40 @@
+
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {  useState } from "react";
+
+const SearchBar = ({placeholder,data}) => {
+    let [todoData,setTodoData]=useState([])
+    const HandleChange=(e)=>{
+       //console.log(e.target.value)
+       const serachValue= e.target.value
+       const resultValue=data.data.filter((el)=>{
+         return el.task.toLowerCase().includes(serachValue.toLowerCase())
+       })
+       setTodoData(resultValue)
+       
+    }
+    return ( 
+       <div className="search">
+        <div className="searchInput">
+            <input type="text" placeholder={placeholder} onChange={HandleChange}/>
+            <div className="searchIcon" >
+                <FontAwesomeIcon icon={faSearch}></FontAwesomeIcon>
+            </div>
+        </div>
+        <div className="searchResults">{todoData.length!==0 && 
+            //console.log(data)
+            //now here we have to loop throughbthe filtered data not through the actual data
+           todoData.map((value,key)=>
+            (
+            <div class="dataItem">{value.task}</div>
+            )
+           )
+        }</div>
+       </div>
+     );
+}
+ 
+export default SearchBar;
+
+
diff --git a/src/data/data.json b/src/data/data.json
new file mode 100644
index 0000000..620654a
--- /dev/null
+++ b/src/data/data.json
@@ -0,0 +1,54 @@
+{
+    "data": [
+        {
+            "id": 1,
+            "task": "Buy groceries",
+            "completed": false
+        },
+        {
+            "id": 2,
+            "task": "Finish React project",
+            "completed": true
+        },
+        {
+            "id": 3,
+            "task": "Go for a run",
+            "completed": false
+        },
+        {
+            "id": 4,
+            "task": "Read a book",
+            "completed": false
+        },
+        {
+            "id": 5,
+            "task": "Prepare for meeting",
+            "completed": true
+        },
+        {
+            "id": 6,
+            "task": "Clean the house",
+            "completed": false
+        },
+        {
+            "id": 7,
+            "task": "Write blog post",
+            "completed": false
+        },
+        {
+            "id": 8,
+            "task": "Learn new coding language",
+            "completed": true
+        },
+        {
+            "id": 9,
+            "task": "Watch a movie",
+            "completed": false
+        },
+        {
+            "id": 10,
+            "task": "Organize files",
+            "completed": true
+        }
+    ]
+}
\ No newline at end of file