Update code

App.tsx

@@ -13,6 +13,9 @@ import {
   FlatList,
   TouchableOpacity,
   AppState, 
+  SafeAreaView,
+  ScrollView,
+  StatusBar
 } from 'react-native';
 import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';
 // import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -289,60 +292,143 @@ const checkAllPermissions = useCallback(async () => {
     }
   };
 
-  return (
-    <View style={styles.container}>
-      <Text style={{
-        color:"#000000"
-      }}>Permissions Status</Text>
-      {(permissionsList ?? []).map(perm => (
-        <View key={perm.key} style={styles.row}>
-          <Text style={styles.text}>{perm.key}</Text>
-          <Text
-            style={[
-              styles.permVal,
-              { color: statuses[perm.key] === RESULTS.GRANTED ? 'green' : 'red' },
-            ]}>
-            {statuses[perm.key] || 'Checking...'}
+return (
+  <SafeAreaView style={styles.safe}>
+    <ScrollView contentContainerStyle={styles.scroll}>
+      {/* Header */}
+      <View style={styles.header}>
+        <Text style={styles.title}>Permissions</Text>
+        <View style={[styles.badge, allGranted ? styles.badgeOk : styles.badgeWarn]}>
+          <Text style={[styles.badgeText, allGranted ? styles.badgeTextOk : styles.badgeTextWarn]}>
+            {allGranted ? 'All Granted' : 'Action Required'}
           </Text>
         </View>
-      ))}
-      {Platform.OS === "android" && allGranted && <Text style={styles.granted}>All permissions granted ✅</Text>}
-        <Button title="Check Again" onPress={checkAllPermissions} />
-      {Platform.OS === "ios" && (
-        <>
-          <Button title="Reload Call Directory" onPress={reloadCallDirectory} />
-        </>
-      )}
-      <VIPListScreen />
-    </View>
-  );
+      </View>
+
+      {/* Permissions list */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Status</Text>
+        {(permissionsList ?? []).map(perm => {
+          const granted = statuses[perm.key] === RESULTS.GRANTED;
+          const label = statuses[perm.key] || 'Checking...';
+          return (
+            <View key={perm.key} style={styles.card}>
+              <View style={styles.cardLeft}>
+                <Text style={styles.cardTitle}>{perm.key}</Text>
+                <Text style={styles.cardSub}>
+                  {Platform.OS === 'android' ? 'Android permission' : 'iOS capability'}
+                </Text>
+              </View>
+              <View style={[styles.chip, granted ? styles.chipOk : styles.chipErr]}>
+                <Text style={[styles.chipText, granted ? styles.chipTextOk : styles.chipTextErr]}>
+                  {label.toUpperCase()}
+                </Text>
+              </View>
+            </View>
+          );
+        })}
+
+        {Platform.OS === 'android' && allGranted && (
+          <Text style={styles.hintOk}>All permissions granted ✅</Text>
+        )}
+
+        <View style={styles.btnRow}>
+          <TouchableOpacity onPress={checkAllPermissions} style={styles.btnPrimary}>
+            <Text style={styles.btnPrimaryText}>Check Again</Text>
+          </TouchableOpacity>
+
+          {Platform.OS === 'ios' && (
+            <TouchableOpacity onPress={reloadCallDirectory} style={styles.btnSecondary}>
+              <Text style={styles.btnSecondaryText}>Reload Call Directory</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        {!allGranted && (
+          <Text style={styles.helperText}>
+            Tip: Grant “Display over other apps” (Android) or enable Call Directory (iOS) to show caller info.
+          </Text>
+        )}
+      </View>
+
+      {/* Divider */}
+      <View style={styles.divider} />
+
+      {/* VIP section */}
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>VIP List</Text>
+        <VIPListScreen />
+      </View>
+    </ScrollView>
+  </SafeAreaView>
+);
+
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, padding: 16, backgroundColor: '#FFFFFF',paddingTop:50 },
-  header: { fontSize: 22, fontWeight: '600', textAlign: 'center', marginBottom: 12 },
-  subheader: { fontSize: 16, fontWeight: '600', marginTop: 18, marginBottom: 8 },
-
-  form: { marginBottom: 8, gap: 8 },
-  input: {
-    borderWidth: 1, borderColor: '#DDD', borderRadius: 8,
-    paddingHorizontal: 12, paddingVertical: 10, fontSize: 16,
+  safe: { flex: 1, backgroundColor: '#F7F7F9',paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 },
+  scroll: { padding: 16 },
+
+  header: {
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1, borderColor: '#ECECF1',
+    borderRadius: 12,
+    paddingVertical: 14, paddingHorizontal: 16,
+    flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
+    marginBottom: 16,
+    shadowColor: '#000', shadowOpacity: 0.04, shadowRadius: 6, shadowOffset: { width: 0, height: 2 },
+    elevation: 1,
   },
-
-  itemRow: {
+  title: { fontSize: 20, fontWeight: '700', color: '#111' },
+  badge: { paddingVertical: 6, paddingHorizontal: 12, borderRadius: 20, borderWidth: 1 },
+  badgeOk: { backgroundColor: '#E7F8EE', borderColor: '#BDEBD2' },
+  badgeWarn:{ backgroundColor: '#FFF4E6', borderColor: '#FFD8A8' },
+  badgeText: { fontSize: 12, fontWeight: '700' },
+  badgeTextOk: { color: '#0B8A47' },
+  badgeTextWarn: { color: '#B55800' },
+
+  section: { backgroundColor: '#FFFFFF', borderRadius: 12, padding: 14, borderWidth: 1, borderColor: '#ECECF1' },
+  sectionTitle: { fontSize: 16, fontWeight: '700', color: '#111', marginBottom: 10 },
+
+  card: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 10,
+    padding: 12,
     flexDirection: 'row', alignItems: 'center',
-    paddingVertical: 10, paddingHorizontal: 8,
+    borderWidth: 1, borderColor: '#EEE',
+    marginBottom: 10,
+  },
+  cardLeft: { flex: 1, paddingRight: 10 },
+  cardTitle: { fontSize: 15, fontWeight: '600', color: '#111' },
+  cardSub: { fontSize: 12, color: '#6B7280', marginTop: 2 },
+
+  chip: { paddingVertical: 6, paddingHorizontal: 10, borderRadius: 999, borderWidth: 1 },
+  chipOk:  { backgroundColor: '#ECFDF5', borderColor: '#A7F3D0' },
+  chipErr: { backgroundColor: '#FEF2F2', borderColor: '#FECACA' },
+  chipText: { fontSize: 12, fontWeight: '700', letterSpacing: 0.5 },
+  chipTextOk:  { color: '#065F46' },
+  chipTextErr: { color: '#991B1B' },
+
+  hintOk: { textAlign: 'center', color: '#0B8A47', marginTop: 6, fontWeight: '600' },
+
+  btnRow: { flexDirection: 'row', gap: 12, marginTop: 10 },
+  btnPrimary: {
+    flex: 1, backgroundColor: '#111827',
+    paddingVertical: 12, borderRadius: 10, alignItems: 'center',
+  },
+  btnPrimaryText: { color: '#FFFFFF', fontWeight: '700' },
+  btnSecondary: {
+    flex: 1, backgroundColor: '#FFFFFF',
+    borderWidth: 1, borderColor: '#D1D5DB',
+    paddingVertical: 12, borderRadius: 10, alignItems: 'center',
+  },
+  btnSecondaryText: { color: '#111827', fontWeight: '700' },
+
+  helperText: { marginTop: 8, fontSize: 12, color: '#6B7280', textAlign: 'center' },
+
+  divider: {
+    height: 16, // spacing between sections
   },
-  itemName: { fontSize: 16, fontWeight: '600', color: '#222' },
-  itemNumber: { fontSize: 14, color: '#555', marginTop: 2 },
-  deleteBtn: { paddingHorizontal: 12, paddingVertical: 6, backgroundColor: '#eee', borderRadius: 8 },
-  deleteTxt: { color: '#c62828', fontWeight: '600' },
-  separator: { height: 1, backgroundColor: '#F0F0F0', marginLeft: 8 },
-
-  permRow: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 },
-  permKey: { fontSize: 14, color: '#333' },
-  permVal: { fontSize: 14, fontWeight: '600' },
-  granted: { fontSize: 16, color: 'green', textAlign: 'center', marginTop: 8 },
-
-  empty: { color: '#777', fontStyle: 'italic', paddingHorizontal: 8, paddingVertical: 6 },
 });
+
+