diff --git a/.idea/.name b/.idea/.name
new file mode 100644
index 00000000..01dfec1d
--- /dev/null
+++ b/.idea/.name
@@ -0,0 +1 @@
+Thip
\ No newline at end of file
diff --git a/.idea/compiler.xml b/.idea/compiler.xml
index 4bf0b1b4..b86273d9 100644
--- a/.idea/compiler.xml
+++ b/.idea/compiler.xml
@@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="CompilerConfiguration">
-    <bytecodeTargetLevel>
-      <module name="Thip.app" target="21" />
-    </bytecodeTargetLevel>
+    <bytecodeTargetLevel target="21" />
   </component>
 </project>
\ No newline at end of file
diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml
index 8bc271fe..75b3c473 100644
--- a/.idea/deploymentTargetSelector.xml
+++ b/.idea/deploymentTargetSelector.xml
@@ -4,6 +4,28 @@
     <selectionStates>
       <SelectionState runConfigName="Thip.app">
         <option name="selectionMode" value="DROPDOWN" />
+        <DropdownSelection timestamp="2025-05-31T10:07:48.311628Z">
+          <Target type="DEFAULT_BOOT">
+            <handle>
+              <DeviceId pluginId="LocalEmulator" identifier="path=C:\Users\정주연\.android\avd\Thip_Pixel_8a.avd" />
+            </handle>
+          </Target>
+        </DropdownSelection>
+        <DialogSelection />
+      </SelectionState>
+      <SelectionState runConfigName="THIP-Android.Thip.app">
+        <option name="selectionMode" value="DROPDOWN" />
+        <DropdownSelection timestamp="2025-05-31T10:59:15.906390500Z">
+          <Target type="DEFAULT_BOOT">
+            <handle>
+              <DeviceId pluginId="LocalEmulator" identifier="path=C:\Users\정주연\.android\avd\Thip_Pixel_8a.avd" />
+            </handle>
+          </Target>
+        </DropdownSelection>
+        <DialogSelection />
+      </SelectionState>
+      <SelectionState runConfigName="PreviewInfoPopup">
+        <option name="selectionMode" value="DROPDOWN" />
       </SelectionState>
     </selectionStates>
   </component>
