diff --git a/components/ui/date-picker.tsx b/components/ui/date-picker.tsx
index 1e93c8b..ef7d11c 100644
--- a/components/ui/date-picker.tsx
+++ b/components/ui/date-picker.tsx
@@ -126,17 +126,15 @@ export function MonthPicker({ selectedMonth, onMonthChange, placeholder = "Pick
           <CalendarIcon className="mr-2 h-4 w-4" />
           {formatSelectedMonth(selectedMonth)}
           {selectedMonth && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="ml-auto h-6 w-6 p-0 hover:bg-transparent"
+            <div
+              className="ml-auto h-6 w-6 p-0 flex items-center justify-center rounded-sm hover:bg-accent cursor-pointer"
               onClick={(e) => {
                 e.stopPropagation()
                 onMonthChange?.(undefined)
               }}
             >
               <X className="h-3 w-3" />
-            </Button>
+            </div>
           )}
         </Button>
       </PopoverTrigger>
@@ -272,17 +270,15 @@ export function DateRangePicker({
           <CalendarIcon className="mr-2 h-4 w-4" />
           {formatDateRange(dateRange)}
           {dateRange?.from && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="ml-auto h-6 w-6 p-0 hover:bg-transparent"
+            <div
+              className="ml-auto h-6 w-6 p-0 flex items-center justify-center rounded-sm hover:bg-accent cursor-pointer"
               onClick={(e) => {
                 e.stopPropagation()
                 handleClear()
               }}
             >
               <X className="h-3 w-3" />
-            </Button>
+            </div>
           )}
         </Button>
       </PopoverTrigger>