diff --git a/docs/ensrainbow.io/src/components/molecules/BarChart.tsx b/docs/ensrainbow.io/src/components/molecules/BarChart.tsx
index 318ba0f901..14592182fd 100644
--- a/docs/ensrainbow.io/src/components/molecules/BarChart.tsx
+++ b/docs/ensrainbow.io/src/components/molecules/BarChart.tsx
@@ -23,50 +23,38 @@ export default function BarChart({ data, title, subtitle, footnote }: BarChartPr
         {subtitle && <p style={{ color: "#666", marginBottom: "1.5rem" }}>{subtitle}</p>}
 
         <div className="w-full flex flex-col gap-4 md:gap-6">
-          {data.map((item: BarChartData, index: number) => (
-            <Fragment key={`barChartFragment#${index}`}>
-              <div key={`barChartFull#${index}`} className="flex flex-col gap-2">
-                <div
-                  key={`barChartLabel#${index}`}
-                  style={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                  }}
-                >
+          {data.map((item: BarChartData, index: number) => {
+            const percent = (item.value / maxValue) * 100;
+            const percentLabel = `${index === data.length - 1 ? "+" : ""}${percent}%`;
+
+            return (
+              <Fragment key={`barChartFragment#${index}`}>
+                <div key={`barChartFull#${index}`} className="flex flex-col gap-2">
                   <span className="text-sm md:text-base leading-7 font-semibold">{item.label}</span>
+                  <div key={`barChartBar#${index}`} className="flex items-center gap-3">
+                    <div
+                      className="relative h-7 flex-1 min-w-0 rounded-lg overflow-hidden"
+                      style={{ backgroundColor: "#F0F0F0" }}
+                    >
+                      <div
+                        key={`barChartRainbowBar#${index}`}
+                        className="absolute inset-y-0 left-0 rounded-lg transition-[width] duration-500 ease-out"
+                        style={{
+                          width: `${percent}%`,
+                          background: item.color,
+                          backgroundSize: "cover",
+                        }}
+                      />
+                    </div>
+                    <span className="shrink-0 w-10 text-right text-xs leading-4 font-semibold tabular-nums">
+                      {percentLabel}
+                    </span>
+                  </div>
                 </div>
-                <div
-                  key={`barChartBar#${index}`}
-                  style={{
-                    position: "relative",
-                    height: "28px",
-                    backgroundColor: "#F0F0F0",
-                    borderRadius: "8px",
-                    overflow: "hidden",
-                  }}
-                >
-                  <p className="absolute right-0 top-[calc(50%-8px)] text-xs leading-4 font-semibold px-2">
-                    {index === data.length - 1 && "+"}
-                    {(item.value / maxValue) * 100}%
-                  </p>
-                  <div
-                    key={`barChartRainbowBar#${index}`}
-                    style={{
-                      position: "absolute",
-                      height: "100%",
-                      width: `calc(${(item.value / maxValue) * 100}% - ${index === data.length - 1 ? "30" : "25"}px)`,
-                      background: item.color,
-                      backgroundSize: "cover",
-                      borderRadius: "8px",
-                      transition: "all 500ms ease-out",
-                    }}
-                  />
-                </div>
-              </div>
-              {index < data.length - 1 && <div className="bg-gray-200 h-px self-stretch" />}
-            </Fragment>
-          ))}
+                {index < data.length - 1 && <div className="bg-gray-200 h-px self-stretch" />}
+              </Fragment>
+            );
+          })}
         </div>
       </div>
       {footnote && <p className="text-sm leading-5 font-normal text-gray-500 px-4">{footnote}</p>}