diff --git a/src/components/UsageCalendar.tsx b/src/components/UsageCalendar.tsx
index 4c1d054..a9b1974 100644
--- a/src/components/UsageCalendar.tsx
+++ b/src/components/UsageCalendar.tsx
@@ -213,9 +213,6 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
   return (
     <>
       <Card className="bg-card/80 backdrop-blur-xl shadow-xl drop-shadow-lg hover-lift transition-all duration-300 border-white/10 overflow-hidden">
-        <CardHeader>
-          <CardTitle>Usage Calendar</CardTitle>
-        </CardHeader>
         <CardContent className="p-1 sm:p-6">
           <div className="flex flex-col lg:flex-row gap-4">
             {/* Calendar */}
@@ -228,10 +225,15 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
                 showOutsideDays={false}
                 components={{
                   DayButton: CustomDayButton,
-                  Chevron: ({ orientation }) =>
-                    orientation === 'left'
-                      ? <ChevronLeftIcon className="h-4 w-4" />
-                      : <ChevronRightIcon className="h-4 w-4" />,
+                  Chevron: ({ orientation }) => (
+                    <div className={`p-1.5 rounded-full border ${theme === 'light' ? 'bg-white/50 border-slate-200/60 shadow-sm' : 'bg-slate-800/50 border-slate-700/60 shadow-sm'}`}>
+                      {orientation === 'left' ? (
+                        <ChevronLeftIcon className="h-4 w-4" />
+                      ) : (
+                        <ChevronRightIcon className="h-4 w-4" />
+                      )}
+                    </div>
+                  ),
                 }}
               />
             </div>