diff --git a/frontend/apps/mobile/app/(app)/(tabs)/event/[id].tsx b/frontend/apps/mobile/app/(app)/(tabs)/event/[id].tsx
index 97774def..95aa807f 100644
--- a/frontend/apps/mobile/app/(app)/(tabs)/event/[id].tsx
+++ b/frontend/apps/mobile/app/(app)/(tabs)/event/[id].tsx
@@ -10,9 +10,7 @@ import {
 import { useState } from "react";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useLocalSearchParams, useRouter } from "expo-router";
-import {
-  useGetEventOccurrencesById,
-} from "@skillspark/api-client";
+import { useGetEventOccurrencesById } from "@skillspark/api-client";
 import type { EventOccurrence } from "@skillspark/api-client";
 import MaterialIcons from "@expo/vector-icons/MaterialIcons";
 import { AppColors } from "@/constants/theme";
@@ -35,267 +33,171 @@ function EventOccurrenceDetail({ occurrence }: { occurrence: EventOccurrence })
   const address = formatAddress(occurrence);
 
   return (
-    <View style={{ flex: 1, backgroundColor: "#F4F6F8" }}>
+    <View className="flex-1 bg-[#F4F6F8]">
       <View
+        className="flex-1 mx-3.5 rounded-[32px] overflow-hidden bg-white elevation-8"
         style={{
-          flex: 1,
           marginTop: insets.top + 8,
-          marginHorizontal: 14,
           marginBottom: insets.bottom - 20,
-          borderRadius: 32,
-          overflow: "hidden",
-          backgroundColor: "#fff",
           shadowColor: "#000",
           shadowOpacity: 0.12,
           shadowRadius: 20,
-          elevation: 8,
         }}
       >
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        bounces={false}
-        contentContainerStyle={{ flexGrow: 1 }}
-      >
-        <View style={{ height: 250, backgroundColor: "#1a1a1a" }}>
-          {occurrence.event.presigned_url ? (
-            <Image
-              source={{ uri: occurrence.event.presigned_url }}
-              style={{ width: "100%", height: "100%" }}
-              contentFit="cover"
-            />
-          ) : (
-            <View style={{ flex: 1, backgroundColor: "#C5C5C5" }} />
-          )}
-          <TouchableOpacity
-            onPress={() => router.navigate('/')}
-            activeOpacity={0.7}
-            style={{
-              position: "absolute",
-              top: 16,
-              left: 16,
-              zIndex: 10,
-              flexDirection: "row",
-              alignItems: "center",
-              backgroundColor: "#fff",
-              borderRadius: 999,
-              paddingHorizontal: 16,
-              paddingVertical: 10,
-              shadowColor: "#000",
-              shadowOpacity: 0.15,
-              shadowRadius: 8,
-              elevation: 10,
-            }}
-          >
-            <MaterialIcons name="chevron-left" size={20} color={AppColors.primaryText} />
-            <Text style={{ fontSize: 15, color: AppColors.primaryText, fontWeight: "500" }}>Back</Text>
-          </TouchableOpacity>
-        </View>
-        <View
-          style={{
-            backgroundColor: "#fff",
-            borderTopLeftRadius: 28,
-            borderTopRightRadius: 28,
-            marginTop: -28,
-            paddingHorizontal: 22,
-            paddingBottom: 24,
-            shadowColor: "#000",
-            shadowOpacity: 0.06,
-            shadowRadius: 12,
-            elevation: 2,
-          }}
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          bounces={false}
+          contentContainerStyle={{ flexGrow: 1 }}
         >
-          <View
-            style={{
-              width: 38,
-              height: 4,
-              backgroundColor: AppColors.borderLight,
-              borderRadius: 2,
-              alignSelf: "center",
-              marginTop: 12,
-              marginBottom: 14,
-            }}
-          />
-          <View style={{ position: "absolute", top: -5, left: 10 }}>
-            <BookmarkButton eventId={occurrence.event.id} />
+          {/* Hero image */}
+          <View className="h-[250px] bg-[#1a1a1a]">
+            {occurrence.event.presigned_url ? (
+              <Image
+                source={{ uri: occurrence.event.presigned_url }}
+                className="w-full h-full"
+                contentFit="cover"
+              />
+            ) : (
+              <View className="flex-1 bg-[#C5C5C5]" />
+            )}
+            <TouchableOpacity
+              onPress={() => router.navigate('/')}
+              activeOpacity={0.7}
+              className="absolute top-4 left-4 z-10 flex-row items-center bg-white rounded-full px-4 py-2.5 elevation-10"
+              style={{ shadowColor: "#000", shadowOpacity: 0.15, shadowRadius: 8 }}
+            >
+              <MaterialIcons name="chevron-left" size={20} color={AppColors.primaryText} />
+              <Text className="text-[15px] font-medium" style={{ color: AppColors.primaryText }}>Back</Text>
+            </TouchableOpacity>
           </View>
-          <Text
-            style={{
-              fontSize: 28,
-              fontWeight: "700",
-              color: AppColors.primaryText,
-              letterSpacing: -0.5,
-              marginBottom: 8,
-            }}
-          >
-            {occurrence.event.title}
-          </Text>
+
+          {/* Content card */}
           <View
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              gap: 6,
-              marginBottom: 14,
-            }}
+            className="bg-white rounded-t-[28px] -mt-7 px-[22px] pb-6 elevation-2"
+            style={{ shadowColor: "#000", shadowOpacity: 0.06, shadowRadius: 12 }}
           >
