diff --git a/dashboard/src/App.jsx b/dashboard/src/App.jsx
index 3e7c2f8..e5b8c0a 100644
--- a/dashboard/src/App.jsx
+++ b/dashboard/src/App.jsx
@@ -89,25 +89,25 @@ const DashboardLayout = () => {
         <Navigation />
         <div className="p-4 space-y-4">
           <div className="grid grid-cols-1 xl:grid-cols-6 gap-4">
-            <div className="2xl:col-span-4 col-span-6">
+            <div className="xl:col-span-4 col-span-6">
               <div className="space-y-4 h-full w-full">
                 <StatCards />
               </div>
             </div>
-            <div className="xl:col-span-2 col-span-6 h-[530px] 2xl:block hidden">
+            <div className="xl:col-span-2 col-span-6 h-[500px] xl:h-[643px] 2xl:h-[510px] lg:hidden xl:block">
               <div className="h-full">
                 <div className="h-full"><EventFeed /></div>
               </div>
             </div>
           </div>
           <div className="grid grid-cols-12 gap-4">
-            <div className="col-span-12 lg:col-span-6 xl:col-span-6 2xl:hidden h-[740px]">
+            <div className="hidden lg:col-span-6 lg:block xl:hidden h-[740px]">
               <EventFeed />
             </div>
-            <div className="col-span-12 lg:col-span-6 xl:col-span-6 2xl:col-span-4 h-[740px]">
+            <div className="col-span-12 lg:col-span-6 xl:col-span-4 h-[740px]">
               <ProductGrid />
             </div>
-            <div className="col-span-12 2xl:col-span-8 h-full w-full flex">
+            <div className="col-span-12 xl:col-span-8 h-full w-full flex">
               <SalesChart className="w-full h-full"/>
             </div>
           </div>
diff --git a/dashboard/src/components/dashboard/StatCards.jsx b/dashboard/src/components/dashboard/StatCards.jsx
index fbb6345..7bd8170 100644
--- a/dashboard/src/components/dashboard/StatCards.jsx
+++ b/dashboard/src/components/dashboard/StatCards.jsx
@@ -69,6 +69,7 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
 
 const formatCurrency = (value, minimumFractionDigits = 0) => {
   if (!value || isNaN(value)) return "$0";
@@ -939,7 +940,8 @@ const StatCard = ({
   onClick,
   info,
   onDetailsClick,
-  isLoading = false
+  isLoading = false,
+  progress
 }) => (
   <Card 
     className={`${className} ${onClick || onDetailsClick ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors" : ""}`} 
@@ -966,22 +968,25 @@ const StatCard = ({
           <Skeleton className="h-4 w-24" />
         </>
       ) : (
-        <>
-          <div className={`text-2xl font-bold ${colorClass}`}>
-            {valuePrefix}{value}{valueSuffix}
-          </div>
-          {description && (
-            <div className="text-sm text-muted-foreground mt-2 items-center gap-2 flex">
-              {description}
-              {trend && (
-                <span className={`flex items-center gap-1 ${trend === 'up' ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'}`}>
-                  {trend === 'up' ? <ArrowUp className="w-4 h-4" /> : <ArrowDown className="w-4 h-4" />}
-                  {trendPrefix}{trendValue}{trendSuffix}
-                </span>
-              )}
+        <div className="space-y-2">
+          <div>
+            <div className={`text-2xl font-bold ${colorClass}`}>
+              {valuePrefix}{value}{valueSuffix}
             </div>
-          )}
-        </>
+            {description && (
+              <div className="text-sm text-muted-foreground mt-2 items-center gap-2 flex">
+                {description}
+                {trend && (
+                  <span className={`flex items-center gap-1 ${trend === 'up' ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'}`}>
+                    {trend === 'up' ? <ArrowUp className="w-4 h-4" /> : <ArrowDown className="w-4 h-4" />}
+                    {trendPrefix}{trendValue}{trendSuffix}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+     
+        </div>
       )}
     </CardContent>
   </Card>
@@ -1229,6 +1234,7 @@ const StatCards = ({
       setDetailDataLoading(prev => ({ ...prev, [metric]: false }));
     }
   }, [timeRange, startDate, endDate, shouldUseLast30Days, setCacheData, getCacheData]);
+
   // Corrected preloadDetailData function
   const preloadDetailData = useCallback(() => {
     const metrics = [
@@ -1595,15 +1601,16 @@ const StatCards = ({
         </div>
       </CardHeader>
       <CardContent className="p-6 pt-0">
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-3 2xl:grid-cols-4 gap-2 md:gap-3">
           <StatCard
             title="Total Revenue"
             value={formatCurrency(stats?.revenue || 0)}
             description={
               stats?.periodProgress < 100
-                ? `${stats.periodProgress.toFixed(1)}% complete • Projected: ${formatCurrency(stats.projectedRevenue)}`
+                ? <span><span className="md:hidden">Proj: </span><span className="hidden md:inline">Projected: </span>{formatCurrency(stats.projectedRevenue)}</span>
                 : `Previous: ${formatCurrency(stats.prevPeriodRevenue)}`
             }
+            progress={stats?.periodProgress < 100 ? stats.periodProgress : undefined}
             trend={revenueTrend?.trend}
             trendValue={revenueTrend?.value ? formatPercentage(revenueTrend.value) : null}
             colorClass="text-green-600 dark:text-green-400"