diff --git a/resources/js/pages/admin/Analysis.vue b/resources/js/pages/admin/Analysis.vue
index aeeef09..533a003 100644
--- a/resources/js/pages/admin/Analysis.vue
+++ b/resources/js/pages/admin/Analysis.vue
@@ -945,13 +945,13 @@ watch([startDate, endDate], () => {
             <div class="grid gap-4 md:grid-cols-2" :style="{ order: sectionOrder.revenueByChannel ?? 99 }">
                 <!-- Revenue By Channel Chart -->
                 <Card v-if="can('analysis.revenue')" class="py-4 sm:py-0">
-                    <CardHeader class="flex flex-row items-center justify-between border-b p-0!">
-                        <div class="flex flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+                    <CardHeader class="flex flex-col items-stretch border-b p-0! sm:flex-row">
+                        <div class="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
                             <CardTitle>Pendapatan per Channel</CardTitle>
                         </div>
-                        <div class="flex flex-wrap">
+                        <div class="flex flex-col sm:flex-row">
                             <div v-for="item in revenueByChannelData" :key="item.channel"
-                                class="flex flex-col justify-center gap-1 border-l px-4 py-3 text-right sm:px-6 sm:py-4">
+                                class="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-4">
                                 <span class="text-xs text-muted-foreground">
                                     {{ item.label }}
                                 </span>
@@ -983,13 +983,13 @@ watch([startDate, endDate], () => {
 
                 <!-- Revenue By Payment Type Chart -->
                 <Card v-if="can('analysis.revenue')" class="py-4 sm:py-0">
-                    <CardHeader class="flex flex-row items-center justify-between border-b p-0!">
-                        <div class="flex flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+                    <CardHeader class="flex flex-col items-stretch border-b p-0! sm:flex-row">
+                        <div class="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
                             <CardTitle>Pendapatan per Pembayaran</CardTitle>
                         </div>
-                        <div class="flex flex-wrap">
+                        <div class="flex flex-col sm:flex-row">
                             <div v-for="item in revenueByPaymentType" :key="item.payment_type"
-                                class="flex flex-col justify-center gap-1 border-l px-4 py-3 text-right sm:px-6 sm:py-4">
+                                class="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-4">
                                 <span class="text-xs text-muted-foreground">
                                     {{ item.label }}
                                 </span>