diff --git a/src/components/pages/flock/recording/form/RecordingForm.schema.ts b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
index 16f7e690..5b31e54a 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/flock/recording/form/RecordingForm.schema.ts
@@ -52,7 +52,7 @@ export const RecordingFormSchema = Yup.object({
         feed_qty: Yup.mixed<number | ''>().notRequired(),
         feed_stock: Yup.number()
           .required('Jumlah pakan yang digunakan wajib diisi!')
-          .min(1, 'Jumlah pakan minimal 1 kg!')
+          .min(1, 'Jumlah pakan minimal 1!')
           .typeError('Jumlah pakan yang digunakan harus berupa angka!')
           .test(
             'is-not-exceed-qty',
@@ -60,7 +60,12 @@ export const RecordingFormSchema = Yup.object({
             function (value) {
               const { feed_qty } = this.parent;
               if (value === undefined) return true;
-              if (feed_qty === undefined || feed_qty === '' || typeof feed_qty !== 'number') return true;
+              if (
+                feed_qty === undefined ||
+                feed_qty === '' ||
+                typeof feed_qty !== 'number'
+              )
+                return true;
               return value <= feed_qty;
             }
           ),
@@ -102,7 +107,12 @@ export const RecordingFormSchema = Yup.object({
             function (value) {
               const { total_stock } = this.parent;
               if (value === undefined) return true;
-              if (total_stock === undefined || total_stock === '' || typeof total_stock !== 'number') return true;
+              if (
+                total_stock === undefined ||
+                total_stock === '' ||
+                typeof total_stock !== 'number'
+              )
+                return true;
               return value <= total_stock;
             }
           ),
diff --git a/src/components/pages/flock/recording/form/RecordingForm.tsx b/src/components/pages/flock/recording/form/RecordingForm.tsx
index e97b0377..2e137031 100644
--- a/src/components/pages/flock/recording/form/RecordingForm.tsx
+++ b/src/components/pages/flock/recording/form/RecordingForm.tsx
@@ -477,7 +477,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   return (
     <>
-      <section className='w-full max-w-5xl'>
+      <section className='w-full'>
         <FormHeader type={type} title='Recording' backUrl='/flock/recording' />
         <form
           onSubmit={formik.handleSubmit}
@@ -488,96 +488,92 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             <div className='card-body flex flex-col gap-6'>
               <h2 className='card-title'>Recording Information</h2>
 
-              <div className='flex flex-col gap-6'>
-                <div className='flex gap-4'>
-                  <SelectInput
-                    required
-                    label='Lokasi'
-                    value={formik.values.location ?? undefined}
-                    onChange={locationChangeHandler}
-                    options={locationOptions}
-                    onInputChange={setLocationSelectInputValue}
-                    isLoading={isLoadingLocations}
-                    isError={
-                      formik.touched.location_id &&
-                      Boolean(formik.errors.location_id)
-                    }
-                    errorMessage={formik.errors.location_id as string}
-                    isDisabled={type === 'detail'}
-                    isClearable
-                    placeholder='Pilih lokasi terlebih dahulu'
-                  />
+              <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
+                <SelectInput
+                  required
+                  label='Lokasi'
+                  value={formik.values.location ?? undefined}
+                  onChange={locationChangeHandler}
+                  options={locationOptions}
+                  onInputChange={setLocationSelectInputValue}
+                  isLoading={isLoadingLocations}
+                  isError={
+                    formik.touched.location_id &&
+                    Boolean(formik.errors.location_id)
+                  }
+                  errorMessage={formik.errors.location_id as string}
+                  isDisabled={type === 'detail'}
+                  isClearable
+                  placeholder='Pilih lokasi terlebih dahulu'
+                />
 
-                  <TextInput
-                    required
-                    label='Tanggal Recording'
-                    type='date'
-                    name='recording_date'
-                    value={
-                      formik.values.recording_date instanceof Date
-                        ? formik.values.recording_date
-                            .toISOString()
-                            .substring(0, 10)
-                        : ''
-                    }
-                    onChange={(e) => {
-                      const date = e.target.value
-                        ? new Date(e.target.value)
-                        : null;
-                      formik.setFieldValue('recording_date', date);
-                    }}
-                    onBlur={formik.handleBlur}
-                    isError={
-                      formik.touched.recording_date &&
-                      Boolean(formik.errors.recording_date)
-                    }
-                    errorMessage={formik.errors.recording_date as string}
-                    readOnly={type === 'detail'}
-                  />
-                </div>
+                <TextInput
+                  required
+                  label='Tanggal Recording'
+                  type='date'
+                  name='recording_date'
+                  value={
+                    formik.values.recording_date instanceof Date
+                      ? formik.values.recording_date
+                          .toISOString()
+                          .substring(0, 10)
+                      : ''
+                  }
+                  onChange={(e) => {
+                    const date = e.target.value
+                      ? new Date(e.target.value)
+                      : null;
+                    formik.setFieldValue('recording_date', date);
+                  }}
+                  onBlur={formik.handleBlur}
+                  isError={
+                    formik.touched.recording_date &&
+                    Boolean(formik.errors.recording_date)
+                  }
+                  errorMessage={formik.errors.recording_date as string}
+                  readOnly={type === 'detail'}
+                />
 
-                <div className='flex gap-4'>
-                  <SelectInput
-                    required
-                    label='Flock'
-                    value={formik.values.flock ?? undefined}
-                    onChange={flockChangeHandler}
-                    options={flockOptions}
-                    onInputChange={setFlockSelectInputValue}
-                    isLoading={isLoadingFlocks}
-                    isError={
-                      formik.touched.flock_id && Boolean(formik.errors.flock_id)
-                    }
-                    errorMessage={formik.errors.flock_id as string}
-                    isDisabled={type === 'detail' || !formik.values.location_id}
-                    isClearable
-                    placeholder={
-                      !formik.values.location_id
-                        ? 'Pilih lokasi terlebih dahulu'
-                        : 'Pilih Flock'
-                    }
-                  />
+                <SelectInput
+                  required
+                  label='Flock'
+                  value={formik.values.flock ?? undefined}
+                  onChange={flockChangeHandler}
+                  options={flockOptions}
+                  onInputChange={setFlockSelectInputValue}
+                  isLoading={isLoadingFlocks}
+                  isError={
+                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                  }
+                  errorMessage={formik.errors.flock_id as string}
+                  isDisabled={type === 'detail' || !formik.values.location_id}
+                  isClearable
+                  placeholder={
+                    !formik.values.location_id
+                      ? 'Pilih lokasi terlebih dahulu'
+                      : 'Pilih Flock'
+                  }
+                />
 
-                  <SelectInput
-                    key={`coop-select-${formik.values.flock_id || 'no-flock'}`}
-                    required
-                    label='Kandang'
-                    value={formik.values.coop ?? undefined}
-                    onChange={coopChangeHandler}
-                    options={coopOptions}
-                    isError={
-                      formik.touched.coop_id && Boolean(formik.errors.coop_id)
-                    }
-                    errorMessage={formik.errors.coop_id as string}
-                    isDisabled={type === 'detail' || !selectedProjectFlock}
-                    isClearable
-                    placeholder={
-                      !selectedProjectFlock
-                        ? 'Pilih flock terlebih dahulu'
-                        : 'Pilih Kandang'
-                    }
-                  />
-                </div>
+                <SelectInput
+                  key={`coop-select-${formik.values.flock_id || 'no-flock'}`}
+                  required
+                  label='Kandang'
+                  value={formik.values.coop ?? undefined}
+                  onChange={coopChangeHandler}
+                  options={coopOptions}
+                  isError={
+                    formik.touched.coop_id && Boolean(formik.errors.coop_id)
+                  }
+                  errorMessage={formik.errors.coop_id as string}
+                  isDisabled={type === 'detail' || !selectedProjectFlock}
+                  isClearable
+                  placeholder={
+                    !selectedProjectFlock
+                      ? 'Pilih flock terlebih dahulu'
+                      : 'Pilih Kandang'
+                  }
+                />
               </div>
             </div>
           </div>
@@ -689,7 +685,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             isDisabled={type === 'detail'}
                             isClearable
                             className={{
-                              wrapper: 'w-full min-w-24',
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
                             }}
                           />
                         </td>
@@ -1074,7 +1071,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                     productWarehouseId as number
                                   ) ?? '')
                                 : '';
-
                               formik.setFieldValue(
                                 `vaccination.${idx}.vaccine`,
                                 val
@@ -1111,7 +1107,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             isDisabled={type === 'detail'}
                             isClearable
                             className={{
-                              wrapper: 'w-full min-w-24',
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
                             }}
                           />
                         </td>
@@ -1306,6 +1303,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             options={RECORDING_FLAG_OPTIONS}
                             isDisabled={type === 'detail'}
                             isClearable
+                            className={{
+                              wrapper:
+                                'w-full min-w-52 md:min-w-72 lg:min-w-80',
+                            }}
                           />
                         </td>
                         <td>