diff --git a/components/charts/StatusMahasiswaChart.tsx b/components/charts/StatusMahasiswaChart.tsx
index 2f9c85d..75e9ae2 100644
--- a/components/charts/StatusMahasiswaChart.tsx
+++ b/components/charts/StatusMahasiswaChart.tsx
@@ -29,7 +29,7 @@ export default function StatusMahasiswaChart() {
       toolbar: {
         show: true,
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -44,7 +44,7 @@ export default function StatusMahasiswaChart() {
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -59,13 +59,13 @@ export default function StatusMahasiswaChart() {
         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'
         }
       }
     },
@@ -75,13 +75,13 @@ export default function StatusMahasiswaChart() {
         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,
@@ -100,12 +100,12 @@ export default function StatusMahasiswaChart() {
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     colors: ['#008FFB', '#00E396', '#FEB019', '#EF4444'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";
@@ -202,7 +202,7 @@ export default function StatusMahasiswaChart() {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[350px] md: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}