diff --git a/android/src/main/java/org/hisp/dhis/android/MainActivity.kt b/android/src/main/java/org/hisp/dhis/android/MainActivity.kt
index ef9acf5fe..b17de2cd7 100644
--- a/android/src/main/java/org/hisp/dhis/android/MainActivity.kt
+++ b/android/src/main/java/org/hisp/dhis/android/MainActivity.kt
@@ -3,10 +3,14 @@ package org.hisp.dhis.android
 import android.graphics.Bitmap
 import android.graphics.BitmapFactory
 import android.os.Bundle
+import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.appcompat.app.AppCompatActivity
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.SideEffect
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.platform.LocalContext
+import androidx.core.view.WindowCompat
 import org.hisp.dhis.common.App
 
 class MainActivity : AppCompatActivity() {
@@ -14,6 +18,7 @@ class MainActivity : AppCompatActivity() {
         super.onCreate(savedInstanceState)
         setContent {
             val res = LocalContext.current.resources
+            SetStatusBarColor()
             App(
                 imageBitmapLoader = {
                     BitmapFactory.decodeResource(
@@ -27,3 +32,18 @@ class MainActivity : AppCompatActivity() {
         }
     }
 }
+
+@Composable
+fun SetStatusBarColor() {
+    val context = LocalContext.current
+    val window = (context as? ComponentActivity)?.window
+
+    SideEffect {
+        window?.let {
+            WindowCompat.getInsetsController(it, it.decorView).apply {
+                isAppearanceLightStatusBars = true
+            }
+            it.statusBarColor = 0xFFE2F2FF.toInt()
+        }
+    }
+}
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt
index 5d663b198..36503acb9 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt
@@ -5,12 +5,14 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
-import org.hisp.dhis.common.screens.Components
+import org.hisp.dhis.common.screens.Groups
 import org.hisp.dhis.common.screens.NoComponentSelectedScreen
 import org.hisp.dhis.common.screens.actionInputs.ActionInputsScreen
 import org.hisp.dhis.common.screens.basicTextInputs.BasicTextInputsScreen
@@ -31,8 +33,11 @@ import org.hisp.dhis.common.screens.toggleableInputs.ToggleableInputsScreen
 import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem
 import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
+import org.hisp.dhis.mobile.ui.designsystem.component.InputStyle
 import org.hisp.dhis.mobile.ui.designsystem.theme.DHIS2Theme
+import org.hisp.dhis.mobile.ui.designsystem.theme.Shape
 import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
+import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 
 @Composable
 fun App(imageBitmapLoader: (() -> ImageBitmap)? = null) {
@@ -45,50 +50,66 @@ fun App(imageBitmapLoader: (() -> ImageBitmap)? = null) {
 fun Main(
     imageBitmapLoader: (() -> ImageBitmap)?,
 ) {
-    val currentScreen = remember { mutableStateOf(Components.CARDS) }
+    val currentScreen = remember { mutableStateOf(Groups.NO_GROUP_SELECTED) }
+    var isComponentSelected by remember { mutableStateOf(false) }
 
     Column(
         verticalArrangement = Arrangement.spacedBy(Spacing.Spacing16),
         modifier = Modifier
-            .background(Color.White)
-            .padding(Spacing.Spacing16),
+            .background(SurfaceColor.Container),
     ) {
         val screenDropdownItemList = mutableListOf<DropdownItem>()
-        Components.entries.forEach {
+        Groups.entries.forEach {
             screenDropdownItemList.add(DropdownItem(it.label))
         }
 
-        InputDropDown(
-            "Components",
-            dropdownItems = screenDropdownItemList.toList(),
-            onItemSelected = { currentScreen.value = getCurrentScreen(it.label) },
-            onResetButtonClicked = { currentScreen.value = Components.NO_COMPONENT_SELECTED },
-            state = InputShellState.UNFOCUSED,
-            selectedItem = DropdownItem(currentScreen.value.label),
-        )
+        if (isComponentSelected) {
+            InputDropDown(
+                modifier = Modifier.padding(
+                    start = Spacing.Spacing16,
+                    end = Spacing.Spacing16,
+                    top = Spacing.Spacing16,
+                ),
+                title = "Group",
+                dropdownItems = screenDropdownItemList.toList(),
+                onItemSelected = { currentScreen.value = getCurrentScreen(it.label) },
+                onResetButtonClicked = { currentScreen.value = Groups.NO_GROUP_SELECTED },
+                state = InputShellState.UNFOCUSED,
+                expanded = true,
+                selectedItem = DropdownItem(currentScreen.value.label),
+                inputStyle = InputStyle.DataInputStyle().apply { backGroundColor = SurfaceColor.SurfaceBright },
+            )
 
-        when (currentScreen.value) {
-            Components.ACTION_INPUTS -> ActionInputsScreen()
-            Components.BADGES -> BadgesScreen()
-            Components.BASIC_TEXT_INPUTS -> BasicTextInputsScreen()
-            Components.BOTTOM_SHEETS -> BottomSheetsScreen()
-            Components.BUTTONS -> ButtonsScreen()
-            Components.CARDS -> CardsScreen()
-            Components.CHIPS -> ChipsScreen()
-            Components.INDICATOR -> IndicatorScreen()
-            Components.LEGEND -> LegendScreen()
-            Components.METADATA_AVATAR -> MetadataAvatarScreen()
-            Components.PROGRESS_INDICATOR -> ProgressScreen()
-            Components.PARAMETER_SELECTOR -> ParameterSelectorScreen()
-            Components.SECTIONS -> SectionScreen()
-            Components.TOGGLEABLE_INPUTS -> ToggleableInputsScreen(imageBitmapLoader)
-            Components.TAGS -> TagsScreen()
-            Components.SEARCH_BAR -> SearchBarScreen()
-            Components.NO_COMPONENT_SELECTED -> NoComponentSelectedScreen()
+            when (currentScreen.value) {
+                Groups.ACTION_INPUTS -> ActionInputsScreen()
+                Groups.BADGES -> BadgesScreen()
+                Groups.BASIC_TEXT_INPUTS -> BasicTextInputsScreen()
+                Groups.BOTTOM_SHEETS -> BottomSheetsScreen()
+                Groups.BUTTONS -> ButtonsScreen()
+                Groups.CARDS -> CardsScreen()
+                Groups.CHIPS -> ChipsScreen()
+                Groups.INDICATOR -> IndicatorScreen()
+                Groups.LEGEND -> LegendScreen()
+                Groups.METADATA_AVATAR -> MetadataAvatarScreen()
+                Groups.PROGRESS_INDICATOR -> ProgressScreen()
+                Groups.PARAMETER_SELECTOR -> ParameterSelectorScreen()
+                Groups.SECTIONS -> SectionScreen()
+                Groups.TOGGLEABLE_INPUTS -> ToggleableInputsScreen(imageBitmapLoader)
+                Groups.TAGS -> TagsScreen()
+                Groups.SEARCH_BAR -> SearchBarScreen()
+                Groups.NO_GROUP_SELECTED -> NoComponentSelectedScreen()
+            }
+        } else {
+            NoComponentSelectedScreen(
+                modifier = Modifier
+                    .background(Color.White, Shape.NoRounding),
+            ) {
+                isComponentSelected = !isComponentSelected
+            }
         }
     }
 }
 
-fun getCurrentScreen(label: String): Components {
-    return Components.entries.firstOrNull { it.label == label } ?: Components.ACTION_INPUTS
+fun getCurrentScreen(label: String): Groups {
+    return Groups.entries.firstOrNull { it.label == label } ?: Groups.ACTION_INPUTS
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Groups.kt
similarity index 85%
rename from common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt
rename to common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Groups.kt
index bf8fb927b..8c73b26df 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Groups.kt
@@ -1,6 +1,6 @@
 package org.hisp.dhis.common.screens
 
-enum class Components(val label: String) {
+enum class Groups(val label: String) {
     ACTION_INPUTS("Action inputs"),
     BASIC_TEXT_INPUTS("Basic text Inputs"),
     BOTTOM_SHEETS("Bottom sheet components"),
@@ -17,5 +17,5 @@ enum class Components(val label: String) {
     METADATA_AVATAR("Metadata Avatar"),
     INDICATOR("Indicators"),
     PARAMETER_SELECTOR("Parameter selector"),
-    NO_COMPONENT_SELECTED("No component selected"),
+    NO_GROUP_SELECTED("No group selected"),
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/NoComponentSelectedScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/NoComponentSelectedScreen.kt
index dbf29db36..478321b6a 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/NoComponentSelectedScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/NoComponentSelectedScreen.kt
@@ -1,9 +1,7 @@
 package org.hisp.dhis.common.screens
 
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Category
@@ -11,21 +9,27 @@ import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import org.hisp.dhis.mobile.ui.designsystem.component.Button
+import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.Title
 import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
-fun NoComponentSelectedScreen() {
-    Column(
-        modifier = Modifier.fillMaxSize(),
+fun NoComponentSelectedScreen(
+    modifier: Modifier = Modifier,
+    onClick: (() -> Unit)? = null,
+) {
+    ColumnScreenContainer(
+        modifier = modifier,
         verticalArrangement = Arrangement.Top,
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-        Spacer(Modifier.size(Spacing.Spacing160))
+        Spacer(Modifier.size(Spacing.Spacing120))
         Icon(
-            modifier = Modifier.size(Spacing.Spacing80),
+            modifier = Modifier.size(Spacing.Spacing48),
             imageVector = Icons.Outlined.Category,
             tint = SurfaceColor.ContainerHighest,
             contentDescription = "Please choose an option",
@@ -33,5 +37,22 @@ fun NoComponentSelectedScreen() {
         Spacer(Modifier.size(Spacing.Spacing16))
 
         Title("Please select a component", textColor = TextColor.OnSurfaceLight)
+
+        if (onClick != null) {
+            Spacer(Modifier.size(Spacing.Spacing24))
+
+            Button(
+                enabled = true,
+                style = ButtonStyle.KEYBOARDKEY,
+                text = "Select component",
+                icon = {
+                    Icon(
+                        imageVector = Icons.Outlined.Category,
+                        contentDescription = "Please choose an option",
+                    )
+                },
+                onClick = onClick,
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/ActionInputsSreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/ActionInputsSreen.kt
index d3033d3ad..2dacbbea7 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/ActionInputsSreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/ActionInputsSreen.kt
@@ -4,13 +4,12 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import org.hisp.dhis.common.screens.NoComponentSelectedScreen
+import org.hisp.dhis.common.screens.components.GroupComponentDropDown
 import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem
-import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown
-import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 
 @Composable
 fun ActionInputsScreen() {
-    val currentScreen = remember { mutableStateOf(ActionInputs.INPUT_AGE) }
+    val currentScreen = remember { mutableStateOf(ActionInputs.NO_COMPONENT_SELECTED) }
 
     val screenDropdownItemList = mutableListOf<DropdownItem>()
     ActionInputs.entries.forEach {
@@ -18,13 +17,11 @@ fun ActionInputsScreen() {
             screenDropdownItemList.add(DropdownItem(it.label))
         }
     }
-    InputDropDown(
-        "Display",
+    GroupComponentDropDown(
         dropdownItems = screenDropdownItemList.toList(),
         onItemSelected = { currentScreen.value = getCurrentScreen(it.label) },
         onResetButtonClicked = { currentScreen.value = ActionInputs.NO_COMPONENT_SELECTED },
         selectedItem = DropdownItem(currentScreen.value.label),
-        state = InputShellState.UNFOCUSED,
     )
     when (currentScreen.value) {
         ActionInputs.INPUT_QR_CODE -> InputQRCodeScreen()
@@ -46,20 +43,20 @@ fun ActionInputsScreen() {
 }
 
 enum class ActionInputs(val label: String) {
-    LOGIN("Login"),
-    INPUT_AGE("Input Age"),
-    INPUT_BARCODE("Input Barcode"),
-    INPUT_COORDINATE("Input Coordinate"),
-    INPUT_DATE_TIME("Input Date Time"),
-    INPUT_EMAIL("Input Email"),
-    INPUT_FILE_RESOURCE("Input File Resource"),
-    INPUT_IMAGE("Input Image"),
-    INPUT_LINK("Input Link"),
-    INPUT_ORG_UNIT("Input Org. Unit"),
-    INPUT_PHONE_NUMBER("Input Phone Number"),
-    INPUT_POLYGON("Input Polygon"),
-    INPUT_QR_CODE("Input QR code"),
-    INPUT_SIGNATURE("Input Signature"),
+    LOGIN("Login component"),
+    INPUT_AGE("Input Age component"),
+    INPUT_BARCODE("Input Barcode component"),
+    INPUT_COORDINATE("Input Coordinate component"),
+    INPUT_DATE_TIME("Input Date Time component"),
+    INPUT_EMAIL("Input Email component"),
+    INPUT_FILE_RESOURCE("Input File Resource component"),
+    INPUT_IMAGE("Input Image component"),
+    INPUT_LINK("Input Link component"),
+    INPUT_ORG_UNIT("Input Org. Unit component"),
+    INPUT_PHONE_NUMBER("Input Phone Number component"),
+    INPUT_POLYGON("Input Polygon component"),
+    INPUT_QR_CODE("Input QR code component"),
+    INPUT_SIGNATURE("Input Signature component"),
     NO_COMPONENT_SELECTED("No component selected"),
 }
 
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputAgeScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputAgeScreen.kt
index b5565de6a..733b5a0ba 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputAgeScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputAgeScreen.kt
@@ -9,116 +9,116 @@ import androidx.compose.ui.text.input.TextFieldValue
 import org.hisp.dhis.common.screens.previews.regularLegendList
 import org.hisp.dhis.mobile.ui.designsystem.component.AgeInputType
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputAge
 import org.hisp.dhis.mobile.ui.designsystem.component.InputAgeModel
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.LegendData
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.TimeUnitValues
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 
 @Composable
 fun InputAgeScreen() {
-    ColumnComponentContainer {
-        SubTitle("Horizontal Age Field Helper")
-        SubTitle("Input Age Component - Idle")
+    ColumnScreenContainer(title = ActionInputs.INPUT_AGE.label) {
         var inputType by remember { mutableStateOf<AgeInputType>(AgeInputType.None) }
 
-        InputAge(
-            InputAgeModel(
-                title = "Label",
-                inputType = inputType,
-                onValueChanged = { newInputType ->
-                    inputType = newInputType
-                },
-            ),
-
-        )
-
-        SubTitle("Input Age Component - Idle Disabled")
-        InputAge(
-            InputAgeModel(
-                title = "Label",
-                inputType = AgeInputType.None,
-                state = InputShellState.DISABLED,
-                onValueChanged = { newInputType ->
-                    inputType = newInputType
-                },
-            ),
-        )
-
-        SubTitle("Input Age Component - Date Of Birth")
-        InputAge(
-            InputAgeModel(
-                title = "Label",
-                inputType = AgeInputType.DateOfBirth(TextFieldValue("01011985")),
-                state = InputShellState.DISABLED,
-
-                onValueChanged = { newInputType ->
-                    inputType = newInputType
-                },
-            ),
-
-        )
-
-        SubTitle("Input Age Component - Date Of Birth Required Error")
-        InputAge(
-            InputAgeModel(
-                title = "Label",
-                inputType = AgeInputType.DateOfBirth(TextFieldValue("010")),
-                state = InputShellState.ERROR,
-                isRequired = true,
-
-                onValueChanged = {
-                    // no-op
-                },
-            ),
-
-        )
-
-        SubTitle("Input Age Component - Age Disabled")
-        InputAge(
-            InputAgeModel(
-                title = "Label",
-                inputType = AgeInputType.Age(value = TextFieldValue("56"), unit = TimeUnitValues.YEARS),
-                state = InputShellState.DISABLED,
-
-                onValueChanged = { newInputType ->
-                    inputType = newInputType
-                },
-            ),
-
-        )
-
-        SubTitle("Input Age Component - Age Required Error")
-        InputAge(
-            InputAgeModel(
-                title = "Label",
-                inputType = AgeInputType.Age(value = TextFieldValue("56"), unit = TimeUnitValues.YEARS),
-                state = InputShellState.ERROR,
-                isRequired = true,
-
-                onValueChanged = {
-                    // no-op
-                },
-            ),
-
-        )
-
-        SubTitle("Input Age Component - Legend")
-        InputAge(
-            InputAgeModel(
-                title = "Label",
-                inputType = AgeInputType.Age(value = TextFieldValue("56"), unit = TimeUnitValues.YEARS),
-                state = InputShellState.ERROR,
-                isRequired = true,
-
-                onValueChanged = {
-                    // no-op
-                },
-                legendData = LegendData(SurfaceColor.CustomGreen, "Legend", popUpLegendDescriptionData = regularLegendList),
-
-            ),
-        )
+        ColumnComponentContainer("Input Age Component - Idle") {
+            InputAge(
+                InputAgeModel(
+                    title = "Label",
+                    inputType = inputType,
+                    onValueChanged = { newInputType ->
+                        inputType = newInputType
+                    },
+                ),
+            )
+        }
+
+        ColumnComponentContainer("Input Age Component - Idle Disabled") {
+            InputAge(
+                InputAgeModel(
+                    title = "Label",
+                    inputType = AgeInputType.None,
+                    state = InputShellState.DISABLED,
+                    onValueChanged = { newInputType ->
+                        inputType = newInputType
+                    },
+                ),
+            )
+        }
+
+        ColumnComponentContainer("Input Age Component - Date Of Birth") {
+            InputAge(
+                InputAgeModel(
+                    title = "Label",
+                    inputType = AgeInputType.DateOfBirth(TextFieldValue("01011985")),
+                    state = InputShellState.DISABLED,
+
+                    onValueChanged = { newInputType ->
+                        inputType = newInputType
+                    },
+                ),
+            )
+        }
+
+        ColumnComponentContainer("Input Age Component - Date Of Birth Required Error") {
+            InputAge(
+                InputAgeModel(
+                    title = "Label",
+                    inputType = AgeInputType.DateOfBirth(TextFieldValue("010")),
+                    state = InputShellState.ERROR,
+                    isRequired = true,
+
+                    onValueChanged = {
+                        // no-op
+                    },
+                ),
+            )
+        }
+
+        ColumnComponentContainer("Input Age Component - Age Disabled") {
+            InputAge(
+                InputAgeModel(
+                    title = "Label",
+                    inputType = AgeInputType.Age(value = TextFieldValue("56"), unit = TimeUnitValues.YEARS),
+                    state = InputShellState.DISABLED,
+
+                    onValueChanged = { newInputType ->
+                        inputType = newInputType
+                    },
+                ),
+            )
+        }
+
+        ColumnComponentContainer("Input Age Component - Age Required Error") {
+            InputAge(
+                InputAgeModel(
+                    title = "Label",
+                    inputType = AgeInputType.Age(value = TextFieldValue("56"), unit = TimeUnitValues.YEARS),
+                    state = InputShellState.ERROR,
+                    isRequired = true,
+
+                    onValueChanged = {
+                        // no-op
+                    },
+                ),
+            )
+        }
+
+        ColumnComponentContainer("Input Age Component - Legend") {
+            InputAge(
+                InputAgeModel(
+                    title = "Label",
+                    inputType = AgeInputType.Age(value = TextFieldValue("56"), unit = TimeUnitValues.YEARS),
+                    state = InputShellState.ERROR,
+                    isRequired = true,
+
+                    onValueChanged = {
+                        // no-op
+                    },
+                    legendData = LegendData(SurfaceColor.CustomGreen, "Legend", popUpLegendDescriptionData = regularLegendList),
+                ),
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputBarCodeScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputBarCodeScreen.kt
index 7c27b478d..f22b74820 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputBarCodeScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputBarCodeScreen.kt
@@ -2,8 +2,6 @@ package org.hisp.dhis.common.screens.actionInputs
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Info
 import androidx.compose.material3.HorizontalDivider
@@ -21,107 +19,107 @@ import org.hisp.dhis.mobile.ui.designsystem.component.BarcodeBlock
 import org.hisp.dhis.mobile.ui.designsystem.component.BottomSheetShell
 import org.hisp.dhis.mobile.ui.designsystem.component.ButtonCarousel
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
-import org.hisp.dhis.mobile.ui.designsystem.component.Description
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputBarCode
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
 import org.hisp.dhis.mobile.ui.designsystem.resource.provideStringResource
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputBarCodeScreen() {
-    ColumnComponentContainer {
-        var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("889026a1-d01e-4d34-8209-81e8ed5c614b")) }
-        var showEnabledBarCodeBottomSheet by rememberSaveable { mutableStateOf(false) }
+    ColumnScreenContainer(title = ActionInputs.INPUT_BARCODE.label) {
+        ColumnComponentContainer("Default Input Barcode") {
+            var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("889026a1-d01e-4d34-8209-81e8ed5c614b")) }
+            var showEnabledBarCodeBottomSheet by rememberSaveable { mutableStateOf(false) }
 
-        Description("Default Input Barcode", textColor = TextColor.OnSurfaceVariant)
-        InputBarCode(
-            "label",
-            state = InputShellState.UNFOCUSED,
-            onActionButtonClicked = {
-                showEnabledBarCodeBottomSheet = !showEnabledBarCodeBottomSheet
-            },
-            inputTextFieldValue = inputValue1,
-            onValueChanged = {
-                inputValue1 = it ?: TextFieldValue()
-            },
-        )
+            if (showEnabledBarCodeBottomSheet) {
+                BottomSheetShell(
+                    modifier = Modifier.testTag("LEGEND_BOTTOM_SHEET"),
+                    title = provideStringResource("qr_code"),
+                    icon = {
+                        Icon(
+                            imageVector = Icons.Outlined.Info,
+                            contentDescription = "Button",
+                            tint = SurfaceColor.Primary,
+                        )
+                    },
+                    content = {
+                        Row(horizontalArrangement = Arrangement.Center) {
+                            BarcodeBlock(data = inputValue1.text)
+                        }
+                    },
+                    buttonBlock = {
+                        ButtonCarousel(
+                            carouselButtonList = threeButtonCarousel,
+                        )
+                    },
+                ) {
+                    showEnabledBarCodeBottomSheet = false
+                }
+            }
 
-        if (showEnabledBarCodeBottomSheet) {
-            BottomSheetShell(
-                modifier = Modifier.testTag("LEGEND_BOTTOM_SHEET"),
-                title = provideStringResource("qr_code"),
-                icon = {
-                    Icon(
-                        imageVector = Icons.Outlined.Info,
-                        contentDescription = "Button",
-                        tint = SurfaceColor.Primary,
-                    )
-                },
-                content = {
-                    Row(horizontalArrangement = Arrangement.Center) {
-                        BarcodeBlock(data = inputValue1.text)
-                    }
+            InputBarCode(
+                "label",
+                state = InputShellState.UNFOCUSED,
+                onActionButtonClicked = {
+                    showEnabledBarCodeBottomSheet = !showEnabledBarCodeBottomSheet
                 },
-                buttonBlock = {
-                    ButtonCarousel(
-                        carouselButtonList = threeButtonCarousel,
-                    )
+                inputTextFieldValue = inputValue1,
+                onValueChanged = {
+                    inputValue1 = it ?: TextFieldValue()
                 },
-            ) {
-                showEnabledBarCodeBottomSheet = false
-            }
+            )
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
 
-        var inputValue2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
-        Description("Required field Input Barcode", textColor = TextColor.OnSurfaceVariant)
-        InputBarCode(
-            "label",
-            state = InputShellState.ERROR,
-            onActionButtonClicked = {
-            },
-            inputTextFieldValue = inputValue2,
-            onValueChanged = {
-                inputValue2 = it ?: TextFieldValue()
-            },
-            isRequiredField = true,
-            supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)),
-        )
+        ColumnComponentContainer("Required field Input Barcode") {
+            var inputValue2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
+            InputBarCode(
+                "label",
+                state = InputShellState.ERROR,
+                onActionButtonClicked = {
+                },
+                inputTextFieldValue = inputValue2,
+                onValueChanged = {
+                    inputValue2 = it ?: TextFieldValue()
+                },
+                isRequiredField = true,
+                supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)),
+            )
+        }
 
-        Spacer(Modifier.size(Spacing.Spacing18))
-        var inputValue by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
-        Description("Disabled Input Barcode", textColor = TextColor.OnSurfaceVariant)
-        InputBarCode(
-            "label",
-            state = InputShellState.DISABLED,
-            onActionButtonClicked = {
-            },
-            inputTextFieldValue = inputValue,
-            onValueChanged = {
-                inputValue = it ?: TextFieldValue()
-            },
-        )
+        ColumnComponentContainer("Disabled Input Barcode") {
+            var inputValue by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
+            InputBarCode(
+                "label",
+                state = InputShellState.DISABLED,
+                onActionButtonClicked = {
+                },
+                inputTextFieldValue = inputValue,
+                onValueChanged = {
+                    inputValue = it ?: TextFieldValue()
+                },
+            )
+        }
 
-        Spacer(Modifier.size(Spacing.Spacing18))
-        var inputValue3 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("889026a1-d01e-4d34-8209-81e8ed5c614b")) }
-        Description("Disabled Input Barcode with content", textColor = TextColor.OnSurfaceVariant)
-        InputBarCode(
-            "label",
-            state = InputShellState.DISABLED,
-            onActionButtonClicked = {
-            },
-            inputTextFieldValue = inputValue3,
-            onValueChanged = {
-                inputValue3 = it ?: TextFieldValue()
-            },
-        )
-        Description("Barcode Block", textColor = TextColor.OnSurfaceVariant)
+        ColumnComponentContainer("Disabled Input Barcode with content") {
+            var inputValue3 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("889026a1-d01e-4d34-8209-81e8ed5c614b")) }
+            InputBarCode(
+                "label",
+                state = InputShellState.DISABLED,
+                onActionButtonClicked = {
+                },
+                inputTextFieldValue = inputValue3,
+                onValueChanged = {
+                    inputValue3 = it ?: TextFieldValue()
+                },
+            )
+        }
 
+        SubTitle("Barcode Block")
         BarcodeBlock(data = "Barcode value")
         HorizontalDivider()
         BarcodeBlock(data = "889026a1-d01e-4d34-8209-81e8ed5c614b")
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputCoordinateScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputCoordinateScreen.kt
index 4d21dedee..3c928a852 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputCoordinateScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputCoordinateScreen.kt
@@ -1,73 +1,64 @@
 package org.hisp.dhis.common.screens.actionInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.Coordinates
 import org.hisp.dhis.mobile.ui.designsystem.component.InputCoordinate
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputCoordinateScreen() {
-    ColumnComponentContainer {
-        Title("Input Coordinates", textColor = TextColor.OnSurfaceVariant)
-
-        SubTitle("Basic Input Coordinates ", textColor = TextColor.OnSurfaceVariant)
-        var coordinates by remember { mutableStateOf<Coordinates?>(null) }
-        InputCoordinate(
-            title = "Label",
-            state = InputShellState.UNFOCUSED,
-            coordinates = coordinates,
-            onResetButtonClicked = {
-                coordinates = null
-            },
-            onUpdateButtonClicked = {
-                coordinates = Coordinates(latitude = 39.46263, longitude = -0.33617)
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+    ColumnScreenContainer(title = ActionInputs.INPUT_COORDINATE.label) {
+        ColumnComponentContainer("Basic Input Coordinates ") {
+            var coordinates by remember { mutableStateOf<Coordinates?>(null) }
+            InputCoordinate(
+                title = "Label",
+                state = InputShellState.UNFOCUSED,
+                coordinates = coordinates,
+                onResetButtonClicked = {
+                    coordinates = null
+                },
+                onUpdateButtonClicked = {
+                    coordinates = Coordinates(latitude = 39.46263, longitude = -0.33617)
+                },
+            )
+        }
 
-        SubTitle("Disabled Input Coordinates without data ", textColor = TextColor.OnSurfaceVariant)
-        var coordinates1 by remember {
-            mutableStateOf<Coordinates?>(null)
+        ColumnComponentContainer("Disabled Input Coordinates without data ") {
+            var coordinates1 by remember { mutableStateOf<Coordinates?>(null) }
+            InputCoordinate(
+                title = "Label",
+                state = InputShellState.DISABLED,
+                coordinates = coordinates1,
+                onResetButtonClicked = {
+                    coordinates1 = null
+                },
+                onUpdateButtonClicked = {
+                    coordinates1 = Coordinates(latitude = 39.46263, longitude = -0.33617)
+                },
+            )
         }
-        InputCoordinate(
-            title = "Label",
-            state = InputShellState.DISABLED,
-            coordinates = coordinates1,
-            onResetButtonClicked = {
-                coordinates1 = null
-            },
-            onUpdateButtonClicked = {
-                coordinates1 = Coordinates(latitude = 39.46263, longitude = -0.33617)
-            },
-        )
 
-        SubTitle("Disabled Input Coordinates with data ", textColor = TextColor.OnSurfaceVariant)
-        var coordinates2 by remember {
-            mutableStateOf<Coordinates?>(Coordinates(latitude = 39.46263, longitude = -0.33617))
+        ColumnComponentContainer("Disabled Input Coordinates with data ") {
+            var coordinates2 by remember {
+                mutableStateOf<Coordinates?>(Coordinates(latitude = 39.46263, longitude = -0.33617))
+            }
+            InputCoordinate(
+                title = "Label",
+                state = InputShellState.DISABLED,
+                coordinates = coordinates2,
+                onResetButtonClicked = {
+                    coordinates2 = null
+                },
+                onUpdateButtonClicked = {
+                    coordinates2 = Coordinates(latitude = 39.46263, longitude = -0.33617)
+                },
+            )
         }
-        InputCoordinate(
-            title = "Label",
-            state = InputShellState.DISABLED,
-            coordinates = coordinates2,
-            onResetButtonClicked = {
-                coordinates2 = null
-            },
-            onUpdateButtonClicked = {
-                coordinates2 = Coordinates(latitude = 39.46263, longitude = -0.33617)
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputDateTimeScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputDateTimeScreen.kt
index 16236f07b..4462bba47 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputDateTimeScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputDateTimeScreen.kt
@@ -8,19 +8,19 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.text.TextRange
 import androidx.compose.ui.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.DateTimeActionType
 import org.hisp.dhis.mobile.ui.designsystem.component.InputDateTime
 import org.hisp.dhis.mobile.ui.designsystem.component.InputDateTimeModel
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.SelectableDates
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.internal.DateTimeTransformation
 import org.hisp.dhis.mobile.ui.designsystem.component.internal.DateTransformation
 import org.hisp.dhis.mobile.ui.designsystem.component.internal.TimeTransformation
 
 @Composable
 fun InputDateTimeScreen() {
-    ColumnComponentContainer {
+    ColumnScreenContainer(title = ActionInputs.INPUT_DATE_TIME.label) {
         var date by remember { mutableStateOf(TextFieldValue("18122024", selection = TextRange(8))) }
         var time by remember { mutableStateOf(TextFieldValue("0930")) }
         var dateTime by remember { mutableStateOf(TextFieldValue("121119910230")) }
@@ -29,112 +29,108 @@ fun InputDateTimeScreen() {
         var dateTimenoInput by remember { mutableStateOf(TextFieldValue("11112014")) }
         var hour24time by remember { mutableStateOf(TextFieldValue("1630")) }
 
-        SubTitle("Date Input (allowed dates from 01/09/2024 to 12/12/2024)")
-        InputDateTime(
-            InputDateTimeModel(
-                title = "Label",
-                inputTextFieldValue = date,
-                visualTransformation = DateTransformation(),
-                actionType = DateTimeActionType.DATE,
-                onValueChanged = { date = it ?: TextFieldValue() },
-                selectableDates = SelectableDates("01092024", "12122024"),
-            ),
-        )
-
-        SubTitle("Time Input")
-
-        InputDateTime(
-            InputDateTimeModel(
-                title = "Label",
-                inputTextFieldValue = dateTimenoInput,
-                visualTransformation = DateTransformation(),
-                actionType = DateTimeActionType.DATE,
-                onValueChanged = { dateTimenoInput = it ?: TextFieldValue() },
-                allowsManualInput = false,
-            ),
-        )
-        SubTitle("24 hour format Time Input")
-
-        InputDateTime(
-            InputDateTimeModel(
-
-                title = "Label",
-                inputTextFieldValue = hour24time,
-                visualTransformation = TimeTransformation(),
-                actionType = DateTimeActionType.TIME,
-                onValueChanged = { hour24time = it ?: TextFieldValue() },
-                is24hourFormat = true,
-            ),
-
-        )
-
-        SubTitle("12 hour format Time Input")
-        InputDateTime(
-            InputDateTimeModel(
-
-                title = "Label",
-                inputTextFieldValue = time,
-                visualTransformation = TimeTransformation(),
-                actionType = DateTimeActionType.TIME,
-                onValueChanged = { time = it ?: TextFieldValue() },
-
-            ),
-
-        )
-
-        SubTitle("Date-Time Input")
-
-        InputDateTime(
-            InputDateTimeModel(
-
-                title = "Label",
-                inputTextFieldValue = dateTime,
-                visualTransformation = DateTimeTransformation(),
-                actionType = DateTimeActionType.DATE_TIME,
-                onValueChanged = { dateTime = it ?: TextFieldValue() },
-            ),
-        )
-
-        SubTitle("Date-Time Input 24 hour ")
-
-        InputDateTime(
-            InputDateTimeModel(
-
-                title = "Label",
-                inputTextFieldValue = dateTime24hour,
-                visualTransformation = DateTimeTransformation(),
-                actionType = DateTimeActionType.DATE_TIME,
-                onValueChanged = { dateTime24hour = it ?: TextFieldValue() },
-                is24hourFormat = true,
-            ),
-        )
-
-        SubTitle("Disabled")
-
-        InputDateTime(
-            InputDateTimeModel(
-
-                title = "Label",
-                inputTextFieldValue = TextFieldValue(),
-                state = InputShellState.DISABLED,
-                onValueChanged = {
-                    // no-op
-                },
-
-            ),
-        )
-        SubTitle("Error")
-
-        InputDateTime(
-            InputDateTimeModel(
-                title = "Label",
-                inputTextFieldValue = TextFieldValue(),
-                isRequired = true,
-                state = InputShellState.ERROR,
-                onValueChanged = {
-                    // no-op
-                },
-            ),
-        )
+        ColumnComponentContainer("Date Input (allowed dates from 01/09/2024 to 12/12/2024)") {
+            InputDateTime(
+                InputDateTimeModel(
+                    title = "Label",
+                    inputTextFieldValue = date,
+                    visualTransformation = DateTransformation(),
+                    actionType = DateTimeActionType.DATE,
+                    onValueChanged = { date = it ?: TextFieldValue() },
+                    selectableDates = SelectableDates("01092024", "12122024"),
+                ),
+            )
+        }
+
+        ColumnComponentContainer("Time Input") {
+            InputDateTime(
+                InputDateTimeModel(
+                    title = "Label",
+                    inputTextFieldValue = dateTimenoInput,
+                    visualTransformation = DateTransformation(),
+                    actionType = DateTimeActionType.DATE,
+                    onValueChanged = { dateTimenoInput = it ?: TextFieldValue() },
+                    allowsManualInput = false,
+                ),
+            )
+        }
+
+        ColumnComponentContainer("24 hour format Time Input") {
+            InputDateTime(
+                InputDateTimeModel(
+
+                    title = "Label",
+                    inputTextFieldValue = hour24time,
+                    visualTransformation = TimeTransformation(),
+                    actionType = DateTimeActionType.TIME,
+                    onValueChanged = { hour24time = it ?: TextFieldValue() },
+                    is24hourFormat = true,
+                ),
+            )
+        }
+
+        ColumnComponentContainer("12 hour format Time Input") {
+            InputDateTime(
+                InputDateTimeModel(
+                    title = "Label",
+                    inputTextFieldValue = time,
+                    visualTransformation = TimeTransformation(),
+                    actionType = DateTimeActionType.TIME,
+                    onValueChanged = { time = it ?: TextFieldValue() },
+                ),
+            )
+        }
+
+        ColumnComponentContainer("Date-Time Input") {
+            InputDateTime(
+                InputDateTimeModel(
+                    title = "Label",
+                    inputTextFieldValue = dateTime,
+                    visualTransformation = DateTimeTransformation(),
+                    actionType = DateTimeActionType.DATE_TIME,
+                    onValueChanged = { dateTime = it ?: TextFieldValue() },
+                ),
+            )
+        }
+
+        ColumnComponentContainer("Date-Time Input 24 hour ") {
+            InputDateTime(
+                InputDateTimeModel(
+                    title = "Label",
+                    inputTextFieldValue = dateTime24hour,
+                    visualTransformation = DateTimeTransformation(),
+                    actionType = DateTimeActionType.DATE_TIME,
+                    onValueChanged = { dateTime24hour = it ?: TextFieldValue() },
+                    is24hourFormat = true,
+                ),
+            )
+        }
+
+        ColumnComponentContainer("Disabled") {
+            InputDateTime(
+                InputDateTimeModel(
+                    title = "Label",
+                    inputTextFieldValue = TextFieldValue(),
+                    state = InputShellState.DISABLED,
+                    onValueChanged = {
+                        // no-op
+                    },
+                ),
+            )
+        }
+
+        ColumnComponentContainer("Error") {
+            InputDateTime(
+                InputDateTimeModel(
+                    title = "Label",
+                    inputTextFieldValue = TextFieldValue(),
+                    isRequired = true,
+                    state = InputShellState.ERROR,
+                    onValueChanged = {
+                        // no-op
+                    },
+                ),
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputEmailScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputEmailScreen.kt
index 9bd652228..93ab27ca6 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputEmailScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputEmailScreen.kt
@@ -1,101 +1,95 @@
 package org.hisp.dhis.common.screens.actionInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputEmail
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputEmailScreen() {
-    ColumnComponentContainer {
-        Title("Input Email component", textColor = TextColor.OnSurfaceVariant)
-        SubTitle("Basic Email ", textColor = TextColor.OnSurfaceVariant)
-        var inputText1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
+    ColumnScreenContainer(ActionInputs.INPUT_EMAIL.label) {
+        ColumnComponentContainer("Basic Email ") {
+            var inputText1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
 
-        InputEmail(
-            title = "Label",
-            supportingText = listOf(SupportingTextData("Example: name@example.com")),
-            inputTextFieldValue = inputText1,
-            onValueChanged = {
-                inputText1 = it ?: TextFieldValue()
-            },
-            onEmailActionCLicked = {},
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        SubTitle("Basic Email with content ", textColor = TextColor.OnSurfaceVariant)
-        var inputText2 by rememberSaveable(stateSaver = TextFieldValue.Saver) {
-            mutableStateOf(
-                TextFieldValue("fatiman92@gmail.com"),
+            InputEmail(
+                title = "Label",
+                supportingText = listOf(SupportingTextData("Example: name@example.com")),
+                inputTextFieldValue = inputText1,
+                onValueChanged = {
+                    inputText1 = it ?: TextFieldValue()
+                },
+                onEmailActionCLicked = {},
+                state = InputShellState.UNFOCUSED,
             )
         }
 
-        InputEmail(
-            title = "Label",
-            supportingText = listOf(SupportingTextData("Example: name@example.com")),
-            inputTextFieldValue = inputText2,
-            onValueChanged = {
-                inputText2 = it ?: TextFieldValue()
-            },
-            onEmailActionCLicked = {},
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Basic Email with content ") {
+            var inputText2 by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+                mutableStateOf(
+                    TextFieldValue("fatiman92@gmail.com"),
+                )
+            }
 
-        SubTitle("Error Email with content ", textColor = TextColor.OnSurfaceVariant)
-        var inputText3 by rememberSaveable(stateSaver = TextFieldValue.Saver) {
-            mutableStateOf(
-                TextFieldValue("fatiman92@gmail.com"),
+            InputEmail(
+                title = "Label",
+                supportingText = listOf(SupportingTextData("Example: name@example.com")),
+                inputTextFieldValue = inputText2,
+                onValueChanged = {
+                    inputText2 = it ?: TextFieldValue()
+                },
+                onEmailActionCLicked = {},
+                state = InputShellState.UNFOCUSED,
             )
         }
 
-        InputEmail(
-            title = "Label",
-            state = InputShellState.ERROR,
-            supportingText = listOf(SupportingTextData("Enter a valid email address", SupportingTextState.ERROR)),
-            inputTextFieldValue = inputText3,
-            onValueChanged = {
-                inputText3 = it ?: TextFieldValue()
-            },
-            onEmailActionCLicked = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Error Email with content ") {
+            var inputText3 by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+                mutableStateOf(
+                    TextFieldValue("fatiman92@gmail.com"),
+                )
+            }
 
-        SubTitle("Error Email required field ", textColor = TextColor.OnSurfaceVariant)
-        var inputText4 by rememberSaveable(stateSaver = TextFieldValue.Saver) {
-            mutableStateOf(
-                TextFieldValue(),
+            InputEmail(
+                title = "Label",
+                state = InputShellState.ERROR,
+                supportingText = listOf(SupportingTextData("Enter a valid email address", SupportingTextState.ERROR)),
+                inputTextFieldValue = inputText3,
+                onValueChanged = {
+                    inputText3 = it ?: TextFieldValue()
+                },
+                onEmailActionCLicked = {},
             )
         }
-        InputEmail(
-            title = "Label",
-            state = InputShellState.ERROR,
-            supportingText = listOf(SupportingTextData("Enter email address", SupportingTextState.ERROR)),
-            inputTextFieldValue = inputText4,
-            isRequiredField = true,
-            onValueChanged = {
-                inputText4 = it ?: TextFieldValue()
-            },
-            onEmailActionCLicked = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
 
-        SubTitle("Disabled Email with content ", textColor = TextColor.OnSurfaceVariant)
+        ColumnComponentContainer("Error Email required field ") {
+            var inputText4 by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+                mutableStateOf(
+                    TextFieldValue(),
+                )
+            }
+            InputEmail(
+                title = "Label",
+                state = InputShellState.ERROR,
+                supportingText = listOf(SupportingTextData("Enter email address", SupportingTextState.ERROR)),
+                inputTextFieldValue = inputText4,
+                isRequiredField = true,
+                onValueChanged = {
+                    inputText4 = it ?: TextFieldValue()
+                },
+                onEmailActionCLicked = {},
+            )
+        }
+    }
+
+    ColumnComponentContainer("Disabled Email with content ") {
         var inputText5 by rememberSaveable(stateSaver = TextFieldValue.Saver) {
             mutableStateOf(
                 TextFieldValue("fatiman92@gmail.com"),
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputFileResourceScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputFileResourceScreen.kt
index 4b575f1f2..1166a9274 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputFileResourceScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputFileResourceScreen.kt
@@ -6,6 +6,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputFileResource
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.UploadFileState
@@ -13,9 +14,7 @@ import org.hisp.dhis.mobile.ui.designsystem.resource.provideStringResource
 
 @Composable
 fun InputFileResourceScreen() {
-    ColumnComponentContainer(
-        title = "Input File Component",
-    ) {
+    ColumnScreenContainer(title = ActionInputs.INPUT_FILE_RESOURCE.label) {
         var currentFileName = "filename.extension"
         var currentFileWeight = "524kb"
         val currentFileName2 = "filename.extension"
@@ -23,74 +22,77 @@ fun InputFileResourceScreen() {
 
         var inputFileResourceState by remember { mutableStateOf(UploadFileState.ADD) }
 
-        InputFileResource(
-            title = "Label",
-            buttonText = provideStringResource("add_file"),
-            fileName = currentFileName,
-            fileWeight = currentFileWeight,
-            uploadFileState = inputFileResourceState,
-            onSelectFile = {
-                inputFileResourceState = UploadFileState.LOADED
-            },
-            onUploadFile = {},
-            onClear = {
-                inputFileResourceState = UploadFileState.ADD
-            },
-        )
-        InputFileResource(
-            title = "Label",
-            buttonText = provideStringResource("add_file"),
-            fileName = currentFileName,
-            fileWeight = currentFileWeight,
-            onSelectFile = {
-                currentFileName = "file"
-                currentFileWeight = "weight"
-            },
-            onUploadFile = {},
-        )
-        InputFileResource(
-            title = "Label",
-            buttonText = provideStringResource("add_file"),
-            fileName = currentFileName,
-            fileWeight = currentFileWeight,
-            uploadFileState = UploadFileState.UPLOADING,
-            inputShellState = InputShellState.FOCUSED,
-            onSelectFile = {},
-            onUploadFile = {},
-        )
-        InputFileResource(
-            title = "Label",
-            buttonText = provideStringResource("add_file"),
-            fileName = currentFileName2,
-            fileWeight = currentFileWeight2,
-            uploadFileState = UploadFileState.LOADED,
-            onSelectFile = {},
-            onUploadFile = {},
-        )
-        InputFileResource(
-            title = "Label",
-            buttonText = provideStringResource("add_file"),
-            fileName = currentFileName,
-            fileWeight = currentFileWeight,
-            inputShellState = InputShellState.DISABLED,
-            onSelectFile = {
-                currentFileName = "file"
-                currentFileWeight = "weight"
-            },
-            onUploadFile = {},
-        )
-        InputFileResource(
-            title = "Label",
-            buttonText = provideStringResource("add_file"),
-            fileName = currentFileName,
-            fileWeight = currentFileWeight,
-            inputShellState = InputShellState.DISABLED,
-            uploadFileState = UploadFileState.LOADED,
-            onSelectFile = {
-                currentFileName = "file"
-                currentFileWeight = "weight"
-            },
-            onUploadFile = {},
-        )
+        ColumnComponentContainer("Default state") {
+            InputFileResource(
+                title = "Label",
+                buttonText = provideStringResource("add_file"),
+                fileName = currentFileName,
+                fileWeight = currentFileWeight,
+                uploadFileState = inputFileResourceState,
+                onSelectFile = {
+                    inputFileResourceState = UploadFileState.LOADED
+                },
+                onUploadFile = {},
+                onClear = {
+                    inputFileResourceState = UploadFileState.ADD
+                },
+            )
+        }
+
+        ColumnComponentContainer("Selected state") {
+            InputFileResource(
+                title = "Label",
+                buttonText = provideStringResource("add_file"),
+                fileName = currentFileName2,
+                fileWeight = currentFileWeight2,
+                uploadFileState = UploadFileState.LOADED,
+                onSelectFile = {},
+                onUploadFile = {},
+            )
+        }
+
+        ColumnComponentContainer("Loading state") {
+            InputFileResource(
+                title = "Label",
+                buttonText = provideStringResource("add_file"),
+                fileName = currentFileName,
+                fileWeight = currentFileWeight,
+                uploadFileState = UploadFileState.UPLOADING,
+                inputShellState = InputShellState.FOCUSED,
+                onSelectFile = {},
+                onUploadFile = {},
+            )
+        }
+
+        ColumnComponentContainer("Disabled state") {
+            InputFileResource(
+                title = "Label",
+                buttonText = provideStringResource("add_file"),
+                fileName = currentFileName,
+                fileWeight = currentFileWeight,
+                inputShellState = InputShellState.DISABLED,
+                onSelectFile = {
+                    currentFileName = "file"
+                    currentFileWeight = "weight"
+                },
+                onUploadFile = {},
+            )
+        }
+
+        ColumnComponentContainer("Disabled state with selected file") {
+            InputFileResource(
+                title = "Label",
+                buttonText = provideStringResource("add_file"),
+                fileName = currentFileName,
+                fileWeight = currentFileWeight,
+                inputShellState = InputShellState.DISABLED,
+                uploadFileState = UploadFileState.LOADED,
+                onSelectFile = {
+                    currentFileName = "file"
+                    currentFileWeight = "weight"
+                },
+                onUploadFile = {},
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputImageScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputImageScreen.kt
index 52526cd5f..1b47bc264 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputImageScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputImageScreen.kt
@@ -1,97 +1,90 @@
 package org.hisp.dhis.common.screens.actionInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.painter.Painter
 import mobile_ui.common.generated.resources.Res
 import mobile_ui.common.generated.resources.sample
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.ImageBlock
 import org.hisp.dhis.mobile.ui.designsystem.component.InputImage
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
 import org.hisp.dhis.mobile.ui.designsystem.component.UploadState
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 import org.jetbrains.compose.resources.painterResource
 import java.util.Timer
 import kotlin.concurrent.schedule
 
 @Composable
 fun InputImageScreen() {
-    ColumnComponentContainer {
-        Title("Input Image", textColor = TextColor.OnSurfaceVariant)
+    ColumnScreenContainer(title = ActionInputs.INPUT_IMAGE.label) {
+        ColumnComponentContainer("Basic Input Image ") {
+            var uploadState by rememberSaveable { mutableStateOf(UploadState.ADD) }
+            val sampleImage = provideSampleImage()
 
-        SubTitle("Basic Input Image ", textColor = TextColor.OnSurfaceVariant)
-        var uploadState by rememberSaveable { mutableStateOf(UploadState.ADD) }
-        val sampleImage = provideSampleImage()
+            InputImage(
+                title = "Label",
+                uploadState = uploadState,
+                load = { sampleImage },
+                painterFor = { remember { it } },
+                onDownloadButtonClick = {},
+                onShareButtonClick = {},
+                onResetButtonClicked = {
+                    uploadState = UploadState.ADD
+                },
+                onAddButtonClicked = {
+                    uploadState = UploadState.UPLOADING
+                    Timer().schedule(1000) {
+                        uploadState = UploadState.LOADED
+                    }
+                },
+            )
+        }
 
-        InputImage(
-            title = "Label",
-            uploadState = uploadState,
-            load = { sampleImage },
-            painterFor = { remember { it } },
-            onDownloadButtonClick = {},
-            onShareButtonClick = {},
-            onResetButtonClicked = {
-                uploadState = UploadState.ADD
-            },
-            onAddButtonClicked = {
-                uploadState = UploadState.UPLOADING
-                Timer().schedule(1000) {
-                    uploadState = UploadState.LOADED
-                }
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Disabled Input Image without data ") {
+            val uploadState1 by rememberSaveable { mutableStateOf(UploadState.ADD) }
+            InputImage(
+                title = "Label",
+                state = InputShellState.DISABLED,
+                uploadState = uploadState1,
+                load = { },
+                onDownloadButtonClick = {},
+                onShareButtonClick = {},
+                onResetButtonClicked = {},
+                onAddButtonClicked = {},
+            )
+        }
 
-        SubTitle("Disabled Input Image without data ", textColor = TextColor.OnSurfaceVariant)
-        val uploadState1 by rememberSaveable { mutableStateOf(UploadState.ADD) }
-        InputImage(
-            title = "Label",
-            state = InputShellState.DISABLED,
-            uploadState = uploadState1,
-            load = { },
-            onDownloadButtonClick = {},
-            onShareButtonClick = {},
-            onResetButtonClicked = {},
-            onAddButtonClicked = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Disabled Input Image with data ") {
+            val uploadState2 by rememberSaveable { mutableStateOf(UploadState.LOADED) }
+            val sampleImage2 = provideSampleImage()
+            InputImage(
+                title = "Label",
+                state = InputShellState.DISABLED,
+                uploadState = uploadState2,
+                load = { sampleImage2 },
+                painterFor = { it },
+                onDownloadButtonClick = {},
+                onShareButtonClick = {},
+                onResetButtonClicked = { },
+                onAddButtonClicked = {},
+            )
+        }
 
-        SubTitle("Disabled Input Image with data ", textColor = TextColor.OnSurfaceVariant)
-        val uploadState2 by rememberSaveable { mutableStateOf(UploadState.LOADED) }
-        val sampleImage2 = provideSampleImage()
-        InputImage(
-            title = "Label",
-            state = InputShellState.DISABLED,
-            uploadState = uploadState2,
-            load = { sampleImage2 },
-            painterFor = { it },
-            onDownloadButtonClick = {},
-            onShareButtonClick = {},
-            onResetButtonClicked = { },
-            onAddButtonClicked = {},
-        )
-
-        SubTitle("Image Block", textColor = TextColor.OnSurfaceVariant)
-
-        val sampleImage3 = provideSampleImage()
-        ImageBlock(
-            title = "Label",
-            load = { sampleImage3 },
-            painterFor = { remember { it } },
-            onDownloadButtonClick = {},
-            onShareButtonClick = {},
-        )
+        ColumnComponentContainer("Image Block") {
+            val sampleImage3 = provideSampleImage()
+            ImageBlock(
+                title = "Label",
+                load = { sampleImage3 },
+                painterFor = { remember { it } },
+                onDownloadButtonClick = {},
+                onShareButtonClick = {},
+            )
+        }
     }
 }
 
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputLinkScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputLinkScreen.kt
index bd4b5bd9b..b1e515b85 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputLinkScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputLinkScreen.kt
@@ -1,108 +1,102 @@
 package org.hisp.dhis.common.screens.actionInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputLink
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputLinkScreen() {
-    ColumnComponentContainer {
-        Title("Input Link component", textColor = TextColor.OnSurfaceVariant)
-        SubTitle("Basic Link ", textColor = TextColor.OnSurfaceVariant)
-        var inputText1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+    ColumnScreenContainer(title = ActionInputs.INPUT_LINK.label) {
+        ColumnComponentContainer("Basic Link ") {
+            var inputText1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
 
-        InputLink(
-            title = "Label",
-            supportingText = listOf(SupportingTextData("Example: example.com")),
-            inputTextFieldValue = inputText1,
-            onValueChanged = {
-                if (it != null) {
-                    inputText1 = it
-                }
-            },
-            onLinkActionCLicked = {},
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+            InputLink(
+                title = "Label",
+                supportingText = listOf(SupportingTextData("Example: example.com")),
+                inputTextFieldValue = inputText1,
+                onValueChanged = {
+                    if (it != null) {
+                        inputText1 = it
+                    }
+                },
+                onLinkActionCLicked = {},
+                state = InputShellState.UNFOCUSED,
+            )
+        }
 
-        SubTitle("Basic Link with invalid link ", textColor = TextColor.OnSurfaceVariant)
-        var inputText2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("example.")) }
+        ColumnComponentContainer("Basic Link with invalid link ") {
+            var inputText2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("example.")) }
 
-        InputLink(
-            title = "Label",
-            supportingText = listOf(SupportingTextData("Example: example.com")),
-            inputTextFieldValue = inputText2,
-            onValueChanged = {
-                if (it != null) {
-                    inputText2 = it
-                }
-            },
-            onLinkActionCLicked = {},
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+            InputLink(
+                title = "Label",
+                supportingText = listOf(SupportingTextData("Example: example.com")),
+                inputTextFieldValue = inputText2,
+                onValueChanged = {
+                    if (it != null) {
+                        inputText2 = it
+                    }
+                },
+                onLinkActionCLicked = {},
+                state = InputShellState.UNFOCUSED,
+            )
+        }
 
-        SubTitle("Basic Link with valid link ", textColor = TextColor.OnSurfaceVariant)
-        var inputText3 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue(("example.com"))) }
+        ColumnComponentContainer("Basic Link with valid link ") {
+            var inputText3 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue(("example.com"))) }
 
-        InputLink(
-            title = "Label",
-            supportingText = listOf(SupportingTextData("Example: example.com")),
-            inputTextFieldValue = inputText3,
-            onValueChanged = {
-                if (it != null) {
-                    inputText3 = it
-                }
-            },
-            onLinkActionCLicked = {},
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+            InputLink(
+                title = "Label",
+                supportingText = listOf(SupportingTextData("Example: example.com")),
+                inputTextFieldValue = inputText3,
+                onValueChanged = {
+                    if (it != null) {
+                        inputText3 = it
+                    }
+                },
+                onLinkActionCLicked = {},
+                state = InputShellState.UNFOCUSED,
+            )
+        }
 
-        SubTitle("Error Link required field ", textColor = TextColor.OnSurfaceVariant)
-        var inputText4 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
-        InputLink(
-            title = "Label",
-            state = InputShellState.ERROR,
-            supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)),
-            inputTextFieldValue = inputText4,
-            isRequiredField = true,
-            onValueChanged = {
-                if (it != null) {
-                    inputText4 = it
-                }
-            },
-            onLinkActionCLicked = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Error Link required field ") {
+            var inputText4 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputLink(
+                title = "Label",
+                state = InputShellState.ERROR,
+                supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)),
+                inputTextFieldValue = inputText4,
+                isRequiredField = true,
+                onValueChanged = {
+                    if (it != null) {
+                        inputText4 = it
+                    }
+                },
+                onLinkActionCLicked = {},
+            )
+        }
 
-        SubTitle("Disabled Link with content ", textColor = TextColor.OnSurfaceVariant)
-        var inputText5 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("example.com")) }
-        InputLink(
-            title = "Label",
-            state = InputShellState.DISABLED,
-            inputTextFieldValue = inputText5,
-            onValueChanged = {
-                if (it != null) {
-                    inputText5 = it
-                }
-            },
-            onLinkActionCLicked = {},
-        )
+        ColumnComponentContainer("Disabled Link with content ") {
+            var inputText5 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("example.com")) }
+            InputLink(
+                title = "Label",
+                state = InputShellState.DISABLED,
+                inputTextFieldValue = inputText5,
+                onValueChanged = {
+                    if (it != null) {
+                        inputText5 = it
+                    }
+                },
+                onLinkActionCLicked = {},
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputOrgUnitScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputOrgUnitScreen.kt
index 176cdc23c..22a2d7f48 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputOrgUnitScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputOrgUnitScreen.kt
@@ -1,87 +1,81 @@
 package org.hisp.dhis.common.screens.actionInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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 org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputOrgUnit
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputOrgUnitScreen() {
-    ColumnComponentContainer {
-        Title("Input Org. unit component", textColor = TextColor.OnSurfaceVariant)
-        SubTitle("Basic Org. unit ", textColor = TextColor.OnSurfaceVariant)
-        var inputText1 by rememberSaveable { mutableStateOf("") }
+    ColumnScreenContainer(title = ActionInputs.INPUT_ORG_UNIT.label) {
+        ColumnComponentContainer("Basic Org. unit ") {
+            var inputText1 by rememberSaveable { mutableStateOf("") }
 
-        InputOrgUnit(
-            title = "Label",
-            inputText = inputText1,
-            onValueChanged = {
-                if (it != null) {
-                    inputText1 = it
-                }
-            },
-            onOrgUnitActionCLicked = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+            InputOrgUnit(
+                title = "Label",
+                inputText = inputText1,
+                onValueChanged = {
+                    if (it != null) {
+                        inputText1 = it
+                    }
+                },
+                onOrgUnitActionCLicked = {},
+            )
+        }
 
-        SubTitle("Basic Org. unit with content ", textColor = TextColor.OnSurfaceVariant)
-        var inputText2 by rememberSaveable { mutableStateOf("PHC Fakename") }
+        ColumnComponentContainer("Basic Org. unit with content ") {
+            var inputText2 by rememberSaveable { mutableStateOf("PHC Fakename") }
 
-        InputOrgUnit(
-            title = "Label",
-            inputText = inputText2,
-            onValueChanged = {
-                if (it != null) {
-                    inputText2 = it
-                }
-            },
-            onOrgUnitActionCLicked = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+            InputOrgUnit(
+                title = "Label",
+                inputText = inputText2,
+                onValueChanged = {
+                    if (it != null) {
+                        inputText2 = it
+                    }
+                },
+                onOrgUnitActionCLicked = {},
+            )
+        }
 
-        SubTitle("Error Org. unit required field ", textColor = TextColor.OnSurfaceVariant)
-        var inputText3 by rememberSaveable { mutableStateOf("") }
+        ColumnComponentContainer("Error Org. unit required field ") {
+            var inputText3 by rememberSaveable { mutableStateOf("") }
 
-        InputOrgUnit(
-            title = "Label",
-            state = InputShellState.ERROR,
-            supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)),
-            inputText = inputText3,
-            isRequiredField = true,
-            onValueChanged = {
-                if (it != null) {
-                    inputText3 = it
-                }
-            },
-            onOrgUnitActionCLicked = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+            InputOrgUnit(
+                title = "Label",
+                state = InputShellState.ERROR,
+                supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)),
+                inputText = inputText3,
+                isRequiredField = true,
+                onValueChanged = {
+                    if (it != null) {
+                        inputText3 = it
+                    }
+                },
+                onOrgUnitActionCLicked = {},
+            )
+        }
 
-        SubTitle("Disabled Org. unit with content ", textColor = TextColor.OnSurfaceVariant)
-        var inputText5 by rememberSaveable { mutableStateOf("PHC Fakename") }
-        InputOrgUnit(
-            title = "Label",
-            state = InputShellState.DISABLED,
-            inputText = inputText5,
-            onValueChanged = {
-                if (it != null) {
-                    inputText5 = it
-                }
-            },
-            onOrgUnitActionCLicked = {},
-        )
+        ColumnComponentContainer("Disabled Org. unit with content ") {
+            var inputText5 by rememberSaveable { mutableStateOf("PHC Fakename") }
+            InputOrgUnit(
+                title = "Label",
+                state = InputShellState.DISABLED,
+                inputText = inputText5,
+                onValueChanged = {
+                    if (it != null) {
+                        inputText5 = it
+                    }
+                },
+                onOrgUnitActionCLicked = {},
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPhoneNumberScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPhoneNumberScreen.kt
index 095438ff5..c2ad46edb 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPhoneNumberScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPhoneNumberScreen.kt
@@ -1,97 +1,92 @@
 package org.hisp.dhis.common.screens.actionInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
-import org.hisp.dhis.mobile.ui.designsystem.component.Description
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputPhoneNumber
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputPhoneNumberScreen() {
-    ColumnComponentContainer(
-        title = "Input Phone Number",
+    ColumnScreenContainer(
+        title = ActionInputs.INPUT_PHONE_NUMBER.label,
     ) {
         var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
-        Description("Default Input Phone Number", textColor = TextColor.OnSurfaceVariant)
-        InputPhoneNumber(
-            title = "Label",
-            inputTextFieldValue = inputValue1,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue1 = it
-                }
-            },
-            onCallActionClicked = {
-                // no-op
-            },
-            onFocusChanged = {},
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Default Input Phone Number") {
+            InputPhoneNumber(
+                title = "Label",
+                inputTextFieldValue = inputValue1,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue1 = it
+                    }
+                },
+                onCallActionClicked = {
+                    // no-op
+                },
+                onFocusChanged = {},
+                state = InputShellState.UNFOCUSED,
+            )
+        }
 
         var inputValue2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
-        Description("Disabled Input Phone Number Without Phone Number", textColor = TextColor.OnSurfaceVariant)
-        InputPhoneNumber(
-            title = "Label",
-            inputTextFieldValue = inputValue2,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue2 = it
-                }
-            },
-            onCallActionClicked = {
-                // no-op
-            },
-            onFocusChanged = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Disabled Input Phone Number Without Phone Number") {
+            InputPhoneNumber(
+                title = "Label",
+                inputTextFieldValue = inputValue2,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue2 = it
+                    }
+                },
+                onCallActionClicked = {
+                    // no-op
+                },
+                onFocusChanged = {},
+            )
+        }
 
         var inputValue3 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1111111")) }
-        Description("Disabled Input Phone Number With Phone Number", textColor = TextColor.OnSurfaceVariant)
-        InputPhoneNumber(
-            title = "Label",
-            inputTextFieldValue = inputValue3,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue3 = it
-                }
-            },
-            onCallActionClicked = {
-                // no-op
-            },
-            onFocusChanged = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Disabled Input Phone Number With Phone Number") {
+            InputPhoneNumber(
+                title = "Label",
+                inputTextFieldValue = inputValue3,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue3 = it
+                    }
+                },
+                onCallActionClicked = {
+                    // no-op
+                },
+                onFocusChanged = {},
+            )
+        }
 
         var inputValue4 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
-        Description("Error Input Phone Number", textColor = TextColor.OnSurfaceVariant)
-        InputPhoneNumber(
-            title = "Label",
-            inputTextFieldValue = inputValue4,
-            state = InputShellState.ERROR,
-            isRequiredField = true,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue4 = it
-                }
-            },
-            onCallActionClicked = {
-                // no-op
-            },
-            onFocusChanged = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Error Input Phone Number") {
+            InputPhoneNumber(
+                title = "Label",
+                inputTextFieldValue = inputValue4,
+                state = InputShellState.ERROR,
+                isRequiredField = true,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue4 = it
+                    }
+                },
+                onCallActionClicked = {
+                    // no-op
+                },
+                onFocusChanged = {},
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPolygonScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPolygonScreen.kt
index 87df4bd4d..cb44a65a1 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPolygonScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputPolygonScreen.kt
@@ -1,67 +1,60 @@
 package org.hisp.dhis.common.screens.actionInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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 org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputPolygon
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputPolygonScreen() {
-    ColumnComponentContainer {
-        Title("Input Polygon", textColor = TextColor.OnSurfaceVariant)
+    ColumnScreenContainer(title = ActionInputs.INPUT_POLYGON.label) {
+        ColumnComponentContainer("Basic Input Polygon ") {
+            var polygonCaptured by rememberSaveable { mutableStateOf(false) }
+            InputPolygon(
+                title = "Label",
+                polygonAdded = polygonCaptured,
+                onResetButtonClicked = {
+                    polygonCaptured = false
+                },
+                onUpdateButtonClicked = {
+                    polygonCaptured = true
+                },
+            )
+        }
 
-        SubTitle("Basic Input Polygon ", textColor = TextColor.OnSurfaceVariant)
-        var polygonCaptured by rememberSaveable { mutableStateOf(false) }
-        InputPolygon(
-            title = "Label",
-            polygonAdded = polygonCaptured,
-            onResetButtonClicked = {
-                polygonCaptured = false
-            },
-            onUpdateButtonClicked = {
-                polygonCaptured = true
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Disabled Input Polygon without data ") {
+            var polygonCaptured1 by rememberSaveable { mutableStateOf(false) }
+            InputPolygon(
+                title = "Label",
+                state = InputShellState.DISABLED,
+                polygonAdded = polygonCaptured1,
+                onResetButtonClicked = {
+                    polygonCaptured1 = false
+                },
+                onUpdateButtonClicked = {
+                    polygonCaptured1 = true
+                },
+            )
+        }
 
-        SubTitle("Disabled Input Polygon without data ", textColor = TextColor.OnSurfaceVariant)
-        var polygonCaptured1 by rememberSaveable { mutableStateOf(false) }
-        InputPolygon(
-            title = "Label",
-            state = InputShellState.DISABLED,
-            polygonAdded = polygonCaptured1,
-            onResetButtonClicked = {
-                polygonCaptured1 = false
-            },
-            onUpdateButtonClicked = {
-                polygonCaptured1 = true
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        SubTitle("Disabled Input Polygon with data ", textColor = TextColor.OnSurfaceVariant)
-        var polygonCaptured2 by rememberSaveable { mutableStateOf(true) }
-        InputPolygon(
-            title = "Label",
-            state = InputShellState.DISABLED,
-            polygonAdded = polygonCaptured2,
-            onResetButtonClicked = {
-                polygonCaptured2 = false
-            },
-            onUpdateButtonClicked = {
-                polygonCaptured2 = true
-            },
-        )
+        ColumnComponentContainer("Disabled Input Polygon with data ") {
+            var polygonCaptured2 by rememberSaveable { mutableStateOf(true) }
+            InputPolygon(
+                title = "Label",
+                state = InputShellState.DISABLED,
+                polygonAdded = polygonCaptured2,
+                onResetButtonClicked = {
+                    polygonCaptured2 = false
+                },
+                onUpdateButtonClicked = {
+                    polygonCaptured2 = true
+                },
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputQRCodeScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputQRCodeScreen.kt
index c6fb15ec9..5e45c6199 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputQRCodeScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputQRCodeScreen.kt
@@ -2,8 +2,6 @@ package org.hisp.dhis.common.screens.actionInputs
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Info
 import androidx.compose.material3.Icon
@@ -19,39 +17,21 @@ import org.hisp.dhis.common.screens.previews.threeButtonCarousel
 import org.hisp.dhis.mobile.ui.designsystem.component.BottomSheetShell
 import org.hisp.dhis.mobile.ui.designsystem.component.ButtonCarousel
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
-import org.hisp.dhis.mobile.ui.designsystem.component.Description
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputQRCode
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.QrCodeBlock
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
 import org.hisp.dhis.mobile.ui.designsystem.resource.provideStringResource
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputQRCodeScreen() {
-    ColumnComponentContainer {
+    ColumnScreenContainer(title = ActionInputs.INPUT_QR_CODE.label) {
         var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("889026a1-d01e-4d34-8209-81e8ed5c614b")) }
         var showEnabledQRBottomSheet by rememberSaveable { mutableStateOf(false) }
 
-        Description("Default Input QR code", textColor = TextColor.OnSurfaceVariant)
-        InputQRCode(
-            "label",
-            state = InputShellState.UNFOCUSED,
-            onQRButtonClicked = {
-                showEnabledQRBottomSheet = !showEnabledQRBottomSheet
-            },
-            inputTextFieldValue = inputValue1,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue1 = it
-                }
-            },
-
-        )
-
         if (showEnabledQRBottomSheet) {
             BottomSheetShell(
                 modifier = Modifier.testTag("LEGEND_BOTTOM_SHEET"),
@@ -78,38 +58,54 @@ fun InputQRCodeScreen() {
             }
         }
 
+        ColumnComponentContainer("Default Input QR code") {
+            InputQRCode(
+                "label",
+                state = InputShellState.UNFOCUSED,
+                onQRButtonClicked = {
+                    showEnabledQRBottomSheet = !showEnabledQRBottomSheet
+                },
+                inputTextFieldValue = inputValue1,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue1 = it
+                    }
+                },
+            )
+        }
+
         var inputValue2 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
-        Description("Required field Input QR code", textColor = TextColor.OnSurfaceVariant)
-        InputQRCode(
-            "label",
-            state = InputShellState.ERROR,
-            onQRButtonClicked = {
-            },
-            inputTextFieldValue = inputValue2,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue2 = it
-                }
-            },
-            isRequiredField = true,
-            supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)),
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Required field Input QR code") {
+            InputQRCode(
+                "label",
+                state = InputShellState.ERROR,
+                onQRButtonClicked = {
+                },
+                inputTextFieldValue = inputValue2,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue2 = it
+                    }
+                },
+                isRequiredField = true,
+                supportingText = listOf(SupportingTextData("Required", SupportingTextState.ERROR)),
+            )
+        }
 
-        Spacer(Modifier.size(Spacing.Spacing18))
         var inputValue by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
-        Description("Disabled Input QR code", textColor = TextColor.OnSurfaceVariant)
-        InputQRCode(
-            "label",
-            state = InputShellState.DISABLED,
-            onQRButtonClicked = {
-            },
-            inputTextFieldValue = inputValue,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue = it
-                }
-            },
-        )
+        ColumnComponentContainer("Disabled Input QR code") {
+            InputQRCode(
+                "label",
+                state = InputShellState.DISABLED,
+                onQRButtonClicked = {
+                },
+                inputTextFieldValue = inputValue,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue = it
+                    }
+                },
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputSignatureScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputSignatureScreen.kt
index 01fd0c9e4..bb4737215 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputSignatureScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/InputSignatureScreen.kt
@@ -1,94 +1,87 @@
 package org.hisp.dhis.common.screens.actionInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.painter.BitmapPainter
 import androidx.compose.ui.graphics.painter.Painter
 import mobile_ui.common.generated.resources.Res
 import mobile_ui.common.generated.resources.sample_signature
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.InputSignature
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 import org.jetbrains.compose.resources.painterResource
 
 @Composable
 fun InputSignatureScreen() {
-    ColumnComponentContainer {
-        Title("Input Signature", textColor = TextColor.OnSurfaceVariant)
+    ColumnScreenContainer(title = ActionInputs.INPUT_SIGNATURE.label) {
+        ColumnComponentContainer("Basic Input Signature ") {
+            var sampleSignature0 by rememberSaveable { mutableStateOf<ImageBitmap?>(null) }
 
-        SubTitle("Basic Input Signature ", textColor = TextColor.OnSurfaceVariant)
-        var sampleSignature0 by rememberSaveable { mutableStateOf<ImageBitmap?>(null) }
+            InputSignature(
+                title = "Label",
+                load = { sampleSignature0 },
+                painterFor = sampleSignature0?.let { imageBitmap ->
+                    {
+                        BitmapPainter(imageBitmap)
+                    }
+                },
+                onDownloadButtonClick = {},
+                onShareButtonClick = {},
+                onResetButtonClicked = {
+                    sampleSignature0 = null
+                },
+                onSaveSignature = {
+                    sampleSignature0 = it
+                },
+            )
+        }
 
-        InputSignature(
-            title = "Label",
-            load = { sampleSignature0 },
-            painterFor = sampleSignature0?.let { imageBitmap ->
-                {
-                    BitmapPainter(imageBitmap)
-                }
-            },
-            onDownloadButtonClick = {},
-            onShareButtonClick = {},
-            onResetButtonClicked = {
-                sampleSignature0 = null
-            },
-            onSaveSignature = {
-                sampleSignature0 = it
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Basic Input Signature ") {
+            val sampleSignature = provideSampleImage()
 
-        SubTitle("Basic Input Signature ", textColor = TextColor.OnSurfaceVariant)
-        val sampleSignature = provideSampleImage()
+            InputSignature(
+                title = "Label",
+                load = { sampleSignature },
+                painterFor = { remember { it } },
+                onDownloadButtonClick = {},
+                onShareButtonClick = {},
+                onResetButtonClicked = {
+                },
+                onSaveSignature = {},
+            )
+        }
 
-        InputSignature(
-            title = "Label",
-            load = { sampleSignature },
-            painterFor = { remember { it } },
-            onDownloadButtonClick = {},
-            onShareButtonClick = {},
-            onResetButtonClicked = {
-            },
-            onSaveSignature = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Disabled Input Signature without data ") {
+            InputSignature(
+                title = "Label",
+                state = InputShellState.DISABLED,
+                load = { },
+                onDownloadButtonClick = {},
+                onShareButtonClick = {},
+                onResetButtonClicked = {},
+                onSaveSignature = {},
+            )
+        }
 
-        SubTitle("Disabled Input Signature without data ", textColor = TextColor.OnSurfaceVariant)
-        InputSignature(
-            title = "Label",
-            state = InputShellState.DISABLED,
-            load = { },
-            onDownloadButtonClick = {},
-            onShareButtonClick = {},
-            onResetButtonClicked = {},
-            onSaveSignature = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        SubTitle("Disabled Input Signature with data ", textColor = TextColor.OnSurfaceVariant)
-        val sampleSignature2 = provideSampleImage()
-        InputSignature(
-            title = "Label",
-            state = InputShellState.DISABLED,
-            load = { sampleSignature2 },
-            painterFor = { it },
-            onDownloadButtonClick = {},
-            onShareButtonClick = {},
-            onResetButtonClicked = { },
-            onSaveSignature = {},
-        )
+        ColumnComponentContainer("Disabled Input Signature with data ") {
+            val sampleSignature2 = provideSampleImage()
+            InputSignature(
+                title = "Label",
+                state = InputShellState.DISABLED,
+                load = { sampleSignature2 },
+                painterFor = { it },
+                onDownloadButtonClick = {},
+                onShareButtonClick = {},
+                onResetButtonClicked = { },
+                onSaveSignature = {},
+            )
+        }
     }
 }
 
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/LoginScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/LoginScreen.kt
index 7d327fdff..fec941326 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/LoginScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/actionInputs/LoginScreen.kt
@@ -13,7 +13,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.Button
 import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputPassword
 import org.hisp.dhis.mobile.ui.designsystem.component.InputQRCode
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
@@ -23,7 +23,7 @@ import org.hisp.dhis.mobile.ui.designsystem.component.model.InputUserModel
 
 @Composable
 fun LoginScreen() {
-    ColumnComponentContainer(title = "Login") {
+    ColumnScreenContainer(title = ActionInputs.LOGIN.label) {
         var server by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("https://play.dhis2.org/40")) }
         var userName by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("android")) }
         var password by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("password")) }
@@ -60,12 +60,10 @@ fun LoginScreen() {
                 Icon(
                     imageVector = Icons.AutoMirrored.Outlined.Login,
                     contentDescription = "Login button",
-
                 )
             },
             modifier = Modifier.fillMaxWidth(),
             enabled = (password.text.isNotEmpty() && userName.text.isNotEmpty() && server.text.isNotEmpty()),
-
         )
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/BasicTextInputsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/BasicTextInputsScreen.kt
index 3c10e11be..a7585e27e 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/BasicTextInputsScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/BasicTextInputsScreen.kt
@@ -4,13 +4,12 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import org.hisp.dhis.common.screens.NoComponentSelectedScreen
+import org.hisp.dhis.common.screens.components.GroupComponentDropDown
 import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem
-import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown
-import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 
 @Composable
 fun BasicTextInputsScreen() {
-    val currentScreen = remember { mutableStateOf(BasicTextInputs.INPUT_TEXT) }
+    val currentScreen = remember { mutableStateOf(BasicTextInputs.NO_COMPONENT_SELECTED) }
 
     val screenDropdownItemList = mutableListOf<DropdownItem>()
     BasicTextInputs.entries.forEach {
@@ -18,13 +17,11 @@ fun BasicTextInputsScreen() {
             screenDropdownItemList.add(DropdownItem(it.label))
         }
     }
-    InputDropDown(
-        "Display",
+    GroupComponentDropDown(
         dropdownItems = screenDropdownItemList.toList(),
         onItemSelected = { currentScreen.value = getCurrentScreen(it.label) },
         onResetButtonClicked = { currentScreen.value = BasicTextInputs.NO_COMPONENT_SELECTED },
         selectedItem = DropdownItem(currentScreen.value.label),
-        state = InputShellState.UNFOCUSED,
     )
     when (currentScreen.value) {
         BasicTextInputs.FORM_SHELLS -> FormShellsScreen()
@@ -45,19 +42,19 @@ fun BasicTextInputsScreen() {
 }
 
 enum class BasicTextInputs(val label: String) {
-    FORM_SHELLS("Form Shells"),
-    INPUT_INTEGER("Input Integer"),
-    INPUT_LETTER("Input Letter"),
-    INPUT_LONG_TEXT("Input Long Text"),
-    INPUT_NEGATIVE_INTEGER("Input Negative Integer"),
-    INPUT_NOT_SUPPORTED("Input Not Supported"),
-    INPUT_NUMBER("Input Number"),
-    INPUT_PERCENTAGE("Input Percentage"),
-    INPUT_POSITIVE_INTEGER("Input Positive Integer"),
-    INPUT_POSITIVE_INTEGER_OR_ZERO("Input Positive Integer Or Zero"),
-    INPUT_TEXT("Input Text"),
-    INPUT_UNIT_INTERVAL("Input Unit Interval"),
-    SUPPORTING_TEXT("Supporting text"),
+    FORM_SHELLS("Form Shells component"),
+    INPUT_INTEGER("Input Integer component"),
+    INPUT_LETTER("Input Letter component"),
+    INPUT_LONG_TEXT("Input Long Text component"),
+    INPUT_NEGATIVE_INTEGER("Input Negative Integer component"),
+    INPUT_NOT_SUPPORTED("Input Not Supported component"),
+    INPUT_NUMBER("Input Number component"),
+    INPUT_PERCENTAGE("Input Percentage component"),
+    INPUT_POSITIVE_INTEGER("Input Positive Integer component"),
+    INPUT_POSITIVE_INTEGER_OR_ZERO("Input Positive or Zero Integer component"),
+    INPUT_TEXT("Input Text component"),
+    INPUT_UNIT_INTERVAL("Input Unit Interval component"),
+    SUPPORTING_TEXT("Supporting Text component"),
     NO_COMPONENT_SELECTED("No component selected"),
 }
 
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/FormShellsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/FormShellsScreen.kt
index eb486f119..3e9d6d464 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/FormShellsScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/FormShellsScreen.kt
@@ -12,7 +12,7 @@ import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.TextFieldValue
 import org.hisp.dhis.common.screens.previews.lorem
 import org.hisp.dhis.common.screens.previews.regularLegendList
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.Description
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.InputText
@@ -26,7 +26,7 @@ import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun FormShellsScreen() {
-    ColumnComponentContainer(title = "Form Shells") {
+    ColumnScreenContainer(title = BasicTextInputs.FORM_SHELLS.label) {
         SubTitle("Outer frames for form elements", TextColor.OnSurface)
         Description("Focused/Unfocused", TextColor.OnSurface)
         var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) }
@@ -183,7 +183,6 @@ fun FormShellsScreen() {
                 }
             },
             state = InputShellState.UNFOCUSED,
-
         )
         Spacer(Modifier.size(Spacing.Spacing18))
 
@@ -306,5 +305,6 @@ fun FormShellsScreen() {
             },
             state = InputShellState.UNFOCUSED,
         )
+        Spacer(Modifier.size(Spacing.Spacing18))
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputIntegerScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputIntegerScreen.kt
index 308a5eb70..2786caf77 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputIntegerScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputIntegerScreen.kt
@@ -1,78 +1,68 @@
 package org.hisp.dhis.common.screens.basicTextInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputInteger
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputIntegerScreen() {
-    ColumnComponentContainer {
-        Title("Input Integer component", textColor = TextColor.OnSurfaceVariant)
-        SubTitle("Basic Input Integer", textColor = TextColor.OnSurfaceVariant)
-        var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("12")) }
+    ColumnScreenContainer(title = BasicTextInputs.INPUT_INTEGER.label) {
+        ColumnComponentContainer("Basic Input Integer") {
+            var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("12")) }
+            InputInteger(
+                title = "Label",
+                inputTextFieldValue = inputValue1,
+                onValueChanged = {
+                    inputValue1 = it ?: TextFieldValue()
+                },
+                state = InputShellState.UNFOCUSED,
+            )
+        }
 
-        InputInteger(
-            title = "Label",
-            inputTextFieldValue = inputValue1,
-            onValueChanged = {
-                inputValue1 = it ?: TextFieldValue()
-            },
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Basic Input Integer with error") {
+            var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
+            InputInteger(
+                title = "Label",
+                inputTextFieldValue = inputValueError,
+                onValueChanged = {
+                    inputValueError = it ?: TextFieldValue()
+                },
+                state = InputShellState.ERROR,
+                supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)),
+            )
+        }
 
-        SubTitle("Basic Input Integer with error", textColor = TextColor.OnSurfaceVariant)
-        var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
+        ColumnComponentContainer("Disabled Input Integer ") {
+            var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputInteger(
+                title = "Label",
+                inputTextFieldValue = inputValue6,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    inputValue6 = it ?: TextFieldValue()
+                },
+            )
+        }
 
-        InputInteger(
-            title = "Label",
-            inputTextFieldValue = inputValueError,
-            onValueChanged = {
-                inputValueError = it ?: TextFieldValue()
-            },
-            state = InputShellState.ERROR,
-            supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)),
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
-
-        SubTitle("Disabled Input Integer ", textColor = TextColor.OnSurfaceVariant)
-        InputInteger(
-            title = "Label",
-            inputTextFieldValue = inputValue6,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                inputValue6 = it ?: TextFieldValue()
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) }
-
-        SubTitle("Disabled Input Integer with content ", textColor = TextColor.OnSurfaceVariant)
-        InputInteger(
-            title = "Label",
-            inputTextFieldValue = inputValue7,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                inputValue7 = it ?: TextFieldValue()
-            },
-        )
+        ColumnComponentContainer("Disabled Input Integer with content ") {
+            var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) }
+            InputInteger(
+                title = "Label",
+                inputTextFieldValue = inputValue7,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    inputValue7 = it ?: TextFieldValue()
+                },
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLetterScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLetterScreen.kt
index ec19b0eda..55a1f8b35 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLetterScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLetterScreen.kt
@@ -1,78 +1,68 @@
 package org.hisp.dhis.common.screens.basicTextInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputLetter
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputLetterScreen() {
-    ColumnComponentContainer {
-        Title("Input Letter component", textColor = TextColor.OnSurfaceVariant)
-        SubTitle(" Basic Input Letter", textColor = TextColor.OnSurfaceVariant)
-        var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+    ColumnScreenContainer(title = BasicTextInputs.INPUT_LETTER.label) {
+        ColumnComponentContainer(" Basic Input Letter") {
+            var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputLetter(
+                title = "Label",
+                inputTextFieldValue = inputValue1,
+                onValueChanged = {
+                    inputValue1 = it ?: TextFieldValue()
+                },
+                state = InputShellState.UNFOCUSED,
+            )
+        }
 
-        InputLetter(
-            title = "Label",
-            inputTextFieldValue = inputValue1,
-            onValueChanged = {
-                inputValue1 = it ?: TextFieldValue()
-            },
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer(" Basic Input Letter with error") {
+            var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputLetter(
+                title = "Label",
+                inputTextFieldValue = inputValueError,
+                onValueChanged = {
+                    inputValueError = it ?: TextFieldValue()
+                },
+                supportingText = listOf(SupportingTextData("Letters only. eg. A, B, C", SupportingTextState.ERROR)),
+                state = InputShellState.ERROR,
+            )
+        }
 
-        SubTitle(" Basic Input Letter with error", textColor = TextColor.OnSurfaceVariant)
-        var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+        ColumnComponentContainer("Disabled Input Letter ") {
+            var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputLetter(
+                title = "Label",
+                inputTextFieldValue = inputValue6,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    inputValue6 = it ?: TextFieldValue()
+                },
+            )
+        }
 
-        InputLetter(
-            title = "Label",
-            inputTextFieldValue = inputValueError,
-            onValueChanged = {
-                inputValueError = it ?: TextFieldValue()
-            },
-            supportingText = listOf(SupportingTextData("Letters only. eg. A, B, C", SupportingTextState.ERROR)),
-            state = InputShellState.ERROR,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
-
-        SubTitle("Disabled Input Letter ", textColor = TextColor.OnSurfaceVariant)
-        InputLetter(
-            title = "Label",
-            inputTextFieldValue = inputValue6,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                inputValue6 = it ?: TextFieldValue()
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("A")) }
-
-        SubTitle("Disabled Input Letter with content ", textColor = TextColor.OnSurfaceVariant)
-        InputLetter(
-            title = "Label",
-            inputTextFieldValue = inputValue7,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                inputValue7 = it ?: TextFieldValue()
-            },
-        )
+        ColumnComponentContainer("Disabled Input Letter with content ") {
+            var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("A")) }
+            InputLetter(
+                title = "Label",
+                inputTextFieldValue = inputValue7,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    inputValue7 = it ?: TextFieldValue()
+                },
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLongTextScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLongTextScreen.kt
index 13264704e..861be5139 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLongTextScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputLongTextScreen.kt
@@ -1,104 +1,94 @@
 package org.hisp.dhis.common.screens.basicTextInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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.text.input.TextFieldValue
 import org.hisp.dhis.common.screens.previews.lorem_medium
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputLongText
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputLongTextScreen() {
-    ColumnComponentContainer {
-        Title("Input Long Text component", textColor = TextColor.OnSurfaceVariant)
-        SubTitle(" Basic Input Long Text", textColor = TextColor.OnSurfaceVariant)
-        var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) {
-            mutableStateOf(
-                TextFieldValue(lorem_medium),
-
+    ColumnScreenContainer(title = BasicTextInputs.INPUT_LONG_TEXT.label) {
+        ColumnComponentContainer(" Basic Input Long Text") {
+            var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+                mutableStateOf(
+                    TextFieldValue(lorem_medium),
+                )
+            }
+            InputLongText(
+                title = "Label",
+                inputTextFieldValue = inputValue1,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue1 = it
+                    }
+                },
+                state = InputShellState.UNFOCUSED,
             )
         }
 
-        InputLongText(
-            title = "Label",
-            inputTextFieldValue = inputValue1,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue1 = it
-                }
-            },
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        SubTitle(" Basic Input Long Text with error message", textColor = TextColor.OnSurfaceVariant)
-        var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) {
-            mutableStateOf(
-                TextFieldValue(lorem_medium),
+        ColumnComponentContainer(" Basic Input Long Text with error message") {
+            var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+                mutableStateOf(
+                    TextFieldValue(lorem_medium),
+                )
+            }
+            InputLongText(
+                title = "Label",
+                inputTextFieldValue = inputValueError,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValueError = it
+                    }
+                },
+                supportingText = listOf(
+                    SupportingTextData(
+                        "100000/1000000 characters used",
+                        state = SupportingTextState.ERROR,
+                    ),
+                ),
+                state = InputShellState.ERROR,
             )
         }
 
-        InputLongText(
-            title = "Label",
-            inputTextFieldValue = inputValueError,
-            onValueChanged = {
-                if (it != null) {
-                    inputValueError = it
-                }
-            },
-            supportingText = listOf(
-                SupportingTextData(
-                    "100000/1000000 characters used",
-                    state = SupportingTextState.ERROR,
-                ),
-            ),
-            state = InputShellState.ERROR,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) {
-            mutableStateOf(
-                TextFieldValue(""),
+        ColumnComponentContainer("Disabled Input Long Text ") {
+            var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+                mutableStateOf(
+                    TextFieldValue(""),
+                )
+            }
+            InputLongText(
+                title = "Label",
+                inputTextFieldValue = inputValue6,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue6 = it
+                    }
+                },
             )
         }
 
-        SubTitle("Disabled Input Long Text ", textColor = TextColor.OnSurfaceVariant)
-        InputLongText(
-            title = "Label",
-            inputTextFieldValue = inputValue6,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue6 = it
-                }
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Content")) }
-
-        SubTitle("Disabled Input text with content ", textColor = TextColor.OnSurfaceVariant)
-        InputLongText(
-            title = "Label",
-            inputTextFieldValue = inputValue7,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue7 = it
-                }
-            },
-        )
+        ColumnComponentContainer("Disabled Input text with content ") {
+            var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Content")) }
+            InputLongText(
+                title = "Label",
+                inputTextFieldValue = inputValue7,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue7 = it
+                    }
+                },
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNegativeIntegerScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNegativeIntegerScreen.kt
index 4a7342673..95b60dd96 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNegativeIntegerScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNegativeIntegerScreen.kt
@@ -1,86 +1,76 @@
 package org.hisp.dhis.common.screens.basicTextInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputNegativeInteger
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputNegativeIntegerScreen() {
-    ColumnComponentContainer {
-        Title("Input Negative Integer component", textColor = TextColor.OnSurfaceVariant)
-        SubTitle("Basic Input Negative Integer", textColor = TextColor.OnSurfaceVariant)
-        var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("-12")) }
+    ColumnScreenContainer(title = BasicTextInputs.INPUT_NEGATIVE_INTEGER.label) {
+        ColumnComponentContainer("Basic Input Negative Integer") {
+            var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("-12")) }
+            InputNegativeInteger(
+                title = "Label",
+                inputTextFieldValue = inputValue1,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue1 = it
+                    }
+                },
+                state = InputShellState.UNFOCUSED,
+            )
+        }
 
-        InputNegativeInteger(
-            title = "Label",
-            inputTextFieldValue = inputValue1,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue1 = it
-                }
-            },
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Basic Input Integer with error") {
+            var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputNegativeInteger(
+                title = "Label",
+                inputTextFieldValue = inputValueError,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValueError = it
+                    }
+                },
+                state = InputShellState.ERROR,
+                supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)),
+            )
+        }
 
-        SubTitle("Basic Input Integer with error", textColor = TextColor.OnSurfaceVariant)
-        var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+        ColumnComponentContainer("Disabled Input Negative Integer ") {
+            var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputNegativeInteger(
+                title = "Label",
+                inputTextFieldValue = inputValue6,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue6 = it
+                    }
+                },
+            )
+        }
 
-        InputNegativeInteger(
-            title = "Label",
-            inputTextFieldValue = inputValueError,
-            onValueChanged = {
-                if (it != null) {
-                    inputValueError = it
-                }
-            },
-            state = InputShellState.ERROR,
-            supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)),
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
-
-        SubTitle("Disabled Input Negative Integer ", textColor = TextColor.OnSurfaceVariant)
-        InputNegativeInteger(
-            title = "Label",
-            inputTextFieldValue = inputValue6,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue6 = it
-                }
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) }
-
-        SubTitle("Disabled Input Negative Integer with content ", textColor = TextColor.OnSurfaceVariant)
-        InputNegativeInteger(
-            title = "Label",
-            inputTextFieldValue = inputValue7,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue7 = it
-                }
-            },
-        )
+        ColumnComponentContainer("Disabled Input Negative Integer with content ") {
+            var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) }
+            InputNegativeInteger(
+                title = "Label",
+                inputTextFieldValue = inputValue7,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue7 = it
+                    }
+                },
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNotSupportedScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNotSupportedScreen.kt
index 6dea6fe9b..fc2e9354c 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNotSupportedScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNotSupportedScreen.kt
@@ -2,11 +2,14 @@ package org.hisp.dhis.common.screens.basicTextInputs
 
 import androidx.compose.runtime.Composable
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputNotSupported
 
 @Composable
 fun InputNotSupportedScreen() {
-    ColumnComponentContainer {
-        InputNotSupported(title = "Label")
+    ColumnScreenContainer(title = BasicTextInputs.INPUT_NOT_SUPPORTED.label) {
+        ColumnComponentContainer {
+            InputNotSupported(title = "Label")
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNumberScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNumberScreen.kt
index c69e9b640..3d06024c9 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNumberScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputNumberScreen.kt
@@ -1,87 +1,76 @@
 package org.hisp.dhis.common.screens.basicTextInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
-import org.hisp.dhis.mobile.ui.designsystem.component.Description
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputNumber
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
 import org.hisp.dhis.mobile.ui.designsystem.component.internal.RegExValidations
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputNumberScreen() {
-    ColumnComponentContainer {
-        Title("Input Number component", textColor = TextColor.OnSurfaceVariant)
-        SubTitle("Basic Input Number", textColor = TextColor.OnSurfaceVariant)
-        var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
-        Description("British decimal notation", textColor = TextColor.OnSurfaceVariant)
-        InputNumber(
-            title = "Label",
-            inputTextFieldValue = inputValue1,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue1 = it
-                }
-            },
-            notation = RegExValidations.BRITISH_DECIMAL_NOTATION,
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+    ColumnScreenContainer(title = BasicTextInputs.INPUT_NUMBER.label) {
+        ColumnComponentContainer("Basic Input Number") {
+            var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputNumber(
+                title = "Label",
+                inputTextFieldValue = inputValue1,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue1 = it
+                    }
+                },
+                notation = RegExValidations.BRITISH_DECIMAL_NOTATION,
+                state = InputShellState.UNFOCUSED,
+            )
+        }
 
-        Description("European decimal notation", textColor = TextColor.OnSurfaceVariant)
-        var inputValueEuropean by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+        ColumnComponentContainer("European decimal notation") {
+            var inputValueEuropean by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputNumber(
+                title = "Label",
+                inputTextFieldValue = inputValueEuropean,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValueEuropean = it
+                    }
+                },
+                notation = RegExValidations.EUROPEAN_DECIMAL_NOTATION,
+                state = InputShellState.UNFOCUSED,
+            )
+        }
 
-        InputNumber(
-            title = "Label",
-            inputTextFieldValue = inputValueEuropean,
-            onValueChanged = {
-                if (it != null) {
-                    inputValueEuropean = it
-                }
-            },
-            notation = RegExValidations.EUROPEAN_DECIMAL_NOTATION,
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Disabled Input Number ") {
+            var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputNumber(
+                title = "Label",
+                inputTextFieldValue = inputValue6,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue6 = it
+                    }
+                },
+            )
+        }
 
-        var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
-
-        SubTitle("Disabled Input Number ", textColor = TextColor.OnSurfaceVariant)
-        InputNumber(
-            title = "Label",
-            inputTextFieldValue = inputValue6,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue6 = it
-                }
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("86")) }
-
-        SubTitle("Disabled Input Number with content ", textColor = TextColor.OnSurfaceVariant)
-        InputNumber(
-            title = "Label",
-            inputTextFieldValue = inputValue7,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue7 = it
-                }
-            },
-        )
+        ColumnComponentContainer("Disabled Input Number with content ") {
+            var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("86")) }
+            InputNumber(
+                title = "Label",
+                inputTextFieldValue = inputValue7,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue7 = it
+                    }
+                },
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPercentageScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPercentageScreen.kt
index c64c30a30..1095e68d3 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPercentageScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPercentageScreen.kt
@@ -1,84 +1,74 @@
 package org.hisp.dhis.common.screens.basicTextInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputPercentage
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputPercentageScreen() {
-    ColumnComponentContainer {
-        Title("Input Percentage component", textColor = TextColor.OnSurfaceVariant)
-        SubTitle("Basic Percentage ", textColor = TextColor.OnSurfaceVariant)
-        var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("12")) }
+    ColumnScreenContainer(title = BasicTextInputs.INPUT_PERCENTAGE.label) {
+        ColumnComponentContainer("Basic Percentage ") {
+            var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("12")) }
+            InputPercentage(
+                title = "Label",
+                inputTextFieldValue = inputValue1,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue1 = it
+                    }
+                },
+                state = InputShellState.UNFOCUSED,
+            )
+        }
 
-        InputPercentage(
-            title = "Label",
-            inputTextFieldValue = inputValue1,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue1 = it
-                }
-            },
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Basic Percentage required field") {
+            var inputValueRequired by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputPercentage(
+                title = "Label",
+                inputTextFieldValue = inputValueRequired,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValueRequired = it
+                    }
+                },
+                state = InputShellState.ERROR,
+                isRequiredField = true,
+            )
+        }
 
