Merge branch 'android-materialize-colors'

99 files changed, 1029 insertions, 752 deletions

diff --git a/android/CHANGELOG.md b/android/CHANGELOG.md
index 0d809bb47a..827f07a480 100644
--- a/android/CHANGELOG.md
+++ b/android/CHANGELOG.md
@@ -29,6 +29,7 @@ Line wrap the file at 100 chars.                                              Th
 ### Changed
 - Migrate underlaying communication wtih daemon to gRPC. This also implies major changes and
   improvements throughout the app.
+- Update colors in the app to be more in line with material design.
 
 ### Fixed
 - Fix VPN service being recreated multiple times when toggling certain options.
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/AnimatedIconButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/AnimatedIconButton.kt
index 04681400b8..d197a1c62a 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/AnimatedIconButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/AnimatedIconButton.kt
@@ -20,8 +20,8 @@ fun AnimatedIconButton(
     defaultIcon: Painter,
     secondaryIcon: Painter,
     pressEffectDuration: Long = PRESS_EFFECT_TIME_SPAN,
-    defaultIconTint: Color = Color.Unspecified,
-    secondaryIconTint: Color = Color.Unspecified,
+    defaultIconTint: Color,
+    secondaryIconTint: Color,
     contentDescription: String,
     isToggleButton: Boolean = false,
     onClick: () -> Unit
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ApplyButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ApplyButton.kt
index bea3064548..18feb8e3e2 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ApplyButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ApplyButton.kt
@@ -24,7 +24,7 @@ private fun PreviewApplyButton() {
 @Composable
 fun ApplyButton(
     modifier: Modifier = Modifier,
-    background: Color = MaterialTheme.colorScheme.background,
+    background: Color = MaterialTheme.colorScheme.tertiary,
     onClick: () -> Unit,
     isEnabled: Boolean
 ) {
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ConnectionButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ConnectionButton.kt
index 209a7f19bc..eda1b86690 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ConnectionButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ConnectionButton.kt
@@ -37,8 +37,6 @@ import net.mullvad.mullvadvpn.lib.model.TunnelState
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaDisconnectButton
-import net.mullvad.mullvadvpn.lib.theme.color.onVariant
-import net.mullvad.mullvadvpn.lib.theme.color.variant
 
 @Composable
 fun ConnectionButton(
@@ -52,14 +50,14 @@ fun ConnectionButton(
 ) {
     val containerColor =
         if (state is TunnelState.Disconnected) {
-            MaterialTheme.colorScheme.variant
+            MaterialTheme.colorScheme.tertiary
         } else {
             MaterialTheme.colorScheme.error.copy(alpha = AlphaDisconnectButton)
         }
 
     val contentColor =
         if (state is TunnelState.Disconnected) {
-            MaterialTheme.colorScheme.onVariant
+            MaterialTheme.colorScheme.onTertiary
         } else {
             MaterialTheme.colorScheme.onError
         }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/MullvadButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/MullvadButton.kt
index 9f75a656c4..77f6ecc6cb 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/MullvadButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/MullvadButton.kt
@@ -14,7 +14,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
@@ -22,10 +21,10 @@ import androidx.compose.ui.unit.dp
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.Alpha20
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible
-import net.mullvad.mullvadvpn.lib.theme.color.onVariant
-import net.mullvad.mullvadvpn.lib.theme.color.variant
+import net.mullvad.mullvadvpn.lib.theme.color.errorDisabled
+import net.mullvad.mullvadvpn.lib.theme.color.primaryDisabled
+import net.mullvad.mullvadvpn.lib.theme.color.tertiaryDisabled
 
 @Preview
 @Composable
@@ -72,14 +71,8 @@ fun NegativeButton(
         ButtonDefaults.buttonColors(
             containerColor = MaterialTheme.colorScheme.error,
             contentColor = MaterialTheme.colorScheme.onError,
-            disabledContentColor =
-                MaterialTheme.colorScheme.onError
-                    .copy(alpha = AlphaInactive)
-                    .compositeOver(MaterialTheme.colorScheme.background),
-            disabledContainerColor =
-                MaterialTheme.colorScheme.error
-                    .copy(alpha = AlphaInactive)
-                    .compositeOver(MaterialTheme.colorScheme.background),
+            disabledContentColor = MaterialTheme.colorScheme.onError.copy(alpha = Alpha20),
+            disabledContainerColor = MaterialTheme.colorScheme.errorDisabled
         ),
     isEnabled: Boolean = true,
     icon: @Composable (() -> Unit)? = null
@@ -99,19 +92,13 @@ fun VariantButton(
     onClick: () -> Unit,
     text: String,
     modifier: Modifier = Modifier,
-    background: Color = MaterialTheme.colorScheme.background,
+    background: Color = MaterialTheme.colorScheme.tertiary,
     colors: ButtonColors =
         ButtonDefaults.buttonColors(
-            containerColor = MaterialTheme.colorScheme.variant,
-            contentColor = MaterialTheme.colorScheme.onVariant,
-            disabledContentColor =
-                MaterialTheme.colorScheme.onVariant
-                    .copy(alpha = AlphaInactive)
-                    .compositeOver(background),
-            disabledContainerColor =
-                MaterialTheme.colorScheme.variant
-                    .copy(alpha = AlphaInactive)
-                    .compositeOver(background),
+            containerColor = background,
+            contentColor = MaterialTheme.colorScheme.onTertiary,
+            disabledContentColor = MaterialTheme.colorScheme.onTertiary.copy(alpha = Alpha20),
+            disabledContainerColor = MaterialTheme.colorScheme.tertiaryDisabled,
         ),
     isEnabled: Boolean = true,
     icon: @Composable (() -> Unit)? = null
@@ -135,14 +122,8 @@ fun PrimaryButton(
         ButtonDefaults.buttonColors(
             containerColor = MaterialTheme.colorScheme.primary,
             contentColor = MaterialTheme.colorScheme.onPrimary,
-            disabledContentColor =
-                MaterialTheme.colorScheme.onPrimary
-                    .copy(alpha = Alpha20)
-                    .compositeOver(MaterialTheme.colorScheme.background),
-            disabledContainerColor =
-                MaterialTheme.colorScheme.primary
-                    .copy(alpha = AlphaInactive)
-                    .compositeOver(MaterialTheme.colorScheme.background),
+            disabledContentColor = MaterialTheme.colorScheme.onPrimary.copy(alpha = Alpha20),
+            disabledContainerColor = MaterialTheme.colorScheme.primaryDisabled,
         ),
     isEnabled: Boolean = true,
     leadingIcon: @Composable (() -> Unit)? = null,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt
index 57532a8d42..0ee867cca9 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt
@@ -1,9 +1,7 @@
 package net.mullvad.mullvadvpn.compose.button
 
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
@@ -22,14 +20,8 @@ private fun PreviewRedeemVoucherButton() {
 }
 
 @Composable
-fun RedeemVoucherButton(
-    modifier: Modifier = Modifier,
-    background: Color = MaterialTheme.colorScheme.background,
-    onClick: () -> Unit,
-    isEnabled: Boolean
-) {
+fun RedeemVoucherButton(modifier: Modifier = Modifier, onClick: () -> Unit, isEnabled: Boolean) {
     VariantButton(
-        background = background,
         text = stringResource(id = R.string.redeem_voucher),
         onClick = onClick,
         modifier = modifier,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt
index 93b5c77125..a67d6d1db2 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt
@@ -17,7 +17,7 @@ private fun PreviewSitePaymentButton() {
     AppTheme {
         SpacedColumn(
             spacing = Dimens.cellVerticalSpacing,
-            modifier = Modifier.background(color = MaterialTheme.colorScheme.background)
+            modifier = Modifier.background(color = MaterialTheme.colorScheme.surface)
         ) {
             SitePaymentButton(onClick = {}, isEnabled = true)
             SitePaymentButton(onClick = {}, isEnabled = false)
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt
index 291b5a743b..27d4e2c502 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt
@@ -34,8 +34,8 @@ fun SwitchLocationButton(
         onClick = onClick,
         colors =
             ButtonDefaults.buttonColors(
-                containerColor = MaterialTheme.colorScheme.inverseSurface.copy(alpha = Alpha20),
-                contentColor = MaterialTheme.colorScheme.inverseSurface
+                containerColor = MaterialTheme.colorScheme.onPrimary.copy(alpha = Alpha20),
+                contentColor = MaterialTheme.colorScheme.onPrimary
             ),
         modifier = modifier,
         text = text,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt
index ddb0878e45..66c73e33ca 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt
@@ -33,7 +33,7 @@ import net.mullvad.mullvadvpn.lib.theme.Dimens
 @Composable
 private fun PreviewBaseCell() {
     AppTheme {
-        SpacedColumn {
+        SpacedColumn(modifier = Modifier.background(MaterialTheme.colorScheme.surface)) {
             BaseCell(
                 headlineContent = {
                     BaseCellTitle(
@@ -102,14 +102,14 @@ internal fun BaseCellTitle(
     title: String,
     style: TextStyle,
     modifier: Modifier = Modifier,
-    color: Color = MaterialTheme.colorScheme.onPrimary,
-    textAlign: TextAlign = TextAlign.Start
+    textAlign: TextAlign = TextAlign.Start,
+    textColor: Color = MaterialTheme.colorScheme.onPrimary
 ) {
     Text(
         text = title,
         textAlign = textAlign,
         style = style,
-        color = color,
+        color = textColor,
         overflow = TextOverflow.Ellipsis,
         maxLines = 1,
         modifier = modifier
@@ -117,16 +117,31 @@ internal fun BaseCellTitle(
 }
 
 @Composable
-fun BaseSubtitleCell(text: String, modifier: Modifier = Modifier) {
-    BaseSubtitleCell(text = AnnotatedString(text), modifier = modifier)
+fun BaseSubtitleCell(
+    text: String,
+    modifier: Modifier = Modifier,
+    style: TextStyle = MaterialTheme.typography.labelMedium,
+    color: Color
+) {
+    BaseSubtitleCell(
+        text = AnnotatedString(text),
+        modifier = modifier,
+        style = style,
+        color = color
+    )
 }
 
 @Composable
-fun BaseSubtitleCell(text: AnnotatedString, modifier: Modifier = Modifier) {
+fun BaseSubtitleCell(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    style: TextStyle = MaterialTheme.typography.labelMedium,
+    color: Color
+) {
     Text(
         text = text,
-        style = MaterialTheme.typography.labelMedium,
-        color = MaterialTheme.colorScheme.onSecondary,
+        style = style,
+        color = color,
         modifier =
             modifier
                 .padding(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CheckboxCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CheckboxCell.kt
index 529a310919..9faff445ee 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CheckboxCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CheckboxCell.kt
@@ -32,7 +32,7 @@ internal fun CheckboxCell(
     title: String,
     checked: Boolean,
     onCheckedChange: (Boolean) -> Unit,
-    background: Color = MaterialTheme.colorScheme.secondaryContainer,
+    background: Color = MaterialTheme.colorScheme.surfaceContainerLow,
     startPadding: Dp = Dimens.mediumPadding,
     endPadding: Dp = Dimens.cellEndPadding,
     minHeight: Dp = Dimens.cellHeight
@@ -54,7 +54,7 @@ internal fun CheckboxCell(
         Text(
             text = title,
             style = MaterialTheme.typography.labelLarge,
-            color = MaterialTheme.colorScheme.onBackground,
+            color = MaterialTheme.colorScheme.onSurface,
             modifier =
                 Modifier.weight(1f)
                     .padding(top = Dimens.mediumPadding, bottom = Dimens.mediumPadding)
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomPortCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomPortCell.kt
index cdb4825150..139f6adeed 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomPortCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomPortCell.kt
@@ -31,13 +31,14 @@ import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible
+import net.mullvad.mullvadvpn.lib.theme.color.onSelected
 import net.mullvad.mullvadvpn.lib.theme.color.selected
 
 @Preview
 @Composable
 private fun PreviewCustomPortCell() {
     AppTheme {
-        SpacedColumn(Modifier.background(MaterialTheme.colorScheme.background)) {
+        SpacedColumn(Modifier.background(MaterialTheme.colorScheme.surface)) {
             CustomPortCell(title = "Title", isSelected = true, port = Port(444))
             CustomPortCell(title = "Title", isSelected = false, port = null)
         }
@@ -70,7 +71,7 @@ fun CustomPortCell(
                         if (isSelected) {
                             MaterialTheme.colorScheme.selected
                         } else {
-                            MaterialTheme.colorScheme.secondaryContainer
+                            MaterialTheme.colorScheme.surfaceContainerLow
                         }
                     )
                     .padding(start = Dimens.cellStartPadding)
@@ -79,7 +80,7 @@ fun CustomPortCell(
             Icon(
                 painter = painterResource(id = R.drawable.icon_tick),
                 contentDescription = null,
-                tint = MaterialTheme.colorScheme.onPrimary,
+                tint = MaterialTheme.colorScheme.onSelected,
                 modifier =
                     Modifier.padding(end = Dimens.selectableCellTextMargin)
                         .alpha(if (isSelected) AlphaVisible else AlphaInvisible)
@@ -87,7 +88,13 @@ fun CustomPortCell(
             BaseCellTitle(
                 title = title,
                 style = MaterialTheme.typography.labelLarge,
-                textAlign = TextAlign.Start
+                textAlign = TextAlign.Start,
+                textColor =
+                    if (isSelected) {
+                        MaterialTheme.colorScheme.onSelected
+                    } else {
+                        MaterialTheme.colorScheme.onSurface
+                    }
             )
         }
         Spacer(modifier = Modifier.width(Dimens.verticalSpacer))
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt
index 21d5558f9e..84dd8003d0 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt
@@ -6,7 +6,6 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
@@ -14,6 +13,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.color.warning
 
 @Preview
 @Composable
@@ -40,12 +40,12 @@ fun DnsCell(
                 Icon(
                     painter = painterResource(id = R.drawable.icon_alert),
                     contentDescription = stringResource(id = R.string.confirm_local_dns),
-                    tint = MaterialTheme.colorScheme.errorContainer
+                    tint = MaterialTheme.colorScheme.warning
                 )
             }
         },
         onCellClicked = { onClick.invoke() },
-        background = MaterialTheme.colorScheme.secondaryContainer,
+        background = MaterialTheme.colorScheme.surfaceContainerLow,
         startPadding = startPadding,
         modifier = modifier
     )
@@ -55,7 +55,7 @@ fun DnsCell(
 private fun RowScope.DnsTitle(address: String, modifier: Modifier = Modifier) {
     Text(
         text = address,
-        color = Color.White,
+        color = MaterialTheme.colorScheme.onSurface,
         style = MaterialTheme.typography.labelLarge,
         textAlign = TextAlign.Start,
         modifier = modifier.weight(1f)
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DropdownMenuCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DropdownMenuCell.kt
index 9c429757fb..afd9e1c21c 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DropdownMenuCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DropdownMenuCell.kt
@@ -37,7 +37,7 @@ fun ThreeDotCell(
             BaseCellTitle(
                 title = text,
                 style = textStyle,
-                color = textColor,
+                textColor = textColor,
                 modifier = Modifier.weight(1f, true)
             )
         },
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
index d47cfeabfc..0132c3c8f8 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
@@ -13,6 +13,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.focus.focusProperties
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -49,6 +50,8 @@ fun ExpandableComposeCell(
     modifier: Modifier = Modifier,
     isEnabled: Boolean = true,
     testTag: String = "",
+    textColor: Color = MaterialTheme.colorScheme.onPrimary,
+    background: Color = MaterialTheme.colorScheme.primary,
     onCellClicked: (Boolean) -> Unit = {},
     onInfoClicked: (() -> Unit)? = null
 ) {
@@ -61,6 +64,7 @@ fun ExpandableComposeCell(
             BaseCellTitle(
                 title = title,
                 style = MaterialTheme.typography.titleMedium,
+                textColor = textColor,
                 modifier = titleModifier.weight(1f, fill = true)
             )
         },
@@ -72,6 +76,7 @@ fun ExpandableComposeCell(
                 onInfoClicked = onInfoClicked
             )
         },
+        background = background,
         onCellClicked = { onCellClicked(!isExpanded) }
     )
 }
@@ -105,6 +110,7 @@ private fun ExpandableComposeCellBody(
         ChevronButton(
             isExpanded = isExpanded,
             onExpand = onExpand,
+            color = MaterialTheme.colorScheme.onPrimary
         )
     }
 }
@@ -122,7 +128,7 @@ fun ContentBlockersDisableModeCellSubtitle(modifier: Modifier) {
     Text(
         text = spanned.toAnnotatedString(boldFontWeight = FontWeight.ExtraBold),
         style = MaterialTheme.typography.labelMedium,
-        color = MaterialTheme.colorScheme.onSecondary,
+        color = MaterialTheme.colorScheme.onSurfaceVariant,
         modifier = modifier
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/HeaderCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/HeaderCell.kt
index 3260e9099a..5f5eda0b4e 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/HeaderCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/HeaderCell.kt
@@ -19,7 +19,7 @@ fun HeaderCell(
             BaseCellTitle(
                 title = text,
                 style = textStyle,
-                color = textColor,
+                textColor = textColor,
             )
         },
         modifier = modifier,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/IconCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/IconCell.kt
index 3b68e42e45..32ab1a9e4b 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/IconCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/IconCell.kt
@@ -45,7 +45,7 @@ fun IconCell(
                     )
                     Spacer(modifier = Modifier.width(Dimens.mediumPadding))
                 }
-                BaseCellTitle(title = title, style = titleStyle, color = titleColor)
+                BaseCellTitle(title = title, style = titleStyle, textColor = titleColor)
             }
         },
         onCellClicked = onClick,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt
index f490294491..7b674382cd 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt
@@ -51,6 +51,7 @@ fun InformationComposeCell(
             BaseCellTitle(
                 title = title,
                 style = MaterialTheme.typography.titleMedium,
+                textColor = MaterialTheme.colorScheme.onPrimary,
                 modifier = titleModifier.weight(1f, true)
             )
         },
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/MtuComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/MtuComposeCell.kt
index 0ea18d0b48..36df885a5b 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/MtuComposeCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/MtuComposeCell.kt
@@ -57,6 +57,8 @@ private fun MtuBodyView(mtuValue: Mtu?, modifier: Modifier) {
 fun MtuSubtitle(modifier: Modifier = Modifier) {
     BaseSubtitleCell(
         text = stringResource(R.string.wireguard_mtu_footer, MTU_MIN_VALUE, MTU_MAX_VALUE),
-        modifier
+        style = MaterialTheme.typography.labelMedium,
+        color = MaterialTheme.colorScheme.onSurfaceVariant,
+        modifier = modifier
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/NavigationComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/NavigationComposeCell.kt
index 67890a1d58..926b6bf4b9 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/NavigationComposeCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/NavigationComposeCell.kt
@@ -30,7 +30,7 @@ private fun PreviewNavigationCell() {
                 NavigationCellBody(
                     contentBodyDescription = "",
                     content = "content body",
-                    contentColor = MaterialTheme.colorScheme.error,
+                    contentColor = MaterialTheme.colorScheme.onPrimary,
                 )
             },
             onClick = {},
@@ -49,7 +49,7 @@ private fun PreviewExternalLinkComposeCell() {
                 NavigationCellBody(
                     contentBodyDescription = "content body",
                     content = "content body",
-                    contentColor = MaterialTheme.colorScheme.onSecondary,
+                    contentColor = MaterialTheme.colorScheme.onPrimary,
                     isExternalLink = true
                 )
             },
@@ -64,7 +64,10 @@ fun NavigationComposeCell(
     title: String,
     modifier: Modifier = Modifier,
     showWarning: Boolean = false,
-    bodyView: @Composable () -> Unit = { DefaultNavigationView(chevronContentDescription = title) },
+    textColor: Color = MaterialTheme.colorScheme.onPrimary,
+    bodyView: @Composable () -> Unit = {
+        DefaultNavigationView(chevronContentDescription = title, tint = textColor)
+    },
     isRowEnabled: Boolean = true,
     onClick: () -> Unit,
     testTag: String = ""
@@ -109,20 +112,20 @@ internal fun NavigationTitleView(
 }
 
 @Composable
-internal fun DefaultNavigationView(chevronContentDescription: String) {
+internal fun DefaultNavigationView(chevronContentDescription: String, tint: Color) {
     Icon(
         painter = painterResource(id = R.drawable.icon_chevron),
         contentDescription = chevronContentDescription,
-        tint = Color.Unspecified
+        tint = tint
     )
 }
 
 @Composable
-internal fun DefaultExternalLinkView(chevronContentDescription: String) {
+internal fun DefaultExternalLinkView(chevronContentDescription: String, tint: Color) {
     Icon(
         painter = painterResource(id = R.drawable.icon_extlink),
         contentDescription = chevronContentDescription,
-        tint = Color.Unspecified
+        tint = tint
     )
 }
 
@@ -131,19 +134,23 @@ internal fun NavigationCellBody(
     content: String,
     contentBodyDescription: String,
     modifier: Modifier = Modifier,
-    contentColor: Color = MaterialTheme.colorScheme.onSecondary,
+    contentColor: Color = MaterialTheme.colorScheme.onPrimary,
+    textColor: Color = MaterialTheme.colorScheme.onPrimary,
     isExternalLink: Boolean = false
 ) {
     Row(
         verticalAlignment = Alignment.CenterVertically,
         modifier = modifier.wrapContentWidth().wrapContentHeight()
     ) {
-        Text(text = content, style = MaterialTheme.typography.labelMedium, color = contentColor)
+        Text(text = content, style = MaterialTheme.typography.labelMedium, color = textColor)
         Spacer(modifier = Modifier.width(Dimens.sideMargin))
         if (isExternalLink) {
-            DefaultExternalLinkView(content)
+            DefaultExternalLinkView(content, tint = contentColor)
         } else {
-            DefaultNavigationView(chevronContentDescription = contentBodyDescription)
+            DefaultNavigationView(
+                chevronContentDescription = contentBodyDescription,
+                tint = contentColor
+            )
         }
     }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt
index cf9682bcbe..822d6118cb 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt
@@ -47,7 +47,7 @@ private fun PreviewCheckableRelayLocationCell(
     relayItems: List<RelayItem.Location.Country>
 ) {
     AppTheme {
-        Column(Modifier.background(color = MaterialTheme.colorScheme.background)) {
+        Column(Modifier.background(color = MaterialTheme.colorScheme.surface)) {
             relayItems.map {
                 CheckableRelayLocationCell(
                     item = it,
@@ -74,7 +74,7 @@ fun StatusRelayItemCell(
     depth: Int = 0,
     activeColor: Color = MaterialTheme.colorScheme.selected,
     inactiveColor: Color = MaterialTheme.colorScheme.error,
-    disabledColor: Color = MaterialTheme.colorScheme.onSecondary,
+    disabledColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
 ) {
 
     RelayItemCell(
@@ -95,7 +95,6 @@ fun StatusRelayItemCell(
                             .background(
                                 color =
                                     when {
-                                        isSelected -> Color.Unspecified
                                         item is RelayItem.CustomList && item.locations.isEmpty() ->
                                             disabledColor
                                         item.active -> activeColor
@@ -139,8 +138,6 @@ fun RelayItemCell(
                 .background(
                     when {
                         isSelected -> MaterialTheme.colorScheme.selected
-                        item is RelayItem.CustomList && !item.active ->
-                            MaterialTheme.colorScheme.surfaceTint
                         else -> depth.toBackgroundColor()
                     }
                 )
@@ -158,7 +155,11 @@ fun RelayItemCell(
         Name(modifier = Modifier.weight(1f), relay = item)
 
         if (item.hasChildren) {
-            ExpandButton(isExpanded = isExpanded, onClick = { onToggleExpand(!isExpanded) })
+            ExpandButton(
+                color = MaterialTheme.colorScheme.onSurface,
+                isExpanded = isExpanded,
+                onClick = { onToggleExpand(!isExpanded) }
+            )
         }
     }
 }
@@ -194,7 +195,7 @@ fun CheckableRelayLocationCell(
 private fun Name(modifier: Modifier = Modifier, relay: RelayItem) {
     Text(
         text = relay.name,
-        color = MaterialTheme.colorScheme.onPrimary,
+        color = MaterialTheme.colorScheme.onSurface,
         modifier =
             modifier
                 .alpha(
@@ -211,12 +212,17 @@ private fun Name(modifier: Modifier = Modifier, relay: RelayItem) {
 }
 
 @Composable
-private fun RowScope.ExpandButton(isExpanded: Boolean, onClick: (expand: Boolean) -> Unit) {
+private fun RowScope.ExpandButton(
+    color: Color,
+    isExpanded: Boolean,
+    onClick: (expand: Boolean) -> Unit
+) {
     VerticalDivider(
-        color = MaterialTheme.colorScheme.background,
+        color = MaterialTheme.colorScheme.surface,
         modifier = Modifier.padding(vertical = Dimens.verticalDividerPadding)
     )
     Chevron(
+        color = color,
         isExpanded = isExpanded,
         modifier =
             Modifier.fillMaxHeight()
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt
index dffc15bf12..1f3a546c10 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt
@@ -20,13 +20,14 @@ import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaDisabled
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible
+import net.mullvad.mullvadvpn.lib.theme.color.onSelected
 import net.mullvad.mullvadvpn.lib.theme.color.selected
 
 @Preview
 @Composable
 private fun PreviewSelectableCell() {
     AppTheme {
-        SpacedColumn(Modifier.background(MaterialTheme.colorScheme.background)) {
+        SpacedColumn(Modifier.background(MaterialTheme.colorScheme.surface)) {
             SelectableCell(title = "Selected", isSelected = true)
             SelectableCell(title = "Not Selected", isSelected = false)
         }
@@ -44,7 +45,7 @@ fun SelectableCell(
         Icon(
             painter = painterResource(id = R.drawable.icon_tick),
             contentDescription = iconContentDescription,
-            tint = MaterialTheme.colorScheme.onPrimary,
+            tint = MaterialTheme.colorScheme.onSelected,
             modifier =
                 Modifier.padding(end = Dimens.selectableCellTextMargin)
                     .alpha(
@@ -56,7 +57,9 @@ fun SelectableCell(
     titleStyle: TextStyle = MaterialTheme.typography.labelLarge,
     startPadding: Dp = Dimens.cellStartPadding,
     selectedColor: Color = MaterialTheme.colorScheme.selected,
-    backgroundColor: Color = MaterialTheme.colorScheme.secondaryContainer,
+    backgroundColor: Color = MaterialTheme.colorScheme.surfaceContainerLow,
+    onSelectedColor: Color = MaterialTheme.colorScheme.onSelected,
+    onBackgroundColor: Color = MaterialTheme.colorScheme.onSurface,
     onCellClicked: () -> Unit = {},
     testTag: String = ""
 ) {
@@ -68,9 +71,20 @@ fun SelectableCell(
             BaseCellTitle(
                 title = title,
                 style = titleStyle,
-                color =
-                    if (isEnabled) MaterialTheme.colorScheme.onPrimary
-                    else MaterialTheme.colorScheme.onPrimary.copy(AlphaDisabled)
+                textColor =
+                    if (isSelected) {
+                            onSelectedColor
+                        } else {
+                            onBackgroundColor
+                        }
+                        .copy(
+                            alpha =
+                                if (isEnabled) {
+                                    AlphaVisible
+                                } else {
+                                    AlphaDisabled
+                                }
+                        )
             )
         },
         background =
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SplitTunnelingCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SplitTunnelingCell.kt
index 1bf8acf731..b4899fed23 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SplitTunnelingCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SplitTunnelingCell.kt
@@ -17,9 +17,9 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.asImageBitmap
-import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.graphics.painter.BitmapPainter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -31,7 +31,6 @@ import net.mullvad.mullvadvpn.compose.component.SpacedColumn
 import net.mullvad.mullvadvpn.compose.util.isBelowMaxBitmapSize
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.color.Alpha40
 import net.mullvad.mullvadvpn.lib.theme.typeface.listItemText
 
 @Preview
@@ -39,8 +38,7 @@ import net.mullvad.mullvadvpn.lib.theme.typeface.listItemText
 private fun PreviewTunnelingCell() {
     AppTheme {
         SpacedColumn(
-            modifier =
-                Modifier.background(color = MaterialTheme.colorScheme.background).padding(20.dp)
+            modifier = Modifier.background(color = MaterialTheme.colorScheme.surface).padding(20.dp)
         ) {
             SplitTunnelingCell(
                 title = "Mullvad VPN",
@@ -65,10 +63,7 @@ fun SplitTunnelingCell(
     isSelected: Boolean,
     enabled: Boolean,
     modifier: Modifier = Modifier,
-    backgroundColor: Color =
-        MaterialTheme.colorScheme.primary
-            .copy(alpha = Alpha40)
-            .compositeOver(MaterialTheme.colorScheme.background),
+    backgroundColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh,
     onResolveIcon: (String) -> Bitmap? = { null },
     onCellClicked: () -> Unit = {}
 ) {
@@ -89,14 +84,20 @@ fun SplitTunnelingCell(
                         ?: painterResource(id = R.drawable.ic_icons_missing),
                 contentDescription = null,
                 modifier =
-                    Modifier.align(Alignment.CenterVertically).size(size = Dimens.listIconSize)
+                    Modifier.align(Alignment.CenterVertically).size(size = Dimens.listIconSize),
+                colorFilter =
+                    if (icon == null) {
+                        ColorFilter.tint(MaterialTheme.colorScheme.onSurface)
+                    } else {
+                        null
+                    }
             )
         },
         headlineContent = {
             Text(
                 text = title,
                 style = MaterialTheme.typography.listItemText,
-                color = MaterialTheme.colorScheme.onPrimary,
+                color = MaterialTheme.colorScheme.onSurface,
                 modifier =
                     Modifier.weight(1f)
                         .padding(horizontal = Dimens.mediumPadding)
@@ -115,10 +116,7 @@ fun SplitTunnelingCell(
                             }
                     ),
                 contentDescription = null,
-                tint =
-                    MaterialTheme.colorScheme.onBackground
-                        .copy(alpha = Alpha40)
-                        .compositeOver(backgroundColor),
+                tint = MaterialTheme.colorScheme.onSurface,
                 modifier = Modifier.size(size = Dimens.addIconSize)
             )
         },
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt
index 11045fa617..28dbf8034a 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt
@@ -1,5 +1,6 @@
 package net.mullvad.mullvadvpn.compose.cell
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.padding
@@ -34,7 +35,7 @@ import net.mullvad.mullvadvpn.lib.theme.color.AlphaDisabled
 @Composable
 private fun PreviewSwitchComposeCell() {
     AppTheme {
-        SpacedColumn {
+        SpacedColumn(modifier = Modifier.background(MaterialTheme.colorScheme.surface)) {
             HeaderSwitchComposeCell(
                 title = "Checkbox Title",
                 isEnabled = true,
@@ -59,7 +60,8 @@ fun NormalSwitchComposeCell(
     isToggled: Boolean,
     startPadding: Dp = Dimens.indentedCellStartPadding,
     isEnabled: Boolean = true,
-    background: Color = MaterialTheme.colorScheme.primary,
+    background: Color = MaterialTheme.colorScheme.surfaceContainerLow,
+    onBackground: Color = MaterialTheme.colorScheme.onSurface,
     onCellClicked: (Boolean) -> Unit = {},
     onInfoClicked: (() -> Unit)? = null
 ) {
@@ -69,15 +71,14 @@ fun NormalSwitchComposeCell(
                 title = title,
                 style = MaterialTheme.typography.labelLarge,
                 modifier = Modifier.weight(1f, true),
-                color =
-                    if (isEnabled) MaterialTheme.colorScheme.onPrimary
-                    else MaterialTheme.colorScheme.onPrimary.copy(AlphaDisabled)
+                textColor = if (isEnabled) onBackground else onBackground.copy(AlphaDisabled)
             )
         },
         isToggled = isToggled,
         startPadding = startPadding,
         isEnabled = isEnabled,
         background = background,
+        onBackground = onBackground,
         onCellClicked = onCellClicked,
         onInfoClicked = onInfoClicked
     )
@@ -91,6 +92,7 @@ fun HeaderSwitchComposeCell(
     startPadding: Dp = Dimens.cellStartPadding,
     isEnabled: Boolean = true,
     background: Color = MaterialTheme.colorScheme.primary,
+    onBackground: Color = MaterialTheme.colorScheme.onPrimary,
     onCellClicked: (Boolean) -> Unit = {},
     onInfoClicked: (() -> Unit)? = null,
 ) {
@@ -99,13 +101,15 @@ fun HeaderSwitchComposeCell(
             BaseCellTitle(
                 title = title,
                 style = MaterialTheme.typography.titleMedium,
-                modifier = Modifier.weight(1f, fill = true)
+                modifier = Modifier.weight(1f, fill = true),
+                textColor = onBackground
             )
         },
         isToggled = isToggled,
         startPadding = startPadding,
         isEnabled = isEnabled,
         background = background,
+        onBackground = onBackground,
         onCellClicked = onCellClicked,
         onInfoClicked = onInfoClicked,
         modifier,
@@ -119,6 +123,7 @@ private fun SwitchComposeCell(
     startPadding: Dp,
     isEnabled: Boolean,
     background: Color,
+    onBackground: Color,
     onCellClicked: (Boolean) -> Unit,
     onInfoClicked: (() -> Unit)?,
     modifier: Modifier = Modifier,
@@ -132,6 +137,7 @@ private fun SwitchComposeCell(
                 onSwitchClicked = onCellClicked,
                 isEnabled = isEnabled,
                 isToggled = isToggled,
+                iconColor = onBackground,
                 onInfoClicked = onInfoClicked
             )
         },
@@ -145,6 +151,7 @@ private fun SwitchComposeCell(
 fun SwitchCellView(
     isEnabled: Boolean,
     isToggled: Boolean,
+    iconColor: Color,
     modifier: Modifier = Modifier,
     onSwitchClicked: ((Boolean) -> Unit)? = null,
     onInfoClicked: (() -> Unit)? = null
@@ -163,7 +170,7 @@ fun SwitchCellView(
                 Icon(
                     painter = painterResource(id = R.drawable.icon_info),
                     contentDescription = null,
-                    tint = MaterialTheme.colorScheme.onPrimary
+                    tint = iconColor
                 )
             }
         }
@@ -189,17 +196,25 @@ fun CustomDnsCellSubtitle(isCellClickable: Boolean, modifier: Modifier) {
     Text(
         text = spanned.toAnnotatedString(boldFontWeight = FontWeight.ExtraBold),
         style = MaterialTheme.typography.labelMedium,
-        color = MaterialTheme.colorScheme.onSecondary,
+        color = MaterialTheme.colorScheme.onSurfaceVariant,
         modifier = modifier
     )
 }
 
 @Composable
-fun SwitchComposeSubtitleCell(text: String, modifier: Modifier = Modifier) {
-    BaseSubtitleCell(text = text, modifier = modifier)
+fun SwitchComposeSubtitleCell(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colorScheme.onSurfaceVariant
+) {
+    BaseSubtitleCell(text = text, modifier = modifier, color = color)
 }
 
 @Composable
-fun SwitchComposeSubtitleCell(text: AnnotatedString, modifier: Modifier = Modifier) {
-    BaseSubtitleCell(text = text, modifier = modifier)
+fun SwitchComposeSubtitleCell(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colorScheme.onSurfaceVariant
+) {
+    BaseSubtitleCell(text = text, modifier = modifier, color = color)
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt
index 5510b54fac..b24c9a5fe6 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt
@@ -5,7 +5,6 @@ import androidx.compose.animation.core.TweenSpec
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
@@ -13,14 +12,9 @@ import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaChevron
 
 @Composable
-fun Chevron(
-    modifier: Modifier = Modifier,
-    color: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaChevron),
-    isExpanded: Boolean
-) {
+fun Chevron(modifier: Modifier = Modifier, color: Color, isExpanded: Boolean) {
 
     val degree = remember(isExpanded) { if (isExpanded) 270f else 90f }
     val animatedRotation =
@@ -41,7 +35,7 @@ fun Chevron(
 @Composable
 fun ChevronButton(
     modifier: Modifier = Modifier,
-    color: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaChevron),
+    color: Color,
     onExpand: (Boolean) -> Unit,
     isExpanded: Boolean
 ) {
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CircularProgressIndicator.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CircularProgressIndicator.kt
index dec129cd28..0973167b16 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CircularProgressIndicator.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CircularProgressIndicator.kt
@@ -34,7 +34,7 @@ private fun PreviewMullvadProgressIndicator() {
 @Composable
 fun MullvadCircularProgressIndicatorLarge(
     modifier: Modifier = Modifier,
-    color: Color = MaterialTheme.colorScheme.onBackground,
+    color: Color = MaterialTheme.colorScheme.onSurface,
     trackColor: Color = color.copy(alpha = Alpha20),
 ) {
     CircularProgressIndicator(
@@ -49,7 +49,7 @@ fun MullvadCircularProgressIndicatorLarge(
 @Composable
 fun MullvadCircularProgressIndicatorMedium(
     modifier: Modifier = Modifier,
-    color: Color = MaterialTheme.colorScheme.onBackground,
+    color: Color = MaterialTheme.colorScheme.onSurface,
     trackColor: Color = color.copy(alpha = Alpha20),
 ) {
     CircularProgressIndicator(
@@ -64,7 +64,7 @@ fun MullvadCircularProgressIndicatorMedium(
 @Composable
 fun MullvadCircularProgressIndicatorSmall(
     modifier: Modifier = Modifier,
-    color: Color = MaterialTheme.colorScheme.onBackground,
+    color: Color = MaterialTheme.colorScheme.onSurface,
     trackColor: Color = color.copy(alpha = Alpha20),
 ) {
     CircularProgressIndicator(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/ConnectionStatusText.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/ConnectionStatusText.kt
index 8a13c51612..b4d6b0d60c 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/ConnectionStatusText.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/ConnectionStatusText.kt
@@ -1,15 +1,20 @@
 package net.mullvad.mullvadvpn.compose.component
 
+import androidx.compose.foundation.background
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
+import java.net.InetSocketAddress
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.lib.model.ActionAfterDisconnect
+import net.mullvad.mullvadvpn.lib.model.Endpoint
 import net.mullvad.mullvadvpn.lib.model.ErrorState
 import net.mullvad.mullvadvpn.lib.model.ErrorStateCause
+import net.mullvad.mullvadvpn.lib.model.TransportProtocol
+import net.mullvad.mullvadvpn.lib.model.TunnelEndpoint
 import net.mullvad.mullvadvpn.lib.model.TunnelState
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.typeface.connectionStatus
@@ -18,12 +23,44 @@ import net.mullvad.mullvadvpn.lib.theme.typeface.connectionStatus
 @Composable
 private fun PreviewConnectionStatusText() {
     AppTheme {
-        SpacedColumn {
+        SpacedColumn(modifier = Modifier.background(MaterialTheme.colorScheme.surface)) {
             ConnectionStatusText(TunnelState.Disconnected())
             ConnectionStatusText(TunnelState.Connecting(null, null))
             ConnectionStatusText(
                 state = TunnelState.Error(ErrorState(ErrorStateCause.Ipv6Unavailable, true))
             )
+            ConnectionStatusText(
+                state =
+                    TunnelState.Connected(
+                        endpoint =
+                            TunnelEndpoint(
+                                endpoint =
+                                    Endpoint(
+                                        address = InetSocketAddress(10),
+                                        protocol = TransportProtocol.Tcp
+                                    ),
+                                quantumResistant = false,
+                                obfuscation = null
+                            ),
+                        location = null
+                    )
+            )
+            ConnectionStatusText(
+                state =
+                    TunnelState.Connected(
+                        endpoint =
+                            TunnelEndpoint(
+                                endpoint =
+                                    Endpoint(
+                                        address = InetSocketAddress(10),
+                                        protocol = TransportProtocol.Tcp
+                                    ),
+                                quantumResistant = true,
+                                obfuscation = null
+                            ),
+                        location = null
+                    )
+            )
         }
     }
 }
@@ -74,7 +111,7 @@ private fun ConnectingText(isQuantumResistant: Boolean, modifier: Modifier) {
                     if (isQuantumResistant) R.string.quantum_creating_secure_connection
                     else R.string.creating_secure_connection
             ),
-        color = MaterialTheme.colorScheme.onPrimary,
+        color = MaterialTheme.colorScheme.onSurface,
         style = MaterialTheme.typography.connectionStatus,
         maxLines = 1,
         overflow = TextOverflow.Ellipsis,
@@ -91,7 +128,7 @@ private fun ConnectedText(isQuantumResistant: Boolean, modifier: Modifier) {
                     if (isQuantumResistant) R.string.quantum_secure_connection
                     else R.string.secure_connection
             ),
-        color = MaterialTheme.colorScheme.surface,
+        color = MaterialTheme.colorScheme.tertiary,
         style = MaterialTheme.typography.connectionStatus,
         maxLines = 1,
         overflow = TextOverflow.Ellipsis,
@@ -107,11 +144,11 @@ private fun ErrorText(isBlocking: Boolean, modifier: Modifier) {
                 id = if (isBlocking) R.string.blocked_connection else R.string.error_state
             ),
         color =
-            if (isBlocking) MaterialTheme.colorScheme.onPrimary
+            if (isBlocking) MaterialTheme.colorScheme.onSurface
             else MaterialTheme.colorScheme.error,
         style = MaterialTheme.typography.connectionStatus,
         maxLines = 1,
         overflow = TextOverflow.Ellipsis,
-        modifier = modifier
+        modifier = modifier,
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt
index 32c9f83a33..bbb6f07dda 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt
@@ -40,6 +40,8 @@ fun CopyableObfuscationView(
         AnimatedIconButton(
             defaultIcon = painterResource(id = R.drawable.icon_hide),
             secondaryIcon = painterResource(id = R.drawable.icon_show),
+            defaultIconTint = MaterialTheme.colorScheme.onSurface,
+            secondaryIconTint = MaterialTheme.colorScheme.onSurface,
             isToggleButton = true,
             contentDescription = stringResource(id = R.string.hide_account_number),
             onClick = { obfuscationEnabled = !obfuscationEnabled }
@@ -54,7 +56,8 @@ fun CopyAnimatedIconButton(onClick: () -> Unit) {
     AnimatedIconButton(
         defaultIcon = painterResource(id = R.drawable.icon_copy),
         secondaryIcon = painterResource(id = R.drawable.icon_tick),
-        secondaryIconTint = MaterialTheme.colorScheme.inversePrimary,
+        defaultIconTint = MaterialTheme.colorScheme.onSurface,
+        secondaryIconTint = MaterialTheme.colorScheme.tertiary,
         isToggleButton = false,
         contentDescription = stringResource(id = R.string.copy_account_number),
         onClick = onClick
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/FilterChip.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/FilterChip.kt
index d317c667e2..9f835944a7 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/FilterChip.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/FilterChip.kt
@@ -1,13 +1,9 @@
 package net.mullvad.mullvadvpn.compose.component
 
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.FilterChip
 import androidx.compose.material3.FilterChipDefaults
 import androidx.compose.material3.Icon
+import androidx.compose.material3.InputChip
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -33,33 +29,36 @@ private fun PreviewMullvadFilterChip() {
 }
 
 @Composable
-fun MullvadFilterChip(text: String, onRemoveClick: () -> Unit) {
-    FilterChip(
-        modifier = Modifier.padding(vertical = Dimens.chipVerticalPadding),
+fun MullvadFilterChip(
+    containerColor: Color = MaterialTheme.colorScheme.primary,
+    borderColor: Color = Color.Transparent,
+    labelColor: Color = MaterialTheme.colorScheme.onPrimary,
+    iconColor: Color = MaterialTheme.colorScheme.onPrimary,
+    text: String,
+    onRemoveClick: () -> Unit
+) {
+    InputChip(
         shape = MaterialTheme.shapes.chipShape,
         colors =
-            FilterChipDefaults.filterChipColors(containerColor = MaterialTheme.colorScheme.primary),
+            FilterChipDefaults.filterChipColors(
+                containerColor = containerColor,
+                labelColor = labelColor,
+                iconColor = iconColor
+            ),
         border =
             FilterChipDefaults.filterChipBorder(
-                borderColor = Color.Transparent,
-                disabledBorderColor = Color.Transparent,
+                borderColor = borderColor,
                 enabled = true,
                 selected = false
             ),
         selected = false,
-        onClick = {},
-        label = {
-            Text(
-                text = text,
-                color = MaterialTheme.colorScheme.onPrimary,
-                style = MaterialTheme.typography.labelMedium
-            )
-            Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
+        onClick = onRemoveClick,
+        label = { Text(text = text, style = MaterialTheme.typography.labelMedium) },
+        trailingIcon = {
             Icon(
                 painter = painterResource(id = R.drawable.icon_close),
                 contentDescription = null,
-                tint = Color.Unspecified,
-                modifier = Modifier.size(Dimens.smallIconSize).clickable { onRemoveClick() }
+                modifier = Modifier.size(Dimens.smallIconSize)
             )
         }
     )
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt
index a913368de5..158e23e151 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt
@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Color
@@ -20,7 +21,6 @@ import net.mullvad.mullvadvpn.lib.model.GeoIpLocation
 import net.mullvad.mullvadvpn.lib.model.TransportProtocol
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible
 
@@ -42,8 +42,8 @@ private fun PreviewLocationInfo() {
 @Composable
 fun LocationInfo(
     modifier: Modifier = Modifier,
-    colorExpanded: Color = MaterialTheme.colorScheme.onPrimary,
-    colorCollapsed: Color = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaInactive),
+    colorExpanded: Color = MaterialTheme.colorScheme.onSurface,
+    colorCollapsed: Color = MaterialTheme.colorScheme.onSurfaceVariant,
     onToggleTunnelInfo: () -> Unit,
     isVisible: Boolean,
     isExpanded: Boolean,
@@ -60,7 +60,7 @@ fun LocationInfo(
                 }
                 .then(modifier)
     ) {
-        Row {
+        Row(verticalAlignment = Alignment.CenterVertically) {
             Text(
                 text = location?.hostname ?: "",
                 color =
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationsEmptyText.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationsEmptyText.kt
index 7c12443647..665fa6f8ab 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationsEmptyText.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationsEmptyText.kt
@@ -38,7 +38,7 @@ fun LocationsEmptyText(searchTerm: String) {
                 text = firstRow,
                 style = MaterialTheme.typography.labelMedium,
                 textAlign = TextAlign.Center,
-                color = MaterialTheme.colorScheme.onSecondary,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
                 maxLines = 2,
                 overflow = TextOverflow.Ellipsis,
             )
@@ -46,7 +46,7 @@ fun LocationsEmptyText(searchTerm: String) {
                 text = secondRow,
                 style = MaterialTheme.typography.labelMedium,
                 textAlign = TextAlign.Center,
-                color = MaterialTheme.colorScheme.onSecondary,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
             )
         }
     } else {
@@ -54,7 +54,7 @@ fun LocationsEmptyText(searchTerm: String) {
             text = stringResource(R.string.no_locations_found),
             modifier = Modifier.padding(Dimens.screenVerticalMargin),
             style = MaterialTheme.typography.labelMedium,
-            color = MaterialTheme.colorScheme.onSecondary
+            color = MaterialTheme.colorScheme.onSurfaceVariant
         )
     }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/MullvadCheckbox.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/MullvadCheckbox.kt
index 741fcf960f..e7f9acfcad 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/MullvadCheckbox.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/MullvadCheckbox.kt
@@ -1,21 +1,43 @@
 package net.mullvad.mullvadvpn.compose.component
 
+import androidx.compose.foundation.background
 import androidx.compose.material3.Checkbox
 import androidx.compose.material3.CheckboxDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.color.selected
 
+@Preview
 @Composable
-fun MullvadCheckbox(checked: Boolean, onCheckedChange: (Boolean) -> Unit) {
+private fun PreviewMullvadCheckbox() {
+    AppTheme {
+        SpacedColumn(Modifier.background(color = MaterialTheme.colorScheme.primary)) {
+            MullvadCheckbox(checked = false) {}
+            MullvadCheckbox(checked = true) {}
+        }
+    }
+}
+
+@Composable
+fun MullvadCheckbox(
+    checkedColor: Color = MaterialTheme.colorScheme.onPrimary,
+    uncheckedColor: Color = MaterialTheme.colorScheme.onPrimary,
+    checkmarkColor: Color = MaterialTheme.colorScheme.selected,
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit
+) {
     Checkbox(
         checked = checked,
         onCheckedChange = onCheckedChange,
         colors =
             CheckboxDefaults.colors(
-                checkedColor = MaterialTheme.colorScheme.onPrimary,
-                uncheckedColor = MaterialTheme.colorScheme.onPrimary,
-                checkmarkColor = MaterialTheme.colorScheme.selected
+                checkedColor = checkedColor,
+                uncheckedColor = uncheckedColor,
+                checkmarkColor = checkmarkColor
             )
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/PlayPayment.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/PlayPayment.kt
index 3f396cf698..ac40da0019 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/PlayPayment.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/PlayPayment.kt
@@ -33,7 +33,7 @@ import net.mullvad.mullvadvpn.lib.theme.Dimens
 @Composable
 private fun PreviewPlayPaymentPaymentAvailable() {
     AppTheme {
-        Box(modifier = Modifier.background(color = MaterialTheme.colorScheme.background)) {
+        Box(modifier = Modifier.background(color = MaterialTheme.colorScheme.surface)) {
             PlayPayment(
                 billingPaymentState =
                     PaymentState.PaymentAvailable(
@@ -58,7 +58,7 @@ private fun PreviewPlayPaymentPaymentAvailable() {
 @Composable
 private fun PreviewPlayPaymentLoading() {
     AppTheme {
-        Box(modifier = Modifier.background(color = MaterialTheme.colorScheme.background)) {
+        Box(modifier = Modifier.background(color = MaterialTheme.colorScheme.surface)) {
             PlayPayment(
                 billingPaymentState = PaymentState.Loading,
                 onPurchaseBillingProductClick = {},
@@ -73,7 +73,7 @@ private fun PreviewPlayPaymentLoading() {
 @Composable
 private fun PreviewPlayPaymentPaymentPending() {
     AppTheme {
-        Box(modifier = Modifier.background(color = MaterialTheme.colorScheme.background)) {
+        Box(modifier = Modifier.background(color = MaterialTheme.colorScheme.surface)) {
             PlayPayment(
                 billingPaymentState =
                     PaymentState.PaymentAvailable(
@@ -98,7 +98,7 @@ private fun PreviewPlayPaymentPaymentPending() {
 @Composable
 private fun PreviewPlayPaymentVerificationInProgress() {
     AppTheme {
-        Box(modifier = Modifier.background(color = MaterialTheme.colorScheme.background)) {
+        Box(modifier = Modifier.background(color = MaterialTheme.colorScheme.surface)) {
             PlayPayment(
                 billingPaymentState =
                     PaymentState.PaymentAvailable(
@@ -153,7 +153,7 @@ fun PlayPayment(
                         Row(verticalAlignment = Alignment.Bottom) {
                             Text(
                                 style = MaterialTheme.typography.labelLarge,
-                                color = MaterialTheme.colorScheme.onBackground,
+                                color = MaterialTheme.colorScheme.onSurface,
                                 text = statusMessage,
                                 modifier = Modifier.padding(bottom = Dimens.smallPadding)
                             )
@@ -164,7 +164,7 @@ fun PlayPayment(
                                 Icon(
                                     painter = painterResource(id = R.drawable.icon_info),
                                     contentDescription = null,
-                                    tint = MaterialTheme.colorScheme.onBackground
+                                    tint = MaterialTheme.colorScheme.onSurface
                                 )
                             }
                         }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
index c90703b7c4..43ceb6943d 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
@@ -1,6 +1,5 @@
 package net.mullvad.mullvadvpn.compose.component
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.RowScope
@@ -32,13 +31,12 @@ import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.PrimaryButton
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar
 
 @Composable
 fun ScaffoldWithTopBar(
     topBarColor: Color,
     modifier: Modifier = Modifier,
-    iconTintColor: Color = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaTopBar),
+    iconTintColor: Color = MaterialTheme.colorScheme.onPrimary,
     onSettingsClicked: (() -> Unit)?,
     onAccountClicked: (() -> Unit)?,
     isIconAndLogoVisible: Boolean = true,
@@ -73,7 +71,7 @@ fun ScaffoldWithTopBar(
 fun ScaffoldWithTopBarAndDeviceName(
     topBarColor: Color,
     modifier: Modifier = Modifier,
-    iconTintColor: Color = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaTopBar),
+    iconTintColor: Color = MaterialTheme.colorScheme.onPrimary,
     onSettingsClicked: (() -> Unit)?,
     onAccountClicked: (() -> Unit)?,
     isIconAndLogoVisible: Boolean = true,
@@ -126,7 +124,7 @@ fun ScaffoldWithMediumTopBar(
     navigationIcon: @Composable () -> Unit = {},
     actions: @Composable RowScope.() -> Unit = {},
     lazyListState: LazyListState = rememberLazyListState(),
-    scrollbarColor: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar),
+    scrollbarColor: Color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
     snackbarHostState: SnackbarHostState = remember { SnackbarHostState() },
     content: @Composable (modifier: Modifier, lazyListState: LazyListState) -> Unit
 ) {
@@ -169,7 +167,7 @@ fun ScaffoldWithMediumTopBar(
     modifier: Modifier = Modifier,
     navigationIcon: @Composable () -> Unit = {},
     actions: @Composable RowScope.() -> Unit = {},
-    scrollbarColor: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar),
+    scrollbarColor: Color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
     snackbarHostState: SnackbarHostState = remember { SnackbarHostState() },
     content: @Composable (modifier: Modifier) -> Unit
 ) {
@@ -214,7 +212,7 @@ fun ScaffoldWithLargeTopBarAndButton(
     actions: @Composable RowScope.() -> Unit = {},
     onButtonClick: () -> Unit = {}, // Add button
     buttonTitle: String,
-    scrollbarColor: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar),
+    scrollbarColor: Color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
     content: @Composable (modifier: Modifier) -> Unit
 ) {
     val appBarState = rememberTopAppBarState()
@@ -226,7 +224,6 @@ fun ScaffoldWithLargeTopBarAndButton(
         modifier =
             modifier
                 .fillMaxSize()
-                .background(MaterialTheme.colorScheme.background)
                 .systemBarsPadding()
                 .nestedScroll(scrollBehavior.nestedScrollConnection),
         topBar = {
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scrollbar.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scrollbar.kt
index a0061d1240..45592710b9 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scrollbar.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scrollbar.kt
@@ -68,6 +68,8 @@ import kotlinx.coroutines.channels.BufferOverflow
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.collectLatest
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
 
 fun Modifier.drawHorizontalScrollbar(
     state: ScrollState,
@@ -297,17 +299,19 @@ private val FadeOutAnimationSpec =
 @Preview(widthDp = 400, heightDp = 400, showBackground = true)
 @Composable
 private fun PreviewScrollbar() {
-    val state = rememberScrollState()
-    Column(
-        modifier =
-            Modifier.drawVerticalScrollbar(
-                    state = state,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
-                )
-                .verticalScroll(state),
-    ) {
-        repeat(50) {
-            Text(text = "Item ${it + 1}", modifier = Modifier.fillMaxWidth().padding(16.dp))
+    AppTheme {
+        val state = rememberScrollState()
+        Column(
+            modifier =
+                Modifier.drawVerticalScrollbar(
+                        state = state,
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar)
+                    )
+                    .verticalScroll(state),
+        ) {
+            repeat(50) {
+                Text(text = "Item ${it + 1}", modifier = Modifier.fillMaxWidth().padding(16.dp))
+            }
         }
     }
 }
@@ -320,7 +324,7 @@ private fun PreviewLazyListScrollbar() {
         modifier =
             Modifier.drawVerticalScrollbar(
                 state = state,
-                color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
+                color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar)
             ),
         state = state
     ) {
@@ -338,7 +342,7 @@ private fun PreviewHorizontalScrollbar() {
         modifier =
             Modifier.drawHorizontalScrollbar(
                     state = state,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
+                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar)
                 )
                 .horizontalScroll(state)
     ) {
@@ -359,7 +363,7 @@ private fun PreviewLazyListHorizontalScrollbar() {
         modifier =
             Modifier.drawHorizontalScrollbar(
                 state = state,
-                color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
+                color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar)
             ),
         state = state
     ) {
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt
index 9ce6a61025..c1acac3b31 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt
@@ -15,7 +15,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
@@ -26,7 +25,7 @@ import net.mullvad.mullvadvpn.lib.theme.color.selected
 @Composable
 private fun PreviewMullvadSwitch() {
     AppTheme {
-        Surface(color = MaterialTheme.colorScheme.background) {
+        Surface(color = MaterialTheme.colorScheme.surface) {
             Column(
                 verticalArrangement = Arrangement.spacedBy(Dimens.mediumPadding),
                 modifier = Modifier.padding(Dimens.sideMargin)
@@ -60,7 +59,7 @@ fun MullvadSwitch(
         thumbContent = thumbContent,
         enabled = enabled,
         colors = colors,
-        interactionSource
+        interactionSource = interactionSource
     )
 }
 
@@ -70,27 +69,15 @@ fun mullvadSwitchColors(): SwitchColors =
         checkedThumbColor = MaterialTheme.colorScheme.selected,
         checkedTrackColor = Color.Transparent,
         checkedBorderColor = MaterialTheme.colorScheme.onPrimary,
-        //    checkedIconColor= SwitchTokens.SelectedIconColor.toColor(),
         uncheckedThumbColor = MaterialTheme.colorScheme.error,
         uncheckedTrackColor = Color.Transparent,
         uncheckedBorderColor = MaterialTheme.colorScheme.onPrimary,
-        //    uncheckedIconColor= SwitchTokens.UnselectedIconColor.toColor(),
-        disabledCheckedThumbColor =
-            MaterialTheme.colorScheme.selected
-                .copy(alpha = AlphaDisabled)
-                .compositeOver(MaterialTheme.colorScheme.primary),
+        disabledCheckedThumbColor = MaterialTheme.colorScheme.selected.copy(alpha = AlphaDisabled),
         disabledCheckedTrackColor = Color.Transparent,
         disabledCheckedBorderColor =
-            MaterialTheme.colorScheme.onPrimary
-                .copy(alpha = AlphaDisabled)
-                .compositeOver(MaterialTheme.colorScheme.primary),
-        disabledUncheckedThumbColor =
-            MaterialTheme.colorScheme.error
-                .copy(alpha = AlphaDisabled)
-                .compositeOver(MaterialTheme.colorScheme.primary),
+            MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaDisabled),
+        disabledUncheckedThumbColor = MaterialTheme.colorScheme.error.copy(alpha = AlphaDisabled),
         disabledUncheckedTrackColor = Color.Transparent,
         disabledUncheckedBorderColor =
-            MaterialTheme.colorScheme.onPrimary
-                .copy(alpha = AlphaDisabled)
-                .compositeOver(MaterialTheme.colorScheme.primary),
+            MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaDisabled)
     )
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Text.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Text.kt
index 79fdec7b9d..733816672d 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Text.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Text.kt
@@ -11,6 +11,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.sp
@@ -26,6 +27,7 @@ fun AutoResizeText(
     textSizeStep: TextUnit = DEFAULT_TEXT_STEP,
     style: TextStyle = LocalTextStyle.current,
     maxLines: Int = Int.MAX_VALUE,
+    color: Color = MaterialTheme.colorScheme.onSurface
 ) {
     var adjustedFontSize by remember { mutableFloatStateOf(maxTextSize.value) }
     var isReadyToDraw by remember { mutableStateOf(false) }
@@ -34,7 +36,7 @@ fun AutoResizeText(
         text = text,
         maxLines = maxLines,
         style = style,
-        color = MaterialTheme.colorScheme.onBackground,
+        color = color,
         fontSize = adjustedFontSize.sp,
         onTextLayout = {
             if (it.didOverflowHeight && isReadyToDraw.not()) {
@@ -49,6 +51,6 @@ fun AutoResizeText(
                 isReadyToDraw = true
             }
         },
-        modifier = modifier.drawWithContent { if (isReadyToDraw) drawContent() }
+        modifier = modifier.drawWithContent { if (isReadyToDraw) drawContent() },
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt
index 51ba207165..137e665157 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt
@@ -48,15 +48,14 @@ import net.mullvad.mullvadvpn.compose.test.TOP_BAR_ACCOUNT_BUTTON
 import net.mullvad.mullvadvpn.compose.test.TOP_BAR_SETTINGS_BUTTON
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar
 
 @Preview
 @Composable
 private fun PreviewTopBar() {
     AppTheme {
         MullvadTopBar(
-            containerColor = MaterialTheme.colorScheme.inversePrimary,
-            iconTintColor = MaterialTheme.colorScheme.onPrimary,
+            containerColor = MaterialTheme.colorScheme.tertiary,
+            iconTintColor = MaterialTheme.colorScheme.onTertiary,
             onSettingsClicked = null,
             onAccountClicked = {}
         )
@@ -68,8 +67,8 @@ private fun PreviewTopBar() {
 private fun PreviewSlimTopBar() {
     AppTheme {
         MullvadTopBar(
-            containerColor = MaterialTheme.colorScheme.inversePrimary,
-            iconTintColor = MaterialTheme.colorScheme.onPrimary,
+            containerColor = MaterialTheme.colorScheme.tertiary,
+            iconTintColor = MaterialTheme.colorScheme.onTertiary,
             onSettingsClicked = null,
             onAccountClicked = {}
         )
@@ -81,8 +80,8 @@ private fun PreviewSlimTopBar() {
 private fun PreviewNoIconAndLogoTopBar() {
     AppTheme {
         MullvadTopBar(
-            containerColor = MaterialTheme.colorScheme.inversePrimary,
-            iconTintColor = MaterialTheme.colorScheme.onPrimary,
+            containerColor = MaterialTheme.colorScheme.tertiary,
+            iconTintColor = MaterialTheme.colorScheme.onTertiary,
             isIconAndLogoVisible = false,
             onSettingsClicked = {},
             onAccountClicked = null,
@@ -95,8 +94,8 @@ private fun PreviewNoIconAndLogoTopBar() {
 private fun PreviewNothingTopBar() {
     AppTheme {
         MullvadTopBar(
-            containerColor = MaterialTheme.colorScheme.inversePrimary,
-            iconTintColor = MaterialTheme.colorScheme.onPrimary,
+            containerColor = MaterialTheme.colorScheme.tertiary,
+            iconTintColor = MaterialTheme.colorScheme.onTertiary,
             isIconAndLogoVisible = false,
             onSettingsClicked = null,
             onAccountClicked = null
@@ -123,7 +122,7 @@ fun MullvadTopBar(
                         painter = painterResource(id = R.drawable.logo_icon),
                         contentDescription = null, // No meaningful user info or action.
                         modifier = Modifier.size(40.dp),
-                        tint = Color.Unspecified
+                        tint = Color.Unspecified // Logo should not be tinted
                     )
                     // Dynamically show Mullvad VPN Text if it fits, to avoid overlapping icons.
                     BoxWithConstraints {
@@ -202,9 +201,9 @@ fun MullvadSmallTopBar(
         navigationIcon = navigationIcon,
         colors =
             TopAppBarDefaults.topAppBarColors(
-                containerColor = MaterialTheme.colorScheme.background,
-                scrolledContainerColor = MaterialTheme.colorScheme.background,
-                actionIconContentColor = MaterialTheme.colorScheme.onPrimary.copy(AlphaTopBar),
+                containerColor = MaterialTheme.colorScheme.surface,
+                scrolledContainerColor = MaterialTheme.colorScheme.surface,
+                actionIconContentColor = MaterialTheme.colorScheme.onSurface,
             ),
         actions = actions
     )
@@ -261,9 +260,9 @@ fun MullvadMediumTopBar(
         scrollBehavior = scrollBehavior,
         colors =
             TopAppBarDefaults.mediumTopAppBarColors(
-                containerColor = MaterialTheme.colorScheme.background,
-                scrolledContainerColor = MaterialTheme.colorScheme.background,
-                actionIconContentColor = MaterialTheme.colorScheme.onPrimary.copy(AlphaTopBar),
+                containerColor = MaterialTheme.colorScheme.surface,
+                scrolledContainerColor = MaterialTheme.colorScheme.surface,
+                actionIconContentColor = MaterialTheme.colorScheme.onSurface,
             ),
         actions = actions
     )
@@ -290,9 +289,9 @@ fun MullvadLargeTopBar(
         scrollBehavior = scrollBehavior,
         colors =
             TopAppBarDefaults.mediumTopAppBarColors(
-                containerColor = MaterialTheme.colorScheme.background,
-                scrolledContainerColor = MaterialTheme.colorScheme.background,
-                actionIconContentColor = MaterialTheme.colorScheme.onPrimary.copy(AlphaTopBar),
+                containerColor = MaterialTheme.colorScheme.surface,
+                scrolledContainerColor = MaterialTheme.colorScheme.surface,
+                actionIconContentColor = MaterialTheme.colorScheme.onSurface,
             ),
         actions = actions
     )
@@ -381,7 +380,7 @@ fun MullvadTopBarWithDeviceName(
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
                 style = MaterialTheme.typography.bodySmall,
-                color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaTopBar)
+                color = iconTintColor
             )
             if (daysLeftUntilExpiry != null) {
                 Text(
@@ -399,7 +398,7 @@ fun MullvadTopBarWithDeviceName(
                             }
                         ),
                     style = MaterialTheme.typography.bodySmall,
-                    color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaTopBar)
+                    color = iconTintColor
                 )
             } else {
                 Spacer(Modifier)
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/notificationbanner/NotificationBanner.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/notificationbanner/NotificationBanner.kt
index 5a10e005a5..7630795e02 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/notificationbanner/NotificationBanner.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/notificationbanner/NotificationBanner.kt
@@ -18,7 +18,6 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
@@ -34,7 +33,7 @@ import net.mullvad.mullvadvpn.lib.model.ErrorState
 import net.mullvad.mullvadvpn.lib.model.ErrorStateCause
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription
+import net.mullvad.mullvadvpn.lib.theme.color.warning
 import net.mullvad.mullvadvpn.repository.InAppNotification
 import net.mullvad.mullvadvpn.ui.VersionInfo
 import net.mullvad.mullvadvpn.ui.notification.StatusLevel
@@ -111,7 +110,7 @@ private fun Notification(notificationBannerData: NotificationData) {
     ConstraintLayout(
         modifier =
             Modifier.fillMaxWidth()
-                .background(color = MaterialTheme.colorScheme.background)
+                .background(color = MaterialTheme.colorScheme.surfaceContainer)
                 .padding(
                     start = Dimens.notificationBannerStartPadding,
                     end = Dimens.notificationBannerEndPadding,
@@ -128,8 +127,8 @@ private fun Notification(notificationBannerData: NotificationData) {
                         color =
                             when (statusLevel) {
                                 StatusLevel.Error -> MaterialTheme.colorScheme.error
-                                StatusLevel.Warning -> MaterialTheme.colorScheme.errorContainer
-                                StatusLevel.Info -> MaterialTheme.colorScheme.surface
+                                StatusLevel.Warning -> MaterialTheme.colorScheme.warning
+                                StatusLevel.Info -> MaterialTheme.colorScheme.surfaceContainer
                             },
                         shape = CircleShape
                     )
@@ -152,7 +151,7 @@ private fun Notification(notificationBannerData: NotificationData) {
                     }
                     .padding(start = Dimens.smallPadding),
             style = MaterialTheme.typography.bodySmall,
-            color = MaterialTheme.colorScheme.onBackground,
+            color = MaterialTheme.colorScheme.onSurface,
             maxLines = 1,
             overflow = TextOverflow.Ellipsis
         )
@@ -172,7 +171,7 @@ private fun Notification(notificationBannerData: NotificationData) {
                             width = Dimension.fillToConstraints
                         }
                         .padding(start = Dimens.smallPadding),
-                color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaDescription),
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
                 style = MaterialTheme.typography.labelMedium
             )
         }
@@ -191,7 +190,7 @@ private fun Notification(notificationBannerData: NotificationData) {
                 Icon(
                     painter = painterResource(id = it.icon),
                     contentDescription = null,
-                    tint = Color.Unspecified
+                    tint = MaterialTheme.colorScheme.onSurface
                 )
             }
         }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/notificationbanner/NotificationData.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/notificationbanner/NotificationData.kt
index 28efcee9c4..b55b8ab070 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/notificationbanner/NotificationData.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/notificationbanner/NotificationData.kt
@@ -58,7 +58,7 @@ fun InAppNotification.toNotificationData(
                         .toAnnotatedString(
                             boldSpanStyle =
                                 SpanStyle(
-                                    color = MaterialTheme.colorScheme.onBackground,
+                                    color = MaterialTheme.colorScheme.onSurface,
                                     fontWeight = FontWeight.ExtraBold
                                 ),
                         ),
@@ -109,7 +109,7 @@ private fun errorMessageBannerData(error: ErrorState) =
                     .toAnnotatedString(
                         boldSpanStyle =
                             SpanStyle(
-                                color = MaterialTheme.colorScheme.onBackground,
+                                color = MaterialTheme.colorScheme.onSurface,
                                 fontWeight = FontWeight.ExtraBold
                             )
                     ),
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ChangelogDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ChangelogDialog.kt
index 609388906e..6e68e2f8c1 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ChangelogDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ChangelogDialog.kt
@@ -50,6 +50,7 @@ fun ChangelogDialog(changeLog: Changelog, onDismiss: () -> Unit) {
             Text(
                 text = changeLog.version,
                 style = MaterialTheme.typography.headlineLarge,
+                color = MaterialTheme.colorScheme.onSurface,
                 textAlign = TextAlign.Center,
                 modifier = Modifier.fillMaxWidth()
             )
@@ -63,7 +64,7 @@ fun ChangelogDialog(changeLog: Changelog, onDismiss: () -> Unit) {
                 Text(
                     text = stringResource(R.string.changes_dialog_subtitle),
                     style = MaterialTheme.typography.titleSmall,
-                    color = MaterialTheme.colorScheme.onBackground,
+                    color = MaterialTheme.colorScheme.onSurface,
                     modifier = Modifier.fillMaxWidth()
                 )
 
@@ -73,8 +74,8 @@ fun ChangelogDialog(changeLog: Changelog, onDismiss: () -> Unit) {
         confirmButton = {
             PrimaryButton(text = stringResource(R.string.got_it), onClick = onDismiss)
         },
-        containerColor = MaterialTheme.colorScheme.background,
-        titleContentColor = MaterialTheme.colorScheme.onBackground
+        containerColor = MaterialTheme.colorScheme.surface,
+        titleContentColor = MaterialTheme.colorScheme.onSurface
     )
 }
 
@@ -85,14 +86,14 @@ private fun ChangeListItem(text: String) {
             Text(
                 text = "•",
                 style = MaterialTheme.typography.labelMedium,
-                color = MaterialTheme.colorScheme.onBackground,
+                color = MaterialTheme.colorScheme.onSurface,
                 modifier = Modifier.width(Dimens.buttonSpacing),
                 textAlign = TextAlign.Center
             )
             Text(
                 text = text,
                 style = MaterialTheme.typography.labelMedium,
-                color = MaterialTheme.colorScheme.onBackground
+                color = MaterialTheme.colorScheme.onSurface
             )
         }
     }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/CreateCustomListDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/CreateCustomListDialog.kt
index a94673ef45..3cb01482e7 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/CreateCustomListDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/CreateCustomListDialog.kt
@@ -24,9 +24,9 @@ import com.ramcosta.composedestinations.spec.DestinationStyle
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.PrimaryButton
 import net.mullvad.mullvadvpn.compose.communication.CustomListActionResultData
-import net.mullvad.mullvadvpn.compose.component.CustomListNameTextField
 import net.mullvad.mullvadvpn.compose.state.CreateCustomListUiState
 import net.mullvad.mullvadvpn.compose.test.CREATE_CUSTOM_LIST_DIALOG_INPUT_TEST_TAG
+import net.mullvad.mullvadvpn.compose.textfield.CustomListNameTextField
 import net.mullvad.mullvadvpn.lib.model.CustomListAlreadyExists
 import net.mullvad.mullvadvpn.lib.model.GeoLocationId
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
@@ -124,8 +124,8 @@ fun CreateCustomListDialog(
                 modifier = Modifier.testTag(CREATE_CUSTOM_LIST_DIALOG_INPUT_TEST_TAG)
             )
         },
-        containerColor = MaterialTheme.colorScheme.background,
-        titleContentColor = MaterialTheme.colorScheme.onBackground,
+        containerColor = MaterialTheme.colorScheme.surface,
+        titleContentColor = MaterialTheme.colorScheme.onSurface,
         onDismissRequest = onDismiss,
         confirmButton = {
             PrimaryButton(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeleteConfirmationDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeleteConfirmationDialog.kt
index 0133e0df3a..f040bc69b6 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeleteConfirmationDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeleteConfirmationDialog.kt
@@ -13,7 +13,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -40,7 +39,7 @@ private fun PreviewDeleteConfirmationDialogError() {
     AppTheme {
         DeleteConfirmationDialog(
             message = "Do you want to delete Cookie?",
-            errorMessage = "Cookie can not be deleted"
+            errorMessage = "An error occured"
         )
     }
 }
@@ -59,7 +58,7 @@ fun DeleteConfirmationDialog(
                 modifier = Modifier.fillMaxWidth().height(Dimens.dialogIconHeight),
                 painter = painterResource(id = R.drawable.icon_alert),
                 contentDescription = stringResource(id = R.string.remove_button),
-                tint = Color.Unspecified
+                tint = MaterialTheme.colorScheme.error
             )
         },
         title = {
@@ -85,6 +84,6 @@ fun DeleteConfirmationDialog(
         confirmButton = {
             NegativeButton(onClick = onDelete, text = stringResource(id = R.string.delete))
         },
-        containerColor = MaterialTheme.colorScheme.background
+        containerColor = MaterialTheme.colorScheme.surface
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DiscardChangesDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DiscardChangesDialog.kt
index 61dfa4c85c..403ba43b24 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DiscardChangesDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DiscardChangesDialog.kt
@@ -35,6 +35,6 @@ fun DiscardChanges(resultBackNavigator: ResultBackNavigator<Boolean>) {
                 text = stringResource(id = R.string.discard)
             )
         },
-        containerColor = MaterialTheme.colorScheme.background
+        containerColor = MaterialTheme.colorScheme.surface
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DnsDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DnsDialog.kt
index 9adaa5710d..26b08dbcda 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DnsDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DnsDialog.kt
@@ -10,7 +10,6 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -100,7 +99,7 @@ fun DnsDialog(
                     } else {
                         stringResource(R.string.update_dns_server_dialog_title)
                     },
-                color = Color.White,
+                color = MaterialTheme.colorScheme.onSurface,
             )
         },
         text = {
@@ -163,7 +162,7 @@ fun DnsDialog(
             }
         },
         onDismissRequest = onDismiss,
-        containerColor = MaterialTheme.colorScheme.background,
-        titleContentColor = MaterialTheme.colorScheme.onBackground,
+        containerColor = MaterialTheme.colorScheme.surface,
+        titleContentColor = MaterialTheme.colorScheme.onSurface,
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/EditCustomListNameDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/EditCustomListNameDialog.kt
index 2b5c4372d0..919db9a177 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/EditCustomListNameDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/EditCustomListNameDialog.kt
@@ -18,9 +18,9 @@ import com.ramcosta.composedestinations.spec.DestinationStyle
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.PrimaryButton
 import net.mullvad.mullvadvpn.compose.communication.CustomListActionResultData
-import net.mullvad.mullvadvpn.compose.component.CustomListNameTextField
 import net.mullvad.mullvadvpn.compose.state.EditCustomListNameUiState
 import net.mullvad.mullvadvpn.compose.test.EDIT_CUSTOM_LIST_DIALOG_INPUT_TEST_TAG
+import net.mullvad.mullvadvpn.compose.textfield.CustomListNameTextField
 import net.mullvad.mullvadvpn.compose.util.LaunchedEffectCollect
 import net.mullvad.mullvadvpn.lib.model.CustomListId
 import net.mullvad.mullvadvpn.lib.model.CustomListName
@@ -93,8 +93,8 @@ fun EditCustomListNameDialog(
                 modifier = Modifier.testTag(EDIT_CUSTOM_LIST_DIALOG_INPUT_TEST_TAG)
             )
         },
-        containerColor = MaterialTheme.colorScheme.background,
-        titleContentColor = MaterialTheme.colorScheme.onBackground,
+        containerColor = MaterialTheme.colorScheme.surface,
+        titleContentColor = MaterialTheme.colorScheme.onSurface,
         onDismissRequest = onDismiss,
         confirmButton = {
             PrimaryButton(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/InfoDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/InfoDialog.kt
index 0314cd955a..0ea85eb06b 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/InfoDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/InfoDialog.kt
@@ -50,7 +50,7 @@ fun InfoDialog(message: String, additionalInfo: String? = null, onDismiss: () ->
                 modifier = Modifier.fillMaxWidth().height(Dimens.dialogIconHeight),
                 painter = painterResource(id = R.drawable.icon_info),
                 contentDescription = "",
-                tint = MaterialTheme.colorScheme.onBackground
+                tint = MaterialTheme.colorScheme.onSurface
             )
         },
         text = {
@@ -65,7 +65,7 @@ fun InfoDialog(message: String, additionalInfo: String? = null, onDismiss: () ->
             ) {
                 Text(
                     text = message,
-                    color = MaterialTheme.colorScheme.onBackground,
+                    color = MaterialTheme.colorScheme.onSurface,
                     style = MaterialTheme.typography.bodySmall,
                     modifier = Modifier.fillMaxWidth()
                 )
@@ -78,7 +78,7 @@ fun InfoDialog(message: String, additionalInfo: String? = null, onDismiss: () ->
                     val trimmed = annotated.substring(0, annotated.trimEnd().length)
                     Text(
                         text = trimmed,
-                        color = MaterialTheme.colorScheme.onBackground,
+                        color = MaterialTheme.colorScheme.onSurface,
                         style = MaterialTheme.typography.bodySmall,
                         modifier = Modifier.fillMaxWidth()
                     )
@@ -97,6 +97,6 @@ fun InfoDialog(message: String, additionalInfo: String? = null, onDismiss: () ->
                 dismissOnClickOutside = true,
                 dismissOnBackPress = true,
             ),
-        containerColor = MaterialTheme.colorScheme.background
+        containerColor = MaterialTheme.colorScheme.surface
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/LocalNetworkSharingInfoDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/LocalNetworkSharingInfoDialog.kt
index 66c9a72a70..6c6feebc9a 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/LocalNetworkSharingInfoDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/LocalNetworkSharingInfoDialog.kt
@@ -11,11 +11,12 @@ import com.ramcosta.composedestinations.navigation.EmptyDestinationsNavigator
 import com.ramcosta.composedestinations.spec.DestinationStyle
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.textResource
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
 
 @Preview
 @Composable
 private fun PreviewLocalNetworkSharingInfoDialog() {
-    LocalNetworkSharingInfo(EmptyDestinationsNavigator)
+    AppTheme { LocalNetworkSharingInfo(EmptyDestinationsNavigator) }
 }
 
 @Destination<RootGraph>(style = DestinationStyle.Dialog::class)
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MalwareInfoDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MalwareInfoDialog.kt
index a013ec0bcb..ef905ab9f2 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MalwareInfoDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MalwareInfoDialog.kt
@@ -10,11 +10,12 @@ import com.ramcosta.composedestinations.navigation.DestinationsNavigator
 import com.ramcosta.composedestinations.navigation.EmptyDestinationsNavigator
 import com.ramcosta.composedestinations.spec.DestinationStyle
 import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
 
 @Preview
 @Composable
 private fun PreviewMalwareInfoDialog() {
-    MalwareInfo(EmptyDestinationsNavigator)
+    AppTheme { MalwareInfo(EmptyDestinationsNavigator) }
 }
 
 @Destination<RootGraph>(style = DestinationStyle.Dialog::class)
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MtuDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MtuDialog.kt
index a52fea2c48..1a6ed21212 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MtuDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MtuDialog.kt
@@ -29,7 +29,6 @@ import net.mullvad.mullvadvpn.constant.MTU_MIN_VALUE
 import net.mullvad.mullvadvpn.lib.model.Mtu
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription
 import net.mullvad.mullvadvpn.viewmodel.MtuDialogSideEffect
 import net.mullvad.mullvadvpn.viewmodel.MtuDialogUiState
 import net.mullvad.mullvadvpn.viewmodel.MtuDialogViewModel
@@ -77,7 +76,7 @@ fun MtuDialog(
         title = {
             Text(
                 text = stringResource(id = R.string.wireguard_mtu),
-                color = MaterialTheme.colorScheme.onBackground,
+                color = MaterialTheme.colorScheme.onSurface,
             )
         },
         text = {
@@ -101,7 +100,7 @@ fun MtuDialog(
                             MTU_MAX_VALUE
                         ),
                     style = MaterialTheme.typography.bodySmall,
-                    color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaDescription),
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
                     modifier = Modifier.padding(top = Dimens.smallPadding)
                 )
             }
@@ -130,7 +129,7 @@ fun MtuDialog(
                 )
             }
         },
-        containerColor = MaterialTheme.colorScheme.background,
-        titleContentColor = MaterialTheme.colorScheme.onBackground,
+        containerColor = MaterialTheme.colorScheme.surface,
+        titleContentColor = MaterialTheme.colorScheme.onSurface,
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt
index 935cc431f6..093dc7ce97 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt
@@ -44,7 +44,6 @@ import net.mullvad.mullvadvpn.constant.VOUCHER_LENGTH
 import net.mullvad.mullvadvpn.lib.model.RedeemVoucherError
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription
 import net.mullvad.mullvadvpn.viewmodel.VoucherDialogViewModel
 import org.joda.time.DateTimeConstants
 import org.koin.androidx.compose.koinViewModel
@@ -192,8 +191,8 @@ fun RedeemVoucherDialog(
                 }
             }
         },
-        containerColor = MaterialTheme.colorScheme.background,
-        titleContentColor = MaterialTheme.colorScheme.onBackground,
+        containerColor = MaterialTheme.colorScheme.surface,
+        titleContentColor = MaterialTheme.colorScheme.onSurface,
         onDismissRequest = { onDismiss(state.voucherState is VoucherDialogState.Success) },
         properties =
             DialogProperties(
@@ -218,7 +217,7 @@ private fun RedeemSuccessBody(message: String) {
                     top = Dimens.successIconVerticalPadding,
                 )
                 .fillMaxWidth(),
-        color = MaterialTheme.colorScheme.onPrimary,
+        color = MaterialTheme.colorScheme.onSurface,
         style = MaterialTheme.typography.titleMedium
     )
 
@@ -227,7 +226,7 @@ private fun RedeemSuccessBody(message: String) {
         modifier =
             Modifier.padding(start = Dimens.smallPadding, top = Dimens.cellTopPadding)
                 .fillMaxWidth(),
-        color = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaDescription),
+        color = MaterialTheme.colorScheme.onSurfaceVariant,
         style = MaterialTheme.typography.labelMedium
     )
 }
@@ -264,7 +263,7 @@ private fun EnterVoucherBody(
             Text(
                 text = stringResource(id = R.string.verifying_voucher),
                 modifier = Modifier.padding(start = Dimens.smallPadding),
-                color = MaterialTheme.colorScheme.onPrimary,
+                color = MaterialTheme.colorScheme.onSurface,
                 style = MaterialTheme.typography.bodySmall
             )
         } else if (state.voucherState is VoucherDialogState.Error) {
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RemoveDeviceConfirmationDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RemoveDeviceConfirmationDialog.kt
index 47d6a3cfcc..4e55921a1e 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RemoveDeviceConfirmationDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RemoveDeviceConfirmationDialog.kt
@@ -9,7 +9,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -50,7 +49,7 @@ fun RemoveDeviceConfirmation(navigator: ResultBackNavigator<DeviceId>, device: D
                 modifier = Modifier.fillMaxWidth().height(Dimens.dialogIconHeight),
                 painter = painterResource(id = R.drawable.icon_alert),
                 contentDescription = stringResource(id = R.string.remove_button),
-                tint = Color.Unspecified
+                tint = MaterialTheme.colorScheme.error
             )
         },
         text = {
@@ -63,18 +62,18 @@ fun RemoveDeviceConfirmation(navigator: ResultBackNavigator<DeviceId>, device: D
             HtmlText(htmlFormattedString = htmlFormattedDialogText, textSize = 16.sp.value)
         },
         dismissButton = {
-            NegativeButton(
-                onClick = dropUnlessResumed { navigator.navigateBack(result = device.id) },
-                text = stringResource(id = R.string.confirm_removal)
-            )
-        },
-        confirmButton = {
             PrimaryButton(
                 modifier = Modifier.focusRequester(FocusRequester()),
                 onClick = dropUnlessResumed { navigator.navigateBack() },
                 text = stringResource(id = R.string.back)
             )
         },
-        containerColor = MaterialTheme.colorScheme.background
+        confirmButton = {
+            NegativeButton(
+                onClick = dropUnlessResumed { navigator.navigateBack(result = device.id) },
+                text = stringResource(id = R.string.confirm_removal)
+            )
+        },
+        containerColor = MaterialTheme.colorScheme.surface
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ReportProblemNoEmailDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ReportProblemNoEmailDialog.kt
index 43072eb18c..482c75a2f0 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ReportProblemNoEmailDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ReportProblemNoEmailDialog.kt
@@ -8,7 +8,6 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -40,7 +39,7 @@ fun ReportProblemNoEmail(resultBackNavigator: ResultBackNavigator<Boolean>) {
                 painter = painterResource(id = R.drawable.icon_alert),
                 contentDescription = null,
                 modifier = Modifier.size(Dimens.dialogIconHeight),
-                tint = Color.Unspecified
+                tint = MaterialTheme.colorScheme.error
             )
         },
         text = {
@@ -48,23 +47,23 @@ fun ReportProblemNoEmail(resultBackNavigator: ResultBackNavigator<Boolean>) {
                 text = stringResource(id = R.string.confirm_no_email),
                 modifier = Modifier.fillMaxWidth(),
                 style = MaterialTheme.typography.bodySmall,
-                color = MaterialTheme.colorScheme.onBackground
+                color = MaterialTheme.colorScheme.onSurface
             )
         },
         dismissButton = {
-            NegativeButton(
+            PrimaryButton(
                 modifier = Modifier.fillMaxWidth(),
-                onClick = dropUnlessResumed { resultBackNavigator.navigateBack(result = true) },
-                text = stringResource(id = R.string.send_anyway)
+                onClick = dropUnlessResumed { resultBackNavigator.navigateBack() },
+                text = stringResource(id = R.string.back)
             )
         },
         confirmButton = {
-            PrimaryButton(
+            NegativeButton(
                 modifier = Modifier.fillMaxWidth(),
-                onClick = dropUnlessResumed { resultBackNavigator.navigateBack() },
-                text = stringResource(id = R.string.back)
+                onClick = dropUnlessResumed { resultBackNavigator.navigateBack(result = true) },
+                text = stringResource(id = R.string.send_anyway)
             )
         },
-        containerColor = MaterialTheme.colorScheme.background
+        containerColor = MaterialTheme.colorScheme.surface
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ResetServerIpOverridesConfirmationDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ResetServerIpOverridesConfirmationDialog.kt
index 70489db54c..966a11dfdf 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ResetServerIpOverridesConfirmationDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ResetServerIpOverridesConfirmationDialog.kt
@@ -55,7 +55,7 @@ fun ResetServerIpOverridesConfirmationDialog(
     onNavigateBack: () -> Unit
 ) {
     AlertDialog(
-        containerColor = MaterialTheme.colorScheme.background,
+        containerColor = MaterialTheme.colorScheme.surface,
         confirmButton = {
             NegativeButton(
                 modifier = Modifier.fillMaxWidth().testTag(RESET_SERVER_IP_OVERRIDE_RESET_TEST_TAG),
@@ -74,13 +74,13 @@ fun ResetServerIpOverridesConfirmationDialog(
         title = {
             Text(
                 text = stringResource(id = R.string.server_ip_overrides_reset_title),
-                color = MaterialTheme.colorScheme.onBackground
+                color = MaterialTheme.colorScheme.onSurface
             )
         },
         text = {
             Text(
                 text = stringResource(id = R.string.server_ip_overrides_reset_body),
-                color = MaterialTheme.colorScheme.onBackground,
+                color = MaterialTheme.colorScheme.onSurface,
                 style = MaterialTheme.typography.bodySmall,
             )
         },
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/SaveApiAccessMethodDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/SaveApiAccessMethodDialog.kt
index be13b62dec..aabdbb4e39 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/SaveApiAccessMethodDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/SaveApiAccessMethodDialog.kt
@@ -129,8 +129,8 @@ fun SaveApiAccessMethodDialog(
                 )
             }
         },
-        containerColor = MaterialTheme.colorScheme.background,
-        titleContentColor = MaterialTheme.colorScheme.onBackground,
+        containerColor = MaterialTheme.colorScheme.surface,
+        titleContentColor = MaterialTheme.colorScheme.onSurface,
         iconContentColor = Color.Unspecified,
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/WireguardCustomPortDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/WireguardCustomPortDialog.kt
index 54b0807d8f..ddcc2b662f 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/WireguardCustomPortDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/WireguardCustomPortDialog.kt
@@ -31,7 +31,6 @@ import net.mullvad.mullvadvpn.lib.model.Port
 import net.mullvad.mullvadvpn.lib.model.PortRange
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription
 import net.mullvad.mullvadvpn.util.asString
 import net.mullvad.mullvadvpn.util.inAnyOf
 
@@ -123,13 +122,13 @@ fun WireguardCustomPortDialog(
                             id = R.string.custom_port_dialog_valid_ranges,
                             allowedPortRanges.asString()
                         ),
-                    color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaDescription),
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
                     style = MaterialTheme.typography.bodySmall
                 )
             }
         },
-        containerColor = MaterialTheme.colorScheme.background,
-        titleContentColor = MaterialTheme.colorScheme.onBackground,
+        containerColor = MaterialTheme.colorScheme.surface,
+        titleContentColor = MaterialTheme.colorScheme.onSurface,
         onDismissRequest = onDismiss
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/payment/PaymentDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/payment/PaymentDialog.kt
index 6aa15bc17d..8744a74466 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/payment/PaymentDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/payment/PaymentDialog.kt
@@ -8,7 +8,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -24,7 +23,6 @@ import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicator
 import net.mullvad.mullvadvpn.compose.util.LaunchedEffectCollect
 import net.mullvad.mullvadvpn.lib.payment.model.ProductId
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription
 import net.mullvad.mullvadvpn.util.getActivity
 import net.mullvad.mullvadvpn.viewmodel.PaymentUiSideEffect
 import net.mullvad.mullvadvpn.viewmodel.PaymentViewModel
@@ -192,13 +190,10 @@ fun PaymentDialog(
                     )
                 }
             },
-        containerColor = MaterialTheme.colorScheme.background,
-        titleContentColor = MaterialTheme.colorScheme.onBackground,
+        containerColor = MaterialTheme.colorScheme.surface,
+        titleContentColor = MaterialTheme.colorScheme.onSurface,
         iconContentColor = Color.Unspecified,
-        textContentColor =
-            MaterialTheme.colorScheme.onBackground
-                .copy(alpha = AlphaDescription)
-                .compositeOver(MaterialTheme.colorScheme.background),
+        textContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
         onDismissRequest = {
             if (paymentDialogData.closeOnDismiss) {
                 onCloseDialog(paymentDialogData.successfulPayment)
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/payment/VerificationPendingDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/payment/VerificationPendingDialog.kt
index 739bacbf14..cb973b4659 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/payment/VerificationPendingDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/payment/VerificationPendingDialog.kt
@@ -4,7 +4,6 @@ import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.lifecycle.compose.dropUnlessResumed
@@ -15,7 +14,6 @@ import com.ramcosta.composedestinations.spec.DestinationStyle
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.PrimaryButton
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription
 
 @Preview
 @Composable
@@ -45,12 +43,9 @@ fun VerificationPendingDialog(onClose: () -> Unit) {
                 style = MaterialTheme.typography.bodySmall
             )
         },
-        containerColor = MaterialTheme.colorScheme.background,
-        titleContentColor = MaterialTheme.colorScheme.onBackground,
-        textContentColor =
-            MaterialTheme.colorScheme.onBackground
-                .copy(alpha = AlphaDescription)
-                .compositeOver(MaterialTheme.colorScheme.background),
+        containerColor = MaterialTheme.colorScheme.surface,
+        titleContentColor = MaterialTheme.colorScheme.onSurface,
+        textContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
         onDismissRequest = onClose,
         confirmButton = {
             PrimaryButton(text = stringResource(id = R.string.got_it), onClick = onClose)
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/extensions/LazyListExtensions.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/extensions/LazyListExtensions.kt
index 594eac4c7a..7b009fdd67 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/extensions/LazyListExtensions.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/extensions/LazyListExtensions.kt
@@ -6,6 +6,7 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
 
 inline fun LazyListScope.itemWithDivider(
     key: Any? = null,
@@ -14,7 +15,7 @@ inline fun LazyListScope.itemWithDivider(
 ) =
     item(key = key, contentType = contentType) {
         itemContent()
-        HorizontalDivider()
+        HorizontalDivider(color = Color.Transparent)
     }
 
 inline fun <T> LazyListScope.itemsWithDivider(
@@ -25,7 +26,7 @@ inline fun <T> LazyListScope.itemsWithDivider(
 ) =
     items(items = items, key = key, contentType = contentType) { item ->
         itemContent(item)
-        HorizontalDivider()
+        HorizontalDivider(color = Color.Transparent)
     }
 
 inline fun <T> LazyListScope.itemsIndexedWithDivider(
@@ -36,5 +37,5 @@ inline fun <T> LazyListScope.itemsIndexedWithDivider(
 ) =
     itemsIndexed(items = items, key = key, contentType = contentType) { index, item ->
         itemContent(index, item)
-        HorizontalDivider()
+        HorizontalDivider(color = Color.Transparent)
     }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt
index 8329c11ec9..6969e56518 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt
@@ -247,6 +247,7 @@ private fun DeviceNameRow(deviceName: String, onInfoClick: () -> Unit) {
         Text(
             style = MaterialTheme.typography.labelMedium,
             text = stringResource(id = R.string.device_name),
+            color = MaterialTheme.colorScheme.onSurfaceVariant
         )
 
         Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
@@ -255,7 +256,7 @@ private fun DeviceNameRow(deviceName: String, onInfoClick: () -> Unit) {
                 Icon(
                     painter = painterResource(id = R.drawable.icon_info),
                     contentDescription = null,
-                    tint = MaterialTheme.colorScheme.inverseSurface
+                    tint = MaterialTheme.colorScheme.onSurface
                 )
             }
         }
@@ -268,6 +269,7 @@ private fun AccountNumberRow(accountNumber: String, onCopyAccountNumber: (String
         Text(
             style = MaterialTheme.typography.labelMedium,
             text = stringResource(id = R.string.account_number),
+            color = MaterialTheme.colorScheme.onSurfaceVariant
         )
         CopyableObfuscationView(
             content = accountNumber,
@@ -283,6 +285,7 @@ private fun PaidUntilRow(accountExpiry: DateTime?) {
         Text(
             style = MaterialTheme.typography.labelMedium,
             text = stringResource(id = R.string.paid_until),
+            color = MaterialTheme.colorScheme.onSurfaceVariant
         )
 
         Row(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ApiAccessListScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ApiAccessListScreen.kt
index dec7b15c30..5619f37e44 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ApiAccessListScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ApiAccessListScreen.kt
@@ -105,7 +105,7 @@ private fun LazyListScope.description() {
         Text(
             text = stringResource(id = R.string.api_access_description),
             style = MaterialTheme.typography.labelMedium,
-            color = MaterialTheme.colorScheme.onSecondary,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
             modifier =
                 Modifier.padding(start = Dimens.cellStartPadding, end = Dimens.cellEndPadding)
                     .fillMaxWidth()
@@ -129,7 +129,7 @@ private fun LazyListScope.currentAccessMethod(
         ) {
             Text(
                 style = MaterialTheme.typography.titleMedium,
-                color = MaterialTheme.colorScheme.onBackground,
+                color = MaterialTheme.colorScheme.onSurface,
                 text =
                     stringResource(
                         id = R.string.current_method,
@@ -145,7 +145,7 @@ private fun LazyListScope.currentAccessMethod(
                 Icon(
                     painter = painterResource(id = R.drawable.icon_info),
                     contentDescription = null,
-                    tint = MaterialTheme.colorScheme.onBackground
+                    tint = MaterialTheme.colorScheme.onSurface
                 )
             }
         }
@@ -185,8 +185,13 @@ private fun ApiAccessMethodItem(
                     }
             ),
         titleStyle = MaterialTheme.typography.titleMedium,
-        subtitleColor = MaterialTheme.colorScheme.onSecondary,
-        bodyView = { DefaultNavigationView(apiAccessMethodSetting.name.value) },
+        subtitleColor = MaterialTheme.colorScheme.onSurfaceVariant,
+        bodyView = {
+            DefaultNavigationView(
+                chevronContentDescription = apiAccessMethodSetting.name.value,
+                tint = MaterialTheme.colorScheme.onPrimary
+            )
+        },
         onCellClicked = { onApiAccessMethodClick(apiAccessMethodSetting) }
     )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AutoConnectAndLockdownModeScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AutoConnectAndLockdownModeScreen.kt
index f5f24a635c..021ce4e174 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AutoConnectAndLockdownModeScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AutoConnectAndLockdownModeScreen.kt
@@ -30,7 +30,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.rotate
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -61,7 +60,6 @@ import net.mullvad.mullvadvpn.lib.common.util.openLink
 import net.mullvad.mullvadvpn.lib.common.util.openVpnSettings
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible
 import net.mullvad.mullvadvpn.service.constant.IS_PLAY_BUILD
@@ -178,7 +176,10 @@ private fun ConstraintLayoutScope.AutoConnectCarousel(
             val annotatedTopText = page.annotatedTopText()
             ClickableText(
                 modifier = Modifier.padding(horizontal = Dimens.largePadding),
-                style = MaterialTheme.typography.titleMedium,
+                style =
+                    MaterialTheme.typography.titleMedium.copy(
+                        color = MaterialTheme.colorScheme.onSurfaceVariant
+                    ),
                 text = annotatedTopText,
                 onClick = {
                     annotatedTopText.getUrlAnnotations(it, it).let { annotation ->
@@ -194,7 +195,7 @@ private fun ConstraintLayoutScope.AutoConnectCarousel(
             Text(
                 modifier = Modifier.padding(horizontal = Dimens.largePadding),
                 style = MaterialTheme.typography.titleMedium,
-                color = MaterialTheme.colorScheme.onSecondary,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
                 text =
                     HtmlCompat.fromHtml(
                             stringResource(id = page.bottomText),
@@ -204,7 +205,7 @@ private fun ConstraintLayoutScope.AutoConnectCarousel(
                             boldSpanStyle =
                                 SpanStyle(
                                     fontWeight = FontWeight.ExtraBold,
-                                    color = MaterialTheme.colorScheme.onPrimary
+                                    color = MaterialTheme.colorScheme.onSurface
                                 )
                         )
             )
@@ -227,8 +228,7 @@ private fun CarouselNavigationButton(
         Icon(
             painter = painterResource(id = R.drawable.icon_chevron),
             contentDescription = null,
-            tint = Color.Unspecified,
-            modifier = Modifier.rotate(rotation).alpha(AlphaDescription)
+            modifier = Modifier.rotate(rotation)
         )
     }
 }
@@ -269,7 +269,7 @@ private fun ConstraintLayoutScope.PageIndicator(
 @Composable
 private fun buildTopText(@StringRes id: Int) = buildAnnotatedString {
     withStyle(
-        style = SpanStyle(color = MaterialTheme.colorScheme.onSecondary),
+        style = SpanStyle(color = MaterialTheme.colorScheme.onSurfaceVariant),
     ) {
         append(
             HtmlCompat.fromHtml(stringResource(id = id), HtmlCompat.FROM_HTML_MODE_COMPACT)
@@ -277,7 +277,7 @@ private fun buildTopText(@StringRes id: Int) = buildAnnotatedString {
                     boldSpanStyle =
                         SpanStyle(
                             fontWeight = FontWeight.ExtraBold,
-                            color = MaterialTheme.colorScheme.onPrimary
+                            color = MaterialTheme.colorScheme.onSurface
                         )
                 )
         )
@@ -298,7 +298,7 @@ private fun buildLockdownTopText() = buildAnnotatedString {
         withStyle(
             style =
                 SpanStyle(
-                    color = MaterialTheme.colorScheme.onPrimary,
+                    color = MaterialTheme.colorScheme.onSurface,
                     textDecoration = TextDecoration.Underline
                 ),
         ) {
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
index c62ff0672c..466aa0580b 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
@@ -96,7 +96,6 @@ import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible
 import net.mullvad.mullvadvpn.util.appendHideNavOnPlayBuild
 import net.mullvad.mullvadvpn.util.removeHtmlTags
@@ -235,7 +234,7 @@ fun ConnectScreen(
         ) {
             Spacer(modifier = Modifier.defaultMinSize(minHeight = Dimens.mediumPadding).weight(1f))
             MullvadCircularProgressIndicatorLarge(
-                color = MaterialTheme.colorScheme.onPrimary,
+                color = MaterialTheme.colorScheme.onSurface,
                 modifier =
                     Modifier.animateContentSize()
                         .padding(
@@ -313,7 +312,7 @@ private fun MapColumn(
         globeColors =
             GlobeColors(
                 landColor = MaterialTheme.colorScheme.primary,
-                oceanColor = MaterialTheme.colorScheme.secondary,
+                oceanColor = MaterialTheme.colorScheme.surface,
             )
     )
 
@@ -347,7 +346,7 @@ private fun ConnectionInfo(state: ConnectUiState) {
     Text(
         text = state.location?.country ?: "",
         style = MaterialTheme.typography.headlineLarge,
-        color = MaterialTheme.colorScheme.onPrimary,
+        color = MaterialTheme.colorScheme.onSurface,
         maxLines = 1,
         overflow = TextOverflow.Ellipsis,
         modifier = Modifier.padding(horizontal = Dimens.sideMargin)
@@ -355,7 +354,7 @@ private fun ConnectionInfo(state: ConnectUiState) {
     Text(
         text = state.location?.city ?: "",
         style = MaterialTheme.typography.headlineLarge,
-        color = MaterialTheme.colorScheme.onPrimary,
+        color = MaterialTheme.colorScheme.onSurface,
         maxLines = 1,
         overflow = TextOverflow.Ellipsis,
         modifier = Modifier.padding(horizontal = Dimens.sideMargin)
@@ -430,8 +429,7 @@ fun TunnelState.toMarker(location: GeoIpLocation?): Marker? {
         is TunnelState.Connected ->
             Marker(
                 location.toLatLong(),
-                colors =
-                    LocationMarkerColors(centerColor = MaterialTheme.colorScheme.inversePrimary),
+                colors = LocationMarkerColors(centerColor = MaterialTheme.colorScheme.tertiary),
             )
         is TunnelState.Connecting -> null
         is TunnelState.Disconnected ->
@@ -446,16 +444,15 @@ fun TunnelState.toMarker(location: GeoIpLocation?): Marker? {
 
 @Composable
 fun TunnelState.topBarColor(): Color =
-    if (isSecured()) MaterialTheme.colorScheme.inversePrimary else MaterialTheme.colorScheme.error
+    if (isSecured()) MaterialTheme.colorScheme.tertiary else MaterialTheme.colorScheme.error
 
 @Composable
 fun TunnelState.iconTintColor(): Color =
     if (isSecured()) {
-            MaterialTheme.colorScheme.onPrimary
-        } else {
-            MaterialTheme.colorScheme.onError
-        }
-        .copy(alpha = AlphaTopBar)
+        MaterialTheme.colorScheme.onTertiary
+    } else {
+        MaterialTheme.colorScheme.onError
+    }
 
 fun GeoIpLocation.toLatLong() =
     LatLong(Latitude(latitude.toFloat()), Longitude(longitude.toFloat()))
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/CustomListLocationsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/CustomListLocationsScreen.kt
index 54bdaacb41..2bd5efa888 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/CustomListLocationsScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/CustomListLocationsScreen.kt
@@ -152,8 +152,7 @@ fun CustomListLocationsScreen(
                 modifier =
                     Modifier.drawVerticalScrollbar(
                             state = lazyListState,
-                            color =
-                                MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar)
+                            color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar)
                         )
                         .fillMaxWidth(),
                 state = lazyListState,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/CustomListsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/CustomListsScreen.kt
index 8f43f4c888..d2a66e9a3e 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/CustomListsScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/CustomListsScreen.kt
@@ -16,7 +16,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
@@ -50,7 +49,6 @@ import net.mullvad.mullvadvpn.compose.util.showSnackbarImmediately
 import net.mullvad.mullvadvpn.lib.model.CustomList
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.color.Alpha60
 import net.mullvad.mullvadvpn.viewmodel.CustomListsViewModel
 import org.koin.androidx.compose.koinViewModel
 
@@ -131,10 +129,7 @@ fun CustomListsScreen(
             ) {
                 Icon(
                     painterResource(id = R.drawable.ic_icons_add),
-                    tint =
-                        MaterialTheme.colorScheme.onBackground
-                            .copy(alpha = Alpha60)
-                            .compositeOver(MaterialTheme.colorScheme.background),
+                    tint = MaterialTheme.colorScheme.onSurface,
                     contentDescription = stringResource(id = R.string.new_list)
                 )
             }
@@ -192,7 +187,7 @@ private fun LazyListScope.empty() {
             text = stringResource(R.string.no_custom_lists_available),
             modifier = Modifier.padding(Dimens.screenVerticalMargin),
             style = MaterialTheme.typography.labelMedium,
-            color = MaterialTheme.colorScheme.onSecondary
+            color = MaterialTheme.colorScheme.onSurfaceVariant
         )
     }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
index 67f2dde6d4..9764ad83a1 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
@@ -23,7 +23,6 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -62,8 +61,7 @@ import net.mullvad.mullvadvpn.lib.model.DeviceId
 import net.mullvad.mullvadvpn.lib.model.GetDeviceListError
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar
+import net.mullvad.mullvadvpn.lib.theme.color.selected
 import net.mullvad.mullvadvpn.lib.theme.typeface.listItemSubText
 import net.mullvad.mullvadvpn.lib.theme.typeface.listItemText
 import net.mullvad.mullvadvpn.util.formatDate
@@ -173,7 +171,7 @@ fun DeviceListScreen(
 
     ScaffoldWithTopBar(
         topBarColor = MaterialTheme.colorScheme.primary,
-        iconTintColor = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaTopBar),
+        iconTintColor = MaterialTheme.colorScheme.onPrimary,
         onSettingsClicked = onSettingsClicked,
         onAccountClicked = null,
         snackbarHostState = snackbarHostState
@@ -184,10 +182,7 @@ fun DeviceListScreen(
             val scrollState = rememberScrollState()
             Column(
                 modifier =
-                    Modifier.drawVerticalScrollbar(
-                            scrollState,
-                            MaterialTheme.colorScheme.onBackground
-                        )
+                    Modifier.drawVerticalScrollbar(scrollState, MaterialTheme.colorScheme.onSurface)
                         .verticalScroll(scrollState)
                         .weight(1f)
                         .fillMaxWidth(),
@@ -295,7 +290,7 @@ private fun ColumnScope.DeviceListHeader(state: DeviceListUiState) {
                     }
             ),
         style = MaterialTheme.typography.headlineSmall,
-        color = MaterialTheme.colorScheme.onBackground,
+        color = MaterialTheme.colorScheme.onSurface,
         modifier =
             Modifier.padding(
                 start = Dimens.sideMargin,
@@ -316,7 +311,7 @@ private fun ColumnScope.DeviceListHeader(state: DeviceListUiState) {
                         }
                 ),
             style = MaterialTheme.typography.bodySmall,
-            color = MaterialTheme.colorScheme.onBackground,
+            color = MaterialTheme.colorScheme.onSurface,
             modifier =
                 Modifier.wrapContentHeight()
                     .animateContentSize()
@@ -347,10 +342,7 @@ private fun DeviceListItem(device: Device, isLoading: Boolean, onDeviceRemovalCl
                     text =
                         stringResource(id = R.string.created_x, device.creationDate.formatDate()),
                     style = MaterialTheme.typography.listItemSubText,
-                    color =
-                        MaterialTheme.colorScheme.onPrimary
-                            .copy(alpha = AlphaDescription)
-                            .compositeOver(MaterialTheme.colorScheme.primary)
+                    color = MaterialTheme.colorScheme.onSurfaceVariant
                 )
             }
         },
@@ -393,7 +385,7 @@ private fun DeviceListButtonPanel(
             text = stringResource(id = R.string.continue_login),
             onClick = onContinueWithLogin,
             isEnabled = state is DeviceListUiState.Content && !state.hasTooManyDevices,
-            background = MaterialTheme.colorScheme.secondary
+            background = MaterialTheme.colorScheme.selected
         )
 
         PrimaryButton(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt
index c7d5ce2134..dca0332349 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt
@@ -11,7 +11,6 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
@@ -77,7 +76,7 @@ fun DeviceRevokedScreen(
 ) {
     val topColor =
         if (state == DeviceRevokedUiState.SECURED) {
-            MaterialTheme.colorScheme.inversePrimary
+            MaterialTheme.colorScheme.tertiary
         } else {
             MaterialTheme.colorScheme.error
         }
@@ -91,7 +90,7 @@ fun DeviceRevokedScreen(
             modifier =
                 Modifier.fillMaxSize()
                     .padding(it)
-                    .background(color = MaterialTheme.colorScheme.background)
+                    .background(color = MaterialTheme.colorScheme.surface)
         ) {
             val (icon, body, actionButtons) = createRefs()
 
@@ -120,14 +119,14 @@ fun DeviceRevokedScreen(
                 Text(
                     text = stringResource(id = R.string.device_inactive_title),
                     fontSize = 24.sp,
-                    color = Color.White,
+                    color = MaterialTheme.colorScheme.onSurface,
                     fontWeight = FontWeight.Bold
                 )
 
                 Text(
                     text = stringResource(id = R.string.device_inactive_description),
                     fontSize = 12.sp,
-                    color = Color.White,
+                    color = MaterialTheme.colorScheme.onSurface,
                     modifier = Modifier.padding(top = 10.dp)
                 )
 
@@ -135,7 +134,7 @@ fun DeviceRevokedScreen(
                     Text(
                         text = stringResource(id = R.string.device_inactive_unblock_warning),
                         fontSize = 12.sp,
-                        color = Color.White,
+                        color = MaterialTheme.colorScheme.onSurface,
                         modifier = Modifier.padding(top = 10.dp)
                     )
                 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/EditApiAccessMethodScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/EditApiAccessMethodScreen.kt
index 8e5104ca75..270201f943 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/EditApiAccessMethodScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/EditApiAccessMethodScreen.kt
@@ -221,7 +221,7 @@ fun EditApiAccessMethodScreen(
                 modifier
                     .drawVerticalScrollbar(
                         state = scrollState,
-                        color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar)
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar)
                     )
                     .verticalScroll(scrollState)
                     .padding(horizontal = Dimens.sideMargin, vertical = Dimens.screenVerticalMargin)
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/EditCustomListScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/EditCustomListScreen.kt
index 3bd6dc0ce1..5a86dad098 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/EditCustomListScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/EditCustomListScreen.kt
@@ -160,7 +160,7 @@ fun EditCustomListScreen(
                         text = stringResource(id = R.string.not_found),
                         modifier = Modifier.padding(Dimens.screenVerticalMargin),
                         style = MaterialTheme.typography.labelMedium,
-                        color = MaterialTheme.colorScheme.onSecondary
+                        color = MaterialTheme.colorScheme.onSurface
                     )
                 }
                 is EditCustomListState.Content -> {
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/FilterScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/FilterScreen.kt
index ad7f55684c..3b5214514b 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/FilterScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/FilterScreen.kt
@@ -102,7 +102,7 @@ fun FilterScreen(
     var providerExpanded by rememberSaveable { mutableStateOf(false) }
     var ownershipExpanded by rememberSaveable { mutableStateOf(false) }
 
-    val backgroundColor = MaterialTheme.colorScheme.background
+    val backgroundColor = MaterialTheme.colorScheme.surface
     Scaffold(
         modifier = Modifier.background(backgroundColor).systemBarsPadding().fillMaxSize(),
         topBar = { TopBar(onBackClick = onBackClick) },
@@ -234,7 +234,7 @@ private fun TopBar(onBackClick: () -> Unit) {
             Icon(
                 painter = painterResource(id = R.drawable.icon_back),
                 contentDescription = null,
-                tint = Color.Unspecified,
+                tint = MaterialTheme.colorScheme.onSurface,
             )
         }
         Text(
@@ -242,7 +242,7 @@ private fun TopBar(onBackClick: () -> Unit) {
             modifier = Modifier.weight(1f).padding(end = Dimens.titleIconSize),
             textAlign = TextAlign.Center,
             style = MaterialTheme.typography.titleLarge,
-            color = MaterialTheme.colorScheme.onPrimary
+            color = MaterialTheme.colorScheme.onSurface
         )
     }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt
index 93a576612c..8a31520aad 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt
@@ -36,7 +36,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusProperties
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
@@ -76,7 +75,6 @@ import net.mullvad.mullvadvpn.compose.util.CollectSideEffectWithLifecycle
 import net.mullvad.mullvadvpn.compose.util.accountNumberVisualTransformation
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar
 import net.mullvad.mullvadvpn.viewmodel.LoginUiSideEffect
 import net.mullvad.mullvadvpn.viewmodel.LoginViewModel
 import org.koin.androidx.compose.koinViewModel
@@ -172,7 +170,7 @@ private fun LoginScreen(
 ) {
     ScaffoldWithTopBar(
         topBarColor = MaterialTheme.colorScheme.primary,
-        iconTintColor = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaTopBar),
+        iconTintColor = MaterialTheme.colorScheme.onPrimary,
         onSettingsClicked = onSettingsClick,
         enabled = state.loginState is Idle,
         onAccountClicked = null,
@@ -269,7 +267,6 @@ private fun ColumnScope.LoginInput(
         label = {
             Text(
                 text = stringResource(id = R.string.login_description),
-                color = Color.Unspecified,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis
             )
@@ -404,7 +401,6 @@ private fun AccountDropDownItem(
                 painter = painterResource(id = R.drawable.account_history_remove_pressed),
                 contentDescription = null,
                 modifier = Modifier.size(Dimens.listIconSize),
-                tint = Color.Unspecified
             )
         }
     }
@@ -420,7 +416,7 @@ private fun CreateAccountPanel(onCreateAccountClick: () -> Unit, isEnabled: Bool
         Text(
             modifier = Modifier.padding(bottom = Dimens.smallPadding),
             text = stringResource(id = R.string.dont_have_an_account),
-            color = MaterialTheme.colorScheme.onPrimary,
+            color = MaterialTheme.colorScheme.onBackground,
         )
         PrimaryButton(
             modifier = Modifier.fillMaxWidth(),
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/NoDaemonScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/NoDaemonScreen.kt
index f86edb4e54..17aa357703 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/NoDaemonScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/NoDaemonScreen.kt
@@ -15,7 +15,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.compositeOver
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -32,7 +32,6 @@ import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
 import net.mullvad.mullvadvpn.compose.transitions.DefaultTransition
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription
 import net.mullvad.mullvadvpn.util.getActivity
 
 @Preview
@@ -83,6 +82,7 @@ fun NoDaemonScreen(onNavigateToSettings: () -> Unit) {
                         painter = painterResource(id = R.drawable.logo_text),
                         contentDescription = "",
                         alpha = 0.6f,
+                        colorFilter = ColorFilter.tint(color = MaterialTheme.colorScheme.onPrimary),
                         modifier =
                             Modifier.padding(top = Dimens.mediumPadding)
                                 .height(Dimens.splashLogoTextHeight)
@@ -90,10 +90,7 @@ fun NoDaemonScreen(onNavigateToSettings: () -> Unit) {
                     Text(
                         text = stringResource(id = R.string.connecting_to_daemon),
                         style = MaterialTheme.typography.bodySmall,
-                        color =
-                            MaterialTheme.colorScheme.onPrimary
-                                .copy(alpha = AlphaDescription)
-                                .compositeOver(backgroundColor),
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
                         modifier =
                             Modifier.padding(top = Dimens.mediumPadding)
                                 .padding(horizontal = Dimens.sideMargin),
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt
index ebdb0fe225..eea7a20e47 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt
@@ -56,7 +56,6 @@ import net.mullvad.mullvadvpn.lib.payment.model.ProductId
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar
 import net.mullvad.mullvadvpn.viewmodel.OutOfTimeViewModel
 import org.koin.androidx.compose.koinViewModel
 
@@ -179,17 +178,16 @@ fun OutOfTimeScreen(
     ScaffoldWithTopBarAndDeviceName(
         topBarColor =
             if (state.tunnelState.isSecured()) {
-                MaterialTheme.colorScheme.inversePrimary
+                MaterialTheme.colorScheme.tertiary
             } else {
                 MaterialTheme.colorScheme.error
             },
         iconTintColor =
             if (state.tunnelState.isSecured()) {
-                    MaterialTheme.colorScheme.onPrimary
-                } else {
-                    MaterialTheme.colorScheme.onError
-                }
-                .copy(alpha = AlphaTopBar),
+                MaterialTheme.colorScheme.onTertiary
+            } else {
+                MaterialTheme.colorScheme.onError
+            },
         onSettingsClicked = onSettingsClick,
         onAccountClicked = onAccountClick,
         deviceName = state.deviceName,
@@ -202,9 +200,9 @@ fun OutOfTimeScreen(
                     .verticalScroll(scrollState)
                     .drawVerticalScrollbar(
                         state = scrollState,
-                        color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar)
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar)
                     )
-                    .background(color = MaterialTheme.colorScheme.background)
+                    .background(color = MaterialTheme.colorScheme.surface)
         ) {
             Image(
                 painter = painterResource(id = R.drawable.icon_fail),
@@ -217,7 +215,7 @@ fun OutOfTimeScreen(
             Text(
                 text = stringResource(id = R.string.out_of_time),
                 style = MaterialTheme.typography.headlineLarge,
-                color = MaterialTheme.colorScheme.onPrimary,
+                color = MaterialTheme.colorScheme.onSurface,
                 modifier =
                     Modifier.padding(horizontal = Dimens.sideMargin)
                         .testTag(OUT_OF_TIME_SCREEN_TITLE_TEST_TAG)
@@ -232,7 +230,7 @@ fun OutOfTimeScreen(
                         }
                     },
                 style = MaterialTheme.typography.bodySmall,
-                color = MaterialTheme.colorScheme.onPrimary,
+                color = MaterialTheme.colorScheme.onSurface,
                 modifier =
                     Modifier.padding(
                         top = Dimens.mediumPadding,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/PrivacyDisclaimerScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/PrivacyDisclaimerScreen.kt
index cfd75de79e..8341ee008f 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/PrivacyDisclaimerScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/PrivacyDisclaimerScreen.kt
@@ -22,7 +22,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -128,7 +127,7 @@ fun PrivacyDisclaimerScreen(
         Column(
             Modifier.padding(it)
                 .fillMaxSize()
-                .background(color = MaterialTheme.colorScheme.background)
+                .background(color = MaterialTheme.colorScheme.surface)
                 .verticalScroll(scrollState)
                 .padding(horizontal = Dimens.sideMargin, vertical = Dimens.screenVerticalMargin)
                 .drawVerticalScrollbar(
@@ -150,7 +149,7 @@ private fun Content(onPrivacyPolicyLinkClicked: () -> Unit) {
         Text(
             text = stringResource(id = R.string.privacy_disclaimer_title),
             style = MaterialTheme.typography.headlineSmall,
-            color = MaterialTheme.colorScheme.onBackground,
+            color = MaterialTheme.colorScheme.onSurface,
             fontWeight = FontWeight.Bold
         )
 
@@ -158,7 +157,7 @@ private fun Content(onPrivacyPolicyLinkClicked: () -> Unit) {
         Text(
             text = stringResource(id = R.string.privacy_disclaimer_body_first_paragraph),
             fontSize = fontSize,
-            color = MaterialTheme.colorScheme.onBackground,
+            color = MaterialTheme.colorScheme.onSurface,
             modifier = Modifier.padding(top = 10.dp)
         )
 
@@ -167,7 +166,7 @@ private fun Content(onPrivacyPolicyLinkClicked: () -> Unit) {
         Text(
             text = stringResource(id = R.string.privacy_disclaimer_body_second_paragraph),
             fontSize = fontSize,
-            color = MaterialTheme.colorScheme.onBackground,
+            color = MaterialTheme.colorScheme.onSurface,
         )
 
         Row(modifier = Modifier.padding(top = 10.dp)) {
@@ -177,7 +176,7 @@ private fun Content(onPrivacyPolicyLinkClicked: () -> Unit) {
                 style =
                     TextStyle(
                         fontSize = 12.sp,
-                        color = Color.White,
+                        color = MaterialTheme.colorScheme.onSurface,
                         textDecoration = TextDecoration.Underline
                     )
             )
@@ -190,7 +189,7 @@ private fun Content(onPrivacyPolicyLinkClicked: () -> Unit) {
                         .padding(start = 2.dp, top = 2.dp)
                         .width(10.dp)
                         .height(10.dp),
-                tint = Color.Unspecified
+                tint = MaterialTheme.colorScheme.onSurface
             )
         }
     }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt
index 6f35e8519e..ecf88b3205 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ReportProblemScreen.kt
@@ -174,7 +174,10 @@ private fun ReportProblemScreen(
                         .height(IntrinsicSize.Max),
                 verticalArrangement = Arrangement.spacedBy(Dimens.mediumPadding)
             ) {
-                Text(text = stringResource(id = R.string.problem_report_description))
+                Text(
+                    text = stringResource(id = R.string.problem_report_description),
+                    color = MaterialTheme.colorScheme.onSurfaceVariant
+                )
 
                 TextField(
                     modifier = Modifier.fillMaxWidth(),
@@ -220,7 +223,7 @@ private fun ColumnScope.SendingContent() {
     Text(
         text = stringResource(id = R.string.sending),
         style = MaterialTheme.typography.headlineLarge,
-        color = MaterialTheme.colorScheme.onBackground
+        color = MaterialTheme.colorScheme.onSurface
     )
 }
 
@@ -238,16 +241,16 @@ private fun ColumnScope.SentContent(sendingState: SendingReportUiState.Success)
     Text(
         text = stringResource(id = R.string.sent),
         style = MaterialTheme.typography.headlineLarge,
-        color = MaterialTheme.colorScheme.onBackground
+        color = MaterialTheme.colorScheme.onSurface
     )
     Text(
         text =
             buildAnnotatedString {
-                withStyle(SpanStyle(color = MaterialTheme.colorScheme.surface)) {
+                withStyle(SpanStyle(color = MaterialTheme.colorScheme.tertiary)) {
                     append(stringResource(id = R.string.sent_thanks))
                 }
                 append(" ")
-                withStyle(SpanStyle(color = MaterialTheme.colorScheme.onPrimary)) {
+                withStyle(SpanStyle(color = MaterialTheme.colorScheme.onSurface)) {
                     append(stringResource(id = R.string.we_will_look_into_this))
                 }
             },
@@ -273,7 +276,7 @@ private fun ColumnScope.SentContent(sendingState: SendingReportUiState.Success)
         Text(
             text = annotatedEmailString,
             style = MaterialTheme.typography.bodySmall,
-            color = MaterialTheme.colorScheme.onBackground,
+            color = MaterialTheme.colorScheme.onSurface,
             modifier = Modifier.fillMaxWidth()
         )
     }
@@ -291,12 +294,12 @@ private fun ColumnScope.ErrorContent(retry: () -> Unit, onDismiss: () -> Unit) {
     Text(
         text = stringResource(id = R.string.failed_to_send),
         style = MaterialTheme.typography.headlineLarge,
-        color = MaterialTheme.colorScheme.onBackground,
+        color = MaterialTheme.colorScheme.onSurface,
     )
     Text(
         text = stringResource(id = R.string.failed_to_send_details),
         style = MaterialTheme.typography.bodySmall,
-        color = MaterialTheme.colorScheme.onBackground,
+        color = MaterialTheme.colorScheme.onSurface,
         modifier = Modifier.fillMaxWidth()
     )
     Spacer(modifier = Modifier.weight(1f))
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt
index 1b82861e76..417cf57366 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt
@@ -268,7 +268,7 @@ fun SelectLocationScreen(
     onDeleteCustomList: (RelayItem.CustomList) -> Unit = {},
     onToggleExpand: (RelayItemId, CustomListId?, Boolean) -> Unit = { _, _, _ -> },
 ) {
-    val backgroundColor = MaterialTheme.colorScheme.background
+    val backgroundColor = MaterialTheme.colorScheme.surface
 
     Scaffold(
         snackbarHost = {
@@ -303,8 +303,8 @@ fun SelectLocationScreen(
                     Modifier.fillMaxWidth()
                         .height(Dimens.searchFieldHeight)
                         .padding(horizontal = Dimens.searchFieldHorizontalPadding),
-                backgroundColor = MaterialTheme.colorScheme.tertiaryContainer,
                 textColor = MaterialTheme.colorScheme.onTertiaryContainer,
+                backgroundColor = MaterialTheme.colorScheme.tertiaryContainer
             ) { searchString ->
                 onSearchTermInput.invoke(searchString)
             }
@@ -315,7 +315,7 @@ fun SelectLocationScreen(
                     Modifier.fillMaxSize()
                         .drawVerticalScrollbar(
                             lazyListState,
-                            MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar),
+                            MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
                         ),
                 state = lazyListState,
                 horizontalAlignment = Alignment.CenterHorizontally,
@@ -484,7 +484,7 @@ fun LazyItemScope.CustomListFooter(item: RelayListItem.CustomListFooter) {
             } else {
                 stringResource(R.string.to_create_a_custom_list)
             },
-        modifier = Modifier.background(MaterialTheme.colorScheme.background)
+        modifier = Modifier.background(MaterialTheme.colorScheme.surface)
     )
 }
 
@@ -495,7 +495,7 @@ private fun SelectLocationTopBar(onBackClick: () -> Unit, onFilterClick: () -> U
             Icon(
                 modifier = Modifier.rotate(270f),
                 painter = painterResource(id = R.drawable.icon_back),
-                tint = Color.Unspecified,
+                tint = MaterialTheme.colorScheme.onSurface,
                 contentDescription = null,
             )
         }
@@ -504,13 +504,13 @@ private fun SelectLocationTopBar(onBackClick: () -> Unit, onFilterClick: () -> U
             modifier = Modifier.align(Alignment.CenterVertically).weight(weight = 1f),
             textAlign = TextAlign.Center,
             style = MaterialTheme.typography.titleLarge,
-            color = MaterialTheme.colorScheme.onPrimary,
+            color = MaterialTheme.colorScheme.onSurface,
         )
         IconButton(onClick = onFilterClick) {
             Icon(
                 painter = painterResource(id = R.drawable.icons_more_circle),
                 contentDescription = null,
-                tint = Color.Unspecified,
+                tint = MaterialTheme.colorScheme.onSurface,
             )
         }
     }
@@ -553,13 +553,15 @@ private fun BottomSheets(
             onHideBottomSheet()
         }
     }
+    val backgroundColor: Color = MaterialTheme.colorScheme.surfaceContainer
     val onBackgroundColor: Color = MaterialTheme.colorScheme.onSurface
 
     when (bottomSheetState) {
         is ShowCustomListsBottomSheet -> {
             CustomListsBottomSheet(
-                sheetState = sheetState,
+                backgroundColor = backgroundColor,
                 onBackgroundColor = onBackgroundColor,
+                sheetState = sheetState,
                 bottomSheetState = bottomSheetState,
                 onCreateCustomList = { onCreateCustomList(null) },
                 onEditCustomLists = onEditCustomLists,
@@ -568,8 +570,9 @@ private fun BottomSheets(
         }
         is ShowLocationBottomSheet -> {
             LocationBottomSheet(
-                sheetState = sheetState,
+                backgroundColor = backgroundColor,
                 onBackgroundColor = onBackgroundColor,
+                sheetState = sheetState,
                 customLists = bottomSheetState.customLists,
                 item = bottomSheetState.item,
                 onCreateCustomList = onCreateCustomList,
@@ -579,8 +582,9 @@ private fun BottomSheets(
         }
         is ShowEditCustomListBottomSheet -> {
             EditCustomListBottomSheet(
-                sheetState = sheetState,
+                backgroundColor = backgroundColor,
                 onBackgroundColor = onBackgroundColor,
+                sheetState = sheetState,
                 customList = bottomSheetState.customList,
                 onEditName = onEditCustomListName,
                 onEditLocations = onEditLocationsCustomList,
@@ -590,8 +594,9 @@ private fun BottomSheets(
         }
         is ShowCustomListsEntryBottomSheet -> {
             CustomListEntryBottomSheet(
-                sheetState = sheetState,
+                backgroundColor = backgroundColor,
                 onBackgroundColor = onBackgroundColor,
+                sheetState = sheetState,
                 customListId = bottomSheetState.customListId,
                 customListName = bottomSheetState.customListName,
                 item = bottomSheetState.item,
@@ -625,6 +630,7 @@ private fun SelectLocationUiState.indexOfSelectedRelayItem(): Int =
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun CustomListsBottomSheet(
+    backgroundColor: Color,
     onBackgroundColor: Color,
     sheetState: SheetState,
     bottomSheetState: ShowCustomListsBottomSheet,
@@ -632,14 +638,17 @@ private fun CustomListsBottomSheet(
     onEditCustomLists: () -> Unit,
     closeBottomSheet: (animate: Boolean) -> Unit
 ) {
+
     MullvadModalBottomSheet(
         sheetState = sheetState,
+        backgroundColor = backgroundColor,
+        onBackgroundColor = onBackgroundColor,
         onDismissRequest = { closeBottomSheet(false) },
         modifier = Modifier.testTag(SELECT_LOCATION_CUSTOM_LIST_BOTTOM_SHEET_TEST_TAG)
     ) {
         HeaderCell(
             text = stringResource(id = R.string.edit_custom_lists),
-            background = Color.Unspecified
+            background = backgroundColor
         )
         HorizontalDivider(color = onBackgroundColor)
         IconCell(
@@ -650,7 +659,7 @@ private fun CustomListsBottomSheet(
                 onCreateCustomList()
                 closeBottomSheet(true)
             },
-            background = Color.Unspecified
+            background = backgroundColor
         )
         IconCell(
             iconId = R.drawable.icon_edit,
@@ -668,7 +677,7 @@ private fun CustomListsBottomSheet(
                 onEditCustomLists()
                 closeBottomSheet(true)
             },
-            background = Color.Unspecified,
+            background = backgroundColor,
             enabled = bottomSheetState.editListEnabled
         )
     }
@@ -677,6 +686,7 @@ private fun CustomListsBottomSheet(
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun LocationBottomSheet(
+    backgroundColor: Color,
     onBackgroundColor: Color,
     sheetState: SheetState,
     customLists: List<RelayItem.CustomList>,
@@ -687,12 +697,14 @@ private fun LocationBottomSheet(
 ) {
     MullvadModalBottomSheet(
         sheetState = sheetState,
+        backgroundColor = backgroundColor,
+        onBackgroundColor = onBackgroundColor,
         onDismissRequest = { closeBottomSheet(false) },
         modifier = Modifier.testTag(SELECT_LOCATION_LOCATION_BOTTOM_SHEET_TEST_TAG)
     ) { ->
         HeaderCell(
             text = stringResource(id = R.string.add_location_to_list, item.name),
-            background = Color.Unspecified
+            background = backgroundColor
         )
         HorizontalDivider(color = onBackgroundColor)
         customLists.forEach {
@@ -709,13 +721,13 @@ private fun LocationBottomSheet(
                     if (enabled) {
                         onBackgroundColor
                     } else {
-                        MaterialTheme.colorScheme.onSecondary
+                        MaterialTheme.colorScheme.onSurfaceVariant
                     },
                 onClick = {
                     onAddLocationToList(item, it)
                     closeBottomSheet(true)
                 },
-                background = Color.Unspecified,
+                background = backgroundColor,
                 enabled = enabled
             )
         }
@@ -727,7 +739,7 @@ private fun LocationBottomSheet(
                 onCreateCustomList(item)
                 closeBottomSheet(true)
             },
-            background = Color.Unspecified
+            background = backgroundColor
         )
     }
 }
@@ -735,6 +747,7 @@ private fun LocationBottomSheet(
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun EditCustomListBottomSheet(
+    backgroundColor: Color,
     onBackgroundColor: Color,
     sheetState: SheetState,
     customList: RelayItem.CustomList,
@@ -744,10 +757,12 @@ private fun EditCustomListBottomSheet(
     closeBottomSheet: (animate: Boolean) -> Unit
 ) {
     MullvadModalBottomSheet(
+        backgroundColor = backgroundColor,
+        onBackgroundColor = onBackgroundColor,
         sheetState = sheetState,
         onDismissRequest = { closeBottomSheet(false) }
     ) {
-        HeaderCell(text = customList.name, background = Color.Unspecified)
+        HeaderCell(text = customList.name, background = backgroundColor)
         HorizontalDivider(color = onBackgroundColor)
         IconCell(
             iconId = R.drawable.icon_edit,
@@ -757,7 +772,7 @@ private fun EditCustomListBottomSheet(
                 onEditName(customList)
                 closeBottomSheet(true)
             },
-            background = Color.Unspecified
+            background = backgroundColor
         )
         IconCell(
             iconId = R.drawable.icon_add,
@@ -767,7 +782,7 @@ private fun EditCustomListBottomSheet(
                 onEditLocations(customList)
                 closeBottomSheet(true)
             },
-            background = Color.Unspecified
+            background = backgroundColor
         )
         IconCell(
             iconId = R.drawable.icon_delete,
@@ -777,7 +792,7 @@ private fun EditCustomListBottomSheet(
                 onDeleteCustomList(customList)
                 closeBottomSheet(true)
             },
-            background = Color.Unspecified
+            background = backgroundColor
         )
     }
 }
@@ -785,6 +800,7 @@ private fun EditCustomListBottomSheet(
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun CustomListEntryBottomSheet(
+    backgroundColor: Color,
     onBackgroundColor: Color,
     sheetState: SheetState,
     customListId: CustomListId,
@@ -795,13 +811,15 @@ private fun CustomListEntryBottomSheet(
 ) {
     MullvadModalBottomSheet(
         sheetState = sheetState,
+        backgroundColor = backgroundColor,
+        onBackgroundColor = onBackgroundColor,
         onDismissRequest = { closeBottomSheet(false) },
         modifier = Modifier.testTag(SELECT_LOCATION_LOCATION_BOTTOM_SHEET_TEST_TAG)
     ) {
         HeaderCell(
             text =
                 stringResource(id = R.string.remove_location_from_list, item.name, customListName),
-            background = Color.Unspecified
+            background = backgroundColor
         )
         HorizontalDivider(color = onBackgroundColor)
 
@@ -813,7 +831,7 @@ private fun CustomListEntryBottomSheet(
                 onRemoveLocationFromList(item, customListId)
                 closeBottomSheet(true)
             },
-            background = Color.Unspecified
+            background = backgroundColor
         )
     }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ServerIpOverridesScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ServerIpOverridesScreen.kt
index 0ff97589d3..0c87b02ffb 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ServerIpOverridesScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ServerIpOverridesScreen.kt
@@ -231,16 +231,20 @@ private fun ImportOverridesByBottomSheet(
                 }
             }
     }
+    val backgroundColor: Color = MaterialTheme.colorScheme.surfaceContainer
+    val onBackgroundColor: Color = MaterialTheme.colorScheme.onSurface
 
     MullvadModalBottomSheet(
         sheetState = sheetState,
+        backgroundColor = backgroundColor,
+        onBackgroundColor = onBackgroundColor,
         onDismissRequest = { showBottomSheet(false) },
     ) {
         HeaderCell(
             text = stringResource(id = R.string.server_ip_overrides_import_by),
-            background = Color.Unspecified
+            background = backgroundColor
         )
-        HorizontalDivider(color = MaterialTheme.colorScheme.onBackground)
+        HorizontalDivider(color = onBackgroundColor)
         IconCell(
             iconId = R.drawable.icon_upload_file,
             title = stringResource(id = R.string.server_ip_overrides_import_by_file),
@@ -248,7 +252,7 @@ private fun ImportOverridesByBottomSheet(
                 onImportByFile()
                 onCloseSheet()
             },
-            background = Color.Unspecified,
+            background = backgroundColor,
             modifier = Modifier.testTag(SERVER_IP_OVERRIDES_IMPORT_BY_FILE_TEST_TAG)
         )
         IconCell(
@@ -258,18 +262,18 @@ private fun ImportOverridesByBottomSheet(
                 onImportByText()
                 onCloseSheet()
             },
-            background = Color.Unspecified,
+            background = backgroundColor,
             modifier = Modifier.testTag(SERVER_IP_OVERRIDES_IMPORT_BY_TEXT_TEST_TAG)
         )
         if (overridesActive) {
-            HorizontalDivider(color = MaterialTheme.colorScheme.onBackground)
+            HorizontalDivider(color = onBackgroundColor)
             Row(
                 verticalAlignment = Alignment.CenterVertically,
             ) {
                 Icon(
                     modifier = Modifier.padding(Dimens.mediumPadding),
                     painter = painterResource(id = R.drawable.icon_info),
-                    tint = MaterialTheme.colorScheme.errorContainer,
+                    tint = MaterialTheme.colorScheme.error,
                     contentDescription = null
                 )
                 Text(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt
index c602d731f2..df6b7f109e 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt
@@ -3,8 +3,8 @@ package net.mullvad.mullvadvpn.compose.screen
 import android.content.Context
 import android.net.Uri
 import androidx.compose.animation.animateContentSize
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
@@ -55,7 +55,7 @@ private fun PreviewSettings() {
                     appVersion = "2222.22",
                     isLoggedIn = true,
                     isSupportedVersion = true,
-                    isPlayBuild = false
+                    isPlayBuild = false,
                 ),
         )
     }
@@ -99,8 +99,8 @@ fun SettingsScreen(
             modifier = modifier.testTag(LAZY_LIST_TEST_TAG).animateContentSize(),
             state = lazyListState
         ) {
-            item { Spacer(modifier = Modifier.height(Dimens.cellLabelVerticalPadding)) }
             if (state.isLoggedIn) {
+                item { Spacer(modifier = Modifier.height(Dimens.cellLabelVerticalPadding)) }
                 item {
                     NavigationComposeCell(
                         title = stringResource(id = R.string.settings_vpn),
@@ -162,13 +162,14 @@ private fun AppVersion(context: Context, state: SettingsUiState) {
                     NavigationCellBody(
                         content = state.appVersion,
                         contentBodyDescription = stringResource(id = R.string.app_version),
+                        textColor = MaterialTheme.colorScheme.onSurfaceVariant,
                         isExternalLink = true,
                     )
                 } else {
                     Text(
                         text = state.appVersion,
                         style = MaterialTheme.typography.labelMedium,
-                        color = MaterialTheme.colorScheme.onSecondary
+                        color = MaterialTheme.colorScheme.onSurfaceVariant
                     )
                 }
             },
@@ -180,9 +181,9 @@ private fun AppVersion(context: Context, state: SettingsUiState) {
         Text(
             text = stringResource(id = R.string.unsupported_version_description),
             style = MaterialTheme.typography.labelMedium,
-            color = MaterialTheme.colorScheme.onSecondary,
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
             modifier =
-                Modifier.background(MaterialTheme.colorScheme.secondary)
+                Modifier.fillMaxWidth()
                     .padding(
                         start = Dimens.cellStartPadding,
                         top = Dimens.cellTopPadding,
@@ -206,7 +207,13 @@ private fun FaqAndGuides(context: Context) {
     val faqGuideLabel = stringResource(id = R.string.faqs_and_guides)
     NavigationComposeCell(
         title = faqGuideLabel,
-        bodyView = @Composable { DefaultExternalLinkView(faqGuideLabel) },
+        bodyView =
+            @Composable {
+                DefaultExternalLinkView(
+                    chevronContentDescription = faqGuideLabel,
+                    tint = MaterialTheme.colorScheme.onPrimary
+                )
+            },
         onClick = {
             context.openLink(Uri.parse(context.resources.getString(R.string.faqs_and_guides_url)))
         }
@@ -218,7 +225,13 @@ private fun PrivacyPolicy(context: Context, state: SettingsUiState) {
     val privacyPolicyLabel = stringResource(id = R.string.privacy_policy_label)
     NavigationComposeCell(
         title = privacyPolicyLabel,
-        bodyView = @Composable { DefaultExternalLinkView(privacyPolicyLabel) },
+        bodyView =
+            @Composable {
+                DefaultExternalLinkView(
+                    chevronContentDescription = privacyPolicyLabel,
+                    tint = MaterialTheme.colorScheme.onPrimary
+                )
+            },
         onClick = {
             context.openLink(
                 Uri.parse(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplashScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplashScreen.kt
index a81fa5f42f..5884ee4e90 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplashScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplashScreen.kt
@@ -14,7 +14,6 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -32,7 +31,6 @@ import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
 import net.mullvad.mullvadvpn.compose.util.CollectSideEffectWithLifecycle
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription
 import net.mullvad.mullvadvpn.viewmodel.SplashUiSideEffect
 import net.mullvad.mullvadvpn.viewmodel.SplashViewModel
 import org.koin.androidx.compose.koinViewModel
@@ -118,10 +116,7 @@ fun SplashScreen() {
                     Text(
                         text = stringResource(id = R.string.connecting_to_daemon),
                         style = MaterialTheme.typography.bodySmall,
-                        color =
-                            MaterialTheme.colorScheme.onPrimary
-                                .copy(alpha = AlphaDescription)
-                                .compositeOver(backgroundColor),
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
                         modifier = Modifier.padding(top = Dimens.mediumPadding)
                     )
                 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt
index df837b5750..352b64144f 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt
@@ -2,6 +2,7 @@ package net.mullvad.mullvadvpn.compose.screen
 
 import android.graphics.Bitmap
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -125,7 +126,7 @@ fun SplitTunnelingScreen(
         navigationIcon = { NavigateBackIconButton(onNavigateBack = onBackClick) },
     ) { modifier, lazyListState ->
         LazyColumn(
-            modifier = modifier,
+            modifier = modifier.background(MaterialTheme.colorScheme.surface),
             horizontalAlignment = Alignment.CenterHorizontally,
             state = lazyListState,
         ) {
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt
index 83f9121493..5a8bf556b4 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt
@@ -1,6 +1,7 @@
 package net.mullvad.mullvadvpn.compose.screen
 
 import android.content.Context
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -45,6 +46,7 @@ import net.mullvad.mullvadvpn.compose.component.MullvadSnackbar
 import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.compose.transitions.SlideInFromRightTransition
+import net.mullvad.mullvadvpn.compose.util.CopyToClipboardHandle
 import net.mullvad.mullvadvpn.compose.util.createCopyToClipboardHandle
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
@@ -74,16 +76,12 @@ fun ViewLogs(navigator: DestinationsNavigator) {
     ViewLogsScreen(state = state, onBackClick = dropUnlessResumed { navigator.navigateUp() })
 }
 
-@OptIn(ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class)
 @Composable
 fun ViewLogsScreen(
     state: ViewLogsUiState,
     onBackClick: () -> Unit = {},
 ) {
-    val context = LocalContext.current
-
     val snackbarHostState = remember { SnackbarHostState() }
-    val scope = rememberCoroutineScope()
     val clipboardHandle = createCopyToClipboardHandle(snackbarHostState = snackbarHostState)
     Scaffold(
         snackbarHost = {
@@ -92,68 +90,87 @@ fun ViewLogsScreen(
                 snackbar = { snackbarData -> MullvadSnackbar(snackbarData = snackbarData) }
             )
         },
-        topBar = {
-            MullvadMediumTopBar(
-                title = stringResource(id = R.string.view_logs),
-                navigationIcon = {
-                    NavigateBackIconButton(
-                        onNavigateBack = onBackClick,
-                        modifier = Modifier.focusProperties { down = FocusRequester.Cancel }
-                    )
-                },
-                actions = {
-                    val clipboardToastMessage = stringResource(R.string.copied_logs_to_clipboard)
-                    IconButton(
-                        onClick = { clipboardHandle(state.text(), clipboardToastMessage) },
-                        modifier = Modifier.focusProperties { down = FocusRequester.Cancel }
-                    ) {
-                        Icon(
-                            painter = painterResource(id = R.drawable.icon_copy),
-                            contentDescription = null
-                        )
-                    }
-                    IconButton(
-                        onClick = { scope.launch { shareText(context, state.text()) } },
-                        modifier = Modifier.focusProperties { down = FocusRequester.Cancel }
-                    ) {
-                        Icon(imageVector = Icons.Default.Share, contentDescription = null)
-                    }
-                }
+        topBar = { TopBar(state, clipboardHandle, onBackClick) },
+    ) {
+        Content(state, it)
+    }
+}
+
+@OptIn(ExperimentalComposeUiApi::class, ExperimentalMaterial3Api::class)
+@Composable
+private fun TopBar(
+    state: ViewLogsUiState,
+    clipboardHandle: CopyToClipboardHandle,
+    onBackClick: () -> Unit
+) {
+    val scope = rememberCoroutineScope()
+    val context = LocalContext.current
+    MullvadMediumTopBar(
+        title = stringResource(id = R.string.view_logs),
+        navigationIcon = {
+            NavigateBackIconButton(
+                onNavigateBack = onBackClick,
+                modifier = Modifier.focusProperties { down = FocusRequester.Cancel }
             )
+        },
+        actions = {
+            val clipboardToastMessage = stringResource(R.string.copied_logs_to_clipboard)
+            IconButton(
+                onClick = { clipboardHandle(state.text(), clipboardToastMessage) },
+                modifier = Modifier.focusProperties { down = FocusRequester.Cancel }
+            ) {
+                Icon(
+                    painter = painterResource(id = R.drawable.icon_copy),
+                    contentDescription = null
+                )
+            }
+            IconButton(
+                onClick = { scope.launch { shareText(context, state.text()) } },
+                modifier = Modifier.focusProperties { down = FocusRequester.Cancel }
+            ) {
+                Icon(imageVector = Icons.Default.Share, contentDescription = null)
+            }
         }
+    )
+}
+
+@Composable
+private fun Content(state: ViewLogsUiState, paddingValues: PaddingValues) {
+    Card(
+        modifier =
+            Modifier.fillMaxSize()
+                .padding(paddingValues)
+                .padding(
+                    start = Dimens.sideMargin,
+                    end = Dimens.sideMargin,
+                    bottom = Dimens.screenVerticalMargin
+                ),
+        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.onPrimary)
     ) {
-        Card(
-            modifier =
-                Modifier.fillMaxSize()
-                    .padding(it)
-                    .padding(
-                        start = Dimens.sideMargin,
-                        end = Dimens.sideMargin,
-                        bottom = Dimens.screenVerticalMargin
-                    ),
-            colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.onPrimary)
-        ) {
-            if (state.isLoading) {
-                MullvadCircularProgressIndicatorMedium(
-                    modifier =
-                        Modifier.padding(Dimens.mediumPadding).align(Alignment.CenterHorizontally),
-                    color = MaterialTheme.colorScheme.primary
-                )
-            } else {
-                val listState = rememberLazyListState()
-                LazyColumn(
-                    state = listState,
-                    modifier =
-                        Modifier.fillMaxWidth()
-                            .drawVerticalScrollbar(
-                                listState,
-                                MaterialTheme.colorScheme.primary.copy(alpha = AlphaScrollbar)
-                            )
-                            .padding(horizontal = Dimens.smallPadding)
-                ) {
-                    items(state.allLines) { text ->
-                        Text(text = text, style = MaterialTheme.typography.bodySmall)
-                    }
+        if (state.isLoading) {
+            MullvadCircularProgressIndicatorMedium(
+                modifier =
+                    Modifier.padding(Dimens.mediumPadding).align(Alignment.CenterHorizontally),
+                color = MaterialTheme.colorScheme.primary
+            )
+        } else {
+            val listState = rememberLazyListState()
+            LazyColumn(
+                state = listState,
+                modifier =
+                    Modifier.fillMaxWidth()
+                        .drawVerticalScrollbar(
+                            listState,
+                            MaterialTheme.colorScheme.primary.copy(alpha = AlphaScrollbar)
+                        )
+                        .padding(horizontal = Dimens.smallPadding)
+            ) {
+                items(state.allLines) { text ->
+                    Text(
+                        text = text,
+                        style = MaterialTheme.typography.bodySmall,
+                        color = MaterialTheme.colorScheme.primary
+                    )
                 }
             }
         }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt
index accc593f3c..2a51573198 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt
@@ -19,7 +19,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.platform.testTag
@@ -376,7 +375,7 @@ fun VpnSettingsScreen(
                         isToggled = state.contentBlockersOptions.blockAds,
                         isEnabled = !state.isCustomDnsEnabled,
                         onCellClicked = { onToggleBlockAds(it) },
-                        background = MaterialTheme.colorScheme.secondaryContainer,
+                        background = MaterialTheme.colorScheme.surfaceContainerLow,
                         startPadding = Dimens.indentedCellStartPadding
                     )
                 }
@@ -386,7 +385,7 @@ fun VpnSettingsScreen(
                         isToggled = state.contentBlockersOptions.blockTrackers,
                         isEnabled = !state.isCustomDnsEnabled,
                         onCellClicked = { onToggleBlockTrackers(it) },
-                        background = MaterialTheme.colorScheme.secondaryContainer,
+                        background = MaterialTheme.colorScheme.surfaceContainerLow,
                         startPadding = Dimens.indentedCellStartPadding
                     )
                 }
@@ -397,7 +396,7 @@ fun VpnSettingsScreen(
                         isEnabled = !state.isCustomDnsEnabled,
                         onCellClicked = { onToggleBlockMalware(it) },
                         onInfoClicked = { navigateToMalwareInfo() },
-                        background = MaterialTheme.colorScheme.secondaryContainer,
+                        background = MaterialTheme.colorScheme.surfaceContainerLow,
                         startPadding = Dimens.indentedCellStartPadding
                     )
                 }
@@ -407,7 +406,7 @@ fun VpnSettingsScreen(
                         isToggled = state.contentBlockersOptions.blockGambling,
                         isEnabled = !state.isCustomDnsEnabled,
                         onCellClicked = { onToggleBlockGambling(it) },
-                        background = MaterialTheme.colorScheme.secondaryContainer,
+                        background = MaterialTheme.colorScheme.surfaceContainerLow,
                         startPadding = Dimens.indentedCellStartPadding
                     )
                 }
@@ -417,7 +416,7 @@ fun VpnSettingsScreen(
                         isToggled = state.contentBlockersOptions.blockAdultContent,
                         isEnabled = !state.isCustomDnsEnabled,
                         onCellClicked = { onToggleBlockAdultContent(it) },
-                        background = MaterialTheme.colorScheme.secondaryContainer,
+                        background = MaterialTheme.colorScheme.surfaceContainerLow,
                         startPadding = Dimens.indentedCellStartPadding
                     )
                 }
@@ -428,7 +427,7 @@ fun VpnSettingsScreen(
                         isToggled = state.contentBlockersOptions.blockSocialMedia,
                         isEnabled = !state.isCustomDnsEnabled,
                         onCellClicked = { onToggleBlockSocialMedia(it) },
-                        background = MaterialTheme.colorScheme.secondaryContainer,
+                        background = MaterialTheme.colorScheme.surfaceContainerLow,
                         startPadding = Dimens.indentedCellStartPadding
                     )
                 }
@@ -436,7 +435,7 @@ fun VpnSettingsScreen(
                 if (state.isCustomDnsEnabled) {
                     item {
                         ContentBlockersDisableModeCellSubtitle(
-                            Modifier.background(MaterialTheme.colorScheme.secondary)
+                            Modifier.background(MaterialTheme.colorScheme.surface)
                                 .padding(
                                     start = Dimens.cellStartPadding,
                                     top = topPadding,
@@ -475,11 +474,11 @@ fun VpnSettingsScreen(
                         headlineContent = {
                             Text(
                                 text = stringResource(id = R.string.add_a_server),
-                                color = Color.White,
+                                color = MaterialTheme.colorScheme.onSurface,
                             )
                         },
                         bodyView = {},
-                        background = MaterialTheme.colorScheme.secondaryContainer,
+                        background = MaterialTheme.colorScheme.surfaceContainerLow,
                         startPadding = biggerPadding,
                     )
                 }
@@ -489,13 +488,12 @@ fun VpnSettingsScreen(
                 CustomDnsCellSubtitle(
                     isCellClickable = state.contentBlockersOptions.isAnyBlockerEnabled().not(),
                     modifier =
-                        Modifier.background(MaterialTheme.colorScheme.secondary)
-                            .padding(
-                                start = Dimens.cellStartPadding,
-                                top = topPadding,
-                                end = Dimens.cellEndPadding,
-                                bottom = Dimens.cellLabelVerticalPadding,
-                            )
+                        Modifier.padding(
+                            start = Dimens.cellStartPadding,
+                            top = topPadding,
+                            end = Dimens.cellEndPadding,
+                            bottom = Dimens.cellLabelVerticalPadding,
+                        )
                 )
             }
 
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt
index 34aee5d0bb..bb376c09f9 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt
@@ -1,5 +1,6 @@
 package net.mullvad.mullvadvpn.compose.screen
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -64,7 +65,6 @@ import net.mullvad.mullvadvpn.lib.payment.model.ProductPrice
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
-import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar
 import net.mullvad.mullvadvpn.viewmodel.WelcomeViewModel
 import org.koin.androidx.compose.koinViewModel
 
@@ -177,7 +177,7 @@ fun WelcomeScreen(
 
     ScaffoldWithTopBar(
         topBarColor = MaterialTheme.colorScheme.primary,
-        iconTintColor = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaTopBar),
+        iconTintColor = MaterialTheme.colorScheme.onPrimary,
         onSettingsClicked = onSettingsClick,
         onAccountClicked = onAccountClick,
         snackbarHostState = snackbarHostState,
@@ -185,11 +185,12 @@ fun WelcomeScreen(
         Column(
             modifier =
                 Modifier.fillMaxSize()
+                    .background(color = MaterialTheme.colorScheme.surface)
                     .padding(it)
                     .verticalScroll(scrollState)
                     .drawVerticalScrollbar(
                         state = scrollState,
-                        color = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaScrollbar)
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar)
                     )
         ) {
             // Welcome info area
@@ -229,7 +230,7 @@ private fun WelcomeInfo(
                         end = Dimens.sideMargin
                     ),
             style = MaterialTheme.typography.headlineLarge,
-            color = MaterialTheme.colorScheme.onPrimary,
+            color = MaterialTheme.colorScheme.onSurface,
             maxLines = 1,
             overflow = TextOverflow.Ellipsis
         )
@@ -242,7 +243,7 @@ private fun WelcomeInfo(
                         vertical = Dimens.smallPadding,
                     ),
             style = MaterialTheme.typography.bodySmall,
-            color = MaterialTheme.colorScheme.onPrimary
+            color = MaterialTheme.colorScheme.onSurface
         )
 
         AccountNumberRow(snackbarHostState, state)
@@ -266,7 +267,7 @@ private fun WelcomeInfo(
                     end = Dimens.sideMargin
                 ),
             style = MaterialTheme.typography.bodySmall,
-            color = MaterialTheme.colorScheme.onPrimary
+            color = MaterialTheme.colorScheme.onSurface
         )
     }
 }
@@ -291,7 +292,7 @@ private fun AccountNumberRow(snackbarHostState: SnackbarHostState, state: Welcom
             text = state.accountNumber?.value?.groupWithSpaces() ?: "",
             modifier = Modifier.weight(1f).padding(vertical = Dimens.smallPadding),
             style = MaterialTheme.typography.headlineSmall,
-            color = MaterialTheme.colorScheme.onPrimary
+            color = MaterialTheme.colorScheme.onSurface
         )
 
         CopyAnimatedIconButton(onCopyToClipboard)
@@ -315,7 +316,7 @@ fun DeviceNameRow(deviceName: String?, navigateToDeviceInfoDialog: () -> Unit) {
             style = MaterialTheme.typography.bodySmall,
             maxLines = 1,
             overflow = TextOverflow.Ellipsis,
-            color = MaterialTheme.colorScheme.onPrimary
+            color = MaterialTheme.colorScheme.onSurface
         )
 
         IconButton(
@@ -325,7 +326,7 @@ fun DeviceNameRow(deviceName: String?, navigateToDeviceInfoDialog: () -> Unit) {
             Icon(
                 painter = painterResource(id = R.drawable.icon_info),
                 contentDescription = null,
-                tint = MaterialTheme.colorScheme.onPrimary
+                tint = MaterialTheme.colorScheme.onSurface
             )
         }
     }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/state/SettingsUiState.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/state/SettingsUiState.kt
index 8f5ce2d8a2..d804dd6678 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/state/SettingsUiState.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/state/SettingsUiState.kt
@@ -4,5 +4,5 @@ data class SettingsUiState(
     val appVersion: String,
     val isLoggedIn: Boolean,
     val isSupportedVersion: Boolean,
-    val isPlayBuild: Boolean
+    val isPlayBuild: Boolean,
 )
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CustomListNameTextField.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/CustomListNameTextField.kt
index f0cb0e8209..058b69d69d 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CustomListNameTextField.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/CustomListNameTextField.kt
@@ -1,4 +1,4 @@
-package net.mullvad.mullvadvpn.compose.component
+package net.mullvad.mullvadvpn.compose.textfield
 
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -12,7 +12,6 @@ import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.text.input.KeyboardCapitalization
 import androidx.compose.ui.text.input.KeyboardType
-import net.mullvad.mullvadvpn.compose.textfield.CustomTextField
 import net.mullvad.mullvadvpn.lib.model.CustomListName
 
 @Composable
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/SearchTextField.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/SearchTextField.kt
index 72ba0ad3ba..174c1fb7e0 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/SearchTextField.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/SearchTextField.kt
@@ -28,6 +28,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.Alpha10
 
 @Preview
 @Composable
@@ -36,7 +37,7 @@ private fun PreviewSearchTextField() {
         Column(modifier = Modifier.background(color = MaterialTheme.colorScheme.background)) {
             SearchTextField(
                 placeHolder = "Search for...",
-                backgroundColor = MaterialTheme.colorScheme.tertiaryContainer,
+                backgroundColor = MaterialTheme.colorScheme.onSurface.copy(alpha = Alpha10),
                 textColor = MaterialTheme.colorScheme.onTertiaryContainer,
             ) {}
         }
@@ -100,7 +101,7 @@ fun SearchTextField(
                                         onValueChange.invoke(searchTerm)
                                     },
                                 painter = painterResource(id = R.drawable.icon_close),
-                                tint = Color.Unspecified,
+                                tint = textColor,
                                 contentDescription = null,
                             )
                         }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/TextFieldColors.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/TextFieldColors.kt
index 3cae498891..041bea285a 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/TextFieldColors.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/TextFieldColors.kt
@@ -25,6 +25,10 @@ fun mullvadWhiteTextFieldColors(): TextFieldColors =
         focusedTextColor = Color.Black,
         unfocusedTextColor = Color.Gray,
         disabledTextColor = Color.Gray,
+        disabledContainerColor = MaterialTheme.colorScheme.inverseSurface,
+        errorContainerColor = MaterialTheme.colorScheme.inverseSurface,
+        focusedContainerColor = MaterialTheme.colorScheme.inverseSurface,
+        unfocusedContainerColor = MaterialTheme.colorScheme.inverseSurface,
         errorTextColor = Color.Black,
         cursorColor = MaterialTheme.colorScheme.background,
         focusedPlaceholderColor = MaterialTheme.colorScheme.background,
@@ -37,10 +41,6 @@ fun mullvadWhiteTextFieldColors(): TextFieldColors =
         focusedIndicatorColor = MaterialTheme.colorScheme.onPrimary,
         unfocusedIndicatorColor = MaterialTheme.colorScheme.onPrimary,
         errorIndicatorColor = MaterialTheme.colorScheme.error,
-        focusedContainerColor = MaterialTheme.colorScheme.onBackground,
-        unfocusedContainerColor = MaterialTheme.colorScheme.onBackground,
-        errorContainerColor = MaterialTheme.colorScheme.onBackground,
-        disabledContainerColor = MaterialTheme.colorScheme.onBackground
     )
 
 @Preview
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/SettingsViewModel.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/SettingsViewModel.kt
index 21870d99b2..f3aa1b24c7 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/SettingsViewModel.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/SettingsViewModel.kt
@@ -17,10 +17,11 @@ class SettingsViewModel(
     isPlayBuild: Boolean
 ) : ViewModel() {
 
-    private val vmState: StateFlow<SettingsUiState> =
-        combine(deviceRepository.deviceState, appVersionInfoRepository.versionInfo()) {
-                deviceState,
-                versionInfo ->
+    val uiState: StateFlow<SettingsUiState> =
+        combine(
+                deviceRepository.deviceState,
+                appVersionInfoRepository.versionInfo(),
+            ) { deviceState, versionInfo ->
                 SettingsUiState(
                     isLoggedIn = deviceState is DeviceState.LoggedIn,
                     appVersion = versionInfo.currentVersion,
@@ -35,19 +36,7 @@ class SettingsViewModel(
                     appVersion = "",
                     isLoggedIn = false,
                     isSupportedVersion = true,
-                    isPlayBuild
+                    isPlayBuild = isPlayBuild,
                 )
             )
-
-    val uiState =
-        vmState.stateIn(
-            viewModelScope,
-            SharingStarted.WhileSubscribed(),
-            SettingsUiState(
-                appVersion = "",
-                isLoggedIn = false,
-                isSupportedVersion = true,
-                isPlayBuild
-            )
-        )
 }
diff --git a/android/lib/resource/src/main/res/drawable/icon_account.xml b/android/lib/resource/src/main/res/drawable/icon_account.xml
index 7fe5c11f05..c007ae4596 100644
--- a/android/lib/resource/src/main/res/drawable/icon_account.xml
+++ b/android/lib/resource/src/main/res/drawable/icon_account.xml
@@ -6,7 +6,6 @@
     <path android:pathData="M12,24A12,12 0,0 1,3.515 3.515a12,12 0,1 1,16.97 16.97A11.922,11.922 0,0 1,12 24zM12,12.175a12.164,12.164 0,0 0,-2.873 0.348,17.625 17.625,0 0,0 -2.99,1.048A2.85,2.85 0,0 0,5 14.525a2.573,2.573 0,0 0,-0.442 1.512v0.791a1.39,1.39 0,0 0,1.4 1.4h12.1a1.392,1.392 0,0 0,1.4 -1.4v-0.791A2.567,2.567 0,0 0,19 14.525a2.809,2.809 0,0 0,-1.163 -0.954,19.906 19.906,0 0,0 -2.978,-1.036 11.634,11.634 0,0 0,-2.859 -0.36zM12,3.775a3.345,3.345 0,0 0,-3.49 3.491,3.346 3.346,0 0,0 3.49,3.49 3.348,3.348 0,0 0,3.49 -3.49A3.346,3.346 0,0 0,12 3.776z"
           android:strokeWidth="1"
           android:fillColor="#FFFFFF"
-          android:fillAlpha="0.8"
           android:fillType="evenOdd"
           android:strokeColor="#00000000" />
 </vector>
diff --git a/android/lib/resource/src/main/res/drawable/icon_back.xml b/android/lib/resource/src/main/res/drawable/icon_back.xml
index 7b5534c928..15ad00f442 100644
--- a/android/lib/resource/src/main/res/drawable/icon_back.xml
+++ b/android/lib/resource/src/main/res/drawable/icon_back.xml
@@ -6,7 +6,6 @@
     <path android:pathData="M12,24C5.3731,24 -0,18.6269 -0,12C-0,5.3731 5.3731,0 12,0C18.6269,0 24,5.3731 24,12C24,18.6269 18.6269,24 12,24ZM7.0055,11.9979C6.9755,12.2732 7.0685,12.5604 7.2852,12.7774L13.2129,18.7118C13.5936,19.0929 14.2231,19.0908 14.6233,18.7027L14.6942,18.634C15.0925,18.2478 15.1055,17.6196 14.7109,17.218L9.5805,11.9979L14.7109,6.7777C15.1055,6.3762 15.0925,5.7479 14.6942,5.3618L14.6233,5.293C14.2231,4.9049 13.5936,4.9028 13.2129,5.2839L7.2852,11.2184C7.0685,11.4353 6.9755,11.7225 7.0055,11.9979L7.0055,11.9979Z"
           android:strokeWidth="1"
           android:fillColor="#FFFFFF"
-          android:fillAlpha="0.6"
           android:fillType="evenOdd"
           android:strokeColor="#00000000" />
 </vector>
diff --git a/android/lib/resource/src/main/res/drawable/icon_close.xml b/android/lib/resource/src/main/res/drawable/icon_close.xml
index 7de0a4ac04..f00f638dc3 100644
--- a/android/lib/resource/src/main/res/drawable/icon_close.xml
+++ b/android/lib/resource/src/main/res/drawable/icon_close.xml
@@ -4,7 +4,7 @@
         android:height="24dp"
         android:viewportWidth="24.0"
         android:viewportHeight="24.0">
-    <path android:fillColor="#99FFFFFF"
+    <path android:fillColor="#FFFFFFFF"
           android:pathData="
                 M 12,24
                 C 5.37312,24 0,18.62688 0,12
diff --git a/android/lib/resource/src/main/res/drawable/icon_settings.xml b/android/lib/resource/src/main/res/drawable/icon_settings.xml
index 3d670e5124..65de785d70 100644
--- a/android/lib/resource/src/main/res/drawable/icon_settings.xml
+++ b/android/lib/resource/src/main/res/drawable/icon_settings.xml
@@ -6,7 +6,6 @@
     <path android:pathData="M21.2552,12C21.2552,12.408 21.2182,12.792 21.1688,13.176L23.7719,15.156C24.0063,15.336 24.068,15.66 23.9199,15.924L21.4526,20.076C21.3045,20.34 20.9838,20.448 20.7001,20.34L17.6282,19.14C16.9867,19.608 16.2959,20.016 15.5433,20.316L15.0745,23.496C15.0375,23.784 14.7785,24 14.4701,24L9.5354,24C9.227,24 8.9679,23.784 8.9309,23.496L8.4621,20.316C7.7096,20.016 7.0187,19.62 6.3772,19.14L3.3054,20.34C3.034,20.436 2.7009,20.34 2.5529,20.076L0.0855,15.924C-0.0625,15.66 -0.0008,15.336 0.2336,15.156L2.8366,13.176C2.7873,12.792 2.7502,12.396 2.7502,12C2.7502,11.604 2.7873,11.208 2.8366,10.824L0.2336,8.844C-0.0008,8.664 -0.0748,8.34 0.0855,8.076L2.5529,3.924C2.7009,3.66 3.0217,3.552 3.3054,3.66L6.3772,4.86C7.0187,4.392 7.7096,3.984 8.4621,3.684L8.9309,0.504C8.9679,0.216 9.227,0 9.5354,0L14.4701,0C14.7785,0 15.0375,0.216 15.0745,0.504L15.5433,3.684C16.2959,3.984 16.9867,4.38 17.6282,4.86L20.7001,3.66C20.9715,3.564 21.3046,3.66 21.4526,3.924L23.9199,8.076C24.068,8.34 24.0063,8.664 23.7719,8.844L21.1688,10.824C21.2182,11.208 21.2552,11.592 21.2552,12ZM12,17C14.7571,17 17,14.7571 17,12C17,9.2429 14.7571,7 12,7C9.2429,7 7,9.2429 7,12C7,14.7571 9.2429,17 12,17Z"
           android:strokeWidth="1"
           android:fillColor="#FFFFFF"
-          android:fillAlpha="0.8"
           android:fillType="evenOdd"
           android:strokeColor="#00000000" />
 </vector>
diff --git a/android/lib/resource/src/main/res/drawable/icons_more_circle.xml b/android/lib/resource/src/main/res/drawable/icons_more_circle.xml
index 605975ea37..331e12b080 100644
--- a/android/lib/resource/src/main/res/drawable/icons_more_circle.xml
+++ b/android/lib/resource/src/main/res/drawable/icons_more_circle.xml
@@ -3,7 +3,7 @@
         android:height="24dp"
         android:viewportWidth="24.0"
         android:viewportHeight="24.0">
-    <path android:fillAlpha="0.6"
+    <path
           android:fillColor="#FFFFFF"
           android:fillType="evenOdd"
           android:pathData="M12,24A12,12 0,0 1,3.515 3.515a12,12 0,1 1,16.97 16.97A11.922,11.922 0,0 1,12 24zM10.445,16.044L10.445,17.6h3.111v-1.556zM7.333,12.155v1.556h9.333v-1.556zM5,8.267v1.556h14L19,8.267z"
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
index 51879c4a66..88ed41e6ab 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
@@ -9,37 +9,18 @@ import androidx.compose.material3.RippleConfiguration
 import androidx.compose.material3.Shapes
 import androidx.compose.material3.Typography
 import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.staticCompositionLocalOf
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
-import net.mullvad.mullvadvpn.lib.theme.color.MullvadDarkBlue
-import net.mullvad.mullvadvpn.lib.theme.color.MullvadGreen
-import net.mullvad.mullvadvpn.lib.theme.color.MullvadRed
-import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite
-import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite60
-import net.mullvad.mullvadvpn.lib.theme.color.MullvadYellow
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_error
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_onError
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_onPrimary
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_onSurfaceVariant
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_onTertiaryContainer
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_primary
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_secondaryContainer
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceContainer
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceContainerHigh
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceContainerHighest
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceContainerLow
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceContainerLowest
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceTint
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceVariant
-import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_tertiaryContainer
+import net.mullvad.mullvadvpn.lib.theme.color.ColorDarkTokens
+import net.mullvad.mullvadvpn.lib.theme.color.ColorLightTokens
 import net.mullvad.mullvadvpn.lib.theme.dimensions.Dimensions
 import net.mullvad.mullvadvpn.lib.theme.dimensions.defaultDimensions
 import net.mullvad.mullvadvpn.lib.theme.typeface.TypeScale
@@ -70,42 +51,84 @@ private val MullvadTypography =
             )
     )
 
+private val lightColorScheme =
+    lightColorScheme(
+        primary = ColorLightTokens.Primary,
+        onPrimary = ColorLightTokens.OnPrimary,
+        primaryContainer = ColorLightTokens.PrimaryContainer,
+        onPrimaryContainer = ColorLightTokens.OnPrimaryContainer,
+        inversePrimary = ColorLightTokens.InversePrimary,
+        secondary = ColorLightTokens.Secondary,
+        onSecondary = ColorLightTokens.OnSecondary,
+        secondaryContainer = ColorLightTokens.SecondaryContainer,
+        onSecondaryContainer = ColorLightTokens.OnSecondaryContainer,
+        tertiary = ColorLightTokens.Tertiary,
+        onTertiary = ColorLightTokens.OnTertiary,
+        tertiaryContainer = ColorLightTokens.TertiaryContainer,
+        onTertiaryContainer = ColorLightTokens.OnTertiaryContainer,
+        background = ColorLightTokens.Background,
+        onBackground = ColorLightTokens.OnBackground,
+        surface = ColorLightTokens.Surface,
+        onSurface = ColorLightTokens.OnSurface,
+        surfaceVariant = ColorLightTokens.SurfaceVariant,
+        onSurfaceVariant = ColorLightTokens.OnSurfaceVariant,
+        surfaceTint = ColorLightTokens.SurfaceTint,
+        inverseSurface = ColorLightTokens.InverseSurface,
+        inverseOnSurface = ColorLightTokens.InverseOnSurface,
+        error = ColorLightTokens.Error,
+        onError = ColorLightTokens.OnError,
+        errorContainer = ColorLightTokens.ErrorContainer,
+        onErrorContainer = ColorLightTokens.OnErrorContainer,
+        outline = ColorLightTokens.Outline,
+        outlineVariant = ColorLightTokens.OutlineVariant,
+        scrim = ColorLightTokens.Scrim,
+        surfaceBright = ColorLightTokens.SurfaceBright,
+        surfaceContainer = ColorLightTokens.SurfaceContainer,
+        surfaceContainerHigh = ColorLightTokens.SurfaceContainerHigh,
+        surfaceContainerHighest = ColorLightTokens.SurfaceContainerHighest,
+        surfaceContainerLow = ColorLightTokens.SurfaceContainerLow,
+        surfaceContainerLowest = ColorLightTokens.SurfaceContainerLowest,
+        surfaceDim = ColorLightTokens.SurfaceDim,
+    )
+
 private val darkColorScheme =
     darkColorScheme(
-        primary = md_theme_dark_primary,
-        onPrimary = md_theme_dark_onPrimary,
-        // primaryContainer = md_theme_dark_primaryContainer,
-        // onPrimaryContainer = md_theme_dark_onPrimaryContainer,
-        secondary = MullvadDarkBlue,
-        onSecondary = MullvadWhite60,
-        secondaryContainer = md_theme_dark_secondaryContainer,
-        tertiary = MullvadRed,
-        // onTertiary = md_theme_dark_onTertiary,
-        tertiaryContainer = md_theme_dark_tertiaryContainer,
-        onTertiaryContainer = md_theme_dark_onTertiaryContainer,
-        error = md_theme_dark_error,
-        errorContainer = MullvadYellow,
-        onError = md_theme_dark_onError,
-        // onErrorContainer = md_theme_dark_onErrorContainer,
-        background = MullvadDarkBlue,
-        onBackground = MullvadWhite,
-        surface = MullvadGreen,
-        onSurface = MullvadWhite,
-        surfaceVariant = md_theme_dark_surfaceVariant,
-        onSurfaceVariant = md_theme_dark_onSurfaceVariant,
-        // outline = md_theme_dark_outline,
-        // inverseOnSurface = md_theme_dark_inverseOnSurface,
-        inverseSurface = MullvadWhite,
-        inversePrimary = MullvadGreen,
-        // surfaceTint = md_theme_dark_surfaceTint,
-        outlineVariant = Color.Transparent, // Used by divider,
-        // scrim = md_theme_dark_scrim,
-        surfaceContainerHighest = md_theme_dark_surfaceContainerHighest,
-        surfaceContainerHigh = md_theme_dark_surfaceContainerHigh,
-        surfaceContainerLow = md_theme_dark_surfaceContainerLow,
-        surfaceContainerLowest = md_theme_dark_surfaceContainerLowest,
-        surfaceContainer = md_theme_dark_surfaceContainer,
-        surfaceTint = md_theme_dark_surfaceTint
+        primary = ColorDarkTokens.Primary,
+        onPrimary = ColorDarkTokens.OnPrimary,
+        primaryContainer = ColorDarkTokens.PrimaryContainer,
+        onPrimaryContainer = ColorDarkTokens.OnPrimaryContainer,
+        inversePrimary = ColorDarkTokens.InversePrimary,
+        secondary = ColorDarkTokens.Secondary,
+        onSecondary = ColorDarkTokens.OnSecondary,
+        secondaryContainer = ColorDarkTokens.SecondaryContainer,
+        onSecondaryContainer = ColorDarkTokens.OnSecondaryContainer,
+        tertiary = ColorDarkTokens.Tertiary,
+        onTertiary = ColorDarkTokens.OnTertiary,
+        tertiaryContainer = ColorDarkTokens.TertiaryContainer,
+        onTertiaryContainer = ColorDarkTokens.OnTertiaryContainer,
+        background = ColorDarkTokens.Background,
+        onBackground = ColorDarkTokens.OnBackground,
+        surface = ColorDarkTokens.Surface,
+        onSurface = ColorDarkTokens.OnSurface,
+        surfaceVariant = ColorDarkTokens.SurfaceVariant,
+        onSurfaceVariant = ColorDarkTokens.OnSurfaceVariant,
+        surfaceTint = ColorDarkTokens.SurfaceTint,
+        inverseSurface = ColorDarkTokens.InverseSurface,
+        inverseOnSurface = ColorDarkTokens.InverseOnSurface,
+        error = ColorDarkTokens.Error,
+        onError = ColorDarkTokens.OnError,
+        errorContainer = ColorDarkTokens.ErrorContainer,
+        onErrorContainer = ColorDarkTokens.OnErrorContainer,
+        outline = ColorDarkTokens.Outline,
+        outlineVariant = ColorDarkTokens.OutlineVariant,
+        scrim = ColorDarkTokens.Scrim,
+        surfaceBright = ColorDarkTokens.SurfaceBright,
+        surfaceContainer = ColorDarkTokens.SurfaceContainer,
+        surfaceContainerHigh = ColorDarkTokens.SurfaceContainerHigh,
+        surfaceContainerHighest = ColorDarkTokens.SurfaceContainerHighest,
+        surfaceContainerLow = ColorDarkTokens.SurfaceContainerLow,
+        surfaceContainerLowest = ColorDarkTokens.SurfaceContainerLowest,
+        surfaceDim = ColorDarkTokens.SurfaceDim,
     )
 
 val Shapes =
@@ -145,14 +168,13 @@ private val LocalAppDimens = staticCompositionLocalOf { defaultDimensions }
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AppTheme(content: @Composable () -> Unit) {
-    val colors = darkColorScheme
     val typography = MullvadTypography
     // Set dimensions and type scale based on configurations here
     val dimensions = defaultDimensions
 
     ProvideDimens(dimensions = dimensions) {
         MaterialTheme(
-            colorScheme = colors,
+            colorScheme = darkColorScheme,
             shapes = Shapes,
             typography = typography,
             content = {
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt
index 343e41dc1a..1f37088911 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt
@@ -7,34 +7,36 @@ import androidx.compose.material3.MenuItemColors
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 
-internal val MullvadYellow = Color(0xFFFFD524)
-internal val MullvadGreen = Color(0xFF44AD4D)
-internal val MullvadWhite60 = Color(0x99FFFFFF)
-internal val MullvadWhite = Color(0xFFFFFFFF)
-internal val MullvadRed = Color(0xFFE34039)
-internal val MullvadDarkBlue = Color(0xFF192E45)
-
 const val AlphaVisible = 1f
+const val Alpha10 = 0.1f
 const val AlphaDisabled = 0.2f
 const val Alpha20 = 0.2f
 const val AlphaInactive = 0.4f
 const val Alpha40 = 0.4f
-const val AlphaDescription = 0.6f
 const val AlphaDisconnectButton = 0.6f
-const val AlphaChevron = 0.6f
 const val AlphaScrollbar = 0.6f
-const val Alpha60 = 0.6f
-const val AlphaTopBar = 0.8f
 const val AlphaInvisible = 0f
 
 // Custom colors, they only link to normal material 3 colors for now
-val ColorScheme.variant: Color
-    @Composable get() = MaterialTheme.colorScheme.surface
-val ColorScheme.onVariant: Color
-    @Composable get() = MaterialTheme.colorScheme.onSurface
-
 val ColorScheme.selected: Color
-    @Composable get() = MaterialTheme.colorScheme.surface
+    @Composable get() = MaterialTheme.colorScheme.tertiary
+
+val ColorScheme.onSelected: Color
+    @Composable get() = MaterialTheme.colorScheme.onTertiary
+
+// Static defined waring color
+val ColorScheme.warning: Color
+    @Composable get() = PaletteTokens.Yellow500
+
+// Disabled colors for buttons
+val ColorScheme.tertiaryDisabled: Color
+    @Composable get() = PaletteTokens.DisabledContainerTiertary
+
+val ColorScheme.primaryDisabled: Color
+    @Composable get() = PaletteTokens.DisabledContainerPrimary
+
+val ColorScheme.errorDisabled: Color
+    @Composable get() = PaletteTokens.DisabledContainerDestructive
 
 val menuItemColors: MenuItemColors
     @Composable
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorDarkTokens.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorDarkTokens.kt
new file mode 100644
index 0000000000..6af43a42d2
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorDarkTokens.kt
@@ -0,0 +1,56 @@
+package net.mullvad.mullvadvpn.lib.theme.color
+
+import androidx.compose.ui.graphics.Color
+
+internal object ColorDarkTokens {
+    val Background = PaletteTokens.DarkBlue500 // Used by login screen and text fields
+    val Error = PaletteTokens.Red500 // General error color
+    val ErrorContainer = PaletteTokens.Red500 // Currently not used directly
+    val InverseOnSurface = PaletteTokens.White // Currently not used directly
+    val InversePrimary = PaletteTokens.Green500 // Currently not used directly (old selected color)
+    val InverseSurface = PaletteTokens.White // Used by text fields
+    val OnBackground = PaletteTokens.White // Used by some text on the login screen
+    val OnError = PaletteTokens.White // Text that is displayed on error
+    val OnErrorContainer = PaletteTokens.White // Currently not used directly
+    val OnPrimary = PaletteTokens.White // Text that is displayed on primary (f.e. toolbar)
+    val OnPrimaryContainer = PaletteTokens.White // Currently not used directly
+    val OnPrimaryFixed = PaletteTokens.Blue50 // Not in material 3 library yet
+    val OnPrimaryFixedVariant = PaletteTokens.Blue50 // Not in material 3 library yet
+    val OnSecondary = PaletteTokens.White // Used by text fields
+    val OnSecondaryContainer = OpacityTokens.WhiteOnDarkBlue60 // Currently not used directly
+    val OnSecondaryFixed = PaletteTokens.Green50 // Not in material 3 library yet
+    val OnSecondaryFixedVariant = PaletteTokens.Green50 // Not in material 3 library yet
+    val OnSurface = PaletteTokens.White // Text that is displayed on the background
+    val OnSurfaceVariant = OpacityTokens.WhiteOnDarkBlue60 // Description texts
+    val OnTertiary = PaletteTokens.White // Text that is displayed on selected and connect
+    val OnTertiaryContainer =
+        Color(0xffacb4bc) // Used by text fields, will be replaced in the future
+    val OnTertiaryFixed = PaletteTokens.Yellow50 // Not in material 3 library yet
+    val OnTertiaryFixedVariant = PaletteTokens.Yellow50 // Not in material 3 library yet
+    val Outline = PaletteTokens.Black // Currently not used directly
+    val OutlineVariant = PaletteTokens.DarkBlue500 // Currently not used directly
+    val Primary = PaletteTokens.Blue500 // Toolbar and top level cells
+    val PrimaryContainer = PaletteTokens.Black // Currently not used directly
+    val PrimaryFixed = PaletteTokens.Blue100 // Not in material 3 library yet
+    val PrimaryFixedDim = PaletteTokens.Blue100 // Not in material 3 library yet
+    val Scrim = PaletteTokens.Black // Overlay used by bottom sheet
+    val Secondary = PaletteTokens.AlertBlue500 // Currently not used directly
+    val SecondaryContainer = PaletteTokens.AlertBlue500 // Currently not used directly
+    val SecondaryFixed = PaletteTokens.Green100 // Not in material 3 library yet
+    val SecondaryFixedDim = PaletteTokens.Green100 // Not in material 3 library yet
+    val Surface = PaletteTokens.DarkBlue500 // Background
+    val SurfaceBright = PaletteTokens.DarkBlue700 // Currently not used directly
+    val SurfaceContainer =
+        PaletteTokens.AlertBlue500 // Background for in-app notification, bottom sheet
+    val SurfaceContainerHighest = OpacityTokens.BlueOnDarkBlue60 // Second level cell / Sub cell
+    val SurfaceContainerHigh = OpacityTokens.BlueOnDarkBlue40 // Third level cell
+    val SurfaceContainerLow = OpacityTokens.BlueOnDarkBlue20 // Fourth level cell
+    val SurfaceContainerLowest = OpacityTokens.BlueOnDarkBlue10 // Fifth level cell
+    val SurfaceDim = PaletteTokens.Black // Currently not used directly
+    val SurfaceTint = Primary // Currently not used directly
+    val SurfaceVariant = PaletteTokens.DarkBlue500 // Currently not used directly
+    val Tertiary = PaletteTokens.Green500 // Connected and selected color
+    val TertiaryContainer = OpacityTokens.WhiteOnDarkBlue10 // Used by text color
+    val TertiaryFixed = PaletteTokens.Yellow600 // Not in material 3 library yet
+    val TertiaryFixedDim = PaletteTokens.Yellow500 // Not in material 3 library yet
+}
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorLightTokens.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorLightTokens.kt
new file mode 100644
index 0000000000..e16d6fac56
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorLightTokens.kt
@@ -0,0 +1,53 @@
+package net.mullvad.mullvadvpn.lib.theme.color
+
+// This is experimental and currently not used
+internal object ColorLightTokens {
+    val Background = PaletteTokens.DarkBlue100
+    val Error = PaletteTokens.Red600
+    val ErrorContainer = PaletteTokens.Red100
+    val InverseOnSurface = PaletteTokens.DarkBlue100
+    val InversePrimary = PaletteTokens.Blue200
+    val InverseSurface = PaletteTokens.DarkBlue800
+    val OnBackground = PaletteTokens.DarkBlue900
+    val OnError = PaletteTokens.Red900
+    val OnErrorContainer = PaletteTokens.Red900
+    val OnPrimary = PaletteTokens.Blue900
+    val OnPrimaryContainer = PaletteTokens.Blue900
+    val OnPrimaryFixed = PaletteTokens.Blue900
+    val OnPrimaryFixedVariant = PaletteTokens.Blue700
+    val OnSecondary = PaletteTokens.Green900
+    val OnSecondaryContainer = PaletteTokens.Green900
+    val OnSecondaryFixed = PaletteTokens.Green900
+    val OnSecondaryFixedVariant = PaletteTokens.Green700
+    val OnSurface = PaletteTokens.DarkBlue900
+    val OnSurfaceVariant = PaletteTokens.DarkBlue700
+    val OnTertiary = PaletteTokens.Yellow900
+    val OnTertiaryContainer = PaletteTokens.Yellow900
+    val OnTertiaryFixed = PaletteTokens.Yellow900
+    val OnTertiaryFixedVariant = PaletteTokens.Yellow700
+    val Outline = PaletteTokens.DarkBlue500
+    val OutlineVariant = PaletteTokens.DarkBlue200
+    val Primary = PaletteTokens.Blue600
+    val PrimaryContainer = PaletteTokens.Blue100
+    val PrimaryFixed = PaletteTokens.Blue100
+    val PrimaryFixedDim = PaletteTokens.Blue200
+    val Scrim = PaletteTokens.DarkBlue900
+    val Secondary = PaletteTokens.Green600
+    val SecondaryContainer = PaletteTokens.Green100
+    val SecondaryFixed = PaletteTokens.Green100
+    val SecondaryFixedDim = PaletteTokens.Green200
+    val Surface = PaletteTokens.DarkBlue100
+    val SurfaceBright = PaletteTokens.DarkBlue100
+    val SurfaceContainer = PaletteTokens.DarkBlue900
+    val SurfaceContainerHighest = OpacityTokens.WhiteOnBlue20
+    val SurfaceContainerHigh = OpacityTokens.WhiteOnBlue40
+    val SurfaceContainerLow = OpacityTokens.WhiteOnBlue50
+    val SurfaceContainerLowest = OpacityTokens.WhiteOnBlue60
+    val SurfaceDim = PaletteTokens.DarkBlue200
+    val SurfaceTint = Primary
+    val SurfaceVariant = PaletteTokens.DarkBlue100
+    val Tertiary = PaletteTokens.Yellow600
+    val TertiaryContainer = PaletteTokens.Yellow100
+    val TertiaryFixed = PaletteTokens.Yellow100
+    val TertiaryFixedDim = PaletteTokens.Yellow200
+}
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorTokens.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorTokens.kt
deleted file mode 100644
index 1915cc911a..0000000000
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorTokens.kt
+++ /dev/null
@@ -1,71 +0,0 @@
-package net.mullvad.mullvadvpn.lib.theme.color
-
-import androidx.compose.ui.graphics.Color
-
-internal val md_theme_light_primary = Color(0xFF0561A3)
-internal val md_theme_light_onPrimary = Color(0xFFFFFFFF)
-internal val md_theme_light_primaryContainer = Color(0xFFD1E4FF)
-internal val md_theme_light_onPrimaryContainer = Color(0xFF001D36)
-internal val md_theme_light_secondary = Color(0xFF006E1F)
-internal val md_theme_light_onSecondary = Color(0xFFFFFFFF)
-internal val md_theme_light_secondaryContainer = Color(0xFF8FFA8F)
-internal val md_theme_light_onSecondaryContainer = Color(0xFF002204)
-internal val md_theme_light_tertiary = Color(0xFF845400)
-internal val md_theme_light_onTertiary = Color(0xFFFFFFFF)
-internal val md_theme_light_tertiaryContainer = Color(0xFFFFDDB5)
-internal val md_theme_light_onTertiaryContainer = Color(0xFF2A1800)
-internal val md_theme_light_error = Color(0xFFBA1A1A)
-internal val md_theme_light_errorContainer = Color(0xFFFFDAD6)
-internal val md_theme_light_onError = Color(0xFFFFFFFF)
-internal val md_theme_light_onErrorContainer = Color(0xFF410002)
-internal val md_theme_light_background = Color(0xFFFDFBFF)
-internal val md_theme_light_onBackground = Color(0xFF001B3D)
-internal val md_theme_light_surface = Color(0xFFFDFBFF)
-internal val md_theme_light_onSurface = Color(0xFF001B3D)
-internal val md_theme_light_surfaceVariant = Color(0xFFDFE2EB)
-internal val md_theme_light_onSurfaceVariant = Color(0xFF43474E)
-internal val md_theme_light_outline = Color(0xFF73777F)
-internal val md_theme_light_inverseOnSurface = Color(0xFFECF0FF)
-internal val md_theme_light_inverseSurface = Color(0xFF003062)
-internal val md_theme_light_inversePrimary = Color(0xFF9FCAFF)
-internal val md_theme_light_surfaceTint = Color(0xFF0561A3)
-internal val md_theme_light_outlineVariant = Color(0xFFC3C6CF)
-internal val md_theme_light_scrim = Color(0xFFFFD524) // Helmet Yellow
-
-internal val md_theme_dark_primary = Color(0xFF294D73) // MullvadBlue
-internal val md_theme_dark_onPrimary = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_primaryContainer = Color(0xFF1C344E) // Sub-container
-internal val md_theme_dark_onPrimaryContainer = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_secondary = Color(0xFF44AD4D) // MullvadGreen
-internal val md_theme_dark_onSecondary = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_secondaryContainer =
-    Color(0xFF1c344e) // MullvadBlue Alpha 20 composite over MullvadDarkBlue
-internal val md_theme_dark_onSecondaryContainer = Color(0xFFD9EEDB) // Text in titlebar
-internal val md_theme_dark_tertiary = Color(0xFF99454F) // Disconnect button
-internal val md_theme_dark_onTertiary = Color(0xFFFFFFFF) // MullvadWhite/Text on disconnect button
-internal val md_theme_dark_tertiaryContainer =
-    Color(0xff304358) // MullvadWhite Alpha 10 composite over MullvadDarkBlue
-internal val md_theme_dark_onTertiaryContainer =
-    Color(0xffacb4bc) // MullvadWhite Alpha 60 composite over tertiary container
-internal val md_theme_dark_error = Color(0xFFE34039) // MullvadRed
-internal val md_theme_dark_errorContainer = Color(0xFFE34039) // MullvadRed //Duplicate
-internal val md_theme_dark_onError = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6) // Generated
-internal val md_theme_dark_background = Color(0xFF192E45) // MullvadDarkBlue //Duplicate
-internal val md_theme_dark_onBackground = Color(0xFFFFFFFF) // MullvadWhite //Duplicate
-internal val md_theme_dark_surface = Color(0xFF192E45) // MullvadDarkBlue
-internal val md_theme_dark_onSurface = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_surfaceVariant = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_onSurfaceVariant = Color(0xFF294D73) // MullvadBlue
-internal val md_theme_dark_outline = Color(0xFF8D9199) // Generated
-internal val md_theme_dark_inverseOnSurface = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_inverseSurface = Color(0xFFFFFFFF) // MullvadWhite
-internal val md_theme_dark_inversePrimary = Color(0xFF0561A3) // Generated
-internal val md_theme_dark_surfaceTint = Color(0xFF233953) // Custom list disabled
-internal val md_theme_dark_outlineVariant = Color(0xFF43474E) // Generated
-internal val md_theme_dark_scrim = Color(0xFF000000) // Generated
-internal val md_theme_dark_surfaceContainerHighest = Color(0xFF234161) // Relay list depth 0
-internal val md_theme_dark_surfaceContainerHigh = Color(0xFF1F3A57) // Relay list depth 1
-internal val md_theme_dark_surfaceContainerLow = Color(0xFF1C344E) // Relay list depth 2
-internal val md_theme_dark_surfaceContainerLowest = Color(0xFF1B314A) // Relay list depth 3
-internal val md_theme_dark_surfaceContainer = Color(0xFF192638) // Alert Blue
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/OpacityTokens.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/OpacityTokens.kt
new file mode 100644
index 0000000000..5f3766e852
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/OpacityTokens.kt
@@ -0,0 +1,38 @@
+package net.mullvad.mullvadvpn.lib.theme.color
+
+import androidx.compose.ui.graphics.Color
+
+internal object OpacityTokens {
+    val BlueOnDarkBlue100 = Color(0xFF294d73)
+    val BlueOnDarkBlue90 = Color(0xFF274a6e)
+    val BlueOnDarkBlue80 = Color(0xFF26476a)
+    val BlueOnDarkBlue70 = Color(0xFF244465)
+    val BlueOnDarkBlue60 = Color(0xFF234161)
+    val BlueOnDarkBlue50 = Color(0xFF213e5c)
+    val BlueOnDarkBlue40 = Color(0xFF1f3a57)
+    val BlueOnDarkBlue30 = Color(0xFF1e3753)
+    val BlueOnDarkBlue20 = Color(0xFF1c344e)
+    val BlueOnDarkBlue10 = Color(0xFF1b314a)
+
+    val WhiteOnDarkBlue100 = Color(0xFFFFFFFF)
+    val WhiteOnDarkBlue90 = Color(0xFFE8EAEC)
+    val WhiteOnDarkBlue80 = Color(0xFFD1D5DA)
+    val WhiteOnDarkBlue70 = Color(0xFFBAC0C7)
+    val WhiteOnDarkBlue60 = Color(0xFFA3ABB5)
+    val WhiteOnDarkBlue50 = Color(0xFF8C96A2)
+    val WhiteOnDarkBlue40 = Color(0xFF75828F)
+    val WhiteOnDarkBlue30 = Color(0xFF5E6D7D)
+    val WhiteOnDarkBlue20 = Color(0xFF47586A)
+    val WhiteOnDarkBlue10 = Color(0xFF304358)
+
+    val WhiteOnBlue100 = Color(0xFFFFFFFF)
+    val WhiteOnBlue90 = Color(0xFFEAEDF1)
+    val WhiteOnBlue80 = Color(0xFFD4DBE3)
+    val WhiteOnBlue70 = Color(0xFFBFCAD5)
+    val WhiteOnBlue60 = Color(0xFFA9B8C7)
+    val WhiteOnBlue50 = Color(0xFF94A6B9)
+    val WhiteOnBlue40 = Color(0xFF7F94AB)
+    val WhiteOnBlue30 = Color(0xFF69829D)
+    val WhiteOnBlue20 = Color(0xFF54718F)
+    val WhiteOnBlue10 = Color(0xFF3E5F81)
+}
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/PaletteTokens.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/PaletteTokens.kt
new file mode 100644
index 0000000000..763121ec4e
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/PaletteTokens.kt
@@ -0,0 +1,88 @@
+package net.mullvad.mullvadvpn.lib.theme.color
+
+import androidx.compose.ui.graphics.Color
+
+internal object PaletteTokens {
+    // Dark blue
+    val DarkBlue50 = Color(0xFFE8EAEC)
+    val DarkBlue100 = Color(0xFFB8BEC5)
+    val DarkBlue200 = Color(0xFF959FA9)
+    val DarkBlue300 = Color(0xFF657382)
+    val DarkBlue400 = Color(0xFF47586A)
+    val DarkBlue500 = Color(0xFF192E45) // Base color
+    val DarkBlue600 = Color(0xFF172A3F)
+    val DarkBlue700 = Color(0xFF122131)
+    val DarkBlue800 = Color(0xFF0E1926)
+    val DarkBlue900 = Color(0xFF0B131D)
+
+    // Blue
+    val Blue50 = Color(0xFFEAEDF1)
+    val Blue100 = Color(0xFFBDC8D4)
+    val Blue200 = Color(0xFF9DADBF)
+    val Blue300 = Color(0xFF7088A1)
+    val Blue400 = Color(0xFF54718F)
+    val Blue500 = Color(0xFF294D73) // Base color
+    val Blue600 = Color(0xFF254669)
+    val Blue700 = Color(0xFF1D3752)
+    val Blue800 = Color(0xFF172A3F)
+    val Blue900 = Color(0xFF112030)
+
+    // Red
+    val Red50 = Color(0xFFFCECEB)
+    val Red100 = Color(0xFFF6C4C2)
+    val Red200 = Color(0xFFF2A7A4)
+    val Red300 = Color(0xFFEC7F7A)
+    val Red400 = Color(0xFFE96661)
+    val Red500 = Color(0xFFE34039) // Base color
+    val Red600 = Color(0xFFCF3A34)
+    val Red700 = Color(0xFFA12D28)
+    val Red800 = Color(0xFF7D231F)
+    val Red900 = Color(0xFF5F1B18)
+
+    // Yellow
+    val Yellow50 = Color(0xFFFFFBEF)
+    val Yellow100 = Color(0xFFFFF1CA)
+    val Yellow200 = Color(0xFFFFEAB0)
+    val Yellow300 = Color(0xFFFFE18C)
+    val Yellow400 = Color(0xFFFFDB76)
+    val Yellow500 = Color(0xFFFFD254) // Base color
+    val Yellow600 = Color(0xFFE8BF4C)
+    val Yellow700 = Color(0xFFB5953C)
+    val Yellow800 = Color(0xFF8C742E)
+    val Yellow900 = Color(0xFF6B5823)
+
+    // Green
+    val Green50 = Color(0xFFECF7ED)
+    val Green100 = Color(0xFFC5E6C8)
+    val Green200 = Color(0xFFA9D9AD)
+    val Green300 = Color(0xFF82C888)
+    val Green400 = Color(0xFF69BD71)
+    val Green500 = Color(0xFF44AD4D) // Base color
+    val Green600 = Color(0xFF3E9D46)
+    val Green700 = Color(0xFF307B37)
+    val Green800 = Color(0xFF255F2A)
+    val Green900 = Color(0xFF1D4920)
+
+    // Alert Blue
+    val AlertBlue50 = Color(0xFFE8E9EB)
+    val AlertBlue100 = Color(0xFFB8BCC1)
+    val AlertBlue200 = Color(0xFF959BA3)
+    val AlertBlue300 = Color(0xFF656E7A)
+    val AlertBlue400 = Color(0xFF475160)
+    val AlertBlue500 = Color(0xFF192638) // Base color
+    val AlertBlue600 = Color(0xFF172333)
+    val AlertBlue700 = Color(0xFF121B28)
+    val AlertBlue800 = Color(0xFF0E151F)
+    val AlertBlue900 = Color(0xFF0B1018)
+
+    // White
+    val White = Color(0xFFFFFFFF)
+
+    // Black
+    val Black = Color(0xFF000000)
+
+    // Disabled container colors
+    val DisabledContainerPrimary = Color(0xFF1F3A57)
+    val DisabledContainerTiertary = Color(0xFF2A6148)
+    val DisabledContainerDestructive = Color(0xFF6A3540)
+}