diff --git a/frontend/src/pages/CalendarPage.jsx b/frontend/src/pages/CalendarPage.jsx
index 3ba94e6..764a9ff 100644
--- a/frontend/src/pages/CalendarPage.jsx
+++ b/frontend/src/pages/CalendarPage.jsx
@@ -85,13 +85,13 @@ const DAYS_IN_MONTH = [
 
 ];
 
-const HEADER_HEIGHT = 52;
+const HEADER_HEIGHT = 35;
 
-const DAY_COLUMN_WIDTH = 52;
+const DAY_COLUMN_WIDTH = 45;
 
 const MIN_MONTH_WIDTH = 90;
 
-const MIN_ROW_HEIGHT = 28;
+const MIN_ROW_HEIGHT = 17.5;
 
 const DEFAULT_EVENT_COLOR = '#2563eb';
 
@@ -99,7 +99,7 @@ const EVENT_BAR_WIDTH = 8;
 
 const EVENT_LANE_GAP = 11;
 
-const EVENT_LEFT_PADDING = 5;
+const EVENT_LEFT_PADDING = 3;
 
 const CalendarPage = () => {
   const [requestError, setRequestError] = useState('');
@@ -1452,7 +1452,7 @@ const CalendarPage = () => {
           </>
         }
       >
-        <CardContent className="flex min-h-0 flex-1 flex-col overflow-hidden p-4">
+        <CardContent className="flex min-h-0 flex-1 flex-col overflow-hidden">
             {requestError && (
               <Alert variant="destructive" className="mb-3">
                 <AlertDescription>{requestError}</AlertDescription>
@@ -1461,7 +1461,7 @@ const CalendarPage = () => {
             <Card className="flex min-h-0 flex-1 flex-col overflow-hidden p-0">
               <div
                 ref={calendarRef}
-                className="relative min-h-0 flex-1 overflow-auto p-0"
+                className="relative min-h-0 flex-1 overflow-auto md:overflow-hidden p-0"
                 style={{
                   WebkitOverflowScrolling:
                     'touch',
@@ -1679,8 +1679,8 @@ const CalendarPage = () => {
                                         left-1/2
                                         top-1/2
                                         flex
-                                        h-6
-                                        min-w-6
+                                        h-[min(14px,calc(100%))]
+                                        min-w-[min(14px,calc(100%))]
                                         -translate-x-1/2
                                         -translate-y-1/2
                                         items-center
@@ -1735,17 +1735,13 @@ const CalendarPage = () => {
                                             absolute
                                             z-20
                                             cursor-pointer
-                                            rounded-full
                                           "
                                           style={{
                                             left: `${EVENT_LEFT_PADDING + laneOffset}px`,
                                             width: `${EVENT_BAR_WIDTH}px`,
-                                            top: isStart
-                                              ? 'calc(50% - 3px)'
-                                              : '-3px',
-                                            bottom: isEnd
-                                              ? 'calc(50% - 3px)'
-                                              : '-3px',
+                                            top: isStart ? '2px' : '-1px',
+                                            bottom: isEnd ? '2px' : '-1px',
+                                            borderRadius: `${isStart ? '9999px' : '0'} ${isStart ? '9999px' : '0'} ${isEnd ? '9999px' : '0'} ${isEnd ? '9999px' : '0'}`,
                                             backgroundColor:
                                               eventColor,
                                           }}
@@ -1808,14 +1804,13 @@ const CalendarPage = () => {
                                               key={`single-${event.id}`}
                                               className="
                                                 pointer-events-auto
-                                                h-[18px]
-                                                w-[18px]
                                                 cursor-pointer
                                                 rounded-full
                                               "
                                               style={{
-                                                backgroundColor:
-                                                  eventColor,
+                                                width: `${Math.min(12, Math.max(6, rowHeight * 0.9))}px`,
+                                                height: `${Math.min(12, Math.max(6, rowHeight * 0.9))}px`,
+                                                backgroundColor: eventColor,
                                               }}
                                               onPointerDown={(pointerEvent) => {
                                             pointerEvent.stopPropagation();