diff --git a/app/dependencies/releaseRuntimeClasspath.txt b/app/dependencies/releaseRuntimeClasspath.txt
index 93b664499..6af65471e 100644
--- a/app/dependencies/releaseRuntimeClasspath.txt
+++ b/app/dependencies/releaseRuntimeClasspath.txt
@@ -42,6 +42,8 @@ androidx.compose.ui:ui-graphics-android:1.7.5
 androidx.compose.ui:ui-graphics:1.7.5
 androidx.compose.ui:ui-text-android:1.7.5
 androidx.compose.ui:ui-text:1.7.5
+androidx.compose.ui:ui-tooling-preview-android:1.7.5
+androidx.compose.ui:ui-tooling-preview:1.7.5
 androidx.compose.ui:ui-unit-android:1.7.5
 androidx.compose.ui:ui-unit:1.7.5
 androidx.compose.ui:ui-util-android:1.7.5
diff --git a/build-logic/convention/src/main/kotlin/soup/movie/buildlogic/Compose.kt b/build-logic/convention/src/main/kotlin/soup/movie/buildlogic/Compose.kt
index b744bfb10..e5db504e5 100644
--- a/build-logic/convention/src/main/kotlin/soup/movie/buildlogic/Compose.kt
+++ b/build-logic/convention/src/main/kotlin/soup/movie/buildlogic/Compose.kt
@@ -4,10 +4,8 @@ import com.android.build.gradle.BaseExtension
 import org.gradle.api.Project
 import org.gradle.api.artifacts.VersionCatalogsExtension
 import org.gradle.kotlin.dsl.configure
-import org.gradle.kotlin.dsl.assign
 import org.gradle.kotlin.dsl.dependencies
 import org.gradle.kotlin.dsl.getByType
-import org.jetbrains.kotlin.compose.compiler.gradle.ComposeCompilerGradlePluginExtension
 
 fun Project.configureCompose() {
     pluginManager.apply("org.jetbrains.kotlin.plugin.compose")
@@ -20,11 +18,10 @@ fun Project.configureCompose() {
             val bom = libs.findLibrary("compose-bom").get()
             implementation(platform(bom))
             androidTestImplementation(platform(bom))
-        }
-    }
 
-    extensions.configure<ComposeCompilerGradlePluginExtension> {
-        enableStrongSkippingMode = false
+            implementation(libs.findLibrary("compose-ui-tooling-preview").get())
+            debugImplementation(libs.findLibrary("compose-ui-tooling").get())
+        }
     }
 }
 
diff --git a/build-logic/convention/src/main/kotlin/soup/movie/buildlogic/Dependencies.kt b/build-logic/convention/src/main/kotlin/soup/movie/buildlogic/Dependencies.kt
index 365bccb98..b12590efe 100644
--- a/build-logic/convention/src/main/kotlin/soup/movie/buildlogic/Dependencies.kt
+++ b/build-logic/convention/src/main/kotlin/soup/movie/buildlogic/Dependencies.kt
@@ -7,6 +7,10 @@ fun DependencyHandler.implementation(dependencyNotation: Any): Dependency? {
     return add("implementation", dependencyNotation)
 }
 
+fun DependencyHandler.debugImplementation(dependencyNotation: Any): Dependency? {
+    return add("debugImplementation", dependencyNotation)
+}
+
 fun DependencyHandler.ksp(dependencyNotation: Any): Dependency? {
     return add("ksp", dependencyNotation)
 }
diff --git a/core/designsystem/src/main/java/soup/movie/core/designsystem/UnelevatedButton.kt b/core/designsystem/src/main/java/soup/movie/core/designsystem/UnelevatedButton.kt
index 302de4fc1..a5cd245aa 100644
--- a/core/designsystem/src/main/java/soup/movie/core/designsystem/UnelevatedButton.kt
+++ b/core/designsystem/src/main/java/soup/movie/core/designsystem/UnelevatedButton.kt
@@ -23,10 +23,13 @@ import androidx.compose.material.Button
 import androidx.compose.material.ButtonColors
 import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.tooling.preview.Preview
