diff --git a/app/src/main/java/com/aiosman/riderpro/MainActivity.kt b/app/src/main/java/com/aiosman/riderpro/MainActivity.kt
index b3214b4..b890985 100644
--- a/app/src/main/java/com/aiosman/riderpro/MainActivity.kt
+++ b/app/src/main/java/com/aiosman/riderpro/MainActivity.kt
@@ -1,5 +1,6 @@
 package com.aiosman.riderpro
 
+import ModificationListScreen
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
@@ -101,6 +102,9 @@ fun NavigationController(navController: NavHostController) {
         composable(route="Post") {
             PostPage()
         }
+        composable(route="ModificationList") {
+            ModificationListScreen()
+        }
     }
 }
 
diff --git a/app/src/main/java/com/aiosman/riderpro/ModificationList.kt b/app/src/main/java/com/aiosman/riderpro/ModificationList.kt
new file mode 100644
index 0000000..548bc7d
--- /dev/null
+++ b/app/src/main/java/com/aiosman/riderpro/ModificationList.kt
@@ -0,0 +1,99 @@
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+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.lazy.LazyColumn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.aiosman.riderpro.R
+
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview
+@Composable
+fun ModificationListScreen() {
+    val modifications = getModifications()
+    Column(modifier = Modifier.fillMaxSize().background(Color(0xFFF8F8F8))) {
+        TopAppBar(
+            title = { Text("Modification List") },
+            navigationIcon = {
+                IconButton(onClick = { /* Handle back button click */ }) {
+                    Icon(
+                        painter = painterResource(id = R.drawable.rider_pro_nav_back), // Replace with your back icon
+                        contentDescription = "Back"
+                    )
+                }
+            },
+            colors = TopAppBarDefaults.topAppBarColors(
+                containerColor = Color(0xFFF8F8F8),
+            )
+        )
+        Spacer(modifier = Modifier.height(8.dp))
+        LazyColumn(modifier = Modifier.padding(16.dp)) {
+            items(modifications.size) { index ->
+                val modification = modifications[index]
+                ModificationItem(name = modification.name, price = modification.price)
+                Spacer(modifier = Modifier.height(8.dp))
+            }
+        }
+    }
+}
+data class Modification(val name: String, val price: String)
+fun getModifications(): List<Modification> {
+    return listOf(
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+        Modification("Modification name", "$74.00"),
+    )
+}
+@Composable
+fun ModificationItem(name: String, price: String) {
+    Card(
+        shape = RoundedCornerShape(8.dp),
+        modifier = Modifier.fillMaxWidth(),
+        colors = CardDefaults.cardColors(
+            containerColor = Color.White,
+        )
+    ) {
+        Column(modifier = Modifier.padding(16.dp)) {
+            Text(text = name, fontSize = 16.sp, fontWeight = FontWeight.Bold)
+            Spacer(modifier = Modifier.height(8.dp))
+            Text(text = price, fontSize = 16.sp, fontWeight = FontWeight.Bold, color = Color.Red)
+        }
+    }
+}
diff --git a/app/src/main/java/com/aiosman/riderpro/PagingSimple.kt b/app/src/main/java/com/aiosman/riderpro/PagingSimple.kt
index 5af4125..6b7ca23 100644
--- a/app/src/main/java/com/aiosman/riderpro/PagingSimple.kt
+++ b/app/src/main/java/com/aiosman/riderpro/PagingSimple.kt
@@ -1,11 +1,15 @@
 package com.aiosman.riderpro
+
 import androidx.annotation.DrawableRes
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
@@ -14,9 +18,13 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Build
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -31,6 +39,8 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.LineHeightStyle
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.em
 import androidx.compose.ui.unit.sp
@@ -39,7 +49,7 @@ import androidx.paging.Pager
 import androidx.paging.PagingConfig
 import androidx.paging.compose.collectAsLazyPagingItems
 
