diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index 29e3e755..8a702cd5 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -8,7 +8,7 @@ import {
   useDashboardTeamsCardData,
   useDashboardTasksCardData,
 } from "../../hooks/useDashboard_Data";
-import ProjectCompletionChart from "./ProjectCompletionChart";
+import TasksCard from "./Tasks";
 
 const Dashboard = () => {
   const { projects, loading } = useProjects();
@@ -56,6 +56,15 @@ const Dashboard = () => {
     (a, b) => new Date(a.date) - new Date(b.date)
   );
 
+  // Bar chart logic
+  const projectNames = projects?.map((p) => p.name) || [];
+  const projectProgress =
+    projects?.map((p) => {
+      const completed = p.completedWork || 0;
+      const planned = p.plannedWork || 1;
+      const percent = (completed / planned) * 100;
+      return Math.min(Math.round(percent), 100);
+    }) || [];
 
   // Line chart data
   const lineChartSeries = [
@@ -137,33 +146,27 @@ 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 */}
-       <div className="col-xxl-6 col-lg-6">
-          <ProjectCompletionChart />
+        <div className="col-xxl-6 col-lg-6">
+          <div className="card h-100">
+            <div className="card-header d-flex align-items-start justify-content-between">
+              <div className="card-title mb-0 text-start">
+                <h5 className="mb-1">Projects</h5>
+                <p className="card-subtitle">Projects Completion Status</p>
+              </div>
+            </div>
+            <div className="card-body">
+              <HorizontalBarChart
+                categories={projectNames}
+                seriesData={projectProgress}
+                loading={loading}
+              />
+            </div>
+          </div>
         </div>
 
         {/* Line 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