diff --git a/src/views/apps/purchase/purchase-form/PurchaseIngredientsTable.tsx b/src/views/apps/purchase/purchase-form/PurchaseIngredientsTable.tsx
index 8514a0a..9c587d7 100644
--- a/src/views/apps/purchase/purchase-form/PurchaseIngredientsTable.tsx
+++ b/src/views/apps/purchase/purchase-form/PurchaseIngredientsTable.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
   Button,
   Typography,
@@ -11,12 +11,14 @@ import {
   TableContainer,
   TableHead,
   TableRow,
-  Paper
+  Paper,
+  CircularProgress
 } from '@mui/material'
 import Grid from '@mui/material/Grid2'
 import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
 import CustomTextField from '@/@core/components/mui/TextField'
 import { IngredientItem, PurchaseOrderFormData } from '@/types/apps/purchaseOrderTypes'
+import { useIngredients } from '@/services/queries/ingredients'
 
 interface PurchaseIngredientsTableProps {
   formData: PurchaseOrderFormData
@@ -31,14 +33,21 @@ const PurchaseIngredientsTable: React.FC<PurchaseIngredientsTableProps> = ({
   addIngredientItem,
   removeIngredientItem
 }) => {
-  const ingredientOptions = [
-    { label: 'Tepung Terigu Premium', value: 'tepung_terigu_premium' },
-    { label: 'Gula Pasir Halus', value: 'gula_pasir_halus' },
-    { label: 'Mentega Unsalted', value: 'mentega_unsalted' },
-    { label: 'Telur Ayam Grade A', value: 'telur_ayam_grade_a' },
-    { label: 'Vanilla Extract', value: 'vanilla_extract' },
-    { label: 'Coklat Chips', value: 'coklat_chips' }
-  ]
+  const { data: ingredients, isLoading } = useIngredients()
+
+  // Transform ingredients data to autocomplete options format
+  const ingredientOptions = useMemo(() => {
+    if (!ingredients || isLoading) {
+      return []
+    }
+
+    return ingredients?.data.map((ingredient: any) => ({
+      label: ingredient.name || ingredient.nama || ingredient.ingredient_name,
+      value: ingredient.id || ingredient.code || ingredient.value,
+      id: ingredient.id || ingredient.code || ingredient.value,
+      originalData: ingredient
+    }))
+  }, [ingredients, isLoading])
 
   const satuanOptions = [
     { label: 'KG', value: 'kg' },
@@ -63,6 +72,40 @@ const PurchaseIngredientsTable: React.FC<PurchaseIngredientsTableProps> = ({
     { label: 'Custom', value: 'custom' }
   ]
 
+  // Handle ingredient selection with additional data population
+  const handleIngredientSelection = (index: number, selectedIngredient: any) => {
+    handleIngredientChange(index, 'ingredient', selectedIngredient)
+
+    // Auto-populate related fields if available in the ingredient data
+    if (selectedIngredient) {
+      // Get ingredient data from originalData or directly from selectedIngredient
+      const ingredientData = selectedIngredient.originalData || selectedIngredient
+
+      // Auto-fill unit if available
+      if (ingredientData.unit || ingredientData.satuan) {
+        const unit = ingredientData.unit || ingredientData.satuan
+        // Convert unit to string and make it safe
+        const unitString = String(unit).toLowerCase()
+        const unitOption = satuanOptions.find(
+          option => option.value === unit || option.label.toLowerCase() === unitString
+        )
+        if (unitOption) {
+          handleIngredientChange(index, 'satuan', unitOption)
+        }
+      }
+
+      // Auto-fill price if available
+      if (ingredientData.price || ingredientData.harga) {
+        handleIngredientChange(index, 'harga', ingredientData.price || ingredientData.harga)
+      }
+
+      // Auto-fill description if available
+      if (ingredientData.description || ingredientData.deskripsi) {
+        handleIngredientChange(index, 'deskripsi', ingredientData.description || ingredientData.deskripsi)
+      }
+    }
+  }
+
   return (
     <Grid size={{ xs: 12 }} sx={{ mt: 4 }}>
       <Typography variant='h6' sx={{ mb: 2, fontWeight: 600 }}>
@@ -92,9 +135,36 @@ const PurchaseIngredientsTable: React.FC<PurchaseIngredientsTableProps> = ({
                   <CustomAutocomplete
                     size='small'
                     options={ingredientOptions}
-                    value={item.ingredient}
-                    onChange={(event, newValue) => handleIngredientChange(index, 'ingredient', newValue)}
-                    renderInput={params => <CustomTextField {...params} placeholder='Pilih Bahan Baku' />}
+                    value={item.ingredient || null}
+                    onChange={(event, newValue) => handleIngredientSelection(index, newValue)}
+                    loading={isLoading}
+                    getOptionLabel={(option: any) => {
+                      if (!option) return ''
+                      return option.label || option.name || option.nama || ''
+                    }}
+                    isOptionEqualToValue={(option: any, value: any) => {
+                      if (!option || !value) return false
+                      // Handle different value structures
+                      const optionId = option.value || option.id
+                      const valueId = value.value || value.id
+                      return optionId === valueId
+                    }}
+                    renderInput={params => (
+                      <CustomTextField
+                        {...params}
+                        placeholder={isLoading ? 'Loading ingredients...' : 'Pilih Bahan Baku'}
+                        InputProps={{
+                          ...params.InputProps,
+                          endAdornment: (
+                            <>
+                              {isLoading ? <CircularProgress color='inherit' size={20} /> : null}
+                              {params.InputProps.endAdornment}
+                            </>
+                          )
+                        }}
+                      />
+                    )}
+                    disabled={isLoading}
                   />
                 </TableCell>
                 <TableCell>
@@ -215,6 +285,7 @@ const PurchaseIngredientsTable: React.FC<PurchaseIngredientsTableProps> = ({
         variant='outlined'
         size='small'
         sx={{ mt: 1 }}
+        disabled={isLoading}
       >
         Tambah bahan baku
       </Button>