diff --git a/src/app/globals.css b/src/app/globals.css
index 33f7277..f076455 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -219,14 +219,14 @@
   /* Calendar styling - optimize cell size */
   .rdp {
     --rdp-cell-size: 40px;
-    width: 100%;
   }
 
   /* Make calendar fill available space on mobile */
   @media (max-width: 640px) {
     .rdp {
-      --rdp-cell-size: calc((100vw - 80px) / 7);
+      --rdp-cell-size: calc((100vw - 60px) / 7);
       font-size: 0.9rem;
+      margin: 0 auto;
     }
 
     .rdp-month {
diff --git a/src/components/UsageCalendar.tsx b/src/components/UsageCalendar.tsx
index 4652195..d3433cf 100644
--- a/src/components/UsageCalendar.tsx
+++ b/src/components/UsageCalendar.tsx
@@ -221,12 +221,12 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
         <CardContent>
           <div className="flex flex-col lg:flex-row gap-4">
             {/* Calendar */}
-            <div className="shrink-0 overflow-x-auto">
+            <div className="w-full lg:w-auto overflow-x-auto flex justify-center lg:block">
               <DayPicker
                 mode="single"
                 selected={selectedDate}
                 onSelect={handleDateSelect}
-                className={`rounded-md border p-3 ${theme === 'light' ? 'text-white' : 'text-slate-900 bg-background/50'}`}
+                className={`rounded-md border p-0 sm:p-3 ${theme === 'light' ? 'text-white border-white/20' : 'text-slate-900 bg-background/50 border-slate-200/20'}`}
                 style={{ background: calendarBackground }}
                 showOutsideDays={false}
                 components={{