diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index 639c779c..2504dc64 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -6,7 +6,7 @@
       <GradleProjectSettings>
         <option name="testRunner" value="CHOOSE_PER_TEST" />
         <option name="externalProjectPath" value="$PROJECT_DIR$" />
-        <option name="gradleJvm" value="#GRADLE_LOCAL_JAVA_HOME" />
+        <option name="gradleJvm" value="#JAVA_HOME" />
         <option name="modules">
           <set>
             <option value="$PROJECT_DIR$" />
diff --git a/app/src/main/java/com/texthip/thip/ui/bookSearch/screen/BookSearchScreen.kt b/app/src/main/java/com/texthip/thip/ui/booksearch/screen/BookSearchScreen.kt
similarity index 91%
rename from app/src/main/java/com/texthip/thip/ui/bookSearch/screen/BookSearchScreen.kt
rename to app/src/main/java/com/texthip/thip/ui/booksearch/screen/BookSearchScreen.kt
index b4e70e78..9411645c 100644
--- a/app/src/main/java/com/texthip/thip/ui/bookSearch/screen/BookSearchScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/booksearch/screen/BookSearchScreen.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.bookSearch.screen
+package com.texthip.thip.ui.booksearch.screen
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt
index 33a0f0ec..2ca68de2 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt
@@ -10,6 +10,7 @@ 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.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
@@ -31,6 +32,8 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 fun ActionMediumButton(
     text: String,
     icon: Painter? = null,
+    iconSize: Int = 24,
+    iconTint: Color = Color.Unspecified,
     contentColor: Color,
     backgroundColor: Color,
     hasRightIcon: Boolean = false,
@@ -54,7 +57,8 @@ fun ActionMediumButton(
             Icon(
                 painter = icon,
                 contentDescription = null,
-                tint = contentColor,
+                tint = iconTint,
+                modifier = Modifier.size(iconSize.dp)
             )
         }
 
diff --git a/app/src/main/java/com/texthip/thip/ui/common/forms/WarningTextField.kt b/app/src/main/java/com/texthip/thip/ui/common/forms/WarningTextField.kt
index 2074ddac..cdeac4d1 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/forms/WarningTextField.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/forms/WarningTextField.kt
@@ -2,9 +2,12 @@ package com.texthip.thip.ui.common.forms
 
 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.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardOptions
@@ -16,6 +19,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -37,86 +41,111 @@ fun WarningTextField(
     hint: String,
     warningMessage: String = "경고 메시지를 입력해주세요.",
     showWarning: Boolean = false,
+    showLimit: Boolean = true,
     maxLength: Int = Int.MAX_VALUE,
+    showIcon: Boolean = false,
+    containerColor: Color = colors.Black,
     isNumberOnly: Boolean = false,
     keyboardType: KeyboardType = KeyboardType.Text
 ) {
     val myStyle = typography.menu_r400_s14_h24.copy(lineHeight = 14.sp)
-    OutlinedTextField(
-        value = value,
-        onValueChange = { input ->
-            var filtered = input
-            if (isNumberOnly) filtered = filtered.filter { it.isDigit() }
-            if (filtered.length > maxLength) filtered = filtered.take(maxLength)
-            onValueChange(filtered)
-        },
-        placeholder = {
-            Text(
-                text = hint,
-                color = colors.Grey02,
-                style = myStyle
+
+    Column {
+        Box(
+            modifier = modifier
+                .height(48.dp)
+        ) {
+            OutlinedTextField(
+                value = value,
+                onValueChange = { input ->
+                    var filtered = input
+                    if (isNumberOnly) filtered = filtered.filter { it.isDigit() }
+                    if (filtered.length > maxLength) filtered = filtered.take(maxLength)
+                    onValueChange(filtered)
+                },
+                placeholder = {
+                    Text(
+                        text = hint,
+                        color = colors.Grey02,
+                        style = myStyle
+                    )
+                },
+                textStyle = myStyle,
+                modifier = Modifier.fillMaxSize(),
+                shape = RoundedCornerShape(12.dp),
+                colors = TextFieldDefaults.colors(
+                    focusedTextColor = colors.White,
+                    focusedIndicatorColor = if (showWarning) colors.Red else Color.Transparent,
+                    unfocusedIndicatorColor = if (showWarning) colors.Red else Color.Transparent,
+                    focusedContainerColor = containerColor,
+                    unfocusedContainerColor = containerColor,
+                    cursorColor = colors.NeonGreen
+                ),
+                trailingIcon = {
+                    if (showIcon) {
+                        if (value.isNotEmpty()) {
+                            Icon(
+                                painter = painterResource(id = R.drawable.ic_x_circle_white),
+                                contentDescription = "Clear text",
+                                modifier = Modifier.clickable { onValueChange("")},
+                                tint = Color.Unspecified
+                            )
+                        } else {
+                            Icon(
+                                painter = painterResource(id = R.drawable.ic_x_circle),
+                                contentDescription = "Clear text"
+                            )
+                        }
+                    }
+                },
+                singleLine = true,
+                keyboardOptions = KeyboardOptions(keyboardType = keyboardType)
+
             )
-        },
-        textStyle = myStyle,
-        modifier = modifier
-            .fillMaxWidth()
-            .height(48.dp),
-        shape = RoundedCornerShape(12.dp),
-        colors = TextFieldDefaults.colors(
-            focusedTextColor = colors.White,
-            focusedIndicatorColor = if (showWarning) colors.Red else Color.Transparent,
-            unfocusedIndicatorColor = if (showWarning) colors.Red else Color.Transparent,
-            focusedContainerColor = colors.DarkGrey50,
-            unfocusedContainerColor = colors.DarkGrey50,
-            cursorColor = colors.NeonGreen
-        ),
-        trailingIcon = {
-            if (value.isNotEmpty()) {
-                Icon(
-                    painter = painterResource(id = R.drawable.ic_x_circle_white),
-                    contentDescription = "Clear text",
-                    modifier = Modifier.clickable { onValueChange("") },
-                    tint = Color.Unspecified
-                )
-            } else {
-                Icon(
-                    painter = painterResource(id = R.drawable.ic_x_circle),
-                    contentDescription = "Clear text"
-                )
+
+            if (showLimit && maxLength != Int.MAX_VALUE) {
+                Box(
+                    modifier = Modifier
+                        .align(Alignment.CenterEnd)
+                        .padding(end = 14.dp)
+                ) {
+                    Text(
+                        text = "${value.length}/$maxLength",
+                        color = colors.White,
+                        style = typography.info_r400_s12_h24
+                    )
+                }
             }
-        },
-        singleLine = true,
-        keyboardOptions = KeyboardOptions(keyboardType = keyboardType)
-    )
-    if (showWarning) {
-        Spacer(modifier = Modifier.height(4.dp))
-        Text(
-            text = warningMessage,
-            color = colors.Red,
-            style = typography.info_r400_s12.copy(lineHeight = 12.sp)
-        )
+        }
+        if (showWarning) {
+            Spacer(modifier = Modifier.height(4.dp))
+            Text(
+                text = warningMessage,
+                color = colors.Red,
+                style = typography.info_r400_s12.copy(lineHeight = 12.sp)
+            )
+        }
     }
 }
 
-
 @Composable
 @Preview(showBackground = true, backgroundColor = 0xFF000000, widthDp = 360, heightDp = 200)
 fun WarningTextFieldPreviewEmpty() {
-    var password by remember { mutableStateOf("") }
+    var text by rememberSaveable { mutableStateOf("") }
 
     Box(
         modifier = Modifier.size(width = 360.dp, height = 200.dp),
         contentAlignment = Alignment.Center
     ) {
         WarningTextField(
-            value = password,
-            onValueChange = { password = it },
-            hint = "4자리 숫자로 입장 비밀번호를 설정",
-            showWarning = password.isNotEmpty() && password.length < 4,
-            warningMessage = "4자리 숫자를 입력해주세요.",
-            maxLength = 4,
-            isNumberOnly = true,
-            keyboardType = KeyboardType.NumberPassword
+            value = text,
+            onValueChange = { text = it },
+            hint = "인풋 텍스트",
+            showWarning = true,
+            showIcon = false,
+            showLimit = true,
+            maxLength = 10,
+            warningMessage = "경고 메시지를 입력해주세요."
         )
     }
 }
@@ -124,6 +153,27 @@ fun WarningTextFieldPreviewEmpty() {
 @Composable
 @Preview(showBackground = true, backgroundColor = 0xFF000000, widthDp = 360, heightDp = 200)
 fun WarningTextFieldPreviewNormal() {
+    var text by rememberSaveable { mutableStateOf("") }
+
+    Box(
+        modifier = Modifier.size(width = 360.dp, height = 200.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        WarningTextField(
+
+            value = text,
+            onValueChange  = { text = it },
+            hint = "인풋 텍스트",
+            showWarning = false,
+            showIcon = true,
+            showLimit = false
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true, backgroundColor = 0xFF000000, widthDp = 360, heightDp = 200)
+fun WarningTextFieldPreviewNormal_numberonly() {
     var password by remember { mutableStateOf("") }
 
     Box(
@@ -141,4 +191,4 @@ fun WarningTextFieldPreviewNormal() {
             keyboardType = KeyboardType.NumberPassword
         )
     }
-}
\ No newline at end of file
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/common/header/AuthorHeader.kt b/app/src/main/java/com/texthip/thip/ui/common/header/AuthorHeader.kt
index 38d1ab0d..b2ea1afc 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/header/AuthorHeader.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/header/AuthorHeader.kt
@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 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
@@ -23,6 +24,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
@@ -38,6 +40,7 @@ fun AuthorHeader(
     nickname: String,
     badgeText: String,
     buttonText: String,
+    buttonWidth: Dp? = null,
     onButtonClick: () -> Unit = {}
 ) {
     Row(
@@ -81,9 +84,15 @@ fun AuthorHeader(
         }
         OutlinedButton(
             modifier = Modifier
-                .size(width = 51.dp, height = 35.dp),
+                .then(
+                    if (buttonWidth != null)
+                        Modifier
+                            .width(buttonWidth)
+                            .height(33.dp)
+                    else Modifier
+                ),
             text = buttonText,
-            textStyle = typography.menu_m500_s14_h24,
+            textStyle = typography.view_m500_s14,
             onClick = onButtonClick
         )
     }
@@ -97,7 +106,8 @@ fun PreviewAuthorHeader() {
             profileImage = null,
             nickname = "열자자제한열열자제한",
             badgeText = "칭호칭호칭호",
-            buttonText = "구독"
+            buttonText = "구독",
+            buttonWidth = 60.dp
         )
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt b/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt
index 6c29cdb8..52009dd5 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt
@@ -40,7 +40,7 @@ fun ProfileBar(
     bottomTextColor: Color = colors.NeonGreen, // todo: 서버에서 색 보내주는걸로 받기?
     showSubscriberInfo: Boolean,
     subscriberCount: Int = 0,
-    hoursAgo: Int = 0,
+    hoursAgo: String = "",
     onClick: () -> Unit = { }
 ) {
     Row(
@@ -107,7 +107,7 @@ fun ProfileBar(
             }
         } else {
             Text(
-                text = stringResource(R.string.hours_ago, hoursAgo),
+                text = hoursAgo,
                 style = typography.timedate_r400_s11,
                 color = colors.Grey01
             )
@@ -132,7 +132,7 @@ fun PreviewProfileBar() {
                 topText = "user.04",
                 bottomText = stringResource(R.string.influencer),
                 showSubscriberInfo = false,
-                hoursAgo = 7
+                hoursAgo = "10시간 전"
             )
         }
     }
diff --git a/app/src/main/java/com/texthip/thip/ui/common/modal/ToastWithDate.kt b/app/src/main/java/com/texthip/thip/ui/common/modal/ToastWithDate.kt
index d5216ca2..23a5fdb7 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/modal/ToastWithDate.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/modal/ToastWithDate.kt
@@ -25,7 +25,7 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 fun ToastWithDate(
     modifier: Modifier = Modifier,
     message: String,
-    date: String
+    date: String? = null
 ) {
     Box(
         modifier = modifier
@@ -41,18 +41,20 @@ fun ToastWithDate(
         Row(
             modifier = Modifier.fillMaxWidth(),
             verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.SpaceBetween
+            horizontalArrangement = if (date != null) Arrangement.SpaceBetween else Arrangement.Start
         ) {
             Text(
                 text = message,
                 color = colors.White,
                 style = typography.view_m500_s12_h20
             )
-            Text(
-                text = date,
-                color = colors.Grey02,
-                style = typography.timedate_r400_s11
-            )
+            if (date != null) {
+                Text(
+                    text = date,
+                    color = colors.Grey02,
+                    style = typography.timedate_r400_s11
+                )
+            }
         }
     }
 }
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscriptionList.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscriptionList.kt
new file mode 100644
index 00000000..7d2b0251
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscriptionList.kt
@@ -0,0 +1,87 @@
+package com.texthip.thip.ui.feed.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.header.AuthorHeader
+import com.texthip.thip.ui.feed.mock.MySubscriptionData
+import com.texthip.thip.ui.theme.ThipTheme.colors
+
+@Composable
+fun MySubscriptionList(
+    members: List<MySubscriptionData>,
+    onUnsubscribe: (String) -> Unit
+) {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 20.dp)
+    ) {
+        members.forEachIndexed { index, member ->
+            AuthorHeader(
+                profileImage = member.profileImageUrl,
+                nickname = member.nickname,
+                badgeText = member.role,
+                buttonText = stringResource(if(member.isSubscribed) R.string.subscribe_cancel else R.string.subscribe),
+                buttonWidth = 73.dp,
+                onButtonClick = {
+                    onUnsubscribe(member.nickname)
+                }
+            )
+
+            if (index != members.lastIndex) {
+                HorizontalDivider(
+                    color = colors.DarkGrey02,
+                    thickness = 1.dp
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun MySubscriptionListPrev() {
+    MySubscriptionList(
+        members = listOf(
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "Thiper",
+                role = "칭호칭호",
+                roleColor = colors.Yellow,
+                subscriberCount = 100,
+            ),
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "thipthip",
+                role = "공식 인플루언서",
+                roleColor = colors.NeonGreen,
+                subscriberCount = 50
+            ),
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "Thiper",
+                role = "칭호칭호",
+                roleColor = colors.Yellow,
+                subscriberCount = 100
+            ),
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "thip01",
+                role = "작가",
+                roleColor = colors.NeonGreen,
+                subscriberCount = 100
+            ),
+        ),
+        onUnsubscribe = {}
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/mock/MySubscriptionData.kt b/app/src/main/java/com/texthip/thip/ui/feed/mock/MySubscriptionData.kt
new file mode 100644
index 00000000..ea20ccbd
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/mock/MySubscriptionData.kt
@@ -0,0 +1,13 @@
+package com.texthip.thip.ui.feed.mock
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+
+data class MySubscriptionData(
+    val profileImageUrl: Painter? = null,
+    val nickname: String,
+    val role: String,
+    val roleColor: Color,
+    val subscriberCount: Int,
+    var isSubscribed: Boolean = true
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt
index 51e73f62..6b6c5b83 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt
@@ -1,19 +1,42 @@
 package com.texthip.thip.ui.feed.screen
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.topappbar.LeftNameTopAppBar
+import com.texthip.thip.ui.common.topappbar.LogoTopAppBar
+import com.texthip.thip.ui.theme.ThipTheme.colors
 
 @Composable
 fun FeedScreen(navController: NavController) {
-    Box(
-        modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.Center
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
     ) {
-        Text(text = "Feed Screen")
+        LogoTopAppBar(
+            leftIcon = painterResource(R.drawable.ic_plusfriend),
+            hasNotification = true,
+            onLeftClick = {},
+            onRightClick = {}
+        )
+        Column(
+            modifier = Modifier
+                .padding(horizontal = 20.dp)
+                .fillMaxSize()
+        ) {
+
+        }
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/MySubscriptionListScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/MySubscriptionListScreen.kt
new file mode 100644
index 00000000..63e57cf2
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/MySubscriptionListScreen.kt
@@ -0,0 +1,217 @@
+package com.texthip.thip.ui.feed.screen
+
+import androidx.compose.foundation.background
+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.lazy.LazyColumn
+import androidx.compose.material.Text
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import androidx.navigation.NavController
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.modal.ToastWithDate
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.feed.component.MySubscriptionList
+import com.texthip.thip.ui.feed.mock.MySubscriptionData
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+import kotlinx.coroutines.delay
+
+@Composable
+fun MySubscriptionScreen(
+    navController: NavController? = null
+) {
+    val initialmembers = listOf(
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 100
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thipthip",
+            role = "공식 인플루언서",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 50
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 100
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thip01",
+            role = "작가",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 100
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 100
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thipthip",
+            role = "공식 인플루언서",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 50
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 100
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thip01",
+            role = "작가",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 100
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 100
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thipthip",
+            role = "공식 인플루언서",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 50
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 100
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thip01",
+            role = "작가",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 100
+        ),
+    )
+    val context = LocalContext.current
+
+    var members by remember { mutableStateOf(initialmembers) }
+    var toastMessage by rememberSaveable { mutableStateOf<String?>(null) }
+
+    LaunchedEffect(toastMessage) {
+        if (toastMessage != null) {
+            delay(2000)
+            toastMessage = null
+        }
+    }
+    Box(modifier = Modifier.fillMaxSize()) {
+        toastMessage?.let { message ->
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .zIndex(1f)
+                    .align(Alignment.TopCenter)
+                    .padding(horizontal = 15.dp, vertical = 15.dp),
+                contentAlignment = Alignment.TopCenter
+            ) {
+                ToastWithDate(
+                    message = message,
+                    modifier = Modifier.fillMaxWidth()
+                )
+            }
+        }
+        Column(
+            Modifier
+                .background(colors.Black)
+                .fillMaxSize()
+        ) {
+            DefaultTopAppBar(
+                onLeftClick = {},
+                title = stringResource(R.string.my_subscription_list)
+            )
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+
+            ) {
+                Spacer(modifier = Modifier.height(40.dp))
+                Text(
+                    text = stringResource(R.string.whole_num, members.size),
+                    style = typography.menu_m500_s14_h24,
+                    color = colors.Grey,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(start = 20.dp, bottom = 4.dp)
+                )
+                HorizontalDivider(
+                    modifier = Modifier.padding(horizontal = 20.dp),
+                    color = colors.DarkGrey02,
+                    thickness = 1.dp
+                )
+                LazyColumn(
+                    modifier = Modifier
+                        .fillMaxSize()
+                ) {
+                    item {
+                        MySubscriptionList(
+                            members = members,
+                            onUnsubscribe = { nickname ->
+                                members = members.map {
+                                    if (it.nickname == nickname) it.copy(isSubscribed = !it.isSubscribed)
+                                    else it
+                                }
+                                toastMessage =
+                                    if (members.find { it.nickname == nickname }?.isSubscribed == true) {
+                                        context.getString(R.string.toast_subscribe, nickname)
+                                    } else {
+                                        context.getString(R.string.toast_unsubscribe, nickname)
+                                    }
+                            }
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun MySubscriptionListScreenPrev() {
+    ThipTheme {
+        MySubscriptionScreen()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/component/BookContent.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/MypageSaveBook.kt
similarity index 88%
rename from app/src/main/java/com/texthip/thip/ui/myPage/component/BookContent.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/component/MypageSaveBook.kt
index 9d70930a..bafb3dbf 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/component/BookContent.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/component/MypageSaveBook.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.myPage.component
+package com.texthip.thip.ui.mypage.component
 
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
@@ -7,7 +7,7 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.texthip.thip.ui.common.cards.CardBookList
-import com.texthip.thip.ui.myPage.viewmodel.SavedBookViewModel
+import com.texthip.thip.ui.mypage.viewmodel.SavedBookViewModel
 
 @Composable
 fun BookContent(viewModel: SavedBookViewModel = viewModel()) {
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/component/FeedContent.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/MypageSaveFeed.kt
similarity index 90%
rename from app/src/main/java/com/texthip/thip/ui/myPage/component/FeedContent.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/component/MypageSaveFeed.kt
index 56216cef..eeab2b6d 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/component/FeedContent.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/component/MypageSaveFeed.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.myPage.component
+package com.texthip.thip.ui.mypage.component
 
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
@@ -7,7 +7,7 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.res.painterResource
 import androidx.lifecycle.viewmodel.compose.viewModel
-import com.texthip.thip.ui.myPage.viewmodel.SavedFeedViewModel
+import com.texthip.thip.ui.mypage.viewmodel.SavedFeedViewModel
 
 @Composable
 fun FeedContent(viewModel: SavedFeedViewModel = viewModel()) {
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/component/RoleCard.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/RoleCard.kt
similarity index 99%
rename from app/src/main/java/com/texthip/thip/ui/myPage/component/RoleCard.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/component/RoleCard.kt
index 1743529c..27157d30 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/component/RoleCard.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/component/RoleCard.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.myPage.component
+package com.texthip.thip.ui.mypage.component
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/component/SavedFeedCard.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt
similarity index 94%
rename from app/src/main/java/com/texthip/thip/ui/myPage/component/SavedFeedCard.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt
index cad18ede..b847a6ab 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/component/SavedFeedCard.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt
@@ -1,12 +1,10 @@
-package com.texthip.thip.ui.myPage.component
+package com.texthip.thip.ui.mypage.component
 
-import android.R.attr.contentDescription
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 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
@@ -25,11 +23,9 @@ import androidx.compose.ui.unit.dp
 import com.texthip.thip.R
 import com.texthip.thip.ui.common.buttons.ActionBookButton
 import com.texthip.thip.ui.common.header.ProfileBar
-import com.texthip.thip.ui.myPage.mock.FeedItem
-import com.texthip.thip.ui.theme.Red
+import com.texthip.thip.ui.mypage.mock.FeedItem
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
-import com.texthip.thip.ui.theme.White
 
 @Composable
 fun SavedFeedCard(
@@ -130,7 +126,7 @@ private fun SavedFeedCardPrev() {
         userRole = stringResource(R.string.influencer),
         bookTitle = "책 제목",
         authName = "한강",
-        timeAgo = 3,
+        timeAgo = "3시간 전",
         content = "무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷",
         likeCount = 10,
         commentCount = 5,
@@ -146,7 +142,7 @@ private fun SavedFeedCardPrev() {
         userRole = stringResource(R.string.influencer),
         bookTitle = "책 제목",
         authName = "한강",
-        timeAgo = 3,
+        timeAgo = "3시간 전",
         content = "한줄만 입력 가능",
         likeCount = 10,
         commentCount = 5,
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/mock/BookItem.kt b/app/src/main/java/com/texthip/thip/ui/mypage/mock/BookItem.kt
similarity index 81%
rename from app/src/main/java/com/texthip/thip/ui/myPage/mock/BookItem.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/mock/BookItem.kt
index bb5c4688..20ee2a14 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/mock/BookItem.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/mock/BookItem.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.myPage.mock
+package com.texthip.thip.ui.mypage.mock
 
 data class BookItem(
     val id: Int,
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/mock/FeedItem.kt b/app/src/main/java/com/texthip/thip/ui/mypage/mock/FeedItem.kt
similarity index 84%
rename from app/src/main/java/com/texthip/thip/ui/myPage/mock/FeedItem.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/mock/FeedItem.kt
index fab38a1b..814a1c3e 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/mock/FeedItem.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/mock/FeedItem.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.myPage.mock
+package com.texthip.thip.ui.mypage.mock
 
 data class FeedItem(
     val id: Int,
@@ -7,7 +7,7 @@ data class FeedItem(
     val userRole: String,
     val bookTitle: String,
     val authName: String,
-    val timeAgo: Int,
+    val timeAgo: String,
     val content: String,
     val likeCount: Int,
     val commentCount: Int,
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/mock/ReactionItem.kt b/app/src/main/java/com/texthip/thip/ui/mypage/mock/ReactionItem.kt
similarity index 75%
rename from app/src/main/java/com/texthip/thip/ui/myPage/mock/ReactionItem.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/mock/ReactionItem.kt
index 8ec2098e..fd93cc35 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/mock/ReactionItem.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/mock/ReactionItem.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.myPage.mock
+package com.texthip.thip.ui.mypage.mock
 
 data class ReactionItem(
     val title: String,
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/mock/RoleItem.kt b/app/src/main/java/com/texthip/thip/ui/mypage/mock/RoleItem.kt
similarity index 80%
rename from app/src/main/java/com/texthip/thip/ui/myPage/mock/RoleItem.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/mock/RoleItem.kt
index 584cdbb7..ce193f5f 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/mock/RoleItem.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/mock/RoleItem.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.myPage.mock
+package com.texthip.thip.ui.mypage.mock
 
 import androidx.compose.ui.graphics.Color
 
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/EditProfileScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageEditScreen.kt
similarity index 90%
rename from app/src/main/java/com/texthip/thip/ui/myPage/EditProfileScreen.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageEditScreen.kt
index dad344f2..2994b8bf 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/EditProfileScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageEditScreen.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.myPage.screen
+package com.texthip.thip.ui.mypage.screen
 
 
 import androidx.compose.foundation.background
@@ -6,10 +6,10 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.FlowRow
 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.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -24,8 +24,8 @@ import androidx.compose.ui.unit.dp
 import com.texthip.thip.R
 import com.texthip.thip.ui.common.forms.FormTextFieldDefault
 import com.texthip.thip.ui.common.topappbar.InputTopAppBar
-import com.texthip.thip.ui.myPage.component.RoleCard
-import com.texthip.thip.ui.myPage.mock.RoleItem
+import com.texthip.thip.ui.mypage.component.RoleCard
+import com.texthip.thip.ui.mypage.mock.RoleItem
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 
@@ -64,20 +64,18 @@ fun EditProfileScreen() {
             colors.Skyblue
         )
     )
-    Scaffold(
-        containerColor = colors.Black,
-        topBar = {
-            InputTopAppBar(
-                title = stringResource(R.string.edit_profile),
-                isRightButtonEnabled = true,
-                onLeftClick = {},
-                onRightClick = {}
-            )
-        }
-    ) { innerPadding ->
+    Column(
+        Modifier
+            .fillMaxSize()
+    ) {
+        InputTopAppBar(
+            title = stringResource(R.string.edit_profile),
+            isRightButtonEnabled = true,
+            onLeftClick = {},
+            onRightClick = {}
+        )
         Column(
             modifier = Modifier
-                .padding(innerPadding)
                 .padding(horizontal = 20.dp)
                 .fillMaxWidth(),
             horizontalAlignment = Alignment.CenterHorizontally
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/DeleteAccountCompleteScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageLeavethipCompleteScreen.kt
similarity index 89%
rename from app/src/main/java/com/texthip/thip/ui/myPage/DeleteAccountCompleteScreen.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageLeavethipCompleteScreen.kt
index fc79be00..38a013c3 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/DeleteAccountCompleteScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageLeavethipCompleteScreen.kt
@@ -1,6 +1,7 @@
-package com.texthip.thip.ui.myPage.screen
+package com.texthip.thip.ui.mypage.screen
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -10,7 +11,6 @@ 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.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -28,19 +28,18 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 
 @Composable
 fun DeleteAccountCompleteScreen() {
-    Scaffold(
-        containerColor = colors.Black,
-        topBar = {
-            DefaultTopAppBar(
-                isRightIconVisible = false,
-                isTitleVisible = false,
-                onLeftClick = {},
-            )
-        }
-    ) { innerPadding ->
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            isRightIconVisible = false,
+            isTitleVisible = false,
+            onLeftClick = {},
+        )
         Column(
             modifier = Modifier
-                .padding(innerPadding)
                 .fillMaxSize(),
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/DeleteAccountScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageLeavethipScreen.kt
similarity index 79%
rename from app/src/main/java/com/texthip/thip/ui/myPage/DeleteAccountScreen.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageLeavethipScreen.kt
index 95d5e2d6..31b6f7bb 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/DeleteAccountScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageLeavethipScreen.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.myPage.screen
+package com.texthip.thip.ui.mypage.screen
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -13,7 +13,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -45,47 +44,20 @@ fun DeleteAccountScreen() {
     val backgroundColor = if (isChecked) colors.Purple else colors.Grey02
     var isDialogVisible by rememberSaveable { mutableStateOf(false) }
 
-    Scaffold(
-        containerColor = colors.Black,
-        topBar = {
-            DefaultTopAppBar(
-                title = stringResource(R.string.delete_account),
-                onLeftClick = {},
-            )
-        },
-        bottomBar = {
-            Row(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .height(56.dp)
-                    .background(backgroundColor)
-                    .clickable(
-                        enabled = isChecked,
-                        onClick = {
-                            isDialogVisible = true
-                        }),
-                horizontalArrangement = Arrangement.Center,
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                Icon(
-                    painter = painterResource(R.drawable.ic_bye),
-                    contentDescription = null,
-                    tint = colors.White
-                )
-                Text(
-                    text = stringResource(R.string.leave_thip),
-                    color = colors.White,
-                    style = typography.smalltitle_sb600_s18_h24,
-                    modifier = Modifier.padding(horizontal = 8.dp)
-                )
-            }
-        }
-    ) { innerPadding ->
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            title = stringResource(R.string.delete_account),
+            onLeftClick = {},
+        )
+        Spacer(modifier = Modifier.height(40.dp))
         Column(
             modifier = Modifier
-                .padding(20.dp)
-                .padding(innerPadding)
-                .fillMaxSize()
+                .weight(1f)
+                .padding(horizontal = 20.dp),
         ) {
             Box(
                 modifier = Modifier
@@ -144,6 +116,32 @@ fun DeleteAccountScreen() {
                 )
             }
         }
+        Spacer(modifier = Modifier.height(55.dp))
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(50.dp)
+                .background(backgroundColor)
+                .clickable(
+                    enabled = isChecked,
+                    onClick = {
+                        isDialogVisible = true
+                    }),
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Icon(
+                painter = painterResource(R.drawable.ic_bye),
+                contentDescription = null,
+                tint = colors.White
+            )
+            Text(
+                text = stringResource(R.string.leave_thip),
+                color = colors.White,
+                style = typography.smalltitle_sb600_s18_h24,
+                modifier = Modifier.padding(horizontal = 8.dp)
+            )
+        }
         if (isDialogVisible) {
             Dialog(onDismissRequest = { isDialogVisible = false }) {
                 Box(
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/NotificationScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageNotificationEditScreen.kt
similarity index 86%
rename from app/src/main/java/com/texthip/thip/ui/myPage/NotificationScreen.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageNotificationEditScreen.kt
index 3f6c49ee..feb41106 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/NotificationScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageNotificationEditScreen.kt
@@ -1,12 +1,14 @@
-package com.texthip.thip.ui.myPage.screen
+package com.texthip.thip.ui.mypage.screen
 
+import androidx.compose.foundation.background
 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.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -58,20 +60,20 @@ fun NotificationScreen() {
                 )
             }
         }
-        Scaffold(
-            containerColor = colors.Black,
-            topBar = {
-                InputTopAppBar(
-                    title = stringResource(R.string.notification_settings),
-                    isRightButtonEnabled = true,
-                    onLeftClick = {},
-                    onRightClick = {}
-                )
-            }
-        ) { innerPadding ->
+        Column(
+            Modifier
+                .background(colors.Black)
+                .fillMaxSize()
+        ) {
+            InputTopAppBar(
+                title = stringResource(R.string.notification_settings),
+                isRightButtonEnabled = true,
+                onLeftClick = {},
+                onRightClick = {}
+            )
+            Spacer(modifier = Modifier.height(40.dp))
             Column(
                 modifier = Modifier
-                    .padding(innerPadding)
                     .padding(horizontal = 20.dp)
                     .fillMaxSize(),
                 horizontalAlignment = Alignment.CenterHorizontally
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/ReactionsScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageReactionScreen.kt
similarity index 91%
rename from app/src/main/java/com/texthip/thip/ui/myPage/ReactionsScreen.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageReactionScreen.kt
index 68948902..28396257 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/ReactionsScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageReactionScreen.kt
@@ -1,5 +1,6 @@
-package com.texthip.thip.ui.myPage.screen
+package com.texthip.thip.ui.mypage.screen
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -23,8 +24,9 @@ import com.texthip.thip.R
 import com.texthip.thip.ui.common.buttons.OptionChipButton
 import com.texthip.thip.ui.common.cards.CardAlarm
 import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
-import com.texthip.thip.ui.myPage.mock.ReactionItem
+import com.texthip.thip.ui.mypage.mock.ReactionItem
 import com.texthip.thip.ui.theme.Black
+import com.texthip.thip.ui.theme.ThipTheme.colors
 
 @Composable
 fun ReactionsScreen() {
@@ -54,21 +56,19 @@ fun ReactionsScreen() {
         }
     }
 
-    Scaffold(
-        containerColor = Black,
-        topBar = {
-            DefaultTopAppBar(
-                title = stringResource(R.string.reactions),
-                onLeftClick = {},
-            )
-        }
-    ) { innerPadding ->
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            title = stringResource(R.string.reactions),
+            onLeftClick = {},
+        )
         Column(
             modifier = Modifier
-                .padding(innerPadding)
                 .fillMaxSize()
         ) {
-            //TODO card 컴포넌트 수정 후 적용 & 필터링 기능
             Row(modifier = Modifier.padding(start = 20.dp, top = 20.dp, bottom = 20.dp)) {
                 OptionChipButton(
                     text = stringResource(R.string.likes),
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/SavedScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageSaveScreen.kt
similarity index 88%
rename from app/src/main/java/com/texthip/thip/ui/myPage/SavedScreen.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageSaveScreen.kt
index 332dffe4..e57cc60c 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/SavedScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageSaveScreen.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.myPage.screen
+package com.texthip.thip.ui.mypage.screen
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Tab
 import androidx.compose.material3.TabRow
 import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
@@ -29,9 +28,8 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.texthip.thip.R
 import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
-import com.texthip.thip.ui.myPage.component.BookContent
-import com.texthip.thip.ui.myPage.component.FeedContent
-import com.texthip.thip.ui.theme.Black
+import com.texthip.thip.ui.mypage.component.BookContent
+import com.texthip.thip.ui.mypage.component.FeedContent
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 import com.texthip.thip.ui.theme.White
@@ -41,18 +39,17 @@ fun SavedScreen() {
     val tabs = listOf(stringResource(R.string.feed), stringResource(R.string.book))
     var selectedTabIndex by rememberSaveable { mutableStateOf(0) }
 
-    Scaffold(
-        containerColor = Black,
-        topBar = {
-            DefaultTopAppBar(
-                title = stringResource(R.string.saved),
-                onLeftClick = {},
-            )
-        }
-    ) { innerPadding ->
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            title = stringResource(R.string.saved),
+            onLeftClick = {},
+        )
         Column(
             modifier = Modifier
-                .padding(innerPadding)
                 .fillMaxSize()
         ) {
             Box(modifier = Modifier.width(160.dp).padding(start = 20.dp)) {
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/screen/MyPageScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageScreen.kt
similarity index 94%
rename from app/src/main/java/com/texthip/thip/ui/myPage/screen/MyPageScreen.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageScreen.kt
index e5f3d666..a90d54bb 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/screen/MyPageScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageScreen.kt
@@ -1,5 +1,6 @@
-package com.texthip.thip.ui.myPage.screen
+package com.texthip.thip.ui.mypage.screen
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
@@ -36,19 +37,18 @@ fun MyPageScreen(
     badgeText: String
 ) {
     var showLogoutDialog by remember { mutableStateOf(false) }
-    Scaffold(
-        containerColor = Black,
-        topBar = {
-            LeftNameTopAppBar(
-                title = stringResource(R.string.my_page),
-                leftIcon = painterResource(R.drawable.ic_search),
-                rightIcon = painterResource(R.drawable.ic_plus)
-            )
-        }
-    ) { innerPadding ->
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        LeftNameTopAppBar(
+            title = stringResource(R.string.my_page),
+            leftIcon = painterResource(R.drawable.ic_search),
+            rightIcon = painterResource(R.drawable.ic_plus)
+        )
         Column(
             modifier = Modifier
-                .padding(innerPadding)
                 .fillMaxSize()
         ) {
             Spacer(modifier = Modifier.height(40.dp))
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/viewmodel/SavedBookViewModel.kt b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedBookViewModel.kt
similarity index 91%
rename from app/src/main/java/com/texthip/thip/ui/myPage/viewmodel/SavedBookViewModel.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedBookViewModel.kt
index b271d533..a0ff0759 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/viewmodel/SavedBookViewModel.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedBookViewModel.kt
@@ -1,13 +1,9 @@
-package com.texthip.thip.ui.myPage.viewmodel
+package com.texthip.thip.ui.mypage.viewmodel
 
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.setValue
 import androidx.lifecycle.ViewModel
-import com.texthip.thip.ui.myPage.mock.BookItem
+import com.texthip.thip.ui.mypage.mock.BookItem
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
-import kotlinx.coroutines.flow.map
 
 class SavedBookViewModel : ViewModel() {
 
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/viewmodel/SavedFeedViewModel.kt b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedFeedViewModel.kt
similarity index 92%
rename from app/src/main/java/com/texthip/thip/ui/myPage/viewmodel/SavedFeedViewModel.kt
rename to app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedFeedViewModel.kt
index f0fcbeb5..1eefdc48 100644
--- a/app/src/main/java/com/texthip/thip/ui/myPage/viewmodel/SavedFeedViewModel.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedFeedViewModel.kt
@@ -1,8 +1,8 @@
-package com.texthip.thip.ui.myPage.viewmodel
+package com.texthip.thip.ui.mypage.viewmodel
 
 import androidx.lifecycle.ViewModel
 import com.texthip.thip.R
-import com.texthip.thip.ui.myPage.mock.FeedItem
+import com.texthip.thip.ui.mypage.mock.FeedItem
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 
@@ -16,7 +16,7 @@ class SavedFeedViewModel: ViewModel() {
                 userRole = "학생",
                 bookTitle = "라랄ㄹ라라",
                 authName = "야야야",
-                timeAgo = 15,
+                timeAgo = "15시간 전",
                 content = "진짜최공진짜최공진차최공진짜최공진짜최공진차최공진짜최공진짜최공진차최공진짜최공진짜최공진차최공진짜최공진짜최공진차최공진짜최공진짜최공진차최공진짜최공진짜최공진차최공",
                 likeCount = 25,
                 commentCount = 4,
@@ -30,7 +30,7 @@ class SavedFeedViewModel: ViewModel() {
                 userRole = "학생",
                 bookTitle = "라랄ㄹ라라",
                 authName = "야야야",
-                timeAgo = 15,
+                timeAgo = "15시간 전",
                 content = "너무 재밌네요..",
                 likeCount = 25,
                 commentCount = 4,
@@ -45,7 +45,7 @@ class SavedFeedViewModel: ViewModel() {
                 userRole = "학생",
                 bookTitle = "라랄ㄹ라라",
                 authName = "야야야",
-                timeAgo = 15,
+                timeAgo = "15시간 전",
                 content = "너무 재밌네요..",
                 likeCount = 25,
                 commentCount = 4,
@@ -60,7 +60,7 @@ class SavedFeedViewModel: ViewModel() {
                 userRole = "학생",
                 bookTitle = "책이름책이름",
                 authName = "저자이름저자이름",
-                timeAgo = 25,
+                timeAgo = "15시간 전",
                 content = "진짜최공진짜최공진차최공진짜최공진짜최공진차최공진짜최공진짜최공진차최공진짜최공진짜최공진차최공진짜최공진짜최공진차최공진짜최공진짜최공진차최공진짜최공진짜최공진차최공",
                 likeCount = 25,
                 commentCount = 4,
@@ -75,7 +75,7 @@ class SavedFeedViewModel: ViewModel() {
                 userRole = "학생",
                 bookTitle = "책이름책이름",
                 authName = "저자이름저자이름",
-                timeAgo = 25,
+                timeAgo = "15시간 전",
                 content = "진짜최공진짜최공진차최공진짜최공진짜최공진차최공진짜최공진짜최공진차최공진짜최공진짜최공진차최공진짜최공진짜최공진차최공진짜최공진짜최공진차최공진짜최공진짜최공진차최공",
                 likeCount = 25,
                 commentCount = 4,
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/MainNavHost.kt b/app/src/main/java/com/texthip/thip/ui/navigator/MainNavHost.kt
index cb59a72a..c3b8701d 100644
--- a/app/src/main/java/com/texthip/thip/ui/navigator/MainNavHost.kt
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/MainNavHost.kt
@@ -4,10 +4,10 @@ import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.compose.runtime.Composable
 import androidx.navigation.NavHostController
-import com.texthip.thip.ui.bookSearch.screen.BookSearchScreen
+import com.texthip.thip.ui.booksearch.screen.BookSearchScreen
 import com.texthip.thip.ui.feed.screen.FeedScreen
 import com.texthip.thip.ui.group.screen.GroupScreen
-import com.texthip.thip.ui.myPage.screen.MyPageScreen
+import com.texthip.thip.ui.mypage.screen.MyPageScreen
 
 @Composable
 fun MainNavHost(navController: NavHostController) {
diff --git a/app/src/main/java/com/texthip/thip/ui/signin/mock/SignupUserInfo.kt b/app/src/main/java/com/texthip/thip/ui/signin/mock/SignupUserInfo.kt
new file mode 100644
index 00000000..9bf87efc
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/mock/SignupUserInfo.kt
@@ -0,0 +1,7 @@
+package com.texthip.thip.ui.signin.mock
+
+data class SignupUserInfo(
+    val nickname: String,
+    val profileImageResId: Int?,
+    val role: String
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/signin/screen/LoginScreen.kt b/app/src/main/java/com/texthip/thip/ui/signin/screen/LoginScreen.kt
new file mode 100644
index 00000000..3f150f75
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/screen/LoginScreen.kt
@@ -0,0 +1,87 @@
+package com.texthip.thip.ui.signin.screen
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+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.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.Color
+import androidx.compose.ui.graphics.Color.Companion.Unspecified
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.ActionMediumButton
+import com.texthip.thip.ui.theme.Purple
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+
+@Composable
+fun LoginScreen() {
+    Column(
+        Modifier
+            .background(colors.Black)
+            .padding(horizontal = 20.dp)
+            .fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.ic_logo),
+            contentDescription = null,
+            tint = Unspecified,
+        )
+        Spacer(modifier = Modifier.height(24.dp))
+        Text(
+            text = buildAnnotatedString {
+                withStyle(style = SpanStyle(color = Purple)) {
+                    append(stringResource(R.string.thip))
+                }
+                append(stringResource(R.string.splash_ment))
+            },
+            style = typography.smalltitle_sb600_s18_h24,
+            color = colors.White
+        )
+        Spacer(modifier = Modifier.height(140.dp))
+        ActionMediumButton(
+            text = stringResource(R.string.kakao_login),
+            icon = painterResource(R.drawable.ic_kakaotalk),
+            iconSize = 21,
+            contentColor = colors.Black,
+            backgroundColor = colors.KakaoYellow,
+            hasRightIcon = false,
+            modifier = Modifier.fillMaxWidth(),
+            onClick = {},
+        )
+        Spacer(modifier = Modifier.height(20.dp))
+        ActionMediumButton(
+            text = stringResource(R.string.google_login),
+            icon = painterResource(R.drawable.ic_google),
+            iconSize = 21,
+            contentColor = colors.Black,
+            backgroundColor = colors.White,
+            hasRightIcon = false,
+            modifier = Modifier.fillMaxWidth(),
+            onClick = {},
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun LoginScreenPrev() {
+    LoginScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupDoneScreen.kt b/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupDoneScreen.kt
new file mode 100644
index 00000000..30890b21
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupDoneScreen.kt
@@ -0,0 +1,145 @@
+package com.texthip.thip.ui.signin.screen
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+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.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+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.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.ActionMediumButton
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.signin.mock.SignupUserInfo
+import com.texthip.thip.ui.theme.Grey
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+
+
+@Composable
+fun SignupDoneScreen(userInfo: SignupUserInfo) {
+    val nickname = userInfo.nickname
+    val profileImageResId = userInfo.profileImageResId
+    val role = userInfo.role
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            isRightIconVisible = false,
+            isTitleVisible = false,
+            onLeftClick = {},
+        )
+        Spacer(modifier = Modifier.height(40.dp))
+        Column(
+            modifier = Modifier
+                .padding(horizontal = 20.dp)
+                .fillMaxWidth()
+        ) {
+            Text(
+                text = stringResource(R.string.hello_user, nickname),
+                style = typography.smalltitle_sb600_s18_h24,
+                color = colors.White,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 8.dp)
+            )
+            Spacer(modifier = Modifier.height(8.dp))
+            Text(
+                text = stringResource(R.string.signin_done),
+                style = typography.copy_m500_s14_h20,
+                color = colors.Grey,
+                modifier = Modifier
+                    .fillMaxWidth()
+            )
+            Spacer(modifier = Modifier.height(100.dp))
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth(),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                if (profileImageResId != null) {
+                    Box(
+                        modifier = Modifier
+                            .size(54.dp)
+                            .clip(CircleShape)
+                            .border(width = 1.dp, color = colors.White, shape = CircleShape)
+                            .background(colors.Black),
+                        contentAlignment = Alignment.BottomCenter
+                    ) {
+                        Image(
+                            painter = painterResource(id = profileImageResId),
+                            contentDescription = null,
+                            contentScale = ContentScale.Fit,
+                            modifier = Modifier
+                                .size(45.dp)
+                                .offset(y = 2.dp)
+                        )
+                    }
+                } else {
+                    Box(
+                        modifier = Modifier
+                            .size(54.dp)
+                            .clip(CircleShape)
+                            .border(width = 0.5.dp, color = colors.Grey01, shape = CircleShape)
+                            .background(Grey)
+                    )
+                }
+                Spacer(modifier = Modifier.height(8.dp))
+                Text(
+                    text = nickname,
+                    style = typography.smalltitle_sb600_s18_h24,
+                    color = colors.White,
+                    modifier = Modifier
+                        .padding(bottom = 4.dp)
+                )
+                //TODO role color는  role과 매핑되도록 수정 필요
+                Text(
+                    text = role,
+                    style = typography.copy_r400_s14,
+                    color = colors.White,
+                    modifier = Modifier
+                )
+                Spacer(modifier = Modifier.height(76.dp))
+                ActionMediumButton(
+                    text = stringResource(R.string.start_thip),
+                    contentColor = colors.White,
+                    backgroundColor = colors.Purple,
+                    modifier = Modifier.width(180.dp),
+                    onClick = {},
+                )
+            }
+
+        }
+
+    }
+}
+
+@Preview
+@Composable
+private fun SignupDoneScreenPrev() {
+    SignupDoneScreen(userInfo = SignupUserInfo(
+        nickname = "JJUYAA",
+        profileImageResId = R.drawable.character_sociology,
+        role = "칭호칭호"
+    ))
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupNicknameScreen.kt b/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupNicknameScreen.kt
new file mode 100644
index 00000000..7c41dfd3
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupNicknameScreen.kt
@@ -0,0 +1,101 @@
+package com.texthip.thip.ui.signin.screen
+
+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.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.forms.WarningTextField
+import com.texthip.thip.ui.common.topappbar.InputTopAppBar
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+
+@Composable
+fun SigninNicknameScreen() {
+    var nickname by rememberSaveable { mutableStateOf("") }
+    var showWarning by remember { mutableStateOf(false) }
+    var warningMessageResId by remember { mutableStateOf<Int?>(null) }
+    val isRightButtonEnabled by remember {derivedStateOf {nickname.isNotBlank()}} // 닉네임 공백 아닐때 버튼 활성화
+    val coroutineScope = rememberCoroutineScope()
+
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        InputTopAppBar(
+            title = stringResource(R.string.settings_1),
+            isRightButtonEnabled = isRightButtonEnabled,
+            rightButtonName = stringResource(R.string.next),
+            isLeftIconVisible = false,
+            onLeftClick = {},
+            onRightClick = {
+                //TODO 서버 연동시 로직 변경 필요
+                coroutineScope.launch {
+                    delay(500) // 서버 응답 시뮬레이션
+                    if (nickname == "test") {
+                        showWarning = true
+                        warningMessageResId = R.string.nickname_warning
+                    } else {
+                        showWarning = false
+                        warningMessageResId = null
+                        // 다음 페이지로 이동
+                    }
+                }
+            }
+        )
+        Spacer(modifier = Modifier.height(40.dp))
+        Column(
+            modifier = Modifier
+                .padding(horizontal = 20.dp)
+                .fillMaxWidth()
+        ) {
+            Text(
+                text = stringResource(R.string.nickname),
+                style = typography.smalltitle_sb600_s18_h24,
+                color = colors.White,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 12.dp)
+            )
+            WarningTextField(
+                containerColor = colors.DarkGrey02,
+                value = nickname,
+                onValueChange = {
+                    nickname = it
+                    showWarning = false // 입력 중에는 경고 숨기기
+                },
+                hint = stringResource(R.string.nickname_condition),
+                showWarning = showWarning,
+                showIcon = false,
+                showLimit = true,
+                maxLength = 10,
+                warningMessage = warningMessageResId?.let { stringResource(it) } ?: ""
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun SigninNicknameScreenPrev() {
+    SigninNicknameScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/signin/screen/SplashScreen.kt b/app/src/main/java/com/texthip/thip/ui/signin/screen/SplashScreen.kt
new file mode 100644
index 00000000..ee1d470b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/screen/SplashScreen.kt
@@ -0,0 +1,59 @@
+package com.texthip.thip.ui.signin.screen
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+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.Color.Companion.Unspecified
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.Purple
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun SplashScreen() {
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.ic_logo),
+            contentDescription = null,
+            tint = Unspecified,
+        )
+        Spacer(modifier = Modifier.height(24.dp))
+        Text(
+            text = buildAnnotatedString {
+                withStyle(style = SpanStyle(color = Purple)) {
+                    append(stringResource(R.string.thip))
+                }
+                append(stringResource(R.string.splash_ment))
+            },
+            style = typography.smalltitle_sb600_s18_h24,
+            color = colors.White
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun SplashScreenPrev() {
+    SplashScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/theme/Color.kt b/app/src/main/java/com/texthip/thip/ui/theme/Color.kt
index 31961f3e..6306b18d 100644
--- a/app/src/main/java/com/texthip/thip/ui/theme/Color.kt
+++ b/app/src/main/java/com/texthip/thip/ui/theme/Color.kt
@@ -24,6 +24,7 @@ val Pink = Color(0xFFFF8BAC)
 val Lavendar = Color(0xFFC8A5FF)
 val LavendaSub = Color(0xFFA76FFF)
 val Yellow = Color(0xFFFFECA7)
+val KakaoYellow = Color(0xFFFEE500)
 
 val PureWhite = Color(0xFFFFFFFF)
 val White = Color(0xFFFEFEFE)
@@ -62,6 +63,7 @@ data class ThipColors(
     val Lavendar: Color,
     val LavendaSub: Color,
     val Yellow: Color,
+    val KakaoYellow: Color,
     val PureWhite: Color,
     val White: Color,
     val Grey50: Color,
@@ -98,6 +100,7 @@ val defaultThipColors = ThipColors(
     Lavendar = Lavendar,
     LavendaSub = LavendaSub,
     Yellow = Yellow,
+    KakaoYellow = KakaoYellow,
     PureWhite = PureWhite,
     White = White,
     Grey50 = Grey50,
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 3ec6ca56..a20fda5d 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -210,4 +210,29 @@
     <string name="group_room_duration_initial_comment">모임방 활동이 시작되면, 독서메이트 모집이 자동으로 종료돼요.</string>
     <string name="group_input_count">%1$d / %2$d</string>
 
+    <!--    splash screen   -->
+    <string name="thip">띱!</string>
+    <string name="splash_ment">하고 떠오른 그 문장을 나눠요</string>
+
+    <!--    signin   -->
+    <string name="kakao_login">카카오계정 로그인</string>
+    <string name="google_login">구글계정 로그인</string>
+    <string name="settings_1">설정 1/2</string>
+    <string name="settings_2">설정 2/2</string>
+    <string name="nickname">닉네임 (필수)</string>
+    <string name="nickname_warning">이미 사용중인 닉네임입니다.</string>
+    <string name="nickname_condition">한글/영어/숫자로 구성</string>
+    <string name="hello_user">안녕하세요, %1$s님</string>
+    <string name="signin_done">이제 Thip에서 활동할 준비를 모두 마쳤어요!</string>
+    <string name="start_thip">지금 바로 Thip 시작하기</string>
+
+
+    <!--    feed   -->
+    <string name="my_subscription_list">내 구독 리스트</string>
+    <string name="whole_num">전체 %d</string>
+    <string name="toast_subscribe">%1$s 님을 구독했어요</string>
+    <string name="toast_unsubscribe">%1$s 님을 구독취소했어요</string>
+    <string name="subscribe_cancel">구독취소</string>
+
+
 </resources>
\ No newline at end of file