diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index a352f5a5..8a702cd5 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -8,6 +8,7 @@ import {
   useDashboardTeamsCardData,
   useDashboardTasksCardData,
 } from "../../hooks/useDashboard_Data";
+import TasksCard from "./Tasks";
 
 const Dashboard = () => {
   const { projects, loading } = useProjects();
@@ -145,28 +146,8 @@ const Dashboard = () => {
         </div>
 
         {/* Tasks Card */}
-        <div className="col-sm-6 col-lg-4">
-          <div className="card p-3 h-100 text-center d-flex justify-content-between">
-            <div className="d-flex justify-content-start align-items-center mb-3">
-              <h5 className="fw-bold mb-0 ms-2">
-                <i className="bx bx-task text-success"></i> Tasks
-              </h5>
-            </div>
-            <div className="d-flex justify-content-around align-items-start mt-n2">
-              <div>
-                <h4 className="mb-0 fw-bold">
-                  {tasksCardData.totalTasks?.toLocaleString()}
-                </h4>
-                <small className="text-muted">Total</small>
-              </div>
-              <div>
-                <h4 className="mb-0 fw-bold">
-                  {tasksCardData.completedTasks?.toLocaleString()}
-                </h4>
-                <small className="text-muted">Completed</small>
-              </div>
-            </div>
-          </div>
+         <div className="col-sm-6 col-lg-4">
+          <TasksCard tasksCardData={tasksCardData} /> {/* Use the TasksCard component */}
         </div>
 
         {/* Bar Chart */}
diff --git a/src/components/Dashboard/Tasks.jsx b/src/components/Dashboard/Tasks.jsx
new file mode 100644
index 00000000..fa924036
--- /dev/null
+++ b/src/components/Dashboard/Tasks.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
+
+const TasksCard = () => {
+  const { tasksCardData } = useDashboardTasksCardData();
+
+  return (
+    <div className="card p-3 h-100 text-center d-flex justify-content-between">
+      <div className="d-flex justify-content-start align-items-center mb-3">
+        <h5 className="fw-bold mb-0 ms-2">
+          <i className="bx bx-task text-success"></i> Tasks
+        </h5>
+      </div>
+      <div className="d-flex justify-content-around align-items-start mt-n2">
+        <div>
+          <h4 className="mb-0 fw-bold">
+            {tasksCardData.totalTasks?.toLocaleString()}
+          </h4>
+          <small className="text-muted">Total</small>
+        </div>
+        <div>
+          <h4 className="mb-0 fw-bold">
+            {tasksCardData.completedTasks?.toLocaleString()}
+          </h4>
+          <small className="text-muted">Completed</small>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TasksCard;
\ No newline at end of file