diff --git a/maternal-web/app/(auth)/onboarding/page.tsx b/maternal-web/app/(auth)/onboarding/page.tsx
index 68ccd12..0c0593c 100644
--- a/maternal-web/app/(auth)/onboarding/page.tsx
+++ b/maternal-web/app/(auth)/onboarding/page.tsx
@@ -67,8 +67,8 @@ export default function OnboardingPage() {
         setActiveStep((prevActiveStep) => prevActiveStep + 1);
       } catch (err: any) {
         console.error('Failed to save language:', err);
-        setError('Failed to save language preference. Continuing anyway...');
-        setTimeout(() => setActiveStep((prevActiveStep) => prevActiveStep + 1), 1500);
+        // Language was saved locally even if backend failed, so continue
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
       } finally {
         setLoading(false);
       }
@@ -90,8 +90,8 @@ export default function OnboardingPage() {
         setActiveStep((prevActiveStep) => prevActiveStep + 1);
       } catch (err: any) {
         console.error('Failed to save measurement:', err);
-        setError('Failed to save measurement preference. Continuing anyway...');
-        setTimeout(() => setActiveStep((prevActiveStep) => prevActiveStep + 1), 1500);
+        // Measurement was saved locally even if backend failed, so continue
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
       } finally {
         setLoading(false);
       }
@@ -107,7 +107,8 @@ export default function OnboardingPage() {
 
       const familyId = user?.families?.[0]?.familyId;
       if (!familyId) {
-        setError('No family found. Please try logging out and back in.');
+        console.error('No family found. User object:', JSON.stringify(user, null, 2));
+        setError('Unable to create child profile. Your account setup is incomplete. Please contact support or try logging out and back in.');
         return;
       }
 
diff --git a/maternal-web/app/track/page.tsx b/maternal-web/app/track/page.tsx
index 6382cc2..429ee45 100644
--- a/maternal-web/app/track/page.tsx
+++ b/maternal-web/app/track/page.tsx
@@ -74,39 +74,36 @@ export default function TrackPage() {
                     onClick={() => router.push(option.path)}
                     sx={{
                       height: '100%',
-                      display: 'flex',
-                      flexDirection: 'column',
-                      alignItems: 'center',
-                      justifyContent: 'center',
+                      width: '100%',
                     }}
                   >
-                    <CardContent sx={{ 
-                      textAlign: 'center', 
-                      display: 'flex', 
-                      flexDirection: 'column', 
-                      alignItems: 'center', 
-                      justifyContent: 'center',
-                      width: '100%',
-                      height: '100%',
-                      p: 2, 
-                      '&:last-child': { pb: 2 } 
-                    }}>
+                    <Box
+                      sx={{
+                        textAlign: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        height: '180px',
+                        minHeight: '180px',
+                        width: '100%',
+                        p: 2,
+                      }}
+                    >
                       {option.icon}
                       <Typography 
                         variant="h6" 
                         fontWeight="600" 
                         sx={{ 
                           mt: 2,
-                          wordWrap: 'break-word',
-                          wordBreak: 'break-word',
-                          hyphens: 'auto',
                           textAlign: 'center',
                           width: '100%',
+                          lineHeight: 1.2,
                         }}
                       >
                         {option.title}
                       </Typography>
-                    </CardContent>
+                    </Box>
                   </CardActionArea>
                 </Card>
               </Grid>
diff --git a/maternal-web/components/features/analytics/InsightsDashboard.tsx b/maternal-web/components/features/analytics/InsightsDashboard.tsx
index a970a67..0f09786 100644
--- a/maternal-web/components/features/analytics/InsightsDashboard.tsx
+++ b/maternal-web/components/features/analytics/InsightsDashboard.tsx
@@ -364,20 +364,27 @@ export const InsightsDashboard: React.FC = () => {
                   transition={{ duration: 0.3, delay: 0 }}
                 >
                   <Card sx={{ bgcolor: COLORS.feeding, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}>
-                    <CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', p: 2, '&:last-child': { pb: 2 } }}>
-                      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-                        <Restaurant sx={{ fontSize: 32, mr: 1 }} />
-                        <Typography variant="h6" fontWeight="600">
-                          {t('stats.feedings.title')}
-                        </Typography>
-                      </Box>
+                    <Box
+                      sx={{
+                        textAlign: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        height: '160px',
+                        minHeight: '160px',
+                        width: '100%',
+                        p: 2,
+                      }}
+                    >
+                      <Restaurant sx={{ fontSize: 32, mb: 1 }} />
                       <Typography variant="h3" fontWeight="700">
                         {stats.totalFeedings}
                       </Typography>
                       <Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
                         {t('stats.feedings.subtitle')}
                       </Typography>
-                    </CardContent>
+                    </Box>
                   </Card>
                 </motion.div>
               </Grid>
@@ -389,20 +396,27 @@ export const InsightsDashboard: React.FC = () => {
                   transition={{ duration: 0.3, delay: 0.1 }}
                 >
                   <Card sx={{ bgcolor: COLORS.sleep, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}>
-                    <CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', p: 2, '&:last-child': { pb: 2 } }}>
-                      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-                        <Hotel sx={{ fontSize: 32, mr: 1 }} />
-                        <Typography variant="h6" fontWeight="600">
-                          {t('stats.sleep.title')}
-                        </Typography>
-                      </Box>
+                    <Box
+                      sx={{
+                        textAlign: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        height: '160px',
+                        minHeight: '160px',
+                        width: '100%',
+                        p: 2,
+                      }}
+                    >
+                      <Hotel sx={{ fontSize: 32, mb: 1 }} />
                       <Typography variant="h3" fontWeight="700">
                         {stats.avgSleepHours}h
                       </Typography>
                       <Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
                         {t('stats.sleep.subtitle')}
                       </Typography>
-                    </CardContent>
+                    </Box>
                   </Card>
                 </motion.div>
               </Grid>
@@ -414,20 +428,27 @@ export const InsightsDashboard: React.FC = () => {
                   transition={{ duration: 0.3, delay: 0.2 }}
                 >
                   <Card sx={{ bgcolor: COLORS.diaper, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}>
-                    <CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', p: 2, '&:last-child': { pb: 2 } }}>
-                      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-                        <BabyChangingStation sx={{ fontSize: 32, mr: 1 }} />
-                        <Typography variant="h6" fontWeight="600">
-                          {t('stats.diapers.title')}
-                        </Typography>
-                      </Box>
+                    <Box
+                      sx={{
+                        textAlign: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        height: '160px',
+                        minHeight: '160px',
+                        width: '100%',
+                        p: 2,
+                      }}
+                    >
+                      <BabyChangingStation sx={{ fontSize: 32, mb: 1 }} />
                       <Typography variant="h3" fontWeight="700">
                         {stats.totalDiapers}
                       </Typography>
                       <Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
                         {t('stats.diapers.subtitle')}
                       </Typography>
-                    </CardContent>
+                    </Box>
                   </Card>
                 </motion.div>
               </Grid>
@@ -439,20 +460,27 @@ export const InsightsDashboard: React.FC = () => {
                   transition={{ duration: 0.3, delay: 0.3 }}
                 >
                   <Card sx={{ bgcolor: COLORS.milestone, color: 'white', height: '160px', minHeight: '160px', width: '100%' }}>
-                    <CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', p: 2, '&:last-child': { pb: 2 } }}>
-                      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-                        <TrendingUp sx={{ fontSize: 32, mr: 1 }} />
-                        <Typography variant="h6" fontWeight="600">
-                          {t('stats.topActivity.title')}
-                        </Typography>
-                      </Box>
+                    <Box
+                      sx={{
+                        textAlign: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        height: '160px',
+                        minHeight: '160px',
+                        width: '100%',
+                        p: 2,
+                      }}
+                    >
+                      <TrendingUp sx={{ fontSize: 32, mb: 1 }} />
                       <Typography variant="h3" fontWeight="700" sx={{ textTransform: 'capitalize' }}>
                         {t(`activityTypes.${stats.mostCommonType}`)}
                       </Typography>
                       <Typography variant="body2" sx={{ opacity: 0.9, mt: 1 }}>
                         {t('stats.topActivity.subtitle')}
                       </Typography>
-                    </CardContent>
+                    </Box>
                   </Card>
                 </motion.div>
               </Grid>
diff --git a/maternal-web/lib/auth/AuthContext.tsx b/maternal-web/lib/auth/AuthContext.tsx
index 03d8498..02434c1 100644
--- a/maternal-web/lib/auth/AuthContext.tsx
+++ b/maternal-web/lib/auth/AuthContext.tsx
@@ -170,7 +170,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
 
       // Backend returns { success, data: { user, family, tokens } }
       const { data: responseData } = response.data;
-      const { tokens, user: userData } = responseData;
+      const { tokens, user: userData, family: familyData } = responseData;
 
       if (!tokens?.accessToken || !tokens?.refreshToken) {
         throw new Error('Invalid response from server');
@@ -178,9 +178,19 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
 
       const { accessToken, refreshToken } = tokens;
 
+      // Add family data to user object (registration returns family separately)
+      const userWithFamily = {
+        ...userData,
+        families: familyData ? [{
+          id: familyData.id,
+          familyId: familyData.id,
+          role: familyData.role || 'parent',
+        }] : [],
+      };
+
       tokenStorage.setTokens(accessToken, refreshToken);
       setToken(accessToken);
-      setUser(userData);
+      setUser(userWithFamily);
 
       // Redirect to onboarding
       router.push('/onboarding');