--- a
+++ b/mobile/ElderCare/HomeScreen.js
@@ -0,0 +1,261 @@
+import React, { useEffect, useState, useRef } from 'react';
+import {
+    StyleSheet,
+    Text,
+    View,
+    Image,
+    ScrollView,
+    TouchableOpacity,
+    Alert,
+} from 'react-native';
+
+export default function HomeScreen() {
+    const [eldersData, setEldersData] = useState([]);
+    const previousActivityRef = useRef({}); // Track previous activity states
+
+    useEffect(() => {
+        // Function to fetch elder data
+        const fetchEldersData = () => {
+            fetch('http://192.168.10.7:5000/get_elders') // Replace with your local IP
+                .then((response) => response.json())
+                .then((data) => {
+                    // Check for activity change to 'Shuffling'
+                    data.forEach((elder) => {
+                        const prevActivity =
+                            previousActivityRef.current[elder.id];
+                        if (
+                            prevActivity &&
+                            prevActivity !== 'Shuffling' &&
+                            elder.activity === 'Shuffling'
+                        ) {
+                            Alert.alert(
+                                'Alert',
+                                `${elder.name} has started shuffling.`
+                            );
+                        }
+                        // Update previous activity state
+                        previousActivityRef.current[elder.id] = elder.activity;
+                    });
+                    setEldersData(data);
+                })
+                .catch((error) =>
+                    console.error('Error fetching elders data:', error)
+                );
+        };
+
+        // Fetch data immediately
+        fetchEldersData();
+
+        // Set up interval to fetch data every second
+        const intervalId = setInterval(fetchEldersData, 1000); // 1000ms = 1s
+
+        // Clear interval on component unmount
+        return () => clearInterval(intervalId);
+    }, []);
+
+    const handleRemove = (id) => {
+        const apiUrl = `http://192.168.10.7:5000/remove_elder/${id}`;
+        fetch(apiUrl, { method: 'DELETE' })
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error('Failed to remove elder.');
+                }
+                return response.json();
+            })
+            .then((data) => {
+                if (data.message) {
+                    setEldersData(
+                        eldersData.filter((elder) => elder.id !== id)
+                    );
+                    Alert.alert('Success', data.message);
+                } else {
+                    Alert.alert('Error', 'Failed to remove elder.');
+                }
+            })
+            .catch((error) => {
+                Alert.alert('Server Error', error.message);
+            });
+    };
+
+    const renderActivityIcon = (activity) => {
+        switch (activity) {
+            case 'Walking':
+                return (
+                    <Image
+                        source={require('./assets/walking.png')}
+                        style={styles.icon}
+                    />
+                );
+            case 'Shuffling':
+                return (
+                    <Image
+                        source={require('./assets/shuffling.png')}
+                        style={styles.icon}
+                    />
+                );
+            case 'Stairs (asce)':
+                return (
+                    <Image
+                        source={require('./assets/stairs_ascending.png')}
+                        style={styles.icon}
+                    />
+                );
+            case 'Stairs (desc)':
+                return (
+                    <Image
+                        source={require('./assets/stairs_descending.png')}
+                        style={styles.icon}
+                    />
+                );
+            case 'Standing':
+                return (
+                    <Image
+                        source={require('./assets/standing.png')}
+                        style={styles.icon}
+                    />
+                );
+            case 'Sitting':
+                return (
+                    <Image
+                        source={require('./assets/sitting.png')}
+                        style={styles.icon}
+                    />
+                );
+            case 'Lying':
+                return (
+                    <Image
+                        source={require('./assets/lying.png')}
+                        style={styles.icon}
+                    />
+                );
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.header}>
+                <Image
+                    source={require('./assets/logo.png')} // Replace with your logo path
+                    style={styles.logo}
+                />
+                <Text style={styles.appName}>ElderCare+</Text>
+                <Text style={styles.slogan}>Caring for Every Step</Text>
+            </View>
+            <View style={styles.content}>
+                <ScrollView contentContainerStyle={styles.scrollContainer}>
+                    {eldersData.map((elder) => (
+                        <View
+                            key={elder.id}
+                            style={[
+                                styles.tile,
+                                elder.activity === 'Shuffling' &&
+                                    styles.shufflingTile,
+                            ]}>
+                            <Text style={styles.elderName}>{elder.name}</Text>
+                            {renderActivityIcon(elder.activity)}
+                            <View style={styles.activityContainer}>
+                                <Text style={styles.activityText}>
+                                    {elder.activity}
+                                </Text>
+                            </View>
+                            <TouchableOpacity
+                                style={styles.removeButton}
+                                onPress={() => handleRemove(elder.id)} // Handle removal
+                            >
+                                <Image
+                                    source={require('./assets/remove.png')}
+                                    style={styles.icon}
+                                />
+                            </TouchableOpacity>
+                        </View>
+                    ))}
+                </ScrollView>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#F2F4F9',
+    },
+    header: {
+        flex: 0.3, // Occupies 30% of the screen height
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#2D328C',
+        padding: 20,
+        borderBottomRightRadius: 30,
+        borderBottomLeftRadius: 30,
+    },
+    logo: {
+        width: 100,
+        height: 100,
+        resizeMode: 'contain',
+    },
+    appName: {
+        fontSize: 24,
+        color: '#fff',
+        fontWeight: 'bold',
+        marginTop: 10,
+    },
+    slogan: {
+        fontSize: 16,
+        color: '#fff',
+        marginTop: 5,
+    },
+    content: {
+        flex: 0.7,
+        padding: 20,
+    },
+    scrollContainer: {
+        flexGrow: 1,
+        justifyContent: 'flex-start',
+    },
+    tile: {
+        backgroundColor: '#fff',
+        borderRadius: 15,
+        padding: 20,
+        marginBottom: 20,
+        flexDirection: 'row',
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 5,
+        elevation: 5,
+        borderWidth: 1,
+        borderColor: '#ddd',
+    },
+    shufflingTile: {
+        borderColor: '#FF1B08', // Red color for shuffling
+    },
+    elderName: {
+        flex: 1,
+        fontSize: 16,
+        color: '#000',
+        marginRight: 10, // Add margin to the right of the elder name
+    },
+    activityContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '40%',
+        marginLeft: 5,
+    },
+    activityText: {
+        fontSize: 16,
+        color: '#555',
+        marginLeft: 5,
+    },
+    removeButton: {
+        padding: 5,
+    },
+    icon: {
+        width: 24,
+        height: 24,
+        resizeMode: 'contain',
+    },
+});