-        SubTitle("Basic Percentage required field", textColor = TextColor.OnSurfaceVariant)
-        var inputValueRequired by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+        ColumnComponentContainer("Disabled Percentage  ") {
+            var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputPercentage(
+                title = "Label",
+                inputTextFieldValue = inputValue6,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue6 = it
+                    }
+                },
+            )
+        }
 
-        InputPercentage(
-            title = "Label",
-            inputTextFieldValue = inputValueRequired,
-            onValueChanged = {
-                if (it != null) {
-                    inputValueRequired = it
-                }
-            },
-            state = InputShellState.ERROR,
-            isRequiredField = true,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
-
-        SubTitle("Disabled Percentage  ", textColor = TextColor.OnSurfaceVariant)
-        InputPercentage(
-            title = "Label",
-            inputTextFieldValue = inputValue6,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue6 = it
-                }
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) }
-
-        SubTitle("Disabled Percentage with content ", textColor = TextColor.OnSurfaceVariant)
-        InputPercentage(
-            title = "Label",
-            inputTextFieldValue = inputValue7,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue7 = it
-                }
-            },
-        )
+        ColumnComponentContainer("Disabled Percentage with content ") {
+            var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) }
+            InputPercentage(
+                title = "Label",
+                inputTextFieldValue = inputValue7,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue7 = it
+                    }
+                },
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerOrZeroScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerOrZeroScreen.kt
index 361469c7b..ae996e1bd 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerOrZeroScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerOrZeroScreen.kt
@@ -1,71 +1,62 @@
 package org.hisp.dhis.common.screens.basicTextInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputPositiveIntegerOrZero
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputPositiveIntegerOrZeroScreen() {
-    ColumnComponentContainer {
-        Title("Input Positive or Zero Integer component", textColor = TextColor.OnSurfaceVariant)
-        SubTitle("Basic Input Integer", textColor = TextColor.OnSurfaceVariant)
-        var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("123")) }
+    ColumnScreenContainer(title = BasicTextInputs.INPUT_POSITIVE_INTEGER_OR_ZERO.label) {
+        ColumnComponentContainer("Basic Input Integer") {
+            var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("123")) }
+            InputPositiveIntegerOrZero(
+                title = "Label",
+                inputTextFieldValue = inputValue1,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue1 = it
+                    }
+                },
+                state = InputShellState.UNFOCUSED,
+            )
+        }
 
