diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx
index 9e2e61ad..96c172a2 100644
--- a/src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx
+++ b/src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx
@@ -205,11 +205,9 @@ const TransferToLayingFormModal = () => {
 
   const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
-  const selectedFlockSourceRawData = isResponseSuccess(flockSourceRawData)
-    ? flockSourceRawData.data.find(
-        (item) => item.id === formik.values.flockSource?.value
-      )
-    : undefined;
+  const [selectedFlockSourceRawData, setSelectedFlockSourceRawData] = useState<
+    ProjectFlock | undefined
+  >(undefined);
 
   const selectedFlockDestinationRawData = isResponseSuccess(
     flockDestinationRawData
@@ -375,467 +373,418 @@ const TransferToLayingFormModal = () => {
       }
     };
 
+    const getFlockSourceData = async () => {
+      if (transferToLayingId && isResponseSuccess(transferToLaying)) {
+        const singleFlockSourceRawData = await ProjectFlockApi.getSingle(
+          transferToLaying.data.from_project_flock.id
+        );
+
+        if (isResponseSuccess(singleFlockSourceRawData)) {
+          setSelectedFlockSourceRawData(singleFlockSourceRawData.data);
+        }
+      }
+    };
+
     getFilledInitialValues();
+    getFlockSourceData();
   }, [transferToLayingId, transferToLaying]);
 
