diff --git a/src/app/globals.css b/src/app/globals.css
index f076455..38c6120 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -224,7 +224,7 @@
   /* Make calendar fill available space on mobile */
   @media (max-width: 640px) {
     .rdp {
-      --rdp-cell-size: calc((100vw - 60px) / 7);
+      --rdp-cell-size: calc((100vw - 40px) / 7);
       font-size: 0.9rem;
       margin: 0 auto;
     }
diff --git a/src/components/UsageCalendar.tsx b/src/components/UsageCalendar.tsx
index d3433cf..b216f65 100644
--- a/src/components/UsageCalendar.tsx
+++ b/src/components/UsageCalendar.tsx
@@ -218,7 +218,7 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
         <CardHeader>
           <CardTitle>Usage Calendar</CardTitle>
         </CardHeader>
-        <CardContent>
+        <CardContent className="p-0.5 sm:p-6">
           <div className="flex flex-col lg:flex-row gap-4">
             {/* Calendar */}
             <div className="w-full lg:w-auto overflow-x-auto flex justify-center lg:block">
@@ -226,7 +226,7 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
                 mode="single"
                 selected={selectedDate}
                 onSelect={handleDateSelect}
-                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'}`}
+                className={`rounded-md sm: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={{