-        InputPositiveIntegerOrZero(
-            title = "Label",
-            inputTextFieldValue = inputValue1,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue1 = it
-                }
-            },
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Basic Input Integer with error") {
+            var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputPositiveIntegerOrZero(
+                title = "Label",
+                inputTextFieldValue = inputValueError,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValueError = it
+                    }
+                },
+                state = InputShellState.ERROR,
+                supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)),
+            )
+        }
 
-        SubTitle("Basic Input Integer with error", textColor = TextColor.OnSurfaceVariant)
-        var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
-
-        InputPositiveIntegerOrZero(
-            title = "Label",
-            inputTextFieldValue = inputValueError,
-            onValueChanged = {
-                if (it != null) {
-                    inputValueError = it
-                }
-            },
-            state = InputShellState.ERROR,
-            supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)),
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) }
-
-        SubTitle("Disabled Input Integer with content ", textColor = TextColor.OnSurfaceVariant)
-        InputPositiveIntegerOrZero(
-            title = "Label",
-            inputTextFieldValue = inputValue7,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue7 = it
-                }
-            },
-        )
+        ColumnComponentContainer("Disabled Input Integer with content ") {
+            var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) }
+            InputPositiveIntegerOrZero(
+                title = "Label",
+                inputTextFieldValue = inputValue7,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue7 = it
+                    }
+                },
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerScreen.kt
index 9fedce22d..0cdeafc83 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputPositiveIntegerScreen.kt
@@ -1,85 +1,78 @@
 package org.hisp.dhis.common.screens.basicTextInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputPositiveInteger
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputPositiveIntegerScreen() {
-    ColumnComponentContainer {
-        Title("Input Positive Integer component", textColor = TextColor.OnSurfaceVariant)
-        SubTitle("Basic Input Integer", textColor = TextColor.OnSurfaceVariant)
-        var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("12")) }
+    ColumnScreenContainer(title = BasicTextInputs.INPUT_POSITIVE_INTEGER.label) {
+        ColumnComponentContainer("Basic Input Integer") {
+            var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("12")) }
 
-        InputPositiveInteger(
-            title = "Label",
-            inputTextFieldValue = inputValue1,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue1 = it
-                }
-            },
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle("Basic Input Integer with error", textColor = TextColor.OnSurfaceVariant)
-        var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputPositiveInteger(
+                title = "Label",
+                inputTextFieldValue = inputValue1,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue1 = it
+                    }
+                },
+                state = InputShellState.UNFOCUSED,
+            )
+        }
 
-        InputPositiveInteger(
-            title = "Label",
-            inputTextFieldValue = inputValueError,
-            onValueChanged = {
-                if (it != null) {
-                    inputValueError = it
-                }
-            },
-            state = InputShellState.ERROR,
-            supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)),
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Basic Input Integer with error") {
+            var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputPositiveInteger(
+                title = "Label",
+                inputTextFieldValue = inputValueError,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValueError = it
+                    }
+                },
+                state = InputShellState.ERROR,
+                supportingText = listOf(SupportingTextData("Numbers only", SupportingTextState.ERROR)),
+            )
+        }
 
-        var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+        ColumnComponentContainer("Disabled Input Integer ") {
+            var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
 
-        SubTitle("Disabled Input Integer ", textColor = TextColor.OnSurfaceVariant)
-        InputPositiveInteger(
-            title = "Label",
-            inputTextFieldValue = inputValue6,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue6 = it
-                }
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+            InputPositiveInteger(
+                title = "Label",
+                inputTextFieldValue = inputValue6,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue6 = it
+                    }
+                },
+            )
+        }
 
-        var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) }
-
-        SubTitle("Disabled Input Integer with content ", textColor = TextColor.OnSurfaceVariant)
-        InputPositiveInteger(
-            title = "Label",
-            inputTextFieldValue = inputValue7,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue7 = it
-                }
-            },
-        )
+        ColumnComponentContainer("Disabled Input Integer with content ") {
+            var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("1234")) }
+            InputPositiveInteger(
+                title = "Label",
+                inputTextFieldValue = inputValue7,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue7 = it
+                    }
+                },
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputTextScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputTextScreen.kt
index f5318eec3..4eb829fb0 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputTextScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputTextScreen.kt
@@ -1,88 +1,79 @@
 package org.hisp.dhis.common.screens.basicTextInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.InputText
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputTextScreen() {
-    ColumnComponentContainer {
-        Title("Input text component", textColor = TextColor.OnSurfaceVariant)
-        SubTitle(" Basic Input text", textColor = TextColor.OnSurfaceVariant)
-        var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) {
-            mutableStateOf(
-                TextFieldValue("Input"),
+    ColumnScreenContainer(title = BasicTextInputs.INPUT_TEXT.label) {
+        ColumnComponentContainer(" Basic Input text") {
+            var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+                mutableStateOf(
+                    TextFieldValue("Input"),
+                )
+            }
+            val autoCompleteList = listOf("red", "yellow", "blue", "orange", "purple", "green")
+            InputText(
+                autoCompleteList = autoCompleteList,
+                title = "Label",
+                inputTextFieldValue = inputValue1,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue1 = it
+                    }
+                },
+                state = InputShellState.UNFOCUSED,
             )
         }
-        val autoCompleteList = listOf("red", "yellow", "blue", "orange", "purple", "green")
 
-        InputText(
-            autoCompleteList = autoCompleteList,
-            title = "Label",
-            inputTextFieldValue = inputValue1,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue1 = it
-                }
-            },
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle("Input text with error ")
-        var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) }
-
-        InputText(
-            title = "Label",
-            inputTextFieldValue = inputValueError,
-            onValueChanged = {
-                if (it != null) {
-                    inputValueError = it
-                }
-            },
-            state = InputShellState.ERROR,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
-
-        SubTitle("Disabled Input text ", textColor = TextColor.OnSurfaceVariant)
-        InputText(
-            title = "Label",
-            inputTextFieldValue = inputValue6,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue6 = it
-                }
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Input text with error ") {
+            var inputValueError by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Input")) }
+            InputText(
+                title = "Label",
+                inputTextFieldValue = inputValueError,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValueError = it
+                    }
+                },
+                state = InputShellState.ERROR,
+            )
+        }
 
-        var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Content")) }
+        ColumnComponentContainer("Disabled Input text ") {
+            var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue()) }
+            InputText(
+                title = "Label",
+                inputTextFieldValue = inputValue6,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue6 = it
+                    }
+                },
+            )
+        }
 
-        SubTitle("Disabled Input text with content ", textColor = TextColor.OnSurfaceVariant)
-        InputText(
-            title = "Label",
-            inputTextFieldValue = inputValue7,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue7 = it
-                }
-            },
-        )
+        ColumnComponentContainer("Disabled Input text with content ") {
+            var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("Content")) }
+            InputText(
+                title = "Label",
+                inputTextFieldValue = inputValue7,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue7 = it
+                    }
+                },
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputUnitIntervalScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputUnitIntervalScreen.kt
index 1665d50fe..961af03c2 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputUnitIntervalScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/InputUnitIntervalScreen.kt
@@ -1,93 +1,82 @@
 package org.hisp.dhis.common.screens.basicTextInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.InputUnitInterval
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputUnitIntervalScreen() {
-    ColumnComponentContainer {
-        Title("Unit Interval", textColor = TextColor.OnSurfaceVariant)
-        SubTitle("Keyboard: Numbers. Range between 0 and 1", textColor = TextColor.OnSurfaceVariant)
-        SubTitle("Basic unit interval ", textColor = TextColor.OnSurfaceVariant)
-        var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("0.25")) }
-
-        InputUnitInterval(
-            title = "Label",
-            inputTextFieldValue = inputValue1,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue1 = it
-                }
-            },
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        SubTitle("Basic unit interval required field", textColor = TextColor.OnSurfaceVariant)
-        var inputValueRequired by rememberSaveable(stateSaver = TextFieldValue.Saver) {
-            mutableStateOf(
-                TextFieldValue(),
+    ColumnScreenContainer(title = BasicTextInputs.INPUT_UNIT_INTERVAL.label) {
+        ColumnComponentContainer("Basic unit interval - Keyboard: Numbers. Range between 0 and 1 ") {
+            var inputValue1 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("0.25")) }
+            InputUnitInterval(
+                title = "Label",
+                inputTextFieldValue = inputValue1,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue1 = it
+                    }
+                },
+                state = InputShellState.UNFOCUSED,
             )
         }
 
