diff --git a/app-backup/build.gradle b/app-backup/build.gradle
index 19b73d25..2767ff3a 100644
--- a/app-backup/build.gradle
+++ b/app-backup/build.gradle
@@ -7,20 +7,31 @@ plugins {
 
 android {
     namespace 'xyz.aprildown.timer.app.backup'
+    buildFeatures {
+        compose true
+    }
+    composeOptions {
+        kotlinCompilerExtensionVersion = libs.versions.composeCompiler.get()
+    }
 }
 
 dependencies {
     implementation project(':app-base')
     implementation project(':component-key')
 
+    testImplementation libs.junit
+    testImplementation libs.kotlin.coroutines.test
+    testImplementation libs.bundles.mockito.core
+
     implementation libs.androidx.preference
 
+    implementation platform(libs.compose.bom)
+    implementation libs.bundles.compose
+
     implementation libs.hilt.android
     kapt libs.hilt.compiler
 
     implementation libs.okio
     implementation libs.permission
 
-    implementation libs.verticalStepperForm
-
 }
diff --git a/app-backup/src/main/java/xyz/aprildown/timer/app/backup/AbstractStep.kt b/app-backup/src/main/java/xyz/aprildown/timer/app/backup/AbstractStep.kt
deleted file mode 100644
index 7b8ab8bd..00000000
--- a/app-backup/src/main/java/xyz/aprildown/timer/app/backup/AbstractStep.kt
+++ /dev/null
@@ -1,21 +0,0 @@
-package xyz.aprildown.timer.app.backup
-
-import ernestoyaquello.com.verticalstepperform.Step
-
-internal abstract class AbstractStep<T>(
-    title: String,
-    subTitle: String = "",
-    nextButtonText: String = ""
-) : Step<T>(title, subTitle, nextButtonText) {
-    override fun restoreStepData(data: T) = Unit
-
-    override fun onStepMarkedAsCompleted(animated: Boolean) = Unit
-
-    override fun onStepOpened(animated: Boolean) = Unit
-
-    override fun onStepMarkedAsUncompleted(animated: Boolean) = Unit
-
-    override fun onStepClosed(animated: Boolean) = Unit
-
-    override fun getStepDataAsHumanReadableString(): String = ""
-}
diff --git a/app-backup/src/main/java/xyz/aprildown/timer/app/backup/BackupComposables.kt b/app-backup/src/main/java/xyz/aprildown/timer/app/backup/BackupComposables.kt
new file mode 100644
index 00000000..bc42d33c
--- /dev/null
+++ b/app-backup/src/main/java/xyz/aprildown/timer/app/backup/BackupComposables.kt
@@ -0,0 +1,250 @@
+package xyz.aprildown.timer.app.backup
+
+import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.selection.toggleable
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.rounded.NavigateNext
+import androidx.compose.material.icons.rounded.Description
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Button
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Switch
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+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.res.stringResource
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import xyz.aprildown.timer.domain.usecases.Fruit
+import xyz.aprildown.timer.app.base.R as RBase
+
+@Composable
+internal fun Backup(
+    screen: BaseBackupViewModel.Screen<*>,
+    contentLocationTitle: String,
+    contentLocationButtonText: String,
+    onChangeContentLocation: () -> Unit,
+    backupButtonText: String,
+    backupErrorHint: String,
+    modifier: Modifier = Modifier,
+    extraOptions: @Composable () -> Unit = {},
+) {
+    Column(
+        modifier = modifier
+            .verticalScroll(rememberScrollState())
+            .padding(16.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+    ) {
+        Header(text = contentLocationTitle)
+
+        ContentLocation(
+            title = contentLocationButtonText,
+            location = screen.contentName,
+            modifier = Modifier.clickable(onClick = onChangeContentLocation),
+        )
+
+        Header(text = stringResource(id = RBase.string.backup_app_data))
+
+        extraOptions()
+
+        DataEntry(
+            iconRes = RBase.drawable.ic_timer,
+            nameRes = RBase.string.main_action_timers,
+            include = screen.includeTimers,
+            onIncludedChange = screen.onTimersChange,
+        )
+        DataEntry(
+            iconRes = RBase.drawable.ic_scheduler,
+            nameRes = RBase.string.main_action_schedulers,
+            include = screen.includeSchedulers,
+            onIncludedChange = screen.onSchedulersChange,
+        )
+        DataEntry(
+            iconRes = RBase.drawable.ic_stat,
+            nameRes = RBase.string.main_action_record,
+            include = screen.includeRecords,
+            onIncludedChange = screen.onRecordsChange,
+        )
+        DataEntry(
+            iconRes = RBase.drawable.ic_settings,
+            nameRes = RBase.string.main_action_settings,
+            include = screen.includeSettings,
+            onIncludedChange = screen.onSettingsChange,
+        )
+
+        Button(
+            onClick = screen.onBackup,
+            modifier = Modifier.align(Alignment.CenterHorizontally),
+            enabled = screen.content != null &&
+                (screen.includeTimers || screen.includeSettings) &&
+                !screen.backupOngoing,
+        ) {
+            Text(text = backupButtonText)
+        }
+    }
+
+    if (screen.backupResult is Fruit.Rotten) {
+        BackupError(
+            hint = backupErrorHint,
+            message = screen.backupResult.exception.message.toString(),
+            consume = screen.consumeBackupError,
+        )
+    }
+
+    if (screen.backupOngoing) {
+        BackupOngoingDialog()
+    }
+}
+
+@Composable
+private fun Header(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    Text(
+        text = text,
+        modifier = modifier.padding(horizontal = 12.dp, vertical = 12.dp),
+        color = MaterialTheme.colorScheme.onBackground,
+        style = MaterialTheme.typography.titleSmall,
+    )
+}
+
+@Composable
+private fun ContentLocation(
+    title: String,
+    location: String?,
+    modifier: Modifier = Modifier,
+) {
+    if (location.isNullOrBlank()) {
+        ContentLocationEmpty(title = title, modifier = modifier)
+    } else {
+        ContentLocationPath(title = title, location = location, modifier = modifier)
+    }
+}
+
+@Composable
+private fun ContentLocationPath(
+    title: String,
+    location: String,
+    modifier: Modifier
+) {
+    ListItem(
+        headlineContent = {
+            Text(text = location)
+        },
+        modifier = modifier,
+        overlineContent = {
+            Text(text = title)
+        },
+        leadingContent = {
+            Icon(imageVector = Icons.Rounded.Description, contentDescription = null)
+        },
+        trailingContent = {
+            Icon(
+                imageVector = Icons.AutoMirrored.Rounded.NavigateNext,
+                contentDescription = null,
+            )
+        },
+    )
+}
+
+@Composable
+private fun ContentLocationEmpty(
+    title: String,
+    modifier: Modifier
+) {
+    ListItem(
+        headlineContent = {
+            Text(text = title)
+        },
+        modifier = modifier,
+        leadingContent = {
+            Icon(imageVector = Icons.Rounded.Description, contentDescription = null)
+        },
+        trailingContent = {
+            Icon(
+                imageVector = Icons.AutoMirrored.Rounded.NavigateNext,
+                contentDescription = null,
+            )
+        },
+    )
+}
+
+@Composable
+private fun DataEntry(
+    @DrawableRes iconRes: Int,
+    @StringRes nameRes: Int,
+    include: Boolean,
+    onIncludedChange: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    ListItem(
+        headlineContent = {
+            Text(text = stringResource(id = nameRes))
+        },
+        modifier = modifier
+            .toggleable(
+                value = include,
+                role = Role.Switch,
+                onValueChange = onIncludedChange,
+            ),
+        leadingContent = {
+            Icon(painter = painterResource(id = iconRes), contentDescription = null)
+        },
+        trailingContent = {
+            Switch(checked = include, onCheckedChange = null)
+        },
+    )
+}
+
+@Composable
+private fun BackupError(
+    hint: String,
+    message: String,
+    consume: () -> Unit,
+) {
+    AlertDialog(
+        onDismissRequest = consume,
+        confirmButton = {
+            TextButton(onClick = consume) {
+                Text(text = stringResource(id = RBase.string.ok))
+            }
+        },
+        text = {
+            Text(
+                text = buildString {
+                    append(hint)
+
+                    if (message.isNotBlank()) {
+                        append("\n\n")
+                        append(message)
+                    }
+                },
+            )
+        }
+    )
+}
+
+@Composable
+private fun BackupOngoingDialog() {
+    Dialog(onDismissRequest = {}) {
+        Surface(shape = MaterialTheme.shapes.medium) {
+            CircularProgressIndicator(modifier = Modifier.padding(24.dp))
+        }
+    }
+}
diff --git a/app-backup/src/main/java/xyz/aprildown/timer/app/backup/BaseBackupViewModel.kt b/app-backup/src/main/java/xyz/aprildown/timer/app/backup/BaseBackupViewModel.kt
new file mode 100644
index 00000000..a613bbd4
--- /dev/null
+++ b/app-backup/src/main/java/xyz/aprildown/timer/app/backup/BaseBackupViewModel.kt
@@ -0,0 +1,127 @@
+package xyz.aprildown.timer.app.backup
+
+import androidx.compose.runtime.Immutable
+import kotlinx.coroutines.CancellationException
+import kotlinx.coroutines.CoroutineDispatcher
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import xyz.aprildown.timer.domain.usecases.Fruit
+import xyz.aprildown.timer.presentation.BaseViewModel
+
+internal abstract class BaseBackupViewModel<ContentType : BaseBackupViewModel.Screen.Content>(
+    mainDispatcher: CoroutineDispatcher,
+) : BaseViewModel(mainDispatcher) {
+    @Immutable
+    data class Screen<ContentType : Screen.Content>(
+        val content: ContentType? = null,
+        val contentName: String? = null,
+
+        val includeTimers: Boolean = true,
+        val onTimersChange: (Boolean) -> Unit,
+
+        val includeRecords: Boolean = true,
+        val onRecordsChange: (Boolean) -> Unit,
+
+        val includeSchedulers: Boolean = true,
+        val onSchedulersChange: (Boolean) -> Unit,
+
+        val includeSettings: Boolean = true,
+        val onSettingsChange: (Boolean) -> Unit,
+
+        val onBackup: () -> Unit,
+        val backupOngoing: Boolean = false,
+
+        val backupResult: Fruit<Unit>? = null,
+        val consumeBackupError: () -> Unit,
+    ) {
+        interface Content
+    }
+
+    private val _screen: MutableStateFlow<Screen<ContentType>> = MutableStateFlow(
+        Screen(
+            onTimersChange = ::onTimersChange,
+            onRecordsChange = ::onRecordsChange,
+            onSchedulersChange = ::onSchedulersChange,
+            onSettingsChange = ::onSettingsChange,
+            onBackup = ::onBackup,
+            consumeBackupError = ::consumeBackupError,
+        )
+    )
+    val screen: StateFlow<Screen<ContentType>> = _screen.asStateFlow()
+
+    fun changeContent(content: ContentType, name: String?) {
+        _screen.update { it.copy(content = content, contentName = name) }
+    }
+
+    private fun onTimersChange(include: Boolean) {
+        _screen.update {
+            it.copy(
+                includeTimers = include,
+                includeRecords = include,
+                includeSchedulers = include,
+            )
+        }
+    }
+
+    private fun onRecordsChange(include: Boolean) {
+        _screen.update {
+            it.copy(
+                includeTimers = if (include) true else it.includeTimers,
+                includeRecords = include,
+            )
+        }
+    }
+
+    private fun onSchedulersChange(include: Boolean) {
+        _screen.update {
+            it.copy(
+                includeTimers = if (include) true else it.includeTimers,
+                includeSchedulers = include,
+            )
+        }
+    }
+
+    private fun onSettingsChange(include: Boolean) {
+        _screen.update {
+            it.copy(includeSettings = include)
+        }
+    }
+
+    protected abstract suspend fun backup(screen: Screen<ContentType>)
+
+    private fun onBackup() {
+        val screen = _screen.value
+        if (screen.content == null) return
+        if (!screen.includeTimers && !screen.includeSettings) return
+        if (screen.backupOngoing) return
+
+        launch {
+            _screen.update { it.copy(backupOngoing = true) }
+            try {
+                backup(screen)
+                _screen.update {
+                    it.copy(
+                        backupOngoing = false,
+                        backupResult = Fruit.Ripe(Unit),
+                    )
+                }
+            } catch (e: CancellationException) {
+                throw e
+            } catch (e: Exception) {
+                _screen.update {
+                    it.copy(
+                        backupOngoing = false,
+                        backupResult = Fruit.Rotten(e),
+                    )
+                }
+            }
+        }
+    }
+
+    private fun consumeBackupError() {
+        _screen.update { it.copy(backupResult = null) }
+    }
+}
diff --git a/app-backup/src/main/java/xyz/aprildown/timer/app/backup/ExportFragment.kt b/app-backup/src/main/java/xyz/aprildown/timer/app/backup/ExportFragment.kt
index 08d579b6..a1941959 100644
--- a/app-backup/src/main/java/xyz/aprildown/timer/app/backup/ExportFragment.kt
+++ b/app-backup/src/main/java/xyz/aprildown/timer/app/backup/ExportFragment.kt
@@ -3,35 +3,34 @@ package xyz.aprildown.timer.app.backup
 import android.app.Activity
 import android.content.Context
 import android.content.Intent
-import android.graphics.Color
 import android.net.Uri
 import android.os.Bundle
-import android.provider.OpenableColumns
+import android.view.LayoutInflater
 import android.view.View
-import android.widget.Button
-import android.widget.TextView
+import android.view.ViewGroup
 import androidx.activity.result.contract.ActivityResultContracts
-import androidx.core.database.getStringOrNull
-import androidx.core.text.buildSpannedString
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.res.stringResource
+import androidx.documentfile.provider.DocumentFile
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
-import androidx.navigation.fragment.NavHostFragment
+import androidx.navigation.fragment.findNavController
 import com.github.deweyreed.tools.anko.longSnackbar
-import com.github.deweyreed.tools.arch.observeNonNull
-import com.github.deweyreed.tools.helper.gone
 import com.github.deweyreed.tools.helper.requireCallback
-import com.github.deweyreed.tools.helper.show
-import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import dagger.hilt.android.AndroidEntryPoint
-import ernestoyaquello.com.verticalstepperform.VerticalStepperFormView
-import ernestoyaquello.com.verticalstepperform.listener.StepperFormListener
+import okio.sink
 import xyz.aprildown.timer.app.base.data.PreferenceData.lastBackupUri
+import xyz.aprildown.timer.app.base.ui.AppTheme
 import xyz.aprildown.timer.app.base.ui.MainCallback
-import xyz.aprildown.timer.app.base.ui.newDynamicTheme
 import xyz.aprildown.timer.domain.usecases.Fruit
-import xyz.aprildown.timer.domain.usecases.data.ExportAppData
 import xyz.aprildown.timer.domain.utils.AppTracker
-import xyz.aprildown.timer.presentation.backup.ExportViewModel
 import java.text.SimpleDateFormat
 import java.util.Date
 import java.util.Locale
@@ -39,17 +38,14 @@ import javax.inject.Inject
 import xyz.aprildown.timer.app.base.R as RBase
 
 @AndroidEntryPoint
-class ExportFragment : Fragment(R.layout.layout_vertical_form), StepperFormListener {
+class ExportFragment : Fragment() {
 
     private val viewModel: ExportViewModel by viewModels()
 
-    @Inject
-    lateinit var appTracker: AppTracker
-
     private lateinit var mainCallback: MainCallback.ActivityCallback
 
-    private lateinit var locationStep: ExportLocationStep
-    private lateinit var contentStep: ExportContentStep
+    @Inject
+    lateinit var appTracker: AppTracker
 
     private val launcher =
         registerForActivityResult(ActivityResultContracts.StartActivityForResult()) {
@@ -61,83 +57,39 @@ class ExportFragment : Fragment(R.layout.layout_vertical_form), StepperFormListe
         mainCallback = requireCallback()
     }
 
-    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        val context = view.context
-        val form = view as VerticalStepperFormView
-        locationStep = ExportLocationStep(resources.getString(RBase.string.export_path_title), this)
-        contentStep = ExportContentStep(resources.getString(RBase.string.export_content_title))
-        form.setup(this, locationStep, contentStep)
-            .displayBottomNavigation(false)
-            .apply {
-                newDynamicTheme.run {
-                    basicColorScheme(colorPrimary, colorPrimaryVariant, colorOnPrimary)
-                    nextButtonColors(colorSecondary, colorSecondary, Color.WHITE, Color.WHITE)
-                }
-            }
-            .stepNextButtonText(getString(RBase.string.backup_next_step))
-            .confirmationStepTitle(resources.getString(RBase.string.export_begin))
-            .lastStepNextButtonText(getString(RBase.string.export_action))
-            .displayCancelButtonInLastStep(true)
-            .lastStepCancelButtonText(getString(android.R.string.cancel))
-            .init()
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View {
+        return ComposeView(requireContext()).apply {
+            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        }
+    }
 
-        viewModel.result.observeNonNull(viewLifecycleOwner) { fruit ->
-            when (fruit) {
-                is Fruit.Ripe -> {
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        val navController = findNavController()
+        (view as ComposeView).setContent {
+            val screen by viewModel.screen.collectAsState()
+            LaunchedEffect(screen.backupResult) {
+                if (screen.backupResult is Fruit.Ripe) {
                     mainCallback.snackbarView.longSnackbar(RBase.string.export_done)
-                    popBackToBackup()
-                }
-                is Fruit.Rotten -> {
-                    val exception = fruit.exception
-                    MaterialAlertDialogBuilder(context)
-                        .setMessage(
-                            buildSpannedString {
-                                append(getText(RBase.string.export_error))
-
-                                (exception.localizedMessage ?: exception.message)
-                                    ?.takeIf { it.isNotBlank() }
-                                    ?.let { message ->
-                                        append("\n\n")
-                                        append(message)
-                                    }
-                            }
-                        )
-                        .setPositiveButton(android.R.string.ok, null)
-                        .setOnDismissListener {
-                            popBackToBackup()
-                        }
-                        .show()
+                    navController.popBackStack(
+                        destinationId = RBase.id.dest_backup_restore,
+                        inclusive = false,
+                    )
                 }
             }
-            viewModel.consumeResult()
-        }
-    }
-
-    override fun onCompletedForm() {
-        val context = requireContext()
-        val settings = contentStep.stepData
-        viewModel.export(
-            params = ExportAppData.Params(
-                exportTimers = settings.isTimersChecked,
-                exportTimerStamps = settings.isTimerStampsChecked,
-                exportSchedulers = settings.isSchedulersChecked,
-                exportPreferences = settings.isSettingsChecked
-            ),
-            outputStream = checkNotNull(
-                context.contentResolver.openOutputStream(locationStep.stepData, "rwt")
+            Export(
+                screen = screen,
+                onLocationChange = ::onLocationChange,
+                modifier = Modifier.fillMaxSize(),
             )
-        )
-    }
-
-    override fun onCancelledForm() {
-        popBackToBackup()
-    }
-
-    private fun popBackToBackup() {
-        NavHostFragment.findNavController(this).popBackStack(RBase.id.dest_backup_restore, false)
+        }
     }
 
-    fun pickExportPath() {
+    private fun onLocationChange() {
         val date = Date()
         val timeString = SimpleDateFormat("yyyy-MM-dd-kk-mm", Locale.getDefault()).format(date)
         val initialFilename = "timer-machine-$timeString.json"
@@ -155,101 +107,43 @@ class ExportFragment : Fragment(R.layout.layout_vertical_form), StepperFormListe
     }
 
     private fun handleActivityResult(resultCode: Int, data: Intent?) {
-        if (resultCode == Activity.RESULT_OK) {
-            val uri = data?.data ?: return
-            val context = requireContext()
-            var name: String? = null
-
-            try {
-                context.contentResolver.query(
-                    uri,
-                    arrayOf(OpenableColumns.DISPLAY_NAME),
-                    null,
-                    null,
-                    null,
-                    null
-                )?.use { cursor ->
-                    if (cursor.moveToFirst()) {
-                        name =
-                            cursor.getStringOrNull(cursor.getColumnIndex(OpenableColumns.DISPLAY_NAME))
-                    }
-                }
-            } catch (e: Exception) {
-                appTracker.trackError(e)
-                mainCallback.snackbarView.longSnackbar(e.message.toString())
-                return
-            }
-
-            context.lastBackupUri = uri
-            locationStep.locationPicked(uri, name)
-        }
-    }
-}
-
-private class ExportLocationStep(
-    title: String,
-    private val parentFragment: ExportFragment
-) : AbstractStep<Uri>(title) {
-
-    private var locationUri: Uri = Uri.EMPTY
-    private lateinit var locationTextView: TextView
-
-    override fun createStepContentLayout(): View {
-        val context = context
-        val view = View.inflate(context, R.layout.step_text_button, null)
-        locationTextView = view.findViewById<TextView>(R.id.textStepTextButton).apply {
-            gone()
-        }
-        view.findViewById<Button>(R.id.btnStepTextButton).run {
-            setText(RBase.string.export_select_location)
-            setOnClickListener {
-                parentFragment.pickExportPath()
-            }
-        }
-        return view
-    }
-
-    fun locationPicked(uri: Uri, content: String? = null) {
-        locationUri = uri
-        locationTextView.show()
-        locationTextView.text = content
-        markAsCompletedOrUncompleted(true)
-    }
-
-    override fun isStepDataValid(stepData: Uri?): IsDataValid {
-        return IsDataValid(
-            stepData != Uri.EMPTY,
-            context.getString(RBase.string.export_select_location)
+        if (resultCode != Activity.RESULT_OK) return
+        val uri = data?.data ?: return
+        if (uri.toString().isBlank() || uri == Uri.EMPTY) return
+        val context = requireContext()
+        context.lastBackupUri = uri
+        val contentResolver = context.contentResolver
+        val documentFile = DocumentFile.fromSingleUri(context, uri)
+        viewModel.changeContent(
+            content = ExportViewModel.WritableContent(
+                getSink = {
+                    checkNotNull(contentResolver.openOutputStream(uri)).sink()
+                },
+                delete = {
+                    // ContentResolver.delete doesn't work
+                    documentFile?.delete()
+                },
+            ),
+            name = documentFile?.name?.takeIf { it.isNotBlank() } ?: uri.toString(),
         )
     }
-
-    override fun getStepDataAsHumanReadableString(): String = locationTextView.text.toString()
-    override fun getStepData(): Uri = locationUri
 }
 
-private class ExportContentStep(
-    title: String
-) : AbstractStep<SelectAppContentSettings>(title) {
-
-    private lateinit var helper: SelectAppContentHelper
-
-    override fun createStepContentLayout(): View {
-        val context = context
-        val view = View.inflate(context, R.layout.step_select_content, null)
-        helper = SelectAppContentHelper().apply {
-            setUpView(view)
-            removeWipeItem()
-        }
-        return view
-    }
-
-    override fun isStepDataValid(stepData: SelectAppContentSettings): IsDataValid {
-        return IsDataValid(true)
-    }
-
-    override fun getStepDataAsHumanReadableString(): String = ""
-
-    override fun getStepData(): SelectAppContentSettings {
-        return helper.settings
+@Composable
+private fun Export(
+    screen: BaseBackupViewModel.Screen<*>,
+    onLocationChange: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    AppTheme {
+        Backup(
+            screen = screen,
+            contentLocationTitle = stringResource(id = RBase.string.export_path_title),
+            contentLocationButtonText = stringResource(id = RBase.string.export_select_location),
+            onChangeContentLocation = onLocationChange,
+            backupButtonText = stringResource(id = RBase.string.export_action),
+            backupErrorHint = stringResource(id = RBase.string.export_error),
+            modifier = modifier,
+        )
     }
 }
diff --git a/app-backup/src/main/java/xyz/aprildown/timer/app/backup/ExportViewModel.kt b/app-backup/src/main/java/xyz/aprildown/timer/app/backup/ExportViewModel.kt
new file mode 100644
index 00000000..f7baf3e6
--- /dev/null
+++ b/app-backup/src/main/java/xyz/aprildown/timer/app/backup/ExportViewModel.kt
@@ -0,0 +1,57 @@
+package xyz.aprildown.timer.app.backup
+
+import androidx.annotation.VisibleForTesting
+import androidx.lifecycle.SavedStateHandle
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.CoroutineDispatcher
+import okio.Sink
+import okio.buffer
+import xyz.aprildown.timer.domain.di.MainDispatcher
+import xyz.aprildown.timer.domain.usecases.data.ExportAppData
+import javax.inject.Inject
+
+@HiltViewModel
+internal class ExportViewModel @Inject constructor(
+    @MainDispatcher mainDispatcher: CoroutineDispatcher,
+    private val savedStateHandle: SavedStateHandle,
+    private val exportAppData: ExportAppData,
+) : BaseBackupViewModel<ExportViewModel.WritableContent>(mainDispatcher) {
+    class WritableContent(
+        val getSink: () -> Sink,
+        val delete: () -> Unit,
+    ) : Screen.Content
+
+    override suspend fun backup(screen: Screen<WritableContent>) {
+        val string = exportAppData(
+            ExportAppData.Params(
+                exportTimers = screen.includeTimers,
+                exportTimerStamps = screen.includeRecords,
+                exportSchedulers = screen.includeSchedulers,
+                exportPreferences = screen.includeSettings,
+            )
+        )
+        checkNotNull(screen.content).getSink().use {
+            it.buffer().run {
+                writeUtf8(string)
+                flush()
+            }
+        }
+        savedStateHandle[KEY_HAS_EXPORTED] = true
+    }
+
+    @VisibleForTesting(otherwise = VisibleForTesting.PROTECTED)
+    public override fun onCleared() {
+        super.onCleared()
+        if (savedStateHandle.get<Boolean>(KEY_HAS_EXPORTED) != true) {
+            try {
+                screen.value.content?.delete?.invoke()
+            } catch (_: Exception) {
+                // Ignore
+            }
+        }
+    }
+
+    companion object {
+        private const val KEY_HAS_EXPORTED = "has_exported"
+    }
+}
diff --git a/app-backup/src/main/java/xyz/aprildown/timer/app/backup/ImportFragment.kt b/app-backup/src/main/java/xyz/aprildown/timer/app/backup/ImportFragment.kt
index 32ce15a0..6691c991 100644
--- a/app-backup/src/main/java/xyz/aprildown/timer/app/backup/ImportFragment.kt
+++ b/app-backup/src/main/java/xyz/aprildown/timer/app/backup/ImportFragment.kt
@@ -5,56 +5,59 @@ import android.content.Context
 import android.content.Intent
 import android.net.Uri
 import android.os.Bundle
-import android.provider.OpenableColumns
+import android.view.LayoutInflater
 import android.view.View
-import android.widget.Button
-import android.widget.TextView
+import android.view.ViewGroup
 import androidx.activity.result.contract.ActivityResultContracts
-import androidx.core.database.getLongOrNull
-import androidx.core.database.getStringOrNull
-import androidx.core.text.buildSpannedString
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.selection.toggleable
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Icon
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.Switch
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+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.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
+import androidx.documentfile.provider.DocumentFile
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
-import androidx.navigation.fragment.NavHostFragment
-import com.github.deweyreed.tools.anko.longSnackbar
-import com.github.deweyreed.tools.arch.observeNonNull
-import com.github.deweyreed.tools.helper.gone
 import com.github.deweyreed.tools.helper.requireCallback
 import com.github.deweyreed.tools.helper.restartWithFading
-import com.github.deweyreed.tools.helper.show
-import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import dagger.hilt.android.AndroidEntryPoint
-import ernestoyaquello.com.verticalstepperform.VerticalStepperFormView
-import ernestoyaquello.com.verticalstepperform.listener.StepperFormListener
-import okio.buffer
 import okio.source
 import xyz.aprildown.timer.app.base.data.PreferenceData.lastBackupUri
 import xyz.aprildown.timer.app.base.ui.AppNavigator
+import xyz.aprildown.timer.app.base.ui.AppTheme
 import xyz.aprildown.timer.app.base.ui.MainCallback
-import xyz.aprildown.timer.app.base.ui.newDynamicTheme
 import xyz.aprildown.timer.domain.usecases.Fruit
-import xyz.aprildown.timer.domain.usecases.data.ImportAppData
 import xyz.aprildown.timer.domain.utils.AppTracker
-import xyz.aprildown.timer.presentation.backup.ImportViewModel
 import javax.inject.Inject
 import xyz.aprildown.timer.app.base.R as RBase
 
 @AndroidEntryPoint
-class ImportFragment : Fragment(R.layout.layout_vertical_form), StepperFormListener {
+class ImportFragment : Fragment() {
 
     private val viewModel: ImportViewModel by viewModels()
 
+    private lateinit var mainCallback: MainCallback.ActivityCallback
+
     @Inject
     lateinit var appNavigator: AppNavigator
 
     @Inject
     lateinit var appTracker: AppTracker
 
-    private lateinit var mainCallback: MainCallback.ActivityCallback
-
-    private lateinit var locationStep: ImportLocationStep
-    private lateinit var contentStep: ImportContentStep
-
     private val launcher =
         registerForActivityResult(ActivityResultContracts.StartActivityForResult()) {
             handleActivityResult(resultCode = it.resultCode, data = it.data)
@@ -65,109 +68,38 @@ class ImportFragment : Fragment(R.layout.layout_vertical_form), StepperFormListe
         mainCallback = requireCallback()
     }
 
-    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        val context = view.context
-        val form = view as VerticalStepperFormView
-        locationStep = ImportLocationStep(
-            resources.getString(RBase.string.import_path_title),
-            this
-        )
-        contentStep =
-            ImportContentStep(resources.getString(RBase.string.import_content_title))
-        form.setup(this, locationStep, contentStep)
-            .displayBottomNavigation(false)
-            .apply {
-                newDynamicTheme.run {
-                    basicColorScheme(colorPrimary, colorPrimaryVariant, colorOnPrimary)
-                    nextButtonColors(
-                        colorSecondary,
-                        colorSecondary,
-                        colorOnSecondary,
-                        colorOnSecondary
-                    )
-                }
-            }
-            .stepNextButtonText(getString(RBase.string.backup_next_step))
-            .confirmationStepTitle(resources.getString(RBase.string.import_begin))
-            .lastStepNextButtonText(getString(RBase.string.import_action))
-            .displayCancelButtonInLastStep(true)
-            .lastStepCancelButtonText(getString(android.R.string.cancel))
-            .init()
-
-        viewModel.result.observeNonNull(viewLifecycleOwner) { fruit ->
-            when (fruit) {
-                is Fruit.Ripe -> {
-                    MaterialAlertDialogBuilder(context)
-                        .setCancelable(false)
-                        .setTitle(RBase.string.import_done)
-                        .setMessage(RBase.string.import_restart_content)
-                        .setPositiveButton(RBase.string.import_restart) { _, _ ->
-                            val activity = requireActivity()
-                            activity.restartWithFading(appNavigator.getMainIntent())
-                        }
-                        .show()
-                }
-                is Fruit.Rotten -> {
-                    val exception = fruit.exception
-                    MaterialAlertDialogBuilder(context)
-                        .setMessage(
-                            buildSpannedString {
-                                append(getText(RBase.string.import_error))
-
-                                (exception.localizedMessage ?: exception.message)
-                                    ?.takeIf { it.isNotBlank() }
-                                    ?.let { message ->
-                                        append("\n\n")
-                                        append(message)
-                                    }
-                            }
-                        )
-                        .setPositiveButton(android.R.string.ok, null)
-                        .setOnDismissListener {
-                            popBackToBackup()
-                        }
-                        .show()
-                }
-            }
-            viewModel.consumeResult()
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View {
+        return ComposeView(requireContext()).apply {
+            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
         }
     }
 
-    override fun onCompletedForm() {
-        val context = requireContext()
-        val settings = contentStep.stepData
-
-        val fileUri = locationStep.stepData
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        (view as ComposeView).setContent {
+            val screen by viewModel.screen.collectAsState()
+            Import(
+                screen = screen,
+                importScreen = viewModel.importScreen.collectAsState().value,
+                onLocationChange = ::onLocationChange,
+                modifier = Modifier.fillMaxSize(),
+            )
 
-        var data = ""
-        try {
-            context.contentResolver.openInputStream(fileUri)?.use { inputStream ->
-                data = inputStream.source().buffer().readUtf8()
+            if (screen.backupResult is Fruit.Ripe) {
+                RestartDialog(
+                    onRestart = {
+                        requireActivity().restartWithFading(appNavigator.getMainIntent())
+                    },
+                )
             }
-        } catch (_: Exception) {
         }
-
-        viewModel.import(
-            ImportAppData.Params(
-                data = data,
-                wipeFirst = settings.wipeFirst,
-                importTimers = settings.isTimersChecked,
-                importTimerStamps = settings.isTimerStampsChecked,
-                importSchedulers = settings.isSchedulersChecked,
-                importPreferences = settings.isSettingsChecked,
-            )
-        )
     }
 
-    override fun onCancelledForm() {
-        popBackToBackup()
-    }
-
-    private fun popBackToBackup() {
-        NavHostFragment.findNavController(this).popBackStack(RBase.id.dest_backup_restore, false)
-    }
-
-    fun importFile() {
+    private fun onLocationChange() {
         SafIntentSafeBelt(
             context = requireContext(),
             appTracker = appTracker,
@@ -181,108 +113,123 @@ class ImportFragment : Fragment(R.layout.layout_vertical_form), StepperFormListe
     }
 
     private fun handleActivityResult(resultCode: Int, data: Intent?) {
-        if (resultCode == Activity.RESULT_OK) {
-            val uri = data?.data ?: return
-            val context = requireContext()
-            var name: String? = null
-            var isFileEmpty = false
-
-            try {
-                context.contentResolver.query(
-                    uri,
-                    arrayOf(
-                        OpenableColumns.DISPLAY_NAME,
-                        OpenableColumns.SIZE
-                    ),
-                    null,
-                    null,
-                    null,
-                    null
-                )?.use { cursor ->
-                    if (cursor.moveToFirst()) {
-                        name =
-                            cursor.getStringOrNull(cursor.getColumnIndex(OpenableColumns.DISPLAY_NAME))
-                        isFileEmpty =
-                            cursor.getLongOrNull(cursor.getColumnIndex(OpenableColumns.SIZE)) == 0L
-                    }
+        if (resultCode != Activity.RESULT_OK) return
+        val uri = data?.data ?: return
+        if (uri.toString().isBlank() || uri == Uri.EMPTY) return
+        val context = requireContext()
+        context.lastBackupUri = uri
+        val contentResolver = context.contentResolver
+        val documentFile = DocumentFile.fromSingleUri(context, uri)
+        viewModel.changeContent(
+            content = ImportViewModel.ReadableContent(
+                getSource = {
+                    checkNotNull(contentResolver.openInputStream(uri)).source()
                 }
-            } catch (e: Exception) {
-                appTracker.trackError(e)
-                mainCallback.snackbarView.longSnackbar(e.message.toString())
-                return
-            }
-
-            context.lastBackupUri = uri
-            if (isFileEmpty) {
-                locationStep.emptyFilePicked()
-            } else {
-                locationStep.locationPicked(uri, name)
-            }
-        }
+            ),
+            name = documentFile?.name?.takeIf { it.isNotBlank() },
+        )
     }
 }
 
-private class ImportLocationStep(
-    title: String,
-    private val parentFragment: ImportFragment
-) : AbstractStep<Uri>(title) {
-
-    private var locationUri: Uri = Uri.EMPTY
-    private lateinit var locationTextView: TextView
+@Composable
+private fun Import(
+    screen: BaseBackupViewModel.Screen<*>,
+    importScreen: ImportViewModel.ImportScreen,
+    onLocationChange: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    AppTheme {
+        Backup(
+            screen = screen,
+            contentLocationTitle = stringResource(id = RBase.string.import_path_title),
+            contentLocationButtonText = stringResource(id = RBase.string.import_select_location),
+            onChangeContentLocation = onLocationChange,
+            backupButtonText = stringResource(id = RBase.string.import_action),
+            backupErrorHint = stringResource(id = RBase.string.import_error),
+            modifier = modifier,
+            extraOptions = {
+                WipeContent(
+                    wipe = importScreen.wipe,
+                    onWipeChanged = importScreen.onWipeChange,
+                    modifier = Modifier.fillMaxSize(),
+                )
+            },
+        )
+    }
+}
 
-    override fun createStepContentLayout(): View {
-        val context = context
-        val view = View.inflate(context, R.layout.step_text_button, null)
-        locationTextView = view.findViewById<TextView>(R.id.textStepTextButton).apply {
-            gone()
-        }
-        view.findViewById<Button>(R.id.btnStepTextButton).run {
-            setText(RBase.string.import_select_location)
-            setOnClickListener {
-                parentFragment.importFile()
+@Composable
+private fun WipeContent(
+    wipe: Boolean,
+    onWipeChanged: (Boolean) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    var showAlert by remember { mutableStateOf(false) }
+    val onWipeChangedAlert: (Boolean) -> Unit = remember(onWipeChanged) {
+        { wipe: Boolean ->
+            if (wipe) {
+                showAlert = true
+            } else {
+                onWipeChanged(false)
             }
         }
-        return view
     }
 
-    fun locationPicked(uri: Uri, content: String? = null) {
-        locationUri = uri
-        locationTextView.show()
-        locationTextView.text = content
-        markAsCompletedOrUncompleted(true)
-    }
-
-    fun emptyFilePicked() {
-        markAsUncompleted(parentFragment.getString(RBase.string.import_empty_file), true)
-    }
-
-    override fun isStepDataValid(stepData: Uri): IsDataValid {
-        return IsDataValid(stepData != Uri.EMPTY, context.getString(RBase.string.import_no_file))
+    ListItem(
+        headlineContent = {
+            Text(text = stringResource(id = RBase.string.import_wipe_first))
+        },
+        modifier = modifier
+            .toggleable(
+                value = wipe,
+                role = Role.Switch,
+                onValueChange = onWipeChangedAlert,
+            ),
+        leadingContent = {
+            Icon(
+                painter = painterResource(id = RBase.drawable.ic_delete),
+                contentDescription = null,
+            )
+        },
+        trailingContent = {
+            Switch(checked = wipe, onCheckedChange = null)
+        },
+    )
+
+    if (showAlert) {
+        AlertDialog(
+            onDismissRequest = { showAlert = false },
+            confirmButton = {
+                TextButton(
+                    onClick = {
+                        onWipeChanged(true)
+                        showAlert = false
+                    },
+                ) {
+                    Text(text = stringResource(id = RBase.string.ok))
+                }
+            },
+            text = {
+                Text(text = stringResource(id = RBase.string.import_wipe_warning))
+            },
+        )
     }
-
-    override fun getStepDataAsHumanReadableString(): String = locationTextView.text.toString()
-    override fun getStepData(): Uri = locationUri
 }
 
-private class ImportContentStep(
-    title: String
-) : AbstractStep<SelectAppContentSettings>(title) {
-
-    private lateinit var helper: SelectAppContentHelper
-
-    override fun createStepContentLayout(): View {
-        val context = context
-        val view = View.inflate(context, R.layout.step_select_content, null)
-        helper = SelectAppContentHelper().apply {
-            setUpView(view)
-        }
-        return view
-    }
-
-    override fun isStepDataValid(stepData: SelectAppContentSettings?): IsDataValid =
-        IsDataValid(true)
-
-    override fun getStepData(): SelectAppContentSettings {
-        return helper.settings
-    }
+@Composable
+private fun RestartDialog(onRestart: () -> Unit) {
+    AlertDialog(
+        onDismissRequest = {},
+        confirmButton = {
+            TextButton(onClick = onRestart) {
+                Text(text = stringResource(id = RBase.string.import_restart))
+            }
+        },
+        title = {
+            Text(text = stringResource(id = RBase.string.import_done))
+        },
+        text = {
+            Text(text = stringResource(id = RBase.string.import_restart_content))
+        },
+    )
 }
diff --git a/app-backup/src/main/java/xyz/aprildown/timer/app/backup/ImportViewModel.kt b/app-backup/src/main/java/xyz/aprildown/timer/app/backup/ImportViewModel.kt
new file mode 100644
index 00000000..843a1ad2
--- /dev/null
+++ b/app-backup/src/main/java/xyz/aprildown/timer/app/backup/ImportViewModel.kt
@@ -0,0 +1,53 @@
+package xyz.aprildown.timer.app.backup
+
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.CoroutineDispatcher
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import okio.Source
+import okio.buffer
+import xyz.aprildown.timer.domain.di.MainDispatcher
+import xyz.aprildown.timer.domain.usecases.data.ImportAppData
+import xyz.aprildown.timer.domain.usecases.data.NotifyDataChanged
+import javax.inject.Inject
+
+@HiltViewModel
+internal class ImportViewModel @Inject constructor(
+    @MainDispatcher mainDispatcher: CoroutineDispatcher,
+    private val importAppData: ImportAppData,
+    private val notifyDataChanged: NotifyDataChanged,
+) : BaseBackupViewModel<ImportViewModel.ReadableContent>(mainDispatcher) {
+    data class ImportScreen(
+        val wipe: Boolean = false,
+        val onWipeChange: (Boolean) -> Unit,
+    )
+
+    class ReadableContent(val getSource: () -> Source) : Screen.Content
+
+    private val _importScreen: MutableStateFlow<ImportScreen> = MutableStateFlow(
+        ImportScreen(
+            onWipeChange = ::onWipeChange,
+        )
+    )
+    val importScreen: StateFlow<ImportScreen> = _importScreen.asStateFlow()
+
+    private fun onWipeChange(wipe: Boolean) {
+        _importScreen.update { it.copy(wipe = wipe) }
+    }
+
+    override suspend fun backup(screen: Screen<ReadableContent>) {
+        importAppData(
+            ImportAppData.Params(
+                data = checkNotNull(screen.content).getSource().use { it.buffer().readUtf8() },
+                wipeFirst = _importScreen.value.wipe,
+                importTimers = screen.includeTimers,
+                importTimerStamps = screen.includeRecords,
+                importSchedulers = screen.includeSchedulers,
+                importPreferences = screen.includeSettings,
+            )
+        )
+        notifyDataChanged()
+    }
+}
diff --git a/app-backup/src/main/java/xyz/aprildown/timer/app/backup/SelectAppContentHelper.kt b/app-backup/src/main/java/xyz/aprildown/timer/app/backup/SelectAppContentHelper.kt
deleted file mode 100644
index 3ca7610a..00000000
--- a/app-backup/src/main/java/xyz/aprildown/timer/app/backup/SelectAppContentHelper.kt
+++ /dev/null
@@ -1,93 +0,0 @@
-package xyz.aprildown.timer.app.backup
-
-import android.view.View
-import android.widget.CompoundButton
-import com.github.deweyreed.tools.helper.gone
-import com.google.android.material.dialog.MaterialAlertDialogBuilder
-import xyz.aprildown.timer.component.key.ListItemWithLayout
-import xyz.aprildown.timer.app.base.R as RBase
-
-internal class SelectAppContentSettings {
-    var wipeFirst: Boolean = false
-    var isTimersChecked: Boolean = true
-    var isTimerStampsChecked: Boolean = true
-    var isSchedulersChecked: Boolean = true
-    var isSettingsChecked: Boolean = true
-}
-
-internal class SelectAppContentHelper {
-
-    val settings = SelectAppContentSettings()
-
-    private lateinit var itemWipe: ListItemWithLayout
-    private lateinit var checkTimers: CompoundButton
-    private lateinit var checkTimerStamps: CompoundButton
-    private lateinit var checkSchedulers: CompoundButton
-
-    fun setUpView(view: View) {
-        val context = view.context
-
-        // Get vViews
-
-        itemWipe = view.findViewById(R.id.itemSelectAppContentWipe)
-        val checkWipe = itemWipe.getLayoutView<CompoundButton>()
-        checkTimers = view.findViewById<ListItemWithLayout>(R.id.itemSelectAppContentTimer)
-            .getLayoutView()
-        checkTimerStamps =
-            view.findViewById<ListItemWithLayout>(R.id.itemSelectAppContentTimerStamp)
-                .getLayoutView()
-        checkSchedulers = view.findViewById<ListItemWithLayout>(R.id.itemSelectAppContentScheduler)
-            .getLayoutView()
-        val checkSettings = view.findViewById<ListItemWithLayout>(R.id.itemSelectAppContentSettings)
-            .getLayoutView<CompoundButton>()
-
-        // Init views
-        checkWipe.setOnCheckedChangeListener(null)
-        checkWipe.isChecked = settings.wipeFirst
-        checkTimers.isChecked = settings.isTimersChecked
-        checkTimerStamps.isChecked = settings.isTimerStampsChecked
-        checkSchedulers.isChecked = settings.isSchedulersChecked
-        checkSettings.isChecked = settings.isSettingsChecked
-
-        // Respond to changes
-        checkWipe.setOnCheckedChangeListener { _, isChecked ->
-            if (settings.wipeFirst != isChecked) {
-                settings.wipeFirst = isChecked
-                if (isChecked) {
-                    MaterialAlertDialogBuilder(context)
-                        .setCancelable(false)
-                        .setMessage(RBase.string.import_wipe_warning)
-                        .setPositiveButton(RBase.string.understand, null)
-                        .show()
-                }
-            }
-        }
-        checkTimers.setOnCheckedChangeListener { _, isChecked ->
-            settings.isTimersChecked = isChecked
-            if (!isChecked) {
-                checkTimerStamps.isChecked = false
-                checkSchedulers.isChecked = false
-            }
-        }
-        checkTimerStamps.setOnCheckedChangeListener { _, isChecked ->
-            settings.isTimerStampsChecked = isChecked
-            if (isChecked) {
-                checkTimers.isChecked = true
-            }
-        }
-        checkSchedulers.setOnCheckedChangeListener { _, isChecked ->
-            settings.isSchedulersChecked = isChecked
-            if (isChecked) {
-                checkTimers.isChecked = true
-            }
-        }
-        checkSettings.setOnCheckedChangeListener { _, isChecked ->
-            settings.isSettingsChecked = isChecked
-        }
-    }
-
-    fun removeWipeItem() {
-        itemWipe.gone()
-        itemWipe.getLayoutView<CompoundButton>().setOnCheckedChangeListener(null)
-    }
-}
diff --git a/app-backup/src/main/res/layout/layout_vertical_form.xml b/app-backup/src/main/res/layout/layout_vertical_form.xml
deleted file mode 100644
index 624ab020..00000000
--- a/app-backup/src/main/res/layout/layout_vertical_form.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<ernestoyaquello.com.verticalstepperform.VerticalStepperFormView xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    app:form_title_text_color="?android:textColorPrimary" />
\ No newline at end of file
diff --git a/app-backup/src/main/res/layout/step_select_content.xml b/app-backup/src/main/res/layout/step_select_content.xml
deleted file mode 100644
index 3bc0a7b3..00000000
--- a/app-backup/src/main/res/layout/step_select_content.xml
+++ /dev/null
@@ -1,55 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:orientation="vertical">
-
-    <xyz.aprildown.timer.component.key.ListItemWithLayout
-        android:id="@+id/itemSelectAppContentWipe"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        app:li_layout="@layout/view_list_item_with_layout_check"
-        app:li_textPrimary="@string/import_wipe_first" />
-
-    <TextView
-        style="@style/Widget.AppTheme.ListHeader"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:text="@string/backup_app_data" />
-
-    <xyz.aprildown.timer.component.key.ListItemWithLayout
-        android:id="@+id/itemSelectAppContentTimer"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        app:li_layout="@layout/view_list_item_with_layout_check"
-        app:li_textPrimary="@string/main_action_timers" />
-
-    <xyz.aprildown.timer.component.key.ListItemWithLayout
-        android:id="@+id/itemSelectAppContentTimerStamp"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        app:li_layout="@layout/view_list_item_with_layout_check"
-        app:li_textPrimary="@string/main_action_record" />
-
-    <xyz.aprildown.timer.component.key.ListItemWithLayout
-        android:id="@+id/itemSelectAppContentScheduler"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        app:li_layout="@layout/view_list_item_with_layout_check"
-        app:li_textPrimary="@string/main_action_schedulers" />
-
-    <TextView
-        style="@style/Widget.AppTheme.ListHeader"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:text="@string/backup_app_settings" />
-
-    <xyz.aprildown.timer.component.key.ListItemWithLayout
-        android:id="@+id/itemSelectAppContentSettings"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        app:li_layout="@layout/view_list_item_with_layout_check"
-        app:li_textPrimary="@string/backup_app_settings" />
-
-</LinearLayout>
\ No newline at end of file
diff --git a/app-backup/src/main/res/layout/step_text_button.xml b/app-backup/src/main/res/layout/step_text_button.xml
deleted file mode 100644
index 43fc125b..00000000
--- a/app-backup/src/main/res/layout/step_text_button.xml
+++ /dev/null
@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:orientation="vertical">
-
-    <TextView
-        android:id="@+id/textStepTextButton"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="@dimen/keyline_icon"
-        android:layout_marginEnd="@dimen/keyline_icon"
-        android:textAppearance="?textAppearanceHeadline6" />
-
-    <Button
-        android:id="@+id/btnStepTextButton"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="8dp"
-        android:layout_marginEnd="8dp"
-        android:text="@android:string/ok" />
-
-</LinearLayout>
\ No newline at end of file
diff --git a/app-backup/src/test/java/xyz.aprildown.timer.backup/BaseBackupViewModelTest.kt b/app-backup/src/test/java/xyz.aprildown.timer.backup/BaseBackupViewModelTest.kt
new file mode 100644
index 00000000..9042612b
--- /dev/null
+++ b/app-backup/src/test/java/xyz.aprildown.timer.backup/BaseBackupViewModelTest.kt
@@ -0,0 +1,198 @@
+package xyz.aprildown.timer.backup
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.ViewModelProvider
+import androidx.lifecycle.ViewModelStore
+import kotlinx.coroutines.test.TestScope
+import kotlinx.coroutines.test.runTest
+import org.junit.Assert.assertFalse
+import org.junit.Assert.assertNull
+import org.junit.Assert.assertTrue
+import org.junit.Test
+import xyz.aprildown.timer.app.backup.BaseBackupViewModel
+
+internal abstract class BaseBackupViewModelTest {
+
+    internal abstract fun TestScope.createViewModel(): BaseBackupViewModel<*>
+
+    protected fun randomString(): String = System.currentTimeMillis().toString()
+
+    @Test
+    fun `check initial state`() = runTest {
+        val viewModel = createViewModel()
+        assertNull(viewModel.screen.value.content)
+        assertNull(viewModel.screen.value.contentName)
+        assertTrue(viewModel.screen.value.includeTimers)
+        assertTrue(viewModel.screen.value.includeRecords)
+        assertTrue(viewModel.screen.value.includeSchedulers)
+        assertTrue(viewModel.screen.value.includeSettings)
+        assertFalse(viewModel.screen.value.backupOngoing)
+        assertNull(viewModel.screen.value.backupResult)
+    }
+
+    @Test
+    fun `check onTimersChange`() = runTest {
+        val viewModel = createViewModel()
+        viewModel.screen.value.onTimersChange(false)
+        assertNull(viewModel.screen.value.content)
+        assertNull(viewModel.screen.value.contentName)
+        assertFalse(viewModel.screen.value.includeTimers)
+        assertFalse(viewModel.screen.value.includeRecords)
+        assertFalse(viewModel.screen.value.includeSchedulers)
+        assertTrue(viewModel.screen.value.includeSettings)
+        assertFalse(viewModel.screen.value.backupOngoing)
+        assertNull(viewModel.screen.value.backupResult)
+    }
+
+    @Test
+    fun `check onTimersToggle`() = runTest {
+        val viewModel = createViewModel()
+        viewModel.screen.value.onTimersChange(false)
+        viewModel.screen.value.onTimersChange(true)
+        assertNull(viewModel.screen.value.content)
+        assertNull(viewModel.screen.value.contentName)
+        assertTrue(viewModel.screen.value.includeTimers)
+        assertTrue(viewModel.screen.value.includeRecords)
+        assertTrue(viewModel.screen.value.includeSchedulers)
+        assertTrue(viewModel.screen.value.includeSettings)
+        assertFalse(viewModel.screen.value.backupOngoing)
+        assertNull(viewModel.screen.value.backupResult)
+    }
+
+    @Test
+    fun `check onSchedulersChange`() = runTest {
+        val viewModel = createViewModel()
+        viewModel.screen.value.onSchedulersChange(false)
+        assertNull(viewModel.screen.value.content)
+        assertNull(viewModel.screen.value.contentName)
+        assertTrue(viewModel.screen.value.includeTimers)
+        assertTrue(viewModel.screen.value.includeRecords)
+        assertFalse(viewModel.screen.value.includeSchedulers)
+        assertTrue(viewModel.screen.value.includeSettings)
+        assertFalse(viewModel.screen.value.backupOngoing)
+        assertNull(viewModel.screen.value.backupResult)
+    }
+
+    @Test
+    fun `check onSchedulersToggle`() = runTest {
+        val viewModel = createViewModel()
+        viewModel.screen.value.onSchedulersChange(false)
+        viewModel.screen.value.onSchedulersChange(true)
+        assertNull(viewModel.screen.value.content)
+        assertNull(viewModel.screen.value.contentName)
+        assertTrue(viewModel.screen.value.includeTimers)
+        assertTrue(viewModel.screen.value.includeRecords)
+        assertTrue(viewModel.screen.value.includeSchedulers)
+        assertTrue(viewModel.screen.value.includeSettings)
+        assertFalse(viewModel.screen.value.backupOngoing)
+        assertNull(viewModel.screen.value.backupResult)
+    }
+
+    @Test
+    fun `check onTimersSchedulersChange`() = runTest {
+        val viewModel = createViewModel()
+        viewModel.screen.value.onTimersChange(false)
+        viewModel.screen.value.onSchedulersChange(true)
+        assertNull(viewModel.screen.value.content)
+        assertNull(viewModel.screen.value.contentName)
+        assertTrue(viewModel.screen.value.includeTimers)
+        assertFalse(viewModel.screen.value.includeRecords)
+        assertTrue(viewModel.screen.value.includeSchedulers)
+        assertTrue(viewModel.screen.value.includeSettings)
+        assertFalse(viewModel.screen.value.backupOngoing)
+        assertNull(viewModel.screen.value.backupResult)
+    }
+
+    @Test
+    fun `check onRecordsChange`() = runTest {
+        val viewModel = createViewModel()
+        viewModel.screen.value.onRecordsChange(false)
+        assertNull(viewModel.screen.value.content)
+        assertNull(viewModel.screen.value.contentName)
+        assertTrue(viewModel.screen.value.includeTimers)
+        assertFalse(viewModel.screen.value.includeRecords)
+        assertTrue(viewModel.screen.value.includeSchedulers)
+        assertTrue(viewModel.screen.value.includeSettings)
+        assertFalse(viewModel.screen.value.backupOngoing)
+        assertNull(viewModel.screen.value.backupResult)
+    }
+
+    @Test
+    fun `check onRecordsToggle`() = runTest {
+        val viewModel = createViewModel()
+        viewModel.screen.value.onRecordsChange(false)
+        viewModel.screen.value.onRecordsChange(true)
+        assertNull(viewModel.screen.value.content)
+        assertNull(viewModel.screen.value.contentName)
+        assertTrue(viewModel.screen.value.includeTimers)
+        assertTrue(viewModel.screen.value.includeRecords)
+        assertTrue(viewModel.screen.value.includeSchedulers)
+        assertTrue(viewModel.screen.value.includeSettings)
+        assertFalse(viewModel.screen.value.backupOngoing)
+        assertNull(viewModel.screen.value.backupResult)
+    }
+
+    @Test
+    fun `check onTimersRecordsChange`() = runTest {
+        val viewModel = createViewModel()
+        viewModel.screen.value.onTimersChange(false)
+        viewModel.screen.value.onRecordsChange(true)
+        assertNull(viewModel.screen.value.content)
+        assertNull(viewModel.screen.value.contentName)
+        assertTrue(viewModel.screen.value.includeTimers)
+        assertTrue(viewModel.screen.value.includeRecords)
+        assertFalse(viewModel.screen.value.includeSchedulers)
+        assertTrue(viewModel.screen.value.includeSettings)
+        assertFalse(viewModel.screen.value.backupOngoing)
+        assertNull(viewModel.screen.value.backupResult)
+    }
+
+    @Test
+    fun `check onSettingsChange`() = runTest {
+        val viewModel = createViewModel()
+        viewModel.screen.value.onSettingsChange(false)
+        assertNull(viewModel.screen.value.content)
+        assertNull(viewModel.screen.value.contentName)
+        assertTrue(viewModel.screen.value.includeTimers)
+        assertTrue(viewModel.screen.value.includeRecords)
+        assertTrue(viewModel.screen.value.includeSchedulers)
+        assertFalse(viewModel.screen.value.includeSettings)
+        assertFalse(viewModel.screen.value.backupOngoing)
+        assertNull(viewModel.screen.value.backupResult)
+    }
+
+    @Test
+    fun `check onSettingsToggle`() = runTest {
+        val viewModel = createViewModel()
+        viewModel.screen.value.onSettingsChange(false)
+        viewModel.screen.value.onSettingsChange(true)
+        assertNull(viewModel.screen.value.content)
+        assertNull(viewModel.screen.value.contentName)
+        assertTrue(viewModel.screen.value.includeTimers)
+        assertTrue(viewModel.screen.value.includeRecords)
+        assertTrue(viewModel.screen.value.includeSchedulers)
+        assertTrue(viewModel.screen.value.includeSettings)
+        assertFalse(viewModel.screen.value.backupOngoing)
+        assertNull(viewModel.screen.value.backupResult)
+    }
+
+    /**
+     * Will create new [ViewModelStore], add view model into it using [ViewModelProvider]
+     * and then call [ViewModelStore.clear], that will cause [ViewModel.onCleared] to be called
+     * https://stackoverflow.com/a/57052682/5507158
+     */
+    protected fun ViewModel.callOnCleared() {
+        val viewModelStore = ViewModelStore()
+        val viewModelProvider = ViewModelProvider(
+            viewModelStore,
+            object : ViewModelProvider.Factory {
+                @Suppress("UNCHECKED_CAST")
+                override fun <T : ViewModel> create(modelClass: Class<T>): T {
+                    return this@callOnCleared as T
+                }
+            }
+        )
+        viewModelProvider[this@callOnCleared::class.java]
+        viewModelStore.clear()
+    }
+}
diff --git a/app-backup/src/test/java/xyz.aprildown.timer.backup/ExportViewModelTest.kt b/app-backup/src/test/java/xyz.aprildown.timer.backup/ExportViewModelTest.kt
new file mode 100644
index 00000000..5d63630b
--- /dev/null
+++ b/app-backup/src/test/java/xyz.aprildown.timer.backup/ExportViewModelTest.kt
@@ -0,0 +1,120 @@
+package xyz.aprildown.timer.backup
+
+import androidx.lifecycle.SavedStateHandle
+import kotlinx.coroutines.test.StandardTestDispatcher
+import kotlinx.coroutines.test.TestScope
+import kotlinx.coroutines.test.runTest
+import okio.Buffer
+import org.junit.After
+import org.junit.Assert.assertEquals
+import org.junit.Assert.assertFalse
+import org.junit.Assert.assertNull
+import org.junit.Assert.assertSame
+import org.junit.Assert.assertTrue
+import org.junit.Test
+import org.mockito.kotlin.any
+import org.mockito.kotlin.mock
+import org.mockito.kotlin.verify
+import org.mockito.kotlin.verifyNoMoreInteractions
+import org.mockito.kotlin.whenever
+import xyz.aprildown.timer.app.backup.ExportViewModel
+import xyz.aprildown.timer.domain.usecases.Fruit
+import xyz.aprildown.timer.domain.usecases.data.ExportAppData
+
+internal class ExportViewModelTest : BaseBackupViewModelTest() {
+    private val exportAppData: ExportAppData = mock()
+
+    override fun TestScope.createViewModel(): ExportViewModel {
+        return ExportViewModel(
+            mainDispatcher = StandardTestDispatcher(testScheduler),
+            savedStateHandle = SavedStateHandle(),
+            exportAppData = exportAppData,
+        )
+    }
+
+    @Test
+    fun changeContent() = runTest {
+        val viewModel = createViewModel()
+
+        val content = ExportViewModel.WritableContent(getSink = { error("error") }, delete = {})
+        val name = randomString()
+        viewModel.changeContent(content, name)
+
+        assertSame(content, viewModel.screen.value.content)
+        assertSame(name, viewModel.screen.value.contentName)
+        assertTrue(viewModel.screen.value.includeTimers)
+        assertTrue(viewModel.screen.value.includeRecords)
+        assertTrue(viewModel.screen.value.includeSchedulers)
+        assertTrue(viewModel.screen.value.includeSettings)
+        assertFalse(viewModel.screen.value.backupOngoing)
+        assertNull(viewModel.screen.value.backupResult)
+    }
+
+    @Test
+    fun `backUp without content`() = runTest {
+        val viewModel = createViewModel()
+        viewModel.screen.value.onBackup()
+        testScheduler.advanceUntilIdle()
+        assertNull(viewModel.screen.value.backupResult)
+    }
+
+    @Test
+    fun `backUp without options`() = runTest {
+        val viewModel = createViewModel()
+        viewModel.changeContent(
+            content = ExportViewModel.WritableContent(getSink = { error("error") }, delete = {}),
+            name = randomString(),
+        )
+        viewModel.screen.value.onTimersChange(false)
+        viewModel.screen.value.onSettingsChange(false)
+        viewModel.screen.value.onBackup()
+        testScheduler.advanceUntilIdle()
+        assertNull(viewModel.screen.value.backupResult)
+    }
+
+    @Test
+    fun backUp() = runTest {
+        val viewModel = createViewModel()
+        val data = randomString()
+        whenever(exportAppData.invoke(any())).thenReturn(data)
+        val buffer = Buffer()
+        viewModel.changeContent(
+            content = ExportViewModel.WritableContent(getSink = { buffer }, delete = {}),
+            name = randomString(),
+        )
+        viewModel.screen.value.onBackup()
+        testScheduler.advanceUntilIdle()
+
+        assertTrue(viewModel.screen.value.backupResult is Fruit.Ripe<*>)
+        assertEquals(data, buffer.readUtf8())
+
+        verify(exportAppData).invoke(
+            ExportAppData.Params(
+                exportTimers = viewModel.screen.value.includeTimers,
+                exportTimerStamps = viewModel.screen.value.includeRecords,
+                exportSchedulers = viewModel.screen.value.includeSchedulers,
+                exportPreferences = viewModel.screen.value.includeSettings,
+            )
+        )
+        verifyNoMoreInteractions(exportAppData)
+    }
+
+    @Test
+    fun onCleared() = runTest {
+        val viewModel = createViewModel()
+
+        var isDeleted = false
+        val content = ExportViewModel.WritableContent(
+            getSink = { error("error") },
+            delete = { isDeleted = true }
+        )
+        viewModel.changeContent(content, "")
+        viewModel.callOnCleared()
+        assertTrue(isDeleted)
+    }
+
+    @After
+    fun after() {
+        verifyNoMoreInteractions(exportAppData)
+    }
+}
diff --git a/app-backup/src/test/java/xyz.aprildown.timer.backup/ImportViewModelTest.kt b/app-backup/src/test/java/xyz.aprildown.timer.backup/ImportViewModelTest.kt
new file mode 100644
index 00000000..1f347871
--- /dev/null
+++ b/app-backup/src/test/java/xyz.aprildown.timer.backup/ImportViewModelTest.kt
@@ -0,0 +1,98 @@
+package xyz.aprildown.timer.backup
+
+import kotlinx.coroutines.test.StandardTestDispatcher
+import kotlinx.coroutines.test.TestScope
+import kotlinx.coroutines.test.runTest
+import okio.Buffer
+import org.junit.After
+import org.junit.Assert.assertFalse
+import org.junit.Assert.assertNull
+import org.junit.Assert.assertSame
+import org.junit.Assert.assertTrue
+import org.junit.Test
+import org.mockito.kotlin.mock
+import org.mockito.kotlin.verify
+import org.mockito.kotlin.verifyNoMoreInteractions
+import xyz.aprildown.timer.app.backup.ImportViewModel
+import xyz.aprildown.timer.domain.usecases.Fruit
+import xyz.aprildown.timer.domain.usecases.data.ImportAppData
+import xyz.aprildown.timer.domain.usecases.data.NotifyDataChanged
+
+internal class ImportViewModelTest : BaseBackupViewModelTest() {
+    private val importAppData: ImportAppData = mock()
+    private val notifyDataChanged: NotifyDataChanged = mock()
+
+    override fun TestScope.createViewModel(): ImportViewModel {
+        return ImportViewModel(
+            mainDispatcher = StandardTestDispatcher(testScheduler),
+            importAppData = importAppData,
+            notifyDataChanged = notifyDataChanged,
+        )
+    }
+
+    @Test
+    fun `check import initial state`() = runTest {
+        val viewModel = createViewModel()
+        assertFalse(viewModel.importScreen.value.wipe)
+    }
+
+    @Test
+    fun `check onWipeChange`() = runTest {
+        val viewModel = createViewModel()
+        viewModel.importScreen.value.onWipeChange(true)
+        assertTrue(viewModel.importScreen.value.wipe)
+    }
+
+    @Test
+    fun `check changeContent`() = runTest {
+        val viewModel = createViewModel()
+
+        val content = ImportViewModel.ReadableContent(getSource = { mock() })
+        val name = randomString()
+        viewModel.changeContent(content, name)
+
+        assertSame(content, viewModel.screen.value.content)
+        assertSame(name, viewModel.screen.value.contentName)
+        assertTrue(viewModel.screen.value.includeTimers)
+        assertTrue(viewModel.screen.value.includeRecords)
+        assertTrue(viewModel.screen.value.includeSchedulers)
+        assertTrue(viewModel.screen.value.includeSettings)
+        assertFalse(viewModel.screen.value.backupOngoing)
+        assertNull(viewModel.screen.value.backupResult)
+    }
+
+    @Test
+    fun backUp() = runTest {
+        val viewModel = createViewModel()
+        val buffer = Buffer()
+        val data = randomString()
+        buffer.writeUtf8(data)
+        viewModel.changeContent(
+            content = ImportViewModel.ReadableContent(getSource = { buffer }),
+            name = randomString(),
+        )
+        viewModel.screen.value.onBackup()
+        testScheduler.advanceUntilIdle()
+
+        assertTrue(viewModel.screen.value.backupResult is Fruit.Ripe<*>)
+        verify(importAppData).invoke(
+            ImportAppData.Params(
+                data = data,
+                wipeFirst = viewModel.importScreen.value.wipe,
+                importTimers = viewModel.screen.value.includeTimers,
+                importTimerStamps = viewModel.screen.value.includeRecords,
+                importSchedulers = viewModel.screen.value.includeSchedulers,
+                importPreferences = viewModel.screen.value.includeSettings,
+            )
+        )
+        verifyNoMoreInteractions(importAppData)
+        verify(notifyDataChanged).invoke()
+        verifyNoMoreInteractions(notifyDataChanged)
+    }
+
+    @After
+    fun after() {
+        verifyNoMoreInteractions(importAppData)
+        verifyNoMoreInteractions(notifyDataChanged)
+    }
+}
diff --git a/app-base/build.gradle b/app-base/build.gradle
index b2b1211e..84694eda 100644
--- a/app-base/build.gradle
+++ b/app-base/build.gradle
@@ -7,6 +7,12 @@ plugins {
 
 android {
     namespace 'xyz.aprildown.timer.app.base'
+    buildFeatures {
+        compose true
+    }
+    composeOptions {
+        kotlinCompilerExtensionVersion = libs.versions.composeCompiler.get()
+    }
 }
 
 dependencies {
@@ -25,6 +31,10 @@ dependencies {
     api libs.androidx.navigation.fragment
     api libs.androidx.navigation.ui
 
+    implementation platform(libs.compose.bom)
+    implementation libs.bundles.compose
+    implementation libs.materialColorUtilities
+
     implementation libs.hilt.android
     kapt libs.hilt.compiler
 
diff --git a/app-base/src/main/java/xyz/aprildown/timer/app/base/ui/AppNavigator.kt b/app-base/src/main/java/xyz/aprildown/timer/app/base/ui/AppNavigator.kt
index 31e022c2..42281047 100644
--- a/app-base/src/main/java/xyz/aprildown/timer/app/base/ui/AppNavigator.kt
+++ b/app-base/src/main/java/xyz/aprildown/timer/app/base/ui/AppNavigator.kt
@@ -18,6 +18,7 @@ interface AppNavigator {
     fun getStartTimerShortcutIntent(timerId: Int, openOnClick: Boolean): Intent
     fun getShortcutCreatedIntent(): Intent
     fun getIntroIntent(isOnBoarding: Boolean = false): Intent
+    fun getImagePreviewIntent(path: String): Intent
 
     /**
      * @param [timerInfo] is always not empty.
diff --git a/app-base/src/main/java/xyz/aprildown/timer/app/base/ui/AppTheme.kt b/app-base/src/main/java/xyz/aprildown/timer/app/base/ui/AppTheme.kt
new file mode 100644
index 00000000..c7a8d48b
--- /dev/null
+++ b/app-base/src/main/java/xyz/aprildown/timer/app/base/ui/AppTheme.kt
@@ -0,0 +1,108 @@
+package xyz.aprildown.timer.app.base.ui
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.ColorScheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.graphics.Color
+import com.materialkolor.palettes.CorePalette
+
+@Composable
+fun AppTheme(
+    isDarkTheme: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) {
+    val dynamicTheme = remember { newDynamicTheme }
+    MaterialTheme(
+        colorScheme = remember(
+            isDarkTheme,
+            dynamicTheme.colorPrimary,
+            dynamicTheme.colorSecondary,
+        ) {
+            val core = CorePalette.of(dynamicTheme.colorPrimary)
+            val secondary = CorePalette.of(dynamicTheme.colorSecondary)
+            if (isDarkTheme) {
+                darkFromCorePalette(core = core, secondary = secondary)
+            } else {
+                lightFromCorePalette(core = core, secondary = secondary)
+            }
+        },
+        content = content,
+    )
+}
+
+/** [com.materialkolor.scheme.Scheme]
+ *  [androidx.compose.material3.lightColorScheme]
+ * */
+private fun lightFromCorePalette(core: CorePalette, secondary: CorePalette = core): ColorScheme {
+    return ColorScheme(
+        primary = Color(core.a1.tone(40)),
+        onPrimary = Color(core.a1.tone(100)),
+        primaryContainer = Color(core.a1.tone(90)),
+        onPrimaryContainer = Color(core.a1.tone(10)),
+        inversePrimary = Color(core.a1.tone(80)),
+
+        secondary = Color(secondary.a1.tone(40)),
+        onSecondary = Color(secondary.a1.tone(100)),
+        secondaryContainer = Color(secondary.a1.tone(90)),
+        onSecondaryContainer = Color(secondary.a1.tone(10)),
+
+        tertiary = Color(core.a3.tone(40)),
+        onTertiary = Color(core.a3.tone(100)),
+        tertiaryContainer = Color(core.a3.tone(90)),
+        onTertiaryContainer = Color(core.a3.tone(10)),
+        background = Color(core.n1.tone(99)),
+        onBackground = Color(core.n1.tone(10)),
+        surface = Color(core.n1.tone(99)),
+        onSurface = Color(core.n1.tone(10)),
+        surfaceVariant = Color(core.n2.tone(90)),
+        onSurfaceVariant = Color(core.n2.tone(30)),
+        surfaceTint = Color(core.a1.tone(40)),
+        inverseSurface = Color(core.n1.tone(20)),
+        inverseOnSurface = Color(core.n1.tone(95)),
+        error = Color(core.error.tone(40)),
+        onError = Color(core.error.tone(100)),
+        errorContainer = Color(core.error.tone(90)),
+        onErrorContainer = Color(core.error.tone(10)),
+        outline = Color(core.n2.tone(50)),
+        outlineVariant = Color(core.n2.tone(80)),
+        scrim = Color(core.n1.tone(0)),
+    )
+}
+
+private fun darkFromCorePalette(core: CorePalette, secondary: CorePalette = core): ColorScheme {
+    return ColorScheme(
+        primary = Color(core.a1.tone(80)),
+        onPrimary = Color(core.a1.tone(20)),
+        primaryContainer = Color(core.a1.tone(30)),
+        onPrimaryContainer = Color(core.a1.tone(90)),
+        inversePrimary = Color(core.a1.tone(40)),
+
+        secondary = Color(secondary.a1.tone(80)),
+        onSecondary = Color(secondary.a1.tone(20)),
+        secondaryContainer = Color(secondary.a1.tone(30)),
+        onSecondaryContainer = Color(secondary.a1.tone(90)),
+
+        tertiary = Color(core.a3.tone(80)),
+        onTertiary = Color(core.a3.tone(20)),
+        tertiaryContainer = Color(core.a3.tone(30)),
+        onTertiaryContainer = Color(core.a3.tone(90)),
+        background = Color(core.n1.tone(10)),
+        onBackground = Color(core.n1.tone(90)),
+        surface = Color(core.n1.tone(10)),
+        onSurface = Color(core.n1.tone(90)),
+        surfaceVariant = Color(core.n2.tone(30)),
+        onSurfaceVariant = Color(core.n2.tone(80)),
+        surfaceTint = Color(core.a1.tone(80)),
+        inverseSurface = Color(core.n1.tone(90)),
+        inverseOnSurface = Color(core.n1.tone(20)),
+        error = Color(core.error.tone(80)),
+        onError = Color(core.error.tone(20)),
+        errorContainer = Color(core.error.tone(30)),
+        onErrorContainer = Color(core.error.tone(80)),
+        outline = Color(core.n2.tone(60)),
+        outlineVariant = Color(core.n2.tone(30)),
+        scrim = Color(core.n1.tone(0)),
+    )
+}
diff --git a/app-base/src/main/res/drawable/ic_image.xml b/app-base/src/main/res/drawable/ic_image.xml
new file mode 100644
index 00000000..b9710395
--- /dev/null
+++ b/app-base/src/main/res/drawable/ic_image.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#FFF"
+        android:pathData="M21 19V5c0-1.1-0.9-2-2-2H5C3.9 3 3 3.9 3 5v14c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2zM8.9 13.98l2.1 2.53 3.1-3.99c0.2-0.26 0.6-0.26 0.8 0.01l3.51 4.68c0.25 0.33 0.01 0.8-0.4 0.8H6.02c-0.42 0-0.65-0.48-0.39-0.81L8.12 14c0.19-0.26 0.57-0.27 0.78-0.02z" />
+</vector>
diff --git a/app-base/src/main/res/values-zh-rCN/strings.xml b/app-base/src/main/res/values-zh-rCN/strings.xml
index e4308127..6053d148 100644
--- a/app-base/src/main/res/values-zh-rCN/strings.xml
+++ b/app-base/src/main/res/values-zh-rCN/strings.xml
@@ -224,6 +224,9 @@
     <string name="notification_settings">修改通知设置</string>
     <string name="behaviour_flashlight">闪光</string>
     <string name="behaviour_flashlight_help">交替开关闪光灯</string>
+    <string name="behaviour_image">图片</string>
+    <string name="behaviour_image_help">为该步骤附加一张图片</string>
+    <string name="image_pick">选择图片</string>
     <!--Sample timers strings-->
     <string name="sample_timer_template_title">计时器模板</string>
     <string name="sample_timer_template_prepare">准备</string>
diff --git a/app-base/src/main/res/values-zh-rHK/strings.xml b/app-base/src/main/res/values-zh-rHK/strings.xml
index 0d4f2c6c..5a372554 100644
--- a/app-base/src/main/res/values-zh-rHK/strings.xml
+++ b/app-base/src/main/res/values-zh-rHK/strings.xml
@@ -224,6 +224,9 @@
     <string name="notification_settings">修改通知設置</string>
     <string name="behaviour_flashlight">閃光</string>
     <string name="behaviour_flashlight_help">交替開關閃光燈</string>
+    <string name="behaviour_image">圖片</string>
+    <string name="behaviour_image_help">爲該步驟附加一張圖片</string>
+    <string name="image_pick">選擇圖片</string>
     <!--Sample timers strings-->
     <string name="sample_timer_template_title">計時器模板</string>
     <string name="sample_timer_template_prepare">準備</string>
diff --git a/app-base/src/main/res/values-zh-rTW/strings.xml b/app-base/src/main/res/values-zh-rTW/strings.xml
index a2b2518f..bb769a29 100644
--- a/app-base/src/main/res/values-zh-rTW/strings.xml
+++ b/app-base/src/main/res/values-zh-rTW/strings.xml
@@ -224,6 +224,9 @@
     <string name="notification_settings">修改通知設定</string>
     <string name="behaviour_flashlight">閃光</string>
     <string name="behaviour_flashlight_help">交替開關閃光燈</string>
+    <string name="behaviour_image">圖片</string>
+    <string name="behaviour_image_help">為該步驟附加一張圖片</string>
+    <string name="image_pick">選擇圖片</string>
     <!--Sample timers strings-->
     <string name="sample_timer_template_title">計時器模板</string>
     <string name="sample_timer_template_prepare">準備</string>
diff --git a/app-base/src/main/res/values/strings.xml b/app-base/src/main/res/values/strings.xml
index 014fa5d6..6cf090ad 100644
--- a/app-base/src/main/res/values/strings.xml
+++ b/app-base/src/main/res/values/strings.xml
@@ -279,6 +279,11 @@
     <string name="behaviour_flashlight">Flashlight</string>
     <string name="behaviour_flashlight_help">Turn the flashlight on and off</string>
 
+    <string name="behaviour_image">Image</string>
+    <string name="behaviour_image_help">Attach an image for the step</string>
+
+    <string name="image_pick">Pick an image</string>
+
     <!--Sample timers strings-->
     <string name="sample_timer_template_title">Timer Template</string>
     <string name="sample_timer_template_prepare">Prepare</string>
diff --git a/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/BehaviourSettingsView.kt b/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/BehaviourSettingsView.kt
index ce561ab7..284c4e00 100644
--- a/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/BehaviourSettingsView.kt
+++ b/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/BehaviourSettingsView.kt
@@ -295,3 +295,15 @@ internal fun MaterialPopupMenuBuilder.addNotificationItems(
         }
     }
 }
+
+internal fun MaterialPopupMenuBuilder.addImageItems(
+    context: Context,
+    onPick: () -> Unit,
+) {
+    section {
+        item {
+            label = context.getString(RBase.string.image_pick)
+            callback = onPick
+        }
+    }
+}
diff --git a/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/EditActivity.kt b/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/EditActivity.kt
index dfae6215..76cc4a92 100644
--- a/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/EditActivity.kt
+++ b/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/EditActivity.kt
@@ -2,6 +2,7 @@ package xyz.aprildown.timer.app.timer.edit
 
 import android.app.Activity
 import android.content.ClipboardManager
+import android.content.Intent
 import android.graphics.Typeface
 import android.net.Uri
 import android.os.Bundle
@@ -12,6 +13,7 @@ import android.view.View
 import androidx.activity.addCallback
 import androidx.activity.result.ActivityResult
 import androidx.activity.result.ActivityResultCallback
+import androidx.activity.result.PickVisualMediaRequest
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.activity.viewModels
 import androidx.annotation.VisibleForTesting
@@ -53,12 +55,14 @@ import xyz.aprildown.timer.component.key.behaviour.EditableBehaviourLayout
 import xyz.aprildown.timer.domain.entities.BehaviourEntity
 import xyz.aprildown.timer.domain.entities.BehaviourType
 import xyz.aprildown.timer.domain.entities.FolderEntity
+import xyz.aprildown.timer.domain.entities.ImageAction
 import xyz.aprildown.timer.domain.entities.StepEntity
 import xyz.aprildown.timer.domain.entities.StepType
 import xyz.aprildown.timer.domain.entities.TimerEntity
 import xyz.aprildown.timer.domain.entities.toBeepAction
 import xyz.aprildown.timer.domain.entities.toCountAction
 import xyz.aprildown.timer.domain.entities.toHalfAction
+import xyz.aprildown.timer.domain.entities.toImageAction
 import xyz.aprildown.timer.domain.entities.toMusicAction
 import xyz.aprildown.timer.domain.entities.toNotificationAction
 import xyz.aprildown.timer.domain.entities.toScreenAction
@@ -95,6 +99,19 @@ class EditActivity :
         getRingtonePickerResultCallback()
     )
 
+    private val pickImageLauncher = registerForActivityResult(
+        ActivityResultContracts.PickVisualMedia()
+    ) { uri ->
+        val position = viewModel.imagePosition
+        viewModel.imagePosition = -1
+        if (uri == null || uri == Uri.EMPTY) return@registerForActivityResult
+        if (position == -1) return@registerForActivityResult
+        contentResolver.takePersistableUriPermission(uri, Intent.FLAG_GRANT_READ_URI_PERMISSION)
+        changeBehaviour(type = BehaviourType.IMAGE, position = position) {
+            it.toImageAction().copy(data = uri.toString()).toBehaviourEntity()
+        }
+    }
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         binding = ActivityEditTimerBinding.inflate(layoutInflater)
@@ -759,6 +776,12 @@ class EditActivity :
                         }
                     )
                 }
+                BehaviourType.IMAGE -> {
+                    addImageItems(
+                        context = this@EditActivity,
+                        onPick = { onImageAdd(position) },
+                    )
+                }
                 else -> Unit
             }
             section {
@@ -802,8 +825,17 @@ class EditActivity :
     ) {
         val step = getStepFromFastAdapter(position)
         val newBehaviours = mutableListOf<BehaviourEntity>()
+        var found = false
         step.behaviour.forEach {
-            newBehaviours.add(if (it.type == type) transform(it) else it)
+            if (it.type == type) {
+                newBehaviours += transform(it)
+                found = true
+            } else {
+                newBehaviours += it
+            }
+        }
+        if (!found) {
+            newBehaviours += transform(BehaviourEntity(type))
         }
         // The code after this causes setBehaviors which doesn't call onBehaviourAddedOrRemoved
         // so we check here.
@@ -820,6 +852,17 @@ class EditActivity :
         }
     }
 
+    override fun onImageAdd(position: Int) {
+        viewModel.imagePosition = position
+        pickImageLauncher.launch(
+            PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly)
+        )
+    }
+
+    override fun onImageCheck(position: Int, action: ImageAction) {
+        startActivity(appNavigator.getImagePreviewIntent(action.data))
+    }
+
     private fun postUpdateTotalTime() {
         if (shouldUpdateTotalTime) {
             binding.viewEditStepInfo.run {
diff --git a/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/EditableStep.kt b/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/EditableStep.kt
index 0de22965..bac54479 100644
--- a/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/EditableStep.kt
+++ b/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/EditableStep.kt
@@ -22,6 +22,7 @@ import xyz.aprildown.timer.app.base.utils.setTime
 import xyz.aprildown.timer.component.key.RoundTextView
 import xyz.aprildown.timer.component.key.behaviour.EditableBehaviourLayout
 import xyz.aprildown.timer.domain.entities.BehaviourEntity
+import xyz.aprildown.timer.domain.entities.ImageAction
 import xyz.aprildown.timer.domain.entities.StepType
 import xyz.aprildown.timer.app.base.R as RBase
 
@@ -58,6 +59,9 @@ class EditableStep(
             position: Int
         )
 
+        fun onImageAdd(position: Int)
+        fun onImageCheck(position: Int, action: ImageAction)
+
         fun onBehaviourAddedOrRemoved(position: Int, newBehaviours: List<BehaviourEntity>)
     }
 
@@ -118,6 +122,14 @@ class EditableStep(
                             bindingAdapterPosition
                         )
                     }
+
+                    override fun onImageAdding() {
+                        handler.onImageAdd(bindingAdapterPosition)
+                    }
+
+                    override fun onImageContentClick(action: ImageAction) {
+                        handler.onImageCheck(bindingAdapterPosition, action)
+                    }
                 }
             )
         }
diff --git a/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/UpdateStepDialog.kt b/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/UpdateStepDialog.kt
index 9a642008..f5635f94 100644
--- a/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/UpdateStepDialog.kt
+++ b/app-timer-edit/src/main/java/xyz/aprildown/timer/app/timer/edit/UpdateStepDialog.kt
@@ -1,10 +1,13 @@
 package xyz.aprildown.timer.app.timer.edit
 
 import android.app.Dialog
+import android.content.Intent
 import android.net.Uri
 import android.os.Bundle
 import android.view.View
 import android.widget.EditText
+import androidx.activity.result.PickVisualMediaRequest
+import androidx.activity.result.contract.ActivityResultContracts
 import androidx.cardview.widget.CardView
 import androidx.core.net.toUri
 import androidx.core.widget.ImageViewCompat
@@ -13,7 +16,9 @@ import com.github.deweyreed.tools.helper.gone
 import com.github.deweyreed.tools.helper.toColorStateList
 import com.github.zawadz88.materialpopupmenu.popupMenu
 import com.google.android.material.dialog.MaterialAlertDialogBuilder
+import dagger.hilt.android.AndroidEntryPoint
 import xyz.aprildown.timer.app.base.data.PreferenceData.getTypeColor
+import xyz.aprildown.timer.app.base.ui.AppNavigator
 import xyz.aprildown.timer.app.base.ui.StepUpdater
 import xyz.aprildown.timer.app.base.utils.produceTime
 import xyz.aprildown.timer.component.key.DurationPicker
@@ -21,10 +26,12 @@ import xyz.aprildown.timer.component.key.RoundTextView
 import xyz.aprildown.timer.component.key.behaviour.EditableBehaviourLayout
 import xyz.aprildown.timer.domain.entities.BehaviourEntity
 import xyz.aprildown.timer.domain.entities.BehaviourType
+import xyz.aprildown.timer.domain.entities.ImageAction
 import xyz.aprildown.timer.domain.entities.StepEntity
 import xyz.aprildown.timer.domain.entities.toBeepAction
 import xyz.aprildown.timer.domain.entities.toCountAction
 import xyz.aprildown.timer.domain.entities.toHalfAction
+import xyz.aprildown.timer.domain.entities.toImageAction
 import xyz.aprildown.timer.domain.entities.toMusicAction
 import xyz.aprildown.timer.domain.entities.toNotificationAction
 import xyz.aprildown.timer.domain.entities.toScreenAction
@@ -32,12 +39,17 @@ import xyz.aprildown.timer.domain.entities.toVibrationAction
 import xyz.aprildown.timer.domain.entities.toVoiceAction
 import xyz.aprildown.ultimateringtonepicker.RingtonePickerDialog
 import xyz.aprildown.ultimateringtonepicker.UltimateRingtonePicker
+import javax.inject.Inject
 import xyz.aprildown.timer.app.base.R as RBase
 
+@AndroidEntryPoint
 class UpdateStepDialog :
     DialogFragment(),
     EditableBehaviourLayout.Listener {
 
+    @Inject
+    lateinit var appNavigator: AppNavigator
+
     private lateinit var editName: EditText
     private lateinit var behaviourLayout: EditableBehaviourLayout
 
@@ -46,6 +58,17 @@ class UpdateStepDialog :
     var step: StepEntity.Step? = null
     var onUpdate: ((StepEntity.Step) -> Unit)? = null
 
+    private val pickImageLauncher = registerForActivityResult(
+        ActivityResultContracts.PickVisualMedia()
+    ) { uri ->
+        if (uri == null || uri == Uri.EMPTY) return@registerForActivityResult
+        requireContext().contentResolver
+            .takePersistableUriPermission(uri, Intent.FLAG_GRANT_READ_URI_PERMISSION)
+        changeBehaviour(type = BehaviourType.IMAGE) {
+            it.toImageAction().copy(data = uri.toString()).toBehaviourEntity()
+        }
+    }
+
     init {
         isCancelable = false
     }
@@ -264,8 +287,10 @@ class UpdateStepDialog :
                         }
                     )
                 }
-                else -> {
+                BehaviourType.IMAGE -> {
+                    addImageItems(context = context, onPick = ::onImageAdding)
                 }
+                else -> Unit
             }
             section {
                 item {
@@ -277,15 +302,34 @@ class UpdateStepDialog :
         }.show(context, view)
     }
 
+    override fun onImageAdding() {
+        pickImageLauncher.launch(
+            PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly)
+        )
+    }
+
+    override fun onImageContentClick(action: ImageAction) {
+        startActivity(appNavigator.getImagePreviewIntent(action.data))
+    }
+
     private fun changeBehaviour(
         type: BehaviourType,
         transform: (BehaviourEntity) -> BehaviourEntity
     ) {
-        behaviourLayout.setBehaviours(
-            behaviourLayout.getBehaviours().map {
-                if (it.type == type) transform.invoke(it) else it
+        var found = false
+        val newBehaviours = mutableListOf<BehaviourEntity>()
+        behaviourLayout.getBehaviours().forEach {
+            if (it.type == type) {
+                newBehaviours += transform.invoke(it)
+                found = true
+            } else {
+                newBehaviours += it
             }
-        )
+        }
+        if (!found) {
+            newBehaviours += transform(BehaviourEntity(type))
+        }
+        behaviourLayout.setBehaviours(newBehaviours)
     }
 
     companion object : StepUpdater {
diff --git a/app-timer-one/src/main/java/xyz/aprildown/timer/app/timer/one/OneFragment.kt b/app-timer-one/src/main/java/xyz/aprildown/timer/app/timer/one/OneFragment.kt
index b9463336..76dcdcf3 100644
--- a/app-timer-one/src/main/java/xyz/aprildown/timer/app/timer/one/OneFragment.kt
+++ b/app-timer-one/src/main/java/xyz/aprildown/timer/app/timer/one/OneFragment.kt
@@ -136,6 +136,9 @@ class OneFragment :
                     actionUpdateStepTime(index)
                 }
             }
+            imageCheckListener = {
+                startActivity(appNavigator.getImagePreviewIntent(it.data))
+            }
         }
 
         viewModel.timer.observe(viewLifecycleOwner) {
diff --git a/app-timer-one/src/main/java/xyz/aprildown/timer/app/timer/one/step/StepListView.kt b/app-timer-one/src/main/java/xyz/aprildown/timer/app/timer/one/step/StepListView.kt
index edef0997..beed5abe 100644
--- a/app-timer-one/src/main/java/xyz/aprildown/timer/app/timer/one/step/StepListView.kt
+++ b/app-timer-one/src/main/java/xyz/aprildown/timer/app/timer/one/step/StepListView.kt
@@ -7,6 +7,7 @@ import androidx.recyclerview.widget.RecyclerView
 import com.mikepenz.fastadapter.FastAdapter
 import com.mikepenz.fastadapter.IItem
 import com.mikepenz.fastadapter.adapters.ItemAdapter
+import xyz.aprildown.timer.domain.entities.ImageAction
 import xyz.aprildown.timer.domain.entities.StepEntity
 import xyz.aprildown.timer.domain.entities.TimerEntity
 import xyz.aprildown.timer.presentation.stream.TimerIndex
@@ -41,6 +42,7 @@ class StepListView @JvmOverloads constructor(
     private var currentIndex: TimerIndex = TimerIndex.Start
 
     var listener: StepLongClickListener? = null
+    var imageCheckListener: ((ImageAction) -> Unit)? = null
 
     init {
         layoutManager = stepLayoutManager
@@ -128,7 +130,16 @@ class StepListView @JvmOverloads constructor(
         endAdapter.clear()
 
         timer.startStep?.let {
-            startAdapter.add(VisibleStep(it, 0, indexesToIdentifier(0), this, this))
+            startAdapter.add(
+                VisibleStep(
+                    step = it,
+                    number = 0,
+                    id = indexesToIdentifier(0),
+                    currentPositionCallback = this,
+                    stepLongClickListener = this,
+                    imageCheckListener = imageCheckListener,
+                )
+            )
         }
 
         val stepItems = mutableListOf<IItem<*>>()
@@ -141,7 +152,8 @@ class StepListView @JvmOverloads constructor(
                             number = i + 1,
                             id = indexesToIdentifier(i + 1),
                             currentPositionCallback = this,
-                            stepLongClickListener = this
+                            stepLongClickListener = this,
+                            imageCheckListener = imageCheckListener,
                         )
                     )
                 }
@@ -163,7 +175,8 @@ class StepListView @JvmOverloads constructor(
                                 number = gi + 1,
                                 id = indexesToIdentifier(i + 1, gi),
                                 currentPositionCallback = this,
-                                stepLongClickListener = this
+                                stepLongClickListener = this,
+                                imageCheckListener = imageCheckListener,
                             )
                         }
                     )
@@ -181,7 +194,8 @@ class StepListView @JvmOverloads constructor(
                     number = stepCount + 1,
                     id = indexesToIdentifier(stepCount + 1),
                     currentPositionCallback = this,
-                    stepLongClickListener = this
+                    stepLongClickListener = this,
+                    imageCheckListener = imageCheckListener,
                 )
             )
         }
diff --git a/app-timer-one/src/main/java/xyz/aprildown/timer/app/timer/one/step/VisibleStep.kt b/app-timer-one/src/main/java/xyz/aprildown/timer/app/timer/one/step/VisibleStep.kt
index d4a385d5..8fafe834 100644
--- a/app-timer-one/src/main/java/xyz/aprildown/timer/app/timer/one/step/VisibleStep.kt
+++ b/app-timer-one/src/main/java/xyz/aprildown/timer/app/timer/one/step/VisibleStep.kt
@@ -10,7 +10,6 @@ import androidx.core.widget.ImageViewCompat
 import androidx.core.widget.TextViewCompat
 import androidx.recyclerview.widget.RecyclerView
 import com.github.deweyreed.tools.helper.attachToView
-import com.github.deweyreed.tools.helper.gone
 import com.github.deweyreed.tools.helper.onLongClick
 import com.github.deweyreed.tools.helper.toColorStateList
 import com.mikepenz.fastadapter.items.AbstractItem
@@ -18,6 +17,7 @@ import xyz.aprildown.timer.app.base.data.PreferenceData.getTypeColor
 import xyz.aprildown.timer.app.base.utils.produceTime
 import xyz.aprildown.timer.app.timer.one.R
 import xyz.aprildown.timer.app.timer.one.databinding.ItemStepStepBinding
+import xyz.aprildown.timer.domain.entities.ImageAction
 import xyz.aprildown.timer.domain.entities.StepEntity
 import xyz.aprildown.timer.app.base.R as RBase
 
@@ -26,12 +26,14 @@ internal class VisibleStep(
     private val number: Int,
     id: Long,
     private val currentPositionCallback: CurrentPositionCallback,
-    private val stepLongClickListener: OnStepLongClickListener
+    private val stepLongClickListener: OnStepLongClickListener,
+    private val imageCheckListener: ((ImageAction) -> Unit)?,
 ) : AbstractItem<VisibleStep.ViewHolder>() {
 
     override val layoutRes: Int = R.layout.item_step_step
     override val type: Int = RBase.id.type_step_step
     override fun getViewHolder(v: View): ViewHolder = ViewHolder(v)
+
     override var identifier: Long = id
 
     override fun bindView(holder: ViewHolder, payloads: List<Any>) {
@@ -80,7 +82,7 @@ internal class VisibleStep(
                     binding.textTime,
                     R.style.TextAppearance_Stepper_NonSelected
                 )
-                binding.layoutBehaviour.gone()
+                binding.layoutBehaviour.isVisible = false
             }
 
             val typeColor = step.type.getTypeColor(context)
@@ -94,6 +96,7 @@ internal class VisibleStep(
             binding.layoutBehaviour.run {
                 setBehaviours(step.behaviour)
                 setEnabledColor(typeColor)
+                onImageCheck = this@VisibleStep.imageCheckListener
             }
         }
     }
diff --git a/app/build.gradle b/app/build.gradle
index 97f4b720..c8bc66b9 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -147,7 +147,8 @@ dependencies {
     implementation libs.theme
     implementation libs.toggleButtonGroup
     implementation libs.ultimateRingtonePicker
-    implementation libs.verticalStepperForm
+    implementation libs.coil
+    implementation libs.coil.gif
 
     androidTestCompileOnly libs.taskerPlugin
 }
diff --git a/app/dependencies/dogReleaseRuntimeClasspath.txt b/app/dependencies/dogReleaseRuntimeClasspath.txt
index 5238380b..bbda12fb 100644
--- a/app/dependencies/dogReleaseRuntimeClasspath.txt
+++ b/app/dependencies/dogReleaseRuntimeClasspath.txt
@@ -16,8 +16,9 @@
 :data
 :domain
 :presentation
-androidx.activity:activity-ktx:1.8.1
-androidx.activity:activity:1.8.1
+androidx.activity:activity-compose:1.9.0
+androidx.activity:activity-ktx:1.9.0
+androidx.activity:activity:1.9.0
 androidx.annotation:annotation-experimental:1.4.0
 androidx.annotation:annotation-jvm:1.8.0
 androidx.annotation:annotation:1.8.0
@@ -25,12 +26,50 @@ androidx.appcompat:appcompat-resources:1.7.0
 androidx.appcompat:appcompat:1.7.0
 androidx.arch.core:core-common:2.2.0
 androidx.arch.core:core-runtime:2.2.0
+androidx.autofill:autofill:1.0.0
 androidx.browser:browser:1.8.0
 androidx.cardview:cardview:1.0.0
 androidx.collection:collection-jvm:1.4.0
 androidx.collection:collection-ktx:1.4.0
 androidx.collection:collection:1.4.0
+androidx.compose.animation:animation-android:1.6.8
+androidx.compose.animation:animation-core-android:1.6.8
+androidx.compose.animation:animation-core:1.6.8
+androidx.compose.animation:animation:1.6.8
+androidx.compose.foundation:foundation-android:1.6.8
+androidx.compose.foundation:foundation-layout-android:1.6.8
+androidx.compose.foundation:foundation-layout:1.6.8
+androidx.compose.foundation:foundation:1.6.8
+androidx.compose.material3:material3-android:1.2.1
+androidx.compose.material3:material3:1.2.1
+androidx.compose.material:material-android:1.6.8
+androidx.compose.material:material-icons-core-android:1.6.8
+androidx.compose.material:material-icons-core:1.6.8
+androidx.compose.material:material-icons-extended-android:1.6.8
+androidx.compose.material:material-icons-extended:1.6.8
+androidx.compose.material:material-ripple-android:1.6.8
+androidx.compose.material:material-ripple:1.6.8
+androidx.compose.material:material:1.6.8
+androidx.compose.runtime:runtime-android:1.6.8
+androidx.compose.runtime:runtime-livedata:1.6.8
+androidx.compose.runtime:runtime-saveable-android:1.6.8
+androidx.compose.runtime:runtime-saveable:1.6.8
+androidx.compose.runtime:runtime:1.6.8
+androidx.compose.ui:ui-android:1.6.8
+androidx.compose.ui:ui-geometry-android:1.6.8
+androidx.compose.ui:ui-geometry:1.6.8
+androidx.compose.ui:ui-graphics-android:1.6.8
+androidx.compose.ui:ui-graphics:1.6.8
+androidx.compose.ui:ui-text-android:1.6.8
+androidx.compose.ui:ui-text:1.6.8
+androidx.compose.ui:ui-unit-android:1.6.8
+androidx.compose.ui:ui-unit:1.6.8
+androidx.compose.ui:ui-util-android:1.6.8
+androidx.compose.ui:ui-util:1.6.8
+androidx.compose.ui:ui:1.6.8
+androidx.compose:compose-bom:2024.06.00
 androidx.concurrent:concurrent-futures:1.1.0
+androidx.constraintlayout:constraintlayout-compose:1.0.1
 androidx.constraintlayout:constraintlayout-core:1.0.4
 androidx.constraintlayout:constraintlayout:2.1.4
 androidx.coordinatorlayout:coordinatorlayout:1.1.0
@@ -45,12 +84,14 @@ androidx.drawerlayout:drawerlayout:1.1.1
 androidx.dynamicanimation:dynamicanimation:1.0.0
 androidx.emoji2:emoji2-views-helper:1.3.0
 androidx.emoji2:emoji2:1.3.0
+androidx.exifinterface:exifinterface:1.3.7
 androidx.fragment:fragment-ktx:1.8.0
 androidx.fragment:fragment:1.8.0
 androidx.hilt:hilt-common:1.2.0
 androidx.hilt:hilt-work:1.2.0
 androidx.interpolator:interpolator:1.0.0
 androidx.legacy:legacy-support-core-utils:1.0.0
+androidx.lifecycle:lifecycle-common-java8:2.8.2
 androidx.lifecycle:lifecycle-common-jvm:2.8.2
 androidx.lifecycle:lifecycle-common:2.8.2
 androidx.lifecycle:lifecycle-livedata-core-ktx:2.8.2
@@ -106,7 +147,6 @@ androidx.work:work-runtime:2.9.0
 cn.carbswang.android:NumberPickerView:1.2.0
 com.afollestad.material-dialogs:commons:0.9.6.0
 com.afollestad.material-dialogs:core:0.9.6.0
-com.ernestoyaquello.stepperform:vertical-stepper-form:2.5.0
 com.github.DeweyReed:ToastCompat:d0a4d6cac3
 com.github.DeweyReed:UltimateRingtonePicker:3.3.0
 com.github.DeweyReed:android-job:a04c817792
@@ -115,6 +155,7 @@ com.github.PhilJay:MPAndroidChart:v3.1.0
 com.github.bumptech.glide:disklrucache:4.16.0
 com.github.kizitonwose:CalendarView:1.0.4
 com.github.zawadz88.materialpopupmenu:material-popup-menu:4.1.0
+com.google.accompanist:accompanist-drawablepainter:0.32.0
 com.google.android.flexbox:flexbox:3.0.0
 com.google.android.material:material:1.4.0
 com.google.code.findbugs:jsr305:3.0.2
@@ -125,6 +166,8 @@ com.google.dagger:hilt-core:2.51.1
 com.google.guava:listenablefuture:1.0
 com.jakewharton.timber:timber:5.0.1
 com.joaomgcd:taskerpluginlibrary:0.4.10
+com.materialkolor:material-color-utilities-android:1.5.1
+com.materialkolor:material-color-utilities:1.5.1
 com.mikepenz:fastadapter-extensions-binding:5.7.0
 com.mikepenz:fastadapter-extensions-expandable:5.7.0
 com.mikepenz:fastadapter:5.7.0
@@ -132,15 +175,25 @@ com.mikepenz:materialdrawer:8.4.5
 com.mikepenz:materialize:1.2.1
 com.nex3z:toggle-button-group:1.2.3
 com.squareup.moshi:moshi:1.15.1
+com.squareup.okhttp3:okhttp:4.12.0
 com.squareup.okio:okio-jvm:3.9.0
 com.squareup.okio:okio:3.9.0
+dev.drewhamilton.poko:poko-annotations-jvm:0.15.2
+dev.drewhamilton.poko:poko-annotations:0.15.2
+io.coil-kt:coil-base:2.6.0
+io.coil-kt:coil-compose-base:2.6.0
+io.coil-kt:coil-compose:2.6.0
+io.coil-kt:coil-gif:2.6.0
+io.coil-kt:coil:2.6.0
 javax.inject:javax.inject:1
 me.zhanghai.android.materialprogressbar:library:1.4.2
+net.engawapg.lib:zoomable:1.6.1
 nl.dionsegijn:konfetti:1.3.2
 org.jetbrains.kotlin:kotlin-android-extensions-runtime:1.9.24
 org.jetbrains.kotlin:kotlin-parcelize-runtime:1.9.24
-org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.8.22
-org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.8.22
+org.jetbrains.kotlin:kotlin-stdlib-common:1.9.24
+org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.9.0
+org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.9.0
 org.jetbrains.kotlin:kotlin-stdlib:1.9.24
 org.jetbrains.kotlinx:kotlinx-coroutines-android:1.8.1
 org.jetbrains.kotlinx:kotlinx-coroutines-bom:1.8.1
diff --git a/app/dependencies/googleReleaseRuntimeClasspath.txt b/app/dependencies/googleReleaseRuntimeClasspath.txt
index fac88336..8e7aa284 100644
--- a/app/dependencies/googleReleaseRuntimeClasspath.txt
+++ b/app/dependencies/googleReleaseRuntimeClasspath.txt
@@ -17,8 +17,9 @@
 :domain
 :flavor-google
 :presentation
-androidx.activity:activity-ktx:1.8.1
-androidx.activity:activity:1.8.1
+androidx.activity:activity-compose:1.9.0
+androidx.activity:activity-ktx:1.9.0
+androidx.activity:activity:1.9.0
 androidx.annotation:annotation-experimental:1.4.0
 androidx.annotation:annotation-jvm:1.8.0
 androidx.annotation:annotation:1.8.0
@@ -27,12 +28,50 @@ androidx.appcompat:appcompat:1.7.0
 androidx.arch.core:core-common:2.2.0
 androidx.arch.core:core-runtime:2.2.0
 androidx.asynclayoutinflater:asynclayoutinflater:1.0.0
+androidx.autofill:autofill:1.0.0
 androidx.browser:browser:1.8.0
 androidx.cardview:cardview:1.0.0
 androidx.collection:collection-jvm:1.4.0
 androidx.collection:collection-ktx:1.4.0
 androidx.collection:collection:1.4.0
+androidx.compose.animation:animation-android:1.6.8
+androidx.compose.animation:animation-core-android:1.6.8
+androidx.compose.animation:animation-core:1.6.8
+androidx.compose.animation:animation:1.6.8
+androidx.compose.foundation:foundation-android:1.6.8
+androidx.compose.foundation:foundation-layout-android:1.6.8
+androidx.compose.foundation:foundation-layout:1.6.8
+androidx.compose.foundation:foundation:1.6.8
+androidx.compose.material3:material3-android:1.2.1
+androidx.compose.material3:material3:1.2.1
+androidx.compose.material:material-android:1.6.8
+androidx.compose.material:material-icons-core-android:1.6.8
+androidx.compose.material:material-icons-core:1.6.8
+androidx.compose.material:material-icons-extended-android:1.6.8
+androidx.compose.material:material-icons-extended:1.6.8
+androidx.compose.material:material-ripple-android:1.6.8
+androidx.compose.material:material-ripple:1.6.8
+androidx.compose.material:material:1.6.8
+androidx.compose.runtime:runtime-android:1.6.8
+androidx.compose.runtime:runtime-livedata:1.6.8
+androidx.compose.runtime:runtime-saveable-android:1.6.8
+androidx.compose.runtime:runtime-saveable:1.6.8
+androidx.compose.runtime:runtime:1.6.8
+androidx.compose.ui:ui-android:1.6.8
+androidx.compose.ui:ui-geometry-android:1.6.8
+androidx.compose.ui:ui-geometry:1.6.8
+androidx.compose.ui:ui-graphics-android:1.6.8
+androidx.compose.ui:ui-graphics:1.6.8
+androidx.compose.ui:ui-text-android:1.6.8
+androidx.compose.ui:ui-text:1.6.8
+androidx.compose.ui:ui-unit-android:1.6.8
+androidx.compose.ui:ui-unit:1.6.8
+androidx.compose.ui:ui-util-android:1.6.8
+androidx.compose.ui:ui-util:1.6.8
+androidx.compose.ui:ui:1.6.8
+androidx.compose:compose-bom:2024.06.00
 androidx.concurrent:concurrent-futures:1.1.0
+androidx.constraintlayout:constraintlayout-compose:1.0.1
 androidx.constraintlayout:constraintlayout-core:1.0.4
 androidx.constraintlayout:constraintlayout:2.1.4
 androidx.coordinatorlayout:coordinatorlayout:1.1.0
@@ -49,6 +88,7 @@ androidx.drawerlayout:drawerlayout:1.1.1
 androidx.dynamicanimation:dynamicanimation:1.0.0
 androidx.emoji2:emoji2-views-helper:1.3.0
 androidx.emoji2:emoji2:1.3.0
+androidx.exifinterface:exifinterface:1.3.7
 androidx.fragment:fragment-ktx:1.8.0
 androidx.fragment:fragment:1.8.0
 androidx.hilt:hilt-common:1.2.0
@@ -59,6 +99,7 @@ androidx.interpolator:interpolator:1.0.0
 androidx.legacy:legacy-support-core-ui:1.0.0
 androidx.legacy:legacy-support-core-utils:1.0.0
 androidx.legacy:legacy-support-v4:1.0.0
+androidx.lifecycle:lifecycle-common-java8:2.8.2
 androidx.lifecycle:lifecycle-common-jvm:2.8.2
 androidx.lifecycle:lifecycle-common:2.8.2
 androidx.lifecycle:lifecycle-extensions:2.2.0
@@ -117,7 +158,6 @@ com.afollestad.material-dialogs:commons:0.9.6.0
 com.afollestad.material-dialogs:core:0.9.6.0
 com.android.billingclient:billing-ktx:6.2.0
 com.android.billingclient:billing:6.2.0
-com.ernestoyaquello.stepperform:vertical-stepper-form:2.5.0
 com.firebaseui:firebase-ui-auth:8.0.2
 com.github.DeweyReed:ToastCompat:d0a4d6cac3
 com.github.DeweyReed:UltimateRingtonePicker:3.3.0
@@ -127,6 +167,7 @@ com.github.PhilJay:MPAndroidChart:v3.1.0
 com.github.bumptech.glide:disklrucache:4.16.0
 com.github.kizitonwose:CalendarView:1.0.4
 com.github.zawadz88.materialpopupmenu:material-popup-menu:4.1.0
+com.google.accompanist:accompanist-drawablepainter:0.32.0
 com.google.android.datatransport:transport-api:3.0.0
 com.google.android.datatransport:transport-backend-cct:3.1.8
 com.google.android.datatransport:transport-runtime:3.1.8
@@ -169,6 +210,8 @@ com.google.firebase:firebase-storage:21.0.0
 com.google.guava:listenablefuture:1.0
 com.jakewharton.timber:timber:5.0.1
 com.joaomgcd:taskerpluginlibrary:0.4.10
+com.materialkolor:material-color-utilities-android:1.5.1
+com.materialkolor:material-color-utilities:1.5.1
 com.microsoft.appcenter:appcenter-crashes:5.0.4
 com.microsoft.appcenter:appcenter:5.0.4
 com.mikepenz:fastadapter-extensions-binding:5.7.0
@@ -178,16 +221,26 @@ com.mikepenz:materialdrawer:8.4.5
 com.mikepenz:materialize:1.2.1
 com.nex3z:toggle-button-group:1.2.3
 com.squareup.moshi:moshi:1.15.1
+com.squareup.okhttp3:okhttp:4.12.0
 com.squareup.okio:okio-jvm:3.9.0
 com.squareup.okio:okio:3.9.0
+dev.drewhamilton.poko:poko-annotations-jvm:0.15.2
+dev.drewhamilton.poko:poko-annotations:0.15.2
+io.coil-kt:coil-base:2.6.0
+io.coil-kt:coil-compose-base:2.6.0
+io.coil-kt:coil-compose:2.6.0
+io.coil-kt:coil-gif:2.6.0
+io.coil-kt:coil:2.6.0
 javax.inject:javax.inject:1
 me.zhanghai.android.materialprogressbar:library:1.4.2
+net.engawapg.lib:zoomable:1.6.1
 net.lingala.zip4j:zip4j:2.11.5
 nl.dionsegijn:konfetti:1.3.2
 org.jetbrains.kotlin:kotlin-android-extensions-runtime:1.9.24
 org.jetbrains.kotlin:kotlin-parcelize-runtime:1.9.24
-org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.8.22
-org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.8.22
+org.jetbrains.kotlin:kotlin-stdlib-common:1.9.24
+org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.9.0
+org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.9.0
 org.jetbrains.kotlin:kotlin-stdlib:1.9.24
 org.jetbrains.kotlinx:kotlinx-coroutines-android:1.8.1
 org.jetbrains.kotlinx:kotlinx-coroutines-bom:1.8.1
diff --git a/app/dependencies/otherReleaseRuntimeClasspath.txt b/app/dependencies/otherReleaseRuntimeClasspath.txt
index 5238380b..bbda12fb 100644
--- a/app/dependencies/otherReleaseRuntimeClasspath.txt
+++ b/app/dependencies/otherReleaseRuntimeClasspath.txt
@@ -16,8 +16,9 @@
 :data
 :domain
 :presentation
-androidx.activity:activity-ktx:1.8.1
-androidx.activity:activity:1.8.1
+androidx.activity:activity-compose:1.9.0
+androidx.activity:activity-ktx:1.9.0
+androidx.activity:activity:1.9.0
 androidx.annotation:annotation-experimental:1.4.0
 androidx.annotation:annotation-jvm:1.8.0
 androidx.annotation:annotation:1.8.0
@@ -25,12 +26,50 @@ androidx.appcompat:appcompat-resources:1.7.0
 androidx.appcompat:appcompat:1.7.0
 androidx.arch.core:core-common:2.2.0
 androidx.arch.core:core-runtime:2.2.0
+androidx.autofill:autofill:1.0.0
 androidx.browser:browser:1.8.0
 androidx.cardview:cardview:1.0.0
 androidx.collection:collection-jvm:1.4.0
 androidx.collection:collection-ktx:1.4.0
 androidx.collection:collection:1.4.0
+androidx.compose.animation:animation-android:1.6.8
+androidx.compose.animation:animation-core-android:1.6.8
+androidx.compose.animation:animation-core:1.6.8
+androidx.compose.animation:animation:1.6.8
+androidx.compose.foundation:foundation-android:1.6.8
+androidx.compose.foundation:foundation-layout-android:1.6.8
+androidx.compose.foundation:foundation-layout:1.6.8
+androidx.compose.foundation:foundation:1.6.8
+androidx.compose.material3:material3-android:1.2.1
+androidx.compose.material3:material3:1.2.1
+androidx.compose.material:material-android:1.6.8
+androidx.compose.material:material-icons-core-android:1.6.8
+androidx.compose.material:material-icons-core:1.6.8
+androidx.compose.material:material-icons-extended-android:1.6.8
+androidx.compose.material:material-icons-extended:1.6.8
+androidx.compose.material:material-ripple-android:1.6.8
+androidx.compose.material:material-ripple:1.6.8
+androidx.compose.material:material:1.6.8
+androidx.compose.runtime:runtime-android:1.6.8
+androidx.compose.runtime:runtime-livedata:1.6.8
+androidx.compose.runtime:runtime-saveable-android:1.6.8
+androidx.compose.runtime:runtime-saveable:1.6.8
+androidx.compose.runtime:runtime:1.6.8
+androidx.compose.ui:ui-android:1.6.8
+androidx.compose.ui:ui-geometry-android:1.6.8
+androidx.compose.ui:ui-geometry:1.6.8
+androidx.compose.ui:ui-graphics-android:1.6.8
+androidx.compose.ui:ui-graphics:1.6.8
+androidx.compose.ui:ui-text-android:1.6.8
+androidx.compose.ui:ui-text:1.6.8
+androidx.compose.ui:ui-unit-android:1.6.8
+androidx.compose.ui:ui-unit:1.6.8
+androidx.compose.ui:ui-util-android:1.6.8
+androidx.compose.ui:ui-util:1.6.8
+androidx.compose.ui:ui:1.6.8
+androidx.compose:compose-bom:2024.06.00
 androidx.concurrent:concurrent-futures:1.1.0
+androidx.constraintlayout:constraintlayout-compose:1.0.1
 androidx.constraintlayout:constraintlayout-core:1.0.4
 androidx.constraintlayout:constraintlayout:2.1.4
 androidx.coordinatorlayout:coordinatorlayout:1.1.0
@@ -45,12 +84,14 @@ androidx.drawerlayout:drawerlayout:1.1.1
 androidx.dynamicanimation:dynamicanimation:1.0.0
 androidx.emoji2:emoji2-views-helper:1.3.0
 androidx.emoji2:emoji2:1.3.0
+androidx.exifinterface:exifinterface:1.3.7
 androidx.fragment:fragment-ktx:1.8.0
 androidx.fragment:fragment:1.8.0
 androidx.hilt:hilt-common:1.2.0
 androidx.hilt:hilt-work:1.2.0
 androidx.interpolator:interpolator:1.0.0
 androidx.legacy:legacy-support-core-utils:1.0.0
+androidx.lifecycle:lifecycle-common-java8:2.8.2
 androidx.lifecycle:lifecycle-common-jvm:2.8.2
 androidx.lifecycle:lifecycle-common:2.8.2
 androidx.lifecycle:lifecycle-livedata-core-ktx:2.8.2
@@ -106,7 +147,6 @@ androidx.work:work-runtime:2.9.0
 cn.carbswang.android:NumberPickerView:1.2.0
 com.afollestad.material-dialogs:commons:0.9.6.0
 com.afollestad.material-dialogs:core:0.9.6.0
-com.ernestoyaquello.stepperform:vertical-stepper-form:2.5.0
 com.github.DeweyReed:ToastCompat:d0a4d6cac3
 com.github.DeweyReed:UltimateRingtonePicker:3.3.0
 com.github.DeweyReed:android-job:a04c817792
@@ -115,6 +155,7 @@ com.github.PhilJay:MPAndroidChart:v3.1.0
 com.github.bumptech.glide:disklrucache:4.16.0
 com.github.kizitonwose:CalendarView:1.0.4
 com.github.zawadz88.materialpopupmenu:material-popup-menu:4.1.0
+com.google.accompanist:accompanist-drawablepainter:0.32.0
 com.google.android.flexbox:flexbox:3.0.0
 com.google.android.material:material:1.4.0
 com.google.code.findbugs:jsr305:3.0.2
@@ -125,6 +166,8 @@ com.google.dagger:hilt-core:2.51.1
 com.google.guava:listenablefuture:1.0
 com.jakewharton.timber:timber:5.0.1
 com.joaomgcd:taskerpluginlibrary:0.4.10
+com.materialkolor:material-color-utilities-android:1.5.1
+com.materialkolor:material-color-utilities:1.5.1
 com.mikepenz:fastadapter-extensions-binding:5.7.0
 com.mikepenz:fastadapter-extensions-expandable:5.7.0
 com.mikepenz:fastadapter:5.7.0
@@ -132,15 +175,25 @@ com.mikepenz:materialdrawer:8.4.5
 com.mikepenz:materialize:1.2.1
 com.nex3z:toggle-button-group:1.2.3
 com.squareup.moshi:moshi:1.15.1
+com.squareup.okhttp3:okhttp:4.12.0
 com.squareup.okio:okio-jvm:3.9.0
 com.squareup.okio:okio:3.9.0
+dev.drewhamilton.poko:poko-annotations-jvm:0.15.2
+dev.drewhamilton.poko:poko-annotations:0.15.2
+io.coil-kt:coil-base:2.6.0
+io.coil-kt:coil-compose-base:2.6.0
+io.coil-kt:coil-compose:2.6.0
+io.coil-kt:coil-gif:2.6.0
+io.coil-kt:coil:2.6.0
 javax.inject:javax.inject:1
 me.zhanghai.android.materialprogressbar:library:1.4.2
+net.engawapg.lib:zoomable:1.6.1
 nl.dionsegijn:konfetti:1.3.2
 org.jetbrains.kotlin:kotlin-android-extensions-runtime:1.9.24
 org.jetbrains.kotlin:kotlin-parcelize-runtime:1.9.24
-org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.8.22
-org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.8.22
+org.jetbrains.kotlin:kotlin-stdlib-common:1.9.24
+org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.9.0
+org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.9.0
 org.jetbrains.kotlin:kotlin-stdlib:1.9.24
 org.jetbrains.kotlinx:kotlinx-coroutines-android:1.8.1
 org.jetbrains.kotlinx:kotlinx-coroutines-bom:1.8.1
diff --git a/app/src/main/java/io/github/deweyreed/timer/App.kt b/app/src/main/java/io/github/deweyreed/timer/App.kt
index 8d4e2ad6..31a347da 100644
--- a/app/src/main/java/io/github/deweyreed/timer/App.kt
+++ b/app/src/main/java/io/github/deweyreed/timer/App.kt
@@ -11,6 +11,10 @@ import androidx.core.content.edit
 import androidx.hilt.work.HiltWorkerFactory
 import androidx.preference.PreferenceManager
 import androidx.work.DelegatingWorkerFactory
+import coil.ImageLoader
+import coil.ImageLoaderFactory
+import coil.decode.GifDecoder
+import coil.decode.ImageDecoderDecoder
 import com.github.deweyreed.tools.helper.hasPermissions
 import dagger.Lazy
 import dagger.hilt.android.HiltAndroidApp
@@ -25,6 +29,7 @@ import xyz.aprildown.timer.app.base.data.PreferenceData.shouldPausePhoneCall
 import xyz.aprildown.timer.app.base.data.PreferenceData.useVoiceContent2
 import xyz.aprildown.timer.app.base.utils.AppThemeUtils
 import xyz.aprildown.timer.app.base.utils.LogToFileTree
+import xyz.aprildown.timer.component.key.ImageActionMapper
 import xyz.aprildown.timer.data.job.initJob
 import xyz.aprildown.timer.domain.repositories.PreferencesRepository
 import xyz.aprildown.timer.domain.usecases.home.TipManager
@@ -36,7 +41,7 @@ import androidx.work.Configuration as WorkManagerConfiguration
 import xyz.aprildown.timer.app.base.R as RBase
 
 @HiltAndroidApp
-class App : Application(), WorkManagerConfiguration.Provider {
+class App : Application(), WorkManagerConfiguration.Provider, ImageLoaderFactory {
 
     @Inject
     lateinit var sharedPreferences: SharedPreferences
@@ -201,6 +206,20 @@ class App : Application(), WorkManagerConfiguration.Provider {
                 }
                 .build()
         }
+
+    override fun newImageLoader(): ImageLoader {
+        return ImageLoader.Builder(this)
+            .components {
+                // https://coil-kt.github.io/coil/gifs/
+                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+                    add(ImageDecoderDecoder.Factory())
+                } else {
+                    add(GifDecoder.Factory())
+                }
+                add(ImageActionMapper())
+            }
+            .build()
+    }
 }
 
 private const val PREF_FIRST_START = "pref_first_start_app"
diff --git a/app/src/main/java/io/github/deweyreed/timer/ui/AppNavigatorImpl.kt b/app/src/main/java/io/github/deweyreed/timer/ui/AppNavigatorImpl.kt
index 83aa5d87..a9fa4247 100644
--- a/app/src/main/java/io/github/deweyreed/timer/ui/AppNavigatorImpl.kt
+++ b/app/src/main/java/io/github/deweyreed/timer/ui/AppNavigatorImpl.kt
@@ -11,6 +11,7 @@ import xyz.aprildown.timer.app.timer.edit.EditActivity
 import xyz.aprildown.timer.app.timer.list.TimerPicker
 import xyz.aprildown.timer.app.timer.one.OneActivity
 import xyz.aprildown.timer.app.timer.run.PhantomActivity
+import xyz.aprildown.timer.component.key.ImagePreviewActivity
 import xyz.aprildown.timer.domain.utils.Constants
 import javax.inject.Inject
 
@@ -54,6 +55,10 @@ class AppNavigatorImpl @Inject constructor(
         return IntroActivity.getIntent(context, isOnBoarding)
     }
 
+    override fun getImagePreviewIntent(path: String): Intent {
+        return ImagePreviewActivity.getIntent(context, path)
+    }
+
     override fun pickTimer(
         fm: FragmentManager,
         multiple: Boolean,
diff --git a/app/src/main/res/navigation/nav_graph.xml b/app/src/main/res/navigation/nav_graph.xml
index fbb17252..b5a29338 100644
--- a/app/src/main/res/navigation/nav_graph.xml
+++ b/app/src/main/res/navigation/nav_graph.xml
@@ -62,14 +62,12 @@
     <fragment
         android:id="@id/dest_export"
         android:name="xyz.aprildown.timer.app.backup.ExportFragment"
-        android:label="@string/export_data_title"
-        tools:layout="@layout/layout_vertical_form" />
+        android:label="@string/export_data_title" />
 
     <fragment
         android:id="@id/dest_import"
         android:name="xyz.aprildown.timer.app.backup.ImportFragment"
-        android:label="@string/import_data_title"
-        tools:layout="@layout/layout_vertical_form" />
+        android:label="@string/import_data_title" />
 
     <fragment
         android:id="@id/dest_one_layout"
diff --git a/build.gradle b/build.gradle
index a876bff4..0af00246 100644
--- a/build.gradle
+++ b/build.gradle
@@ -36,6 +36,12 @@ subprojects {
                 }
                 kotlinOptions {
                     jvmTarget = JavaVersion.VERSION_17.toString()
+
+                    freeCompilerArgs += [
+                            "-P",
+                            "plugin:androidx.compose.compiler.plugins.kotlin:stabilityConfigurationPath=" +
+                                    project.rootDir.absolutePath + "/compose_compiler_config.conf"
+                    ]
                 }
 
                 buildFeatures {
diff --git a/component-key/build.gradle b/component-key/build.gradle
index a41957d5..69e4c085 100644
--- a/component-key/build.gradle
+++ b/component-key/build.gradle
@@ -6,6 +6,12 @@ plugins {
 
 android {
     namespace 'xyz.aprildown.timer.component.key'
+    buildFeatures {
+        compose true
+    }
+    composeOptions {
+        kotlinCompilerExtensionVersion = libs.versions.composeCompiler.get()
+    }
 }
 
 dependencies {
@@ -13,9 +19,15 @@ dependencies {
 
     implementation libs.androidx.preference
 
+    implementation platform(libs.compose.bom)
+    implementation libs.bundles.compose
+
     implementation libs.flexbox
     implementation libs.hmsPicker
     implementation libs.materialPopupMenu
     implementation libs.scrollHmsPicker
+    implementation libs.coil
+    implementation libs.coil.compose
+    implementation libs.zoomable
 
 }
diff --git a/component-key/src/main/AndroidManifest.xml b/component-key/src/main/AndroidManifest.xml
index d92cf126..fbc4491d 100644
--- a/component-key/src/main/AndroidManifest.xml
+++ b/component-key/src/main/AndroidManifest.xml
@@ -1,4 +1,9 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <application android:theme="@style/AppTheme.LibraryPreview" />
+    <application android:theme="@style/AppTheme.LibraryPreview">
+        <activity
+            android:name=".ImagePreviewActivity"
+            android:launchMode="singleTop"
+            android:theme="@style/AppTheme.ImagePreview" />
+    </application>
 </manifest>
diff --git a/component-key/src/main/java/xyz/aprildown/timer/component/key/ImageActionMapper.kt b/component-key/src/main/java/xyz/aprildown/timer/component/key/ImageActionMapper.kt
new file mode 100644
index 00000000..72657ed6
--- /dev/null
+++ b/component-key/src/main/java/xyz/aprildown/timer/component/key/ImageActionMapper.kt
@@ -0,0 +1,18 @@
+package xyz.aprildown.timer.component.key
+
+import androidx.core.net.toUri
+import coil.map.Mapper
+import coil.request.Options
+import xyz.aprildown.timer.domain.entities.ImageAction
+import xyz.aprildown.timer.domain.entities.ResourceContentType
+import java.io.File
+
+class ImageActionMapper : Mapper<ImageAction, Any> {
+    override fun map(data: ImageAction, options: Options): Any {
+        return when (data.type) {
+            ResourceContentType.CanonicalPath -> File(data.data)
+            ResourceContentType.RelativePath -> error("Relative path can't be loaded")
+            ResourceContentType.Uri -> data.data.toUri()
+        }
+    }
+}
diff --git a/component-key/src/main/java/xyz/aprildown/timer/component/key/ImagePreviewActivity.kt b/component-key/src/main/java/xyz/aprildown/timer/component/key/ImagePreviewActivity.kt
new file mode 100644
index 00000000..ff9e05d0
--- /dev/null
+++ b/component-key/src/main/java/xyz/aprildown/timer/component/key/ImagePreviewActivity.kt
@@ -0,0 +1,97 @@
+package xyz.aprildown.timer.component.key
+
+import android.content.Context
+import android.content.Intent
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
+import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import coil.request.ImageRequest
+import net.engawapg.lib.zoomable.rememberZoomState
+import net.engawapg.lib.zoomable.zoomable
+import android.graphics.Color as AndroidColor
+import androidx.compose.ui.graphics.Color.Companion as ComposeColor
+
+class ImagePreviewActivity : ComponentActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        enableEdgeToEdge(
+            statusBarStyle = SystemBarStyle.dark(AndroidColor.TRANSPARENT),
+            navigationBarStyle = SystemBarStyle.dark(
+                AndroidColor.argb(0x80, 0x1b, 0x1b, 0x1b)
+            ) // DefaultDarkScrim
+        )
+        super.onCreate(savedInstanceState)
+        val path = intent?.getStringExtra(EXTRA_PATH)
+        if (path.isNullOrBlank()) {
+            finish()
+            return
+        }
+
+
+        setContent {
+            var data: String? by rememberSaveable { mutableStateOf(path) }
+
+            LaunchedEffect(Unit) {
+                addOnNewIntentListener { intent ->
+                    intent.getStringExtra(EXTRA_PATH)?.takeIf { it.isNotBlank() }?.let {
+                        data = it
+                    }
+                }
+            }
+
+            ImagePreview(
+                data = data,
+                onDismiss = ::finish,
+                modifier = Modifier.fillMaxSize(),
+            )
+        }
+    }
+
+    companion object {
+        private const val EXTRA_PATH = "path"
+        fun getIntent(context: Context, path: String): Intent {
+            return Intent(context, ImagePreviewActivity::class.java)
+                .putExtra(EXTRA_PATH, path)
+        }
+    }
+}
+
+@Composable
+private fun ImagePreview(
+    data: String?,
+    onDismiss: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    AsyncImage(
+        model = ImageRequest.Builder(LocalContext.current)
+            .data(data)
+            .crossfade(true)
+            .build(),
+        contentDescription = null,
+        modifier = modifier
+            .fillMaxSize()
+            .background(ComposeColor.Black.copy(alpha = 0.5f))
+            .pointerInput(onDismiss) {
+                detectTapGestures(onTap = { onDismiss() })
+            }
+            .padding(16.dp)
+            .zoomable(zoomState = rememberZoomState()),
+    )
+}
diff --git a/component-key/src/main/java/xyz/aprildown/timer/component/key/behaviour/BehaviourLayout.kt b/component-key/src/main/java/xyz/aprildown/timer/component/key/behaviour/BehaviourLayout.kt
index 50f9990b..46f1e051 100644
--- a/component-key/src/main/java/xyz/aprildown/timer/component/key/behaviour/BehaviourLayout.kt
+++ b/component-key/src/main/java/xyz/aprildown/timer/component/key/behaviour/BehaviourLayout.kt
@@ -3,27 +3,37 @@ package xyz.aprildown.timer.component.key.behaviour
 import android.content.Context
 import android.content.res.ColorStateList
 import android.util.AttributeSet
+import android.view.LayoutInflater
 import android.view.View
+import android.widget.LinearLayout
 import androidx.annotation.ColorInt
 import androidx.appcompat.widget.TooltipCompat
-import com.github.deweyreed.tools.anko.dp
+import androidx.core.view.isEmpty
+import androidx.core.view.isVisible
+import coil.load
 import com.github.deweyreed.tools.helper.setTextIfChanged
 import com.google.android.material.chip.Chip
-import com.google.android.material.chip.ChipGroup
 import xyz.aprildown.timer.component.key.R
+import xyz.aprildown.timer.component.key.databinding.LayoutBehaviourBinding
+import xyz.aprildown.timer.component.key.databinding.LayoutEditableBehaviourImageBinding
 import xyz.aprildown.timer.domain.entities.BehaviourEntity
+import xyz.aprildown.timer.domain.entities.BehaviourType
+import xyz.aprildown.timer.domain.entities.ImageAction
+import xyz.aprildown.timer.domain.entities.toImageAction
 
 class BehaviourLayout @JvmOverloads constructor(
     context: Context,
     attrs: AttributeSet? = null
-) : ChipGroup(context, attrs) {
+) : LinearLayout(context, attrs) {
+
+    private val binding = LayoutBehaviourBinding.inflate(LayoutInflater.from(context), this)
 
     private val currentBehaviours = mutableListOf<BehaviourChipView>()
 
+    var onImageCheck: ((ImageAction) -> Unit)? = null
+
     init {
-        val spacing = context.dp(4).toInt()
-        chipSpacingHorizontal = spacing
-        chipSpacingVertical = spacing
+        orientation = VERTICAL
     }
 
     fun setBehaviours(list: List<BehaviourEntity>) {
@@ -34,7 +44,7 @@ class BehaviourLayout @JvmOverloads constructor(
             repeat(removeCount) {
                 val index = currentSize - it - 1
                 val chipView = currentBehaviours[index]
-                removeView(chipView.chip)
+                binding.chipGroup.removeView(chipView.chip)
                 currentBehaviours.remove(chipView)
             }
         }
@@ -50,6 +60,26 @@ class BehaviourLayout @JvmOverloads constructor(
         }
 
         require(currentBehaviours.size == list.size)
+
+        val imageBehaviour = list.find { it.type == BehaviourType.IMAGE }
+        if (imageBehaviour != null) {
+            binding.layoutImage.isVisible = true
+            val imageView = if (binding.layoutImage.isEmpty()) {
+                LayoutEditableBehaviourImageBinding.inflate(
+                    LayoutInflater.from(context), binding.layoutImage, true
+                ).root
+            } else {
+                LayoutEditableBehaviourImageBinding.bind(binding.layoutImage.getChildAt(0)).root
+            }
+            val action = imageBehaviour.toImageAction()
+            imageView.setOnClickListener { onImageCheck?.invoke(action) }
+            imageView.load(action) {
+                crossfade(true)
+            }
+        } else {
+            binding.layoutImage.isVisible = false
+            binding.layoutImage.removeAllViews()
+        }
     }
 
     fun setEnabledColor(@ColorInt color: Int) {
@@ -60,7 +90,7 @@ class BehaviourLayout @JvmOverloads constructor(
 
     private fun createNewChip(): Chip {
         val chip = View.inflate(context, R.layout.view_behavior_chip, null) as Chip
-        addView(chip)
+        binding.chipGroup.addView(chip)
         return chip
     }
 
diff --git a/component-key/src/main/java/xyz/aprildown/timer/component/key/behaviour/BehaviourTypeUtils.kt b/component-key/src/main/java/xyz/aprildown/timer/component/key/behaviour/BehaviourTypeUtils.kt
index 3ed0c745..adbf16e3 100644
--- a/component-key/src/main/java/xyz/aprildown/timer/component/key/behaviour/BehaviourTypeUtils.kt
+++ b/component-key/src/main/java/xyz/aprildown/timer/component/key/behaviour/BehaviourTypeUtils.kt
@@ -18,6 +18,7 @@ val BehaviourType.iconRes: Int
         BehaviourType.COUNT -> RBase.drawable.ic_count
         BehaviourType.NOTIFICATION -> RBase.drawable.ic_notification
         BehaviourType.FLASHLIGHT -> RBase.drawable.ic_flashlight
+        BehaviourType.IMAGE -> RBase.drawable.ic_image
     }
 
 val BehaviourType.nameRes: Int
@@ -33,6 +34,7 @@ val BehaviourType.nameRes: Int
         BehaviourType.COUNT -> RBase.string.behaviour_count
         BehaviourType.NOTIFICATION -> RBase.string.behaviour_notification
         BehaviourType.FLASHLIGHT -> RBase.string.behaviour_flashlight
+        BehaviourType.IMAGE -> RBase.string.behaviour_image
     }
 
 val BehaviourType.despRes: Int
@@ -48,4 +50,5 @@ val BehaviourType.despRes: Int
         BehaviourType.COUNT -> RBase.string.behaviour_count_help
         BehaviourType.NOTIFICATION -> RBase.string.behaviour_notification_help
         BehaviourType.FLASHLIGHT -> RBase.string.behaviour_flashlight_help
+        BehaviourType.IMAGE -> RBase.string.behaviour_image_help
     }
diff --git a/component-key/src/main/java/xyz/aprildown/timer/component/key/behaviour/EditableBehaviourLayout.kt b/component-key/src/main/java/xyz/aprildown/timer/component/key/behaviour/EditableBehaviourLayout.kt
index 71bb8919..54aa9997 100644
--- a/component-key/src/main/java/xyz/aprildown/timer/component/key/behaviour/EditableBehaviourLayout.kt
+++ b/component-key/src/main/java/xyz/aprildown/timer/component/key/behaviour/EditableBehaviourLayout.kt
@@ -4,25 +4,31 @@ import android.content.Context
 import android.graphics.Color
 import android.util.AttributeSet
 import android.view.Gravity
+import android.view.LayoutInflater
 import android.view.View
 import android.view.View.OnClickListener
 import android.widget.ImageButton
-import android.widget.TextView
 import androidx.annotation.ColorInt
+import androidx.annotation.EmptySuper
 import androidx.appcompat.widget.TooltipCompat
 import androidx.appcompat.widget.TooltipCompatFix
+import androidx.core.view.isEmpty
+import androidx.core.view.isVisible
+import coil.load
 import com.github.deweyreed.tools.helper.drawable
-import com.github.deweyreed.tools.helper.gone
 import com.github.deweyreed.tools.helper.setTextIfChanged
-import com.github.deweyreed.tools.helper.show
 import com.github.deweyreed.tools.helper.toColorStateList
 import com.github.zawadz88.materialpopupmenu.popupMenu
 import com.google.android.flexbox.FlexWrap
 import com.google.android.flexbox.FlexboxLayout
 import com.google.android.material.chip.Chip
 import xyz.aprildown.timer.component.key.R
+import xyz.aprildown.timer.component.key.databinding.LayoutEditableBehaviourBinding
+import xyz.aprildown.timer.component.key.databinding.LayoutEditableBehaviourImageBinding
 import xyz.aprildown.timer.domain.entities.BehaviourEntity
 import xyz.aprildown.timer.domain.entities.BehaviourType
+import xyz.aprildown.timer.domain.entities.ImageAction
+import xyz.aprildown.timer.domain.entities.toImageAction
 
 class EditableBehaviourLayout(
     context: Context,
@@ -36,8 +42,17 @@ class EditableBehaviourLayout(
             layout: EditableBehaviourLayout,
             current: BehaviourEntity
         )
+
+        @EmptySuper
+        fun onImageAdding(): Unit = Unit
+
+        @EmptySuper
+        fun onImageContentClick(action: ImageAction): Unit = Unit
     }
 
+    private val binding =
+        LayoutEditableBehaviourBinding.inflate(LayoutInflater.from(context), this)
+
     @ColorInt
     private var colorEnabled: Int = Color.RED
 
@@ -45,8 +60,7 @@ class EditableBehaviourLayout(
     private var listener: Listener? = null
     private var onBehaviourAddedOrRemovedCallback: (() -> Unit)? = null
 
-    val addButton: ImageButton
-    private val emptyText: TextView
+    val addButton: ImageButton get() = binding.btnBehaviourAdd
 
     private val enabledBehaviourTypes = BehaviourType.entries
 
@@ -55,11 +69,7 @@ class EditableBehaviourLayout(
         setShowDivider(SHOW_DIVIDER_MIDDLE)
         setDividerDrawable(context.drawable(R.drawable.divider_normal_flexbox))
 
-        View.inflate(context, R.layout.layout_editable_behaviour, this)
-
-        emptyText = findViewById(R.id.textBehaviourEmpty)
-        addButton = findViewById(R.id.btnBehaviourAdd)
-        addButton.setOnClickListener { view ->
+        binding.btnBehaviourAdd.setOnClickListener { view ->
             val currentTypes = data.keys
             val showTypes = enabledBehaviourTypes.filter { type -> type !in currentTypes }
             if (showTypes.isNotEmpty()) {
@@ -77,7 +87,11 @@ class EditableBehaviourLayout(
                                     )
                                 }
                                 callback = {
-                                    addStubBehaviour(BehaviourEntity(type), true)
+                                    if (type == BehaviourType.IMAGE) {
+                                        listener?.onImageAdding()
+                                    } else {
+                                        addStubBehaviour(BehaviourEntity(type), true)
+                                    }
                                 }
                             }
                         }
@@ -115,6 +129,24 @@ class EditableBehaviourLayout(
             addStubBehaviour(it, false)
             setViewWithEntity(it)
         }
+
+        val imageAction = bs.find { it.type == BehaviourType.IMAGE }?.toImageAction()
+        if (imageAction != null) {
+            val imageView = if (binding.layoutImage.isEmpty()) {
+                LayoutEditableBehaviourImageBinding.inflate(
+                    LayoutInflater.from(context), binding.layoutImage, true
+                ).root
+            } else {
+                LayoutEditableBehaviourImageBinding.bind(binding.layoutImage.getChildAt(0)).root
+            }
+            imageView.setOnClickListener { listener?.onImageContentClick(imageAction) }
+            imageView.load(imageAction) {
+                crossfade(true)
+            }
+        } else {
+            binding.layoutImage.removeAllViews()
+        }
+
         updateHelperViews()
     }
 
@@ -125,7 +157,7 @@ class EditableBehaviourLayout(
         val type = behaviour.type
         removeBehaviour(type)
         val newView = generateBehaviourView(type)
-        addView(newView, childCount - 1)
+        addView(newView, indexOfChild(binding.layoutBottomBar))
         data[type] = newView to behaviour
 
         if (fromUser) {
@@ -141,6 +173,10 @@ class EditableBehaviourLayout(
         data.remove(behaviourType)
         updateHelperViews()
 
+        if (behaviourType == BehaviourType.IMAGE) {
+            binding.layoutImage.removeAllViews()
+        }
+
         onBehaviourAddedOrRemovedCallback?.invoke()
     }
 
@@ -167,8 +203,8 @@ class EditableBehaviourLayout(
 
     private fun updateHelperViews() {
         val dataSize = data.size
-        if (dataSize >= enabledBehaviourTypes.size) addButton.gone() else addButton.show()
-        if (dataSize == 0) emptyText.show() else emptyText.gone()
+        binding.btnBehaviourAdd.isVisible = dataSize < enabledBehaviourTypes.size
+        binding.textBehaviourEmpty.isVisible = dataSize == 0
     }
 
     private fun createNewBehaviourChip(
diff --git a/component-key/src/main/res/layout/layout_behaviour.xml b/component-key/src/main/res/layout/layout_behaviour.xml
new file mode 100644
index 00000000..5936d321
--- /dev/null
+++ b/component-key/src/main/res/layout/layout_behaviour.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<merge xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    tools:orientation="vertical"
+    tools:parentTag="android.widget.LinearLayout">
+
+    <com.google.android.material.chip.ChipGroup
+        android:id="@+id/chipGroup"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:chipSpacing="4dp" />
+
+    <FrameLayout
+        android:id="@+id/layoutImage"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="4dp" />
+
+</merge>
diff --git a/component-key/src/main/res/layout/layout_editable_behaviour.xml b/component-key/src/main/res/layout/layout_editable_behaviour.xml
index 70a00262..bd0b50c4 100644
--- a/component-key/src/main/res/layout/layout_editable_behaviour.xml
+++ b/component-key/src/main/res/layout/layout_editable_behaviour.xml
@@ -10,6 +10,7 @@
     tools:showDivider="middle">
 
     <FrameLayout
+        android:id="@+id/layoutBottomBar"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         app:layout_flexGrow="1">
@@ -36,4 +37,11 @@
 
     </FrameLayout>
 
-</merge>
\ No newline at end of file
+    <FrameLayout
+        android:id="@+id/layoutImage"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_flexGrow="1"
+        app:layout_wrapBefore="true" />
+
+</merge>
diff --git a/component-key/src/main/res/layout/layout_editable_behaviour_image.xml b/component-key/src/main/res/layout/layout_editable_behaviour_image.xml
new file mode 100644
index 00000000..8054a503
--- /dev/null
+++ b/component-key/src/main/res/layout/layout_editable_behaviour_image.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="192dp"
+    android:importantForAccessibility="no"
+    tools:src="@tools:sample/backgrounds/scenic" />
diff --git a/component-key/src/main/res/values/themes.xml b/component-key/src/main/res/values/themes.xml
new file mode 100644
index 00000000..332ee82f
--- /dev/null
+++ b/component-key/src/main/res/values/themes.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="AppTheme.ImagePreview">
+        <item name="android:windowBackground">@android:color/transparent</item>
+        <item name="android:windowIsTranslucent">true</item>
+    </style>
+</resources>
diff --git a/compose_compiler_config.conf b/compose_compiler_config.conf
new file mode 100644
index 00000000..df22a5b2
--- /dev/null
+++ b/compose_compiler_config.conf
@@ -0,0 +1,2 @@
+kotlin.collections.*
+xyz.aprildown.timer.domain.usecases.Fruit
diff --git a/data/src/androidTest/java/xyz/aprildown/timer/data/repositories/SchedulerRepositoryImplTest.kt b/data/src/androidTest/java/xyz/aprildown/timer/data/repositories/SchedulerRepositoryImplTest.kt
index 51b7303c..9d5cb396 100644
--- a/data/src/androidTest/java/xyz/aprildown/timer/data/repositories/SchedulerRepositoryImplTest.kt
+++ b/data/src/androidTest/java/xyz/aprildown/timer/data/repositories/SchedulerRepositoryImplTest.kt
@@ -1,5 +1,6 @@
 package xyz.aprildown.timer.data.repositories
 
+import android.content.Context
 import androidx.test.core.app.ApplicationProvider
 import kotlinx.coroutines.test.runTest
 import org.junit.After
@@ -24,13 +25,13 @@ import xyz.aprildown.timer.domain.repositories.TimerRepository
 
 class SchedulerRepositoryImplTest {
 
-    private val database = MachineDatabase.createInMemoryDatabase(
-        ApplicationProvider.getApplicationContext()
-    )
+    private val context = ApplicationProvider.getApplicationContext<Context>()
+    private val database = MachineDatabase.createInMemoryDatabase(context)
     private val timerRepository: TimerRepository = TimerRepositoryImpl(
-        database.timerDao(),
-        TimerMapper(StepMapper(StepOnlyMapper(BehaviourMapper())), TimerMoreMapper()),
-        TimerInfoMapper()
+        context = context,
+        timerDao = database.timerDao(),
+        timerMapper = TimerMapper(StepMapper(StepOnlyMapper(BehaviourMapper())), TimerMoreMapper()),
+        timerInfoMapper = TimerInfoMapper(),
     )
     private var timerId: Int = TimerEntity.NULL_ID
     private val schedulerRepository: SchedulerRepository =
diff --git a/data/src/androidTest/java/xyz/aprildown/timer/data/repositories/TimerRepositoryImplTest.kt b/data/src/androidTest/java/xyz/aprildown/timer/data/repositories/TimerRepositoryImplTest.kt
index ade395e0..097c3937 100644
--- a/data/src/androidTest/java/xyz/aprildown/timer/data/repositories/TimerRepositoryImplTest.kt
+++ b/data/src/androidTest/java/xyz/aprildown/timer/data/repositories/TimerRepositoryImplTest.kt
@@ -1,5 +1,6 @@
 package xyz.aprildown.timer.data.repositories
 
+import android.content.Context
 import androidx.test.core.app.ApplicationProvider
 import kotlinx.coroutines.test.runTest
 import org.junit.After
@@ -20,13 +21,13 @@ import xyz.aprildown.timer.domain.repositories.TimerRepository
 
 class TimerRepositoryImplTest {
 
-    private val database = MachineDatabase.createInMemoryDatabase(
-        ApplicationProvider.getApplicationContext()
-    )
+    private val context = ApplicationProvider.getApplicationContext<Context>()
+    private val database = MachineDatabase.createInMemoryDatabase(context)
     private val timerRepository: TimerRepository = TimerRepositoryImpl(
-        database.timerDao(),
-        TimerMapper(StepMapper(StepOnlyMapper(BehaviourMapper())), TimerMoreMapper()),
-        TimerInfoMapper()
+        context = context,
+        timerDao = database.timerDao(),
+        timerMapper = TimerMapper(StepMapper(StepOnlyMapper(BehaviourMapper())), TimerMoreMapper()),
+        timerInfoMapper = TimerInfoMapper(),
     )
 
     @After
diff --git a/data/src/main/java/xyz/aprildown/timer/data/repositories/TimerRepositoryImpl.kt b/data/src/main/java/xyz/aprildown/timer/data/repositories/TimerRepositoryImpl.kt
index 2cfb6444..89a2d54c 100644
--- a/data/src/main/java/xyz/aprildown/timer/data/repositories/TimerRepositoryImpl.kt
+++ b/data/src/main/java/xyz/aprildown/timer/data/repositories/TimerRepositoryImpl.kt
@@ -1,44 +1,139 @@
 package xyz.aprildown.timer.data.repositories
 
+import android.content.ContentResolver
+import android.content.Context
+import android.webkit.MimeTypeMap
+import androidx.core.net.toUri
 import dagger.Reusable
+import dagger.hilt.android.qualifiers.ApplicationContext
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.map
 import xyz.aprildown.timer.data.db.TimerDao
 import xyz.aprildown.timer.data.mappers.TimerInfoMapper
 import xyz.aprildown.timer.data.mappers.TimerMapper
 import xyz.aprildown.timer.data.mappers.fromWithMapper
+import xyz.aprildown.timer.domain.entities.ImageAction
+import xyz.aprildown.timer.domain.entities.ResourceContentType
 import xyz.aprildown.timer.domain.entities.TimerEntity
 import xyz.aprildown.timer.domain.entities.TimerInfo
+import xyz.aprildown.timer.domain.entities.inferResourcesContentType
 import xyz.aprildown.timer.domain.repositories.TimerRepository
+import xyz.aprildown.timer.domain.utils.ensureDirExistence
+import xyz.aprildown.timer.domain.utils.ensureNewFile
+import java.io.File
+import java.util.UUID
 import javax.inject.Inject
 
 @Reusable
 internal class TimerRepositoryImpl @Inject constructor(
+    @ApplicationContext context: Context,
     private val timerDao: TimerDao,
     private val timerMapper: TimerMapper,
-    private val timerInfoMapper: TimerInfoMapper
+    private val timerInfoMapper: TimerInfoMapper,
 ) : TimerRepository {
+    private val imageManager by lazy { TimerImageManager(context) }
 
     override suspend fun items(): List<TimerEntity> {
-        return timerDao.getTimers().map { timerMapper.mapFrom(it) }
+        return timerDao.getTimers().map {
+            timerMapper.mapFrom(it).withImageCanonicalPath()
+        }
     }
 
     override suspend fun item(id: Int): TimerEntity? {
         return timerDao.getTimer(id).let {
-            return@let if (it == null) null else timerMapper.mapFrom(it)
+            return@let if (it == null) null else timerMapper.mapFrom(it).withImageCanonicalPath()
         }
     }
 
+    private fun TimerEntity.withImageCanonicalPath(): TimerEntity {
+        return this
+        // return transformImageActions { data ->
+        //     ImageAction(
+        //         data = data.convertImageData(
+        //             id = id,
+        //             imageManager = imageManager,
+        //             targetType = ResourceContentType.CanonicalPath,
+        //         ),
+        //     )
+        // }
+    }
+
     override suspend fun add(item: TimerEntity): Int {
-        return timerDao.addTimer(timerMapper.mapTo(item)).toInt()
+        val tempTimerFolder = imageManager.getTimerFolder(item.id)
+        val timerId = timerDao.addTimer(
+            timerMapper.mapTo(
+                item.transformImageActions {
+                    ImageAction(
+                        data = imageManager
+                            .save(id = item.id, data = it)
+                            .convertImageData(
+                                id = item.id,
+                                imageManager = imageManager,
+                                targetType = ResourceContentType.RelativePath,
+                            ),
+                    )
+                }
+            )
+        ).toInt()
+        if (tempTimerFolder.exists()) {
+            val newTimerFolder = imageManager.getTimerFolder(timerId)
+            tempTimerFolder.copyRecursively(newTimerFolder)
+            tempTimerFolder.deleteRecursively()
+        }
+        return timerId
     }
 
     override suspend fun save(item: TimerEntity): Boolean {
-        return timerDao.updateTimer(timerMapper.mapTo(item)) == 1
+        val savedItem = imageManager.trackSaving(id = item.id) {
+            item.transformImageActions {
+                ImageAction(
+                    data = save(data = it).convertImageData(
+                        id = item.id,
+                        imageManager = imageManager,
+                        targetType = ResourceContentType.RelativePath,
+                    ),
+                )
+            }
+        }
+        return timerDao.updateTimer(timerMapper.mapTo(savedItem)) == 1
+    }
+
+    private fun TimerEntity.transformImageActions(
+        transform: (data: String) -> ImageAction
+    ): TimerEntity {
+        return this
+        // fun StepEntity.transformStep(): StepEntity {
+        //     return when (this) {
+        //         is StepEntity.Step -> {
+        //             if (behaviour.any { it.type == BehaviourType.IMAGE }) {
+        //                 copy(
+        //                     behaviour = behaviour.map {
+        //                         if (it.type == BehaviourType.IMAGE) {
+        //                             transform(it.toImageAction().data).toBehaviourEntity()
+        //                         } else {
+        //                             it
+        //                         }
+        //                     }
+        //                 )
+        //             } else {
+        //                 this
+        //             }
+        //         }
+        //         is StepEntity.Group -> {
+        //             copy(steps = steps.map { it.transformStep() })
+        //         }
+        //     }
+        // }
+        // return copy(
+        //     steps = steps.map { it.transformStep() },
+        //     startStep = startStep?.transformStep() as? StepEntity.Step,
+        //     endStep = endStep?.transformStep() as? StepEntity.Step,
+        // )
     }
 
     override suspend fun delete(id: Int) {
         timerDao.deleteTimer(id)
+        imageManager.delete(id)
     }
 
     override suspend fun getTimerInfoByTimerId(timerId: Int): TimerInfo? {
@@ -60,4 +155,162 @@ internal class TimerRepositoryImpl @Inject constructor(
     override suspend fun moveFolderTimersToAnother(originalFolderId: Long, targetFolderId: Long) {
         timerDao.moveFolderTimersToAnother(originalFolderId, targetFolderId)
     }
+
+    override suspend fun changeContentType(
+        timers: List<TimerEntity>,
+        type: ResourceContentType,
+    ): List<TimerEntity> {
+        return timers.map { timer ->
+            timer.transformImageActions { data ->
+                ImageAction(
+                    data = data.convertImageData(
+                        id = timer.id,
+                        imageManager = imageManager,
+                        targetType = type,
+                    )
+                )
+            }
+        }
+    }
+}
+
+private class TimerImageManager(context: Context) {
+    interface TrackingScope {
+        /**
+         * [TimerImageManager.save]
+         */
+        fun save(data: String): String
+    }
+
+    val contentResolver: ContentResolver = context.contentResolver
+
+    private val imageFolder = File(context.filesDir, FOLDER)
+
+    fun getTimerFolder(timerId: Int): File {
+        return File(imageFolder, timerId.toString())
+    }
+
+    /**
+     * @return [ResourceContentType.RelativePath], [File.getCanonicalPath]
+     */
+    fun save(id: Int, data: String): String {
+        imageFolder.ensureDirExistence()
+
+        val timerFolder = getTimerFolder(id)
+        val imageFile: File
+        when (data.inferResourcesContentType()) {
+            ResourceContentType.CanonicalPath -> {
+                val existingFile = File(data)
+                if (existingFile.parentFile?.canonicalPath == timerFolder.canonicalPath) {
+                    imageFile = existingFile
+                } else {
+                    imageFile = File(
+                        timerFolder.ensureDirExistence(),
+                        "${generateImageName()}.${existingFile.extension}"
+                    ).ensureNewFile()
+                    imageFile.inputStream().use { inputStream ->
+                        existingFile.outputStream().use { outputStream ->
+                            inputStream.copyTo(outputStream)
+                        }
+                    }
+                }
+            }
+            ResourceContentType.RelativePath -> {
+                imageFile = File(timerFolder.ensureDirExistence(), data)
+            }
+            ResourceContentType.Uri -> {
+                val uri = data.toUri()
+                val extension = MimeTypeMap.getSingleton()
+                    .getExtensionFromMimeType(contentResolver.getType(uri)) ?: "jpg"
+                imageFile = File(
+                    timerFolder.ensureDirExistence(),
+                    "${generateImageName()}.$extension"
+                ).ensureNewFile()
+                contentResolver.openInputStream(uri)?.use { inputStream ->
+                    imageFile.outputStream().use { outputStream ->
+                        inputStream.copyTo(outputStream)
+                    }
+                }
+                imageFile.canonicalPath
+            }
+        }
+        require(imageFile.exists() && imageFile.length() > 0L)
+        return imageFile.canonicalPath
+    }
+
+    private fun generateImageName(): String {
+        return UUID.randomUUID().toString()
+    }
+
+    fun <T> trackSaving(id: Int, block: TrackingScope.() -> T): T {
+        val saved = mutableListOf<String>()
+        val scope = object : TrackingScope {
+            override fun save(data: String): String {
+                val savedData = save(id = id, data = data)
+                saved += savedData
+                return savedData
+            }
+        }
+        return try {
+            block(scope)
+        } finally {
+            val timerFolder = getTimerFolder(id)
+            if (timerFolder.exists()) {
+                timerFolder.listFiles()?.toList()?.forEach { file ->
+                    if (file.canonicalPath !in saved) {
+                        file.delete()
+                    }
+                }
+            }
+        }
+    }
+
+    fun delete(id: Int) {
+        val timerFolder = getTimerFolder(id)
+        if (timerFolder.exists()) {
+            timerFolder.deleteRecursively()
+        }
+    }
+
+    companion object {
+        private const val FOLDER = "timer_images"
+    }
+}
+
+private fun String.convertImageData(
+    id: Int = TimerEntity.NULL_ID,
+    imageManager: TimerImageManager,
+    targetType: ResourceContentType,
+): String {
+    fun String.save(): String {
+        return imageManager.save(id = id, data = this)
+    }
+
+    fun String.convert(targetType: ResourceContentType): String {
+        return convertImageData(id = id, imageManager = imageManager, targetType)
+    }
+
+    return when (inferResourcesContentType()) {
+        ResourceContentType.CanonicalPath -> {
+            when (targetType) {
+                ResourceContentType.CanonicalPath -> save()
+                ResourceContentType.RelativePath -> File(this).name
+                ResourceContentType.Uri -> error("Unable to convert CanonicalPath to Uri")
+            }
+        }
+        ResourceContentType.RelativePath -> {
+            when (targetType) {
+                ResourceContentType.CanonicalPath -> save()
+                ResourceContentType.RelativePath -> return this
+                ResourceContentType.Uri -> error("Unable to convert RelativePath to Uri")
+            }
+        }
+        ResourceContentType.Uri -> {
+            when (targetType) {
+                ResourceContentType.CanonicalPath -> save()
+                ResourceContentType.RelativePath -> save().convert(ResourceContentType.RelativePath)
+                ResourceContentType.Uri -> return this
+            }
+        }
+    }
 }
diff --git a/domain/build.gradle b/domain/build.gradle
index 7e24e99d..afe988cc 100644
--- a/domain/build.gradle
+++ b/domain/build.gradle
@@ -43,4 +43,6 @@ dependencies {
     implementation libs.hilt.android
     kapt libs.hilt.compiler
 
+    api libs.okio
+
 }
diff --git a/domain/src/main/java/xyz/aprildown/timer/domain/entities/BehaviourEntity.kt b/domain/src/main/java/xyz/aprildown/timer/domain/entities/BehaviourEntity.kt
index 84efdf09..00809d1e 100644
--- a/domain/src/main/java/xyz/aprildown/timer/domain/entities/BehaviourEntity.kt
+++ b/domain/src/main/java/xyz/aprildown/timer/domain/entities/BehaviourEntity.kt
@@ -24,9 +24,11 @@ package xyz.aprildown.timer.domain.entities
  *     str1: last n seconds, 0 for always
  * FLASHLIGHT:
  *     empty for now
+ * IMAGE:
+ *     str1: The image path
  */
 enum class BehaviourType {
-    MUSIC, VIBRATION, SCREEN, HALT, VOICE, BEEP, HALF, COUNT, NOTIFICATION, FLASHLIGHT;
+    MUSIC, VIBRATION, SCREEN, HALT, VOICE, BEEP, HALF, COUNT, NOTIFICATION, FLASHLIGHT, IMAGE;
 
     val hasBoolValue: Boolean
         get() = this == MUSIC || this == BEEP
@@ -358,7 +360,7 @@ fun BehaviourEntity.toNotificationAction(): NotificationAction {
 
 // endregion Notification
 
-// region Notification
+// region Flashlight
 
 data class FlashlightAction(val step: Long = 500L) : Action {
     override fun toBehaviourEntity(): BehaviourEntity {
@@ -371,4 +373,21 @@ fun BehaviourEntity.toFlashlightAction(): FlashlightAction {
     return FlashlightAction()
 }
 
-// endregion Notification
+// endregion Flashlight
+
+// region Image
+
+data class ImageAction(val data: String) : Action {
+    val type: ResourceContentType = data.inferResourcesContentType()
+
+    override fun toBehaviourEntity(): BehaviourEntity {
+        return BehaviourEntity(type = BehaviourType.IMAGE, str1 = data)
+    }
+}
+
+fun BehaviourEntity.toImageAction(): ImageAction {
+    require(type == BehaviourType.IMAGE)
+    return ImageAction(data = str1)
+}
+
+// endregion Image
diff --git a/domain/src/main/java/xyz/aprildown/timer/domain/entities/TimerEntity.kt b/domain/src/main/java/xyz/aprildown/timer/domain/entities/TimerEntity.kt
index 9a28b430..e576b338 100644
--- a/domain/src/main/java/xyz/aprildown/timer/domain/entities/TimerEntity.kt
+++ b/domain/src/main/java/xyz/aprildown/timer/domain/entities/TimerEntity.kt
@@ -1,5 +1,8 @@
 package xyz.aprildown.timer.domain.entities
 
+import android.content.ContentResolver
+import okio.Path
+
 /**
  * Whenever you add a new more item, you need to check
  * TestData, TimerMoreMapper, MappersTest, OneFragment, EditActivity
@@ -20,12 +23,26 @@ data class TimerEntity(
     val more: TimerMoreEntity = TimerMoreEntity(),
     val folderId: Long = FolderEntity.FOLDER_DEFAULT
 ) {
+    val isNull get() = id == NULL_ID
+
     companion object {
         const val NEW_ID = 0
         const val NULL_ID = 0
     }
+}
 
-    val isNull get() = id == NULL_ID
+enum class ResourceContentType {
+    CanonicalPath,
+    RelativePath,
+    Uri,
+}
+
+fun String.inferResourcesContentType(): ResourceContentType {
+    return when {
+        startsWith(Path.DIRECTORY_SEPARATOR) -> ResourceContentType.CanonicalPath
+        startsWith(ContentResolver.SCHEME_CONTENT) -> ResourceContentType.Uri
+        else -> ResourceContentType.RelativePath
+    }
 }
 
 /**
diff --git a/domain/src/main/java/xyz/aprildown/timer/domain/repositories/TimerRepository.kt b/domain/src/main/java/xyz/aprildown/timer/domain/repositories/TimerRepository.kt
index 39fd01c6..0cb3c8e6 100644
--- a/domain/src/main/java/xyz/aprildown/timer/domain/repositories/TimerRepository.kt
+++ b/domain/src/main/java/xyz/aprildown/timer/domain/repositories/TimerRepository.kt
@@ -1,6 +1,7 @@
 package xyz.aprildown.timer.domain.repositories
 
 import kotlinx.coroutines.flow.Flow
+import xyz.aprildown.timer.domain.entities.ResourceContentType
 import xyz.aprildown.timer.domain.entities.TimerEntity
 import xyz.aprildown.timer.domain.entities.TimerInfo
 
@@ -15,4 +16,8 @@ interface TimerRepository {
     suspend fun getTimerInfo(folderId: Long): List<TimerInfo>
     suspend fun changeTimerFolder(timerId: Int, folderId: Long)
     suspend fun moveFolderTimersToAnother(originalFolderId: Long, targetFolderId: Long)
+    suspend fun changeContentType(
+        timers: List<TimerEntity>,
+        type: ResourceContentType,
+    ): List<TimerEntity>
 }
diff --git a/domain/src/main/java/xyz/aprildown/timer/domain/usecases/data/ExportAppData.kt b/domain/src/main/java/xyz/aprildown/timer/domain/usecases/data/ExportAppData.kt
index c30443f8..ec4a94a0 100644
--- a/domain/src/main/java/xyz/aprildown/timer/domain/usecases/data/ExportAppData.kt
+++ b/domain/src/main/java/xyz/aprildown/timer/domain/usecases/data/ExportAppData.kt
@@ -26,7 +26,7 @@ class ExportAppData @Inject constructor(
     private val appPreferencesProvider: AppPreferencesProvider,
 ) : CoroutinesUseCase<ExportAppData.Params, String>(dispatcher) {
 
-    class Params(
+    data class Params(
         val exportTimers: Boolean,
         val exportTimerStamps: Boolean,
         val exportSchedulers: Boolean,
diff --git a/domain/src/main/java/xyz/aprildown/timer/domain/usecases/data/ImportAppData.kt b/domain/src/main/java/xyz/aprildown/timer/domain/usecases/data/ImportAppData.kt
index 64ac0a3c..d762f55a 100644
--- a/domain/src/main/java/xyz/aprildown/timer/domain/usecases/data/ImportAppData.kt
+++ b/domain/src/main/java/xyz/aprildown/timer/domain/usecases/data/ImportAppData.kt
@@ -29,7 +29,7 @@ class ImportAppData @Inject constructor(
     private val appPreferencesProvider: AppPreferencesProvider,
 ) : CoroutinesUseCase<ImportAppData.Params, Unit>(dispatcher) {
 
-    class Params(
+    data class Params(
         val data: String,
         val wipeFirst: Boolean,
         val importTimers: Boolean,
diff --git a/domain/src/main/java/xyz/aprildown/timer/domain/utils/FileUtils.kt b/domain/src/main/java/xyz/aprildown/timer/domain/utils/FileUtils.kt
new file mode 100644
index 00000000..e88d5370
--- /dev/null
+++ b/domain/src/main/java/xyz/aprildown/timer/domain/utils/FileUtils.kt
@@ -0,0 +1,15 @@
+package xyz.aprildown.timer.domain.utils
+
+import java.io.File
+
+fun File.ensureDirExistence(): File {
+    if (!exists()) mkdirs()
+    return this
+}
+
+fun File.ensureNewFile(): File {
+    parentFile?.ensureDirExistence()
+    if (exists()) delete()
+    createNewFile()
+    return this
+}
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 8239e4f6..3b0d0185 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -10,8 +10,8 @@ versionCode = "7050100"
 versionName = "7.5.1"
 
 kotlin = "1.9.24"
-
 dagger = "2.51.1"
+composeCompiler = "1.5.14"
 
 detekt = "1.23.6"
 
@@ -80,6 +80,14 @@ androidx-navigation-ui = "androidx.navigation:navigation-ui-ktx:2.7.7"
 
 androidx-work = "androidx.work:work-runtime-ktx:2.9.0"
 
+compose-bom = "androidx.compose:compose-bom:2024.06.00"
+compose-material = { module = "androidx.compose.material3:material3" }
+compose-icons = { module = "androidx.compose.material:material-icons-extended" }
+compose-activity = "androidx.activity:activity-compose:1.9.0"
+compose-liveData = { module = "androidx.compose.runtime:runtime-livedata" }
+compose-constraintLayout = "androidx.constraintlayout:constraintlayout-compose:1.0.1"
+materialColorUtilities = "com.materialkolor:material-color-utilities:1.5.1"
+
 material = "com.google.android.material:material:1.4.0"
 
 leakCannary = "com.squareup.leakcanary:leakcanary-android-startup:2.14"
@@ -129,10 +137,13 @@ scrollHmsPicker = "xyz.aprildown:ScrollHmsPicker:2.0.3"
 theme = "xyz.aprildown:Theme:0.4.0"
 toggleButtonGroup = "com.nex3z:toggle-button-group:1.2.3"
 ultimateRingtonePicker = "com.github.DeweyReed:UltimateRingtonePicker:3.3.0"
-verticalStepperForm = "com.ernestoyaquello.stepperform:vertical-stepper-form:2.5.0"
 zip4j = "net.lingala.zip4j:zip4j:2.11.5"
 taskerPlugin = "com.joaomgcd:taskerpluginlibrary:0.4.10"
 diskLruCache = "com.github.bumptech.glide:disklrucache:4.16.0"
+coil = "io.coil-kt:coil:2.6.0"
+coil-compose = "io.coil-kt:coil-compose:2.6.0"
+coil-gif = "io.coil-kt:coil-gif:2.6.0"
+zoomable = "net.engawapg.lib:zoomable:1.6.1"
 
 [bundles]
 mockito-core = ["mockito-kotlin", "mockito-core"]
@@ -148,3 +159,10 @@ androidx-test-espresso = [
     "androidx-test-espresso-contrib",
     "androidx-test-espresso-intents",
 ]
+compose = [
+    "compose-material",
+    "compose-icons",
+    "compose-activity",
+    "compose-liveData",
+    "compose-constraintLayout",
+]
diff --git a/presentation/src/main/java/xyz/aprildown/timer/presentation/backup/ExportViewModel.kt b/presentation/src/main/java/xyz/aprildown/timer/presentation/backup/ExportViewModel.kt
deleted file mode 100644
index 7e3071a0..00000000
--- a/presentation/src/main/java/xyz/aprildown/timer/presentation/backup/ExportViewModel.kt
+++ /dev/null
@@ -1,51 +0,0 @@
-package xyz.aprildown.timer.presentation.backup
-
-import androidx.lifecycle.LiveData
-import androidx.lifecycle.MutableLiveData
-import dagger.hilt.android.lifecycle.HiltViewModel
-import kotlinx.coroutines.CancellationException
-import kotlinx.coroutines.CoroutineDispatcher
-import kotlinx.coroutines.launch
-import kotlinx.coroutines.withContext
-import xyz.aprildown.timer.domain.di.IoDispatcher
-import xyz.aprildown.timer.domain.di.MainDispatcher
-import xyz.aprildown.timer.domain.usecases.Fruit
-import xyz.aprildown.timer.domain.usecases.data.ExportAppData
-import xyz.aprildown.timer.presentation.BaseViewModel
-import java.io.OutputStream
-import javax.inject.Inject
-
-@HiltViewModel
-class ExportViewModel @Inject constructor(
-    @MainDispatcher mainDispatcher: CoroutineDispatcher,
-    @IoDispatcher private val ioDispatcher: CoroutineDispatcher,
-    private val exportAppData: ExportAppData,
-) : BaseViewModel(mainDispatcher) {
-
-    private val _result: MutableLiveData<Fruit<Unit>?> = MutableLiveData()
-    val result: LiveData<Fruit<Unit>?> = _result
-
-    fun export(params: ExportAppData.Params, outputStream: OutputStream) {
-        launch {
-            try {
-                val data = exportAppData(params)
-                withContext(ioDispatcher) {
-                    outputStream.use {
-                        val writer = it.bufferedWriter()
-                        writer.write(data)
-                        writer.flush()
-                    }
-                }
-                _result.value = Fruit.Ripe(Unit)
-            } catch (e: CancellationException) {
-                throw e
-            } catch (e: Exception) {
-                _result.value = Fruit.Rotten(e)
-            }
-        }
-    }
-
-    fun consumeResult() {
-        _result.value = null
-    }
-}
diff --git a/presentation/src/main/java/xyz/aprildown/timer/presentation/backup/ImportViewModel.kt b/presentation/src/main/java/xyz/aprildown/timer/presentation/backup/ImportViewModel.kt
deleted file mode 100644
index 5ee08da2..00000000
--- a/presentation/src/main/java/xyz/aprildown/timer/presentation/backup/ImportViewModel.kt
+++ /dev/null
@@ -1,43 +0,0 @@
-package xyz.aprildown.timer.presentation.backup
-
-import androidx.lifecycle.LiveData
-import androidx.lifecycle.MutableLiveData
-import dagger.hilt.android.lifecycle.HiltViewModel
-import kotlinx.coroutines.CancellationException
-import kotlinx.coroutines.CoroutineDispatcher
-import kotlinx.coroutines.launch
-import xyz.aprildown.timer.domain.di.MainDispatcher
-import xyz.aprildown.timer.domain.usecases.Fruit
-import xyz.aprildown.timer.domain.usecases.data.ImportAppData
-import xyz.aprildown.timer.domain.usecases.data.NotifyDataChanged
-import xyz.aprildown.timer.presentation.BaseViewModel
-import javax.inject.Inject
-
-@HiltViewModel
-class ImportViewModel @Inject constructor(
-    @MainDispatcher mainDispatcher: CoroutineDispatcher,
-    private val importAppData: ImportAppData,
-    private val notifyDataChanged: NotifyDataChanged,
-) : BaseViewModel(mainDispatcher) {
-
-    private val _result: MutableLiveData<Fruit<Unit>?> = MutableLiveData()
-    val result: LiveData<Fruit<Unit>?> = _result
-
-    fun import(params: ImportAppData.Params) {
-        launch {
-            try {
-                importAppData(params)
-                notifyDataChanged()
-                _result.value = Fruit.Ripe(Unit)
-            } catch (e: CancellationException) {
-                throw e
-            } catch (e: Exception) {
-                _result.value = Fruit.Rotten(e)
-            }
-        }
-    }
-
-    fun consumeResult() {
-        _result.value = null
-    }
-}
diff --git a/presentation/src/main/java/xyz/aprildown/timer/presentation/edit/EditViewModel.kt b/presentation/src/main/java/xyz/aprildown/timer/presentation/edit/EditViewModel.kt
index 2e861296..c51087d5 100644
--- a/presentation/src/main/java/xyz/aprildown/timer/presentation/edit/EditViewModel.kt
+++ b/presentation/src/main/java/xyz/aprildown/timer/presentation/edit/EditViewModel.kt
@@ -2,6 +2,7 @@ package xyz.aprildown.timer.presentation.edit
 
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
+import androidx.lifecycle.SavedStateHandle
 import androidx.lifecycle.viewModelScope
 import com.github.deweyreed.tools.arch.Event
 import dagger.Lazy
@@ -41,6 +42,8 @@ import javax.inject.Named
  */
 @HiltViewModel
 class EditViewModel @Inject constructor(
+    private val savedStateHandle: SavedStateHandle,
+
     @MainDispatcher mainDispatcher: CoroutineDispatcher,
     private val addTimer: AddTimer,
     private val saveTimer: SaveTimer,
@@ -56,6 +59,12 @@ class EditViewModel @Inject constructor(
 
     private var timerHash: Int = 0
 
+    var imagePosition: Int
+        get() = savedStateHandle[KEY_IMAGE_POSITION] ?: -1
+        set(value) {
+            savedStateHandle[KEY_IMAGE_POSITION] = value
+        }
+
     // Updated instantly
     val name = MutableLiveData<String>()
     val loop = MutableLiveData<Int>()
@@ -287,5 +296,7 @@ class EditViewModel @Inject constructor(
         const val UPDATE_CREATE = 0
         const val UPDATE_UPDATE = 1
         const val UPDATE_DELETE = 2
+
+        private const val KEY_IMAGE_POSITION = "image_position"
     }
 }
diff --git a/presentation/src/test/java/xyz/aprildown/timer/presentation/backup/ImportViewModelTest.kt b/presentation/src/test/java/xyz/aprildown/timer/presentation/backup/ImportViewModelTest.kt
deleted file mode 100644
index a41ddb1c..00000000
--- a/presentation/src/test/java/xyz/aprildown/timer/presentation/backup/ImportViewModelTest.kt
+++ /dev/null
@@ -1,45 +0,0 @@
-package xyz.aprildown.timer.presentation.backup
-
-import androidx.arch.core.executor.testing.InstantTaskExecutorRule
-import kotlinx.coroutines.test.StandardTestDispatcher
-import kotlinx.coroutines.test.runTest
-import org.junit.Rule
-import org.junit.Test
-import org.mockito.kotlin.mock
-import org.mockito.kotlin.verify
-import org.mockito.kotlin.verifyNoMoreInteractions
-import xyz.aprildown.timer.domain.usecases.data.ImportAppData
-import xyz.aprildown.timer.domain.usecases.data.NotifyDataChanged
-
-class ImportViewModelTest {
-
-    @get:Rule
-    val instantExecutorRule = InstantTaskExecutorRule()
-
-    private val importAppData: ImportAppData = mock()
-    private val notifyDataChanged: NotifyDataChanged = mock()
-
-    @Test
-    fun import() = runTest {
-        val viewModel =
-            ImportViewModel(StandardTestDispatcher(testScheduler), importAppData, notifyDataChanged)
-
-        val params = ImportAppData.Params(
-            data = "",
-            wipeFirst = false,
-            importTimers = false,
-            importTimerStamps = false,
-            importSchedulers = false,
-            importPreferences = false,
-        )
-        viewModel.import(params)
-
-        testScheduler.advanceUntilIdle()
-
-        verify(importAppData).invoke(params)
-        verify(notifyDataChanged).invoke()
-
-        verifyNoMoreInteractions(importAppData)
-        verifyNoMoreInteractions(notifyDataChanged)
-    }
-}
diff --git a/presentation/src/test/java/xyz/aprildown/timer/presentation/edit/EditViewModelTest.kt b/presentation/src/test/java/xyz/aprildown/timer/presentation/edit/EditViewModelTest.kt
index 77dcd9a5..96542942 100644
--- a/presentation/src/test/java/xyz/aprildown/timer/presentation/edit/EditViewModelTest.kt
+++ b/presentation/src/test/java/xyz/aprildown/timer/presentation/edit/EditViewModelTest.kt
@@ -2,6 +2,7 @@ package xyz.aprildown.timer.presentation.edit
 
 import androidx.arch.core.executor.testing.InstantTaskExecutorRule
 import androidx.lifecycle.Observer
+import androidx.lifecycle.SavedStateHandle
 import com.github.deweyreed.tools.arch.Event
 import kotlinx.coroutines.test.StandardTestDispatcher
 import kotlinx.coroutines.test.TestScope
@@ -58,6 +59,7 @@ class EditViewModelTest {
 
     private fun TestScope.getViewModel(): EditViewModel {
         val viewModel = EditViewModel(
+            savedStateHandle = SavedStateHandle(),
             mainDispatcher = StandardTestDispatcher(testScheduler),
             addTimer = addTimer,
             saveTimer = saveTimer,