diff --git a/package-lock.json b/package-lock.json
index e6a160a..4be4614 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,12 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
+        "uuid": "^9.0.1",
+        "uuid4": "^2.0.3",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "tailwindcss": "^3.4.1"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -15998,6 +16003,14 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sockjs/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -17325,13 +17338,22 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
       "bin": {
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/uuid4": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/uuid4/-/uuid4-2.0.3.tgz",
+      "integrity": "sha512-CTpAkEVXMNJl2ojgtpLXHgz23dh8z81u6/HEPiQFOvBc/c2pde6TVHmH4uwY0d/GLF3tb7+VDAj4+2eJaQSdZQ=="
+    },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
diff --git a/package.json b/package.json
index 88a269e..78615ec 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "uuid": "^9.0.1",
+    "uuid4": "^2.0.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +36,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.1"
   }
 }
diff --git a/src/App.css b/src/App.css
index 13088c2..a490642 100644
--- a/src/App.css
+++ b/src/App.css
@@ -25,7 +25,12 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background: #E8CBC0;  /* fallback for old browsers */
+  background: -webkit-linear-gradient(to right, #636FA4, #E8CBC0);  /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to right, #636FA4, #E8CBC0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  
+  
+  width: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
diff --git a/src/App.js b/src/App.js
index 0ff7d8a..69e9675 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,13 @@
 import "./App.css";
+import TodoList from "./assets/componets/Todo";
 // TODO: Import the todoData and pass it as a prop to the TodoList component
-
+import todoData from "./todoData"
 function App() {
   return (
+    
     <div className="App">
       <header className="App-header">
-        {/* Call the TodoList Component Here */}
+        <TodoList tododata={todoData}/>
       </header>
     </div>
   );
diff --git a/src/assets/componets/Todo.js b/src/assets/componets/Todo.js
new file mode 100644
index 0000000..b653574
--- /dev/null
+++ b/src/assets/componets/Todo.js
@@ -0,0 +1,73 @@
+import { useState } from "react";
+
+import uuid4 from "uuid4";
+import TodoItem from "./Todoitem";
+import ssimg from "./img/search (1).png"
+
+function TodoList({ tododata }) {
+  const [todoList, setTodoList] = useState(tododata);
+  const [newTodo, setNewTodo] = useState("");
+  const [searchitem, setsearchitem] = useState("");
+
+  const handleInput = (event) => {
+    setNewTodo(event.target.value);
+  };
+
+  const createList = () => {
+    const newTodoItem = {
+      id: uuid4(),
+      title: newTodo,
+      done: false,
+    };
+    setTodoList([...todoList, newTodoItem]);
+    setNewTodo("");
+  };
+
+  const deleteItem = (todoId) => {
+    setTodoList(todoList.filter((todo) => todo.id !== todoId));
+  };
+
+  return (
+    <div className=" w-{90%} h-full p-4 my-5 rounded-md overflow-y-auto">
+      <div className="w-50 h-40 flex flex-col mb-20">
+        <div className="flex  w-full m-2">
+           <input
+          type="text"
+          value={newTodo}
+          onChange={handleInput}
+          placeholder="Add new task"
+          className="w-full border border-gray-300 rounded text-black "
+        />
+        <button onClick={createList} className=" px-4 bg-green-400 text-white text-2xl rounded ">
+          +
+        </button>
+        
+        </div>
+         <div className="flex  w-full m-2 bg-teal-600 h-1"></div>
+
+         <div className="flex  w-full m-2">
+           <input
+          type="text"
+          id="searchInput"
+          value={searchitem}
+          onChange={(event) => setsearchitem(event.target.value)}
+          placeholder="Search tasks"
+          className="w-full border border-gray-300 rounded text-black "
+        />
+                <label  className="mt-2"><img className="w-11" src={ssimg} alt="" /></label>
+
+         </div>
+       
+      </div>
+
+      {todoList.map((todo) => {
+        if (todo.title.toLowerCase().includes(searchitem.toLowerCase())) {
+          return <TodoItem key={todo.id} todo={todo} deleteItem={deleteItem} />;
+        }
+        return null;
+      })}
+    </div>
+  );
+}
+
+export default TodoList;
\ No newline at end of file
diff --git a/src/assets/componets/Todoitem.js b/src/assets/componets/Todoitem.js
new file mode 100644
index 0000000..eb2203d
--- /dev/null
+++ b/src/assets/componets/Todoitem.js
@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import eidt from "./img/edit.png"
+import delet from "./img/trash.png"
+
+function TodoItem({ todo, deleteItem }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [newTitle, setNewTitle] = useState(todo.title);
+  const [isChecked, setisChecked] = useState(false);
+  const [greencolor ,setgreencolor] = useState(false)
+  const [yalowcolor ,setyalowcolor] = useState(false)
+  const [redcolor ,setredcolor] = useState(false)
+  const handleSave = () => {
+    todo.title = newTitle;
+    setIsEditing(false);
+  };
+  
+  const handleEditClick = () => {
+    setIsEditing(!isEditing);
+  };
+ 
+  function handelcheckbox (){
+    setisChecked(!isChecked)
+  }
+ 
+  
+ function greenboxcolor (){
+  setgreencolor(!greencolor)
+ }
+ function yaloweboxcolor(){
+  setyalowcolor(!yalowcolor)
+ }
+ function redboxcolor (){
+  setredcolor(!redcolor)
+ }
+
+  return (
+    <div >
+      {isEditing ? (
+        <div className="flex gap-5 justify-between  bg-white mb-2 p-2 ">
+          <input
+          className=" text-black"
+            type="text"
+            value={newTitle}
+            onChange={(event) => setNewTitle(event.target.value)}
+          />
+          <button className="text-green-600" onClick={handleSave}>Save</button>
+        </div>
+      ) : (
+            <div className={`flex gap-5 justify-between h-auto w-{100%}  mb-6 p-2 rounded-lg hover:shadow-[5px_5px_rgba(0,_98,_90,_0.4),_10px_10px_rgba(0,_98,_90,_0.3),_15px_15px_rgba(0,_98,_90,_0.2),_20px_20px_rgba(0,_98,_90,_0.1),_25px_25px_rgba(0,_98,_90,_0.05)] 
+             shadow-[0px_10px_1px_rgba(221,_221,_221,_1),_0_10px_20px_rgba(204,_204,_204,_1)] ${isChecked?"bg-slate-400  text-white" : "bg-white" }`}>
+            
+          <div className="flex gap-3 w-{70%}" >
+             <input type="checkbox" checked={isChecked} onChange={handelcheckbox}/> 
+            <p className={`w-full text-black font-serif text-wrap ${isChecked ? "line-through text-gray-500  " : ""}`}>{todo.title}</p>
+            </div>
+
+            <div className={"flex gap-5 w-{30%}"}>
+            
+          <div className={"flex gap-2 h-5 mt-2"}>
+            <div className={`${greencolor?"bg-green-500 px-2 py-2":"bg-green-100 px-2 py-2"}`} onClick={greenboxcolor}></div>
+            <div  className={`${yalowcolor?"bg-yellow-400 px-2 py-2":"bg-yellow-100 px-2 py-2"}`} onClick={yaloweboxcolor}></div>
+            <div  className={`${redcolor?"bg-red-500 px-2 py-2":"bg-red-100 px-2 py-2"}`} onClick={redboxcolor}></div>
+          </div>
+
+          <div className="flex gap-4">
+            <label htmlFor=""></label>
+            <button className="text-red-600" onClick={() => deleteItem(todo.id)}><img className="w-9" src={delet} alt="" /></button>
+          <button className="text-green-600" onClick={handleEditClick}><img className="w-9" src={eidt} alt="" /></button>
+          </div>
+            </div>
+         
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default TodoItem;
diff --git a/src/assets/componets/img/add-button.png b/src/assets/componets/img/add-button.png
new file mode 100644
index 0000000..e4e953e
Binary files /dev/null and b/src/assets/componets/img/add-button.png differ
diff --git a/src/assets/componets/img/edit.png b/src/assets/componets/img/edit.png
new file mode 100644
index 0000000..e068de9
Binary files /dev/null and b/src/assets/componets/img/edit.png differ
diff --git a/src/assets/componets/img/search (1).png b/src/assets/componets/img/search (1).png
new file mode 100644
index 0000000..5c189bb
Binary files /dev/null and b/src/assets/componets/img/search (1).png differ
diff --git a/src/assets/componets/img/trash.png b/src/assets/componets/img/trash.png
new file mode 100644
index 0000000..e2398e6
Binary files /dev/null and b/src/assets/componets/img/trash.png differ
diff --git a/src/index.css b/src/index.css
index ec2585e..817b0fa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -5,6 +8,8 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  width: 100%;
+  height: auto;
 }
 
 code {
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..5a66654
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
\ No newline at end of file