diff --git a/public/locale/en.json b/public/locale/en.json
index a8211b379a4..980ac3f3f1d 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -979,6 +979,7 @@
   "etiology_identified": "Etiology identified",
   "evening_slots": "Evening Slots",
   "events": "Events",
+  "exception": "Exception",
   "exception_created": "Exception created successfully",
   "exception_deleted": "Exception deleted",
   "exceptions": "Exceptions",
@@ -1878,6 +1879,8 @@
   "session_capacity": "Session Capacity",
   "session_expired": "Session Expired",
   "session_expired_msg": "It appears that your session has expired. This could be due to inactivity. Please login again to continue.",
+  "session_slots_info": "{{slots}} slots of {{minutes}} mins.",
+  "session_slots_info_striked": "<s>{{intended_slots}} slots</s> {{actual_slots}} slots of {{minutes}} mins.",
   "session_title": "Session Title",
   "session_title_placeholder": "IP Rounds",
   "session_type": "Session Type",
diff --git a/src/components/Users/UserAvailabilityTab.tsx b/src/components/Users/UserAvailabilityTab.tsx
index e1f83cfdb66..6ac227bec67 100644
--- a/src/components/Users/UserAvailabilityTab.tsx
+++ b/src/components/Users/UserAvailabilityTab.tsx
@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { useQueryParams } from "raviger";
 import { useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
 
 import { cn } from "@/lib/utils";
 
@@ -14,23 +15,37 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 import Loading from "@/components/Common/Loading";
 
 import useSlug from "@/hooks/useSlug";
 
 import query from "@/Utils/request/query";
-import { formatTimeShort } from "@/Utils/utils";
+import {
+  dateQueryString,
+  formatTimeShort,
+  humanizeStrings,
+} from "@/Utils/utils";
 import ScheduleExceptions from "@/pages/Scheduling/ScheduleExceptions";
 import ScheduleTemplates from "@/pages/Scheduling/ScheduleTemplates";
 import CreateScheduleExceptionSheet from "@/pages/Scheduling/components/CreateScheduleExceptionSheet";
 import CreateScheduleTemplateSheet from "@/pages/Scheduling/components/CreateScheduleTemplateSheet";
 import {
+  computeAppointmentSlots,
   filterAvailabilitiesByDayOfWeek,
   getSlotsPerSession,
   isDateInRange,
 } from "@/pages/Scheduling/utils";
-import { AvailabilityDateTime } from "@/types/scheduling/schedule";
+import {
+  AvailabilityDateTime,
+  ScheduleException,
+  ScheduleTemplate,
+} from "@/types/scheduling/schedule";
 import scheduleApis from "@/types/scheduling/scheduleApis";
 import { UserBase } from "@/types/user/user";
 
@@ -39,12 +54,16 @@ type Props = {
 };
 
 type AvailabilityTabQueryParams = {
-  view?: "schedule" | "exceptions";
+  tab?: "schedule" | "exceptions" | null;
+  sheet?: "create_template" | "add_exception" | null;
+  valid_from?: string | null;
+  valid_to?: string | null;
 };
 
 export default function UserAvailabilityTab({ userData: user }: Props) {
+  const { t } = useTranslation();
   const [qParams, setQParams] = useQueryParams<AvailabilityTabQueryParams>();
-  const view = qParams.view || "schedule";
+  const view = qParams.tab || "schedule";
   const [month, setMonth] = useState(new Date());
 
   const facilityId = useSlug("facility");
@@ -144,72 +163,12 @@ export default function UserAvailabilityTab({ userData: user }: Props) {
                   <div />
                 </div>
               </PopoverTrigger>
-              <PopoverContent className=" p-6" align="center" sideOffset={5}>
-                <div className="flex items-center justify-between">
-                  <p className="text-sm text-gray-600">
-                    {date.toLocaleDateString("default", {
-                      day: "numeric",
-                      month: "short",
-                      year: "numeric",
-                    })}
-                  </p>
-                  <Button variant="outline" size="sm">
-                    Add Exception
-                  </Button>
-                </div>
-
-                <ScrollArea className="h-[22rem]">
-                  {templates.map((template) => (
-                    <div key={template.id} className="border-t pt-3 mt-3">
-                      <div className="flex items-center">
-                        <ColoredIndicator
-                          className="mr-2 size-3 rounded"
-                          id={template.id}
-                        />
-                        <h3 className="text-lg font-semibold">
-                          {template.name}
-                        </h3>
-                      </div>
-
-                      <div className="pl-5 py-2 space-y-4">
-                        {template.availabilities.map(
-                          ({
-                            id,
-                            name,
-                            slot_type,
-                            availability,
-                            slot_size_in_minutes,
-                          }) => (
-                            <div key={id}>
-                              <h4 className="font-medium text-base">{name}</h4>
-                              <p className="text-sm text-gray-600">
-                                <span>{slot_type}</span>
-                                <span className="px-2 text-gray-300">|</span>
-                                <span className="text-sm">
-                                  {/* TODO: handle multiple days of week */}
-                                  {formatAvailabilityTime(availability)}
-                                </span>
-                              </p>
-                              {slot_type === "appointment" && (
-                                <p className="text-sm text-gray-600">
-                                  {Math.floor(
-                                    getSlotsPerSession(
-                                      availability[0].start_time,
-                                      availability[0].end_time,
-                                      slot_size_in_minutes,
-                                    ) ?? 0,
-                                  )}{" "}
-                                  slots of {slot_size_in_minutes} mins.
-                                </p>
-                              )}
-                            </div>
-                          ),
-                        )}
-                      </div>
-                    </div>
-                  ))}
-                </ScrollArea>
-              </PopoverContent>
+              <DayDetailsPopover
+                date={date}
+                templates={templates}
+                unavailableExceptions={unavailableExceptions}
+                setQParams={setQParams}
+              />
             </Popover>
           );
         }}
