diff --git a/src/App.js b/src/App.js
index 3017066..0a76811 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,40 @@
-import React from "react";
-import Greet from "./Greet";
-const App = () => {
+import React, { useState } from "react";
+import "./App.css";
+
+function App() {
+  const [tasks, setTasks] = useState([]);
+  const [input, setInput] = useState("");
+
+  const addTask = () => {
+    setTasks([...tasks, input]);
+    setInput("");
+  };
+
+  const deleteTask = (index) => {
+    tasks.splice(index, 1);
+    setTasks([...tasks]);
+  };
+
   return (
     <div>
-      <Greet name="Sam" age="20" gender="male">
-        <p>This is a para</p>
-      </Greet>
-      <Greet name="Luna" age="15" gender="female">
-        <button>Click me</button>
-      </Greet>
-      <Greet name="John" age="18" gender="male" />
-      <Greet name="Amy" age="20" gender="female" />
-      <Greet name="xyz" age="25" gender="male" />
+      <ul>
+        {tasks.map((task, index) => (
+          <li>
+            {task}
+            <button onClick={() => deleteTask(index)}>X</button>
+          </li>
+        ))}
+      </ul>
+      <input
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+      />
+      <button onClick={addTask}>Add task</button>
+      <button onClick={() => setTasks([])}>Reset All</button>
+      <p>No of tasks to be done : {tasks.length}</p>
     </div>
   );
-};
+}
 
 export default App;
diff --git a/src/Greet.js b/src/Greet.js
deleted file mode 100644
index bf19bd8..0000000
--- a/src/Greet.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import "./App.css";
-
-const Greet = (props) => {
-  const { name, age, gender } = props;
-  console.log(props);
-  return (
-    <>
-      <h1 className="container">Hello {name}</h1>
-      <p>My age is {age}</p>
-      <p>My gender is {gender}</p>
-      {props.children}
-    </>
-  );
-};
-export default Greet;