diff --git a/ui/src/main/java/de/mm20/launcher2/ui/component/preferences/Preference.kt b/ui/src/main/java/de/mm20/launcher2/ui/component/preferences/Preference.kt
new file mode 100644
index 00000000..94b84566
--- /dev/null
+++ b/ui/src/main/java/de/mm20/launcher2/ui/component/preferences/Preference.kt
@@ -0,0 +1,55 @@
+package de.mm20.launcher2.ui.component.preferences
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+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.vector.ImageVector
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun Preference(
+    icon: ImageVector,
+    title: String,
+    summary: String? = null,
+    onClick: () -> Unit = {},
+    controls: @Composable (() -> Unit)? = null
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = Modifier
+            .fillMaxWidth()
+            .clickable(onClick = onClick)
+            .padding(horizontal = 16.dp, vertical = 16.dp),
+    ) {
+        Icon(
+            imageVector = icon,
+            contentDescription = null,
+            modifier = Modifier.padding(end = 24.dp),
+            tint = MaterialTheme.colors.primary
+        )
+        Column(
+            modifier = Modifier.weight(1f)
+        ) {
+            Text(text = title, style = MaterialTheme.typography.body1)
+            if (summary != null) {
+                Text(
+                    text = summary,
+                    style = MaterialTheme.typography.body2,
+                    modifier = Modifier.padding(top = 2.dp)
+                )
+            }
+        }
+        if (controls != null) {
+            Box(
+                modifier = Modifier.padding(start = 24.dp)
+            ) {
+                controls()
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/ui/src/main/java/de/mm20/launcher2/ui/component/preferences/PreferenceScreen.kt b/ui/src/main/java/de/mm20/launcher2/ui/component/preferences/PreferenceScreen.kt
new file mode 100644
index 00000000..9d2ea1e3
--- /dev/null
+++ b/ui/src/main/java/de/mm20/launcher2/ui/component/preferences/PreferenceScreen.kt
@@ -0,0 +1,48 @@
+package de.mm20.launcher2.ui.component.preferences
+
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.ArrowBack
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import com.google.accompanist.insets.statusBarsPadding
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
+import de.mm20.launcher2.ui.locals.LocalNavController
+
+@Composable
+fun PreferenceScreen(
+    title: String,
+    content: LazyListScope.() -> Unit
+) {
+    val navController = LocalNavController.current
+    val systemUiController = rememberSystemUiController()
+    systemUiController.setStatusBarColor(MaterialTheme.colors.surface)
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                backgroundColor = MaterialTheme.colors.surface,
+                title = {
+                    Text(title)
+                },
+                modifier = Modifier.statusBarsPadding(),
+                navigationIcon = {
+                    IconButton(onClick = {
+                        navController?.navigateUp()
+                    }) {
+                        Icon(imageVector = Icons.Rounded.ArrowBack, contentDescription = "Back")
+                    }
+                }
+            )
+        }) {
+        LazyColumn(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(it),
+            content = content
+        )
+    }
+}
\ No newline at end of file
diff --git a/ui/src/main/java/de/mm20/launcher2/ui/screens/settings/SettingsMainScreen.kt b/ui/src/main/java/de/mm20/launcher2/ui/screens/settings/SettingsMainScreen.kt
index 8d12125d..64d2a49e 100644
--- a/ui/src/main/java/de/mm20/launcher2/ui/screens/settings/SettingsMainScreen.kt
+++ b/ui/src/main/java/de/mm20/launcher2/ui/screens/settings/SettingsMainScreen.kt
@@ -1,32 +1,66 @@
 package de.mm20.launcher2.ui.screens.settings
 
-import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.rounded.ArrowBack
+import androidx.compose.material.icons.rounded.*
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import com.google.accompanist.insets.statusBarsPadding
 import de.mm20.launcher2.ui.R
-import de.mm20.launcher2.ui.locals.LocalNavController
+import de.mm20.launcher2.ui.component.preferences.Preference
+import de.mm20.launcher2.ui.component.preferences.PreferenceScreen
 
 @Composable
 fun SettingsMainScreen() {
-    val navController = LocalNavController.current
-    Scaffold(topBar = {
-        TopAppBar(
-            title = {
-                Text(stringResource(id = R.string.title_activity_settings))
-            },
-            modifier = Modifier.statusBarsPadding(),
-            navigationIcon = {
-                IconButton(onClick = {
-                    navController?.navigateUp()
-                }) {
-                    Icon(imageVector = Icons.Rounded.ArrowBack, contentDescription = "Back")
-                }
-            }
-        )
-    }) {
+    PreferenceScreen(
+        title = stringResource(id = R.string.title_activity_settings)
+    ) {
+        item {
+            Preference(
+                icon = Icons.Rounded.Palette,
+                title = stringResource(id = R.string.preference_screen_appearance),
+                summary = stringResource(id = R.string.preference_screen_appearance_summary)
+            )
+        }
+        item {
+            Preference(
+                icon = Icons.Rounded.Search,
+                title = stringResource(id = R.string.preference_screen_search),
+                summary = stringResource(id = R.string.preference_screen_search_summary)
+            )
+        }
+        item {
+            Preference(
+                icon = Icons.Rounded.Palette,
+                title = stringResource(id = R.string.preference_screen_badges),
+                summary = stringResource(id = R.string.preference_screen_badges_summary)
+            )
+        }
+        item {
+            Preference(
+                icon = Icons.Rounded.LightMode,
+                title = stringResource(id = R.string.preference_screen_weather),
+                summary = stringResource(id = R.string.preference_screen_weather_summary)
+            )
+        }
+        item {
+            Preference(
+                icon = Icons.Rounded.Today,
+                title = stringResource(id = R.string.preference_screen_calendar),
+                summary = stringResource(id = R.string.preference_screen_calendar_summary)
+            )
+        }
+        item {
+            Preference(
+                icon = Icons.Rounded.AccountBox,
+                title = stringResource(id = R.string.preference_screen_services),
+                summary = stringResource(id = R.string.preference_screen_services_summary)
+            )
+        }
+        item {
+            Preference(
+                icon = Icons.Rounded.Info,
+                title = stringResource(id = R.string.preference_screen_about),
+                summary = stringResource(id = R.string.preference_screen_about_summary)
+            )
+        }
     }
 }
\ No newline at end of file