diff --git a/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/FrostPreview.kt b/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/FrostPreview.kt
new file mode 100644
index 000000000..360a38c6d
--- /dev/null
+++ b/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/FrostPreview.kt
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2023 Allan Wang
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+package com.pitchedapps.frost.compose
+
+import android.app.Activity
+import android.graphics.Color
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalInspectionMode
+import androidx.core.view.WindowCompat
+
+/** Wrapper used for compose previews */
+@Composable
+fun FrostPreview(content: @Composable () -> Unit) {
+  val isPreview = LocalInspectionMode.current
+  val activity = LocalContext.current as Activity
+  LaunchedEffect(Unit) {
+    if (!isPreview) {
+      println("FrostPreview is in use")
+    }
+    val window = activity.window
+    WindowCompat.setDecorFitsSystemWindows(window, false)
+    window.statusBarColor = Color.TRANSPARENT
+    window.navigationBarColor = Color.TRANSPARENT
+  }
+  FrostTheme(isDarkTheme = true, content = content)
+}
diff --git a/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/settings/SettingsListDsl.kt b/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/settings/SettingsListDsl.kt
index 54695f8c4..70ac0e89e 100644
--- a/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/settings/SettingsListDsl.kt
+++ b/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/settings/SettingsListDsl.kt
@@ -18,7 +18,6 @@ package com.pitchedapps.frost.compose.settings
 
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -26,6 +25,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import com.pitchedapps.frost.compose.FrostPreview
 
 @Composable
 fun SettingsListDsl(
@@ -49,7 +49,7 @@ fun SettingsListDslPreview() {
 
   var state by remember { mutableStateOf(Model()) }
 
-  MaterialTheme {
+  FrostPreview {
     SettingsListDsl {
       checkbox(
         title = "Check 1",
diff --git a/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/settings/SettingsListItem.kt b/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/settings/SettingsListItem.kt
index 8fa729669..f54583996 100644
--- a/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/settings/SettingsListItem.kt
+++ b/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/settings/SettingsListItem.kt
@@ -25,7 +25,6 @@ import androidx.compose.material.icons.outlined.Person
 import androidx.compose.material3.Checkbox
 import androidx.compose.material3.Icon
 import androidx.compose.material3.ListItem
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -37,6 +36,7 @@ import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.pitchedapps.frost.compose.FrostPreview
 import com.pitchedapps.frost.ext.optionalCompose
 import com.pitchedapps.frost.ext.thenIf
 
@@ -82,7 +82,7 @@ fun SettingsListItem(
 private fun SettingsListItemPreview() {
   var state by remember { mutableStateOf(false) }
 
-  MaterialTheme {
+  FrostPreview {
     SettingsListItem(
       icon = Icons.Outlined.Person,
       title = "Test Title",
diff --git a/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/settings/SettingsListItemDsl.kt b/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/settings/SettingsListItemDsl.kt
index a9083ba49..4a6274dff 100644
--- a/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/settings/SettingsListItemDsl.kt
+++ b/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/settings/SettingsListItemDsl.kt
@@ -16,11 +16,19 @@
  */
 package com.pitchedapps.frost.compose.settings
 
+import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.Checkbox
 import androidx.compose.material3.Switch
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.vector.ImageVector
 
+@Composable
+fun LazyListScope.settingsListDsl(content: @Composable SettingsListDsl.() -> Unit) {
+  val items = SettingsDsl.settingsListDsl(content)
+  items(items) { compose -> compose() }
+}
+
 @Composable
 fun SettingsDsl.settingsListDsl(
   content: @Composable SettingsListDsl.() -> Unit
diff --git a/app-compose/src/main/kotlin/com/pitchedapps/frost/settings/SettingsScreen.kt b/app-compose/src/main/kotlin/com/pitchedapps/frost/settings/SettingsScreen.kt
index 47a374262..2fbc441c6 100644
--- a/app-compose/src/main/kotlin/com/pitchedapps/frost/settings/SettingsScreen.kt
+++ b/app-compose/src/main/kotlin/com/pitchedapps/frost/settings/SettingsScreen.kt
@@ -16,10 +16,95 @@
  */
 package com.pitchedapps.frost.settings
 
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.ArrowBack
+import androidx.compose.material.icons.outlined.Info
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MediumTopAppBar
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.navigation.NavBackStackEntry
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
+import com.pitchedapps.frost.R
+import com.pitchedapps.frost.compose.FrostPreview
+import com.pitchedapps.frost.settings.screens.MainSettingsScreen
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SettingsScreen() {
   val navController = rememberNavController()
+
+  val topBarScrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+
+  Scaffold(
+    topBar = {
+      MediumTopAppBar(
+        scrollBehavior = topBarScrollBehavior,
+        navigationIcon = {
+          IconButton(onClick = {}) {
+            Icon(imageVector = Icons.Outlined.ArrowBack, contentDescription = null)
+          }
+        },
+        title = {
+          val entry by navController.currentBackStackEntryAsState()
+
+          val title =
+            entry
+              ?.destination
+              ?.route
+              ?.let { SettingsPages.valueOf(it) }
+              ?.titleId
+              ?.let { stringResource(id = it) }
+
+          if (title != null) {
+            Text(text = title)
+          }
+        },
+        actions = { IconButton(onClick = {}) { Icon(Icons.Outlined.Info, null) } },
+      )
+    },
+  ) { paddingValue ->
+    NavHost(
+      modifier =
+        Modifier.fillMaxSize()
+          .nestedScroll(topBarScrollBehavior.nestedScrollConnection)
+          .padding(paddingValue),
+      navController = navController,
+      startDestination = SettingsPages.Main.name,
+    ) {
+      composable(SettingsPages.Main) { MainSettingsScreen() }
+      /*...*/
+    }
+  }
+}
+
+private fun NavGraphBuilder.composable(
+  route: SettingsPages,
+  content: @Composable (NavBackStackEntry) -> Unit
+) = composable(route = route.name, content = content)
+
+private enum class SettingsPages(val titleId: Int) {
+  Main(R.string.settings),
+  Appearance(R.string.appearance)
+}
+
+@Preview
+@Composable
+fun SettingsScreenPreview() {
+  FrostPreview { SettingsScreen() }
 }
diff --git a/app-compose/src/main/kotlin/com/pitchedapps/frost/settings/screens/MainSettingsScreen.kt b/app-compose/src/main/kotlin/com/pitchedapps/frost/settings/screens/MainSettingsScreen.kt
index 06dda2a01..dfb627c13 100644
--- a/app-compose/src/main/kotlin/com/pitchedapps/frost/settings/screens/MainSettingsScreen.kt
+++ b/app-compose/src/main/kotlin/com/pitchedapps/frost/settings/screens/MainSettingsScreen.kt
@@ -25,12 +25,12 @@ import androidx.compose.material.icons.outlined.Palette
 import androidx.compose.material.icons.outlined.Replay
 import androidx.compose.material.icons.outlined.Translate
 import androidx.compose.material.icons.outlined.TrendingUp
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import com.pitchedapps.frost.R
+import com.pitchedapps.frost.compose.FrostPreview
 import com.pitchedapps.frost.compose.settings.SettingsListDsl
 
 @Composable
@@ -86,5 +86,5 @@ fun MainSettingsScreen(modifier: Modifier = Modifier) {
 @Preview
 @Composable
 fun MainSettingsScreenPreview() {
-  MaterialTheme { MainSettingsScreen() }
+  FrostPreview { MainSettingsScreen() }
 }