-            <MaterialIcons name="location-on" size={16} color={AppColors.primaryText} />
+            {/* Drag handle */}
+            <View
+              className="w-[38px] h-1 rounded-sm self-center mt-3 mb-3.5"
+              style={{ backgroundColor: AppColors.borderLight }}
+            />
+            <View className="absolute -top-[5px] left-2.5">
+              <BookmarkButton eventId={occurrence.event.id} />
+            </View>
             <Text
-              style={{ fontSize: 13, color: AppColors.secondaryText, flex: 1 }}
-              numberOfLines={1}
+              className="text-[28px] font-bold tracking-tight mb-2"
+              style={{ color: AppColors.primaryText }}
             >
-              {address}
+              {occurrence.event.title}
             </Text>
-            <StarRating size={17} />
-          </View>
-          <Text
-            numberOfLines={descriptionExpanded ? undefined : 5}
-            onTextLayout={(e) => {
-              if (!descriptionExpanded) {
-                setDescriptionTruncated(e.nativeEvent.lines.length >= 5);
-              }
-            }}
-            style={{
-              fontSize: 14,
-              color: AppColors.secondaryText,
-              lineHeight: 22,
-              marginBottom: descriptionTruncated ? 4 : 18,
-            }}
-          >
-            {occurrence.event.description}
-          </Text>
-          {descriptionTruncated && (
-            <Pressable onPress={() => setDescriptionExpanded((prev) => !prev)} style={{ marginBottom: 14 }}>
-              <Text style={{ fontSize: 13, color: AppColors.primaryText, fontWeight: "600" }}>
-                {descriptionExpanded ? "See less" : "See more"}
+            <View className="flex-row items-center gap-1.5 mb-3.5">
+              <MaterialIcons name="location-on" size={16} color={AppColors.primaryText} />
+              <Text
+                className="text-[13px] flex-1"
+                style={{ color: AppColors.secondaryText }}
+                numberOfLines={1}
+              >
+                {address}
               </Text>
-            </Pressable>
-          )}
-          <View
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "space-between",
-            }}
-          >
-            <View style={{ flexDirection: "row", gap: 8, flex: 1, flexWrap: "wrap" }}>
-              {occurrence.event.category?.map((cat) => (
-                <View
-                  key={cat}
-                  style={{
-                    borderWidth: 1.5,
-                    borderColor: AppColors.borderLight,
-                    borderRadius: 999,
-                    paddingHorizontal: 16,
-                    paddingVertical: 7,
-                  }}
-                >
-                  <Text style={{ fontSize: 13, color: AppColors.secondaryText }}>{cat}</Text>
-                </View>
-              ))}
-            </View>
-            <View style={{ alignItems: "flex-end", marginLeft: 14 }}>
-              <Text style={{ fontSize: 20, fontWeight: "700", color: AppColors.primaryText }}>{occurrence.price} THB</Text>
-              <Text style={{ fontSize: 12, color: AppColors.subtleText }}>/Session</Text>
+              <StarRating size={17} />
             </View>
