diff --git a/packages/controlled-form/src/lib/Types.tsx b/packages/controlled-form/src/lib/Types.tsx
index 80278b1e1..14ca8bc4f 100644
--- a/packages/controlled-form/src/lib/Types.tsx
+++ b/packages/controlled-form/src/lib/Types.tsx
@@ -427,6 +427,7 @@ export const DatepickerPropsCategorized: DatepickerPropsObject = {
   disableOpenPicker: { table: { category: 'Input Props' } },
   placement: { table: { category: 'Input Props' } },
   clearable: { table: { category: 'Input Props' } },
+  onClear: { table: { category: 'Input Props' } }
 };
 
 export const CodesAutocompletePropsCategorized: CodesAutocompletePropsObject = {
diff --git a/packages/datepicker/src/lib/Datepicker.tsx b/packages/datepicker/src/lib/Datepicker.tsx
index 120c9f296..3b373600e 100644
--- a/packages/datepicker/src/lib/Datepicker.tsx
+++ b/packages/datepicker/src/lib/Datepicker.tsx
@@ -4,7 +4,7 @@ import { DatePicker as MuiDatePicker, DatePickerProps as MuiDatePickerProps } fr
 import type { Dayjs } from 'dayjs';
 import type {} from '@mui/x-date-pickers/AdapterDayjs';
 import { PickersTextField as MuiPickersTextField, PickersTextFieldProps as MuiPickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
-import { PickerFieldUISlotProps } from '@mui/x-date-pickers/internals';
+import { ExportedPickerFieldUIProps, PickerFieldUISlotProps } from '@mui/x-date-pickers/internals';
 import { FormHelperText, FormLabel, InputPropOverrides } from '@availity/mui-form-utils';
 import { forwardRef } from 'react';
 
@@ -18,9 +18,8 @@ export type DatepickerProps = {
    * @default bottom-start
    */
   placement?: 'bottom-start' | 'bottom' | 'bottom-end';
-  /** Determines if the clear button appears in the action bar */
-  clearable?: boolean;
-} & Omit<
+} & Pick<ExportedPickerFieldUIProps, 'onClear' | 'clearable'>
+  & Omit<
   MuiDatePickerProps<false>,
   | 'components'
   | 'componentsProps'
@@ -76,6 +75,7 @@ export const Datepicker = ({
   FieldProps,
   placement = 'bottom-start',
   clearable,
+  onClear,
   ...props
 }: DatepickerProps): React.JSX.Element => {
   return (
@@ -83,15 +83,13 @@ export const Datepicker = ({
       {...props}
       dayOfWeekFormatter={(weekday: Dayjs) => weekday.format('dd')}
       slotProps={{
-        actionBar: {
-          actions: clearable ? ['clear'] : [],
-        },
         desktopPaper: paperProps,
         mobilePaper: {
           ...paperProps,
           'aria-label': FieldProps?.label?.toString() || FieldProps?.inputProps?.['aria-label'] || 'Date picker',
           'aria-labelledby': FieldProps?.inputProps?.['aria-labelledby'] || undefined,
         },
+        field: { clearable, onClear },
         textField: FieldProps,
         popper: {
           placement,
diff --git a/packages/theme/src/lib/light-theme.ts b/packages/theme/src/lib/light-theme.ts
index a93c5a51d..e4bd0857f 100644
--- a/packages/theme/src/lib/light-theme.ts
+++ b/packages/theme/src/lib/light-theme.ts
@@ -1858,6 +1858,10 @@ export const lightTheme = {
             // padding: '8px',
             color: tokens.colorGrey400,
           },
+          '.MuiInputAdornment-root .MuiIconButton-root': {
+            width: '2.25rem',
+            height: '2.25rem',
+          },
         },
       },
     },