diff --git a/src/components/input/CheckboxInput.tsx b/src/components/input/CheckboxInput.tsx
index c3c5be0a..fb0c95c7 100644
--- a/src/components/input/CheckboxInput.tsx
+++ b/src/components/input/CheckboxInput.tsx
@@ -1,279 +1,87 @@
 'use client';
 
-import { ChangeEventHandler, FocusEventHandler, ReactNode, useId } from 'react';
-
+import { HTMLProps, useEffect, useRef } from 'react';
 import { cn } from '@/lib/helper';
-import FieldMessage from '@/components/helper/FieldMessage';
 
-export interface CheckboxInputProps {
-  // Basic Props
+interface CheckboxInputProps extends HTMLProps<HTMLInputElement> {
   name: string;
   label?: string;
-  bottomLabel?: string;
-  checked?: boolean;
-  value?: string | number;
   indeterminate?: boolean;
-  naked?: boolean; // New prop for checkbox-only mode
-
-  // Styling Props
-  className?: {
+  classNames?: {
     wrapper?: string;
-    label?: string;
+    inputWrapper?: string;
     checkbox?: string;
-    input?: string;
+    label?: string;
   };
-
-  // State Props
   isError?: boolean;
   isValid?: boolean;
   errorMessage?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  required?: boolean;
-  isLoading?: boolean;
-
-  // Adornment Props
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-
-  // Event Handlers
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-
-  // Additional Props
-  tooltip?: string;
-  description?: string;
-  size?: 'sm' | 'md' | 'lg';
-  variant?:
-    | 'default'
-    | 'primary'
-    | 'secondary'
-    | 'success'
-    | 'warning'
-    | 'info'
-    | 'error';
 }
 
 const CheckboxInput = ({
+  indeterminate,
   name,
   label,
-  bottomLabel,
-  checked = false,
-  value,
-  indeterminate = false,
-  naked = false,
   className,
+  classNames,
+  isValid,
   isError,
   errorMessage,
-  disabled = false,
-  readOnly = false,
-  required = false,
-  isLoading = false,
-  startAdornment,
-  endAdornment,
-  onChange,
-  onBlur,
-  onFocus,
-  tooltip,
-  description,
-  size = 'md',
-  variant = 'default',
+  ...rest
 }: CheckboxInputProps) => {
-  const showErrorMessage = Boolean(isError && errorMessage);
-  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
+  const ref = useRef<HTMLInputElement>(null!);
 
-  // Size classes
-  const sizeClasses = {
-    sm: 'checkbox-sm',
-    md: 'checkbox-md',
-    lg: 'checkbox-lg',
-  };
-
-  // Variant classes
-  const variantClasses = {
-    default: '',
-    primary: 'checkbox-primary',
-    secondary: 'checkbox-secondary',
-    success: 'checkbox-success',
-    warning: 'checkbox-warning',
-    info: 'checkbox-info',
-    error: 'checkbox-error',
-  };
-
-  // Generate unique ID for accessibility using React's useId hook for SSR compatibility
-  const generatedId = useId();
-  const checkboxId = `checkbox-${name}-${generatedId}`;
-
-  // Naked mode - only checkbox, no wrapper structure
-  if (naked) {
-    return (
-      <div className='relative'>
-        <input
-          type='checkbox'
-          id={checkboxId}
-          name={name}
-          value={value}
-          checked={checked}
-          onChange={onChange}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          disabled={disabled}
-          readOnly={readOnly}
-          className={cn(
-            'checkbox',
-            sizeClasses[size],
-            variantClasses[variant],
-            {
-              'opacity-50 cursor-not-allowed': disabled,
-              'cursor-pointer': !disabled && !readOnly,
-            },
-            className?.checkbox
-          )}
-          ref={(input) => {
-            if (input) {
-              input.indeterminate = indeterminate;
-            }
-          }}
-        />
-
-        {/* Loading State */}
-        {isLoading && (
-          <div className='absolute inset-0 flex items-center justify-center'>
-            <span className='loading loading-spinner loading-xs opacity-50' />
-          </div>
-        )}
-      </div>
-    );
-  }
+  useEffect(() => {
+    if (typeof indeterminate === 'boolean') {
+      ref.current.indeterminate = !rest.checked && indeterminate;
+    }
+  }, [ref, indeterminate]);
 
   return (
     <div
-      className={cn(
-        'w-full flex flex-col gap-2 text-start',
-        className?.wrapper
-      )}
+      className={cn('flex flex-col items-center gap-1', classNames?.wrapper)}
     >
-      {/* Label with Tooltip Support */}
-      {label && (
-        <label
-          htmlFor={checkboxId}
+      <div
+        className={cn(
+          'flex flex-row justify-center items-center gap-2',
+          classNames?.inputWrapper
+        )}
+      >
+        <input
+          type='checkbox'
+          ref={ref}
+          id={name}
+          name={name}
           className={cn(
-            'w-full text-sm font-normal leading-5 flex items-start gap-2',
+            'checkbox cursor-pointer',
             {
-              'text-error': isError,
-              'text-gray-500': disabled,
+              'border-error': isError,
+              'border-success': isValid,
             },
-            className?.label
+            className,
+            classNames?.checkbox
           )}
-        >
-          {/* Checkbox */}
-          <div className='flex items-center gap-2'>
-            {/* Start Adornment */}
-            {startAdornment && (
-              <span className={cn({ 'opacity-50': disabled })}>
-                {startAdornment}
-              </span>
+          {...rest}
+        />
+
+        {label && (
+          <label
+            htmlFor={name}
+            className={cn(
+              'text-inherit',
+              {
+                'text-error': isError,
+                'text-success': isValid,
+              },
+              classNames?.label
             )}
+          >
+            {label}
+          </label>
+        )}
+      </div>
 
-            {/* Checkbox Input */}
-            <div className='relative'>
-              <input
-                type='checkbox'
-                id={checkboxId}
-                name={name}
-                value={value}
-                checked={checked}
-                onChange={onChange}
-                onBlur={onBlur}
-                onFocus={onFocus}
-                disabled={disabled}
-                readOnly={readOnly}
-                className={cn(
-                  'checkbox',
-                  sizeClasses[size],
-                  variantClasses[variant],
-                  {
-                    'opacity-50 cursor-not-allowed': disabled,
-                    'cursor-pointer': !disabled && !readOnly,
-                  },
-                  className?.checkbox
-                )}
-                ref={(input) => {
-                  if (input) {
-                    input.indeterminate = indeterminate;
-                  }
-                }}
-              />
-
-              {/* Loading State */}
-              {isLoading && (
-                <div className='absolute inset-0 flex items-center justify-center'>
-                  <span className='loading loading-spinner loading-xs opacity-50' />
-                </div>
-              )}
-            </div>
-
-            {/* Label Text */}
-            <span
-              className={cn('flex-1', {
-                'line-through opacity-50': disabled,
-              })}
-            >
-              {label}
-              {required && (
-                <>
-                  {' '}
-                  <span
-                    className={cn('tooltip', {
-                      'tooltip-error': isError,
-                      'tooltip-base': !isError,
-                    })}
-                    data-tip={tooltip || 'required'}
-                  >
-                    <span
-                      className={cn('text-xs font-bold', {
-                        'text-error': isError,
-                        'text-base-content/70': !isError,
-                      })}
-                    >
-                      *
-                    </span>
-                  </span>
-                </>
-              )}
-            </span>
-
-            {/* End Adornment */}
-            {endAdornment && (
-              <span className={cn({ 'opacity-50': disabled })}>
-                {endAdornment}
-              </span>
-            )}
-          </div>
-        </label>
-      )}
-
-      {/* Description */}
-      {description && (
-        <p
-          className={cn('text-xs leading-4', {
-            'text-gray-500': !isError,
-            'text-error': isError,
-            'opacity-50': disabled,
-          })}
-        >
-          {description}
-        </p>
-      )}
-
-      {/* Error Message or Bottom Label */}
-      {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
-      )}
-      {isError && errorMessage && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
-      )}
+      {errorMessage && <span className='text-error'>{errorMessage}</span>}
     </div>
   );
 };
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 711b7d20..d2c91168 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -847,7 +847,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                   selectedProducts.length &&
                                 formik.values.products?.length > 0
                               }
-                              onChange={(e) => {
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
                                 if (e.target.checked) {
                                   setSelectedProducts(
                                     formik.values.products?.map(
@@ -858,8 +860,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                   setSelectedProducts([]);
                                 }
                               }}
-                              naked={true}
-                              size='sm'
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
+                              }}
                             />
                           </div>
                         </th>
@@ -890,11 +894,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       <tr key={`product-row-${idx}-${product.product_id}`}>
                         {type !== 'detail' && (
                           <td>
-                            <div className='flex flex-col items-center gap-2'>
+                            <div className='flex justify-center'>
                               <CheckboxInput
                                 name={`product-${idx}`}
                                 checked={selectedProducts.includes(idx)}
-                                onChange={(e) => {
+                                onChange={(
+                                  e: React.ChangeEvent<HTMLInputElement>
+                                ) => {
                                   if (e.target.checked) {
                                     setSelectedProducts([
                                       ...selectedProducts,
@@ -906,8 +912,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                     );
                                   }
                                 }}
-                                naked={true}
-                                size='sm'
+                                classNames={{
+                                  wrapper: 'flex justify-center',
+                                  checkbox: 'checkbox checkbox-sm',
+                                }}
                               />
                             </div>
                           </td>
@@ -1061,7 +1069,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                   selectedDeliveries.length &&
                                 formik.values.deliveries?.length > 0
                               }
-                              onChange={(e) => {
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
                                 if (e.target.checked) {
                                   setSelectedDeliveries(
                                     formik.values.deliveries?.map(
@@ -1072,8 +1082,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                   setSelectedDeliveries([]);
                                 }
                               }}
-                              naked={true}
-                              size='sm'
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
+                              }}
                             />
                           </div>
                         </th>
@@ -1150,11 +1162,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       <tr key={`delivery-row-${idx}`}>
                         {type !== 'detail' && (
                           <td>
-                            <div className='flex flex-col items-start gap-2'>
+                            <div className='flex justify-center'>
                               <CheckboxInput
                                 name={`delivery-${idx}`}
                                 checked={selectedDeliveries.includes(idx)}
-                                onChange={(e) => {
+                                onChange={(
+                                  e: React.ChangeEvent<HTMLInputElement>
+                                ) => {
                                   if (e.target.checked) {
                                     setSelectedDeliveries([
                                       ...selectedDeliveries,
@@ -1168,8 +1182,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                     );
                                   }
                                 }}
-                                naked={true}
-                                size='sm'
+                                classNames={{
+                                  wrapper: 'flex justify-center',
+                                  checkbox: 'checkbox checkbox-sm',
+                                }}
                               />
                             </div>
                           </td>
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index c654f2ba..2735a7e9 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -760,29 +760,30 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <tr>
                     {type !== 'detail' && (
                       <th>
-                        <div className='flex justify-center'>
-                          <CheckboxInput
-                            name='select-all-feed'
-                            checked={
-                              formik.values.feed_data?.length ===
-                                selectedFeed.length &&
-                              formik.values.feed_data?.length > 0
+                        <CheckboxInput
+                          name='select-all-feed'
+                          checked={
+                            formik.values.feed_data?.length ===
+                              selectedFeed.length &&
+                            formik.values.feed_data?.length > 0
+                          }
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            if (e.target.checked) {
+                              setSelectedFeed(
+                                formik.values.feed_data?.map((_, idx) => idx) ??
+                                  []
+                              );
+                            } else {
+                              setSelectedFeed([]);
                             }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedFeed(
-                                  formik.values.feed_data?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedFeed([]);
-                              }
-                            }}
-                            naked={true}
-                            size='sm'
-                          />
-                        </div>
+                          }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
+                        />
                       </th>
                     )}
                     <th>
@@ -812,11 +813,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr key={`feed-${idx}`}>
                       {type !== 'detail' && (
                         <td>
-                          <div className='flex flex-col items-center gap-2'>
+                          <div className='flex justify-center'>
                             <CheckboxInput
                               name={`feed-${idx}`}
                               checked={selectedFeed.includes(idx)}
-                              onChange={(e) => {
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
                                 if (e.target.checked) {
                                   setSelectedFeed([...selectedFeed, idx]);
                                 } else {
@@ -825,8 +828,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   );
                                 }
                               }}
-                              naked={true}
-                              size='sm'
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
+                              }}
                             />
                           </div>
                         </td>
@@ -1007,7 +1012,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 selectedWeight.length &&
                               formik.values.body_weight?.length > 0
                             }
-                            onChange={(e) => {
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
                               if (e.target.checked) {
                                 setSelectedWeight(
                                   formik.values.body_weight?.map(
@@ -1018,8 +1025,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 setSelectedWeight([]);
                               }
                             }}
-                            naked={true}
-                            size='sm'
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
                           />
                         </div>
                       </th>
@@ -1059,11 +1068,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr key={`weight-${idx}`}>
                       {type !== 'detail' && (
                         <td>
-                          <div className='flex flex-col items-center gap-2'>
+                          <div className='flex justify-center'>
                             <CheckboxInput
                               name={`weight-${idx}`}
                               checked={selectedWeight.includes(idx)}
-                              onChange={(e) => {
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
                                 if (e.target.checked) {
                                   setSelectedWeight([...selectedWeight, idx]);
                                 } else {
@@ -1072,8 +1083,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   );
                                 }
                               }}
-                              naked={true}
-                              size='sm'
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
+                              }}
                             />
                           </div>
                         </td>
@@ -1248,7 +1261,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 selectedVaccine.length &&
                               formik.values.vaccination?.length > 0
                             }
-                            onChange={(e) => {
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
                               if (e.target.checked) {
                                 setSelectedVaccine(
                                   formik.values.vaccination?.map(
@@ -1259,8 +1274,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 setSelectedVaccine([]);
                               }
                             }}
-                            naked={true}
-                            size='sm'
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
                           />
                         </div>
                       </th>
@@ -1292,11 +1309,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr key={`vaccine-${idx}`}>
                       {type !== 'detail' && (
                         <td>
-                          <div className='flex flex-col items-center gap-2'>
+                          <div className='flex justify-center'>
                             <CheckboxInput
                               name={`vaccine-${idx}`}
                               checked={selectedVaccine.includes(idx)}
-                              onChange={(e) => {
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
                                 if (e.target.checked) {
                                   setSelectedVaccine([...selectedVaccine, idx]);
                                 } else {
@@ -1305,8 +1324,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   );
                                 }
                               }}
-                              naked={true}
-                              size='sm'
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
+                              }}
                             />
                           </div>
                         </td>
@@ -1503,7 +1524,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 selectedMortality.length &&
                               formik.values.mortality?.length > 0
                             }
-                            onChange={(e) => {
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => {
                               if (e.target.checked) {
                                 setSelectedMortality(
                                   formik.values.mortality?.map(
@@ -1514,8 +1537,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 setSelectedMortality([]);
                               }
                             }}
-                            naked={true}
-                            size='sm'
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
                           />
                         </div>
                       </th>
@@ -1546,11 +1571,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     <tr key={`mortality-${idx}`}>
                       {type !== 'detail' && (
                         <td>
-                          <div className='flex flex-col items-center gap-2'>
+                          <div className='flex justify-center'>
                             <CheckboxInput
                               name={`mortality-${idx}`}
                               checked={selectedMortality.includes(idx)}
-                              onChange={(e) => {
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
                                 if (e.target.checked) {
                                   setSelectedMortality([
                                     ...selectedMortality,
@@ -1562,8 +1589,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                   );
                                 }
                               }}
-                              naked={true}
-                              size='sm'
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
+                              }}
                             />
                           </div>
                         </td>