diff --git a/public/locale/en.json b/public/locale/en.json
index 654cfa019f3..e060c325ab8 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -437,6 +437,7 @@
   "authorize_shift_delete": "Authorize shift delete",
   "auto_generated_for_care": "Auto Generated for Care",
   "autofilled_fields": "Autofilled Fields",
+  "availabilities": "Availabilities",
   "available_features": "Available Features",
   "available_in": "Available in",
   "available_time_slots": "Available Time Slots",
@@ -657,6 +658,7 @@
   "created_by": "Created By",
   "created_date": "Created Date",
   "created_on": "Created On",
+  "creating": "Creating...",
   "criticality": "Criticality",
   "csv_file_in_the_specified_format": "Select a CSV file in the specified format",
   "current_address": "Current Address",
@@ -1240,11 +1242,13 @@
   "new_password_confirmation": "Confirm New Password",
   "new_password_same_as_old": "New password is same as old password, please enter a different new password.",
   "new_password_validation": "New password is not valid.",
+  "new_session": "New Session",
   "next_sessions": "Next Sessions",
   "no": "No",
   "no_address_provided": "No address provided",
   "no_appointments": "No appointments found",
   "no_attachments_found": "This communication has no attachments.",
+  "no_availabilities_yet": "No availabilities yet",
   "no_bed_asset_linked_allocated": "No bed/asset linked allocated",
   "no_bed_types_found": "No Bed Types found",
   "no_beds_available": "No beds available",
@@ -1624,8 +1628,8 @@
   "scan_asset_qr": "Scan Asset QR!",
   "schedule": "Schedule",
   "schedule_appointment": "Schedule Appointment",
+  "schedule_availability_created_successfully": "Availability created successfully",
   "schedule_availability_deleted_successfully": "Schedule availability deleted successfully",
-  "schedule_availability_updated_successfully": "Schedule availability updated successfully",
   "schedule_calendar": "Schedule Calendar",
   "schedule_end_time": "End Time",
   "schedule_for": "Scheduled for",
@@ -1633,7 +1637,6 @@
   "schedule_remarks": "Remarks",
   "schedule_remarks_placeholder": "Any additional notes about this session",
   "schedule_session_time": "Session Time",
-  "schedule_session_title": "Session Title",
   "schedule_session_type": "Session Type",
   "schedule_sessions": "Sessions",
   "schedule_sessions_min_error": "Add at least one session",
@@ -1644,7 +1647,6 @@
   "schedule_template": "Schedule Template",
   "schedule_template_name": "Template Name",
   "schedule_template_name_placeholder": "Regular OP Day",
-  "schedule_tokens_per_slot": "Patients per Slot",
   "schedule_valid_from_till_range": "Valid from <strong>{{from_date}}</strong> till <strong>{{to_date}}</strong>",
   "schedule_weekdays": "Weekdays",
   "schedule_weekdays_description": "Select the weekdays applicable for the template",
@@ -1704,6 +1706,7 @@
   "send_sample_to_collection_centre_title": "Send sample to collection centre",
   "serial_number": "Serial Number",
   "serviced_on": "Serviced on",
+  "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_title": "Session Title",
@@ -1738,6 +1741,7 @@
   "skill_add_error": "Error while adding skill",
   "skill_added_successfully": "Skill added successfully",
   "skills": "Skills",
+  "slot_configuration": "Slot Configuration",
   "slots_left": "slots left",
   "social_profile": "Social Profile",
   "social_profile_detail": "Include occupation, ration card category, socioeconomic status, and domestic healthcare support for a complete profile.",
@@ -1803,6 +1807,7 @@
   "total_amount": "Total Amount",
   "total_beds": "Total Beds",
   "total_patients": "Total Patients",
+  "total_slots": "Total Slots",
   "total_staff": "Total Staff",
   "total_users": "Total Users",
   "transcribe_again": "Transcribe Again",
diff --git a/src/CAREUI/interactive/WeekdayCheckbox.tsx b/src/CAREUI/interactive/WeekdayCheckbox.tsx
index 1660d14ef02..55ebc304516 100644
--- a/src/CAREUI/interactive/WeekdayCheckbox.tsx
+++ b/src/CAREUI/interactive/WeekdayCheckbox.tsx
@@ -1,31 +1,32 @@
 import { useTranslation } from "react-i18next";
 
-import { cn } from "@/lib/utils";
-
-import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
 
 // 0 is Monday, 6 is Sunday - Python's convention.
-const DAYS_OF_WEEK = {
-  MONDAY: 0,
-  TUESDAY: 1,
-  WEDNESDAY: 2,
-  THURSDAY: 3,
-  FRIDAY: 4,
-  SATURDAY: 5,
-  SUNDAY: 6,
-} as const;
-
-export type DayOfWeekValue = (typeof DAYS_OF_WEEK)[keyof typeof DAYS_OF_WEEK];
+export enum DayOfWeek {
+  MONDAY = 0,
+  TUESDAY = 1,
+  WEDNESDAY = 2,
+  THURSDAY = 3,
+  FRIDAY = 4,
+  SATURDAY = 5,
+  SUNDAY = 6,
+}
 
 interface Props {
-  value?: DayOfWeekValue[];
-  onChange?: (value: DayOfWeekValue[]) => void;
+  value?: DayOfWeek[];
+  onChange?: (value: DayOfWeek[]) => void;
+  format?: "alphabet" | "short" | "long";
 }
 
