diff --git a/dashboard/src/components/dashboard/MiniSalesChart.jsx b/dashboard/src/components/dashboard/MiniSalesChart.jsx
index d1f44d1..24d5ab3 100644
--- a/dashboard/src/components/dashboard/MiniSalesChart.jsx
+++ b/dashboard/src/components/dashboard/MiniSalesChart.jsx
@@ -23,45 +23,38 @@ import { AlertCircle, TrendingUp, DollarSign, ShoppingCart, Truck, PiggyBank, Ar
 import { formatCurrency, CustomTooltip, processData, StatCard } from "./SalesChart.jsx";
 
 const SkeletonChart = () => (
-  <div className="h-[230px] w-full bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm rounded-lg p-4">
-    <div className="h-full relative">
+  <div className="h-[216px]">
+    <div className="h-full w-full relative">
       {/* Grid lines */}
       {[...Array(5)].map((_, i) => (
         <div
           key={i}
-          className="absolute w-full h-px bg-slate-500"
+          className="absolute w-full h-px bg-slate-600"
           style={{ top: `${(i + 1) * 20}%` }}
         />
       ))}
       {/* Y-axis labels */}
       <div className="absolute left-0 top-0 bottom-0 w-8 flex flex-col justify-between py-4">
         {[...Array(5)].map((_, i) => (
-          <Skeleton key={i} className="h-3 w-6 bg-slate-500 rounded-sm" />
+          <Skeleton key={i} className="h-3 w-6 bg-slate-600 rounded-sm" />
         ))}
       </div>
       {/* X-axis labels */}
       <div className="absolute left-8 right-4 bottom-0 flex justify-between">
         {[...Array(6)].map((_, i) => (
-          <Skeleton key={i} className="h-3 w-8 bg-slate-500 rounded-sm" />
+          <Skeleton key={i} className="h-3 w-8 bg-slate-600 rounded-sm" />
         ))}
       </div>
       {/* Chart lines */}
       <div className="absolute inset-x-8 bottom-6 top-4">
         <div className="h-full w-full relative">
           <div
-            className="absolute inset-0 bg-slate-500 rounded-sm"
+            className="absolute inset-0 bg-slate-600 rounded-sm"
             style={{
               opacity: 0.5,
               clipPath: "polygon(0 50%, 100% 20%, 100% 100%, 0 100%)",
             }}
           />
-          <div
-            className="absolute inset-0 bg-slate-500 rounded-sm"
-            style={{
-              opacity: 0.3,
-              clipPath: "polygon(0 70%, 100% 40%, 100% 100%, 0 100%)",
-            }}
-          />
         </div>
       </div>
     </div>
@@ -135,28 +128,24 @@ const MiniStatCard = memo(({
 MiniStatCard.displayName = "MiniStatCard";
 
 const SkeletonCard = ({ colorScheme = "emerald" }) => (
-  <Card className={`w-full h-[150px] bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm`}>
+  <Card className="w-full h-[150px] bg-gradient-to-br from-slate-700 to-slate-600 backdrop-blur-sm">
     <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
       <CardTitle>
         <div className="space-y-2">
-          <Skeleton className={`h-4 w-24 bg-${colorScheme}-300/20`} />
+          <Skeleton className={`h-4 w-24 bg-${colorScheme}-300`} />
         </div>
       </CardTitle>
       <div className="relative p-2">
-        <div className={`absolute inset-0 rounded-full bg-${colorScheme}-300/20`} />
-        <div className="h-5 w-5 relative rounded-full bg-${colorScheme}-300/20" />
+        <div className={`absolute inset-0 rounded-full bg-${colorScheme}-300`} />
+        <Skeleton className={`h-5 w-5 bg-${colorScheme}-300 relative rounded-full`} />
       </div>
     </CardHeader>
     <CardContent className="p-4 pt-0">
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <Skeleton className={`h-8 w-32 bg-${colorScheme}-300/20`} />
-          <div className="flex justify-between items-center">
-            <div className="space-y-1">
-              <Skeleton className={`h-4 w-24 bg-${colorScheme}-300/20`} />
-            </div>
-            <Skeleton className={`h-6 w-16 bg-${colorScheme}-300/20 rounded-full`} />
-          </div>
+      <div className="space-y-2">
+        <Skeleton className={`h-8 w-20 bg-${colorScheme}-300`} />
+        <div className="flex justify-between items-center">
+          <Skeleton className={`h-4 w-24 bg-${colorScheme}-300`} />
+          <Skeleton className={`h-4 w-12 bg-${colorScheme}-300 rounded-full`} />
         </div>
       </div>
     </CardContent>