diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index 8b20969..4bff0a1 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -1,5 +1,6 @@
 <component name="ProjectCodeStyleConfiguration">
   <code_scheme name="Project" version="173">
+    <option name="RIGHT_MARGIN" value="140" />
     <JetCodeStyleSettings>
       <option name="PACKAGES_TO_USE_STAR_IMPORTS">
         <value>
diff --git a/.idea/compiler.xml b/.idea/compiler.xml
index c32b392..9d08854 100644
--- a/.idea/compiler.xml
+++ b/.idea/compiler.xml
@@ -2,6 +2,8 @@
 <project version="4">
   <component name="CompilerConfiguration">
     <bytecodeTargetLevel target="20">
+      <module name="CleanMeter.core.designsystem.main" target="22" />
+      <module name="CleanMeter.core.designsystem.test" target="22" />
       <module name="CleanMeter.target.app.main" target="22" />
       <module name="CleanMeter.target.app.test" target="22" />
       <module name="CleanMeter.target.server.main" target="22" />
diff --git a/core/design-system/build.gradle.kts b/core/design-system/build.gradle.kts
new file mode 100644
index 0000000..38c4671
--- /dev/null
+++ b/core/design-system/build.gradle.kts
@@ -0,0 +1,9 @@
+plugins {
+    kotlin("jvm")
+    alias(libs.plugins.jetbrainsCompose)
+    alias(libs.plugins.compose.compiler)
+}
+
+dependencies {
+    implementation(compose.desktop.currentOs)
+}
\ No newline at end of file
diff --git a/core/design-system/src/main/kotlin/app/cleanmeter/core/designsystem/ColorScheme.kt b/core/design-system/src/main/kotlin/app/cleanmeter/core/designsystem/ColorScheme.kt
new file mode 100644
index 0000000..06343fd
--- /dev/null
+++ b/core/design-system/src/main/kotlin/app/cleanmeter/core/designsystem/ColorScheme.kt
@@ -0,0 +1,226 @@
+package app.cleanmeter.core.designsystem
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+
+@Immutable
+data class ColorScheme(
+    val background: Background,
+    val text: Text,
+    val border: Border,
+    val icon: Icon,
+    val gradient: Gradient,
+) {
+    @Immutable
+    data class Background(
+        val surface: Color,
+        val surfaceRaised: Color,
+        val surfaceOverlay: Color,
+        val surfaceSunken: Color,
+        val surfaceSunkenSubtle: Color,
+
+        val brand: Color,
+        val brandSubtle: Color,
+        val brandHover: Color,
+        val brandActive: Color,
+
+        val success: Color,
+        val successSubtle: Color,
+        val successHover: Color,
+        val successActive: Color,
+
+        val warning: Color,
+        val warningSubtle: Color,
+        val warningHover: Color,
+        val warningActive: Color,
+
+        val danger: Color,
+        val dangerSubtle: Color,
+        val dangerHover: Color,
+        val dangerActive: Color,
+    )
+
+    @Immutable
+    data class Text(
+        val heading: Color,
+        val subHeading: Color,
+
+        val paragraph1: Color,
+        val paragraph2: Color,
+
+        val disabled: Color,
+        val disabledLighter: Color,
+
+        val inverse: Color,
+        val inverseSubtler: Color,
+
+        val success: Color,
+        val danger: Color,
+        val warning: Color,
+    )
+
+    @Immutable
+    data class Border(
+        val subtler: Color,
+        val inverse: Color,
+        val subtle: Color,
+        val bold: Color,
+        val bolder: Color,
+
+        val brand: Color,
+        val brandSubtle: Color,
+
+        val success: Color,
+        val successDarker: Color,
+        val danger: Color,
+        val warning: Color,
+    )
+
+    @Immutable
+    data class Icon(
+        val bolder: Color,
+        val bolderHover: Color,
+        val bolderActive: Color,
+        val bold: Color,
+        val boldHover: Color,
+        val boldActive: Color,
+
+        val subtler: Color,
+        val subtlerHover: Color,
+        val subtlerActive: Color,
+        val subtle: Color,
+        val subtleHover: Color,
+        val subtleActive: Color,
+
+        val disabled: Color,
+        val inverse: Color,
+        val inverseHover: Color,
+        val inverseActive: Color,
+
+        val success: Color,
+        val danger: Color,
+        val warning: Color,
+    )
+
+    @Immutable
+    data class Gradient(
+        val gradient1: Brush
+    )
+}
+
+internal val defaultColorScheme = ColorScheme(
+    background = ColorScheme.Background(
+        surface = Primitives.Gray.Gray100,
+        surfaceRaised = Primitives.Plain.PlainWhite,
+        surfaceOverlay = Primitives.Plain.PlainWhite,
+        surfaceSunken = Primitives.Gray.Gray300,
+        surfaceSunkenSubtle = Primitives.Gray.Gray50,
+        brand = Primitives.Gray.Gray950,
+        brandSubtle = Primitives.Gray.Gray900,
+        brandHover = Primitives.Gray.Gray500,
+        brandActive = Primitives.Gray.Gray600,
+        success = Primitives.Green.Green700,
+        successSubtle = Primitives.Green.Green50,
+        successHover = Primitives.Green.Green500,
+        successActive = Primitives.Green.Green600,
+        warning = Primitives.Yellow.Yellow700,
+        warningSubtle = Primitives.Yellow.Yellow50,
+        warningHover = Primitives.Yellow.Yellow300,
+        warningActive = Primitives.Yellow.Yellow400,
+        danger = Primitives.Red.Red700,
+        dangerSubtle = Primitives.Red.Red50,
+        dangerHover = Primitives.Red.Red500,
+        dangerActive = Primitives.Red.Red600,
+    ),
+    text = ColorScheme.Text(
+        heading = Primitives.Gray.Gray950,
+        subHeading = Primitives.Gray.Gray800,
+        paragraph1 = Primitives.Gray.Gray600,
+        paragraph2 = Primitives.Gray.Gray500,
+        disabled = Primitives.Gray.Gray400,
+        disabledLighter = Primitives.Gray.Gray300,
+        inverse = Primitives.Plain.PlainWhite,
+        inverseSubtler = Primitives.Gray.Gray50,
+        success = Primitives.Green.Green900,
+        danger = Primitives.Red.Red900,
+        warning = Primitives.Yellow.Yellow900
+    ),
+    border = ColorScheme.Border(
+        subtler = Primitives.Gray.Gray100,
+        inverse = Primitives.Plain.PlainWhite,
+        subtle = Primitives.Gray.Gray200,
+        bold = Primitives.Gray.Gray300.copy(alpha = 0.5f),
+        bolder = Primitives.Gray.Gray300,
+        brand = Primitives.Gray.Gray950,
+        brandSubtle = Primitives.Gray.Gray950.copy(alpha = 0.1f),
+        success = Primitives.Green.Green600,
+        successDarker = Primitives.Green.Green700,
+        danger = Primitives.Red.Red600,
+        warning = Primitives.Yellow.Yellow600,
+    ),
+    icon = ColorScheme.Icon(
+        bolder = Primitives.Gray.Gray950,
+        bolderHover = Primitives.Gray.Gray500,
+        bolderActive = Primitives.Gray.Gray600,
+        bold = Primitives.Gray.Gray800,
+        boldHover = Primitives.Gray.Gray500,
+        boldActive = Primitives.Gray.Gray600,
+        subtler = Primitives.Gray.Gray600,
+        subtlerHover = Primitives.Gray.Gray400,
+        subtlerActive = Primitives.Gray.Gray500,
+        subtle = Primitives.Gray.Gray500,
+        subtleHover = Primitives.Gray.Gray300,
+        subtleActive = Primitives.Gray.Gray400,
+        disabled = Primitives.Gray.Gray400,
+        inverse = Primitives.Plain.PlainWhite,
+        inverseHover = Primitives.Gray.Gray50,
+        inverseActive = Primitives.Gray.Gray200,
+        success = Primitives.Green.Green500,
+        danger = Primitives.Red.Red500,
+        warning = Primitives.Yellow.Yellow300,
+    ),
+    gradient = ColorScheme.Gradient(
+        gradient1 = Brush.verticalGradient(
+            listOf(Color(0xFF404040), Color(0xFF303030))
+        )
+    )
+)
+
+internal val darkColorScheme = defaultColorScheme.copy(
+    background = defaultColorScheme.background.copy(
+        surface = Primitives.Gray.Gray950,
+        surfaceRaised = Primitives.Gray.Gray800,
+        surfaceSunken = Primitives.Gray.Gray600,
+        surfaceSunkenSubtle = Primitives.Gray.Gray900,
+        brand = Primitives.Gray.Gray25,
+        brandSubtle = Primitives.Gray.Gray200,
+        brandHover = Primitives.Gray.Gray100,
+        brandActive = Primitives.Gray.Gray200,
+        success = Primitives.Green.Green100,
+        successSubtle = Primitives.Green.Green400,
+    ),
+    text = defaultColorScheme.text.copy(
+        heading = Primitives.Gray.Gray25,
+        subHeading = Primitives.Gray.Gray600,
+        paragraph1 = Primitives.Gray.Gray500,
+        paragraph2 = Primitives.Gray.Gray600,
+        disabled = Primitives.Gray.Gray600,
+        inverse = Primitives.Gray.Gray950,
+        inverseSubtler = Primitives.Gray.Gray300,
+    ),
+    border = defaultColorScheme.border.copy(
+        subtle = Primitives.Gray.Gray700,
+        bold = Primitives.Gray.Gray300.copy(alpha = 0.3f), // todo correct primitive is #5F6169
+        bolder = Primitives.Gray.Gray600,
+        brand = Primitives.Gray.Gray25,
+    ),
+    icon = defaultColorScheme.icon.copy(
+        inverse = Primitives.Gray.Gray950,
+    ),
+    gradient = defaultColorScheme.gradient.copy(
+        gradient1 = Brush.verticalGradient(
+            listOf(Color(0xFFF0F1F1), Color(0xFFECECED))
+        )
+    )
+)
\ No newline at end of file
diff --git a/core/design-system/src/main/kotlin/app/cleanmeter/core/designsystem/Primitives.kt b/core/design-system/src/main/kotlin/app/cleanmeter/core/designsystem/Primitives.kt
new file mode 100644
index 0000000..a5b5c99
--- /dev/null
+++ b/core/design-system/src/main/kotlin/app/cleanmeter/core/designsystem/Primitives.kt
@@ -0,0 +1,102 @@
+package app.cleanmeter.core.designsystem
+
+import androidx.compose.ui.graphics.Color
+
+object Primitives {
+    object Gray {
+        val Gray25 = Color(0xFFfafafa)
+        val Gray50 = Color(0xFFf5f5f6)
+        val Gray100 = Color(0xFFf0f1f1)
+        val Gray200 = Color(0xFFececed)
+        val Gray300 = Color(0xFFcecfd2)
+        val Gray400 = Color(0xFF94969c)
+        val Gray500 = Color(0xFF85888e)
+        val Gray600 = Color(0xFF61646c)
+        val Gray700 = Color(0xFF333741)
+        val Gray800 = Color(0xFF1f242f)
+        val Gray900 = Color(0xFF161b26)
+        val Gray950 = Color(0xFF0c111d)
+
+    }
+
+    object Red {
+        val Red25 = Color(0xFFfffbfa)
+        val Red50 = Color(0xFFfef3f2)
+        val Red100 = Color(0xFFfee4e2)
+        val Red200 = Color(0xFFfecdca)
+        val Red300 = Color(0xFFfda29b)
+        val Red400 = Color(0xFFf97066)
+        val Red500 = Color(0xFFf04438)
+        val Red600 = Color(0xFFd92d20)
+        val Red700 = Color(0xFFb42318)
+        val Red800 = Color(0xFF912018)
+        val Red900 = Color(0xFF7a271a)
+        val Red950 = Color(0xFF55160c)
+
+    }
+
+    object Yellow {
+        val Yellow25 = Color(0xFFfffcf5)
+        val Yellow50 = Color(0xFFfffaeb)
+        val Yellow100 = Color(0xFFfef0c7)
+        val Yellow200 = Color(0xFFfedf89)
+        val Yellow300 = Color(0xFFfec84b)
+        val Yellow400 = Color(0xFFfdb022)
+        val Yellow500 = Color(0xFFf79009)
+        val Yellow600 = Color(0xFFdc6803)
+        val Yellow700 = Color(0xFFb54708)
+        val Yellow800 = Color(0xFF93370d)
+        val Yellow900 = Color(0xFF7a2e0e)
+        val Yellow950 = Color(0xFF4e1d09)
+    }
+
+    object Green {
+        val Green25 = Color(0xFFf6fef9)
+        val Green50 = Color(0xFFecfdf3)
+        val Green100 = Color(0xFFdcfae6)
+        val Green200 = Color(0xFFabefc6)
+        val Green300 = Color(0xFF75e0a7)
+        val Green400 = Color(0xFF47cd89)
+        val Green500 = Color(0xFF17b26a)
+        val Green600 = Color(0xFF079455)
+        val Green700 = Color(0xFF067647)
+        val Green800 = Color(0xFF085d3a)
+        val Green900 = Color(0xFF074d31)
+        val Green950 = Color(0xFF053321)
+
+    }
+
+    object Emerald {
+        val Emerald25 = Color(0xFFf6fefc)
+        val Emerald50 = Color(0xFFf0fdf9)
+        val Emerald100 = Color(0xFFccfbef)
+        val Emerald200 = Color(0xFF99f6e0)
+        val Emerald300 = Color(0xFF5fe9d0)
+        val Emerald400 = Color(0xFF2ed3b7)
+        val Emerald500 = Color(0xFF15b79e)
+        val Emerald600 = Color(0xFF0e9384)
+        val Emerald700 = Color(0xFF107569)
+        val Emerald800 = Color(0xFF125d56)
+        val Emerald900 = Color(0xFF134e48)
+        val Emerald950 = Color(0xFF0a2926)
+    }
+
+    object Purple {
+        val Purple25 = Color(0xFFfbfaff)
+        val Purple50 = Color(0xFFf5f3ff)
+        val Purple100 = Color(0xFFece9fe)
+        val Purple200 = Color(0xFFddd6fe)
+        val Purple300 = Color(0xFFc3b5fd)
+        val Purple400 = Color(0xFFa48afb)
+        val Purple500 = Color(0xFF875bf7)
+        val Purple600 = Color(0xFF7839ee)
+        val Purple700 = Color(0xFF6927da)
+        val Purple800 = Color(0xFF5720b7)
+        val Purple900 = Color(0xFF491c96)
+        val Purple950 = Color(0xFF2e125e)
+    }
+
+    object Plain {
+        val PlainWhite = Color(0xFFffffff)
+    }
+}
\ No newline at end of file
diff --git a/core/design-system/src/main/kotlin/app/cleanmeter/core/designsystem/Theme.kt b/core/design-system/src/main/kotlin/app/cleanmeter/core/designsystem/Theme.kt
new file mode 100644
index 0000000..2e28fd5
--- /dev/null
+++ b/core/design-system/src/main/kotlin/app/cleanmeter/core/designsystem/Theme.kt
@@ -0,0 +1,14 @@
+package app.cleanmeter.core.designsystem
+
+import androidx.compose.runtime.staticCompositionLocalOf
+import app.cleanmeter.core.designsystem.Theme.Light
+
+object Theme {
+
+    val Light: ColorScheme = defaultColorScheme
+    val Dark: ColorScheme = darkColorScheme
+    val Typography = Typography()
+}
+
+val LocalColorScheme = staticCompositionLocalOf { Light }
+val LocalTypography = staticCompositionLocalOf { Theme.Typography }
diff --git a/core/design-system/src/main/kotlin/app/cleanmeter/core/designsystem/Typography.kt b/core/design-system/src/main/kotlin/app/cleanmeter/core/designsystem/Typography.kt
new file mode 100644
index 0000000..80ebc16
--- /dev/null
+++ b/core/design-system/src/main/kotlin/app/cleanmeter/core/designsystem/Typography.kt
@@ -0,0 +1,172 @@
+package app.cleanmeter.core.designsystem
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.platform.Font
+import androidx.compose.ui.unit.sp
+
+class Typography {
+
+    /**
+     * fontSize = 16.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = W500,
+     */
+    val titleM: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 16.sp,
+            lineHeight = 0.sp,
+            fontFamily = fontFamilyMedium,
+        )
+
+    /**
+     * fontSize = 16.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = W500,
+     */
+    val titleMMedium: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 16.sp,
+            lineHeight = 0.sp,
+            fontFamily = fontFamilyMedium,
+        )
+
+    /**
+     * fontSize = 14.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = W400,
+     */
+    val labelL: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 14.sp,
+            lineHeight = 0.sp,
+        )
+
+    /**
+     * fontSize = 14.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = W100,
+     */
+    val labelLThin: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 14.sp,
+            lineHeight = 0.sp,
+            fontFamily = fontFamilyThin,
+        )
+
+    /**
+     * fontSize = 14.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = W500,
+     */
+    val labelLMedium: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 14.sp,
+            lineHeight = 0.sp,
+            fontFamily = fontFamilyMedium,
+        )
+
+    /**
+     * fontSize = 14.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = W600,
+     */
+    val labelLSemiBold: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 14.sp,
+            lineHeight = 0.sp,
+            fontFamily = fontFamilySemiBold,
+        )
+
+    /**
+     * fontSize = 13.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = W400,
+     */
+    val labelM: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 13.sp,
+            lineHeight = 0.sp,
+        )
+
+    /**
+     * fontSize = 13.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = W600,
+     */
+    val labelMSemiBold: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 13.sp,
+            lineHeight = 0.sp,
+            fontFamily = fontFamilySemiBold
+        )
+
+    /**
+     * fontSize = 12.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = W400,
+     */
+    val labelS: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 12.sp,
+            lineHeight = 0.sp,
+        )
+
+    /**
+     * fontSize = 12.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = W400,
+     */
+    val labelSSemiBold: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 12.sp,
+            lineHeight = 0.sp,
+            fontFamily = fontFamilySemiBold
+        )
+
+    /**
+     * fontSize = 10.sp,
+     * lineHeight = 0.sp,
+     * fontWeight = W400,
+     */
+    val bodyM: TextStyle
+        @Composable get() = defaultTextStyle.copy(
+            fontSize = 10.sp,
+            lineHeight = 0.sp,
+        )
+
+//    Font(resource = "font/inter_thin.ttf", weight = FontWeight.Thin),
+//    Font(resource = "font/inter_extralight.ttf", weight = FontWeight.ExtraLight),
+//    Font(resource = "font/inter_light.ttf", weight = FontWeight.Light),
+//    Font(resource = "font/inter_regular.ttf", weight = FontWeight.Normal),
+//    Font(resource = "font/inter_medium.ttf", weight = FontWeight.Medium),
+//    Font(resource = "font/inter_semibold.ttf", weight = FontWeight.SemiBold),
+//    Font(resource = "font/inter_bold.ttf", weight = FontWeight.Bold),
+//    Font(resource = "font/inter_extrabold.ttf", weight = FontWeight.ExtraBold),
+//    Font(resource = "font/inter_black.ttf", weight = FontWeight.Black),
+
+    private val fontFamilyThin = FontFamily(
+        Font(resource = "font/inter_thin.ttf", weight = FontWeight.Normal),
+    )
+
+    private val fontFamilyNormal = FontFamily(
+        Font(resource = "font/inter_regular.ttf", weight = FontWeight.Normal)
+    )
+
+    private val fontFamilyMedium = FontFamily(
+        Font(resource = "font/inter_medium.ttf", weight = FontWeight.Normal),
+    )
+
+    private val fontFamilySemiBold = FontFamily(
+        Font(resource = "font/inter_semibold.ttf", weight = FontWeight.Normal),
+    )
+
+    private val defaultTextStyle: TextStyle
+        @Composable get() = TextStyle(
+            fontFamily = fontFamilyNormal,
+            fontWeight = FontWeight.Normal,
+            color = LocalColorScheme.current.text.paragraph1
+        )
+}
\ No newline at end of file
diff --git a/target/desktop/src/main/resources/font/inter_black.ttf b/core/design-system/src/main/resources/font/inter_black.ttf
similarity index 100%
rename from target/desktop/src/main/resources/font/inter_black.ttf
rename to core/design-system/src/main/resources/font/inter_black.ttf
diff --git a/target/desktop/src/main/resources/font/inter_bold.ttf b/core/design-system/src/main/resources/font/inter_bold.ttf
similarity index 100%
rename from target/desktop/src/main/resources/font/inter_bold.ttf
rename to core/design-system/src/main/resources/font/inter_bold.ttf
diff --git a/target/desktop/src/main/resources/font/inter_extrabold.ttf b/core/design-system/src/main/resources/font/inter_extrabold.ttf
similarity index 100%
rename from target/desktop/src/main/resources/font/inter_extrabold.ttf
rename to core/design-system/src/main/resources/font/inter_extrabold.ttf
diff --git a/target/desktop/src/main/resources/font/inter_extralight.ttf b/core/design-system/src/main/resources/font/inter_extralight.ttf
similarity index 100%
rename from target/desktop/src/main/resources/font/inter_extralight.ttf
rename to core/design-system/src/main/resources/font/inter_extralight.ttf
diff --git a/target/desktop/src/main/resources/font/inter_light.ttf b/core/design-system/src/main/resources/font/inter_light.ttf
similarity index 100%
rename from target/desktop/src/main/resources/font/inter_light.ttf
rename to core/design-system/src/main/resources/font/inter_light.ttf
diff --git a/target/desktop/src/main/resources/font/inter_medium.ttf b/core/design-system/src/main/resources/font/inter_medium.ttf
similarity index 100%
rename from target/desktop/src/main/resources/font/inter_medium.ttf
rename to core/design-system/src/main/resources/font/inter_medium.ttf
diff --git a/target/desktop/src/main/resources/font/inter_regular.ttf b/core/design-system/src/main/resources/font/inter_regular.ttf
similarity index 100%
rename from target/desktop/src/main/resources/font/inter_regular.ttf
rename to core/design-system/src/main/resources/font/inter_regular.ttf
diff --git a/target/desktop/src/main/resources/font/inter_semibold.ttf b/core/design-system/src/main/resources/font/inter_semibold.ttf
similarity index 100%
rename from target/desktop/src/main/resources/font/inter_semibold.ttf
rename to core/design-system/src/main/resources/font/inter_semibold.ttf
diff --git a/target/desktop/src/main/resources/font/inter_thin.ttf b/core/design-system/src/main/resources/font/inter_thin.ttf
similarity index 100%
rename from target/desktop/src/main/resources/font/inter_thin.ttf
rename to core/design-system/src/main/resources/font/inter_thin.ttf
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index aefaf7a..356e13e 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -2,7 +2,7 @@
 kotlin = "2.0.20"
 ktor = "2.3.12"
 jackson = "2.11.2"
