diff --git a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Components.kt b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Components.kt
deleted file mode 100644
index 6627bfe..0000000
--- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Components.kt
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * Flexi UI - A flexible and useful UI component library.
- * Copyright (C) 2019-2024 HighCapable
- * https://github.com/BetterAndroid/FlexiUI
- *
- * Apache License Version 2.0
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * This file is created by fankes on 2024/1/11.
- */
-package com.highcapable.flexiui.demo
-
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.size
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
-import com.highcapable.flexiui.FlexiTheme
-import com.highcapable.flexiui.component.Text
-
-// TODO: Some components can be include to Flexi UI (To be determined)
-
-@Composable
-fun PrimarySpacer() {
-    Spacer(modifier = Modifier.size(10.dp))
-}
-
-@Composable
-fun SecondarySpacer() {
-    Spacer(modifier = Modifier.size(5.dp))
-}
-
-@Composable
-fun SecondaryText(text: String) {
-    Text(
-        text = text,
-        color = FlexiTheme.colors.textSecondary,
-        style = FlexiTheme.typography.secondary
-    )
-}
\ No newline at end of file
diff --git a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/LazyListScreen.kt b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/LazyListScreen.kt
index 67fa429..95f9aff 100644
--- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/LazyListScreen.kt
+++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/LazyListScreen.kt
@@ -54,6 +54,7 @@ import com.highcapable.flexiui.component.HorizontalItemBox
 import com.highcapable.flexiui.component.Icon
 import com.highcapable.flexiui.component.Scaffold
 import com.highcapable.flexiui.component.SecondaryAppBar
+import com.highcapable.flexiui.component.SecondarySpacer
 import com.highcapable.flexiui.component.Tab
 import com.highcapable.flexiui.component.TabRow
 import com.highcapable.flexiui.component.Text
@@ -61,7 +62,6 @@ import com.highcapable.flexiui.component.window.FlexiDialog
 import com.highcapable.flexiui.demo.Delete
 import com.highcapable.flexiui.demo.DeleteForever
 import com.highcapable.flexiui.demo.ListAdd
-import com.highcapable.flexiui.demo.PrimarySpacer
 import com.highcapable.flexiui.demo.bean.SimpleListBean
 import com.highcapable.flexiui.demo.rememberRouter
 import com.highcapable.flexiui.demo.strings
@@ -170,7 +170,7 @@ fun LazyListScreen() {
                             onClick = { testListData.removeAt(index) }
                         ) {
                             Icon(FlexiIcons.Delete)
-                            PrimarySpacer()
+                            SecondarySpacer()
                             Text(strings.listRemoveSingle)
                         }
                     }
diff --git a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/MainScreen.kt b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/MainScreen.kt
index 50d2577..2711061 100644
--- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/MainScreen.kt
+++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/MainScreen.kt
@@ -59,8 +59,11 @@ import com.highcapable.flexiui.component.NavigationBarItem
 import com.highcapable.flexiui.component.NavigationBarRow
 import com.highcapable.flexiui.component.PrimaryAppBar
 import com.highcapable.flexiui.component.Scaffold
+import com.highcapable.flexiui.component.SecondarySpacer
+import com.highcapable.flexiui.component.SecondaryText
 import com.highcapable.flexiui.component.StickyHeaderBar
 import com.highcapable.flexiui.component.SwitchItem
+import com.highcapable.flexiui.component.TertiarySpacer
 import com.highcapable.flexiui.component.Text
 import com.highcapable.flexiui.component.window.FlexiDialog
 import com.highcapable.flexiui.demo.Component
@@ -69,10 +72,7 @@ import com.highcapable.flexiui.demo.Home
 import com.highcapable.flexiui.demo.Locale
 import com.highcapable.flexiui.demo.PROJECT_URL
 import com.highcapable.flexiui.demo.Preferences
-import com.highcapable.flexiui.demo.PrimarySpacer
 import com.highcapable.flexiui.demo.Screen
-import com.highcapable.flexiui.demo.SecondarySpacer
-import com.highcapable.flexiui.demo.SecondaryText
 import com.highcapable.flexiui.demo.Style
 import com.highcapable.flexiui.demo.locales
 import com.highcapable.flexiui.demo.rememberRouter