-private val DATA = (0..60).toList().map { momentTestItem}
+private val DATA = (0..60).toList().map { momentTestItem }
 
 @Composable
 fun PagingBackendSample() {
@@ -78,66 +88,120 @@ fun PagingBackendSample() {
 }
 
 @Composable
-fun MomentCard(momentItem: MomentItem){
+fun MomentCard(momentItem: MomentItem) {
     Column(
         modifier = Modifier.fillMaxWidth()
-    ){
+    ) {
         MomentTopRowGroup(momentItem = momentItem)
         MomentContentGroup(momentItem = momentItem)
-        val momentOperateBtnBoxModifier = Modifier.fillMaxHeight().weight(1f)
+        val momentOperateBtnBoxModifier = Modifier
+            .fillMaxHeight()
+            .weight(1f)
+        ModificationListHeader()
         MomentBottomOperateRowGroup(momentOperateBtnBoxModifier)
     }
 }
 
 @Composable
-fun MomentName(name: String){
+fun ModificationListHeader() {
+    val navController = LocalNavController.current
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp)
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(Color(0xFFF8F8F8))
+                .padding(4.dp)
+                .clickable {
+                    navController.navigate("ModificationList")
+                }
+        ) {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Box(
+                    modifier = Modifier
+                        .background(Color(0xFFEB4869))
+                        .padding(8.dp)
+                ) {
+                    Icon(
+                        Icons.Filled.Build,
+                        contentDescription = "Modification Icon",
+                        tint = Color.White, // Assuming the icon should be white
+                        modifier = Modifier.size(12.dp)
+                    )
+                }
+                Spacer(modifier = Modifier.width(12.dp))
+                Text(
+                    text = "Modification List",
+                    color = Color(0xFF333333),
+                    fontSize = 14.sp,
+                    textAlign = TextAlign.Left
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun MomentName(name: String) {
     Text(
         modifier = Modifier,
         textAlign = TextAlign.Start,
         text = name,
-        color = Color(0f,0f,0f),
-        fontSize = 16.sp, style = TextStyle(fontWeight = FontWeight.Bold))
+        color = Color(0f, 0f, 0f),
+        fontSize = 16.sp, style = TextStyle(fontWeight = FontWeight.Bold)
+    )
 }
 
 @Composable
-fun MomentFollowBtn(){
-    Box(modifier = Modifier
-        .size(width = 53.dp, height = 18.dp)
-        .padding(start = 8.dp),
-        contentAlignment = Alignment.Center){
+fun MomentFollowBtn() {
+    Box(
+        modifier = Modifier
+            .size(width = 53.dp, height = 18.dp)
+            .padding(start = 8.dp),
+        contentAlignment = Alignment.Center
+    ) {
         Image(
             modifier = Modifier
                 .fillMaxSize(),
             painter = painterResource(id = R.drawable.follow_bg),
             contentDescription = ""
         )
-        Text(text = "Follow",
+        Text(
+            text = "Follow",
             color = Color.White,
-            fontSize = 12.sp)
+            fontSize = 12.sp
+        )
     }
 }
 
 @Composable
-fun MomentPostLocation(location: String){
-    Text(text = location,
-        color = Color(0f,0f,0f,0.6f),
-        fontSize = 12.sp)
-}
-
-@Composable
-fun MomentPostTime(time: String){
-    Text(modifier = Modifier.padding(start = 8.dp),
-        text = time, color = Color(0f,0f,0f,0.6f),
+fun MomentPostLocation(location: String) {
+    Text(
+        text = location,
+        color = Color(0f, 0f, 0f, 0.6f),
         fontSize = 12.sp
     )
 }
 
 @Composable
-fun MomentTopRowGroup(momentItem: MomentItem){
-    Row (modifier = Modifier
-        .height(40.dp)
-        .padding(top = 0.dp, bottom = 0.dp, start = 24.dp, end = 24.dp)
-    ){
+fun MomentPostTime(time: String) {
+    Text(
+        modifier = Modifier.padding(start = 8.dp),
+        text = time, color = Color(0f, 0f, 0f, 0.6f),
+        fontSize = 12.sp
+    )
+}
+
+@Composable
+fun MomentTopRowGroup(momentItem: MomentItem) {
+    Row(
+        modifier = Modifier
+            .height(40.dp)
+            .padding(top = 0.dp, bottom = 0.dp, start = 24.dp, end = 24.dp)
+    ) {
         Image(
             painter = painterResource(id = momentItem.avatar),
             contentDescription = ""
@@ -147,19 +211,21 @@ fun MomentTopRowGroup(momentItem: MomentItem){
                 .defaultMinSize()
                 .padding(start = 12.dp, end = 12.dp)
         ) {
-            Row (modifier = Modifier
-                .fillMaxWidth()
-                .height(22.dp),
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(22.dp),
                 verticalAlignment = Alignment.CenterVertically
-            ){
+            ) {
                 MomentName(momentItem.nickname)
                 MomentFollowBtn()
             }
-            Row (modifier = Modifier
-                .fillMaxWidth()
-                .height(21.dp),
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(21.dp),
                 verticalAlignment = Alignment.CenterVertically
-            ){
+            ) {
                 MomentPostLocation(momentItem.location)
                 MomentPostTime(momentItem.time)
             }
@@ -168,8 +234,9 @@ fun MomentTopRowGroup(momentItem: MomentItem){
 }
 
 @Composable
-fun MomentContentGroup(momentItem: MomentItem){
-    Text(text = momentItem.momentTextContent,
+fun MomentContentGroup(momentItem: MomentItem) {
+    Text(
+        text = momentItem.momentTextContent,
         modifier = Modifier
             .fillMaxWidth()
             .padding(top = 22.dp, bottom = 16.dp, start = 24.dp, end = 24.dp),
@@ -184,48 +251,58 @@ fun MomentContentGroup(momentItem: MomentItem){
 }
 
 @Composable
-fun MomentOperateBtn(@DrawableRes icon: Int, count: String){
-    Row (verticalAlignment = Alignment.CenterVertically){
+fun MomentOperateBtn(@DrawableRes icon: Int, count: String) {
+    Row(verticalAlignment = Alignment.CenterVertically) {
         Image(
             modifier = Modifier
                 .size(width = 24.dp, height = 24.dp),
             painter = painterResource(id = icon),
-            contentDescription = "")
-        Text(text = count,
+            contentDescription = ""
+        )
+        Text(
+            text = count,
             modifier = Modifier.padding(start = 7.dp),
-            fontSize = 12.sp,)
+            fontSize = 12.sp,
+        )
     }
 }
+
 @Composable
-fun MomentBottomOperateRowGroup(modifier: Modifier){
-    Row (modifier = Modifier
-        .fillMaxWidth()
-        .height(56.dp)){
-        Box(modifier = modifier,
+fun MomentBottomOperateRowGroup(modifier: Modifier) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(56.dp)
+    ) {
+        Box(
+            modifier = modifier,
             contentAlignment = Alignment.Center
-        ){
+        ) {
             MomentOperateBtn(icon = R.drawable.rider_pro_like, count = "21")
         }
-        Box(modifier = modifier,
+        Box(
+            modifier = modifier,
             contentAlignment = Alignment.Center
-        ){
+        ) {
             MomentOperateBtn(icon = R.drawable.rider_pro_moment_comment, count = "43")
         }
-        Box(modifier = modifier,
+        Box(
+            modifier = modifier,
             contentAlignment = Alignment.Center
-        ){
+        ) {
             MomentOperateBtn(icon = R.drawable.rider_pro_share, count = "33")
         }
-        Box(modifier = modifier,
+        Box(
+            modifier = modifier,
             contentAlignment = Alignment.Center
-        ){
+        ) {
             MomentOperateBtn(icon = R.drawable.rider_pro_favoriate, count = "211")
         }
     }
 }
 
 @Composable
-fun MomentListLoading(){
+fun MomentListLoading() {
     CircularProgressIndicator(
         modifier =
         Modifier