diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 205eada7..f83e9286 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -1538,170 +1538,141 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               </Card>
             )}
 
-          {/* FCR & Mortality Metrics - Detail View Only - Grid Layout */}
+          {/* FCR & Mortality Metrics - Detail View Only */}
           {type === 'detail' && initialValues && (
             <div className='grid grid-cols-2 gap-6 mb-6'>
-              {/* FCR Metrics */}
-              <div className='flex flex-col gap-2'>
-                <p className='text-sm font-medium'>FCR</p>
-                <Table
-                  data={[
-                    {
-                      label: 'Bobot',
-                      aktual: initialValues.avg_daily_gain?.toFixed(2) || '-',
-                      standar: '-',
-                      totalPakan: formatNumber(initialValues.cum_intake || 0),
-                    },
-                    {
-                      label: 'FCR',
-                      aktual: initialValues.fcr_value?.toFixed(2) || '-',
-                      standar: '-',
-                      totalPakan: '',
-                    },
-                  ]}
-                  columns={[
-                    {
-                      accessorKey: 'label',
-                      header: '',
-                      cell: (props) => (
-                        <span className='font-medium'>
-                          {props.row.original.label}
-                        </span>
-                      ),
-                    },
-                    {
-                      accessorKey: 'aktual',
-                      header: 'Aktual',
-                      cell: (props) => (
-                        <span className='font-semibold'>
-                          {props.row.original.aktual}
-                        </span>
-                      ),
-                    },
-                    {
-                      accessorKey: 'standar',
-                      header: 'Standar',
-                      cell: (props) => (
-                        <span>{props.row.original.standar}</span>
-                      ),
-                    },
-                    {
-                      accessorKey: 'totalPakan',
-                      header: 'Total Pemakaian Pakan (KG)',
-                      cell: (props) => (
-                        <span>{props.row.original.totalPakan}</span>
-                      ),
-                    },
-                  ]}
-                  pageSize={2}
-                  className={{
-                    containerClassName: 'mb-0',
-                    paginationClassName: 'hidden',
-                  }}
-                />
+              {/* FCR Section */}
+              <div className='border border-gray-200 rounded-lg bg-white'>
+                <div className='px-4 py-3 border-b border-gray-200'>
+                  <span className='card-title font-bold text-xl'>FCR</span>
+                </div>
+                <div className='p-4'>
+                  <table className='w-full text-sm'>
+                    <thead>
+                      <tr className='border-b border-gray-200'>
+                        <th className='text-left py-2 font-semibold text-gray-600'></th>
+                        <th className='text-center py-2 font-semibold text-gray-600'>
+                          AKTUAL
+                        </th>
+                        <th className='text-center py-2 font-semibold text-gray-600'>
+                          STANDAR
+                        </th>
+                        <th className='text-center py-2 font-semibold text-gray-600'>
+                          TOTAL PEMAKAIAN PAKAN (KG)
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr className='border-b border-gray-100'>
+                        <td className='py-3 font-medium'>Bobot</td>
+                        <td className='text-center py-3'>
+                          <span className='font-semibold'>
+                            {initialValues.avg_daily_gain?.toFixed(2) || '-'}
+                          </span>
+                        </td>
+                        <td className='text-center py-3 text-gray-600'>-</td>
+                        <td className='text-center py-3 text-gray-600'>
+                          {formatNumber(initialValues.cum_intake || 0)}
+                        </td>
+                      </tr>
+                      <tr>
+                        <td className='py-3 font-medium'>FCR</td>
+                        <td className='text-center py-3'>
+                          <span className='font-semibold'>
+                            {initialValues.fcr_value?.toFixed(2) || '-'}
+                          </span>
+                        </td>
+                        <td className='text-center py-3 text-gray-600'>-</td>
+                        <td className='text-center py-3'></td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
               </div>
 
-              {/* Mortality Metrics */}
-              <div className='flex flex-col gap-2'>
-                <p className='text-sm font-medium'>Mortalitas</p>
-                <Table
-                  data={[
-                    {
-                      jumlahAyamTotal: formatNumber(
-                        initialValues.total_chick_qty || 0
-                      ),
-                      jumlahAyamPct: '-',
-                      deplesiHarianTotal: formatNumber(
-                        initialValues.daily_gain || 0
-                      ),
-                      deplesiHarianPct: '-',
-                      deplesiKumulatifTotal: formatNumber(
-                        initialValues.total_depletion_qty || 0
-                      ),
-                      deplesiKumulatifPct:
-                        initialValues.cum_depletion_rate?.toFixed(2) || '-',
-                    },
-                  ]}
-                  columns={[
-                    {
-                      id: 'jumlah-ayam',
-                      header: 'Jumlah Ayam',
-                      columns: [
-                        {
-                          accessorKey: 'jumlahAyamTotal',
-                          header: 'Total',
-                          cell: (props) => (
-                            <span className='font-semibold text-center block w-full'>
-                              {props.row.original.jumlahAyamTotal}
-                            </span>
-                          ),
-                        },
-                        {
-                          accessorKey: 'jumlahAyamPct',
-                          header: '(%)',
-                          cell: (props) => (
-                            <span className='text-center block w-full'>
-                              {props.row.original.jumlahAyamPct}
-                            </span>
-                          ),
-                        },
-                      ],
-                    },
-                    {
-                      id: 'deplesi-harian',
-                      header: 'Deplesi Harian',
-                      columns: [
-                        {
-                          accessorKey: 'deplesiHarianTotal',
-                          header: 'Total',
-                          cell: (props) => (
-                            <span className='font-semibold text-center block w-full'>
-                              {props.row.original.deplesiHarianTotal}
-                            </span>
-                          ),
-                        },
-                        {
-                          accessorKey: 'deplesiHarianPct',
-                          header: '(%)',
-                          cell: (props) => (
-                            <span className='text-center block w-full'>
-                              {props.row.original.deplesiHarianPct}
-                            </span>
-                          ),
-                        },
-                      ],
-                    },
-                    {
-                      id: 'deplesi-kumulatif',
-                      header: 'Deplesi Kumulatif',
-                      columns: [
-                        {
-                          accessorKey: 'deplesiKumulatifTotal',
-                          header: 'Total',
-                          cell: (props) => (
-                            <span className='font-semibold text-center block w-full'>
-                              {props.row.original.deplesiKumulatifTotal}
-                            </span>
-                          ),
-                        },
-                        {
-                          accessorKey: 'deplesiKumulatifPct',
-                          header: '(%)',
-                          cell: (props) => (
-                            <span className='text-center block w-full'>
-                              {props.row.original.deplesiKumulatifPct}
-                            </span>
-                          ),
-                        },
-                      ],
-                    },
-                  ]}
-                  pageSize={1}
-                  className={{
-                    containerClassName: 'mb-0',
-                    paginationClassName: 'hidden',
-                  }}
-                />
+              {/* Mortality Section */}
+              <div className='border border-gray-200 rounded-lg bg-white'>
+                <div className='px-4 py-3 border-b border-gray-200'>
+                  <span className='card-title font-bold text-xl'>
+                    Mortalitas
+                  </span>
+                </div>
+                <div className='p-4'>
+                  <table className='w-full text-sm'>
+                    <thead>
+                      <tr className='border-b border-gray-200'>
+                        <th
+                          colSpan={2}
+                          className='text-center py-2 font-semibold text-gray-600 border-r border-gray-200'
+                        >
+                          JUMLAH AYAM
+                        </th>
+                        <th
+                          colSpan={2}
+                          className='text-center py-2 font-semibold text-gray-600 border-r border-gray-200'
+                        >
+                          DEPLESI HARIAN
+                        </th>
+                        <th
+                          colSpan={2}
+                          className='text-center py-2 font-semibold text-gray-600'
+                        >
+                          DEPLESI KUMULATIF
+                        </th>
+                      </tr>
+                      <tr className='border-b border-gray-200'>
+                        <th className='text-center py-2 font-semibold text-xs text-gray-500'>
+                          Total
+                        </th>
+                        <th className='text-center py-2 font-semibold text-xs text-gray-500 border-r border-gray-200'>
+                          (%)
+                        </th>
+                        <th className='text-center py-2 font-semibold text-xs text-gray-500'>
+                          Total
+                        </th>
+                        <th className='text-center py-2 font-semibold text-xs text-gray-500 border-r border-gray-200'>
+                          (%)
+                        </th>
+                        <th className='text-center py-2 font-semibold text-xs text-gray-500'>
+                          Total
+                        </th>
+                        <th className='text-center py-2 font-semibold text-xs text-gray-500'>
+                          (%)
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td className='text-center py-3 border-r border-gray-100'>
+                          <span className='font-semibold'>
+                            {formatNumber(initialValues.total_chick_qty || 0)}
+                          </span>
+                        </td>
+                        <td className='text-center py-3 border-r border-gray-200 text-gray-600'>
+                          -
+                        </td>
+                        <td className='text-center py-3 border-r border-gray-100'>
+                          <span className='font-semibold'>
+                            {formatNumber(initialValues.daily_gain || 0)}
+                          </span>
+                        </td>
+                        <td className='text-center py-3 border-r border-gray-200 text-gray-600'>
+                          -
+                        </td>
+                        <td className='text-center py-3 border-r border-gray-100'>
+                          <span className='font-semibold'>
+                            {formatNumber(
+                              initialValues.total_depletion_qty || 0
+                            )}
+                          </span>
+                        </td>
+                        <td className='text-center py-3 text-gray-600'>
+                          {initialValues.cum_depletion_rate?.toFixed(2) || '-'}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
               </div>
             </div>
           )}