-        InputUnitInterval(
-            title = "Label",
-            inputTextFieldValue = inputValueRequired,
-            onValueChanged = {
-                if (it != null) {
-                    inputValueRequired = it
-                }
-            },
-            state = InputShellState.ERROR,
-            isRequiredField = true,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) {
-            mutableStateOf(
-                TextFieldValue(),
+        ColumnComponentContainer("Basic unit interval required field") {
+            var inputValueRequired by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+                mutableStateOf(
+                    TextFieldValue(),
+                )
+            }
+            InputUnitInterval(
+                title = "Label",
+                inputTextFieldValue = inputValueRequired,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValueRequired = it
+                    }
+                },
+                state = InputShellState.ERROR,
+                isRequiredField = true,
             )
         }
 
-        SubTitle("Disabled unit interval  ", textColor = TextColor.OnSurfaceVariant)
-        InputUnitInterval(
-            title = "Label",
-            inputTextFieldValue = inputValue6,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue6 = it
-                }
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("0.19")) }
+        ColumnComponentContainer("Disabled unit interval  ") {
+            var inputValue6 by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+                mutableStateOf(
+                    TextFieldValue(),
+                )
+            }
+            InputUnitInterval(
+                title = "Label",
+                inputTextFieldValue = inputValue6,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue6 = it
+                    }
+                },
+            )
+        }
 
