diff --git a/web/src/components/Settings/PrimarySettingsComponent.jsx b/web/src/components/Settings/PrimarySettingsComponent.jsx
index 4c51482..643e6bf 100644
--- a/web/src/components/Settings/PrimarySettingsComponent.jsx
+++ b/web/src/components/Settings/PrimarySettingsComponent.jsx
@@ -95,7 +95,7 @@ export default function PrimarySettingsComponent({
         />
 
         <FormControlLabel
-          control={<Switch checked={!!PreloadBuffer} onChange={inputForm} id='PreloadBuffer' color='primary' />}
+          control={<Switch checked={!!PreloadBuffer} onChange={inputForm} id='PreloadBuffer' color='secondary' />}
           label={t('SettingsDialog.PreloadBuffer')}
         />
       </div>
@@ -123,7 +123,9 @@ export default function PrimarySettingsComponent({
           </div>
 
           <FormControlLabel
-            control={<Switch checked={RemoveCacheOnDrop} onChange={inputForm} id='RemoveCacheOnDrop' color='primary' />}
+            control={
+              <Switch checked={RemoveCacheOnDrop} onChange={inputForm} id='RemoveCacheOnDrop' color='secondary' />
+            }
             label={t('SettingsDialog.RemoveCacheOnDrop')}
           />
           <div>
diff --git a/web/src/components/Settings/SecondarySettingsComponent.jsx b/web/src/components/Settings/SecondarySettingsComponent.jsx
index 0d1fcd6..12b6550 100644
--- a/web/src/components/Settings/SecondarySettingsComponent.jsx
+++ b/web/src/components/Settings/SecondarySettingsComponent.jsx
@@ -30,27 +30,27 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
       <SettingSectionLabel>{t('SettingsDialog.AdditionalSettings')}</SettingSectionLabel>
 
       <FormControlLabel
-        control={<Switch checked={EnableIPv6} onChange={inputForm} id='EnableIPv6' color='primary' />}
+        control={<Switch checked={EnableIPv6} onChange={inputForm} id='EnableIPv6' color='secondary' />}
         label='IPv6'
       />
       <br />
       <FormControlLabel
-        control={<Switch checked={!DisableTCP} onChange={inputForm} id='DisableTCP' color='primary' />}
+        control={<Switch checked={!DisableTCP} onChange={inputForm} id='DisableTCP' color='secondary' />}
         label='TCP (Transmission Control Protocol)'
       />
       <br />
       <FormControlLabel
-        control={<Switch checked={!DisableUTP} onChange={inputForm} id='DisableUTP' color='primary' />}
+        control={<Switch checked={!DisableUTP} onChange={inputForm} id='DisableUTP' color='secondary' />}
         label='μTP (Micro Transport Protocol)'
       />
       <br />
       <FormControlLabel
-        control={<Switch checked={!DisablePEX} onChange={inputForm} id='DisablePEX' color='primary' />}
+        control={<Switch checked={!DisablePEX} onChange={inputForm} id='DisablePEX' color='secondary' />}
         label='PEX (Peer Exchange)'
       />
       <br />
       <FormControlLabel
-        control={<Switch checked={ForceEncrypt} onChange={inputForm} id='ForceEncrypt' color='primary' />}
+        control={<Switch checked={ForceEncrypt} onChange={inputForm} id='ForceEncrypt' color='secondary' />}
         label={t('SettingsDialog.ForceEncrypt')}
       />
       <br />
@@ -75,7 +75,7 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
       />
       <br />
       <FormControlLabel
-        control={<Switch checked={!DisableDHT} onChange={inputForm} id='DisableDHT' color='primary' />}
+        control={<Switch checked={!DisableDHT} onChange={inputForm} id='DisableDHT' color='secondary' />}
         label={t('SettingsDialog.DHT')}
       />
       <br />
@@ -100,7 +100,7 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
       />
       <br />
       <FormControlLabel
-        control={<Switch checked={!DisableUpload} onChange={inputForm} id='DisableUpload' color='primary' />}
+        control={<Switch checked={!DisableUpload} onChange={inputForm} id='DisableUpload' color='secondary' />}
         label={t('SettingsDialog.Upload')}
       />
       <br />
@@ -125,7 +125,7 @@ export default function SecondarySettingsComponent({ settings, inputForm }) {
       />
       <br />
       <FormControlLabel
-        control={<Switch checked={!DisableUPNP} onChange={inputForm} id='DisableUPNP' color='primary' />}
+        control={<Switch checked={!DisableUPNP} onChange={inputForm} id='DisableUPNP' color='secondary' />}
         label='UPnP (Universal Plug and Play)'
       />
       <br />
diff --git a/web/src/components/Settings/SettingsDialog.jsx b/web/src/components/Settings/SettingsDialog.jsx
index f1700b1..5c3368a 100644
--- a/web/src/components/Settings/SettingsDialog.jsx
+++ b/web/src/components/Settings/SettingsDialog.jsx
@@ -102,8 +102,8 @@ export default function SettingsDialog({ handleClose }) {
         <Tabs
           value={selectedTab}
           onChange={handleChange}
-          indicatorColor='primary'
-          textColor='primary'
+          indicatorColor='secondary'
+          textColor='secondary'
           variant='fullWidth'
         >
           <Tab label={t('SettingsDialog.Tabs.Main')} {...a11yProps(0)} />
@@ -169,7 +169,7 @@ export default function SettingsDialog({ handleClose }) {
           {t('SettingsDialog.ResetToDefault')}
         </Button>
 
-        <Button variant='contained' onClick={handleSave} color='primary'>
+        <Button variant='contained' onClick={handleSave} color='secondary'>
           {t('Save')}
         </Button>
       </FooterSection>
diff --git a/web/src/components/Settings/SliderInput.jsx b/web/src/components/Settings/SliderInput.jsx
index a4d987e..5dc0a1c 100644
--- a/web/src/components/Settings/SliderInput.jsx
+++ b/web/src/components/Settings/SliderInput.jsx
@@ -28,7 +28,14 @@ export default function SliderInput({
 
       <Grid container spacing={2} alignItems='center'>
         <Grid item xs>
-          <Slider min={sliderMin} max={sliderMax} value={value} onChange={onSliderChange} step={step} />
+          <Slider
+            min={sliderMin}
+            max={sliderMax}
+            value={value}
+            onChange={onSliderChange}
+            step={step}
+            color='secondary'
+          />
         </Grid>
 
         {isProMode && (
diff --git a/web/src/components/Settings/style.js b/web/src/components/Settings/style.js
index 075c63c..ab1bea4 100644
--- a/web/src/components/Settings/style.js
+++ b/web/src/components/Settings/style.js
@@ -17,18 +17,24 @@ export const SettingsHeader = styled(Header)`
 `
 
 export const FooterSection = styled.div`
-  padding: 20px;
-  display: grid;
-  grid-auto-flow: column;
-  justify-content: end;
-  gap: 10px;
-  align-items: center;
-  background: #e8e5eb;
+  ${({
+    theme: {
+      settingsDialog: { footerBG },
+    },
+  }) => css`
+    padding: 20px;
+    display: grid;
+    grid-auto-flow: column;
+    justify-content: end;
+    gap: 10px;
+    align-items: center;
+    background: ${footerBG};
 
-  @media (max-width: 500px) {
-    grid-auto-flow: row;
-    justify-content: stretch;
-  }
+    @media (max-width: 500px) {
+      grid-auto-flow: row;
+      justify-content: stretch;
+    }
+  `}
 `
 export const Divider = styled.div`
   height: 1px;
@@ -37,8 +43,13 @@ export const Divider = styled.div`
 `
 
 export const Content = styled.div`
-  ${({ isLoading }) => css`
-    background: #f1eff3;
+  ${({
+    isLoading,
+    theme: {
+      settingsDialog: { contentBG },
+    },
+  }) => css`
+    background: ${contentBG};
     overflow: auto;
     flex: 1;
 
diff --git a/web/src/style/colors.js b/web/src/style/colors.js
index 1a009a0..d78eeae 100644
--- a/web/src/style/colors.js
+++ b/web/src/style/colors.js
@@ -47,6 +47,10 @@ export const themeColors = {
       defaultSecondaryColor: '#00a383',
       defaultTertiaryColor: '#03aa89',
     },
+    settingsDialog: {
+      contentBG: '#f1eff3',
+      footerBG: '#f1eff3',
+    },
   },
   dark: {
     app: {
@@ -94,6 +98,10 @@ export const themeColors = {
       defaultSecondaryColor: rgba('#545a5e', 0.9),
       defaultTertiaryColor: '#545a5e',
     },
+    settingsDialog: {
+      contentBG: '#5A6166',
+      footerBG: '#323637',
+    },
   },
 }