+  useEffect(() => {
+    if (isResponseSuccess(flockSourceRawData)) {
+      const selectedFlockSourceRawData = flockSourceRawData.data.find(
+        (item) => item.id === formik.values.flockSource?.value
+      );
+
+      setSelectedFlockSourceRawData(selectedFlockSourceRawData);
+    }
+  }, [flockSourceRawData]);
+
   useEffect(() => {
     formik.setFieldValue('totalQuantity', totalTransferedChicken);
     formik.setFieldValue('maxTotalQuantity', totalTransferedChicken);
   }, [totalTransferedChicken]);
 
   return (
-    <Modal
-      ref={formModal.ref}
-      position='end'
-      className={{
-        modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
-      }}
-    >
-      <form
-        onSubmit={handleFormSubmit}
-        className='w-full min-h-full flex flex-col sm:flex-row items-stretch bg-base-100 rounded-xl overflow-y-auto'
+    <>
+      <Modal
+        ref={formModal.ref}
+        position='end'
+        className={{
+          modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
+        }}
       >
-        {/* 1st Section */}
-        <div className='w-full sm:w-[446px]'>
-          <div className='w-full p-4 flex flex-row items-stretch gap-3 border-b border-base-content/10'>
-            <Button
-              type='button'
-              variant='ghost'
-              color='none'
-              onClick={() => closeModalHandler()}
-              className='p-0 text-black hover:text-base-content'
-            >
-              <Icon icon='heroicons:x-mark' width={20} height={20} />
-            </Button>
-
-            <div className='w-px border-none bg-base-content/10' />
-
-            <h4 className='text-sm font-medium text-base-content/50'>
-              Add Transfer to Laying
-            </h4>
-          </div>
-
-          <div className='w-full p-4 flex flex-col'>
-            <h4 className='text-base font-medium text-base-content/50 font-roboto'>
-              Informasi Umum
-            </h4>
-
-            <DateInput
-              name='transfer_date'
-              label='Tanggal'
-              placeholder='Tanggal'
-              value={formik.values.transfer_date ?? ''}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={
-                formik.touched.transfer_date &&
-                Boolean(formik.errors.transfer_date)
-              }
-              errorMessage={formik.errors.transfer_date}
-              disabled={step > 2}
-            />
-
-            <SelectInputRadio
-              label='Flock Asal'
-              placeholder='Pilih Flock Asal'
-              value={formik.values.flockSource}
-              onChange={flockSourceChangeHandler}
-              options={flockSourceOptions}
-              isLoading={isLoadingFlockSourceOptions}
-              onInputChange={setFlockSourceInputValue}
-              onMenuScrollToBottom={loadMoreFlockSource}
-              isDisabled={step > 2}
-            />
-
-            <SelectInputRadio
-              label='Flock Tujuan'
-              placeholder='Pilih Flock Tujuan'
-              value={formik.values.flockDestination}
-              onChange={flockDestinationChangeHandler}
-              options={flockDestinationOptions}
-              isLoading={isLoadingFlockDestinationOptions}
-              onInputChange={setFlockDestinationInputValue}
-              onMenuScrollToBottom={loadMoreFlockDestination}
-              isDisabled={step > 2}
-            />
-          </div>
-
-          {step >= 2 && (
-            <>
-              <div className='w-full p-4 flex flex-col gap-3 border-y border-base-content/10'>
-                <h4 className='text-base font-medium text-base-content/50 font-roboto'>
-                  Pilih Kandang Asal
-                </h4>
-
-                <div className='w-fit flex flex-row items-stretch gap-3'>
-                  <StatusBadge
-                    color='info'
-                    text={`Tersedia (${mappedFlockSourceKandangsAvailabilityInfo.available})`}
-                    className={{ badge: 'text-nowrap' }}
-                  />
-
-                  <div className='w-px border-none bg-base-content/10' />
-
-                  <StatusBadge
-                    color='neutral'
-                    text={`Tidak Tersedia (${mappedFlockSourceKandangsAvailabilityInfo.unavailable})`}
-                    className={{ badge: 'text-nowrap' }}
-                  />
-                </div>
-
-                <div className='w-full rounded-xl border border-base-content/10'>
-                  {mappedFlockSourceKandangsAvailability.map(
-                    (item, itemIdx) => {
-                      const isAvailable = item.available_qty > 0;
-                      const isChecked = formik.values.flockSourceKandangs.some(
-                        (k) => k.kandang.value === item.project_flock_kandang_id
-                      );
-
-                      const flockSourceKandangCheckboxChangeHandler: FormEventHandler<
-                        HTMLInputElement
-                      > = (e) => {
-                        const checked = (e.target as HTMLInputElement).checked;
-                        if (checked) {
-                          formik.setFieldValue('flockSourceKandangs', [
-                            ...formik.values.flockSourceKandangs,
-                            {
-                              kandang: {
-                                value: item.project_flock_kandang_id,
-                                label: item.kandang_name,
-                              },
-                              quantity: '',
-                              maxQuantity: item.available_qty,
-                            },
-                          ]);
-                        } else {
-                          formik.setFieldValue(
-                            'flockSourceKandangs',
-                            formik.values.flockSourceKandangs.filter(
-                              (k) =>
-                                k.kandang.value !==
-                                item.project_flock_kandang_id
-                            )
-                          );
-                        }
-                      };
-
-                      return (
-                        <div
-                          key={itemIdx}
-                          className='w-full p-3 flex flex-row items-center justify-between'
-                        >
-                          <div className='flex flex-row items-center gap-3'>
-                            <CheckboxInput
-                              name={`flockSourceKandang.${itemIdx}.value`}
-                              value={item.project_flock_kandang_id}
-                              checked={isChecked}
-                              onChange={flockSourceKandangCheckboxChangeHandler}
-                              size='md'
-                              disabled={!isAvailable}
-                              classNames={{
-                                checkbox: cn({
-                                  'bg-base-200 border border-base-content/10 opacity-100':
-                                    !isAvailable,
-                                }),
-                              }}
-                            />
-
-                            <label
-                              htmlFor={`flockSourceKandang.${itemIdx}.value`}
-                              className={cn('text-sm text-base-content/50', {
-                                'cursor-pointer': isAvailable,
-                                'cursor-not-allowed': !isAvailable,
-                              })}
-                            >
-                              {item.kandang_name}{' '}
-                              <span className='text-base-content/20'>{`(Max: ${item.available_qty})`}</span>
-                            </label>
-                          </div>
-
-                          <StatusBadge
-                            color={isAvailable ? 'info' : 'neutral'}
-                            text={isAvailable ? 'Tersedia' : 'Tidak Tersedia'}
-                            className={{ badge: 'w-fit' }}
-                          />
-                        </div>
-                      );
-                    }
-                  )}
-                </div>
-              </div>
-
-              <div className='w-full p-4 flex flex-col gap-3'>
-                <div className='flex flex-row items-center justify-between'>
-                  <h4 className='text-base font-medium text-base-content/50 font-roboto'>
-                    Pilih Kandang Tujuan
-                  </h4>
-                  {formik.touched.flockDestinationKandangs &&
-                    formik.errors.flockDestinationKandangs &&
-                    typeof formik.errors.flockDestinationKandangs ===
-                      'string' && (
-                      <span className='text-xs text-error'>
-                        {formik.errors.flockDestinationKandangs}
-                      </span>
-                    )}
-                </div>
-
-                <div className='w-fit flex flex-row items-stretch gap-3'>
-                  <StatusBadge
-                    color='info'
-                    text={`Tersedia (${mappedFlockDestinationKandangsAvailabilityInfo.available})`}
-                    className={{ badge: 'text-nowrap' }}
-                  />
-
-                  <div className='w-px border-none bg-base-content/10' />
-
-                  <StatusBadge
-                    color='neutral'
-                    text={`Tidak Tersedia (${mappedFlockDestinationKandangsAvailabilityInfo.unavailable})`}
-                    className={{ badge: 'text-nowrap' }}
-                  />
-                </div>
-
-                <div className='w-full rounded-xl border border-base-content/10'>
-                  {selectedFlockDestinationRawData?.kandangs.map(
-                    (item, itemIdx) => {
-                      // TODO: change this to real available quota later
-                      const isAvailable = item.capacity > 0;
-                      const isChecked =
-                        formik.values.flockDestinationKandangs.some(
-                          (k) =>
-                            k.kandang.value === item.project_flock_kandang_id
-                        );
-
-                      const flockDestinationKandangCheckboxChangeHandler: FormEventHandler<
-                        HTMLInputElement
-                      > = (e) => {
-                        const checked = (e.target as HTMLInputElement).checked;
-                        if (checked) {
-                          formik.setFieldValue('flockDestinationKandangs', [
-                            ...formik.values.flockDestinationKandangs,
-                            {
-                              kandang: {
-                                value: item.project_flock_kandang_id,
-                                label: item.name,
-                              },
-                              quantity: '',
-                              // TODO: change this to real available quota later
-                              maxQuantity: item.capacity,
-                            },
-                          ]);
-                        } else {
-                          formik.setFieldValue(
-                            'flockDestinationKandangs',
-                            formik.values.flockDestinationKandangs.filter(
-                              (k) =>
-                                k.kandang.value !==
-                                item.project_flock_kandang_id
-                            )
-                          );
-                        }
-                      };
-
-                      return (
-                        <div
-                          key={itemIdx}
-                          className='w-full p-3 flex flex-row items-center justify-between'
-                        >
-                          <div className='flex flex-row items-center gap-3'>
-                            <CheckboxInput
-                              name={`flockDestinationKandang.${itemIdx}.value`}
-                              value={item.project_flock_kandang_id}
-                              checked={isChecked}
-                              onChange={
-                                flockDestinationKandangCheckboxChangeHandler
-                              }
-                              size='md'
-                              disabled={!isAvailable}
-                              classNames={{
-                                checkbox: cn({
-                                  'bg-base-200 border border-base-content/10 opacity-100':
-                                    !isAvailable,
-                                }),
-                              }}
-                            />
-
-                            <label
-                              htmlFor={`flockDestinationKandang.${itemIdx}.value`}
-                              className={cn('text-sm text-base-content/50', {
-                                'cursor-pointer': isAvailable,
-                                'cursor-not-allowed': !isAvailable,
-                              })}
-                            >
-                              {item.name}{' '}
-                              {/* TODO: change this to real available quota later */}
-                              <span className='text-base-content/20'>{`(Max: ${item.capacity})`}</span>
-                            </label>
-                          </div>
-
-                          <StatusBadge
-                            color={isAvailable ? 'info' : 'neutral'}
-                            text={isAvailable ? 'Tersedia' : 'Tidak Tersedia'}
-                            className={{ badge: 'w-fit' }}
-                          />
-                        </div>
-                      );
-                    }
-                  )}
-                </div>
-              </div>
-            </>
-          )}
-
-          <div className='w-full p-4 border-t border-base-content/10'>
-            {step < 3 && (
-              <Button
-                type='button'
-                onClick={nextButtonHandler}
-                disabled={isNextButtonDisabled}
-                className='w-full p-3 rounded-lg text-sm text-base-100'
-              >
-                Next
-              </Button>
-            )}
-          </div>
-        </div>
-
-        {/* 2nd Section */}
-        {step === 3 && (
-          <div className='w-full sm:w-[446px] border-l border-base-content/10'>
-            <div className='w-full p-4 flex flex-row items-center justify-between gap-3 border-b border-base-content/10'>
-              <h4 className='text-sm font-medium text-base-content/50'>
-                Tambah Kuantitas
-              </h4>
-
+        <form
+          onSubmit={handleFormSubmit}
+          className='w-full min-h-full flex flex-col sm:flex-row items-stretch bg-base-100 rounded-xl overflow-y-auto'
+        >
+          {/* 1st Section */}
+          <div className='w-full sm:w-[446px]'>
+            <div className='w-full p-4 flex flex-row items-stretch gap-3 border-b border-base-content/10'>
               <Button
                 type='button'
                 variant='ghost'
                 color='none'
-                onClick={deleteEnteredKandangHandler}
-                className='p-0 text-error'
+                onClick={() => closeModalHandler()}
+                className='p-0 text-black hover:text-base-content'
               >
-                <Icon icon='heroicons:trash' width={20} height={20} />
+                <Icon icon='heroicons:x-mark' width={20} height={20} />
               </Button>
+
+              <div className='w-px border-none bg-base-content/10' />
+
+              <h4 className='text-sm font-medium text-base-content/50'>
+                Add Transfer to Laying
+              </h4>
             </div>
 
             <div className='w-full p-4 flex flex-col'>
               <h4 className='text-base font-medium text-base-content/50 font-roboto'>
-                Informasi Kandang
+                Informasi Umum
               </h4>
 
-              {/* Source Kandang */}
-              <div className='flex flex-col'>
-                <span className='w-full py-2 text-xs font-semibold'>
-                  Kandang Asal
-                </span>
+              <DateInput
+                name='transfer_date'
+                label='Tanggal'
+                placeholder='Tanggal'
+                value={formik.values.transfer_date ?? ''}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                isError={
+                  formik.touched.transfer_date &&
+                  Boolean(formik.errors.transfer_date)
+                }
+                errorMessage={formik.errors.transfer_date}
+                disabled={step > 2}
+              />
 
-                {formik.values.flockSourceKandangs.length === 0 && (
-                  <span className='text-sm text-base-content/50 italic'>
-                    Belum ada kandang asal yang dipilih
-                  </span>
-                )}
+              <SelectInputRadio
+                label='Flock Asal'
+                placeholder='Pilih Flock Asal'
+                value={formik.values.flockSource}
+                onChange={flockSourceChangeHandler}
+                options={flockSourceOptions}
+                isLoading={isLoadingFlockSourceOptions}
+                onInputChange={setFlockSourceInputValue}
+                onMenuScrollToBottom={loadMoreFlockSource}
+                isDisabled={step > 2}
+              />
 
-                {formik.values.flockSourceKandangs.length > 0 && (
-                  <div className='flex flex-col gap-3'>
-                    {formik.values.flockSourceKandangs.map((item, index) => {
-                      const isInvalid =
-                        item.quantity === ''
-                          ? false
-                          : Boolean(
-                              getIn(
-                                formik.errors,
-                                `flockSourceKandangs[${index}].quantity`
+              <SelectInputRadio
+                label='Flock Tujuan'
+                placeholder='Pilih Flock Tujuan'
+                value={formik.values.flockDestination}
+                onChange={flockDestinationChangeHandler}
+                options={flockDestinationOptions}
+                isLoading={isLoadingFlockDestinationOptions}
+                onInputChange={setFlockDestinationInputValue}
+                onMenuScrollToBottom={loadMoreFlockDestination}
+                isDisabled={step > 2}
+              />
+            </div>
+
+            {step >= 2 && (
+              <>
+                <div className='w-full p-4 flex flex-col gap-3 border-y border-base-content/10'>
+                  <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                    Pilih Kandang Asal
+                  </h4>
+
+                  <div className='w-fit flex flex-row items-stretch gap-3'>
+                    <StatusBadge
+                      color='info'
+                      text={`Tersedia (${mappedFlockSourceKandangsAvailabilityInfo.available})`}
+                      className={{ badge: 'text-nowrap' }}
+                    />
+
+                    <div className='w-px border-none bg-base-content/10' />
+
+                    <StatusBadge
+                      color='neutral'
+                      text={`Tidak Tersedia (${mappedFlockSourceKandangsAvailabilityInfo.unavailable})`}
+                      className={{ badge: 'text-nowrap' }}
+                    />
+                  </div>
+
+                  <div className='w-full rounded-xl border border-base-content/10'>
+                    {mappedFlockSourceKandangsAvailability.map(
+                      (item, itemIdx) => {
+                        const isAvailable = item.available_qty > 0;
+                        const isChecked =
+                          formik.values.flockSourceKandangs.some(
+                            (k) =>
+                              k.kandang.value === item.project_flock_kandang_id
+                          );
+
+                        const flockSourceKandangCheckboxChangeHandler: FormEventHandler<
+                          HTMLInputElement
+                        > = (e) => {
+                          const checked = (e.target as HTMLInputElement)
+                            .checked;
+                          if (checked) {
+                            formik.setFieldValue('flockSourceKandangs', [
+                              ...formik.values.flockSourceKandangs,
+                              {
+                                kandang: {
+                                  value: item.project_flock_kandang_id,
+                                  label: item.kandang_name,
+                                },
+                                quantity: '',
+                                maxQuantity: item.available_qty,
+                              },
+                            ]);
+                          } else {
+                            formik.setFieldValue(
+                              'flockSourceKandangs',
+                              formik.values.flockSourceKandangs.filter(
+                                (k) =>
+                                  k.kandang.value !==
+                                  item.project_flock_kandang_id
                               )
                             );
-
-                      const errorMessage = getIn(
-                        formik.errors,
-                        `flockSourceKandangs[${index}].quantity`
-                      );
-
-                      return (
-                        <NumberInput
-                          key={`flockSourceKandangs-${item.kandang.value}-${index}`}
-                          name={`flockSourceKandangs.${index}.quantity`}
-                          placeholder='Masukkan Kuantitas'
-                          value={item.quantity}
-                          onChange={formik.handleChange}
-                          isError={isInvalid}
-                          errorMessage={errorMessage}
-                          inputPrefix={
-                            <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-5'>
-                              <span
-                                title={item.kandang.label}
-                                className='text-sm text-base-content self-center text-nowrap truncate'
-                              >
-                                {item.kandang.label}
-                              </span>
-
-                              <div className='w-px bg-base-content/10' />
-                            </div>
                           }
-                          className={{
-                            inputPrefix:
-                              'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
-                            inputPrefixSuffixWrapper: 'grid grid-cols-2',
-                            inputWrapper: 'border-l-0 pl-5',
-                          }}
-                        />
-                      );
-                    })}
+                        };
+
+                        return (
+                          <div
+                            key={itemIdx}
+                            className='w-full p-3 flex flex-row items-center justify-between'
+                          >
+                            <div className='flex flex-row items-center gap-3'>
+                              <CheckboxInput
+                                name={`flockSourceKandang.${itemIdx}.value`}
+                                value={item.project_flock_kandang_id}
+                                checked={isChecked}
+                                onChange={
+                                  flockSourceKandangCheckboxChangeHandler
+                                }
+                                size='md'
+                                disabled={!isAvailable}
+                                classNames={{
+                                  checkbox: cn({
+                                    'bg-base-200 border border-base-content/10 opacity-100':
+                                      !isAvailable,
+                                  }),
+                                }}
+                              />
+
+                              <label
+                                htmlFor={`flockSourceKandang.${itemIdx}.value`}
+                                className={cn('text-sm text-base-content/50', {
+                                  'cursor-pointer': isAvailable,
+                                  'cursor-not-allowed': !isAvailable,
+                                })}
+                              >
+                                {item.kandang_name}{' '}
+                                <span className='text-base-content/20'>{`(Max: ${item.available_qty})`}</span>
+                              </label>
+                            </div>
+
+                            <StatusBadge
+                              color={isAvailable ? 'info' : 'neutral'}
+                              text={isAvailable ? 'Tersedia' : 'Tidak Tersedia'}
+                              className={{ badge: 'w-fit' }}
+                            />
+                          </div>
+                        );
+                      }
+                    )}
                   </div>
-                )}
+                </div>
+
+                <div className='w-full p-4 flex flex-col gap-3'>
+                  <div className='flex flex-row items-center justify-between'>
+                    <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                      Pilih Kandang Tujuan
+                    </h4>
+                    {formik.touched.flockDestinationKandangs &&
+                      formik.errors.flockDestinationKandangs &&
+                      typeof formik.errors.flockDestinationKandangs ===
+                        'string' && (
+                        <span className='text-xs text-error'>
+                          {formik.errors.flockDestinationKandangs}
+                        </span>
+                      )}
+                  </div>
+
+                  <div className='w-fit flex flex-row items-stretch gap-3'>
+                    <StatusBadge
+                      color='info'
+                      text={`Tersedia (${mappedFlockDestinationKandangsAvailabilityInfo.available})`}
+                      className={{ badge: 'text-nowrap' }}
+                    />
+
+                    <div className='w-px border-none bg-base-content/10' />
+
+                    <StatusBadge
+                      color='neutral'
+                      text={`Tidak Tersedia (${mappedFlockDestinationKandangsAvailabilityInfo.unavailable})`}
+                      className={{ badge: 'text-nowrap' }}
+                    />
+                  </div>
+
+                  <div className='w-full rounded-xl border border-base-content/10'>
+                    {selectedFlockDestinationRawData?.kandangs.map(
+                      (item, itemIdx) => {
+                        // TODO: change this to real available quota later
+                        const isAvailable = item.capacity > 0;
+                        const isChecked =
+                          formik.values.flockDestinationKandangs.some(
+                            (k) =>
+                              k.kandang.value === item.project_flock_kandang_id
+                          );
+
+                        const flockDestinationKandangCheckboxChangeHandler: FormEventHandler<
+                          HTMLInputElement
+                        > = (e) => {
+                          const checked = (e.target as HTMLInputElement)
+                            .checked;
+                          if (checked) {
+                            formik.setFieldValue('flockDestinationKandangs', [
+                              ...formik.values.flockDestinationKandangs,
+                              {
+                                kandang: {
+                                  value: item.project_flock_kandang_id,
+                                  label: item.name,
+                                },
+                                quantity: '',
+                                // TODO: change this to real available quota later
+                                maxQuantity: item.capacity,
+                              },
+                            ]);
+                          } else {
+                            formik.setFieldValue(
+                              'flockDestinationKandangs',
+                              formik.values.flockDestinationKandangs.filter(
+                                (k) =>
+                                  k.kandang.value !==
+                                  item.project_flock_kandang_id
+                              )
+                            );
+                          }
+                        };
+
+                        return (
+                          <div
+                            key={itemIdx}
+                            className='w-full p-3 flex flex-row items-center justify-between'
+                          >
+                            <div className='flex flex-row items-center gap-3'>
+                              <CheckboxInput
+                                name={`flockDestinationKandang.${itemIdx}.value`}
+                                value={item.project_flock_kandang_id}
+                                checked={isChecked}
+                                onChange={
+                                  flockDestinationKandangCheckboxChangeHandler
+                                }
+                                size='md'
+                                disabled={!isAvailable}
+                                classNames={{
+                                  checkbox: cn({
+                                    'bg-base-200 border border-base-content/10 opacity-100':
+                                      !isAvailable,
+                                  }),
+                                }}
+                              />
+
+                              <label
+                                htmlFor={`flockDestinationKandang.${itemIdx}.value`}
+                                className={cn('text-sm text-base-content/50', {
+                                  'cursor-pointer': isAvailable,
+                                  'cursor-not-allowed': !isAvailable,
+                                })}
+                              >
+                                {item.name}{' '}
+                                {/* TODO: change this to real available quota later */}
+                                <span className='text-base-content/20'>{`(Max: ${item.capacity})`}</span>
+                              </label>
+                            </div>
+
+                            <StatusBadge
+                              color={isAvailable ? 'info' : 'neutral'}
+                              text={isAvailable ? 'Tersedia' : 'Tidak Tersedia'}
+                              className={{ badge: 'w-fit' }}
+                            />
+                          </div>
+                        );
+                      }
+                    )}
+                  </div>
+                </div>
+              </>
+            )}
+
+            <div className='w-full p-4 border-t border-base-content/10'>
+              {step < 3 && (
+                <Button
+                  type='button'
+                  onClick={nextButtonHandler}
+                  disabled={isNextButtonDisabled}
+                  className='w-full p-3 rounded-lg text-sm text-base-100'
+                >
+                  Next
+                </Button>
+              )}
+            </div>
+          </div>
+
+          {/* 2nd Section */}
+          {step === 3 && (
+            <div className='w-full sm:w-[446px] border-l border-base-content/10'>
+              <div className='w-full p-4 flex flex-row items-center justify-between gap-3 border-b border-base-content/10'>
+                <h4 className='text-sm font-medium text-base-content/50'>
+                  Tambah Kuantitas
+                </h4>
+
+                <Button
+                  type='button'
+                  variant='ghost'
+                  color='none'
+                  onClick={deleteEnteredKandangHandler}
+                  className='p-0 text-error'
+                >
+                  <Icon icon='heroicons:trash' width={20} height={20} />
+                </Button>
               </div>
 
-              {/* Destination Kandang */}
-              <div className='mt-3 flex flex-col'>
-                <span className='w-fit py-2 text-xs font-semibold flex flex-row items-center gap-3'>
-                  <span className='text-nowrap'>Kandang Tujuan</span>
+              <div className='w-full p-4 flex flex-col'>
+                <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                  Informasi Kandang
+                </h4>
 
-                  <div className='w-px h-5 bg-base-content/10' />
-
-                  <StatusBadge
-                    color={
-                      totalAvailableChickenForTransfer < 0 ? 'error' : 'neutral'
-                    }
-                    text={`Sisa ayam: ${formatNumber(
-                      totalAvailableChickenForTransfer
-                    )} ekor`}
-                    className={{
-                      badge: 'text-nowrap',
-                    }}
-                  />
-                </span>
-
-                {formik.values.flockDestinationKandangs.length === 0 && (
-                  <span className='text-sm text-base-content/50 italic'>
-                    Belum ada kandang tujuan yang dipilih
+                {/* Source Kandang */}
+                <div className='flex flex-col'>
+                  <span className='w-full py-2 text-xs font-semibold'>
+                    Kandang Asal
                   </span>
-                )}
 
-                {formik.values.flockDestinationKandangs.length > 0 && (
-                  <div className='flex flex-col gap-3'>
-                    {formik.values.flockDestinationKandangs.map(
-                      (item, index) => {
+                  {formik.values.flockSourceKandangs.length === 0 && (
+                    <span className='text-sm text-base-content/50 italic'>
+                      Belum ada kandang asal yang dipilih
+                    </span>
+                  )}
+
+                  {formik.values.flockSourceKandangs.length > 0 && (
+                    <div className='flex flex-col gap-3'>
+                      {formik.values.flockSourceKandangs.map((item, index) => {
                         const isInvalid =
                           item.quantity === ''
                             ? false
                             : Boolean(
                                 getIn(
                                   formik.errors,
-                                  `flockDestinationKandangs[${index}].quantity`
+                                  `flockSourceKandangs[${index}].quantity`
                                 )
                               );
 
                         const errorMessage = getIn(
                           formik.errors,
-                          `flockDestinationKandangs[${index}].quantity`
+                          `flockSourceKandangs[${index}].quantity`
                         );
 
                         return (
                           <NumberInput
-                            key={`flockDestinationKandangs-${item.kandang.value}-${index}`}
-                            name={`flockDestinationKandangs.${index}.quantity`}
+                            key={`flockSourceKandangs-${item.kandang.value}-${index}`}
+                            name={`flockSourceKandangs.${index}.quantity`}
                             placeholder='Masukkan Kuantitas'
                             value={item.quantity}
                             onChange={formik.handleChange}
@@ -861,79 +810,161 @@ const TransferToLayingFormModal = () => {
                             }}
                           />
                         );
+                      })}
+                    </div>
+                  )}
+                </div>
+
+                {/* Destination Kandang */}
+                <div className='mt-3 flex flex-col'>
+                  <span className='w-fit py-2 text-xs font-semibold flex flex-row items-center gap-3'>
+                    <span className='text-nowrap'>Kandang Tujuan</span>
+
+                    <div className='w-px h-5 bg-base-content/10' />
+
+                    <StatusBadge
+                      color={
+                        totalAvailableChickenForTransfer < 0
+                          ? 'error'
+                          : 'neutral'
                       }
-                    )}
+                      text={`Sisa ayam: ${formatNumber(
+                        totalAvailableChickenForTransfer
+                      )} ekor`}
+                      className={{
+                        badge: 'text-nowrap',
+                      }}
+                    />
+                  </span>
+
+                  {formik.values.flockDestinationKandangs.length === 0 && (
+                    <span className='text-sm text-base-content/50 italic'>
+                      Belum ada kandang tujuan yang dipilih
+                    </span>
+                  )}
+
+                  {formik.values.flockDestinationKandangs.length > 0 && (
+                    <div className='flex flex-col gap-3'>
+                      {formik.values.flockDestinationKandangs.map(
+                        (item, index) => {
+                          const isInvalid =
+                            item.quantity === ''
+                              ? false
+                              : Boolean(
+                                  getIn(
+                                    formik.errors,
+                                    `flockDestinationKandangs[${index}].quantity`
+                                  )
+                                );
+
+                          const errorMessage = getIn(
+                            formik.errors,
+                            `flockDestinationKandangs[${index}].quantity`
+                          );
+
+                          return (
+                            <NumberInput
+                              key={`flockDestinationKandangs-${item.kandang.value}-${index}`}
+                              name={`flockDestinationKandangs.${index}.quantity`}
+                              placeholder='Masukkan Kuantitas'
+                              value={item.quantity}
+                              onChange={formik.handleChange}
+                              isError={isInvalid}
+                              errorMessage={errorMessage}
+                              inputPrefix={
+                                <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-5'>
+                                  <span
+                                    title={item.kandang.label}
+                                    className='text-sm text-base-content self-center text-nowrap truncate'
+                                  >
+                                    {item.kandang.label}
+                                  </span>
+
+                                  <div className='w-px bg-base-content/10' />
+                                </div>
+                              }
+                              className={{
+                                inputPrefix:
+                                  'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
+                                inputPrefixSuffixWrapper: 'grid grid-cols-2',
+                                inputWrapper: 'border-l-0 pl-5',
+                              }}
+                            />
+                          );
+                        }
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className='w-full p-4 flex flex-col border-y border-base-content/10'>
+                <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                  Informasi Umum
+                </h4>
+
+                <NumberInput
+                  name='totalQuantity'
+                  label='Jumlah Transfer'
+                  placeholder='Total Kuantitas Transfer'
+                  value={formik.values.totalQuantity}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                  isError={totalAvailableChickenForTransfer < 0}
+                  errorMessage={
+                    totalAvailableChickenForTransfer < 0
+                      ? 'Jumlah transfer melebihi ketersediaan'
+                      : ''
+                  }
+                  disabled
+                />
+
+                <TextArea
+                  name='reason'
+                  label='Catatan'
+                  placeholder='Alasan Transfer'
+                  rows={4}
+                  value={formik.values.reason}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                  isError={
+                    Boolean(formik.touched.reason) &&
+                    Boolean(formik.errors.reason)
+                  }
+                  errorMessage={formik.errors.reason}
+                />
+              </div>
+
+              <div className='w-full p-4 self-end flex flex-col gap-3'>
+                {formErrorMessage && (
+                  <div role='alert' className='alert alert-error w-full'>
+                    <Icon
+                      icon='material-symbols:error-outline'
+                      width={24}
+                      height={24}
+                    />
+                    <span>{formErrorMessage}</span>
                   </div>
                 )}
+
+                <AlertErrorList formErrorList={formErrorList} onClose={close} />
+
+                <Button
+                  type='submit'
+                  disabled={
+                    formik.isSubmitting || totalAvailableChickenForTransfer < 0
+                  }
+                  isLoading={formik.isSubmitting}
+                  className='w-full p-3 rounded-lg text-sm text-base-100'
+                >
+                  Submit
+                </Button>
               </div>
             </div>
-
-            <div className='w-full p-4 flex flex-col border-y border-base-content/10'>
-              <h4 className='text-base font-medium text-base-content/50 font-roboto'>
-                Informasi Umum
-              </h4>
-
-              <NumberInput
-                name='totalQuantity'
-                label='Jumlah Transfer'
-                placeholder='Total Kuantitas Transfer'
-                value={formik.values.totalQuantity}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                isError={totalAvailableChickenForTransfer < 0}
-                errorMessage={
-                  totalAvailableChickenForTransfer < 0
-                    ? 'Jumlah transfer melebihi ketersediaan'
-                    : ''
-                }
-                disabled
-              />
-
-              <TextArea
-                name='reason'
-                label='Catatan'
-                placeholder='Alasan Transfer'
-                rows={4}
-                value={formik.values.reason}
-                onChange={formik.handleChange}
-                onBlur={formik.handleBlur}
-                isError={
-                  Boolean(formik.touched.reason) &&
-                  Boolean(formik.errors.reason)
-                }
-                errorMessage={formik.errors.reason}
-              />
-            </div>
-
-            <div className='w-full p-4 self-end flex flex-col gap-3'>
-              {formErrorMessage && (
-                <div role='alert' className='alert alert-error w-full'>
-                  <Icon
-                    icon='material-symbols:error-outline'
-                    width={24}
-                    height={24}
-                  />
-                  <span>{formErrorMessage}</span>
-                </div>
-              )}
-
-              <AlertErrorList formErrorList={formErrorList} onClose={close} />
-
-              <Button
-                type='submit'
-                disabled={
-                  formik.isSubmitting || totalAvailableChickenForTransfer < 0
-                }
-                isLoading={formik.isSubmitting}
-                className='w-full p-3 rounded-lg text-sm text-base-100'
-              >
-                Submit
-              </Button>
-            </div>
-          </div>
-        )}
-      </form>
-    </Modal>
+          )}
+        </form>
+      </Modal>
+    </>
   );
 };