diff --git a/app/vision/page.tsx b/app/vision/page.tsx
index 5eed526..2ab3ac6 100644
--- a/app/vision/page.tsx
+++ b/app/vision/page.tsx
@@ -377,15 +377,19 @@ export default function VisionPage() {
                 </h2>
               </div>
               
-              <div className="flex flex-col lg:flex-row gap-6">
-                <div className="flex-1">
+              <div className="flex flex-col gap-6">
+                <div className="w-full max-w-md mx-auto">
                   <CalendarComponent
                     mode="single"
                     selected={selectedDate}
                     onSelect={setSelectedDate}
                     className="rounded-md border"
                     classNames={{
-                      day: "h-9 w-9 p-0 font-normal border border-gray-200 bg-white aria-selected:bg-blue-600 aria-selected:text-white",
+                      day: "h-9 w-9 p-0 font-normal border border-gray-200 bg-white text-gray-800 hover:bg-blue-50",
+                      day_selected: "bg-blue-600 text-white hover:bg-blue-700",
+                      day_today: "border-blue-500 text-blue-700",
+                      day_outside: "text-gray-400 bg-white",
+                      day_disabled: "text-gray-300 bg-white opacity-50",
                     }}
                     modifiers={{
                       hasMeeting: (date) => {