diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index 8a702cd5..e4ac83ef 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 TasksCard from "./Tasks";
+import Teams from "./Teams";
 
 const Dashboard = () => {
   const { projects, loading } = useProjects();
@@ -121,35 +121,35 @@ const Dashboard = () => {
         </div>
 
         {/* Teams Card */}
+       <div className="col-sm-6 col-lg-4">
+          <Teams teamsCardData={teamsCardData} /> {/* Use the Teams component */}
+        </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-group text-warning"></i> Teams
+                <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">
-                  {teamsCardData.totalEmployees?.toLocaleString()}
+                  {tasksCardData.totalTasks?.toLocaleString()}
                 </h4>
-                <small className="text-muted">Total Employees</small>
+                <small className="text-muted">Total</small>
               </div>
               <div>
                 <h4 className="mb-0 fw-bold">
-                  {teamsCardData.inToday?.toLocaleString()}
+                  {tasksCardData.completedTasks?.toLocaleString()}
                 </h4>
-                <small className="text-muted">In Today</small>
+                <small className="text-muted">Completed</small>
               </div>
             </div>
           </div>
         </div>
 
-        {/* Tasks Card */}
-         <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">
           <div className="card h-100">
diff --git a/src/components/Dashboard/Teams.jsx b/src/components/Dashboard/Teams.jsx
new file mode 100644
index 00000000..52a62e61
--- /dev/null
+++ b/src/components/Dashboard/Teams.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
+
+const Teams = () => {
+  const { teamsCardData } = useDashboardTeamsCardData();
+
+  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-group text-warning"></i> Teams
+        </h5>
+      </div>
+      <div className="d-flex justify-content-around align-items-start mt-n2">
+        <div>
+          <h4 className="mb-0 fw-bold">
+            {teamsCardData.totalEmployees?.toLocaleString()}
+          </h4>
+          <small className="text-muted">Total Employees</small>
+        </div>
+        <div>
+          <h4 className="mb-0 fw-bold">
+            {teamsCardData.inToday?.toLocaleString()}
+          </h4>
+          <small className="text-muted">In Today</small>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Teams;
\ No newline at end of file