diff --git a/app/src/main/java/com/juceliodev/fooddeliverymyapplication/ui/screen/components/FlavorSection.kt b/app/src/main/java/com/juceliodev/fooddeliverymyapplication/ui/screen/components/FlavorSection.kt
new file mode 100644
index 0000000..0871ae8
--- /dev/null
+++ b/app/src/main/java/com/juceliodev/fooddeliverymyapplication/ui/screen/components/FlavorSection.kt
@@ -0,0 +1,121 @@
+package com.juceliodev.fooddeliverymyapplication.ui.screen.components
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.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.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.juceliodev.fooddeliverymyapplication.data.ProductFlavorState
+import com.juceliodev.fooddeliverymyapplication.ui.theme.AppTheme
+
+@Composable
+fun FlavorSection(
+    modifier: Modifier = Modifier,
+    data: List<ProductFlavorState>
+) {
+    Column(
+        modifier = modifier
+    ) {
+        SectionHeader(
+            title = "Add More Flavor",
+            emotion = "\uD83E\uDD29"
+        )
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(vertical = 16.dp),
+            horizontalArrangement = Arrangement.spacedBy(16.dp)
+        ) {
+            data.onEach { item ->
+                ProductFlavorItem(
+                    state = item,
+                    modifier = Modifier.weight(weight = 1f)
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun SectionHeader(
+    modifier: Modifier = Modifier,
+    title: String,
+    emotion: String
+) {
+    Row(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.spacedBy(4.dp)
+    ) {
+        Text(
+            text = title,
+            style = AppTheme.typography.titleLarge,
+            color = AppTheme.colors.onBackground
+        )
+        Text(
+            text = emotion,
+            style = AppTheme.typography.titleLarge
+        )
+    }
+}
+
+@Composable
+private fun ProductFlavorItem(
+    modifier: Modifier = Modifier,
+    state: ProductFlavorState
+) {
+    Box(
+        modifier = modifier
+            .shadow(
+                elevation = 10.dp,
+                spotColor = Color.LightGray,
+                shape = RoundedCornerShape(28.dp)
+            )
+            .background(
+                shape = RoundedCornerShape(28.dp),
+                color = AppTheme.colors.regularSurface
+            )
+    ) {
+        Column(
+            modifier = Modifier.padding(
+                vertical = 20.dp,
+                horizontal = 8.dp
+            ),
+            verticalArrangement = Arrangement.spacedBy(8.dp),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Image(
+                painter = painterResource(id = state.imgRes),
+                contentDescription = null,
+                contentScale = ContentScale.FillWidth,
+                modifier = Modifier.fillMaxWidth()
+            )
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Text(
+                    text = state.name,
+                    style = AppTheme.typography.bodySmall,
+                    color = AppTheme.colors.onRegularSurface
+                )
+                Text(
+                    text = "+${state.price}",
+                    style = AppTheme.typography.bodySmall,
+                    color = AppTheme.colors.onRegularSurface
+                )
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index c784fee..a77c7b0 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -1,31 +1,28 @@
 [versions]
-agp = "8.6.0"
+agp = "8.5.2"
 kotlin = "1.9.0"
-coreKtx = "1.13.1"
-junit = "4.13.2"
-junitVersion = "1.2.1"
-espressoCore = "3.6.1"
-lifecycleRuntimeKtx = "2.8.6"
-activityCompose = "1.9.2"
-composeBom = "2024.04.01"
+androidx-core = "1.13.1"
+androidx-runtime = "2.8.5"
+compose-activity = "1.9.2"
+compose-bom = "2024.09.00"
+compose-constraint-layout = "1.0.1"
 
 [libraries]
-androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
-junit = { group = "junit", name = "junit", version.ref = "junit" }
-androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
-androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
-androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
-androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
-androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
-androidx-ui = { group = "androidx.compose.ui", name = "ui" }
-androidx-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
-androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
-androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
-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-core = { group = "androidx.core", name = "core-ktx", version.ref = "androidx-core" }
+androidx-lifecycle = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "androidx-runtime" }
 androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
+compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "compose-bom" }
+compose-ui = { group = "androidx.compose.ui", name = "ui" }
+compose-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
+compose-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
+compose-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
+compose-contstrain-layout = { group = "androidx.constraintlayout", name = "constraintlayout-compose", version.ref = "compose-constraint-layout" }
+compose-activity = { group = "androidx.activity", name = "activity-compose", version.ref = "compose-activity" }
+
+[bundles]
+androidX = ["androidx-core", "androidx-lifecycle"]
+ui = ["compose-ui", "compose-graphics", "compose-tooling-preview", "compose-activity", "androidx-material3", "compose-contstrain-layout"]
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }
-kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
-
+jetbrains-kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }