diff --git a/app/components/dashboard/d3-image-info.tsx b/app/components/dashboard/d3-image-info.tsx
index 7a9dc02..a1ccaf8 100644
--- a/app/components/dashboard/d3-image-info.tsx
+++ b/app/components/dashboard/d3-image-info.tsx
@@ -11,7 +11,7 @@ export type CompanyInfo = {
   costI : number,
   capacityI : number,
   revenueI : number,
-  cost : number | string, 
+  cost : number | string,
 };
 
 export type D3ImageInfoProps = {
@@ -46,7 +46,24 @@ const InfoBox = ({ company, style }: { company: CompanyInfo; style :any }) => {
 
 export function D3ImageInfo({ companies }: D3ImageInfoProps) {
   // Ensure we have exactly 6 companies
-  const displayCompanies = companies;
+
+  const sample = [
+    { id: "آب نیرو", name: "آب نیرو", imageUrl: "/abniro.png" },
+    { id: "بسپاران", name: "بسپاران", imageUrl: "/besparan.png" },
+    { id: "خوارزمی", name: "خوارزمی", imageUrl: "/khwarazmi.png" },
+    { id: "فراورش 1", name: "فراورش 1", imageUrl: "/faravash1.png" },
+    { id: "فراورش 2", name: "فراورش 2", imageUrl: "/faravash2.png" },
+    { id: "کیمیا", name: "کیمیا", imageUrl: "/kimia.png" }
+  ];
+  const merged = sample.map(company => {
+    const found = companies.find(item => item.id == company.id);
+    return found
+      ? found
+      : { ...company, cost: 0, capacity: 0, revenue: 0 };
+  });
+
+  const displayCompanies = merged;
+  console.log(displayCompanies)
 
   // Positions inside a 5x4 grid (col, row)
   // Layout keeps same visual logic: left/middle/right on two bands with spacing grid around
@@ -58,7 +75,7 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
     { col: 3, row: 3 ,  colI : 3, rowI : 4  , name : "آب نیرو"}, // middle bottom (image sits in row 3, info box goes to row 4)
     { col: 4, row: 3  ,  colI : 5 , rowI : 3 , name : "فراورش 2"}, // right - bottom band
   ];
-  
+
   return (
     <div className="w-full h-[500px] rounded-xl">
       <div dir="ltr" className="company-grid-container">
@@ -72,10 +89,10 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
               style={{ gridColumn: gp.col, gridRow: gp.row }}
             >
               <div className="company-image-containe">
-                <img 
-                  src={company.imageUrl} 
-                  alt={company.name} 
-                  className="company-image" 
+                <img
+                  src={company.imageUrl}
+                  alt={company.name}
+                  className="company-image"
                 />
               </div>
 
@@ -124,6 +141,7 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
           align-self : center;
           justify-self : center;
           padding : .2rem 1.2rem;
+          min-width : 8rem;
           background-color: transparent;
         }
 
diff --git a/app/components/dashboard/dashboard-custom-bar-chart.tsx b/app/components/dashboard/dashboard-custom-bar-chart.tsx
index 5130265..cb10668 100644
--- a/app/components/dashboard/dashboard-custom-bar-chart.tsx
+++ b/app/components/dashboard/dashboard-custom-bar-chart.tsx
@@ -1,5 +1,10 @@
 import React from "react";
 import { formatNumber } from "~/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "~/components/ui/tooltip"
 
 interface DataItem {
   label: string;
@@ -54,12 +59,27 @@ export function DashboardCustomBarChart({
               <div className="flex-row-reverse items-center gap-2 flex min-h-6 h-10 rounded-lg overflow-hidden">
                 {/* Animated bar */}
                 <div
-                  className={`h-auto gap-2 ${item.color} rounded-lg transition-all duration-1000 ease-out flex items-center justify-end px-2`}
+                  className={`h-auto gap-2 overflow-hidden ${item.color} rounded-lg transition-all duration-1000 ease-out flex items-center justify-end px-2`}
                   style={{ width: `${widthPercentage}%` }}
                 >
-                  <span className="text-[#3F415A] text-left font-persian font-medium text-sm py-1 w-max">
+                  { widthPercentage > 20 ? (
+                  <span className="text-[#3F415A] min-w-max text-left font-persian font-medium text-sm py-1 w-max">
                     {item.label}
                   </span>
+                  ) : (
+                  <Tooltip>
+                        <TooltipTrigger  className={`${item.color}`} asChild>
+                          <span className="text-[#3F415A]  text-left font-persian font-medium text-sm py-1">
+                           <span className="invisible">""</span>
+                                            </span>
+
+                        </TooltipTrigger>
+                        <TooltipContent className={`${item.color} ${item.color.replace("bg","fill")}`}>
+                          <p className="font-persian text-sm">{item.label}</p>
+                        </TooltipContent>
+
+                      </Tooltip>
+                ) }
                 </div>
                   <span className="text-white font-bold text-base">
                     {formatNumber(item.value)}
diff --git a/app/components/ui/tooltip.tsx b/app/components/ui/tooltip.tsx
index fc97fa5..811f42b 100644
--- a/app/components/ui/tooltip.tsx
+++ b/app/components/ui/tooltip.tsx
@@ -52,7 +52,7 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className={cn("bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",className)} />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )