diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index a352f5a5..e4ac83ef 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 Teams from "./Teams";
 
 const Dashboard = () => {
   const { projects, loading } = useProjects();
@@ -120,28 +121,8 @@ const Dashboard = () => {
         </div>
 
         {/* Teams 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
-              </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>
+       <div className="col-sm-6 col-lg-4">
+          <Teams teamsCardData={teamsCardData} /> {/* Use the Teams component */}
         </div>
 
         {/* Tasks Card */}
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