-compose = "1.6.11"
+compose = "1.7.1"
 
 [plugins]
 jetbrainsCompose = { id = "org.jetbrains.compose", version.ref = "compose" }
@@ -36,4 +36,5 @@ jackson-dataformat = { module = "com.fasterxml.jackson.dataformat:jackson-datafo
 
 jna = "net.java.dev.jna:jna-platform:5.12.1"
 oshi = "com.github.oshi:oshi-core:6.6.5"
-jnativehook = "com.github.kwhat:jnativehook:2.2.2"
\ No newline at end of file
+jnativehook = "com.github.kwhat:jnativehook:2.2.2"
+haze = "dev.chrisbanes.haze:haze:1.1.1"
\ No newline at end of file
diff --git a/settings.gradle.kts b/settings.gradle.kts
index 5691ce8..8902840 100644
--- a/settings.gradle.kts
+++ b/settings.gradle.kts
@@ -40,5 +40,6 @@ include(
     "core:common",
     "core:native",
     "core:updater",
-    "target:desktop"
+    "core:design-system",
+    "target:desktop",
 )
diff --git a/target/desktop/build.gradle.kts b/target/desktop/build.gradle.kts
index 9b7d737..073f0d5 100644
--- a/target/desktop/build.gradle.kts
+++ b/target/desktop/build.gradle.kts
@@ -42,6 +42,7 @@ dependencies {
     implementation(projects.core.common)
     implementation(projects.core.native)
     implementation(projects.core.updater)
+    implementation(projects.core.designSystem)
 }
 
 sourceSets {
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ComposeApp.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ComposeApp.kt
index 332d0f2..2a1fcaa 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ComposeApp.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ComposeApp.kt
@@ -36,6 +36,7 @@ fun composeApp() = application {
     )
 
     SettingsWindow(
+        isDarkTheme = state.overlaySettings.isDarkTheme,
         getOverlayPosition = { overlayPosition },
         onApplicationExit = {
             if (!ApplicationParams.isAutostart) {
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ServerMain.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ServerMain.kt
index 33c7d96..2380088 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ServerMain.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ServerMain.kt
@@ -8,6 +8,8 @@ import app.cleanmeter.core.os.win32.WindowsService
 
 
 fun main(vararg args: String) = singleInstance(args) {
+    System.setProperty("awt.useSystemAAFontSettings","on");
+    System.setProperty("swing.aatext", "true");
     WindowsService.tryElevateProcess(ApplicationParams.isAutostart)
 
     if (isDev()) {
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/model/OverlaySettings.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/model/OverlaySettings.kt
index a36c647..4dc93a0 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/model/OverlaySettings.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/model/OverlaySettings.kt
@@ -5,6 +5,7 @@ import kotlinx.serialization.Serializable
 
 @Serializable
 data class OverlaySettings(
+    val isDarkTheme: Boolean = false,
     val isHorizontal: Boolean = true,
     val positionIndex: Int = 0,
     val selectedDisplayIndex: Int = 0,
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/AppTheme.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/AppTheme.kt
index e0ebb61..e0ce0a7 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/AppTheme.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/AppTheme.kt
@@ -1,33 +1,22 @@
 package app.cleanmeter.target.desktop.ui
 
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Typography
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.platform.LocalLayoutDirection
-import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.platform.Font
 import androidx.compose.ui.unit.LayoutDirection
-
-val fontFamily = FontFamily(
-    Font(resource = "font/inter_thin.ttf", weight = FontWeight.Thin),
-    Font(resource = "font/inter_extralight.ttf", weight = FontWeight.ExtraLight),
-    Font(resource = "font/inter_light.ttf", weight = FontWeight.Light),
-    Font(resource = "font/inter_regular.ttf", weight = FontWeight.Normal),
-    Font(resource = "font/inter_medium.ttf", weight = FontWeight.Medium),
-    Font(resource = "font/inter_semibold.ttf", weight = FontWeight.SemiBold),
-    Font(resource = "font/inter_bold.ttf", weight = FontWeight.Bold),
-    Font(resource = "font/inter_extrabold.ttf", weight = FontWeight.ExtraBold),
-    Font(resource = "font/inter_black.ttf", weight = FontWeight.Black),
-)
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
+import app.cleanmeter.core.designsystem.Theme
 
 @Composable
-fun AppTheme(content: @Composable () -> Unit) {
-    MaterialTheme(
-        typography = Typography(defaultFontFamily = fontFamily),
-    ) {
-        CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) {
+fun AppTheme(isDarkTheme: Boolean, content: @Composable () -> Unit) {
+    MaterialTheme {
+        CompositionLocalProvider(
+            LocalColorScheme provides if (isDarkTheme) Theme.Dark else Theme.Light,
+            LocalTypography provides Theme.Typography,
+            LocalLayoutDirection provides LayoutDirection.Ltr
+        ) {
             content()
         }
     }
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/ColorTokens.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/ColorTokens.kt
index 98d5e3a..4c75298 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/ColorTokens.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/ColorTokens.kt
@@ -10,15 +10,4 @@ object ColorTokens {
     val Cyan = Color(0xFF2ED3B7)
     val ClearGray = Color(0x11d3d3d3)
     val OffWhite = Color(0xffc0c0c0)
-
-    val BackgroundOffWhite = Color(0xffF0F1F1)
-    val BarelyVisibleGray = Color(0x0C111D1A)
-    val AlmostVisibleGray = Color(0xFFCECFD2)
-    val BorderGray = Color(0x80CECFD2)
-    val LabelGray = Color(0xFF94969C)
-    val DarkGray = Color(0xFF0C111D)
-    val AlmostDarkGray = Color(0xFF161b26)
-    val MutedGray = Color(0xFF475467)
-
-    val Gray200 = Color(0xFFF5F5F6)
 }
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxWithLabel.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxWithLabel.kt
index f552bdc..613445b 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxWithLabel.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxWithLabel.kt
@@ -9,10 +9,10 @@ import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
 
 @Composable
 fun CheckboxWithLabel(
@@ -30,17 +30,20 @@ fun CheckboxWithLabel(
             checked = checked,
             enabled = enabled,
             onCheckedChange = onCheckedChange,
-            colors = CheckboxDefaults.colors(checkedColor = DarkGray),
+            colors = CheckboxDefaults.colors(
+                checkedColor = LocalColorScheme.current.background.brand,
+                uncheckedColor = LocalColorScheme.current.background.surfaceSunken,
+                checkmarkColor = LocalColorScheme.current.background.surfaceRaised
+            ),
             modifier = Modifier.size(24.dp)
         )
 
         Text(
             text = label,
-            fontSize = 14.sp,
-            color = DarkGray,
-            lineHeight = 0.sp,
-            fontWeight = FontWeight(550),
-            letterSpacing = 0.14.sp
+            style = LocalTypography.current.labelLMedium.copy(
+                letterSpacing = 0.14.sp,
+            ),
+            color = LocalColorScheme.current.text.heading,
         )
 
         trailingItem?.invoke()
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/DropdownMenu.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/DropdownMenu.kt
deleted file mode 100644
index 9fdc1c5..0000000
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/DropdownMenu.kt
+++ /dev/null
@@ -1,99 +0,0 @@
-package app.cleanmeter.target.desktop.ui.components
-
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.DropdownMenuItem
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.ExposedDropdownMenuBox
-import androidx.compose.material.ExposedDropdownMenuDefaults
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.Text
-import androidx.compose.material.TextField
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.rounded.ChevronRight
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.rotate
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.semantics.clearAndSetSemantics
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostVisibleGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray
-
-@OptIn(ExperimentalMaterialApi::class)
-@Composable
-fun DropdownMenu(
-    options: List<String>,
-    selectedIndex: Int,
-    onValueChanged: (Int) -> Unit
-) {
-    var expanded by remember { mutableStateOf(false) }
-    var selectedOption by remember { mutableStateOf(options[selectedIndex]) }
-
-    ExposedDropdownMenuBox(
-        expanded = expanded,
-        onExpandedChange = { expanded = !expanded },
-        modifier = Modifier.fillMaxWidth(),
-    ) {
-        TextField(
-            value = selectedOption,
-            onValueChange = {},
-            readOnly = true,
-            trailingIcon = {
-                IconButton(onClick = { }, modifier = Modifier.clearAndSetSemantics { }) {
-                    Icon(
-                        Icons.Rounded.ChevronRight,
-                        "Trailing icon for exposed dropdown menu",
-                        Modifier.rotate(
-                            if (expanded)
-                                270f
-                            else
-                                90f
-                        )
-                    )
-                }
-            },
-            modifier = Modifier.fillMaxWidth().border(1.dp, AlmostVisibleGray, RoundedCornerShape(16.dp)),
-            textStyle = TextStyle(
-                color = Color.DarkGray,
-                fontSize = 14.sp,
-                fontWeight = FontWeight.Medium
-            ),
-            shape = RoundedCornerShape(16.dp),
-            colors = ExposedDropdownMenuDefaults.textFieldColors(
-                backgroundColor = Color.Transparent,
-                unfocusedIndicatorColor = Color.Transparent,
-                focusedIndicatorColor = Color.Transparent,
-                trailingIconColor = MutedGray,
-                focusedTrailingIconColor = MutedGray,
-            )
-        )
-
-        ExposedDropdownMenu(
-            expanded = expanded,
-            onDismissRequest = { expanded = false },
-            modifier = Modifier.fillMaxWidth(),
-        ) {
-            options.forEachIndexed { index, item ->
-                DropdownMenuItem(
-                    onClick = {
-                        expanded = false
-                        selectedOption = item
-                        onValueChanged(index)
-                    }, modifier = Modifier.fillMaxWidth()
-                ) {
-                    Text(text = item)
-                }
-            }
-        }
-    }
-}
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/DropdownSection.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/DropdownSection.kt
deleted file mode 100644
index 2aa77c0..0000000
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/DropdownSection.kt
+++ /dev/null
@@ -1,50 +0,0 @@
-package app.cleanmeter.target.desktop.ui.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray
-
-@Composable
-fun DropdownSection(
-    title: String,
-    options: List<String>,
-    onValueChanged: (Int) -> Unit,
-    selectedIndex: Int,
-) = Column(
-    modifier = Modifier.background(Color.White, RoundedCornerShape(12.dp)).padding(20.dp),
-    verticalArrangement = Arrangement.spacedBy(20.dp)
-) {
-    Row(
-        modifier = Modifier.fillMaxWidth(),
-        horizontalArrangement = Arrangement.SpaceBetween,
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Text(
-            text = title,
-            fontSize = 13.sp,
-            color = MutedGray,
-            lineHeight = 0.sp,
-            fontWeight = FontWeight.SemiBold,
-            letterSpacing = 1.sp
-        )
-    }
-
-    DropdownMenu(
-        options = options,
-        selectedIndex = selectedIndex,
-        onValueChanged = onValueChanged,
-    )
-}
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/HotKeySymbol.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/HotKeySymbol.kt
new file mode 100644
index 0000000..37403a6
--- /dev/null
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/HotKeySymbol.kt
@@ -0,0 +1,87 @@
+package app.cleanmeter.target.desktop.ui.components
+
+import androidx.compose.desktop.ui.tooling.preview.Preview
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Add
+import androidx.compose.material.icons.rounded.ChevronRight
+import androidx.compose.material.icons.rounded.PlusOne
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.util.fastForEachIndexed
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
+import app.cleanmeter.target.desktop.ui.AppTheme
+
+@Composable
+fun HotKeySymbol(
+    keys: List<String>
+) {
+    Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(4.dp)) {
+        keys.fastForEachIndexed { index, key ->
+            KeySymbol(key)
+            if (index != keys.lastIndex) {
+                Icon(
+                    imageVector = Icons.Rounded.Add,
+                    contentDescription = "Trailing icon for exposed dropdown menu",
+                    modifier = Modifier.height(10.dp),
+                    tint = LocalColorScheme.current.icon.bolderActive
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun KeySymbol(key: String) {
+    Box(
+        modifier = Modifier
+            .width(40.dp)
+            .background(LocalColorScheme.current.background.surfaceSunkenSubtle, RoundedCornerShape(10.dp))
+            .padding(bottom = 3.dp)
+            .background(LocalColorScheme.current.gradient.gradient1, RoundedCornerShape(10.dp))
+            .padding(horizontal = 5.dp, vertical = 8.dp)
+    ) {
+        Text(
+            text = key,
+            style = LocalTypography.current.labelM,
+            color = LocalColorScheme.current.text.inverse,
+            modifier = Modifier.align(Alignment.Center)
+        )
+    }
+}
+
+@Composable
+@Preview
+private fun PreviewHotKeySymbol() {
+    Box(modifier = Modifier.size(200.dp)) {
+        AppTheme(isDarkTheme = false) {
+            HotKeySymbol(listOf("Ctrl", "Alt", "F10"))
+        }
+    }
+
+}
+
+@Composable
+@Preview
+private fun DarkPreviewHotKeySymbol() {
+    Box(modifier = Modifier.size(200.dp)) {
+        AppTheme(isDarkTheme = true) {
+            HotKeySymbol(listOf("Ctrl", "Alt", "F10"))
+        }
+    }
+}
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/KeyboardShortcutInfoLabel.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/KeyboardShortcutInfoLabel.kt
index 57aef83..fbb8048 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/KeyboardShortcutInfoLabel.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/KeyboardShortcutInfoLabel.kt
@@ -6,7 +6,9 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Icon
 import androidx.compose.material.Text
@@ -15,10 +17,9 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import app.cleanmeter.target.desktop.ui.ColorTokens.BorderGray
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
 
 @Composable
 internal fun KeyboardShortcutInfoLabel() {
@@ -26,8 +27,8 @@ internal fun KeyboardShortcutInfoLabel() {
         modifier = Modifier
             .fillMaxWidth()
             .background(Color.Transparent, RoundedCornerShape(12.dp))
-            .border(1.dp, BorderGray, RoundedCornerShape(12.dp))
-            .padding(20.dp),
+            .border(1.dp, LocalColorScheme.current.border.bold, RoundedCornerShape(12.dp))
+            .padding(vertical = 22.dp, horizontal = 16.dp),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.SpaceBetween
     ) {
@@ -35,15 +36,18 @@ internal fun KeyboardShortcutInfoLabel() {
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.spacedBy(8.dp),
         ) {
-            Icon(painterResource("icons/info.svg"), "")
+            Icon(
+                painter = painterResource("icons/info.svg"),
+                contentDescription = "",
+                tint = LocalColorScheme.current.icon.bolderActive
+            )
             Text(
                 text = "Hot key for showing/hiding the overlay",
-                color = Color.DarkGray,
-                fontSize = 14.sp,
-                fontWeight = FontWeight(600),
-                modifier = Modifier.padding(bottom = 2.5.dp),
+                color = LocalColorScheme.current.text.heading,
+                style = LocalTypography.current.labelLMedium,
+                modifier = Modifier.wrapContentHeight(align = Alignment.CenterVertically),
             )
         }
-        Image(painterResource("icons/hotkey.png"), "")
+        HotKeySymbol(listOf("Ctrl", "Alt", "F10"))
     }
 }
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Label.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Label.kt
deleted file mode 100644
index b53fcdd..0000000
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Label.kt
+++ /dev/null
@@ -1,16 +0,0 @@
-package app.cleanmeter.target.desktop.ui.components
-
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.unit.sp
-
-@Composable
-fun Label(
-    text: String,
-    style: TextStyle = MaterialTheme.typography.subtitle2.copy(lineHeight = 0.sp),
-) = Text(
-    text = text,
-    style = style
-)
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Pill.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Pill.kt
index 86a676b..6b9c4b2 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Pill.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Pill.kt
@@ -14,11 +14,11 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import app.cleanmeter.target.desktop.ui.ColorTokens.OffWhite
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
 import app.cleanmeter.target.desktop.ui.overlay.conditional
 
 @Composable
@@ -35,7 +35,9 @@ fun Pill(
             .conditional(
                 predicate = isHorizontal,
                 ifTrue = {
-                    fillMaxHeight().widthIn(min = minWidth).background(Color.Black.copy(alpha = 0.3f), CircleShape)
+                    fillMaxHeight()
+                        .widthIn(min = minWidth)
+                        .background(Color.Black.copy(alpha = 0.3f), CircleShape)
                 },
                 ifFalse = {
                     background(
@@ -48,11 +50,10 @@ fun Pill(
     ) {
         Text(
             text = title,
-            fontSize = 10.sp,
-            color = OffWhite,
-            lineHeight = 0.sp,
-            fontWeight = FontWeight.Normal,
-            letterSpacing = 1.sp
+            style = LocalTypography.current.bodyM.copy(
+                letterSpacing = 1.sp,
+            ),
+            color = LocalColorScheme.current.text.inverseSubtler,
         )
 
         content()
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ProgressUnit.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ProgressUnit.kt
index a08dba0..6003891 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ProgressUnit.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ProgressUnit.kt
@@ -8,15 +8,14 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import app.cleanmeter.core.designsystem.LocalTypography
 
 @Composable
 fun ProgressUnit(unit: String) {
     Text(
         text = unit,
-        fontSize = 10.sp,
+        style = LocalTypography.current.bodyM,
         color = Color.White,
-        lineHeight = 0.sp,
-        fontWeight = FontWeight.Normal,
         modifier = Modifier.padding(bottom = 1.dp)
     )
 }
@@ -25,9 +24,7 @@ fun ProgressUnit(unit: String) {
 fun ProgressLabel(label: String) {
     Text(
         text = label,
-        fontSize = 16.sp,
+        style = LocalTypography.current.titleM,
         color = Color.White,
-        lineHeight = 0.sp,
-        fontWeight = FontWeight.Normal,
     )
 }
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Section.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Section.kt
deleted file mode 100644
index cb6daf1..0000000
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Section.kt
+++ /dev/null
@@ -1,46 +0,0 @@
-package app.cleanmeter.target.desktop.ui.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray
-
-@Composable
-fun Section(
-    title: String,
-    modifier: Modifier = Modifier,
-    content: @Composable () -> Unit
-) = Column(
-    modifier = modifier.background(Color.White, RoundedCornerShape(12.dp)).padding(20.dp),
-    verticalArrangement = Arrangement.spacedBy(20.dp)
-) {
-    Row(
-        modifier = Modifier.fillMaxWidth(),
-        horizontalArrangement = Arrangement.SpaceBetween,
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Text(
-            text = title,
-            fontSize = 13.sp,
-            color = MutedGray,
-            lineHeight = 0.sp,
-            fontWeight = FontWeight.SemiBold,
-            letterSpacing = 1.sp
-        )
-
-    }
-
-    content()
-}
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SensorReadingDropdownMenu.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SensorReadingDropdownMenu.kt
deleted file mode 100644
index a7faf7c..0000000
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SensorReadingDropdownMenu.kt
+++ /dev/null
@@ -1,315 +0,0 @@
-package app.cleanmeter.target.desktop.ui.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.foundation.text.BasicTextField
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.ExposedDropdownMenuBox
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.rounded.Check
-import androidx.compose.material.icons.rounded.ChevronRight
-import androidx.compose.material.icons.rounded.Close
-import androidx.compose.material.icons.rounded.Search
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawBehind
-import androidx.compose.ui.draw.rotate
-import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.semantics.clearAndSetSemantics
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.unit.IntRect
-import androidx.compose.ui.unit.IntSize
-import androidx.compose.ui.unit.LayoutDirection
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import androidx.compose.ui.window.Popup
-import androidx.compose.ui.window.PopupPositionProvider
-import androidx.compose.ui.window.PopupProperties
-import app.cleanmeter.core.common.hardwaremonitor.HardwareMonitorData
-import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostVisibleGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.BarelyVisibleGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.Gray200
-import app.cleanmeter.target.desktop.ui.ColorTokens.LabelGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray
-import app.cleanmeter.target.desktop.ui.overlay.conditional
-
-@OptIn(ExperimentalMaterialApi::class)
-@Composable
-fun SensorReadingDropdownMenu(
-    options: List<HardwareMonitorData.Sensor>,
-    selectedIndex: Int,
-    onValueChanged: (HardwareMonitorData.Sensor) -> Unit,
-    label: String? = null,
-    sensorName: String,
-    dropdownLabel: (HardwareMonitorData.Sensor) -> String = { "${it.Name} (${it.Value} - ${it.SensorType})" },
-    modifier: Modifier = Modifier
-) {
-    var expanded by remember { mutableStateOf(false) }
-    var selectedOption by remember { mutableStateOf(options[selectedIndex]) }
-
-    ExposedDropdownMenuBox(
-        expanded = expanded,
-        onExpandedChange = { expanded = !expanded },
-        modifier = modifier.fillMaxWidth(),
-    ) {
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.SpaceBetween,
-            modifier = Modifier
-                .padding(start = 12.dp, top = 16.dp)
-                .fillMaxWidth()
-                .background(BarelyVisibleGray, RoundedCornerShape(8.dp))
-                .padding(16.dp)
-                .border(1.dp, AlmostVisibleGray, RoundedCornerShape(8.dp))
-                .background(Color.White)
-                .padding(12.dp)
-        ) {
-            Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp)) {
-                if (label != null) {
-                    Text(
-                        text = label,
-                        color = LabelGray,
-                        fontSize = 12.sp,
-                        fontWeight = FontWeight.Normal,
-                        lineHeight = 0.sp,
-                        modifier = Modifier.align(Alignment.CenterVertically)
-                    )
-                }
-
-                Text(
-                    text = "${selectedOption.Name} - ${selectedOption.SensorType}",
-                    color = DarkGray,
-                    fontSize = 12.sp,
-                    fontWeight = FontWeight.Medium,
-                    lineHeight = 0.sp,
-                    modifier = Modifier.align(Alignment.CenterVertically)
-                )
-            }
-
-            IconButton(onClick = { }, modifier = Modifier.size(20.dp).clearAndSetSemantics { }) {
-                Icon(
-                    Icons.Rounded.ChevronRight,
-                    "Trailing icon for exposed dropdown menu",
-                    Modifier.rotate(
-                        if (expanded)
-                            270f
-                        else
-                            90f
-                    )
-                )
-            }
-        }
-
-        if (expanded) {
-            Popup(
-                onDismissRequest = { expanded = false },
-                popupPositionProvider = object : PopupPositionProvider {
-                    override fun calculatePosition(
-                        anchorBounds: IntRect,
-                        windowSize: IntSize,
-                        layoutDirection: LayoutDirection,
-                        popupContentSize: IntSize
-                    ): IntOffset {
-                        return IntOffset(0, 56)
-                    }
-
-                },
-                properties = PopupProperties(
-                    clippingEnabled = true,
-                    dismissOnBackPress = true,
-                    focusable = true,
-                )
-            ) {
-                var filteredItems by remember { mutableStateOf(options) }
-                Surface(color = Color.Black.copy(alpha = 0.5f), shape = RoundedCornerShape(12.dp)) {
-                    Box(modifier = Modifier.fillMaxSize()) {
-                        Column(
-                            modifier = Modifier
-                                .padding(24.dp)
-                                .shadow(8.dp, RoundedCornerShape(12.dp))
-                                .background(Color.White, RoundedCornerShape(12.dp))
-                                .size(650.dp, 400.dp),
-                            verticalArrangement = Arrangement.spacedBy(16.dp)
-                        ) {
-                            Header(
-                                label = sensorName,
-                                onCloseRequest = {
-                                    expanded = false
-                                },
-                                onFilterChange = { filter ->
-                                    if (filter.isNotEmpty()) {
-                                        filteredItems =
-                                            options.filter {
-                                                it.SensorType.name.contains(filter, true) ||
-                                                        it.Name.contains(filter, true)
-                                            }
-                                    } else {
-                                        filteredItems = options
-                                    }
-                                }
-                            )
-
-                            LazyColumn(
-                                modifier = Modifier.size(650.dp, 400.dp).padding(horizontal = 24.dp),
-                                contentPadding = PaddingValues(bottom = 24.dp)
-                            ) {
-                                filteredItems.forEachIndexed { index, item ->
-                                    item {
-                                        Row(
-                                            modifier = Modifier
-                                                .height(40.dp)
-                                                .fillMaxWidth()
-                                                .clickable {
-                                                    expanded = false
-                                                    selectedOption = item
-                                                    onValueChanged(item)
-                                                }
-                                                .conditional(
-                                                    predicate = index == selectedIndex,
-                                                    ifTrue = { background(Gray200, RoundedCornerShape(8.dp)) }
-                                                )
-                                                .padding(horizontal = 12.dp, vertical = 10.dp),
-                                            horizontalArrangement = Arrangement.SpaceBetween,
-                                            verticalAlignment = Alignment.CenterVertically
-                                        ) {
-                                            Text(
-                                                text = dropdownLabel(item),
-                                                color = DarkGray,
-                                                fontSize = 14.sp,
-                                                fontWeight = FontWeight(550),
-                                                lineHeight = 0.sp,
-                                                modifier = Modifier
-                                            )
-
-                                            if (index == selectedIndex) {
-                                                Icon(
-                                                    Icons.Rounded.Check,
-                                                    "Trailing icon for exposed dropdown menu",
-                                                )
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-@Composable
-private fun Header(
-    label: String,
-    onCloseRequest: () -> Unit,
-    onFilterChange: (String) -> Unit
-) {
-    var filter by remember { mutableStateOf("") }
-
-    Column(
-        modifier = Modifier.fillMaxWidth()
-            .drawBehind {
-                val y = size.height - 4
-                drawLine(
-                    color = BarelyVisibleGray,
-                    start = Offset(0f, y),
-                    end = Offset(size.width, y),
-                    strokeWidth = 2f
-                )
-            }
-            .padding(24.dp),
-        verticalArrangement = Arrangement.spacedBy(16.dp)
-    ) {
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.SpaceBetween,
-            modifier = Modifier.fillMaxWidth()
-        ) {
-            Text(
-                text = "Select $label sensor",
-                fontSize = 13.sp,
-                color = MutedGray,
-                lineHeight = 0.sp,
-                fontWeight = FontWeight.SemiBold,
-                textAlign = TextAlign.Center,
-            )
-
-            IconButton(
-                onClick = onCloseRequest,
-                modifier = Modifier.size(20.dp).clearAndSetSemantics { }
-            ) {
-                Icon(
-                    Icons.Rounded.Close,
-                    "Trailing icon for exposed dropdown menu",
-                )
-            }
-        }
-
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(8.dp),
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(40.dp)
-                .background(Color.White, RoundedCornerShape(8.dp))
-                .border(1.dp, AlmostVisibleGray, RoundedCornerShape(8.dp))
-                .padding(horizontal = 12.dp, vertical = 10.dp),
-        ) {
-            IconButton(
-                onClick = {},
-                modifier = Modifier.size(20.dp).clearAndSetSemantics { }
-            ) {
-                Icon(
-                    Icons.Rounded.Search,
-                    "Leading icon for search box",
-                    tint = MutedGray
-                )
-            }
-
-            BasicTextField(
-                value = filter,
-                textStyle = TextStyle(
-                    fontSize = 12.sp,
-                    lineHeight = 2.sp,
-                    textAlign = TextAlign.Start,
-                ),
-                singleLine = true,
-                onValueChange = {
-                    filter = it
-                    onFilterChange(it)
-                },
-                modifier = Modifier.weight(1f),
-            )
-        }
-    }
-}
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SettingsTab.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SettingsTab.kt
index 1b71869..d22628c 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SettingsTab.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SettingsTab.kt
@@ -3,6 +3,8 @@ package app.cleanmeter.target.desktop.ui.components
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.interaction.Interaction
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
@@ -13,17 +15,16 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Tab
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 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.painter.Painter
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import app.cleanmeter.target.desktop.ui.ColorTokens.BarelyVisibleGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.emptyFlow
 
 @Composable
 internal fun SettingsTab(
@@ -32,36 +33,55 @@ internal fun SettingsTab(
     label: String,
     icon: Painter,
     modifier: Modifier = Modifier,
-) = Tab(
-    selected = selected,
-    onClick = onClick,
-    selectedContentColor = DarkGray,
-    unselectedContentColor = MutedGray,
-    modifier = modifier
-        .fillMaxHeight()
-        .background(
-            color = if (selected) DarkGray else Color.White,
-            shape = RoundedCornerShape(50)
-        )
-        .border(2.dp, BarelyVisibleGray, RoundedCornerShape(50))
-        .padding(horizontal = 16.dp),
 ) {
-    Row(
-        horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally),
-        verticalAlignment = Alignment.CenterVertically,
-        modifier = Modifier.fillMaxSize()
+    // TODO: empty for now, figure a custom shape next
+    val emptyInteractionSource = remember {
+        object : MutableInteractionSource {
+            override val interactions: Flow<Interaction>
+                get() = emptyFlow()
+
+            override suspend fun emit(interaction: Interaction) {
+            }
+
+            override fun tryEmit(interaction: Interaction): Boolean {
+                return true
+            }
+        }
+    }
+
+    Tab(
+        selected = selected,
+        onClick = onClick,
+        selectedContentColor = LocalColorScheme.current.background.brand,
+        unselectedContentColor = LocalColorScheme.current.background.surfaceRaised,
+        interactionSource = emptyInteractionSource,
+        modifier = modifier
+            .fillMaxHeight()
+            .background(
+                color = if (selected) LocalColorScheme.current.background.brand else LocalColorScheme.current.background.surfaceRaised,
+                shape = RoundedCornerShape(50)
+            )
+            .border(1.dp, LocalColorScheme.current.border.bold, RoundedCornerShape(50))
+            .padding(horizontal = 16.dp),
     ) {
-        Image(
-            painter = icon,
-            contentDescription = "logo",
-            modifier = Modifier.size(16.dp),
-            colorFilter = ColorFilter.tint(if (selected) Color.White else MutedGray),
-        )
-        Text(
-            text = label,
-            fontWeight = FontWeight.Medium,
-            color = if (selected) Color.White else MutedGray,
-            fontSize = 16.sp,
-        )
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally),
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.fillMaxSize()
+        ) {
+            Image(
+                painter = icon,
+                contentDescription = "logo",
+                modifier = Modifier.size(16.dp),
+                colorFilter = ColorFilter.tint(if (selected) LocalColorScheme.current.icon.inverse else LocalColorScheme.current.icon.bolderActive),
+            )
+            if (label.isNotEmpty()) {
+                Text(
+                    text = label,
+                    style = LocalTypography.current.titleM,
+                    color = if (selected) LocalColorScheme.current.text.inverse else LocalColorScheme.current.text.paragraph1,
+                )
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SliderElements.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SliderElements.kt
index 0b5909a..64f02a1 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SliderElements.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/SliderElements.kt
@@ -8,6 +8,7 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.SliderState
 import androidx.compose.runtime.Composable
@@ -20,23 +21,16 @@ import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
-import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray
+import app.cleanmeter.core.designsystem.LocalColorScheme
 
 @Composable
 fun SliderThumb() {
     Spacer(
         Modifier
             .size(20.dp)
-            .border(2.dp, DarkGray, CircleShape)
-            .indication(
-                interactionSource = remember { MutableInteractionSource() },
-                indication = androidx.compose.material.ripple.rememberRipple(
-                    bounded = false,
-                    radius = 20.dp
-                )
-            )
+            .border(2.dp, LocalColorScheme.current.border.brand, CircleShape)
             .hoverable(interactionSource = remember { MutableInteractionSource() })
-            .background(Color.White, CircleShape)
+            .background(LocalColorScheme.current.background.surfaceRaised, CircleShape)
     )
 }
 
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/StyleCard.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/StyleCard.kt
index 9064312..1f3bde4 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/StyleCard.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/StyleCard.kt
@@ -14,13 +14,10 @@ import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostVisibleGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.BarelyVisibleGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
 import app.cleanmeter.target.desktop.ui.overlay.conditional
 
 @Composable
@@ -33,12 +30,11 @@ internal fun StyleCard(
     content: @Composable BoxScope.() -> Unit,
 ) = Column(
     modifier = modifier
-        .aspectRatio(1.15f)
-        .background(Color.White, RoundedCornerShape(8.dp))
+        .background(LocalColorScheme.current.background.surfaceRaised, RoundedCornerShape(8.dp))
         .conditional(
             predicate = isSelected,
-            ifTrue = { border(2.dp, DarkGray, RoundedCornerShape(8.dp)) },
-            ifFalse = { border(1.dp, AlmostVisibleGray, RoundedCornerShape(8.dp)) }
+            ifTrue = { border(2.dp, LocalColorScheme.current.border.brand, RoundedCornerShape(8.dp)) },
+            ifFalse = { border(1.dp, LocalColorScheme.current.border.bold, RoundedCornerShape(8.dp)) }
         )
         .padding(4.dp)
         .clickable { onClick() }
@@ -47,7 +43,7 @@ internal fun StyleCard(
         modifier = Modifier
             .fillMaxWidth()
             .aspectRatio(16 / 9f)
-            .background(BarelyVisibleGray, RoundedCornerShape(4.dp))
+            .background(LocalColorScheme.current.background.surfaceSunkenSubtle, RoundedCornerShape(4.dp))
             .padding(8.dp),
         content = content,
         contentAlignment = Alignment.Center
@@ -59,12 +55,11 @@ internal fun StyleCard(
         } else {
             Text(
                 text = label,
-                fontSize = 14.sp,
-                color = DarkGray,
-                lineHeight = 0.sp,
-                fontWeight = FontWeight(550),
-                letterSpacing = 0.14.sp,
-                modifier = Modifier.align(Alignment.CenterStart)
+                style = LocalTypography.current.labelLMedium.copy(
+                    letterSpacing = 0.14.sp
+                ),
+                color = LocalColorScheme.current.text.heading,
+                modifier = Modifier.align(Alignment.CenterStart),
             )
         }
     }
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Text.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Text.kt
new file mode 100644
index 0000000..9af1003
--- /dev/null
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Text.kt
@@ -0,0 +1,18 @@
+package app.cleanmeter.target.desktop.ui.components
+
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.sp
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
+
+@Composable
+internal fun SectionTitle(title: String) {
+    Text(
+        text = title,
+        style = LocalTypography.current.labelMSemiBold.copy(
+            letterSpacing = 1.sp,
+        ),
+        color = LocalColorScheme.current.text.paragraph1,
+    )
+}
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Title.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Title.kt
deleted file mode 100644
index 3accb9a..0000000
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Title.kt
+++ /dev/null
@@ -1,20 +0,0 @@
-package app.cleanmeter.target.desktop.ui.components
-
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-
-@Composable
-fun Title(text: String) = Text(
-    modifier = Modifier.padding(bottom = 8.dp),
-    text = text,
-    style = TextStyle(
-        fontSize = 18.sp,
-        fontWeight = FontWeight.Medium
-    )
-)
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Toggle.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Toggle.kt
index b2e31a2..35d0de8 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Toggle.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/Toggle.kt
@@ -1,37 +1,39 @@
 package app.cleanmeter.target.desktop.ui.components
 
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Switch
+import androidx.compose.material3.SwitchColors
 import androidx.compose.material3.SwitchDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
-import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostVisibleGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.Green
+import app.cleanmeter.core.designsystem.LocalColorScheme
 import app.cleanmeter.target.desktop.ui.overlay.conditional
 
 @Composable
 fun Toggle(
     checked: Boolean,
     thumbContent: (@Composable () -> Unit)? = null,
-    checkedTrackColor: Color = Green,
     customSize: Boolean = false,
+    colors: SwitchColors = SwitchDefaults.colors(
+        checkedThumbColor = LocalColorScheme.current.background.surfaceOverlay,
+        checkedTrackColor = LocalColorScheme.current.background.successHover,
+        checkedBorderColor = Color.Transparent,
+        uncheckedThumbColor = LocalColorScheme.current.background.surfaceOverlay,
+        uncheckedTrackColor = LocalColorScheme.current.background.surfaceSunken,
+        uncheckedBorderColor = Color.Transparent,
+    ),
     modifier: Modifier = Modifier,
     onCheckedChange: (Boolean) -> Unit,
 ) =
     Switch(
         checked = checked,
         onCheckedChange = onCheckedChange,
-        colors = SwitchDefaults.colors(
-            checkedThumbColor = Color.White,
-            checkedTrackColor = checkedTrackColor,
-            checkedBorderColor = Color.Transparent,
-            uncheckedThumbColor = Color.White,
-            uncheckedTrackColor = AlmostVisibleGray,
-            uncheckedBorderColor = Color.Transparent,
-        ),
+        colors = colors,
         modifier = modifier.conditional(
             predicate = customSize,
             ifTrue = { this },
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ToggleSection.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ToggleSection.kt
deleted file mode 100644
index 5115fd2..0000000
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/ToggleSection.kt
+++ /dev/null
@@ -1,53 +0,0 @@
-package app.cleanmeter.target.desktop.ui.components
-
-import androidx.compose.animation.animateContentSize
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray
-
-@Composable
-fun ToggleSection(
-    title: String,
-    isEnabled: Boolean,
-    onSwitchToggle: (Boolean) -> Unit,
-    content: @Composable () -> Unit
-) = Column(
-    modifier = Modifier.animateContentSize().background(Color.White, RoundedCornerShape(12.dp)).padding(20.dp),
-    verticalArrangement = Arrangement.spacedBy(20.dp)
-) {
-    Row(
-        modifier = Modifier.fillMaxWidth(),
-        horizontalArrangement = Arrangement.SpaceBetween,
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Text(
-            text = title,
-            fontSize = 13.sp,
-            color = MutedGray,
-            lineHeight = 0.sp,
-            fontWeight = FontWeight.SemiBold,
-            letterSpacing = 1.sp
-        )
-        Toggle(
-            checked = isEnabled,
-            onCheckedChange = onSwitchToggle
-        )
-    }
-
-    if (isEnabled) {
-        content()
-    }
-}
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/TopBar.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/TopBar.kt
index e323ad3..3410698 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/TopBar.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/TopBar.kt
@@ -3,13 +3,14 @@ package app.cleanmeter.target.desktop.ui.components
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.TooltipArea
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Close
@@ -19,14 +20,11 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.semantics.clearAndSetSemantics
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import app.cleanmeter.target.desktop.ui.ColorTokens.BarelyVisibleGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
 
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
@@ -34,6 +32,7 @@ internal fun TopBar(
     onCloseRequest: () -> Unit,
     onMinimizeRequest: () -> Unit,
 ) {
+    val colorScheme = LocalColorScheme.current
     Row(
         modifier = Modifier
             .fillMaxWidth()
@@ -41,7 +40,7 @@ internal fun TopBar(
             .drawBehind {
                 val y = size.height - 2.dp.toPx() / 2
                 drawLine(
-                    color = BarelyVisibleGray,
+                    color = colorScheme.border.bold,
                     start = Offset(0f, y),
                     end = Offset(size.width, y),
                     strokeWidth = 2.dp.toPx()
@@ -58,33 +57,37 @@ internal fun TopBar(
             )
             Text(
                 text = "Clean Meter",
-                fontWeight = FontWeight.Medium,
-                fontSize = 16.sp
+                style = LocalTypography.current.titleMMedium,
+                color = LocalColorScheme.current.text.heading,
             )
         }
 
         Row(horizontalArrangement = Arrangement.spacedBy(16.dp), verticalAlignment = Alignment.CenterVertically) {
-            Image(
-                imageVector = Icons.Rounded.Minimize,
-                contentDescription = "Minimize",
-                colorFilter = ColorFilter.tint(MutedGray),
-                modifier = Modifier.clickable { onMinimizeRequest() }
-            )
-            TooltipArea({
-                Text(
-                    text = "Closing will minimize to the Tray",
-                    fontWeight = FontWeight.Medium,
-                    color = DarkGray,
-                    fontSize = 14.sp
-                )
-            }) {
-                Image(
-                    imageVector = Icons.Rounded.Close,
-                    contentDescription = "Close",
-                    colorFilter = ColorFilter.tint(MutedGray),
-                    modifier = Modifier.clickable { onCloseRequest() }
+            IconButton(onClick = { onMinimizeRequest() }, modifier = Modifier.size(20.dp).clearAndSetSemantics { }) {
+                Icon(
+                    imageVector = Icons.Rounded.Minimize,
+                    contentDescription = "Minimize window",
+                    tint = LocalColorScheme.current.icon.bolderActive,
                 )
             }
+
+            TooltipArea(
+                delayMillis = 0,
+                tooltip = {
+                    Text(
+                        text = "Closing will minimize to the Tray",
+                        style = LocalTypography.current.labelM,
+                        color = LocalColorScheme.current.text.heading,
+                    )
+                }) {
+                IconButton(onClick = { onCloseRequest() }, modifier = Modifier.size(20.dp).clearAndSetSemantics { }) {
+                    Icon(
+                        imageVector = Icons.Rounded.Close,
+                        contentDescription = "Close window to tray",
+                        tint = LocalColorScheme.current.icon.bolderActive,
+                    )
+                }
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/UpdateToast.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/UpdateToast.kt
index 72bbd87..8743e97 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/UpdateToast.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/UpdateToast.kt
@@ -17,6 +17,7 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Icon
@@ -36,15 +37,10 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
 import app.cleanmeter.target.desktop.ui.AppTheme
-import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostDarkGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.ClearGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.Green
-import app.cleanmeter.target.desktop.ui.ColorTokens.LabelGray
 import app.cleanmeter.updater.AutoUpdater
 import app.cleanmeter.updater.UpdateState
 import kotlinx.coroutines.delay
@@ -83,8 +79,8 @@ internal fun BoxScope.UpdateToast() {
             modifier = Modifier
                 .padding(bottom = 16.dp)
                 .fillMaxWidth(0.8f)
-                .background(DarkGray, RoundedCornerShape(100))
-                .padding(16.dp)
+                .background(LocalColorScheme.current.background.brand, RoundedCornerShape(100))
+                .padding(horizontal = 16.dp, vertical = 14.dp)
                 .align(Alignment.BottomCenter)
                 .animateContentSize(),
             verticalAlignment = Alignment.CenterVertically,
@@ -119,19 +115,15 @@ private fun RowScope.BodyText(state: UpdateState) {
                 is UpdateState.Downloading -> "Downloading update..."
                 UpdateState.NotAvailable -> ""
             },
-            color = Color.White,
-            fontSize = 14.sp,
-            fontWeight = FontWeight.Normal,
-            lineHeight = 0.sp,
-            modifier = Modifier.padding(bottom = 2.5.dp),
+            color = LocalColorScheme.current.text.inverse,
+            style = LocalTypography.current.labelLMedium,
+            modifier = Modifier.wrapContentHeight(align = Alignment.CenterVertically),
         )
         Text(
             text = "v${AutoUpdater.currentLiveVersion}",
-            color = LabelGray,
-            fontSize = 14.sp,
-            fontWeight = FontWeight.Normal,
-            lineHeight = 0.sp,
-            modifier = Modifier.padding(bottom = 2.5.dp),
+            color = LocalColorScheme.current.text.disabled,
+            style = LocalTypography.current.labelLMedium,
+            modifier = Modifier.wrapContentHeight(align = Alignment.CenterVertically),
         )
     }
 }
@@ -147,10 +139,9 @@ private fun ClearButton(onClick: () -> Unit, label: String) {
     ) {
         Text(
             text = label,
-            color = Color.White,
-            fontSize = 14.sp,
-            fontWeight = FontWeight.Normal,
-            modifier = Modifier.padding(bottom = 2.5.dp),
+            style = LocalTypography.current.labelLMedium,
+            color = LocalColorScheme.current.text.inverse,
+            modifier = Modifier.wrapContentHeight(align = Alignment.CenterVertically),
         )
     }
 }
@@ -160,17 +151,16 @@ private fun FilledButton(onClick: () -> Unit, label: String) {
     Button(
         onClick = onClick,
         colors = ButtonDefaults.textButtonColors(
-            containerColor = Color.White,
+            containerColor = LocalColorScheme.current.background.surfaceRaised,
         ),
         contentPadding = PaddingValues(horizontal = 8.dp, vertical = 0.dp),
         shape = RoundedCornerShape(100),
     ) {
         Text(
             text = label,
-            color = Color.DarkGray,
-            fontSize = 14.sp,
-            fontWeight = FontWeight(600),
-            modifier = Modifier.padding(bottom = 2.5.dp),
+            color = LocalColorScheme.current.text.heading,
+            style = LocalTypography.current.labelLMedium,
+            modifier = Modifier.wrapContentHeight(align = Alignment.CenterVertically),
         )
     }
 }
@@ -209,22 +199,22 @@ private fun IconProgress(state: UpdateState) {
             is UpdateState.Available -> Icon(
                 painter = painterResource("icons/cloud_download.svg"),
                 contentDescription = null,
-                tint = Color.White,
-                modifier = Modifier.fillMaxSize().background(AlmostDarkGray, RoundedCornerShape(100)).padding(10.dp),
+                tint = LocalColorScheme.current.border.inverse,
+                modifier = Modifier.fillMaxSize().background(LocalColorScheme.current.background.brandSubtle, RoundedCornerShape(100)).padding(10.dp),
             )
 
             is UpdateState.Downloaded -> Icon(
                 painter = painterResource("icons/download_done.svg"),
                 contentDescription = null,
-                tint = Color.White,
-                modifier = Modifier.fillMaxSize().background(AlmostDarkGray, RoundedCornerShape(100)).padding(10.dp),
+                tint = LocalColorScheme.current.border.inverse,
+                modifier = Modifier.fillMaxSize().background(LocalColorScheme.current.background.brandSubtle, RoundedCornerShape(100)).padding(10.dp),
             )
 
             is UpdateState.Downloading -> CircularProgressIndicator(
                 progress = state.progress,
                 modifier = Modifier.fillMaxSize().align(Alignment.Center),
-                color = Green,
-                backgroundColor = ClearGray,
+                color = LocalColorScheme.current.background.successHover,
+                backgroundColor = LocalColorScheme.current.background.surfaceRaised.copy(alpha = 0.3f),
                 strokeCap = StrokeCap.Round,
                 strokeWidth = 3.dp
             )
@@ -237,7 +227,7 @@ private fun IconProgress(state: UpdateState) {
 @Preview
 @Composable
 private fun UpdateToastPreview() {
-    AppTheme {
+    AppTheme(false) {
         Box(modifier = Modifier.fillMaxSize().padding(8.dp)) {
             UpdateToast()
         }
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/dropdown/DropdownMenu.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/dropdown/DropdownMenu.kt
new file mode 100644
index 0000000..2d4fe3e
--- /dev/null
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/dropdown/DropdownMenu.kt
@@ -0,0 +1,97 @@
+package app.cleanmeter.target.desktop.ui.components.dropdown
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.DropdownMenuItem
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.ExposedDropdownMenuBox
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.ChevronRight
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.unit.dp
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
+
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+fun DropdownMenu(
+    options: List<String>,
+    selectedIndex: Int,
+    onValueChanged: (Int) -> Unit
+) {
+    var expanded by remember { mutableStateOf(false) }
+    var selectedOption by remember { mutableStateOf(options[selectedIndex]) }
+
+    ExposedDropdownMenuBox(
+        expanded = expanded,
+        onExpandedChange = { expanded = !expanded },
+        modifier = Modifier.fillMaxWidth(),
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween,
+            modifier = Modifier
+                .fillMaxWidth()
+                .border(1.dp, LocalColorScheme.current.border.bolder, RoundedCornerShape(8.dp))
+                .background(LocalColorScheme.current.background.surfaceRaised).padding(12.dp)
+        ) {
+            Text(
+                text = selectedOption,
+                color = LocalColorScheme.current.text.heading,
+                style = LocalTypography.current.labelL,
+                modifier = Modifier.align(Alignment.CenterVertically)
+            )
+
+            IconButton(onClick = { }, modifier = Modifier.size(20.dp).clearAndSetSemantics { }) {
+                Icon(
+                    imageVector = Icons.Rounded.ChevronRight,
+                    contentDescription = "Trailing icon for exposed dropdown menu",
+                    tint = LocalColorScheme.current.icon.bolderActive,
+                    modifier = Modifier.rotate(
+                        if (expanded) 270f
+                        else 90f
+                    )
+                )
+            }
+        }
+
+        ExposedDropdownMenu(
+            expanded = expanded,
+            onDismissRequest = { expanded = false },
+            modifier = Modifier.background(LocalColorScheme.current.background.surfaceRaised),
+        ) {
+            options.forEachIndexed { index, item ->
+                DropdownMenuItem(
+                    onClick = {
+                        expanded = false
+                        selectedOption = item
+                        onValueChanged(index)
+                    },
+                ) {
+                    Text(
+                        text = item,
+                        style = LocalTypography.current.labelLMedium,
+                        color = LocalColorScheme.current.text.heading,
+                    )
+                }
+            }
+        }
+    }
+}
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/dropdown/SensorReadingDropdownMenu.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/dropdown/SensorReadingDropdownMenu.kt
new file mode 100644
index 0000000..f370a75
--- /dev/null
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/dropdown/SensorReadingDropdownMenu.kt
@@ -0,0 +1,329 @@
+package app.cleanmeter.target.desktop.ui.components.dropdown
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.ExposedDropdownMenuBox
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Check
+import androidx.compose.material.icons.rounded.ChevronRight
+import androidx.compose.material.icons.rounded.Close
+import androidx.compose.material.icons.rounded.Search
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.draw.drawWithCache
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.geometry.CornerRadius
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.IntRect
+import androidx.compose.ui.unit.IntSize
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.window.Popup
+import androidx.compose.ui.window.PopupPositionProvider
+import androidx.compose.ui.window.PopupProperties
+import app.cleanmeter.core.common.hardwaremonitor.HardwareMonitorData
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
+import app.cleanmeter.target.desktop.ui.overlay.conditional
+
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+fun SensorReadingDropdownMenu(
+    options: List<HardwareMonitorData.Sensor>,
+    selectedIndex: Int,
+    onValueChanged: (HardwareMonitorData.Sensor) -> Unit,
+    label: String? = null,
+    sensorName: String,
+    dropdownLabel: (HardwareMonitorData.Sensor) -> String = { "${it.Name} (${it.Value} - ${it.SensorType})" },
+) {
+    var expanded by remember { mutableStateOf(false) }
+    var selectedOption by remember { mutableStateOf(options[selectedIndex]) }
+
+    ExposedDropdownMenuBox(
+        expanded = expanded,
+        onExpandedChange = { expanded = !expanded },
+        modifier = Modifier.fillMaxWidth(),
+    ) {
+        DropdownContent(
+            label = label,
+            selectedOption = selectedOption,
+            expanded = expanded,
+            options = options,
+            sensorName = sensorName,
+            onValueChanged = {
+                expanded = false
+                selectedOption = it
+                onValueChanged(it)
+            },
+            selectedIndex = selectedIndex,
+            dropdownLabel = dropdownLabel,
+            onDismissRequest = { expanded = false },
+        )
+    }
+}
+
+@Composable
+private fun DropdownContent(
+    label: String?,
+    expanded: Boolean,
+    sensorName: String,
+    selectedIndex: Int,
+    selectedOption: HardwareMonitorData.Sensor,
+    options: List<HardwareMonitorData.Sensor>,
+    onValueChanged: (HardwareMonitorData.Sensor) -> Unit,
+    dropdownLabel: (HardwareMonitorData.Sensor) -> String,
+    onDismissRequest: () -> Unit,
+) {
+    val colorScheme = LocalColorScheme.current
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween,
+        modifier = Modifier
+            .padding(start = 12.dp)
+            .drawWithCache {
+                onDrawWithContent {
+                    drawRoundRect(
+                        color = colorScheme.border.subtle,
+                        cornerRadius = CornerRadius(100f, 100f),
+                        size = Size(2f, (size.height - 16f).coerceAtLeast(0f)),
+                        topLeft = Offset(0f, 16f)
+                    )
+                    drawContent()
+                }
+            }
+            .padding(start = 20.dp, top = 16.dp)
+            .fillMaxWidth()
+            .background(LocalColorScheme.current.background.surfaceSunkenSubtle, RoundedCornerShape(8.dp)).padding(16.dp)
+            .border(1.dp, LocalColorScheme.current.border.bolder, RoundedCornerShape(8.dp))
+            .background(LocalColorScheme.current.background.surfaceRaised).padding(12.dp)
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+            if (label != null) {
+                Text(
+                    text = label,
+                    color = LocalColorScheme.current.text.paragraph1,
+                    style = LocalTypography.current.labelL,
+                    modifier = Modifier.align(Alignment.CenterVertically)
+                )
+            }
+
+            Text(
+                text = "${selectedOption.Name} - ${selectedOption.SensorType}",
+                color = LocalColorScheme.current.text.heading,
+                style = LocalTypography.current.labelL,
+                modifier = Modifier.align(Alignment.CenterVertically)
+            )
+        }
+
+        IconButton(onClick = { }, modifier = Modifier.size(20.dp).clearAndSetSemantics { }) {
+            Icon(
+                imageVector = Icons.Rounded.ChevronRight,
+                contentDescription = "Trailing icon for exposed dropdown menu",
+                tint = LocalColorScheme.current.icon.bolderActive,
+                modifier = Modifier.rotate(
+                    if (expanded) 270f
+                    else 90f
+                )
+            )
+        }
+    }
+
+    if (expanded) {
+        Popup(
+            onDismissRequest = onDismissRequest, popupPositionProvider = object : PopupPositionProvider {
+                override fun calculatePosition(
+                    anchorBounds: IntRect, windowSize: IntSize, layoutDirection: LayoutDirection, popupContentSize: IntSize
+                ): IntOffset {
+                    return IntOffset(0, 56)
+                }
+
+            }, properties = PopupProperties(
+                clippingEnabled = true,
+                dismissOnBackPress = true,
+                focusable = true,
+            )
+        ) {
+            var filteredItems by remember { mutableStateOf(options) }
+            Surface(color = Color.Black.copy(alpha = 0.5f), shape = RoundedCornerShape(12.dp)) {
+                Box(modifier = Modifier.fillMaxSize()) {
+                    Column(
+                        modifier = Modifier.padding(24.dp)
+                            .border(1.dp, LocalColorScheme.current.border.bolder, RoundedCornerShape(12.dp))
+                            .shadow(8.dp, RoundedCornerShape(12.dp))
+                            .background(LocalColorScheme.current.background.surfaceRaised, RoundedCornerShape(12.dp))
+                            .size(650.dp, 400.dp), verticalArrangement = Arrangement.spacedBy(16.dp)
+                    ) {
+                        Header(
+                            label = sensorName,
+                            onCloseRequest = onDismissRequest,
+                            onFilterChange = { filter ->
+                                filteredItems = if (filter.isNotEmpty()) {
+                                    options.filter {
+                                        it.SensorType.name.contains(filter, true) || it.Name.contains(filter, true)
+                                    }
+                                } else {
+                                    options
+                                }
+                            })
+
+                        LazyColumn(
+                            modifier = Modifier.size(650.dp, 400.dp).padding(horizontal = 24.dp),
+                            contentPadding = PaddingValues(bottom = 24.dp)
+                        ) {
+                            filteredItems.forEachIndexed { index, item ->
+                                item {
+                                    Row(
+                                        modifier = Modifier
+                                            .height(40.dp)
+                                            .fillMaxWidth()
+                                            .clickable {
+                                                onValueChanged(item)
+                                            }
+                                            .conditional(
+                                                predicate = index == selectedIndex,
+                                                ifTrue = {
+                                                    background(
+                                                        LocalColorScheme.current.background.surfaceSunkenSubtle,
+                                                        RoundedCornerShape(8.dp)
+                                                    )
+                                                })
+                                            .padding(horizontal = 12.dp, vertical = 10.dp),
+                                        horizontalArrangement = Arrangement.SpaceBetween,
+                                        verticalAlignment = Alignment.CenterVertically
+                                    ) {
+                                        Text(
+                                            text = dropdownLabel(item),
+                                            style = LocalTypography.current.labelLMedium,
+                                            color = LocalColorScheme.current.text.heading,
+                                        )
+
+                                        if (index == selectedIndex) {
+                                            Icon(
+                                                imageVector = Icons.Rounded.Check,
+                                                contentDescription = "Trailing icon for exposed dropdown menu",
+                                                tint = LocalColorScheme.current.icon.bolderActive,
+                                            )
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun Header(
+    label: String,
+    onCloseRequest: () -> Unit,
+    onFilterChange: (String) -> Unit
+) {
+    var filter by remember { mutableStateOf("") }
+    val colorScheme = LocalColorScheme.current
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .drawBehind {
+                val y = size.height - 4
+                drawLine(
+                    color = colorScheme.border.subtle,
+                    start = Offset(0f, y),
+                    end = Offset(size.width, y),
+                    strokeWidth = 2f
+                )
+            }
+            .padding(24.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween,
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text(
+                text = "Select $label sensor",
+                style = LocalTypography.current.titleM,
+                color = LocalColorScheme.current.text.heading,
+                textAlign = TextAlign.Center,
+            )
+
+            IconButton(
+                onClick = onCloseRequest, modifier = Modifier.size(20.dp).clearAndSetSemantics { }) {
+                Icon(
+                    imageVector = Icons.Rounded.Close,
+                    contentDescription = "Trailing icon for exposed dropdown menu",
+                    tint = LocalColorScheme.current.icon.bolderActive,
+                )
+            }
+        }
+
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(40.dp)
+                .background(LocalColorScheme.current.background.surfaceRaised, RoundedCornerShape(8.dp))
+                .border(1.dp, LocalColorScheme.current.border.bolder, RoundedCornerShape(8.dp))
+                .padding(horizontal = 12.dp, vertical = 10.dp),
+        ) {
+            IconButton(onClick = {}, modifier = Modifier.size(20.dp).clearAndSetSemantics { }) {
+                Icon(
+                    imageVector = Icons.Rounded.Search,
+                    contentDescription = "Leading icon for search box",
+                    tint = LocalColorScheme.current.icon.bolderActive,
+                )
+            }
+
+            BasicTextField(
+                value = filter,
+                textStyle = LocalTypography.current.labelS.copy(
+                    lineHeight = 2.sp,
+                    textAlign = TextAlign.Start,
+                ),
+                singleLine = true,
+                onValueChange = {
+                    filter = it
+                    onFilterChange(it)
+                },
+                modifier = Modifier.weight(1f),
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxSection.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CheckboxSection.kt
similarity index 69%
rename from target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxSection.kt
rename to target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CheckboxSection.kt
index 735c6da..f90f3db 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CheckboxSection.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CheckboxSection.kt
@@ -1,4 +1,4 @@
-package app.cleanmeter.target.desktop.ui.components
+package app.cleanmeter.target.desktop.ui.components.section
 
 import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.background
@@ -8,18 +8,17 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
 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.Color
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.target.desktop.ui.components.CheckboxWithLabel
+import app.cleanmeter.target.desktop.ui.components.SectionTitle
+import app.cleanmeter.target.desktop.ui.components.Toggle
 import app.cleanmeter.target.desktop.ui.settings.CheckboxSectionOption
 
 @Composable
@@ -28,24 +27,15 @@ fun CheckboxSection(
     options: List<CheckboxSectionOption>,
     onOptionToggle: (CheckboxSectionOption) -> Unit,
     onSwitchToggle: (Boolean) -> Unit,
-) = Column(
-    modifier = Modifier.animateContentSize().background(Color.White, RoundedCornerShape(12.dp)).padding(20.dp),
-    verticalArrangement = Arrangement.spacedBy(20.dp)
-) {
+) = SectionBody {
     val isAnySelected by remember(options) { derivedStateOf { options.any { it.isSelected } } }
+
     Row(
         modifier = Modifier.fillMaxWidth(),
         horizontalArrangement = Arrangement.SpaceBetween,
         verticalAlignment = Alignment.CenterVertically
     ) {
-        Text(
-            text = title,
-            fontSize = 13.sp,
-            color = MutedGray,
-            lineHeight = 0.sp,
-            fontWeight = FontWeight.SemiBold,
-            letterSpacing = 1.sp
-        )
+        SectionTitle(title = title)
         Toggle(
             checked = isAnySelected,
             onCheckedChange = onSwitchToggle
@@ -71,10 +61,7 @@ fun CustomBodyCheckboxSection(
     options: List<CheckboxSectionOption>,
     onSwitchToggle: (Boolean) -> Unit,
     body: @Composable (List<CheckboxSectionOption>) -> Unit,
-) = Column(
-    modifier = Modifier.animateContentSize().background(Color.White, RoundedCornerShape(12.dp)).padding(20.dp),
-    verticalArrangement = Arrangement.spacedBy(20.dp)
-) {
+) = SectionBody {
     val isAnySelected by remember(options) { derivedStateOf { options.any { it.isSelected } } }
 
     Row(
@@ -82,14 +69,7 @@ fun CustomBodyCheckboxSection(
         horizontalArrangement = Arrangement.SpaceBetween,
         verticalAlignment = Alignment.CenterVertically
     ) {
-        Text(
-            text = title,
-            fontSize = 13.sp,
-            color = MutedGray,
-            lineHeight = 0.sp,
-            fontWeight = FontWeight.SemiBold,
-            letterSpacing = 1.sp
-        )
+        SectionTitle(title = title)
         Toggle(
             checked = isAnySelected,
             onCheckedChange = onSwitchToggle
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CollapsibleSection.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CollapsibleSection.kt
similarity index 66%
rename from target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CollapsibleSection.kt
rename to target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CollapsibleSection.kt
index 414e8fa..8ef8e0e 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/CollapsibleSection.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/CollapsibleSection.kt
@@ -1,20 +1,14 @@
-package app.cleanmeter.target.desktop.ui.components
+package app.cleanmeter.target.desktop.ui.components.section
 
-import androidx.compose.animation.animateContentSize
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.ChevronRight
 import androidx.compose.runtime.Composable
@@ -25,12 +19,10 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.rotate
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.semantics.clearAndSetSemantics
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.target.desktop.ui.components.SectionTitle
 
 @Composable
 fun CollapsibleSection(
@@ -39,13 +31,7 @@ fun CollapsibleSection(
 ) {
     var expanded by remember { mutableStateOf(false) }
 
-    Column(
-        modifier = Modifier
-            .animateContentSize()
-            .background(Color.White, RoundedCornerShape(12.dp))
-            .padding(20.dp),
-        verticalArrangement = Arrangement.spacedBy(20.dp)
-    ) {
+    SectionBody {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
@@ -57,21 +43,15 @@ fun CollapsibleSection(
             horizontalArrangement = Arrangement.SpaceBetween,
             verticalAlignment = Alignment.CenterVertically
         ) {
-            Text(
-                text = title,
-                fontSize = 13.sp,
-                color = MutedGray,
-                lineHeight = 0.sp,
-                fontWeight = FontWeight.SemiBold,
-                letterSpacing = 1.sp
-            )
+            SectionTitle(title = title)
             IconButton(onClick = { expanded = !expanded }, modifier = Modifier.clearAndSetSemantics { }.height(20.dp)) {
                 Icon(
                     imageVector = Icons.Rounded.ChevronRight,
                     contentDescription = "Trailing icon for exposed dropdown menu",
                     modifier = Modifier
                         .rotate(if (expanded) 270f else 90f)
-                        .height(20.dp)
+                        .height(20.dp),
+                    tint = LocalColorScheme.current.icon.bolderActive
                 )
             }
         }
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/DropdownSection.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/DropdownSection.kt
new file mode 100644
index 0000000..6284e69
--- /dev/null
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/DropdownSection.kt
@@ -0,0 +1,32 @@
+package app.cleanmeter.target.desktop.ui.components.section
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import app.cleanmeter.target.desktop.ui.components.dropdown.DropdownMenu
+import app.cleanmeter.target.desktop.ui.components.SectionTitle
+
+@Composable
+fun DropdownSection(
+    title: String,
+    options: List<String>,
+    onValueChanged: (Int) -> Unit,
+    selectedIndex: Int,
+) = SectionBody {
+    Row(
+        modifier = Modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        SectionTitle(title = title)
+    }
+
+    DropdownMenu(
+        options = options,
+        selectedIndex = selectedIndex,
+        onValueChanged = onValueChanged,
+    )
+}
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/Section.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/Section.kt
new file mode 100644
index 0000000..345d579
--- /dev/null
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/Section.kt
@@ -0,0 +1,25 @@
+package app.cleanmeter.target.desktop.ui.components.section
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import app.cleanmeter.target.desktop.ui.components.SectionTitle
+
+@Composable
+fun Section(
+    title: String,
+    content: @Composable () -> Unit
+) = SectionBody {
+    Row(
+        modifier = Modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+       SectionTitle(title = title)
+    }
+
+    content()
+}
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/SectionBody.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/SectionBody.kt
new file mode 100644
index 0000000..a7777bb
--- /dev/null
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/SectionBody.kt
@@ -0,0 +1,24 @@
+package app.cleanmeter.target.desktop.ui.components.section
+
+import androidx.compose.animation.animateContentSize
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import app.cleanmeter.core.designsystem.LocalColorScheme
+
+@Composable
+fun SectionBody(content: @Composable ColumnScope.() -> Unit) = Column(
+    modifier = Modifier
+        .animateContentSize()
+        .background(LocalColorScheme.current.background.surfaceRaised, RoundedCornerShape(12.dp))
+        .padding(20.dp),
+    verticalArrangement = Arrangement.spacedBy(20.dp)
+) {
+    content()
+}
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/ToggleSection.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/ToggleSection.kt
new file mode 100644
index 0000000..b326afd
--- /dev/null
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/components/section/ToggleSection.kt
@@ -0,0 +1,34 @@
+package app.cleanmeter.target.desktop.ui.components.section
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import app.cleanmeter.target.desktop.ui.components.SectionTitle
+import app.cleanmeter.target.desktop.ui.components.Toggle
+
+@Composable
+fun ToggleSection(
+    title: String,
+    isEnabled: Boolean,
+    onSwitchToggle: (Boolean) -> Unit,
+    content: @Composable () -> Unit
+) = SectionBody {
+    Row(
+        modifier = Modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        SectionTitle(title = title)
+        Toggle(
+            checked = isEnabled,
+            onCheckedChange = onSwitchToggle
+        )
+    }
+
+    if (isEnabled) {
+        content()
+    }
+}
\ No newline at end of file
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/Overlay.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/Overlay.kt
index 79e14a2..a98688b 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/Overlay.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/Overlay.kt
@@ -14,7 +14,7 @@ import app.cleanmeter.target.desktop.ui.AppTheme
 fun Overlay(
     data: HardwareMonitorData?,
     overlaySettings: OverlaySettings,
-) = AppTheme {
+) = AppTheme(false) {
     if (
         listOf(
             overlaySettings.sensors.framerate,
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/OverlayUi.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/OverlayUi.kt
index 885c716..9e31cb6 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/OverlayUi.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/OverlayUi.kt
@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/sections/FpsSection.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/sections/FpsSection.kt
index 989e7c6..fc539b6 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/sections/FpsSection.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/overlay/sections/FpsSection.kt
@@ -31,8 +31,8 @@ import androidx.compose.ui.unit.sp
 import app.cleanmeter.core.common.hardwaremonitor.FPS
 import app.cleanmeter.core.common.hardwaremonitor.Frametime
 import app.cleanmeter.core.common.hardwaremonitor.HardwareMonitorData
+import app.cleanmeter.core.designsystem.LocalColorScheme
 import app.cleanmeter.target.desktop.model.OverlaySettings
-import app.cleanmeter.target.desktop.ui.ColorTokens.OffWhite
 import app.cleanmeter.target.desktop.ui.components.Pill
 import app.cleanmeter.target.desktop.ui.overlay.conditional
 import java.util.*
@@ -85,7 +85,7 @@ internal fun FpsSection(overlaySettings: OverlaySettings, data: HardwareMonitorD
                     Text(
                         text = "FPS",
                         fontSize = 10.sp,
-                        color = OffWhite,
+                        color = LocalColorScheme.current.text.inverseSubtler,
                         lineHeight = 0.sp,
                         fontWeight = FontWeight.Normal,
                         letterSpacing = 1.sp
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Footer.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Footer.kt
index 6aa9733..105b9c8 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Footer.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Footer.kt
@@ -23,20 +23,19 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.platform.UriHandler
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.SpanStyle
-import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.buildAnnotatedString
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import app.cleanmeter.target.desktop.ui.ColorTokens.BorderGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.LabelGray
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
 
 @Composable
 fun FooterUi(modifier: Modifier = Modifier) {
@@ -80,11 +79,8 @@ fun FooterUi(modifier: Modifier = Modifier) {
 
             ClickableText(
                 text = text,
-                style = TextStyle(
-                    fontSize = 12.sp,
-                    color = LabelGray,
-                    lineHeight = 0.sp,
-                    fontWeight = FontWeight(450),
+                style = LocalTypography.current.labelS.copy(
+                    color = LocalColorScheme.current.text.disabled,
                     letterSpacing = 0.14.sp,
                 ),
                 onClick = { offset ->
@@ -106,11 +102,10 @@ fun FooterUi(modifier: Modifier = Modifier) {
 
                 Text(
                     text = "Version ${System.getProperty("jpackage.app-version")}",
-                    fontSize = 12.sp,
-                    color = LabelGray,
-                    lineHeight = 0.sp,
-                    fontWeight = FontWeight(450),
-                    letterSpacing = 0.14.sp,
+                    style = LocalTypography.current.labelS.copy(
+                        color = LocalColorScheme.current.text.disabled,
+                        letterSpacing = 0.14.sp,
+                    )
                 )
             }
         }
@@ -121,15 +116,13 @@ fun FooterUi(modifier: Modifier = Modifier) {
 private fun Github(uriHandler: UriHandler) {
     Row(
         modifier = Modifier
-            .clickable(
-                interactionSource = remember { MutableInteractionSource() },
-                indication = null
-            ) {
+            .clip(RoundedCornerShape(12.dp))
+            .clickable {
                 uriHandler.openUri("https://github.com/Danil0v3s/CleanMeter/releases/latest")
             }
             .fillMaxWidth()
             .background(Color.Transparent, RoundedCornerShape(12.dp))
-            .border(1.dp, BorderGray, RoundedCornerShape(12.dp))
+            .border(1.dp, LocalColorScheme.current.border.bold, RoundedCornerShape(12.dp))
             .padding(12.dp),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.SpaceBetween
@@ -141,9 +134,8 @@ private fun Github(uriHandler: UriHandler) {
             Image(painterResource("icons/github.png"), "", modifier = Modifier.size(32.dp))
             Text(
                 text = "Check the latest build",
-                color = Color.DarkGray,
-                fontSize = 14.sp,
-                fontWeight = FontWeight(600),
+                color = LocalColorScheme.current.text.heading,
+                style = LocalTypography.current.labelLMedium,
             )
         }
         Icon(Icons.Rounded.ChevronRight, "")
@@ -154,15 +146,13 @@ private fun Github(uriHandler: UriHandler) {
 private fun RowScope.Donate(uriHandler: UriHandler) {
     Row(
         modifier = Modifier
-            .clickable(
-                interactionSource = remember { MutableInteractionSource() },
-                indication = null
-            ) {
+            .clip(RoundedCornerShape(12.dp))
+            .clickable {
                 uriHandler.openUri("https://ko-fi.com/danil0v3s")
             }
             .weight(.5f)
             .background(Color.Transparent, RoundedCornerShape(12.dp))
-            .border(1.dp, BorderGray, RoundedCornerShape(12.dp))
+            .border(1.dp, LocalColorScheme.current.border.bold, RoundedCornerShape(12.dp))
             .padding(12.dp),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.SpaceBetween
@@ -174,9 +164,8 @@ private fun RowScope.Donate(uriHandler: UriHandler) {
             Image(painterResource("icons/ko-fi.png"), "")
             Text(
                 text = "Like the work? Support us!",
-                color = Color.DarkGray,
-                fontSize = 14.sp,
-                fontWeight = FontWeight(600),
+                color = LocalColorScheme.current.text.heading,
+                style = LocalTypography.current.labelLMedium,
             )
         }
         Image(Icons.Rounded.ChevronRight, "")
@@ -187,15 +176,13 @@ private fun RowScope.Donate(uriHandler: UriHandler) {
 private fun RowScope.Discord(uriHandler: UriHandler) {
     Row(
         modifier = Modifier
-            .clickable(
-                interactionSource = remember { MutableInteractionSource() },
-                indication = null
-            ) {
+            .clip(RoundedCornerShape(12.dp))
+            .clickable {
                 uriHandler.openUri("https://discord.gg/phqwe89cvE")
             }
             .weight(.5f)
             .background(Color.Transparent, RoundedCornerShape(12.dp))
-            .border(1.dp, BorderGray, RoundedCornerShape(12.dp))
+            .border(1.dp, LocalColorScheme.current.border.bold, RoundedCornerShape(12.dp))
             .padding(12.dp),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.SpaceBetween
@@ -207,9 +194,8 @@ private fun RowScope.Discord(uriHandler: UriHandler) {
             Image(painterResource("icons/discord.png"), "")
             Text(
                 text = "Join the discord server!",
-                color = Color.DarkGray,
-                fontSize = 14.sp,
-                fontWeight = FontWeight(600),
+                color = LocalColorScheme.current.text.heading,
+                style = LocalTypography.current.labelLMedium,
             )
         }
         Image(Icons.Rounded.ChevronRight, "")
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Settings.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Settings.kt
index 1b5a54f..22fbe43 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Settings.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/Settings.kt
@@ -27,9 +27,8 @@ import androidx.lifecycle.viewmodel.compose.viewModel
 import app.cleanmeter.core.common.hardwaremonitor.cpuReadings
 import app.cleanmeter.core.common.hardwaremonitor.gpuReadings
 import app.cleanmeter.core.common.hardwaremonitor.networkReadings
+import app.cleanmeter.core.designsystem.LocalColorScheme
 import app.cleanmeter.target.desktop.ui.AppTheme
-import app.cleanmeter.target.desktop.ui.ColorTokens.BackgroundOffWhite
-import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray
 import app.cleanmeter.target.desktop.ui.components.SettingsTab
 import app.cleanmeter.target.desktop.ui.components.TopBar
 import app.cleanmeter.target.desktop.ui.components.UpdateToast
@@ -42,15 +41,15 @@ import app.cleanmeter.updater.UpdateState
 
 @Composable
 fun WindowScope.Settings(
+    isDarkTheme: Boolean,
     viewModel: SettingsViewModel = viewModel(),
     onCloseRequest: () -> Unit,
     onMinimizeRequest: () -> Unit,
     getOverlayPosition: () -> IntOffset
-) = AppTheme {
+) = AppTheme(isDarkTheme) {
     val settingsState by viewModel.state.collectAsState(SettingsState())
     val updaterState by AutoUpdater.state.collectAsState()
 
-
     if (settingsState.overlaySettings == null) {
         return@AppTheme
     }
@@ -58,7 +57,7 @@ fun WindowScope.Settings(
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .background(BackgroundOffWhite, RoundedCornerShape(12.dp))
+            .background(LocalColorScheme.current.background.surface, RoundedCornerShape(12.dp))
     ) {
         WindowDraggableArea {
             TopBar(onCloseRequest = onCloseRequest, onMinimizeRequest = onMinimizeRequest)
@@ -138,7 +137,7 @@ private fun TabContent(
             onOverlayCustomPositionEnable = { viewModel.onEvent(SettingsEvent.OverlayCustomPositionEnable(it)) },
         )
 
-        2 -> AppSettingsUi()
+        2 -> AppSettingsUi(overlaySettings = settingsState.overlaySettings!!, onEvent = viewModel::onEvent)
         3 -> HelpSettingsUi()
         else -> Unit
     }
@@ -151,7 +150,7 @@ private fun TabRow(selectedTabIndex: Int, onTabIndexChange: (Int) -> Unit) {
             selectedTabIndex = selectedTabIndex,
             modifier = Modifier.weight(1f).height(44.dp),
             backgroundColor = Color.Transparent,
-            contentColor = DarkGray,
+            contentColor = LocalColorScheme.current.background.brand,
             edgePadding = 0.dp,
             indicator = { tabPositions -> },
             divider = {}
@@ -183,7 +182,7 @@ private fun TabRow(selectedTabIndex: Int, onTabIndexChange: (Int) -> Unit) {
             onClick = { onTabIndexChange(3) },
             label = "",
             icon = painterResource("icons/help.svg"),
-            modifier = Modifier.weight(0.1f).padding(start = 4.dp),
+            modifier = Modifier.weight(0.1f),
         )
     }
 }
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsViewModel.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsViewModel.kt
index cb17b89..0bc2f35 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsViewModel.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsViewModel.kt
@@ -30,6 +30,7 @@ sealed class SettingsEvent {
     data class OverlayOrientationSelect(val isHorizontal: Boolean) : SettingsEvent()
     data class OverlayOpacityChange(val opacity: Float) : SettingsEvent()
     data class OverlayGraphChange(val progressType: OverlaySettings.ProgressType) : SettingsEvent()
+    data class DarkThemeToggle(val isEnabled: Boolean) : SettingsEvent()
 }
 
 class SettingsViewModel : ViewModel() {
@@ -73,6 +74,14 @@ class SettingsViewModel : ViewModel() {
             is SettingsEvent.OverlayOrientationSelect -> onOverlayOrientationSelect(event.isHorizontal, this)
             is SettingsEvent.OverlayOpacityChange -> onOverlayOpacityChange(event.opacity, this)
             is SettingsEvent.OverlayGraphChange -> onOverlayGraphChange(event.progressType, this)
+            is SettingsEvent.DarkThemeToggle -> onDarkModeToggle(event.isEnabled, this)
+        }
+    }
+
+    private fun onDarkModeToggle(enabled: Boolean, settingsState: SettingsState) {
+        with(settingsState) {
+            val newSettings = overlaySettings?.copy(isDarkTheme = enabled)
+            OverlaySettingsRepository.setOverlaySettings(newSettings)
         }
     }
 
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsWindow.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsWindow.kt
index 451de85..644cc46 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsWindow.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/SettingsWindow.kt
@@ -19,6 +19,7 @@ import com.github.kwhat.jnativehook.GlobalScreen
 
 @Composable
 fun ApplicationScope.SettingsWindow(
+    isDarkTheme: Boolean,
     getOverlayPosition: () -> IntOffset,
     onApplicationExit: () -> Unit,
 ) {
@@ -45,6 +46,7 @@ fun ApplicationScope.SettingsWindow(
         transparent = true,
     ) {
         Settings(
+            isDarkTheme = isDarkTheme,
             onCloseRequest = { isVisible = false },
             onMinimizeRequest = { state.isMinimized = true },
             getOverlayPosition = getOverlayPosition
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/AppSettingsUi.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/AppSettingsUi.kt
index f1f89ef..8d46539 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/AppSettingsUi.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/AppSettingsUi.kt
@@ -1,9 +1,20 @@
 package app.cleanmeter.target.desktop.ui.settings.tabs
 
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.TooltipArea
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Icon
+import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.AdminPanelSettings
 import androidx.compose.runtime.Composable
@@ -11,42 +22,87 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.unit.dp
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
+import app.cleanmeter.core.os.win32.WinRegistry
 import app.cleanmeter.target.desktop.data.PREFERENCE_START_MINIMIZED
 import app.cleanmeter.target.desktop.data.PreferencesRepository
+import app.cleanmeter.target.desktop.model.OverlaySettings
 import app.cleanmeter.target.desktop.ui.components.CheckboxWithLabel
-import app.cleanmeter.target.desktop.ui.components.Label
-import app.cleanmeter.target.desktop.ui.components.Section
+import app.cleanmeter.target.desktop.ui.components.StyleCard
+import app.cleanmeter.target.desktop.ui.components.section.Section
 import app.cleanmeter.target.desktop.ui.settings.FooterUi
-import app.cleanmeter.core.os.win32.WinRegistry
+import app.cleanmeter.target.desktop.ui.settings.SettingsEvent
 
 @Composable
-fun AppSettingsUi() = Box(modifier = Modifier.fillMaxSize().padding(top = 20.dp)) {
-    Column(
-        modifier = Modifier.verticalScroll(rememberScrollState()),
-        verticalArrangement = Arrangement.spacedBy(16.dp)
-    ) {
-        Section(
-            title = "GENERAL",
+fun AppSettingsUi(
+    overlaySettings: OverlaySettings,
+    onEvent: (SettingsEvent) -> Unit
+) = Column(
+    modifier = Modifier.fillMaxSize().padding(top = 20.dp).verticalScroll(rememberScrollState()),
+    verticalArrangement = Arrangement.spacedBy(16.dp)
+) {
+    Section(title = "GENERAL") {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(12.dp)
         ) {
-            Column(
-                verticalArrangement = Arrangement.spacedBy(12.dp)
-            ) {
-                startWithWindowsCheckbox()
-                startMinimizedCheckbox()
-            }
+            startWithWindowsCheckbox()
+            startMinimizedCheckbox()
+        }
+    }
+
+    Section(title = "APPEARANCE") {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
+        ) {
+            StyleCard(
+                label = "Light",
+                isSelected = !overlaySettings.isDarkTheme,
+                modifier = Modifier.weight(.3f).aspectRatio(1.15f),
+                onClick = { onEvent(SettingsEvent.DarkThemeToggle(false)) },
+                content = {
+                    Image(
+                        painter = painterResource("icons/light_mode.png"),
+                        contentDescription = "light mode image"
+                    )
+                }
+            )
+
+            StyleCard(
+                label = "Dark",
+                isSelected = overlaySettings.isDarkTheme,
+                modifier = Modifier.weight(.3f).aspectRatio(1.15f),
+                onClick = { onEvent(SettingsEvent.DarkThemeToggle(true)) },
+                content = {
+                    Image(
+                        painter = painterResource("icons/dark_mode.png"),
+                        contentDescription = "dark mode image",
+                        modifier = Modifier.align(Alignment.Center)
+                    )
+                }
+            )
+
+            StyleCard(
+                label = "System",
+                isSelected = !overlaySettings.isDarkTheme,
+                modifier = Modifier.weight(.3f).aspectRatio(1.15f),
+                onClick = { onEvent(SettingsEvent.DarkThemeToggle(true)) },
+                content = {
+                    Image(
+                        painter = painterResource("icons/dynamic_mode.png"),
+                        contentDescription = "dynamic mode image",
+                        modifier = Modifier.align(Alignment.Center)
+                    )
+                }
+            )
         }
     }
 
-    FooterUi(modifier = Modifier.align(Alignment.BottomStart))
+    FooterUi(modifier = Modifier)
 }
 
 @OptIn(ExperimentalFoundationApi::class)
@@ -66,10 +122,20 @@ private fun startWithWindowsCheckbox() {
             }
         }
     ) {
-        TooltipArea({
-            Label(text = "Admin rights needed")
-        }) {
-            Icon(imageVector = Icons.Filled.AdminPanelSettings, null)
+        TooltipArea(
+            delayMillis = 0,
+            tooltip = {
+                Text(
+                    text = "Admin rights needed",
+                    style = LocalTypography.current.labelM,
+                    color = LocalColorScheme.current.text.heading,
+                )
+            }) {
+            Icon(
+                imageVector = Icons.Filled.AdminPanelSettings,
+                contentDescription = null,
+                tint = LocalColorScheme.current.icon.bolderActive
+            )
         }
     }
 }
@@ -86,3 +152,14 @@ private fun startMinimizedCheckbox() {
         },
     )
 }
+
+@Composable
+private fun darkThemeCheckbox(overlaySettings: OverlaySettings, onEvent: (SettingsEvent) -> Unit) {
+    CheckboxWithLabel(
+        label = "Dark Theme",
+        checked = overlaySettings.isDarkTheme,
+        onCheckedChange = { value ->
+            onEvent(SettingsEvent.DarkThemeToggle(value))
+        },
+    )
+}
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/HelpSettingsUi.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/HelpSettingsUi.kt
index 92ce2ba..6db70cd 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/HelpSettingsUi.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/HelpSettingsUi.kt
@@ -2,13 +2,13 @@ package app.cleanmeter.target.desktop.ui.settings.tabs
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.ClickableText
@@ -17,23 +17,20 @@ import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.ParagraphStyle
 import androidx.compose.ui.text.SpanStyle
-import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.buildAnnotatedString
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.style.TextIndent
 import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.LabelGray
-import app.cleanmeter.target.desktop.ui.components.CollapsibleSection
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
+import app.cleanmeter.target.desktop.ui.components.section.CollapsibleSection
 
 @Composable
 internal fun HelpSettingsUi() {
@@ -66,7 +63,10 @@ internal fun HelpSettingsUi() {
                 "The sensors look wrong" to buildAnnotatedString { append("Try setting up each sensor via the Stats tab") },
                 "Neither sensors dropdown or the overlay are showing up" to buildAnnotatedString {
                     append("You need to have ")
-                    pushStringAnnotation("click", "https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/runtime-desktop-8.0.11-windows-x64-installer")
+                    pushStringAnnotation(
+                        "click",
+                        "https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/runtime-desktop-8.0.11-windows-x64-installer"
+                    )
                     withStyle(SpanStyle(textDecoration = TextDecoration.Underline)) {
                         append(".NET Core Framework")
                     }
@@ -120,11 +120,8 @@ private fun BulletList(
                 }
             }
         },
-        style = TextStyle(
-            fontSize = 14.sp,
-            color = DarkGray,
-            fontWeight = FontWeight(500)
-        )
+        style = LocalTypography.current.labelLMedium,
+        color = LocalColorScheme.current.text.heading,
     )
 }
 
@@ -135,29 +132,20 @@ private fun StyledNumberedList(
     Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
         items.forEachIndexed { index, item ->
             Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp)) {
-                Box(
-                    modifier = Modifier.background(DarkGray, CircleShape).size(26.dp)
-                ) {
-                    Text(
-                        text = "${index + 1}",
-                        style = TextStyle(
-                            fontSize = 14.sp,
-                            color = Color.White,
-                            fontWeight = FontWeight.Thin,
-                            lineHeight = 0.sp,
-                            textAlign = TextAlign.Center
-                        ),
-                        modifier = Modifier.align(Alignment.Center).padding(bottom = 2.dp)
-                    )
-                }
+                Text(
+                    text = "${index + 1}",
+                    style = LocalTypography.current.labelSSemiBold,
+                    textAlign = TextAlign.Center,
+                    color = LocalColorScheme.current.text.inverse,
+                    modifier = Modifier
+                        .background(LocalColorScheme.current.background.brand, CircleShape)
+                        .size(26.dp)
+                        .wrapContentHeight(align = Alignment.CenterVertically)
+                )
                 Text(
                     text = item,
-                    style = TextStyle(
-                        fontSize = 14.sp,
-                        color = DarkGray,
-                        fontWeight = FontWeight.Medium,
-                        lineHeight = 0.sp,
-                    )
+                    style = LocalTypography.current.labelLMedium,
+                    color = LocalColorScheme.current.text.heading,
                 )
             }
         }
@@ -179,22 +167,15 @@ private fun FrequentlyAskedQuestions(
                         append("  ")
                         append(pair.first)
                     },
-                    style = TextStyle(
-                        fontSize = 14.sp,
-                        color = DarkGray,
-                        fontWeight = FontWeight(500),
-                        lineHeight = 0.sp
-                    )
+                    style = LocalTypography.current.labelLMedium,
+                    color = LocalColorScheme.current.text.heading,
                 )
                 Row {
                     Spacer(modifier = Modifier.width(16.dp))
                     ClickableText(
                         text = pair.second,
-                        style = TextStyle(
-                            fontSize = 14.sp,
-                            color = LabelGray,
-                            fontWeight = FontWeight(400),
-                            lineHeight = 0.sp
+                        style = LocalTypography.current.labelL.copy(
+                            color = LocalColorScheme.current.text.paragraph1,
                         ),
                         onClick = { offset ->
                             pair.second.getStringAnnotations("click", offset, offset).firstOrNull()?.let {
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/OverlaySettingsUi.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/OverlaySettingsUi.kt
index 64881f9..cf163b1 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/OverlaySettingsUi.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/OverlaySettingsUi.kt
@@ -16,14 +16,14 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import app.cleanmeter.core.common.hardwaremonitor.HardwareMonitorData
+import app.cleanmeter.core.designsystem.LocalColorScheme
 import app.cleanmeter.target.desktop.model.OverlaySettings
-import app.cleanmeter.target.desktop.ui.ColorTokens.LabelGray
-import app.cleanmeter.target.desktop.ui.components.CheckboxSection
+import app.cleanmeter.target.desktop.ui.components.section.CheckboxSection
 import app.cleanmeter.target.desktop.ui.components.CheckboxWithLabel
-import app.cleanmeter.target.desktop.ui.components.CustomBodyCheckboxSection
-import app.cleanmeter.target.desktop.ui.components.DropdownSection
+import app.cleanmeter.target.desktop.ui.components.section.CustomBodyCheckboxSection
+import app.cleanmeter.target.desktop.ui.components.section.DropdownSection
 import app.cleanmeter.target.desktop.ui.components.KeyboardShortcutInfoLabel
-import app.cleanmeter.target.desktop.ui.components.SensorReadingDropdownMenu
+import app.cleanmeter.target.desktop.ui.components.dropdown.SensorReadingDropdownMenu
 import app.cleanmeter.target.desktop.ui.settings.CheckboxSectionOption
 import app.cleanmeter.target.desktop.ui.settings.SectionType
 import app.cleanmeter.target.desktop.ui.settings.SensorType
@@ -83,7 +83,6 @@ fun OverlaySettingsUi(
 
                             if (readings.isNotEmpty() && option.isSelected && option.useCustomSensor) {
                                 SensorReadingDropdownMenu(
-                                    modifier = Modifier.padding(start = 18.dp),
                                     options = readings,
                                     onValueChanged = {
                                         onCustomSensorSelect(option.type, it.Identifier)
@@ -118,7 +117,6 @@ fun OverlaySettingsUi(
                             )
                             if (readings.isNotEmpty() && option.isSelected && option.useCustomSensor) {
                                 SensorReadingDropdownMenu(
-                                    modifier = Modifier.padding(start = 18.dp),
                                     options = readings,
                                     onValueChanged = {
                                         onCustomSensorSelect(option.type, it.Identifier)
@@ -166,7 +164,6 @@ fun OverlaySettingsUi(
 
                             if (readings.isNotEmpty() && option.isSelected && option.useCustomSensor) {
                                 SensorReadingDropdownMenu(
-                                    modifier = Modifier.padding(start = 18.dp),
                                     dropdownLabel = {
                                         "${getHardwareSensors().firstOrNull { hardware -> hardware.Identifier == it.HardwareIdentifier }?.Name}: ${it.Name} (${it.Value} - ${it.SensorType})"
                                     },
@@ -197,7 +194,7 @@ fun OverlaySettingsUi(
     Text(
         text = "May your frames be high, and temps be low.",
         fontSize = 12.sp,
-        color = LabelGray,
+        color = LocalColorScheme.current.text.disabled,
         lineHeight = 0.sp,
         fontWeight = FontWeight(550),
         letterSpacing = 0.14.sp,
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/GraphType.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/GraphType.kt
index 8208cae..a3b1bfa 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/GraphType.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/GraphType.kt
@@ -3,6 +3,7 @@ package app.cleanmeter.target.desktop.ui.settings.tabs.style
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -10,7 +11,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import app.cleanmeter.target.desktop.model.OverlaySettings
 import app.cleanmeter.target.desktop.ui.components.StyleCard
-import app.cleanmeter.target.desktop.ui.components.ToggleSection
+import app.cleanmeter.target.desktop.ui.components.section.ToggleSection
 
 @Composable
 internal fun GraphType(
@@ -30,7 +31,7 @@ internal fun GraphType(
             StyleCard(
                 label = "Ring graph",
                 isSelected = overlaySettings.progressType == OverlaySettings.ProgressType.Circular,
-                modifier = Modifier.weight(.5f),
+                modifier = Modifier.weight(.5f).height(210.dp),
                 onClick = { onGraphTypeChange(OverlaySettings.ProgressType.Circular) },
                 content = {
                     Image(
@@ -43,7 +44,7 @@ internal fun GraphType(
             StyleCard(
                 label = "Bar graph",
                 isSelected = overlaySettings.progressType == OverlaySettings.ProgressType.Bar,
-                modifier = Modifier.weight(.5f),
+                modifier = Modifier.weight(.5f).height(210.dp),
                 onClick = { onGraphTypeChange(OverlaySettings.ProgressType.Bar) },
                 content = {
                     Image(
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Opacity.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Opacity.kt
index 555a102..bf70cf0 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Opacity.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Opacity.kt
@@ -11,18 +11,14 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Slider
 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.unit.dp
+import app.cleanmeter.core.designsystem.LocalColorScheme
 import app.cleanmeter.target.desktop.model.OverlaySettings
-import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostVisibleGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.BackgroundOffWhite
-import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.LabelGray
-import app.cleanmeter.target.desktop.ui.components.CollapsibleSection
 import app.cleanmeter.target.desktop.ui.components.SliderThumb
 import app.cleanmeter.target.desktop.ui.components.coercedValueAsFraction
 import app.cleanmeter.target.desktop.ui.components.drawTrack
+import app.cleanmeter.target.desktop.ui.components.section.CollapsibleSection
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -32,6 +28,10 @@ internal fun Opacity(
 ) {
     CollapsibleSection(title = "OPACITY") {
         Column {
+            val inactiveTrackColor = LocalColorScheme.current.background.surfaceSunkenSubtle
+            val activeTrackColor = LocalColorScheme.current.background.brand
+            val inactiveTickColor = LocalColorScheme.current.background.surfaceSunken
+            val activeTickColor = LocalColorScheme.current.background.brandHover
             Slider(
                 value = overlaySettings.opacity,
                 onValueChange = {
@@ -45,13 +45,13 @@ internal fun Opacity(
                             .height(24.dp)
                     ) {
                         drawTrack(
-                            FloatArray(sliderState.steps + 2) { it.toFloat() / (sliderState.steps + 1) },
-                            0f,
-                            sliderState.coercedValueAsFraction,
-                            BackgroundOffWhite,
-                            DarkGray,
-                            AlmostVisibleGray,
-                            Color.White,
+                            tickFractions = FloatArray(sliderState.steps + 2) { it.toFloat() / (sliderState.steps + 1) },
+                            activeRangeStart = 0f,
+                            activeRangeEnd = sliderState.coercedValueAsFraction,
+                            inactiveTrackColor = inactiveTrackColor,
+                            activeTrackColor = activeTrackColor,
+                            inactiveTickColor = inactiveTickColor,
+                            activeTickColor = activeTickColor,
                         )
                     }
                 },
@@ -60,9 +60,9 @@ internal fun Opacity(
                 }
             )
             Row(horizontalArrangement = Arrangement.SpaceBetween, modifier = Modifier.fillMaxWidth()) {
-                Icon(painterResource("icons/no_brightness.svg"), "", tint = LabelGray)
-                Icon(painterResource("icons/mid_brightness.svg"), "", tint = LabelGray)
-                Icon(painterResource("icons/full_brightness.svg"), "", tint = LabelGray)
+                Icon(painterResource("icons/no_brightness.svg"), "", tint = LocalColorScheme.current.icon.bolderActive)
+                Icon(painterResource("icons/mid_brightness.svg"), "", tint = LocalColorScheme.current.icon.bolderActive)
+                Icon(painterResource("icons/full_brightness.svg"), "", tint = LocalColorScheme.current.icon.bolderActive)
             }
         }
     }
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Orientation.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Orientation.kt
index 6b848df..79d957f 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Orientation.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Orientation.kt
@@ -3,14 +3,15 @@ package app.cleanmeter.target.desktop.ui.settings.tabs.style
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import app.cleanmeter.target.desktop.model.OverlaySettings
-import app.cleanmeter.target.desktop.ui.components.CollapsibleSection
 import app.cleanmeter.target.desktop.ui.components.StyleCard
+import app.cleanmeter.target.desktop.ui.components.section.CollapsibleSection
 
 @Composable
 internal fun Orientation(
@@ -24,7 +25,7 @@ internal fun Orientation(
             StyleCard(
                 label = "Horizontal",
                 isSelected = overlaySettings.isHorizontal,
-                modifier = Modifier.weight(.5f),
+                modifier = Modifier.weight(.5f).height(210.dp),
                 onClick = { onLayoutChange(true) },
                 content = {
                     Image(
@@ -37,7 +38,7 @@ internal fun Orientation(
             StyleCard(
                 label = "Vertical",
                 isSelected = !overlaySettings.isHorizontal,
-                modifier = Modifier.weight(.5f),
+                modifier = Modifier.weight(.5f).height(210.dp),
                 onClick = { onLayoutChange(false) },
                 content = {
                     Image(
diff --git a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Position.kt b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Position.kt
index 99b499d..6f29ded 100644
--- a/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Position.kt
+++ b/target/desktop/src/main/kotlin/app/cleanmeter/target/desktop/ui/settings/tabs/style/Position.kt
@@ -4,10 +4,12 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -18,25 +20,21 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Divider
 import androidx.compose.material.Icon
 import androidx.compose.material.Text
+import androidx.compose.material3.SwitchDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
+import app.cleanmeter.core.designsystem.LocalColorScheme
+import app.cleanmeter.core.designsystem.LocalTypography
 import app.cleanmeter.target.desktop.model.OverlaySettings
-import app.cleanmeter.target.desktop.ui.ColorTokens.AlmostVisibleGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.BarelyVisibleGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.DarkGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.LabelGray
-import app.cleanmeter.target.desktop.ui.ColorTokens.MutedGray
-import app.cleanmeter.target.desktop.ui.components.CollapsibleSection
 import app.cleanmeter.target.desktop.ui.components.StyleCard
 import app.cleanmeter.target.desktop.ui.components.Toggle
+import app.cleanmeter.target.desktop.ui.components.section.CollapsibleSection
 
-@OptIn(ExperimentalLayoutApi::class)
 @Composable
 internal fun Position(
     overlaySettings: OverlaySettings,
@@ -47,217 +45,208 @@ internal fun Position(
 ) {
     CollapsibleSection(title = "POSITION") {
         Column(verticalArrangement = Arrangement.spacedBy(20.dp)) {
-            FlowRow(
-                maxItemsInEachRow = 3,
-                horizontalArrangement = Arrangement.spacedBy(16.dp),
+            Column(
                 verticalArrangement = Arrangement.spacedBy(16.dp)
             ) {
-                StyleCard(
-                    label = "Top left",
-                    isSelected = overlaySettings.positionIndex == 0,
-                    modifier = Modifier.weight(.3f),
-                    onClick = { onOverlayPositionIndex(0) },
-                    content = {
-                        Box(
-                            modifier = Modifier
-                                .width(50.dp)
-                                .height(20.dp)
-                                .background(
-                                    if (overlaySettings.positionIndex == 0) DarkGray else MutedGray,
-                                    RoundedCornerShape(50)
-                                )
-                                .align(Alignment.TopStart)
-                        )
-                    }
-                )
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(16.dp),
+                ) {
+                    StyleCard(
+                        label = "Top left",
+                        isSelected = overlaySettings.positionIndex == 0,
+                        modifier = Modifier.weight(.3f).aspectRatio(1.15f),
+                        onClick = { onOverlayPositionIndex(0) },
+                        content = {
+                            PositionMarker(
+                                isSelected = overlaySettings.positionIndex == 0,
+                                alignment = Alignment.TopStart,
+                            )
+                        }
+                    )
 
-                StyleCard(
-                    label = "Top middle",
-                    isSelected = overlaySettings.positionIndex == 1,
-                    modifier = Modifier.weight(.3f),
-                    onClick = { onOverlayPositionIndex(1) },
-                    content = {
-                        Box(
-                            modifier = Modifier
-                                .width(50.dp)
-                                .height(20.dp)
-                                .background(
-                                    if (overlaySettings.positionIndex == 1) DarkGray else MutedGray,
-                                    RoundedCornerShape(50)
-                                )
-                                .align(Alignment.TopCenter)
-                        )
-                    }
-                )
+                    StyleCard(
+                        label = "Top middle",
+                        isSelected = overlaySettings.positionIndex == 1,
+                        modifier = Modifier.weight(.3f).aspectRatio(1.15f),
+                        onClick = { onOverlayPositionIndex(1) },
+                        content = {
+                            PositionMarker(
+                                isSelected = overlaySettings.positionIndex == 1,
+                                alignment = Alignment.TopCenter,
+                            )
+                        }
+                    )
 
-                StyleCard(
-                    label = "Top right",
-                    isSelected = overlaySettings.positionIndex == 2,
-                    modifier = Modifier.weight(.3f),
-                    onClick = { onOverlayPositionIndex(2) },
-                    content = {
-                        Box(
-                            modifier = Modifier
-                                .width(50.dp)
-                                .height(20.dp)
-                                .background(
-                                    if (overlaySettings.positionIndex == 2) DarkGray else MutedGray,
-                                    RoundedCornerShape(50)
-                                )
-                                .align(Alignment.TopEnd)
-                        )
-                    }
-                )
+                    StyleCard(
+                        label = "Top right",
+                        isSelected = overlaySettings.positionIndex == 2,
+                        modifier = Modifier.weight(.3f).aspectRatio(1.15f),
+                        onClick = { onOverlayPositionIndex(2) },
+                        content = {
+                            PositionMarker(
+                                isSelected = overlaySettings.positionIndex == 2,
+                                alignment = Alignment.TopEnd,
+                            )
+                        }
+                    )
+                }
 
-                StyleCard(
-                    label = "Bottom left",
-                    isSelected = overlaySettings.positionIndex == 3,
-                    modifier = Modifier.weight(.3f),
-                    onClick = { onOverlayPositionIndex(3) },
-                    content = {
-                        Box(
-                            modifier = Modifier
-                                .width(50.dp)
-                                .height(20.dp)
-                                .background(
-                                    if (overlaySettings.positionIndex == 3) DarkGray else MutedGray,
-                                    RoundedCornerShape(50)
-                                )
-                                .align(Alignment.BottomStart)
-                        )
-                    }
-                )
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(16.dp),
+                ) {
+                    StyleCard(
+                        label = "Bottom left",
+                        isSelected = overlaySettings.positionIndex == 3,
+                        modifier = Modifier.weight(.3f).aspectRatio(1.15f),
+                        onClick = { onOverlayPositionIndex(3) },
+                        content = {
+                            PositionMarker(
+                                isSelected = overlaySettings.positionIndex == 3,
+                                alignment = Alignment.BottomStart,
+                            )
+                        }
+                    )
 
-                StyleCard(
-                    label = "Bottom middle",
-                    isSelected = overlaySettings.positionIndex == 4,
-                    modifier = Modifier.weight(.3f),
-                    onClick = { onOverlayPositionIndex(4) },
-                    content = {
-                        Box(
-                            modifier = Modifier
-                                .width(50.dp)
-                                .height(20.dp)
-                                .background(
-                                    if (overlaySettings.positionIndex == 4) DarkGray else MutedGray,
-                                    RoundedCornerShape(50)
-                                )
-                                .align(Alignment.BottomCenter)
-                        )
-                    }
-                )
+                    StyleCard(
+                        label = "Bottom middle",
+                        isSelected = overlaySettings.positionIndex == 4,
+                        modifier = Modifier.weight(.3f).aspectRatio(1.15f),
+                        onClick = { onOverlayPositionIndex(4) },
+                        content = {
+                            PositionMarker(
+                                isSelected = overlaySettings.positionIndex == 4,
+                                alignment = Alignment.BottomCenter,
+                            )
+                        }
+                    )
 
-                StyleCard(
-                    label = "Bottom right",
-                    isSelected = overlaySettings.positionIndex == 5,
-                    modifier = Modifier.weight(.3f),
-                    onClick = { onOverlayPositionIndex(5) },
-                    content = {
-                        Box(
-                            modifier = Modifier
-                                .width(50.dp)
-                                .height(20.dp)
-                                .background(
-                                    if (overlaySettings.positionIndex == 5) DarkGray else MutedGray,
-                                    RoundedCornerShape(50)
-                                )
-                                .align(Alignment.BottomEnd)
-                        )
-                    }
-                )
+                    StyleCard(
+                        label = "Bottom right",
+                        isSelected = overlaySettings.positionIndex == 5,
+                        modifier = Modifier.weight(.3f).aspectRatio(1.15f),
+                        onClick = { onOverlayPositionIndex(5) },
+                        content = {
+                            PositionMarker(
+                                isSelected = overlaySettings.positionIndex == 5,
+                                alignment = Alignment.BottomEnd,
+                            )
+                        }
+                    )
+                }
             }
+        }
 
-            Divider()
+        Divider()
 
-            Column(verticalArrangement = Arrangement.spacedBy(20.dp)) {
+        Column(verticalArrangement = Arrangement.spacedBy(20.dp)) {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
                 Row(
-                    modifier = Modifier.fillMaxWidth(),
-                    horizontalArrangement = Arrangement.SpaceBetween,
+                    horizontalArrangement = Arrangement.spacedBy(12.dp),
                     verticalAlignment = Alignment.CenterVertically
                 ) {
-                    Row(
-                        horizontalArrangement = Arrangement.spacedBy(12.dp),
-                        verticalAlignment = Alignment.CenterVertically
-                    ) {
-                        Icon(
-                            modifier = Modifier.size(40.dp).border(1.dp, LabelGray, CircleShape).padding(10.dp),
-                            painter = painterResource("icons/drag_pan.svg"),
-                            tint = MutedGray,
-                            contentDescription = "",
+                    Icon(
+                        modifier = Modifier.size(40.dp).border(1.dp, LocalColorScheme.current.border.bold, CircleShape).padding(10.dp),
+                        painter = painterResource("icons/drag_pan.svg"),
+                        tint = LocalColorScheme.current.icon.bolderActive,
+                        contentDescription = "",
+                    )
+                    Column {
+                        Text(
+                            text = "Use custom position",
+                            style = LocalTypography.current.labelM,
+                            color = LocalColorScheme.current.text.heading,
+                        )
+                        Text(
+                            text = "Unlock to move around the overlay, lock it again to fix it's position.",
+                            style = LocalTypography.current.labelS,
+                            color = LocalColorScheme.current.text.paragraph1,
                         )
-                        Column {
-                            Text(
-                                text = "Use custom position",
-                                fontSize = 13.sp,
-                                color = DarkGray,
-                                lineHeight = 0.sp,
-                                fontWeight = FontWeight.Normal,
-                            )
-                            Text(
-                                text = "Unlock to move around the overlay, lock it again to fix it's position.",
-                                fontSize = 12.sp,
-                                color = LabelGray,
-                                lineHeight = 0.sp,
-                                fontWeight = FontWeight.Normal,
-                            )
-                        }
                     }
-                    Toggle(
-                        checked = overlaySettings.positionIndex == 6,
-                        onCheckedChange = {
-                            onOverlayCustomPositionEnable(it)
-                        },
-                    )
                 }
+                Toggle(
+                    checked = overlaySettings.positionIndex == 6,
+                    onCheckedChange = {
+                        onOverlayCustomPositionEnable(it)
+                    },
+                )
+            }
 
-                if (overlaySettings.positionIndex == 6) {
-                    Column(
-                        verticalArrangement = Arrangement.spacedBy(16.dp),
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .background(BarelyVisibleGray, RoundedCornerShape(12.dp))
-                            .padding(20.dp)
+            if (overlaySettings.positionIndex == 6) {
+                Column(
+                    verticalArrangement = Arrangement.spacedBy(16.dp),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .background(LocalColorScheme.current.background.surfaceSunkenSubtle, RoundedCornerShape(12.dp))
+                        .padding(20.dp)
+                ) {
+                    Row(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterHorizontally),
+                        verticalAlignment = Alignment.CenterVertically
                     ) {
-                        Row(
-                            modifier = Modifier.fillMaxWidth(),
-                            horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterHorizontally),
-                            verticalAlignment = Alignment.CenterVertically
-                        ) {
-                            Text(
-                                text = "Locked",
-                                fontSize = 13.sp,
-                                color = if (!overlaySettings.isPositionLocked) AlmostVisibleGray else DarkGray,
-                                lineHeight = 0.sp,
-                                fontWeight = FontWeight.Normal,
-                            )
-                            Toggle(
-                                customSize = true,
-                                checked = !overlaySettings.isPositionLocked,
-                                checkedTrackColor = DarkGray,
-                                onCheckedChange = {
-                                    val position = getOverlayPosition()
-                                    onOverlayCustomPosition(IntOffset(position.x, position.y), !it)
-                                },
-                                thumbContent = {
-                                    val icon = if (!overlaySettings.isPositionLocked) {
-                                        "icons/lock_open.svg"
-                                    } else {
-                                        "icons/lock_closed.svg"
-                                    }
-                                    Icon(painterResource(icon), "")
+                        Text(
+                            text = "Locked",
+                            style = LocalTypography.current.labelLMedium,
+                            color = if (!overlaySettings.isPositionLocked) LocalColorScheme.current.text.disabledLighter else LocalColorScheme.current.text.heading,
+                        )
+                        Toggle(
+                            customSize = true,
+                            checked = !overlaySettings.isPositionLocked,
+                            colors = SwitchDefaults.colors(
+                                checkedThumbColor = LocalColorScheme.current.background.surfaceRaised,
+                                checkedTrackColor = LocalColorScheme.current.background.brand,
+                                checkedBorderColor = Color.Transparent,
+                                uncheckedThumbColor = LocalColorScheme.current.background.surfaceRaised,
+                                uncheckedTrackColor = LocalColorScheme.current.background.surface,
+                                uncheckedBorderColor = Color.Transparent,
+                            ),
+                            onCheckedChange = {
+                                val position = getOverlayPosition()
+                                onOverlayCustomPosition(IntOffset(position.x, position.y), !it)
+                            },
+                            thumbContent = {
+                                val icon = if (!overlaySettings.isPositionLocked) {
+                                    "icons/lock_open.svg"
+                                } else {
+                                    "icons/lock_closed.svg"
                                 }
-                            )
-                            Text(
-                                text = "Unlocked",
-                                fontSize = 13.sp,
-                                color = if (!overlaySettings.isPositionLocked) DarkGray else AlmostVisibleGray,
-                                lineHeight = 0.sp,
-                                fontWeight = FontWeight.Normal,
-                            )
-                        }
+                                Icon(
+                                    painter = painterResource(icon),
+                                    contentDescription = "",
+                                    tint = if (overlaySettings.isPositionLocked) LocalColorScheme.current.icon.bolderActive else LocalColorScheme.current.border.brand,
+                                    modifier = Modifier.border(1.dp, LocalColorScheme.current.border.bold, CircleShape).padding(4.dp)
+                                )
+                            },
+                        )
+                        Text(
+                            text = "Unlocked",
+                            style = LocalTypography.current.labelLMedium,
+                            color = if (!overlaySettings.isPositionLocked) LocalColorScheme.current.text.heading else LocalColorScheme.current.text.disabledLighter,
+                        )
                     }
                 }
             }
         }
     }
+}
+
+@Composable
+private fun BoxScope.PositionMarker(
+    isSelected: Boolean,
+    alignment: Alignment,
+) {
+    Box(
+        modifier = Modifier
+            .width(50.dp)
+            .height(20.dp)
+            .background(
+                if (isSelected) LocalColorScheme.current.background.brand else LocalColorScheme.current.background.surfaceSunken,
+                RoundedCornerShape(50)
+            )
+            .align(alignment)
+    )
 }
\ No newline at end of file
diff --git a/target/desktop/src/main/resources/icons/dark_mode.png b/target/desktop/src/main/resources/icons/dark_mode.png
new file mode 100644
index 0000000..e75f578
Binary files /dev/null and b/target/desktop/src/main/resources/icons/dark_mode.png differ
diff --git a/target/desktop/src/main/resources/icons/dynamic_mode.png b/target/desktop/src/main/resources/icons/dynamic_mode.png
new file mode 100644
index 0000000..fd20380
Binary files /dev/null and b/target/desktop/src/main/resources/icons/dynamic_mode.png differ
diff --git a/target/desktop/src/main/resources/icons/hotkey.png b/target/desktop/src/main/resources/icons/hotkey.png
deleted file mode 100644
index ad1ba8f..0000000
Binary files a/target/desktop/src/main/resources/icons/hotkey.png and /dev/null differ
diff --git a/target/desktop/src/main/resources/icons/light_mode.png b/target/desktop/src/main/resources/icons/light_mode.png
new file mode 100644
index 0000000..adb2867
Binary files /dev/null and b/target/desktop/src/main/resources/icons/light_mode.png differ