diff --git a/src/Components/Box/Box.jsx b/src/Components/Box/Box.jsx
index 1aa0e33..8ab2895 100644
--- a/src/Components/Box/Box.jsx
+++ b/src/Components/Box/Box.jsx
@@ -1,34 +1,50 @@
-import React from "react";
+import React, { useState } from "react";
 import "./box.css";
 import Task from "../task/Task";
 
 export default function Box() {
-  const tasks = [
+  const [tasks, setTasks] = useState([
     {
       description: "first Task",
       date: "20-02-2022",
+      id: 1,
     },
     {
       description: "second Task",
       date: "20-03-2022",
+      id: 2,
     },
     {
       description: "third Task",
       date: "20-04-2022",
+      id: 3,
     },
     {
       description: "fourth Task",
       date: "20-05-2022",
+      id: 4,
     },
     {
       description: "fifth Task",
       date: "20-06-2022",
+      id: 5,
     },
-  ];
+  ]);
+
+  const deleteTask = (id) => {
+    const newTasks = tasks.filter((task) => task.id != id);
+    setTasks(newTasks);
+  };
   return (
     <div className="box">
-      {tasks.map((task) => (
-        <Task description={task.description} date={task.date} />
+      {tasks.map((task, i) => (
+        <Task
+          description={task.description}
+          date={task.date}
+          id={task.id}
+          onDelete={deleteTask}
+          key={i}
+        />
       ))}
     </div>
   );
diff --git a/src/Components/task/Task.jsx b/src/Components/task/Task.jsx
index f3152fb..285202e 100644
--- a/src/Components/task/Task.jsx
+++ b/src/Components/task/Task.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import "./task.css";
 
-function Task({ description, date }) {
+function Task({ description, date, onDelete, id }) {
   const [click, setClick] = useState(false);
 
   const handleClick = () => {
@@ -11,11 +11,12 @@ function Task({ description, date }) {
     <div
       className="container_tasks"
       onClick={handleClick}
-      style={{ backgroundColor: click ? "red" : "white" }}
+      onDoubleClick={() => onDelete(id)} //invocation
+      style={{ backgroundColor: click ? "blue" : "white" }}
     >
       <div>{description}</div>
       <div>{date}</div>
-      <input type="checkbox"/>
+      <input type="checkbox" />
     </div>
   );
 }