diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index e6eba21c..30aee0ac 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -11,7 +11,6 @@ import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import { FormHeader } from '@/components/helper/form/FormHeader';
 import { RecordingApi } from '@/services/api/production';
 import {
   CreateGrowingRecordingPayload,
@@ -1058,12 +1057,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   return (
     <>
       <section className='w-full'>
-        <FormHeader
-          type={type}
-          title='Recording'
-          backUrl='/production/recording'
-        />
-
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/production/recording'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+          <h1 className='text-2xl font-bold text-center'>
+            {type === 'add' && 'Tambah Recording'}
+            {type === 'edit' && 'Edit Recording'}
+            {type === 'detail' && 'Detail Recording'}
+          </h1>
+        </header>
         {/* Project Flock Info Card */}
         {projectFlockKandangLookup && (
           <div className='flex items-center gap-2 mb-4'>
diff --git a/src/components/pages/production/recording/grading/form/GradingForm.tsx b/src/components/pages/production/recording/grading/form/GradingForm.tsx
index 9979c2cc..0acaaa02 100644
--- a/src/components/pages/production/recording/grading/form/GradingForm.tsx
+++ b/src/components/pages/production/recording/grading/form/GradingForm.tsx
@@ -10,7 +10,6 @@ import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import { FormHeader } from '@/components/helper/form/FormHeader';
 import {
   CreateGradingPayload,
   UpdateGradingPayload,
@@ -298,12 +297,21 @@ const GradingForm = ({ type = 'add', initialValues }: GradingFormProps) => {
   return (
     <>
       <section className='w-full'>
-        <FormHeader
-          type={type}
-          title='Grading Telur'
-          backUrl='/production/recording'
-        />
-
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/production/recording'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+          <h1 className='text-2xl font-bold text-center'>
+            {type === 'add' && 'Tambah Grading'}
+            {type === 'edit' && 'Edit Grading'}
+            {type === 'detail' && 'Detail Grading'}
+          </h1>
+        </header>
         {/* Project Flock Info Card */}
         <div className='flex items-center gap-2 mb-4'>
           {/* Form Steps */}