diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index 8eeb0073..6f5b9045 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -21,7 +21,7 @@ android {
         minSdk = 24
         targetSdk = 34
         // 版本号为x.y.z则versionCode为x*1000000+y*10000+z*100+debug版本号(开发需要时迭代, 两位数)
-        versionCode = 1_00_00_013
+        versionCode = 1_00_00_015
         versionName = "1.0.0"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
diff --git a/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/book/content/ContentScreen.kt b/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/book/content/ContentScreen.kt
index a91f7a08..78db3e50 100644
--- a/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/book/content/ContentScreen.kt
+++ b/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/book/content/ContentScreen.kt
@@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.calculateEndPadding
 import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.fillMaxHeight
@@ -36,6 +37,7 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Badge
 import androidx.compose.material3.BottomAppBar
+import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
@@ -43,6 +45,7 @@ import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.SheetState
+import androidx.compose.material3.SheetValue.*
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarScrollBehavior
@@ -61,6 +64,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
@@ -128,7 +132,7 @@ fun Content(
     val coroutineScope = rememberCoroutineScope()
     val view = LocalView.current
     val context = LocalContext.current
-    val settingsBottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+    val settingsBottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false)
     val chapterSelectorBottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
     var isRunning by remember { mutableStateOf(false) }
     var isImmersive by remember { mutableStateOf(false) }
@@ -316,7 +320,8 @@ fun Content(
         }
         AnimatedVisibility(visible = showSettingsBottomSheet) {
             SettingsBottomSheet(
-                state = settingsBottomSheetState,
+                viewModel = viewModel,
+                sheetState = settingsBottomSheetState,
                 onDismissRequest = {
                     coroutineScope.launch { settingsBottomSheetState.hide() }.invokeOnCompletion {
                         if (!settingsBottomSheetState.isVisible) {
@@ -469,193 +474,6 @@ private fun BottomBar(
     }
 }
 
-
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun SettingsBottomSheet(
-    state: SheetState,
-    onDismissRequest: () -> Unit,
-    settingState: SettingState
-) {
-    ModalBottomSheet(
-        onDismissRequest = onDismissRequest,
-        sheetState = state
-    ) {
-        Box(
-            modifier = Modifier.padding(16.dp, 0.dp, 16.dp, 22.dp)
-        ) {
-            LazyColumn (
-                modifier = Modifier.clip(RoundedCornerShape(16.dp)),
-                verticalArrangement = Arrangement.spacedBy(8.dp)
-            ) {
-                item {
-                    SettingsSliderEntry(
-                        title = "阅读器字体大小",
-                        unit = "sp",
-                        valueRange = 8f..64f,
-                        value = settingState.fontSize,
-                        floatUserData = settingState.fontSizeUserData
-                    )
-                }
-                item {
-                    SettingsSliderEntry(
-                        title = "阅读器行距大小",
-                        unit = "sp",
-                        valueRange = 0f..32f,
-                        value = settingState.fontLineHeight,
-                        floatUserData = settingState.fontLineHeightUserData
-                    )
-                }
-                item {
-                    SettingsSwitchEntry(
-                        title = "屏幕常亮",
-                        description = "在阅读页时,总是保持屏幕开启。这将导致耗电量增加",
-                        checked = settingState.keepScreenOn,
-                        booleanUserData = settingState.keepScreenOnUserData,
-                    )
-                }
-                item {
-                    SettingsSwitchEntry(
-                        title = "翻页模式",
-                        description = "切换滚动模式为翻页模式",
-                        checked = settingState.isUsingFlipPage,
-                        booleanUserData = settingState.isUsingFlipPageUserData,
-                    )
-                }
-                if(settingState.isUsingFlipPage) {
-                    item {
-                        SettingsSwitchEntry(
-                            modifier = Modifier.animateItem(),
-                            title = "音量键控制",
-                            description = "使用音量+键切换至上一页,使用音量-键切换至下一页。",
-                            checked = settingState.isUsingVolumeKeyFlip,
-                            booleanUserData = settingState.isUsingVolumeKeyFlipUserData,
-                        )
-                    }
-                }
-                if(settingState.isUsingFlipPage) {
-                    item {
-                        SettingsSwitchEntry(
-                            modifier = Modifier.animateItem(),
-                            title = "点击翻页",
-                            description = "使用点击控制翻页,并将呼出菜单变为上下滑动。",
-                            checked = settingState.isUsingClickFlipPage,
-                            booleanUserData = settingState.isUsingClickFlipPageUserData,
-                        )
-                    }
-                }
-                if(settingState.isUsingFlipPage) {
-                    item {
-                        SettingsSwitchEntry(
-                            modifier = Modifier.animateItem(),
-                            title = "启用动画",
-                            description = "开启点击翻页或音量键翻页时的动画,如果关闭可以允许你快速的翻页。",
-                            checked = settingState.isUsingFlipAnime,
-                            booleanUserData = settingState.isUsingFlipAnimeUserData,
-                        )
-                    }
-                }
-                if(settingState.isUsingFlipPage) {
-                    item {
-                        SettingsSwitchEntry(
-                            modifier = Modifier.animateItem(),
-                            title = "快速切换章节",
-                            description = "开启后,当你在每章尾页或首页翻页时,会自动切换到上一章或下一章。",
-                            checked = settingState.fastChapterChange,
-                            booleanUserData = settingState.fastChapterChangeUserData,
-                        )
-                    }
-                }
-                item {
-                    SettingsSwitchEntry(
-                        title = "自动获取边距",
-                        description = "自动识别手机屏幕的边距,并进行显示适配,如关闭需要手动进行设置。",
-                        checked = settingState.autoPadding,
-                        booleanUserData = settingState.autoPaddingUserData,
-                    )
-                }
-                item {
-                    SettingsSwitchEntry(
-                        title = "电量指示器",
-                        description = "在页面左下角显示当前电量。",
-                        checked = settingState.enableBatteryIndicator,
-                        booleanUserData = settingState.enableBatteryIndicatorUserData,
-                    )
-                }
-                item {
-                    SettingsSwitchEntry(
-                        title = "时间指示器",
-                        description = "在页面左下角显示当前时间。",
-                        checked = settingState.enableTimeIndicator,
-                        booleanUserData = settingState.enableTimeIndicatorUserData,
-                    )
-                }
-                item {
-                    SettingsSwitchEntry(
-                        title = "名称指示器",
-                        description = "在页面右下角显示当前阅读章节名称。",
-                        checked = settingState.enableChapterTitleIndicator,
-                        booleanUserData = settingState.enableChapterTitleIndicatorUserData,
-                    )
-                }
-                item {
-                    SettingsSwitchEntry(
-                        title = "进度指示器",
-                        description = "在页面右下角显示当前阅读进度。",
-                        checked = settingState.enableReadingChapterProgressIndicator,
-                        booleanUserData = settingState.enableReadingChapterProgressIndicatorUserData,
-                    )
-                }
-                if(!settingState.autoPadding) {
-                    item {
-                    SettingsSliderEntry(
-                        title = "上边距",
-                        unit = "dp",
-                        valueRange = 0f..128f,
-                        value = settingState.topPadding,
-                        floatUserData = settingState.topPaddingUserData
-                    )
-                    }
-                }
-                if(!settingState.autoPadding) {
-                    item {
-                    SettingsSliderEntry(
-                        title = "下边距",
-                        unit = "dp",
-                        valueRange = 0f..128f,
-                        value = settingState.bottomPadding,
-                        floatUserData = settingState.bottomPaddingUserData
-                    )
-                    }
-                }
-                if(!settingState.autoPadding) {
-                    item {
-                    SettingsSliderEntry(
-                        title = "左边距",
-                        unit = "dp",
-                        valueRange = 0f..128f,
-                        value = settingState.leftPadding,
-                        floatUserData = settingState.leftPaddingUserData
-                    )
-                    }
-                }
-                if(!settingState.autoPadding) {
-                    item {
-                    SettingsSliderEntry(
-                        title = "右边距",
-                        unit = "dp",
-                        valueRange = 0f..128f,
-                        value = settingState.rightPadding,
-                        floatUserData = settingState.rightPaddingUserData
-                    )
-                    }
-                }
-            }
-        }
-    }
-}
-
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ChapterSelectorBottomSheet(
diff --git a/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/book/content/ContentSettingsScreen.kt b/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/book/content/ContentSettingsScreen.kt
new file mode 100644
index 00000000..45af7b34
--- /dev/null
+++ b/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/book/content/ContentSettingsScreen.kt
@@ -0,0 +1,478 @@
+package indi.dmzz_yyhyy.lightnovelreader.ui.book.content
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.keyframes
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.SheetState
+import androidx.compose.material3.SheetValue.Expanded
+import androidx.compose.material3.SheetValue.Hidden
+import androidx.compose.material3.SheetValue.PartiallyExpanded
+import androidx.compose.material3.Tab
+import androidx.compose.material3.TabRow
+import androidx.compose.material3.TabRowDefaults.SecondaryIndicator
+import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
+import androidx.compose.material3.Text
+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.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import indi.dmzz_yyhyy.lightnovelreader.R
+import indi.dmzz_yyhyy.lightnovelreader.ui.components.SettingsSliderEntry
+import indi.dmzz_yyhyy.lightnovelreader.ui.components.SettingsSwitchEntry
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SettingsBottomSheet(
+    viewModel: ContentViewModel,
+    sheetState: SheetState,
+    onDismissRequest: () -> Unit,
+    settingState: SettingState
+) {
+    val isEnableIndicator = (viewModel.settingState.enableBatteryIndicator
+            || viewModel.settingState.enableTimeIndicator
+            || viewModel.settingState.enableReadingChapterProgressIndicator)
+    ModalBottomSheet(
+        onDismissRequest = onDismissRequest,
+        sheetState = sheetState,
+        shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
+        containerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
+        tonalElevation = 16.dp,
+        dragHandle = {
+            Box(
+                modifier = Modifier
+                    .padding(8.dp)
+                    .width(50.dp)
+                    .height(6.dp)
+                    .clip(RoundedCornerShape(50))
+                    .background(MaterialTheme.colorScheme.primary)
+            )
+        }
+    ) {
+        var selectedTabIndex by remember { mutableStateOf(0) }
+
+        val animatedProgress by rememberInfiniteTransition().animateFloat(
+            initialValue = 0f,
+            targetValue = 1f,
+            animationSpec = infiniteRepeatable(
+                animation = tween(1000),
+                repeatMode = RepeatMode.Reverse
+            )
+        )
+
+        val bgFlashColor by animateColorAsState(
+            targetValue = if (animatedProgress > 0.5f) MaterialTheme.colorScheme.primary else Color.Transparent,
+            animationSpec = tween(2000)
+        )
+
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .fillMaxHeight()
+                .padding(top = 16.dp)
+        ) {
+            AnimatedVisibility(
+                visible = sheetState.currentValue == Expanded,
+                enter = expandVertically(),
+                exit = shrinkVertically()
+            ) {
+                Column {
+                    Row(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 16.dp)
+                            .padding(vertical = 12.dp),
+                        verticalAlignment = Alignment.CenterVertically,
+                    ) {
+                        Icon(
+                            painter = painterResource(R.drawable.outline_settings_24px),
+                            contentDescription = null
+                        )
+                        Text(
+                            modifier = Modifier.padding(start = 8.dp),
+                            text = "设置预览",
+                            style = MaterialTheme.typography.titleLarge,
+                            fontWeight = FontWeight.Bold
+                        )
+                    }
+
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .background(if (selectedTabIndex == 2) bgFlashColor else MaterialTheme.colorScheme.surface )
+                            .height(200.dp)
+                            .padding(
+                                top = animateDpAsState(
+                                    targetValue = if (viewModel.settingState.autoPadding) 12.dp else viewModel.settingState.topPadding.dp,
+                                    animationSpec = tween(300)
+                                ).value,
+                                start = animateDpAsState(
+                                    targetValue = if (viewModel.settingState.autoPadding) 16.dp else viewModel.settingState.leftPadding.dp,
+                                    animationSpec = tween(300)
+                                ).value,
+                                end = animateDpAsState(
+                                    targetValue = if (viewModel.settingState.autoPadding) 16.dp else viewModel.settingState.rightPadding.dp,
+                                    animationSpec = tween(300)
+                                ).value,
+                                bottom = animateDpAsState(
+                                    targetValue = if (viewModel.settingState.autoPadding) 16.dp else viewModel.settingState.bottomPadding.dp,
+                                    animationSpec = tween(300)
+                                ).value
+                            )
+                    ) {
+                        Box (
+                            modifier = Modifier.background(MaterialTheme.colorScheme.surface)
+                        ) {
+                            ContentText(
+                                content = viewModel.uiState.chapterContent.content,
+                                onClickLastChapter = { },
+                                onClickNextChapter = { },
+                                fontSize = viewModel.settingState.fontSize.sp,
+                                fontLineHeight = viewModel.settingState.fontLineHeight.sp,
+                                readingProgress = viewModel.uiState.readingProgress,
+                                isUsingFlipPage = viewModel.settingState.isUsingFlipPage,
+                                isUsingClickFlip = viewModel.settingState.isUsingClickFlipPage,
+                                isUsingVolumeKeyFlip = viewModel.settingState.isUsingVolumeKeyFlip,
+                                isUsingFlipAnime = viewModel.settingState.isUsingFlipAnime,
+                                onChapterReadingProgressChange = { },
+                                paddingValues = PaddingValues( bottom = if (isEnableIndicator) 46.dp else 12.dp),
+                                autoPadding = viewModel.settingState.autoPadding,
+                                fastChapterChange = viewModel.settingState.fastChapterChange,
+                                changeIsImmersive = {}
+                            )
+                        }
+                        Indicator(
+                            Modifier
+                                .align(Alignment.BottomEnd)
+                                .padding(
+                                    if (viewModel.settingState.autoPadding)
+                                        PaddingValues(
+                                            bottom = 8.dp,
+                                            start = 16.dp,
+                                            end = 16.dp
+                                        )
+                                    else PaddingValues(
+                                        start = viewModel.settingState.leftPadding.dp,
+                                        end = viewModel.settingState.rightPadding.dp
+                                    )
+                                ),
+                            enableBatteryIndicator = viewModel.settingState.enableBatteryIndicator,
+                            enableTimeIndicator = viewModel.settingState.enableTimeIndicator,
+                            enableChapterTitle = viewModel.settingState.enableChapterTitleIndicator,
+                            chapterTitle = viewModel.uiState.chapterContent.title,
+                            enableReadingChapterProgressIndicator = viewModel.settingState.enableReadingChapterProgressIndicator,
+                            readingChapterProgress = 0.33f
+                        )
+
+                    }
+                }
+            }
+
+            AnimatedVisibility(
+                visible = sheetState.currentValue == PartiallyExpanded || sheetState.currentValue == Hidden,
+                enter = expandVertically(),
+                exit = shrinkVertically()
+            ) {
+                Text(
+                    modifier = Modifier.padding(horizontal = 16.dp),
+                    style = MaterialTheme.typography.titleLarge,
+                    text = "阅读器设置"
+                )
+            }
+
+            ContentSettings(
+                settingState = settingState,
+                selectedTabIndex = selectedTabIndex,
+                onTabSelected = { index -> selectedTabIndex = index }
+            )
+        }
+    }
+}
+
+data class TabItem(val title:String, val iconRes: Int)
+
+@Composable
+fun ContentSettings(
+    settingState: SettingState,
+    selectedTabIndex: Int,
+    onTabSelected: (Int) -> Unit
+) {
+    val tabs = listOf(
+        TabItem("外观", R.drawable.filled_menu_book_24px),
+        TabItem("操作", R.drawable.settings_applications_24px),
+        TabItem("边距", R.drawable.aspect_ratio_24px),
+        )
+    Column {
+        TabRow(
+            containerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
+            selectedTabIndex = selectedTabIndex,
+            indicator = { tabPositions ->
+                SecondaryIndicator(
+                    modifier = Modifier
+                        .tabIndicatorOffset(tabPositions[selectedTabIndex])
+                        .padding(horizontal = 24.dp)
+                        .clip(RoundedCornerShape(topStart = 4.dp, topEnd = 4.dp))
+                )
+            }
+        ) {
+            tabs.forEachIndexed { index, tab ->
+                Tab(
+                    selected = selectedTabIndex == index,
+                    onClick = { onTabSelected(index) },
+                    modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp).clip(RoundedCornerShape(6.dp)),
+                    content = {
+                        Row(
+                            horizontalArrangement = Arrangement.Center,
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            Icon(
+                                imageVector = ImageVector.vectorResource(tab.iconRes),
+                                contentDescription = tab.title,
+                                modifier = Modifier.size(20.dp)
+                            )
+                            Text(
+                                text = tab.title,
+                                modifier = Modifier.padding(8.dp)
+                            )
+                        }
+                    }
+                )
+            }
+        }
+        Box(
+            modifier = Modifier.fillMaxSize()
+                .background(MaterialTheme.colorScheme.surfaceContainerLow)
+                .padding(horizontal = 8.dp, vertical = 12.dp),
+            ) {
+            when (selectedTabIndex) {
+                0 -> {
+                    LazyColumn(
+                        modifier = Modifier.fillMaxWidth()
+                            .clip(RoundedCornerShape(14.dp)),
+                        verticalArrangement = Arrangement.spacedBy(6.dp),
+                    ) {
+                        item {
+                            SettingsSliderEntry(
+                                title = "阅读器字体大小",
+                                unit = "sp",
+                                valueRange = 8f..64f,
+                                value = settingState.fontSize,
+                                floatUserData = settingState.fontSizeUserData
+                            )
+                        }
+                        item {
+                            SettingsSliderEntry(
+                                title = "阅读器行距大小",
+                                unit = "sp",
+                                valueRange = 0f..32f,
+                                value = settingState.fontLineHeight,
+                                floatUserData = settingState.fontLineHeightUserData
+                            )
+                        }
+                        item {
+                            SettingsSwitchEntry(
+                                title = "屏幕常亮",
+                                description = "在阅读页时,总是保持屏幕开启。这将导致耗电量增加",
+                                checked = settingState.keepScreenOn,
+                                booleanUserData = settingState.keepScreenOnUserData,
+                            )
+                        }
+                        item {
+                            SettingsSwitchEntry(
+                                title = "电量指示器",
+                                description = "在页面左下角显示当前电量。",
+                                checked = settingState.enableBatteryIndicator,
+                                booleanUserData = settingState.enableBatteryIndicatorUserData,
+                            )
+                        }
+                        item {
+                            SettingsSwitchEntry(
+                                title = "时间指示器",
+                                description = "在页面左下角显示当前时间。",
+                                checked = settingState.enableTimeIndicator,
+                                booleanUserData = settingState.enableTimeIndicatorUserData,
+                            )
+                        }
+                        item {
+                            SettingsSwitchEntry(
+                                title = "名称指示器",
+                                description = "在页面右下角显示当前阅读章节名称。",
+                                checked = settingState.enableChapterTitleIndicator,
+                                booleanUserData = settingState.enableChapterTitleIndicatorUserData,
+                            )
+                        }
+                        item {
+                            SettingsSwitchEntry(
+                                title = "进度指示器",
+                                description = "在页面右下角显示当前阅读进度。",
+                                checked = settingState.enableReadingChapterProgressIndicator,
+                                booleanUserData = settingState.enableReadingChapterProgressIndicatorUserData,
+                            )
+                        }
+
+                    }
+                }
+
+                1 -> {
+                    LazyColumn(
+                        modifier = Modifier.fillMaxWidth()
+                            .clip(RoundedCornerShape(14.dp)),
+                        verticalArrangement = Arrangement.spacedBy(6.dp),
+                    ) {
+                        item {
+                            SettingsSwitchEntry(
+                                title = "翻页模式",
+                                description = "切换滚动模式为翻页模式",
+                                checked = settingState.isUsingFlipPage,
+                                booleanUserData = settingState.isUsingFlipPageUserData,
+                            )
+                        }
+                        if (settingState.isUsingFlipPage) {
+                            item {
+                                SettingsSwitchEntry(
+                                    modifier = Modifier.animateItem(),
+                                    title = "音量键控制",
+                                    description = "使用音量+键切换至上一页,使用音量-键切换至下一页。",
+                                    checked = settingState.isUsingVolumeKeyFlip,
+                                    booleanUserData = settingState.isUsingVolumeKeyFlipUserData,
+                                )
+                            }
+                        }
+                        if (settingState.isUsingFlipPage) {
+                            item {
+                                SettingsSwitchEntry(
+                                    modifier = Modifier.animateItem(),
+                                    title = "点击翻页",
+                                    description = "使用点击控制翻页,并将呼出菜单变为上下滑动。",
+                                    checked = settingState.isUsingClickFlipPage,
+                                    booleanUserData = settingState.isUsingClickFlipPageUserData,
+                                )
+                            }
+                        }
+                        if (settingState.isUsingFlipPage) {
+                            item {
+                                SettingsSwitchEntry(
+                                    modifier = Modifier.animateItem(),
+                                    title = "启用动画",
+                                    description = "开启点击翻页或音量键翻页时的动画,如果关闭可以允许你快速的翻页。",
+                                    checked = settingState.isUsingFlipAnime,
+                                    booleanUserData = settingState.isUsingFlipAnimeUserData,
+                                )
+                            }
+                        }
+                        if (settingState.isUsingFlipPage) {
+                            item {
+                                SettingsSwitchEntry(
+                                    modifier = Modifier.animateItem(),
+                                    title = "快速切换章节",
+                                    description = "开启后,当你在每章尾页或首页翻页时,会自动切换到上一章或下一章。",
+                                    checked = settingState.fastChapterChange,
+                                    booleanUserData = settingState.fastChapterChangeUserData,
+                                )
+                            }
+                        }
+                    }
+                }
+
+                2 -> {
+                    LazyColumn(
+                        modifier = Modifier.fillMaxWidth()
+                            .clip(RoundedCornerShape(14.dp)),
+                        verticalArrangement = Arrangement.spacedBy(6.dp),
+                    ) {
+                        item {
+                            SettingsSwitchEntry(
+                                title = "自动获取边距",
+                                description = "自动识别手机屏幕的边距,并进行显示适配,如关闭需要手动进行设置。",
+                                checked = settingState.autoPadding,
+                                booleanUserData = settingState.autoPaddingUserData,
+                            )
+                        }
+                        if (!settingState.autoPadding) {
+                            item {
+                                SettingsSliderEntry(
+                                    title = "上边距",
+                                    unit = "dp",
+                                    valueRange = 0f..128f,
+                                    value = settingState.topPadding,
+                                    floatUserData = settingState.topPaddingUserData
+                                )
+                            }
+                        }
+                        if (!settingState.autoPadding) {
+                            item {
+                                SettingsSliderEntry(
+                                    title = "下边距",
+                                    unit = "dp",
+                                    valueRange = 0f..128f,
+                                    value = settingState.bottomPadding,
+                                    floatUserData = settingState.bottomPaddingUserData
+                                )
+                            }
+                        }
+                        if (!settingState.autoPadding) {
+                            item {
+                                SettingsSliderEntry(
+                                    title = "左边距",
+                                    unit = "dp",
+                                    valueRange = 0f..128f,
+                                    value = settingState.leftPadding,
+                                    floatUserData = settingState.leftPaddingUserData
+                                )
+                            }
+                        }
+                        if (!settingState.autoPadding) {
+                            item {
+                                SettingsSliderEntry(
+                                    title = "右边距",
+                                    unit = "dp",
+                                    valueRange = 0f..128f,
+                                    value = settingState.rightPadding,
+                                    floatUserData = settingState.rightPaddingUserData
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/book/content/TextComponent.kt b/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/book/content/TextComponent.kt
index f6ad2a81..9f4c7062 100644
--- a/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/book/content/TextComponent.kt
+++ b/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/book/content/TextComponent.kt
@@ -206,27 +206,27 @@ fun SimpleFlipPageTextComponent(
     var constraints by remember { mutableStateOf<Constraints?>(null) }
     var textStyle by remember { mutableStateOf<TextStyle?>(null) }
     var slippedTextList by remember { mutableStateOf(emptyList<String>()) }
-    var pageState by remember { mutableStateOf(PagerState { 0 }) }
+    var pagerState by remember { mutableStateOf(PagerState { 0 }) }
     var readingPageFistCharOffset by remember { mutableStateOf(0) }
     var resumedReadingProgress by remember { mutableStateOf(false) }
     fun lastPage() {
-        if (pageState.currentPage != 0)
+        if (pagerState.currentPage != 0)
             scope.launch {
                 if (isUsingFlipAnime)
-                    pageState.animateScrollToPage(pageState.currentPage - 1)
+                    pagerState.animateScrollToPage(pagerState.currentPage - 1)
                 else
-                    pageState.scrollToPage(pageState.currentPage - 1)
+                    pagerState.scrollToPage(pagerState.currentPage - 1)
             }
         else if (fastChapterChange) onClickLastChapter.invoke()
     }
 
     fun nextPage() {
-        if (pageState.currentPage + 1 < pageState.pageCount)
+        if (pagerState.currentPage + 1 < pagerState.pageCount)
             scope.launch {
                 if (isUsingFlipAnime)
-                    pageState.animateScrollToPage(pageState.currentPage + 1)
+                    pagerState.animateScrollToPage(pagerState.currentPage + 1)
                 else
-                    pageState.scrollToPage(pageState.currentPage + 1)
+                    pagerState.scrollToPage(pagerState.currentPage + 1)
             }
         else if (fastChapterChange) onClickNextChapter.invoke()
     }
@@ -238,7 +238,7 @@ fun SimpleFlipPageTextComponent(
         slipTextJob?.cancel()
         slipTextJob = scope.launch(Dispatchers.IO) {
             readingPageFistCharOffset = slippedTextList
-                .subList(0, pageState.currentPage)
+                .subList(0, pagerState.currentPage)
                 .sumOf { it.length }
                 .plus(1)
             slippedTextList = slipText(
@@ -251,17 +251,17 @@ fun SimpleFlipPageTextComponent(
                     lineHeight = (fontLineHeight.value + fontSize.value).sp
                 )
             )
-            pageState = PagerState { slippedTextList.size }
+            pagerState = PagerState { slippedTextList.size }
             resumedReadingProgressJob?.cancel()
             resumedReadingProgressJob = scope.launch {
-                pageState.scrollToPage((readingProgress * pageState.pageCount).toInt())
+                pagerState.scrollToPage((readingProgress * pagerState.pageCount).toInt())
                 resumedReadingProgress = true
             }
         }
     }
-    LaunchedEffect(pageState.currentPage, pageState.pageCount) {
-        if (pageState.pageCount != 1)
-            onChapterReadingProgressChange(pageState.currentPage.toFloat() / (pageState.pageCount - 1))
+    LaunchedEffect(pagerState.currentPage, pagerState.pageCount) {
+        if (pagerState.pageCount != 1)
+            onChapterReadingProgressChange(pagerState.currentPage.toFloat() / (pagerState.pageCount - 1))
         else onChapterReadingProgressChange(1F)
     }
     DisposableEffect(isUsingVolumeKeyFlip, isUsingFlipAnime, fastChapterChange) {
@@ -307,7 +307,7 @@ fun SimpleFlipPageTextComponent(
     }
     textStyle = MaterialTheme.typography.bodyMedium
     HorizontalPager(
-        state = pageState,
+        state = pagerState,
         modifier = modifier
             .padding(paddingValues)
             .draggable(
diff --git a/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/home/exploration/home/ExplorationHomeScreen.kt b/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/home/exploration/home/ExplorationHomeScreen.kt
index 021ebc3c..3f40be15 100644
--- a/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/home/exploration/home/ExplorationHomeScreen.kt
+++ b/app/src/main/kotlin/indi/dmzz_yyhyy/lightnovelreader/ui/home/exploration/home/ExplorationHomeScreen.kt
@@ -225,7 +225,7 @@ fun ExplorationPage(
                         modifier = Modifier
                             .fillMaxWidth()
                             .padding(bottom = 12.dp),
-                        horizontalArrangement = Arrangement.spacedBy(8.dp),
+                        horizontalArrangement = Arrangement.spacedBy(4.dp),
                         state = lazyRowState,
                         flingBehavior = rememberSnapFlingBehavior(lazyRowState)
                     ) {
@@ -245,24 +245,23 @@ fun ExplorationPage(
                                     modifier = Modifier.padding(horizontal = 4.dp)
                                 ) {
                                     Cover(
-                                        width = 106.dp,
-                                        height = 162.dp,
+                                        width = 98.dp,
+                                        height = 138.dp,
                                         url = explorationDisplayBook.coverUrl,
-                                        rounded = 10.dp
+                                        rounded = 6.dp
                                     )
                                 }
                                 Column(
                                     modifier = Modifier
-                                        .width(108.dp)
+                                        .width(100.dp)
                                         .padding(horizontal = 2.dp)
                                         .padding(top = 4.dp, bottom = 2.dp),
                                     verticalArrangement = Arrangement.spacedBy(2.dp)
                                 ) {
                                     Text(
                                         text = explorationDisplayBook.title,
-                                        fontWeight = FontWeight.Bold,
-                                        fontSize = 14.sp,
-                                        lineHeight = 18.sp,
+                                        fontSize = 13.sp,
+                                        lineHeight = 16.sp,
                                         maxLines = 2,
                                         overflow = TextOverflow.Ellipsis
                                     )
diff --git a/app/src/main/res/drawable/aspect_ratio_24px.xml b/app/src/main/res/drawable/aspect_ratio_24px.xml
new file mode 100644
index 00000000..404bda77
--- /dev/null
+++ b/app/src/main/res/drawable/aspect_ratio_24px.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M560,680L760,680L760,480L680,480L680,600L560,600L560,680ZM200,480L280,480L280,360L400,360L400,280L200,280L200,480ZM160,800Q127,800 103.5,776.5Q80,753 80,720L80,240Q80,207 103.5,183.5Q127,160 160,160L800,160Q833,160 856.5,183.5Q880,207 880,240L880,720Q880,753 856.5,776.5Q833,800 800,800L160,800ZM160,720L800,720Q800,720 800,720Q800,720 800,720L800,240Q800,240 800,240Q800,240 800,240L160,240Q160,240 160,240Q160,240 160,240L160,720Q160,720 160,720Q160,720 160,720ZM160,720Q160,720 160,720Q160,720 160,720L160,240Q160,240 160,240Q160,240 160,240L160,240Q160,240 160,240Q160,240 160,240L160,720Q160,720 160,720Q160,720 160,720Z"/>
+</vector>
diff --git a/app/src/main/res/drawable/settings_applications_24px.xml b/app/src/main/res/drawable/settings_applications_24px.xml
new file mode 100644
index 00000000..732737d7
--- /dev/null
+++ b/app/src/main/res/drawable/settings_applications_24px.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M440,680L520,680L532,620Q544,615 554.5,609.5Q565,604 576,596L634,614L674,546L628,506Q630,492 630,480Q630,468 628,454L674,414L634,346L576,364Q565,356 554.5,350.5Q544,345 532,340L520,280L440,280L428,340Q416,345 405.5,350.5Q395,356 384,364L326,346L286,414L332,454Q330,468 330,480Q330,492 332,506L286,546L326,614L384,596Q395,604 405.5,609.5Q416,615 428,620L440,680ZM480,560Q447,560 423.5,536.5Q400,513 400,480Q400,447 423.5,423.5Q447,400 480,400Q513,400 536.5,423.5Q560,447 560,480Q560,513 536.5,536.5Q513,560 480,560ZM200,840Q167,840 143.5,816.5Q120,793 120,760L120,200Q120,167 143.5,143.5Q167,120 200,120L760,120Q793,120 816.5,143.5Q840,167 840,200L840,760Q840,793 816.5,816.5Q793,840 760,840L200,840ZM200,760L760,760Q760,760 760,760Q760,760 760,760L760,200Q760,200 760,200Q760,200 760,200L200,200Q200,200 200,200Q200,200 200,200L200,760Q200,760 200,760Q200,760 200,760ZM200,200L200,200Q200,200 200,200Q200,200 200,200L200,760Q200,760 200,760Q200,760 200,760L200,760Q200,760 200,760Q200,760 200,760L200,200Q200,200 200,200Q200,200 200,200Z"/>
+</vector>