diff --git a/app/src/main/java/com/aiosman/riderpro/LocationDetail.kt b/app/src/main/java/com/aiosman/riderpro/LocationDetail.kt
index f279254..7e538b4 100644
--- a/app/src/main/java/com/aiosman/riderpro/LocationDetail.kt
+++ b/app/src/main/java/com/aiosman/riderpro/LocationDetail.kt
@@ -280,7 +280,9 @@ fun LocationDetail() {
                                     painter = painterResource(id = item.resId),
                                     contentDescription = "Feed",
                                     modifier = Modifier.fillMaxWidth()
-                                        .clip(MaterialTheme.shapes.medium),
+                                        .clip(MaterialTheme.shapes.medium).clickable {
+                                            navController.navigate("Post")
+                                        },
                                     contentScale = ContentScale.FillWidth
                                 )
                                 Spacer(modifier = Modifier.height(8.dp))
diff --git a/app/src/main/java/com/aiosman/riderpro/MainActivity.kt b/app/src/main/java/com/aiosman/riderpro/MainActivity.kt
index 2490ac4..b7e5c06 100644
--- a/app/src/main/java/com/aiosman/riderpro/MainActivity.kt
+++ b/app/src/main/java/com/aiosman/riderpro/MainActivity.kt
@@ -98,6 +98,9 @@ fun NavigationController(navController: NavHostController) {
         composable(route="OfficialPhotographer") {
             OfficialPhotographer()
         }
+        composable(route="Post") {
+            PostPage()
+        }
     }
 }
 
