diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index dbd1123..5aeff9b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,8 +11,9 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
-        "date-fns": "^2.28.0",
+        "date-fns": "^2.30.0",
         "react": "^18.1.0",
+        "react-circular-progressbar": "^2.1.0",
         "react-dom": "^18.1.0",
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
@@ -1797,11 +1798,11 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.18.3",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
-      "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
+      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1819,6 +1820,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "node_modules/@babel/template": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
@@ -6038,9 +6044,12 @@
       }
     },
     "node_modules/date-fns": {
-      "version": "2.28.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
-      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
       "engines": {
         "node": ">=0.11"
       },
@@ -13515,6 +13524,14 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-circular-progressbar": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz",
+      "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==",
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -17643,11 +17660,18 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.18.3",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
-      "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
+      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
       "requires": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.14.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.14.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+          "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+        }
       }
     },
     "@babel/runtime-corejs3": {
@@ -20709,9 +20733,12 @@
       }
     },
     "date-fns": {
-      "version": "2.28.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
-      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "requires": {
+        "@babel/runtime": "^7.21.0"
+      }
     },
     "debug": {
       "version": "4.3.4",
@@ -25942,6 +25969,12 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-circular-progressbar": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz",
+      "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==",
+      "requires": {}
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 521f27b..cd96e7f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,8 +7,9 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
-    "date-fns": "^2.28.0",
+    "date-fns": "^2.30.0",
     "react": "^18.1.0",
+    "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
diff --git a/frontend/src/components/TaskDetails.js b/frontend/src/components/TaskDetails.js
index d7e208f..fd87907 100644
--- a/frontend/src/components/TaskDetails.js
+++ b/frontend/src/components/TaskDetails.js
@@ -1,6 +1,8 @@
 import { useTasksContext } from "../hooks/usetasksContext";
 import { useAuthContext } from "../hooks/useAuthContext";
-
+import { CircularProgressbar } from "react-circular-progressbar";
+import "react-circular-progressbar/dist/styles.css";
+import { formatDistanceToNow, parseISO } from "date-fns";
 const TaskDetails = ({ task }) => {
   const { dispatch } = useTasksContext();
   const { user } = useAuthContext();
@@ -23,18 +25,18 @@ const TaskDetails = ({ task }) => {
     }
   };
 
+  // console.log(task);
   return (
     <div className="task-details">
-      <h3>{task.title}</h3>
-
-      <p>
-        <strong>Description : </strong>
-        {task.description}
-      </p>
-      <p>
-        <strong>Progress: </strong>
-        {task.progress}
-      </p>
+      <div className="text">
+        <h3 className="title">{task.title}</h3>
+        <p>{task.description}</p>
+        <p></p>
+        <p>{formatDistanceToNow(parseISO(task.createdAt))} ago</p>
+      </div>
+      <div className="progress">
+        <CircularProgressbar value={task.progress} text={`${task.progress}%`} />
+      </div>
       <span className="material-symbols-outlined" onClick={handleClick}>
         delete
       </span>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 913a231..e9edb29 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -39,11 +39,15 @@ header a {
   gap: 100px;
 }
 .task-details {
+  display: inline-block;
   background: #fff;
-  border-radius: 4px;
+  border-radius: 13px;
   margin: 20px auto;
   padding: 20px;
   position: relative;
+  display: flex;
+  justify-content: space-between;
+  max-width: 70%;  
   box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
 }
 .task-details h4 {
@@ -58,12 +62,12 @@ header a {
 }
 .task-details span {
   position: absolute;
-  top: 20px;
-  right: 20px;
+  top: 0px;
+  right: 0px;
   cursor: pointer;
   background: #f1f1f1;
   padding: 6px;
-  border-radius: 50%;
+  border-radius: 40%;
   color: #333;
 }
 
@@ -119,4 +123,14 @@ form.signup, form.login {
   padding: 20px;
   background: #fff;
   border-radius: 4px;
-}
\ No newline at end of file
+}
+
+.progress {
+  display: inline-block;
+  height: 100px; 
+  width: 100px; 
+}
+
+.title{
+  margin: 0px;
+}