+import soup.movie.core.designsystem.theme.MovieTheme
 
 @Composable
 fun UnelevatedButton(
@@ -51,3 +54,13 @@ fun UnelevatedButton(
     contentPadding = contentPadding,
     content = content,
 )
+
+@Preview
+@Composable
+private fun UnelevatedButtonPreview() {
+    MovieTheme {
+        UnelevatedButton(onClick = {}) {
+            Text(text = "Button")
+        }
+    }
+}
diff --git a/core/designsystem/src/main/java/soup/movie/core/designsystem/tools/DevicePreviews.kt b/core/designsystem/src/main/java/soup/movie/core/designsystem/tools/DevicePreviews.kt
new file mode 100644
index 000000000..a1b5f1f0c
--- /dev/null
+++ b/core/designsystem/src/main/java/soup/movie/core/designsystem/tools/DevicePreviews.kt
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2024 SOUP
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package soup.movie.core.designsystem.tools
+
+import androidx.compose.ui.tooling.preview.Preview
+
+/**
+ * Multipreview annotation that represents various device sizes.
+ * Add this annotation to a composable to render various devices.
+ */
+@Preview(name = "phone", widthDp = 360, heightDp = 640)
+@Preview(name = "landscape", widthDp = 640, heightDp = 360)
+@Preview(name = "foldable", device = "id:pixel_fold")
+@Preview(name = "tablet", device = "id:pixel_tablet")
+annotation class DevicePreviews
diff --git a/feature/settings/impl/src/main/java/soup/movie/feature/settings/impl/SettingsNavGraph.kt b/feature/settings/impl/src/main/java/soup/movie/feature/settings/impl/SettingsNavGraph.kt
index 2c4f601da..511540fa4 100644
--- a/feature/settings/impl/src/main/java/soup/movie/feature/settings/impl/SettingsNavGraph.kt
+++ b/feature/settings/impl/src/main/java/soup/movie/feature/settings/impl/SettingsNavGraph.kt
@@ -27,6 +27,7 @@ import soup.compose.material.motion.animation.materialSharedAxisZOut
 import soup.movie.feature.settings.impl.home.SettingsScreen
 import soup.movie.feature.settings.impl.home.SettingsViewModel
 import soup.movie.feature.settings.impl.theme.ThemeOptionScreen
+import soup.movie.feature.settings.impl.theme.ThemeOptionViewModel
 
 private enum class Screen(val route: String) {
     Settings("SettingsScreen"),
@@ -55,7 +56,8 @@ fun SettingsNavGraph() {
             )
         }
         composable(Screen.ThemeOption.route) {
-            ThemeOptionScreen()
+            val viewModel = hiltViewModel<ThemeOptionViewModel>()
+            ThemeOptionScreen(viewModel.items)
         }
     }
 }
diff --git a/feature/settings/impl/src/main/java/soup/movie/feature/settings/impl/theme/ThemeOptionScreenImpl.kt b/feature/settings/impl/src/main/java/soup/movie/feature/settings/impl/theme/ThemeOptionScreen.kt
similarity index 81%
rename from feature/settings/impl/src/main/java/soup/movie/feature/settings/impl/theme/ThemeOptionScreenImpl.kt
rename to feature/settings/impl/src/main/java/soup/movie/feature/settings/impl/theme/ThemeOptionScreen.kt
index 062c01d23..a9495ff6f 100644
--- a/feature/settings/impl/src/main/java/soup/movie/feature/settings/impl/theme/ThemeOptionScreenImpl.kt
+++ b/feature/settings/impl/src/main/java/soup/movie/feature/settings/impl/theme/ThemeOptionScreen.kt
@@ -31,20 +31,25 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import androidx.hilt.navigation.compose.hiltViewModel
+import soup.movie.core.designsystem.theme.MovieTheme
+import soup.movie.core.designsystem.tools.DevicePreviews
 import soup.movie.core.designsystem.util.debounce
+import soup.movie.feature.theme.ThemeOption
 import soup.movie.resources.R
 
 @Composable
-fun ThemeOptionScreen() {
-    val viewModel: ThemeOptionViewModel = hiltViewModel()
+fun ThemeOptionScreen(
+    items: List<ThemeSettingItemUiModel>,
+    modifier: Modifier = Modifier,
+) {
     Scaffold(
         topBar = {
             TopAppBar(title = { Text(stringResource(R.string.theme_option_title)) })
         },
+        modifier = modifier,
     ) { paddingValues ->
         ThemeOptionList(
-            items = viewModel.items,
+            items = items,
             modifier = Modifier.padding(paddingValues),
         )
     }
@@ -85,3 +90,15 @@ private fun ThemeOptionItem(
         )
     }
 }
+
+@DevicePreviews
+@Composable
+private fun ThemeOptionScreenPreview() {
+    MovieTheme {
+        ThemeOptionScreen(
+            items = ThemeOption.entries.map {
+                ThemeSettingItemUiModel(themeOption = it)
+            },
+        )
+    }
+}
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 9ef01e89d..a8afd2e02 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -107,6 +107,8 @@ compose-foundation = { module = "androidx.compose.foundation:foundation" }
 compose-material = { module = "androidx.compose.material:material" }
 compose-materialIconsExtended = { module = "androidx.compose.material:material-icons-extended" }
 compose-ui = { module = "androidx.compose.ui:ui" }
+compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling" }
+compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview" }
 compose-animation-graphics = { module = "androidx.compose.animation:animation-graphics" }
 
 readmore-material = { module = "com.webtoonscorp.android:readmore-material", version.ref = "readmore" }