diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index f9182cab..205eada7 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -60,6 +60,7 @@ import {
   GROWING_RECORDING_APPROVAL_LINE,
   LAYING_RECORDING_APPROVAL_LINE,
 } from '@/config/approval-line';
+import Table from '@/components/Table';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -1537,6 +1538,174 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               </Card>
             )}
 
+          {/* FCR & Mortality Metrics - Detail View Only - Grid Layout */}
+          {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',
+                  }}
+                />
+              </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',
+                  }}
+                />
+              </div>
+            </div>
+          )}
+
           {/* Stocks Table */}
           <Card
             title='Stok Persediaan'