diff --git a/src/views/apps/ecommerce/products/detail/AddRecipeDrawer.tsx b/src/views/apps/ecommerce/products/detail/AddRecipeDrawer.tsx
index bf78063..e0b2372 100644
--- a/src/views/apps/ecommerce/products/detail/AddRecipeDrawer.tsx
+++ b/src/views/apps/ecommerce/products/detail/AddRecipeDrawer.tsx
@@ -49,8 +49,6 @@ const AddRecipeDrawer = (props: Props) => {
 
   const { currentProductRecipe } = useSelector((state: RootState) => state.productRecipeReducer)
 
-  console.log('currentProductRecipe', currentProductRecipe)
-
   const [outletInput, setOutletInput] = useState('')
   const [outletDebouncedInput] = useDebounce(outletInput, 500)
   const [ingredientInput, setIngredientInput] = useState('')
diff --git a/src/views/apps/ecommerce/products/detail/ProductDetail.tsx b/src/views/apps/ecommerce/products/detail/ProductDetail.tsx
index d327c59..69273ac 100644
--- a/src/views/apps/ecommerce/products/detail/ProductDetail.tsx
+++ b/src/views/apps/ecommerce/products/detail/ProductDetail.tsx
@@ -93,6 +93,142 @@ const ProductDetail = () => {
               </Typography>
             </div>
 
+            <Card>
+              <CardHeader
+                title={
+                  <div className='flex items-center justify-between'>
+                    <div className='flex items-center gap-3'>
+                      <i className='tabler-variant text-blue-600 text-lg' />
+                      <Typography variant='h6' className='font-semibold'>
+                        Original Variant
+                      </Typography>
+                    </div>
+                    <div className='flex gap-4 text-sm'>
+                      <Chip label={`Cost: ${formatCurrency(product?.cost || 0)}`} variant='outlined' color='primary' />
+                      <Chip
+                        label={`Price Modifier: ${formatCurrency(product?.price || 0)}`}
+                        variant='outlined'
+                        color='secondary'
+                      />
+                    </div>
+                  </div>
+                }
+              />
+              <CardContent>
+                <TableContainer component={Paper} variant='outlined'>
+                  <Table>
+                    <TableHead>
+                      <TableRow className='bg-gray-50'>
+                        <TableCell className='font-semibold'>
+                          <div className='flex items-center gap-2'>
+                            <i className='tabler-ingredients text-green-600' />
+                            Ingredient
+                          </div>
+                        </TableCell>
+                        <TableCell className='font-semibold text-center'>
+                          <div className='flex items-center justify-center gap-2'>
+                            <i className='tabler-scale text-orange-600' />
+                            Quantity
+                          </div>
+                        </TableCell>
+                        <TableCell className='font-semibold text-center'>
+                          <div className='flex items-center justify-center gap-2'>
+                            <i className='tabler-currency-dollar text-purple-600' />
+                            Unit Cost
+                          </div>
+                        </TableCell>
+                        <TableCell className='font-semibold text-center'>
+                          <div className='flex items-center justify-center gap-2'>
+                            <i className='tabler-package text-blue-600' />
+                            Stock Available
+                          </div>
+                        </TableCell>
+                        <TableCell className='font-semibold text-right'>
+                          <div className='flex items-center justify-end gap-2'>
+                            <i className='tabler-calculator text-red-600' />
+                            Total Cost
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {productRecipe?.length &&
+                        productRecipe
+                          .filter((item: any) => item.variant_id === null)
+                          .map((item: any, index: number) => (
+                            <TableRow key={index} className='hover:bg-gray-50'>
+                              <TableCell>
+                                <div className='flex items-center gap-3'>
+                                  <div className='w-2 h-2 rounded-full bg-green-500' />
+                                  <div>
+                                    <Typography variant='body2' className='font-medium capitalize'>
+                                      {item.ingredient.name}
+                                    </Typography>
+                                    <Typography variant='caption' color='textSecondary'>
+                                      {item.ingredient.is_semi_finished ? 'Semi-finished' : 'Raw ingredient'}
+                                    </Typography>
+                                  </div>
+                                </div>
+                              </TableCell>
+                              <TableCell className='text-center'>
+                                <Chip label={item.quantity} size='small' variant='outlined' color='primary' />
+                              </TableCell>
+                              <TableCell className='text-center'>{formatCurrency(item.ingredient.cost)}</TableCell>
+                              <TableCell className='text-center'>
+                                <Chip
+                                  label={item.ingredient.stock}
+                                  size='small'
+                                  color={item.ingredient.stock > 5 ? 'success' : 'warning'}
+                                  variant='outlined'
+                                />
+                              </TableCell>
+                              <TableCell className='text-right font-medium'>
+                                {formatCurrency(item.ingredient.cost * item.quantity)}
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+
+                {/* Variant Summary */}
+                {productRecipe?.length && (
+                  <Box className='mt-4 p-4 bg-blue-50 rounded-lg'>
+                    <Grid container spacing={2}>
+                      <Grid item xs={12} md={6}>
+                        <Typography variant='body2' className='flex items-center gap-2'>
+                          <i className='tabler-list-numbers text-blue-600' />
+                          <span className='font-semibold'>Total Ingredients:</span>
+                          {productRecipe.filter((item: any) => item.variant_id === null).length}
+                        </Typography>
+                      </Grid>
+                      <Grid item xs={12} md={6}>
+                        <Typography variant='body2' className='flex items-center gap-2'>
+                          <i className='tabler-sum text-green-600' />
+                          <span className='font-semibold'>Total Recipe Cost:</span>
+                          {formatCurrency(
+                            productRecipe
+                              .filter((item: any) => item.variant_id === null)
+                              .reduce((sum: any, item: any) => sum + item.ingredient.cost * item.quantity, 0)
+                          )}
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                  </Box>
+                )}
+
+                <Button
+                  variant='outlined'
+                  fullWidth
+                  className='mt-4'
+                  startIcon={<i className='tabler-plus' />}
+                  onClick={() => handleOpenProductRecipe({ variant: undefined })}
+                >
+                  Add Ingredient
+                </Button>
+              </CardContent>
+            </Card>
+
             {product?.variants?.length &&
               product.variants.map((variantData: ProductVariant, index: number) => (
                 <Card key={index}>