diff --git a/src/app/globals.css b/src/app/globals.css
index 1d017ea..b1c0044 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -220,6 +220,9 @@
   /* Calendar styling - optimize cell size */
   .rdp {
     --rdp-cell-size: 40px;
+    --rdp-accent-color: var(--primary);
+    --rdp-background-color: var(--primary-foreground);
+    margin: 0;
   }
 
   /* Make calendar fill available space on mobile */
@@ -230,15 +233,21 @@
       margin: 0;
     }
 
+    .rdp-months {
+      width: 100%;
+    }
+
     .rdp-month {
       width: 100%;
     }
 
-    .rdp-table {
-      width: 100%;
-      max-width: 100%;
-      display: table;
-      table-layout: fixed;
+    /* V9 grid class */
+    .rdp-month_grid {
+      width: 100% !important;
+      max-width: 100% !important;
+      display: table !important;
+      table-layout: fixed !important;
+      border-collapse: collapse;
     }
 
     .rdp-day {
@@ -246,10 +255,24 @@
       max-width: none;
       height: auto;
       aspect-ratio: 1;
+      padding: 2px !important;
     }
 
-    .rdp-head_cell {
+    .rdp-weekday {
       width: 100%;
+      padding: 8px 0 !important;
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      font-weight: 700;
+      opacity: 0.6;
+    }
+
+    /* Ensure Sunday (first column) doesn't stretch */
+    .rdp-month_grid th,
+    .rdp-month_grid td {
+      width: 14.28% !important;
+      max-width: 14.28% !important;
+      overflow: hidden;
     }
   }
 
diff --git a/src/components/DailyInspirationCard.tsx b/src/components/DailyInspirationCard.tsx
index 3d0f277..1273781 100644
--- a/src/components/DailyInspirationCard.tsx
+++ b/src/components/DailyInspirationCard.tsx
@@ -132,16 +132,16 @@ export function DailyInspirationCard({ initialReligion, onReligionChange }: Dail
 
     return (
         <div
-            className="flex-1 flex flex-col justify-center p-5 rounded-xl border border-white/10 min-h-[120px] relative overflow-hidden group"
+            className="flex-1 flex flex-col justify-center p-3 sm:p-5 rounded-xl border border-white/10 min-h-[100px] sm:min-h-[120px] relative overflow-hidden group"
             style={{
                 background: getBackground(),
                 boxShadow: `inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 20px ${getShadowColor()}`
             }}
         >
-            <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-white/10 to-transparent rounded-full -translate-y-1/2 translate-x-1/2" />
+            <div className="absolute top-0 right-0 w-24 h-24 sm:w-32 sm:h-32 bg-gradient-to-br from-white/10 to-transparent rounded-full -translate-y-1/2 translate-x-1/2" />
 
             <div className="relative z-10">
-                <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center justify-between mb-2 sm:mb-3">
                     <div className="flex items-center gap-2">
                         {getIcon()}
                         <span className="text-xs font-semibold text-white/80 uppercase tracking-wider">
@@ -174,13 +174,13 @@ export function DailyInspirationCard({ initialReligion, onReligionChange }: Dail
                     </DropdownMenu>
                 </div>
 
-                <p className="text-sm font-medium text-white leading-relaxed mb-3 text-shadow-sm italic">
+                <p className="text-xs sm:text-sm font-medium text-white leading-relaxed mb-2 sm:mb-3 text-shadow-sm italic">
                     &ldquo;{dailyVerse.text}&rdquo;
                 </p>
-                <p className="text-xs text-white/70 font-medium">
+                <p className="text-[10px] sm:text-xs text-white/70 font-medium">
                     — {dailyVerse.source}
                 </p>
             </div>
-        </div>
+        </div >
     );
 }
diff --git a/src/components/UsageCalendar.tsx b/src/components/UsageCalendar.tsx
index db17c04..1e84d8d 100644
--- a/src/components/UsageCalendar.tsx
+++ b/src/components/UsageCalendar.tsx
@@ -17,6 +17,7 @@ import { ChevronLeftIcon, ChevronRightIcon, Cigarette, Leaf, Sparkles } from 'lu
 import { useTheme } from '@/lib/theme-context';
 import { getLocalDateString, getTodayString } from '@/lib/date-utils';
 import { DailyInspirationCard } from './DailyInspirationCard';
+import { cn } from '@/lib/utils';
 
 
 
@@ -184,22 +185,26 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
       <button
         {...props}
         style={!isFuture ? colorStyle : undefined}
-        className={`relative w-full h-full p-2 text-sm rounded-md transition-all hover:opacity-80 ${isFuture ? 'text-muted-foreground opacity-30 cursor-not-allowed' : 'cursor-pointer shadow-sm'
-          } ${isToday ? 'ring-2 ring-amber-400 ring-offset-2 ring-offset-background' : ''}`}
+        className={cn(
+          "relative w-full h-full text-xs sm:text-sm transition-all hover:opacity-80",
+          isFuture ? "text-muted-foreground opacity-30 cursor-not-allowed" : "cursor-pointer shadow-sm",
+          isToday && "ring-2 ring-amber-400 ring-offset-2 ring-offset-background",
+          props.className
+        )}
         onClick={() => !isFuture && handleDateSelect(date)}
         disabled={isFuture}
       >
-        <span className="font-medium">{date.getDate()}</span>
+        <span className="font-semibold">{date.getDate()}</span>
         {(nicotineCount > 0 || weedCount > 0) && (
-          <div className="absolute bottom-0.5 right-1 flex gap-0.5">
+          <div className="absolute bottom-0.5 inset-x-0 flex justify-center gap-0.5">
             {nicotineCount > 0 && (
-              <span className="text-[9px] font-bold bg-red-900/50 px-1 rounded">
-                {nicotineCount}
+              <span className="text-[7px] leading-tight font-black bg-red-900/40 px-0.5 rounded-sm">
+                •
               </span>
             )}
             {weedCount > 0 && (
-              <span className="text-[9px] font-bold bg-green-900/50 px-1 rounded">
-                {weedCount}
+              <span className="text-[7px] leading-tight font-black bg-green-900/40 px-0.5 rounded-sm">
+                •
               </span>
             )}
           </div>
@@ -212,25 +217,38 @@ 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">
-        <CardContent className="p-3 sm:p-6">
+      <Card className="bg-card/80 backdrop-blur-xl shadow-xl drop-shadow-lg transition-all duration-300 border-white/10 overflow-hidden">
+        <CardContent className="p-2 sm:p-6">
           <div className="flex flex-col lg:flex-row gap-4">
             {/* Calendar */}
-            <div className="w-full lg:w-auto overflow-x-auto block">
+            <div className="w-full lg:w-auto block">
               <DayPicker
                 mode="single"
                 selected={selectedDate}
                 onSelect={handleDateSelect}
-                className={`rounded-md sm:border p-0 sm:p-3 w-full ${theme === 'light' ? 'text-slate-900 border-slate-200/20' : 'text-white border-white/20'}`}
+                className={`rounded-xl p-0 sm:p-3 w-full ${theme === 'light' ? 'text-slate-900' : 'text-white'}`}
                 showOutsideDays={false}
                 components={{
-                  DayButton: CustomDayButton,
+                  DayButton: (props) => (
+                    <CustomDayButton
+                      {...props}
+                      className={cn(
+                        props.className,
+                        "aspect-square rounded-full flex items-center justify-center p-0"
+                      )}
+                    />
+                  ),
                   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'}`}>
+                    <div className={cn(
+                      "p-1 rounded-full border transition-colors",
+                      theme === 'light'
+                        ? "bg-slate-100/50 border-slate-200 text-slate-600 hover:bg-slate-200"
+                        : "bg-white/5 border-white/10 text-white/70 hover:bg-white/10"
+                    )}>
                       {orientation === 'left' ? (
-                        <ChevronLeftIcon className="h-4 w-4" />
+                        <ChevronLeftIcon className="h-3.5 w-3.5" />
                       ) : (
-                        <ChevronRightIcon className="h-4 w-4" />
+                        <ChevronRightIcon className="h-3.5 w-3.5" />
                       )}
                     </div>
                   ),