-          </View>
-        </View>
-        <View
-          style={{
-            marginHorizontal: 0,
-            borderBottomWidth: 1,
-            borderStyle: "dashed",
-            borderColor: AppColors.borderLight,
-          }}
-        />
-        <View
-          style={{
-            flex: 1,
-            backgroundColor: "#fff",
-            paddingHorizontal: 22,
-            paddingTop: 22,
-            paddingBottom: 28,
-            shadowColor: "#000",
-            shadowOpacity: 0.06,
-            shadowRadius: 12,
-            elevation: 2,
-          }}
-        >
-          <View
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "space-between",
-              marginBottom: 22,
-            }}
-          >
             <Text
-              style={{
-                fontSize: 30,
-                fontWeight: "700",
-                color: AppColors.primaryText,
-                letterSpacing: -0.5,
+              numberOfLines={descriptionExpanded ? undefined : 5}
+              onTextLayout={(e) => {
+                if (!descriptionExpanded) {
+                  setDescriptionTruncated(e.nativeEvent.lines.length >= 5);
+                }
               }}
+              className={`text-sm leading-[22px] ${descriptionTruncated ? "mb-1" : "mb-[18px]"}`}
+              style={{ color: AppColors.secondaryText }}
             >
-              {duration}
+              {occurrence.event.description}
             </Text>
-            <View
-              style={{
-                flexDirection: "row",
-                alignItems: "center",
-                gap: 5,
-                backgroundColor: "#F3F4F6",
-                borderRadius: 999,
-                paddingHorizontal: 12,
-                paddingVertical: 7,
-              }}
-            >
-              <MaterialIcons name="directions-walk" size={14} color={AppColors.secondaryText} />
-              <Text style={{ fontSize: 13, color: AppColors.secondaryText }}>8 min</Text>
-              <MaterialIcons name="arrow-forward" size={12} color={AppColors.subtleText} />
-              <MaterialIcons name="directions-bus" size={16} color={AppColors.secondaryText} />
+            {descriptionTruncated && (
+              <Pressable onPress={() => setDescriptionExpanded((prev) => !prev)} className="mb-3.5">
+                <Text className="text-[13px] font-semibold" style={{ color: AppColors.primaryText }}>
+                  {descriptionExpanded ? "See less" : "See more"}
+                </Text>
+              </Pressable>
+            )}
+            <View className="flex-row items-center justify-between">
+              <View className="flex-row gap-2 flex-1 flex-wrap">
+                {occurrence.event.category?.map((cat) => (
+                  <View
+                    key={cat}
+                    className="border-[1.5px] rounded-full px-4 py-[7px]"
+                    style={{ borderColor: AppColors.borderLight }}
+                  >
+                    <Text className="text-[13px]" style={{ color: AppColors.secondaryText }}>{cat}</Text>
+                  </View>
+                ))}
+              </View>
+              <View className="items-end ml-3.5">
+                <Text className="text-xl font-bold" style={{ color: AppColors.primaryText }}>{occurrence.price} THB</Text>
+                <Text className="text-xs" style={{ color: AppColors.subtleText }}>/Session</Text>
+              </View>
             </View>
           </View>
-          <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
-            <View style={{ gap: 0 }}>
-              <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
-                <View
-                  style={{
-                    width: 16,
-                    height: 16,
-                    borderRadius: 8,
-                    backgroundColor: AppColors.primaryText,
-                    alignItems: "center",
-                    justifyContent: "center",
-                  }}
-                >
-                  <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: "#fff" }} />
-                </View>
-                <Text style={{ fontSize: 14, color: AppColors.secondaryText, fontWeight: "500" }}>Home</Text>
-              </View>
-              <View style={{ paddingLeft: 6, paddingVertical: 2 }}>
-                <Text style={{ fontSize: 14, color: AppColors.subtleText, lineHeight: 10 }}>•</Text>
-                <Text style={{ fontSize: 14, color: AppColors.subtleText, lineHeight: 10 }}>•</Text>
-                <Text style={{ fontSize: 14, color: AppColors.subtleText, lineHeight: 10 }}>•</Text>
+
+          {/* Divider */}
+          <View
+            className="border-b border-dashed"
+            style={{ borderColor: AppColors.borderLight }}
+          />
+
+          {/* Bottom section */}
+          <View
+            className="flex-1 bg-white px-[22px] pt-[22px] pb-7 elevation-2"
+            style={{ shadowColor: "#000", shadowOpacity: 0.06, shadowRadius: 12 }}
+          >
+            <View className="flex-row items-center justify-between mb-[22px]">
+              <Text
+                className="text-[30px] font-bold tracking-tight"
+                style={{ color: AppColors.primaryText }}
+              >
+                {duration}
+              </Text>
+              <View
+                className="flex-row items-center gap-[5px] bg-[#F3F4F6] rounded-full px-3 py-[7px]"
+              >
+                <MaterialIcons name="directions-walk" size={14} color={AppColors.secondaryText} />
+                <Text className="text-[13px]" style={{ color: AppColors.secondaryText }}>8 min</Text>
+                <MaterialIcons name="arrow-forward" size={12} color={AppColors.subtleText} />
+                <MaterialIcons name="directions-bus" size={16} color={AppColors.secondaryText} />
               </View>
