diff --git a/app/addFinanceEvents.tsx b/app/addFinanceEvents.tsx
index 0b3dc85..73c82b5 100644
--- a/app/addFinanceEvents.tsx
+++ b/app/addFinanceEvents.tsx
@@ -1,10 +1,5 @@
-import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, TextInput } from 'react-native';
-import { styles } from './styles';
-import { Ionicons } from "@expo/vector-icons";
-import { Dropdown } from 'react-native-element-dropdown';
+import React from 'react';
 import axios from 'axios';
-import DateTimePicker from '@react-native-community/datetimepicker';
 import { IPAddr } from './constants';
 import { useNavigation } from '@react-navigation/native';
 import GenericAddPageForm from './addEventPage';
@@ -22,7 +17,6 @@ export default function AddFinanceEvents() {
     type AddFinanceTrackerNavigationProp = StackNavigationProp<RootStackParamList, 'addFinanceEvents'>;
     const navigation = useNavigation<AddFinanceTrackerNavigationProp>();
 
-    const [value, setValue] = useState<string | null>(null);
     const fields = [
         { name: 'title', label: 'Title', type: 'text' },
         { name: 'event_date', label: 'Date', type: 'date' },
@@ -31,7 +25,6 @@ export default function AddFinanceEvents() {
         { name: 'money', label: 'Money', type: 'number' }
     ];
  
- 
     const initialData = {
         user_id: 1,
         title: '',
@@ -42,30 +35,9 @@ export default function AddFinanceEvents() {
         money: 0.0
     }
 
-    const [eventData, setEventData] = useState({
-        user_id: 1,
-        title: '',
-        event_date: new Date(),
-        event_time: new Date(),
-        repeating: false,
-        repeat_timeline: '',
-        money: 0.0
-    });
-
-
-    const handleChange = (name: string, value: any) => {
-        setEventData({ ...eventData, [name]: value });
-    };
-
-    const handleSave = async () => {
-        const formattedData = {
-            ...eventData,
-            event_date: eventData.event_date.toISOString().split('T')[0],
-            event_time: eventData.event_time.toTimeString().split(' ')[0],
-        };
-
+    const handleSave = async (saveData: any) => {
         try {
-            const response = await axios.post(IPAddr + '/add_finance_events', formattedData);
+            const response = await axios.post(IPAddr + '/add_finance_events', saveData);
             console.log('Event saved successfully:', response.data);
         } catch (error) {
             console.error('Error saving event:', error);
@@ -73,18 +45,6 @@ export default function AddFinanceEvents() {
         navigation.navigate('finance')
     };
 
-    const handleDateChange = (event: any, selectedDate: any) => {
-        if (selectedDate) {
-            handleChange('event_date', selectedDate);
-        }
-    };
-
-    const handleTimeChange = (event: any, selectedTime: any) => {
-        if (selectedTime) {
-            handleChange('event_time', selectedTime);
-        }
-    };
-
     const handleCancel = (() => {
         navigation.navigate('finance')
     })
diff --git a/app/addHealthEvents.tsx b/app/addHealthEvents.tsx
index 7913a4d..ebb09e8 100644
--- a/app/addHealthEvents.tsx
+++ b/app/addHealthEvents.tsx
@@ -1,11 +1,6 @@
-import React, { useState } from 'react';
-import { View, TextInput, Text, TouchableOpacity } from 'react-native';
-import { styles } from './styles';
-import { Ionicons } from "@expo/vector-icons";
-import { Dropdown } from 'react-native-element-dropdown';
+import React from 'react';
 import { IPAddr } from './constants';
 import axios from 'axios';
-import DateTimePicker from '@react-native-community/datetimepicker';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { useNavigation } from '@react-navigation/native';
 import GenericAddPageForm from './addEventPage';
@@ -22,7 +17,6 @@ export default function AddHealthEvents() {
   type AddHealthEventNavProp = StackNavigationProp<RootStackParamList, 'addCalendarEvents'>;
   const navigation = useNavigation<AddHealthEventNavProp>();
 
-  const [value, setValue] = useState<string | null>(null);
   const initialData = {
     user_id: 1,
     title: '',
@@ -31,28 +25,22 @@ export default function AddHealthEvents() {
     repeating: false,
     repeat_timeline: ''
   }
-  const [eventData, setEventData] = useState({
-    user_id: 1,
-    title: '',
-    event_date: new Date(),
-    event_time: new Date(),
-    repeating: false,
-    repeat_timeline: ''
-  });
 
-  const handleChange = (name: string, value: any) => {
-    setEventData({ ...eventData, [name]: value });
-  };
+  const fields = [  
+    { name: 'title', label: 'Title', type: 'text' },
+    { name: 'event_date', label: 'Date', type: 'date' },
+    { name: 'event_time', label: 'Time', type: 'time' },
+    { name: 'repeat_timeline', label: 'Repeating', type: 'dropdown', options: data },
+    { name: 'description', label: 'Description', type: 'textarea' },
+  ];
 
-  const handleSave = async () => {
-    const formattedData = {
-      ...eventData,
-      event_date: eventData.event_date.toISOString().split('T')[0],
-      event_time: eventData.event_time.toTimeString().split(' ')[0],
-    };
+  const handleCancel = () => {
+    navigation.navigate('healthTracker')
+  }
 
+  const handleSave = async (saveData: any) => {
     try {
-      const response = await axios.post(IPAddr + '/add_health_events', formattedData);
+      const response = await axios.post(IPAddr + '/add_health_events', saveData);
       console.log('Event saved successfully:', response.data);
     } catch (error) {
       console.error('Error saving event:', error);
@@ -60,18 +48,6 @@ export default function AddHealthEvents() {
     navigation.navigate('healthTracker')
   };
 
-  const handleDateChange = (event: any, selectedDate: any) => {
-    if (selectedDate) {
-      handleChange('event_date', selectedDate);
-    }
-  };
-
-  const handleTimeChange = (event: any, selectedTime: any) => {
-    if (selectedTime) {
-      handleChange('event_time', selectedTime);
-    }
-  };
-
   return (
     <GenericAddPageForm
       title="New Health Event"
diff --git a/app/addMeals.tsx b/app/addMeals.tsx
index e6d7cbb..fbf1dc7 100644
--- a/app/addMeals.tsx
+++ b/app/addMeals.tsx
@@ -1,10 +1,6 @@
-import React, { useState } from 'react';
-import { View, TextInput, Text, TouchableOpacity } from 'react-native';
-import { styles } from './styles';
-import { Ionicons } from "@expo/vector-icons";
+import React from 'react'
 import axios from 'axios';
 import { IPAddr } from './constants';
-import DateTimePicker from '@react-native-community/datetimepicker';
 import { RootStackParamList } from '../components/Types';
 import { useNavigation } from '@react-navigation/native';
 import GenericAddPageForm from './addEventPage';
@@ -12,29 +8,25 @@ import { StackNavigationProp } from '@react-navigation/stack';
 
 
 export default function AddMeals() {
-  type CalendarTrackerNavigationProp = StackNavigationProp<RootStackParamList, 'addMeals'>;
-  const navigation = useNavigation<CalendarTrackerNavigationProp>();
+  type AddMealTrackerNavigationProp = StackNavigationProp<RootStackParamList, 'addMeals'>;
+  const navigation = useNavigation<AddMealTrackerNavigationProp>();
 
-  const [eventData, setEventData] = useState({
+  const initialData = {
     user_id: 1,
     title: '',
     event_date: new Date(),
     event_time: new Date(),
-  });
-
-  const handleChange = (name: string, value: any) => {
-    setEventData({ ...eventData, [name]: value });
   };
 
-  const handleSave = async () => {
-    const formattedData = {
-      ...eventData,
-      event_date: eventData.event_date.toISOString().split('T')[0],
-      event_time: eventData.event_time.toTimeString().split(' ')[0],
-    };
+  const fields = [
+    { name: 'title', label: 'Title', type: 'text' },
+    { name: 'event_date', label: 'Date', type: 'date' },
+    { name: 'event_time', label: 'Time', type: 'time' },
+  ];
 
+  const handleSave = async (saveData: any) => {
     try {
-      const response = await axios.post(IPAddr + '/add_meal_events', formattedData);
+      const response = await axios.post(IPAddr + '/add_meal_events', saveData);
       console.log('Event saved successfully:', response.data);
     } catch (error) {
       console.error('Error saving event:', error);
@@ -42,28 +34,10 @@ export default function AddMeals() {
     navigation.navigate('mealTracker')
   };
 
-  const handleDateChange = (event: any, selectedDate: any) => {
-    if (selectedDate) {
-      handleChange('event_date', selectedDate);
-    }
-  };
 
   const handleCancel = (() => {
     navigation.navigate('mealTracker')
-})
-
-  const initialData = {
-    user_id: 1,
-    title: '',
-    event_date: new Date(),
-    event_time: new Date(),
-  };
- 
-  const fields = [
-    { name: 'title', label: 'Title', type: 'text' },
-    { name: 'event_date', label: 'Date', type: 'date' },
-    { name: 'event_time', label: 'Time', type: 'time' },
-  ];
+  })
 
   return (
     <GenericAddPageForm
@@ -76,4 +50,3 @@ export default function AddMeals() {
   );
 };
 
-  
\ No newline at end of file
diff --git a/app/finance.tsx b/app/finance.tsx
index 21aeda4..9b4a924 100644
--- a/app/finance.tsx
+++ b/app/finance.tsx
@@ -1,26 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, FlatList, TouchableOpacity } from 'react-native';
-import BouncyCheckbox from "react-native-bouncy-checkbox";
-import { Calendar } from 'react-native-calendars';
-import { styles } from './styles';
 import { IPAddr } from './constants';
-import { Ionicons } from "@expo/vector-icons";
-import { RootStackParamList, Task } from '../components/Types';
-import { useNavigation } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
+import { Task } from '../components/Types';
 import axios from 'axios';
-
-
+import GenericMainPageForm from './mainPageTemplate';
 
 export default function FinanceTracker() {
-  const [selectedDate, setSelectedDate] = useState('');
   const [tasks, setTasks] = useState<Task[]>([]);
 
-  type FinanceTrackerNavigationProp = StackNavigationProp<RootStackParamList, 'calendarEvents'>;
-  const navigation = useNavigation<FinanceTrackerNavigationProp>();  
-
-  useEffect(() => {
-    axios.get(IPAddr + '/get_finance_events/1') 
+  const fetchEvents = async () => {
+    axios.get(IPAddr + '/get_finance_events/1')
       .then(response => {
         const events = response.data.map((event: any) => ({
           id: event.id.toString(),
@@ -31,71 +19,17 @@ export default function FinanceTracker() {
         setTasks(events);
       })
       .catch(error => console.error('Error fetching events:', error));
-  }, []); 
-
-  const handleDayPress = (day: { dateString: React.SetStateAction<string>; }) => {
-    setSelectedDate(day.dateString);
-  };
+  }
 
-  const renderTask = ({ item }: { item: Task }) => (
-    <View style={styles.taskItem}>
-      <Text style={styles.bullet}>
-        <View style={styles.taskicon}>
-          <Ionicons name={item.icon} size={30} color={'#000'} />
-        </View>
-      </Text>
-      <Text style={styles.taskText}>{item.title}</Text>
-      <View>
-        <BouncyCheckbox
-          fillColor="#65558F"
-          iconStyle={{ borderRadius: 0 }}
-          innerIconStyle={{ borderRadius: 0, borderWidth: 2 }}
-          onPress={(isChecked: boolean) => { item.done = isChecked; }} />
-      </View>
-    </View>
-  );
+  useEffect(() => {
+    fetchEvents();
+  }, []);
 
   return (
-    <View style={styles.container}>
-      <View>
-        <Text style={styles.headerText}>Finance Events</Text>
-        <Text style={styles.sectionHeader}>Upcoming Events</Text>
-      </View>
-
-      <FlatList style={styles.flatList}
-        data={tasks}
-        renderItem={renderTask}
-        keyExtractor={(item) => item.id}
-      />
-      <View style={{ height: 50 }}>
-        <Text style={styles.sectionHeader}>Title</Text>
-      </View>
-
-      <Calendar
-        onDayPress={handleDayPress}
-        markedDates={{
-          [selectedDate]: {
-            selected: true,
-            marked: true,
-            selectedColor: '#9b59b6',
-          },
-        }}
-        theme={{
-          selectedDayBackgroundColor: '#65558F',
-          todayTextColor: '#00adf5',
-          arrowColor: '#9b59b6',
-        }}
-      />
-
-      {/* Button to navigate to addCalendarEvents */}
-      <TouchableOpacity style={styles.fixedButton}
-        onPress={() => navigation.navigate('addFinanceEvents')}
-        hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}>
-        <View style={styles.icon}>
-          <Ionicons name="add-outline" size={40} color={'#eee'} />
-          <Text style={styles.newText}>New</Text>
-        </View>
-      </TouchableOpacity>
-    </View>
-  );
+    <GenericMainPageForm
+      title='Finance Tracker'
+      header='Upcoming Events'
+      nextPage='addFinanceEvents'
+      tasks={tasks}
+    />);
 }
diff --git a/app/healthTracker.tsx b/app/healthTracker.tsx
index 6fd09d3..ec40057 100644
--- a/app/healthTracker.tsx
+++ b/app/healthTracker.tsx
@@ -1,39 +1,24 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, FlatList, TouchableOpacity } from 'react-native';
-import BouncyCheckbox from "react-native-bouncy-checkbox";
-import { Calendar } from 'react-native-calendars';
-import { styles } from './styles';
-import { Ionicons } from "@expo/vector-icons";
-import { RootStackParamList, Task } from '../components/Types'
+import { Task } from '../components/Types'
 import { IPAddr } from './constants';
-import { StackNavigationProp } from '@react-navigation/stack';
-import { useNavigation } from '@react-navigation/native';
+import axios from 'axios';
 import GenericMainPageForm from './mainPageTemplate';
 
 export default function HealthTracker() {
-  type HealthNavProp = StackNavigationProp<RootStackParamList, 'addMeals'>;
-  const navigation = useNavigation<HealthNavProp>();
-
-
-  const [selectedDate, setSelectedDate] = useState('');
   const [tasks, setTasks] = useState<Task[]>([]);
-  
-  const fetchEvents = async () => {
-    try {
-      const response = await fetch(IPAddr + '/get_health_events/1');
-      const data = await response.json();
 
-      const events = data.map((event: any) => ({
-        id: event.id.toString(),
-        title: `${event.title} at ${event.event_time}`,
-        done: false,
-        icon: 'calendar-outline',
-      }));
-
-      setTasks(events);
-    } catch (error) {
-      console.error('Error fetching events:', error);
-    }
+  const fetchEvents = async () => {
+    axios.get(IPAddr + '/get_health_events/1')
+      .then(response => {
+        const events = response.data.map((event: any) => ({
+          id: event.id.toString(),
+          title: `${event.title} at ${event.event_time}`,
+          done: false,
+          icon: 'calendat-outline',
+        }));
+        setTasks(events);
+      })
+      .catch(error => console.error('Error fetching events:', error));
   };
 
   useEffect(() => {
@@ -42,10 +27,10 @@ export default function HealthTracker() {
 
   return (
     <GenericMainPageForm
-            title='Health Tracker'
-            page='healthTracker'
-            nextPage='addHealthEvents'
-            tasks={tasks}
-        />
+      title='Health Tracker'
+      header='Upcoming Events'
+      nextPage='addHealthEvents'
+      tasks={tasks}
+    />
   );
 }
diff --git a/app/index.tsx b/app/index.tsx
index 549813d..1322593 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,70 +1,27 @@
 import React, { useState } from 'react';
-import { View, Text, FlatList, TouchableOpacity } from 'react-native';
-import { Calendar } from 'react-native-calendars';
-import { styles } from './styles';
 import { Task } from '../components/Types'
-import { Ionicons } from '@expo/vector-icons';
+// import { IPAddr } from './constants';
+// import axios from 'axios';
+import GenericMainPageForm from './mainPageTemplate';
 
 
 export default function TaskScreen() {
-
-  const [selectedDate, setSelectedDate] = useState('');
   const [tasks] = useState<Task[]>([
     { id: "1", title: "Meet with Saayeh at 5pm", done: true, icon: 'accessibility' },
     { id: "2", title: "Doctor's appointment at 7pm", done: true, icon: 'accessibility' },
     { id: "3", title: "AI HW due at 11:59pm", done: true, icon: 'accessibility' },
   ]);
 
-  const handleDayPress = (day: { dateString: React.SetStateAction<string>; }) => {
-    setSelectedDate(day.dateString);
-  };
-
-  const renderTask = ({ item }: { item: Task }) => (
-    <View style={styles.taskItem}>
-      <Text style={styles.bullet}>•</Text>
-      <Text style={styles.taskText}>{item.title}</Text>
-    </View>
-  );
+  // useEffect(() => {
+  //   fetchEvents();
+  // }, []);
 
   return (
-    <View style={styles.container}>
-      <View>
-        <Text style={styles.headerText}>Home</Text>
-        <Text style={styles.sectionHeader}>Welcome [user]</Text>
-      </View>
-
-      <FlatList style={styles.flatList}
-        data={tasks}
-        renderItem={renderTask}
-        keyExtractor={(item) => item.id}
-      />
-      <View style={{ height: 50 }}>
-        <Text style={styles.sectionHeader}>Title</Text>
-      </View>
-      <Calendar
-        onDayPress={handleDayPress}
-        markedDates={{
-          [selectedDate]: {
-            selected: true,
-            marked: true,
-            selectedColor: '#9b59b6',
-          },
-        }}
-        theme={{
-          selectedDayBackgroundColor: '#65558F',
-          todayTextColor: '#00adf5',
-          arrowColor: '#9b59b6',
-        }}
-      />
-      <TouchableOpacity style={styles.fixedButton}
-        onPress={() =>
-          console.log("pressed")}
-        hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}>
-        <View style={styles.icon}>
-          <Ionicons name="add-outline" size={40} color={'#eee'} />
-          <Text style={styles.newText}>New</Text>
-        </View>
-      </TouchableOpacity>
-    </View>
+    <GenericMainPageForm
+      title='Home'
+      header='Welcome [user]'
+      nextPage='index'
+      tasks={tasks}
+    />
   );
 }
diff --git a/app/mainPageTemplate.tsx b/app/mainPageTemplate.tsx
index 2072445..ab6d6a9 100644
--- a/app/mainPageTemplate.tsx
+++ b/app/mainPageTemplate.tsx
@@ -5,20 +5,20 @@ import { Calendar } from 'react-native-calendars';
 import { styles } from './styles';
 import { Ionicons } from "@expo/vector-icons";
 import { RootStackParamList, Task } from '../components/Types';
-import { useNavigation, useFocusEffect } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 
 interface FormProps {
     title: string;
-    page: keyof RootStackParamList;
+    header: string;
     nextPage: keyof RootStackParamList
     tasks: Array<Task>;
   }
 
-const GenericMainPageForm: React.FC<FormProps> = ({ title, page, nextPage, tasks }) => {
+const GenericMainPageForm: React.FC<FormProps> = ({ title, header, nextPage, tasks }) => {
     const [selectedDate, setSelectedDate] = useState('');
 
-    type Prop = StackNavigationProp<RootStackParamList, typeof page>;
+    type Prop = StackNavigationProp<RootStackParamList, keyof RootStackParamList>;
     const navigation = useNavigation<Prop>();  
 
     const handleDayPress = (day: { dateString: React.SetStateAction<string>; }) => {
@@ -47,7 +47,7 @@ const GenericMainPageForm: React.FC<FormProps> = ({ title, page, nextPage, tasks
         <View style={styles.container}>
             <View>
                 <Text style={styles.headerText}>{title}</Text>
-                <Text style={styles.sectionHeader}>Upcoming Events</Text>
+                <Text style={styles.sectionHeader}>{header}</Text>
             </View>
 
             <FlatList style={styles.flatList}
diff --git a/app/mealTracker.tsx b/app/mealTracker.tsx
index b1a8103..b95ec27 100644
--- a/app/mealTracker.tsx
+++ b/app/mealTracker.tsx
@@ -1,106 +1,35 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, FlatList, TouchableOpacity } from 'react-native';
-import { Calendar } from 'react-native-calendars';
-import { styles } from './styles';
-import { Ionicons } from "@expo/vector-icons";
-import { Task } from '../components/Types'
-import { IPAddr } from './constants'
-import BouncyCheckbox from "react-native-bouncy-checkbox";
-import { StackNavigationProp } from '@react-navigation/stack';
-import { useNavigation } from '@react-navigation/native';
-import { RootStackParamList } from '@/components/Types';
+import { IPAddr } from './constants';
+import { Task } from '../components/Types';
+import axios from 'axios';
+import GenericMainPageForm from './mainPageTemplate';
 
 export default function MealTracker() {
-  type CalendarTrackerNavigationProp = StackNavigationProp<RootStackParamList, 'addMeals'>;
-  const navigation = useNavigation<CalendarTrackerNavigationProp>();
-
-  const [selectedDate, setSelectedDate] = useState('');
   const [tasks, setTasks] = useState<Task[]>([]);
 
   const fetchEvents = async () => {
-    try {
-      const response = await fetch(IPAddr + '/get_meal_events/1');
-      const data = await response.json();
-
-      const events = data.map((event: any) => ({
-        id: event.id.toString(),
-        title: `${event.title} at ${event.event_time}`,
-        done: false,
-        icon: 'pizza-outline',
-      }));
-
-      setTasks(events);
-    } catch (error) {
-      console.error('Error fetching events:', error);
-    }
-  };
+    axios.get(IPAddr + '/get_meal_events/1')
+      .then(response => {
+        const events = response.data.map((event: any) => ({
+          id: event.id.toString(),
+          title: `${event.title} at ${event.event_time}`,
+          done: false,
+          icon: 'pizza-outline',
+        }));
+        setTasks(events);
+      })
+      .catch(error => console.error('Error fetching events:', error));
+  }
 
   useEffect(() => {
     fetchEvents();
   }, []);
 
-  const handleDayPress = (day: { dateString: React.SetStateAction<string>; }) => {
-    setSelectedDate(day.dateString);
-  };
-
-  const renderTask = ({ item }: { item: Task }) => (
-    <View style={styles.taskItem}>
-      <Text style={styles.bullet}>
-        <View style={styles.taskicon}>
-          <Ionicons name={item.icon} size={30} color={'#000'}></Ionicons>
-        </View>
-      </Text>
-      <Text style={styles.taskText}>{item.title}</Text>
-      <View>
-        <BouncyCheckbox
-          fillColor="#65558F"
-          iconStyle={{ borderRadius: 0 }}
-          innerIconStyle={{ borderRadius: 0, borderWidth: 2 }}
-          onPress={(isChecked: boolean) => { item.done = isChecked }} />
-      </View>
-    </View>
-  );
-
   return (
-    <View style={styles.container}>
-      <View>
-      <Text style={styles.headerText}>Meal Tracker</Text>
-        <Text style={styles.sectionHeader}>Upcoming Meals</Text>
-      </View>
-      <FlatList style={styles.flatList}
-        data={tasks}
-        renderItem={renderTask}
-        keyExtractor={(item) => item.id}
-      />
-      <View style={{ height: 50 }}>
-        <Text style={styles.sectionHeader}>Title</Text>
-      </View>
-      <Calendar
-        onDayPress={handleDayPress}
-        markedDates={{
-          [selectedDate]: {
-            selected: true,
-            marked: true,
-            selectedColor: '#9b59b6',
-          },
-        }}
-        theme={{
-          selectedDayBackgroundColor: '#9b59b6',
-          todayTextColor: '#00adf5',
-          arrowColor: '#9b59b6',
-        }}
-      />
-      <TouchableOpacity style={styles.fixedButton}
-        onPress={() =>
-          navigation.navigate('addMeals')}
-        hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}>
-        <View style={styles.icon}>
-          <Ionicons name="add-outline" size={40} color={'#eee'} />
-          <Text style={styles.newText}>New</Text>
-        </View>
-      </TouchableOpacity>
-
-
-    </View>
-  );
+    <GenericMainPageForm
+      title='Meal Tracker'
+      header='Upcoming Meals'
+      nextPage='addMeals'
+      tasks={tasks}
+    />);
 }