diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 3c0db941..460a335a 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -531,7 +531,7 @@ const RecordingTable = () => {
 
   useEffect(() => {
     setTableState('recording-table', pathname);
-  }, [pathname]);
+  }, [pathname, setTableState]);
 
   const searchChangeHandler = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -1118,14 +1118,11 @@ const RecordingTable = () => {
       },
     ],
     [
-      isRecordingApproved,
       tableFilterState.pageSize,
       tableFilterState.page,
-      selectedRecording,
       singleDeleteModal,
       approveModal,
       rejectModal,
-      rowSelection,
       setRowSelection,
       setApprovalNotes,
       setSelectedRecording,
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index b903a8af..fd3a818d 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -1007,6 +1007,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   });
 
   // ===== HELPER FUNCTIONS =====
+  const { setFieldValue } = formik;
+
   const getAvailableStock = useCallback(
     (productWarehouseId: number) => {
       if ((type as 'add' | 'edit' | 'detail') === 'detail') return 0;
@@ -1098,16 +1100,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     const isAlreadyRecorded = recordedProjectFlockKandangIds.has(
       projectFlockKandangLookup.project_flock_kandang_id
     );
-    let color: 'neutral' | 'success' | 'warning' | 'error';
-
-    if (isAlreadyRecorded) {
-      color = 'warning';
-    } else {
-      color = 'success';
-    }
+    const color = isAlreadyRecorded ? 'warning' : 'success';
 
     return (
-      <span className={'whitespace-nowrap text-xs'}>
+      <span className={`whitespace-nowrap text-xs text-${color}`}>
         Periode {projectFlockKandangLookup.project_flock?.period}
       </span>
     );
@@ -1411,9 +1407,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       }
 
       if (formik.values.project_flock_kandang_id !== projectFlockKandangId) {
-        formik.setFieldValue('project_flock_kandang_id', projectFlockKandangId);
+        setFieldValue('project_flock_kandang_id', projectFlockKandangId);
 
-        formik.setFieldValue('project_flock_kandang', {
+        setFieldValue('project_flock_kandang', {
           value: projectFlockKandangId,
           label: projectFlockKandangLookup
             ? `${projectFlockKandangLookup.project_flock.flock_name} - ${projectFlockKandangLookup.kandang.name}`
@@ -1431,6 +1427,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     nextDayRecording,
     existingRecordings,
     today,
+    currentRecordDate,
+    duplicateErrorShown,
+    setFieldValue,
   ]);
 
   useEffect(() => {
@@ -1472,11 +1471,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               formik.values.project_flock_kandang_id !==
               projectFlockKandangDetail.id
             ) {
-              formik.setFieldValue(
+              setFieldValue(
                 'project_flock_kandang_id',
                 projectFlockKandangDetail.id
               );
-              formik.setFieldValue('project_flock_kandang', {
+              setFieldValue('project_flock_kandang', {
                 value: projectFlockKandangDetail.id,
                 label: `${projectFlock.flock_name} - ${kandang.name}`,
               });
@@ -1490,6 +1489,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     type,
     enhancedProjectFlockOptions,
     formik.values.project_flock_kandang_id,
+    setFieldValue,
   ]);
 
   const approveHandler = async (notes: string) => {
@@ -1653,10 +1653,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     if (isLayingCategory && (type as 'add' | 'edit' | 'detail') !== 'detail') {
       const layingValues = formik.values as RecordingLayingFormValues;
       if (!layingValues.eggs || layingValues.eggs.length === 0) {
-        formik.setFieldValue('eggs', [{ product_warehouse_id: 0, qty: '' }]);
+        setFieldValue('eggs', [{ product_warehouse_id: 0, qty: '' }]);
       }
     }
-  }, [isLayingCategory, type]);
+  }, [isLayingCategory, type, formik.values, setFieldValue]);
 
   useEffect(() => {
     if (type !== 'add') {
@@ -3199,6 +3199,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 pageSize={100}
                 className={{
                   tableWrapperClassName: 'overflow-x-auto',
+                  containerClassName: 'mb-6!',
                   tableClassName: 'w-full table-auto text-sm',
                   headerRowClassName: 'border-b border-b-gray-200',
                   headerColumnClassName: