diff --git a/dashboard/src/components/dashboard/MiniStatCards.jsx b/dashboard/src/components/dashboard/MiniStatCards.jsx
index 3bbc7f2..306e1bc 100644
--- a/dashboard/src/components/dashboard/MiniStatCards.jsx
+++ b/dashboard/src/components/dashboard/MiniStatCards.jsx
@@ -458,7 +458,7 @@ const MiniStatCards = ({
     <>
       <div className="grid grid-cols-4 gap-2">
         <StatCard
-          title="Total Revenue"
+          title="Today's Revenue"
           value={formatCurrency(stats?.revenue || 0)}
           description={
             stats?.periodProgress < 100 ? (
@@ -490,7 +490,7 @@ const MiniStatCards = ({
         />
 
         <StatCard
-          title="Orders"
+          title="Today's Orders"
           value={stats?.orderCount}
           description={`${stats?.itemCount} total items`}
           trend={orderTrend?.trend}
@@ -508,7 +508,7 @@ const MiniStatCards = ({
         />
 
         <StatCard
-          title="AOV"
+          title="Today's AOV"
           value={stats?.averageOrderValue?.toFixed(2)}
           valuePrefix="$"
           description={`${stats?.averageItemsPerOrder?.toFixed(1)} items per order`}
@@ -527,7 +527,7 @@ const MiniStatCards = ({
         />
 
         <StatCard
-          title="Shipped"
+          title="Shipped Today"
           value={stats?.shipping?.shippedCount || 0}
           description={`${stats?.shipping?.locations?.total || 0} locations`}
           colorClass="text-orange-200"
@@ -547,11 +547,23 @@ const MiniStatCards = ({
         open={!!selectedMetric}
         onOpenChange={() => setSelectedMetric(null)}
       >
-        <DialogContent className="w-[80vw] h-[80vh] max-w-none p-0">
+        <DialogContent className={`w-[80vw] h-[80vh] max-w-none p-0 ${
+          selectedMetric === 'revenue' ? 'bg-emerald-50 dark:bg-emerald-950/30' :
+          selectedMetric === 'orders' ? 'bg-blue-50 dark:bg-blue-950/30' :
+          selectedMetric === 'average_order' ? 'bg-violet-50 dark:bg-violet-950/30' :
+          selectedMetric === 'shipping' ? 'bg-orange-50 dark:bg-orange-950/30' :
+          'bg-white dark:bg-gray-950'
+        } backdrop-blur-md border-none`}>
           <div className="transform scale-[2] origin-top-left h-[40vh] w-[40vw]">
             <div className="h-full w-full p-6">
               <DialogHeader>
-                <DialogTitle>
+                <DialogTitle className={`text-2xl font-bold ${
+                  selectedMetric === 'revenue' ? 'text-emerald-900 dark:text-emerald-100' :
+                  selectedMetric === 'orders' ? 'text-blue-900 dark:text-blue-100' :
+                  selectedMetric === 'average_order' ? 'text-violet-900 dark:text-violet-100' :
+                  selectedMetric === 'shipping' ? 'text-orange-900 dark:text-orange-100' :
+                  'text-gray-900 dark:text-gray-100'
+                }`}>
                   {selectedMetric
                     ? `${selectedMetric
                         .split("_")
@@ -572,7 +584,13 @@ const MiniStatCards = ({
                         />
                         {selectedMetric === "orders" && (
                           <div className="mt-8">
-                            <h3 className="text-lg font-medium mb-4">
+                            <h3 className={`text-lg font-medium mb-4 ${
+                              selectedMetric === 'revenue' ? 'text-emerald-900 dark:text-emerald-200' :
+                              selectedMetric === 'orders' ? 'text-blue-900 dark:text-blue-200' :
+                              selectedMetric === 'average_order' ? 'text-violet-900 dark:text-violet-200' :
+                              selectedMetric === 'shipping' ? 'text-orange-900 dark:text-orange-200' :
+                              'text-gray-900 dark:text-gray-200'
+                            }`}>
                               Hourly Distribution
                             </h3>
                             <MiniSkeletonChart type="bar" />
@@ -584,19 +602,30 @@ const MiniStatCards = ({
                 ) : (
                   <div className="h-full">
                     {selectedMetric === "revenue" && (
-                      <RevenueDetails data={detailData.revenue || []} />
+                      <RevenueDetails 
+                        data={detailData.revenue || []} 
+                        colorScheme="emerald"
+                      />
                     )}
                     {selectedMetric === "orders" && (
-                      <OrdersDetails data={detailData.orders || []} />
+                      <OrdersDetails 
+                        data={detailData.orders || []} 
+                        colorScheme="blue"
+                      />
                     )}
                     {selectedMetric === "average_order" && (
                       <AverageOrderDetails
                         data={detailData.average_order || []}
                         orderCount={stats.orderCount}
+                        colorScheme="violet"
                       />
                     )}
                     {selectedMetric === "shipping" && (
-                      <ShippingDetails data={[stats]} timeRange={timeRange} />
+                      <ShippingDetails 
+                        data={[stats]} 
+                        timeRange={timeRange}
+                        colorScheme="orange"
+                      />
                     )}
                   </div>
                 )}