diff --git a/src/components/Charts/HorizontalBarChart.jsx b/src/components/Charts/HorizontalBarChart.jsx
index 82608da6..5a02c98f 100644
--- a/src/components/Charts/HorizontalBarChart.jsx
+++ b/src/components/Charts/HorizontalBarChart.jsx
@@ -23,7 +23,7 @@ const HorizontalBarChart = ({
   if (loading) {
     return (
       <div className="w-full h-[380px] flex items-center justify-center bg-gray-100 rounded-xl">
-        <span className="text-gray-500 text-sm">Loading chart...</span>
+        <span className="text-gray-500">Loading chart...</span>
         {/* Replace this with a skeleton or spinner if you prefer */}
       </div>
     );
diff --git a/src/components/Dashboard/ProjectCompletionChart.jsx b/src/components/Dashboard/ProjectCompletionChart.jsx
index 8ce4b13a..decf7918 100644
--- a/src/components/Dashboard/ProjectCompletionChart.jsx
+++ b/src/components/Dashboard/ProjectCompletionChart.jsx
@@ -3,7 +3,8 @@ import HorizontalBarChart from "../Charts/HorizontalBarChart";
 import { useProjects } from "../../hooks/useProjects";
 
 const ProjectCompletionChart = () => {
-  const { projects, loading } = useProjects();
+  const { data: projects = [], isLoading: loading, isError, error } = useProjects();
+
 
   // Bar chart logic
   const projectNames = projects?.map((p) => p.name) || [];
@@ -11,7 +12,7 @@ const ProjectCompletionChart = () => {
     projects?.map((p) => {
       const completed = p.completedWork || 0;
       const planned = p.plannedWork || 1;
-      const percent = (completed / planned) * 100;
+      const percent = planned ? (completed / planned) * 100 : 0;
       return Math.min(Math.round(percent), 100);
     }) || [];