diff --git a/.idea/misc.xml b/.idea/misc.xml
index 503be042..1e536c6c 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="CodeInsightWorkspaceSettings">
     <option name="optimizeImportsOnTheFly" value="true" />
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index 67692c79..a776656f 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -49,6 +49,7 @@ dependencies {
     implementation(libs.androidx.ui.graphics)
     implementation(libs.androidx.ui.tooling.preview)
     implementation(libs.androidx.material3)
+    implementation(libs.androidx.navigation.compose)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
diff --git a/app/src/main/java/com/texthip/thip/MainActivity.kt b/app/src/main/java/com/texthip/thip/MainActivity.kt
index 100ee6c1..97070bcf 100644
--- a/app/src/main/java/com/texthip/thip/MainActivity.kt
+++ b/app/src/main/java/com/texthip/thip/MainActivity.kt
@@ -5,9 +5,6 @@ import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -22,12 +19,13 @@ class MainActivity : ComponentActivity() {
         enableEdgeToEdge()
         setContent {
             ThipTheme {
-                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
+                /*Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                     Greeting(
                         name = "Android",
                         modifier = Modifier.padding(innerPadding)
                     )
-                }
+                }*/
+                MainScreen()
             }
         }
     }
diff --git a/app/src/main/java/com/texthip/thip/MainScreen.kt b/app/src/main/java/com/texthip/thip/MainScreen.kt
new file mode 100644
index 00000000..f408ea0e
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/MainScreen.kt
@@ -0,0 +1,31 @@
+package com.texthip.thip
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Scaffold
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.navigation.compose.currentBackStackEntryAsState
+import androidx.navigation.compose.rememberNavController
+import com.texthip.thip.ui.navigator.BottomNavigationBar
+import com.texthip.thip.ui.navigator.MainNavHost
+import com.texthip.thip.ui.navigator.NavBarItems
+
+@Composable
+fun MainScreen() {
+    val navController = rememberNavController()
+    val navBackStackEntry by navController.currentBackStackEntryAsState()
+    val currentRoute = navBackStackEntry?.destination?.route
+    val showBottomBar = currentRoute in NavBarItems.BarItems.map { it.route }
+
+    Scaffold(
+        bottomBar = {
+            if (showBottomBar) BottomNavigationBar(navController)
+        }
+    ) { innerPadding ->
+        Box(modifier = Modifier.padding(innerPadding)) {
+            MainNavHost (navController)
+        }
+    }
+}
\ No newline at end of file
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
new file mode 100644
index 00000000..b4e70e78
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/bookSearch/screen/BookSearchScreen.kt
@@ -0,0 +1,19 @@
+package com.texthip.thip.ui.bookSearch.screen
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavController
+
+@Composable
+fun BookSearchScreen(navController: NavController) {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(text = "Book Search Screen")
+    }
+}
\ 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
new file mode 100644
index 00000000..8f98f717
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/header/AuthorHeader.kt
@@ -0,0 +1,109 @@
+package com.texthip.thip.ui.common.header
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.Grey02
+
+@Composable
+fun AuthorHeader(
+    modifier: Modifier = Modifier,
+    profileImage: Painter?,
+    nickname: String,
+    badgeText: String,
+    onSubscribeClick: () -> Unit
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 20.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        if (profileImage != null) {
+            Image(
+                painter = profileImage,
+                contentDescription = "작성자 장르이미지",
+                modifier = Modifier
+                    .size(48.dp)
+                    .clip(CircleShape)
+            )
+        } else {
+            Box(
+                modifier = Modifier
+                    .size(48.dp)
+                    .clip(CircleShape)
+                    .background(colors.Grey)
+            )
+        }
+        Spacer(modifier = Modifier.width(8.dp))
+        Column(
+            modifier = Modifier.weight(1f)
+        ) {
+            Text(
+                text = nickname,
+                style = typography.smalltitle_sb600_s18_h24,
+                color = colors.White,
+                maxLines = 1
+            )
+            Text(
+                text = badgeText,
+                style = typography.feedcopy_r400_s14_h20,
+                color = colors.NeonGreen,
+                maxLines = 1
+            )
+        }
+
+        Box(
+            modifier = Modifier
+                .clip(RoundedCornerShape(20.dp))
+                .border(1.dp, Grey02, RoundedCornerShape(20.dp))
+                .background(Color.Transparent)
+                .clickable { onSubscribeClick() }
+                .padding(horizontal = 12.dp, vertical = 8.dp)
+        ) {
+            Text(
+                text = stringResource(R.string.subscribe),
+                style = typography.menu_m500_s14_h24,
+                color = colors.White
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewAuthorHeader() {
+    ThipTheme {
+        AuthorHeader(
+            profileImage = null,
+            nickname = "열자자제한열열자제한",
+            badgeText = "칭호칭호칭호",
+            onSubscribeClick = { println("구독") }
+        )
+    }
+}
\ 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
new file mode 100644
index 00000000..50eba01b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt
@@ -0,0 +1,127 @@
+package com.texthip.thip.ui.common.header
+
+import androidx.compose.foundation.Image
+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.fillMaxWidth
+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.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.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.painter.Painter
+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.theme.Grey
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun ProfileBar(
+    modifier: Modifier = Modifier,
+    profileImage: Painter?,
+    topText: String,
+    bottomText: String,
+    showSubscriberInfo: Boolean,
+    subscriberCount: Int = 0,
+    hoursAgo: Int = 0
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp, vertical = 12.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        if (profileImage != null) {
+            Image(
+                painter = profileImage,
+                contentDescription = "프로필 이미지",
+                modifier = Modifier
+                    .size(36.dp)
+                    .clip(CircleShape)
+            )
+        } else {
+            Box(
+                modifier = Modifier
+                    .size(36.dp)
+                    .clip(CircleShape)
+                    .background(Grey)
+            )
+        }
+        Spacer(modifier = Modifier.width(8.dp))
+        Column(modifier = Modifier.weight(1f)) {
+            Text(
+                text = topText,
+                style = typography.view_m500_s14,
+                color = colors.White
+            )
+            Text(
+                text = bottomText,
+                style = typography.info_r400_s12,
+                color = colors.NeonGreen
+            )
+        }
+        if (showSubscriberInfo) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    text = stringResource(R.string.subscriber_num,subscriberCount),
+                    style = typography.timedate_r400_s11,
+                    color = colors.Grey01
+                )
+                Spacer(modifier = Modifier.width(4.dp))
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_chevron_right),
+                    contentDescription = "화살표",
+                    modifier = Modifier.size(16.dp),
+                    tint = Color.Unspecified
+                )
+            }
+        } else {
+            Text(
+                text = stringResource(R.string.hours_ago,hoursAgo),
+                style = typography.timedate_r400_s11,
+                color = colors.Grey01
+            )
+        }
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+fun PreviewProfileBar() {
+    ThipTheme {
+        Column {
+            ProfileBar(
+                profileImage = null,
+                topText = "user.01",
+                bottomText = stringResource(R.string.influencer),
+                showSubscriberInfo = true,
+                subscriberCount = 77
+            )
+            ProfileBar(
+                profileImage = null,
+                topText = "user.04",
+                bottomText = stringResource(R.string.influencer),
+                showSubscriberInfo = false,
+                hoursAgo = 7
+            )
+        }
+    }
+}
+
diff --git a/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBarWithDate.kt b/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBarWithDate.kt
new file mode 100644
index 00000000..a9bef9eb
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBarWithDate.kt
@@ -0,0 +1,95 @@
+package com.texthip.thip.ui.common.header
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+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.fillMaxWidth
+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.material.icons.Icons
+import androidx.compose.material.icons.filled.MoreVert
+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.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun ProfileBarWithDate(
+    profileImage: Painter?,
+    nickname: String,
+    dateText: String,
+    onMenuClick: () -> Unit = {}
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp, vertical = 8.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        if (profileImage != null) {
+            Image(
+                painter = profileImage,
+                contentDescription = "프로필 이미지",
+                modifier = Modifier
+                    .size(24.dp)
+                    .clip(CircleShape)
+            )
+        } else {
+            Box(
+                modifier = Modifier
+                    .size(24.dp)
+                    .clip(CircleShape)
+                    .background(colors.Grey)
+            )
+        }
+        Spacer(modifier = Modifier.width(8.dp))
+        Column(modifier = Modifier.weight(1f)) {
+            Text(
+                text = nickname,
+                style = typography.menu_sb600_s12,
+                color = colors.White
+            )
+            Text(
+                text = dateText,
+                style = typography.timedate_r400_s11,
+                color = colors.Grey01
+            )
+        }
+        Icon(
+            painter = painterResource(R.drawable.ic_more),
+            contentDescription = "메뉴",
+            tint = Color.Unspecified,
+            modifier = Modifier
+                .size(24.dp)
+                .clickable { onMenuClick() }
+        )
+    }
+}
+@Preview(showBackground = true)
+@Composable
+fun PreviewProfileBarWithDate() {
+    ThipTheme {
+        ProfileBarWithDate(
+            profileImage = null,
+            nickname = "user.01",
+            dateText = "2025.01.12"
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/modal/DialogPopup.kt b/app/src/main/java/com/texthip/thip/ui/common/modal/DialogPopup.kt
new file mode 100644
index 00000000..e920b072
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/modal/DialogPopup.kt
@@ -0,0 +1,98 @@
+package com.texthip.thip.ui.common.modal
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+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.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
+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.buttons.ActionMediumButton
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun DialogPopup(
+    modifier: Modifier = Modifier,
+    title: String,
+    description: String,
+    onConfirm: () -> Unit,
+    onCancel: () -> Unit
+) {
+    Box(
+        modifier = modifier
+            .width(320.dp)
+            .height(182.dp)
+            .background(
+                color = colors.DarkGrey,
+                shape = RoundedCornerShape(12.dp)
+            )
+            .padding(20.dp)
+    ) {
+        Column(
+            verticalArrangement = Arrangement.SpaceBetween,
+            modifier = Modifier.fillMaxSize()
+        ) {
+            Column {
+                Text(
+                    text = title,
+                    color = colors.White,
+                    style = typography.smalltitle_m500_s18_h24,
+                )
+                Spacer(modifier = Modifier.height(12.dp))
+                Text(
+                    text = description,
+                    color = colors.White,
+                    style = typography.copy_r400_s14,
+                )
+            }
+
+            //TODO: 추후 버튼 공통 컴포넌트로 변경
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(20.dp),
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                ActionMediumButton(
+                    text = stringResource(R.string.no),
+                    contentColor = colors.White,
+                    backgroundColor = colors.Grey02,
+                    modifier = Modifier.weight(1f),
+                    onClick = {},
+                )
+                ActionMediumButton(
+                    text = stringResource(R.string.yes),
+                    contentColor = colors.White,
+                    backgroundColor = colors.Purple,
+                    modifier = Modifier.weight(1f),
+                    onClick = {},
+                )
+            }
+
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewDialogPopup() {
+    DialogPopup(
+        title = "대화창의 폐쇄형 질문입니다?",
+        description = "대화창의 디스크립션을 입력합니다. 대화창의 디스크립션을 입력합니다.",
+        onConfirm = {},
+        onCancel = {}
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/modal/InfoPopup.kt b/app/src/main/java/com/texthip/thip/ui/common/modal/InfoPopup.kt
new file mode 100644
index 00000000..8cc0290a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/modal/InfoPopup.kt
@@ -0,0 +1,125 @@
+package com.texthip.thip.ui.common.modal
+
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+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.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun InfoPopup(
+    modifier: Modifier = Modifier,
+    title: String,
+    content: String,
+    onDismiss: () -> Unit = {}
+) {
+    val scrollState = rememberScrollState()
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(colors.DarkGrey, shape = RoundedCornerShape(12.dp))
+            .padding(20.dp)
+    ) {
+        Column {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                Text(
+                    text = title,
+                    color = colors.White,
+                    style = typography.smalltitle_sb600_s16_h24
+                )
+            }
+            Spacer(modifier = Modifier.height(12.dp))
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(284.dp)
+                    .verticalScroll(scrollState)
+                    .drawVerticalScrollbar(scrollState)
+            ) {
+                Text(
+                    text = content,
+                    color = colors.White,
+                    style = typography.copy_r400_s12_h20
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewInfoPopup() {
+    val dummyText = """
+        InfoPopup프리뷰입니당!!!InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        InfoPopup프리뷰입니당!!!
+        마지막 
+    """.trimIndent()
+
+    InfoPopup(
+        title = stringResource(R.string.introduction),
+        content = dummyText,
+        onDismiss = {}
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/modal/ScrollbarUtil.kt b/app/src/main/java/com/texthip/thip/ui/common/modal/ScrollbarUtil.kt
new file mode 100644
index 00000000..6689e4eb
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/modal/ScrollbarUtil.kt
@@ -0,0 +1,42 @@
+package com.texthip.thip.ui.common.modal
+
+import androidx.compose.foundation.ScrollState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.CornerRadius
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+fun Modifier.drawVerticalScrollbar(
+    scrollState: ScrollState,
+    trackThickness: Dp = 1.dp,
+    thumbThickness: Dp = 3.dp,
+    trackColor: Color = Color.White.copy(alpha = 0.2f),
+    thumbColor: Color = Color.White.copy(alpha = 0.8f),
+): Modifier = this.then(
+    Modifier.drawBehind {
+        if (scrollState.maxValue == 0) return@drawBehind
+
+        val scrollbarHeight = size.height / 8f
+        val scrollProgress = scrollState.value.toFloat() / scrollState.maxValue
+        val scrollbarOffsetY = (size.height - scrollbarHeight) * scrollProgress
+
+        //전체 고정 바
+        drawRoundRect(
+            color = trackColor,
+            topLeft = Offset(x = size.width - trackThickness.toPx(), y = 0f),
+            size = Size(trackThickness.toPx(), size.height),
+            cornerRadius = CornerRadius(trackThickness.toPx() / 2)
+        )
+        //핸들 바
+        drawRoundRect(
+            color = thumbColor,
+            topLeft = Offset(x = size.width - thumbThickness.toPx(), y = scrollbarOffsetY),
+            size = Size(thumbThickness.toPx(), scrollbarHeight),
+            cornerRadius = CornerRadius(thumbThickness.toPx() / 2)
+        )
+    }
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/modal/SnackBar.kt b/app/src/main/java/com/texthip/thip/ui/common/modal/SnackBar.kt
new file mode 100644
index 00000000..3b1e4c03
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/modal/SnackBar.kt
@@ -0,0 +1,64 @@
+package com.texthip.thip.ui.common.modal
+
+import android.R.id.message
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun SnackBar(
+    modifier: Modifier = Modifier,
+    message: String,
+    actionText: String,
+    onActionClick: () -> Unit
+) {
+    Box(
+        modifier = modifier
+            .background(colors.DarkGrey02, shape = RoundedCornerShape(12.dp))
+            .padding(horizontal = 15.dp, vertical = 15.dp)
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Text(
+                text = message,
+                color = colors.White,
+                style = typography.view_m500_s12_h20
+            )
+            Text(
+                text = actionText,
+                color = colors.NeonGreen,
+                style = typography.menu_sb600_s12_h20,
+                modifier = Modifier.clickable { onActionClick() }
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SnackBarPreview() {
+    SnackBar(
+        message = stringResource(R.string.complete_comment),
+        actionText = stringResource(R.string.action_view_comment),
+        onActionClick = {},
+        modifier = Modifier.fillMaxWidth()
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/modal/ToolTip.kt b/app/src/main/java/com/texthip/thip/ui/common/modal/ToolTip.kt
new file mode 100644
index 00000000..183acbc1
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/modal/ToolTip.kt
@@ -0,0 +1,143 @@
+package com.texthip.thip.ui.common.modal
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+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.RoundedCornerShape
+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.Path
+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 androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+import androidx.compose.ui.platform.LocalDensity
+
+enum class ArrowPosition {
+    LEFT, CENTER, RIGHT
+}
+
+@Composable
+fun TriangleArrow(
+    modifier: Modifier = Modifier,
+    color: Color = colors.DarkGrey,
+    size: Dp = 13.dp
+) {
+    val triangleSizePx = with(LocalDensity.current) { size.toPx() }
+
+    Canvas(modifier = modifier.size(size)) {
+        val path = Path().apply {
+            moveTo(0f, triangleSizePx)
+            lineTo(triangleSizePx / 2f, 0f)
+            lineTo(triangleSizePx, triangleSizePx)
+            close()
+        }
+        drawPath(path, color)
+    }
+}
+
+@Composable
+fun PopupModal(
+    text: String,
+    modifier: Modifier = Modifier,
+    arrowPosition: ArrowPosition = ArrowPosition.RIGHT,
+    onClose: () -> Unit = {}
+) {
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+        ) {
+            val arrowModifier = when (arrowPosition) {
+                ArrowPosition.LEFT -> Modifier
+                    .align(Alignment.TopStart)
+                    .padding(start = 24.dp)
+
+                ArrowPosition.CENTER -> Modifier
+                    .align(Alignment.TopCenter)
+
+                ArrowPosition.RIGHT -> Modifier
+                    .align(Alignment.TopEnd)
+                    .padding(end = 24.dp)
+            }
+            TriangleArrow(
+                color = colors.DarkGrey,
+                modifier = arrowModifier
+            )
+        }
+
+        Box(
+            modifier = Modifier
+                .background(colors.DarkGrey, RoundedCornerShape(12.dp))
+                .padding(horizontal = 16.dp, vertical = 12.dp)
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    text = text,
+                    color = colors.NeonGreen,
+                    style = typography.info_m500_s12,
+                    modifier = Modifier.weight(1f)
+                )
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_x),
+                    contentDescription = "닫기",
+                    tint = Color.Unspecified,
+                    modifier = Modifier
+                        .size(24.dp)
+                        .clickable { onClose() }
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun PopupPrev() {
+    Column {
+        PopupModal(
+            text = stringResource(R.string.condition_of_general_review,80),
+            modifier = Modifier
+                .width(400.dp)
+                .padding(16.dp),
+            arrowPosition = ArrowPosition.LEFT
+        )
+        PopupModal(
+            text = stringResource(R.string.condition_of_general_review,80),
+            modifier = Modifier
+                .width(400.dp)
+                .padding(16.dp),
+            arrowPosition = ArrowPosition.CENTER
+        )
+        PopupModal(
+            text = stringResource(R.string.condition_of_general_review,80),
+            modifier = Modifier
+                .width(400.dp)
+                .padding(16.dp),
+            arrowPosition = ArrowPosition.RIGHT
+        )
+    }
+}
+
+
diff --git a/app/src/main/java/com/texthip/thip/ui/common/view/CountingBar.kt b/app/src/main/java/com/texthip/thip/ui/common/view/CountingBar.kt
new file mode 100644
index 00000000..3b063009
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/view/CountingBar.kt
@@ -0,0 +1,52 @@
+package com.texthip.thip.ui.common.view
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun CountingBar(
+    modifier: Modifier = Modifier,
+    count: Int
+) {
+    Box(
+        modifier = modifier
+            .background(colors.DarkGrey02, shape = RoundedCornerShape(16.dp))
+            .padding(horizontal = 16.dp, vertical = 8.dp)
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center,
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text(
+                text = stringResource(R.string.reading_user_num, count),
+                color = colors.NeonGreen,
+                style = typography.menu_r400_s14_h24
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun CountingBarPrev() {
+    CountingBar(
+        count = 200,
+        modifier = Modifier.fillMaxWidth()
+    )
+}
\ No newline at end of file
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
new file mode 100644
index 00000000..51e73f62
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt
@@ -0,0 +1,19 @@
+package com.texthip.thip.ui.feed.screen
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavController
+
+@Composable
+fun FeedScreen(navController: NavController) {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(text = "Feed Screen")
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/screen/GroupScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/screen/GroupScreen.kt
new file mode 100644
index 00000000..e33da902
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/screen/GroupScreen.kt
@@ -0,0 +1,19 @@
+package com.texthip.thip.ui.group.screen
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavController
+
+@Composable
+fun GroupScreen(navController: NavController) {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(text = "Group Screen")
+    }
+}
\ No newline at end of file
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
new file mode 100644
index 00000000..9195747e
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/myPage/screen/MyPageScreen.kt
@@ -0,0 +1,19 @@
+package com.texthip.thip.ui.myPage.screen
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavController
+
+@Composable
+fun MyPageScreen(navController: NavController) {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(text = "MyPage Screen")
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/BarItem.kt b/app/src/main/java/com/texthip/thip/ui/navigator/BarItem.kt
new file mode 100644
index 00000000..4a7f730b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/BarItem.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.ui.navigator
+
+import androidx.annotation.DrawableRes
+
+data class BarItem(
+    val title: String,
+    val route: String,
+    @DrawableRes val IconRes: Int,
+    @DrawableRes val SelectedIconRes: Int
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/BottomNavigationBar.kt b/app/src/main/java/com/texthip/thip/ui/navigator/BottomNavigationBar.kt
new file mode 100644
index 00000000..515cef2b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/BottomNavigationBar.kt
@@ -0,0 +1,93 @@
+package com.texthip.thip.ui.navigator
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+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.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.NavigationBarItemDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import androidx.navigation.compose.currentBackStackEntryAsState
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun BottomNavigationBar(navController: NavController) {
+    val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(73.dp)
+            .clip(
+                RoundedCornerShape(
+                    topStart = 12.dp,
+                    topEnd = 12.dp,
+                    bottomStart = 0.dp,
+                    bottomEnd = 0.dp
+                )
+            )
+            .background(colors.Black),
+        contentAlignment = Alignment.Center
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = 32.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            NavBarItems.BarItems.forEach { item ->
+                val isSelected = currentRoute == item.route
+                NavigationBarItem(
+                    icon = {
+                        Icon(
+                            painter = painterResource(id = if (isSelected) item.SelectedIconRes else item.IconRes),
+                            contentDescription = item.title,
+                        )
+                    },
+                    label = {
+                        Text(
+                            text = item.title,
+                            style = typography.navi_m500_s10
+                        )
+                    },
+                    selected = isSelected,
+                    onClick = {
+                        if (!isSelected) {
+                            navController.navigate(item.route) {
+                                popUpTo(navController.graph.startDestinationId) {
+                                    saveState = true
+                                }
+                                launchSingleTop = true
+                                restoreState = true
+                            }
+                        }
+                    },
+
+                    colors = NavigationBarItemDefaults.colors(
+                        indicatorColor = Color.Transparent,
+                        selectedIconColor = colors.Purple,
+                        unselectedIconColor = Color.Unspecified,
+                        selectedTextColor = colors.Purple,
+                        unselectedTextColor = Color.Unspecified
+                    )
+                )
+            }
+        }
+    }
+}
\ No newline at end of file
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
new file mode 100644
index 00000000..16787c3f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/MainNavHost.kt
@@ -0,0 +1,20 @@
+package com.texthip.thip.ui.navigator
+
+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.feed.screen.FeedScreen
+import com.texthip.thip.ui.group.screen.GroupScreen
+import com.texthip.thip.ui.myPage.screen.MyPageScreen
+
+@Composable
+fun MainNavHost(navController: NavHostController) {
+    NavHost(navController = navController, startDestination = Routes.Feed.route) {
+        composable(Routes.Feed.route) { FeedScreen(navController) }
+        composable(Routes.Group.route) { GroupScreen(navController) }
+        composable(Routes.BookSearch.route) { BookSearchScreen(navController) }
+        composable(Routes.MyPage.route) { MyPageScreen(navController) }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/NavBarItems.kt b/app/src/main/java/com/texthip/thip/ui/navigator/NavBarItems.kt
new file mode 100644
index 00000000..faf8ce59
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/NavBarItems.kt
@@ -0,0 +1,32 @@
+package com.texthip.thip.ui.navigator
+
+import com.texthip.thip.R
+
+object NavBarItems {
+    val BarItems = listOf(
+        BarItem(
+            title = "피드",
+            route = Routes.Feed.route,
+            IconRes = R.drawable.ic_feed,
+            SelectedIconRes = R.drawable.ic_feed_selected
+        ),
+        BarItem(
+            title = "모임",
+            route = Routes.Group.route,
+            IconRes = R.drawable.ic_group,
+            SelectedIconRes = R.drawable.ic_group_selected
+        ),
+        BarItem(
+            title = "검색",
+            route = Routes.BookSearch.route,
+            IconRes = R.drawable.ic_booksearch,
+            SelectedIconRes = R.drawable.ic_booksearch_selected
+        ),
+        BarItem(
+            title = "내 정보",
+            route = Routes.MyPage.route,
+            IconRes = R.drawable.ic_mypage,
+            SelectedIconRes = R.drawable.ic_mypage_selected
+        )
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/Routes.kt b/app/src/main/java/com/texthip/thip/ui/navigator/Routes.kt
new file mode 100644
index 00000000..d27920da
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/Routes.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.ui.navigator
+
+
+sealed class Routes(val route: String) {
+    object Feed : Routes("Feed")
+    object Group : Routes("Group")
+    object BookSearch : Routes("BookSearch")
+    object MyPage : Routes("MyPage")
+}
diff --git a/app/src/main/res/drawable/ic_booksearch_selected.xml b/app/src/main/res/drawable/ic_booksearch_selected.xml
new file mode 100644
index 00000000..19f60e65
--- /dev/null
+++ b/app/src/main/res/drawable/ic_booksearch_selected.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="24dp"
+    android:viewportWidth="25"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M17.745,4.006C19.386,4.06 20.989,4.512 22.412,5.323C22.546,5.4 22.661,5.506 22.747,5.635C22.832,5.763 22.886,5.909 22.905,6.061L22.912,6.179V19.014C22.912,19.187 22.865,19.357 22.778,19.507C22.69,19.657 22.564,19.781 22.412,19.868C22.26,19.955 22.087,20.001 21.912,20.001C21.736,20.001 21.564,19.955 21.412,19.868C20.195,19.175 18.816,18.81 17.412,18.81C16.007,18.81 14.628,19.175 13.412,19.868C13.26,19.955 13.087,20.001 12.912,20.001C12.736,20.001 12.564,19.955 12.412,19.868C11.24,19.2 9.916,18.837 8.564,18.811C7.212,18.786 5.875,19.099 4.678,19.722L4.352,19.9L4.249,19.943L4.2,19.959L4.089,19.984L4.029,19.995L3.912,20.001H3.87L3.759,19.989L3.683,19.974L3.575,19.943L3.449,19.888L3.354,19.833L3.264,19.766L3.205,19.711L3.131,19.631L3.068,19.543L3.045,19.507L3.013,19.447L2.969,19.346L2.954,19.298L2.927,19.189L2.917,19.129L2.914,19.08L2.912,19.014V6.179C2.912,6.005 2.958,5.834 3.045,5.684C3.133,5.534 3.26,5.41 3.412,5.323C4.834,4.512 6.437,4.06 8.079,4.006C9.72,3.952 11.35,4.298 12.824,5.013L12.912,5.056L13,5.013C14.473,4.298 16.103,3.952 17.745,4.006ZM12.912,6C12.498,6 12.162,6.336 12.162,6.75V18.25C12.162,18.664 12.497,19 12.912,19C13.326,19 13.662,18.664 13.662,18.25V6.75C13.661,6.336 13.326,6 12.912,6Z"
+      android:fillColor="#6868FF"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_feed_selected.xml b/app/src/main/res/drawable/ic_feed_selected.xml
new file mode 100644
index 00000000..e6eadd7d
--- /dev/null
+++ b/app/src/main/res/drawable/ic_feed_selected.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="24dp"
+    android:viewportWidth="25"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12.321,5.795C8.613,7.263 7.912,9.297 7.912,11C7.912,13.078 9.038,14.392 11.317,14.542C11.384,14.542 11.712,14.649 11.809,14.724C11.942,14.831 12.091,15.035 12.178,15.212C12.383,15.629 12.465,16.133 12.465,16.92C12.465,18.565 11.169,20 8.7,20C5.888,20 2.912,17.708 2.912,13.182C2.907,7.954 7.204,4.906 11.599,4.033C12.152,3.921 12.68,4.092 12.854,4.585C13.028,5.078 12.808,5.603 12.326,5.795H12.321Z"
+      android:fillColor="#6868FF"/>
+  <path
+      android:pathData="M22.321,5.795C18.613,7.263 17.912,9.297 17.912,11C17.912,13.078 19.038,14.392 21.317,14.542C21.384,14.542 21.712,14.649 21.809,14.724C21.942,14.831 22.091,15.035 22.178,15.212C22.383,15.629 22.465,16.133 22.465,16.92C22.465,18.565 21.169,20 18.7,20C15.888,20 12.912,17.708 12.912,13.182C12.906,7.954 17.204,4.906 21.599,4.033C22.152,3.921 22.68,4.092 22.854,4.585C23.028,5.078 22.808,5.603 22.326,5.795H22.321Z"
+      android:fillColor="#6868FF"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_group_selected.xml b/app/src/main/res/drawable/ic_group_selected.xml
new file mode 100644
index 00000000..128683b4
--- /dev/null
+++ b/app/src/main/res/drawable/ic_group_selected.xml
@@ -0,0 +1,20 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="24dp"
+    android:viewportWidth="25"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M13.738,9.85C14.136,9.133 14.363,8.307 14.363,7.429C14.363,6.937 14.292,6.463 14.16,6.015C14.744,5.39 15.573,5 16.492,5C18.258,5 19.69,6.439 19.69,8.214C19.69,9.989 18.258,11.429 16.492,11.429C15.32,11.429 14.295,10.795 13.738,9.85Z"
+      android:fillColor="#6868FF"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M9.294,7.5m-4,0a4,4 0,1 1,8 0a4,4 0,1 1,-8 0"
+      android:fillColor="#6868FF"/>
+  <path
+      android:pathData="M16.143,18.007C16.326,19.097 15.399,20 14.295,20C13.024,20 11.253,20 9.294,20C7.335,20 5.564,20 4.293,20C3.188,20 2.262,19.097 2.445,18.007C2.93,15.112 4.697,13 9.294,13C13.891,13 15.658,15.112 16.143,18.007Z"
+      android:fillColor="#6868FF"/>
+  <path
+      android:pathData="M17.191,19.5C17.31,19.317 17.372,19.096 17.354,18.858C17.18,16.615 16.44,14.7 14.594,13.574C15.034,13.525 15.509,13.5 16.021,13.5C20.768,13.5 22.321,15.663 22.59,18.501C22.642,19.051 22.188,19.5 21.636,19.5H17.191Z"
+      android:fillColor="#6868FF"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_mypage_selected.xml b/app/src/main/res/drawable/ic_mypage_selected.xml
new file mode 100644
index 00000000..336dc7ec
--- /dev/null
+++ b/app/src/main/res/drawable/ic_mypage_selected.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="24dp"
+    android:viewportWidth="25"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M8.294,6.892a4,3.892 0,1 0,8 0a4,3.892 0,1 0,-8 0z"
+      android:fillColor="#6868FF"/>
+  <path
+      android:pathData="M21.175,19.004C21.316,20.1 20.4,21 19.295,21C17.645,21 15.122,21 12.294,21C9.466,21 6.943,21 5.293,21C4.188,21 3.272,20.1 3.413,19.004C3.914,15.13 6.116,12.243 12.294,12.243C18.472,12.243 20.674,15.13 21.175,19.004Z"
+      android:fillColor="#6868FF"/>
+</vector>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index f8c6127d..19b1102e 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -5,6 +5,5 @@
     <color name="purple_700">#FF3700B3</color>
     <color name="teal_200">#FF03DAC5</color>
     <color name="teal_700">#FF018786</color>
-    <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 46514a2b..a85018cb 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -1,6 +1,21 @@
 <resources>
     <string name="app_name">Thip</string>
 
+    <!--   view 컴포넌트    -->
+    <string name="reading_user_num">🔥%d명이 읽기에 참여중이에요!🔥</string>
+
+    <!--   header 컴포넌트    -->
+    <string name="subscribe">구독</string>
+    <string name="subscriber_num">%02d명이 구독중</string>
+    <string name="influencer">공식 인플루언서</string>
+    <string name="hours_ago">%d시간 전</string>
+
+    <!--   modal 컴포넌트    -->
+    <string name="condition_of_general_review">독서진행도 %d%%부터 총평을 작성할 수 있습니다.</string>
+    <string name="complete_comment">댓글 작성이 완료되었습니다.</string>
+    <string name="action_view_comment">보러가기</string>
+    <string name="introduction">소개</string>
+
     <!--    mock data    -->
     <string name="book_title">책이름을입력해주세요책이름을</string>
     <string name="book_author">한한강한강한강한ㅇㅇㄴㄴㅁ강</string>
@@ -20,7 +35,7 @@
     <string name="character_relationship">인물관계도 보기</string>
     <string name="write_record">기록 작성</string>
     <string name="create_vote">투표 생성</string>
-    
+
     <!--    카드 컴포넌트    -->
     <string name="time_ago">시간 전</string>
     <string name="group">모임</string>
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 916e7926..261b2b00 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -8,6 +8,7 @@ espressoCore = "3.6.1"
 lifecycleRuntimeKtx = "2.8.7"
 activityCompose = "1.10.1"
 composeBom = "2024.09.00"
+navigationCompose = "2.9.0"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -24,6 +25,7 @@ androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-toolin
 androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
 androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
 androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
+androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigationCompose" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }