diff --git a/frontend/src/app/(event)/[event-code]/page-client.tsx b/frontend/src/app/(event)/[event-code]/page-client.tsx
index a9bbf1362..ceea2b485 100644
--- a/frontend/src/app/(event)/[event-code]/page-client.tsx
+++ b/frontend/src/app/(event)/[event-code]/page-client.tsx
@@ -8,7 +8,9 @@ import KebabMenu from "@/components/kebab-menu";
 import { EventInformation } from "@/core/event/types";
 import EmptyButton from "@/features/button/components/empty";
 import LinkButton from "@/features/button/components/link";
+import GridPageDaysSelector from "@/features/event/components/selectors/grid-page-days";
 import ScheduleGrid from "@/features/event/grid/grid";
+import useGridPageDays from "@/features/event/grid/lib/use-page-days";
 import AttendeesPanel from "@/features/event/results/attendees/desktop-panel";
 import AttendeesDrawer from "@/features/event/results/attendees/mobile-drawer";
 import { getResultBanners } from "@/features/event/results/components/banners";
@@ -64,6 +66,14 @@ function EventResults({ eventData }: { eventData: EventInformation }) {
     setTimezone(newTZ.toString());
   };
 
+  /* GRID PAGE DAYS */
+  const {
+    gridPageDays,
+    gridPageDaysOptions,
+    usingMaxGridPageDays,
+    setGridPageDays,
+  } = useGridPageDays();
+
   /* MOBILE DRAWER SPACING */
   const [drawerSnap, setDrawerSnap] = useState<number | string | null>(0.22);
   const getSpacerHeight = () => {
@@ -119,6 +129,18 @@ function EventResults({ eventData }: { eventData: EventInformation }) {
     />
   );
 
+  const daysPerPageSelector = (
+    <div className="mb-2">
+      <p>Days per page</p>
+      <GridPageDaysSelector
+        id="grid-page-days-selector"
+        value={gridPageDays}
+        options={gridPageDaysOptions}
+        onChange={setGridPageDays}
+      />
+    </div>
+  );
+
   return (
     <div className="flex flex-col space-y-4 pl-6 pr-6 md:h-screen">
       <HeaderSpacer />
@@ -152,9 +174,12 @@ function EventResults({ eventData }: { eventData: EventInformation }) {
           availabilities={filteredAvailabilities}
           numParticipants={gridNumParticipants}
           timeslots={timeslots}
+          pageDays={gridPageDays}
+          useCompactHeader={usingMaxGridPageDays}
         />
 
         <div className="bg-panel shrink-0 rounded-3xl p-6 text-sm md:hidden">
+          {daysPerPageSelector}
           <DisplaySettings
             timezone={timezone}
             onTimezoneChange={handleTZChange}
@@ -186,6 +211,7 @@ function EventResults({ eventData }: { eventData: EventInformation }) {
           <div className="flex max-h-[calc(100vh-18rem)] flex-col gap-y-4">
             <AttendeesPanel />
             <div className="bg-panel shrink-0 rounded-3xl p-6 text-sm">
+              {daysPerPageSelector}
               <DisplaySettings
                 timezone={timezone}
                 onTimezoneChange={handleTZChange}
diff --git a/frontend/src/app/(event)/[event-code]/painting/page-client.tsx b/frontend/src/app/(event)/[event-code]/painting/page-client.tsx
index 8fb4afac0..3b07ce510 100644
--- a/frontend/src/app/(event)/[event-code]/painting/page-client.tsx
+++ b/frontend/src/app/(event)/[event-code]/painting/page-client.tsx
@@ -15,8 +15,10 @@ import ActionButton from "@/features/button/components/action";
 import LinkButton from "@/features/button/components/link";
 import { MAX_DISPLAY_NAME_LENGTH } from "@/features/event/availability/constants";
 import { validateAvailabilityData } from "@/features/event/availability/validate-data";
+import GridPageDaysSelector from "@/features/event/components/selectors/grid-page-days";
 import TimeZoneSelector from "@/features/event/components/selectors/timezone";
 import { ScheduleGrid } from "@/features/event/grid";
+import useGridPageDays from "@/features/event/grid/lib/use-page-days";
 import HeaderSpacer from "@/features/header/components/header-spacer";
 import {
   ConfirmationDialog,
@@ -55,14 +57,20 @@ export default function ClientPage({
   );
   const { displayName, timeZone, userAvailability } = state;
 
+  // GRID PAGE DAYS
+  const {
+    gridPageDays,
+    gridPageDaysOptions,
+    usingMaxGridPageDays,
+    setGridPageDays,
+  } = useGridPageDays();
+
   // TOASTS AND ERROR STATES
   const { addToast } = useToast();
   const [errors, setErrors] = useState<Record<string, string>>({});
 
   // VISITED LAST PAGE STATE
-  const [maxVisitedPage, setMaxVisitedPage] = useState(0);
-  const [numPages, setNumPages] = useState(1);
-  const visitedLastPage = maxVisitedPage >= numPages - 1;
+  const [visitedLastPage, setVisitedLastPage] = useState(false);
   const [confirmationOpen, setConfirmationOpen] = useState(false);
   const dialogResolver = useRef<((confirmed: boolean) => void) | null>(null);
 
@@ -249,6 +257,28 @@ export default function ClientPage({
     />
   );
 
+  const displaySettings = (
+    <div className="bg-panel flex flex-col gap-2 rounded-3xl p-6 text-sm">
+      <div>
+        <p>Days per page</p>
+        <GridPageDaysSelector
+          id="grid-page-days-selector"
+          value={gridPageDays}
+          options={gridPageDaysOptions}
+          onChange={setGridPageDays}
+        />
+      </div>
+      <div>
+        <p>Displaying event in</p>
+        <TimeZoneSelector
+          id="timezone-select"
+          value={timeZone}
+          onChange={setTimeZone}
+        />
+      </div>
+    </div>
+  );
+
   return (
     <div className="flex flex-col space-y-4 pl-6 pr-6 md:h-screen">
       <HeaderSpacer />
@@ -280,14 +310,7 @@ export default function ClientPage({
             setSaveDefaultName={setSaveDefaultName}
           />
 
-          <div className="bg-panel rounded-3xl p-6 text-sm">
-            Displaying event in
-            <TimeZoneSelector
-              id="timezone-select"
-              value={timeZone}
-              onChange={setTimeZone}
-            />
-          </div>
+          {displaySettings}
         </div>
 
         {/* Right Panel */}
@@ -299,21 +322,15 @@ export default function ClientPage({
           userAvailability={userAvailability}
           timeslots={timeslots}
           onPageUpdate={(index, pages) => {
-            setNumPages(pages);
-            if (index > maxVisitedPage) {
-              setMaxVisitedPage(index);
+            if (index >= pages - 1) {
+              setVisitedLastPage(true);
             }
           }}
+          pageDays={gridPageDays}
+          useCompactHeader={usingMaxGridPageDays}
         />
 
-        <div className="bg-panel rounded-3xl p-6 text-sm md:hidden">
-          Displaying event in
-          <TimeZoneSelector
-            id="timezone-select"
-            value={timeZone}
-            onChange={setTimeZone}
-          />
-        </div>
+        <div className="md:hidden">{displaySettings}</div>
       </div>
 
       {/* This z-index is necessary to avoid the time column overlapping */}
diff --git a/frontend/src/features/event/components/selectors/grid-page-days.tsx b/frontend/src/features/event/components/selectors/grid-page-days.tsx
new file mode 100644
index 000000000..1a2f71c66
--- /dev/null
+++ b/frontend/src/features/event/components/selectors/grid-page-days.tsx
@@ -0,0 +1,27 @@
+import Selector from "@/features/selector/components/selector";
+
+export default function GridPageDaysSelector({
+  id,
+  value,
+  options,
+  onChange,
+}: {
+  id: string;
+  value: number;
+  options: number[];
+  onChange: (value: number) => void;
+}) {
+  return (
+    <Selector
+      id={id}
+      value={value}
+      options={options.map((option) => ({
+        value: option,
+        label: `${option} days`,
+      }))}
+      onChange={onChange}
+      dialogTitle="Select Days per Page"
+      dialogDescription="Select the number of days to display per page"
+    />
+  );
+}
diff --git a/frontend/src/features/event/editor/editor.tsx b/frontend/src/features/event/editor/editor.tsx
index 69d8af854..26cf72571 100644
--- a/frontend/src/features/event/editor/editor.tsx
+++ b/frontend/src/features/event/editor/editor.tsx
@@ -13,6 +13,7 @@ import checkUnselectedRange from "@/core/event/lib/unselected-range";
 import { EventInformation } from "@/core/event/types";
 import ActionButton from "@/features/button/components/action";
 import LinkButton from "@/features/button/components/link";
+import GridPageDaysSelector from "@/features/event/components/selectors/grid-page-days";
 import TimeSelector from "@/features/event/components/selectors/time";
 import AdvancedOptions from "@/features/event/editor/advanced-options";
 import { MAX_TITLE_LENGTH } from "@/features/event/editor/constants";
@@ -20,6 +21,7 @@ import DateRangeSelection from "@/features/event/editor/date-range/selector";
 import { EventEditorType } from "@/features/event/editor/types";
 import { validateEventData } from "@/features/event/editor/validate-data";
 import { ScheduleGrid } from "@/features/event/grid";
+import useGridPageDays from "@/features/event/grid/lib/use-page-days";
 import HeaderSpacer from "@/features/header/components/header-spacer";
 import FormSelectorField from "@/features/selector/components/selector-field";
 import { RateLimitBanner } from "@/features/system-feedback";
@@ -57,6 +59,13 @@ function EventEditorContent({ type, initialData }: EventEditorProps) {
     setEndTime,
   } = useEventContext();
   const { title, customCode, eventRange, timeslots } = state;
+  const {
+    gridPageDays,
+    gridPageDaysOptions,
+    usingMaxGridPageDays,
+    setGridPageDays,
+  } = useGridPageDays();
+  const [gridDisplayed, setGridDisplayed] = useState(false);
   const router = useRouter();
 
   const [mobileTab, setMobileTab] = useState<SegmentedControlOption>("details");
@@ -111,9 +120,21 @@ function EventEditorContent({ type, initialData }: EventEditorProps) {
       unselectedRange={checkUnselectedRange(eventRange)}
       timezone={eventRange.timezone}
       timeslots={timeslots}
+      pageDays={gridPageDays}
+      useCompactHeader={usingMaxGridPageDays}
+      setGridDisplayed={setGridDisplayed}
     />
   );
 
+  const previewText = (
+    <p className="opacity-75">
+      This is a preview!{" "}
+      {type === "edit"
+        ? "Manage availability from the results page."
+        : "You'll add your availability later."}
+    </p>
+  );
+
   return (
     <div className="flex min-h-dvh flex-col space-y-4 pl-6 pr-6">
       <HeaderSpacer />
@@ -190,8 +211,22 @@ function EventEditorContent({ type, initialData }: EventEditorProps) {
         <div className="h-16 md:hidden" />
         <div className="hidden flex-1 md:col-start-2 md:row-span-9 md:row-start-2 md:block">
           <div className="relative h-full w-full grow">
-            <div className="bg-panel absolute inset-0 flex rounded-3xl pb-4 pl-2 pr-4 pt-4">
-              <div className="flex1 min-h-0 grow space-y-4">{grid}</div>
+            <div className="bg-panel absolute inset-0 flex flex-col justify-between gap-2 rounded-3xl px-2 py-4">
+              <div className="min-h-0 flex-1 pr-2">{grid}</div>
+              {gridDisplayed && (
+                <div className="flex items-center justify-between pl-4 pr-2 text-sm">
+                  {previewText}
+                  <div className="flex flex-none items-center gap-2">
+                    <p className="opacity-75">Days per page:</p>
+                    <GridPageDaysSelector
+                      id="grid-page-days-selector-desktop"
+                      value={gridPageDays}
+                      options={gridPageDaysOptions}
+                      onChange={setGridPageDays}
+                    />
+                  </div>
+                </div>
+              )}
             </div>
           </div>
         </div>
@@ -199,11 +234,25 @@ function EventEditorContent({ type, initialData }: EventEditorProps) {
 
       <div
         className={cn(
-          "md:hidden",
-          mobileTab === "details" ? "hidden" : "block",
+          "flex-col gap-4 md:hidden",
+          mobileTab === "details" ? "hidden" : "flex",
         )}
       >
         {grid}
+        {gridDisplayed && (
+          <div className="bg-panel flex flex-col gap-2 rounded-3xl p-6 text-sm">
+            {previewText}
+            <div>
+              <p>Days per page</p>
+              <GridPageDaysSelector
+                id="grid-page-days-selector-mobile"
+                value={gridPageDays}
+                options={gridPageDaysOptions}
+                onChange={setGridPageDays}
+              />
+            </div>
+          </div>
+        )}
       </div>
 
       {/* This z-index is necessary to avoid the time column overlapping */}
diff --git a/frontend/src/features/event/grid/grid.tsx b/frontend/src/features/event/grid/grid.tsx
index 207dd9f02..73246c3b2 100644
--- a/frontend/src/features/event/grid/grid.tsx
+++ b/frontend/src/features/event/grid/grid.tsx
@@ -23,9 +23,13 @@ interface ScheduleGridProps {
   mode: "paint" | "view" | "preview";
   timeslots: Date[];
   timezone: string;
+  pageDays: number;
+  useCompactHeader: boolean;
   isWeekdayEvent?: boolean;
 
+  // for "preview" mode
   unselectedRange?: boolean;
+  setGridDisplayed?: (displayed: boolean) => void;
 
   // for "view" mode
   availabilities?: ResultsAvailabilityMap;
@@ -61,9 +65,12 @@ const variants = {
 export default function ScheduleGrid({
   timeslots,
   timezone,
+  pageDays,
+  useCompactHeader,
   mode = "preview",
   isWeekdayEvent = false,
   unselectedRange = false,
+  setGridDisplayed = () => {},
   availabilities = {},
   numParticipants = 0,
   hoveredSlot,
@@ -82,17 +89,23 @@ export default function ScheduleGrid({
     direction,
     paginate,
     error,
-  } = useGridinfo(timeslots, timezone, isMobile ? 4 : 7, onPageUpdate);
+  } = useGridinfo(timeslots, timezone, pageDays, onPageUpdate);
 
   // Initial onPageUpdate callback to report pagination info to parent
   // Also triggers if the user changes between mobile and desktop layouts
   const reportedTotalPages = useRef<number | null>(null);
   useEffect(() => {
+    let effectiveCurrentPage = currentPage;
+    if (currentPage >= totalPages) {
+      // If out of bounds, go to the last page
+      effectiveCurrentPage = totalPages - 1;
+      paginate(totalPages - 1 - currentPage);
+    }
     if (reportedTotalPages.current !== totalPages) {
-      onPageUpdate(currentPage, totalPages);
+      onPageUpdate(effectiveCurrentPage, totalPages);
       reportedTotalPages.current = totalPages;
     }
-  }, [onPageUpdate, currentPage, totalPages]);
+  }, [onPageUpdate, currentPage, totalPages, paginate]);
 
   const hasPrevPage = currentPage > 0;
   const hasNextPage = currentPage < totalPages - 1;
@@ -114,6 +127,11 @@ export default function ScheduleGrid({
     return () => resizeObserver.disconnect();
   });
 
+  const isGridDisplayed = !unselectedRange && !error;
+  useEffect(() => {
+    setGridDisplayed(isGridDisplayed);
+  }, [isGridDisplayed, setGridDisplayed]);
+
   if (unselectedRange)
     return (
       <GridMessage
@@ -133,6 +151,7 @@ export default function ScheduleGrid({
       <ScheduleHeader
         preview={mode === "preview"}
         visibleDays={visibleDays}
+        compact={useCompactHeader}
         currentPage={currentPage}
         totalPages={totalPages}
         scrollbarPresent={scrollbarPresent}
diff --git a/frontend/src/features/event/grid/lib/constants.ts b/frontend/src/features/event/grid/lib/constants.ts
index b2077f135..d29ea3399 100644
--- a/frontend/src/features/event/grid/lib/constants.ts
+++ b/frontend/src/features/event/grid/lib/constants.ts
@@ -1,2 +1,7 @@
 export const SIDE_WIDTH = 30;
 export const TIME_LABEL_WIDTH = 50;
+
+export const GRID_PAGE_DAYS_MOBILE_OPTIONS = [4, 7];
+export const GRID_PAGE_DAYS_DESKTOP_OPTIONS = [7, 14];
+export const GRID_PAGE_DAYS_MOBILE_KEY = "grid-page-days-mobile";
+export const GRID_PAGE_DAYS_DESKTOP_KEY = "grid-page-days-desktop";
diff --git a/frontend/src/features/event/grid/lib/use-grid.ts b/frontend/src/features/event/grid/lib/use-grid.ts
index 132a33a71..7297584ae 100644
--- a/frontend/src/features/event/grid/lib/use-grid.ts
+++ b/frontend/src/features/event/grid/lib/use-grid.ts
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import { formatInTimeZone, toZonedTime } from "date-fns-tz";
 
@@ -44,15 +44,18 @@ export default function useGridInfo(
     [data, currentPage, daysPerPage],
   );
 
-  const paginate = (newDirection: number) => {
-    if (
-      (newDirection === -1 && currentPage > 0) ||
-      (newDirection === 1 && currentPage < view.totalPages - 1)
-    ) {
-      setCurrentPage([currentPage + newDirection, newDirection]);
-      onPaginate(currentPage + newDirection, view.totalPages);
-    }
-  };
+  const paginate = useCallback(
+    (newDirection: number) => {
+      if (
+        (newDirection < 0 && currentPage > 0) ||
+        (newDirection > 0 && currentPage < view.totalPages - 1)
+      ) {
+        setCurrentPage([currentPage + newDirection, newDirection]);
+        onPaginate(currentPage + newDirection, view.totalPages);
+      }
+    },
+    [currentPage, view.totalPages, onPaginate],
+  );
 
   return { ...view, currentPage, direction, paginate };
 }
diff --git a/frontend/src/features/event/grid/lib/use-page-days.ts b/frontend/src/features/event/grid/lib/use-page-days.ts
new file mode 100644
index 000000000..f1926250a
--- /dev/null
+++ b/frontend/src/features/event/grid/lib/use-page-days.ts
@@ -0,0 +1,66 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import {
+  GRID_PAGE_DAYS_DESKTOP_KEY,
+  GRID_PAGE_DAYS_DESKTOP_OPTIONS,
+  GRID_PAGE_DAYS_MOBILE_KEY,
+  GRID_PAGE_DAYS_MOBILE_OPTIONS,
+} from "@/features/event/grid/lib/constants";
+import useCheckMobile from "@/lib/hooks/use-check-mobile";
+
+export default function useGridPageDays() {
+  const isMobile = useCheckMobile();
+
+  const gridPageDaysOptions: number[] = isMobile
+    ? GRID_PAGE_DAYS_MOBILE_OPTIONS
+    : GRID_PAGE_DAYS_DESKTOP_OPTIONS;
+
+  const localStorageKey = isMobile
+    ? GRID_PAGE_DAYS_MOBILE_KEY
+    : GRID_PAGE_DAYS_DESKTOP_KEY;
+
+  const validateValue = useCallback(
+    (value: string | null) => {
+      if (!value) return gridPageDaysOptions[0];
+      const parsedValue = parseInt(value);
+      return gridPageDaysOptions.includes(parsedValue)
+        ? parsedValue
+        : gridPageDaysOptions[0];
+    },
+    [gridPageDaysOptions],
+  );
+
+  const [gridPageDays, setGridPageDaysState] = useState<number>(
+    gridPageDaysOptions[0],
+  );
+
+  useEffect(() => {
+    try {
+      const storedValue = localStorage.getItem(localStorageKey);
+      setGridPageDaysState(validateValue(storedValue));
+    } catch {
+      setGridPageDaysState(gridPageDaysOptions[0]);
+    }
+  }, [localStorageKey, isMobile, gridPageDaysOptions, validateValue]);
+
+  const setGridPageDays = (value: number) => {
+    try {
+      localStorage.setItem(localStorageKey, value.toString());
+    } catch {
+      // Ignore error
+    }
+    setGridPageDaysState(value);
+  };
+
+  const usingMaxGridPageDays =
+    gridPageDays === Math.max(...gridPageDaysOptions);
+
+  return {
+    gridPageDays,
+    gridPageDaysOptions,
+    usingMaxGridPageDays,
+    setGridPageDays,
+  };
+}
diff --git a/frontend/src/features/event/grid/schedule-header.tsx b/frontend/src/features/event/grid/schedule-header.tsx
index 7dc16c865..3f699b95f 100644
--- a/frontend/src/features/event/grid/schedule-header.tsx
+++ b/frontend/src/features/event/grid/schedule-header.tsx
@@ -14,6 +14,7 @@ import { cn } from "@/lib/utils/classname";
 interface ScheduleHeaderProps {
   preview?: boolean;
   visibleDays: { dayKey: string; dayDisplay: string }[];
+  compact: boolean;
   currentPage: number;
   totalPages: number;
   scrollbarPresent?: boolean;
@@ -38,9 +39,31 @@ const variants = {
   }),
 };
 
+const MONTH_TO_NUM: Record<string, number> = {
+  Jan: 1,
+  Feb: 2,
+  Mar: 3,
+  Apr: 4,
+  May: 5,
+  Jun: 6,
+  Jul: 7,
+  Aug: 8,
+  Sep: 9,
+  Oct: 10,
+  Nov: 11,
+  Dec: 12,
+} as const;
+const condenseMonth = (month: string) => {
+  return MONTH_TO_NUM[month] ?? month;
+};
+const condenseWeekday = (weekday: string) => {
+  return weekday === "Thu" ? "R" : weekday === "Sun" ? "U" : weekday[0];
+};
+
 export default function ScheduleHeader({
   preview = false,
   visibleDays,
+  compact,
   currentPage,
   totalPages,
   scrollbarPresent = false,
@@ -54,7 +77,8 @@ export default function ScheduleHeader({
   return (
     <div
       className={cn(
-        preview ? "md:bg-panel top-0" : cn(topMarginClass, "bg-background"),
+        preview ? "bg-background md:bg-panel" : "bg-background",
+        topMarginClass,
         scrollbarPresent && "pr-4",
         "sticky z-10 col-span-2 grid h-[50px] w-full items-center justify-center",
       )}
@@ -98,12 +122,31 @@ export default function ScheduleHeader({
               return (
                 <div
                   key={i}
-                  className="flex flex-col items-center justify-center text-sm font-medium leading-tight"
+                  className={cn(
+                    "flex flex-col items-center justify-center text-sm leading-tight",
+                    ["Sat", "Sun"].includes(weekday) && "opacity-60",
+                    compact && "tracking-tighter lg:tracking-normal",
+                  )}
                 >
-                  <div>{isWeekdayEvent ? weekday.toUpperCase() : weekday}</div>
+                  <div>
+                    <span className={compact ? "lg:hidden" : "hidden"}>
+                      {condenseWeekday(weekday)}
+                    </span>
+                    <span className={compact ? "hidden lg:block" : ""}>
+                      {isWeekdayEvent ? weekday.toUpperCase() : weekday}
+                    </span>
+                  </div>
                   {!isWeekdayEvent && (
-                    <div>
-                      {month} {day.replace(/^0+/, "")}
+                    <div className="flex">
+                      <span className={compact ? "xl:hidden" : "hidden"}>
+                        {condenseMonth(month)}/
+                      </span>
+                      <span
+                        className={compact ? "hidden xl:mr-1 xl:block" : "mr-1"}
+                      >
+                        {month}
+                      </span>
+                      <span>{day.replace(/^0+/, "")}</span>
                     </div>
                   )}
                 </div>