diff --git a/app/components/dashboard/project-management/mange-ideas-tech-page.tsx b/app/components/dashboard/project-management/mange-ideas-tech-page.tsx
index 12aba32..e451903 100644
--- a/app/components/dashboard/project-management/mange-ideas-tech-page.tsx
+++ b/app/components/dashboard/project-management/mange-ideas-tech-page.tsx
@@ -29,7 +29,7 @@ import {
 } from "~/components/ui/chart";
 import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, CartesianGrid, LabelList, Cell, RadialBarChart, PolarGrid, RadialBar, PolarRadiusAxis } from "recharts";
 import { BaseCard } from "~/components/ui/base-card";
-import { Label } from "~/components/ui/label";
+import { Label } from "recharts"
 import { MetricCard } from "~/components/ui/metric-card";
 
 
@@ -605,9 +605,34 @@ export function ManageIdeasTechPage() {
   const VerticalBarChart = () => {
     if (loadingChart) {
       return (
-        <div className="p-6">
-          <div className="bg-gray-600 rounded animate-pulse w-48 mx-auto"></div>
-          <div className="h-40 bg-gray-700 rounded animate-pulse"></div>
+        <div className="p-6 space-y-4">
+          {/* Chart title skeleton */}
+          <div className="h-5 bg-gray-600 rounded animate-pulse w-32 mx-auto"></div>
+
+          {/* Chart area skeleton */}
+          <div className="relative h-48 bg-gradient-to-t from-gray-700/30 to-transparent rounded p-4">
+            {/* Y-axis labels */}
+            <div className="absolute left-2 top-4 space-y-6">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <div key={i} className="h-3 bg-gray-600 rounded animate-pulse w-6"></div>
+              ))}
+            </div>
+
+            {/* Bars skeleton */}
+            <div className="flex items-end justify-center gap-4 h-full pt-4 pb-8 ml-8">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <div key={i} className="flex flex-col items-center gap-2">
+                  {/* Bar */}
+                  <div
+                    className="bg-gray-600 rounded-t animate-pulse w-12"
+                    style={{ height: `${Math.random() * 60 + 40}%` }}
+                  ></div>
+                  {/* X-axis label */}
+                  <div className="h-3 bg-gray-600 rounded animate-pulse w-16"></div>
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
       );
     }
@@ -921,6 +946,23 @@ style: { textAnchor: "middle" },
                   </BaseCard>
                   <div className="col-span-1 col-start-2 row-start-2 flex flex-col-reverse justify-end gap-2 row-span-1">
                     <BaseCard title="ایده‌های فناوری و نوآوری">
+                             {loadingStats ? (
+                               <div className="flex items-center gap-2 justify-center flex-row-reverse">
+                                 <div className="w-[6rem] h-[6rem] bg-gray-600 rounded-full animate-pulse"></div>
+                                 <div className="font-bold font-persian text-center">
+                                   <div className="flex flex-col justify-between items-center gap-2">
+                                     <div className="flex items-center gap-1 text-base">
+                                       <div className="h-4 bg-gray-600 rounded animate-pulse w-16"></div>
+                                       <div className="h-5 bg-gray-600 rounded animate-pulse w-8"></div>
+                                     </div>
+                                     <div className="flex items-center gap-1 text-base">
+                                       <div className="h-4 bg-gray-600 rounded animate-pulse w-20"></div>
+                                       <div className="h-5 bg-gray-600 rounded animate-pulse w-8"></div>
+                                     </div>
+                                   </div>
+                                 </div>
+                               </div>
+                             ) : (
                                <div className="flex items-center gap-2 justify-center flex-row-reverse">
                                  <ChartContainer
                                    config={chartConfig}
@@ -1057,14 +1099,31 @@ style: { textAnchor: "middle" },
                                    </div>
                                  </div>
                                </div>
+                             )}
                              </BaseCard>
 
-                             <MetricCard
-                                        title="درآمد افزایش یافته"
-                                        value={statsData?.increased_revenue_from_ideas?.replaceAll("," , "") || "0"}
-                                        percentValue={statsData?.increased_revenue_from_ideas_percent}
-                                        percentLabel="درصد به کل درآمد"
-                                      />
+                             {loadingStats ? (
+                               <div className="bg-gradient-to-br from-[#444a64] to-[#252942] rounded-xl p-4 border border-[#3F415A]">
+                                 <div className="space-y-3">
+                                   <div className="h-4 bg-gray-600 rounded animate-pulse w-24"></div>
+                                   <div className="space-y-2">
+                                     <div className="h-8 bg-gray-600 rounded animate-pulse w-16"></div>
+                                     <div className="h-3 bg-gray-600 rounded animate-pulse w-20"></div>
+                                   </div>
+                                   <div className="flex items-center gap-2">
+                                     <div className="h-4 bg-gray-600 rounded animate-pulse w-6"></div>
+                                     <div className="h-3 bg-gray-600 rounded animate-pulse w-16"></div>
+                                   </div>
+                                 </div>
+                               </div>
+                             ) : (
+                               <MetricCard
+                                          title="درآمد افزایش یافته"
+                                          value={statsData?.increased_revenue_from_ideas?.replaceAll("," , "") || "0"}
+                                          percentValue={statsData?.increased_revenue_from_ideas_percent}
+                                          percentLabel="درصد به کل درآمد"
+                                        />
+                             )}
                   </div>
         </div>
 
