diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index 7f013538..f4d2655e 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { ChangeEvent } from 'react';
 import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
+import CheckboxInput from '@/components/input/CheckboxInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { FormHeader } from '@/components/helper/form/FormHeader';
@@ -663,26 +663,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <input
-                            type='checkbox'
-                            className='checkbox'
-                            checked={
-                              formik.values.feed_data?.length ===
-                                selectedFeed.length &&
-                              formik.values.feed_data?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedFeed(
-                                  formik.values.feed_data?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedFeed([]);
+                          <div className='flex justify-center'>
+                            <CheckboxInput
+                              name='select-all-feed'
+                              checked={
+                                formik.values.feed_data?.length ===
+                                  selectedFeed.length &&
+                                formik.values.feed_data?.length > 0
                               }
-                            }}
-                          />
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedFeed(
+                                    formik.values.feed_data?.map(
+                                      (_, idx) => idx
+                                    ) ?? []
+                                  );
+                                } else {
+                                  setSelectedFeed([]);
+                                }
+                              }}
+                              naked={true}
+                              size='sm'
+                            />
+                          </div>
                         </th>
                       )}
                       <th>Feed Name</th>
@@ -696,10 +699,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`feed-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <input
-                                type='checkbox'
-                                className='checkbox'
+                            <div className='flex flex-col items-center gap-2'>
+                              <CheckboxInput
+                                name={`feed-${idx}`}
                                 checked={selectedFeed.includes(idx)}
                                 onChange={(e) => {
                                   if (e.target.checked) {
@@ -710,6 +712,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                     );
                                   }
                                 }}
+                                naked={true}
+                                size='sm'
                               />
                               <FieldMessage message={null} isVisible={false} />
                             </div>
@@ -882,26 +886,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <input
-                            type='checkbox'
-                            className='checkbox'
-                            checked={
-                              formik.values.body_weight?.length ===
-                                selectedWeight.length &&
-                              formik.values.body_weight?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedWeight(
-                                  formik.values.body_weight?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedWeight([]);
+                          <div className='flex justify-center'>
+                            <CheckboxInput
+                              name='select-all-weight'
+                              checked={
+                                formik.values.body_weight?.length ===
+                                  selectedWeight.length &&
+                                formik.values.body_weight?.length > 0
                               }
-                            }}
-                          />
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedWeight(
+                                    formik.values.body_weight?.map(
+                                      (_, idx) => idx
+                                    ) ?? []
+                                  );
+                                } else {
+                                  setSelectedWeight([]);
+                                }
+                              }}
+                              naked={true}
+                              size='sm'
+                            />
+                          </div>
                         </th>
                       )}
                       <th>Chicken Weight</th>
@@ -915,10 +922,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`weight-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <input
-                                type='checkbox'
-                                className='checkbox'
+                            <div className='flex flex-col items-center gap-2'>
+                              <CheckboxInput
+                                name={`weight-${idx}`}
                                 checked={selectedWeight.includes(idx)}
                                 onChange={(e) => {
                                   if (e.target.checked) {
@@ -929,6 +935,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                     );
                                   }
                                 }}
+                                naked={true}
+                                size='sm'
                               />
                               <FieldMessage message={null} isVisible={false} />
                             </div>
@@ -1108,26 +1116,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <input
-                            type='checkbox'
-                            className='checkbox'
-                            checked={
-                              formik.values.vaccination?.length ===
-                                selectedVaccine.length &&
-                              formik.values.vaccination?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedVaccine(
-                                  formik.values.vaccination?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedVaccine([]);
+                          <div className='flex justify-center'>
+                            <CheckboxInput
+                              name='select-all-vaccine'
+                              checked={
+                                formik.values.vaccination?.length ===
+                                  selectedVaccine.length &&
+                                formik.values.vaccination?.length > 0
                               }
-                            }}
-                          />
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedVaccine(
+                                    formik.values.vaccination?.map(
+                                      (_, idx) => idx
+                                    ) ?? []
+                                  );
+                                } else {
+                                  setSelectedVaccine([]);
+                                }
+                              }}
+                              naked={true}
+                              size='sm'
+                            />
+                          </div>
                         </th>
                       )}
                       <th>Vaccine Name</th>
@@ -1141,10 +1152,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`vaccine-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <input
-                                type='checkbox'
-                                className='checkbox'
+                            <div className='flex flex-col items-center gap-2'>
+                              <CheckboxInput
+                                name={`vaccine-${idx}`}
                                 checked={selectedVaccine.includes(idx)}
                                 onChange={(e) => {
                                   if (e.target.checked) {
@@ -1158,6 +1168,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                     );
                                   }
                                 }}
+                                naked={true}
+                                size='sm'
                               />
                               <FieldMessage message={null} isVisible={false} />
                             </div>
@@ -1336,26 +1348,29 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <input
-                            type='checkbox'
-                            className='checkbox'
-                            checked={
-                              formik.values.mortality?.length ===
-                                selectedMortality.length &&
-                              formik.values.mortality?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedMortality(
-                                  formik.values.mortality?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedMortality([]);
+                          <div className='flex justify-center'>
+                            <CheckboxInput
+                              name='select-all-mortality'
+                              checked={
+                                formik.values.mortality?.length ===
+                                  selectedMortality.length &&
+                                formik.values.mortality?.length > 0
                               }
-                            }}
-                          />
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedMortality(
+                                    formik.values.mortality?.map(
+                                      (_, idx) => idx
+                                    ) ?? []
+                                  );
+                                } else {
+                                  setSelectedMortality([]);
+                                }
+                              }}
+                              naked={true}
+                              size='sm'
+                            />
+                          </div>
                         </th>
                       )}
                       <th>Condition</th>
@@ -1368,10 +1383,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <tr key={`mortality-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <input
-                                type='checkbox'
-                                className='checkbox'
+                            <div className='flex flex-col items-center gap-2'>
+                              <CheckboxInput
+                                name={`mortality-${idx}`}
                                 checked={selectedMortality.includes(idx)}
                                 onChange={(e) => {
                                   if (e.target.checked) {
@@ -1385,6 +1399,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                     );
                                   }
                                 }}
+                                naked={true}
+                                size='sm'
                               />
                               <FieldMessage message={null} isVisible={false} />
                             </div>