diff --git a/components/bar-chart.tsx b/components/bar-chart.tsx
index 23170a4..d99e1a5 100644
--- a/components/bar-chart.tsx
+++ b/components/bar-chart.tsx
@@ -1,10 +1,20 @@
 "use client"
 
-import { Bar, BarChart, LabelList, XAxis, YAxis, Cell } from "recharts"
-import { cn } from "@/lib/utils"
-import { ChartContainer, type ChartConfig } from "@/components/ui/chart"
+import { Bar, BarChart, LabelList, XAxis, YAxis, Cell } from "recharts";
+import { cn } from "@/lib/utils";
 
-const COLORS = ["#4ade80", "#60a5fa", "#f87171", "#fb923c", "#c084fc"]
+import {
+  ChartContainer,
+  type ChartConfig,
+} from "@/components/ui/chart";
+
+const COLORS = [
+  "#4ade80",
+  "#60a5fa",
+  "#f87171",
+  "#fb923c",
+  "#c084fc",
+]
 
 const chartConfig = {
   total_seconds: {
@@ -23,9 +33,8 @@ interface MyBarChartProps {
   className?: string
 }
 
-interface MyBarChartStateProps {
+interface MyBarChartSkeletonProps {
   className?: string
-  bars?: number
 }
 
 export function MyBarChart({ data, className }: MyBarChartProps) {
@@ -74,11 +83,14 @@ export function MyBarChart({ data, className }: MyBarChartProps) {
   )
 }
 
-export function MyBarChartSkeleton({ className, bars = 5 }: MyBarChartStateProps) {
-  const fakeData = Array.from({ length: bars }).map((_, i) => ({
-    language: String.fromCharCode(97 + i),
-    total_seconds: 100000 - i * 15000,
-  }))
+export function MyBarChartSkeleton({ className }: MyBarChartSkeletonProps) {
+  const fakeData = [
+    { language: "a", total_seconds: 102000 },
+    { language: "b", total_seconds: 59000 },
+    { language: "c", total_seconds: 41000 },
+    { language: "d", total_seconds: 28000 },
+    { language: "e", total_seconds: 17000 },
+  ]
 
   return (
     <ChartContainer
@@ -86,28 +98,61 @@ export function MyBarChartSkeleton({ className, bars = 5 }: MyBarChartStateProps
       className={cn("w-full overflow-visible animate-pulse", className)}
       style={{ height: fakeData.length * 28 }}
     >
-      <BarChart data={fakeData} layout="vertical" margin={{ right: 0, left: 0, top: 0, bottom: 0 }} barSize={20}>
+      <BarChart
+        data={fakeData}
+        layout="vertical"
+        margin={{ right: 0, left: 0, top: 0, bottom: 0 }}
+        barSize={20}
+        barCategoryGap="10%"
+      >
         <YAxis dataKey="language" type="category" hide />
         <XAxis dataKey="total_seconds" type="number" hide />
-        <Bar dataKey="total_seconds" layout="vertical" fill="#6b7280" radius={4} opacity={0.3} isAnimationActive={false} />
+        <Bar
+          dataKey="total_seconds"
+          layout="vertical"
+          fill="#6b7280"
+          radius={4}
+          opacity={0.3}
+          isAnimationActive={false}
+        />
       </BarChart>
     </ChartContainer>
   )
 }
 
-export function MyBarChartError({ className, bars = 5 }: MyBarChartStateProps) {
-  const fakeData = Array.from({ length: bars }).map((_, i) => ({
-    language: String.fromCharCode(97 + i),
-    total_seconds: 100000 - i * 15000,
-  }))
+export function MyBarChartError({ className }: MyBarChartSkeletonProps) {
+  const fakeData = [
+    { language: "a", total_seconds: 102000 },
+    { language: "b", total_seconds: 59000 },
+    { language: "c", total_seconds: 41000 },
+    { language: "d", total_seconds: 28000 },
+    { language: "e", total_seconds: 17000 },
+  ]
 
   return (
     <div className={cn("relative w-full overflow-hidden", className)} style={{ height: fakeData.length * 28 }}>
-      <ChartContainer config={chartConfig} className="w-full overflow-visible" style={{ height: fakeData.length * 28 }}>
-        <BarChart data={fakeData} layout="vertical" margin={{ right: 0, left: 0, top: 0, bottom: 0 }} barSize={20}>
+      <ChartContainer
+        config={chartConfig}
+        className="w-full overflow-visible"
+        style={{ height: fakeData.length * 28 }}
+      >
+        <BarChart
+          data={fakeData}
+          layout="vertical"
+          margin={{ right: 0, left: 0, top: 0, bottom: 0 }}
+          barSize={20}
+          barCategoryGap="10%"
+        >
           <YAxis dataKey="language" type="category" hide />
           <XAxis dataKey="total_seconds" type="number" hide />
-          <Bar dataKey="total_seconds" layout="vertical" fill="#7f1d1d" radius={4} opacity={0.6} isAnimationActive={false} />
+          <Bar
+            dataKey="total_seconds"
+            layout="vertical"
+            fill="#7f1d1d"
+            radius={4}
+            opacity={0.6}
+            isAnimationActive={false}
+          />
         </BarChart>
       </ChartContainer>
       <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
diff --git a/components/wakatime.tsx b/components/wakatime.tsx
index 3046bcc..ca19dbb 100644
--- a/components/wakatime.tsx
+++ b/components/wakatime.tsx
@@ -1,4 +1,4 @@
-import { MyBarChart, MyBarChartError, MyBarChartSkeleton } from "./bar-chart"
+import { MyBarChart, MyBarChartError } from "./bar-chart";
 
 type WakatimeLanguage = {
   name: string
@@ -7,64 +7,27 @@ type WakatimeLanguage = {
 }
 
 export async function Wakatime({ className }: { className?: string }) {
-  const response = await fetch(
-    "https://wakatime.com/api/v1/users/alixz/stats/last_30_days",
-    {
-      method: "GET",
-      headers: {
-        Authorization: `Basic ${process.env.WAKATIME}`,
-      },
-      next: { revalidate: 3600 },
-    }
-  )
+  const response = await fetch("https://wakatime.com/api/v1/users/alixz/stats/last_30_days", {
+    method: "GET",
+    headers: {
+      "Authorization": `Basic ${process.env.WAKATIME}`
+    },
+    next: { revalidate: 3600 }
+  });
 
-  if (!response.ok) {
-    return (
-      <div className={className}>
-        <MyBarChartError bars={5} />
-        <div className="h-6" />
-        <MyBarChartError bars={2} />
-      </div>
-    )
+  if (!response.ok) return <MyBarChartError className={className} />;
+
+  const res = await response.json();
+
+  if (!res?.data?.languages?.length) {
+    return <MyBarChartError className={className} />;
   }
 
-  const res = await response.json()
-  const stats = res?.data
-
-  if (!stats?.languages?.length) {
-    return (
-      <div className={className}>
-        <MyBarChartError bars={5} />
-        <div className="h-6" />
-        <MyBarChartError bars={2} />
-      </div>
-    )
-  }
-
-  const languagesData = stats.languages.slice(0, 5).map((lang: WakatimeLanguage) => ({
+  const data = res.data.languages.slice(0, 5).map((lang: WakatimeLanguage) => ({
     language: lang.name,
     total_seconds: lang.total_seconds,
     label: `${lang.name} (${lang.text})`,
-  }))
+  }));
 
-  const additionsData = [
-    {
-      language: "Human",
-      total_seconds: stats.human_additions,
-      label: `Human (${stats.human_additions.toLocaleString()} lines written)`,
-    },
-    {
-      language: "AI",
-      total_seconds: stats.ai_additions,
-      label: `AI (${stats.ai_additions.toLocaleString()} lines written)`,
-    },
-  ]
-
-  return (
-    <div className={className}>
-      <MyBarChart data={languagesData} />
-      <div className="h-6" />
-      <MyBarChart data={additionsData} />
-    </div>
-  )
+  return <MyBarChart className={className} data={data} />;
 }
\ No newline at end of file