diff --git a/app/src/main/java/com/aiosman/riderpro/Post.kt b/app/src/main/java/com/aiosman/riderpro/Post.kt
new file mode 100644
index 0000000..320ecb9
--- /dev/null
+++ b/app/src/main/java/com/aiosman/riderpro/Post.kt
@@ -0,0 +1,320 @@
+package com.aiosman.riderpro
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
+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.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+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.layout.wrapContentWidth
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.CheckCircle
+import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.Star
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+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
+
+fun makeMockImages(): List<PostImage> {
+    return listOf(
+        PostImage(R.drawable.default_moment_img, "Image 1"),
+        PostImage(R.drawable.default_avatar, "Image 2"),
+        PostImage(R.drawable.rider_pro_moment_demo_1, "Image 3")
+    )
+}
+@Preview
+@Composable
+fun PostPage() {
+    Scaffold(
+        modifier = Modifier.fillMaxSize(),
+        bottomBar = {
+            BottomNavigationBar()
+        }
+    ) { it
+        Column(
+            modifier = Modifier.fillMaxSize()
+        ) {
+            Header()
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .aspectRatio(1f)
+            ){
+                PostImageView(makeMockImages())
+            }
+
+            PostDetails()
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(1f)
+            ){
+                CommentsSection()
+
+            }
+
+        }
+    }
+
+}
+
+@Composable
+fun Header() {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(8.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Image(
+            painter = painterResource(id = R.drawable.rider_pro_nav_back), // Replace with your image resource
+            contentDescription = "Back",
+            modifier = Modifier
+                .size(32.dp)
+
+        )
+        Spacer(modifier = Modifier.width(8.dp))
+        Image(
+            painter = painterResource(id = R.drawable.default_avatar), // Replace with your image resource
+            contentDescription = "Profile Picture",
+            modifier = Modifier
+                .size(40.dp)
+                .clip(CircleShape)
+        )
+        Spacer(modifier = Modifier.width(8.dp))
+        Text(text = "Diego Morata", fontWeight = FontWeight.Bold)
+        Box(modifier = Modifier
+            .height(20.dp).wrapContentWidth()
+            .padding(start = 6.dp),
+            contentAlignment = Alignment.Center){
+            Image(modifier = Modifier.height(18.dp),painter = painterResource(id = R.drawable.follow_bg), contentDescription = "")
+            Text(text = "FOLLOW", fontSize = 12.sp, color = Color.White, style = TextStyle(fontWeight = FontWeight.Bold))
+        }
+    }
+}
+data class PostImage(
+    val imgRes: Int,
+    val description: String
+)
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun PostImageView(images: List<PostImage>) {
+    val pagerState = rememberPagerState(pageCount = {images.size})
+    Column {
+        HorizontalPager(
+            state = pagerState,
+            modifier = Modifier.weight(1f).fillMaxWidth()
+        ) { page ->
+            Image(
+                painter = painterResource(id = images[page].imgRes),
+                contentDescription = images[page].description,
+                contentScale = ContentScale.Crop,
+                modifier = Modifier.fillMaxSize()
+            )
+        }
+
+        // Indicator container
+        Row(
+            modifier = Modifier
+                .padding(8.dp).fillMaxWidth(),
+            horizontalArrangement = Arrangement.Center
+        ) {
+            images.forEachIndexed { index, _ ->
+                Box(
+                    modifier = Modifier
+                        .size(8.dp)
+                        .clip(CircleShape)
+
+                        .background(if (pagerState.currentPage == index) Color.Red else Color.Gray.copy(alpha = 0.5f))
+                        .padding(4.dp)
+
+
+                )
+                Spacer(modifier = Modifier.width(8.dp))
+            }
+        }
+    }
+}
+
+@Composable
+fun PostDetails() {
+    Column(modifier = Modifier.padding(16.dp)) {
+        Text(text = "这里太适合骑行了", fontSize = 16.sp, fontWeight = FontWeight.Bold)
+        Text(text = "12-11 发布")
+        Spacer(modifier = Modifier.height(8.dp))
+        Text(text = "共231条评论")
+    }
+}
+fun MakeMockComments(): List<Comment> {
+    return listOf(
+        Comment(
+            name = "Diego Morata",
+            comment = "这里太适合骑行了",
+            date = "3 days ago",
+            likes = 200,
+            replies = listOf(
+                Comment(
+                    name = "Diego Morata",
+                    comment = "这里太适合骑行了",
+                    date = "3 days ago",
+                    likes = 200,
+                    replies = emptyList()
+                ),
+                Comment(
+                    name = "Diego Morata",
+                    comment = "这里太适合骑行了",
+                    date = "3 days ago",
+                    likes = 200,
+                    replies = emptyList()
+                )
+            )
+        ),
+        Comment(
+            name = "Diego Morata",
+            comment = "这里太适合骑行了",
+            date = "3 days ago",
+            likes = 200,
+            replies = emptyList()
+        ),
+        Comment(
+            name = "Diego Morata",
+            comment = "这里太适合骑行了",
+            date = "3 days ago",
+            likes = 200,
+            replies = emptyList()
+        )
+    )
+}
+
+@Composable
+fun CommentsSection() {
+    val items = MakeMockComments()
+    LazyColumn (modifier = Modifier
+        .padding(16.dp)
+        .fillMaxHeight()) {
+        items(items) {comment ->
+            CommentItem(comment)
+        }
+    }
+}
+data class Comment(
+    val name: String,
+    val comment: String,
+    val date: String,
+    val likes: Int,
+    val replies: List<Comment>
+)
+
+
+@Composable
+fun CommentItem(comment: Comment) {
+    Column {
+        Row(modifier = Modifier.padding(vertical = 8.dp)) {
+            Image(
+                painter = painterResource(id = R.drawable.default_avatar), // Replace with your image resource
+                contentDescription = "Comment Profile Picture",
+                modifier = Modifier
+                    .size(40.dp)
+                    .clip(CircleShape)
+            )
+            Spacer(modifier = Modifier.width(8.dp))
+            Column {
+                Text(text = comment.name, fontWeight = FontWeight.Bold)
+                Text(text = comment.comment)
+                Text(text = comment.date, fontSize = 12.sp, color = Color.Gray)
+            }
+            Spacer(modifier = Modifier.weight(1f))
+            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                IconButton(onClick = { /*TODO*/ }) {
+                    Icon(Icons.Filled.Favorite, contentDescription = "Like")
+                }
+                Text(text = comment.likes.toString())
+            }
+        }
+        Spacer(modifier = Modifier.height(8.dp))
+        Column(
+            modifier = Modifier.padding(start = 16.dp)
+        ) {
+            comment.replies.forEach { reply ->
+                CommentItem(reply)
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun BottomNavigationBar() {
+
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp).background(Color.White)
+    ) {
+        // grey round box
+        Box(
+            modifier = Modifier
+                .padding(8.dp)
+                .clip(RoundedCornerShape(16.dp))
+                .background(Color.Gray.copy(alpha = 0.1f))
+                .weight(1f)
+                .height(31.dp)
+                .padding(8.dp)
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(Icons.Filled.Edit, contentDescription = "Send")
+                Spacer(modifier = Modifier.width(8.dp))
+                Text(text = "说点什么", fontSize = 12.sp)
+            }
+        }
+
+        IconButton(
+            onClick = { /*TODO*/ }) {
+            Icon(Icons.Filled.Favorite, contentDescription = "Send")
+        }
+        Text(text = "2077")
+        IconButton(
+            onClick = { /*TODO*/ }) {
+            Icon(Icons.Filled.Star, contentDescription = "Send")
+        }
+        Text(text = "2077")
+        IconButton(
+            onClick = { /*TODO*/ }) {
+            Icon(Icons.Filled.CheckCircle, contentDescription = "Send")
+        }
+        Text(text = "2077")
+
+    }
+}
\ No newline at end of file