@@ -220,20 +179,20 @@ export default function UserAvailabilityTab({ userData: user }: Props) {
           <div className="flex bg-gray-100 rounded-lg p-1 gap-1 max-w-min">
             <Button
               variant={view === "schedule" ? "outline" : "ghost"}
-              onClick={() => setQParams({ view: "schedule" })}
+              onClick={() => setQParams({ tab: "schedule" })}
               className={cn(view === "schedule" && "shadow", "hover:bg-white")}
             >
-              Schedule
+              {t("schedule")}
             </Button>
             <Button
               variant={view === "exceptions" ? "outline" : "ghost"}
-              onClick={() => setQParams({ view: "exceptions" })}
+              onClick={() => setQParams({ tab: "exceptions" })}
               className={cn(
                 view === "exceptions" && "shadow",
                 "hover:bg-white",
               )}
             >
-              Exceptions
+              {t("exceptions")}
             </Button>
           </div>
           {view === "schedule" && (
@@ -284,6 +243,198 @@ export default function UserAvailabilityTab({ userData: user }: Props) {
   );
 }
 
+function DayDetailsPopover({
+  date,
+  templates,
+  unavailableExceptions,
+  setQParams,
+}: {
+  date: Date;
+  templates: ScheduleTemplate[];
+  unavailableExceptions: ScheduleException[];
+  setQParams: (params: AvailabilityTabQueryParams) => void;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <PopoverContent className="p-6" align="center" sideOffset={5}>
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-gray-600">
+          {date.toLocaleDateString("default", {
+            day: "numeric",
+            month: "short",
+            year: "numeric",
+          })}
+        </p>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            setQParams({
+              tab: "exceptions",
+              sheet: "add_exception",
+              valid_from: dateQueryString(date),
+              valid_to: dateQueryString(date),
+            })
+          }
+        >
+          {t("add_exception")}
+        </Button>
+      </div>
+
+      <ScrollArea className="h-[22rem]">
+        {templates.map((template) => (
+          <div key={template.id} className="border-t pt-3 mt-3">
+            <div className="flex items-center">
+              <ColoredIndicator
+                className="mr-2 size-3 rounded"
+                id={template.id}
+              />
+              <h3 className="text-lg font-semibold">{template.name}</h3>
+            </div>
+
+            <div className="pl-5 py-2 space-y-4">
+              {template.availabilities.map((availability) => (
+                <ScheduleTemplateAvailabilityItem
+                  key={availability.id}
+                  availability={availability}
+                  unavailableExceptions={unavailableExceptions}
+                  date={date}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+
+        {unavailableExceptions.length > 0 && (
+          <div className="space-y-3 mt-2">
+            {unavailableExceptions.map((exception) => (
+              <div key={exception.id} className="flex items-start">
+                <div
+                  className="mr-2 mt-1 w-3 h-8 rounded bg-yellow-200"
+                  style={diagonalStripes}
+                />
+                <div>
+                  <p className="text-sm text-black font-medium">
+                    {t("exception")}: {exception.reason}
+                  </p>
+                  <p className="text-sm text-gray-600">
+                    <span>{formatTimeShort(exception.start_time)}</span>
+                    <span className="px-2 text-gray-300">-</span>
+                    <span>{formatTimeShort(exception.end_time)}</span>
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </ScrollArea>
+    </PopoverContent>
+  );
+}
+
+function ScheduleTemplateAvailabilityItem({
+  availability,
+  unavailableExceptions,
+  date,
+}: {
+  availability: ScheduleTemplate["availabilities"][0];
+  unavailableExceptions: ScheduleException[];
+  date: Date;
+}) {
+  const { t } = useTranslation();
+
+  if (availability.slot_type !== "appointment") {
+    return (
+      <div key={availability.id}>
+        <h4 className="font-medium text-base">{availability.name}</h4>
+        <p className="text-sm text-gray-600">
+          <span>
+            {t(`SCHEDULE_AVAILABILITY_TYPE__${availability.slot_type}`)}
+          </span>
+          <span className="px-2 text-gray-300">|</span>
+          <span className="text-sm">
+            {/* TODO: handle multiple days of week */}
+            {formatAvailabilityTime(availability.availability)}
+          </span>
+        </p>
+      </div>
+    );
+  }
+
+  const intendedSlots = getSlotsPerSession(
+    availability.availability[0].start_time,
+    availability.availability[0].end_time,
+    availability.slot_size_in_minutes,
+  );
+
+  const computedSlots = computeAppointmentSlots(
+    availability,
+    unavailableExceptions,
+    date,
+  );
+
+  const availableSlots = computedSlots.filter(
+    (slot) => slot.isAvailable,
+  ).length;
+
+  const exceptions = [
+    ...new Set(computedSlots.flatMap((slot) => slot.exceptions)),
+  ];
+  const hasExceptions = exceptions.length > 0;
+
+  return (
+    <div key={availability.id}>
+      <h4 className="font-medium text-base">{availability.name}</h4>
+      <p className="text-sm text-gray-600">
+        <span>
+          {t(`SCHEDULE_AVAILABILITY_TYPE__${availability.slot_type}`)}
+        </span>
+        <span className="px-2 text-gray-300">|</span>
+        <span className="text-sm">
+          {formatAvailabilityTime(availability.availability)}
+        </span>
+      </p>
+      {availability.slot_type === "appointment" && (
+        <p className="text-sm text-gray-600">
+          {availableSlots === intendedSlots ? (
+            t("session_slots_info", {
+              slots: availableSlots,
+              minutes: availability.slot_size_in_minutes,
+            })
+          ) : (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="cursor-pointer underline">
+                  <Trans
+                    i18nKey="session_slots_info_striked"
+                    components={{
+                      s: <s />,
+                    }}
+                    values={{
+                      intended_slots: intendedSlots,
+                      actual_slots: availableSlots,
+                      minutes: availability.slot_size_in_minutes,
+                    }}
+                  />
+                </span>
+              </TooltipTrigger>
+              {hasExceptions && (
+                <TooltipContent className="max-w-xs" side="bottom">
+                  <p className="font-medium mb-1">
+                    {t("exceptions")}:{" "}
+                    {humanizeStrings(exceptions.map((e) => e.reason))}
+                  </p>
+                </TooltipContent>
+              )}
+            </Tooltip>
+          )}
+        </p>
+      )}
+    </div>
+  );
+}
+
 const diagonalStripes = {
   backgroundImage: `repeating-linear-gradient(
       -45deg,
diff --git a/src/pages/Scheduling/components/CreateScheduleExceptionSheet.tsx b/src/pages/Scheduling/components/CreateScheduleExceptionSheet.tsx
index cb9e93a8090..1433d94ecb0 100644
--- a/src/pages/Scheduling/components/CreateScheduleExceptionSheet.tsx
+++ b/src/pages/Scheduling/components/CreateScheduleExceptionSheet.tsx
@@ -1,7 +1,8 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { isBefore, parse } from "date-fns";
-import { useEffect, useState } from "react";
+import { isAfter, isBefore, parse } from "date-fns";
+import { useQueryParams } from "raviger";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -41,12 +42,23 @@ interface Props {
   trigger?: React.ReactNode;
 }
 
+type QueryParams = {
+  sheet?: "add_exception" | null;
+  valid_from?: string | null;
+  valid_to?: string | null;
+};
+
 export default function CreateScheduleExceptionSheet({
   facilityId,
   userId,
   trigger,
 }: Props) {
   const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  // Voluntarily masking the setQParams function to merge with other query params if any (since path is not unique within the user availability tab)
+  const [qParams, _setQParams] = useQueryParams<QueryParams>();
+  const setQParams = (p: QueryParams) => _setQParams(p, { replace: false });
 
   const formSchema = z
     .object({
@@ -77,19 +89,10 @@ export default function CreateScheduleExceptionSheet({
         path: ["start_time"], // This will show the error on the start_time field
       },
     )
-    .refine(
-      (data) => {
-        return isBefore(data.valid_from, data.valid_to);
-      },
-      {
-        message: t("from_date_must_be_before_to_date"),
-        path: ["valid_from"], // This will show the error on the valid_from field
-      },
-    );
-
-  const queryClient = useQueryClient();
-
-  const [open, setOpen] = useState(false);
+    .refine((data) => !isAfter(data.valid_from, data.valid_to), {
+      message: t("from_date_must_be_before_to_date"),
+      path: ["valid_from"], // This will show the error on the valid_from field
+    });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -103,13 +106,25 @@ export default function CreateScheduleExceptionSheet({
     },
   });
 
+  useEffect(() => {
+    if (qParams.valid_from) {
+      form.setValue("valid_from", new Date(qParams.valid_from));
+    }
+  }, [qParams.valid_from, form]);
+
+  useEffect(() => {
+    if (qParams.valid_to) {
+      form.setValue("valid_to", new Date(qParams.valid_to));
+    }
+  }, [qParams.valid_to, form]);
+
   const { mutate: createException, isPending } = useMutation({
     mutationFn: mutate(scheduleApis.exceptions.create, {
       pathParams: { facility_id: facilityId },
     }),
     onSuccess: () => {
       toast.success(t("exception_created"));
-      setOpen(false);
+      setQParams({ sheet: null, valid_from: null, valid_to: null });
       form.reset();
       queryClient.invalidateQueries({
         queryKey: ["user-schedule-exceptions", { facilityId, userId }],
@@ -127,7 +142,7 @@ export default function CreateScheduleExceptionSheet({
       form.resetField("start_time");
       form.resetField("end_time");
     }
-  }, [unavailableAllDay]);
+  }, [unavailableAllDay, form]);
 
   function onSubmit(data: z.infer<typeof formSchema>) {
     createException({
@@ -141,7 +156,16 @@ export default function CreateScheduleExceptionSheet({
   }
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
+    <Sheet
+      open={qParams.sheet === "add_exception"}
+      onOpenChange={(open) =>
+        setQParams({
+          sheet: open ? "add_exception" : null,
+          valid_from: null,
+          valid_to: null,
+        })
+      }
+    >
       <SheetTrigger asChild>
         {trigger ?? (
           <Button variant="primary" disabled={isPending}>
diff --git a/src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx b/src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx
index b7bede4171c..c635f5a5b11 100644
--- a/src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx
+++ b/src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx
@@ -1,8 +1,8 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { isBefore, parse } from "date-fns";
+import { isAfter, isBefore, parse } from "date-fns";
 import { ArrowRightIcon } from "lucide-react";
-import { useState } from "react";
+import { useQueryParams } from "raviger";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Trans } from "react-i18next";
@@ -59,6 +59,10 @@ interface Props {
   trigger?: React.ReactNode;
 }
 
+type QueryParams = {
+  sheet?: "create_template" | null;
+};
+
 export default function CreateScheduleTemplateSheet({
   facilityId,
   userId,
@@ -67,7 +71,10 @@ export default function CreateScheduleTemplateSheet({
   const { t } = useTranslation();
   const queryClient = useQueryClient();
 
-  const [open, setOpen] = useState(false);
+  // Voluntarily masking the setQParams function to merge with other query params if any (since path is not unique within the user availability tab)
+  const [qParams, _setQParams] = useQueryParams<QueryParams>();
+  const setQParams = (p: QueryParams) => _setQParams(p, { replace: false });
+
   const weekdayFormat = useBreakpoints({
     default: "alphabet",
     md: "short",
@@ -137,15 +144,10 @@ export default function CreateScheduleTemplateSheet({
         )
         .min(1, t("schedule_sessions_min_error")),
     })
-    .refine(
-      (data) => {
-        return isBefore(data.valid_from, data.valid_to);
-      },
-      {
-        message: t("from_date_must_be_before_to_date"),
-        path: ["valid_from"],
-      },
-    );
+    .refine((data) => !isAfter(data.valid_from, data.valid_to), {
+      message: t("from_date_must_be_before_to_date"),
+      path: ["valid_from"],
+    });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -174,7 +176,7 @@ export default function CreateScheduleTemplateSheet({
     }),
     onSuccess: () => {
       toast.success("Schedule template created successfully");
-      setOpen(false);
+      setQParams({ sheet: null });
       form.reset();
       queryClient.invalidateQueries({
         queryKey: ["user-schedule-templates", { facilityId, userId }],
@@ -241,7 +243,12 @@ export default function CreateScheduleTemplateSheet({
   };
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
+    <Sheet
+      open={qParams.sheet === "create_template"}
+      onOpenChange={(open) =>
+        setQParams({ sheet: open ? "create_template" : null })
+      }
+    >
       <SheetTrigger asChild>
         {trigger ?? (
           <Button variant="primary" disabled={isPending}>
diff --git a/src/pages/Scheduling/utils.ts b/src/pages/Scheduling/utils.ts
index ec2868c8fec..aa1aac515c0 100644
--- a/src/pages/Scheduling/utils.ts
+++ b/src/pages/Scheduling/utils.ts
@@ -1,7 +1,17 @@
-import { isSameDay, isWithinInterval } from "date-fns";
+import {
+  addMinutes,
+  format,
+  isSameDay,
+  isWithinInterval,
+  parse,
+} from "date-fns";
 
 import { Time } from "@/Utils/types";
-import { Appointment, ScheduleAvailability } from "@/types/scheduling/schedule";
+import {
+  Appointment,
+  ScheduleAvailability,
+  ScheduleException,
+} from "@/types/scheduling/schedule";
 
 export const isDateInRange = (
   date: Date,
@@ -32,6 +42,80 @@ export function getDurationInMinutes(startTime: Time, endTime: Time) {
   return (end.getTime() - start.getTime()) / (1000 * 60);
 }
 
+type VirtualSlot = {
+  start_time: Time;
+  end_time: Time;
+  isAvailable: boolean;
+  exceptions: ScheduleException[];
+};
+
+export function computeAppointmentSlots(
+  availability: ScheduleAvailability & { slot_type: "appointment" },
+  exceptions: ScheduleException[],
+  referenceDate: Date = new Date(),
+) {
+  const startTime = parse(
+    availability.availability[0].start_time,
+    "HH:mm:ss",
+    referenceDate,
+  );
+  const endTime = parse(
+    availability.availability[0].end_time,
+    "HH:mm:ss",
+    referenceDate,
+  );
+  const slotSizeInMinutes = availability.slot_size_in_minutes;
+  const slots: VirtualSlot[] = [];
+
+  let time = startTime;
+  while (time < endTime) {
+    const slotEndTime = addMinutes(time, slotSizeInMinutes);
+    if (slotEndTime > endTime) {
+      break;
+    }
+    slots.push({
+      start_time: format(time, "HH:mm") as Time,
+      end_time: format(slotEndTime, "HH:mm") as Time,
+      isAvailable: true,
+      exceptions: [],
+    });
+    time = slotEndTime;
+  }
+
+  for (const exception of exceptions) {
+    const exceptionTime = parse(
+      exception.start_time,
+      "HH:mm:ss",
+      referenceDate,
+    );
+    const exceptionEndTime = parse(
+      exception.end_time,
+      "HH:mm:ss",
+      referenceDate,
+    );
+
+    slots.forEach((slot) => {
+      const slotStart = parse(slot.start_time, "HH:mm", referenceDate);
+      const slotEnd = parse(slot.end_time, "HH:mm", referenceDate);
+      if (
+        isWithinInterval(slotStart, {
+          start: exceptionTime,
+          end: exceptionEndTime,
+        }) ||
+        isWithinInterval(slotEnd, {
+          start: exceptionTime,
+          end: exceptionEndTime,
+        })
+      ) {
+        slot.isAvailable = false;
+        slot.exceptions.push(exception);
+      }
+    });
+  }
+
+  return slots;
+}
+
 export function getSlotsPerSession(
   startTime: Time,
   endTime: Time,
@@ -39,7 +123,7 @@ export function getSlotsPerSession(
 ) {
   const duration = getDurationInMinutes(startTime, endTime);
   if (!duration) return null;
-  return duration / slotSizeInMinutes;
+  return Math.floor(duration / slotSizeInMinutes);
 }
 
 export function getTokenDuration(