-        SubTitle("Disabled unit interval with content ", textColor = TextColor.OnSurfaceVariant)
-        InputUnitInterval(
-            title = "Label",
-            inputTextFieldValue = inputValue7,
-            state = InputShellState.DISABLED,
-            onValueChanged = {
-                if (it != null) {
-                    inputValue7 = it
-                }
-            },
-        )
+        ColumnComponentContainer("Disabled unit interval with content ") {
+            var inputValue7 by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("0.19")) }
+            InputUnitInterval(
+                title = "Label",
+                inputTextFieldValue = inputValue7,
+                state = InputShellState.DISABLED,
+                onValueChanged = {
+                    if (it != null) {
+                        inputValue7 = it
+                    }
+                },
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/SupportingTextScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/SupportingTextScreen.kt
index d7204756f..661c1f946 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/SupportingTextScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/basicTextInputs/SupportingTextScreen.kt
@@ -1,42 +1,32 @@
 package org.hisp.dhis.common.screens.basicTextInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import org.hisp.dhis.common.screens.previews.lorem
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingText
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun SupportingTextScreen() {
-    ColumnComponentContainer(title = "Supporting Text") {
-        SubTitle("Standard Supporting Text")
-        SupportingText("Supporting text")
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle("Standard Warning Supporting Text")
-        SupportingText("Supporting Text", SupportingTextState.WARNING)
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle("Standard Error Supporting Text")
-        SupportingText("Supporting Text", SupportingTextState.ERROR)
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle("Overflow Default Supporting Text")
-        SupportingText(
-            lorem,
-        )
-        SubTitle("Overflow Warning Supporting Text")
-        SupportingText(
-            lorem,
-            SupportingTextState.WARNING,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle("Overflow Error Supporting Text")
-        SupportingText(
-            lorem,
-            SupportingTextState.ERROR,
-        )
+    ColumnScreenContainer(title = BasicTextInputs.SUPPORTING_TEXT.label) {
+        ColumnComponentContainer("Standard Supporting Text") {
+            SupportingText("Supporting Text")
+        }
+        ColumnComponentContainer("Standard Warning Supporting Text") {
+            SupportingText("Supporting Text", SupportingTextState.WARNING)
+        }
+        ColumnComponentContainer("Standard Error Supporting Text") {
+            SupportingText("Supporting Text", SupportingTextState.ERROR)
+        }
+        ColumnComponentContainer("Overflow Default Supporting Text") {
+            SupportingText(lorem)
+        }
+        ColumnComponentContainer("Overflow Warning Supporting Text") {
+            SupportingText(lorem, SupportingTextState.WARNING)
+        }
+        ColumnComponentContainer("Overflow Error Supporting Text") {
+            SupportingText(lorem, SupportingTextState.ERROR)
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetHeaderScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetHeaderScreen.kt
index a9bfc649c..446f3d8e3 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetHeaderScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetHeaderScreen.kt
@@ -2,8 +2,6 @@ package org.hisp.dhis.common.screens.bottomSheets
 
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.outlined.HelpOutline
 import androidx.compose.material.icons.outlined.BookmarkBorder
@@ -13,92 +11,89 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextAlign
 import org.hisp.dhis.mobile.ui.designsystem.component.BottomSheetHeader
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun BottomSheetHeaderScreen() {
-    ColumnComponentContainer(title = "Bottom Sheet Header") {
-        SubTitle("With Icon", TextColor.OnSurface)
-        Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) {
-            BottomSheetHeader(
-                title = "Title",
-                subTitle = "Subtitle",
-                description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat",
-                icon = {
-                    Icon(
-                        imageVector = Icons.Outlined.BookmarkBorder,
-                        contentDescription = "Button",
-                        tint = SurfaceColor.Primary,
-                    )
-                },
-            )
+    ColumnScreenContainer(title = BottomSheets.BOTTOM_SHEET_HEADER.label) {
+        ColumnComponentContainer("With Icon") {
+            Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) {
+                BottomSheetHeader(
+                    title = "Title",
+                    subTitle = "Subtitle",
+                    description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat",
+                    icon = {
+                        Icon(
+                            imageVector = Icons.Outlined.BookmarkBorder,
+                            contentDescription = "Button",
+                            tint = SurfaceColor.Primary,
+                        )
+                    },
+                )
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
 
-        SubTitle("Without Icon", TextColor.OnSurface)
-
-        Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) {
-            BottomSheetHeader(
-                title = "Title",
-                subTitle = "Subtitle",
-                description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat",
-            )
+        ColumnComponentContainer("Without Icon") {
+            Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) {
+                BottomSheetHeader(
+                    title = "Title",
+                    subTitle = "Subtitle",
+                    description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat",
+                )
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        SubTitle("Without Icon, without subtitle", TextColor.OnSurface)
 
-        Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) {
-            BottomSheetHeader(
-                title = "Title",
-                description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat",
-            )
+        ColumnComponentContainer("Without Icon, without subtitle") {
+            Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) {
+                BottomSheetHeader(
+                    title = "Title",
+                    description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat",
+                )
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
 
-        SubTitle("Without Icon, subtitle or description", TextColor.OnSurface)
-
-        Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) {
-            BottomSheetHeader(
-                title = "Title",
-            )
+        ColumnComponentContainer("Without Icon, subtitle or description") {
+            Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) {
+                BottomSheetHeader(
+                    title = "Title",
+                )
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        SubTitle("With Icon, without subtitle or description", TextColor.OnSurface)
 
-        Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) {
-            BottomSheetHeader(
-                title = "Title",
-                icon = {
-                    Icon(
-                        imageVector = Icons.AutoMirrored.Outlined.HelpOutline,
-                        contentDescription = "Button",
-                        tint = SurfaceColor.Primary,
-                    )
-                },
-            )
+        ColumnComponentContainer("With Icon, without subtitle or description") {
+            Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) {
+                BottomSheetHeader(
+                    title = "Title",
+                    icon = {
+                        Icon(
+                            imageVector = Icons.AutoMirrored.Outlined.HelpOutline,
+                            contentDescription = "Button",
+                            tint = SurfaceColor.Primary,
+                        )
+                    },
+                )
+            }
         }
-        SubTitle("Bottom sheet shell with header, content and buttons", TextColor.OnSurface)
 
-        Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) {
-            BottomSheetHeader(
-                title = "Title",
-                subTitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat",
-                headerTextAlignment = TextAlign.Start,
-                icon = {
-                    Icon(
-                        imageVector = Icons.AutoMirrored.Outlined.HelpOutline,
-                        contentDescription = "Button",
-                        tint = SurfaceColor.Primary,
-                    )
-                },
-            )
+        ColumnComponentContainer("Bottom sheet shell with header text aligned to start") {
+            Box(modifier = Modifier.border(Spacing.Spacing1, color = TextColor.OnDisabledSurface)) {
+                BottomSheetHeader(
+                    title = "Title",
+                    subTitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+                    description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, urna vitae lacinia feugiat",
+                    headerTextAlignment = TextAlign.Start,
+                    icon = {
+                        Icon(
+                            imageVector = Icons.AutoMirrored.Outlined.HelpOutline,
+                            contentDescription = "Button",
+                            tint = SurfaceColor.Primary,
+                        )
+                    },
+                )
+            }
         }
-        SubTitle("Bottom sheet shell with header text aligned to start", TextColor.OnSurface)
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetScreen.kt
index a7168ca1c..e9c84e2fa 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetScreen.kt
@@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredWidth
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
@@ -33,9 +32,8 @@ import org.hisp.dhis.mobile.ui.designsystem.component.ButtonBlock
 import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle
 import org.hisp.dhis.mobile.ui.designsystem.component.ColorStyle
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.LegendRange
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 
 @Composable
@@ -61,7 +59,7 @@ fun BottomSheetScreen() {
                 )
             },
             content = {
-                Column() {
+                Column {
                     LegendRange(
                         regularLegendList,
                     )
@@ -131,7 +129,7 @@ fun BottomSheetScreen() {
                 )
             },
             content = {
-                Column() {
+                Column {
                     LegendRange(
                         longLegendList,
                     )
@@ -176,7 +174,7 @@ fun BottomSheetScreen() {
                 )
             },
             content = {
-                Column() {
+                Column {
                     LegendRange(
                         regularLegendList,
                     )
@@ -237,7 +235,7 @@ fun BottomSheetScreen() {
                 )
             },
             content = {
-                Column() {
+                Column {
                     LegendRange(
                         regularLegendList,
                     )
@@ -300,7 +298,7 @@ fun BottomSheetScreen() {
                 )
             },
             content = {
-                Column() {
+                Column {
                     LegendRange(
                         regularLegendList,
                     )
@@ -330,7 +328,7 @@ fun BottomSheetScreen() {
             onSearchQueryChanged = { searchQuery = it },
             onSearch = { searchQuery = it },
             content = {
-                Column() {
+                Column {
                     LegendRange(
                         regularLegendList,
                     )
@@ -383,84 +381,84 @@ fun BottomSheetScreen() {
         }
     }
 
-    ColumnComponentContainer {
-        SubTitle("Legend type bottom sheet shell")
-        Button(
-            enabled = true,
-            ButtonStyle.FILLED,
-            text = "Show Modal",
-        ) {
-            showLegendBottomSheetShell = !showLegendBottomSheetShell
+    ColumnScreenContainer(title = BottomSheets.BOTTOM_SHEET.label) {
+        ColumnComponentContainer("Legend type bottom sheet shell") {
+            Button(
+                enabled = true,
+                ButtonStyle.FILLED,
+                text = "Show Modal",
+            ) {
+                showLegendBottomSheetShell = !showLegendBottomSheetShell
+            }
         }
-        Spacer(modifier = Modifier.size(Spacing.Spacing10))
 
-        SubTitle("Bottom sheet shell with scrollable content")
-        Button(
-            enabled = true,
-            ButtonStyle.FILLED,
-            text = "Show Modal",
-        ) {
-            showBottomSheetShellScrollableContent = !showBottomSheetShellScrollableContent
+        ColumnComponentContainer("Bottom sheet shell with scrollable content") {
+            Button(
+                enabled = true,
+                ButtonStyle.FILLED,
+                text = "Show Modal",
+            ) {
+                showBottomSheetShellScrollableContent = !showBottomSheetShellScrollableContent
+            }
         }
-        Spacer(modifier = Modifier.size(Spacing.Spacing10))
 
-        SubTitle("Bottom sheet shell with with maximum expansion ")
-        Button(
-            enabled = true,
-            ButtonStyle.FILLED,
-            text = "Show Modal",
-        ) {
-            showBottomSheetShellMaxExpansion = !showBottomSheetShellScrollableContent
+        ColumnComponentContainer("Bottom sheet shell with with maximum expansion ") {
+            Button(
+                enabled = true,
+                ButtonStyle.FILLED,
+                text = "Show Modal",
+            ) {
+                showBottomSheetShellMaxExpansion = !showBottomSheetShellScrollableContent
+            }
         }
-        Spacer(modifier = Modifier.size(Spacing.Spacing10))
-        SubTitle("Bottom sheet shell with single button")
-        Button(
-            enabled = true,
-            ButtonStyle.FILLED,
-            text = "Show Modal",
-        ) {
-            showBottomSheetShellSingleButton = !showBottomSheetShellSingleButton
+        ColumnComponentContainer("Bottom sheet shell with single button") {
+            Button(
+                enabled = true,
+                ButtonStyle.FILLED,
+                text = "Show Modal",
+            ) {
+                showBottomSheetShellSingleButton = !showBottomSheetShellSingleButton
+            }
         }
-        Spacer(modifier = Modifier.size(Spacing.Spacing10))
 
-        SubTitle("Bottom sheet shell with two buttons")
-        Button(
-            enabled = true,
-            ButtonStyle.FILLED,
-            text = "Show Modal",
-        ) {
-            showBottomSheetShellTwoButtons = !showBottomSheetShellTwoButtons
+        ColumnComponentContainer("Bottom sheet shell with two buttons") {
+            Button(
+                enabled = true,
+                ButtonStyle.FILLED,
+                text = "Show Modal",
+            ) {
+                showBottomSheetShellTwoButtons = !showBottomSheetShellTwoButtons
+            }
         }
-        Spacer(modifier = Modifier.size(Spacing.Spacing10))
 
-        SubTitle("Bottom sheet shell with search bar")
-        Button(
-            enabled = true,
-            ButtonStyle.FILLED,
-            text = "Show Modal",
-        ) {
-            showBottomSheetWithSearchBar = !showBottomSheetWithSearchBar
+        ColumnComponentContainer("Bottom sheet shell with search bar") {
+            Button(
+                enabled = true,
+                ButtonStyle.FILLED,
+                text = "Show Modal",
+            ) {
+                showBottomSheetWithSearchBar = !showBottomSheetWithSearchBar
+            }
         }
-        Spacer(modifier = Modifier.size(Spacing.Spacing10))
 
-        SubTitle("Bottom sheet shell without title")
-        Button(
-            enabled = true,
-            ButtonStyle.FILLED,
-            text = "Show Modal",
-        ) {
-            showBottomSheetWithoutTitle = !showBottomSheetWithoutTitle
+        ColumnComponentContainer("Bottom sheet shell without title") {
+            Button(
+                enabled = true,
+                ButtonStyle.FILLED,
+                text = "Show Modal",
+            ) {
+                showBottomSheetWithoutTitle = !showBottomSheetWithoutTitle
+            }
         }
-        Spacer(modifier = Modifier.size(Spacing.Spacing10))
 
-        SubTitle("Bottom sheet shell without content")
-        Button(
-            enabled = true,
-            ButtonStyle.FILLED,
-            text = "Show Modal",
-        ) {
-            showBottomSheetWithoutContent = !showBottomSheetWithoutContent
+        ColumnComponentContainer("Bottom sheet shell without content") {
+            Button(
+                enabled = true,
+                ButtonStyle.FILLED,
+                text = "Show Modal",
+            ) {
+                showBottomSheetWithoutContent = !showBottomSheetWithoutContent
+            }
         }
-        Spacer(modifier = Modifier.size(Spacing.Spacing10))
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetsScreen.kt
index 519f0740b..73b45487b 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetsScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/BottomSheetsScreen.kt
@@ -4,27 +4,24 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import org.hisp.dhis.common.screens.NoComponentSelectedScreen
+import org.hisp.dhis.common.screens.components.GroupComponentDropDown
 import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem
-import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown
-import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 
 @Composable
 fun BottomSheetsScreen() {
-    val currentScreen = remember { mutableStateOf(BottomSheets.BOTTOM_SHEET) }
+    val currentScreen = remember { mutableStateOf(BottomSheets.NO_COMPONENT_SELECTED) }
 
     val screenDropdownItemList = mutableListOf<DropdownItem>()
     BottomSheets.entries.forEach {
-        if (it != BottomSheets.BOTTOM_SHEET) {
+        if (it != BottomSheets.NO_COMPONENT_SELECTED) {
             screenDropdownItemList.add(DropdownItem(it.label))
         }
     }
-    InputDropDown(
-        "Display",
+    GroupComponentDropDown(
         dropdownItems = screenDropdownItemList.toList(),
         onItemSelected = { currentScreen.value = getCurrentScreen(it.label) },
         onResetButtonClicked = { currentScreen.value = BottomSheets.NO_COMPONENT_SELECTED },
         selectedItem = DropdownItem(currentScreen.value.label),
-        state = InputShellState.UNFOCUSED,
     )
     when (currentScreen.value) {
         BottomSheets.BOTTOM_SHEET -> BottomSheetScreen()
@@ -35,9 +32,9 @@ fun BottomSheetsScreen() {
 }
 
 enum class BottomSheets(val label: String) {
-    BOTTOM_SHEET("Bottom Sheet "),
-    BOTTOM_SHEET_HEADER("Bottom Sheet Header"),
-    ORG_TREE_BOTTOM_SHEET("Org Tree Bottom Sheet"),
+    BOTTOM_SHEET("Bottom Sheet component"),
+    BOTTOM_SHEET_HEADER("Bottom Sheet Header component"),
+    ORG_TREE_BOTTOM_SHEET("Org Tree Bottom Sheet component"),
     NO_COMPONENT_SELECTED("No component selected"),
 }
 
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/OrgTreeBottomSheetScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/OrgTreeBottomSheetScreen.kt
index 5c01bdd77..627d056a6 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/OrgTreeBottomSheetScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/bottomSheets/OrgTreeBottomSheetScreen.kt
@@ -1,7 +1,5 @@
 package org.hisp.dhis.common.screens.bottomSheets
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -9,7 +7,6 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.flow.MutableStateFlow
@@ -23,10 +20,9 @@ import org.hisp.dhis.common.screens.previews.lorem_short
 import org.hisp.dhis.mobile.ui.designsystem.component.Button
 import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.OrgBottomSheet
 import org.hisp.dhis.mobile.ui.designsystem.component.OrgTreeItem
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun OrgTreeBottomSheetScreen() {
@@ -119,50 +115,50 @@ fun OrgTreeBottomSheetScreen() {
         )
     }
 
-    ColumnComponentContainer {
-        SubTitle("Org Tree Bottom Sheet")
-        Button(
-            enabled = true,
-            ButtonStyle.FILLED,
-            text = "Show One Org Tree Bottom Sheet",
-        ) {
-            showOneOrgTreeBottomSheet = !showOneOrgTreeBottomSheet
+    ColumnScreenContainer(title = BottomSheets.ORG_TREE_BOTTOM_SHEET.label) {
+        ColumnComponentContainer("Org Tree Bottom Sheet with single item") {
+            Button(
+                enabled = true,
+                ButtonStyle.FILLED,
+                text = "Show One Org Tree Bottom Sheet",
+            ) {
+                showOneOrgTreeBottomSheet = !showOneOrgTreeBottomSheet
+            }
         }
-        Spacer(modifier = Modifier.size(Spacing.Spacing10))
-
-        SubTitle("Org Tree Bottom Sheet")
-        Button(
-            enabled = true,
-            ButtonStyle.FILLED,
-            text = "Show Two Org Tree Bottom Sheet",
-        ) {
-            showTwoOrgTreeBottomSheet = !showTwoOrgTreeBottomSheet
+
+        ColumnComponentContainer("Org Tree Bottom Sheet with multiple items") {
+            Button(
+                enabled = true,
+                ButtonStyle.FILLED,
+                text = "Show Two Org Tree Bottom Sheet",
+            ) {
+                showTwoOrgTreeBottomSheet = !showTwoOrgTreeBottomSheet
+            }
         }
-        Spacer(modifier = Modifier.size(Spacing.Spacing10))
-
-        SubTitle("Org Tree Bottom Sheet")
-        Button(
-            enabled = true,
-            ButtonStyle.FILLED,
-            text = "Show Org Tree Bottom Sheet",
-        ) {
-            showMediumOrgTreeBottomSheet = !showMediumOrgTreeBottomSheet
+
+        ColumnComponentContainer("Org Tree Bottom Sheet with medium items") {
+            Button(
+                enabled = true,
+                ButtonStyle.FILLED,
+                text = "Show Org Tree Bottom Sheet",
+            ) {
+                showMediumOrgTreeBottomSheet = !showMediumOrgTreeBottomSheet
+            }
         }
-        Spacer(modifier = Modifier.size(Spacing.Spacing10))
-
-        SubTitle("Org Tree Bottom Sheet")
-        Button(
-            enabled = true,
-            ButtonStyle.FILLED,
-            text = "Show Large Org Tree Bottom Sheet",
-        ) {
-            showLargeOrgTreeBottomSheet = !showLargeOrgTreeBottomSheet
+
+        ColumnComponentContainer("Org Tree Bottom Sheet with large items") {
+            Button(
+                enabled = true,
+                ButtonStyle.FILLED,
+                text = "Show Large Org Tree Bottom Sheet",
+            ) {
+                showLargeOrgTreeBottomSheet = !showLargeOrgTreeBottomSheet
+            }
         }
     }
 }
 
 private class OrgTreeItemsFakeRepo {
-
     private val originalOrgTreeItems = listOf(
         OrgTreeItem(
             uid = "12",
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonBlockScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonBlockScreen.kt
index 44cafb0f6..a47251542 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonBlockScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonBlockScreen.kt
@@ -1,8 +1,6 @@
 package org.hisp.dhis.common.screens.buttons
 
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material3.Icon
@@ -12,89 +10,93 @@ import org.hisp.dhis.mobile.ui.designsystem.component.Button
 import org.hisp.dhis.mobile.ui.designsystem.component.ButtonBlock
 import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.TextButtonSelector
 import org.hisp.dhis.mobile.ui.designsystem.component.Title
 import org.hisp.dhis.mobile.ui.designsystem.resource.provideStringResource
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun ButtonBlockScreen() {
-    ColumnComponentContainer {
-        Title("Button block")
-        SubTitle("One button style")
-        ButtonBlock(
-            primaryButton = {
-                Button(
-                    style = ButtonStyle.KEYBOARDKEY,
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Filled.Add,
-                            contentDescription = "Button",
-                        )
-                    },
-                    enabled = true,
-                    text = "Label",
-                    onClick = {
-                    },
-                    modifier = Modifier.fillMaxWidth(),
-                )
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+    ColumnScreenContainer(title = ButtonScreens.BUTTON_BLOCK.label) {
+        ColumnComponentContainer("One button style") {
+            ButtonBlock(
+                primaryButton = {
+                    Button(
+                        style = ButtonStyle.KEYBOARDKEY,
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Filled.Add,
+                                contentDescription = "Button",
+                            )
+                        },
+                        enabled = true,
+                        text = "Label",
+                        onClick = {
+                        },
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                },
+            )
+        }
+
+        ColumnComponentContainer("Two button style") {
+            ButtonBlock(
+                primaryButton = {
+                    Button(
+                        style = ButtonStyle.KEYBOARDKEY,
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Filled.Add,
+                                contentDescription = "Button",
+                            )
+                        },
+                        enabled = true,
+                        text = "Label",
+                        onClick = {
+                        },
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                },
+                secondaryButton = {
+                    Button(
+                        style = ButtonStyle.KEYBOARDKEY,
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Filled.Add,
+                                contentDescription = "Button",
+                            )
+                        },
+                        enabled = true,
+                        text = "Label",
+                        onClick = {
+                        },
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                },
+            )
+        }
 
-        SubTitle("Two button style")
-        ButtonBlock(
-            primaryButton = {
-                Button(
-                    style = ButtonStyle.KEYBOARDKEY,
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Filled.Add,
-                            contentDescription = "Button",
-                        )
-                    },
-                    enabled = true,
-                    text = "Label",
-                    onClick = {
-                    },
-                    modifier = Modifier.fillMaxWidth(),
-                )
-            },
-            secondaryButton = {
-                Button(
-                    style = ButtonStyle.KEYBOARDKEY,
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Filled.Add,
-                            contentDescription = "Button",
-                        )
-                    },
-                    enabled = true,
-                    text = "Label",
-                    onClick = {
-                    },
-                    modifier = Modifier.fillMaxWidth(),
-                )
-            },
-        )
         Title("Text Button Selectors")
-        SubTitle("Enabled")
-        TextButtonSelector(
-            firstOptionText = provideStringResource("date_birth"),
-            onClickFirstOption = {},
-            middleText = provideStringResource("or"),
-            secondOptionText = provideStringResource("age"),
-            onClickSecondOption = {},
-        )
-        SubTitle("Disabled")
-        TextButtonSelector(
-            enabled = false,
-            firstOptionText = provideStringResource("date_birth"),
-            onClickFirstOption = {},
-            middleText = provideStringResource("or"),
-            secondOptionText = provideStringResource("age"),
-            onClickSecondOption = {},
-        )
+
+        ColumnComponentContainer("Enabled") {
+            TextButtonSelector(
+                firstOptionText = provideStringResource("date_birth"),
+                onClickFirstOption = {},
+                middleText = provideStringResource("or"),
+                secondOptionText = provideStringResource("age"),
+                onClickSecondOption = {},
+            )
+        }
+
+        ColumnComponentContainer("Disabled") {
+            TextButtonSelector(
+                enabled = false,
+                firstOptionText = provideStringResource("date_birth"),
+                onClickFirstOption = {},
+                middleText = provideStringResource("or"),
+                secondOptionText = provideStringResource("age"),
+                onClickSecondOption = {},
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonCarouselScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonCarouselScreen.kt
index f1c255641..9ed4c90d1 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonCarouselScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonCarouselScreen.kt
@@ -1,29 +1,21 @@
 package org.hisp.dhis.common.screens.buttons
 
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.FileDownload
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import org.hisp.dhis.common.screens.previews.fiveButtonCarousel
 import org.hisp.dhis.common.screens.previews.overflowButtonCarousel
 import org.hisp.dhis.common.screens.previews.threeButtonCarousel
 import org.hisp.dhis.mobile.ui.designsystem.component.ButtonCarousel
 import org.hisp.dhis.mobile.ui.designsystem.component.CarouselButtonData
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
-import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 
 @Composable
 fun ButtonCarouselScreen() {
-    ColumnComponentContainer {
-        Title("Carousel Buttons")
-        RowComponentContainer(
-            title = "Simple Carousel Button",
-        ) {
+    ColumnScreenContainer(title = ButtonScreens.CAROUSEL_BUTTONS.label) {
+        ColumnComponentContainer("Simple Carousel Button") {
             ButtonCarousel(
                 carouselButtonList = listOf(
                     CarouselButtonData(
@@ -40,25 +32,21 @@ fun ButtonCarouselScreen() {
                 ),
             )
         }
-        RowComponentContainer(
-            title = "Buttons Carousel",
-        ) {
-            Column(
-                Modifier.fillMaxWidth(),
-            ) {
-                ButtonCarousel(
-                    carouselButtonList = threeButtonCarousel,
-                )
 
-                ButtonCarousel(
-                    carouselButtonList = fiveButtonCarousel,
-                )
+        ColumnComponentContainer("Buttons Carousel") {
+            ButtonCarousel(
+                carouselButtonList = threeButtonCarousel,
+            )
+
+            ButtonCarousel(
+                carouselButtonList = fiveButtonCarousel,
+            )
+        }
 
-                SubTitle("Overflow case")
-                ButtonCarousel(
-                    carouselButtonList = overflowButtonCarousel,
-                )
-            }
+        ColumnComponentContainer("Overflow case") {
+            ButtonCarousel(
+                carouselButtonList = overflowButtonCarousel,
+            )
         }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonScreen.kt
index 0ed5a2ab1..f1f56291b 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonScreen.kt
@@ -1,153 +1,150 @@
 package org.hisp.dhis.common.screens.buttons
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import org.hisp.dhis.common.screens.previews.ButtonPreview
 import org.hisp.dhis.common.screens.previews.ButtonPreviewWithIcon
 import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle
 import org.hisp.dhis.mobile.ui.designsystem.component.ColorStyle
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun ButtonScreen() {
-    ColumnComponentContainer() {
-        Title("Buttons")
-        SubTitle("Filled")
-        RowComponentContainer() {
-            ButtonPreview("Label", ButtonStyle.FILLED)
-            ButtonPreview("Label", ButtonStyle.FILLED, false)
-        }
-        RowComponentContainer {
-            ButtonPreviewWithIcon("Label", ButtonStyle.FILLED)
-            ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, false)
+    ColumnScreenContainer(title = ButtonScreens.BUTTON.label) {
+        ColumnComponentContainer("Filled") {
+            RowComponentContainer {
+                ButtonPreview("Label", ButtonStyle.FILLED)
+                ButtonPreview("Label", ButtonStyle.FILLED, false)
+            }
+            RowComponentContainer {
+                ButtonPreviewWithIcon("Label", ButtonStyle.FILLED)
+                ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, false)
+            }
         }
 
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle("Outlined")
-        RowComponentContainer() {
-            ButtonPreview("Label")
-            ButtonPreview("Label", ButtonStyle.OUTLINED, false)
-        }
-        RowComponentContainer() {
-            ButtonPreviewWithIcon("Label")
-            ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, false)
+        ColumnComponentContainer("Outlined") {
+            RowComponentContainer {
+                ButtonPreview("Label")
+                ButtonPreview("Label", ButtonStyle.OUTLINED, false)
+            }
+            RowComponentContainer {
+                ButtonPreviewWithIcon("Label")
+                ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, false)
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
 
-        SubTitle("Text")
-        RowComponentContainer() {
-            ButtonPreview("Label", ButtonStyle.TEXT)
-            ButtonPreview("Label", ButtonStyle.TEXT, false)
-        }
-        RowComponentContainer() {
-            ButtonPreviewWithIcon("Label", ButtonStyle.TEXT)
-            ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, false)
+        ColumnComponentContainer("Text") {
+            RowComponentContainer {
+                ButtonPreview("Label", ButtonStyle.TEXT)
+                ButtonPreview("Label", ButtonStyle.TEXT, false)
+            }
+            RowComponentContainer {
+                ButtonPreviewWithIcon("Label", ButtonStyle.TEXT)
+                ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, false)
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
 
-        SubTitle("Elevated")
-        RowComponentContainer() {
-            ButtonPreview("Label", ButtonStyle.ELEVATED)
-            ButtonPreview("Label", ButtonStyle.ELEVATED, false)
+        ColumnComponentContainer("Elevated") {
+            RowComponentContainer {
+                ButtonPreview("Label", ButtonStyle.ELEVATED)
+                ButtonPreview("Label", ButtonStyle.ELEVATED, false)
+            }
+            RowComponentContainer {
+                ButtonPreviewWithIcon("Label", ButtonStyle.ELEVATED)
+                ButtonPreviewWithIcon("Label", ButtonStyle.ELEVATED, false)
+            }
         }
-        RowComponentContainer() {
-            ButtonPreviewWithIcon("Label", ButtonStyle.ELEVATED)
-            ButtonPreviewWithIcon("Label", ButtonStyle.ELEVATED, false)
-        }
-        Spacer(Modifier.size(Spacing.Spacing18))
 
-        SubTitle("Tonal")
-        RowComponentContainer() {
-            ButtonPreview("Label", ButtonStyle.TONAL)
-            ButtonPreview("Label", ButtonStyle.TONAL, false)
-        }
-        RowComponentContainer() {
-            ButtonPreviewWithIcon("Label", ButtonStyle.TONAL)
-            ButtonPreviewWithIcon("Label", ButtonStyle.TONAL, false)
+        ColumnComponentContainer("Tonal") {
+            RowComponentContainer {
+                ButtonPreview("Label", ButtonStyle.TONAL)
+                ButtonPreview("Label", ButtonStyle.TONAL, false)
+            }
+            RowComponentContainer {
+                ButtonPreviewWithIcon("Label", ButtonStyle.TONAL)
+                ButtonPreviewWithIcon("Label", ButtonStyle.TONAL, false)
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
 
-        SubTitle("Keyboard")
-        RowComponentContainer() {
-            ButtonPreview("Label", ButtonStyle.KEYBOARDKEY)
-            ButtonPreview("Label", ButtonStyle.KEYBOARDKEY, false)
-        }
-        RowComponentContainer() {
-            ButtonPreviewWithIcon("Label", ButtonStyle.KEYBOARDKEY)
-            ButtonPreviewWithIcon("Label", ButtonStyle.KEYBOARDKEY, false)
+        ColumnComponentContainer("Keyboard") {
+            RowComponentContainer {
+                ButtonPreview("Label", ButtonStyle.KEYBOARDKEY)
+                ButtonPreview("Label", ButtonStyle.KEYBOARDKEY, false)
+            }
+            RowComponentContainer {
+                ButtonPreviewWithIcon("Label", ButtonStyle.KEYBOARDKEY)
+                ButtonPreviewWithIcon("Label", ButtonStyle.KEYBOARDKEY, false)
+            }
         }
 
         Title("Error Buttons")
-        SubTitle("Filled")
-        RowComponentContainer() {
-            ButtonPreview("Label", ButtonStyle.FILLED, true, ColorStyle.ERROR)
-            ButtonPreview("Label", ButtonStyle.FILLED, false, ColorStyle.ERROR)
-        }
-        RowComponentContainer {
-            ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, true, ColorStyle.ERROR)
-            ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, false, ColorStyle.ERROR)
+        ColumnComponentContainer("Filled") {
+            RowComponentContainer {
+                ButtonPreview("Label", ButtonStyle.FILLED, true, ColorStyle.ERROR)
+                ButtonPreview("Label", ButtonStyle.FILLED, false, ColorStyle.ERROR)
+            }
+            RowComponentContainer {
+                ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, true, ColorStyle.ERROR)
+                ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, false, ColorStyle.ERROR)
+            }
         }
 
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle("Outlined")
-        RowComponentContainer() {
-            ButtonPreview("Label", ButtonStyle.OUTLINED, true, ColorStyle.ERROR)
-            ButtonPreview("Label", ButtonStyle.OUTLINED, false, ColorStyle.ERROR)
-        }
-        RowComponentContainer() {
-            ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, true, ColorStyle.ERROR)
-            ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, false, ColorStyle.ERROR)
+        ColumnComponentContainer("Outlined") {
+            RowComponentContainer {
+                ButtonPreview("Label", ButtonStyle.OUTLINED, true, ColorStyle.ERROR)
+                ButtonPreview("Label", ButtonStyle.OUTLINED, false, ColorStyle.ERROR)
+            }
+            RowComponentContainer {
+                ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, true, ColorStyle.ERROR)
+                ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, false, ColorStyle.ERROR)
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
 
-        SubTitle("Text")
-        RowComponentContainer() {
-            ButtonPreview("Label", ButtonStyle.TEXT, true, ColorStyle.ERROR)
-            ButtonPreview("Label", ButtonStyle.TEXT, false, ColorStyle.ERROR)
-        }
-        RowComponentContainer() {
-            ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, true, ColorStyle.ERROR)
-            ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, false, ColorStyle.ERROR)
+        ColumnComponentContainer("Text") {
+            RowComponentContainer {
+                ButtonPreview("Label", ButtonStyle.TEXT, true, ColorStyle.ERROR)
+                ButtonPreview("Label", ButtonStyle.TEXT, false, ColorStyle.ERROR)
+            }
+            RowComponentContainer {
+                ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, true, ColorStyle.ERROR)
+                ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, false, ColorStyle.ERROR)
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
 
         Title("Warning Buttons")
-        SubTitle("Filled")
-        RowComponentContainer() {
-            ButtonPreview("Label", ButtonStyle.FILLED, true, ColorStyle.WARNING)
-            ButtonPreview("Label", ButtonStyle.FILLED, false, ColorStyle.WARNING)
-        }
-        RowComponentContainer {
-            ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, true, ColorStyle.WARNING)
-            ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, false, ColorStyle.WARNING)
+        ColumnComponentContainer("Filled") {
+            RowComponentContainer {
+                ButtonPreview("Label", ButtonStyle.FILLED, true, ColorStyle.WARNING)
+                ButtonPreview("Label", ButtonStyle.FILLED, false, ColorStyle.WARNING)
+            }
+            RowComponentContainer {
+                ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, true, ColorStyle.WARNING)
+                ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, false, ColorStyle.WARNING)
+            }
         }
 
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle("Outlined")
-        RowComponentContainer() {
-            ButtonPreview("Label", ButtonStyle.OUTLINED, true, ColorStyle.WARNING)
-            ButtonPreview("Label", ButtonStyle.OUTLINED, false, ColorStyle.WARNING)
-        }
-        RowComponentContainer() {
-            ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, true, ColorStyle.WARNING)
-            ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, false, ColorStyle.WARNING)
+        ColumnComponentContainer("Outlined") {
+            RowComponentContainer {
+                ButtonPreview("Label", ButtonStyle.OUTLINED, true, ColorStyle.WARNING)
+                ButtonPreview("Label", ButtonStyle.OUTLINED, false, ColorStyle.WARNING)
+            }
+            RowComponentContainer {
+                ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, true, ColorStyle.WARNING)
+                ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, false, ColorStyle.WARNING)
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
 
-        SubTitle("Text")
-        RowComponentContainer() {
-            ButtonPreview("Label", ButtonStyle.TEXT, true, ColorStyle.WARNING)
-            ButtonPreview("Label", ButtonStyle.TEXT, false, ColorStyle.WARNING)
-        }
-        RowComponentContainer() {
-            ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, true, ColorStyle.WARNING)
-            ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, false, ColorStyle.WARNING)
+        ColumnComponentContainer("Text") {
+            RowComponentContainer {
+                ButtonPreview("Label", ButtonStyle.TEXT, true, ColorStyle.WARNING)
+                ButtonPreview("Label", ButtonStyle.TEXT, false, ColorStyle.WARNING)
+            }
+            RowComponentContainer {
+                ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, true, ColorStyle.WARNING)
+                ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, false, ColorStyle.WARNING)
+            }
         }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonsScreen.kt
index e14067b99..3039a8d48 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonsScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonsScreen.kt
@@ -4,13 +4,12 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import org.hisp.dhis.common.screens.NoComponentSelectedScreen
+import org.hisp.dhis.common.screens.components.GroupComponentDropDown
 import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem
-import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown
-import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 
 @Composable
 fun ButtonsScreen() {
-    val currentScreen = remember { mutableStateOf(ButtonScreens.BUTTON) }
+    val currentScreen = remember { mutableStateOf(ButtonScreens.NO_COMPONENT_SELECTED) }
 
     val screenDropdownItemList = mutableListOf<DropdownItem>()
     ButtonScreens.entries.forEach {
@@ -18,13 +17,11 @@ fun ButtonsScreen() {
             screenDropdownItemList.add(DropdownItem(it.label))
         }
     }
-    InputDropDown(
-        "Display",
+    GroupComponentDropDown(
         dropdownItems = screenDropdownItemList.toList(),
         onItemSelected = { currentScreen.value = getCurrentScreen(it.label) },
         onResetButtonClicked = { currentScreen.value = ButtonScreens.NO_COMPONENT_SELECTED },
         selectedItem = DropdownItem(currentScreen.value.label),
-        state = InputShellState.UNFOCUSED,
     )
     when (currentScreen.value) {
         ButtonScreens.BUTTON -> ButtonScreen()
@@ -40,14 +37,14 @@ fun ButtonsScreen() {
 }
 
 enum class ButtonScreens(val label: String) {
-    BUTTON("Button"),
-    BUTTON_BLOCK("Button block"),
-    CAROUSEL_BUTTONS("Carousel buttons"),
-    CHECK_BOX("Check Box"),
-    FAB("FAB"),
-    ICON_BUTTON("Icon Button"),
-    RADIO("Radio"),
-    SWITCH("Switch"),
+    BUTTON("Button component"),
+    BUTTON_BLOCK("Button block component"),
+    CAROUSEL_BUTTONS("Carousel button component"),
+    CHECK_BOX("Check Box component"),
+    FAB("FAB component"),
+    ICON_BUTTON("Icon Button component"),
+    RADIO("Radio component"),
+    SWITCH("Switch component"),
     NO_COMPONENT_SELECTED("No component selected"),
 }
 
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/CheckboxScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/CheckboxScreen.kt
index c6f3c7636..0b3983190 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/CheckboxScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/CheckboxScreen.kt
@@ -1,23 +1,19 @@
 package org.hisp.dhis.common.screens.buttons
 
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
 import org.hisp.dhis.common.screens.previews.CheckboxPreview
 import org.hisp.dhis.common.screens.previews.TextCheckboxPreview
 import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxBlock
 import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.Orientation
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun CheckboxScreen() {
@@ -54,57 +50,50 @@ fun CheckboxScreen() {
         )
     }
 
-    ColumnComponentContainer(
-        title = "CheckBox",
+    ColumnScreenContainer(
+        title = ButtonScreens.CHECK_BOX.label,
         content = {
-            SubTitle(
-                text = "Text Check Box",
-            )
-            TextCheckboxPreview(state1, true, option1) {
-                state1 = it
+            ColumnComponentContainer("Text Check Box") {
+                TextCheckboxPreview(state1, true, option1) {
+                    state1 = it
+                }
+                TextCheckboxPreview(state2, true, option2) { state2 = it }
+                TextCheckboxPreview(state3, false, option3) { state3 = it }
+                TextCheckboxPreview(state4, enabled = false, text = option4) { state4 = it }
             }
-            TextCheckboxPreview(state2, true, option2) { state2 = it }
-            TextCheckboxPreview(state3, false, option3) { state3 = it }
-            TextCheckboxPreview(state4, enabled = false, text = option4) { state4 = it }
-            Spacer(Modifier.size(Spacing.Spacing18))
 
-            SubTitle(
-                text = "Simple Check Box",
-            )
-            Row {
-                CheckboxPreview(state5, enabled = true) { state5 = it }
-                CheckboxPreview(state6, enabled = false) { state6 = it }
+            ColumnComponentContainer("Simple Check Box") {
+                Row {
+                    CheckboxPreview(state5, enabled = true) { state5 = it }
+                    CheckboxPreview(state6, enabled = false) { state6 = it }
+                }
+                Row {
+                    CheckboxPreview(state7, enabled = true) { state7 = it }
+                    CheckboxPreview(state8, enabled = false) { state8 = it }
+                }
             }
-            Row {
-                CheckboxPreview(state7, enabled = true) { state7 = it }
-                CheckboxPreview(state8, enabled = false) { state8 = it }
-            }
-            Spacer(Modifier.size(Spacing.Spacing18))
 
-            SubTitle(
-                text = "Horizontal Check Box Block",
-            )
-            CheckBoxBlock(
-                Orientation.HORIZONTAL,
-                checkBoxesStatesHorizontal,
-                onItemChange = { checkBoxData ->
-                    val index = checkBoxesStatesHorizontal.withIndex().first { it.value.uid == checkBoxData.uid }.index
-                    checkBoxesStatesHorizontal[index] = checkBoxData.copy(checked = !checkBoxData.checked)
-                },
-            )
-            Spacer(Modifier.size(Spacing.Spacing18))
+            ColumnComponentContainer("Horizontal Check Box Block") {
+                CheckBoxBlock(
+                    Orientation.HORIZONTAL,
+                    checkBoxesStatesHorizontal,
+                    onItemChange = { checkBoxData ->
+                        val index = checkBoxesStatesHorizontal.withIndex().first { it.value.uid == checkBoxData.uid }.index
+                        checkBoxesStatesHorizontal[index] = checkBoxData.copy(checked = !checkBoxData.checked)
+                    },
+                )
+            }
 
-            SubTitle(
-                text = "Vertical Check Box Block",
-            )
-            CheckBoxBlock(
-                Orientation.VERTICAL,
-                checkBoxesStatesVertical,
-                onItemChange = { checkBoxData ->
-                    val index = checkBoxesStatesVertical.withIndex().first { it.value.uid == checkBoxData.uid }.index
-                    checkBoxesStatesVertical[index] = checkBoxData.copy(checked = !checkBoxData.checked)
-                },
-            )
+            ColumnComponentContainer("Vertical Check Box Block") {
+                CheckBoxBlock(
+                    Orientation.VERTICAL,
+                    checkBoxesStatesVertical,
+                    onItemChange = { checkBoxData ->
+                        val index = checkBoxesStatesVertical.withIndex().first { it.value.uid == checkBoxData.uid }.index
+                        checkBoxesStatesVertical[index] = checkBoxData.copy(checked = !checkBoxData.checked)
+                    },
+                )
+            }
         },
     )
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/FABScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/FABScreen.kt
index 201257ee0..56a7d4713 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/FABScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/FABScreen.kt
@@ -1,94 +1,89 @@
 package org.hisp.dhis.common.screens.buttons
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.FileDownload
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.ExtendedFAB
 import org.hisp.dhis.mobile.ui.designsystem.component.FAB
 import org.hisp.dhis.mobile.ui.designsystem.component.FABStyle
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun FABScreen() {
-    ColumnComponentContainer(
-        title = "FABs",
+    ColumnScreenContainer(
+        title = ButtonScreens.FAB.label,
     ) {
-        FAB(
-            style = FABStyle.SURFACE,
-            onClick = {},
-            icon = {
-                Icon(
-                    imageVector = Icons.Outlined.FileDownload,
-                    contentDescription = "File download Button",
-                )
-            },
-        )
+        ColumnComponentContainer("Default FABs") {
+            FAB(
+                style = FABStyle.SURFACE,
+                onClick = {},
+                icon = {
+                    Icon(
+                        imageVector = Icons.Outlined.FileDownload,
+                        contentDescription = "File download Button",
+                    )
+                },
+            )
 
-        FAB(
-            onClick = {},
-            icon = {
-                Icon(
-                    imageVector = Icons.Outlined.FileDownload,
-                    contentDescription = "File download Button",
-                )
-            },
-        )
+            FAB(
+                onClick = {},
+                icon = {
+                    Icon(
+                        imageVector = Icons.Outlined.FileDownload,
+                        contentDescription = "File download Button",
+                    )
+                },
+            )
 
-        FAB(
-            style = FABStyle.SECONDARY,
-            onClick = {},
-            icon = {
-                Icon(
-                    imageVector = Icons.Outlined.FileDownload,
-                    contentDescription = "File download Button",
-                )
-            },
-        )
+            FAB(
+                style = FABStyle.SECONDARY,
+                onClick = {},
+                icon = {
+                    Icon(
+                        imageVector = Icons.Outlined.FileDownload,
+                        contentDescription = "File download Button",
+                    )
+                },
+            )
+        }
 
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle(text = "Extended FABs buttons")
+        ColumnComponentContainer("Extended FABs buttons") {
+            ExtendedFAB(
+                style = FABStyle.SURFACE,
+                text = "Label",
+                onClick = {},
+                icon = {
+                    Icon(
+                        imageVector = Icons.Outlined.FileDownload,
+                        contentDescription = "File download Button",
+                    )
+                },
+            )
 
-        ExtendedFAB(
-            style = FABStyle.SURFACE,
-            text = "Label",
-            onClick = {},
-            icon = {
-                Icon(
-                    imageVector = Icons.Outlined.FileDownload,
-                    contentDescription = "File download Button",
-                )
-            },
-        )
+            ExtendedFAB(
+                text = "Label",
+                onClick = {},
+                icon = {
+                    Icon(
+                        imageVector = Icons.Outlined.FileDownload,
+                        contentDescription = "File download Button",
+                    )
+                },
+            )
 
-        ExtendedFAB(
-            text = "Label",
-            onClick = {},
-            icon = {
-                Icon(
-                    imageVector = Icons.Outlined.FileDownload,
-                    contentDescription = "File download Button",
-                )
-            },
-        )
-
-        ExtendedFAB(
-            text = "Label",
-            style = FABStyle.SECONDARY,
-            onClick = {},
-            icon = {
-                Icon(
-                    imageVector = Icons.Outlined.FileDownload,
-                    contentDescription = "File download Button",
-                )
-            },
-        )
-
-        Spacer(Modifier.size(Spacing.Spacing18))
+            ExtendedFAB(
+                text = "Label",
+                style = FABStyle.SECONDARY,
+                onClick = {},
+                icon = {
+                    Icon(
+                        imageVector = Icons.Outlined.FileDownload,
+                        contentDescription = "File download Button",
+                    )
+                },
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/IconButtonScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/IconButtonScreen.kt
index e04e2573d..25ac9c216 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/IconButtonScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/IconButtonScreen.kt
@@ -9,74 +9,71 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import org.hisp.dhis.common.screens.previews.IconButtonPreview
 import org.hisp.dhis.common.screens.previews.SquareIconButtonPreview
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.IconButtonStyle
 import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
 import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun IconButtonScreen() {
-    ColumnComponentContainer(
-        content = {
-            // SquareIconButton
-            Title("Icon Buttons")
-            RowComponentContainer(
-                title = "Square",
-                content = {
-                    SquareIconButtonPreview()
-                    SquareIconButtonPreview(false)
-                },
-            )
-            Spacer(Modifier.size(Spacing.Spacing18))
+    ColumnScreenContainer(title = ButtonScreens.ICON_BUTTON.label) {
+        // SquareIconButton
+        RowComponentContainer(
+            title = "Square",
+            content = {
+                SquareIconButtonPreview()
+                SquareIconButtonPreview(false)
+            },
+        )
+        Spacer(Modifier.size(Spacing.Spacing18))
 
-            // IconButton
-            RowComponentContainer(
-                title = "Standard",
-                content = {
-                    IconButtonPreview()
-                    IconButtonPreview(false)
-                },
-            )
-            Spacer(Modifier.size(Spacing.Spacing18))
+        // IconButton
+        RowComponentContainer(
+            title = "Standard",
+            content = {
+                IconButtonPreview()
+                IconButtonPreview(false)
+            },
+        )
+        Spacer(Modifier.size(Spacing.Spacing18))
 
-            RowComponentContainer(
-                title = "Filled",
-                content = {
-                    Row(
-                        horizontalArrangement = Arrangement.spacedBy(10.dp),
-                    ) {
-                        IconButtonPreview(true, IconButtonStyle.FILLED)
-                        IconButtonPreview(false, IconButtonStyle.FILLED)
-                    }
-                },
-            )
-            Spacer(Modifier.size(Spacing.Spacing18))
+        RowComponentContainer(
+            title = "Filled",
+            content = {
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(10.dp),
+                ) {
+                    IconButtonPreview(true, IconButtonStyle.FILLED)
+                    IconButtonPreview(false, IconButtonStyle.FILLED)
+                }
+            },
+        )
+        Spacer(Modifier.size(Spacing.Spacing18))
 
-            RowComponentContainer(
-                title = "Tonal",
-                content = {
-                    Row(
-                        horizontalArrangement = Arrangement.spacedBy(10.dp),
-                    ) {
-                        IconButtonPreview(true, IconButtonStyle.TONAL)
-                        IconButtonPreview(false, IconButtonStyle.TONAL)
-                    }
-                },
-            )
-            Spacer(Modifier.size(Spacing.Spacing18))
+        RowComponentContainer(
+            title = "Tonal",
+            content = {
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(10.dp),
+                ) {
+                    IconButtonPreview(true, IconButtonStyle.TONAL)
+                    IconButtonPreview(false, IconButtonStyle.TONAL)
+                }
+            },
+        )
+        Spacer(Modifier.size(Spacing.Spacing18))
 
-            RowComponentContainer(
-                title = "Outlined",
-                content = {
-                    Row(
-                        horizontalArrangement = Arrangement.spacedBy(10.dp),
-                    ) {
-                        IconButtonPreview(true, IconButtonStyle.OUTLINED)
-                        IconButtonPreview(false, IconButtonStyle.OUTLINED)
-                    }
-                },
-            )
-        },
-    )
+        RowComponentContainer(
+            title = "Outlined",
+            content = {
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(10.dp),
+                ) {
+                    IconButtonPreview(true, IconButtonStyle.OUTLINED)
+                    IconButtonPreview(false, IconButtonStyle.OUTLINED)
+                }
+            },
+        )
+        Spacer(Modifier.size(Spacing.Spacing18))
+    }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/RadioButtonScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/RadioButtonScreen.kt
index 847fefc3e..bc40fd6b8 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/RadioButtonScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/RadioButtonScreen.kt
@@ -1,22 +1,19 @@
 package org.hisp.dhis.common.screens.buttons
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.Column
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
 import org.hisp.dhis.common.screens.previews.RadioButtonPreview
 import org.hisp.dhis.common.screens.previews.TextRadioButtonPreview
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.Orientation
 import org.hisp.dhis.mobile.ui.designsystem.component.RadioButtonBlock
 import org.hisp.dhis.mobile.ui.designsystem.component.RadioButtonData
 import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun RadioButtonScreen() {
@@ -51,42 +48,44 @@ fun RadioButtonScreen() {
         mutableStateOf(radioButtonDataItemsHorizontal[0])
     }
 
-    ColumnComponentContainer("Radio Buttons") {
-        SubTitle("Text Radio Button")
-
-        TextRadioButtonPreview(selected == option1, true, option1) {
-            selected = option1
-        }
-        TextRadioButtonPreview(selected == option2, true, option2) {
-            selected = option2
-        }
-        TextRadioButtonPreview(selected == option3, true, option3) {
-            selected = option3
-        }
-        TextRadioButtonPreview(selected == option4, false, option4) {
-            selected = option1
+    ColumnScreenContainer(title = ButtonScreens.RADIO.label) {
+        ColumnComponentContainer("Text Radio Button") {
+            TextRadioButtonPreview(selected == option1, true, option1) {
+                selected = option1
+            }
+            TextRadioButtonPreview(selected == option2, true, option2) {
+                selected = option2
+            }
+            TextRadioButtonPreview(selected == option3, true, option3) {
+                selected = option3
+            }
+            TextRadioButtonPreview(selected == option4, false, option4) {
+                selected = option1
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
-        // RadioButton
-        SubTitle("Radio Button")
-        RowComponentContainer {
-            RadioButtonPreview(selected = true, enabled = true)
-            RadioButtonPreview(selected = true, enabled = false)
-        }
-        RowComponentContainer {
-            RadioButtonPreview(selected = false, enabled = true)
-            RadioButtonPreview(selected = false, enabled = false)
+
+        ColumnComponentContainer("Radio Button") {
+            Column {
+                RowComponentContainer {
+                    RadioButtonPreview(selected = true, enabled = true)
+                    RadioButtonPreview(selected = true, enabled = false)
+                }
+                RowComponentContainer {
+                    RadioButtonPreview(selected = false, enabled = true)
+                    RadioButtonPreview(selected = false, enabled = false)
+                }
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
-        // RadioButtonBlock
-        SubTitle("Horizontal Radio Button Block")
-        RadioButtonBlock(Orientation.HORIZONTAL, radioButtonDataItemsHorizontal, selectedItemHorizontal) {
-            selectedItemHorizontal = it
+
+        ColumnComponentContainer("Horizontal Radio Button Block") {
+            RadioButtonBlock(Orientation.HORIZONTAL, radioButtonDataItemsHorizontal, selectedItemHorizontal) {
+                selectedItemHorizontal = it
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle("Vertical Radio Button Block")
-        RadioButtonBlock(Orientation.VERTICAL, radioButtonDataItemsVertical, selectedItemVertical) {
-            selectedItemVertical = it
+        ColumnComponentContainer("Vertical Radio Button Block") {
+            RadioButtonBlock(Orientation.VERTICAL, radioButtonDataItemsVertical, selectedItemVertical) {
+                selectedItemVertical = it
+            }
         }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/SwitchScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/SwitchScreen.kt
index d67855167..a1141e741 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/SwitchScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/SwitchScreen.kt
@@ -1,41 +1,34 @@
 package org.hisp.dhis.common.screens.buttons
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.Switch
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun SwitchScreen() {
-    ColumnComponentContainer {
-        Title("Switches")
-        SubTitle("Toggled enabled and disabled switch")
-        var switchOne by remember { mutableStateOf(true) }
-        var switchTwo by remember { mutableStateOf(true) }
-        var switchThree by remember { mutableStateOf(false) }
-        var switchFour by remember { mutableStateOf(false) }
-
-        RowComponentContainer {
-            Switch(isChecked = switchOne, onCheckedChange = { switchOne = !it })
-            Switch(isChecked = switchTwo, onCheckedChange = { switchTwo = !it }, enabled = false)
+    ColumnScreenContainer(title = ButtonScreens.SWITCH.label) {
+        ColumnComponentContainer("Toggled enabled and disabled switch") {
+            var switchOne by remember { mutableStateOf(true) }
+            var switchTwo by remember { mutableStateOf(true) }
+            RowComponentContainer {
+                Switch(isChecked = switchOne, onCheckedChange = { switchOne = !it })
+                Switch(isChecked = switchTwo, onCheckedChange = { switchTwo = !it }, enabled = false)
+            }
         }
 
-        Spacer(Modifier.size(Spacing.Spacing6))
-        SubTitle("Untoggled enabled and disabled switch")
-
-        RowComponentContainer {
-            Switch(isChecked = switchThree, onCheckedChange = { switchThree = !it })
-            Switch(isChecked = switchFour, onCheckedChange = { switchFour = !it }, enabled = false)
+        ColumnComponentContainer("Unselected enabled and disabled switch") {
+            var switchThree by remember { mutableStateOf(false) }
+            var switchFour by remember { mutableStateOf(false) }
+            RowComponentContainer {
+                Switch(isChecked = switchThree, onCheckedChange = { switchThree = !it })
+                Switch(isChecked = switchFour, onCheckedChange = { switchFour = !it }, enabled = false)
+            }
         }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardDetailScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardDetailScreen.kt
index 80369caad..f5b57b841 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardDetailScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardDetailScreen.kt
@@ -10,50 +10,55 @@ import org.hisp.dhis.common.screens.previews.teiDetailList
 import org.hisp.dhis.mobile.ui.designsystem.component.AdditionalInfoItemColor
 import org.hisp.dhis.mobile.ui.designsystem.component.CardDetail
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InfoBar
 import org.hisp.dhis.mobile.ui.designsystem.component.InfoBarData
 import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun CardDetailScreen() {
-    ColumnComponentContainer(title = "List Card Components") {
-        InfoBar(
-            InfoBarData(
-                text = "Not Synced",
-                icon = {
-                    Icon(
-                        imageVector = Icons.Outlined.Sync,
-                        contentDescription = "not synced",
-                        tint = TextColor.OnSurfaceLight,
-                    )
-                },
-                actionText = "Sync",
-                onClick = {},
-                color = TextColor.OnSurfaceLight,
-                backgroundColor = Color(0xFFEFF6FA),
-            ),
-        )
-        InfoBar(
-            InfoBarData(
-                text = "Enrollment completed",
-                icon = {
-                    Icon(
-                        imageVector = Icons.Filled.CheckCircle,
-                        contentDescription = "not synced",
-                        tint = AdditionalInfoItemColor.SUCCESS.color,
-                    )
-                },
-                color = AdditionalInfoItemColor.SUCCESS.color,
-                backgroundColor = AdditionalInfoItemColor.SUCCESS.color.copy(alpha = 0.1f),
-            ),
-        )
+    ColumnScreenContainer(title = Cards.CARD_DETAIL.label) {
+        ColumnComponentContainer("Info Bar") {
+            InfoBar(
+                InfoBarData(
+                    text = "Not Synced",
+                    icon = {
+                        Icon(
+                            imageVector = Icons.Outlined.Sync,
+                            contentDescription = "not synced",
+                            tint = TextColor.OnSurfaceLight,
+                        )
+                    },
+                    actionText = "Sync",
+                    onClick = {},
+                    color = TextColor.OnSurfaceLight,
+                    backgroundColor = Color(0xFFEFF6FA),
+                ),
+            )
+            InfoBar(
+                InfoBarData(
+                    text = "Enrollment completed",
+                    icon = {
+                        Icon(
+                            imageVector = Icons.Filled.CheckCircle,
+                            contentDescription = "not synced",
+                            tint = AdditionalInfoItemColor.SUCCESS.color,
+                        )
+                    },
+                    color = AdditionalInfoItemColor.SUCCESS.color,
+                    backgroundColor = AdditionalInfoItemColor.SUCCESS.color.copy(alpha = 0.1f),
+                ),
+            )
+        }
 
-        CardDetail(
-            avatar = null,
-            title = "Narayan Khanna, M, 32",
-            additionalInfoList = teiDetailList,
-            expandLabelText = "Show more",
-            shrinkLabelText = "Show less",
-        )
+        ColumnComponentContainer("Card Detail") {
+            CardDetail(
+                avatar = null,
+                title = "Narayan Khanna, M, 32",
+                additionalInfoList = teiDetailList,
+                expandLabelText = "Show more",
+                shrinkLabelText = "Show less",
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardsScreen.kt
index ec5e35d98..66b2a9e76 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardsScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/CardsScreen.kt
@@ -4,13 +4,12 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import org.hisp.dhis.common.screens.NoComponentSelectedScreen
+import org.hisp.dhis.common.screens.components.GroupComponentDropDown
 import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem
-import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown
-import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 
 @Composable
 fun CardsScreen() {
-    val currentScreen = remember { mutableStateOf(Cards.CARD_DETAIL) }
+    val currentScreen = remember { mutableStateOf(Cards.NO_COMPONENT_SELECTED) }
 
     val screenDropdownItemList = mutableListOf<DropdownItem>()
     Cards.entries.forEach {
@@ -18,13 +17,11 @@ fun CardsScreen() {
             screenDropdownItemList.add(DropdownItem(it.label))
         }
     }
-    InputDropDown(
-        "Display",
+    GroupComponentDropDown(
         dropdownItems = screenDropdownItemList.toList(),
         onItemSelected = { currentScreen.value = getCurrentScreen(it.label) },
         onResetButtonClicked = { currentScreen.value = Cards.NO_COMPONENT_SELECTED },
         selectedItem = DropdownItem(currentScreen.value.label),
-        state = InputShellState.UNFOCUSED,
     )
     when (currentScreen.value) {
         Cards.CARD_DETAIL -> CardDetailScreen()
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/ListCardScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/ListCardScreen.kt
index 937ff8a5d..bd6ae012e 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/ListCardScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/cards/ListCardScreen.kt
@@ -1,8 +1,6 @@
 package org.hisp.dhis.common.screens.cards
 
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Event
 import androidx.compose.material.icons.outlined.Sync
@@ -31,491 +29,485 @@ import org.hisp.dhis.mobile.ui.designsystem.component.AvatarStyle
 import org.hisp.dhis.mobile.ui.designsystem.component.Button
 import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.ListCard
 import org.hisp.dhis.mobile.ui.designsystem.component.ListCardDescriptionModel
 import org.hisp.dhis.mobile.ui.designsystem.component.ListCardTitleModel
 import org.hisp.dhis.mobile.ui.designsystem.component.MetadataAvatar
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.resource.provideDHIS2Icon
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun ListCardScreen() {
-    ColumnComponentContainer(title = "List Card Components") {
+    ColumnScreenContainer(title = Cards.LIST_CARD.label) {
         var showLoading1 by remember {
             mutableStateOf(false)
         }
-        SubTitle("Tei list:")
-        SubTitle("With shadow")
-        ListCard(
-            listAvatar = {
-                Avatar(
-                    textAvatar = "P",
-                    style = AvatarStyle.TEXT,
-                )
-            },
-            title = ListCardTitleModel(text = "Palak Khanna, F, 61"),
-            lastUpdated = "5 hours",
-            additionalInfoList = basicAdditionalItemList.toMutableList(),
-            actionButton = {
-                Button(
-                    style = ButtonStyle.TONAL,
-                    text = "Retry sync",
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Outlined.Sync,
-                            contentDescription = "Icon Button",
-                            tint = TextColor.OnPrimaryContainer,
-                        )
-                    },
-                    onClick = { showLoading1 = !showLoading1 },
-                    modifier = Modifier.fillMaxWidth(),
-                )
-            },
-            onCardClick = {},
-            loading = showLoading1,
-        )
-        var showLoading2 by remember {
-            mutableStateOf(false)
-        }
-        ListCard(
-            listAvatar = {
-                Avatar(
-                    textAvatar = "P",
-                    style = AvatarStyle.TEXT,
-                )
-            },
-            title = ListCardTitleModel(text = "Palak Khanna, F, 61"),
-            lastUpdated = "5 hours",
-            additionalInfoList = basicAdditionalItemListWithLongKeyText.toMutableList(),
-            actionButton = {
-                Button(
-                    style = ButtonStyle.TONAL,
-                    text = "Retry sync",
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Outlined.Sync,
-                            contentDescription = "Icon Button",
-                            tint = TextColor.OnPrimaryContainer,
-                        )
-                    },
-                    onClick = { showLoading2 = !showLoading2 },
-                    modifier = Modifier.fillMaxWidth(),
-                )
-            },
-            onCardClick = {},
-            loading = showLoading2,
-        )
-        var showLoading3 by remember {
-            mutableStateOf(false)
-        }
-        ListCard(
-            listAvatar = {
-                Avatar(
-                    textAvatar = "P",
-                    style = AvatarStyle.TEXT,
-                )
-            },
-            title = ListCardTitleModel(text = "Palak Khanna, F, 61"),
-            lastUpdated = "5 hours",
-            additionalInfoList = basicAdditionalItemListWithMediumKeyText.toMutableList(),
-            actionButton = {
-                Button(
-                    style = ButtonStyle.TONAL,
-                    text = "Retry sync",
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Outlined.Sync,
-                            contentDescription = "Icon Button",
-                            tint = TextColor.OnPrimaryContainer,
-                        )
-                    },
-                    onClick = { showLoading3 = !showLoading3 },
-                    modifier = Modifier.fillMaxWidth(),
-                )
-            },
-            onCardClick = {},
-            loading = showLoading3,
-        )
-        var showLoading4 by remember {
-            mutableStateOf(false)
-        }
-        ListCard(
-            listAvatar = {
-                Avatar(
-                    textAvatar = "P",
-                    style = AvatarStyle.TEXT,
-                )
-            },
-            title = ListCardTitleModel(text = "Palak Khanna, F, 61"),
-            lastUpdated = "5 hours",
-            additionalInfoList = basicAdditionalItemListWithLongValue.toMutableList(),
-            actionButton = {
-                Button(
-                    style = ButtonStyle.TONAL,
-                    text = "Retry sync",
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Outlined.Sync,
-                            contentDescription = "Icon Button",
-                            tint = TextColor.OnPrimaryContainer,
-                        )
-                    },
-                    onClick = { showLoading4 = !showLoading4 },
-                    modifier = Modifier.fillMaxWidth(),
-                )
-            },
-            onCardClick = {},
-            loading = showLoading4,
-        )
-        var showLoading5 by remember {
-            mutableStateOf(false)
-        }
-        ListCard(
-            listAvatar = {
-                Avatar(
-                    imagePainter = provideDHIS2Icon("dhis2_microscope_outline"),
-                    style = AvatarStyle.IMAGE,
-                )
-            },
-            title = ListCardTitleModel(text = "Kunal Choudary, M, 55"),
-            lastUpdated = "24 min",
-            additionalInfoList = enrollmentCompletedList.toMutableList(),
-            actionButton = {
-                Button(
-                    style = ButtonStyle.TONAL,
-                    text = "Retry sync",
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Outlined.Sync,
-                            contentDescription = "Icon Button",
-                            tint = TextColor.OnPrimaryContainer,
-                        )
-                    },
-                    onClick = { showLoading5 = !showLoading5 },
-                    modifier = Modifier.fillMaxWidth(),
-                )
-            },
-            onCardClick = {},
-            loading = showLoading5,
-        )
-        SubTitle("Without shadow")
-
-        var showLoading6 by remember {
-            mutableStateOf(false)
-        }
-        ListCard(
-            shadow = false,
-            listAvatar = {
-                Avatar(
-                    metadataAvatar = {
-                        MetadataAvatar(
-                            icon = {
-                                Icon(
-                                    painter = provideDHIS2Icon("dhis2_microscope_outline"),
-                                    contentDescription = "Button",
-                                    tint = SurfaceColor.Primary,
-                                )
-                            },
-                        )
-                    },
-                    style = AvatarStyle.METADATA,
-                )
-            },
-            title = ListCardTitleModel(text = "Anita Mathews, F, 72"),
-            lastUpdated = "5 hours",
-            additionalInfoList = fullItemList.toMutableList(),
-            actionButton = {
-                Button(
-                    style = ButtonStyle.TONAL,
-                    text = "Retry sync",
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Outlined.Sync,
-                            contentDescription = "Icon Button",
-                            tint = TextColor.OnPrimaryContainer,
-                        )
-                    },
-                    onClick = { showLoading6 = !showLoading6 },
-                    modifier = Modifier.fillMaxWidth(),
-                )
-            },
-            onCardClick = {},
-            loading = showLoading6,
-        )
-
-        var showLoading7 by remember {
-            mutableStateOf(false)
-        }
-        val errorList = remember {
+        val eventsTimelineTeiDashboardList = remember {
             mutableStateListOf(
-                AdditionalInfoItem(key = "Phone", value = "+234 123 111 6785"),
                 AdditionalInfoItem(key = "Date of birth", value = "12/12/1945"),
             )
         }
-        val eventsTimelineTeiDashboardList = remember {
-            mutableStateListOf(
-                AdditionalInfoItem(key = "Date of birth", value = "12/12/1945"),
+        ColumnComponentContainer("Tei list with shadow") {
+            ListCard(
+                listAvatar = {
+                    Avatar(
+                        textAvatar = "P",
+                        style = AvatarStyle.TEXT,
+                    )
+                },
+                title = ListCardTitleModel(text = "Palak Khanna, F, 61"),
+                lastUpdated = "5 hours",
+                additionalInfoList = basicAdditionalItemList.toMutableList(),
+                actionButton = {
+                    Button(
+                        style = ButtonStyle.TONAL,
+                        text = "Retry sync",
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Outlined.Sync,
+                                contentDescription = "Icon Button",
+                                tint = TextColor.OnPrimaryContainer,
+                            )
+                        },
+                        onClick = { showLoading1 = !showLoading1 },
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                },
+                onCardClick = {},
+                loading = showLoading1,
+            )
+            var showLoading2 by remember {
+                mutableStateOf(false)
+            }
+            ListCard(
+                listAvatar = {
+                    Avatar(
+                        textAvatar = "P",
+                        style = AvatarStyle.TEXT,
+                    )
+                },
+                title = ListCardTitleModel(text = "Palak Khanna, F, 61"),
+                lastUpdated = "5 hours",
+                additionalInfoList = basicAdditionalItemListWithLongKeyText.toMutableList(),
+                actionButton = {
+                    Button(
+                        style = ButtonStyle.TONAL,
+                        text = "Retry sync",
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Outlined.Sync,
+                                contentDescription = "Icon Button",
+                                tint = TextColor.OnPrimaryContainer,
+                            )
+                        },
+                        onClick = { showLoading2 = !showLoading2 },
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                },
+                onCardClick = {},
+                loading = showLoading2,
+            )
+            var showLoading3 by remember {
+                mutableStateOf(false)
+            }
+            ListCard(
+                listAvatar = {
+                    Avatar(
+                        textAvatar = "P",
+                        style = AvatarStyle.TEXT,
+                    )
+                },
+                title = ListCardTitleModel(text = "Palak Khanna, F, 61"),
+                lastUpdated = "5 hours",
+                additionalInfoList = basicAdditionalItemListWithMediumKeyText.toMutableList(),
+                actionButton = {
+                    Button(
+                        style = ButtonStyle.TONAL,
+                        text = "Retry sync",
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Outlined.Sync,
+                                contentDescription = "Icon Button",
+                                tint = TextColor.OnPrimaryContainer,
+                            )
+                        },
+                        onClick = { showLoading3 = !showLoading3 },
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                },
+                onCardClick = {},
+                loading = showLoading3,
+            )
+            var showLoading4 by remember {
+                mutableStateOf(false)
+            }
+            ListCard(
+                listAvatar = {
+                    Avatar(
+                        textAvatar = "P",
+                        style = AvatarStyle.TEXT,
+                    )
+                },
+                title = ListCardTitleModel(text = "Palak Khanna, F, 61"),
+                lastUpdated = "5 hours",
+                additionalInfoList = basicAdditionalItemListWithLongValue.toMutableList(),
+                actionButton = {
+                    Button(
+                        style = ButtonStyle.TONAL,
+                        text = "Retry sync",
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Outlined.Sync,
+                                contentDescription = "Icon Button",
+                                tint = TextColor.OnPrimaryContainer,
+                            )
+                        },
+                        onClick = { showLoading4 = !showLoading4 },
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                },
+                onCardClick = {},
+                loading = showLoading4,
+            )
+            var showLoading5 by remember {
+                mutableStateOf(false)
+            }
+            ListCard(
+                listAvatar = {
+                    Avatar(
+                        imagePainter = provideDHIS2Icon("dhis2_microscope_outline"),
+                        style = AvatarStyle.IMAGE,
+                    )
+                },
+                title = ListCardTitleModel(text = "Kunal Choudary, M, 55"),
+                lastUpdated = "24 min",
+                additionalInfoList = enrollmentCompletedList.toMutableList(),
+                actionButton = {
+                    Button(
+                        style = ButtonStyle.TONAL,
+                        text = "Retry sync",
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Outlined.Sync,
+                                contentDescription = "Icon Button",
+                                tint = TextColor.OnPrimaryContainer,
+                            )
+                        },
+                        onClick = { showLoading5 = !showLoading5 },
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                },
+                onCardClick = {},
+                loading = showLoading5,
             )
         }
 
-        val errorItem = AdditionalInfoItem(
-            icon = {
-                Icon(
-                    imageVector = Icons.Outlined.SyncProblem,
-                    contentDescription = "Icon Button",
-                    tint = AdditionalInfoItemColor.ERROR.color,
-                )
-            },
-            value = "Sync warning",
-            color = AdditionalInfoItemColor.ERROR.color,
-            isConstantItem = true,
-        )
-
-        ListCard(
-            listAvatar = {
-                Avatar(
-                    textAvatar = "A",
-                    style = AvatarStyle.TEXT,
-                )
-            },
-            title = ListCardTitleModel(text = "Aditi Singh, F, 61"),
-            lastUpdated = "5 hours",
-            additionalInfoList = errorList,
-            actionButton = {
-                Button(
-                    style = ButtonStyle.TONAL,
-                    text = "Retry sync",
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Outlined.Sync,
-                            contentDescription = "Icon Button",
-                            tint = TextColor.OnPrimaryContainer,
-                        )
-                    },
-                    onClick = {
-                        if (!showLoading7) {
-                            errorList.remove(errorItem)
-                        } else {
-                            errorList.add(errorItem)
-                        }
-                        showLoading7 = !showLoading7
-                    },
-                    modifier = Modifier.fillMaxWidth(),
-                )
-            },
-            onCardClick = {},
-            loading = showLoading7,
-        )
-        Spacer(Modifier.size(Spacing.Spacing16))
-        SubTitle("Single events list:")
-        SubTitle("With shadow:")
+        ColumnComponentContainer("Without shadow") {
+            var showLoading6 by remember {
+                mutableStateOf(false)
+            }
+            ListCard(
+                shadow = false,
+                listAvatar = {
+                    Avatar(
+                        metadataAvatar = {
+                            MetadataAvatar(
+                                icon = {
+                                    Icon(
+                                        painter = provideDHIS2Icon("dhis2_microscope_outline"),
+                                        contentDescription = "Button",
+                                        tint = SurfaceColor.Primary,
+                                    )
+                                },
+                            )
+                        },
+                        style = AvatarStyle.METADATA,
+                    )
+                },
+                title = ListCardTitleModel(text = "Anita Mathews, F, 72"),
+                lastUpdated = "5 hours",
+                additionalInfoList = fullItemList.toMutableList(),
+                actionButton = {
+                    Button(
+                        style = ButtonStyle.TONAL,
+                        text = "Retry sync",
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Outlined.Sync,
+                                contentDescription = "Icon Button",
+                                tint = TextColor.OnPrimaryContainer,
+                            )
+                        },
+                        onClick = { showLoading6 = !showLoading6 },
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                },
+                onCardClick = {},
+                loading = showLoading6,
+            )
 
-        ListCard(
-            title = ListCardTitleModel(text = "12/18/2021"),
-            lastUpdated = "now",
-            additionalInfoList = basicAdditionalItemList,
-            actionButton = {
-                Button(
-                    style = ButtonStyle.TONAL,
-                    text = "Retry sync",
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Outlined.Sync,
-                            contentDescription = "Icon Button",
-                            tint = TextColor.OnPrimaryContainer,
-                        )
-                    },
-                    onClick = { },
-                    modifier = Modifier.fillMaxWidth(),
+            var showLoading7 by remember {
+                mutableStateOf(false)
+            }
+            val errorList = remember {
+                mutableStateListOf(
+                    AdditionalInfoItem(key = "Phone", value = "+234 123 111 6785"),
+                    AdditionalInfoItem(key = "Date of birth", value = "12/12/1945"),
                 )
-            },
-            onCardClick = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing16))
-        SubTitle("Without shadow:")
+            }
 
-        ListCard(
-            shadow = false,
-            title = ListCardTitleModel(text = "12/18/2021"),
-            lastUpdated = "now",
-            additionalInfoList = basicAdditionalItemList,
-            actionButton = {
-                Button(
-                    style = ButtonStyle.TONAL,
-                    text = "Retry sync",
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Outlined.Sync,
-                            contentDescription = "Icon Button",
-                            tint = TextColor.OnPrimaryContainer,
-                        )
-                    },
-                    onClick = { },
-                    modifier = Modifier.fillMaxWidth(),
-                )
-            },
-            onCardClick = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing16))
-        SubTitle("Events in timeline in TEI dashboard:")
-        SubTitle("With shadow:")
+            val errorItem = AdditionalInfoItem(
+                icon = {
+                    Icon(
+                        imageVector = Icons.Outlined.SyncProblem,
+                        contentDescription = "Icon Button",
+                        tint = AdditionalInfoItemColor.ERROR.color,
+                    )
+                },
+                value = "Sync warning",
+                color = AdditionalInfoItemColor.ERROR.color,
+                isConstantItem = true,
+            )
 
-        ListCard(
-            listAvatar = {
-                Avatar(
-                    metadataAvatar = {
-                        MetadataAvatar(
-                            icon = {
-                                Icon(
-                                    painter = provideDHIS2Icon("dhis2_baby_male_0203m_positive"),
-                                    contentDescription = "Button",
+            ListCard(
+                listAvatar = {
+                    Avatar(
+                        textAvatar = "A",
+                        style = AvatarStyle.TEXT,
+                    )
+                },
+                title = ListCardTitleModel(text = "Aditi Singh, F, 61"),
+                lastUpdated = "5 hours",
+                additionalInfoList = errorList,
+                actionButton = {
+                    Button(
+                        style = ButtonStyle.TONAL,
+                        text = "Retry sync",
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Outlined.Sync,
+                                contentDescription = "Icon Button",
+                                tint = TextColor.OnPrimaryContainer,
+                            )
+                        },
+                        onClick = {
+                            if (!showLoading7) {
+                                errorList.remove(errorItem)
+                            } else {
+                                errorList.add(errorItem)
+                            }
+                            showLoading7 = !showLoading7
+                        },
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                },
+                onCardClick = {},
+                loading = showLoading7,
+            )
+        }
 
-                                )
-                            },
-                            iconTint = Color(0xFF11D9D9),
-                            size = AvatarSize.Large,
-                        )
-                    },
-                    style = AvatarStyle.METADATA,
-                )
-            },
-            title = ListCardTitleModel(text = "12/18/2021 at 16:30"),
-            lastUpdated = "now",
-            additionalInfoList = eventsTimelineTeiDashboardList,
-            actionButton = {
-                Button(
-                    style = ButtonStyle.TONAL,
-                    text = "Retry sync",
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Outlined.Sync,
-                            contentDescription = "Icon Button",
-                            tint = TextColor.OnPrimaryContainer,
-                        )
-                    },
-                    onClick = {},
-                    modifier = Modifier.fillMaxWidth(),
-                )
-            },
-            onCardClick = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing16))
+        ColumnComponentContainer("Single events list with shadow") {
+            ListCard(
+                title = ListCardTitleModel(text = "12/18/2021"),
+                lastUpdated = "now",
+                additionalInfoList = basicAdditionalItemList,
+                actionButton = {
+                    Button(
+                        style = ButtonStyle.TONAL,
+                        text = "Retry sync",
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Outlined.Sync,
+                                contentDescription = "Icon Button",
+                                tint = TextColor.OnPrimaryContainer,
+                            )
+                        },
+                        onClick = { },
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                },
+                onCardClick = {},
+            )
+        }
 
-        SubTitle("Without shadow:")
-        ListCard(
-            shadow = false,
-            listAvatar = {
-                Avatar(
-                    metadataAvatar = {
-                        MetadataAvatar(
-                            icon = {
-                                Icon(
-                                    painter = provideDHIS2Icon("dhis2_baby_male_0203m_positive"),
-                                    contentDescription = "Button",
+        ColumnComponentContainer("Single events list without shadow:") {
+            ListCard(
+                shadow = false,
+                title = ListCardTitleModel(text = "12/18/2021"),
+                lastUpdated = "now",
+                additionalInfoList = basicAdditionalItemList,
+                actionButton = {
+                    Button(
+                        style = ButtonStyle.TONAL,
+                        text = "Retry sync",
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Outlined.Sync,
+                                contentDescription = "Icon Button",
+                                tint = TextColor.OnPrimaryContainer,
+                            )
+                        },
+                        onClick = { },
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                },
+                onCardClick = {},
+            )
+        }
 
-                                )
-                            },
-                            iconTint = Color(0xFF11D9D9),
-                            size = AvatarSize.Large,
-                        )
-                    },
-                    style = AvatarStyle.METADATA,
-                )
-            },
-            title = ListCardTitleModel(text = "12/18/2021 at 16:30"),
-            description = ListCardDescriptionModel(text = "Birth"),
-            lastUpdated = "now",
-            additionalInfoList = eventsTimelineTeiDashboardList,
-            onCardClick = {},
-        )
+        ColumnComponentContainer("Events in timeline in TEI dashboard with shadow") {
+            ListCard(
+                listAvatar = {
+                    Avatar(
+                        metadataAvatar = {
+                            MetadataAvatar(
+                                icon = {
+                                    Icon(
+                                        painter = provideDHIS2Icon("dhis2_baby_male_0203m_positive"),
+                                        contentDescription = "Button",
+                                    )
+                                },
+                                iconTint = Color(0xFF11D9D9),
+                                size = AvatarSize.Large,
+                            )
+                        },
+                        style = AvatarStyle.METADATA,
+                    )
+                },
+                title = ListCardTitleModel(text = "12/18/2021 at 16:30"),
+                lastUpdated = "now",
+                additionalInfoList = eventsTimelineTeiDashboardList,
+                actionButton = {
+                    Button(
+                        style = ButtonStyle.TONAL,
+                        text = "Retry sync",
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Outlined.Sync,
+                                contentDescription = "Icon Button",
+                                tint = TextColor.OnPrimaryContainer,
+                            )
+                        },
+                        onClick = {},
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                },
+                onCardClick = {},
+            )
+        }
 
-        SubTitle("ListCards for events  displayed in TEI dashboard:")
+        ColumnComponentContainer("Events in timeline in TEI dashboard without shadow:") {
+            ListCard(
+                shadow = false,
+                listAvatar = {
+                    Avatar(
+                        metadataAvatar = {
+                            MetadataAvatar(
+                                icon = {
+                                    Icon(
+                                        painter = provideDHIS2Icon("dhis2_baby_male_0203m_positive"),
+                                        contentDescription = "Button",
+                                    )
+                                },
+                                iconTint = Color(0xFF11D9D9),
+                                size = AvatarSize.Large,
+                            )
+                        },
+                        style = AvatarStyle.METADATA,
+                    )
+                },
+                title = ListCardTitleModel(text = "12/18/2021 at 16:30"),
+                description = ListCardDescriptionModel(text = "Birth"),
+                lastUpdated = "now",
+                additionalInfoList = eventsTimelineTeiDashboardList,
+                onCardClick = {},
+            )
+        }
 
-        val eventsInTeiDashboardTitleStyle = MaterialTheme.typography.titleSmall
+        ColumnComponentContainer("ListCards for events  displayed in TEI dashboard:") {
+            val eventsInTeiDashboardTitleStyle = MaterialTheme.typography.titleSmall
 
-        ListCard(
+            ListCard(
 
-            title = ListCardTitleModel(text = "Scheduled for 09/18/2021", style = eventsInTeiDashboardTitleStyle, color = TextColor.OnSurface),
-            additionalInfoList = listOf(
-                AdditionalInfoItem(
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Outlined.Event,
-                            contentDescription = "Icon Button",
-                            tint = AdditionalInfoItemColor.SUCCESS.color,
-                        )
-                    },
-                    value = "In 60 days",
-                    color = AdditionalInfoItemColor.SUCCESS.color,
-                    isConstantItem = true,
+                title = ListCardTitleModel(text = "Scheduled for 09/18/2021", style = eventsInTeiDashboardTitleStyle, color = TextColor.OnSurface),
+                additionalInfoList = listOf(
+                    AdditionalInfoItem(
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Outlined.Event,
+                                contentDescription = "Icon Button",
+                                tint = AdditionalInfoItemColor.SUCCESS.color,
+                            )
+                        },
+                        value = "In 60 days",
+                        color = AdditionalInfoItemColor.SUCCESS.color,
+                        isConstantItem = true,
+                    ),
                 ),
+                onCardClick = {},
+            )
 
-            ),
-            onCardClick = {},
-        )
-
-        ListCard(
+            ListCard(
 
-            title = ListCardTitleModel(text = "09/18/2021", style = eventsInTeiDashboardTitleStyle, color = TextColor.OnSurface),
-            description = ListCardDescriptionModel(text = "Treatment visits"),
-            additionalInfoList = listOf(
-                AdditionalInfoItem(
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Outlined.Event,
-                            contentDescription = "Icon Button",
-                            tint = AdditionalInfoItemColor.SUCCESS.color,
-                        )
-                    },
-                    value = "In 60 days",
-                    color = AdditionalInfoItemColor.SUCCESS.color,
-                    isConstantItem = true,
+                title = ListCardTitleModel(text = "09/18/2021", style = eventsInTeiDashboardTitleStyle, color = TextColor.OnSurface),
+                description = ListCardDescriptionModel(text = "Treatment visits"),
+                additionalInfoList = listOf(
+                    AdditionalInfoItem(
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Outlined.Event,
+                                contentDescription = "Icon Button",
+                                tint = AdditionalInfoItemColor.SUCCESS.color,
+                            )
+                        },
+                        value = "In 60 days",
+                        color = AdditionalInfoItemColor.SUCCESS.color,
+                        isConstantItem = true,
+                    ),
+                    AdditionalInfoItem(key = "Drug resistance", value = "Monoresistance"),
+                    AdditionalInfoItem(key = "treatment", value = "Initial regiment- first-line drugs"),
                 ),
-                AdditionalInfoItem(key = "Drug resistance", value = "Monoresistance"),
-                AdditionalInfoItem(key = "treatment", value = "Initial regiment- first-line drugs"),
-            ),
 
-            onCardClick = {},
-        )
-        ListCard(
-            listAvatar = {
-                Avatar(
-                    metadataAvatar = {
-                        MetadataAvatar(
-                            icon = {
-                                Icon(
-                                    painter = provideDHIS2Icon("dhis2_microscope_outline"),
-                                    contentDescription = "Button",
-                                    tint = SurfaceColor.Primary,
-                                )
-                            },
-                        )
-                    },
-                    style = AvatarStyle.METADATA,
-                )
-            },
-            title = ListCardTitleModel(text = "Scheduled for 09/18/2021", style = eventsInTeiDashboardTitleStyle, color = TextColor.OnSurface),
-            additionalInfoList = listOf(
-                AdditionalInfoItem(
-                    icon = {
-                        Icon(
-                            imageVector = Icons.Outlined.Event,
-                            contentDescription = "Icon Button",
-                            tint = AdditionalInfoItemColor.SUCCESS.color,
-                        )
-                    },
-                    value = "In 60 days",
-                    color = AdditionalInfoItemColor.SUCCESS.color,
-                    isConstantItem = true,
+                onCardClick = {},
+            )
+            ListCard(
+                listAvatar = {
+                    Avatar(
+                        metadataAvatar = {
+                            MetadataAvatar(
+                                icon = {
+                                    Icon(
+                                        painter = provideDHIS2Icon("dhis2_microscope_outline"),
+                                        contentDescription = "Button",
+                                        tint = SurfaceColor.Primary,
+                                    )
+                                },
+                            )
+                        },
+                        style = AvatarStyle.METADATA,
+                    )
+                },
+                title = ListCardTitleModel(text = "Scheduled for 09/18/2021", style = eventsInTeiDashboardTitleStyle, color = TextColor.OnSurface),
+                additionalInfoList = listOf(
+                    AdditionalInfoItem(
+                        icon = {
+                            Icon(
+                                imageVector = Icons.Outlined.Event,
+                                contentDescription = "Icon Button",
+                                tint = AdditionalInfoItemColor.SUCCESS.color,
+                            )
+                        },
+                        value = "In 60 days",
+                        color = AdditionalInfoItemColor.SUCCESS.color,
+                        isConstantItem = true,
+                    ),
+                    AdditionalInfoItem(key = "Drug resistance", value = "Monoresistance"),
+                    AdditionalInfoItem(key = "treatment", value = "Initial regiment- first-line drugs"),
                 ),
-                AdditionalInfoItem(key = "Drug resistance", value = "Monoresistance"),
-                AdditionalInfoItem(key = "treatment", value = "Initial regiment- first-line drugs"),
-            ),
-            onCardClick = {},
-        )
-        Spacer(Modifier.size(Spacing.Spacing16))
+                onCardClick = {},
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/components/GroupComponentDropDown.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/components/GroupComponentDropDown.kt
new file mode 100644
index 000000000..66bb7cba0
--- /dev/null
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/components/GroupComponentDropDown.kt
@@ -0,0 +1,31 @@
+package org.hisp.dhis.common.screens.components
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem
+import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown
+import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
+import org.hisp.dhis.mobile.ui.designsystem.component.InputStyle
+import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
+import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
+
+@Composable
+fun GroupComponentDropDown(
+    modifier: Modifier = Modifier,
+    dropdownItems: List<DropdownItem>,
+    onItemSelected: (DropdownItem) -> Unit,
+    onResetButtonClicked: () -> Unit,
+    selectedItem: DropdownItem? = null,
+) {
+    InputDropDown(
+        modifier = modifier.padding(horizontal = Spacing.Spacing16),
+        title = "Component",
+        dropdownItems = dropdownItems,
+        onItemSelected = onItemSelected,
+        onResetButtonClicked = onResetButtonClicked,
+        selectedItem = selectedItem,
+        state = InputShellState.UNFOCUSED,
+        inputStyle = InputStyle.DataInputStyle().apply { backGroundColor = SurfaceColor.SurfaceBright },
+    )
+}
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/BadgesScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/BadgesScreen.kt
index 590fd7ee7..fc60fa352 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/BadgesScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/BadgesScreen.kt
@@ -3,22 +3,25 @@ package org.hisp.dhis.common.screens.others
 import androidx.compose.runtime.Composable
 import org.hisp.dhis.mobile.ui.designsystem.component.Badge
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.ErrorBadge
 
 @Composable
 fun BadgesScreen() {
-    ColumnComponentContainer(title = "Badges") {
-        Badge()
-        Badge(text = "3")
-        Badge(text = "32")
-        Badge(text = "321")
-        Badge(text = "4321")
-    }
-    ColumnComponentContainer(title = "Error badges") {
-        ErrorBadge()
-        ErrorBadge(text = "3")
-        ErrorBadge(text = "32")
-        ErrorBadge(text = "321")
-        ErrorBadge(text = "4321")
+    ColumnScreenContainer(title = "Badge component") {
+        ColumnComponentContainer("Basic badges") {
+            Badge()
+            Badge(text = "3")
+            Badge(text = "32")
+            Badge(text = "321")
+            Badge(text = "4321")
+        }
+        ColumnComponentContainer("Error badges") {
+            ErrorBadge()
+            ErrorBadge(text = "3")
+            ErrorBadge(text = "32")
+            ErrorBadge(text = "321")
+            ErrorBadge(text = "4321")
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ChipsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ChipsScreen.kt
index 770aaeca0..be9db47f8 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ChipsScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ChipsScreen.kt
@@ -1,6 +1,5 @@
 package org.hisp.dhis.common.screens.others
 
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Search
@@ -14,94 +13,94 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import org.hisp.dhis.mobile.ui.designsystem.component.AssistChip
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.FilterChip
 import org.hisp.dhis.mobile.ui.designsystem.component.InputChip
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun ChipsScreen() {
-    ColumnComponentContainer {
-        SubTitle("Input Chips")
-        var isSelected by remember { mutableStateOf(false) }
-        var isSelected1 by remember { mutableStateOf(true) }
-        var isSelected2 by remember { mutableStateOf(false) }
-        var isSelected3 by remember { mutableStateOf(true) }
-        InputChip(label = "Label", selected = isSelected, onSelected = { isSelected = it })
-        InputChip(label = "Label", selected = !isSelected1, onSelected = { isSelected1 = !it })
-        InputChip(
-            label = "Label",
-            selected = !isSelected2,
-            withTrailingIcon = true,
-            onSelected = { isSelected2 = !it },
-            onIconSelected = {},
-        )
-        InputChip(
-            label = "Label",
-            selected = !isSelected3,
-            withTrailingIcon = true,
-            onSelected = { isSelected3 = !it },
-            onIconSelected = {},
-        )
-        InputChip(
-            label = "Label",
-            enabled = false,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+    ColumnScreenContainer("Chip component") {
+        ColumnComponentContainer("Input Chips") {
+            var isSelected by remember { mutableStateOf(false) }
+            var isSelected1 by remember { mutableStateOf(true) }
+            var isSelected2 by remember { mutableStateOf(false) }
+            var isSelected3 by remember { mutableStateOf(true) }
+            InputChip(label = "Label", selected = isSelected, onSelected = { isSelected = it })
+            InputChip(label = "Label", selected = !isSelected1, onSelected = { isSelected1 = !it })
+            InputChip(
+                label = "Label",
+                selected = !isSelected2,
+                withTrailingIcon = true,
+                onSelected = { isSelected2 = !it },
+                onIconSelected = {},
+            )
+            InputChip(
+                label = "Label",
+                selected = !isSelected3,
+                withTrailingIcon = true,
+                onSelected = { isSelected3 = !it },
+                onIconSelected = {},
+            )
+            InputChip(
+                label = "Label",
+                enabled = false,
+            )
+        }
 
-        SubTitle("Input Chips With badges")
-        InputChip(label = "Label", selected = false, badge = "3")
-        InputChip(label = "Label", selected = true, badge = "3")
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Input Chips With badges") {
+            InputChip(label = "Label", selected = false, badge = "3")
+            InputChip(label = "Label", selected = true, badge = "3")
+        }
 
-        SubTitle("Filter Chips")
-        var isSelected4 by remember { mutableStateOf(false) }
-        FilterChip(label = "Label", selected = isSelected4, onSelected = { isSelected4 = it })
-        FilterChip(label = "Label", selected = !isSelected4, onSelected = { isSelected4 = !it })
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Filter Chips") {
+            var isSelected4 by remember { mutableStateOf(false) }
+            FilterChip(label = "Label", selected = isSelected4, onSelected = { isSelected4 = it })
+            FilterChip(label = "Label", selected = !isSelected4, onSelected = { isSelected4 = !it })
+        }
 
-        SubTitle("Filter Chips With badges")
-        FilterChip(label = "Label", selected = true, badge = "3")
-        FilterChip(label = "Label", selected = false, badge = "3")
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Filter Chips With badges") {
+            FilterChip(label = "Label", selected = true, badge = "3")
+            FilterChip(label = "Label", selected = false, badge = "3")
+        }
 
-        SubTitle("Assist Chips")
-        AssistChip(
-            label = "Label",
-            onClick = { },
-        )
-        AssistChip(
-            label = "Label",
-            icon = {
-                Icon(
-                    imageVector = Icons.Filled.Search,
-                    contentDescription = "search icon",
-                    modifier = Modifier
-                        .size(AssistChipDefaults.IconSize),
-                )
-            },
-            onClick = { },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Assist Chips") {
+            AssistChip(
+                label = "Label",
+                onClick = { },
+            )
+            AssistChip(
+                label = "Label",
+                icon = {
+                    Icon(
+                        imageVector = Icons.Filled.Search,
+                        contentDescription = "search icon",
+                        modifier = Modifier
+                            .size(AssistChipDefaults.IconSize),
+                    )
+                },
+                onClick = { },
+            )
+        }
 
-        SubTitle("Assist Chips With badges")
-        AssistChip(
-            label = "Label",
-            icon = {
-                Icon(
-                    imageVector = Icons.Filled.Search,
-                    contentDescription = "search icon",
-                    modifier = Modifier
-                        .size(AssistChipDefaults.IconSize),
-                )
-            },
-            onClick = {},
-            badge = "2",
-        )
-        AssistChip(
-            label = "Label",
-            onClick = {},
-            badge = "4",
-        )
+        ColumnComponentContainer("Assist Chips With badges") {
+            AssistChip(
+                label = "Label",
+                icon = {
+                    Icon(
+                        imageVector = Icons.Filled.Search,
+                        contentDescription = "search icon",
+                        modifier = Modifier
+                            .size(AssistChipDefaults.IconSize),
+                    )
+                },
+                onClick = {},
+                badge = "2",
+            )
+            AssistChip(
+                label = "Label",
+                onClick = {},
+                badge = "4",
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/IndicatorScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/IndicatorScreen.kt
index 2dcacced2..24a809f0a 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/IndicatorScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/IndicatorScreen.kt
@@ -2,12 +2,12 @@ package org.hisp.dhis.common.screens.others
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.Indicator
 
 @Composable
 fun IndicatorScreen() {
-    ColumnComponentContainer {
+    ColumnScreenContainer(title = "Indicator component") {
         Indicator(
             title = "Systolic and diastolic pressure",
             content = "120 mmHg / 80 mmHg",
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/LegendScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/LegendScreen.kt
index 8093087ba..c11f8e4d1 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/LegendScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/LegendScreen.kt
@@ -1,99 +1,97 @@
 package org.hisp.dhis.common.screens.others
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.Legend
 import org.hisp.dhis.mobile.ui.designsystem.component.LegendData
 import org.hisp.dhis.mobile.ui.designsystem.component.LegendDescriptionData
 import org.hisp.dhis.mobile.ui.designsystem.component.LegendRange
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 
 @Composable
 fun LegendScreen() {
-    ColumnComponentContainer(title = "Legend") {
-        SubTitle("Green Legend")
-        Legend(LegendData(SurfaceColor.CustomGreen, "Legend"))
-        Spacer(Modifier.size(Spacing.Spacing18))
+    ColumnScreenContainer(title = "Legend component") {
+        ColumnComponentContainer("Green Legend") {
+            Legend(LegendData(SurfaceColor.CustomGreen, "Legend"))
+        }
 
-        SubTitle("Orange Legend")
-        Legend(LegendData(SurfaceColor.Warning, "Legend"))
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Orange Legend") {
+            Legend(LegendData(SurfaceColor.Warning, "Legend"))
+        }
 
-        SubTitle("Pink Legend")
-        Legend(
-            LegendData(
-                SurfaceColor.CustomPink,
-                "Lorem ipsum dolor sit amet," +
-                    " consectetur adipiscing elit. Maecenas dolor lacus," +
-                    " aliquam. Lorem ipsum dolor sit amet," +
-                    " consectetur adipiscing elit. Maecenas dolor lacus,",
-            ),
-        )
+        ColumnComponentContainer("Pink Legend") {
+            Legend(
+                LegendData(
+                    SurfaceColor.CustomPink,
+                    "Lorem ipsum dolor sit amet," +
+                        " consectetur adipiscing elit. Maecenas dolor lacus," +
+                        " aliquam. Lorem ipsum dolor sit amet," +
+                        " consectetur adipiscing elit. Maecenas dolor lacus,",
+                ),
+            )
+        }
+
+        ColumnComponentContainer("Legend with popup description") {
+            Legend(
+                LegendData(
+                    color = SurfaceColor.CustomGreen,
+                    title = "Legend with popup",
+                    popUpLegendDescriptionData = listOf(
+                        LegendDescriptionData(
+                            color = SurfaceColor.CustomGreen,
+                            text = "Item 1",
+                            range = 0..300,
+                        ),
+                        LegendDescriptionData(
+                            color = SurfaceColor.CustomGreen,
+                            text = "Item 2",
+                            range = 301..600,
+                        ),
+                    ),
+                ),
+            )
 
-        SubTitle("Legend with popup description")
-        Legend(
-            LegendData(
-                color = SurfaceColor.CustomGreen,
-                title = "Legend with popup",
-                popUpLegendDescriptionData = listOf(
+            LegendRange(
+                listOf(
                     LegendDescriptionData(
-                        color = SurfaceColor.CustomGreen,
-                        text = "Item 1",
-                        range = 0..300,
+                        SurfaceColor.CustomGreen,
+                        "Legend",
+                        IntRange(0, 30),
                     ),
                     LegendDescriptionData(
-                        color = SurfaceColor.CustomGreen,
-                        text = "Item 2",
-                        range = 301..600,
+                        SurfaceColor.CustomGreen,
+                        "Lorem ipsum dolor sit amet, " +
+                            "consectetur adipiscing elit. Maecenas dolor lacus, " +
+                            "aliquam. Lorem ipsum dolor sit amet, " +
+                            "consectetur adipiscing elit. Maecenas dolor lacus, " +
+                            "aliquam.Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+                        IntRange(0, 30),
                     ),
                 ),
-            ),
-        )
-
-        LegendRange(
-            listOf(
-                LegendDescriptionData(
-                    SurfaceColor.CustomGreen,
-                    "Legend",
-                    IntRange(0, 30),
-                ),
-                LegendDescriptionData(
-                    SurfaceColor.CustomGreen,
-                    "Lorem ipsum dolor sit amet, " +
-                        "consectetur adipiscing elit. Maecenas dolor lacus, " +
-                        "aliquam. Lorem ipsum dolor sit amet, " +
-                        "consectetur adipiscing elit. Maecenas dolor lacus, " +
-                        "aliquam.Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                    IntRange(0, 30),
-                ),
-            ),
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+            )
+        }
 
-        SubTitle("Legend Range ")
-        LegendRange(
-            listOf(
-                LegendDescriptionData(
-                    SurfaceColor.CustomGreen,
-                    "Low",
-                    IntRange(0, 5),
-                ),
-                LegendDescriptionData(SurfaceColor.CustomYellow, "Medium", IntRange(5, 10)),
-                LegendDescriptionData(SurfaceColor.Warning, "High", IntRange(10, 20)),
-                LegendDescriptionData(SurfaceColor.CustomPink, "Very high", IntRange(20, 40)),
-                LegendDescriptionData(SurfaceColor.CustomBrown, "Extreme", IntRange(40, 120)),
-                LegendDescriptionData(
-                    SurfaceColor.CustomGray,
-                    "Lorem ipsum dolor sit amet, " +
-                        "consectetur adipiscing elit. Fusce convallis",
-                    IntRange(120, 1000),
+        ColumnComponentContainer("Legend Range ") {
+            LegendRange(
+                listOf(
+                    LegendDescriptionData(
+                        SurfaceColor.CustomGreen,
+                        "Low",
+                        IntRange(0, 5),
+                    ),
+                    LegendDescriptionData(SurfaceColor.CustomYellow, "Medium", IntRange(5, 10)),
+                    LegendDescriptionData(SurfaceColor.Warning, "High", IntRange(10, 20)),
+                    LegendDescriptionData(SurfaceColor.CustomPink, "Very high", IntRange(20, 40)),
+                    LegendDescriptionData(SurfaceColor.CustomBrown, "Extreme", IntRange(40, 120)),
+                    LegendDescriptionData(
+                        SurfaceColor.CustomGray,
+                        "Lorem ipsum dolor sit amet, " +
+                            "consectetur adipiscing elit. Fusce convallis",
+                        IntRange(120, 1000),
+                    ),
                 ),
-            ),
-        )
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/MetadataAvatarScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/MetadataAvatarScreen.kt
index 11132271b..004110d07 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/MetadataAvatarScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/MetadataAvatarScreen.kt
@@ -4,7 +4,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 import org.hisp.dhis.mobile.ui.designsystem.component.AvatarSize
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.MetadataAvatar
 import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer
 import org.hisp.dhis.mobile.ui.designsystem.resource.provideDHIS2Icon
@@ -12,7 +12,7 @@ import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 
 @Composable
 fun MetadataAvatarScreen() {
-    ColumnComponentContainer(title = "Metadata Avatar") {
+    ColumnScreenContainer(title = "Metadata Avatar component") {
         RowComponentContainer {
             MetadataAvatar(
                 icon = {
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ProgressScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ProgressScreen.kt
index 6a8f637c7..83d4a6351 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ProgressScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ProgressScreen.kt
@@ -1,90 +1,101 @@
 package org.hisp.dhis.common.screens.others
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.ProgressIndicator
 import org.hisp.dhis.mobile.ui.designsystem.component.ProgressIndicatorType
 import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 internal fun ProgressScreen() {
-    ColumnComponentContainer(title = "Progress Indicator") {
-        SubTitle("Linear indicator")
-        ProgressIndicator(
-            progress = 0.25f,
-            type = ProgressIndicatorType.LINEAR,
-            hasError = false,
-        )
-        ProgressIndicator(
-            progress = 0.50f,
-            type = ProgressIndicatorType.LINEAR,
-            hasError = false,
-        )
-        ProgressIndicator(
-            progress = 0.75f,
-            type = ProgressIndicatorType.LINEAR,
-            hasError = false,
-        )
-        ProgressIndicator(
-            progress = 0.45f,
-            type = ProgressIndicatorType.LINEAR,
-            hasError = false,
-        )
-        ProgressIndicator(
-            type = ProgressIndicatorType.LINEAR,
-            hasError = false,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle("Linear indicator - Error")
-        ProgressIndicator(
-            progress = 0.70f,
-            type = ProgressIndicatorType.LINEAR,
-            hasError = true,
-        )
-        ProgressIndicator(
-            type = ProgressIndicatorType.LINEAR,
-            hasError = true,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle("Circular indicator")
-        RowComponentContainer {
+    ColumnScreenContainer(title = "Progress Indicator component") {
+        ColumnComponentContainer("Linear indicator") {
             ProgressIndicator(
                 progress = 0.25f,
-                type = ProgressIndicatorType.CIRCULAR,
+                type = ProgressIndicatorType.LINEAR,
                 hasError = false,
             )
             ProgressIndicator(
                 progress = 0.50f,
-                type = ProgressIndicatorType.CIRCULAR,
+                type = ProgressIndicatorType.LINEAR,
                 hasError = false,
             )
             ProgressIndicator(
                 progress = 0.75f,
-                type = ProgressIndicatorType.CIRCULAR,
+                type = ProgressIndicatorType.LINEAR,
                 hasError = false,
             )
             ProgressIndicator(
-                progress = 1f,
-                type = ProgressIndicatorType.CIRCULAR,
+                progress = 0.45f,
+                type = ProgressIndicatorType.LINEAR,
                 hasError = false,
             )
             ProgressIndicator(
-                progress = 0.6f,
+                type = ProgressIndicatorType.LINEAR,
+                hasError = false,
+            )
+        }
+
+        ColumnComponentContainer("Linear indicator - Error") {
+            ProgressIndicator(
+                progress = 0.70f,
+                type = ProgressIndicatorType.LINEAR,
+                hasError = true,
+            )
+            ProgressIndicator(
+                type = ProgressIndicatorType.LINEAR,
+                hasError = true,
+            )
+        }
+
+        ColumnComponentContainer("Circular indicator") {
+            RowComponentContainer {
+                ProgressIndicator(
+                    progress = 0.25f,
+                    type = ProgressIndicatorType.CIRCULAR,
+                    hasError = false,
+                )
+                ProgressIndicator(
+                    progress = 0.50f,
+                    type = ProgressIndicatorType.CIRCULAR,
+                    hasError = false,
+                )
+                ProgressIndicator(
+                    progress = 0.75f,
+                    type = ProgressIndicatorType.CIRCULAR,
+                    hasError = false,
+                )
+                ProgressIndicator(
+                    progress = 1f,
+                    type = ProgressIndicatorType.CIRCULAR,
+                    hasError = false,
+                )
+                ProgressIndicator(
+                    progress = 0.6f,
+                    type = ProgressIndicatorType.CIRCULAR,
+                    hasError = false,
+                )
+            }
+            ProgressIndicator(
                 type = ProgressIndicatorType.CIRCULAR,
                 hasError = false,
             )
         }
-        ProgressIndicator(
-            type = ProgressIndicatorType.CIRCULAR,
-            hasError = false,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle("Circular indicator - Error")
+
+        ColumnComponentContainer("Circular indicator - Error") {
+            RowComponentContainer {
+                ProgressIndicator(
+                    progress = 0.70f,
+                    type = ProgressIndicatorType.CIRCULAR,
+                    hasError = true,
+                )
+                ProgressIndicator(
+                    type = ProgressIndicatorType.CIRCULAR,
+                    hasError = true,
+                )
+            }
+        }
         RowComponentContainer {
             ProgressIndicator(
                 progress = 0.70f,
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SearchBarScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SearchBarScreen.kt
index 0291692c7..500465bd8 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SearchBarScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SearchBarScreen.kt
@@ -6,40 +6,34 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.SearchBar
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun SearchBarScreen() {
-    ColumnComponentContainer {
-        var text by rememberSaveable {
-            mutableStateOf("")
+    ColumnScreenContainer(title = "Search bar component") {
+        ColumnComponentContainer("Search bar") {
+            var text by rememberSaveable {
+                mutableStateOf("")
+            }
+            SearchBar(
+                text = text,
+                onQueryChange = {
+                    text = it
+                },
+            )
         }
 
-        var text2 by rememberSaveable {
-            mutableStateOf("Input")
+        ColumnComponentContainer("Search bar") {
+            var text2 by rememberSaveable {
+                mutableStateOf("Input")
+            }
+            SearchBar(
+                text = text2,
+                onQueryChange = {
+                    text2 = it
+                },
+            )
         }
-
-        Title("Search bar component", textColor = TextColor.OnSurfaceVariant)
-        SubTitle("Search bar", textColor = TextColor.OnSurfaceVariant)
-
-        SearchBar(
-            text = text,
-            onQueryChange = {
-                text = it
-            },
-        )
-
-        Title("Search bar component", textColor = TextColor.OnSurfaceVariant)
-        SubTitle("Search bar", textColor = TextColor.OnSurfaceVariant)
-
-        SearchBar(
-            text = text2,
-            onQueryChange = {
-                text2 = it
-            },
-        )
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SectionScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SectionScreen.kt
index b84aca60e..f449cf3b4 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SectionScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/SectionScreen.kt
@@ -1,32 +1,25 @@
 package org.hisp.dhis.common.screens.others
 
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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.text.input.TextFieldValue
 import org.hisp.dhis.common.screens.previews.lorem
 import org.hisp.dhis.common.screens.previews.lorem_medium
 import org.hisp.dhis.common.screens.previews.lorem_short
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.InputText
 import org.hisp.dhis.mobile.ui.designsystem.component.Section
 import org.hisp.dhis.mobile.ui.designsystem.component.SectionState
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun SectionScreen() {
-    ColumnComponentContainer(title = "Section Header") {
-        SubTitle("Collapsible header")
-
-        Column {
+    ColumnScreenContainer(title = "Section Header component") {
+        ColumnComponentContainer("Collapsible header") {
             Section(
                 title = "Section title",
                 description = null,
@@ -89,69 +82,68 @@ fun SectionScreen() {
             )
         }
 
-        Spacer(Modifier.size(Spacing.Spacing18))
-
-        SubTitle("Flat header")
-        Section(
-            title = "Section title",
-            description = null,
-            completedFields = 2,
-            totalFields = 3,
-            state = SectionState.FIXED,
-            errorCount = 0,
-            warningCount = 0,
-            content = { TestingFields() },
-            onNextSection = { },
-            onSectionClick = { },
-        )
-        Section(
-            title = "Section title",
-            description = lorem,
-            completedFields = 2,
-            totalFields = 3,
-            state = SectionState.FIXED,
-            errorCount = 2,
-            warningCount = 1,
-            content = { TestingFields() },
-            onNextSection = { },
-            onSectionClick = { },
-        )
-        Section(
-            title = "Section title",
-            description = lorem_short,
-            completedFields = 2,
-            totalFields = 3,
-            state = SectionState.FIXED,
-            errorCount = 0,
-            warningCount = 0,
-            content = { TestingFields() },
-            onNextSection = { },
-            onSectionClick = { },
-        )
-        Section(
-            title = "Section title",
-            description = lorem_medium,
-            completedFields = 2,
-            totalFields = 3,
-            state = SectionState.FIXED,
-            errorCount = 0,
-            warningCount = 0,
-            content = { TestingFields() },
-            onNextSection = { },
-            onSectionClick = { },
-        )
-        Section(
-            title = "Section title Section title Section title Section title Section title",
-            description = lorem_medium,
-            completedFields = 2,
-            totalFields = 3,
-            state = SectionState.FIXED,
-            errorCount = 0,
-            warningCount = 0,
-            content = { TestingFields() },
-            onNextSection = { },
-            onSectionClick = { },
-        )
+        ColumnComponentContainer("Flat header") {
+            Section(
+                title = "Section title",
+                description = null,
+                completedFields = 2,
+                totalFields = 3,
+                state = SectionState.FIXED,
+                errorCount = 0,
+                warningCount = 0,
+                content = { TestingFields() },
+                onNextSection = { },
+                onSectionClick = { },
+            )
+            Section(
+                title = "Section title",
+                description = lorem,
+                completedFields = 2,
+                totalFields = 3,
+                state = SectionState.FIXED,
+                errorCount = 2,
+                warningCount = 1,
+                content = { TestingFields() },
+                onNextSection = { },
+                onSectionClick = { },
+            )
+            Section(
+                title = "Section title",
+                description = lorem_short,
+                completedFields = 2,
+                totalFields = 3,
+                state = SectionState.FIXED,
+                errorCount = 0,
+                warningCount = 0,
+                content = { TestingFields() },
+                onNextSection = { },
+                onSectionClick = { },
+            )
+            Section(
+                title = "Section title",
+                description = lorem_medium,
+                completedFields = 2,
+                totalFields = 3,
+                state = SectionState.FIXED,
+                errorCount = 0,
+                warningCount = 0,
+                content = { TestingFields() },
+                onNextSection = { },
+                onSectionClick = { },
+            )
+            Section(
+                title = "Section title Section title Section title Section title Section title",
+                description = lorem_medium,
+                completedFields = 2,
+                totalFields = 3,
+                state = SectionState.FIXED,
+                errorCount = 0,
+                warningCount = 0,
+                content = { TestingFields() },
+                onNextSection = { },
+                onSectionClick = { },
+            )
+        }
     }
 }
 
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/TagsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/TagsScreen.kt
index 873c9a3c8..df77b9bd9 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/TagsScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/TagsScreen.kt
@@ -2,11 +2,11 @@ package org.hisp.dhis.common.screens.others
 
 import androidx.compose.runtime.Composable
 import org.hisp.dhis.common.screens.previews.TagsPreview
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 
 @Composable
 fun TagsScreen() {
-    ColumnComponentContainer(title = "Tags") {
+    ColumnScreenContainer(title = "Tag component") {
         TagsPreview()
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/parameter/ParameterSelectorScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/parameter/ParameterSelectorScreen.kt
index 49cd14910..765563424 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/parameter/ParameterSelectorScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/parameter/ParameterSelectorScreen.kt
@@ -1,8 +1,5 @@
 package org.hisp.dhis.common.screens.parameter
 
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.QrCode2
 import androidx.compose.material3.Icon
@@ -12,11 +9,11 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.AgeInputType
 import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem
 import org.hisp.dhis.mobile.ui.designsystem.component.InputAge
 import org.hisp.dhis.mobile.ui.designsystem.component.InputAgeModel
@@ -142,7 +139,6 @@ fun ParameterSelectorScreen() {
                             ageInputType = it
                         },
                     ),
-
                 )
             },
             status = when (ageInputType) {
@@ -212,7 +208,6 @@ fun ParameterSelectorScreen() {
                         onValueChanged = {},
                         format = "ddMMYYYY",
                     ),
-
                 )
             },
             onExpand = {},
@@ -383,10 +378,7 @@ fun ParameterSelectorScreen() {
         ),
     )
 
-    Column(
-        modifier = Modifier
-            .verticalScroll(rememberScrollState()),
-    ) {
+    ColumnScreenContainer(title = "Parameter Selector component") {
         items.forEach {
             ParameterSelectorItem(
                 model = it,
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputCheckBoxScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputCheckBoxScreen.kt
index b0deeca68..a5ef55068 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputCheckBoxScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputCheckBoxScreen.kt
@@ -1,18 +1,14 @@
 package org.hisp.dhis.common.screens.toggleableInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
 import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputCheckBox
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.Orientation
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun InputCheckBoxScreen() {
@@ -58,49 +54,52 @@ fun InputCheckBoxScreen() {
         )
     }
 
-    ColumnComponentContainer("Checkboxes") {
-        SubTitle("Vertical")
-        InputCheckBox(
-            title = "Label",
-            checkBoxData = checkBoxDataItemsVertical,
-            onItemChange = { checkBoxData ->
-                val index = checkBoxDataItemsVertical.withIndex().first { it.value.uid == checkBoxData.uid }.index
-                checkBoxDataItemsVertical[index] = checkBoxData.copy(checked = !checkBoxData.checked)
-            },
-            onClearSelection = { checkBoxDataItemsVertical.replaceAll { it.copy(checked = false) } },
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        InputCheckBox(
-            title = "Label",
-            checkBoxData = checkBoxDataItemsError,
-            state = InputShellState.ERROR,
-            onItemChange = { checkBoxData ->
-                val index = checkBoxDataItemsError.withIndex().first { it.value.uid == checkBoxData.uid }.index
-                checkBoxDataItemsError[index] = checkBoxData.copy(checked = !checkBoxData.checked)
-            },
-            onClearSelection = { checkBoxDataItemsError.replaceAll { it.copy(checked = false) } },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        InputCheckBox(
-            title = "Label",
-            checkBoxData = checkBoxDataItemsDisabled,
-            state = InputShellState.DISABLED,
-            onItemChange = { },
-            onClearSelection = { },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle("Horizontal")
-        InputCheckBox(
-            title = "Label",
-            checkBoxData = checkBoxDataItemsHorizontal,
-            orientation = Orientation.HORIZONTAL,
-            onItemChange = { checkBoxData ->
-                val index = checkBoxDataItemsHorizontal.withIndex().first { it.value.uid == checkBoxData.uid }.index
-                checkBoxDataItemsHorizontal[index] = checkBoxData.copy(checked = !checkBoxData.checked)
-            },
-            onClearSelection = { checkBoxDataItemsHorizontal.replaceAll { it.copy(checked = false) } },
-            state = InputShellState.UNFOCUSED,
-        )
+    ColumnScreenContainer(ToggleableInputs.INPUT_CHECK_BOX.label) {
+        ColumnComponentContainer("Basic state with vertical orientation") {
+            InputCheckBox(
+                title = "Label",
+                checkBoxData = checkBoxDataItemsVertical,
+                onItemChange = { checkBoxData ->
+                    val index = checkBoxDataItemsVertical.withIndex().first { it.value.uid == checkBoxData.uid }.index
+                    checkBoxDataItemsVertical[index] = checkBoxData.copy(checked = !checkBoxData.checked)
+                },
+                onClearSelection = { checkBoxDataItemsVertical.replaceAll { it.copy(checked = false) } },
+                state = InputShellState.UNFOCUSED,
+            )
+        }
+        ColumnComponentContainer("Error state with vertical orientation") {
+            InputCheckBox(
+                title = "Label",
+                checkBoxData = checkBoxDataItemsError,
+                state = InputShellState.ERROR,
+                onItemChange = { checkBoxData ->
+                    val index = checkBoxDataItemsError.withIndex().first { it.value.uid == checkBoxData.uid }.index
+                    checkBoxDataItemsError[index] = checkBoxData.copy(checked = !checkBoxData.checked)
+                },
+                onClearSelection = { checkBoxDataItemsError.replaceAll { it.copy(checked = false) } },
+            )
+        }
+        ColumnComponentContainer("Disabled state with vertical orientation") {
+            InputCheckBox(
+                title = "Label",
+                checkBoxData = checkBoxDataItemsDisabled,
+                state = InputShellState.DISABLED,
+                onItemChange = { },
+                onClearSelection = { },
+            )
+        }
+        ColumnComponentContainer("Basic state with horizontal orientation") {
+            InputCheckBox(
+                title = "Label",
+                checkBoxData = checkBoxDataItemsHorizontal,
+                orientation = Orientation.HORIZONTAL,
+                onItemChange = { checkBoxData ->
+                    val index = checkBoxDataItemsHorizontal.withIndex().first { it.value.uid == checkBoxData.uid }.index
+                    checkBoxDataItemsHorizontal[index] = checkBoxData.copy(checked = !checkBoxData.checked)
+                },
+                onClearSelection = { checkBoxDataItemsHorizontal.replaceAll { it.copy(checked = false) } },
+                state = InputShellState.UNFOCUSED,
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputDropDownScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputDropDownScreen.kt
index ccec61683..099ccfa21 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputDropDownScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputDropDownScreen.kt
@@ -1,27 +1,21 @@
 package org.hisp.dhis.common.screens.toggleableInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem
 import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.InputStyle
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
-import org.hisp.dhis.mobile.ui.designsystem.component.Title
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
-import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 
 @Composable
 fun InputDropDownScreen() {
-    ColumnComponentContainer {
+    ColumnScreenContainer(title = ToggleableInputs.INPUT_DROPDOWN.label) {
         val options = listOf(
             DropdownItem("Option 1"),
             DropdownItem("Option 2"),
@@ -34,138 +28,135 @@ fun InputDropDownScreen() {
             DropdownItem("Option 9"),
             DropdownItem("Option 10"),
         )
-        Title("Input Dropdown", textColor = TextColor.OnSurfaceVariant)
-
-        SubTitle("Basic Input Dropdown with < 7 inputs", textColor = TextColor.OnSurfaceVariant)
         var selectedItem by remember { mutableStateOf<DropdownItem?>(null) }
-        InputDropDown(
-            title = "Label",
-            state = InputShellState.UNFOCUSED,
-            dropdownItems = options.take(6),
-            onResetButtonClicked = {
-                selectedItem = null
-            },
-            onItemSelected = {
-                selectedItem = it
-            },
-            selectedItem = selectedItem,
-        )
 
-        InputDropDown(
-            title = "Label - With supporting text",
-            state = InputShellState.UNFOCUSED,
-            dropdownItems = options.take(6),
-            onResetButtonClicked = {
-                selectedItem = null
-            },
-            onItemSelected = {
-                selectedItem = it
-            },
-            selectedItem = selectedItem,
-            supportingTextData = listOf(
-                SupportingTextData(text = "Options"),
-            ),
-        )
+        ColumnComponentContainer("Basic Input Dropdown with < 7 inputs") {
+            InputDropDown(
+                title = "Label",
+                state = InputShellState.UNFOCUSED,
+                dropdownItems = options.take(6),
+                onResetButtonClicked = {
+                    selectedItem = null
+                },
+                onItemSelected = {
+                    selectedItem = it
+                },
+                selectedItem = selectedItem,
+            )
 
-        InputDropDown(
-            title = "Label - Parameter Style",
-            inputStyle = InputStyle.ParameterInputStyle(),
-            state = InputShellState.UNFOCUSED,
-            dropdownItems = options.take(6),
-            onResetButtonClicked = {
-                selectedItem = null
-            },
-            onItemSelected = {
-                selectedItem = it
-            },
-            selectedItem = selectedItem,
-        )
+            InputDropDown(
+                title = "Label - With supporting text",
+                state = InputShellState.UNFOCUSED,
+                dropdownItems = options.take(6),
+                onResetButtonClicked = {
+                    selectedItem = null
+                },
+                onItemSelected = {
+                    selectedItem = it
+                },
+                selectedItem = selectedItem,
+                supportingTextData = listOf(
+                    SupportingTextData(text = "Options"),
+                ),
+            )
 
-        Spacer(Modifier.size(Spacing.Spacing18))
+            InputDropDown(
+                title = "Label - Parameter Style",
+                inputStyle = InputStyle.ParameterInputStyle(),
+                state = InputShellState.UNFOCUSED,
+                dropdownItems = options.take(6),
+                onResetButtonClicked = {
+                    selectedItem = null
+                },
+                onItemSelected = {
+                    selectedItem = it
+                },
+                selectedItem = selectedItem,
+            )
+        }
 
-        SubTitle("Basic Input Dropdown with >= 7 inputs", textColor = TextColor.OnSurfaceVariant)
-        var selectedItem4 by remember { mutableStateOf<DropdownItem?>(null) }
-        InputDropDown(
-            title = "Label",
-            state = InputShellState.UNFOCUSED,
-            dropdownItems = options,
-            onResetButtonClicked = {
-                selectedItem4 = null
-            },
-            onItemSelected = {
-                selectedItem4 = it
-            },
-            selectedItem = selectedItem4,
-        )
+        ColumnComponentContainer("Basic Input Dropdown with >= 7 inputs") {
+            var selectedItem4 by remember { mutableStateOf<DropdownItem?>(null) }
+            InputDropDown(
+                title = "Label",
+                state = InputShellState.UNFOCUSED,
+                dropdownItems = options,
+                onResetButtonClicked = {
+                    selectedItem4 = null
+                },
+                onItemSelected = {
+                    selectedItem4 = it
+                },
+                selectedItem = selectedItem4,
+            )
+        }
 
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Basic Input Dropdown with content ") {
+            var selectedItem1 by remember { mutableStateOf<DropdownItem?>(options[0]) }
+            InputDropDown(
+                title = "Label",
+                state = InputShellState.UNFOCUSED,
+                dropdownItems = options,
+                onResetButtonClicked = {
+                    selectedItem1 = null
+                },
+                onItemSelected = {
+                    selectedItem1 = it
+                },
+                selectedItem = selectedItem1,
+            )
+        }
 
-        SubTitle("Basic Input Dropdown with content ", textColor = TextColor.OnSurfaceVariant)
-        var selectedItem1 by remember { mutableStateOf<DropdownItem?>(options[0]) }
-        InputDropDown(
-            title = "Label",
-            state = InputShellState.UNFOCUSED,
-            dropdownItems = options,
-            onResetButtonClicked = {
-                selectedItem1 = null
-            },
-            onItemSelected = {
-                selectedItem1 = it
-            },
-            selectedItem = selectedItem1,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Error Input Dropdown ") {
+            var selectedItem2 by remember { mutableStateOf<DropdownItem?>(null) }
+            InputDropDown(
+                title = "Label",
+                state = InputShellState.ERROR,
+                dropdownItems = options,
+                onResetButtonClicked = {
+                    selectedItem2 = null
+                },
+                onItemSelected = {
+                    selectedItem2 = it
+                },
+                selectedItem = selectedItem2,
+            )
+        }
 
-        SubTitle("Error Input Dropdown ", textColor = TextColor.OnSurfaceVariant)
-        var selectedItem2 by remember { mutableStateOf<DropdownItem?>(null) }
-        InputDropDown(
-            title = "Label",
-            state = InputShellState.ERROR,
-            dropdownItems = options,
-            onResetButtonClicked = {
-                selectedItem2 = null
-            },
-            onItemSelected = {
-                selectedItem2 = it
-            },
-            selectedItem = selectedItem2,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Disabled Input Dropdown with content ") {
+            var selectedItem3 by remember { mutableStateOf<DropdownItem?>(options[1]) }
+            InputDropDown(
+                title = "Label",
+                state = InputShellState.DISABLED,
+                dropdownItems = options,
+                onResetButtonClicked = {
+                    selectedItem3 = null
+                },
+                onItemSelected = {
+                    selectedItem3 = it
+                },
+                selectedItem = selectedItem3,
+            )
+        }
 
-        SubTitle("Disabled Input Dropdown with content ", textColor = TextColor.OnSurfaceVariant)
-        var selectedItem3 by remember { mutableStateOf<DropdownItem?>(options[1]) }
-        InputDropDown(
-            title = "Label",
-            state = InputShellState.DISABLED,
-            dropdownItems = options,
-            onResetButtonClicked = {
-                selectedItem3 = null
-            },
-            onItemSelected = {
-                selectedItem3 = it
-            },
-            selectedItem = selectedItem3,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
+        ColumnComponentContainer("Input Dropdown with 5000 items ") {
+            val dropdownItems = mutableListOf<DropdownItem>()
+            for (i in 1..5000) {
+                dropdownItems.add(DropdownItem("$i"))
+            }
 
-        SubTitle("Input Dropdown with 5000 items ", textColor = TextColor.OnSurfaceVariant)
-        val dropdownItems = mutableListOf<DropdownItem>()
-        for (i in 1..5000) {
-            dropdownItems.add(DropdownItem("$i"))
+            InputDropDown(
+                title = "Label",
+                state = InputShellState.UNFOCUSED,
+                dropdownItems = dropdownItems,
+                onResetButtonClicked = {
+                    selectedItem = null
+                },
+                onItemSelected = {
+                    selectedItem = it
+                },
+                selectedItem = selectedItem,
+            )
         }
-
-        InputDropDown(
-            title = "Label",
-            state = InputShellState.UNFOCUSED,
-            dropdownItems = dropdownItems,
-            onResetButtonClicked = {
-                selectedItem = null
-            },
-            onItemSelected = {
-                selectedItem = it
-            },
-            selectedItem = selectedItem,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputMatrixScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputMatrixScreen.kt
index e585dbb82..d40acb53f 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputMatrixScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputMatrixScreen.kt
@@ -11,6 +11,7 @@ import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.painter.BitmapPainter
 import androidx.compose.ui.graphics.painter.Painter
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputMatrix
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.internal.ImageCardData
@@ -70,33 +71,36 @@ fun InputMatrixScreen(imageBitmapLoader: (() -> ImageBitmap)?) {
     val sampleImage = provideSampleImages(
         inputCardData.filterIsInstance<ImageCardData.CustomIconData>().map { it },
     )
-    ColumnComponentContainer(title = "Input Matrix") {
-        InputMatrix(
-            title = "Label",
-            data = inputCardData.filterNotNull(),
-            selectedData = matrixSelectedItem,
-            onSelectionChanged = { newSelectedItem ->
-                matrixSelectedItem = if (matrixSelectedItem == newSelectedItem) {
-                    null
-                } else {
-                    newSelectedItem
-                }
-            },
-            state = InputShellState.UNFOCUSED,
-            painterFor = sampleImage,
-        )
-
-        InputMatrix(
-            title = "Label",
-            data = inputCardData.filterNotNull(),
-            selectedData = matrixSelectedItem,
-            state = InputShellState.DISABLED,
-            itemCount = 3,
-            onSelectionChanged = {
-                // no-op
-            },
-            painterFor = sampleImage,
-        )
+    ColumnScreenContainer(title = ToggleableInputs.INPUT_MATRIX.label) {
+        ColumnComponentContainer("Basic state") {
+            InputMatrix(
+                title = "Label",
+                data = inputCardData.filterNotNull(),
+                selectedData = matrixSelectedItem,
+                onSelectionChanged = { newSelectedItem ->
+                    matrixSelectedItem = if (matrixSelectedItem == newSelectedItem) {
+                        null
+                    } else {
+                        newSelectedItem
+                    }
+                },
+                state = InputShellState.UNFOCUSED,
+                painterFor = sampleImage,
+            )
+        }
+        ColumnComponentContainer("Disabled state") {
+            InputMatrix(
+                title = "Label",
+                data = inputCardData.filterNotNull(),
+                selectedData = matrixSelectedItem,
+                state = InputShellState.DISABLED,
+                itemCount = 3,
+                onSelectionChanged = {
+                    // no-op
+                },
+                painterFor = sampleImage,
+            )
+        }
     }
 }
 
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputRadioButtonScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputRadioButtonScreen.kt
index 9e0fe9150..b9a6c038d 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputRadioButtonScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputRadioButtonScreen.kt
@@ -1,24 +1,20 @@
 package org.hisp.dhis.common.screens.toggleableInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
 import org.hisp.dhis.common.screens.previews.lorem
 import org.hisp.dhis.mobile.ui.designsystem.component.Button
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputRadioButton
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.Orientation
 import org.hisp.dhis.mobile.ui.designsystem.component.RadioButtonData
-import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun InputRadioButtonScreen() {
@@ -72,59 +68,62 @@ fun InputRadioButtonScreen() {
         mutableStateOf<RadioButtonData?>(radioButtonDataItemsHorizontal[0])
     }
     var showSupportingText by remember { mutableStateOf(false) }
-    ColumnComponentContainer("Radio Buttons") {
+    ColumnScreenContainer(ToggleableInputs.INPUT_RADIO_BUTTON.label) {
         Button(text = "Click to show/Hide supporting text") {
             showSupportingText = !showSupportingText
         }
 
-        SubTitle("Vertical")
-        InputRadioButton(
-            title = "Label",
-            radioButtonData = radioButtonDataItemsVertical,
-            itemSelected = selectedItemVertical,
-            onItemChange = {
-                selectedItemVertical = it
-            },
-            state = InputShellState.UNFOCUSED,
-            supportingText = if (showSupportingText) {
-                listOf(
-                    SupportingTextData("Required", state = SupportingTextState.ERROR),
-                    SupportingTextData(lorem + lorem + lorem, state = SupportingTextState.WARNING),
-                )
-            } else {
-                emptyList()
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        InputRadioButton(
-            title = "Label",
-            radioButtonData = radioButtonDataItemsError,
-            state = InputShellState.ERROR,
-            itemSelected = selectedItemError,
-            onItemChange = {
-                selectedItemError = it
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        InputRadioButton(
-            title = "Label",
-            radioButtonData = radioButtonDataItemsDisabled,
-            state = InputShellState.DISABLED,
-            onItemChange = {
-                selectedItemDisabled = it
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        SubTitle("Horizontal")
-        InputRadioButton(
-            title = "Label",
-            radioButtonData = radioButtonDataItemsHorizontal,
-            orientation = Orientation.HORIZONTAL,
-            itemSelected = selectedItemHorizontal,
-            onItemChange = {
-                selectedItemHorizontal = it
-            },
-            state = InputShellState.UNFOCUSED,
-        )
+        ColumnComponentContainer("Basic state with vertical orientation") {
+            InputRadioButton(
+                title = "Label",
+                radioButtonData = radioButtonDataItemsVertical,
+                itemSelected = selectedItemVertical,
+                onItemChange = {
+                    selectedItemVertical = it
+                },
+                state = InputShellState.UNFOCUSED,
+                supportingText = if (showSupportingText) {
+                    listOf(
+                        SupportingTextData("Required", state = SupportingTextState.ERROR),
+                        SupportingTextData(lorem + lorem + lorem, state = SupportingTextState.WARNING),
+                    )
+                } else {
+                    emptyList()
+                },
+            )
+        }
+        ColumnComponentContainer("Error state with vertical orientation") {
+            InputRadioButton(
+                title = "Label",
+                radioButtonData = radioButtonDataItemsError,
+                state = InputShellState.ERROR,
+                itemSelected = selectedItemError,
+                onItemChange = {
+                    selectedItemError = it
+                },
+            )
+        }
+        ColumnComponentContainer("Disabled state with vertical orientation") {
+            InputRadioButton(
+                title = "Label",
+                radioButtonData = radioButtonDataItemsDisabled,
+                state = InputShellState.DISABLED,
+                onItemChange = {
+                    selectedItemDisabled = it
+                },
+            )
+        }
+        ColumnComponentContainer("Basic state with horizontal orientation") {
+            InputRadioButton(
+                title = "Label",
+                radioButtonData = radioButtonDataItemsHorizontal,
+                orientation = Orientation.HORIZONTAL,
+                itemSelected = selectedItemHorizontal,
+                onItemChange = {
+                    selectedItemHorizontal = it
+                },
+                state = InputShellState.UNFOCUSED,
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputSequentialScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputSequentialScreen.kt
index d0352f92d..eebd8858b 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputSequentialScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputSequentialScreen.kt
@@ -11,6 +11,7 @@ import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.painter.BitmapPainter
 import androidx.compose.ui.graphics.painter.Painter
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputSequential
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.internal.ImageCardData
@@ -72,32 +73,36 @@ fun InputSequentialScreen(imageBitmapLoader: (() -> ImageBitmap)?) {
         inputCardData.filterIsInstance<ImageCardData.CustomIconData>().map { it },
     )
 
-    ColumnComponentContainer(title = "Input Sequential") {
-        InputSequential(
-            title = "Label",
-            data = inputCardData.filterNotNull(),
-            selectedData = sequentialSelectedItem,
-            onSelectionChanged = { newSelectedItem ->
-                sequentialSelectedItem = if (sequentialSelectedItem == newSelectedItem) {
-                    null
-                } else {
-                    newSelectedItem
-                }
-            },
-            state = InputShellState.UNFOCUSED,
-            painterFor = painterFor,
-        )
+    ColumnScreenContainer(title = ToggleableInputs.INPUT_SEQUENTIAL.label) {
+        ColumnComponentContainer("Basic state") {
+            InputSequential(
+                title = "Label",
+                data = inputCardData.filterNotNull(),
+                selectedData = sequentialSelectedItem,
+                onSelectionChanged = { newSelectedItem ->
+                    sequentialSelectedItem = if (sequentialSelectedItem == newSelectedItem) {
+                        null
+                    } else {
+                        newSelectedItem
+                    }
+                },
+                state = InputShellState.UNFOCUSED,
+                painterFor = painterFor,
+            )
+        }
 
-        InputSequential(
-            title = "Label",
-            data = inputCardData.filterNotNull(),
-            selectedData = sequentialSelectedItem,
-            state = InputShellState.DISABLED,
-            onSelectionChanged = {
-                // no-op
-            },
-            painterFor = painterFor,
-        )
+        ColumnComponentContainer("Disabled state") {
+            InputSequential(
+                title = "Label",
+                data = inputCardData.filterNotNull(),
+                selectedData = sequentialSelectedItem,
+                state = InputShellState.DISABLED,
+                onSelectionChanged = {
+                    // no-op
+                },
+                painterFor = painterFor,
+            )
+        }
     }
 }
 
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesNoFieldScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesNoFieldScreen.kt
index dbe9f69fe..7c539c97e 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesNoFieldScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesNoFieldScreen.kt
@@ -1,20 +1,17 @@
 package org.hisp.dhis.common.screens.toggleableInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.InputYesNoField
 import org.hisp.dhis.mobile.ui.designsystem.component.InputYesNoFieldValues
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun InputYesNoFieldScreen() {
@@ -30,40 +27,47 @@ fun InputYesNoFieldScreen() {
         mutableStateOf<InputYesNoFieldValues?>(null)
     }
 
-    ColumnComponentContainer("Yes/No Field") {
-        InputYesNoField(
-            title = "Label",
-            itemSelected = selectedItem,
-            onItemChange = {
-                selectedItem = it
-            },
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        InputYesNoField(
-            title = "Label",
-            itemSelected = selectedItem1,
-            onItemChange = {
-                selectedItem1 = it
-            },
-            state = InputShellState.UNFOCUSED,
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        InputYesNoField(
-            title = "Label",
-            state = InputShellState.ERROR,
-            supportingText = listOf(SupportingTextData("Error text", SupportingTextState.ERROR)),
-            itemSelected = selectedItemError,
-            onItemChange = {
-                selectedItemError = it
-            },
-        )
-        Spacer(Modifier.size(Spacing.Spacing18))
-        InputYesNoField(
-            title = "Label",
-            state = InputShellState.DISABLED,
-            onItemChange = {
-            },
-        )
+    ColumnScreenContainer(ToggleableInputs.INPUT_YES_NO_FIELD.label) {
+        ColumnComponentContainer("Basic state") {
+            InputYesNoField(
+                title = "Label",
+                itemSelected = selectedItem,
+                onItemChange = {
+                    selectedItem = it
+                },
+                state = InputShellState.UNFOCUSED,
+            )
+        }
+        ColumnComponentContainer("Selected state") {
+            InputYesNoField(
+                title = "Label",
+                itemSelected = selectedItem1,
+                onItemChange = {
+                    selectedItem1 = it
+                },
+                state = InputShellState.UNFOCUSED,
+            )
+        }
+
+        ColumnComponentContainer("Error state") {
+            InputYesNoField(
+                title = "Label",
+                state = InputShellState.ERROR,
+                supportingText = listOf(SupportingTextData("Error text", SupportingTextState.ERROR)),
+                itemSelected = selectedItemError,
+                onItemChange = {
+                    selectedItemError = it
+                },
+            )
+        }
+
+        ColumnComponentContainer("Disabled state") {
+            InputYesNoField(
+                title = "Label",
+                state = InputShellState.DISABLED,
+                onItemChange = {
+                },
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlyCheckBoxScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlyCheckBoxScreen.kt
index 4de1cc80d..f4fd5951c 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlyCheckBoxScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlyCheckBoxScreen.kt
@@ -1,24 +1,21 @@
 package org.hisp.dhis.common.screens.toggleableInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
 import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.InputYesOnlyCheckBox
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun InputYesOnlyCheckBoxScreen() {
-    ColumnComponentContainer {
+    ColumnScreenContainer(title = ToggleableInputs.INPUT_YES_ONLY_CHECKBOX.label) {
         var checkboxData by remember {
             mutableStateOf(CheckBoxData(uid = "0", checked = false, enabled = true, textInput = "Label"))
         }
@@ -34,38 +31,48 @@ fun InputYesOnlyCheckBoxScreen() {
         val checkboxData4 by remember {
             mutableStateOf(CheckBoxData(uid = "0", checked = true, enabled = true, textInput = "Label"))
         }
-        InputYesOnlyCheckBox(
-            checkBoxData = checkboxData,
-            state = InputShellState.UNFOCUSED,
-        ) {
-            checkboxData = checkboxData.copy(checked = !checkboxData.checked)
+        ColumnComponentContainer("Basic state") {
+            InputYesOnlyCheckBox(
+                checkBoxData = checkboxData,
+                state = InputShellState.UNFOCUSED,
+            ) {
+                checkboxData = checkboxData.copy(checked = !checkboxData.checked)
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
-        InputYesOnlyCheckBox(
-            checkBoxData = checkboxData1,
-            state = InputShellState.UNFOCUSED,
-        ) {
-            checkboxData1 = checkboxData1.copy(checked = !checkboxData.checked)
+
+        ColumnComponentContainer("Selected state") {
+            InputYesOnlyCheckBox(
+                checkBoxData = checkboxData1,
+                state = InputShellState.UNFOCUSED,
+            ) {
+                checkboxData1 = checkboxData1.copy(checked = !checkboxData.checked)
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
-        InputYesOnlyCheckBox(
-            checkBoxData = checkboxData2,
-            state = InputShellState.ERROR,
-            supportingText = listOf(SupportingTextData("Error text", SupportingTextState.ERROR)),
-        ) {
-            checkboxData2 = checkboxData2.copy(checked = !checkboxData.checked)
+
+        ColumnComponentContainer("Error state") {
+            InputYesOnlyCheckBox(
+                checkBoxData = checkboxData2,
+                state = InputShellState.ERROR,
+                supportingText = listOf(SupportingTextData("Error text", SupportingTextState.ERROR)),
+            ) {
+                checkboxData2 = checkboxData2.copy(checked = !checkboxData.checked)
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
-        InputYesOnlyCheckBox(
-            checkBoxData = checkboxData3,
-            state = InputShellState.DISABLED,
-        ) {
+
+        ColumnComponentContainer("Disabled selected state") {
+            InputYesOnlyCheckBox(
+                checkBoxData = checkboxData3,
+                state = InputShellState.DISABLED,
+            ) {
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
-        InputYesOnlyCheckBox(
-            checkBoxData = checkboxData4,
-            state = InputShellState.DISABLED,
-        ) {
+
+        ColumnComponentContainer("Disabled state") {
+            InputYesOnlyCheckBox(
+                checkBoxData = checkboxData4,
+                state = InputShellState.DISABLED,
+            ) {
+            }
         }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlySwitchScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlySwitchScreen.kt
index c713d0c30..18ddac3b9 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlySwitchScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/InputYesOnlySwitchScreen.kt
@@ -1,67 +1,74 @@
 package org.hisp.dhis.common.screens.toggleableInputs
 
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 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 org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.InputYesOnlySwitch
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
 import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
 fun InputYesOnlySwitchScreen() {
-    ColumnComponentContainer {
+    ColumnScreenContainer(title = ToggleableInputs.INPUT_YES_ONLY_SWITCH.label) {
         var isSelected by rememberSaveable { mutableStateOf(false) }
         var isSelected1 by rememberSaveable { mutableStateOf(true) }
         var isSelected2 by rememberSaveable { mutableStateOf(false) }
         var isSelected3 by rememberSaveable { mutableStateOf(true) }
         var isSelected4 by rememberSaveable { mutableStateOf(false) }
-        InputYesOnlySwitch(
-            title = "Label",
-            isChecked = isSelected,
-            state = InputShellState.UNFOCUSED,
-        ) {
-            isSelected = !isSelected
+        ColumnComponentContainer("Basic state") {
+            InputYesOnlySwitch(
+                title = "Label",
+                isChecked = isSelected,
+                state = InputShellState.UNFOCUSED,
+            ) {
+                isSelected = !isSelected
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
-        InputYesOnlySwitch(
-            title = "Label",
-            isChecked = isSelected1,
-            state = InputShellState.UNFOCUSED,
-        ) {
-            isSelected1 = !isSelected1
+
+        ColumnComponentContainer("Selected state") {
+            InputYesOnlySwitch(
+                title = "Label",
+                isChecked = isSelected1,
+                state = InputShellState.UNFOCUSED,
+            ) {
+                isSelected1 = !isSelected1
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
-        InputYesOnlySwitch(
-            title = "Label",
-            isChecked = isSelected2,
-            state = InputShellState.ERROR,
-            supportingText = listOf(SupportingTextData("Error text", SupportingTextState.ERROR)),
-        ) {
-            isSelected2 = !isSelected2
+
+        ColumnComponentContainer("Error state") {
+            InputYesOnlySwitch(
+                title = "Label",
+                isChecked = isSelected2,
+                state = InputShellState.ERROR,
+                supportingText = listOf(SupportingTextData("Error text", SupportingTextState.ERROR)),
+            ) {
+                isSelected2 = !isSelected2
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
-        InputYesOnlySwitch(
-            title = "Label",
-            isChecked = isSelected3,
-            state = InputShellState.DISABLED,
-        ) {
-            isSelected3 = !isSelected3
+
+        ColumnComponentContainer("Disabled selected state") {
+            InputYesOnlySwitch(
+                title = "Label",
+                isChecked = isSelected3,
+                state = InputShellState.DISABLED,
+            ) {
+                isSelected3 = !isSelected3
+            }
         }
-        Spacer(Modifier.size(Spacing.Spacing18))
-        InputYesOnlySwitch(
-            title = "Label",
-            isChecked = isSelected4,
-            state = InputShellState.DISABLED,
-        ) {
-            isSelected4 = !isSelected4
+
+        ColumnComponentContainer("Disabled state") {
+            InputYesOnlySwitch(
+                title = "Label",
+                isChecked = isSelected4,
+                state = InputShellState.DISABLED,
+            ) {
+                isSelected4 = !isSelected4
+            }
         }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/MultiSelectInputScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/MultiSelectInputScreen.kt
index c00ae4cdf..84e71258e 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/MultiSelectInputScreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/MultiSelectInputScreen.kt
@@ -4,12 +4,13 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateListOf
 import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputMultiSelection
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 
 @Composable
 fun MultiSelectInputScreen() {
-    ColumnComponentContainer {
+    ColumnScreenContainer(title = ToggleableInputs.MULTI_SELECT.label) {
         val multiSelect1Items = mutableStateListOf(
             CheckBoxData(
                 uid = "uid-1",
@@ -82,139 +83,152 @@ fun MultiSelectInputScreen() {
             ),
         )
 
-        InputMultiSelection(
-            items = emptyList(),
-            title = "Multi Select Empty",
-            state = InputShellState.UNFOCUSED,
-            onItemsSelected = { _ ->
-                // no-op
-            },
-            onClearItemSelection = {
-                // no-op
-            },
-            isRequired = false,
-            legendData = null,
-            supportingTextData = null,
-        )
-
-        InputMultiSelection(
-            items = multiSelect1Items,
-            title = "Multi Select 1",
-            state = InputShellState.UNFOCUSED,
-            onItemsSelected = { selectedItems ->
-                selectedItems.forEach { selectedItem ->
-                    val index = multiSelect1Items.indexOfFirst { it.uid == selectedItem.uid }
-                    multiSelect1Items[index] = selectedItem
-                }
-            },
-            onClearItemSelection = {
-                multiSelect1Items.replaceAll { it.copy(checked = false) }
-            },
-            isRequired = false,
-            legendData = null,
-            supportingTextData = null,
-        )
+        ColumnComponentContainer("Basic state with no inputs") {
+            InputMultiSelection(
+                items = emptyList(),
+                title = "Multi Select Empty",
+                state = InputShellState.UNFOCUSED,
+                onItemsSelected = { _ ->
+                    // no-op
+                },
+                onClearItemSelection = {
+                    // no-op
+                },
+                isRequired = false,
+                legendData = null,
+                supportingTextData = null,
+            )
+        }
 
-        InputMultiSelection(
-            items = multiSelect1Items,
-            title = "Multi Select 1 Error",
-            state = InputShellState.ERROR,
-            onItemsSelected = { selectedItems ->
-                selectedItems.forEach { selectedItem ->
-                    val index = multiSelect1Items.indexOfFirst { it.uid == selectedItem.uid }
-                    multiSelect1Items[index] = selectedItem
-                }
-            },
-            onClearItemSelection = {
-                multiSelect1Items.replaceAll { it.copy(checked = false) }
-            },
-            isRequired = false,
-            legendData = null,
-            supportingTextData = null,
-        )
+        ColumnComponentContainer("Basic state with <=7 inputs") {
+            InputMultiSelection(
+                items = multiSelect1Items,
+                title = "Multi Select 1",
+                state = InputShellState.UNFOCUSED,
+                onItemsSelected = { selectedItems ->
+                    selectedItems.forEach { selectedItem ->
+                        val index = multiSelect1Items.indexOfFirst { it.uid == selectedItem.uid }
+                        multiSelect1Items[index] = selectedItem
+                    }
+                },
+                onClearItemSelection = {
+                    multiSelect1Items.replaceAll { it.copy(checked = false) }
+                },
+                isRequired = false,
+                legendData = null,
+                supportingTextData = null,
+            )
+        }
 
-        InputMultiSelection(
-            items = multiSelect1Items,
-            title = "Multi Select 1 Disabled",
-            state = InputShellState.DISABLED,
-            onItemsSelected = { selectedItems ->
-                selectedItems.forEach { selectedItem ->
-                    val index = multiSelect1Items.indexOfFirst { it.uid == selectedItem.uid }
-                    multiSelect1Items[index] = selectedItem
-                }
-            },
-            onClearItemSelection = {
-                multiSelect1Items.replaceAll { it.copy(checked = false) }
-            },
-            isRequired = false,
-            legendData = null,
-            supportingTextData = null,
-        )
+        ColumnComponentContainer("Error state") {
+            InputMultiSelection(
+                items = multiSelect1Items,
+                title = "Multi Select 1 Error",
+                state = InputShellState.ERROR,
+                onItemsSelected = { selectedItems ->
+                    selectedItems.forEach { selectedItem ->
+                        val index = multiSelect1Items.indexOfFirst { it.uid == selectedItem.uid }
+                        multiSelect1Items[index] = selectedItem
+                    }
+                },
+                onClearItemSelection = {
+                    multiSelect1Items.replaceAll { it.copy(checked = false) }
+                },
+                isRequired = false,
+                legendData = null,
+                supportingTextData = null,
+            )
+        }
 
-        InputMultiSelection(
-            items = multiSelect2Items,
-            title = "Multi Select 2",
-            state = InputShellState.UNFOCUSED,
-            onItemsSelected = { selectedItems ->
-                selectedItems.forEach { selectedItem ->
-                    val index = multiSelect2Items.indexOfFirst { it.uid == selectedItem.uid }
-                    multiSelect2Items[index] = selectedItem
-                }
-            },
-            onClearItemSelection = {
-                multiSelect2Items.replaceAll { it.copy(checked = false) }
-            },
-            isRequired = false,
-            legendData = null,
-            supportingTextData = null,
-        )
+        ColumnComponentContainer("Disabled state") {
+            InputMultiSelection(
+                items = multiSelect1Items,
+                title = "Multi Select 1 Disabled",
+                state = InputShellState.DISABLED,
+                onItemsSelected = { selectedItems ->
+                    selectedItems.forEach { selectedItem ->
+                        val index = multiSelect1Items.indexOfFirst { it.uid == selectedItem.uid }
+                        multiSelect1Items[index] = selectedItem
+                    }
+                },
+                onClearItemSelection = {
+                    multiSelect1Items.replaceAll { it.copy(checked = false) }
+                },
+                isRequired = false,
+                legendData = null,
+                supportingTextData = null,
+            )
+        }
 
-        InputMultiSelection(
-            items = multiSelect2Items,
-            title = "Multi Select 2 Disabled",
-            state = InputShellState.DISABLED,
-            onItemsSelected = { selectedItems ->
-                selectedItems.forEach { selectedItem ->
-                    val index = multiSelect2Items.indexOfFirst { it.uid == selectedItem.uid }
-                    multiSelect2Items[index] = selectedItem
-                }
-            },
-            onClearItemSelection = {
-                multiSelect2Items.replaceAll { it.copy(checked = false) }
-            },
-            isRequired = false,
-            legendData = null,
-            supportingTextData = null,
-        )
+        ColumnComponentContainer("Basic state with >=7 inputs") {
+            InputMultiSelection(
+                items = multiSelect2Items,
+                title = "Multi Select 2",
+                state = InputShellState.UNFOCUSED,
+                onItemsSelected = { selectedItems ->
+                    selectedItems.forEach { selectedItem ->
+                        val index = multiSelect2Items.indexOfFirst { it.uid == selectedItem.uid }
+                        multiSelect2Items[index] = selectedItem
+                    }
+                },
+                onClearItemSelection = {
+                    multiSelect2Items.replaceAll { it.copy(checked = false) }
+                },
+                isRequired = false,
+                legendData = null,
+                supportingTextData = null,
+            )
+        }
 
-        val multiSelectItems = mutableListOf<CheckBoxData>()
-        for (i in 1..5000) {
-            multiSelectItems.add(
-                CheckBoxData(
-                    uid = "uid-$i",
-                    checked = i == 2,
-                    enabled = true,
-                    textInput = "Opt. $i",
-                ),
+        ColumnComponentContainer("Disabled state with >=7 inputs") {
+            InputMultiSelection(
+                items = multiSelect2Items,
+                title = "Multi Select 2 Disabled",
+                state = InputShellState.DISABLED,
+                onItemsSelected = { selectedItems ->
+                    selectedItems.forEach { selectedItem ->
+                        val index = multiSelect2Items.indexOfFirst { it.uid == selectedItem.uid }
+                        multiSelect2Items[index] = selectedItem
+                    }
+                },
+                onClearItemSelection = {
+                    multiSelect2Items.replaceAll { it.copy(checked = false) }
+                },
+                isRequired = false,
+                legendData = null,
+                supportingTextData = null,
             )
         }
 
-        InputMultiSelection(
-            items = multiSelectItems,
-            title = "Multi Select more than 5000 items",
-            state = InputShellState.UNFOCUSED,
-            onItemsSelected = { selectedItems ->
-                selectedItems.forEach { selectedItem ->
-                    val index = multiSelectItems.indexOfFirst { it.uid == selectedItem.uid }
-                    multiSelectItems[index] = selectedItem
-                }
-            },
-            onClearItemSelection = {
-                multiSelectItems.replaceAll { it.copy(checked = false) }
-            },
-            isRequired = false,
-            legendData = null,
-            supportingTextData = null,
-        )
+        ColumnComponentContainer("With 5000 items") {
+            val multiSelectItems = mutableListOf<CheckBoxData>()
+            for (i in 1..5000) {
+                multiSelectItems.add(
+                    CheckBoxData(
+                        uid = "uid-$i",
+                        checked = i == 2,
+                        enabled = true,
+                        textInput = "Opt. $i",
+                    ),
+                )
+            }
+            InputMultiSelection(
+                items = multiSelectItems,
+                title = "Multi Select more than 5000 items",
+                state = InputShellState.UNFOCUSED,
+                onItemsSelected = { selectedItems ->
+                    selectedItems.forEach { selectedItem ->
+                        val index = multiSelectItems.indexOfFirst { it.uid == selectedItem.uid }
+                        multiSelectItems[index] = selectedItem
+                    }
+                },
+                onClearItemSelection = {
+                    multiSelectItems.replaceAll { it.copy(checked = false) }
+                },
+                isRequired = false,
+                legendData = null,
+                supportingTextData = null,
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/ToggleableInputsSreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/ToggleableInputsSreen.kt
index 32ac73fe8..56f26332c 100644
--- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/ToggleableInputsSreen.kt
+++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/toggleableInputs/ToggleableInputsSreen.kt
@@ -5,13 +5,12 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.graphics.ImageBitmap
 import org.hisp.dhis.common.screens.NoComponentSelectedScreen
+import org.hisp.dhis.common.screens.components.GroupComponentDropDown
 import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem
-import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown
-import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 
 @Composable
 fun ToggleableInputsScreen(imageBitmapLoader: (() -> ImageBitmap)?) {
-    val currentScreen = remember { mutableStateOf(ToggleableInputs.INPUT_RADIO_BUTTON) }
+    val currentScreen = remember { mutableStateOf(ToggleableInputs.NO_COMPONENT_SELECTED) }
 
     val screenDropdownItemList = mutableListOf<DropdownItem>()
     ToggleableInputs.entries.forEach {
@@ -19,13 +18,11 @@ fun ToggleableInputsScreen(imageBitmapLoader: (() -> ImageBitmap)?) {
             screenDropdownItemList.add(DropdownItem(it.label))
         }
     }
-    InputDropDown(
-        "Display",
+    GroupComponentDropDown(
         dropdownItems = screenDropdownItemList.toList(),
         onItemSelected = { currentScreen.value = getCurrentScreen(it.label) },
         onResetButtonClicked = { currentScreen.value = ToggleableInputs.NO_COMPONENT_SELECTED },
         selectedItem = DropdownItem(currentScreen.value.label),
-        state = InputShellState.UNFOCUSED,
     )
     when (currentScreen.value) {
         ToggleableInputs.INPUT_RADIO_BUTTON -> InputRadioButtonScreen()
@@ -36,21 +33,22 @@ fun ToggleableInputsScreen(imageBitmapLoader: (() -> ImageBitmap)?) {
         ToggleableInputs.INPUT_YES_ONLY_CHECKBOX -> InputYesOnlyCheckBoxScreen()
         ToggleableInputs.INPUT_YES_NO_FIELD -> InputYesNoFieldScreen()
         ToggleableInputs.INPUT_DROPDOWN -> InputDropDownScreen()
+
         ToggleableInputs.MULTI_SELECT -> MultiSelectInputScreen()
         ToggleableInputs.NO_COMPONENT_SELECTED -> NoComponentSelectedScreen()
     }
 }
 
 enum class ToggleableInputs(val label: String) {
-    INPUT_RADIO_BUTTON("Input Radio Button"),
-    INPUT_MATRIX("Input Matrix"),
-    INPUT_SEQUENTIAL("Input Sequential"),
-    INPUT_CHECK_BOX("Input Check Box"),
-    INPUT_YES_ONLY_SWITCH("Input yes only switch"),
-    INPUT_YES_ONLY_CHECKBOX("Input yes only checkbox"),
-    INPUT_YES_NO_FIELD("Input Yes/No field"),
-    INPUT_DROPDOWN("Input Dropdown"),
-    MULTI_SELECT("Multi Select Input"),
+    INPUT_RADIO_BUTTON("Input Radio Button component"),
+    INPUT_MATRIX("Input Matrix component"),
+    INPUT_SEQUENTIAL("Input Sequential component"),
+    INPUT_CHECK_BOX("Input Check Box component"),
+    INPUT_YES_ONLY_SWITCH("Input yes only switch component"),
+    INPUT_YES_ONLY_CHECKBOX("Input yes only checkbox component"),
+    INPUT_YES_NO_FIELD("Input Yes/No field component"),
+    INPUT_DROPDOWN("Input Dropdown component"),
+    MULTI_SELECT("Multi Select Input component"),
     NO_COMPONENT_SELECTED("No component selected"),
 }
 
diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/AssistChipSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/AssistChipSnapshotTest.kt
index bf20cd348..c41bf2b3d 100644
--- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/AssistChipSnapshotTest.kt
+++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/AssistChipSnapshotTest.kt
@@ -1,6 +1,5 @@
 package org.hisp.dhis.mobile.ui.designsystem
 
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Search
@@ -8,8 +7,7 @@ import androidx.compose.material3.AssistChipDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.ui.Modifier
 import org.hisp.dhis.mobile.ui.designsystem.component.AssistChip
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.junit.Rule
 import org.junit.Test
 
@@ -20,7 +18,7 @@ class AssistChipSnapshotTest {
     @Test
     fun launchAssistChip() {
         paparazzi.snapshot {
-            ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) {
+            ColumnScreenContainer {
                 AssistChip(
                     label = "Label",
                     icon = {
diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/ButtonSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/ButtonSnapshotTest.kt
index 81a069e75..c8a8f4f61 100644
--- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/ButtonSnapshotTest.kt
+++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/ButtonSnapshotTest.kt
@@ -9,7 +9,7 @@ import androidx.compose.ui.Modifier
 import org.hisp.dhis.mobile.ui.designsystem.component.Button
 import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle
 import org.hisp.dhis.mobile.ui.designsystem.component.ColorStyle
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.Title
@@ -25,7 +25,7 @@ class ButtonSnapshotTest {
     @Test
     fun launchButtonSnapshot() {
         paparazzi.snapshot {
-            ColumnComponentContainer() {
+            ColumnScreenContainer {
                 Title("Buttons")
                 SubTitle("Filled")
                 RowComponentContainer() {
diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/CardDetailSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/CardDetailSnapshotTest.kt
index 18821d8f6..770cb3c7d 100644
--- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/CardDetailSnapshotTest.kt
+++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/CardDetailSnapshotTest.kt
@@ -1,20 +1,17 @@
 package org.hisp.dhis.mobile.ui.designsystem
 
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.CheckCircle
 import androidx.compose.material.icons.filled.PhoneEnabled
 import androidx.compose.material.icons.outlined.Sync
 import androidx.compose.material3.Icon
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import org.hisp.dhis.mobile.ui.designsystem.component.AdditionalInfoItem
 import org.hisp.dhis.mobile.ui.designsystem.component.AdditionalInfoItemColor
 import org.hisp.dhis.mobile.ui.designsystem.component.CardDetail
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InfoBar
 import org.hisp.dhis.mobile.ui.designsystem.component.InfoBarData
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 import org.junit.Rule
@@ -68,7 +65,7 @@ class CardDetailSnapshotTest {
     @Test
     fun launchCardDetail() {
         paparazzi.snapshot {
-            ColumnComponentContainer(title = "Card Detail and Info Bar", modifier = Modifier.padding(horizontal = Spacing.Spacing16)) {
+            ColumnScreenContainer(title = "Card Detail and Info Bar") {
                 InfoBar(
                     InfoBarData(
                         text = "Not Synced",
diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/FABSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/FABSnapshotTest.kt
index b24a86319..91548baa2 100644
--- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/FABSnapshotTest.kt
+++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/FABSnapshotTest.kt
@@ -1,15 +1,12 @@
 package org.hisp.dhis.mobile.ui.designsystem
 
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.FileDownload
 import androidx.compose.material3.Icon
-import androidx.compose.ui.Modifier
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.ExtendedFAB
 import org.hisp.dhis.mobile.ui.designsystem.component.FAB
 import org.hisp.dhis.mobile.ui.designsystem.component.FABStyle
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.junit.Rule
 import org.junit.Test
 
@@ -21,7 +18,7 @@ class FABSnapshotTest {
     @Test
     fun launchFAB() {
         paparazzi.snapshot {
-            ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) {
+            ColumnScreenContainer {
                 FAB(
                     style = FABStyle.SURFACE,
                     onClick = {},
diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputAgeSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputAgeSnapshotTest.kt
index 5bab30067..0b5d7bf56 100644
--- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputAgeSnapshotTest.kt
+++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputAgeSnapshotTest.kt
@@ -1,16 +1,13 @@
 package org.hisp.dhis.mobile.ui.designsystem
 
-import androidx.compose.foundation.layout.padding
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.AgeInputType
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputAge
 import org.hisp.dhis.mobile.ui.designsystem.component.InputAgeModel
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
 import org.hisp.dhis.mobile.ui.designsystem.component.TimeUnitValues
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.junit.Rule
 import org.junit.Test
 
@@ -22,7 +19,7 @@ class InputAgeSnapshotTest {
     @Test
     fun launchInputAgeSnapshot() {
         paparazzi.snapshot {
-            ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) {
+            ColumnScreenContainer {
                 SubTitle("Input Age Component - Idle")
                 InputAge(
                     InputAgeModel(
diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputCheckboxSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputCheckboxSnapshotTest.kt
index dd7c29cf4..f25203f08 100644
--- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputCheckboxSnapshotTest.kt
+++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputCheckboxSnapshotTest.kt
@@ -9,7 +9,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputCheckBox
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.Orientation
@@ -73,7 +73,7 @@ class InputCheckboxSnapshotTest {
                 focusRequester.requestFocus()
             }
 
-            ColumnComponentContainer("Checkboxes") {
+            ColumnScreenContainer("Checkboxes") {
                 SubTitle("Vertical")
                 InputCheckBox(
                     modifier = Modifier.focusRequester(focusRequester),
diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputChipSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputChipSnapshotTest.kt
index bd0bef3e4..e34e24a47 100644
--- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputChipSnapshotTest.kt
+++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputChipSnapshotTest.kt
@@ -2,7 +2,7 @@ package org.hisp.dhis.mobile.ui.designsystem
 
 import androidx.compose.foundation.layout.padding
 import androidx.compose.ui.Modifier
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputChip
 import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.junit.Rule
@@ -16,7 +16,7 @@ class InputChipSnapshotTest {
     @Test
     fun launchChip() {
         paparazzi.snapshot {
-            ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) {
+            ColumnScreenContainer(modifier = Modifier.padding(Spacing.Spacing10)) {
                 InputChip(label = "Label", selected = false, badge = "3")
                 InputChip(label = "Label", selected = true, badge = "3")
             }
diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputDropDownSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputDropDownSnapshotTest.kt
index 7d5038809..e45fb0ee0 100644
--- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputDropDownSnapshotTest.kt
+++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputDropDownSnapshotTest.kt
@@ -10,7 +10,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem
 import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
@@ -30,7 +30,7 @@ class InputDropDownSnapshotTest {
     @Test
     fun launchInputDropDown() {
         paparazzi.snapshot {
-            ColumnComponentContainer {
+            ColumnScreenContainer {
                 val options = listOf(
                     DropdownItem("Option 1"),
                     DropdownItem("Option 2"),
diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputIndicatorSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputIndicatorSnapshotTest.kt
index 375918b55..adec610f7 100644
--- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputIndicatorSnapshotTest.kt
+++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputIndicatorSnapshotTest.kt
@@ -1,11 +1,8 @@
 package org.hisp.dhis.mobile.ui.designsystem
 
-import androidx.compose.foundation.layout.padding
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.Indicator
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.junit.Rule
 import org.junit.Test
 
@@ -17,7 +14,7 @@ class InputIndicatorSnapshotTest {
     @Test
     fun launchIndicatorInput() {
         paparazzi.snapshot {
-            ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) {
+            ColumnScreenContainer {
                 Indicator(
                     title = "Heart Rate",
                     content = "160 bpm",
diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputMatrixSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputMatrixSnapshotTest.kt
index f4378fc3a..4557bcb4d 100644
--- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputMatrixSnapshotTest.kt
+++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputMatrixSnapshotTest.kt
@@ -2,19 +2,16 @@ package org.hisp.dhis.mobile.ui.designsystem
 
 import android.graphics.Bitmap
 import android.graphics.BitmapFactory
-import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.graphics.painter.BitmapPainter
 import androidx.compose.ui.platform.LocalContext
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputMatrix
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.internal.ImageCardData
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 import org.junit.Rule
 import org.junit.Test
@@ -82,7 +79,7 @@ class InputMatrixSnapshotTest {
                 )
             }
 
-            ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) {
+            ColumnScreenContainer {
                 InputMatrix(
                     title = "Label",
                     data = inputCardData,
diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputRadioButtonSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputRadioButtonSnapshotTest.kt
index d79bc1d99..ab70bbadc 100644
--- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputRadioButtonSnapshotTest.kt
+++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputRadioButtonSnapshotTest.kt
@@ -11,7 +11,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import org.hisp.dhis.mobile.ui.designsystem.component.Button
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputRadioButton
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.Orientation
@@ -81,7 +81,7 @@ class InputRadioButtonSnapshotTest {
             }
             var showSupportingText by remember { mutableStateOf(false) }
             val focusRequester = remember { FocusRequester() }
-            ColumnComponentContainer("Radio Buttons") {
+            ColumnScreenContainer("Radio Buttons") {
                 LaunchedEffect(Unit) {
                     focusRequester.requestFocus()
                 }
diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputSequentialSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputSequentialSnapshotTest.kt
index 12e58647b..f9f422359 100644
--- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputSequentialSnapshotTest.kt
+++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputSequentialSnapshotTest.kt
@@ -2,19 +2,16 @@ package org.hisp.dhis.mobile.ui.designsystem
 
 import android.graphics.Bitmap
 import android.graphics.BitmapFactory
-import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.graphics.painter.BitmapPainter
 import androidx.compose.ui.platform.LocalContext
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputSequential
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.internal.ImageCardData
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 import org.junit.Rule
 import org.junit.Test
@@ -82,7 +79,7 @@ class InputSequentialSnapshotTest {
                 )
             }
 
-            ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) {
+            ColumnScreenContainer {
                 InputSequential(
                     title = "Label",
                     data = inputCardData,
diff --git a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/LoginSnapshotTest.kt b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/LoginSnapshotTest.kt
index cf0020868..775200d2e 100644
--- a/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/LoginSnapshotTest.kt
+++ b/designsystem/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/LoginSnapshotTest.kt
@@ -1,7 +1,6 @@
 package org.hisp.dhis.mobile.ui.designsystem
 
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.outlined.Login
 import androidx.compose.material3.Icon
@@ -9,14 +8,13 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.input.TextFieldValue
 import org.hisp.dhis.mobile.ui.designsystem.component.Button
 import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle
-import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputPassword
 import org.hisp.dhis.mobile.ui.designsystem.component.InputQRCode
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.InputUser
 import org.hisp.dhis.mobile.ui.designsystem.component.model.InputPasswordModel
 import org.hisp.dhis.mobile.ui.designsystem.component.model.InputUserModel
-import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.junit.Rule
 import org.junit.Test
 
@@ -28,7 +26,7 @@ class LoginSnapshotTest {
     @Test
     fun launchLoginScreen() {
         paparazzi.snapshot {
-            ColumnComponentContainer(title = "Login", modifier = Modifier.padding(Spacing.Spacing10)) {
+            ColumnScreenContainer(title = "Login") {
                 InputQRCode(
                     "Server URL",
                     inputTextFieldValue = TextFieldValue("https://play.dhis2.org/40"),
@@ -61,12 +59,10 @@ class LoginSnapshotTest {
                         Icon(
                             imageVector = Icons.AutoMirrored.Outlined.Login,
                             contentDescription = "Login button",
-
                         )
                     },
                     modifier = Modifier.fillMaxWidth(),
                     enabled = true,
-
                 )
             }
         }
diff --git a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Container.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Container.kt
index 54f627655..a8421ab6d 100644
--- a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Container.kt
+++ b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Container.kt
@@ -1,41 +1,82 @@
 package org.hisp.dhis.mobile.ui.designsystem.component
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowColumn
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.Dp
+import org.hisp.dhis.mobile.ui.designsystem.theme.Shape
 import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 /**
- * DHIS2 ColumnComponentContainer wraps Material 3 [Column]
- * has a default spacing between items of 10 dp
+ * DHIS2 ColumnScreenContainer wraps Material 3 [Column]
+ * has a default spacing between items of 16 dp
+ * with large top corner radius, white background and
  * vertical scroll enabled
  * @param title: is the value of the text to be shown for the row.
  * @param content: controls the content to be shown.
  * @param modifier: optional modifier.
+ * @param verticalArrangement: optional vertical alignment.
+ * @param horizontalAlignment: optional horizontal alignment.
  */
 @Composable
-fun ColumnComponentContainer(
+fun ColumnScreenContainer(
     title: String? = null,
     modifier: Modifier = Modifier,
+    verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(Spacing.Spacing16),
+    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
     content: @Composable (() -> Unit),
 ) {
     Column(
-        verticalArrangement = Arrangement.spacedBy(Spacing.Spacing16),
-        modifier = modifier.verticalScroll(rememberScrollState()),
+        verticalArrangement = verticalArrangement,
+        horizontalAlignment = horizontalAlignment,
+        modifier = modifier
+            .fillMaxSize().background(Color.White, Shape.LargeTop)
+            .padding(horizontal = Spacing.Spacing16)
+            .verticalScroll(rememberScrollState()),
     ) {
         title?.let {
-            Title(title)
+            Title(title, modifier = Modifier.padding(top = Spacing.Spacing16))
+        }
+        content()
+        Spacer(modifier = Modifier.padding(bottom = Spacing.Spacing16))
+    }
+}
+
+/**
+ * DHIS2 ColumnComponentContainer wraps Material 3 [Column]
+ * has a default spacing between items of 16 dp
+ * @param subTitle: is the value of the text to be shown for the component.
+ * @param content: controls the content to be shown.
+ * @param modifier: optional modifier.
+ */
+@Composable
+fun ColumnComponentContainer(
+    subTitle: String? = null,
+    modifier: Modifier = Modifier,
+    content: @Composable (() -> Unit),
+) {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(Spacing.Spacing16),
+        horizontalAlignment = Alignment.Start,
+        modifier = modifier.padding(bottom = Spacing.Spacing32),
+    ) {
+        subTitle?.let {
+            SubTitle(subTitle)
         }
         content()
     }
diff --git a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputDropDown.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputDropDown.kt
index b11a7fe4b..089621295 100644
--- a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputDropDown.kt
+++ b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputDropDown.kt
@@ -86,11 +86,12 @@ fun InputDropDown(
     onResetButtonClicked: () -> Unit,
     onItemSelected: (DropdownItem) -> Unit,
     showSearchBar: Boolean = true,
+    expanded: Boolean = false,
     noResultsFoundString: String = provideStringResource("no_results_found"),
     searchToFindMoreString: String = provideStringResource("search_to_see_more"),
 ) {
     val focusRequester = remember { FocusRequester() }
-    var showDropdown by remember { mutableStateOf(false) }
+    var showDropdown by remember { mutableStateOf(expanded) }
 
     val inputField: @Composable (modifier: Modifier) -> Unit = { inputModifier ->
         DropdownInputField(
@@ -187,13 +188,13 @@ fun InputDropDown(
         ExposedDropdownMenuBox(
             expanded = showDropdown,
             onExpandedChange = { },
-            modifier = Modifier
+            modifier = modifier
                 .background(
                     color = SurfaceColor.SurfaceBright,
                     shape = RoundedCornerShape(Spacing8),
                 ),
         ) {
-            inputField(modifier.menuAnchor())
+            inputField(Modifier.menuAnchor())
 
             MaterialTheme(
                 shapes = Shapes(extraSmall = RoundedCornerShape(Spacing8)),
diff --git a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputStyle.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputStyle.kt
index 1734e7df2..35fd8f4e5 100644
--- a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputStyle.kt
+++ b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputStyle.kt
@@ -17,7 +17,7 @@ import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
  */
 sealed class InputStyle(
     val startIndent: Dp,
-    val backGroundColor: Color,
+    var backGroundColor: Color,
     val disabledBackGroundColor: Color,
     val unfocusedIndicatorColor: Color?,
     val disabledIndicatorColor: Color?,
diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_AssistChipSnapshotTest_launchAssistChip.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_AssistChipSnapshotTest_launchAssistChip.png
index 183adbfdb..cc3a9b71a 100644
Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_AssistChipSnapshotTest_launchAssistChip.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_AssistChipSnapshotTest_launchAssistChip.png differ
diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ButtonSnapshotTest_launchButtonSnapshot.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ButtonSnapshotTest_launchButtonSnapshot.png
index 98e37c2ff..f1add60ab 100644
Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ButtonSnapshotTest_launchButtonSnapshot.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ButtonSnapshotTest_launchButtonSnapshot.png differ
diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_CardDetailSnapshotTest_launchCardDetail.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_CardDetailSnapshotTest_launchCardDetail.png
index 0820202c5..1c0e8a782 100644
Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_CardDetailSnapshotTest_launchCardDetail.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_CardDetailSnapshotTest_launchCardDetail.png differ
diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_FABSnapshotTest_launchFAB.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_FABSnapshotTest_launchFAB.png
index 1dd0c841f..9625de61a 100644
Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_FABSnapshotTest_launchFAB.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_FABSnapshotTest_launchFAB.png differ
diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputAgeSnapshotTest_launchInputAgeSnapshot.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputAgeSnapshotTest_launchInputAgeSnapshot.png
index 3c302d56b..e4198b508 100644
Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputAgeSnapshotTest_launchInputAgeSnapshot.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputAgeSnapshotTest_launchInputAgeSnapshot.png differ
diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputCheckboxSnapshotTest_launchInputCheckBox.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputCheckboxSnapshotTest_launchInputCheckBox.png
index daeb78c69..79792531f 100644
Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputCheckboxSnapshotTest_launchInputCheckBox.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputCheckboxSnapshotTest_launchInputCheckBox.png differ
diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputChipSnapshotTest_launchChip.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputChipSnapshotTest_launchChip.png
index 937475d8b..1e62251e4 100644
Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputChipSnapshotTest_launchChip.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputChipSnapshotTest_launchChip.png differ
diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputDropDownSnapshotTest_launchInputDropDown.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputDropDownSnapshotTest_launchInputDropDown.png
index 9d120daf7..d05d6dbd3 100644
Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputDropDownSnapshotTest_launchInputDropDown.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputDropDownSnapshotTest_launchInputDropDown.png differ
diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputIndicatorSnapshotTest_launchIndicatorInput.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputIndicatorSnapshotTest_launchIndicatorInput.png
index 9c79423d0..e099851be 100644
Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputIndicatorSnapshotTest_launchIndicatorInput.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputIndicatorSnapshotTest_launchIndicatorInput.png differ
diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputMatrixSnapshotTest_launchMatrix.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputMatrixSnapshotTest_launchMatrix.png
index b948c9a29..355051ece 100644
Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputMatrixSnapshotTest_launchMatrix.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputMatrixSnapshotTest_launchMatrix.png differ
diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputRadioButtonSnapshotTest_launchInputRadioButton.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputRadioButtonSnapshotTest_launchInputRadioButton.png
index 2f5683b44..84bd87587 100644
Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputRadioButtonSnapshotTest_launchInputRadioButton.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputRadioButtonSnapshotTest_launchInputRadioButton.png differ
diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputSequentialSnapshotTest_launchMatrix.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputSequentialSnapshotTest_launchMatrix.png
index 15a4285b9..e4f00da23 100644
Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputSequentialSnapshotTest_launchMatrix.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_InputSequentialSnapshotTest_launchMatrix.png differ
diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ListCardSnapshotTest_launchListCard.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ListCardSnapshotTest_launchListCard.png
index fb4918fb2..3c68d6477 100644
Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ListCardSnapshotTest_launchListCard.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_ListCardSnapshotTest_launchListCard.png differ
diff --git a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_LoginSnapshotTest_launchLoginScreen.png b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_LoginSnapshotTest_launchLoginScreen.png
index d481f32ce..6c697cd9b 100644
Binary files a/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_LoginSnapshotTest_launchLoginScreen.png and b/designsystem/src/test/snapshots/images/org.hisp.dhis.mobile.ui.designsystem_LoginSnapshotTest_launchLoginScreen.png differ