-              <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                <MaterialIcons name="location-on" size={16} color={AppColors.secondaryText} />
-                <Text style={{ fontSize: 14, color: AppColors.secondaryText, fontWeight: "500" }}>Location</Text>
+            </View>
+            <View className="flex-row items-center justify-between">
+              <View>
+                <View className="flex-row items-center gap-3">
+                  <View
+                    className="w-4 h-4 rounded-full items-center justify-center"
+                    style={{ backgroundColor: AppColors.primaryText }}
+                  >
+                    <View className="w-1.5 h-1.5 rounded-full bg-white" />
+                  </View>
+                  <Text className="text-sm font-medium" style={{ color: AppColors.secondaryText }}>Home</Text>
+                </View>
+                <View className="pl-1.5 py-0.5">
+                  <Text className="text-sm leading-[10px]" style={{ color: AppColors.subtleText }}>•</Text>
+                  <Text className="text-sm leading-[10px]" style={{ color: AppColors.subtleText }}>•</Text>
+                  <Text className="text-sm leading-[10px]" style={{ color: AppColors.subtleText }}>•</Text>
+                </View>
+                <View className="flex-row items-center gap-2.5">
+                  <MaterialIcons name="location-on" size={16} color={AppColors.secondaryText} />
+                  <Text className="text-sm font-medium" style={{ color: AppColors.secondaryText }}>Location</Text>
+                </View>
               </View>
+              <TouchableOpacity
+                onPress={() => {}}
+                activeOpacity={0.7}
+                className="rounded-2xl px-[26px] py-3.5"
+                style={{ backgroundColor: AppColors.primaryText }}
+              >
+                <Text className="text-white text-[17px] font-bold">Register</Text>
+              </TouchableOpacity>
             </View>
-            <TouchableOpacity
-              onPress={() => {}}
-              activeOpacity={0.7}
-              style={{
-                backgroundColor: AppColors.primaryText,
-                borderRadius: 16,
-                paddingHorizontal: 26,
-                paddingVertical: 14,
-              }}
-            >
-              <Text style={{ color: "#fff", fontSize: 17, fontWeight: "700" }}>Register</Text>
-            </TouchableOpacity>
           </View>
-        </View>
-      </ScrollView>
+        </ScrollView>
       </View>
     </View>
   );
