diff --git a/src/components/Dashboard/Projects.jsx b/src/components/Dashboard/Projects.jsx
index 0be20321..6a944755 100644
--- a/src/components/Dashboard/Projects.jsx
+++ b/src/components/Dashboard/Projects.jsx
@@ -2,9 +2,10 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useDashboardProjectsCardData } from "../../hooks/useDashboard_Data";
 import eventBus from "../../services/eventBus";
 import GlobalRepository from "../../repositories/GlobalRepository";
+import TeamsSkeleton from "./TeamsSkeleton";
 
 const Projects = () => {
-  const { projectsCardData } = useDashboardProjectsCardData();
+  const { projectsCardData,loading  } = useDashboardProjectsCardData();
   const [projectData, setProjectsData] = useState(projectsCardData);
 
   useEffect(() => {
@@ -13,13 +14,13 @@ const Projects = () => {
 
   const handler = useCallback(
     async (msg) => {
-        try {
-          const response =
-            await GlobalRepository.getDashboardProjectsCardData();
-          setProjectsData(response.data);
-        } catch (err) {
-          console.error(err);
-        }
+      try {
+        const response =
+          await GlobalRepository.getDashboardProjectsCardData();
+        setProjectsData(response.data);
+      } catch (err) {
+        console.error(err);
+      }
     },
     [GlobalRepository]
   );
@@ -37,20 +38,24 @@ const Projects = () => {
           Projects
         </h5>
       </div>
-      <div className="d-flex justify-content-around align-items-start mt-n2">
-        <div>
-          <h4 className="mb-0 fw-bold">
-            {projectData.totalProjects?.toLocaleString()}
-          </h4>
-          <small className="text-muted">Total</small>
+      {loading ? (
+        <TeamsSkeleton />
+      ) : (
+        <div className="d-flex justify-content-around align-items-start mt-n2">
+          <div>
+            <h4 className="mb-0 fw-bold">
+              {projectData.totalProjects?.toLocaleString()}
+            </h4>
+            <small className="text-muted">Total</small>
+          </div>
+          <div>
+            <h4 className="mb-0 fw-bold">
+              {projectData.ongoingProjects?.toLocaleString()}
+            </h4>
+            <small className="text-muted">Ongoing</small>
+          </div>
         </div>
-        <div>
-          <h4 className="mb-0 fw-bold">
-            {projectData.ongoingProjects?.toLocaleString()}
-          </h4>
-          <small className="text-muted">Ongoing</small>
-        </div>
-      </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/Dashboard/Tasks.jsx b/src/components/Dashboard/Tasks.jsx
index 2513e061..3530ed94 100644
--- a/src/components/Dashboard/Tasks.jsx
+++ b/src/components/Dashboard/Tasks.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useSelector } from "react-redux";
 import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
+import TeamsSkeleton from "./TeamsSkeleton";
 
 const TasksCard = () => {
   const projectId = useSelector((store) => store.localVariables?.projectId);
@@ -16,11 +17,7 @@ const TasksCard = () => {
 
       {loading ? (
         // Loader will be displayed when loading is true
-        <div className="d-flex justify-content-center align-items-center flex-grow-1">
-          <div className="spinner-border text-primary" role="status">
-            <span className="visually-hidden">Loading...</span>
-          </div>
-        </div>
+        <TeamsSkeleton/>
       ) : error ? (
         // Error message if there's an error
         <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">{error}</div>
diff --git a/src/components/Dashboard/Teams.jsx b/src/components/Dashboard/Teams.jsx
index 00e881f5..b3227970 100644
--- a/src/components/Dashboard/Teams.jsx
+++ b/src/components/Dashboard/Teams.jsx
@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
 import eventBus from "../../services/eventBus";
+import TeamsSkeleton from "./TeamsSkeleton";
 
 const Teams = () => {
   const projectId = useSelector((store) => store.localVariables?.projectId);
@@ -38,11 +39,7 @@ const Teams = () => {
 
       {loading ? (
         // Blue spinner loader
-        <div className="d-flex justify-content-center align-items-center flex-grow-1">
-          <div className="spinner-border text-primary" role="status">
-            <span className="visually-hidden">Loading...</span>
-          </div>
-        </div>
+        <TeamsSkeleton/>
       ) : error ? (
         // Error message if data fetching fails
         <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">{error}</div>
diff --git a/src/components/Dashboard/TeamsSkeleton.jsx b/src/components/Dashboard/TeamsSkeleton.jsx
new file mode 100644
index 00000000..6236e939
--- /dev/null
+++ b/src/components/Dashboard/TeamsSkeleton.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+const TeamsSkeleton = () => {
+  return (
+    <div className="d-flex justify-content-around align-items-start mt-n2 flex-grow-1">
+      <div>
+        <div className="bg-light rounded" style={{ width: "80px", height: "24px", marginBottom: "5px" }}></div>
+        <div className="bg-light rounded" style={{ width: "60px", height: "12px" }}></div>
+      </div>
+      <div>
+        <div className="bg-light rounded" style={{ width: "80px", height: "24px", marginBottom: "5px" }}></div>
+        <div className="bg-light rounded" style={{ width: "60px", height: "12px" }}></div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamsSkeleton;