diff --git a/components/charts/AsalDaerahBeasiswaChart.tsx b/components/charts/AsalDaerahBeasiswaChart.tsx
index d99a9e7..0ce40a7 100644
--- a/components/charts/AsalDaerahBeasiswaChart.tsx
+++ b/components/charts/AsalDaerahBeasiswaChart.tsx
@@ -79,7 +79,7 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -99,14 +99,14 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
       },
       style: {
         fontSize: '14px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       },
       offsetX: 10,
     },
     stroke: {
       show: true,
       width: 1,
-      colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
+      colors: [theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'],
     },
     xaxis: {
       categories: [...new Set(data.map(item => item.kabupaten))].sort(),
@@ -115,13 +115,13 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       }
     },
@@ -131,13 +131,13 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '14px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         },
         maxWidth: 200,
       },
@@ -155,7 +155,7 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
     },
     colors: ['#3B82F6'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -221,13 +221,13 @@ export default function AsalDaerahBeasiswaChart({ selectedYear, selectedJenisBea
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[600px] w-full">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           <Chart
             options={chartOptions}
             series={series}
             type="bar"
             height="100%"
-            width="90%"
+            width="100%"
           />
         </div>
       </CardContent>
diff --git a/components/charts/AsalDaerahChart.tsx b/components/charts/AsalDaerahChart.tsx
index 8a4fd6c..1fe2894 100644
--- a/components/charts/AsalDaerahChart.tsx
+++ b/components/charts/AsalDaerahChart.tsx
@@ -262,13 +262,13 @@ export default function AsalDaerahChart() {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] w-full">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           <Chart
             options={options}
             series={series}
             type="bar"
             height="100%"
-            width="90%"
+            width="100%"
           />
         </div>
       </CardContent>
diff --git a/components/charts/AsalDaerahLulusChart.tsx b/components/charts/AsalDaerahLulusChart.tsx
index 0babd45..c31f02f 100644
--- a/components/charts/AsalDaerahLulusChart.tsx
+++ b/components/charts/AsalDaerahLulusChart.tsx
@@ -38,7 +38,7 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
       toolbar: {
         show: true,
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -56,14 +56,14 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
       },
       style: {
         fontSize: '14px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       },
       offsetX: 10,
     },
     stroke: {
       show: true,
       width: 1,
-      colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
+      colors: [theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'],
     },
     xaxis: {
       categories: [],
@@ -72,13 +72,13 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       }
     },
@@ -88,13 +88,13 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '14px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         },
         maxWidth: 200,
       },
@@ -112,7 +112,7 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
     },
     colors: ['#3B82F6'], // Blue color for bars
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -128,13 +128,13 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
       ...prev,
       chart: {
         ...prev.chart,
-        background: currentTheme === 'dark' ? '#0F172B' : '#fff',
+        background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       },
       dataLabels: {
         ...prev.dataLabels,
         style: {
           ...prev.dataLabels?.style,
-          colors: [currentTheme === 'dark' ? '#fff' : '#000']
+          colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
         }
       },
       xaxis: {
@@ -143,14 +143,14 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
           ...prev.xaxis?.title,
           style: {
             ...prev.xaxis?.title?.style,
-            color: currentTheme === 'dark' ? '#fff' : '#000'
+            color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         labels: {
           ...prev.xaxis?.labels,
           style: {
             ...prev.xaxis?.labels?.style,
-            colors: currentTheme === 'dark' ? '#fff' : '#000'
+            colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         }
       },
@@ -160,20 +160,20 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
           ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
           style: {
             ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
-            color: currentTheme === 'dark' ? '#fff' : '#000'
+            color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         labels: {
           ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
           style: {
             ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
-            colors: currentTheme === 'dark' ? '#fff' : '#000'
+            colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         }
       },
       tooltip: {
         ...prev.tooltip,
-        theme: currentTheme === 'dark' ? 'dark' : 'light'
+        theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light'
       }
     }));
   }, [theme, systemTheme]);
@@ -267,13 +267,13 @@ export default function AsalDaerahLulusChart({ selectedYear }: AsalDaerahLulusCh
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[600px] w-full">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           <Chart
             options={options}
             series={series}
             type="bar"
             height="100%"
-            width="90%"
+            width="100%"
           />
         </div>
       </CardContent>
diff --git a/components/charts/AsalDaerahPerAngkatanChart.tsx b/components/charts/AsalDaerahPerAngkatanChart.tsx
index c8ee3da..d69ed9e 100644
--- a/components/charts/AsalDaerahPerAngkatanChart.tsx
+++ b/components/charts/AsalDaerahPerAngkatanChart.tsx
@@ -308,7 +308,7 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] w-full">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           <Chart
             options={options}
             series={series}
diff --git a/components/charts/AsalDaerahPrestasiChart.tsx b/components/charts/AsalDaerahPrestasiChart.tsx
index d5892b9..8dd5533 100644
--- a/components/charts/AsalDaerahPrestasiChart.tsx
+++ b/components/charts/AsalDaerahPrestasiChart.tsx
@@ -79,7 +79,7 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -99,14 +99,14 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
       },
       style: {
         fontSize: '14px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       },
       offsetX: 10,
     },
     stroke: {
       show: true,
       width: 1,
-      colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
+      colors: [theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'],
     },
     xaxis: {
       categories: [...new Set(data.map(item => item.kabupaten))].sort(),
@@ -115,13 +115,13 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       }
     },
@@ -131,13 +131,13 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '14px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         },
         maxWidth: 200,
       },
@@ -155,7 +155,7 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
     },
     colors: ['#3B82F6'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -221,13 +221,13 @@ export default function AsalDaerahPrestasiChart({ selectedYear, selectedJenisPre
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[600px] w-full">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           <Chart
             options={chartOptions}
             series={series}
             type="bar"
             height="100%"
-            width="90%"
+            width="100%"
           />
         </div>
       </CardContent>
diff --git a/components/charts/AsalDaerahStatusChart.tsx b/components/charts/AsalDaerahStatusChart.tsx
index 515a977..0527254 100644
--- a/components/charts/AsalDaerahStatusChart.tsx
+++ b/components/charts/AsalDaerahStatusChart.tsx
@@ -22,7 +22,7 @@ interface Props {
 }
 
 export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<AsalDaerahStatusData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -77,7 +77,7 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
       toolbar: {
         show: true,
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -95,7 +95,7 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       },
       offsetX: 10,
     },
@@ -111,13 +111,13 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
     },
@@ -127,13 +127,13 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       }
     },
@@ -150,12 +150,12 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     colors: ['#008FFB'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -224,7 +224,7 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
               options={chartOptions}
diff --git a/components/charts/IPKBeasiswaChart.tsx b/components/charts/IPKBeasiswaChart.tsx
index 88ae48e..247f87e 100644
--- a/components/charts/IPKBeasiswaChart.tsx
+++ b/components/charts/IPKBeasiswaChart.tsx
@@ -44,7 +44,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       zoom: {
         enabled: true,
         type: 'x',
@@ -59,7 +59,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
     markers: {
       size: 5,
       strokeWidth: 2,
-      strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'],
+      strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'],
       colors: ['#3B82F6'],
       hover: {
         size: 7
@@ -86,22 +86,22 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     yaxis: {
@@ -110,13 +110,13 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         },
         formatter: function (val: number) {
           return val.toFixed(2);
@@ -126,11 +126,11 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
       max: 4,
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     grid: {
-      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
@@ -141,7 +141,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
     },
     colors: ['#3B82F6'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val.toFixed(2);
@@ -156,7 +156,7 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
       position: 'top',
       horizontalAlign: 'right',
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     }
   });
@@ -168,18 +168,18 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
       ...prev,
       chart: {
         ...prev.chart,
-        background: currentTheme === 'dark' ? '#0F172B' : '#fff',
+        background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       },
       dataLabels: {
         ...prev.dataLabels,
         style: {
           ...prev.dataLabels?.style,
-          colors: [currentTheme === 'dark' ? '#fff' : '#000']
+          colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
         },
         background: {
           ...prev.dataLabels?.background,
-          foreColor: currentTheme === 'dark' ? '#fff' : '#000',
-          borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6'
+          foreColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
+          borderColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#3B82F6'
         }
       },
       xaxis: {
@@ -188,23 +188,23 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
           ...prev.xaxis?.title,
           style: {
             ...prev.xaxis?.title?.style,
-            color: currentTheme === 'dark' ? '#fff' : '#000'
+            color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         labels: {
           ...prev.xaxis?.labels,
           style: {
             ...prev.xaxis?.labels?.style,
-            colors: currentTheme === 'dark' ? '#fff' : '#000'
+            colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         axisBorder: {
           ...prev.xaxis?.axisBorder,
-          color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
+          color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
         },
         axisTicks: {
           ...prev.xaxis?.axisTicks,
-          color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
+          color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
         }
       },
       yaxis: {
@@ -213,20 +213,20 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
           ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
           style: {
             ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
-            color: currentTheme === 'dark' ? '#fff' : '#000'
+            color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         labels: {
           ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
           style: {
             ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
-            colors: currentTheme === 'dark' ? '#fff' : '#000'
+            colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         }
       },
       tooltip: {
         ...prev.tooltip,
-        theme: currentTheme === 'dark' ? 'dark' : 'light'
+        theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light'
       }
     }));
   }, [theme, systemTheme]);
@@ -329,13 +329,13 @@ export default function IPKBeasiswaChart({ selectedJenisBeasiswa }: Props) {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           <Chart
             options={options}
             series={series}
             type="line"
             height="100%"
-            width="90%"
+            width="100%"
           />
         </div>
       </CardContent>
diff --git a/components/charts/IPKChart.tsx b/components/charts/IPKChart.tsx
index c9a5356..c993155 100644
--- a/components/charts/IPKChart.tsx
+++ b/components/charts/IPKChart.tsx
@@ -39,7 +39,7 @@ export default function IPKChart() {
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       zoom: {
         enabled: true,
         type: 'x',
@@ -54,7 +54,7 @@ export default function IPKChart() {
     markers: {
       size: 5,
       strokeWidth: 2,
-      strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'],
+      strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'],
       colors: ['#3B82F6'],
       hover: {
         size: 7
@@ -81,22 +81,22 @@ export default function IPKChart() {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     yaxis: {
@@ -105,13 +105,13 @@ export default function IPKChart() {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         },
         formatter: function (val: number) {
           return val.toFixed(2);
@@ -121,11 +121,11 @@ export default function IPKChart() {
       max: 4,
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     grid: {
-      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
@@ -136,7 +136,7 @@ export default function IPKChart() {
     },
     colors: ['#3B82F6'], // Blue color for line
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val.toFixed(2);
@@ -151,7 +151,7 @@ export default function IPKChart() {
       position: 'top',
       horizontalAlign: 'right',
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     }
   });
@@ -163,18 +163,18 @@ export default function IPKChart() {
       ...prev,
       chart: {
         ...prev.chart,
-        background: currentTheme === 'dark' ? '#0F172B' : '#fff',
+        background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       },
       dataLabels: {
         ...prev.dataLabels,
         style: {
           ...prev.dataLabels?.style,
-          colors: [currentTheme === 'dark' ? '#fff' : '#000']
+          colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
         },
         background: {
           ...prev.dataLabels?.background,
-          foreColor: currentTheme === 'dark' ? '#fff' : '#000',
-          borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6'
+          foreColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
+          borderColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#3B82F6'
         }
       },
       xaxis: {
@@ -183,23 +183,23 @@ export default function IPKChart() {
           ...prev.xaxis?.title,
           style: {
             ...prev.xaxis?.title?.style,
-            color: currentTheme === 'dark' ? '#fff' : '#000'
+            color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         labels: {
           ...prev.xaxis?.labels,
           style: {
             ...prev.xaxis?.labels?.style,
-            colors: currentTheme === 'dark' ? '#fff' : '#000'
+            colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         axisBorder: {
           ...prev.xaxis?.axisBorder,
-          color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
+          color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
         },
         axisTicks: {
           ...prev.xaxis?.axisTicks,
-          color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
+          color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
         }
       },
       yaxis: {
@@ -208,20 +208,20 @@ export default function IPKChart() {
           ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
           style: {
             ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
-            color: currentTheme === 'dark' ? '#fff' : '#000'
+            color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         labels: {
           ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
           style: {
             ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
-            colors: currentTheme === 'dark' ? '#fff' : '#000'
+            colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         }
       },
       tooltip: {
         ...prev.tooltip,
-        theme: currentTheme === 'dark' ? 'dark' : 'light'
+        theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light'
       }
     }));
   }, [theme, systemTheme]);
diff --git a/components/charts/IPKJenisKelaminChart.tsx b/components/charts/IPKJenisKelaminChart.tsx
index 67b9d16..f124afc 100644
--- a/components/charts/IPKJenisKelaminChart.tsx
+++ b/components/charts/IPKJenisKelaminChart.tsx
@@ -42,7 +42,7 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
           }
         },
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     colors: ['#3B82F6', '#EC4899'],
     plotOptions: {
@@ -77,7 +77,7 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
       style: {
         fontSize: '14px',
         fontWeight: 'bold',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       }
     },
     xaxis: {
@@ -87,7 +87,7 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       }
     },
@@ -100,12 +100,12 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       }
     },
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val.toFixed(2) + " IPK";
@@ -124,13 +124,13 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
       ...prev,
       chart: {
         ...prev.chart,
-        background: currentTheme === 'dark' ? '#0F172B' : '#fff',
+        background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       },
       dataLabels: {
         ...prev.dataLabels,
         style: {
           ...prev.dataLabels?.style,
-          colors: [currentTheme === 'dark' ? '#fff' : '#000']
+          colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
         }
       },
       xaxis: {
@@ -139,13 +139,13 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
           ...prev.xaxis?.title,
           style: {
             ...prev.xaxis?.title?.style,
-            color: currentTheme === 'dark' ? '#fff' : '#000'
+            color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         labels: {
           ...prev.xaxis?.labels,
           style: {
-            colors: currentTheme === 'dark' ? '#fff' : '#000'
+            colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         }
       },
@@ -155,19 +155,19 @@ export default function IPKJenisKelaminChart({ tahunAngkatan }: Props) {
           ...(prev.yaxis as any)?.title,
           style: {
             ...(prev.yaxis as any)?.title?.style,
-            color: currentTheme === 'dark' ? '#fff' : '#000'
+            color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         labels: {
           ...(prev.yaxis as any)?.labels,
           style: {
-            colors: currentTheme === 'dark' ? '#fff' : '#000'
+            colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         }
       },
       tooltip: {
         ...prev.tooltip,
-        theme: currentTheme === 'dark' ? 'dark' : 'light'
+        theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light'
       }
     }));
   }, [theme, systemTheme]);
diff --git a/components/charts/IPKLulusTepatChart.tsx b/components/charts/IPKLulusTepatChart.tsx
index 3853b58..31f9d69 100644
--- a/components/charts/IPKLulusTepatChart.tsx
+++ b/components/charts/IPKLulusTepatChart.tsx
@@ -43,7 +43,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       zoom: {
         enabled: true,
         type: 'x',
@@ -58,7 +58,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
     markers: {
       size: 5,
       strokeWidth: 2,
-      strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'],
+      strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'],
       colors: ['#3B82F6'],
       hover: {
         size: 7
@@ -85,22 +85,22 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     yaxis: {
@@ -109,13 +109,13 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         },
         formatter: function (val: number) {
           return val.toFixed(2);
@@ -125,11 +125,11 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
       max: 4,
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     grid: {
-      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
@@ -140,7 +140,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
     },
     colors: ['#3B82F6'], // Blue color for line
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val.toFixed(2);
@@ -155,7 +155,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
       position: 'top',
       horizontalAlign: 'right',
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     }
   });
@@ -167,18 +167,18 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
       ...prev,
       chart: {
         ...prev.chart,
-        background: currentTheme === 'dark' ? '#0F172B' : '#fff',
+        background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       },
       dataLabels: {
         ...prev.dataLabels,
         style: {
           ...prev.dataLabels?.style,
-          colors: [currentTheme === 'dark' ? '#fff' : '#000']
+          colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
         },
         background: {
           ...prev.dataLabels?.background,
-          foreColor: currentTheme === 'dark' ? '#fff' : '#000',
-          borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6'
+          foreColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
+          borderColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#3B82F6'
         }
       },
       xaxis: {
@@ -187,23 +187,23 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
           ...prev.xaxis?.title,
           style: {
             ...prev.xaxis?.title?.style,
-            color: currentTheme === 'dark' ? '#fff' : '#000'
+            color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         labels: {
           ...prev.xaxis?.labels,
           style: {
             ...prev.xaxis?.labels?.style,
-            colors: currentTheme === 'dark' ? '#fff' : '#000'
+            colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         axisBorder: {
           ...prev.xaxis?.axisBorder,
-          color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
+          color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
         },
         axisTicks: {
           ...prev.xaxis?.axisTicks,
-          color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
+          color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
         }
       },
       yaxis: {
@@ -212,20 +212,20 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
           ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
           style: {
             ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
-            color: currentTheme === 'dark' ? '#fff' : '#000'
+            color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         labels: {
           ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
           style: {
             ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
-            colors: currentTheme === 'dark' ? '#fff' : '#000'
+            colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         }
       },
       tooltip: {
         ...prev.tooltip,
-        theme: currentTheme === 'dark' ? 'dark' : 'light'
+        theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light'
       }
     }));
   }, [theme, systemTheme]);
diff --git a/components/charts/IPKPrestasiChart.tsx b/components/charts/IPKPrestasiChart.tsx
index c24ef59..c0c5130 100644
--- a/components/charts/IPKPrestasiChart.tsx
+++ b/components/charts/IPKPrestasiChart.tsx
@@ -44,7 +44,7 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       zoom: {
         enabled: true,
         type: 'x',
@@ -59,7 +59,7 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
     markers: {
       size: 5,
       strokeWidth: 2,
-      strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'],
+      strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'],
       colors: ['#3B82F6'],
       hover: {
         size: 7
@@ -86,22 +86,22 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     yaxis: {
@@ -110,13 +110,13 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         },
         formatter: function (val: number) {
           return val.toFixed(2);
@@ -126,11 +126,11 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
       max: 4,
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     grid: {
-      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
@@ -141,7 +141,7 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
     },
     colors: ['#3B82F6'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val.toFixed(2);
@@ -156,7 +156,7 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
       position: 'top',
       horizontalAlign: 'right',
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     }
   });
@@ -168,18 +168,18 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
       ...prev,
       chart: {
         ...prev.chart,
-        background: currentTheme === 'dark' ? '#0F172B' : '#fff',
+        background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       },
       dataLabels: {
         ...prev.dataLabels,
         style: {
           ...prev.dataLabels?.style,
-          colors: [currentTheme === 'dark' ? '#fff' : '#000']
+          colors: [currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
         },
         background: {
           ...prev.dataLabels?.background,
-          foreColor: currentTheme === 'dark' ? '#fff' : '#000',
-          borderColor: currentTheme === 'dark' ? '#374151' : '#3B82F6'
+          foreColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
+          borderColor: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#3B82F6'
         }
       },
       xaxis: {
@@ -188,23 +188,23 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
           ...prev.xaxis?.title,
           style: {
             ...prev.xaxis?.title?.style,
-            color: currentTheme === 'dark' ? '#fff' : '#000'
+            color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         labels: {
           ...prev.xaxis?.labels,
           style: {
             ...prev.xaxis?.labels?.style,
-            colors: currentTheme === 'dark' ? '#fff' : '#000'
+            colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         axisBorder: {
           ...prev.xaxis?.axisBorder,
-          color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
+          color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
         },
         axisTicks: {
           ...prev.xaxis?.axisTicks,
-          color: currentTheme === 'dark' ? '#374151' : '#E5E7EB'
+          color: currentTheme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
         }
       },
       yaxis: {
@@ -213,20 +213,20 @@ export default function IPKPrestasiChart({ selectedJenisPrestasi }: Props) {
           ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
           style: {
             ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
-            color: currentTheme === 'dark' ? '#fff' : '#000'
+            color: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         },
         labels: {
           ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
           style: {
             ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
-            colors: currentTheme === 'dark' ? '#fff' : '#000'
+            colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
           }
         }
       },
       tooltip: {
         ...prev.tooltip,
-        theme: currentTheme === 'dark' ? 'dark' : 'light'
+        theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light'
       }
     }));
   }, [theme, systemTheme]);
diff --git a/components/charts/IpkStatusChart.tsx b/components/charts/IpkStatusChart.tsx
index 8e81e01..82e6ade 100644
--- a/components/charts/IpkStatusChart.tsx
+++ b/components/charts/IpkStatusChart.tsx
@@ -21,7 +21,7 @@ interface Props {
   selectedStatus: string;
 }
 
-export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) {
+export default function IpkStatusChart({ selectedYear, selectedStatus }: Props) { 
   const { theme, systemTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
   const [data, setData] = useState<IpkStatusData[]>([]);
@@ -94,7 +94,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       zoom: {
         enabled: true,
         type: 'x',
@@ -116,7 +116,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
     markers: {
       size: 5,
       strokeWidth: 2,
-      strokeColors: theme === 'dark' ? ['#fff'] : ['#3B82F6'],
+      strokeColors: theme === 'dark' || systemTheme === 'dark' ? ['#fff'] : ['#3B82F6'],
       colors: ['#3B82F6'],
       hover: {
         size: 7
@@ -130,7 +130,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
       style: {
         fontSize: '14px',
         fontWeight: 'bold',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       },
       background: {
         enabled: false
@@ -144,22 +144,22 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     yaxis: {
@@ -168,7 +168,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       min: 0,
@@ -176,7 +176,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         },
         formatter: function (val: number) {
           return val.toFixed(2);
@@ -184,11 +184,11 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
-      }
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
+      } 
     },
     grid: {
-      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
@@ -199,7 +199,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
     },
     colors: ['#3B82F6'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val.toFixed(2);
@@ -214,7 +214,7 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
       position: 'top',
       horizontalAlign: 'right',
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     }
   };
diff --git a/components/charts/JenisPendaftaranBeasiswaChart.tsx b/components/charts/JenisPendaftaranBeasiswaChart.tsx
index fce9a14..aa961a2 100644
--- a/components/charts/JenisPendaftaranBeasiswaChart.tsx
+++ b/components/charts/JenisPendaftaranBeasiswaChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<JenisPendaftaranBeasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -95,7 +95,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -111,7 +111,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -126,22 +126,22 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     yaxis: {
@@ -150,18 +150,18 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       tickAmount: 5,
     },
@@ -170,7 +170,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
     },
     colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -187,11 +187,11 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     grid: {
-      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
@@ -249,14 +249,14 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
               options={chartOptions}
               series={series}
               type="bar"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>
diff --git a/components/charts/JenisPendaftaranBeasiswaPieChart.tsx b/components/charts/JenisPendaftaranBeasiswaPieChart.tsx
index d474cf2..1484531 100644
--- a/components/charts/JenisPendaftaranBeasiswaPieChart.tsx
+++ b/components/charts/JenisPendaftaranBeasiswaPieChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<JenisPendaftaranBeasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selecte
   const chartOptions: ApexOptions = {
     chart: {
       type: 'pie',
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       toolbar: {
         show: true,
         tools: {
@@ -82,7 +82,7 @@ export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selecte
         horizontal: 10
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     dataLabels: {
@@ -101,7 +101,7 @@ export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selecte
       }
     },
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
@@ -175,14 +175,14 @@ export default function JenisPendaftaranBeasiswaPieChart({ selectedYear, selecte
         </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
               options={{...chartOptions, labels}}
               series={series}
               type="pie"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>
diff --git a/components/charts/JenisPendaftaranLulusChart.tsx b/components/charts/JenisPendaftaranLulusChart.tsx
index c0d64c7..33e5333 100644
--- a/components/charts/JenisPendaftaranLulusChart.tsx
+++ b/components/charts/JenisPendaftaranLulusChart.tsx
@@ -20,7 +20,7 @@ interface Props {
 }
 
 export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<JenisPendaftaranLulusData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -92,7 +92,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -108,7 +108,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -123,22 +123,22 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     yaxis: {
@@ -147,18 +147,18 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       tickAmount: 5,
     },
@@ -167,7 +167,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
     },
     colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -184,11 +184,11 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     grid: {
-      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
@@ -246,14 +246,14 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
               options={chartOptions}
               series={series}
               type="bar"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>
diff --git a/components/charts/JenisPendaftaranLulusPieChart.tsx b/components/charts/JenisPendaftaranLulusPieChart.tsx
index 189bff9..16c1e64 100644
--- a/components/charts/JenisPendaftaranLulusPieChart.tsx
+++ b/components/charts/JenisPendaftaranLulusPieChart.tsx
@@ -20,7 +20,7 @@ interface Props {
 }
 
 export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<JenisPendaftaranLulusData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -66,7 +66,7 @@ export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) {
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     labels: [],
     colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
@@ -81,7 +81,7 @@ export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) {
         horizontal: 10
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000',
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
       }
     },
     dataLabels: {
@@ -100,7 +100,7 @@ export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) {
       }
     },
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
@@ -174,14 +174,14 @@ export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) {
         </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
               options={{...chartOptions, labels}}
               series={series}
               type="pie"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>
diff --git a/components/charts/JenisPendaftaranPerAngkatanChart.tsx b/components/charts/JenisPendaftaranPerAngkatanChart.tsx
index bc8b4b7..8fd00a5 100644
--- a/components/charts/JenisPendaftaranPerAngkatanChart.tsx
+++ b/components/charts/JenisPendaftaranPerAngkatanChart.tsx
@@ -55,7 +55,7 @@ export default function JenisPendaftaranPerAngkatanChart({ tahunAngkatan }: Prop
         horizontal: 10
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     dataLabels: {
@@ -74,7 +74,7 @@ export default function JenisPendaftaranPerAngkatanChart({ tahunAngkatan }: Prop
       }
     },
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
@@ -90,18 +90,18 @@ export default function JenisPendaftaranPerAngkatanChart({ tahunAngkatan }: Prop
       ...prev,
       chart: {
         ...prev.chart,
-        background: currentTheme === 'dark' ? '#0F172B' : '#fff',
+        background: currentTheme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       },
       legend: {
         ...prev.legend,
         labels: {
           ...prev.legend?.labels,
-          colors: currentTheme === 'dark' ? '#fff' : '#000'
+          colors: currentTheme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       tooltip: {
         ...prev.tooltip,
-        theme: currentTheme === 'dark' ? 'dark' : 'light'
+        theme: currentTheme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light'
       }
     }));
   }, [theme, systemTheme]);
diff --git a/components/charts/JenisPendaftaranPrestasiChart.tsx b/components/charts/JenisPendaftaranPrestasiChart.tsx
index 0d131f5..11d9518 100644
--- a/components/charts/JenisPendaftaranPrestasiChart.tsx
+++ b/components/charts/JenisPendaftaranPrestasiChart.tsx
@@ -20,7 +20,7 @@ interface Props {
 }
 
 export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<JenisPendaftaranPrestasiData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -94,7 +94,7 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -110,7 +110,7 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -125,22 +125,22 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     yaxis: {
@@ -149,18 +149,18 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
     },
     fill: {
@@ -168,7 +168,7 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
     },
     colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -185,11 +185,11 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     grid: {
-      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
@@ -246,14 +246,14 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
               options={chartOptions}
               series={series}
               type="bar"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>
diff --git a/components/charts/JenisPendaftaranPrestasiPieChart.tsx b/components/charts/JenisPendaftaranPrestasiPieChart.tsx
index cb5e98a..653b4fd 100644
--- a/components/charts/JenisPendaftaranPrestasiPieChart.tsx
+++ b/components/charts/JenisPendaftaranPrestasiPieChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<JenisPendaftaranPrestasiData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selecte
   const chartOptions: ApexOptions = {
     chart: {
       type: 'pie',
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       toolbar: {
         show: true,
         tools: {
@@ -82,7 +82,7 @@ export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selecte
         horizontal: 10
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     dataLabels: {
@@ -101,7 +101,7 @@ export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selecte
       }
     },
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
@@ -171,14 +171,14 @@ export default function JenisPendaftaranPrestasiPieChart({ selectedYear, selecte
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
               options={{...chartOptions, labels}}
               series={series}
               type="pie"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>
diff --git a/components/charts/JenisPendaftaranStatusChart.tsx b/components/charts/JenisPendaftaranStatusChart.tsx
index 9a7af93..e4938d2 100644
--- a/components/charts/JenisPendaftaranStatusChart.tsx
+++ b/components/charts/JenisPendaftaranStatusChart.tsx
@@ -22,7 +22,7 @@ interface Props {
 }
 
 export default function JenisPendaftaranStatusChart({ selectedYear, selectedStatus }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<JenisPendaftaranStatusData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -81,7 +81,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
       toolbar: {
         show: true,
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -96,7 +96,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -111,13 +111,13 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       }
     },
@@ -127,13 +127,13 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       min:0,
@@ -152,12 +152,12 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -235,7 +235,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
               options={chartOptions}
diff --git a/components/charts/JenisPendaftaranStatusPieChart.tsx b/components/charts/JenisPendaftaranStatusPieChart.tsx
index aadb7a1..c092e6c 100644
--- a/components/charts/JenisPendaftaranStatusPieChart.tsx
+++ b/components/charts/JenisPendaftaranStatusPieChart.tsx
@@ -22,7 +22,7 @@ interface Props {
 }
 
 export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedStatus }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<JenisPendaftaranStatusData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -68,7 +68,7 @@ export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedS
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     labels: [],
     colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
@@ -83,7 +83,7 @@ export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedS
         horizontal: 10
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000',
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
       }
     },
     dataLabels: {
@@ -102,7 +102,7 @@ export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedS
       }
     },
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
diff --git a/components/charts/LulusTepatWaktuChart.tsx b/components/charts/LulusTepatWaktuChart.tsx
index 0e636e9..1275843 100644
--- a/components/charts/LulusTepatWaktuChart.tsx
+++ b/components/charts/LulusTepatWaktuChart.tsx
@@ -20,7 +20,7 @@ interface Props {
 }
 
 export default function LulusTepatWaktuChart({ selectedYear }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<LulusTepatWaktuData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -110,7 +110,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -126,7 +126,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -141,22 +141,22 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     yaxis: {
@@ -165,18 +165,18 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       tickAmount: 5,
     },
@@ -185,7 +185,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
     },
     colors: ['#3B82F6', '#EC4899'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -202,11 +202,11 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     grid: {
-      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
@@ -264,14 +264,14 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
               options={chartOptions}
               series={series}
               type="bar"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>
diff --git a/components/charts/LulusTepatWaktuPieChart.tsx b/components/charts/LulusTepatWaktuPieChart.tsx
index 13e232e..71af2db 100644
--- a/components/charts/LulusTepatWaktuPieChart.tsx
+++ b/components/charts/LulusTepatWaktuPieChart.tsx
@@ -20,7 +20,7 @@ interface Props {
 }
 
 export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<LulusTepatWaktuData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -66,7 +66,7 @@ export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     labels: ['Laki-laki', 'Perempuan'],
     colors: ['#3B82F6', '#EC4899'],
@@ -81,7 +81,7 @@ export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
         horizontal: 10
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000',
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
       }
     },
     dataLabels: {
@@ -100,7 +100,7 @@ export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
       }
     },
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
@@ -167,14 +167,14 @@ export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
         </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
               options={chartOptions}
               series={series}
               type="pie"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>
diff --git a/components/charts/NamaBeasiswaChart.tsx b/components/charts/NamaBeasiswaChart.tsx
index ea8f125..4bb3304 100644
--- a/components/charts/NamaBeasiswaChart.tsx
+++ b/components/charts/NamaBeasiswaChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<NamaBeasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -95,7 +95,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -111,7 +111,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -126,22 +126,22 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       tickAmount: 5,
     },
@@ -151,18 +151,18 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     fill: {
@@ -170,7 +170,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
     },
     colors: ['#3B82F6', '#EC4899', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#06B6D4'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -187,11 +187,11 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     grid: {
-      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
@@ -249,14 +249,14 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[400px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
               options={chartOptions}
               series={series}
               type="bar"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>
diff --git a/components/charts/NamaBeasiswaPieChart.tsx b/components/charts/NamaBeasiswaPieChart.tsx
index 189e94a..ded5274 100644
--- a/components/charts/NamaBeasiswaPieChart.tsx
+++ b/components/charts/NamaBeasiswaPieChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<NamaBeasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
   const chartOptions: ApexOptions = {
     chart: {
       type: 'pie',
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       toolbar: {
         show: true,
         tools: {
@@ -82,7 +82,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
         horizontal: 10
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000',
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
       }
     },
     dataLabels: {
@@ -101,7 +101,7 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
       }
     },
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
@@ -175,14 +175,14 @@ export default function NamaBeasiswaPieChart({ selectedYear, selectedJenisBeasis
         </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
               options={{...chartOptions, labels}}
               series={series}
               type="pie"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>
diff --git a/components/charts/StatusMahasiswaFilterPieChart.tsx b/components/charts/StatusMahasiswaFilterPieChart.tsx
index 1c6b7c8..98f2f04 100644
--- a/components/charts/StatusMahasiswaFilterPieChart.tsx
+++ b/components/charts/StatusMahasiswaFilterPieChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function StatusMahasiswaFilterPieChart({ selectedYear, selectedStatus }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<StatusMahasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -67,7 +67,7 @@ export default function StatusMahasiswaFilterPieChart({ selectedYear, selectedSt
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     labels: ['Laki-laki', 'Perempuan'],
     colors: ['#3B82F6', '#EC4899'],
@@ -82,7 +82,7 @@ export default function StatusMahasiswaFilterPieChart({ selectedYear, selectedSt
         horizontal: 10
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000',
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000',
       }
     },
     dataLabels: {
@@ -101,7 +101,7 @@ export default function StatusMahasiswaFilterPieChart({ selectedYear, selectedSt
       }
     },
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
diff --git a/components/charts/TingkatPrestasiChart.tsx b/components/charts/TingkatPrestasiChart.tsx
index 7f77050..131dbf7 100644
--- a/components/charts/TingkatPrestasiChart.tsx
+++ b/components/charts/TingkatPrestasiChart.tsx
@@ -20,7 +20,7 @@ interface Props {
 }
 
 export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<TingkatPrestasiData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -94,7 +94,7 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -110,7 +110,7 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -125,22 +125,22 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
     },
     yaxis: {
@@ -149,18 +149,18 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       tickAmount: 5,
     },
@@ -169,7 +169,7 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
     },
     colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -186,11 +186,11 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     grid: {
-      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
@@ -247,14 +247,14 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[400px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
               options={chartOptions}
               series={series}
               type="bar"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>
diff --git a/components/charts/TingkatPrestasiPieChart.tsx b/components/charts/TingkatPrestasiPieChart.tsx
index f8f2eb2..39028cb 100644
--- a/components/charts/TingkatPrestasiPieChart.tsx
+++ b/components/charts/TingkatPrestasiPieChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<TingkatPrestasiData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -72,7 +72,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
   const chartOptions: ApexOptions = {
     chart: {
       type: 'pie',
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       toolbar: {
         show: true,
         tools: {
@@ -99,7 +99,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
         horizontal: 10
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     dataLabels: {
@@ -118,7 +118,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
       }
     },
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
@@ -171,14 +171,14 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
               options={chartOptions}
               series={series}
               type="pie"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>
diff --git a/components/charts/TotalBeasiswaChart.tsx b/components/charts/TotalBeasiswaChart.tsx
index f66b18a..b790ffd 100644
--- a/components/charts/TotalBeasiswaChart.tsx
+++ b/components/charts/TotalBeasiswaChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<TotalBeasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -107,7 +107,7 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -123,7 +123,7 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -138,22 +138,22 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     yaxis: {
@@ -162,18 +162,18 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       tickAmount: 5,
     },
@@ -182,7 +182,7 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
     },
     colors: ['#3B82F6', '#EC4899'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -199,11 +199,11 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     grid: {
-      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
@@ -261,14 +261,14 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
               options={chartOptions}
               series={series}
               type="bar"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>
diff --git a/components/charts/TotalBeasiswaPieChart.tsx b/components/charts/TotalBeasiswaPieChart.tsx
index ae26200..3f3a660 100644
--- a/components/charts/TotalBeasiswaPieChart.tsx
+++ b/components/charts/TotalBeasiswaPieChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function TotalBeasiswaPieChart({ selectedYear, selectedJenisBeasiswa }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<TotalBeasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function TotalBeasiswaPieChart({ selectedYear, selectedJenisBeasi
   const chartOptions: ApexOptions = {
     chart: {
       type: 'pie',
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       toolbar: {
         show: true,
         tools: {
@@ -85,7 +85,7 @@ export default function TotalBeasiswaPieChart({ selectedYear, selectedJenisBeasi
         return legendName;
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     dataLabels: {
@@ -104,7 +104,7 @@ export default function TotalBeasiswaPieChart({ selectedYear, selectedJenisBeasi
       }
     },
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
@@ -171,14 +171,14 @@ export default function TotalBeasiswaPieChart({ selectedYear, selectedJenisBeasi
         </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
               options={chartOptions}
               series={series}
               type="pie"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>
diff --git a/components/charts/TotalPrestasiChart.tsx b/components/charts/TotalPrestasiChart.tsx
index ade2b92..d865228 100644
--- a/components/charts/TotalPrestasiChart.tsx
+++ b/components/charts/TotalPrestasiChart.tsx
@@ -20,7 +20,7 @@ interface Props {
 }
 
 export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<TotalPrestasiData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -106,7 +106,7 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
           reset: true
         }
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -122,7 +122,7 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -137,22 +137,22 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       axisTicks: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       }
     },
     yaxis: {
@@ -161,18 +161,18 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       axisBorder: {
         show: true,
-        color: theme === 'dark' ? '#374151' : '#E5E7EB'
+        color: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB'
       },
       tickAmount: 5,
     },
@@ -181,7 +181,7 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
     },
     colors: ['#3B82F6', '#EC4899'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -198,11 +198,11 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     grid: {
-      borderColor: theme === 'dark' ? '#374151' : '#E5E7EB',
+      borderColor: theme === 'dark' || systemTheme === 'dark' ? '#374151' : '#E5E7EB',
       strokeDashArray: 4,
       padding: {
         top: 20,
@@ -259,14 +259,14 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
               options={chartOptions}
               series={series}
               type="bar"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>
diff --git a/components/charts/TotalPrestasiPieChart.tsx b/components/charts/TotalPrestasiPieChart.tsx
index 2773e9b..95350b8 100644
--- a/components/charts/TotalPrestasiPieChart.tsx
+++ b/components/charts/TotalPrestasiPieChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function TotalPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<TotalPrestasiData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export default function TotalPrestasiPieChart({ selectedYear, selectedJenisPrest
   const chartOptions: ApexOptions = {
     chart: {
       type: 'pie',
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       toolbar: {
         show: true,
         tools: {
@@ -82,7 +82,7 @@ export default function TotalPrestasiPieChart({ selectedYear, selectedJenisPrest
         horizontal: 10
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     dataLabels: {
@@ -101,7 +101,7 @@ export default function TotalPrestasiPieChart({ selectedYear, selectedJenisPrest
       }
     },
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
@@ -171,14 +171,14 @@ export default function TotalPrestasiPieChart({ selectedYear, selectedJenisPrest
         </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
               options={chartOptions}
               series={series}
               type="pie"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>