diff --git a/resources/js/pages/analysis.tsx b/resources/js/pages/analysis.tsx
index eeff285..218d636 100644
--- a/resources/js/pages/analysis.tsx
+++ b/resources/js/pages/analysis.tsx
@@ -260,7 +260,7 @@ export default function Analisa() {
                 </div>
 
                 {/* Stats Grid */}
-                <div className="grid grid-cols-1 gap-2 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs @sm/main:grid-cols-2 @3xl/main:grid-cols-3 @5xl/main:grid-cols-4 @7xl/main:grid-cols-6 dark:*:data-[slot=card]:bg-card">
+                <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs @sm/main:grid-cols-2 @3xl/main:grid-cols-3 @5xl/main:grid-cols-4 @7xl/main:grid-cols-6 dark:*:data-[slot=card]:bg-card">
                     {[
                         {
                             title: 'Total Penjualan',
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
index 665dee9..148a3c6 100644
--- a/resources/js/pages/dashboard.tsx
+++ b/resources/js/pages/dashboard.tsx
@@ -158,13 +158,13 @@ export default function Dashboard() {
         <>
             <Head title="Dasbor" />
             <div
-                className={`@container/main flex h-full min-h-screen flex-1 flex-col gap-2 overflow-x-auto rounded-xl p-3 transition-colors duration-1000`}
+                className={`@container/main flex h-full min-h-screen flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-3 transition-colors duration-1000`}
             >
                 {/* Welcome Section */}
                 <WelcomeCard user={auth.user} time={time} theme={theme} />
 
                 {/* Stats Grid */}
-                <div className="grid grid-cols-1 gap-2 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs @sm/main:grid-cols-2 @3xl/main:grid-cols-3 @5xl/main:grid-cols-4 @7xl/main:grid-cols-6 dark:*:data-[slot=card]:bg-card">
+                <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs @sm/main:grid-cols-2 @3xl/main:grid-cols-3 @5xl/main:grid-cols-4 @7xl/main:grid-cols-6 dark:*:data-[slot=card]:bg-card">
                     {statItems.map((item, index) => (
                         <div
                             key={index}
@@ -185,7 +185,7 @@ export default function Dashboard() {
                     data={salesByHour}
                 />
 
-                <div className="grid grid-cols-1 gap-2 lg:grid-cols-3">
+                <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
                     <CustomPieChart
                         title="Metode Pembayaran"
                         description="Distribusi transaksi berdasarkan metode pembayaran yang digunakan."
@@ -206,7 +206,7 @@ export default function Dashboard() {
                     />
                 </div>
 
-                <div className="grid grid-cols-1 gap-2 lg:grid-cols-2">
+                <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
                     <CustomBarChart
                         title="Top 5 Produk"
                         description="Daftar produk dengan volume penjualan tertinggi."
