diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index d728d73c..a18921e3 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -2624,9 +2624,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           )}
 
           {/* Action buttons */}
-          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+          <div className='flex flex-col sm:flex-row sm:justify-between gap-2'>
             {/* Left side - Detail & Edit actions */}
-            <div className='flex flex-row justify-start gap-2'>
+            <div className='flex flex-col sm:flex-row justify-start gap-2 w-full sm:w-auto'>
               {type === 'detail' && deleteRecordingClickHandler && (
                 <Button
                   type='button'
@@ -2660,7 +2660,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 </Button>
               )}
             </div>
-            <div className='flex flex-row justify-end gap-2'>
+            {/* Right side actions */}
+            <div className='flex flex-col sm:flex-row sm:justify-end gap-2 w-full sm:w-auto'>
               {type === 'detail' && isLayingCategory && (
                 <Tooltip
                   content={
@@ -2668,7 +2669,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       ? 'Lanjut ke proses grading untuk telur konsumsi baik'
                       : 'Hanya bisa melanjutkan ke grading jika ada Telur Konsumsi Baik'
                   }
-                  position='top'
+                  position='left'
                   color={
                     hasConsumableEggsInCurrentRecording ? 'info' : 'warning'
                   }
@@ -2677,6 +2678,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     type='button'
                     color='primary'
                     disabled={!hasConsumableEggsInCurrentRecording}
+                    className='w-full sm:w-auto'
                     onClick={() => {
                       const recordingId =
                         newRecordingData?.id || initialValues?.id;
@@ -2701,7 +2703,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               )}
 
               {type === 'edit' && (
-                <>
+                <div className='flex flex-col sm:flex-row gap-2 w-full sm:w-auto'>
                   <Button
                     type='reset'
                     color='warning'
@@ -2724,11 +2726,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   >
                     Submit
                   </Button>
-                </>
+                </div>
               )}
 
               {type === 'add' && (
-                <>
+                <div className='flex flex-col sm:flex-row gap-2 w-full sm:w-auto'>
                   <Button
                     type='reset'
                     color='warning'
@@ -2758,7 +2760,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           ? 'Lanjut ke proses grading untuk telur konsumsi baik'
                           : 'Hanya bisa melanjutkan ke grading jika ada Telur Konsumsi Baik'
                       }
-                      position='top'
+                      position='left'
                       color={hasConsumableEggs ? 'info' : 'warning'}
                     >
                       <Button
@@ -2824,7 +2826,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       </Button>
                     </Tooltip>
                   )}
-                </>
+                </div>
               )}
             </div>
           </div>