diff --git a/app/components/ecosystem/info-panel.tsx b/app/components/ecosystem/info-panel.tsx
index 89c547d..c8fcf8a 100644
--- a/app/components/ecosystem/info-panel.tsx
+++ b/app/components/ecosystem/info-panel.tsx
@@ -256,7 +256,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
               {Array.from({ length: 4 }).map((_, i) => (
                 <div
                   key={i}
-                  className="absolute w-2 h-2 bg-green-400 rounded-full animate-pulse"
+                  className="absolute w-2 h-2 bg-pr-green rounded-full animate-pulse"
                   style={{
                     left: `${20 + i * 25}%`,
                     top: `${30 + Math.random() * 40}%`,
@@ -287,7 +287,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
         {/* Actor Count Skeleton */}
         <CardHeader className="text-center pt-0 pb-4">
           <div className="w-36 h-5  rounded animate-pulse mx-auto mb-2"></div>
-          <div className="w-16 h-8 bg-green-400 bg-opacity-30 rounded animate-pulse mx-auto"></div>
+          <div className="w-16 h-8 bg-pr-green bg-opacity-30 rounded animate-pulse mx-auto"></div>
         </CardHeader>
 
         {/* Bar Chart Skeleton */}
@@ -362,7 +362,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
               {Array.from({ length: 4 }).map((_, i) => (
                 <div
                   key={i}
-                  className="absolute w-2 h-2 bg-green-400 rounded-full animate-pulse"
+                  className="absolute w-2 h-2 bg-pr-green rounded-full animate-pulse"
                   style={{
                     left: `${20 + i * 25}%`,
                     top: `${30 + Math.random() * 40}%`,
@@ -378,7 +378,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
         <CardContent className="pt-0 pb-6">
           <div className="bg-[rgba(255,255,255,0.1)] rounded-lg p-4 text-center">
             <div className="w-28 h-4 bg-gray-600 rounded animate-pulse mx-auto mb-1"></div>
-            <div className="w-12 h-6 bg-green-400 bg-opacity-30 rounded animate-pulse mx-auto"></div>
+            <div className="w-12 h-6 bg-pr-green bg-opacity-30 rounded animate-pulse mx-auto"></div>
           </div>
         </CardContent>
       </Card>
diff --git a/app/components/ecosystem/network-graph.tsx b/app/components/ecosystem/network-graph.tsx
index ac04955..15b7e44 100644
--- a/app/components/ecosystem/network-graph.tsx
+++ b/app/components/ecosystem/network-graph.tsx
@@ -43,6 +43,7 @@ export interface CompanyDetails {
 
 export interface NetworkGraphProps {
   onNodeClick?: (node: CompanyDetails) => void;
+  onLoadingChange?: (loading: boolean) => void;
 }
 
 function parseApiResponse(raw: any): any[] {
@@ -58,7 +59,7 @@ function isBrowser(): boolean {
   return typeof window !== "undefined";
 }
 
-export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
+export function NetworkGraph({ onNodeClick, onLoadingChange }: NetworkGraphProps) {
   const svgRef = useRef<SVGSVGElement | null>(null);
   const [nodes, setNodes] = useState<Node[]>([]);
   const [links, setLinks] = useState<Link[]>([]);
@@ -441,6 +442,19 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
       if (d.isCenter) return;
 
       if (onNodeClick && d.stageid) {
+        // Open dialog immediately with basic info
+        const basicDetails: CompanyDetails = {
+          id: d.id,
+          label: d.label,
+          category: d.category,
+          stageid: d.stageid,
+          fields: [],
+        };
+        onNodeClick(basicDetails);
+        
+        // Start loading
+        onLoadingChange?.(true);
+        
         try {
           const res = await callAPI(d.stageid);
           const responseData = JSON.parse(res.data);
@@ -473,14 +487,10 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
           onNodeClick(companyDetails);
         } catch (error) {
           console.error("Failed to fetch company details:", error);
-          const basicDetails: CompanyDetails = {
-            id: d.id,
-            label: d.label,
-            category: d.category,
-            stageid: d.stageid,
-            fields: [],
-          };
-          onNodeClick(basicDetails);
+          // Keep the basic details already shown
+        } finally {
+          // Stop loading
+          onLoadingChange?.(false);
         }
       }
     });
diff --git a/app/routes/ecosystem.tsx b/app/routes/ecosystem.tsx
index 696ced1..ff96122 100644
--- a/app/routes/ecosystem.tsx
+++ b/app/routes/ecosystem.tsx
@@ -56,10 +56,20 @@ function handleValue(val: any): any {
 export default function EcosystemPage() {
   const [selectedCompany, setSelectedCompany] =
     React.useState<CompanyDetails | null>(null);
+  const [isDialogLoading, setIsDialogLoading] = React.useState(false);
   const { token } = useAuth();
 
   const closeDialog = () => {
     setSelectedCompany(null);
+    setIsDialogLoading(false);
+  };
+
+  const handleNodeClick = (company: CompanyDetails) => {
+    setSelectedCompany(company);
+  };
+
+  const handleLoadingChange = (loading: boolean) => {
+    setIsDialogLoading(loading);
   };
 
   // Construct image URL
@@ -79,7 +89,7 @@ export default function EcosystemPage() {
             <div className="lg:col-span-8 h-full">
               <Card className="h-full overflow-hidden bg-transparent border-[#3F415A]">
                 <CardContent className="p-0 h-full bg-transparent">
-                  <NetworkGraph onNodeClick={setSelectedCompany} />
+                  <NetworkGraph onNodeClick={handleNodeClick} onLoadingChange={handleLoadingChange} />
                 </CardContent>
               </Card>
             </div>
@@ -91,7 +101,7 @@ export default function EcosystemPage() {
           open={!!selectedCompany}
           onOpenChange={(open) => !open && closeDialog()}
         >
-          <DialogContent className="font-persian max-w-6xl max-h-[75vh] overflow-y-auto bg-[linear-gradient(to_bottom_left,#464861,20%,#111628)]">
+          <DialogContent className="font-persian max-w-6xl min-h-max  bg-[linear-gradient(to_bottom_left,#464861,20%,#111628)]">
             <DialogHeader>
               <DialogTitle className="text-right border-b-2 border-gray-600 pt-2 pb-4 mr-4 text-sm font-semibold">
                 معرفی
@@ -99,98 +109,136 @@ export default function EcosystemPage() {
               </DialogTitle>
             </DialogHeader>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              {/* Right Column - Description */}
-              <div className="space-y-4 p-6 border-l-2 border-gray-600">
-                {/* Company Image */}
-                <div className="flex justify-between px-10 items-center text-3xl font-bold mb-4">
-                  {selectedCompany?.label || ""}
-                  {selectedCompany?.stageid && token?.accessToken ? (
-                    <img
-                      src={getImageUrl(selectedCompany.stageid)}
-                      alt={selectedCompany?.label || ""}
-                      className="w-12 h-12 object-cover rounded-2xl"
-                      onError={(e) => {
-                        // Hide image and show fallback on error
-                        e.currentTarget.style.display = "none";
-                        if (e.currentTarget.nextSibling) {
-                          (
-                            e.currentTarget.nextSibling as HTMLElement
-                          ).style.display = "flex";
-                        }
-                      }}
-                    />
-                  ) : null}
-                  <div
-                    className="w-24 h-24 rounded-full bg-gray-600 border-4 border-green-400 flex items-center justify-center"
-                    style={{
-                      display:
-                        selectedCompany?.stageid && token?.accessToken
-                          ? "none"
-                          : "flex",
-                    }}
-                  >
-                    <svg
-                      className="w-10 h-10 text-gray-400"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
-                      />
-                    </svg>
+            {isDialogLoading ? (
+              <div className="grid grid-cols-1 md:grid-cols-2 p-4 gap-6">
+                {/* Right Column - Loading Skeleton */}
+                <div className="space-y-4 p-6 border-l-2 border-gray-600">
+                  {/* Company Image & Title Skeleton */}
+                  <div className="flex justify-between px-10 items-center mb-4">
+                    <div className="h-8 bg-gray-600 rounded animate-pulse w-48"></div>
+                    <div className="w-12 h-12 bg-gray-600 rounded-2xl animate-pulse"></div>
+                  </div>
+                  {/* Description Skeleton */}
+                  <div className="p-4 rounded-lg space-y-2">
+                    <div className="h-4 bg-gray-600 rounded animate-pulse w-full"></div>
+                    <div className="h-4 bg-gray-600 rounded animate-pulse w-5/6"></div>
+                    <div className="h-4 bg-gray-600 rounded animate-pulse w-4/6"></div>
+                    <div className="h-4 bg-gray-600 rounded animate-pulse w-3/6"></div>
                   </div>
                 </div>
-                {selectedCompany?.description ? (
-                  <div className="p-4  rounded-lg">
-                    <p className="font-persian text-sm font-normal leading-relaxed">
-                      {selectedCompany.description}
-                    </p>
-                  </div>
-                ) : (
-                  <div className="text-gray-500 font-persian text-sm">
-                    توضیحات در دسترس نیست
-                  </div>
-                )}
-              </div>
-              {/* Left Column - Company Fields */}
-              <div className="space-y-2">
-                <h3 className="font-persian gap-1 flex text-sm font-semibold">
-                  اطلاعات
-                  <span>{selectedCompany?.category}</span>
-                </h3>
-                {selectedCompany?.fields &&
-                selectedCompany.fields.length > 0 ? (
+                {/* Left Column - Loading Skeleton */}
+                <div className="space-y-2">
+                  <div className="h-6 bg-gray-600 rounded animate-pulse w-32"></div>
                   <div className="space-y-3 px-2">
-                    {selectedCompany.fields.map((field, index) => (
+                    {Array.from({ length: 6 }).map((_, index) => (
                       <div
                         key={index}
                         className="flex justify-between items-center rounded-lg"
                       >
-                        <span className="font-persian flex items-center gap-1 text-sm font-light">
-                          <Hexagon className="text-pr-green h-4 w-4" />
-                          {field.N}:
-                        </span>
-                        <span className="text-right min-w-1/3">
-                          <span className="font-persian text-sm font-normal text-right">
-                                                   {handleValue(field.V)}
-                                                   {field.U && <span className="mr-1">({field.U})</span>}
-                                                 </span>
-                        </span>
+                        <div className="flex items-center gap-1">
+                          <div className="h-4 w-4 bg-gray-600 rounded animate-pulse"></div>
+                          <div className="h-4 bg-gray-600 rounded animate-pulse w-24"></div>
+                        </div>
+                        <div className="h-4 bg-gray-600 rounded animate-pulse w-20"></div>
                       </div>
                     ))}
                   </div>
-                ) : (
-                  <div className="text-gray-500 font-persian text-sm">
-                    اطلاعات تکمیلی در دسترس نیست
-                  </div>
-                )}
+                </div>
               </div>
-            </div>
+            ) : (
+              <div className="grid p-4 pb-6 grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Right Column - Description */}
+                <div className="space-y-4 p-6 border-l-2 border-gray-600">
+                  {/* Company Image */}
+                  <div className="flex justify-between px-10 items-center text-3xl font-bold mb-4">
+                    {selectedCompany?.label || ""}
+                    {selectedCompany?.stageid && token?.accessToken ? (
+                      <img
+                        src={getImageUrl(selectedCompany.stageid)}
+                        alt={selectedCompany?.label || ""}
+                        className="w-12 h-12 object-cover rounded-2xl"
+                        onError={(e) => {
+                          // Hide image and show fallback on error
+                          e.currentTarget.style.display = "none";
+                          if (e.currentTarget.nextSibling) {
+                            (
+                              e.currentTarget.nextSibling as HTMLElement
+                            ).style.display = "flex";
+                          }
+                        }}
+                      />
+                    ) : null}
+                    <div
+                      className="w-24 h-24 rounded-full bg-gray-600 border-4 border-pr-green flex items-center justify-center"
+                      style={{
+                        display:
+                          selectedCompany?.stageid && token?.accessToken
+                            ? "none"
+                            : "flex",
+                      }}
+                    >
+                      <svg
+                        className="w-10 h-10 text-gray-400"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  {selectedCompany?.description ? (
+                    <div className="p-4  rounded-lg">
+                      <p className="font-persian text-sm font-normal leading-relaxed">
+                        {selectedCompany.description}
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="text-gray-500 font-persian text-sm">
+                      توضیحات در دسترس نیست
+                    </div>
+                  )}
+                </div>
+                {/* Left Column - Company Fields */}
+                <div className="space-y-2">
+                  <h3 className="font-persian gap-1 flex text-sm font-semibold">
+                    اطلاعات
+                    <span>{selectedCompany?.category}</span>
+                  </h3>
+                  {selectedCompany?.fields &&
+                  selectedCompany.fields.length > 0 ? (
+                    <div className="space-y-3 px-2">
+                      {selectedCompany.fields.map((field, index) => (
+                        <div
+                          key={index}
+                          className="flex justify-between items-center rounded-lg"
+                        >
+                          <span className="font-persian flex items-center gap-1 text-sm font-light">
+                            <Hexagon className="text-pr-green h-4 w-4" />
+                            {field.N}:
+                          </span>
+                          <span className="text-right min-w-1/3">
+                            <span className="font-persian text-sm font-normal text-right">
+                                                     {handleValue(field.V)}
+                                                     {field.U && <span className="mr-1">({field.U})</span>}
+                                                   </span>
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="text-gray-500 font-persian text-sm">
+                      اطلاعات تکمیلی در دسترس نیست
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
           </DialogContent>
         </Dialog>
       </DashboardLayout>