diff --git a/src/components/SideBySideView/SideBySideView.tsx b/src/components/SideBySideView/SideBySideView.tsx
index d1dc9e7..e2c27a1 100644
--- a/src/components/SideBySideView/SideBySideView.tsx
+++ b/src/components/SideBySideView/SideBySideView.tsx
@@ -2,6 +2,7 @@ import {
   useState,
   useMemo,
   useEffect,
+  useRef,
   Dispatch,
   SetStateAction,
   useCallback,
@@ -384,6 +385,39 @@ export default function SideBySideView({
     lastPosition: null,
   });
 
+  // Shared pagination and scroll sync
+  const [sharedPage, setSharedPage] = useState(0);
+  const leftScrollRef = useRef<HTMLDivElement>(null);
+  const rightScrollRef = useRef<HTMLDivElement>(null);
+  /** Prevents ping-pong when programmatic scrollTop fires a scroll event on the peer after the sync tick. */
+  const scrollSyncSource = useRef<'left' | 'right' | null>(null);
+
+  const handleLeftScroll = useCallback((scrollTop: number) => {
+    if (scrollSyncSource.current === 'right') return;
+    const peer = rightScrollRef.current;
+    if (!peer || Math.abs(peer.scrollTop - scrollTop) < 1) return;
+    scrollSyncSource.current = 'left';
+    peer.scrollTop = scrollTop;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (scrollSyncSource.current === 'left') scrollSyncSource.current = null;
+      });
+    });
+  }, []);
+
+  const handleRightScroll = useCallback((scrollTop: number) => {
+    if (scrollSyncSource.current === 'left') return;
+    const peer = leftScrollRef.current;
+    if (!peer || Math.abs(peer.scrollTop - scrollTop) < 1) return;
+    scrollSyncSource.current = 'right';
+    peer.scrollTop = scrollTop;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (scrollSyncSource.current === 'right') scrollSyncSource.current = null;
+      });
+    });
+  }, []);
+
   // Filter charted users based on people status
   const filteredChartedUsers = useMemo(
     () => ({
@@ -540,6 +574,10 @@ export default function SideBySideView({
                         isGeneralDays={isGeneralDays}
                         setCalendarHeight={setCalendarHeight}
                         calendarLabel="Your Availability"
+                        currentStartPage={sharedPage}
+                        onPageChange={setSharedPage}
+                        scrollRef={leftScrollRef}
+                        onScroll={handleLeftScroll}
                       />
                     </div>
                   </div>
@@ -603,6 +641,10 @@ export default function SideBySideView({
                         setChartedUsers={setChartedUsers}
                         chartedUsers={chartedUsers}
                         calendarLabel="Group Availability"
+                        currentStartPage={sharedPage}
+                        onPageChange={setSharedPage}
+                        scrollRef={rightScrollRef}
+                        onScroll={handleRightScroll}
                       />
                     </div>
                   </div>
diff --git a/src/components/selectCalendarComponents/CalendarApp.tsx b/src/components/selectCalendarComponents/CalendarApp.tsx
index 78e2148..1766b41 100644
--- a/src/components/selectCalendarComponents/CalendarApp.tsx
+++ b/src/components/selectCalendarComponents/CalendarApp.tsx
@@ -45,6 +45,10 @@ interface CalendarProps {
   setCalendarHeight?: Dispatch<SetStateAction<number | null>>;
   compactMode?: boolean;
   calendarLabel?: string;
+  currentStartPage?: number;
+  onPageChange?: (page: number) => void;
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  onScroll?: (scrollTop: number) => void;
 }
 
 export default function Calendar({
@@ -64,6 +68,10 @@ export default function Calendar({
   setCalendarHeight,
   compactMode = false,
   calendarLabel,
+  currentStartPage: controlledPage,
+  onPageChange,
+  scrollRef,
+  onScroll,
 }: CalendarProps) {
   const [calendarFramework, setCalendarFramework] = theCalendarFramework;
   const [calendarState, setCalendarState] = theCalendarState;
@@ -133,18 +141,21 @@ export default function Calendar({
     };
   }, [compactMode]);
 
-  const [currentStartPage, setCurrentStartPage] = React.useState(0);
+  const [internalStartPage, setInternalStartPage] = React.useState(0);
+  const currentStartPage = controlledPage ?? internalStartPage;
 
   const handlePrev = () => {
-    setCurrentStartPage(Math.max(currentStartPage - 1, 0));
+    const next = Math.max(currentStartPage - numberOfColumnsPerPage, 0);
+    onPageChange ? onPageChange(next) : setInternalStartPage(next);
   };
 
   const handleNext = () => {
-    if (
-      currentStartPage + numberOfColumnsPerPage <
-      calendarFramework.dates.flat().length
-    ) {
-      setCurrentStartPage(currentStartPage + 1);
+    if (currentStartPage + numberOfColumnsPerPage < calendarFramework.dates.flat().length) {
+      const next = Math.min(
+        currentStartPage + numberOfColumnsPerPage,
+        calendarFramework.dates.flat().length - numberOfColumnsPerPage
+      );
+      onPageChange ? onPageChange(next) : setInternalStartPage(next);
     }
   };
 
@@ -194,7 +205,7 @@ export default function Calendar({
       </div>
       <div
         id="cal"
-        className="flex justify-center mb-4 md:m-5 ml-0 md:justify-start relative "
+        className="flex justify-center mb-4 md:m-5 ml-0 md:justify-start relative"
       >
         <div
           style={{ width: '3.00rem', height: '2.50rem' }}
@@ -202,8 +213,11 @@ export default function Calendar({
         ></div>
 
         <div
+          ref={scrollRef}
           data-calendar-scroll-container="true"
-          className="bg-white dark:bg-secondary_background-dark flex flex-row w-full max-w-full h-full lg:overflow-auto sm:pb-4 md:bg-white rounded-lg rounded-tr-none lg:max-h-140 pr-9 pl-7 lg:p-0 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent dark:scrollbar-thumb-gray-600"
+          className="bg-white dark:bg-secondary_background-dark flex flex-row w-full max-w-full min-h-0 h-full max-h-none lg:max-h-140 overflow-y-auto overscroll-none touch-pan-y sm:pb-4 md:bg-white rounded-lg rounded-tr-none pr-9 pl-7 lg:p-0 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent dark:scrollbar-thumb-gray-600"
+          style={{ overscrollBehavior: 'none' }}
+          onScroll={onScroll ? (e) => onScroll((e.target as HTMLDivElement).scrollTop) : undefined}
         >
           <div className="sticky left-0 z-20 bg-white dark:bg-secondary_background-dark"></div>
           <div className="sticky left-0 z-20 bg-white dark:bg-secondary_background-dark">
diff --git a/src/components/selectCalendarComponents/SelectCalendar.tsx b/src/components/selectCalendarComponents/SelectCalendar.tsx
index 6888506..00ed840 100644
--- a/src/components/selectCalendarComponents/SelectCalendar.tsx
+++ b/src/components/selectCalendarComponents/SelectCalendar.tsx
@@ -128,14 +128,10 @@ const handleDisappear = useCallback(() => {
   }, [handleMouseLeave]);
 
   return (
-    <div
-      className=" max-h-140"
-      ref={calendarRef}
-      style={{ touchAction: 'none' }}
-    >
+    <div className="min-h-0 max-h-none" ref={calendarRef}>
       <div className="flex flex-col">
-        <div className="sticky h-full mb-2 flex flex-row z-30 lg:top-[0px] top-[44px]">
-          <div className="bg-white dark:bg-secondary_background-dark w-full flex ">
+        <div className="sticky h-full mb-2 flex flex-row z-30 lg:top-[0px] top-[44px] -ml-12">
+          <div className="bg-white dark:bg-secondary_background-dark w-full flex pl-12">
             <div className="bg-white dark:bg-secondary_background-dark z-50 h-6"></div>
             <DateBar dates={bucket} isGeneralDays={isGeneralDays} />
           </div>