diff --git a/apps/mobile/src/app/chores/[id].tsx b/apps/mobile/src/app/chores/[id].tsx
index 693baa3..514f1b3 100644
--- a/apps/mobile/src/app/chores/[id].tsx
+++ b/apps/mobile/src/app/chores/[id].tsx
@@ -70,6 +70,30 @@ export default function ChoreDetailScreen() {
     retry: 1,
   })
 
+  const choreTitle = useMemo(() => {
+    const choreItem = data?.chores?.find(c => c._id === id)
+    if (!choreItem) return <LoadingSkeletonLine width="75%" height={21.25} style={{ marginBottom: 8 }} />
+
+    const plantName = choreItem.plant?.name || 'Unknown'
+
+    let detail: string
+    if (choreItem.fertilizers && choreItem.fertilizers.length > 0) {
+      detail = choreItem.fertilizers.map(f => {
+        const fertObj = typeof f.fertilizer === 'object' ? f.fertilizer : null
+        const name = fertObj?.name || ''
+        return f.amount ? `${name} (${f.amount})` : name
+      }).join(', ')
+    } else {
+      detail = choreItem.description || ''
+    }
+
+    const recurrence = choreItem.recurAmount && choreItem.recurUnit
+      ? ` every ${choreItem.recurAmount} ${choreItem.recurUnit}${choreItem.recurAmount === 1 ? '' : 's'}`
+      : ''
+
+    return `${plantName}: ${detail}${recurrence}`
+  }, [data, id])
+
   // Fetch fertilizers for edit form
   const {
     data: fertilizersData,
@@ -267,7 +291,7 @@ export default function ChoreDetailScreen() {
       <ScreenTitle
         isLoading={isRefetching}
       >
-        Chore
+        {choreTitle}
       </ScreenTitle>
 
       {(isLoading && (
diff --git a/apps/mobile/src/components/ScreenTitle.tsx b/apps/mobile/src/components/ScreenTitle.tsx
index 7430acf..19afeb2 100644
--- a/apps/mobile/src/components/ScreenTitle.tsx
+++ b/apps/mobile/src/components/ScreenTitle.tsx
@@ -17,12 +17,14 @@ export function ScreenTitle({
       <View style={styles.headerTitleContainer}>
         <Text style={styles.title}>{children}</Text>
 
-        {isLoading && (
-          <ActivityIndicator
-            color={palette.textPrimary}
-            size='small'
-          />
-        )}
+        <View style={styles.loadingIndicatorContainer}>
+          {isLoading && (
+            <ActivityIndicator
+              color={palette.textPrimary}
+              size='small'
+            />
+          )}
+        </View>
       </View>
 
       {buttons && (
@@ -42,13 +44,17 @@ const styles = StyleSheet.create({
   },
   headerTitleContainer: {
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     columnGap: 12,
   },
   title: {
     fontSize: 18,
     fontWeight: '700',
     color: palette.textPrimary,
+    maxWidth: '90%',
+  },
+  loadingIndicatorContainer: {
+    width: '8%',
   },
   headerButtons: {
     flexDirection: 'row',