diff --git a/app/components/dashboard/project-management/digital-innovation-page.tsx b/app/components/dashboard/project-management/digital-innovation-page.tsx
index 1a0aefb..50030a2 100644
--- a/app/components/dashboard/project-management/digital-innovation-page.tsx
+++ b/app/components/dashboard/project-management/digital-innovation-page.tsx
@@ -19,15 +19,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "~/components/ui/dialog";
-import {
-  ChevronUp,
-  ChevronDown,
-  RefreshCw,
-  Building2,
-  PickaxeIcon,
-  UserIcon,
-  UsersIcon,
-} from "lucide-react";
+import { ChevronUp, ChevronDown, RefreshCw } from "lucide-react";
 import apiService from "~/lib/api";
 import toast from "react-hot-toast";
 import {
@@ -172,6 +164,7 @@ export function DigitalInnovationPage() {
     resourceProductivity: 0,
     resourceProductivityPercent: 0,
     avarageProjectScore: 0,
+    countInnovationDigitalProjects: 0,
   });
   const [sortConfig, setSortConfig] = useState<SortConfig>({
     field: "start_date",
@@ -476,7 +469,9 @@ export function DigitalInnovationPage() {
           payload?.resource_productivity_percent
         ),
         avarageProjectScore: parseNum(payload?.average_project_score),
-        countInnovationDigitalProjects: parseNum(payload?.count_innovation_digital_projects),
+        countInnovationDigitalProjects: parseNum(
+          payload?.count_innovation_digital_projects
+        ),
       };
       setActualTotalCount(normalized.countInnovationDigitalProjects);
       setStats(normalized);
@@ -649,7 +644,7 @@ export function DigitalInnovationPage() {
                   Array.from({ length: 4 }).map((_, index) => (
                     <Card
                       key={`skeleton-${index}`}
-                      className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden"
+                      className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]  backdrop-blur-sm rounded-2xl overflow-hidden"
                     >
                       <CardContent className="p-0">
                         <div className="flex flex-col justify-between gap-2">
@@ -711,11 +706,12 @@ export function DigitalInnovationPage() {
           </div>
 
           {/* Process Impacts Chart */}
-          <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
+          <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-[calc(90vh-12rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
             {/* <CardContent > */}
             <CustomBarChart
               title="تاثیرات نوآوری دیجیتال به صورت درصد مقایسه ای"
               loading={statsLoading}
+              height="100%"
               data={[
                 {
                   label: DigitalCardLabel.decreasCost,
@@ -870,7 +866,7 @@ export function DigitalInnovationPage() {
             <div className="flex flex-row gap-4 text-sm text-gray-300 font-persian justify-between">
               <div className="text-center gap-2 items-center  w-1/3 pr-16">
                 <div className="text-base text-gray-401 mb-1">
-                  کل پروژه ها :  {formatNumber(actualTotalCount)}
+                  کل پروژه ها : {formatNumber(actualTotalCount)}
                 </div>
               </div>
 
diff --git a/app/components/dashboard/project-management/green-innovation-page.tsx b/app/components/dashboard/project-management/green-innovation-page.tsx
index 164bd3c..027918d 100644
--- a/app/components/dashboard/project-management/green-innovation-page.tsx
+++ b/app/components/dashboard/project-management/green-innovation-page.tsx
@@ -103,7 +103,6 @@ interface InnovationStats {
   count_innovation_green_projects: number;
 }
 
-
 interface Params {
   icon: any;
   label: string;
@@ -137,7 +136,6 @@ enum projectStatus {
   finish = "پایان یافته",
 }
 
-
 const columns = [
   { key: "select", label: "", sortable: false, width: "50px" },
   { key: "project_no", label: "شماره پروژه", sortable: true, width: "140px" },
@@ -617,19 +615,19 @@ export function GreenInnovationPage() {
         );
       case "title":
         return <span className="font-medium text-white">{String(value)}</span>;
-        case "project_status":
-          return (
-            <div className="flex items-center gap-1">
-              <Badge
-                variant={statusColor(value)}
-                className="font-medium border-2 p-0 block w-2 h-2 rounded-full"
-                style={{
-                  border: "none",
-                }}
-              ></Badge>
-              {String(value)}
-            </div>
-          );
+      case "project_status":
+        return (
+          <div className="flex items-center gap-1">
+            <Badge
+              variant={statusColor(value)}
+              className="font-medium border-2 p-0 block w-2 h-2 rounded-full"
+              style={{
+                border: "none",
+              }}
+            ></Badge>
+            {String(value)}
+          </div>
+        );
       case "project_rating":
         return (
           <Badge variant="outline" className="text-lg text-center border-none">
@@ -684,7 +682,7 @@ export function GreenInnovationPage() {
     <DashboardLayout title="نوآوری سبز">
       <div className="p-6 space-y-4">
         {/* Stats Cards */}
-        <div className="flex gap-6 mb-6">
+        <div className="flex gap-6 mb-5">
           <div className="flex flex-col gap-11  h-full w-1/2">
             {/* Stats Grid */}
             {loading || statsLoading
@@ -756,7 +754,7 @@ export function GreenInnovationPage() {
           {/* Process Impacts Chart */}
 
           {statsLoading ? (
-            <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]  h-[calc(90vh-24.3rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
+            <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]  h-[calc(90vh-25rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
               <CardContent className="p-0 h-full">
                 <div className="border-b-2 border-gray-500/20">
                   <div className="w-full p-4 px-6">
@@ -799,7 +797,7 @@ export function GreenInnovationPage() {
               </CardContent>
             </Card>
           ) : (
-            <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-[calc(90vh-26rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
+            <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-[calc(90vh-27rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
               <CardContent className="p-0 h-full overflow-hidden">
                 <div className="border-b-2 border-gray-500/20">
                   <div className="w-full p-4 px-6">
diff --git a/app/components/ui/custom-bar-chart.tsx b/app/components/ui/custom-bar-chart.tsx
index 552f771..d74a926 100644
--- a/app/components/ui/custom-bar-chart.tsx
+++ b/app/components/ui/custom-bar-chart.tsx
@@ -32,7 +32,7 @@ export function CustomBarChart({
 }: CustomBarChartProps) {
   // Calculate the maximum value across all data points for consistent scaling
   const globalMaxValue = Math.max(
-    ...data.map((item) => item.maxValue || item.value),
+    ...data.map((item) => item.maxValue || item.value)
   );
 
   // Loading skeleton
@@ -43,7 +43,7 @@ export function CustomBarChart({
           <div className="h-7 bg-gray-600 rounded animate-pulse mb-4 w-1/2"></div>
         )}
 
-        <div className="space-y-4">
+        <div className="space-y-4  flex flex-col gap-4">
           {Array.from({ length: 4 }).map((_, index) => (
             <div key={index} className="flex items-center gap-3">
               {/* Label skeleton */}
@@ -86,8 +86,9 @@ export function CustomBarChart({
             <div key={index} className="flex items-center gap-3">
               {/* Label */}
               <span
-                className={`font-persian text-sm min-w-[160px] text-right ${item.labelColor || "text-white"
-                  }`}
+                className={`font-persian text-sm min-w-[160px] text-right ${
+                  item.labelColor || "text-white"
+                }`}
               >
                 {item.label}
               </span>
@@ -97,8 +98,9 @@ export function CustomBarChart({
                 className={`flex-1 flex items-center bg-gray-700 rounded-full relative overflow-hidden ${barHeight}`}
               >
                 <div
-                  className={`${barHeight} rounded-full transition-all duration-700 ease-out relative ${item.color || "bg-emerald-400"
-                    }`}
+                  className={`${barHeight} rounded-full transition-all duration-700 ease-out relative ${
+                    item.color || "bg-emerald-400"
+                  }`}
                   style={{
                     width: `${Math.min(percentage, 100)}%`,
                   }}
@@ -110,18 +112,19 @@ export function CustomBarChart({
 
               {/* Value Label */}
               <span
-                className={`font-bold text-sm min-w-[60px] text-left ${item.color?.includes("emerald")
-                  ? "text-emerald-400"
-                  : item.color?.includes("blue")
-                    ? "text-blue-400"
-                    : item.color?.includes("purple")
-                      ? "text-purple-400"
-                      : item.color?.includes("red")
-                        ? "text-red-400"
-                        : item.color?.includes("yellow")
-                          ? "text-yellow-400"
-                          : "text-emerald-400"
-                  }`}
+                className={`font-bold text-sm min-w-[60px] text-left ${
+                  item.color?.includes("emerald")
+                    ? "text-emerald-400"
+                    : item.color?.includes("blue")
+                      ? "text-blue-400"
+                      : item.color?.includes("purple")
+                        ? "text-purple-400"
+                        : item.color?.includes("red")
+                          ? "text-red-400"
+                          : item.color?.includes("yellow")
+                            ? "text-yellow-400"
+                            : "text-emerald-400"
+                }`}
               >
                 {item.valuePrefix || ""}
                 {formatNumber(parseFloat(displayValue))}