diff --git a/frontend/apps/mobile/app/(app)/event/[id].tsx b/frontend/apps/mobile/app/(app)/event/[id].tsx
index f0fc7475..5522a40b 100644
--- a/frontend/apps/mobile/app/(app)/event/[id].tsx
+++ b/frontend/apps/mobile/app/(app)/event/[id].tsx
@@ -65,6 +65,17 @@ function EventOccurrenceDetail({
   const avgRating = aggregate?.average_rating ?? 0;
   const totalReviews = aggregate?.total_reviews ?? 0;
   const ratingOption = getRatingOption(avgRating);
+  const ratingMatch = RATING_OPTIONS.find(
+    (r) => r.rating === Math.round(avgRating)
+  );
+
+  const cardShadow = {
+    shadowColor: "#000",
+    shadowOpacity: 0.08,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 3,
+  };
 
   return (
     <SafeAreaView className="flex-1 bg-white" edges={["top", "bottom"]}>
@@ -275,8 +286,7 @@ function EventOccurrenceDetail({
         <View className="px-4 pb-2 pt-1">
           <TouchableOpacity
             activeOpacity={0.85}
-            className="w-full items-center rounded-full py-4"
-            style={{ backgroundColor: AppColors.checkboxSelected }}
+            className="w-full items-center rounded-full py-4 bg-black"
             onPress={() =>
               router.push({
                 pathname: "/org/[id]/schedule",
diff --git a/frontend/apps/mobile/app/(app)/org/[id]/OccurrenceCard.tsx b/frontend/apps/mobile/app/(app)/org/[id]/OccurrenceCard.tsx
index efbc2ea5..f0a91e65 100644
--- a/frontend/apps/mobile/app/(app)/org/[id]/OccurrenceCard.tsx
+++ b/frontend/apps/mobile/app/(app)/org/[id]/OccurrenceCard.tsx
@@ -8,27 +8,56 @@ import {
 } from "react-native";
 import { useRef, useState } from "react";
 import { useRouter } from "expo-router";
-import type { EventOccurrence } from "@skillspark/api-client";
+import {
+  useCancelRegistration,
+  getGetRegistrationsByGuardianIdQueryKey,
+  type EventOccurrence,
+} from "@skillspark/api-client";
+import { useQueryClient } from "@tanstack/react-query";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { AppColors, FontFamilies, FontSizes } from "@/constants/theme";
 import { ReservationModal } from "@/components/ReservationModal";
 import { RatingSmiley } from "@/components/RatingSmiley";
 import { useTranslation } from "react-i18next";
 import { formatAgeRange, formatTime, formatPrice } from "@/utils/format";
+import { useAuthContext } from "@/hooks/use-auth-context";
 
 const BUTTON_ROW_HEIGHT = 52;
 
 export function OccurrenceCard({
   occurrence,
   avgRating,
+  registrationIds,
 }: {
   occurrence: EventOccurrence;
   avgRating: number | null;
+  registrationIds?: string[];
 }) {
   const router = useRouter();
   const { t: translate } = useTranslation();
+  const { guardianId } = useAuthContext();
+  const queryClient = useQueryClient();
+  const { mutate: cancelRegistration, isPending: cancelPending } =
+    useCancelRegistration();
   const [expanded, setExpanded] = useState(false);
   const [reservationVisible, setReservationVisible] = useState(false);
+
+  const isRegistered = (registrationIds?.length ?? 0) > 0;
+
+  function handleCancel() {
+    if (!registrationIds?.length || !guardianId) return;
+    const queryKey = getGetRegistrationsByGuardianIdQueryKey(guardianId);
+    registrationIds.forEach((id) =>
+      cancelRegistration(
+        { id },
+        {
+          onSettled: () => {
+            queryClient.invalidateQueries({ queryKey });
+          },
+        },
+      ),
+    );
+  }
   const progress = useRef(new Animated.Value(0)).current;
 
   const toggle = () => {
@@ -192,22 +221,42 @@ export function OccurrenceCard({
                   {translate("occurrence.learnMore")}
                 </Text>
               </TouchableOpacity>
-              <TouchableOpacity
-                onPress={() => setReservationVisible(true)}
-                activeOpacity={0.7}
-                className="flex-1 rounded-full py-2.5 items-center"
-                style={{ backgroundColor: AppColors.checkboxSelected }}
-              >
-                <Text
-                  style={{
-                    fontFamily: FontFamilies.semiBold,
-                    fontSize: FontSizes.base,
-                    color: "#fff",
-                  }}
+              {isRegistered ? (
+                <TouchableOpacity
+                  onPress={handleCancel}
+                  activeOpacity={0.7}
+                  disabled={cancelPending}
+                  className="flex-1 rounded-full py-2.5 items-center"
+                  style={{ backgroundColor: "#EF4444" }}
                 >
-                  {translate("occurrence.reserve")}
-                </Text>
-              </TouchableOpacity>
+                  <Text
+                    style={{
+                      fontFamily: FontFamilies.semiBold,
+                      fontSize: FontSizes.base,
+                      color: "#fff",
+                    }}
+                  >
+                    {translate("occurrence.cancel")}
+                  </Text>
+                </TouchableOpacity>
+              ) : (
+                <TouchableOpacity
+                  onPress={() => setReservationVisible(true)}
+                  activeOpacity={0.7}
+                  className="flex-1 rounded-full py-2.5 items-center"
+                  style={{ backgroundColor: AppColors.checkboxSelected }}
+                >
+                  <Text
+                    style={{
+                      fontFamily: FontFamilies.semiBold,
+                      fontSize: FontSizes.base,
+                      color: "#fff",
+                    }}
+                  >
+                    {translate("occurrence.reserve")}
+                  </Text>
+                </TouchableOpacity>
+              )}
             </View>
           </Animated.View>
 
diff --git a/frontend/apps/mobile/app/(app)/org/[id]/schedule.tsx b/frontend/apps/mobile/app/(app)/org/[id]/schedule.tsx
index 801c08fb..ee24fbaf 100644
--- a/frontend/apps/mobile/app/(app)/org/[id]/schedule.tsx
+++ b/frontend/apps/mobile/app/(app)/org/[id]/schedule.tsx
@@ -11,15 +11,18 @@ import { useLocalSearchParams, useRouter } from "expo-router";
 import {
   getGetReviewAggregateQueryOptions,
   useGetEventOccurrencesByOrganizationId,
+  useGetRegistrationsByGuardianId,
   type EventOccurrence,
+  type Registration,
 } from "@skillspark/api-client";
 import { useQueries, type UseQueryOptions } from "@tanstack/react-query";
+import { useAuthContext } from "@/hooks/use-auth-context";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { AppColors, FontFamilies } from "@/constants/theme";
 import { useThemeColor } from "@/hooks/use-theme-color";
 import { useTranslation } from "react-i18next";
 import { OccurrenceCard } from "./OccurrenceCard";
-import { formatSectionDate } from "@/utils/format";
+import { formatSectionDate, formatSectionMonth } from "@/utils/format";
 import { useOrgScheduleFilters } from "@/hooks/use-org-schedule-filters";
 
 export default function OrgScheduleScreen() {
@@ -28,6 +31,7 @@ export default function OrgScheduleScreen() {
     filterClass?: string;
   }>();
   const router = useRouter();
+  const { guardianId } = useAuthContext();
   const { t: translate } = useTranslation();
   const backgroundColor = useThemeColor({}, "background");
   const borderColor = useThemeColor({}, "borderColor");
@@ -43,6 +47,25 @@ export default function OrgScheduleScreen() {
   const { data: occurrencesResp, isLoading: occurrencesLoading } =
     useGetEventOccurrencesByOrganizationId(id);
 
+  const { data: registrationsResp } = useGetRegistrationsByGuardianId(
+    guardianId!,
+    { query: { enabled: !!guardianId } },
+  );
+
+  const registeredOccurrenceMap = useMemo(() => {
+    const d = registrationsResp as unknown as
+      | { data: { registrations: Registration[] } }
+      | undefined;
+    const map: Record<string, string[]> = {};
+    (d?.data?.registrations ?? [])
+      .filter((r) => r.status === "registered")
+      .forEach((r) => {
+        if (!map[r.event_occurrence_id]) map[r.event_occurrence_id] = [];
+        map[r.event_occurrence_id].push(r.id);
+      });
+    return map;
+  }, [registrationsResp]);
+
   const occurrences = useMemo(() => {
     const d = occurrencesResp as unknown as
       | { data: EventOccurrence[] }
@@ -99,13 +122,13 @@ export default function OrgScheduleScreen() {
 
   const uniqueEventIds = useMemo(
     () => [...new Set(occurrences.map((o) => o.event.id))],
-    [occurrences],
+    [occurrences]
   );
 
   const reviewResults = useQueries({
     queries: uniqueEventIds.map((eventId) =>
-      getGetReviewAggregateQueryOptions(eventId),
-    ) as UseQueryOptions[],
+      getGetReviewAggregateQueryOptions(eventId)
+    ),
   });
 
   const ratingsMap = useMemo(() => {
@@ -126,7 +149,7 @@ export default function OrgScheduleScreen() {
   const grouped = useMemo(() => {
     const sorted = [...filteredOccurrences].sort(
       (a, b) =>
-        new Date(a.start_time).getTime() - new Date(b.start_time).getTime(),
+        new Date(a.start_time).getTime() - new Date(b.start_time).getTime()
     );
 
     const groups = new Map<string, EventOccurrence[]>();
@@ -137,6 +160,7 @@ export default function OrgScheduleScreen() {
     }
 
     return Array.from(groups.entries()).map(([, items]) => ({
+      month: formatSectionMonth(items[0].start_time),
       label: formatSectionDate(items[0].start_time),
       items,
     }));
@@ -165,12 +189,14 @@ export default function OrgScheduleScreen() {
           />
         </TouchableOpacity>
         <Text
-          className="flex-1 text-center text-[16px] font-nunito-bold"
+          className="absolute inset-x-0 text-center text-[16px] font-nunito-bold"
           style={{ color: AppColors.primaryText }}
           numberOfLines={1}
+          pointerEvents="none"
         >
           {translate("org.schedule")}
         </Text>
+        <View className="flex-1 items-end">
         <TouchableOpacity
           onPress={() => router.push(`/org/${id}/filters`)}
           activeOpacity={0.7}
@@ -185,7 +211,7 @@ export default function OrgScheduleScreen() {
           </Text>
           {activeCount > 0 && (
             <View
-              className="h-4 w-4 items-center justify-center rounded-full"
+              className="h-[18px] w-[18px] items-center justify-center rounded-full"
               style={{ backgroundColor: AppColors.white }}
             >
               <Text
@@ -200,6 +226,7 @@ export default function OrgScheduleScreen() {
             </View>
           )}
         </TouchableOpacity>
+        </View>
       </View>
 
       {occurrencesLoading ? (
@@ -224,21 +251,35 @@ export default function OrgScheduleScreen() {
         >
           {grouped.map((group) => (
             <View key={group.label} className="mb-4">
-              <Text
-                className="px-4 pb-3"
-                style={{
-                  fontFamily: FontFamilies.bold,
-                  fontSize: 22,
-                  color: AppColors.primaryText,
-                }}
-              >
-                {group.label}
-              </Text>
+              <View className="px-4 pb-3">
+                <Text
+                  style={{
+                    fontFamily: FontFamilies.regular,
+                    fontSize: 11,
+                    color: AppColors.primaryText,
+                    opacity: 0.6,
+                    textTransform: "uppercase",
+                    letterSpacing: 0.5,
+                  }}
+                >
+                  {group.month}
+                </Text>
+                <Text
+                  style={{
+                    fontFamily: FontFamilies.bold,
+                    fontSize: 22,
+                    color: AppColors.primaryText,
+                  }}
+                >
+                  {group.label}
+                </Text>
+              </View>
               {group.items.map((occ) => (
                 <OccurrenceCard
                   key={occ.id}
                   occurrence={occ}
                   avgRating={ratingsMap.get(occ.event.id) ?? null}
+                  registrationIds={registeredOccurrenceMap[occ.id]}
                 />
               ))}
             </View>
diff --git a/frontend/apps/mobile/components/ReservationModal.tsx b/frontend/apps/mobile/components/ReservationModal.tsx
index a0203b2e..6e99bb31 100644
--- a/frontend/apps/mobile/components/ReservationModal.tsx
+++ b/frontend/apps/mobile/components/ReservationModal.tsx
@@ -1,37 +1,31 @@
-import { Image } from "expo-image";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import {
   ActivityIndicator,
+  Modal,
   Pressable,
-  StyleSheet,
+  ScrollView,
   Text,
   TouchableOpacity,
   View,
 } from "react-native";
-import Animated, {
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-} from "react-native-reanimated";
-import type { SharedValue } from "react-native-reanimated";
-import {
-  BottomSheetModal,
-  BottomSheetScrollView,
-  type BottomSheetBackdropProps,
-} from "@gorhom/bottom-sheet";
+import { TermsAndConditionsModal } from "./TermsAndConditionsModal";
+import { ReservationSuccessModal } from "./ReservationSuccessModal";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
+  createRegistrationResponseError,
+  getGetRegistrationsByGuardianIdQueryKey,
   useCreateRegistration,
   useGetChildrenByGuardianId,
   type Child,
   type EventOccurrence,
 } from "@skillspark/api-client";
+import { useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { useAuthContext } from "@/hooks/use-auth-context";
 import { AppColors, FontFamilies, FontSizes } from "@/constants/theme";
 import { ChildAvatar } from "./ChildAvatar";
 import { EventPreviewSection } from "./EventPreviewSection";
-import { StaticBackdrop } from "./StaticBackground";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
 
 interface ReservationModalProps {
   visible: boolean;
@@ -47,19 +41,16 @@ export function ReservationModal({
   const insets = useSafeAreaInsets();
   const { t: translate } = useTranslation();
   const { guardianId } = useAuthContext();
+  const queryClient = useQueryClient();
 
-  const sheetRef = useRef<BottomSheetModal>(null);
+  const isSuccessTransition = useRef(false);
   const [selectedChildId, setSelectedChildId] = useState<string | null>(null);
-  const [step, setStep] = useState<"select" | "done">("select");
   const [reservationError, setReservationError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (visible) {
-      sheetRef.current?.present();
-    } else {
-      sheetRef.current?.dismiss();
-    }
-  }, [visible]);
+  const [errorDetails, setErrorDetails] = useState<string[]>([]);
+  const [errorExpanded, setErrorExpanded] = useState(false);
+  const [termsAccepted, setTermsAccepted] = useState(false);
+  const [showTermsModal, setShowTermsModal] = useState(false);
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
 
   const { data: childrenResp, isLoading: childrenLoading } =
     useGetChildrenByGuardianId(guardianId!, {
@@ -74,211 +65,327 @@ export function ReservationModal({
   function handleReserve() {
     if (!selectedChildId || !guardianId) return;
     setReservationError(null);
+    setErrorDetails([]);
+    setErrorExpanded(false);
     createRegistration(
       {
         data: {
           child_id: selectedChildId,
           event_occurrence_id: occurrence.id,
           guardian_id: guardianId,
-          payment_method_id: "",
           status: "registered",
         },
       },
       {
         onSuccess: () => {
-          setStep("done");
+          queryClient.invalidateQueries({
+            queryKey: getGetRegistrationsByGuardianIdQueryKey(guardianId!),
+          });
+          isSuccessTransition.current = true;
+          setShowSuccessModal(true);
+          onClose();
         },
         onError: (error: unknown) => {
-          const message =
-            error instanceof Error
-              ? error.message
-              : translate("reservation.paymentFailed");
-          setReservationError(message);
+          try {
+            const typedError = error as createRegistrationResponseError;
+            const errorMsgs = (typedError.data.errors || [])
+              .map((e) => e.message)
+              .filter((m): m is string => !!m);
+            setErrorDetails(errorMsgs);
+            setReservationError(translate("reservation.paymentFailed"));
+          } catch {
+            setReservationError(translate("reservation.paymentFailed"));
+          }
         },
-      },
+      }
     );
   }
 
-  function handleClose() {
-    setStep("select");
+  function resetState() {
     setSelectedChildId(null);
     setReservationError(null);
-    onClose();
+    setErrorDetails([]);
+    setErrorExpanded(false);
+    setTermsAccepted(false);
   }
 
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <StaticBackdrop
-        animatedIndex={props.animatedIndex}
-        style={props.style}
-        onPress={handleClose}
-      />
-    ),
-    // handleClose intentionally omitted — state setters are stable and
-    // onClose identity changing should not recreate the backdrop component.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
+  function handleClose() {
+    resetState();
+    if (!isSuccessTransition.current) {
+      onClose();
+    }
+    isSuccessTransition.current = false;
+  }
+
+  function handleSuccessClose() {
+    setShowSuccessModal(false);
+    onClose();
+  }
 
   return (
-    <BottomSheetModal
-      ref={sheetRef}
-      snapPoints={["78%"]}
-      enablePanDownToClose
-      overDragResistanceFactor={0}
-      onDismiss={handleClose}
-      backdropComponent={renderBackdrop}
-      handleIndicatorStyle={{ backgroundColor: AppColors.borderLight }}
-      backgroundStyle={{ borderTopLeftRadius: 20, borderTopRightRadius: 20 }}
-    >
-      <BottomSheetScrollView
-        className="px-5"
-        showsVerticalScrollIndicator={false}
-        contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
+    <>
+      <Modal
+        visible={visible}
+        transparent
+        animationType="fade"
+        onRequestClose={handleClose}
       >
-        <EventPreviewSection
+        <TermsAndConditionsModal
+          visible={showTermsModal}
+          onClose={() => setShowTermsModal(false)}
+        />
+        <ReservationSuccessModal
+          visible={showSuccessModal}
           occurrence={occurrence}
-          titleOverride={
-            step === "done" ? translate("reservation.completed") : undefined
-          }
+          onClose={handleSuccessClose}
         />
+        <Pressable
+          style={{
+            flex: 1,
+            backgroundColor: "rgba(0,0,0,0.5)",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+          onPress={handleClose}
+        >
+          <Pressable
+            onPress={() => {}}
+            style={{
+              width: "90%",
+              maxHeight: "85%",
+              backgroundColor: "#fff",
+              borderRadius: 20,
+              overflow: "hidden",
+            }}
+          >
+            {/* X button */}
+            <TouchableOpacity
+              onPress={handleClose}
+              style={{
+                position: "absolute",
+                top: 16,
+                right: 16,
+                zIndex: 10,
+                padding: 4,
+              }}
+              hitSlop={8}
+            >
+              <MaterialIcons
+                name="close"
+                size={24}
+                color={AppColors.primaryText}
+              />
+            </TouchableOpacity>
 
-        {step === "select" ? (
-          <>
-            {/* Child selection */}
-            <View className="mb-6">
-              <Text
-                className="text-sm mb-3"
-                style={{
-                  fontFamily: FontFamilies.semiBold,
-                  color: AppColors.secondaryText,
-                }}
-              >
-                {translate("reservation.selectChildLabel")}
-              </Text>
-              {childrenLoading ? (
-                <ActivityIndicator size="small" />
-              ) : children.length === 0 ? (
+            <ScrollView
+              showsVerticalScrollIndicator={false}
+              contentContainerStyle={{
+                padding: 20,
+                paddingTop: 24,
+                paddingBottom: insets.bottom + 24,
+              }}
+            >
+              <EventPreviewSection occurrence={occurrence} />
+
+              {/* Child selection */}
+              <View className="mb-6">
                 <Text
+                  className="text-sm mb-3"
                   style={{
-                    fontFamily: FontFamilies.regular,
-                    fontSize: FontSizes.sm,
-                    color: AppColors.mutedText,
+                    fontFamily: FontFamilies.semiBold,
+                    color: AppColors.secondaryText,
                   }}
                 >
-                  {translate("reservation.noChildren")}
+                  {translate("reservation.selectChildLabel")}
                 </Text>
-              ) : (
-                <View className="flex-row gap-4 flex-wrap">
-                  {children.map((child) => (
-                    <ChildAvatar
-                      key={child.id}
-                      child={child}
-                      selected={selectedChildId === child.id}
-                      onPress={() =>
-                        setSelectedChildId(
-                          selectedChildId === child.id ? null : child.id,
-                        )
-                      }
-                    />
-                  ))}
-                </View>
-              )}
-            </View>
-
-            {/* Terms */}
-            <View className="mb-8">
-              <Text
-                className="text-xs text-center leading-5"
-                style={{
-                  fontFamily: FontFamilies.regular,
-                  color: AppColors.mutedText,
-                }}
-              >
-                {translate("reservation.termsNote")}
-              </Text>
-              <Text
-                className="text-xs text-center mt-1"
-                style={{
-                  fontFamily: FontFamilies.semiBold,
-                  color: AppColors.primaryText,
-                  textDecorationLine: "underline",
-                }}
-              >
-                {translate("reservation.terms")}
-              </Text>
-            </View>
+                {childrenLoading ? (
+                  <ActivityIndicator size="small" />
+                ) : children.length === 0 ? (
+                  <Text
+                    style={{
+                      fontFamily: FontFamilies.regular,
+                      fontSize: FontSizes.sm,
+                      color: AppColors.mutedText,
+                    }}
+                  >
+                    {translate("reservation.noChildren")}
+                  </Text>
+                ) : (
+                  <View className="flex-row gap-4 flex-wrap">
+                    {children.map((child) => (
+                      <Pressable
+                        key={child.id}
+                        onPress={() =>
+                          setSelectedChildId(
+                            selectedChildId === child.id ? null : child.id
+                          )
+                        }
+                        style={
+                          selectedChildId === child.id
+                            ? {
+                                borderRadius: 999,
+                                borderWidth: 2,
+                                borderColor: AppColors.primaryBlue,
+                              }
+                            : undefined
+                        }
+                      >
+                        <ChildAvatar
+                          name={child.name}
+                          avatarFace={child.avatar_face}
+                          avatarBackground={child.avatar_background}
+                        />
+                      </Pressable>
+                    ))}
+                  </View>
+                )}
+              </View>
 
-            {/* Error message */}
-            {!!reservationError && (
-              <View
-                className="rounded-xl px-4 py-3 mb-4"
-                style={{ backgroundColor: "#FEE2E2" }}
-              >
+              {/* Terms */}
+              <View className="mb-8">
                 <Text
-                  className="text-sm text-center"
+                  className="text-xs text-center leading-5"
                   style={{
                     fontFamily: FontFamilies.regular,
-                    color: "#DC2626",
+                    color: AppColors.mutedText,
                   }}
                 >
-                  {reservationError}
+                  {translate("reservation.termsNote")}
                 </Text>
+                <TouchableOpacity onPress={() => setShowTermsModal(true)}>
+                  <Text
+                    className="text-xs text-center mt-1"
+                    style={{
+                      fontFamily: FontFamilies.semiBold,
+                      color: AppColors.primaryText,
+                      textDecorationLine: "underline",
+                    }}
+                  >
+                    {translate("reservation.terms")}
+                  </Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  onPress={() => setTermsAccepted((prev) => !prev)}
+                  activeOpacity={0.7}
+                  className="flex-row items-center gap-2 mt-3 self-center"
+                >
+                  <View
+                    style={{
+                      width: 20,
+                      height: 20,
+                      borderRadius: 4,
+                      borderWidth: 2,
+                      borderColor: termsAccepted
+                        ? AppColors.checkboxSelected
+                        : AppColors.borderLight,
+                      backgroundColor: termsAccepted
+                        ? AppColors.checkboxSelected
+                        : "transparent",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                  >
+                    {termsAccepted && (
+                      <Text
+                        style={{ color: "#fff", fontSize: 12, lineHeight: 14 }}
+                      >
+                        ✓
+                      </Text>
+                    )}
+                  </View>
+                  <Text
+                    className="text-xs"
+                    style={{
+                      fontFamily: FontFamilies.regular,
+                      color: AppColors.primaryText,
+                    }}
+                  >
+                    {translate("reservation.termsAgree")}
+                  </Text>
+                </TouchableOpacity>
               </View>
-            )}
 
-            {/* Reserve button */}
-            <TouchableOpacity
-              onPress={handleReserve}
-              activeOpacity={0.8}
-              disabled={!selectedChildId || isPending}
-              className="rounded-2xl py-4 items-center"
-              style={{
-                backgroundColor: selectedChildId
-                  ? AppColors.checkboxSelected
-                  : AppColors.borderLight,
-              }}
-            >
-              {isPending ? (
-                <ActivityIndicator size="small" color="#fff" />
-              ) : (
-                <Text
-                  className="text-white text-base"
-                  style={{ fontFamily: FontFamilies.bold }}
+              {/* Error message */}
+              {!!reservationError && (
+                <View
+                  className="rounded-xl px-4 py-3 mb-4"
+                  style={{ backgroundColor: "#FEE2E2" }}
                 >
-                  {translate("reservation.payAndReserve")}
-                </Text>
+                  <Text
+                    className="text-sm text-center"
+                    style={{
+                      fontFamily: FontFamilies.regular,
+                      color: "#DC2626",
+                    }}
+                  >
+                    {reservationError}
+                  </Text>
+                  {errorDetails.length > 0 && (
+                    <>
+                      <TouchableOpacity
+                        onPress={() => setErrorExpanded((prev) => !prev)}
+                        className="mt-2 items-center"
+                      >
+                        <Text
+                          className="text-xs"
+                          style={{
+                            fontFamily: FontFamilies.semiBold,
+                            color: "#DC2626",
+                            textDecorationLine: "underline",
+                          }}
+                        >
+                          {errorExpanded ? "See less" : "See more"}
+                        </Text>
+                      </TouchableOpacity>
+                      {errorExpanded && (
+                        <View className="mt-2 gap-1">
+                          {errorDetails.map((detail, i) => (
+                            <Text
+                              key={i}
+                              className="text-xs"
+                              style={{
+                                fontFamily: FontFamilies.regular,
+                                color: "#DC2626",
+                              }}
+                            >
+                              {"\u2022"} {detail}
+                            </Text>
+                          ))}
+                        </View>
+                      )}
+                    </>
+                  )}
+                </View>
               )}
-            </TouchableOpacity>
-          </>
-        ) : (
-          <>
-            {/* Completed state */}
-            <Text
-              className="text-base text-center mb-8"
-              style={{
-                fontFamily: FontFamilies.semiBold,
-                color: AppColors.mutedText,
-              }}
-            >
-              {translate("reservation.seeYouSoon")}
-            </Text>
-            <TouchableOpacity
-              onPress={handleClose}
-              activeOpacity={0.8}
-              className="rounded-2xl py-4 items-center"
-              style={{ backgroundColor: AppColors.checkboxSelected }}
-            >
-              <Text
-                className="text-white text-base"
-                style={{ fontFamily: FontFamilies.bold }}
+
+              {/* Reserve button */}
+              <TouchableOpacity
+                onPress={handleReserve}
+                activeOpacity={0.8}
+                disabled={!selectedChildId || !termsAccepted || isPending}
+                className="rounded-2xl py-4 items-center"
+                style={{
+                  backgroundColor:
+                    selectedChildId && termsAccepted
+                      ? "#000000"
+                      : AppColors.borderLight,
+                }}
               >
-                {translate("common.close")}
-              </Text>
-            </TouchableOpacity>
-          </>
-        )}
-      </BottomSheetScrollView>
-    </BottomSheetModal>
+                {isPending ? (
+                  <ActivityIndicator size="small" color="#fff" />
+                ) : (
+                  <Text
+                    className="text-white text-base"
+                    style={{ fontFamily: FontFamilies.bold }}
+                  >
+                    {translate("reservation.payAndReserve")}
+                  </Text>
+                )}
+              </TouchableOpacity>
+            </ScrollView>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </>
   );
 }
diff --git a/frontend/apps/mobile/components/ReservationSuccessModal.tsx b/frontend/apps/mobile/components/ReservationSuccessModal.tsx
new file mode 100644
index 00000000..71317387
--- /dev/null
+++ b/frontend/apps/mobile/components/ReservationSuccessModal.tsx
@@ -0,0 +1,117 @@
+import { Image } from "expo-image";
+import { Modal, Text, TouchableOpacity, View } from "react-native";
+import { AppColors, FontFamilies } from "@/constants/theme";
+import { formatModalTime } from "@/utils/format";
+import type { EventOccurrence } from "@skillspark/api-client";
+import { useTranslation } from "react-i18next";
+
+interface ReservationSuccessModalProps {
+  visible: boolean;
+  occurrence: EventOccurrence;
+  onClose: () => void;
+}
+
+export function ReservationSuccessModal({
+  visible,
+  occurrence,
+  onClose,
+}: ReservationSuccessModalProps) {
+  const { t: translate } = useTranslation();
+  const timeLabel = translate("occurrence.classTime", {
+    time: formatModalTime(occurrence.start_time),
+  });
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      <View
+        className="flex-1 items-center justify-center px-8"
+        style={{ backgroundColor: "rgba(0,0,0,0.55)" }}
+      >
+        <View
+          className="w-full rounded-3xl px-6 pt-6 pb-6 items-center"
+          style={{ backgroundColor: "#fff" }}
+        >
+          {/* Event image */}
+          <View
+            className="w-[200px] h-[200px] rounded-2xl overflow-hidden mb-5"
+            style={{ backgroundColor: AppColors.imagePlaceholder }}
+          >
+            {occurrence.event.presigned_url ? (
+              <Image
+                source={{ uri: occurrence.event.presigned_url }}
+                style={{ width: "100%", height: "100%" }}
+                contentFit="cover"
+              />
+            ) : null}
+          </View>
+
+          {/* Completed title */}
+          <Text
+            className="text-2xl mb-3 text-center"
+            style={{
+              fontFamily: FontFamilies.bold,
+              color: AppColors.primaryText,
+            }}
+          >
+            {translate("reservation.completed")}
+          </Text>
+
+          {/* Description */}
+          {!!occurrence.event.description && (
+            <Text
+              className="text-sm text-center leading-5 mb-2"
+              style={{
+                fontFamily: FontFamilies.regular,
+                color: AppColors.secondaryText,
+              }}
+            >
+              {occurrence.event.description}
+            </Text>
+          )}
+
+          {/* Time */}
+          <Text
+            className="text-sm text-center mb-4"
+            style={{
+              fontFamily: FontFamilies.regular,
+              color: AppColors.mutedText,
+            }}
+          >
+            {timeLabel}
+          </Text>
+
+          {/* See you soon */}
+          <Text
+            className="text-base text-center mb-6"
+            style={{
+              fontFamily: FontFamilies.semiBold,
+              color: AppColors.mutedText,
+            }}
+          >
+            {translate("reservation.seeYouSoon")}
+          </Text>
+
+          {/* Close button */}
+          <TouchableOpacity
+            onPress={onClose}
+            activeOpacity={0.8}
+            className="w-full rounded-2xl py-4 items-center"
+            style={{ backgroundColor: AppColors.primaryText }}
+          >
+            <Text
+              className="text-white text-base"
+              style={{ fontFamily: FontFamilies.bold }}
+            >
+              {translate("common.close")}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+}
diff --git a/frontend/apps/mobile/components/StaticBackground.tsx b/frontend/apps/mobile/components/StaticBackground.tsx
index c25ddc83..4908276d 100644
--- a/frontend/apps/mobile/components/StaticBackground.tsx
+++ b/frontend/apps/mobile/components/StaticBackground.tsx
@@ -24,11 +24,11 @@ export function StaticBackdrop({
     () => animatedIndex.value,
     (current, previous) => {
       if (previous === null) return;
-      if (current > -1 && previous <= -1) {
-        // Sheet just started opening — appear immediately.
+      if (current >= 0 && previous < 0) {
+        // Sheet returned to open position — appear immediately.
         opacity.value = 1;
-      } else if (current < previous && current < 0) {
-        // Sheet just started closing — disappear immediately.
+      } else if (current < previous && current < -0.3) {
+        // Sheet has moved past 30% toward dismissal — disappear immediately.
         opacity.value = 0;
       }
     },
diff --git a/frontend/apps/mobile/components/TermsAndConditionsModal.tsx b/frontend/apps/mobile/components/TermsAndConditionsModal.tsx
new file mode 100644
index 00000000..ba98160a
--- /dev/null
+++ b/frontend/apps/mobile/components/TermsAndConditionsModal.tsx
@@ -0,0 +1,124 @@
+import React from "react";
+import { Modal, ScrollView, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { Colors } from "@/constants/theme";
+import { useTranslation } from "react-i18next";
+
+interface TermsAndConditionsModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+export function TermsAndConditionsModal({
+  visible,
+  onClose,
+}: TermsAndConditionsModalProps) {
+  const insets = useSafeAreaInsets();
+  const theme = Colors.light;
+  const { t: translate } = useTranslation();
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={false}
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <ThemedView className="flex-1" style={{ paddingTop: insets.top }}>
+        <View className="flex-row items-center justify-between px-5 py-[14px]">
+          <TouchableOpacity
+            onPress={onClose}
+            className="w-10 justify-center items-start"
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <IconSymbol name="chevron.left" size={24} color={theme.text} />
+          </TouchableOpacity>
+          <ThemedText className="text-xl text-center font-nunito-bold">
+            {translate("settings.termsAndConditions")}
+          </ThemedText>
+          <View className="w-10" />
+        </View>
+
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          className="px-5 pt-2"
+          contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
+        >
+          <ThemedText
+            className="text-[15px] font-nunito italic mb-4"
+            style={{ color: theme.icon }}
+          >
+            {translate("termsAndConditions.lastUpdated")}
+          </ThemedText>
+
+          <ThemedText className="text-[15px] font-nunito-bold mb-2">
+            {translate("termsAndConditions.acknowledgmentTitle")}
+          </ThemedText>
+          <ThemedText className="text-[15px] font-nunito mb-4 leading-[22px]">
+            {translate("termsAndConditions.acknowledgment1")}
+          </ThemedText>
+          <ThemedText className="text-[15px] font-nunito mb-4 leading-[22px]">
+            {translate("termsAndConditions.acknowledgment2")}
+          </ThemedText>
+          <ThemedText className="text-[15px] font-nunito mb-4 leading-[22px]">
+            {translate("termsAndConditions.acknowledgment3")}
+          </ThemedText>
+          <ThemedText className="text-[15px] font-nunito mb-4 leading-[22px]">
+            {translate("termsAndConditions.acknowledgment4")}
+          </ThemedText>
+          <ThemedText className="text-[15px] font-nunito mb-4 leading-[22px]">
+            {translate("termsAndConditions.acknowledgment5")}
+          </ThemedText>
+
+          <ThemedText className="text-[15px] font-nunito-bold mb-2">
+            {translate("termsAndConditions.userAccountsTitle")}
+          </ThemedText>
+          <ThemedText className="text-[15px] font-nunito mb-4 leading-[22px]">
+            {translate("termsAndConditions.userAccounts1")}
+          </ThemedText>
+          <ThemedText className="text-[15px] font-nunito mb-4 leading-[22px]">
+            {translate("termsAndConditions.userAccounts2")}
+          </ThemedText>
+
+          <ThemedText className="text-[15px] font-nunito-bold mb-2">
+            {translate("termsAndConditions.intellectualPropertyTitle")}
+          </ThemedText>
+          <ThemedText className="text-[15px] font-nunito mb-4 leading-[22px]">
+            {translate("termsAndConditions.intellectualPropertyDesc")}
+          </ThemedText>
+
+          <ThemedText className="text-[15px] font-nunito-bold mb-2">
+            {translate("termsAndConditions.limitationTitle")}
+          </ThemedText>
+          <ThemedText className="text-[15px] font-nunito mb-4 leading-[22px]">
+            {translate("termsAndConditions.limitationDesc")}
+          </ThemedText>
+
+          <ThemedText className="text-[15px] font-nunito-bold mb-2">
+            {translate("termsAndConditions.governingLawTitle")}
+          </ThemedText>
+          <ThemedText className="text-[15px] font-nunito mb-4 leading-[22px]">
+            {translate("termsAndConditions.governingLawDesc")}
+          </ThemedText>
+
+          <ThemedText className="text-[15px] font-nunito-bold mb-2">
+            {translate("termsAndConditions.changesTitle")}
+          </ThemedText>
+          <ThemedText className="text-[15px] font-nunito mb-4 leading-[22px]">
+            {translate("termsAndConditions.changesDesc")}
+          </ThemedText>
+
+          <ThemedText className="text-[15px] font-nunito-bold mb-2">
+            {translate("termsAndConditions.contactTitle")}
+          </ThemedText>
+          <ThemedText className="text-[15px] font-nunito mb-4 leading-[22px]">
+            {translate("termsAndConditions.contactDesc")}
+          </ThemedText>
+        </ScrollView>
+      </ThemedView>
+    </Modal>
+  );
+}
diff --git a/frontend/apps/mobile/i18n/en.json b/frontend/apps/mobile/i18n/en.json
index e14ecc5b..21b9ccef 100644
--- a/frontend/apps/mobile/i18n/en.json
+++ b/frontend/apps/mobile/i18n/en.json
@@ -483,6 +483,7 @@
     "smiles": "/ 5 Smiles",
     "learnMore": "Learn more",
     "reserve": "Reserve",
+    "cancel": "Cancel Registration",
     "ages": "Ages {{min}}",
     "agesOpen": "Ages {{min}}+",
     "agesRange": "Ages {{min}} - {{max}}",
@@ -503,6 +504,7 @@
     "termsNote": "By clicking 'Pay Now', you authorize Skill Spark to charge your card for the total amount, plus applicable fees.",
     "terms": "Terms & Conditions",
     "payAndReserve": "Pay Now & Reserve",
+    "termsAgree": "I agree to the Terms & Conditions",
     "seeYouSoon": "See you soon!"
   },
   "onboarding": {
diff --git a/frontend/apps/mobile/i18n/th.json b/frontend/apps/mobile/i18n/th.json
index c5f14aeb..3c17ae7d 100644
--- a/frontend/apps/mobile/i18n/th.json
+++ b/frontend/apps/mobile/i18n/th.json
@@ -483,6 +483,7 @@
     "smiles": "/ 5 รอยยิ้ม",
     "learnMore": "เรียนรู้เพิ่มเติม",
     "reserve": "จอง",
+    "cancel": "ยกเลิกการจอง",
     "ages": "อายุ {{min}} ปี",
     "agesOpen": "อายุ {{min}}+ ปี",
     "agesRange": "อายุ {{min}} - {{max}} ปี",
@@ -503,6 +504,7 @@
     "termsNote": "เมื่อคลิก 'ชำระเงินตอนนี้' คุณอนุญาตให้ Skill Spark เรียกเก็บเงินจากบัตรของคุณในจำนวนเงินรวม บวกค่าธรรมเนียมที่เกี่ยวข้อง",
     "terms": "ข้อกำหนดและเงื่อนไข",
     "payAndReserve": "ชำระเงินและจอง",
+    "termsAgree": "ฉันยอมรับข้อกำหนดและเงื่อนไข",
     "seeYouSoon": "พบกันเร็วๆ นี้!"
   },
   "onboarding": {
diff --git a/frontend/apps/mobile/utils/format.ts b/frontend/apps/mobile/utils/format.ts
index bd646e8f..bb9a50bf 100644
--- a/frontend/apps/mobile/utils/format.ts
+++ b/frontend/apps/mobile/utils/format.ts
@@ -53,6 +53,10 @@ export function formatSectionDate(dateStr: string): string {
   return date.toLocaleDateString("en-US", { weekday: "short", day: "numeric" });
 }
 
+export function formatSectionMonth(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString("en-US", { month: "long" });
+}
+
 export function formatTime(dateStr: string): string {
   return new Date(dateStr).toLocaleTimeString("en-US", {
     hour: "numeric",