@@ -307,7 +209,7 @@ export default function EventOccurrenceScreen() {
 
   if (isLoading) {
     return (
-      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <View className="flex-1 items-center justify-center">
         <ActivityIndicator size="large" />
       </View>
     );
@@ -315,8 +217,8 @@ export default function EventOccurrenceScreen() {
 
   if (error || !response || response.status !== 200) {
     return (
-      <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: 24 }}>
-        <Text style={{ color: AppColors.danger, fontWeight: "600", fontSize: 16 }}>
+      <View className="flex-1 items-center justify-center p-6">
+        <Text className="text-base font-semibold" style={{ color: AppColors.danger }}>
           Event not found
         </Text>
       </View>
@@ -324,4 +226,4 @@ export default function EventOccurrenceScreen() {
   }
 
   return <EventOccurrenceDetail occurrence={response.data} />;
-}
+}
\ No newline at end of file
diff --git a/frontend/apps/mobile/app/(app)/(tabs)/family/manage.tsx b/frontend/apps/mobile/app/(app)/(tabs)/family/manage.tsx
index b816b7fc..eb13dee9 100644
--- a/frontend/apps/mobile/app/(app)/(tabs)/family/manage.tsx
+++ b/frontend/apps/mobile/app/(app)/(tabs)/family/manage.tsx
@@ -17,9 +17,8 @@ import { IconSymbol } from '@/components/ui/icon-symbol';
 import { useQueryClient } from '@tanstack/react-query';
 import { useCreateChild, useUpdateChild, useDeleteChild, getGetChildrenByGuardianIdQueryKey } from '@skillspark/api-client';
 import { ChildProfileForm, MONTHS } from '@/components/ChildProfileForm';
-
-// TODO: Replace with authenticated user's guardian ID
-const GUARDIAN_ID = '88888888-8888-8888-8888-888888888888';
+import { useAuthContext } from '@/hooks/use-auth-context';
+import { ErrorScreen } from '@/components/ErrorScreen';
 
 export default function ManageChildScreen() {
   const router = useRouter();
@@ -27,10 +26,10 @@ export default function ManageChildScreen() {
   const colorScheme = useColorScheme();
   const insets = useSafeAreaInsets();
   const theme = Colors[colorScheme ?? 'light'];
+  const { guardianId } = useAuthContext();
 
   const isEditing = !!params.id;
 
-  // Initial State Setup
   const [firstName, setFirstName] = useState(
     params.name ? (params.name as string).split(' ')[0] : ''
   );
@@ -38,7 +37,6 @@ export default function ManageChildScreen() {
     params.name ? (params.name as string).split(' ').slice(1).join(' ') : ''
   );
 
-  // Convert numeric month (1-12) to String Name if editing
   const initialMonthStr = params.birth_month
     ? MONTHS[parseInt(params.birth_month as string) - 1]
     : '';
@@ -55,10 +53,8 @@ export default function ManageChildScreen() {
   const [interests, setInterests] = useState<string[]>(initialInterests);
 
   const [searchQuery, setSearchQuery] = useState('');
-
   const [showMonthDrop, setShowMonthDrop] = useState(false);
   const [showYearDrop, setShowYearDrop] = useState(false);
-
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const queryClient = useQueryClient();
@@ -66,6 +62,10 @@ export default function ManageChildScreen() {
   const updateChildMutation = useUpdateChild();
   const deleteChildMutation = useDeleteChild();
 
+  if (!guardianId) {
+    return <ErrorScreen message="Illegal state: no guardian ID retrieved" />;
+  }
+  
   const handleSave = async () => {
     if (!firstName || !birthYear || !birthMonth || !schoolId) {
       Alert.alert('Error', 'Please fill in all required fields (Name, Birth Date, School ID)');
@@ -78,7 +78,7 @@ export default function ManageChildScreen() {
         name,
         birth_year: parseInt(birthYear, 10),
         birth_month: MONTHS.indexOf(birthMonth) + 1,
-        guardian_id: GUARDIAN_ID,
+        guardian_id: guardianId,
         school_id: schoolId,
         interests,
       };
@@ -87,7 +87,7 @@ export default function ManageChildScreen() {
       } else {
         await createChildMutation.mutateAsync({ data: childData });
       }
-      await queryClient.invalidateQueries({ queryKey: getGetChildrenByGuardianIdQueryKey(GUARDIAN_ID) });
+      await queryClient.invalidateQueries({ queryKey: getGetChildrenByGuardianIdQueryKey(guardianId) });
       router.back();
     } catch (error) {
       console.error(error);
@@ -109,14 +109,14 @@ export default function ManageChildScreen() {
             setIsSubmitting(true);
             try {
               await deleteChildMutation.mutateAsync({ id: params.id as string });
-              await queryClient.invalidateQueries({ queryKey: getGetChildrenByGuardianIdQueryKey(GUARDIAN_ID) });
+              await queryClient.invalidateQueries({ queryKey: getGetChildrenByGuardianIdQueryKey(guardianId) });
               router.back();
             } catch {
               Alert.alert('Error', 'Failed to delete.');
               setIsSubmitting(false);
             }
-          }
-        }
+          },
+        },
       ]
     );
   };
@@ -126,10 +126,13 @@ export default function ManageChildScreen() {
       <Stack.Screen options={{ headerShown: false }} />
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={{ flex: 1 }}
+        className="flex-1"
         keyboardVerticalOffset={0}
       >
-        <ScrollView contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 40, paddingTop: 10 }} showsVerticalScrollIndicator={false}>
+        <ScrollView
+          contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 40, paddingTop: 10 }}
+          showsVerticalScrollIndicator={false}
+        >
           <View className="flex-row items-center justify-between mb-6">
             <TouchableOpacity onPress={() => router.back()} className="w-8 h-8 justify-center items-start">
               <IconSymbol name="chevron.left" size={24} color={theme.text} />
