diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index 682150d..5bb85a5 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -80,6 +80,7 @@ dependencies {
     implementation(libs.androidx.compose.material3)
     implementation(libs.androidx.compose.foundation.layout)
     implementation(libs.androidx.compose.runtime)
+    implementation(libs.androidx.compose.ui)
 
     // Testing
     testImplementation(libs.junit)
diff --git a/app/src/main/java/sopt/org/starbucks/ui/home/HomeScreen.kt b/app/src/main/java/sopt/org/starbucks/ui/home/HomeScreen.kt
index e2756b9..a803cec 100644
--- a/app/src/main/java/sopt/org/starbucks/ui/home/HomeScreen.kt
+++ b/app/src/main/java/sopt/org/starbucks/ui/home/HomeScreen.kt
@@ -1,9 +1,43 @@
 package sopt.org.starbucks.ui.home
 
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+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.lazy.LazyColumn
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+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.draw.clip
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import sopt.org.starbucks.R
+import sopt.org.starbucks.core.designsystem.theme.StarbucksTheme
+import sopt.org.starbucks.ui.home.component.ChipSection
+import sopt.org.starbucks.ui.home.component.MainBanner
+import sopt.org.starbucks.ui.home.component.NewsContent
+import sopt.org.starbucks.ui.home.component.OnlineStoreCard
+import sopt.org.starbucks.ui.home.component.QuickOrderHeader
+import sopt.org.starbucks.ui.home.component.QuickOrderList
+import sopt.org.starbucks.ui.home.component.QuickOrderTab
+import sopt.org.starbucks.ui.home.component.RecommendMenuList
+import sopt.org.starbucks.ui.home.component.SectionHeader
+import sopt.org.starbucks.ui.home.component.SectionType
+import sopt.org.starbucks.ui.home.component.type.OnlineStoreType
 
 @Composable
 fun HomeRoute(paddingValues: PaddingValues) {
@@ -14,4 +48,117 @@ fun HomeRoute(paddingValues: PaddingValues) {
 
 @Composable
 fun HomeScreen(modifier: Modifier = Modifier) {
+    var selectedTab by rememberSaveable { mutableStateOf(QuickOrderTab.MY_MENU) }
+
+    LazyColumn(
+        modifier = modifier
+            .fillMaxSize()
+            .background(StarbucksTheme.colors.white),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        item {
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(240.dp)
+            ) {
+                MainBanner(
+                    modifier = Modifier.matchParentSize(),
+                    line1 = "미국에서 온 케이크 팝과",
+                    line2 = "사탕 같은 시간을 보내요"
+                )
+
+                ChipSection(
+                    modifier = Modifier
+                        .align(Alignment.BottomStart)
+                        .offset(y = (-37).dp)
+                        .padding(start = 22.dp)
+                )
+            }
+        }
+
+        item {
+            QuickOrderHeader(
+                selectedTab = selectedTab,
+                onTabSelected = { selectedTab = it }
+            )
+        }
+
+        item {
+            QuickOrderList()
+        }
+
+        item {
+            Column {
+                SectionHeader(
+                    type = SectionType.RECOMMEND_MENU,
+                    title = "가요이님을 위한 추천메뉴",
+                    subtitle = "최근 주문과 취향을 바탕으로, 지금 딱 어울리는 추천 메뉴를 \n준비했어요✨"
+                )
+                RecommendMenuList()
+            }
+        }
+
+        item {
+            Image(
+                painter = painterResource(R.drawable.img_poster),
+                contentDescription = null,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 16.dp)
+                    .clip(RoundedCornerShape(16.dp))
+            )
+        }
+
+        item {
+            Column {
+                SectionHeader(
+                    type = SectionType.ONLINE_STORE,
+                    title = "STARBUCKS ONLINE STORE"
+                )
+
+                Spacer(modifier = Modifier.height(6.dp))
+
+                OnlineStoreCard(
+                    onlineStoreType = OnlineStoreType.SSGDAY,
+                    modifier = Modifier
+                        .padding(horizontal = 16.dp)
+                )
+                Spacer(modifier = Modifier.height(8.dp))
+                OnlineStoreCard(
+                    onlineStoreType = OnlineStoreType.HEART,
+                    modifier = Modifier
+                        .padding(horizontal = 16.dp)
+                )
+            }
+        }
+
+        item {
+            Column {
+                SectionHeader(
+                    type = SectionType.WHATS_NEW,
+                    title = "What's New",
+                    onSeeAllClick = { }
+                )
+
+                Spacer(modifier = Modifier.height(6.dp))
+
+                NewsContent()
+            }
+        }
+
+        item {
+            Spacer(modifier = Modifier.height(32.dp))
+        }
+    }
+}
+
+@Preview(
+    showBackground = true
+)
+@Composable
+private fun HomeScreenPreview() {
+    StarbucksTheme {
+        HomeScreen()
+    }
 }
diff --git a/app/src/main/java/sopt/org/starbucks/ui/home/component/Chip.kt b/app/src/main/java/sopt/org/starbucks/ui/home/component/Chip.kt
index 3466854..3e91432 100644
--- a/app/src/main/java/sopt/org/starbucks/ui/home/component/Chip.kt
+++ b/app/src/main/java/sopt/org/starbucks/ui/home/component/Chip.kt
@@ -12,8 +12,8 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyRow
 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
@@ -32,6 +32,50 @@ sealed interface ChipStyle {
     data object GreenOutline : ChipStyle
 }
 
+@Composable
+fun ChipSection(modifier: Modifier = Modifier) {
+    LazyRow(
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        modifier = modifier
+    ) {
+        item {
+            Chip(
+                style = ChipStyle.GreenOutline,
+                icon = R.drawable.ic_green_star,
+                text = "Green",
+                trailingText = "2",
+                textColor = StarbucksTheme.colors.gray600,
+                trailingTextColor = StarbucksTheme.colors.green500,
+                showNewTag = true
+            )
+        }
+
+        item {
+            Chip(
+                style = ChipStyle.White,
+                icon = R.drawable.ic_coupon,
+                text = "Coupon"
+            )
+        }
+
+        item {
+            Chip(
+                style = ChipStyle.White,
+                icon = R.drawable.ic_pay2,
+                text = "Pay"
+            )
+        }
+
+        item {
+            Chip(
+                style = ChipStyle.GreenOutline,
+                icon = R.drawable.ic_buddy_pass,
+                text = "Buddy Pass"
+            )
+        }
+    }
+}
+
 @Composable
 fun Chip(
     modifier: Modifier = Modifier,
@@ -68,33 +112,29 @@ fun Chip(
             .noRippleClickable { onClick() }
     ) {
         Row(
-            modifier = modifier
+            modifier = Modifier
                 .background(backgroundColor, shape)
                 .then(borderStroke?.let { Modifier.border(it, shape) } ?: Modifier)
-                .padding(horizontal = 15.dp, vertical = 10.dp),
+                .padding(horizontal = 20.dp, vertical = 10.dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
-            // 아이콘 + 텍스트 간격 10dp
             Row(
                 verticalAlignment = Alignment.CenterVertically,
                 horizontalArrangement = Arrangement.spacedBy(10.dp)
             ) {
                 icon?.let {
-                    Icon(
+                    Image(
                         painter = painterResource(id = it),
                         contentDescription = null,
-                        tint = Color.Unspecified,
                         modifier = Modifier.size(19.dp)
                     )
                 }
-
                 Text(
                     text = text,
                     style = StarbucksTheme.typography.captionRegular14,
                     color = finalTextColor
                 )
             }
-            // trailingText는 오른쪽, 앞 간격 15dp
             trailingText?.let {
                 Text(
                     text = it,
@@ -139,7 +179,9 @@ fun ChipPreview() {
                 icon = R.drawable.ic_green_star,
                 text = "Green",
                 trailingText = "2",
-                showNewTag = true
+                showNewTag = true,
+                textColor = StarbucksTheme.colors.gray600,
+                trailingTextColor = StarbucksTheme.colors.green500
             )
 
             Chip(
diff --git a/app/src/main/java/sopt/org/starbucks/ui/home/component/QuickOrderHeader.kt b/app/src/main/java/sopt/org/starbucks/ui/home/component/Header.kt
similarity index 53%
rename from app/src/main/java/sopt/org/starbucks/ui/home/component/QuickOrderHeader.kt
rename to app/src/main/java/sopt/org/starbucks/ui/home/component/Header.kt
index c590b3a..1c5cbc2 100644
--- a/app/src/main/java/sopt/org/starbucks/ui/home/component/QuickOrderHeader.kt
+++ b/app/src/main/java/sopt/org/starbucks/ui/home/component/Header.kt
@@ -1,9 +1,11 @@
 package sopt.org.starbucks.ui.home.component
 
 import androidx.compose.foundation.layout.Arrangement
+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
@@ -25,15 +27,22 @@ import sopt.org.starbucks.core.util.noRippleClickable
 
 enum class QuickOrderTab { MY_MENU, RECENT_MENU }
 
+enum class SectionType {
+    ONLINE_STORE,
+    WHATS_NEW,
+    RECOMMEND_MENU
+}
+
 @Composable
 fun QuickOrderHeader(
     selectedTab: QuickOrderTab,
-    onTabSelected: (QuickOrderTab) -> Unit
+    onTabSelected: (QuickOrderTab) -> Unit,
+    modifier: Modifier = Modifier
 ) {
     Row(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxWidth()
-            .padding(horizontal = 16.dp, vertical = 10.dp),
+            .padding(horizontal = 16.dp),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.SpaceBetween
     ) {
@@ -44,7 +53,8 @@ fun QuickOrderHeader(
         )
 
         Row(
-            verticalAlignment = Alignment.CenterVertically
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(15.dp)
         ) {
             Row(
                 modifier = Modifier.noRippleClickable {
@@ -52,13 +62,14 @@ fun QuickOrderHeader(
                 },
                 verticalAlignment = Alignment.CenterVertically
             ) {
-                Icon(
-                    painter = painterResource(R.drawable.ic_pencil_11),
-                    contentDescription = null,
-                    tint = StarbucksTheme.colors.black,
-                    modifier = Modifier.size(11.dp)
-                )
-
+                if (selectedTab == QuickOrderTab.MY_MENU) {
+                    Icon(
+                        painter = painterResource(R.drawable.ic_pencil_11),
+                        contentDescription = null,
+                        tint = StarbucksTheme.colors.black,
+                        modifier = Modifier.size(11.dp)
+                    )
+                }
                 Spacer(modifier = Modifier.width(5.dp))
 
                 Text(
@@ -76,8 +87,6 @@ fun QuickOrderHeader(
                 )
             }
 
-            Spacer(modifier = Modifier.width(15.dp))
-
             Text(
                 text = "최근메뉴",
                 style = if (selectedTab == QuickOrderTab.RECENT_MENU) {
@@ -98,6 +107,51 @@ fun QuickOrderHeader(
     }
 }
 
+@Composable
+fun SectionHeader(
+    type: SectionType,
+    title: String,
+    modifier: Modifier = Modifier,
+    subtitle: String? = null,
+    onSeeAllClick: () -> Unit = { }
+) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 24.dp, vertical = 10.dp)
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Text(
+                text = title,
+                style = StarbucksTheme.typography.headSemiBold18,
+                color = StarbucksTheme.colors.gray900
+            )
+
+            if (type == SectionType.WHATS_NEW) {
+                Text(
+                    text = "See all",
+                    style = StarbucksTheme.typography.bodySemiBold13,
+                    color = StarbucksTheme.colors.green500,
+                    modifier = Modifier.noRippleClickable { onSeeAllClick() }
+                )
+            }
+        }
+
+        subtitle?.let {
+            Spacer(modifier = Modifier.height(6.dp))
+            Text(
+                text = it,
+                style = StarbucksTheme.typography.captionRegular13,
+                color = StarbucksTheme.colors.gray700
+            )
+        }
+    }
+}
+
 @Preview(showBackground = true)
 @Composable
 fun QuickOrderHeaderPreview() {
@@ -106,7 +160,37 @@ fun QuickOrderHeaderPreview() {
 
         QuickOrderHeader(
             selectedTab = selectedTab,
-            onTabSelected = { selectedTab = it }
+            onTabSelected = { selectedTab = it },
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 10.dp)
         )
     }
 }
+
+@Preview(showBackground = true)
+@Composable
+private fun SectionHeaderPreview() {
+    SectionHeader(
+        type = SectionType.ONLINE_STORE,
+        title = "STARBUCKS ONLINE STORE"
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun SectionHeaderPreview2() {
+    SectionHeader(
+        type = SectionType.WHATS_NEW,
+        title = "What's New",
+        onSeeAllClick = { }
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun SectionHeaderPreview3() {
+    SectionHeader(
+        type = SectionType.RECOMMEND_MENU,
+        title = "가요이님을 위한 추천메뉴",
+        subtitle = "최근 주문과 취향을 바탕으로, 지금 딱 어울리는 추천 메뉴를 \n준비했어요✨"
+    )
+}
diff --git a/app/src/main/java/sopt/org/starbucks/ui/home/component/MainBanner.kt b/app/src/main/java/sopt/org/starbucks/ui/home/component/MainBanner.kt
index b9a9fd2..3a32957 100644
--- a/app/src/main/java/sopt/org/starbucks/ui/home/component/MainBanner.kt
+++ b/app/src/main/java/sopt/org/starbucks/ui/home/component/MainBanner.kt
@@ -4,13 +4,13 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 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.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
@@ -28,7 +28,7 @@ fun MainBanner(
     Box(
         modifier = modifier
             .fillMaxWidth()
-            .height(240.dp)
+            .aspectRatio(360f / 240f)
     ) {
         Image(
             painter = painterResource(R.drawable.img_banner),
@@ -38,22 +38,22 @@ fun MainBanner(
         )
         Column(
             modifier = Modifier
-                .fillMaxSize()
-                .padding(top = 69.dp, start = 22.dp),
-            verticalArrangement = Arrangement.Top
+                .matchParentSize()
+                .padding(start = 22.dp, top = 69.dp),
+            verticalArrangement = Arrangement.spacedBy(7.dp, Alignment.Top)
         ) {
             Text(
                 text = line1,
                 style = StarbucksTheme.typography.headBold21,
-                color = StarbucksTheme.colors.black
+                color = StarbucksTheme.colors.black,
+                modifier = Modifier.padding(end = 16.dp)
             )
 
-            Spacer(modifier = Modifier.height(7.dp))
-
             Text(
                 text = line2,
                 style = StarbucksTheme.typography.headBold21,
-                color = StarbucksTheme.colors.black
+                color = StarbucksTheme.colors.black,
+                modifier = Modifier.padding(end = 16.dp)
             )
         }
     }
diff --git a/app/src/main/java/sopt/org/starbucks/ui/home/component/NewsContent.kt b/app/src/main/java/sopt/org/starbucks/ui/home/component/NewsContent.kt
index 5bb25af..f664e07 100644
--- a/app/src/main/java/sopt/org/starbucks/ui/home/component/NewsContent.kt
+++ b/app/src/main/java/sopt/org/starbucks/ui/home/component/NewsContent.kt
@@ -4,6 +4,7 @@ import androidx.annotation.DrawableRes
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -24,7 +25,8 @@ import sopt.org.starbucks.core.designsystem.theme.StarbucksTheme
 fun NewsContent(modifier: Modifier = Modifier) {
     LazyRow(
         modifier = modifier.fillMaxWidth(),
-        horizontalArrangement = Arrangement.spacedBy(10.dp)
+        horizontalArrangement = Arrangement.spacedBy(10.dp),
+        contentPadding = PaddingValues(horizontal = 16.dp)
     ) {
         item {
             NewsItem(
diff --git a/app/src/main/java/sopt/org/starbucks/ui/home/component/OnlineStoreCard.kt b/app/src/main/java/sopt/org/starbucks/ui/home/component/OnlineStoreCard.kt
index bbdff5f..3e1eeb8 100644
--- a/app/src/main/java/sopt/org/starbucks/ui/home/component/OnlineStoreCard.kt
+++ b/app/src/main/java/sopt/org/starbucks/ui/home/component/OnlineStoreCard.kt
@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -62,6 +63,7 @@ fun OnlineStoreCard(
 
     Box(
         modifier = modifier
+            .fillMaxWidth()
             .background(
                 color = backgroundColor,
                 shape = RoundedCornerShape(12.dp)
@@ -114,3 +116,13 @@ private fun OnlineStoreCardPreview() {
         )
     }
 }
+
+@Preview
+@Composable
+private fun OnlineStoreCardPreview2() {
+    StarbucksTheme {
+        OnlineStoreCard(
+            onlineStoreType = OnlineStoreType.HEART
+        )
+    }
+}
diff --git a/app/src/main/java/sopt/org/starbucks/ui/home/component/QuickOrderItem.kt b/app/src/main/java/sopt/org/starbucks/ui/home/component/QuickOrder.kt
similarity index 67%
rename from app/src/main/java/sopt/org/starbucks/ui/home/component/QuickOrderItem.kt
rename to app/src/main/java/sopt/org/starbucks/ui/home/component/QuickOrder.kt
index 2060a8f..19dedc9 100644
--- a/app/src/main/java/sopt/org/starbucks/ui/home/component/QuickOrderItem.kt
+++ b/app/src/main/java/sopt/org/starbucks/ui/home/component/QuickOrder.kt
@@ -5,6 +5,7 @@ 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.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -12,6 +13,8 @@ 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.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
@@ -25,25 +28,65 @@ 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.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import sopt.org.starbucks.R
 import sopt.org.starbucks.core.designsystem.theme.StarbucksTheme
 import sopt.org.starbucks.core.util.noRippleClickable
 
+data class QuickOrderUiModel(
+    val id: Int,
+    val title: String,
+    val option: String,
+    val imageRes: Int
+)
+
+// 샘플 데이터 - > 삭제 예정
+val sampleQuickOrderList = listOf(
+    QuickOrderUiModel(
+        id = 1,
+        title = "상큼발랄 프레셔",
+        option = "ICED | Tall | 바닐라 시럽2 | 로즈마리 없이 | 얼음 적게 | 일반 휘핑 많이 | 핑크 리치 보바 없이",
+        imageRes = R.drawable.img_sample_drink
+    ),
+    QuickOrderUiModel(
+        id = 2,
+        title = "나의 아메리카노",
+        option = "ICED | Tall | 에스프레소 5샷",
+        imageRes = R.drawable.img_sample_drink
+    )
+)
+
+@Composable
+fun QuickOrderList(modifier: Modifier = Modifier) {
+    LazyRow(
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+        contentPadding = PaddingValues(horizontal = 16.dp),
+        modifier = modifier
+    ) {
+        items(sampleQuickOrderList) { item ->
+            QuickOrderItem(
+                item = item
+            )
+        }
+
+        item {
+            QuickOrderRegisterItem()
+        }
+    }
+}
+
 @Composable
 fun QuickOrderItem(
-    title: String,
-    option: String,
-    option2: String,
-    imageRes: Int,
+    item: QuickOrderUiModel,
     modifier: Modifier = Modifier
 ) {
-    var isFavorite by rememberSaveable { mutableStateOf(false) }
+    var isFavorite by rememberSaveable { mutableStateOf(true) }
 
     Box(
         modifier = modifier
-            .size(width = 255.dp, height = 144.dp)
+            .width(255.dp)
             .clip(RoundedCornerShape(12.dp))
             .background(StarbucksTheme.colors.gray100)
     ) {
@@ -67,66 +110,49 @@ fun QuickOrderItem(
                         StarbucksTheme.colors.gray400
                     },
                     modifier = Modifier
-                        .padding(start = 2.dp, end = 1.dp)
-                        .padding(vertical = 2.dp)
+                        .padding(2.dp)
                         .noRippleClickable { isFavorite = !isFavorite }
                 )
             }
 
-            // 이미지 + 제목 + 옵션
             Row(
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(start = 8.dp),
                 verticalAlignment = Alignment.Top
             ) {
-                // 음료 이미지
                 Image(
-                    painter = painterResource(imageRes),
+                    painter = painterResource(item.imageRes),
                     contentDescription = null,
                     modifier = Modifier.size(50.dp)
                 )
 
                 Spacer(modifier = Modifier.width(12.dp))
 
-                // 제목 + 옵션
                 Column(
                     modifier = Modifier
                         .weight(1f)
                         .padding(top = 2.dp, end = 16.dp)
                 ) {
                     Text(
-                        text = title,
+                        text = item.title,
                         style = StarbucksTheme.typography.headSemiBold12,
                         color = StarbucksTheme.colors.black
                     )
 
                     Spacer(modifier = Modifier.height(4.dp))
 
-                    Row(
-                        verticalAlignment = Alignment.CenterVertically
-                    ) {
-                        Text(
-                            text = option,
-                            style = StarbucksTheme.typography.captionRegular12,
-                            color = StarbucksTheme.colors.gray600
-                        )
-                        Text(
-                            text = " | ",
-                            style = StarbucksTheme.typography.captionBold11,
-                            color = StarbucksTheme.colors.gray600
-                        )
-                        Text(
-                            text = option2,
-                            style = StarbucksTheme.typography.captionRegular12,
-                            color = StarbucksTheme.colors.gray600
-                        )
-                    }
+                    Text(
+                        text = item.option,
+                        style = StarbucksTheme.typography.captionRegular12,
+                        color = StarbucksTheme.colors.gray600,
+                        maxLines = 2,
+                        overflow = TextOverflow.Ellipsis
+                    )
                 }
             }
 
-            // 구분선
-            Spacer(modifier = Modifier.height(20.dp))
+            Spacer(modifier = Modifier.height(16.dp))
 
             Box(
                 modifier = Modifier
@@ -135,24 +161,23 @@ fun QuickOrderItem(
                     .background(StarbucksTheme.colors.gray200)
             )
 
-            Spacer(modifier = Modifier.height(10.dp))
+            Spacer(modifier = Modifier.height(12.dp))
 
-            //  하단 버튼 영역
             Row(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(start = 14.dp, bottom = 10.dp, end = 10.dp),
+                    .padding(start = 14.dp, end = 10.dp, bottom = 14.dp),
                 horizontalArrangement = Arrangement.SpaceBetween,
                 verticalAlignment = Alignment.CenterVertically
             ) {
-                // 매장 설정 -> 아이콘 + 텍스트
                 Row(verticalAlignment = Alignment.CenterVertically) {
                     Icon(
-                        painter = painterResource(id = R.drawable.ic_location),
+                        painter = painterResource(R.drawable.ic_location),
                         contentDescription = null,
                         tint = StarbucksTheme.colors.brown,
                         modifier = Modifier.size(24.dp)
                     )
+
                     Text(
                         text = "매장을 설정 하세요.",
                         style = StarbucksTheme.typography.captionRegular12Underline,
@@ -160,13 +185,12 @@ fun QuickOrderItem(
                     )
                 }
 
-                // 바로 주문하기 버튼
                 Box(
                     modifier = Modifier
                         .clip(RoundedCornerShape(44.dp))
                         .background(Color.Black)
-                        .noRippleClickable {}
                         .padding(horizontal = 9.dp, vertical = 5.dp)
+                        .noRippleClickable {}
                 ) {
                     Text(
                         text = "바로 주문하기",
@@ -179,15 +203,17 @@ fun QuickOrderItem(
     }
 }
 
-@Preview(showBackground = true)
+@Preview
 @Composable
 private fun QuickOrderItemPreview() {
     StarbucksTheme {
         QuickOrderItem(
-            title = "나만의 아이스 핑크 팝\n캐모마일 릴렉서",
-            option = "ICED",
-            option2 = "Tall",
-            imageRes = R.drawable.img_sample_drink
+            item = QuickOrderUiModel(
+                id = 1,
+                title = "돌체 콜드 브루",
+                option = "톨 | 아이스 | 돌체 시럽 추가",
+                imageRes = R.drawable.img_sample_drink
+            )
         )
     }
 }
diff --git a/app/src/main/java/sopt/org/starbucks/ui/home/component/QuickOrderRegisterItem.kt b/app/src/main/java/sopt/org/starbucks/ui/home/component/QuickOrderRegisterItem.kt
index d2a4662..b49a735 100644
--- a/app/src/main/java/sopt/org/starbucks/ui/home/component/QuickOrderRegisterItem.kt
+++ b/app/src/main/java/sopt/org/starbucks/ui/home/component/QuickOrderRegisterItem.kt
@@ -7,17 +7,21 @@ 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.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.draw.clip
 import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.CornerRadius
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.PathEffect
 import androidx.compose.ui.graphics.drawscope.Stroke
@@ -37,58 +41,67 @@ fun QuickOrderRegisterItem(
 
     Box(
         modifier = modifier
-            .background(StarbucksTheme.colors.transparent)
+            .width(255.dp)
+            .height(144.dp)
+            .padding(1.dp)
             .drawBehind {
                 val stroke = Stroke(
                     width = 1.dp.toPx(),
                     pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
                 )
-
                 drawRoundRect(
                     color = borderColor,
-                    size = this.size,
-                    cornerRadius = androidx.compose.ui.geometry
-                        .CornerRadius(12.dp.toPx(), 12.dp.toPx()),
+                    size = size,
+                    cornerRadius = CornerRadius(12.dp.toPx()),
                     style = stroke
                 )
-            }.size(width = 255.dp, height = 144.dp)
+            }.clip(RoundedCornerShape(12.dp)) // ← clip을 뒤에 적용!
+            .background(StarbucksTheme.colors.white)
     ) {
         Column(
-            modifier = Modifier.fillMaxWidth()
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(vertical = 12.dp),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
         ) {
-            // 음료 컵 이미지 + 안내 텍스트
             Row(
                 modifier = Modifier
-                    .padding(top = 18.dp, start = 27.dp),
-                verticalAlignment = Alignment.Top,
-                horizontalArrangement = Arrangement.spacedBy(20.05.dp)
+                    .fillMaxWidth()
+                    .padding(start = 8.dp),
+                verticalAlignment = Alignment.Top
             ) {
                 Image(
                     painter = painterResource(id = R.drawable.img_quick_order),
                     contentDescription = null,
-                    modifier = Modifier
-                        .height(50.dp)
-                        .width(25.dp)
-                        .padding(top = 3.52.dp)
+                    modifier = Modifier.size(50.dp)
                 )
 
-                Column {
+                Spacer(modifier = Modifier.width(12.dp))
+
+                Column(
+                    modifier = Modifier
+                        .weight(1f)
+                        .padding(end = 16.dp)
+                ) {
                     Text(
                         text = "나만의 메뉴를 등록하고\nHome에서 빠르게 주문해\n보세요 ☺️",
                         style = StarbucksTheme.typography.headSemiBold12,
                         color = StarbucksTheme.colors.black
                     )
-                    Spacer(modifier = Modifier.height(2.dp))
+
+                    Spacer(modifier = Modifier.height(4.dp))
+
                     Text(
-                        text = "음료,푸드만 주문 가능합니다",
+                        text = "음료, 푸드만 주문 가능합니다",
                         style = StarbucksTheme.typography.captionRegular12,
-                        color = StarbucksTheme.colors.gray600
+                        color = StarbucksTheme.colors.gray600,
+                        maxLines = 1
                     )
                 }
             }
 
-            // 구분선
-            Spacer(modifier = Modifier.height(16.dp))
+            Spacer(modifier = Modifier.height(20.dp))
 
             Box(
                 modifier = Modifier
@@ -99,21 +112,25 @@ fun QuickOrderRegisterItem(
 
             Spacer(modifier = Modifier.height(10.dp))
 
-            // 하단 원형 버튼
-            Icon(
-                painter = painterResource(id = R.drawable.btn_add_quick_order),
-                contentDescription = null,
-                tint = Color.Unspecified,
+            Row(
                 modifier = Modifier
-                    .align(Alignment.CenterHorizontally)
-                    .size(26.dp)
-                    .noRippleClickable { onClick() }
-            )
+                    .fillMaxWidth(),
+                horizontalArrangement = Arrangement.Center
+            ) {
+                Icon(
+                    painter = painterResource(id = R.drawable.btn_add_quick_order),
+                    contentDescription = null,
+                    tint = Color.Unspecified,
+                    modifier = Modifier
+                        .size(26.dp)
+                        .noRippleClickable { onClick() }
+                )
+            }
         }
     }
 }
 
-@Preview(showBackground = true)
+@Preview()
 @Composable
 private fun QuickOrderRegisterItemPreview() {
     StarbucksTheme {
diff --git a/app/src/main/java/sopt/org/starbucks/ui/home/component/RecommendMenuList.kt b/app/src/main/java/sopt/org/starbucks/ui/home/component/RecommendMenuList.kt
index 74aceab..afd65e4 100644
--- a/app/src/main/java/sopt/org/starbucks/ui/home/component/RecommendMenuList.kt
+++ b/app/src/main/java/sopt/org/starbucks/ui/home/component/RecommendMenuList.kt
@@ -3,6 +3,7 @@ package sopt.org.starbucks.ui.home.component
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -27,7 +28,8 @@ fun RecommendMenuList(modifier: Modifier = Modifier) {
     val menus = RecommendMenuData.menuList
     LazyRow(
         modifier = modifier.fillMaxWidth(),
-        horizontalArrangement = Arrangement.spacedBy(8.dp)
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        contentPadding = PaddingValues(horizontal = 16.dp)
     ) {
         items(
             items = menus,
diff --git a/app/src/main/res/drawable/img_poster.png b/app/src/main/res/drawable/img_poster.png
new file mode 100644
index 0000000..362304f
Binary files /dev/null and b/app/src/main/res/drawable/img_poster.png differ
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index b7e8ccd..2979e7b 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -24,6 +24,7 @@ material3 = "1.4.0"
 foundationLayout = "1.9.4"
 runtime = "1.9.4"
 kotlinxCollectionsImmutable = "0.3.5"
+ui = "1.9.5"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -55,6 +56,7 @@ androidx-compose-material3 = { group = "androidx.compose.material3", name = "mat
 androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "foundationLayout" }
 androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "runtime" }
 kotlinx-collections-immutable = { module = "org.jetbrains.kotlinx:kotlinx-collections-immutable", version.ref = "kotlinxCollectionsImmutable" }
+androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "ui" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }