diff --git a/App.tsx b/App.tsx
index fb8dff9..49545e5 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,165 +1,165 @@
 import React, { useState } from 'react';
 import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  SafeAreaView,
+    View,
+    Text,
+    StyleSheet,
+    TouchableOpacity,
+    SafeAreaView,
 } from 'react-native';
 import Ionicons from '@react-native-vector-icons/ionicons';
 
 const PIN_LENGTH = 4;
 
 const App: React.FC = () => {
-  const [pin, setPin] = useState('');
+    const [pin, setPin] = useState('');
 
-  const handlePress = (value: string) => {
-    if (pin.length < PIN_LENGTH) {
-      setPin(pin + value);
-    }
-  };
+    const handlePress = (value: string) => {
+        if (pin.length < PIN_LENGTH) {
+            setPin(pin + value);
+        }
+    };
 
-  const handleDelete = () => {
-    setPin(pin.slice(0, -1));
-  };
+    const handleDelete = () => {
+        setPin(pin.slice(0, -1));
+    };
 
-  return (
-    <SafeAreaView style={styles.container}>
-      <Text style={styles.title}>Verify Identity</Text>
-      <Text style={styles.subtitle}>
-        Use PIN, Fingerprint or Face ID
-      </Text>
+    return (
+        <SafeAreaView style={styles.container}>
+            <Text style={styles.title}>Verify Identity</Text>
+            <Text style={styles.subtitle}>
+                Use PIN, Fingerprint or Face ID
+            </Text>
 
-      {/* PIN DOTS */}
-      <View style={styles.pinRow}>
-        {Array.from({ length: PIN_LENGTH }).map((_, i) => (
-          <View
-            key={i}
-            style={[
-              styles.pinDot,
-              pin.length > i && styles.pinDotFilled,
-            ]}
-          />
-        ))}
-      </View>
+            {/* PIN DOTS */}
+            <View style={styles.pinRow}>
+                {Array.from({ length: PIN_LENGTH }).map((_, i) => (
+                    <View
+                        key={i}
+                        style={[
+                            styles.pinDot,
+                            pin.length > i && styles.pinDotFilled,
+                        ]}
+                    />
+                ))}
+            </View>
 
-      {/* BIOMETRIC OPTIONS */}
-      <View style={styles.bioRow}>
-        <TouchableOpacity style={styles.bioBtn}>
-          <Ionicons name="finger-print" size={36} color="#2563EB" />
-          <Text style={styles.bioText}>Fingerprint</Text>
-        </TouchableOpacity>
+            {/* BIOMETRIC OPTIONS */}
+            <View style={styles.bioRow}>
+                <TouchableOpacity style={styles.bioBtn}>
+                    <Ionicons name="finger-print" size={36} color="#2563EB" />
+                    <Text style={styles.bioText}>Fingerprint</Text>
+                </TouchableOpacity>
 
-        <TouchableOpacity style={styles.bioBtn}>
-          <Ionicons name="happy-outline" size={36} color="#2563EB" />
-          <Text style={styles.bioText}>Face ID</Text>
-        </TouchableOpacity>
-      </View>
+                <TouchableOpacity style={styles.bioBtn}>
+                    <Ionicons name="happy-outline" size={36} color="#2563EB" />
+                    <Text style={styles.bioText}>Face ID</Text>
+                </TouchableOpacity>
+            </View>
 
-      {/* KEYPAD */}
-      <View style={styles.keypad}>
-        {[1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0, 'del'].map((item, index) => {
-          if (item === '') {
-            return <View key={index} style={styles.key} />;
-          }
+            {/* KEYPAD */}
+            <View style={styles.keypad}>
+                {[1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0, 'del'].map((item, index) => {
+                    if (item === '') {
+                        return <View key={index} style={styles.key} />;
+                    }
 
-          if (item === 'del') {
-            return (
-              <TouchableOpacity
-                key={index}
-                style={styles.key}
-                onPress={handleDelete}
-              >
-                <Ionicons
-                  name="backspace-outline"
-                  size={26}
-                  color="#333"
-                />
-              </TouchableOpacity>
-            );
-          }
+                    if (item === 'del') {
+                        return (
+                            <TouchableOpacity
+                                key={index}
+                                style={styles.key}
+                                onPress={handleDelete}
+                            >
+                                <Ionicons
+                                    name="backspace-outline"
+                                    size={26}
+                                    color="#333"
+                                />
+                            </TouchableOpacity>
+                        );
+                    }
 
-          return (
-            <TouchableOpacity
-              key={index}
-              style={styles.key}
-              onPress={() => handlePress(item.toString())}
-            >
-              <Text style={styles.keyText}>{item}</Text>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-    </SafeAreaView>
-  );
+                    return (
+                        <TouchableOpacity
+                            key={index}
+                            style={styles.key}
+                            onPress={() => handlePress(item.toString())}
+                        >
+                            <Text style={styles.keyText}>{item}</Text>
+                        </TouchableOpacity>
+                    );
+                })}
+            </View>
+        </SafeAreaView>
+    );
 
 };
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F8FAFF',
-    alignItems: 'center',
-    paddingHorizontal: 20,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: '700',
-    marginTop: 40,
-    color: '#111827',
-  },
-  subtitle: {
-    fontSize: 14,
-    color: '#6B7280',
-    marginTop: 6,
-  },
+    container: {
+        flex: 1,
+        backgroundColor: '#F8FAFF',
+        alignItems: 'center',
+        paddingHorizontal: 20,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: '700',
+        marginTop: 40,
+        color: '#111827',
+    },
+    subtitle: {
+        fontSize: 14,
+        color: '#6B7280',
+        marginTop: 6,
+    },
 
-  pinRow: {
-    flexDirection: 'row',
-    marginVertical: 28,
-  },
-  pinDot: {
-    width: 14,
-    height: 14,
-    borderRadius: 7,
-    borderWidth: 1.5,
-    borderColor: '#2563EB',
-    marginHorizontal: 8,
-  },
-  pinDotFilled: {
-    backgroundColor: '#2563EB',
-  },
+    pinRow: {
+        flexDirection: 'row',
+        marginVertical: 28,
+    },
+    pinDot: {
+        width: 14,
+        height: 14,
+        borderRadius: 7,
+        borderWidth: 1.5,
+        borderColor: '#2563EB',
+        marginHorizontal: 8,
+    },
+    pinDotFilled: {
+        backgroundColor: '#2563EB',
+    },
 
-  bioRow: {
-    flexDirection: 'row',
-    marginBottom: 30,
-  },
-  bioBtn: {
-    alignItems: 'center',
-    marginHorizontal: 30,
-  },
-  bioText: {
-    marginTop: 6,
-    fontSize: 12,
-    color: '#374151',
-  },
+    bioRow: {
+        flexDirection: 'row',
+        marginBottom: 30,
+    },
+    bioBtn: {
+        alignItems: 'center',
+        marginHorizontal: 30,
+    },
+    bioText: {
+        marginTop: 6,
+        fontSize: 12,
+        color: '#374151',
+    },
 
-  keypad: {
-    width: '80%',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-  },
-  key: {
-    width: '33%',
-    height: 70,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  keyText: {
-    fontSize: 26,
-    fontWeight: '500',
-    color: '#111827',
-  },
+    keypad: {
+        width: '80%',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+    },
+    key: {
+        width: '33%',
+        height: 70,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    keyText: {
+        fontSize: 26,
+        fontWeight: '500',
+        color: '#111827',
+    },
 });
 
 
diff --git a/src/screen/Home.tsx b/src/screen/Home.tsx
index 5c34d27..bc8de9a 100644
--- a/src/screen/Home.tsx
+++ b/src/screen/Home.tsx
@@ -2,138 +2,105 @@ import React, { useEffect, useState } from 'react';
 import {
     View,
     Text,
+    TextInput,
+    Button,
+    Alert,
     StyleSheet,
-    FlatList,
-    TouchableOpacity,
-    Image,
-    SafeAreaView,
-    ActivityIndicator,
 } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
-interface Item {
-    id: string;
-    title: string;
-    subtitle: string;
-    image: string;
-}
+const PIN_KEY = 'USER_PIN';
 
-const DATA: Item[] = [
-    {
-        id: '1',
-        title: 'Food Delivery',
-        subtitle: 'Fast & fresh food',
-        image: 'https://via.placeholder.com/150',
-    },
-    {
-        id: '2',
-        title: 'Groceries',
-        subtitle: 'Daily essentials',
-        image: 'https://via.placeholder.com/150',
-    },
-    {
-        id: '3',
-        title: 'Medicines',
-        subtitle: 'Health care items',
-        image: 'https://via.placeholder.com/150',
-    },
-];
-
-const Home: React.FC = () => {
-    const [loading, setLoading] = useState<boolean>(true);
-    const [list, setList] = useState<Item[]>([]);
+const App: React.FC = () => {
+    const [pin, setPin] = useState<string>('');
+    const [savedPin, setSavedPin] = useState<string | null>(null);
+    const [loggedIn, setLoggedIn] = useState<boolean>(false);
 
     useEffect(() => {
-        // Simulate API call
-        setTimeout(() => {
-            setList(DATA);
-            setLoading(false);
-        }, 1000);
+        loadPin();
     }, []);
 
-    const renderItem = ({ item }: { item: Item }) => (
-        <TouchableOpacity style={styles.card} activeOpacity={0.8}>
-            <Image source={{ uri: item.image }} style={styles.image} />
-            <View style={styles.textContainer}>
-                <Text style={styles.title}>{item.title}</Text>
-                <Text style={styles.subtitle}>{item.subtitle}</Text>
-            </View>
-        </TouchableOpacity>
-    );
+    const loadPin = async (): Promise<void> => {
+        const storedPin = await AsyncStorage.getItem(PIN_KEY);
+        setSavedPin(storedPin);
+    };
 
-    if (loading) {
+    const setUserPin = async (): Promise<void> => {
+        if (pin.length !== 4) {
+            Alert.alert('PIN must be 4 digits');
+            return;
+        }
+        await AsyncStorage.setItem(PIN_KEY, pin);
+        setSavedPin(pin);
+        setPin('');
+        Alert.alert('PIN set successfully');
+    };
+
+    const loginWithPin = (): void => {
+        if (pin === savedPin) {
+            setLoggedIn(true);
+            setPin('');
+        } else {
+            Alert.alert('Incorrect PIN');
+        }
+    };
+
+    const logout = (): void => {
+        setLoggedIn(false);
+    };
+
+    if (loggedIn) {
         return (
-            <View style={styles.loader}>
-                <ActivityIndicator size="large" color="#000" />
+            <View style={styles.container}>
+                <Text style={styles.title}>Hi Dude!</Text>
+                <Button title="Logout" onPress={logout} />
             </View>
         );
     }
 
     return (
-        <SafeAreaView style={styles.container}>
-            <Text style={styles.header}>Home</Text>
+        <View style={styles.container}>
+            <Text style={styles.title}>
+                {savedPin ? 'Enter PIN' : 'Set PIN'}
+            </Text>
 
-            <FlatList
-                data={list}
-                keyExtractor={(item) => item.id}
-                renderItem={renderItem}
-                contentContainerStyle={styles.list}
-                showsVerticalScrollIndicator={false}
+            <TextInput
+                style={styles.input}
+                keyboardType="numeric"
+                secureTextEntry
+                maxLength={4}
+                value={pin}
+                onChangeText={setPin}
+                placeholder="Enter 4-digit PIN"
             />
-        </SafeAreaView>
+
+            <Button
+                title={savedPin ? 'Login' : 'Save PIN'}
+                onPress={savedPin ? loginWithPin : setUserPin}
+            />
+        </View>
     );
 };
 
-export default Home;
+export default App;
 
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#F5F5F5',
-    },
-    header: {
-        fontSize: 22,
-        fontWeight: '700',
-        margin: 16,
-        color: '#111',
-    },
-    list: {
-        paddingHorizontal: 16,
-        paddingBottom: 20,
-    },
-    card: {
-        flexDirection: 'row',
-        backgroundColor: '#FFF',
-        borderRadius: 12,
-        marginBottom: 12,
-        padding: 12,
-        alignItems: 'center',
-        shadowColor: '#000',
-        shadowOpacity: 0.1,
-        shadowRadius: 6,
-        elevation: 3,
-    },
-    image: {
-        width: 60,
-        height: 60,
-        borderRadius: 10,
-        marginRight: 12,
-    },
-    textContainer: {
-        flex: 1,
+        justifyContent: 'center',
+        padding: 20,
     },
     title: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: '#000',
+        fontSize: 22,
+        marginBottom: 20,
+        textAlign: 'center',
     },
-    subtitle: {
-        fontSize: 13,
-        color: '#666',
-        marginTop: 4,
+    input: {
+        borderWidth: 1,
+        padding: 12,
+        marginBottom: 20,
+        borderRadius: 5,
+        fontSize: 18,
+        textAlign: 'center',
     },
-    loader: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-});
+});
\ No newline at end of file