@@ -167,8 +170,8 @@ export default function ManageChildScreen() {
             setShowYearDrop={setShowYearDrop}
           />
           <TouchableOpacity
-            className="py-4 rounded-xl items-center justify-center"
-            style={{ backgroundColor: theme.tint, opacity: isSubmitting ? 0.7 : 1 }}
+            className={`py-4 rounded-xl items-center justify-center ${isSubmitting ? 'opacity-70' : 'opacity-100'}`}
+            style={{ backgroundColor: theme.tint }}
             onPress={handleSave}
             disabled={isSubmitting}
           >
@@ -176,9 +179,8 @@ export default function ManageChildScreen() {
               {isSubmitting ? 'Saving...' : 'Save Changes'}
             </ThemedText>
           </TouchableOpacity>
-
         </ScrollView>
       </KeyboardAvoidingView>
     </ThemedView>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/apps/mobile/app/(app)/(tabs)/profile.tsx b/frontend/apps/mobile/app/(app)/(tabs)/profile.tsx
index 91dba861..e4c3e8f8 100644
--- a/frontend/apps/mobile/app/(app)/(tabs)/profile.tsx
+++ b/frontend/apps/mobile/app/(app)/(tabs)/profile.tsx
@@ -83,7 +83,7 @@ export default function ProfileScreen() {
                 />
               ))
             ) : (
-              <ThemedText style={{ color: '#999', padding: 10 }}>No children found</ThemedText>
+              <ThemedText className = "text-[#999] p-2.5">No children found</ThemedText>
             )}
           </View>
         </View>
