diff --git a/app/src/main/java/com/juceliodev/fooddeliverymyapplication/MainActivity.kt b/app/src/main/java/com/juceliodev/fooddeliverymyapplication/MainActivity.kt
index df90fbd..17a5796 100644
--- a/app/src/main/java/com/juceliodev/fooddeliverymyapplication/MainActivity.kt
+++ b/app/src/main/java/com/juceliodev/fooddeliverymyapplication/MainActivity.kt
@@ -4,44 +4,39 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-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
-import androidx.compose.ui.tooling.preview.Preview
-import com.juceliodev.fooddeliverymyapplication.ui.theme.FoodDeliveryMyApplicationTheme
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import com.juceliodev.fooddeliverymyapplication.data.OrderState
+import com.juceliodev.fooddeliverymyapplication.ui.screen.ProductDetailsScreen
+import com.juceliodev.fooddeliverymyapplication.ui.theme.AppTheme
+
+
+private const val PRODUCT_PRICE_PER_UNIT = 5.25
+private const val PRODUCT_CURRENCY = "$"
 
 class MainActivity : ComponentActivity() {
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         enableEdgeToEdge()
+
         setContent {
-            FoodDeliveryMyApplicationTheme {
-                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
-                    Greeting(
-                        name = "Android",
-                        modifier = Modifier.padding(innerPadding)
-                    )
-                }
+            AppTheme {
+                var amount by remember { mutableIntStateOf(5) }
+                val totalPrice by remember { derivedStateOf { amount * PRODUCT_PRICE_PER_UNIT } }
+
+                ProductDetailsScreen(
+                    orderState = OrderState(
+                        amount = amount,
+                        totalPrice = "$PRODUCT_CURRENCY${totalPrice}"
+                    ),
+                    onAddItemClicked = { amount = amount.inc() },
+                    onRemoveItemClicked = { if (amount > 0) amount = amount.dec() }
+                )
             }
         }
     }
 }
-
-@Composable
-fun Greeting(name: String, modifier: Modifier = Modifier) {
-    Text(
-        text = "Hello $name!",
-        modifier = modifier
-    )
-}
-
-@Preview(showBackground = true)
-@Composable
-fun GreetingPreview() {
-    FoodDeliveryMyApplicationTheme {
-        Greeting("Android")
-    }
-}
\ No newline at end of file
diff --git a/app/src/main/java/com/juceliodev/fooddeliverymyapplication/ui/screen/components/OrderActionBar.kt b/app/src/main/java/com/juceliodev/fooddeliverymyapplication/ui/screen/components/OrderActionBar.kt
new file mode 100644
index 0000000..190a3ff
--- /dev/null
+++ b/app/src/main/java/com/juceliodev/fooddeliverymyapplication/ui/screen/components/OrderActionBar.kt
@@ -0,0 +1,169 @@
+package com.juceliodev.fooddeliverymyapplication.ui.screen.components
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+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.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Surface
+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.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import com.juceliodev.fooddeliverymyapplication.R
+import com.juceliodev.fooddeliverymyapplication.data.OrderState
+import com.juceliodev.fooddeliverymyapplication.ui.theme.AppTheme
+
+@Composable
+fun OrderActionBar(
+    modifier: Modifier = Modifier,
+    state: OrderState,
+    onAddItemClicked: () -> Unit,
+    onRemoveItemClicked: () -> Unit,
+    onCheckOutClicked: () -> Unit
+) {
+    Surface(
+        modifier = modifier.fillMaxWidth(),
+        shape = RoundedCornerShape(28.dp),
+        color = AppTheme.colors.surface,
+        contentColor = AppTheme.colors.onSurface,
+        shadowElevation = 16.dp
+    ) {
+        Row(
+            modifier = Modifier
+                .padding(8.dp)
+                .height(76.dp),
+            horizontalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
+            Selector(
+                amount = state.amount,
+                onAddItemClicked = onAddItemClicked,
+                onRemoveItemClicked = onRemoveItemClicked,
+                modifier = Modifier.weight(weight = 1f)
+            )
+            Cart(
+                totalPrice = state.totalPrice,
+                onClicked = onCheckOutClicked,
+                modifier = Modifier.weight(weight = 1f)
+            )
+        }
+    }
+}
+
+@Composable
+private fun Selector(
+    modifier: Modifier = Modifier,
+    amount: Int,
+    onAddItemClicked: () -> Unit,
+    onRemoveItemClicked: () -> Unit
+) {
+    Box(
+        modifier = modifier
+            .fillMaxSize()
+            .border(
+                width = 1.dp,
+                color = AppTheme.colors.secondarySurface,
+                shape = RoundedCornerShape(20.dp)
+            ),
+        contentAlignment = Alignment.Center
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(16.dp)
+        ) {
+            SelectorButton(
+                iconRes = R.drawable.ic_minus,
+                containerColor = AppTheme.colors.actionSurface,
+                contentColor = AppTheme.colors.onActionSurface,
+                onClicked = onRemoveItemClicked
+            )
+            Text(
+                text = amount.toString(),
+                color = AppTheme.colors.onSurface,
+                style = AppTheme.typography.titleLarge
+            )
+            SelectorButton(
+                iconRes = R.drawable.ic_plus,
+                containerColor = AppTheme.colors.secondarySurface,
+                contentColor = AppTheme.colors.onSecondarySurface,
+                onClicked = onAddItemClicked
+            )
+        }
+    }
+}
+
+@Composable
+private fun SelectorButton(
+    modifier: Modifier = Modifier,
+    @DrawableRes iconRes: Int,
+    containerColor: Color,
+    contentColor: Color,
+    onClicked: () -> Unit
+) {
+    Surface(
+        modifier = modifier.size(24.dp),
+        shape = CircleShape,
+        color = containerColor,
+        contentColor = contentColor
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .clickable(onClick = onClicked),
+            contentAlignment = Alignment.Center
+        ) {
+            Icon(
+                painter = painterResource(id = iconRes),
+                contentDescription = null,
+                modifier = Modifier.size(7.dp)
+            )
+        }
+    }
+}
+
+@Composable
+private fun Cart(
+    modifier: Modifier = Modifier,
+    totalPrice: String,
+    onClicked: () -> Unit
+) {
+    Surface(
+        modifier = modifier.clickable(onClick = onClicked),
+        color = AppTheme.colors.secondarySurface,
+        contentColor = AppTheme.colors.onSecondarySurface,
+        shape = RoundedCornerShape(20.dp)
+    ) {
+        Box(
+            modifier = Modifier.fillMaxSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Text(
+                    text = "Add to Cart",
+                    style = AppTheme.typography.titleSmall
+                )
+                Text(
+                    text = totalPrice,
+                    style = AppTheme.typography.titleMedium,
+                    fontWeight = FontWeight.Bold
+                )
+            }
+        }
+    }
+}
\ No newline at end of file