-export default function WeekdayCheckbox({ value = [], onChange }: Props) {
+export default function WeekdayCheckbox({
+  value = [],
+  onChange,
+  format = "alphabet",
+}: Props) {
   const { t } = useTranslation();
 
-  const handleDayToggle = (day: DayOfWeekValue) => {
+  const handleDayToggle = (day: DayOfWeek) => {
     if (!onChange) return;
 
     if (value.includes(day)) {
@@ -36,36 +37,35 @@ export default function WeekdayCheckbox({ value = [], onChange }: Props) {
   };
 
   return (
-    <ul className="flex justify-between">
-      {Object.values(DAYS_OF_WEEK).map((day) => {
-        const isChecked = value.includes(day);
+    <div className="flex gap-2 md:gap-4">
+      {[
+        "MONDAY",
+        "TUESDAY",
+        "WEDNESDAY",
+        "THURSDAY",
+        "FRIDAY",
+        "SATURDAY",
+        "SUNDAY",
+      ].map((day) => {
+        const dow = DayOfWeek[day as keyof typeof DayOfWeek];
+        const isSelected = value.includes(dow);
 
         return (
-          <li key={day}>
-            <div
-              className={cn(
-                "flex flex-col items-center justify-center gap-2 rounded-lg border px-8 py-6 transition-all duration-200 ease-in-out",
-                isChecked
-                  ? "border-primary-500 bg-white shadow"
-                  : "border-gray-300",
-              )}
-            >
-              <Checkbox
-                id={`day_of_week_checkbox_${day}`}
-                checked={isChecked}
-                onCheckedChange={() => handleDayToggle(day)}
-              />
-              <label
-                htmlFor={`day_of_week_checkbox_${day}`}
-                className="cursor-pointer text-xs font-semibold uppercase"
-                onClick={(e) => e.stopPropagation()}
-              >
-                {t(`DAYS_OF_WEEK_SHORT__${day}`)}
-              </label>
-            </div>
-          </li>
+          <Button
+            key={dow}
+            type="button"
+            variant={isSelected ? "outline_primary" : "outline"}
+            onClick={() => handleDayToggle(dow)}
+            size={format === "alphabet" ? "icon" : "default"}
+          >
+            {format === "alphabet"
+              ? day[0]
+              : format === "short"
+                ? t(`DAYS_OF_WEEK_SHORT__${dow}`)
+                : t(`DAYS_OF_WEEK__${dow}`)}
+          </Button>
         );
       })}
-    </ul>
+    </div>
   );
 }
diff --git a/src/components/Schedule/ScheduleTemplateEditForm.tsx b/src/components/Schedule/ScheduleTemplateEditForm.tsx
index 081255c7294..a2e952fe3cc 100644
--- a/src/components/Schedule/ScheduleTemplateEditForm.tsx
+++ b/src/components/Schedule/ScheduleTemplateEditForm.tsx
@@ -1,20 +1,21 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { ArrowRightIcon } from "lucide-react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { Trans } from "react-i18next";
 import { toast } from "sonner";
 import * as z from "zod";
 
+import Callout from "@/CAREUI/display/Callout";
 import CareIcon from "@/CAREUI/icons/CareIcon";
+import WeekdayCheckbox, {
+  DayOfWeek,
+} from "@/CAREUI/interactive/WeekdayCheckbox";
 
 import { Button } from "@/components/ui/button";
 import { DatePicker } from "@/components/ui/date-picker";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import {
   Form,
   FormControl,
@@ -24,20 +25,30 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 
-import { getSlotsPerSession } from "@/components/Schedule/helpers";
+import {
+  getSlotsPerSession,
+  getTokenDuration,
+} from "@/components/Schedule/helpers";
 import { formatAvailabilityTime } from "@/components/Users/UserAvailabilityTab";
 
 import mutate from "@/Utils/request/mutate";
+import { Time } from "@/Utils/types";
 import { dateQueryString } from "@/Utils/utils";
 import {
   AvailabilityDateTime,
   ScheduleAvailability,
-  ScheduleAvailabilityUpdateRequest,
+  ScheduleAvailabilityCreateRequest,
   ScheduleTemplate,
 } from "@/types/scheduling/schedule";
-import { DayOfWeek } from "@/types/scheduling/schedule";
 import scheduleApis from "@/types/scheduling/scheduleApis";
 
 export default function ScheduleTemplateEditForm({
@@ -49,13 +60,26 @@ export default function ScheduleTemplateEditForm({
   facilityId: string;
   userId: string;
 }) {
+  const { t } = useTranslation();
+
   return (
-    <div>
+    <div className="overflow-auto -mx-6 px-6 pb-16">
       <ScheduleTemplateEditor
         template={template}
         facilityId={facilityId}
         userId={userId}
       />
+
+      <div className="mt-4">
+        <h2 className="text-lg font-semibold">{t("availabilities")}</h2>
+      </div>
+
+      {template.availabilities.length === 0 && (
+        <div className="mt-4">
+          <p className="text-sm text-gray-500">{t("no_availabilities_yet")}</p>
+        </div>
+      )}
+
       {template.availabilities.map((availability) => (
         <AvailabilityEditor
           key={availability.id}
@@ -65,6 +89,12 @@ export default function ScheduleTemplateEditForm({
           userId={userId}
         />
       ))}
+
+      <NewAvailabilityCard
+        scheduleId={template.id}
+        facilityId={facilityId}
+        userId={userId}
+      />
     </div>
   );
 }
@@ -144,7 +174,7 @@ const ScheduleTemplateEditor = ({
             )}
           />
 
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid md:grid-cols-2 gap-4">
             <FormField
               control={form.control}
               name="valid_from"
@@ -201,22 +231,6 @@ const AvailabilityEditor = ({
   const { t } = useTranslation();
   const queryClient = useQueryClient();
 
-  const { mutate: updateAvailability, isPending: isUpdating } = useMutation({
-    mutationFn: mutate(scheduleApis.templates.availabilities.update, {
-      pathParams: {
-        facility_id: facilityId,
-        schedule_id: scheduleId,
-        id: availability.id,
-      },
-    }),
-    onSuccess: () => {
-      toast.success(t("schedule_availability_updated_successfully"));
-      queryClient.invalidateQueries({
-        queryKey: ["user-schedule-templates", { facilityId, userId }],
-      });
-    },
-  });
-
   const { mutate: deleteAvailability, isPending: isDeleting } = useMutation({
     mutationFn: mutate(scheduleApis.templates.availabilities.delete, {
       pathParams: {
@@ -233,58 +247,6 @@ const AvailabilityEditor = ({
     },
   });
 
-  return availability.slot_type === "appointment" ? (
-    <AppointmentAvailabilityEditor
-      availability={availability}
-      updateAvailability={updateAvailability}
-      deleteAvailability={deleteAvailability}
-      isProcessing={isUpdating || isDeleting}
-    />
-  ) : (
-    <NonAppointmentAvailabilityEditor
-      availability={availability}
-      updateAvailability={updateAvailability}
-      deleteAvailability={deleteAvailability}
-      isProcessing={isUpdating || isDeleting}
-    />
-  );
-};
-
-const AppointmentAvailabilityEditor = ({
-  availability,
-  updateAvailability,
-  deleteAvailability,
-  isProcessing,
-}: {
-  availability: ScheduleAvailability & { slot_type: "appointment" };
-  updateAvailability: (request: ScheduleAvailabilityUpdateRequest) => void;
-  deleteAvailability: () => void;
-  isProcessing: boolean;
-}) => {
-  const { t } = useTranslation();
-  const appointmentAvailabilityFormSchema = z.object({
-    name: z.string().min(1, t("field_required")),
-    tokens_per_slot: z.number().min(1, t("number_min_error", { min: 1 })),
-    reason: z.string(),
-  });
-
-  const form = useForm<z.infer<typeof appointmentAvailabilityFormSchema>>({
-    resolver: zodResolver(appointmentAvailabilityFormSchema),
-    defaultValues: {
-      name: availability.name,
-      tokens_per_slot: availability.tokens_per_slot,
-      reason: availability.reason || "",
-    },
-  });
-
-  function onSubmit(values: z.infer<typeof appointmentAvailabilityFormSchema>) {
-    updateAvailability({
-      name: values.name,
-      tokens_per_slot: values.tokens_per_slot,
-      reason: values.reason,
-    });
-  }
-
   // Group availabilities by day of week
   const availabilitiesByDay = availability.availability.reduce(
     (acc, curr) => {
@@ -298,218 +260,272 @@ const AppointmentAvailabilityEditor = ({
     {} as Record<DayOfWeek, AvailabilityDateTime[]>,
   );
 
-  // Calculate total slots
-  const totalSlots = Math.floor(
-    getSlotsPerSession(
-      availability.availability[0].start_time,
-      availability.availability[0].end_time,
+  // Calculate slots and duration for appointment type
+  const { totalSlots, tokenDuration } = (() => {
+    if (availability.slot_type !== "appointment")
+      return { totalSlots: null, tokenDuration: null };
+
+    const slots = Math.floor(
+      getSlotsPerSession(
+        availability.availability[0].start_time,
+        availability.availability[0].end_time,
+        availability.slot_size_in_minutes,
+      ) ?? 0,
+    );
+
+    const duration = getTokenDuration(
       availability.slot_size_in_minutes,
-    ) ?? 0,
-  );
+      availability.tokens_per_slot,
+    );
+
+    return { totalSlots: slots, tokenDuration: duration };
+  })();
 
   return (
     <div className="mt-4 rounded-lg bg-white p-4 shadow">
       <div className="mb-4 flex items-center justify-between">
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-3">
           <CareIcon icon="l-clock" className="text-lg text-blue-600" />
-          <div>
-            <span className="font-semibold">{availability.name}</span>
-            <p className="text-sm text-gray-500">
-              <span className="capitalize">{availability.slot_type}</span>
-              <span className="px-2 text-gray-300">|</span>
-              <span>{totalSlots} slots</span>
-              <span className="px-2 text-gray-300">|</span>
-              <span>{availability.slot_size_in_minutes} min.</span>
-            </p>
-          </div>
+          <span className="font-semibold">{availability.name}</span>
+          <span className="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">
+            {t(`SCHEDULE_AVAILABILITY_TYPE__${availability.slot_type}`)}
+          </span>
         </div>
 
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon">
-              <CareIcon icon="l-ellipsis-v" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem
-              onClick={() => deleteAvailability()}
-              disabled={isProcessing}
-              className="text-red-600"
-            >
-              <CareIcon icon="l-trash" className="mr-2" />
-              {t("delete")}
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => deleteAvailability()}
+          disabled={isDeleting}
+          className="text-red-600 hover:text-red-700 hover:bg-red-50"
+        >
+          <CareIcon icon="l-trash" className="text-lg" />
+        </Button>
       </div>
 
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-          <div className="flex flex-col gap-4 md:flex-row md:gap-6">
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem className="flex-[2]">
-                  <FormLabel required>{t("schedule_session_title")}</FormLabel>
-                  <FormControl>
-                    <Input {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="tokens_per_slot"
-              render={({ field }) => (
-                <FormItem className="flex-1">
-                  <FormLabel required>
-                    {t("schedule_tokens_per_slot")}
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      type="number"
-                      min={1}
-                      {...field}
-                      onChange={(e) => field.onChange(e.target.valueAsNumber)}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </div>
+      <div className="space-y-4">
+        {availability.slot_type === "appointment" && (
+          <div className="grid md:grid-cols-2 gap-3">
+            <div className="flex flex-col rounded-md bg-gray-50 p-3">
+              <span className="text-sm font-medium text-gray-600">
+                {t("slot_configuration")}
+              </span>
+              <div className="mt-2 flex items-baseline gap-1">
+                <span className="text-2xl font-semibold text-gray-900">
+                  {availability.slot_size_in_minutes}
+                </span>
+                <span className="text-sm font-normal text-gray-500">min</span>
+                <span className="mx-1 text-gray-400">×</span>
+                <span className="text-2xl font-semibold text-gray-900">
+                  {availability.tokens_per_slot}
+                </span>
+                <span className="text-sm font-normal text-gray-500">
+                  patients
+                </span>
+              </div>
+              <span className="mt-1 text-sm text-gray-500">
+                ≈ {tokenDuration?.toFixed(1).replace(".0", "")} min per patient
+              </span>
+            </div>
 
-          <div>
-            <span className="text-sm font-medium text-gray-500">
-              {t("schedule")}
-            </span>
-            <div className="mt-2 space-y-2">
-              {Object.entries(availabilitiesByDay).map(([day, times]) => (
-                <p
-                  key={day}
-                  className="flex items-center gap-2 rounded px-3 text-sm"
-                >
-                  <span className="font-medium w-24 text-gray-600">
-                    {DayOfWeek[parseInt(day)].charAt(0) +
-                      DayOfWeek[parseInt(day)].slice(1).toLowerCase()}
-                  </span>
-                  <span className="text-gray-500">
-                    {times
-                      .map((time) => formatAvailabilityTime([time]))
-                      .join(", ")}
-                  </span>
-                </p>
-              ))}
+            <div className="flex flex-col rounded-md bg-gray-50 p-3">
+              <span className="text-sm font-medium text-gray-600">
+                {t("session_capacity")}
+              </span>
+              <div className="mt-2 flex items-baseline gap-1">
+                <span className="text-2xl font-semibold text-gray-900">
+                  {totalSlots}
+                </span>
+                <span className="text-sm font-normal text-gray-500">slots</span>
+                <span className="mx-1 text-gray-400">×</span>
+                <span className="text-2xl font-semibold text-gray-900">
+                  {availability.tokens_per_slot}
+                </span>
+                <span className="text-sm font-normal text-gray-500">
+                  patients
+                </span>
+              </div>
+              <span className="mt-1 text-sm text-gray-500">
+                = {totalSlots ? totalSlots * availability.tokens_per_slot : 0}{" "}
+                total patients
+              </span>
             </div>
           </div>
+        )}
+
+        <div>
+          <span className="text-sm font-medium text-gray-500">
+            {t("remarks")}
+          </span>
+          <p className="mt-1 text-sm text-gray-600">
+            {availability.reason || t("no_remarks")}
+          </p>
+        </div>
 
-          <FormField
-            control={form.control}
-            name="reason"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Remarks</FormLabel>
-                <FormControl>
-                  <Textarea className="resize-none" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <div className="flex justify-end">
-            <Button variant="primary" type="submit" disabled={isProcessing}>
-              {isProcessing ? t("saving") : t("save")}
-            </Button>
+        <div>
+          <span className="text-sm font-medium text-gray-500">
+            {t("schedule")}
+          </span>
+          <div className="mt-2 space-y-1 pl-2">
+            {Object.entries(availabilitiesByDay).map(([day, times]) => (
+              <p key={day} className="flex items-center gap-2 text-sm">
+                <span className="font-medium w-24 text-gray-600">
+                  {DayOfWeek[parseInt(day)].charAt(0) +
+                    DayOfWeek[parseInt(day)].slice(1).toLowerCase()}
+                </span>
+                <span className="text-gray-500">
+                  {times
+                    .map((time) => formatAvailabilityTime([time]))
+                    .join(", ")}
+                </span>
+              </p>
+            ))}
           </div>
-        </form>
-      </Form>
+        </div>
+      </div>
     </div>
   );
 };
 
-const NonAppointmentAvailabilityEditor = ({
-  availability,
-  updateAvailability,
-  deleteAvailability,
-  isProcessing,
+const NewAvailabilityCard = ({
+  scheduleId,
+  facilityId,
+  userId,
 }: {
-  availability: ScheduleAvailability & { slot_type: "open" | "closed" };
-  updateAvailability: (request: ScheduleAvailabilityUpdateRequest) => void;
-  deleteAvailability: () => void;
-  isProcessing: boolean;
+  scheduleId: string;
+  facilityId: string;
+  userId: string;
 }) => {
   const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  const nonAppointmentAvailabilityFormSchema = z.object({
+  const formSchema = z.object({
     name: z.string().min(1, t("field_required")),
+    slot_type: z.enum(["appointment", "open", "closed"]),
+    start_time: z
+      .string()
+      .min(1, t("field_required")) as unknown as z.ZodType<Time>,
+    end_time: z
+      .string()
+      .min(1, t("field_required")) as unknown as z.ZodType<Time>,
+    slot_size_in_minutes: z.number().nullable(),
+    tokens_per_slot: z.number().nullable(),
     reason: z.string(),
+    weekdays: z
+      .array(z.number() as unknown as z.ZodType<DayOfWeek>)
+      .min(1, t("schedule_weekdays_min_error")),
   });
 
-  const form = useForm<z.infer<typeof nonAppointmentAvailabilityFormSchema>>({
-    resolver: zodResolver(nonAppointmentAvailabilityFormSchema),
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
     defaultValues: {
-      name: availability.name,
-      reason: availability.reason || "",
+      name: "",
+      slot_type: "appointment",
+      start_time: undefined,
+      end_time: undefined,
+      slot_size_in_minutes: null,
+      tokens_per_slot: null,
+      reason: "",
+      weekdays: [],
     },
   });
 
-  function onSubmit(
-    values: z.infer<typeof nonAppointmentAvailabilityFormSchema>,
-  ) {
-    updateAvailability({
+  const { mutate: createAvailability, isPending } = useMutation({
+    mutationFn: mutate(scheduleApis.templates.availabilities.create, {
+      pathParams: {
+        facility_id: facilityId,
+        schedule_id: scheduleId,
+      },
+    }),
+    onSuccess: () => {
+      toast.success(t("schedule_availability_created_successfully"));
+      queryClient.invalidateQueries({
+        queryKey: ["user-schedule-templates", { facilityId, userId }],
+      });
+      form.reset();
+      setIsExpanded(false);
+    },
+  });
+
+  const timeAllocationCallout = () => {
+    const startTime = form.watch("start_time");
+    const endTime = form.watch("end_time");
+    const slotSizeInMinutes = form.watch("slot_size_in_minutes");
+    const tokensPerSlot = form.watch("tokens_per_slot");
+
+    if (!startTime || !endTime || !slotSizeInMinutes || !tokensPerSlot) {
+      return null;
+    }
+
+    const slotsPerSession = getSlotsPerSession(
+      startTime,
+      endTime,
+      slotSizeInMinutes,
+    );
+    const tokenDuration = getTokenDuration(slotSizeInMinutes, tokensPerSlot);
+
+    if (!slotsPerSession || !tokenDuration) return null;
+
+    return (
+      <Callout variant="alert" badge="Info">
+        <Trans
+          i18nKey="schedule_slots_allocation_callout"
+          values={{
+            slots: Math.floor(slotsPerSession),
+            token_duration: tokenDuration.toFixed(1).replace(".0", ""),
+          }}
+        />
+      </Callout>
+    );
+  };
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    const availability = {
       name: values.name,
+      slot_type: values.slot_type,
       reason: values.reason,
-      tokens_per_slot: null,
-    });
+      availability: values.weekdays.map((day) => ({
+        day_of_week: day,
+        start_time: values.start_time,
+        end_time: values.end_time,
+      })),
+      ...(values.slot_type === "appointment"
+        ? {
+            slot_size_in_minutes: values.slot_size_in_minutes!,
+            tokens_per_slot: values.tokens_per_slot!,
+          }
+        : {
+            slot_size_in_minutes: null,
+            tokens_per_slot: null,
+          }),
+    } as ScheduleAvailabilityCreateRequest;
+
+    createAvailability(availability);
   }
 
-  // Group availabilities by day of week
-  const availabilitiesByDay = availability.availability.reduce(
-    (acc, curr) => {
-      const day = curr.day_of_week;
-      if (!acc[day]) {
-        acc[day] = [];
-      }
-      acc[day].push(curr);
-      return acc;
-    },
-    {} as Record<DayOfWeek, AvailabilityDateTime[]>,
-  );
+  if (!isExpanded) {
+    return (
+      <div className="mt-4">
+        <Button
+          variant="outline_primary"
+          onClick={() => setIsExpanded(true)}
+          className="w-full"
+        >
+          <CareIcon icon="l-plus" className="text-lg" />
+          <span>{t("add_another_session")}</span>
+        </Button>
+      </div>
+    );
+  }
 
   return (
     <div className="mt-4 rounded-lg bg-white p-4 shadow">
       <div className="mb-4 flex items-center justify-between">
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-3">
           <CareIcon icon="l-clock" className="text-lg text-blue-600" />
-          <div>
-            <span className="font-semibold">{availability.name}</span>
-            <p className="text-sm text-gray-500">
-              <span className="capitalize">{availability.slot_type}</span>
-            </p>
-          </div>
+          <span className="font-semibold">{t("new_session")}</span>
         </div>
-
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon">
-              <CareIcon icon="l-ellipsis-v" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem
-              onClick={() => deleteAvailability()}
-              disabled={isProcessing}
-              className="text-red-600"
-            >
-              <CareIcon icon="l-trash" className="mr-2" />
-              Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
       </div>
 
       <Form {...form}>
@@ -519,54 +535,184 @@ const NonAppointmentAvailabilityEditor = ({
             name="name"
             render={({ field }) => (
               <FormItem>
-                <FormLabel required>Session Title</FormLabel>
+                <FormLabel required>{t("session_title")}</FormLabel>
                 <FormControl>
-                  <Input {...field} />
+                  <Input
+                    placeholder={t("session_title_placeholder")}
+                    {...field}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
             )}
           />
 
-          <div>
-            <span className="text-sm font-medium text-gray-500">Schedule</span>
-            <div className="mt-2 space-y-2">
-              {Object.entries(availabilitiesByDay).map(([day, times]) => (
-                <p
-                  key={day}
-                  className="flex items-center gap-2 rounded px-3 text-sm"
+          <FormField
+            control={form.control}
+            name="slot_type"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel required>{t("session_type")}</FormLabel>
+                <Select
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
                 >
-                  <span className="font-medium w-24 text-gray-600">
-                    {DayOfWeek[parseInt(day)].charAt(0) +
-                      DayOfWeek[parseInt(day)].slice(1).toLowerCase()}
-                  </span>
-                  <span className="text-gray-500">
-                    {times
-                      .map((time) => formatAvailabilityTime([time]))
-                      .join(", ")}
-                  </span>
-                </p>
-              ))}
-            </div>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue>
+                        {t(`SCHEDULE_AVAILABILITY_TYPE__${field.value}`)}
+                      </SelectValue>
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {["appointment", "open", "closed"].map((type) => (
+                      <SelectItem key={type} value={type}>
+                        <p>{t(`SCHEDULE_AVAILABILITY_TYPE__${type}`)}</p>
+                        <p className="text-xs text-gray-500">
+                          {t(`SCHEDULE_AVAILABILITY_TYPE_DESCRIPTION__${type}`)}
+                        </p>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex items-center gap-4">
+            <FormField
+              control={form.control}
+              name="start_time"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel required>{t("start_time")}</FormLabel>
+                  <FormControl>
+                    <Input type="time" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <ArrowRightIcon className="size-4 mt-5" />
+
+            <FormField
+              control={form.control}
+              name="end_time"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel required>{t("end_time")}</FormLabel>
+                  <FormControl>
+                    <Input type="time" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
           </div>
 
+          {form.watch("slot_type") === "appointment" && (
+            <>
+              <div className="flex items-center gap-4">
+                <FormField
+                  control={form.control}
+                  name="slot_size_in_minutes"
+                  render={({ field }) => (
+                    <FormItem className="flex-1">
+                      <FormLabel required>
+                        {t("schedule_slot_size_label")}
+                      </FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          min={0}
+                          placeholder="e.g. 10"
+                          {...field}
+                          value={field.value ?? ""}
+                          onChange={(e) =>
+                            field.onChange(e.target.valueAsNumber)
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="tokens_per_slot"
+                  render={({ field }) => (
+                    <FormItem className="flex-1">
+                      <FormLabel required>{t("patients_per_slot")}</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          min={0}
+                          placeholder="e.g. 1"
+                          {...field}
+                          value={field.value ?? ""}
+                          onChange={(e) =>
+                            field.onChange(e.target.valueAsNumber)
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+              {timeAllocationCallout()}
+            </>
+          )}
+
+          <FormField
+            control={form.control}
+            name="weekdays"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel required>{t("schedule_weekdays")}</FormLabel>
+                <FormControl>
+                  <WeekdayCheckbox
+                    value={field.value}
+                    onChange={field.onChange}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           <FormField
             control={form.control}
             name="reason"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Remarks</FormLabel>
+                <FormLabel>{t("remarks")}</FormLabel>
                 <FormControl>
-                  <Textarea className="resize-none" {...field} />
+                  <Textarea
+                    placeholder={t("remarks_placeholder")}
+                    className="resize-none"
+                    {...field}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
             )}
           />
 
-          <div className="flex justify-end">
-            <Button variant="primary" type="submit" disabled={isProcessing}>
-              {isProcessing ? "Saving..." : "Save Changes"}
+          <div className="flex justify-end gap-2">
+            <Button
+              variant="outline"
+              type="button"
+              onClick={() => setIsExpanded(false)}
+              disabled={isPending}
+            >
+              {t("cancel")}
+            </Button>
+            <Button variant="primary" type="submit" disabled={isPending}>
+              {isPending ? t("creating") : t("create")}
             </Button>
           </div>
         </form>
diff --git a/src/components/Schedule/ScheduleTemplateForm.tsx b/src/components/Schedule/ScheduleTemplateForm.tsx
index aa9352fedc4..a16b6ac3e73 100644
--- a/src/components/Schedule/ScheduleTemplateForm.tsx
+++ b/src/components/Schedule/ScheduleTemplateForm.tsx
@@ -10,8 +10,9 @@ import * as z from "zod";
 
 import Callout from "@/CAREUI/display/Callout";
 import CareIcon from "@/CAREUI/icons/CareIcon";
-import WeekdayCheckbox from "@/CAREUI/interactive/WeekdayCheckbox";
-import { DayOfWeekValue } from "@/CAREUI/interactive/WeekdayCheckbox";
+import WeekdayCheckbox, {
+  DayOfWeek,
+} from "@/CAREUI/interactive/WeekdayCheckbox";
 
 import { Button } from "@/components/ui/button";
 import { DatePicker } from "@/components/ui/date-picker";
@@ -47,6 +48,8 @@ import {
   getTokenDuration,
 } from "@/components/Schedule/helpers";
 
+import useBreakpoints from "@/hooks/useBreakpoints";
+
 import mutate from "@/Utils/request/mutate";
 import { Time } from "@/Utils/types";
 import { dateQueryString } from "@/Utils/utils";
@@ -63,6 +66,10 @@ export default function ScheduleTemplateForm({ facilityId, userId }: Props) {
   const queryClient = useQueryClient();
 
   const [open, setOpen] = useState(false);
+  const weekdayFormat = useBreakpoints({
+    default: "alphabet",
+    md: "short",
+  } as const);
 
   const formSchema = z.object({
     name: z.string().min(1, t("field_required")),
@@ -73,7 +80,7 @@ export default function ScheduleTemplateForm({ facilityId, userId }: Props) {
       required_error: t("field_required"),
     }),
     weekdays: z
-      .array(z.number() as unknown as z.ZodType<DayOfWeekValue>)
+      .array(z.number() as unknown as z.ZodType<DayOfWeek>)
       .min(1, t("schedule_weekdays_min_error")),
     availabilities: z
       .array(
@@ -291,6 +298,7 @@ export default function ScheduleTemplateForm({ facilityId, userId }: Props) {
                           <WeekdayCheckbox
                             value={field.value}
                             onChange={field.onChange}
+                            format={weekdayFormat}
                           />
                         </FormControl>
                         <FormMessage />
diff --git a/src/components/Schedule/ScheduleTemplatesList.tsx b/src/components/Schedule/ScheduleTemplatesList.tsx
index 07a7ccb0a49..ee265643a91 100644
--- a/src/components/Schedule/ScheduleTemplatesList.tsx
+++ b/src/components/Schedule/ScheduleTemplatesList.tsx
@@ -166,12 +166,7 @@ const ScheduleTemplateItem = ({
                       <span>{slot.name}</span>
                       <p className="text-gray-600">
                         <span className="text-sm">
-                          {/* TODO: Temp. hack since backend is giving slot_type as number in Response */}
-                          {
-                            ["open", "appointment", "closed"][
-                              (slot.slot_type as unknown as number) - 1
-                            ]
-                          }
+                          {t(`SCHEDULE_AVAILABILITY_TYPE__${slot.slot_type}`)}
                         </span>
                         {slot.slot_type === "appointment" && (
                           <>
@@ -198,17 +193,22 @@ const ScheduleTemplateItem = ({
               </li>
             ))}
           </ul>
-          <Trans
-            i18nKey="schedule_valid_from_till_range"
-            values={{
-              from_date: format(
-                parseISO(template.valid_from),
-                "EEE, dd MMM yyyy",
-              ),
-              to_date: format(parseISO(template.valid_to), "EEE, dd MMM yyyy"),
-            }}
-            components={{ strong: <strong className="font-semibold" /> }}
-          />
+          <span className="text-sm text-gray-500">
+            <Trans
+              i18nKey="schedule_valid_from_till_range"
+              values={{
+                from_date: format(
+                  parseISO(template.valid_from),
+                  "EEE, dd MMM yyyy",
+                ),
+                to_date: format(
+                  parseISO(template.valid_to),
+                  "EEE, dd MMM yyyy",
+                ),
+              }}
+              components={{ strong: <strong className="font-semibold" /> }}
+            />
+          </span>
         </div>
       </div>
       <Sheet
@@ -217,7 +217,7 @@ const ScheduleTemplateItem = ({
           setQParams({ ...qParams, edit: open ? template.id : null })
         }
       >
-        <SheetContent className="flex min-w-full flex-col bg-gray-100 sm:min-w-[45rem]">
+        <SheetContent className="flex min-w-full flex-col bg-gray-100 sm:min-w-[32rem]">
           <SheetHeader>
             <SheetTitle>{t("edit_schedule_template")}</SheetTitle>
           </SheetHeader>
diff --git a/src/types/scheduling/schedule.ts b/src/types/scheduling/schedule.ts
index e8618e9a7ee..e97e1a1b2a8 100644
--- a/src/types/scheduling/schedule.ts
+++ b/src/types/scheduling/schedule.ts
@@ -1,17 +1,9 @@
+import { DayOfWeek } from "@/CAREUI/interactive/WeekdayCheckbox";
+
 import { Time } from "@/Utils/types";
 import { AppointmentPatient } from "@/pages/Patient/Utils";
 import { UserBase } from "@/types/user/user";
 
-export enum DayOfWeek {
-  MONDAY = 0,
-  TUESDAY = 1,
-  WEDNESDAY = 2,
-  THURSDAY = 3,
-  FRIDAY = 4,
-  SATURDAY = 5,
-  SUNDAY = 6,
-}
-
 export type ScheduleSlotType = "appointment" | "open" | "closed";
 
 export interface AvailabilityDateTime {
@@ -67,12 +59,6 @@ export type ScheduleAvailability = ScheduleAvailabilityBase & {
 
 export type ScheduleAvailabilityCreateRequest = ScheduleAvailabilityBase;
 
-export interface ScheduleAvailabilityUpdateRequest {
-  name: string;
-  tokens_per_slot: number | null;
-  reason: string;
-}
-
 export interface ScheduleException {
   id: string;
   reason: string;
diff --git a/src/types/scheduling/scheduleApis.ts b/src/types/scheduling/scheduleApis.ts
index 6725fc254cd..e24c73ea2e0 100644
--- a/src/types/scheduling/scheduleApis.ts
+++ b/src/types/scheduling/scheduleApis.ts
@@ -8,7 +8,6 @@ import {
   AvailabilityHeatmapResponse,
   ScheduleAvailability,
   ScheduleAvailabilityCreateRequest,
-  ScheduleAvailabilityUpdateRequest,
   ScheduleException,
   ScheduleExceptionCreateRequest,
   ScheduleTemplate,
@@ -56,28 +55,12 @@ export default {
      * Schedule Template's Availability related APIs
      */
     availabilities: {
-      list: {
-        path: "/api/v1/facility/{facility_id}/schedule/{schedule_id}/availability/",
-        method: HttpMethod.GET,
-        TRes: Type<PaginatedResponse<ScheduleAvailability>>(),
-      },
-      retrieve: {
-        path: "/api/v1/facility/{facility_id}/schedule/{schedule_id}/availability/{id}/",
-        method: HttpMethod.GET,
-        TRes: Type<ScheduleAvailability>(),
-      },
       create: {
         path: "/api/v1/facility/{facility_id}/schedule/{schedule_id}/availability/",
         method: HttpMethod.POST,
         TBody: Type<ScheduleAvailabilityCreateRequest>(),
         TRes: Type<ScheduleAvailability>(),
       },
-      update: {
-        path: "/api/v1/facility/{facility_id}/schedule/{schedule_id}/availability/{id}/",
-        method: HttpMethod.PUT,
-        TBody: Type<ScheduleAvailabilityUpdateRequest>(),
-        TRes: Type<ScheduleAvailability>(),
-      },
       delete: {
         path: "/api/v1/facility/{facility_id}/schedule/{schedule_id}/availability/{id}/",
         method: HttpMethod.DELETE,