diff --git a/app/src/main/java/com/paw/key/core/designsystem/component/CourseCard.kt b/app/src/main/java/com/paw/key/core/designsystem/component/CourseCard.kt
index 8cbe9487..3ebc9b0a 100644
--- a/app/src/main/java/com/paw/key/core/designsystem/component/CourseCard.kt
+++ b/app/src/main/java/com/paw/key/core/designsystem/component/CourseCard.kt
@@ -20,6 +20,8 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -88,7 +90,7 @@ fun CourseCard(
                 verticalAlignment = Alignment.CenterVertically,
                 modifier = Modifier
                     .align(Alignment.BottomStart)
-                    .padding(start = 16.dp, bottom = 16.dp)
+                    .padding(start = 16.dp, end = 16.dp,bottom = 16.dp)
             ) {
                 AsyncImage(
                     model = ImageRequest.Builder(LocalContext.current)
@@ -119,23 +121,32 @@ fun CourseCard(
                         Text(
                             text = date,
                             style = PawKeyTheme.typography.caption12R,
-                            color = PawKeyTheme.colors.gray300
+                            color = PawKeyTheme.colors.gray100
                         )
                     }
                 }
-                Spacer(modifier = Modifier.width(120.dp))
+                Spacer(modifier = Modifier.weight(1f)) // 아이콘을 Row 끝으로 밀기 위한 Spacer
+
+                val isLiked = remember { mutableStateOf(false) }
 
                 Icon(
-                    imageVector = ImageVector.vectorResource(id = R.drawable.ic_heart_default),
-                    modifier = modifier.clickable { },
-                    tint = PawKeyTheme.colors.white1,
-                    contentDescription = "찜하기"
+                    imageVector = if (isLiked.value) {
+                        ImageVector.vectorResource(id = R.drawable.ic_heart_filled)
+                    } else {
+                        ImageVector.vectorResource(id = R.drawable.ic_heart_default)
+                    },
+                    contentDescription = "좋아요",
+                    tint = Color.Unspecified,
+                    modifier = Modifier.clickable {
+                        isLiked.value = !isLiked.value
+                    }
                 )
             }
         }
 
         Spacer(modifier = Modifier.height(12.dp))