@@ -156,7 +156,7 @@ fun MainHomePage(modifier: Modifier) {
     val scrollState = rememberScrollState()
     Column(modifier = modifier.fillMaxSize().verticalScroll(scrollState)) {
         AreaBox(modifier = Modifier.fillMaxWidth()) { Text(strings.appDescription) }
-        PrimarySpacer()
+        SecondarySpacer()
         AreaColumn(modifier = Modifier.fillMaxWidth()) {
             var locale by remember { Preferences.locale }
             StickyHeaderBar(
@@ -164,14 +164,14 @@ fun MainHomePage(modifier: Modifier) {
                 icon = { Icon(FlexiIcons.Locale) },
                 title = { Text(strings.uiLanguage) }
             )
-            PrimarySpacer()
+            SecondarySpacer()
             Row(
                 modifier = Modifier.fillMaxWidth(),
                 verticalAlignment = Alignment.CenterVertically
             ) {
                 var expanded by remember { mutableStateOf(false) }
                 Text(strings.selectLanguage)
-                PrimarySpacer()
+                SecondarySpacer()
                 DropdownList(
                     modifier = Modifier.fillMaxWidth(),
                     expanded = expanded,
@@ -190,7 +190,7 @@ fun MainHomePage(modifier: Modifier) {
                 }
             }
         }
-        PrimarySpacer()
+        SecondarySpacer()
         AreaColumn(modifier = Modifier.fillMaxWidth()) {
             val colorSchemes = availableColorSchemes()
             var colorScheme by remember { Preferences.colorScheme }
@@ -201,32 +201,32 @@ fun MainHomePage(modifier: Modifier) {
                 icon = { Icon(FlexiIcons.Style) },
                 title = { Text(strings.themeStyle) }
             )
-            PrimarySpacer()
+            SecondarySpacer()
             AnimatedVisibility(visible = !followSystemDarkMode) {
                 Column {
                     SwitchItem(
                         checked = darkMode,
                         onCheckedChange = { darkMode = it }
                     ) { Text(strings.enableDarkMode) }
-                    SecondarySpacer()
+                    TertiarySpacer()
                     SecondaryText(strings.enableDarkModeDescription)
-                    PrimarySpacer()
+                    SecondarySpacer()
                 }
             }
             SwitchItem(
                 checked = followSystemDarkMode,
                 onCheckedChange = { followSystemDarkMode = it }
             ) { Text(strings.followSystemDarkMode) }
-            SecondarySpacer()
+            TertiarySpacer()
             SecondaryText(strings.followSystemDarkModeDescription)
-            PrimarySpacer()
+            SecondarySpacer()
             Row(
                 modifier = Modifier.fillMaxWidth(),
                 verticalAlignment = Alignment.CenterVertically
             ) {
                 var expanded by remember { mutableStateOf(false) }
                 Text(strings.selectTheme)
-                PrimarySpacer()
+                SecondarySpacer()
                 DropdownList(
                     modifier = Modifier.fillMaxWidth(),
                     expanded = expanded,
@@ -245,14 +245,14 @@ fun MainHomePage(modifier: Modifier) {
                 }
             }
         }
-        PrimarySpacer()
+        SecondarySpacer()
         val router = rememberRouter()
         HorizontalItemBox(
             onClick = { router.navigate(Screen.Secondary) },
             title = { Text(strings.singlePageDemo) },
             subtitle = { Text(strings.singlePageDemoDescription) }
         )
-        PrimarySpacer()
+        SecondarySpacer()
         HorizontalItemBox(
             onClick = { router.navigate(Screen.LazyList) },
             title = { Text(strings.lazyListDemo) },
diff --git a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/SecondaryScreen.kt b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/SecondaryScreen.kt
index b922492..ea81661 100644
--- a/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/SecondaryScreen.kt
+++ b/samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/SecondaryScreen.kt
@@ -33,8 +33,8 @@ import com.highcapable.flexiui.component.AreaColumn
 import com.highcapable.flexiui.component.Button
 import com.highcapable.flexiui.component.Scaffold
 import com.highcapable.flexiui.component.SecondaryAppBar
+import com.highcapable.flexiui.component.SecondarySpacer
 import com.highcapable.flexiui.component.Text
-import com.highcapable.flexiui.demo.PrimarySpacer
 import com.highcapable.flexiui.demo.rememberRouter
 import com.highcapable.flexiui.demo.strings
 
@@ -61,7 +61,7 @@ fun SecondaryScreen() {
                     text = strings.singlePageDescription,
                     style = FlexiTheme.typography.primary.copy(lineHeight = 2.em)
                 )
-                PrimarySpacer()
+                SecondarySpacer()
                 Button(
                     modifier = Modifier.fillMaxWidth(),
                     onClick = { router.goHome() }