diff --git a/dashboard-server/klaviyo-server/services/events.service.js b/dashboard-server/klaviyo-server/services/events.service.js
index 3a26fab..ec25d58 100644
--- a/dashboard-server/klaviyo-server/services/events.service.js
+++ b/dashboard-server/klaviyo-server/services/events.service.js
@@ -1527,7 +1527,82 @@ export class EventsService {
         prevPeriodEnd = prevRange.end;
       }
 
-      // Load both current and previous period data
+      // For refunds and cancellations, we need to fetch those specific events
+      if (metric === 'refunds' || metric === 'cancellations') {
+        const [currentEvents] = await Promise.all([
+          this.getEvents({
+            ...params,
+            startDate: periodStart.toISO(),
+            endDate: periodEnd.toISO(),
+            metricId: metric === 'refunds' ? METRIC_IDS.PAYMENT_REFUNDED : METRIC_IDS.CANCELED_ORDER
+          })
+        ]);
+
+        // Transform events
+        const transformedEvents = this._transformEvents(currentEvents.data || []);
+
+        // Initialize daily stats map with all dates in range using TimeManager's day start
+        const dailyStats = new Map();
+        let currentDate = periodStart;
+        while (currentDate <= periodEnd) {
+          const dateKey = currentDate.toFormat('yyyy-MM-dd');
+          dailyStats.set(dateKey, {
+            date: currentDate.toISO(),
+            timestamp: dateKey,
+            total: 0,
+            count: 0,
+            reasons: {},
+            items: []
+          });
+          currentDate = this.timeManager.getDayStart(currentDate.plus({ days: 1 }));
+        }
+
+        // Process events
+        for (const event of transformedEvents) {
+          const datetime = this.timeManager.toDateTime(event.attributes?.datetime);
+          if (!datetime) continue;
+
+          // Get the day start for this event's time
+          const dayStart = this.timeManager.getDayStart(datetime);
+          const dateKey = dayStart.toFormat('yyyy-MM-dd');
+          if (!dailyStats.has(dateKey)) continue;
+
+          const dayStats = dailyStats.get(dateKey);
+          const props = event.event_properties || {};
+          const amount = Number(metric === 'refunds' ? props.PaymentAmount : props.TotalAmount || 0);
+          const reason = props.CancelReason || props.OrderMessage || 'No reason provided';
+          const orderId = props.OrderId || props.FromOrder;
+
+          dayStats.total += amount;
+          dayStats.count++;
+          dayStats.reasons[reason] = (dayStats.reasons[reason] || 0) + 1;
+          dayStats.items.push({
+            orderId,
+            amount,
+            reason,
+            datetime: datetime.toISO()
+          });
+
+          dailyStats.set(dateKey, dayStats);
+        }
+
+        // Convert to array and sort by date
+        const stats = Array.from(dailyStats.values())
+          .sort((a, b) => a.date.localeCompare(b.date))
+          .map(day => ({
+            ...day,
+            [metric === 'refunds' ? 'refunds' : 'canceledOrders']: {
+              total: day.total,
+              count: day.count,
+              reasons: day.reasons,
+              items: day.items
+            }
+          }));
+
+        return stats;
+      }
+
+      // For other metrics, continue with existing logic
       const [currentResponse, prevResponse] = await Promise.all([
         this.getEvents({
           ...params,
diff --git a/dashboard/src/components/dashboard/StatCards.jsx b/dashboard/src/components/dashboard/StatCards.jsx
index f1e70c4..4c91dc9 100644
--- a/dashboard/src/components/dashboard/StatCards.jsx
+++ b/dashboard/src/components/dashboard/StatCards.jsx
@@ -1097,10 +1097,27 @@ const StatCards = ({
           }
         });
         const data = response.data.stats;
-        setCacheData(detailTimeRange, metric, data);
-        setDetailData(prev => ({ ...prev, [metric]: data }));
+        
+        // Transform the data to match the expected format
+        const transformedData = data.map(day => ({
+          ...day,
+          timestamp: day.timestamp,
+          refunds: metric === 'refunds' ? {
+            total: day.refunds?.total || 0,
+            count: day.refunds?.count || 0,
+            reasons: day.refunds?.reasons || {}
+          } : undefined,
+          canceledOrders: metric === 'cancellations' ? {
+            total: day.canceledOrders?.total || 0,
+            count: day.canceledOrders?.count || 0,
+            reasons: day.canceledOrders?.reasons || {}
+          } : undefined
+        }));
+
+        setCacheData(detailTimeRange, metric, transformedData);
+        setDetailData(prev => ({ ...prev, [metric]: transformedData }));
         setError(null);
-        return data;
+        return transformedData;
       }
 
       // For order range
@@ -1293,6 +1310,7 @@ const StatCards = ({
         case 'average_order':
           return <SkeletonChart type="line" />;
         case 'refunds':
+        case 'cancellations':
         case 'order_range':
         case 'pre_orders':
         case 'local_pickup':
@@ -1331,6 +1349,8 @@ const StatCards = ({
         return <MemoizedAverageOrderDetails data={cachedData} orderCount={orderCount} />;
       case 'refunds':
         return <MemoizedRefundDetails data={cachedData} />;
+      case 'cancellations':
+        return <MemoizedCancellationsDetails data={cachedData} />;
       case 'order_range':
         return <MemoizedOrderRangeDetails data={cachedData} />;
       case 'pre_orders':