diff --git a/apps/Backend/src/routes/appointments.ts b/apps/Backend/src/routes/appointments.ts
index f910f44..72e34c4 100644
--- a/apps/Backend/src/routes/appointments.ts
+++ b/apps/Backend/src/routes/appointments.ts
@@ -20,6 +20,62 @@ router.get("/all", async (req: Request, res: Response): Promise<any> => {
   }
 });
 
+/**
+ * GET /api/appointments/day?date=YYYY-MM-DD
+ * Response: { appointments: Appointment[], patients: Patient[] }
+ */
+router.get("/day", async (req: Request, res: Response): Promise<any> => {
+  function isValidYMD(s: string) {
+    return /^\d{4}-\d{2}-\d{2}$/.test(s);
+  }
+
+  try {
+    const rawDate = req.query.date as string | undefined;
+    if (!rawDate || !isValidYMD(rawDate)) {
+      return res.status(400).json({ message: "Date query param is required." });
+    }
+    if (!req.user) return res.status(401).json({ message: "Unauthorized" });
+
+    // Build literal UTC day bounds from the YYYY-MM-DD query string
+    const start = new Date(`${rawDate}T00:00:00.000Z`);
+    const end = new Date(`${rawDate}T23:59:59.999Z`);
+
+    if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+      return res.status(400).json({ message: "Invalid date format" });
+    }
+
+    // Call the storage method that takes a start/end range (no change to storage needed)
+    const appointments = await storage.getAppointmentsOnRange(start, end);
+
+    // dedupe patient ids referenced by those appointments
+    const patientIds = Array.from(
+      new Set(appointments.map((a) => a.patientId).filter(Boolean))
+    );
+
+    const patients = patientIds.length
+      ? await storage.getPatientsByIds(patientIds)
+      : [];
+
+    return res.json({ appointments, patients });
+  } catch (err) {
+    console.error("Error in /api/appointments/day:", err);
+    res.status(500).json({ message: "Failed to load appointments for date" });
+  }
+});
+
+// Get recent appointments (paginated)
+router.get("/recent", async (req: Request, res: Response) => {
+  try {
+    const limit = Math.max(1, parseInt(req.query.limit as string) || 10);
+    const offset = Math.max(0, parseInt(req.query.offset as string) || 0);
+
+    const all = await storage.getRecentAppointments(limit, offset);
+    res.json({ data: all, limit, offset });
+  } catch (err) {
+    res.status(500).json({ message: "Failed to get recent appointments" });
+  }
+});
+
 // Get a single appointment by ID
 router.get(
   "/:id",
@@ -75,44 +131,6 @@ router.get(
   }
 );
 