-        //칩로우 넣깅
+
+        
         ChipRow(tags = listOf(
             "이륜차 거의 없음",
             "배변 쓰레기통",
diff --git a/app/src/main/java/com/paw/key/core/designsystem/component/CourseDetail.kt b/app/src/main/java/com/paw/key/core/designsystem/component/CourseDetail.kt
index a1c4e57b..4f605264 100644
--- a/app/src/main/java/com/paw/key/core/designsystem/component/CourseDetail.kt
+++ b/app/src/main/java/com/paw/key/core/designsystem/component/CourseDetail.kt
@@ -7,9 +7,7 @@ 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
@@ -37,14 +35,12 @@ import coil.compose.AsyncImage
 import coil.request.ImageRequest
 import com.paw.key.R
 import com.paw.key.core.designsystem.theme.PawKeyTheme
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.setValue
 import com.paw.key.core.designsystem.theme.Gray100
 
 @Composable
 fun CourseDetail(
     title: String,
-    petName:String,
+    petName: String,
     date: String,
     location: String,
     distance: String,
@@ -52,7 +48,7 @@ fun CourseDetail(
     option: List<String>,
     onImageClick: () -> Unit,
     modifier: Modifier = Modifier
-){
+) {
     Column(
         modifier = modifier
             .fillMaxWidth()
@@ -62,8 +58,7 @@ fun CourseDetail(
                 .fillMaxWidth()
                 .padding(vertical = 16.dp),
             verticalAlignment = Alignment.CenterVertically
-        )
-        {
+        ) {
             Icon(
                 imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_left_black),
                 contentDescription = "뒤로가기"
@@ -79,199 +74,215 @@ fun CourseDetail(
             }
             Spacer(modifier = Modifier.width(24.dp))
         }
-        Column {
-            AsyncImage(
-                model = ImageRequest.Builder(LocalContext.current)
-                    .data("https://pawkey-server.com/image.jpg")
-                    .crossfade(true)
-                    .build(),
-                contentDescription = null,
-                contentScale = ContentScale.Crop,
+
+        AsyncImage(
+            model = ImageRequest.Builder(LocalContext.current)
+                .data("https://pawkey-server.com/image.jpg")
+                .crossfade(true)
+                .build(),
+            contentDescription = null,
+            contentScale = ContentScale.Crop,
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(244.dp)
+                .background(color = Gray100)
+        )
+
+        Column(modifier = Modifier.padding(horizontal = 16.dp)) {
+            Row(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .height(244.dp)
-                    .background(color = Gray100)
-                    .clickable { onImageClick() } // 클릭 시 확대!
-            )
+                    .padding(vertical = 12.dp),
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+                Text(
+                    text = title,
+                    style = PawKeyTheme.typography.head20Sb,
+                    color = PawKeyTheme.colors.black
+                )
+                val isLiked = remember { mutableStateOf(false) }
 
-            // 모달
+                Icon(
+                    imageVector = if (isLiked.value) {
+                        ImageVector.vectorResource(id = R.drawable.ic_heart_filled)
+                    } else {
+                        ImageVector.vectorResource(id = R.drawable.ic_heart_default)
+                    },
+                    contentDescription = "좋아요",
+                    tint = Color.Unspecified,
+                    modifier = Modifier.clickable {
+                        isLiked.value = !isLiked.value
+                    }
+                )
+            }
 
-        }
-            Column(modifier = Modifier.padding(horizontal = 16.dp)) {
-                Row(
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = 8.dp)
+            ) {
+                Box(
                     modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(vertical = 12.dp),
-                    horizontalArrangement = Arrangement.SpaceBetween
-                ) {
-                    Text(
-                        text = title,
-                        style = PawKeyTheme.typography.head20Sb,
-                        color = PawKeyTheme.colors.black
-                    )
+                        .size(40.dp)
+                        .background(Color.Gray, RoundedCornerShape(20.dp))
+                )
+                Text(
+                    text = petName,
+                    style = PawKeyTheme.typography.body16Sb,
+                    modifier = Modifier.padding(start = 8.dp)
+                )
+            }
+
+            Column(modifier = Modifier.padding(vertical = 8.dp)) {
+                Row {
                     Icon(
-                        imageVector = ImageVector.vectorResource(id = R.drawable.ic_heart_filled),
-                        contentDescription = "좋아요",
+                        imageVector = ImageVector.vectorResource(id = R.drawable.ic_walk_review_location),
+                        contentDescription = "장소",
                         tint = Color.Unspecified
                     )
+                    Spacer(modifier = Modifier.width(6.dp))
+                    Text(
+                        text = location,
+                        style = PawKeyTheme.typography.body14M,
+                        color = PawKeyTheme.colors.gray400
+                    )
                 }
-
-                Row(
-                    verticalAlignment = Alignment.CenterVertically,
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(vertical = 8.dp)
-                ) {
-                    //프로필 사진
-                    Box(
-                        modifier = Modifier
-                            .size(40.dp)
-                            .background(Color.Gray, RoundedCornerShape(20.dp))
+                Row {
+                    Icon(
+                        imageVector = ImageVector.vectorResource(id = R.drawable.ic_walk_review_time),
+                        contentDescription = "시간",
+                        tint = Color.Unspecified
                     )
+                    Spacer(modifier = Modifier.width(6.dp))
                     Text(
-                        text = petName,
-                        style = PawKeyTheme.typography.body16Sb,
-                        modifier = Modifier.padding(start = 8.dp)
+                        text = "$date | $time",
+                        style = PawKeyTheme.typography.body14M,
+                        color = PawKeyTheme.colors.gray400
                     )
                 }
+            }
 
-                Column(modifier = Modifier.padding(vertical = 8.dp)) {
-                    Row {
-                        Icon(
-                            imageVector = ImageVector.vectorResource(id = R.drawable.ic_walk_review_location),
-                            contentDescription = "장소",
-                            tint = Color.Unspecified
-                        )
-                        Spacer(modifier = Modifier.width(6.dp))
-                        Text(text = location, style = PawKeyTheme.typography.body14M,
-                            color = PawKeyTheme.colors.gray400)
-                    }
-                    Row {
-                        Icon(
-                            imageVector = ImageVector.vectorResource(id = R.drawable.ic_walk_review_time),
-                            contentDescription = "시간",
-                            tint = Color.Unspecified
-                        )
-                        Spacer(modifier = Modifier.width(6.dp))
+            Spacer(modifier = Modifier.height(12.dp))
 
-                        Text(text = "$date | $time", style = PawKeyTheme.typography.body14M,
-                            color = PawKeyTheme.colors.gray400)
-                    }
-                }
+            Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                SubChip(text = distance)
+                SubChip(text = time)
+                SubChip(text = location)
+            }
+
+            Spacer(modifier = Modifier.height(12.dp))
 
-                Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
-                    SubChip(text = distance)
-                    SubChip(text = time)
-                    SubChip(text = location)
+            LazyRow(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = 12.dp),
+                horizontalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+                item {
+                    Box(
+                        modifier = Modifier
+                            .width(100.dp)
+                            .height(100.dp)
+                            .background(Color.LightGray)
+                            .clickable { onImageClick() }
+                    )
                 }
+            }
 
-                //산책 사진
+            Text(
+                text = "후기 글 본문 후기 글 본문 후기 글 본문",
+                style = PawKeyTheme.typography.body14R
+            )
+            Spacer(modifier = Modifier.height(12.dp))
 
-                LazyRow(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(vertical = 12.dp),
-                    horizontalArrangement = Arrangement.spacedBy(8.dp)
-                ) {
-                    item {
-                        Box(
-                            modifier = Modifier
-                                .width(100.dp)
-                                .height(100.dp)
-                                .background(Color.LightGray) //어차피 사진 들어갈거임
-                        )
-                    }
-                }
+            Text(
+                text = "본인 위치에서의 거리",
+                style = PawKeyTheme.typography.caption12Sb1,
+                color = PawKeyTheme.colors.gray200
+            )
+            Spacer(modifier = Modifier.height(12.dp))
+        }
+
+        HorizontalDivider(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(8.dp)
+        )
 
+        Column(modifier = Modifier.padding(horizontal = 16.dp)) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically
+            ) {
                 Text(
-                    text = "후기 글 본문 후기 글 본문 후기 글 본문",
-                    style = PawKeyTheme.typography.body14R
+                    text = "이런 점이 좋았어요",
+                    style = PawKeyTheme.typography.head18Sb,
+                    color = PawKeyTheme.colors.black,
+                    modifier = Modifier.padding(vertical = 16.dp)
                 )
-                Spacer(modifier = Modifier.height(12.dp))
+                Spacer(modifier = Modifier.width(12.dp))
+                Icon(
+                    imageVector = ImageVector.vectorResource(id = R.drawable.ic_edit),
+                    contentDescription = "편집",
+                    tint = Color.Unspecified
+                )
+                Spacer(modifier = Modifier.width(4.dp))
                 Text(
-                    text = "본인 위치에서의 거리",
-                    style = PawKeyTheme.typography.caption12Sb1,
-                    color = PawKeyTheme.colors.gray200
+                    text = "후기숫자를 적으세요",
+                    style = PawKeyTheme.typography.caption12M,
+                    color = PawKeyTheme.colors.gray200,
                 )
-                HorizontalDivider(modifier = Modifier.padding(10.dp))
-                Row(
-                    verticalAlignment = Alignment.CenterVertically
-                ) {
-                    Text(
-                        text = "이런 점이 좋았어요",
-                        style = PawKeyTheme.typography.head18Sb,
-                        color = PawKeyTheme.colors.black,
-                        modifier = Modifier.padding(vertical = 16.dp)
-                    )
-
-                    Spacer(modifier = Modifier.width(12.dp))
-
-                    Icon(
-                        imageVector = ImageVector.vectorResource(id = R.drawable.ic_edit),
-                        contentDescription = "편집",
-                        tint = Color.Unspecified
-                    )
-
-                    Spacer(modifier = Modifier.width(4.dp))
-
-                    Text(
-                        text = "후기숫자를 적으세요",
-                        style = PawKeyTheme.typography.caption12M,
-                        color = PawKeyTheme.colors.gray200,
-                    )
-                }
+            }
 
-                // 서버에서 전달받은 옵션이 없을 경우
-                if (option.isEmpty()) {
-                    Text(
-                        text = "아직은 후기가 없어요.",
-                        style = PawKeyTheme.typography.body16Sb,
-                        color = PawKeyTheme.colors.gray400
-                    )
-                } else {
-                    // 각 항목에 대해 퍼센트 시각화
-                    option.forEachIndexed { index, tag ->
-                        val percentage = when (index) {
-                            0 -> 1f
-                            1 -> 0.8f
-                            2 -> 0.6f
-                            else -> 1f
-                        }
+            if (option.isEmpty()) {
+                Text(
+                    text = "아직은 후기가 없어요.",
+                    style = PawKeyTheme.typography.body16Sb,
+                    color = PawKeyTheme.colors.gray400
+                )
+            } else {
+                option.forEachIndexed { index, tag ->
+                    val percentage = when (index) {
+                        0 -> 1f
+                        1 -> 0.8f
+                        2 -> 0.6f
+                        else -> 1f
+                    }
 
-                        val backgroundColor = when (index) {
-                            0 -> PawKeyTheme.colors.green300
-                            1 -> PawKeyTheme.colors.green200
-                            2 -> PawKeyTheme.colors.green100
-                            else -> PawKeyTheme.colors.green500
-                        }
+                    val backgroundColor = when (index) {
+                        0 -> PawKeyTheme.colors.green300
+                        1 -> PawKeyTheme.colors.green200
+                        2 -> PawKeyTheme.colors.green100
+                        else -> PawKeyTheme.colors.green500
+                    }
 
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(vertical = 4.dp)
+                            .height(37.dp)
+                            .background(PawKeyTheme.colors.gray100, RoundedCornerShape(6.dp))
+                    ) {
                         Box(
                             modifier = Modifier
-                                .fillMaxWidth()
-                                .padding(vertical = 4.dp)
-                                .height(48.dp)
-                                .background(PawKeyTheme.colors.gray100, RoundedCornerShape(6.dp)) // 회색 배경
+                                .fillMaxWidth(percentage)
+                                .fillMaxHeight()
+                                .background(backgroundColor, RoundedCornerShape(6.dp))
                         ) {
-                            Box(
+                            Text(
+                                text = tag,
+                                color = Color.Black,
                                 modifier = Modifier
-                                    .fillMaxWidth(percentage)
-                                    .fillMaxHeight()
-                                    .background(backgroundColor, RoundedCornerShape(6.dp))
-                            ) {
-                                Text(
-                                    text = tag,
-                                    color = Color.Black,
-                                    modifier = Modifier
-                                        .align(Alignment.CenterStart)
-                                        .padding(horizontal = 16.dp),
-                                    style = PawKeyTheme.typography.body16Sb
-                                )
-                            }
+                                    .align(Alignment.CenterStart)
+                                    .padding(horizontal = 16.dp),
+                                style = PawKeyTheme.typography.body16Sb
+                            )
                         }
                     }
                 }
             }
         }
+    }
 }
 
 
diff --git a/app/src/main/java/com/paw/key/core/designsystem/component/ImageModal.kt b/app/src/main/java/com/paw/key/core/designsystem/component/ImageModal.kt
index edaa476c..92f9eb5e 100644
--- a/app/src/main/java/com/paw/key/core/designsystem/component/ImageModal.kt
+++ b/app/src/main/java/com/paw/key/core/designsystem/component/ImageModal.kt
@@ -1,13 +1,8 @@
 package com.paw.key.core.designsystem.component
 
-import androidx.compose.foundation.background
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
 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.layout.size
 import androidx.compose.foundation.layout.wrapContentSize
@@ -18,14 +13,15 @@ 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.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
 
 import androidx.compose.ui.window.Dialog
 import coil.request.ImageRequest
+import com.paw.key.R
 import com.paw.key.core.designsystem.theme.PawKeyTheme
 
 @Composable
@@ -51,11 +47,16 @@ fun ImageModal(
                     .padding(bottom = 8.dp)
                     .size(24.dp)
             )
-            AsyncImage(
-                model = ImageRequest.Builder(LocalContext.current)
-                    .data("https://pawkey-server.com/image.jpg") // ← 서버에서 받은 이미지 URL 넣깅
-                    .crossfade(true)
-                    .build(),
+//            AsyncImage(
+//                model = ImageRequest.Builder(LocalContext.current)
+//                    .data("https://pawkey-server.com/image.jpg") // ← 서버에서 받은 이미지 URL 넣깅
+//                    .crossfade(true)
+//                    .build(),
+//                contentDescription = null,
+//                modifier = Modifier
+//            )
+            Image( //테스트용!!
+                painter = painterResource(id = R.drawable.test),
                 contentDescription = null,
                 modifier = Modifier
             )
diff --git a/app/src/main/java/com/paw/key/core/designsystem/component/TopBar.kt b/app/src/main/java/com/paw/key/core/designsystem/component/TopBar.kt
new file mode 100644
index 00000000..3f882719
--- /dev/null
+++ b/app/src/main/java/com/paw/key/core/designsystem/component/TopBar.kt
@@ -0,0 +1,51 @@
+package com.paw.key.core.designsystem.component
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Icon
+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.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.unit.dp
+import com.paw.key.R
+import com.paw.key.core.designsystem.theme.PawKeyTheme
+
+@Composable
+fun TopBar(
+    title: String,
+    onBackClick: () -> Unit = {}
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 16.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+
+        Icon(
+            imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_left_black),
+            contentDescription = "뒤로가기",
+            modifier = Modifier.clickable { onBackClick() }
+        )
+
+        Box(
+            modifier = Modifier.weight(1f),
+            contentAlignment = Alignment.Center
+        ) {
+            Text(
+                text = title,
+                style = PawKeyTheme.typography.body16Sb
+            )
+        }
+
+        Spacer(modifier = Modifier.width(24.dp))
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/paw/key/presentation/ui/main/MainNavigator.kt b/app/src/main/java/com/paw/key/presentation/ui/main/MainNavigator.kt
index d061c7df..21727682 100644
--- a/app/src/main/java/com/paw/key/presentation/ui/main/MainNavigator.kt
+++ b/app/src/main/java/com/paw/key/presentation/ui/main/MainNavigator.kt
@@ -132,9 +132,9 @@ class MainNavigator(
     }
 
     /*메인 탭 산택 기준 - 산책하기, 완료, 리뷰*/
-    fun navigateRegional(navOptions: NavOptions? = null) {
-        navController.navigateRegional(navOptions = navOptions)
-    }
+//    fun navigateRegional(navOptions: NavOptions? = null) {
+//        navController.navigateRegional(navOptions = navOptions)
+//    }
 
     fun navigateWalkCourse(navOptions: NavOptions? = null) {
         navController.navigateWalkCourse(navOptions = navOptions)
diff --git a/app/src/main/java/com/paw/key/presentation/ui/main/PawKeyNavHost.kt b/app/src/main/java/com/paw/key/presentation/ui/main/PawKeyNavHost.kt
index 3908d586..d34fc402 100644
--- a/app/src/main/java/com/paw/key/presentation/ui/main/PawKeyNavHost.kt
+++ b/app/src/main/java/com/paw/key/presentation/ui/main/PawKeyNavHost.kt
@@ -86,7 +86,6 @@ fun PawKeyNavHost(
             paddingValues = paddingValues,
             navigateUp = navigator::navigateUp,
             navigateNext = navigator::navigateWalkReview,
-            snackBarHostState = snackbarHostState
         )
 
         walkReviewNavGraph(
diff --git a/app/src/main/java/com/paw/key/presentation/ui/mypage/ArchivedCourseDetailScreen.kt b/app/src/main/java/com/paw/key/presentation/ui/mypage/ArchivedCourseDetailScreen.kt
index eb4379af..5d5db9b8 100644
--- a/app/src/main/java/com/paw/key/presentation/ui/mypage/ArchivedCourseDetailScreen.kt
+++ b/app/src/main/java/com/paw/key/presentation/ui/mypage/ArchivedCourseDetailScreen.kt
@@ -19,6 +19,7 @@ import androidx.compose.ui.unit.dp
 import com.paw.key.core.designsystem.component.CourseDetail
 import com.paw.key.core.designsystem.component.ImageModal
 import com.paw.key.core.designsystem.component.PawkeyButton
+import com.paw.key.core.designsystem.component.TopBar
 import com.paw.key.core.designsystem.theme.PawKeyTheme
 import com.paw.key.core.designsystem.theme.White1
 
@@ -40,11 +41,15 @@ fun ArchivedCourseDetailScreen(
 ){
     var isImageExpanded by remember { mutableStateOf(false) }
 
+    TopBar(
+        title = "내가 기록한 산책 루트",
+        onBackClick = navigateUp
+    )
+
     Box(modifier = Modifier.fillMaxSize()) {
         LazyColumn(
             modifier = modifier
                 .fillMaxWidth()
-                .padding(16.dp)
                 .background(color = White1)
         ) {
             item {
diff --git a/app/src/main/java/com/paw/key/presentation/ui/mypage/ArchivedCourseListScreen.kt b/app/src/main/java/com/paw/key/presentation/ui/mypage/ArchivedCourseListScreen.kt
index ae264095..30037f9e 100644
--- a/app/src/main/java/com/paw/key/presentation/ui/mypage/ArchivedCourseListScreen.kt
+++ b/app/src/main/java/com/paw/key/presentation/ui/mypage/ArchivedCourseListScreen.kt
@@ -2,19 +2,15 @@ package com.paw.key.presentation.ui.mypage
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.material3.Icon
-import androidx.compose.material3.Text
+import androidx.compose.foundation.lazy.LazyColumn
 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.graphics.vector.ImageVector
-import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.paw.key.R
 import com.paw.key.core.designsystem.component.CourseCard
+import com.paw.key.core.designsystem.component.TopBar
 import com.paw.key.core.designsystem.theme.PawKeyTheme
+import com.paw.key.core.designsystem.theme.White1
 
 @Composable
 fun ArchivedCourseRoute(
@@ -54,47 +50,32 @@ fun ArchivedCourseListScreen(
         )
     )
 
-    Column(
-        modifier = modifier
-            .fillMaxWidth()
-            .padding(vertical = 16.dp)
-            .background(Color(0xFFF7F7F7))
-    ) {
-        //상단의 헤더바
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(vertical = 16.dp),
-            verticalAlignment = Alignment.CenterVertically
+    Column {
+        TopBar(
+            title = "내가 기록한 산책 루트",
+            onBackClick = navigateUp
         )
-        {
-            Icon(
-                imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_left_black),
-                contentDescription = "뒤로가기"
-            )
-            Box(
-                modifier = Modifier.weight(1f),
-                contentAlignment = Alignment.Center
-            ) {
-                Text(
-                    text = "내가 기록한 산책 루트",
-                    style = PawKeyTheme.typography.head22B
-                )
-            }
-            Spacer(modifier = Modifier.width(24.dp))
-        }
-
-        courseList.forEach { course ->
-            CourseCard(
-                title = course.title,
-                petName = course.petName,
-                date = course.date,
 
-            )
+        LazyColumn(
+            modifier = modifier
+                .fillMaxWidth()
+                .padding(16.dp)
+                .background(color = White1)
+        ) {
+            item {
+                courseList.forEach { course ->
+                    CourseCard(
+                        title = course.title,
+                        petName = course.petName,
+                        date = course.date,
+                    )
+                }
+            }
         }
     }
 }
 
+
 @Preview(showBackground = true)
 @Composable
 fun ArchivedCourseListScreenPreview() {
diff --git a/app/src/main/java/com/paw/key/presentation/ui/mypage/MyPageScreen.kt b/app/src/main/java/com/paw/key/presentation/ui/mypage/MyPageScreen.kt
index 353193d5..8ce97a2d 100644
--- a/app/src/main/java/com/paw/key/presentation/ui/mypage/MyPageScreen.kt
+++ b/app/src/main/java/com/paw/key/presentation/ui/mypage/MyPageScreen.kt
@@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Divider
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.SnackbarHostState
@@ -108,7 +107,9 @@ fun OwnerCard(
             .height(80.dp)
             .fillMaxWidth()
             .background(Color.White, RoundedCornerShape(12.dp))
-            .padding(16.dp),
+            .padding(16.dp)
+            .clickable { navigateUserProfile() },
+
         verticalAlignment = Alignment.CenterVertically
     ) {
         Text(text = ownerName, style = PawKeyTheme.typography.head20B2)
diff --git a/app/src/main/java/com/paw/key/presentation/ui/mypage/PetProfileScreen.kt b/app/src/main/java/com/paw/key/presentation/ui/mypage/PetProfileScreen.kt
index 2c973f63..4c679310 100644
--- a/app/src/main/java/com/paw/key/presentation/ui/mypage/PetProfileScreen.kt
+++ b/app/src/main/java/com/paw/key/presentation/ui/mypage/PetProfileScreen.kt
@@ -1,10 +1,10 @@
 package com.paw.key.presentation.ui.mypage
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -12,125 +12,150 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
 import com.paw.key.R
+import com.paw.key.core.designsystem.component.TopBar
 import com.paw.key.core.designsystem.theme.PawKeyTheme
 
 @Composable
 fun PetProfileRoute(
     navigateUp : () -> Unit,
     modifier: Modifier = Modifier,
-    ) {
+) {
     PetProfileScreen(
         navigateUp = navigateUp,
-        modifier =modifier
+        modifier = modifier
     )
 }
 
 @Composable
 fun PetProfileScreen(
     navigateUp: () -> Unit,
-    name: String = "포비",
+    name: String = "까루",
     gender: String = "남아",
-    breed: String = "미니어처 슈나우저",
-    age: String = "12세",
+    breed: String = "코리안 숏헤어",
+    age: String = "4세",
     personality: String = "활동적",
     modifier: Modifier = Modifier
 ) {
-    Column(modifier = modifier.fillMaxSize().padding(horizontal = 20.dp)) {
-        Spacer(modifier = modifier.height(30.dp))
-
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            modifier = modifier.fillMaxWidth()
-        ) {
-            Icon(
-                imageVector = ImageVector.vectorResource(id = R.drawable.ic_arrow_right),
-                contentDescription = "뒤로가기",
-                modifier = modifier
-                    .size(24.dp)
-                    .clickable { navigateUp() }
-            )
-            Spacer(modifier = modifier.width(16.dp))
-            Text(
-                text = "반려견 프로필",
-                style = PawKeyTheme.typography.body16Sb
-            )
-        }
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .padding(horizontal = 20.dp)
+    ) {
+        TopBar(title = "반려견 프로필",
+            onBackClick = { navigateUp() })
 
-        Spacer(modifier = modifier.height(40.dp))
+        Spacer(modifier = Modifier.height(40.dp))
 
         Box(
             modifier = Modifier
-                .size(96.dp)
+                .size(108.dp)
+                .align(Alignment.CenterHorizontally)
                 .clip(CircleShape)
-                .border(
-                    width = 1.35.dp,
-                    color = PawKeyTheme.colors.green500,
-                    shape = CircleShape
-                )
-        )
+                .border(2.dp, PawKeyTheme.colors.green500, CircleShape)
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.profile),
+                contentDescription = null,
+                contentScale = ContentScale.Crop,
+                modifier = Modifier.fillMaxSize()
+            )
+        }
+
+        Spacer(modifier = Modifier.height(36.dp))
 
+        // 정보 항목
         PetProfileItem(label = "이름", value = name)
         PetProfileItem(label = "성별", value = gender)
+
+        // 중성화 여부 (단일 텍스트)
+        Text(
+            text = "중성화했어요",
+            style = PawKeyTheme.typography.caption12Sb2,
+            color = PawKeyTheme.colors.gray300,
+            modifier = Modifier.padding(start = 16.dp, top = 8.dp, bottom = 8.dp)
+        )
+
         PetProfileItem(label = "견종", value = breed)
         PetProfileItem(label = "나이", value = age)
 
-        Column {
-            PetProfileItem(label = "성향", value = "")
+        // 성향
+        Text(
+            text = "성향",
+            style = PawKeyTheme.typography.body14Sb,
+            modifier = Modifier.padding(start = 16.dp, top = 8.dp, bottom = 10.dp)
+        )
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(start = 16.dp),
+            horizontalArrangement = Arrangement.Start
+        ) {
+            Column(
+                modifier = Modifier.width(133.dp),
+                verticalArrangement = Arrangement.spacedBy(4.dp)
+            ) {
+                Text(
+                    text = "에너지 레벨",
+                    style = PawKeyTheme.typography.body14R,
+                    color = PawKeyTheme.colors.gray600
+                )
+                Text(
+                    text = "활동적이에요",
+                    style = PawKeyTheme.typography.head18Sb,
+                    color = PawKeyTheme.colors.green500
+                )
+            }
 
-            Spacer(modifier = Modifier.height(8.dp))
+            Spacer(modifier = Modifier.width(62.dp))
 
-            Row(
-                modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.SpaceBetween
+            Column(
+                modifier = Modifier.width(133.dp),
+                verticalArrangement = Arrangement.spacedBy(4.dp)
             ) {
-                Column {
-                    Text(
-                        text = "에너지 레벨",
-                        style = PawKeyTheme.typography.body14R,
-                        color = PawKeyTheme.colors.gray600
-                    )
-                    Spacer(modifier = Modifier.height(4.dp))
-                    Text(
-                        text = "활동적이에요",
-                        style = PawKeyTheme.typography.head18Sb,
-                        color = PawKeyTheme.colors.green500
-                    )
-                }
-
-                Column {
-                    Text(
-                        text = "사회성 레벨",
-                        style = PawKeyTheme.typography.body14R,
-                        color = PawKeyTheme.colors.gray600
-                    )
-                    Spacer(modifier = Modifier.height(4.dp))
-                    Text(
-                        text = "불편해해요",
-                        style = PawKeyTheme.typography.head18Sb,
-                        color = PawKeyTheme.colors.green500
-                    )
-                }
+                Text(
+                    text = "사회성 레벨",
+                    style = PawKeyTheme.typography.body14R,
+                    color = PawKeyTheme.colors.gray600
+                )
+                Text(
+                    text = "불편해해요",
+                    style = PawKeyTheme.typography.head18Sb,
+                    color = PawKeyTheme.colors.green500
+                )
             }
         }
+
+        Spacer(modifier = Modifier.weight(1f))
     }
 }
 
 @Composable
-fun PetProfileItem(label: String, value: String, modifier: Modifier = Modifier) {
+fun PetProfileItem(
+    label: String,
+    value: String,
+    modifier: Modifier = Modifier
+) {
     Column(modifier = modifier.padding(vertical = 8.dp)) {
         Text(
             text = label,
-            style = PawKeyTheme.typography.body14Sb
-        )
-        Spacer(modifier = modifier.height(4.dp))
-        Text(
-            text = value,
-            style = PawKeyTheme.typography.head18Sb,
-            color = PawKeyTheme.colors.green500
+            style = PawKeyTheme.typography.body14Sb,
+            modifier = Modifier.padding(start = 16.dp)
         )
+        if (value.isNotEmpty()) {
+            Spacer(modifier = Modifier.height(4.dp))
+            Text(
+                text = value,
+                style = PawKeyTheme.typography.head18Sb,
+                color = PawKeyTheme.colors.green500,
+                modifier = Modifier.padding(start = 16.dp)
+            )
+        }
     }
 }
 
@@ -142,4 +167,4 @@ fun PetProfileScreenPreview() {
             navigateUp = {},
         )
     }
-}
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/paw/key/presentation/ui/mypage/SavedCourseDetailScreen.kt b/app/src/main/java/com/paw/key/presentation/ui/mypage/SavedCourseDetailScreen.kt
index 64cf85de..9a9fafb1 100644
--- a/app/src/main/java/com/paw/key/presentation/ui/mypage/SavedCourseDetailScreen.kt
+++ b/app/src/main/java/com/paw/key/presentation/ui/mypage/SavedCourseDetailScreen.kt
@@ -19,13 +19,13 @@ import androidx.compose.ui.unit.dp
 import com.paw.key.core.designsystem.component.CourseDetail
 import com.paw.key.core.designsystem.component.ImageModal
 import com.paw.key.core.designsystem.component.PawkeyButton
+import com.paw.key.core.designsystem.component.TopBar
 import com.paw.key.core.designsystem.theme.PawKeyTheme
 import com.paw.key.core.designsystem.theme.White1
 
 @Composable
 fun SavedDetailRoute(
     navigateUp: () -> Unit,
-    snackBarHostState: SnackbarHostState,
     modifier: Modifier = Modifier,
 ) {
     SavedCourseDetailScreen(
@@ -42,6 +42,10 @@ fun SavedCourseDetailScreen(
     var isImageExpanded by remember { mutableStateOf(false) }
 
     Box(modifier = Modifier.fillMaxSize()) {
+        TopBar(title = "내가 저장한 산책 루트",
+            onBackClick = { navigateUp() }
+        )
+
         LazyColumn(
             modifier = modifier
                 .fillMaxWidth()
diff --git a/app/src/main/java/com/paw/key/presentation/ui/mypage/SavedCourseListScreen.kt b/app/src/main/java/com/paw/key/presentation/ui/mypage/SavedCourseListScreen.kt
index 9563947a..7f1b6906 100644
--- a/app/src/main/java/com/paw/key/presentation/ui/mypage/SavedCourseListScreen.kt
+++ b/app/src/main/java/com/paw/key/presentation/ui/mypage/SavedCourseListScreen.kt
@@ -1,31 +1,17 @@
 package com.paw.key.presentation.ui.mypage
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Icon
-import androidx.compose.material3.SnackbarHostState
-import androidx.compose.material3.Text
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
 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.graphics.painter.Painter
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.navigation.NavGraphBuilder
-import androidx.navigation.compose.composable
-import com.paw.key.R
 import com.paw.key.core.designsystem.component.CourseCard
+import com.paw.key.core.designsystem.component.TopBar
 import com.paw.key.core.designsystem.theme.PawKeyTheme
-import com.paw.key.presentation.ui.mypage.navigation.SavedCourse
-import com.paw.key.presentation.ui.mypage.navigation.UserProfile
 
 // 코스 카드에서 사용할 데이터 모델
 data class CourseCardData(
@@ -39,10 +25,8 @@ data class CourseCardData(
 
 @Composable
 fun SavedCourseRoute(
-    paddingValues: PaddingValues,
     navigateUp: () -> Unit,
     navigateNext: () -> Unit,
-    snackBarHostState: SnackbarHostState,
     modifier: Modifier = Modifier,
 ) {
     SavedCourseListScreen(
@@ -77,42 +61,30 @@ fun SavedCourseListScreen(
         )
     )
 
-    Column(
-        modifier = modifier
-            .fillMaxWidth()
-            .padding(vertical = 16.dp)
-    ) {
-        //상단의 헤더바
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(vertical = 16.dp),
-            verticalAlignment = Alignment.CenterVertically
+    Column {
+        TopBar(
+            title = "저장한 산책 루트",
+            onBackClick = navigateUp
         )
-        {
-            Icon(
-                imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_left_black),
-                contentDescription = "뒤로가기"
-            )
-            Box(
-                modifier = Modifier.weight(1f),
-                contentAlignment = Alignment.Center
-            ) {
-                Text(
-                    text = "저장한 산책 루트",
-                    style = PawKeyTheme.typography.head22B
+
+        LazyColumn(
+            modifier = modifier
+                .fillMaxWidth()
+                .padding(16.dp)
+                .background(PawKeyTheme.colors.white1)
+        ) {
+            itemsIndexed(
+                items = courseList
+            ) { _, item ->
+                CourseCard(
+                    title = item.title,
+                    petName = item.petName,
+                    date = item.date,
+                    modifier = Modifier.clickable {
+                        navigateNext()
+                    }
                 )
             }
-            Spacer(modifier = Modifier.width(24.dp))
-        }
-
-        courseList.forEach { course ->
-            CourseCard(
-                title = course.title,
-                petName = course.petName,
-                date = course.date,
-
-            )
         }
     }
 }
diff --git a/app/src/main/java/com/paw/key/presentation/ui/mypage/UserProfileScreen.kt b/app/src/main/java/com/paw/key/presentation/ui/mypage/UserProfileScreen.kt
index 5b91fbe8..77c54317 100644
--- a/app/src/main/java/com/paw/key/presentation/ui/mypage/UserProfileScreen.kt
+++ b/app/src/main/java/com/paw/key/presentation/ui/mypage/UserProfileScreen.kt
@@ -1,77 +1,58 @@
 package com.paw.key.presentation.ui.mypage
 
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
-import androidx.compose.material3.Icon
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
-import com.paw.key.R
+import com.paw.key.core.designsystem.component.TopBar
 import com.paw.key.core.designsystem.theme.PawKeyTheme
 
 @Composable
 fun UserProfileRoute(
-    paddingValues: PaddingValues,
     navigateUp: () -> Unit,
-    navigateNext: () -> Unit,
-    snackBarHostState: SnackbarHostState,
     modifier: Modifier = Modifier,
 ) {
     UserProfileScreen(
-        paddingValues = paddingValues,
         navigateUp = navigateUp,
-        navigateNext = navigateNext,
-        snackBarHostState = snackBarHostState,
         modifier = modifier
     )
 }
 
 @Composable
 fun UserProfileScreen(
-    paddingValues: PaddingValues,
     navigateUp: () -> Unit,
-    navigateNext: () -> Unit,
-    snackBarHostState: SnackbarHostState,
     modifier: Modifier = Modifier,
     name: String = "김도기",
     gender: String = "여성",
     age: String = "24세",
     region: String = "강남구 역삼동"
 ) {
-    PawKeyTheme {
-        Column(modifier = Modifier.fillMaxSize().padding(horizontal = 20.dp)) {
-            Spacer(modifier = Modifier.height(30.dp))
-
-            Row(
-                verticalAlignment = Alignment.CenterVertically,
-                modifier = Modifier.fillMaxWidth()
-            ) {
-                Icon(
-                    imageVector = ImageVector.vectorResource(id = R.drawable.ic_arrow_right),
-                    contentDescription = "뒤로가기",
-                    modifier = Modifier
-                        .clickable { navigateUp() }
-                )
-                Spacer(modifier = Modifier.width(16.dp))
-                Text(
-                    text = "견주 프로필",
-                    style = PawKeyTheme.typography.body16Sb
-                )
-            }
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .padding(horizontal = 20.dp)
+    ) {
+        TopBar(
+            title = "견주 프로필",
+            onBackClick = { navigateUp() }
+        )
 
-            Spacer(modifier = Modifier.height(40.dp))
+        Spacer(modifier = Modifier.height(40.dp))
 
+        Column(
+            verticalArrangement = Arrangement.spacedBy(16.dp)
+        ) {
             ProfileItem(label = "이름", value = name)
             ProfileItem(label = "성별", value = gender)
             ProfileItem(label = "나이", value = age)
             ProfileItem(label = "활동지역", value = region)
         }
+
+        Spacer(modifier = Modifier.weight(1f))
     }
 }
 
@@ -94,10 +75,9 @@ fun ProfileItem(label: String, value: String) {
 @Preview(showBackground = true)
 @Composable
 fun UserProfileScreenPreview() {
-    UserProfileScreen(
-        paddingValues = PaddingValues(),
-        navigateUp = {},
-        navigateNext = {},
-        snackBarHostState = SnackbarHostState()
-    )
-}
+    PawKeyTheme {
+        UserProfileScreen(
+            navigateUp = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/res/drawable/profile.png b/app/src/main/res/drawable/profile.png
new file mode 100644
index 00000000..2a65d17f
Binary files /dev/null and b/app/src/main/res/drawable/profile.png differ
diff --git a/app/src/main/res/drawable/test.png b/app/src/main/res/drawable/test.png
new file mode 100644
index 00000000..0641a6d6
Binary files /dev/null and b/app/src/main/res/drawable/test.png differ