diff --git a/src/app/globals.css b/src/app/globals.css
index 38c6120..dc3374f 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 - 40px) / 7);
+      --rdp-cell-size: calc((100vw - 50px) / 7);
       font-size: 0.9rem;
       margin: 0 auto;
     }
diff --git a/src/components/UsageCalendar.tsx b/src/components/UsageCalendar.tsx
index b216f65..180851f 100644
--- a/src/components/UsageCalendar.tsx
+++ b/src/components/UsageCalendar.tsx
@@ -214,11 +214,11 @@ 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">
+      <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-0.5 sm:p-6">
+        <CardContent className="p-1 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">