-// Get appointments on a specific date
-router.get(
-  "/appointments/on/:date",
-  async (req: Request, res: Response): Promise<any> => {
-    try {
-      const rawDate = req.params.date;
-      if (!rawDate) {
-        return res.status(400).json({ message: "Date parameter is required" });
-      }
-
-      const date = new Date(rawDate);
-      if (isNaN(date.getTime())) {
-        return res.status(400).json({ message: "Invalid date format" });
-      }
-
-      const all = await storage.getAppointmentsOn(date);
-      const appointments = all.filter((a) => a.userId === req.user!.id);
-
-      res.json(appointments);
-    } catch (err) {
-      res.status(500).json({ message: "Failed to get appointments on date" });
-    }
-  }
-);
-
-// Get recent appointments (paginated)
-router.get("/appointments/recent", async (req: Request, res: Response) => {
-  try {
-    const limit = Math.max(1, parseInt(req.query.limit as string) || 10);
-    const offset = Math.max(0, parseInt(req.query.offset as string) || 0);
-
-    const all = await storage.getRecentAppointments(limit, offset);
-    res.json({ data: all, limit, offset });
-  } catch (err) {
-    res.status(500).json({ message: "Failed to get recent appointments" });
-  }
-});
-
 // Create a new appointment
 router.post(
   "/upsert",
diff --git a/apps/Backend/src/storage/index.ts b/apps/Backend/src/storage/index.ts
index d5c8670..d806ae4 100644
--- a/apps/Backend/src/storage/index.ts
+++ b/apps/Backend/src/storage/index.ts
@@ -41,7 +41,7 @@ export interface IStorage {
   getPatientByInsuranceId(insuranceId: string): Promise<Patient | null>;
   getPatientsByUserId(userId: number): Promise<Patient[]>;
   getRecentPatients(limit: number, offset: number): Promise<Patient[]>;
-  getTotalPatientCount(): Promise<number>;
+  getPatientsByIds(ids: number[]): Promise<Patient[]>;
   createPatient(patient: InsertPatient): Promise<Patient>;
   updatePatient(id: number, patient: UpdatePatient): Promise<Patient>;
   deletePatient(id: number): Promise<void>;
@@ -62,6 +62,7 @@ export interface IStorage {
       status: string;
     }[]
   >;
+  getTotalPatientCount(): Promise<number>;
   countPatients(filters: any): Promise<number>; // optional but useful
 
   // Appointment methods
@@ -70,7 +71,7 @@ export interface IStorage {
   getAppointmentsByUserId(userId: number): Promise<Appointment[]>;
   getAppointmentsByPatientId(patientId: number): Promise<Appointment[]>;
   getRecentAppointments(limit: number, offset: number): Promise<Appointment[]>;
-  getAppointmentsOn(date: Date): Promise<Appointment[]>;
+  getAppointmentsOnRange(start: Date, end: Date): Promise<Appointment[]>;
   createAppointment(appointment: InsertAppointment): Promise<Appointment>;
   updateAppointment(
     id: number,
@@ -290,6 +291,52 @@ export const storage: IStorage = {
     });
   },
 
+  async getPatientsByIds(ids: number[]): Promise<Patient[]> {
+    if (!ids || ids.length === 0) return [];
+    const uniqueIds = Array.from(new Set(ids));
+    return db.patient.findMany({
+      where: { id: { in: uniqueIds } },
+      select: {
+        id: true,
+        firstName: true,
+        lastName: true,
+        phone: true,
+        email: true,
+        dateOfBirth: true,
+        gender: true,
+        insuranceId: true,
+        insuranceProvider: true,
+        status: true,
+        userId: true,
+        createdAt: true,
+      },
+    });
+  },
+
+  async createPatient(patient: InsertPatient): Promise<Patient> {
+    return await db.patient.create({ data: patient as Patient });
+  },
+
+  async updatePatient(id: number, updateData: UpdatePatient): Promise<Patient> {
+    try {
+      return await db.patient.update({
+        where: { id },
+        data: updateData,
+      });
+    } catch (err) {
+      throw new Error(`Patient with ID ${id} not found`);
+    }
+  },
+
+  async deletePatient(id: number): Promise<void> {
+    try {
+      await db.patient.delete({ where: { id } });
+    } catch (err) {
+      console.error("Error deleting patient:", err);
+      throw new Error(`Failed to delete patient: ${err}`);
+    }
+  },
+
   async searchPatients({
     filters,
     limit,
@@ -326,30 +373,6 @@ export const storage: IStorage = {
     return db.patient.count({ where: filters });
   },
 
-  async createPatient(patient: InsertPatient): Promise<Patient> {
-    return await db.patient.create({ data: patient as Patient });
-  },
-
-  async updatePatient(id: number, updateData: UpdatePatient): Promise<Patient> {
-    try {
-      return await db.patient.update({
-        where: { id },
-        data: updateData,
-      });
-    } catch (err) {
-      throw new Error(`Patient with ID ${id} not found`);
-    }
-  },
-
-  async deletePatient(id: number): Promise<void> {
-    try {
-      await db.patient.delete({ where: { id } });
-    } catch (err) {
-      console.error("Error deleting patient:", err);
-      throw new Error(`Failed to delete patient: ${err}`);
-    }
-  },
-
   // Appointment methods
   async getAppointment(id: number): Promise<Appointment | undefined> {
     const appointment = await db.appointment.findUnique({ where: { id } });
@@ -368,13 +391,7 @@ export const storage: IStorage = {
     return await db.appointment.findMany({ where: { patientId } });
   },
 
-  async getAppointmentsOn(date: Date): Promise<Appointment[]> {
-    const start = new Date(date);
-    start.setHours(0, 0, 0, 0);
-
-    const end = new Date(date);
-    end.setHours(23, 59, 59, 999);
-
+  async getAppointmentsOnRange(start: Date, end: Date): Promise<Appointment[]> {
     return db.appointment.findMany({
       where: {
         date: {
diff --git a/apps/Frontend/src/pages/appointments-page.tsx b/apps/Frontend/src/pages/appointments-page.tsx
index faacf93..9fe4395 100644
--- a/apps/Frontend/src/pages/appointments-page.tsx
+++ b/apps/Frontend/src/pages/appointments-page.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useQuery, useMutation } from "@tanstack/react-query";
+import { useQuery, useMutation, keepPreviousData } from "@tanstack/react-query";
 import { format, addDays, startOfToday, addMinutes } from "date-fns";
 import { parseLocalDate, formatLocalDate } from "@/utils/dateUtils";
 import { AddAppointmentModal } from "@/components/appointments/add-appointment-modal";
@@ -69,16 +69,10 @@ export default function AppointmentsPage() {
   const { toast } = useToast();
   const { user } = useAuth();
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
-  const [isClaimModalOpen, setIsClaimModalOpen] = useState(false);
-  const [claimAppointmentId, setClaimAppointmentId] = useState<number | null>(
-    null
-  );
-  const [claimPatientId, setClaimPatientId] = useState<number | null>(null);
   const [editingAppointment, setEditingAppointment] = useState<
     Appointment | undefined
   >(undefined);
   const [selectedDate, setSelectedDate] = useState<Date>(startOfToday());
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [location] = useLocation();
   const [confirmDeleteState, setConfirmDeleteState] = useState<{
     open: boolean;
@@ -91,16 +85,15 @@ export default function AppointmentsPage() {
     id: APPOINTMENT_CONTEXT_MENU_ID,
   });
 
-  //Fetching staff memebers
-  const { data: staffMembersRaw = [] as Staff[], isLoading: isLoadingStaff } =
-    useQuery<Staff[]>({
-      queryKey: ["/api/staffs/"],
-      queryFn: async () => {
-        const res = await apiRequest("GET", "/api/staffs/");
-        return res.json();
-      },
-      enabled: !!user,
-    });
+  // Staff memebers
+  const { data: staffMembersRaw = [] as Staff[] } = useQuery<Staff[]>({
+    queryKey: ["/api/staffs/"],
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/staffs/");
+      return res.json();
+    },
+    enabled: !!user,
+  });
 
   const colors = [
     "bg-blue-600",
@@ -130,20 +123,44 @@ export default function AppointmentsPage() {
     }
   }
 
-  // Fetch appointments
+  // ----------------------
+  // Day-level fetch: appointments + patients for selectedDate (lightweight)
+  // ----------------------
+  const formattedSelectedDate = formatLocalDate(selectedDate);
+  type DayPayload = { appointments: Appointment[]; patients: Patient[] };
+  const queryKey = ["appointments", "day", formattedSelectedDate] as const;
+
   const {
-    data: appointments = [] as Appointment[],
+    data: dayPayload = {
+      appointments: [] as Appointment[],
+      patients: [] as Patient[],
+    },
     isLoading: isLoadingAppointments,
     refetch: refetchAppointments,
-  } = useQuery<Appointment[]>({
-    queryKey: ["/api/appointments/all"],
+  } = useQuery<
+    DayPayload,
+    Error,
+    DayPayload,
+    readonly [string, string, string]
+  >({
+    queryKey,
     queryFn: async () => {
-      const res = await apiRequest("GET", "/api/appointments/all");
+      const res = await apiRequest(
+        "GET",
+        `/api/appointments/day?date=${formattedSelectedDate}`
+      );
+      if (!res.ok) {
+        throw new Error("Failed to load appointments for date");
+      }
       return res.json();
     },
-    enabled: !!user,
+    enabled: !!user && !!formattedSelectedDate,
+    placeholderData: keepPreviousData,
   });
 
+  const appointments = dayPayload.appointments ?? [];
+  const patientsFromDay = dayPayload.patients ?? [];
+
   // Fetch patients (needed for the dropdowns)
   const { data: patients = [], isLoading: isLoadingPatients } = useQuery<
     Patient[]
@@ -344,7 +361,6 @@ export default function AppointmentsPage() {
     appointmentData: InsertAppointment | UpdateAppointment
   ) => {
     // Converts local date to exact UTC date with no offset issues
-
     const rawDate = parseLocalDate(appointmentData.date);
 
     const updatedData = {
@@ -399,12 +415,7 @@ export default function AppointmentsPage() {
     });
   };
 
-  const toggleMobileMenu = () => {
-    setIsMobileMenuOpen(!isMobileMenuOpen);
-  };
-
   // Get formatted date string for display
-  const formattedDate = format(selectedDate, "yyyy-MM-dd");
 
   const selectedDateAppointments = appointments.filter((appointment) => {
     const dateObj = parseLocalDate(appointment.date);
@@ -690,7 +701,9 @@ export default function AppointmentsPage() {
                   >
                     <ChevronLeft className="h-4 w-4" />
                   </Button>
-                  <h2 className="text-xl font-semibold">{formattedDate}</h2>
+                  <h2 className="text-xl font-semibold">
+                    {formattedSelectedDate}
+                  </h2>
                   <Button
                     variant="outline"
                     size="icon"
@@ -783,7 +796,7 @@ export default function AppointmentsPage() {
                   </Button>
                 </CardTitle>
                 <CardDescription>
-                  Statistics for {formattedDate}
+                  Statistics for {formattedSelectedDate}
                 </CardDescription>
               </CardHeader>
               <CardContent>