diff --git a/src/client/components/gauge.tsx b/src/client/components/gauge.tsx
index f8443ff..71ed324 100644
--- a/src/client/components/gauge.tsx
+++ b/src/client/components/gauge.tsx
@@ -22,7 +22,7 @@ type Props = {
 
 export default function Gauge(props: Props) {
   const { percentage, invert, title, onClick } = props
-  const { theme: systemTheme } = useContext(ThemeContext)
+  const { theme } = useContext(ThemeContext)
 
   return (
     <Card
@@ -45,15 +45,9 @@ export default function Gauge(props: Props) {
               fontFamily: 'sans-serif',
               transform: 'translate(0, -15%)',
             },
-            [`& .${gaugeClasses.valueText} text`]: {
-              fill: systemTheme === 'light' ? '#000' : '#fff',
-            },
             [`& .${gaugeClasses.valueArc}`]: {
-              fill: getColor(percentage, systemTheme, invert),
-              stroke: systemTheme === 'light' ? '#fff' : '#000',
-            },
-            [`& .${gaugeClasses.referenceArc}`]: {
-              fill: systemTheme === 'light' ? '#cccccc' : '#363941',
+              fill: getColor(percentage, theme, invert),
+              stroke: theme === 'light' ? '#fff' : '#000',
             },
           }}
         />
diff --git a/src/client/components/line-chart.tsx b/src/client/components/line-chart.tsx
index 03037d6..bde5dd6 100644
--- a/src/client/components/line-chart.tsx
+++ b/src/client/components/line-chart.tsx
@@ -7,11 +7,8 @@ import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'
 import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'
 import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
-import CssBaseline from '@mui/material/CssBaseline'
 import { useTranslation } from 'react-i18next'
 import { LanguageContext } from '@/client/context/language'
-import { ThemeContext } from '../context/theme'
 
 type Props = {
   id: string
@@ -24,12 +21,6 @@ type Props = {
 export default function LineChart(props: Props) {
   const { id, inputVoltage, inputVoltageNominal, outputVoltage, updated } = props
   const lng = useContext<string>(LanguageContext)
-  const { theme } = useContext(ThemeContext)
-  const darkTheme = createTheme({
-    palette: {
-      mode: theme,
-    },
-  })
   const { t } = useTranslation(lng)
   const [inputVoltageData, setInputVoltageData] = useState<Array<number>>([])
   const [outputVoltageData, setOutputVoltageData] = useState<Array<number>>([])
@@ -49,47 +40,44 @@ export default function LineChart(props: Props) {
   }, [id, inputVoltage, outputVoltage, updated])
 
   return (
-    <ThemeProvider theme={darkTheme}>
-      <CssBaseline />
-      <Card
-        className='border-neutral-300 h-96 w-full border border-solid border-gray-300 p-3 shadow-none dark:border-gray-800 dark:bg-gray-950'
-        data-testid='line'
+    <Card
+      className='border-neutral-300 h-96 w-full border border-solid border-gray-300 p-3 shadow-none dark:border-gray-800 dark:bg-gray-950'
+      data-testid='line'
+    >
+      <ResponsiveChartContainer
+        height={300}
+        series={[
+          { data: inputVoltageData, label: t('lineChart.inputVoltage'), type: 'line' },
+          { data: outputVoltageData, label: t('lineChart.outputVoltage'), type: 'line' },
+        ]}
+        xAxis={[{ scaleType: 'point', data: inputVoltageData.map((value, index) => index) }]}
+        yAxis={[
+          {
+            scaleType: 'linear',
+            valueFormatter: (value: number) => `${value}V`,
+            min: inputVoltageNominal
+              ? Math.min(...inputVoltageData, ...outputVoltageData, inputVoltageNominal)
+              : Math.min(...inputVoltageData, ...outputVoltageData),
+            max: inputVoltageNominal
+              ? Math.max(...inputVoltageData, ...outputVoltageData, inputVoltageNominal)
+              : Math.max(...inputVoltageData, ...outputVoltageData),
+          },
+        ]}
       >
-        <ResponsiveChartContainer
-          height={300}
-          series={[
-            { data: inputVoltageData, label: t('lineChart.inputVoltage'), type: 'line' },
-            { data: outputVoltageData, label: t('lineChart.outputVoltage'), type: 'line' },
-          ]}
-          xAxis={[{ scaleType: 'point', data: inputVoltageData.map((value, index) => index) }]}
-          yAxis={[
-            {
-              scaleType: 'linear',
-              valueFormatter: (value: number) => `${value}V`,
-              min: inputVoltageNominal
-                ? Math.min(...inputVoltageData, ...outputVoltageData, inputVoltageNominal)
-                : Math.min(...inputVoltageData, ...outputVoltageData),
-              max: inputVoltageNominal
-                ? Math.max(...inputVoltageData, ...outputVoltageData, inputVoltageNominal)
-                : Math.max(...inputVoltageData, ...outputVoltageData),
-            },
-          ]}
-        >
-          <LinePlot />
-          <MarkPlot />
-          {inputVoltageNominal && (
-            <ChartsReferenceLine
-              y={inputVoltageNominal}
-              label={t('lineChart.nominalInputVoltage')}
-              lineStyle={{ stroke: 'red', strokeDasharray: '10 5' }}
-            />
-          )}
-          <ChartsXAxis disableTicks disableLine tickLabelStyle={{ display: 'none' }} />
-          <ChartsYAxis />
-          <ChartsLegend />
-          <ChartsGrid horizontal vertical />
-        </ResponsiveChartContainer>
-      </Card>
-    </ThemeProvider>
+        <LinePlot />
+        <MarkPlot />
+        {inputVoltageNominal && (
+          <ChartsReferenceLine
+            y={inputVoltageNominal}
+            label={t('lineChart.nominalInputVoltage')}
+            lineStyle={{ stroke: 'red', strokeDasharray: '10 5' }}
+          />
+        )}
+        <ChartsXAxis disableTicks disableLine tickLabelStyle={{ display: 'none' }} />
+        <ChartsYAxis />
+        <ChartsLegend />
+        <ChartsGrid horizontal vertical />
+      </ResponsiveChartContainer>
+    </Card>
   )
 }
diff --git a/src/client/components/watts-chart.tsx b/src/client/components/watts-chart.tsx
index 24b6ba5..01d6968 100644
--- a/src/client/components/watts-chart.tsx
+++ b/src/client/components/watts-chart.tsx
@@ -7,11 +7,8 @@ import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'
 import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'
 import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
-import CssBaseline from '@mui/material/CssBaseline'
 import { useTranslation } from 'react-i18next'
 import { LanguageContext } from '@/client/context/language'
-import { ThemeContext } from '../context/theme'
 
 type Props = {
   id: string
@@ -25,12 +22,6 @@ export default function WattsChart(props: Props) {
   const [dataPoints, setDataPoints] = useState<Array<number>>([])
   const prevDataRef = useRef(id)
   const lng = useContext<string>(LanguageContext)
-  const { theme } = useContext(ThemeContext)
-  const darkTheme = createTheme({
-    palette: {
-      mode: theme,
-    },
-  })
   const { t } = useTranslation(lng)
 
   useEffect(() => {
@@ -44,40 +35,37 @@ export default function WattsChart(props: Props) {
   }, [id, realpower, updated])
 
   return (
-    <ThemeProvider theme={darkTheme}>
-      <CssBaseline />
-      <Card
-        className='border-neutral-300 h-96 w-full border border-solid border-gray-300 p-3 shadow-none dark:border-gray-800 dark:bg-gray-950'
-        data-testid='watts'
+    <Card
+      className='border-neutral-300 h-96 w-full border border-solid border-gray-300 p-3 shadow-none dark:border-gray-800 dark:bg-gray-950'
+      data-testid='watts'
+    >
+      <ResponsiveChartContainer
+        height={300}
+        series={[{ data: dataPoints, label: t('wattsChart.realpower'), type: 'line' }]}
+        xAxis={[{ scaleType: 'point', data: dataPoints.map((value, index) => index) }]}
+        yAxis={[
+          {
+            scaleType: 'linear',
+            valueFormatter: (value: number) => `${value}V`,
+            min: realpowerNominal ? Math.min(...dataPoints, realpowerNominal) : Math.min(...dataPoints),
+            max: realpowerNominal ? Math.max(...dataPoints, realpowerNominal) : Math.max(...dataPoints),
+          },
+        ]}
       >
-        <ResponsiveChartContainer
-          height={300}
-          series={[{ data: dataPoints, label: t('wattsChart.realpower'), type: 'line' }]}
-          xAxis={[{ scaleType: 'point', data: dataPoints.map((value, index) => index) }]}
-          yAxis={[
-            {
-              scaleType: 'linear',
-              valueFormatter: (value: number) => `${value}V`,
-              min: realpowerNominal ? Math.min(...dataPoints, realpowerNominal) : Math.min(...dataPoints),
-              max: realpowerNominal ? Math.max(...dataPoints, realpowerNominal) : Math.max(...dataPoints),
-            },
-          ]}
-        >
-          <LinePlot />
-          <MarkPlot />
-          {realpowerNominal && (
-            <ChartsReferenceLine
-              y={realpowerNominal}
-              label={t('wattsChart.nominalRealpower')}
-              lineStyle={{ stroke: 'red', strokeDasharray: '10 5' }}
-            />
-          )}
-          <ChartsXAxis disableTicks disableLine tickLabelStyle={{ display: 'none' }} />
-          <ChartsYAxis />
-          <ChartsLegend />
-          <ChartsGrid horizontal vertical />
-        </ResponsiveChartContainer>
-      </Card>
-    </ThemeProvider>
+        <LinePlot />
+        <MarkPlot />
+        {realpowerNominal && (
+          <ChartsReferenceLine
+            y={realpowerNominal}
+            label={t('wattsChart.nominalRealpower')}
+            lineStyle={{ stroke: 'red', strokeDasharray: '10 5' }}
+          />
+        )}
+        <ChartsXAxis disableTicks disableLine tickLabelStyle={{ display: 'none' }} />
+        <ChartsYAxis />
+        <ChartsLegend />
+        <ChartsGrid horizontal vertical />
+      </ResponsiveChartContainer>
+    </Card>
   )
 }
diff --git a/src/client/components/wrapper.tsx b/src/client/components/wrapper.tsx
index 40086f5..de1a87d 100644
--- a/src/client/components/wrapper.tsx
+++ b/src/client/components/wrapper.tsx
@@ -12,6 +12,8 @@ import { ExclamationCircleIcon as ExclamationCircleIconSolid } from '@heroicons/
 import { Button } from '@material-tailwind/react'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
 
 import { MemoizedGrid } from '@/client/components/grid'
 import Gauge from '@/client/components/gauge'
@@ -23,6 +25,7 @@ import Loader from '@/client/components/loader'
 import ChartsContainer from '@/client/components/charts-container'
 
 import { LanguageContext } from '@/client/context/language'
+import { ThemeContext } from '@/client/context/theme'
 import { upsStatus } from '@/common/constants'
 import { DEVICE, DeviceData } from '@/common/types'
 
@@ -59,6 +62,12 @@ export default function Wrapper({ getDevicesAction, checkSettingsAction, disconn
   const lng = useContext<string>(LanguageContext)
   const { t } = useTranslation(lng)
   const router = useRouter()
+  const { theme } = useContext(ThemeContext)
+  const materialTheme = createTheme({
+    palette: {
+      mode: theme,
+    },
+  })
   const { isLoading, data, refetch } = useQuery({
     queryKey: ['devicesData'],
     queryFn: async () => await getDevicesAction(),
@@ -207,65 +216,68 @@ export default function Wrapper({ getDevicesAction, checkSettingsAction, disconn
   }
 
   return (
-    <div
-      className='bg-gradient-to-b from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-900 dark:text-white'
-      data-testid='wrapper'
-    >
-      <NavBar
-        disableRefresh={isLoading}
-        onRefreshClick={() => refetch()}
-        onRefetch={() => refetch()}
-        onDeviceChange={(name: string) =>
-          data.devices && setPreferredDevice(data.devices.findIndex((d: DEVICE) => d.name === name))
-        }
-        onDisconnect={handleDisconnect}
-        devices={data.devices}
-      />
-      <div className='flex justify-center pl-3 pr-3'>
-        <div className='container'>
-          <div className='flex flex-row justify-between'>
-            <div>
-              {vars['ups.mfr']?.value || vars['ups.model']?.value ? (
-                <>
-                  <p className='m-0'>
-                    {t('manufacturer')}: {vars['ups.mfr']?.value}
-                  </p>
-                  <p className='m-0'>
-                    {t('model')}: {vars['ups.model']?.value}
-                  </p>
-                </>
-              ) : (
-                <>
-                  <p className='m-0'>
-                    {t('device')}: {ups.description}
-                  </p>
-                </>
-              )}
-              <p>
-                {t('serial')}: {vars['device.serial']?.value}
-              </p>
+    <ThemeProvider theme={materialTheme}>
+      <CssBaseline />
+      <div
+        className='bg-gradient-to-b from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-900 dark:text-white'
+        data-testid='wrapper'
+      >
+        <NavBar
+          disableRefresh={isLoading}
+          onRefreshClick={() => refetch()}
+          onRefetch={() => refetch()}
+          onDeviceChange={(name: string) =>
+            data.devices && setPreferredDevice(data.devices.findIndex((d: DEVICE) => d.name === name))
+          }
+          onDisconnect={handleDisconnect}
+          devices={data.devices}
+        />
+        <div className='flex justify-center pl-3 pr-3'>
+          <div className='container'>
+            <div className='flex flex-row justify-between'>
+              <div>
+                {vars['ups.mfr']?.value || vars['ups.model']?.value ? (
+                  <>
+                    <p className='m-0'>
+                      {t('manufacturer')}: {vars['ups.mfr']?.value}
+                    </p>
+                    <p className='m-0'>
+                      {t('model')}: {vars['ups.model']?.value}
+                    </p>
+                  </>
+                ) : (
+                  <>
+                    <p className='m-0'>
+                      {t('device')}: {ups.description}
+                    </p>
+                  </>
+                )}
+                <p>
+                  {t('serial')}: {vars['device.serial']?.value}
+                </p>
+              </div>
+              <div>
+                <p className='text-2xl font-semibold'>
+                  {getStatus(vars['ups.status']?.value as keyof typeof upsStatus)}
+                  &nbsp;{upsStatus[vars['ups.status']?.value as keyof typeof upsStatus]}
+                </p>
+              </div>
             </div>
-            <div>
-              <p className='text-2xl font-semibold'>
-                {getStatus(vars['ups.status']?.value as keyof typeof upsStatus)}
-                &nbsp;{upsStatus[vars['ups.status']?.value as keyof typeof upsStatus]}
-              </p>
+            <div className='grid grid-flow-row grid-cols-1 gap-x-6 md:grid-cols-2 lg:grid-cols-3'>
+              <div className='mb-4'>{currentLoad()}</div>
+              <div className='mb-4'>{currentWh()}</div>
+              <div className='mb-4'>
+                <Runtime runtime={+vars['battery.runtime']?.value} />
+              </div>
             </div>
-          </div>
-          <div className='grid grid-flow-row grid-cols-1 gap-x-6 md:grid-cols-2 lg:grid-cols-3'>
-            <div className='mb-4'>{currentLoad()}</div>
-            <div className='mb-4'>{currentWh()}</div>
+            <ChartsContainer vars={vars} data={data} name={ups.name} />
             <div className='mb-4'>
-              <Runtime runtime={+vars['battery.runtime']?.value} />
+              <MemoizedGrid data={ups} />
             </div>
+            <Footer updated={data.updated} />
           </div>
-          <ChartsContainer vars={vars} data={data} name={ups.name} />
-          <div className='mb-4'>
-            <MemoizedGrid data={ups} />
-          </div>
-          <Footer updated={data.updated} />
         </div>
       </div>
-    </div>
+    </ThemeProvider>
   )
 }