diff --git a/frontend/apps/mobile/components/ChildProfileForm.tsx b/frontend/apps/mobile/components/ChildProfileForm.tsx
index 51e05d5f..bc9664ba 100644
--- a/frontend/apps/mobile/components/ChildProfileForm.tsx
+++ b/frontend/apps/mobile/components/ChildProfileForm.tsx
@@ -83,8 +83,9 @@ export function ChildProfileForm({
         placeholder="Last Name"
         placeholderTextColor={AppColors.placeholderText}
       />
-      <View className="flex-row gap-3 mb-6" style={{ zIndex: 10 }}>
-        <View className="flex-1" style={{ zIndex: 10 }}>
+      <View className="flex-row gap-3 mb-6 z-10">
+        {/* Month picker */}
+        <View className="flex-1 z-10">
           <TouchableOpacity
             className="rounded-[10px] px-4 py-[14px] flex-row items-center justify-between"
             style={{ backgroundColor: theme.inputBg }}
@@ -95,13 +96,12 @@ export function ChildProfileForm({
             </ThemedText>
             <IconSymbol name="chevron.down" size={16} color={AppColors.mutedText} />
           </TouchableOpacity>
-
           {showMonthDrop && (
             <View
-              className="absolute left-0 right-0 rounded-[10px] border"
-              style={{ top: 52, backgroundColor: theme.dropdownBg, borderColor: theme.borderColor, zIndex: 100, elevation: 5, shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 8, shadowOffset: { width: 0, height: 2 } }}
+              className="absolute left-0 right-0 top-[52px] rounded-[10px] border z-[100] elevation-5"
+              style={{ backgroundColor: theme.dropdownBg, borderColor: theme.borderColor, shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 8, shadowOffset: { width: 0, height: 2 } }}
             >
-              <ScrollView nestedScrollEnabled style={{ maxHeight: 180 }}>
+              <ScrollView nestedScrollEnabled className="max-h-[180px]">
                 {MONTHS.map(m => (
                   <TouchableOpacity
                     key={m}
@@ -116,7 +116,8 @@ export function ChildProfileForm({
             </View>
           )}
         </View>
-        <View className="flex-1" style={{ zIndex: 10 }}>
+        {/* Year picker */}
+        <View className="flex-1 z-10">
           <TouchableOpacity
             className="rounded-[10px] px-4 py-[14px] flex-row items-center justify-between"
             style={{ backgroundColor: theme.inputBg }}
@@ -127,13 +128,12 @@ export function ChildProfileForm({
             </ThemedText>
             <IconSymbol name="chevron.down" size={16} color={AppColors.mutedText} />
           </TouchableOpacity>
-
           {showYearDrop && (
             <View
-              className="absolute left-0 right-0 rounded-[10px] border"
-              style={{ top: 52, backgroundColor: theme.dropdownBg, borderColor: theme.borderColor, zIndex: 100, elevation: 5, shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 8, shadowOffset: { width: 0, height: 2 } }}
+              className="absolute left-0 right-0 top-[52px] rounded-[10px] border z-[100] elevation-5"
+              style={{ backgroundColor: theme.dropdownBg, borderColor: theme.borderColor, shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 8, shadowOffset: { width: 0, height: 2 } }}
             >
-              <ScrollView nestedScrollEnabled style={{ maxHeight: 180 }}>
+              <ScrollView nestedScrollEnabled className="max-h-[180px]">
                 {YEARS.map(y => (
                   <TouchableOpacity
                     key={y}
@@ -183,7 +183,7 @@ export function ChildProfileForm({
         </View>
         <View className="h-px" style={{ backgroundColor: theme.borderColor }} />
         <View onStartShouldSetResponder={() => true} onMoveShouldSetResponder={() => true}>
-          <ScrollView nestedScrollEnabled showsVerticalScrollIndicator style={{ maxHeight: 150 }}>
+          <ScrollView nestedScrollEnabled showsVerticalScrollIndicator className="max-h-[150px]">
             {filteredOptions.map(item => (
               <TouchableOpacity
                 key={item}
@@ -207,4 +207,4 @@ export function ChildProfileForm({
       </View>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/apps/mobile/components/EventCard.tsx b/frontend/apps/mobile/components/EventCard.tsx
index 27905f6c..802ddb97 100644
--- a/frontend/apps/mobile/components/EventCard.tsx
+++ b/frontend/apps/mobile/components/EventCard.tsx
@@ -28,14 +28,13 @@ export function EventCard({ pin }: EventCardProps) {
 
   return (
     <ThemedView
-      className="absolute bottom-0 left-0 right-0 rounded-t-[25px] p-5"
+      className="absolute bottom-0 left-0 right-0 rounded-t-[25px] p-5 elevation-10"
       style={{
         paddingBottom: Platform.OS === "ios" ? 40 : 20,
         shadowColor: "#000",
         shadowOffset: { width: 0, height: -2 },
         shadowOpacity: 0.1,
         shadowRadius: 5,
-        elevation: 10,
       }}
     >
       <View className="mb-5 flex-row">
@@ -43,7 +42,7 @@ export function EventCard({ pin }: EventCardProps) {
           className="mr-[15px] h-[90px] w-[90px] items-center justify-center rounded-[10px]"
           style={{ backgroundColor: placeholderColor }}
         >
-           <IconSymbol name="photo" size={28} color="#888" />
+          <IconSymbol name="photo" size={28} color="#888" />
         </View>
         <View className="flex-1 justify-center">
           <ThemedText type="subtitle" className="mb-1 font-bold">
@@ -52,7 +51,6 @@ export function EventCard({ pin }: EventCardProps) {
           <ThemedText className="mb-[6px] text-sm text-[#888]">
             {pin.members} members
           </ThemedText>
-
           <View className="mb-2 flex-row items-center">
             {[1, 2, 3, 4, 5].map((star) => (
               <IconSymbol
@@ -63,16 +61,12 @@ export function EventCard({ pin }: EventCardProps) {
               />
             ))}
           </View>
-
-          <ThemedText
-            numberOfLines={2}
-            className="text-sm leading-5 text-[#888]"
-          >
+          <ThemedText numberOfLines={2} className="text-sm leading-5 text-[#888]">
             {pin.description}
           </ThemedText>
         </View>
         <View className="ml-[10px] mt-[5px] items-end justify-start">
-            <IconSymbol name="record.circle" size={24} color="#888" />
+          <IconSymbol name="record.circle" size={24} color="#888" />
         </View>
       </View>
       <TouchableOpacity
@@ -86,4 +80,4 @@ export function EventCard({ pin }: EventCardProps) {
       </TouchableOpacity>
     </ThemedView>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/apps/mobile/components/SchoolPicker.tsx b/frontend/apps/mobile/components/SchoolPicker.tsx
index 6310f3fe..836be3ac 100644
--- a/frontend/apps/mobile/components/SchoolPicker.tsx
+++ b/frontend/apps/mobile/components/SchoolPicker.tsx
@@ -18,11 +18,10 @@ export function SchoolPicker({ value, onChange }: SchoolPickerProps) {
   const { data, isLoading, isError } = useGetAllSchools();
   const schools = Array.isArray(data?.data) ? data.data : [];
   const selectedSchool = schools.find((s: School) => s.id === value);
-
   const placeholderLabel = isLoading ? 'Loading schools...' : isError ? 'Failed to load schools' : 'Select School';
 
   return (
-    <View style={{ zIndex: 20 }}>
+    <View className="z-20">
       <TouchableOpacity
         className="rounded-[10px] px-4 py-[14px] flex-row items-center justify-between mb-6"
         style={{ backgroundColor: theme.inputBg }}
@@ -37,23 +36,19 @@ export function SchoolPicker({ value, onChange }: SchoolPickerProps) {
         </ThemedText>
         <IconSymbol name="chevron.down" size={16} color={AppColors.mutedText} />
       </TouchableOpacity>
-
       {showDrop && (
         <View
-          className="absolute left-0 right-0 rounded-[10px] border"
+          className="absolute left-0 right-0 top-[52px] rounded-[10px] border z-[100] elevation-5"
           style={{
-            top: 52,
             backgroundColor: theme.dropdownBg,
             borderColor: theme.borderColor,
-            zIndex: 100,
-            elevation: 5,
             shadowColor: '#000',
             shadowOpacity: 0.1,
             shadowRadius: 8,
             shadowOffset: { width: 0, height: 2 },
           }}
         >
-          <ScrollView nestedScrollEnabled style={{ maxHeight: 200 }}>
+          <ScrollView nestedScrollEnabled className="max-h-[200px]">
             {schools.map(school => (
               <TouchableOpacity
                 key={school.id}
@@ -74,4 +69,4 @@ export function SchoolPicker({ value, onChange }: SchoolPickerProps) {
       )}
     </View>
   );
-}
+}
\ No newline at end of file