diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index 41e3084..2b844c3 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -1,5 +1,5 @@
 import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { Link, Tabs } from 'expo-router';
+import { Tabs, usePathname, useRouter } from 'expo-router';
 
 // You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
 function TabBarIcon(props: { name: React.ComponentProps<typeof FontAwesome>['name']; color: string }) {
@@ -7,6 +7,9 @@ function TabBarIcon(props: { name: React.ComponentProps<typeof FontAwesome>['nam
 }
 
 export default function TabLayout() {
+    const pathname = usePathname();
+    const router = useRouter();
+
     return (
         <Tabs
             screenOptions={{
@@ -38,10 +41,10 @@ export default function TabLayout() {
                 }}
             />
             <Tabs.Screen
-                name="cellular"
+                name="profile"
                 options={{
-                    title: 'Cellular',
-                    tabBarIcon: ({ color }: { color: string }) => <TabBarIcon name="phone" color={color} />,
+                    title: 'Profile',
+                    tabBarIcon: ({ color }: { color: string }) => <TabBarIcon name="user" color={color} />,
                 }}
             />
             <Tabs.Screen
@@ -50,6 +53,20 @@ export default function TabLayout() {
                     title: 'Permissions',
                     tabBarIcon: ({ color }: { color: string }) => <TabBarIcon name="shield" color={color} />,
                 }}
+                listeners={{
+                    tabPress: (e: { preventDefault: () => void }) => {
+                        // If already on a permissions sub-page (not the index), navigate to permissions index
+                        const isOnPermissionsSubPage = pathname.startsWith('/permissions/') && pathname !== '/permissions';
+                        const isOnPermissionsIndex = pathname === '/permissions' || pathname === '/(tabs)/permissions';
+                        
+                        if (isOnPermissionsSubPage || isOnPermissionsIndex) {
+                            // Prevent default tab behavior
+                            e.preventDefault();
+                            // Navigate to permissions index, replacing the current route to reset the stack
+                            router.replace('/(tabs)/permissions');
+                        }
+                    },
+                }}
             />
         </Tabs>
     );
diff --git a/app/(tabs)/cellular.tsx b/app/(tabs)/cellular.tsx
deleted file mode 100644
index 0043c88..0000000
--- a/app/(tabs)/cellular.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { View, Text, StyleSheet } from 'react-native';
-import CellularDemo from '@/components/CellularDemo';
-import CustomHeader from '@/components/CustomHeader';
-
-export default function SimplePage() {
-    return (
-        <View style={{ flex: 1 }}>
-            <CustomHeader title="Cellular" />
-            <View style={styles.container}>
-                <Text style={styles.header}>My Header</Text>
-                <Text style={styles.text}>This is some example text to show a plain page component.</Text>
-                <CellularDemo />
-            </View>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: 16,
-        backgroundColor: '#121212',
-    },
-    header: {
-        fontSize: 24,
-        fontWeight: 'bold',
-        color: '#fff',
-        marginBottom: 20,
-    },
-    text: {
-        fontSize: 16,
-        color: '#ccc',
-        textAlign: 'center',
-    },
-});
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index 19d06b5..b381c00 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -1,21 +1,11 @@
-import { View, Text, Button, ActivityIndicator, StyleSheet, Image, ScrollView } from 'react-native';
-import MapView, { Marker } from 'react-native-maps';
+import { View, Button, StyleSheet, Image, ScrollView } from 'react-native';
 import { Link } from 'expo-router';
-import { useLocation } from '@/hooks/useLocation';
 import LogViewer from '@/components/LogViewer';
 import BatteryInfo from '@/components/BatteryInfo';
-import { triggerLocalSampleNotification } from '@/utils/notifications.utils';
-import { usePushNotifications } from '@/hooks/usePushNotifications';
 import CustomHeader from '@/components/CustomHeader';
-import { simulateAsyncGlobalError, triggerNativeTestException } from '@/services/errorHandler.service';
 import * as Sentry from '@sentry/react-native';
 
-export default function LocationComponent() {
-    const { fcmToken } = usePushNotifications();
-    const { location, address, error, loading, fetchLocation } = useLocation(fcmToken);
-
-    const textColor = '#ffffff';
-
+export default function HomeScreen() {
     return (
         <View style={{ flex: 1, backgroundColor: '#000' }}>
             <CustomHeader title="Home" showModalButton={true} />
@@ -28,64 +18,6 @@ export default function LocationComponent() {
                     {/* Battery information */}
                     <BatteryInfo />
 
-                    {/* Location / Map */}
-                    {loading ? (
-                        <ActivityIndicator size="large" color="#007AFF" />
-                    ) : error ? (
-                        <Text style={[styles.text, { color: textColor }]}>{error}</Text>
-                    ) : location && address ? (
-                        <>
-                            <Text style={[styles.text, { color: textColor }]}>
-                                Address: {address.name}, {address.city}, {address.region}, {address.country}
-                            </Text>
-                            <Text style={[styles.text, { color: textColor }]}>
-                                {location.coords.latitude} - {location.coords.longitude}
-                            </Text>
-
-                            <View style={styles.mapContainer}>
-                                <MapView
-                                    style={styles.map}
-                                    region={
-                                        location
-                                            ? {
-                                                  latitude: location.coords.latitude,
-                                                  longitude: location.coords.longitude,
-                                                  latitudeDelta: 0.01,
-                                                  longitudeDelta: 0.01,
-                                              }
-                                            : {
-                                                  latitude: 37.7749, // Default to San Francisco
-                                                  longitude: -122.4194,
-                                                  latitudeDelta: 0.05,
-                                                  longitudeDelta: 0.05,
-                                              }
-                                    }
-                                    showsUserLocation={true}
-                                    loadingEnabled={true}
-                                >
-                                    {location && (
-                                        <Marker
-                                            coordinate={{
-                                                latitude: location.coords.latitude,
-                                                longitude: location.coords.longitude,
-                                            }}
-                                            title="You are here"
-                                        />
-                                    )}
-                                </MapView>
-                            </View>
-                        </>
-                    ) : (
-                        <Text style={[styles.text, { color: textColor }]}>Waiting for location...</Text>
-                    )}
-
-                    <Button title="Get Location" onPress={fetchLocation} />
-                    <Button title="Trigger Sample Notification" onPress={triggerLocalSampleNotification} />
-                    <View style={{ height: 12 }} />
-                    <Button title="JS Crash Test (async)" onPress={() => simulateAsyncGlobalError('Manual JS async crash test')} />
-                    <View style={{ height: 8 }} />
-                    <Button color="#d9534f" title="Native Crash Test" onPress={triggerNativeTestException} />
-
                     {/* Link to Login page */}
                     <View style={{ marginTop: 12 }}>
                         <Link href="/login" asChild>
@@ -108,11 +40,6 @@ const styles = StyleSheet.create({
         width: '90%',
         alignItems: 'center',
     },
-    text: {
-        fontSize: 16,
-        marginVertical: 8,
-        textAlign: 'center',
-    },
     batteryContainer: {
         borderRadius: 8,
         padding: 10,
@@ -124,17 +51,6 @@ const styles = StyleSheet.create({
         fontSize: 16,
         marginBottom: 4,
     },
-    mapContainer: {
-        width: '100%',
-        height: 300,
-        marginTop: 16,
-        borderRadius: 10,
-        overflow: 'hidden',
-    },
-    map: {
-        width: '100%',
-        height: '100%',
-    },
 });
 
 const imgStyles = StyleSheet.create({
diff --git a/app/(tabs)/permissions/_layout.tsx b/app/(tabs)/permissions/_layout.tsx
new file mode 100644
index 0000000..51682eb
--- /dev/null
+++ b/app/(tabs)/permissions/_layout.tsx
@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+export default function PermissionsLayout() {
+    return (
+        <Stack
+            screenOptions={{
+                headerShown: false,
+            }}
+        />
+    );
+}
diff --git a/app/(tabs)/permissions/index.tsx b/app/(tabs)/permissions/index.tsx
index a58330f..f8695a7 100644
--- a/app/(tabs)/permissions/index.tsx
+++ b/app/(tabs)/permissions/index.tsx
@@ -1,19 +1,22 @@
-import { Link } from 'expo-router';
+import { useRouter } from 'expo-router';
 import React from 'react';
 import { View, Text, StyleSheet, ScrollView, Pressable } from 'react-native';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
 import CustomHeader from '@/components/CustomHeader';
 
-const routes = [
-    { href: '/permissions/location', title: 'Location (foreground/background)' },
-    { href: '/permissions/camera-mic', title: 'Camera & Microphone' },
-    { href: '/permissions/notifications', title: 'Notifications' },
-    { href: '/permissions/media-storage', title: 'Media Library' },
-    { href: '/permissions/storage', title: 'Storage & File Access' },
-    { href: '/permissions/telephony-sms', title: 'Telephony & SMS' },
-    { href: '/permissions/connectivity', title: 'Bluetooth & Nearby' },
+const routes: Array<{ href: string; title: string; icon: string; color: string }> = [
+    { href: '/permissions/location', title: 'Location (foreground/background)', icon: '📍', color: '#4CAF50' },
+    { href: '/permissions/camera-mic', title: 'Camera & Microphone', icon: '📷', color: '#E91E63' },
+    { href: '/permissions/notifications', title: 'Notifications', icon: '🔔', color: '#FF9800' },
+    { href: '/permissions/media-storage', title: 'Media Library', icon: '🖼️', color: '#9C27B0' },
+    { href: '/permissions/storage', title: 'Storage & File Access', icon: '📁', color: '#00BCD4' },
+    { href: '/permissions/telephony-sms', title: 'Telephony & SMS', icon: '📱', color: '#F44336' },
+    { href: '/permissions/connectivity', title: 'Bluetooth & Nearby', icon: '📶', color: '#3F51B5' },
 ];
 
 export default function PermissionsHub() {
+    const router = useRouter();
+
     return (
         <View style={styles.container}>
             <CustomHeader title="Permissions Hub" />
@@ -24,12 +27,14 @@ export default function PermissionsHub() {
                 </Text>
                 {routes.map((route) => (
                     <View style={styles.card} key={route.href}>
-                        <Text style={styles.cardTitle}>{route.title}</Text>
-                        <Link href={route.href} asChild>
-                            <Pressable style={styles.button}>
-                                <Text style={styles.buttonText}>Open demo</Text>
-                            </Pressable>
-                        </Link>
+                        <Text style={styles.cardTitle}>{route.icon} {route.title}</Text>
+                        <Pressable
+                            style={[styles.button, { backgroundColor: route.color }]}
+                            onPress={() => router.push(route.href as any)}
+                        >
+                            <Text style={styles.buttonText}>Open demo</Text>
+                            <FontAwesome name="chevron-right" size={12} color="#fff" style={styles.buttonArrow} />
+                        </Pressable>
                     </View>
                 ))}
             </ScrollView>
@@ -53,8 +58,12 @@ const styles = StyleSheet.create({
     button: {
         backgroundColor: '#1e88e5',
         paddingVertical: 10,
+        paddingHorizontal: 16,
         borderRadius: 8,
+        flexDirection: 'row',
         alignItems: 'center',
+        justifyContent: 'center',
     },
-    buttonText: { color: '#fff', fontWeight: '600' },
+    buttonText: { color: '#fff', fontWeight: '600', fontSize: 14 },
+    buttonArrow: { marginLeft: 8, marginTop: 2 },
 });
diff --git a/app/(tabs)/profile.tsx b/app/(tabs)/profile.tsx
new file mode 100644
index 0000000..f7a550a
--- /dev/null
+++ b/app/(tabs)/profile.tsx
@@ -0,0 +1,285 @@
+import { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, Image, ScrollView, Pressable } from 'react-native';
+import { router } from 'expo-router';
+import { useAuth } from '@/hooks/useAuth';
+import { GoogleSignin } from '@react-native-google-signin/google-signin';
+import { notify } from '@/services/notifier.service';
+import CustomHeader from '@/components/CustomHeader';
+
+export default function ProfileScreen() {
+    const { user, setUser } = useAuth();
+    const [isReady, setIsReady] = useState(false);
+
+    // Wait for component to mount before checking auth
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setIsReady(true);
+        }, 100);
+        return () => clearTimeout(timer);
+    }, []);
+
+    // Redirect to login if not authenticated (only after component is ready)
+    useEffect(() => {
+        if (isReady && !user) {
+            router.replace('/login');
+        }
+    }, [user, isReady]);
+
+    const signOut = async () => {
+        try {
+            console.log('🔄 Signing out from Google...');
+            await GoogleSignin.signOut();
+            console.log('✅ Signed out successfully');
+            setUser(null);
+            notify({
+                type: 'info',
+                title: 'Signed Out',
+                message: 'You have been successfully signed out',
+            });
+        } catch (e: any) {
+            console.error('❌ Sign out error:', e?.message || String(e));
+            notify({
+                type: 'error',
+                title: 'Sign-Out Error',
+                message: e?.message || 'Failed to sign out',
+            });
+        }
+    };
+
+    const revokeAccess = async () => {
+        try {
+            console.log('⚠️ Revoking Google access...');
+            await GoogleSignin.revokeAccess();
+            await GoogleSignin.signOut();
+            console.log('✅ Access revoked successfully');
+            setUser(null);
+            notify({
+                type: 'info',
+                title: 'Access Revoked',
+                message: 'Your Google access has been revoked',
+            });
+        } catch (e: any) {
+            console.error('❌ Revoke access error:', e?.message || String(e));
+            notify({
+                type: 'error',
+                title: 'Revoke Access Error',
+                message: e?.message || 'Failed to revoke access',
+            });
+        }
+    };
+
+    // Show loading state while checking auth or redirecting
+    if (!user) {
+        return (
+            <View style={{ flex: 1, backgroundColor: '#000' }}>
+                <CustomHeader title="Profile" />
+                <View style={styles.loadingContainer}>
+                    <Text style={styles.loadingText}>Please log in to view your profile</Text>
+                    <Pressable style={styles.loginButton} onPress={() => router.push('/login')}>
+                        <Text style={styles.loginButtonText}>Go to Login</Text>
+                    </Pressable>
+                </View>
+            </View>
+        );
+    }
+
+    return (
+        <View style={{ flex: 1, backgroundColor: '#000' }}>
+            <CustomHeader title="Profile" />
+            <ScrollView contentContainerStyle={styles.container}>
+                <Text style={styles.title}>Account Information</Text>
+
+                {user.user.photo && <Image source={{ uri: user.user.photo }} style={styles.profileImage} />}
+
+                <View style={styles.infoContainer}>
+                    <Text style={styles.label}>Name:</Text>
+                    <Text style={styles.value}>{user.user.name || 'N/A'}</Text>
+
+                    <Text style={styles.label}>Email:</Text>
+                    <Text style={styles.value}>{user.user.email}</Text>
+
+                    <Text style={styles.label}>Given Name:</Text>
+                    <Text style={styles.value}>{user.user.givenName || 'N/A'}</Text>
+
+                    <Text style={styles.label}>Family Name:</Text>
+                    <Text style={styles.value}>{user.user.familyName || 'N/A'}</Text>
+
+                    <Text style={styles.label}>User ID:</Text>
+                    <Text style={[styles.value, styles.mono]}>{user.user.id}</Text>
+
+                    <Text style={styles.label}>Status:</Text>
+                    <Text style={[styles.value, styles.statusBadge]}>{user.accessToken ? '✓ Authenticated' : '⚠️ Partial Auth'}</Text>
+                </View>
+
+                <View style={styles.tokenInfo}>
+                    <Text style={styles.tokenLabel}>ID Token:</Text>
+                    <Text style={styles.tokenValue} numberOfLines={1} ellipsizeMode="middle">
+                        {user.idToken.substring(0, 20)}...{user.idToken.substring(user.idToken.length - 10)}
+                    </Text>
+
+                    {user.accessToken && (
+                        <>
+                            <Text style={styles.tokenLabel}>Access Token:</Text>
+                            <Text style={styles.tokenValue} numberOfLines={1} ellipsizeMode="middle">
+                                {user.accessToken.substring(0, 20)}...{user.accessToken.substring(user.accessToken.length - 10)}
+                            </Text>
+                        </>
+                    )}
+
+                    {user.refreshToken && (
+                        <>
+                            <Text style={styles.tokenLabel}>Refresh Token:</Text>
+                            <Text style={styles.tokenValue} numberOfLines={1} ellipsizeMode="middle">
+                                {user.refreshToken.substring(0, 20)}...{user.refreshToken.substring(user.refreshToken.length - 10)}
+                            </Text>
+                        </>
+                    )}
+                </View>
+
+                <View style={styles.buttonContainer}>
+                    <Pressable style={styles.signOutButton} onPress={signOut}>
+                        <Text style={styles.signOutButtonText}>Sign Out</Text>
+                    </Pressable>
+
+                    <Pressable style={styles.revokeButton} onPress={revokeAccess}>
+                        <Text style={styles.revokeButtonText}>Revoke Access</Text>
+                    </Pressable>
+                </View>
+
+                <Pressable style={styles.debugButton} onPress={() => router.push('/debug' as any)}>
+                    <Text style={styles.debugButtonText}>Open Debug Panel</Text>
+                </Pressable>
+            </ScrollView>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    loadingContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#000',
+    },
+    loadingText: {
+        color: '#888',
+        fontSize: 16,
+        marginBottom: 16,
+    },
+    loginButton: {
+        backgroundColor: '#2196f3',
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+        borderRadius: 8,
+    },
+    loginButtonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    container: {
+        padding: 20,
+        alignItems: 'center',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: '600',
+        marginBottom: 20,
+        color: '#fff',
+    },
+    profileImage: {
+        width: 100,
+        height: 100,
+        borderRadius: 50,
+        marginBottom: 20,
+        borderWidth: 3,
+        borderColor: '#333',
+    },
+    infoContainer: {
+        width: '100%',
+        backgroundColor: '#111',
+        padding: 16,
+        borderRadius: 12,
+        marginBottom: 20,
+    },
+    label: {
+        fontWeight: '600',
+        marginBottom: 4,
+        color: '#888',
+        fontSize: 12,
+        textTransform: 'uppercase',
+    },
+    value: {
+        marginBottom: 16,
+        fontSize: 16,
+        color: '#fff',
+    },
+    mono: {
+        fontFamily: 'monospace',
+        fontSize: 12,
+    },
+    statusBadge: {
+        color: '#4caf50',
+        fontWeight: '600',
+    },
+    tokenInfo: {
+        width: '100%',
+        backgroundColor: '#1a2d1a',
+        padding: 16,
+        borderRadius: 12,
+        marginBottom: 20,
+    },
+    tokenLabel: {
+        fontWeight: '600',
+        marginBottom: 4,
+        color: '#66bb6a',
+        fontSize: 12,
+        textTransform: 'uppercase',
+    },
+    tokenValue: {
+        marginBottom: 16,
+        fontSize: 12,
+        fontFamily: 'monospace',
+        color: '#c8e6c9',
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        width: '100%',
+        marginBottom: 20,
+        gap: 12,
+    },
+    signOutButton: {
+        backgroundColor: '#2196f3',
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+        borderRadius: 8,
+    },
+    signOutButtonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    revokeButton: {
+        backgroundColor: '#f44336',
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+        borderRadius: 8,
+    },
+    revokeButtonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    debugButton: {
+        backgroundColor: '#333',
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+        borderRadius: 8,
+    },
+    debugButtonText: {
+        color: '#fff',
+        fontSize: 14,
+        fontWeight: '600',
+    },
+});
diff --git a/app/_layout.tsx b/app/_layout.tsx
index e7aeb56..3c64643 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -8,7 +8,7 @@ import 'react-native-reanimated';
 import { useFonts } from 'expo-font';
 import FontAwesome from '@expo/vector-icons/FontAwesome';
 import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { View, Button } from 'react-native';
+import { View } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 
 import { usePushNotifications, useNotificationObserver } from '@/hooks/usePushNotifications';
@@ -21,11 +21,6 @@ import { AuthProvider } from '@/providers/AuthProvider';
 import { SessionProvider } from '@/providers/SessionProvider';
 import { useAuth } from '@/hooks/useAuth';
 
-import { setJSExceptionHandler, getJSExceptionHandler, setNativeExceptionHandler } from 'react-native-exception-handler';
-
-// Global error handling is centralized in errorHandler.service
-// ✅ keep pathing consistent with your alias
-//import { setupGlobalErrorHandlers } from '@/services/errorHandler.service';
 import * as Sentry from '@sentry/react-native';
 
 Sentry.init({
@@ -52,41 +47,7 @@ SplashScreen.preventAutoHideAsync().catch(() => {
     /* no-op */
 });
 
-// Register global handlers at module load (earlier than any component effects)
-//setupGlobalErrorHandlers({ baseContext: { tags: { entry: 'root-layout' } } });
-
-const exceptionhandler = (error: any, isFatal: boolean) => {
-    console.log('ExceptionHandler called with error: ', error, 'isFatal: ', isFatal);
-    // your error handler function
-};
-
-const exceptionhandler2 = (exceptionString: string) => {
-    console.log('Native ExceptionHandler called with exception: ', exceptionString);
-    // your exception handler code here
-};
-
-const setNativeExceptionHandlerClick = () => {
-    setNativeExceptionHandler(exceptionhandler2,  false, false);
-    // - exceptionhandler is the exception handler function
-    // - forceAppQuit is an optional ANDROID specific parameter that defines
-    //    if the app should be force quit on error.  default value is true.
-    //    To see usecase check the common issues section.
-    // - executeDefaultHandler is an optional boolean (both IOS, ANDROID)
-    //    It executes previous exception handlers if set by some other module.
-    //    It will come handy when you use any other crash analytics module along with this one
-    //    Default value is set to false. Set to true if you are using other analytics modules.
-};
 
-const setJSExceptionHandlerClick = () => {
-    const originalConsoleError = console.error;
-    setJSExceptionHandler(exceptionhandler, true);
-};
-
-const getJSExceptionHandlerClick = () => {
-    // getJSExceptionHandler gives the currently set JS exception handler
-    const currentHandler = getJSExceptionHandler();
-    console.log("current JS Exception Handler: ", currentHandler.toString);
-};
 
 // --- Component Definition ---
 export default Sentry.wrap(function RootLayout() {
@@ -120,13 +81,6 @@ export default Sentry.wrap(function RootLayout() {
             <AuthProvider>
                 <NotificationBootstrap />
                 <RootLayoutNav />
-                 <View style={{ flexDirection: 'column', justifyContent: 'space-between' }}>
-                    <Button title="setJSExceptionHandler" onPress={setJSExceptionHandlerClick} />
-                    <Button title="getJSExceptionHandler" onPress={getJSExceptionHandlerClick} />
-                </View>
-                <View style={{ flexDirection: 'column', justifyContent: 'space-between' }}>
-                    <Button title="setNativeExceptionHandler" onPress={setNativeExceptionHandlerClick} />
-                </View>
             </AuthProvider>
         </SessionProvider>
     );
@@ -164,11 +118,13 @@ function RootLayoutNav() {
                             screenOptions={{
                                 contentStyle: { backgroundColor: '#000' },
                                 headerStyle: { backgroundColor: '#000' },
+                                headerShown: false,
                             }}
                         >
-                            {user ? <Stack.Screen name="(tabs)" options={{ headerShown: false }} /> : <Stack.Screen name="login" options={{ headerShown: false }} />}
-                            <Stack.Screen name="debug" options={{ title: 'Debug' }} />
-                            <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
+                            <Stack.Screen name="(tabs)" />
+                            <Stack.Screen name="login" />
+                            <Stack.Screen name="debug" options={{ headerShown: true, title: 'Debug' }} />
+                            <Stack.Screen name="modal" options={{ headerShown: true, presentation: 'modal' }} />
                         </Stack>
                     </View>
                 </ThemeProvider>
diff --git a/app/debug.tsx b/app/debug.tsx
index 076ca7f..2cd7ac2 100644
--- a/app/debug.tsx
+++ b/app/debug.tsx
@@ -2,6 +2,8 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { View, Text, StyleSheet, ScrollView, Pressable } from 'react-native';
 import { useSessionUser, useSession } from '@/providers/SessionProvider';
 import { BACKGROUND_TASK_IDENTIFIER, getBackgroundTaskRegistrationState, registerBackgroundFetch, unregisterBackgroundTask, triggerBackgroundTaskForTesting } from '@/utils/tasks.utils';
+import { setJSExceptionHandler, getJSExceptionHandler, setNativeExceptionHandler } from 'react-native-exception-handler';
+import { simulateAsyncGlobalError, triggerNativeTestException } from '@/services/errorHandler.service';
 
 interface BgState {
   status: number | null;
@@ -10,6 +12,30 @@ interface BgState {
   lastAction?: string;
 }
 
+// Exception handler callbacks 
+const jsExceptionHandler = (error: any, isFatal: boolean) => {
+  console.log('ExceptionHandler called with error: ', error, 'isFatal: ', isFatal);
+};
+
+const nativeExceptionHandler = (exceptionString: string) => {
+  console.log('Native ExceptionHandler called with exception: ', exceptionString);
+};
+
+const handleSetJSException = () => {
+  setJSExceptionHandler(jsExceptionHandler, true);
+  console.log('JS Exception Handler set!');
+};
+
+const handleGetJSException = () => {
+  const currentHandler = getJSExceptionHandler();
+  console.log('Current JS Exception Handler: ', currentHandler.toString());
+};
+
+const handleSetNativeException = () => {
+  setNativeExceptionHandler(nativeExceptionHandler, false, false);
+  console.log('Native Exception Handler set!');
+};
+
 export default function DebugScreen() {
   const { fcmToken, authReady, fcmReady, user, accessToken } = useSessionUser();
   const { session } = useSession();
@@ -67,10 +93,25 @@ export default function DebugScreen() {
         <Mono label="Registered" value={String(bg.isRegistered)} />
         <Mono label="Last Action" value={bg.lastAction || '—'} />
         <View style={styles.rowWrap}>
-          <Btn label="Refresh" onPress={refresh} disabled={bg.loading} />
-          <Btn label="Register" onPress={register} disabled={bg.loading || bg.isRegistered} />
-            <Btn label="Unregister" onPress={unregister} disabled={bg.loading || !bg.isRegistered} />
-          <Btn label="Trigger(dev)" onPress={trigger} />
+          <Btn label="🔄 Refresh" onPress={refresh} disabled={bg.loading} />
+          <Btn label="✅ Register" onPress={register} disabled={bg.loading || bg.isRegistered} color="#2e7d32" />
+          <Btn label="❌ Unregister" onPress={unregister} disabled={bg.loading || !bg.isRegistered} color="#c62828" />
+          <Btn label="⚡ Trigger(dev)" onPress={trigger} color="#f57c00" />
+        </View>
+      </Section>
+      <Section title="Exception Handlers">
+        <Text style={styles.infoText}>Configure global error handling for JS and native exceptions.</Text>
+        <View style={styles.rowWrap}>
+          <Btn label="🛡️ Set JS Handler" onPress={handleSetJSException} color="#1565c0" />
+          <Btn label="🔍 Get JS Handler" onPress={handleGetJSException} color="#6a1b9a" />
+          <Btn label="📱 Set Native Handler" onPress={handleSetNativeException} color="#00695c" />
+        </View>
+      </Section>
+      <Section title="Crash Tests">
+        <Text style={styles.infoText}>Test crash handling and error reporting to Sentry.</Text>
+        <View style={styles.rowWrap}>
+          <Btn label="💥 JS Crash (async)" onPress={() => simulateAsyncGlobalError('Manual JS async crash test')} color="#ef6c00" />
+          <Btn label="🔥 Native Crash" onPress={triggerNativeTestException} color="#d32f2f" />
         </View>
       </Section>
       <Text style={styles.footer}>Build Debug Utilities v1</Text>
@@ -96,11 +137,11 @@ function Mono({ label, value }: { label: string; value: string }) {
   );
 }
 
-function Btn({ label, onPress, disabled }: { label: string; onPress: () => void; disabled?: boolean }) {
+function Btn({ label, onPress, disabled, color }: { label: string; onPress: () => void; disabled?: boolean; color?: string }) {
   return (
     <Pressable
       onPress={disabled ? undefined : onPress}
-      style={[styles.btn, disabled && styles.btnDisabled]}
+      style={[styles.btn, color ? { backgroundColor: color } : null, disabled && styles.btnDisabled]}
       android_ripple={{ color: '#222' }}
     >
       <Text style={styles.btnText}>{label}</Text>
@@ -119,7 +160,8 @@ const styles = StyleSheet.create({
   kvValue: { color: '#fff', fontFamily: 'monospace', fontSize: 13, flexShrink: 1, textAlign: 'right' },
   code: { color: '#8f8', fontFamily: 'monospace', fontSize: 12 },
   rowWrap: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 8 },
-  btn: { backgroundColor: '#222', paddingVertical: 8, paddingHorizontal: 12, borderRadius: 6, marginRight: 8, marginBottom: 8 },
+  btn: { backgroundColor: '#333', paddingVertical: 10, paddingHorizontal: 14, borderRadius: 8, marginRight: 8, marginBottom: 8 },
+  infoText: { color: '#888', fontSize: 12, marginBottom: 8 },
   btnDisabled: { opacity: 0.4 },
   btnText: { color: '#fff', fontSize: 12, fontWeight: '600' },
   footer: { textAlign: 'center', color: '#444', fontSize: 12 },
diff --git a/app/login.tsx b/app/login.tsx
index 5704061..493b217 100644
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
-import { View, StyleSheet, Text, SafeAreaView, Image, ScrollView, Pressable } from 'react-native';
+import { View, StyleSheet, Text, Pressable } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { GoogleSignin, GoogleSigninButton } from '@react-native-google-signin/google-signin';
 import Constants from 'expo-constants';
 import { useAuth } from '@/hooks/useAuth';
@@ -414,74 +415,33 @@ function LoginScreenContent() {
         }
     };
 
-    // Show different UI based on authentication state
-    if (!user) {
+    // Redirect to profile if already logged in
+    useEffect(() => {
+        if (user) {
+            router.replace('/(tabs)/profile');
+        }
+    }, [user]);
+
+    // Show loading state while checking auth or redirecting
+    if (user) {
         return (
             <View style={styles.container}>
-                <Text style={styles.title}>Login</Text>
-                <View style={styles.row}>
-                    <GoogleSigninButton onPress={signIn} size={GoogleSigninButton.Size.Standard} color={GoogleSigninButton.Color.Dark} style={{ marginBottom: 16 }} />
-                    <Pressable style={styles.debugButton} onPress={() => router.push('/debug' as any)} hitSlop={8}>
-                        <Text style={styles.debugButtonText}>Debug</Text>
-                    </Pressable>
-                </View>
+                <Text style={styles.title}>Redirecting...</Text>
             </View>
         );
     }
 
-    // User is logged in
+    // Show login UI when not authenticated
     return (
-        <ScrollView contentContainerStyle={styles.container}>
-            <Text style={styles.title}>Account Information</Text>
-
-            {user.user.photo && <Image source={{ uri: user.user.photo }} style={styles.profileImage} />}
-
-            <View style={styles.infoContainer}>
-                <Text style={styles.label}>Name:</Text>
-                <Text style={styles.value}>{user.user.name || 'N/A'}</Text>
-
-                <Text style={styles.label}>Email:</Text>
-                <Text style={styles.value}>{user.user.email}</Text>
-
-                <Text style={styles.label}>Status:</Text>
-                <Text style={[styles.value, styles.statusBadge]}>{user.accessToken ? '✓ Authenticated' : '⚠️ Partial Auth'}</Text>
-            </View>
-
-            <View style={styles.tokenInfo}>
-                <Text style={styles.tokenLabel}>ID Token:</Text>
-                <Text style={styles.tokenValue} numberOfLines={1} ellipsizeMode="middle">
-                    {user.idToken.substring(0, 15)}...
-                </Text>
-
-                {user.accessToken && (
-                    <>
-                        <Text style={styles.tokenLabel}>Access Token:</Text>
-                        <Text style={styles.tokenValue} numberOfLines={1} ellipsizeMode="middle">
-                            {user.accessToken.substring(0, 15)}...
-                        </Text>
-                    </>
-                )}
-
-                {user.refreshToken && (
-                    <>
-                        <Text style={styles.tokenLabel}>Refresh Token:</Text>
-                        <Text style={styles.tokenValue} numberOfLines={1} ellipsizeMode="middle">
-                            {user.refreshToken.substring(0, 15)}...
-                        </Text>
-                    </>
-                )}
-            </View>
-
-            <View style={styles.buttonContainer}>
-                <Text style={styles.signOutButton} onPress={signOut}>
-                    Sign Out
-                </Text>
-
-                <Text style={styles.revokeButton} onPress={revokeAccess}>
-                    Revoke Access
-                </Text>
+        <View style={styles.container}>
+            <Text style={styles.title}>Login</Text>
+            <View style={styles.row}>
+                <GoogleSigninButton onPress={signIn} size={GoogleSigninButton.Size.Standard} color={GoogleSigninButton.Color.Dark} style={{ marginBottom: 16 }} />
+                <Pressable style={styles.debugButton} onPress={() => router.push('/debug' as any)} hitSlop={8}>
+                    <Text style={styles.debugButtonText}>Debug</Text>
+                </Pressable>
             </View>
-        </ScrollView>
+        </View>
     );
 }
 
@@ -489,70 +449,6 @@ const styles = StyleSheet.create({
     container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16, backgroundColor: '#000' },
     title: { fontSize: 24, fontWeight: '600', marginBottom: 16, color: '#fff' },
     row: { flexDirection: 'row', alignItems: 'center' },
-    profileImage: {
-        width: 100,
-        height: 100,
-        borderRadius: 50,
-        marginBottom: 20,
-    },
     debugButton: { marginLeft: 12, backgroundColor: '#333', paddingHorizontal: 14, paddingVertical: 10, borderRadius: 6, justifyContent: 'center' },
     debugButtonText: { color: '#fff', fontWeight: '600' },
-    infoContainer: {
-        width: '100%',
-        backgroundColor: '#111',
-        padding: 16,
-        borderRadius: 8,
-        marginBottom: 20,
-    },
-    label: {
-        fontWeight: '600',
-        marginBottom: 4,
-        color: '#ccc',
-    },
-    value: {
-        marginBottom: 16,
-        fontSize: 16,
-        color: '#fff',
-    },
-    statusBadge: {
-        color: '#4caf50',
-        fontWeight: '600',
-    },
-    tokenInfo: {
-        width: '100%',
-        backgroundColor: '#1a2d1a',
-        padding: 16,
-        borderRadius: 8,
-        marginBottom: 20,
-    },
-    tokenLabel: {
-        fontWeight: '600',
-        marginBottom: 4,
-        color: '#66bb6a',
-    },
-    tokenValue: {
-        marginBottom: 16,
-        fontSize: 14,
-        fontFamily: 'monospace',
-        color: '#c8e6c9',
-    },
-    buttonContainer: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        width: '100%',
-        marginTop: 8,
-    },
-    signOutButton: {
-        color: '#2196f3',
-        marginRight: 16,
-        textDecorationLine: 'underline',
-        fontSize: 16,
-        padding: 8,
-    },
-    revokeButton: {
-        color: '#f44336',
-        textDecorationLine: 'underline',
-        fontSize: 16,
-        padding: 8,
-    },
 });
diff --git a/app/modal.tsx b/app/modal.tsx
index 02d94eb..71def45 100644
--- a/app/modal.tsx
+++ b/app/modal.tsx
@@ -1,9 +1,13 @@
 import { StatusBar } from "expo-status-bar";
-import { Platform, StyleSheet } from "react-native";
+import { Platform, StyleSheet, TouchableOpacity } from "react-native";
 import { Text, View } from "@/components/Themed";
-import CameraComponent from "../components/Camera";
+import { router } from "expo-router";
 
 export default function ModalScreen() {
+  const goToCamera = () => {
+    router.push("/(tabs)/permissions/camera-mic");
+  };
+
   return (
     <View style={styles.container}>
       <Text style={styles.title}>Modal</Text>
@@ -12,7 +16,12 @@ export default function ModalScreen() {
         lightColor="#eee"
         darkColor="rgba(255,255,255,0.1)"
       />
-      <CameraComponent />
+      <Text style={styles.description}>
+        Camera functionality has been moved to the permissions page.
+      </Text>
+      <TouchableOpacity style={styles.button} onPress={goToCamera}>
+        <Text style={styles.buttonText}>Go to Camera</Text>
+      </TouchableOpacity>
 
       {/* Use a light status bar on iOS to account for the black space above the modal */}
       <StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
@@ -35,4 +44,22 @@ const styles = StyleSheet.create({
     height: 1,
     width: "80%",
   },
+  description: {
+    fontSize: 14,
+    textAlign: "center",
+    marginBottom: 20,
+    paddingHorizontal: 20,
+    color: "#888",
+  },
+  button: {
+    backgroundColor: "#0066cc",
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+  },
+  buttonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
 });
diff --git a/build/android/gradle/wrapper/gradle-wrapper.jar b/build/android/gradle/wrapper/gradle-wrapper.jar
new file mode 100644
index 0000000..1b33c55
Binary files /dev/null and b/build/android/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/build/android/gradle/wrapper/gradle-wrapper.properties b/build/android/gradle/wrapper/gradle-wrapper.properties
new file mode 100644
index 0000000..d4081da
--- /dev/null
+++ b/build/android/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
diff --git a/build/android/gradlew b/build/android/gradlew
new file mode 100755
index 0000000..7f94d3d
--- /dev/null
+++ b/build/android/gradlew
@@ -0,0 +1,251 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH="\\\"\\\""
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"
diff --git a/build/android/gradlew.bat b/build/android/gradlew.bat
new file mode 100644
index 0000000..5eed7ee
--- /dev/null
+++ b/build/android/gradlew.bat
@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
diff --git a/components/CustomHeader.tsx b/components/CustomHeader.tsx
index 308f7fd..5251911 100644
--- a/components/CustomHeader.tsx
+++ b/components/CustomHeader.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useRouter, Link } from 'expo-router';
 import FontAwesome from '@expo/vector-icons/FontAwesome';
 import Colors from '@/constants/Colors';
@@ -15,9 +16,10 @@ export default function CustomHeader({ title, showBackButton = false, showModalB
     const router = useRouter();
     const colorScheme = useColorScheme();
     const textColor = Colors[colorScheme ?? 'light'].text;
+    const insets = useSafeAreaInsets();
 
     return (
-        <View style={styles.container}>
+        <View style={[styles.container, { paddingTop: insets.top + 5 }]}>
             {showBackButton && (
                 <Pressable style={styles.backButton} onPress={() => router.back()}>
                     <FontAwesome name="arrow-left" size={22} color={textColor} />
@@ -39,7 +41,8 @@ export default function CustomHeader({ title, showBackButton = false, showModalB
 
 const styles = StyleSheet.create({
     container: {
-        height: 60,
+        height: 'auto',
+        minHeight: 60,
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
@@ -47,7 +50,7 @@ const styles = StyleSheet.create({
         backgroundColor: '#121212',
         borderBottomWidth: 1,
         borderBottomColor: '#333',
-        paddingTop: 5,
+        paddingBottom: 10,
         marginBottom: 5,
     },
     backButton: {
diff --git a/components/Location.tsx b/components/Location.tsx
deleted file mode 100644
index 1f7efd0..0000000
--- a/components/Location.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import {
-  View,
-  Text,
-  Button,
-  ActivityIndicator,
-  StyleSheet,
-} from "react-native";
-import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
-import { useLocation } from "../hooks/useLocation";
-import { useNavigation } from "@react-navigation/native";
-import { useSessionUser } from "@/providers/SessionProvider";
-
-export default function LocationComponent() {
-  const { fcmToken } = useSessionUser();
-  const { location, address, error, loading, fetchLocation } = useLocation(fcmToken);
-  const textColor = "#ffffff";
-  console.log("Navigation context:", useNavigation());
-
-  return (
-    <View style={styles.container}>
-      {loading ? (
-        <ActivityIndicator size="large" color="#007AFF" />
-      ) : error ? (
-        <Text style={[styles.text, { color: textColor }]}>{error}</Text>
-      ) : location && address ? (
-        <>
-          <Text style={[styles.text, { color: textColor }]}>
-            Address: {address.name}, {address.city}, {address.region},{" "}
-            {address.country}
-          </Text>
-          <Text style={[styles.text, { color: textColor }]}>
-            {location.coords.latitude} -{location.coords.longitude}
-          </Text>
-
-          {/* Native Map */}
-          <View style={styles.mapContainer}>
-            <MapView
-              //provider={PROVIDER_GOOGLE}
-              style={styles.map}
-              region={
-                location
-                  ? {
-                      latitude: location.coords.latitude,
-                      longitude: location.coords.longitude,
-                      latitudeDelta: 0.01,
-                      longitudeDelta: 0.01,
-                    }
-                  : {
-                      latitude: 37.7749, // Default to San Francisco
-                      longitude: -122.4194,
-                      latitudeDelta: 0.05,
-                      longitudeDelta: 0.05,
-                    }
-              }
-              showsUserLocation={true} // Show user's current location
-              loadingEnabled={true} // Show a loading indicator while the map loads
-            >
-              {location && (
-                <Marker
-                  coordinate={{
-                    latitude: location.coords.latitude,
-                    longitude: location.coords.longitude,
-                  }}
-                  title="You are here"
-                />
-              )}
-            </MapView>
-          </View>
-        </>
-      ) : (
-        <Text style={[styles.text, { color: textColor }]}>
-          Waiting for location...
-        </Text>
-      )}
-
-      <Button title="Get Location" onPress={fetchLocation} />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 16,
-  },
-  text: {
-    fontSize: 16,
-    marginBottom: 16,
-    textAlign: "center",
-  },
-  mapContainer: {
-    width: "100%",
-    height: 300, // Ensure a fixed height
-    marginTop: 16,
-    borderRadius: 10,
-    overflow: "hidden",
-  },
-  map: {
-    width: "100%", // Explicit width
-    height: "100%", // Explicit height
-  },
-});
diff --git a/components/LogViewer.tsx b/components/LogViewer.tsx
index 5a43a0c..4b8d586 100644
--- a/components/LogViewer.tsx
+++ b/components/LogViewer.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { ScrollView, Text, View, Button, StyleSheet } from 'react-native';
 import { ConsoleView } from 'react-native-console-view';
+import { timeAgo } from '@/utils/misc.utils';
 
 // Log level types and styling properties
 type LogLevel = 'log' | 'error' | 'warn';
@@ -23,15 +24,25 @@ interface LogEntry {
     level: LogLevel;
     message: string;
     timestamp: string;
+    createdAt: Date;
 }
 
 const LogViewer = () => {
     const [logs, setLogs] = useState<LogEntry[]>([]);
+    const [, setTick] = useState(0);
     const scrollViewRef = useRef<ScrollView>(null);
 
     // Flag to prevent recursive logging
     const isLoggingRef = useRef(false);
 
+    // Auto-refresh timeAgo values every 30 seconds
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setTick((t) => t + 1);
+        }, 30000);
+        return () => clearInterval(interval);
+    }, []);
+
     useEffect(() => {
         const originalLog = console.log;
         const originalError = console.error;
@@ -72,6 +83,7 @@ const LogViewer = () => {
                 }
 
                 // Defer state update to microtask to avoid setState during another component's render
+                const createdAt = new Date(now);
                 Promise.resolve().then(() => {
                     setLogs((prev) => {
                         // Add new log to the beginning (newest first)
@@ -80,6 +92,7 @@ const LogViewer = () => {
                                 level,
                                 message: messageStr,
                                 timestamp,
+                                createdAt,
                             },
                             ...prev,
                         ];
@@ -133,10 +146,15 @@ const LogViewer = () => {
             >
                 {logs.map((log, index) => (
                     <View key={index} style={styles.logItem}>
-                        <Text style={[styles.logHeader, { color: colorForLevel[log.level] }]}>
-                            {emojiForLevel[log.level]} [{log.timestamp}] [{log.level.toUpperCase()}]
+                        <View style={styles.logHeaderRow}>
+                            <Text style={[styles.logHeader, { color: colorForLevel[log.level] }]}>
+                                [{log.timestamp}] [{log.level.toUpperCase()}]
+                            </Text>
+                            <Text style={styles.timeAgo}>{timeAgo(log.createdAt)}</Text>
+                        </View>
+                        <Text style={styles.logMessage}>
+                            {emojiForLevel[log.level]} {log.message}
                         </Text>
-                        <Text style={styles.logMessage}>{log.message}</Text>
                         {index < logs.length - 1 && <View style={styles.separator} />}
                     </View>
                 ))}
@@ -156,37 +174,45 @@ const styles = StyleSheet.create({
         borderWidth: 2,
         borderColor: '#3498db',
         margin: 10,
-        height: 400, // Fixed height instead of flex: 1
-        overflow: 'hidden', // Prevent content from overflowing
+        height: 400,
+        minWidth: 320,
+        width: '100%',
+        overflow: 'hidden',
     },
     scrollView: {
         marginTop: 10,
-        height: 300, // Fixed height to ensure scrollability
-        flexGrow: 0, // Prevent expanding
+        height: 300,
+        flexGrow: 0,
     },
     scrollContent: {
         paddingBottom: 10,
     },
     logItem: {
-        marginBottom: 8,
         paddingHorizontal: 8,
-        paddingVertical: 4,
+        paddingVertical: 6,
+    },
+    logHeaderRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
     },
     logHeader: {
-        fontSize: 13,
+        fontSize: 12,
         fontWeight: 'bold',
-        marginBottom: 4,
+    },
+    timeAgo: {
+        fontSize: 10,
+        color: '#888',
     },
     logMessage: {
         color: 'white',
         fontSize: 12,
-        marginLeft: 8,
+        marginTop: 2,
     },
     separator: {
         borderBottomWidth: 1,
         borderBottomColor: '#444',
         marginTop: 8,
-        marginBottom: 8,
     },
     buttonContainer: {
         marginTop: 10,
diff --git a/components/permissions/CameraMicrophonePermissionDemo.tsx b/components/permissions/CameraMicrophonePermissionDemo.tsx
index d7aebf3..2ceb2e4 100644
--- a/components/permissions/CameraMicrophonePermissionDemo.tsx
+++ b/components/permissions/CameraMicrophonePermissionDemo.tsx
@@ -1,11 +1,26 @@
-import React, { useState } from 'react';
-import { View, Text, Button, StyleSheet, ScrollView } from 'react-native';
-import { Camera } from 'expo-camera';
+import React, { useState, useRef, useEffect } from 'react';
+import { View, Text, Button, StyleSheet, ScrollView, TouchableOpacity, Image, Dimensions } from 'react-native';
+import { Camera, CameraView, CameraType, FlashMode } from 'expo-camera';
+
+type CameraOption = {
+    type: CameraType;
+    label: string;
+};
 
 export default function CameraMicrophonePermissionDemo() {
     const [cameraStatus, setCameraStatus] = useState<string>('unknown');
     const [micStatus, setMicStatus] = useState<string>('unknown');
-    const [availableTypes, setAvailableTypes] = useState<string>('not queried');
+    const [availableCameras, setAvailableCameras] = useState<CameraOption[]>([]);
+    const [selectedCamera, setSelectedCamera] = useState<CameraType>('back');
+    const [isCameraReady, setIsCameraReady] = useState(false);
+    const [flashMode, setFlashMode] = useState<FlashMode>('off');
+    const [zoom, setZoom] = useState(0);
+    const [isRecording, setIsRecording] = useState(false);
+    const [photo, setPhoto] = useState<string | null>(null);
+    const [video, setVideo] = useState<string | null>(null);
+    const [showCamera, setShowCamera] = useState(false);
+    
+    const cameraRef = useRef<CameraView | null>(null);
 
     const requestPermissions = async () => {
         const camera = await Camera.requestCameraPermissionsAsync();
@@ -14,32 +29,413 @@ export default function CameraMicrophonePermissionDemo() {
         setMicStatus(mic.status);
 
         if (camera.status === 'granted') {
+            await queryAvailableCameras();
+            setShowCamera(true);
+        }
+    };
+
+    const queryAvailableCameras = async () => {
+        try {
             const types = await Camera.getAvailableCameraTypesAsync();
-            setAvailableTypes(types.join(', ') || 'none reported');
+            const cameraOptions: CameraOption[] = types.map((type) => ({
+                type: type as CameraType,
+                label: formatCameraLabel(type),
+            }));
+            setAvailableCameras(cameraOptions);
+            
+            // Set default camera to back if available, otherwise first available
+            if (types.includes('back')) {
+                setSelectedCamera('back');
+            } else if (types.length > 0) {
+                setSelectedCamera(types[0] as CameraType);
+            }
+        } catch (error) {
+            console.warn('Failed to get available cameras:', error);
+            // Fallback to common camera types
+            setAvailableCameras([
+                { type: 'back', label: 'Back Camera' },
+                { type: 'front', label: 'Front Camera' },
+            ]);
+        }
+    };
+
+    const formatCameraLabel = (type: string): string => {
+        switch (type) {
+            case 'back':
+                return 'Back Camera';
+            case 'front':
+                return 'Front Camera';
+            case 'external':
+                return 'External Camera';
+            default:
+                return type.charAt(0).toUpperCase() + type.slice(1) + ' Camera';
+        }
+    };
+
+    const handleCameraSelect = (cameraType: CameraType) => {
+        setSelectedCamera(cameraType);
+        setIsCameraReady(false);
+    };
+
+    const cycleFlashMode = () => {
+        const modes: FlashMode[] = ['off', 'on', 'auto'];
+        const currentIndex = modes.indexOf(flashMode);
+        const nextIndex = (currentIndex + 1) % modes.length;
+        setFlashMode(modes[nextIndex]);
+    };
+
+    const getFlashLabel = (): string => {
+        switch (flashMode) {
+            case 'off': return 'Off';
+            case 'on': return 'On';
+            case 'auto': return 'Auto';
+            default: return 'Unknown';
+        }
+    };
+
+    const adjustZoom = (value: number) => {
+        setZoom(Math.min(Math.max(zoom + value, 0), 1));
+    };
+
+    const takePhoto = async () => {
+        if (!cameraRef.current || !isCameraReady) return;
+
+        try {
+            const result = await cameraRef.current.takePictureAsync({
+                quality: 0.7,
+                skipProcessing: true,
+            });
+            if (result) {
+                setPhoto(result.uri);
+            }
+        } catch (error) {
+            console.warn('Failed to take photo:', error);
+        }
+    };
+
+    const startRecording = async () => {
+        if (!cameraRef.current || isRecording) return;
+
+        setIsRecording(true);
+        try {
+            const result = await cameraRef.current.recordAsync({
+                maxDuration: 300,
+            });
+            if (result) {
+                setVideo(result.uri);
+            }
+        } catch (error) {
+            console.warn('Failed to record video:', error);
         }
+        setIsRecording(false);
+    };
+
+    const stopRecording = () => {
+        if (!cameraRef.current || !isRecording) return;
+        cameraRef.current.stopRecording();
+    };
+
+    const handleCameraReady = () => {
+        setIsCameraReady(true);
+    };
+
+    const clearMedia = () => {
+        setPhoto(null);
+        setVideo(null);
     };
 
     return (
         <ScrollView style={styles.container} contentContainerStyle={styles.content}>
             <Text style={styles.title}>Camera & Microphone</Text>
             <Text style={styles.copy}>
-                Requests CAMERA and RECORD_AUDIO plus microphone access via expo-camera. Queries available camera types once granted.
+                Requests CAMERA and RECORD_AUDIO plus microphone access via expo-camera. Select from available cameras to preview.
             </Text>
-            <Button title="Request camera & mic permissions" onPress={requestPermissions} />
+            
+            {!showCamera && (
+                <Button title="Request camera & mic permissions" onPress={requestPermissions} />
+            )}
+            
             <View style={styles.statusBox}>
                 <Text style={styles.statusText}>Camera: {cameraStatus}</Text>
                 <Text style={styles.statusText}>Microphone: {micStatus}</Text>
-                <Text style={styles.statusText}>Available cameras: {availableTypes}</Text>
+                <Text style={styles.statusText}>
+                    Available cameras: {availableCameras.length > 0 
+                        ? availableCameras.map(c => c.label).join(', ') 
+                        : 'not queried'}
+                </Text>
             </View>
+
+            {/* Camera Selection */}
+            {showCamera && availableCameras.length > 0 && (
+                <View style={styles.cameraSelectionContainer}>
+                    <Text style={styles.sectionTitle}>Select Camera</Text>
+                    <View style={styles.cameraButtonsRow}>
+                        {availableCameras.map((camera) => (
+                            <TouchableOpacity
+                                key={camera.type}
+                                style={[
+                                    styles.cameraSelectButton,
+                                    selectedCamera === camera.type && styles.cameraSelectButtonActive,
+                                ]}
+                                onPress={() => handleCameraSelect(camera.type)}
+                            >
+                                <Text style={[
+                                    styles.cameraSelectText,
+                                    selectedCamera === camera.type && styles.cameraSelectTextActive,
+                                ]}>
+                                    {camera.label}
+                                </Text>
+                            </TouchableOpacity>
+                        ))}
+                    </View>
+                </View>
+            )}
+
+            {/* Live Camera View */}
+            {showCamera && cameraStatus === 'granted' && (
+                <View style={styles.cameraContainer}>
+                    <CameraView
+                        ref={cameraRef}
+                        style={styles.camera}
+                        facing={selectedCamera}
+                        flash={flashMode}
+                        zoom={zoom}
+                        onCameraReady={handleCameraReady}
+                    >
+                        <View style={styles.cameraOverlay}>
+                            <Text style={styles.cameraStatusText}>
+                                {isCameraReady ? `Using: ${formatCameraLabel(selectedCamera)}` : 'Initializing...'}
+                            </Text>
+                        </View>
+                    </CameraView>
+
+                    {/* Camera Controls */}
+                    <View style={styles.controlsContainer}>
+                        {/* Flash Control */}
+                        <TouchableOpacity style={styles.controlButton} onPress={cycleFlashMode}>
+                            <Text style={styles.controlText}>Flash: {getFlashLabel()}</Text>
+                        </TouchableOpacity>
+
+                        {/* Zoom Controls */}
+                        <View style={styles.zoomControls}>
+                            <TouchableOpacity
+                                style={styles.controlButton}
+                                onPress={() => adjustZoom(-0.1)}
+                            >
+                                <Text style={styles.controlText}>- Zoom</Text>
+                            </TouchableOpacity>
+                            <Text style={styles.zoomText}>{Math.round(zoom * 100)}%</Text>
+                            <TouchableOpacity
+                                style={styles.controlButton}
+                                onPress={() => adjustZoom(0.1)}
+                            >
+                                <Text style={styles.controlText}>+ Zoom</Text>
+                            </TouchableOpacity>
+                        </View>
+
+                        {/* Capture Controls */}
+                        <View style={styles.captureRow}>
+                            <TouchableOpacity
+                                style={[styles.captureButton, isRecording && styles.recording]}
+                                onPress={isRecording ? stopRecording : startRecording}
+                                disabled={!isCameraReady}
+                            >
+                                <Text style={styles.captureText}>{isRecording ? 'Stop' : 'Record'}</Text>
+                            </TouchableOpacity>
+
+                            <TouchableOpacity 
+                                style={styles.captureButton} 
+                                onPress={takePhoto}
+                                disabled={!isCameraReady}
+                            >
+                                <Text style={styles.captureText}>Photo</Text>
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+
+                    {/* Preview Section */}
+                    {(photo || video) && (
+                        <View style={styles.previewContainer}>
+                            <View style={styles.previewHeader}>
+                                <Text style={styles.sectionTitle}>Captured Media</Text>
+                                <TouchableOpacity onPress={clearMedia}>
+                                    <Text style={styles.clearText}>Clear</Text>
+                                </TouchableOpacity>
+                            </View>
+                            {photo && (
+                                <Image source={{ uri: photo }} style={styles.preview} />
+                            )}
+                            {video && (
+                                <Text style={styles.videoText}>Video recorded: {video}</Text>
+                            )}
+                        </View>
+                    )}
+                </View>
+            )}
         </ScrollView>
     );
 }
 
+const { width } = Dimensions.get('window');
+const cameraHeight = width * 0.75; // 4:3 aspect ratio
+
 const styles = StyleSheet.create({
-    container: { flex: 1, backgroundColor: '#000' },
-    content: { padding: 16, gap: 12 },
-    title: { color: '#fff', fontSize: 18, fontWeight: '700' },
-    copy: { color: '#ccc', fontSize: 14, lineHeight: 20 },
-    statusBox: { backgroundColor: '#111', padding: 12, borderRadius: 8, marginTop: 12 },
-    statusText: { color: '#fff', marginBottom: 4 },
+    container: { 
+        flex: 1, 
+        backgroundColor: '#000' 
+    },
+    content: { 
+        padding: 16, 
+        gap: 12,
+        paddingBottom: 40,
+    },
+    title: { 
+        color: '#fff', 
+        fontSize: 18, 
+        fontWeight: '700' 
+    },
+    copy: { 
+        color: '#ccc', 
+        fontSize: 14, 
+        lineHeight: 20 
+    },
+    statusBox: { 
+        backgroundColor: '#111', 
+        padding: 12, 
+        borderRadius: 8, 
+        marginTop: 12 
+    },
+    statusText: { 
+        color: '#fff', 
+        marginBottom: 4 
+    },
+    sectionTitle: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+        marginBottom: 8,
+    },
+    cameraSelectionContainer: {
+        marginTop: 16,
+    },
+    cameraButtonsRow: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+    },
+    cameraSelectButton: {
+        backgroundColor: '#222',
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#444',
+    },
+    cameraSelectButtonActive: {
+        backgroundColor: '#0066cc',
+        borderColor: '#0088ff',
+    },
+    cameraSelectText: {
+        color: '#aaa',
+        fontSize: 14,
+    },
+    cameraSelectTextActive: {
+        color: '#fff',
+        fontWeight: '600',
+    },
+    cameraContainer: {
+        marginTop: 16,
+        borderRadius: 12,
+        overflow: 'hidden',
+        backgroundColor: '#111',
+    },
+    camera: {
+        width: '100%',
+        height: cameraHeight,
+    },
+    cameraOverlay: {
+        position: 'absolute',
+        top: 10,
+        left: 10,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 4,
+    },
+    cameraStatusText: {
+        color: '#fff',
+        fontSize: 12,
+    },
+    controlsContainer: {
+        padding: 12,
+        gap: 12,
+    },
+    controlButton: {
+        backgroundColor: 'rgba(255,255,255,0.15)',
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        borderRadius: 6,
+    },
+    controlText: {
+        color: '#fff',
+        fontSize: 14,
+    },
+    zoomControls: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 16,
+    },
+    zoomText: {
+        color: '#fff',
+        fontSize: 14,
+        minWidth: 50,
+        textAlign: 'center',
+    },
+    captureRow: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: 20,
+        marginTop: 8,
+    },
+    captureButton: {
+        backgroundColor: 'rgba(255,255,255,0.2)',
+        paddingVertical: 16,
+        paddingHorizontal: 24,
+        borderRadius: 40,
+        minWidth: 100,
+        alignItems: 'center',
+    },
+    captureText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    recording: {
+        backgroundColor: 'rgba(255,0,0,0.5)',
+    },
+    previewContainer: {
+        padding: 12,
+        borderTopWidth: 1,
+        borderTopColor: '#333',
+    },
+    previewHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 12,
+    },
+    clearText: {
+        color: '#0088ff',
+        fontSize: 14,
+    },
+    preview: {
+        width: '100%',
+        height: 200,
+        borderRadius: 8,
+    },
+    videoText: {
+        color: '#ccc',
+        fontSize: 14,
+    },
 });
diff --git a/components/permissions/LocationPermissionDemo.tsx b/components/permissions/LocationPermissionDemo.tsx
index 966b7f8..24e97ed 100644
--- a/components/permissions/LocationPermissionDemo.tsx
+++ b/components/permissions/LocationPermissionDemo.tsx
@@ -1,17 +1,20 @@
 import React, { useState } from 'react';
-import { View, Text, Button, StyleSheet, ScrollView, Platform } from 'react-native';
+ import { View, Text, Button, StyleSheet, ScrollView, Platform, ActivityIndicator } from 'react-native';
+import MapView, { Marker } from 'react-native-maps';
 import * as Location from 'expo-location';
+import { useLocation } from '@/hooks/useLocation';
+import { usePushNotifications } from '@/hooks/usePushNotifications';
 
 export default function LocationPermissionDemo() {
-    const [status, setStatus] = useState<Location.PermissionStatus | null>(null);
+    const [fgStatus, setFgStatus] = useState<Location.PermissionStatus | null>(null);
     const [backgroundStatus, setBackgroundStatus] = useState<Location.PermissionStatus | null>(null);
-    const [coords, setCoords] = useState<string>('');
-    const [error, setError] = useState<string>('');
+
+    const { fcmToken } = usePushNotifications();
+    const { location, address, error, loading, fetchLocation } = useLocation(fcmToken);
 
     const requestPermissions = async () => {
-        setError('');
         const fg = await Location.requestForegroundPermissionsAsync();
-        setStatus(fg.status);
+        setFgStatus(fg.status);
 
         if (Platform.OS === 'android') {
             const bg = await Location.requestBackgroundPermissionsAsync();
@@ -19,13 +22,8 @@ export default function LocationPermissionDemo() {
         }
     };
 
-    const fetchLocation = async () => {
-        try {
-            const loc = await Location.getCurrentPositionAsync({});
-            setCoords(`${loc.coords.latitude.toFixed(5)}, ${loc.coords.longitude.toFixed(5)}`);
-        } catch (e) {
-            setError(e instanceof Error ? e.message : String(e));
-        }
+    const handleFetchLocation = () => {
+        fetchLocation(fcmToken);
     };
 
     return (
@@ -38,14 +36,55 @@ export default function LocationPermissionDemo() {
 
             <Button title="Request location permissions" onPress={requestPermissions} />
             <View style={styles.gap} />
-            <Button title="Fetch current location" onPress={fetchLocation} />
+            <Button title="Fetch current location" onPress={handleFetchLocation} />
 
+            {/* Permission Status */}
             <View style={styles.statusBox}>
-                <Text style={styles.statusText}>Foreground: {status ?? 'unknown'}</Text>
+                <Text style={styles.statusText}>Foreground: {fgStatus ?? 'unknown'}</Text>
                 {Platform.OS === 'android' && <Text style={styles.statusText}>Background: {backgroundStatus ?? 'unknown'}</Text>}
-                {coords ? <Text style={styles.statusText}>Last fix: {coords}</Text> : null}
-                {error ? <Text style={[styles.statusText, styles.error]}>{error}</Text> : null}
             </View>
+
+            {/* Location Data & Map */}
+            {loading ? (
+                <ActivityIndicator size="large" color="#007AFF" style={styles.loader} />
+            ) : error ? (
+                <Text style={[styles.statusText, styles.error]}>{error}</Text>
+            ) : location && address ? (
+                <>
+                    <View style={styles.statusBox}>
+                        <Text style={styles.statusText}>
+                            Address: {address.name}, {address.city}, {address.region}, {address.country}
+                        </Text>
+                        <Text style={styles.statusText}>
+                            Coordinates: {location.coords.latitude.toFixed(5)}, {location.coords.longitude.toFixed(5)}
+                        </Text>
+                    </View>
+
+                    <View style={styles.mapContainer}>
+                        <MapView
+                            style={styles.map}
+                            region={{
+                                latitude: location.coords.latitude,
+                                longitude: location.coords.longitude,
+                                latitudeDelta: 0.01,
+                                longitudeDelta: 0.01,
+                            }}
+                            showsUserLocation={true}
+                            loadingEnabled={true}
+                        >
+                            <Marker
+                                coordinate={{
+                                    latitude: location.coords.latitude,
+                                    longitude: location.coords.longitude,
+                                }}
+                                title="You are here"
+                            />
+                        </MapView>
+                    </View>
+                </>
+            ) : (
+                <Text style={styles.statusText}>Press "Fetch current location" to get your location</Text>
+            )}
         </ScrollView>
     );
 }
@@ -59,4 +98,16 @@ const styles = StyleSheet.create({
     statusText: { color: '#fff', marginBottom: 4 },
     error: { color: '#ff6b6b' },
     gap: { height: 10 },
+    loader: { marginTop: 20 },
+    mapContainer: {
+        width: '100%',
+        height: 300,
+        marginTop: 16,
+        borderRadius: 10,
+        overflow: 'hidden',
+    },
+    map: {
+        width: '100%',
+        height: '100%',
+    },
 });
diff --git a/components/permissions/NotificationsPermissionDemo.tsx b/components/permissions/NotificationsPermissionDemo.tsx
index 62fbfab..56006ba 100644
--- a/components/permissions/NotificationsPermissionDemo.tsx
+++ b/components/permissions/NotificationsPermissionDemo.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { View, Text, Button, StyleSheet, ScrollView } from 'react-native';
 import * as Notifications from 'expo-notifications';
+import { triggerLocalSampleNotification } from '@/utils/notifications.utils';
 
 export default function NotificationsPermissionDemo() {
     const [status, setStatus] = useState<string>('unknown');
@@ -32,7 +33,9 @@ export default function NotificationsPermissionDemo() {
             </Text>
             <Button title="Request notification permission" onPress={requestPermissions} />
             <View style={styles.gap} />
-            <Button title="Schedule demo notification" onPress={schedule} />
+            <Button title="Schedule demo notification (2s delay)" onPress={schedule} />
+            <View style={styles.gap} />
+            <Button title="Trigger Sample Notification" onPress={triggerLocalSampleNotification} color="#FF9800" />
 
             <View style={styles.statusBox}>
                 <Text style={styles.statusText}>Status: {status}</Text>
diff --git a/components/permissions/TelephonySmsPermissionDemo.tsx b/components/permissions/TelephonySmsPermissionDemo.tsx
index 7ce005a..3751b7d 100644
--- a/components/permissions/TelephonySmsPermissionDemo.tsx
+++ b/components/permissions/TelephonySmsPermissionDemo.tsx
@@ -1,56 +1,716 @@
-import React, { useState } from 'react';
-import { View, Text, Button, StyleSheet, ScrollView, PermissionsAndroid, Platform } from 'react-native';
+import React, { useState, useEffect, useCallback } from 'react';
+import { View, Text, Button, StyleSheet, ScrollView, PermissionsAndroid, Platform, Linking, Alert, Pressable, TextInput, ActivityIndicator, FlatList } from 'react-native';
+import * as Cellular from 'expo-cellular';
+import * as Contacts from 'expo-contacts';
+import * as SMS from 'expo-sms';
 
-const REQUESTS = [
+// All telephony-related permissions
+const TELEPHONY_PERMISSIONS = [
     PermissionsAndroid.PERMISSIONS.READ_PHONE_STATE,
     PermissionsAndroid.PERMISSIONS.READ_PHONE_NUMBERS,
-    PermissionsAndroid.PERMISSIONS.READ_SMS,
-    PermissionsAndroid.PERMISSIONS.SEND_SMS,
+    PermissionsAndroid.PERMISSIONS.READ_CALL_LOG,
+    PermissionsAndroid.PERMISSIONS.WRITE_CALL_LOG,
     PermissionsAndroid.PERMISSIONS.CALL_PHONE,
     PermissionsAndroid.PERMISSIONS.ANSWER_PHONE_CALLS,
     PermissionsAndroid.PERMISSIONS.PROCESS_OUTGOING_CALLS,
 ];
 
+// All SMS-related permissions
+const SMS_PERMISSIONS = [
+    PermissionsAndroid.PERMISSIONS.READ_SMS,
+    PermissionsAndroid.PERMISSIONS.SEND_SMS,
+    PermissionsAndroid.PERMISSIONS.RECEIVE_SMS,
+    PermissionsAndroid.PERMISSIONS.RECEIVE_MMS,
+    PermissionsAndroid.PERMISSIONS.RECEIVE_WAP_PUSH,
+];
+
+// Contacts permissions
+const CONTACTS_PERMISSIONS = [
+    PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
+    PermissionsAndroid.PERMISSIONS.WRITE_CONTACTS,
+];
+
+interface CellularInfoData {
+    allowsVoip: boolean | null;
+    carrier: string | null;
+    cellularGeneration: Cellular.CellularGeneration;
+    isoCountryCode: string | null;
+    mobileCountryCode: string | null;
+    mobileNetworkCode: string | null;
+    permission: any | null;
+}
+
+type Contact = Contacts.Contact;
+type CallLogEntry = {
+    id: string;
+    number: string;
+    type: string;
+    date: string;
+    duration: string;
+};
+type SmsEntry = {
+    id: string;
+    address: string;
+    body: string;
+    date: string;
+    type: string;
+};
+
+const CONTACTS_PAGE_SIZE = 20;
+const LIST_HEIGHT = 300;
+
 export default function TelephonySmsPermissionDemo() {
-    const [statuses, setStatuses] = useState<Record<string, string>>({});
+    const [permissionStatuses, setPermissionStatuses] = useState<Record<string, string>>({});
+    const [cellularInfo, setCellularInfo] = useState<CellularInfoData>({
+        allowsVoip: null,
+        carrier: null,
+        cellularGeneration: Cellular.CellularGeneration.UNKNOWN,
+        isoCountryCode: null,
+        mobileCountryCode: null,
+        mobileNetworkCode: null,
+        permission: null,
+    });
+    const [contacts, setContacts] = useState<Contact[]>([]);
+    const [contactsCursor, setContactsCursor] = useState<string | undefined>(undefined);
+    const [hasMoreContacts, setHasMoreContacts] = useState(true);
+    const [callLogs, setCallLogs] = useState<CallLogEntry[]>([]);
+    const [smsMessages, setSmsMessages] = useState<SmsEntry[]>([]);
+    const [phoneNumber, setPhoneNumber] = useState('');
+    const [smsBody, setSmsBody] = useState('Test message from CodeBuilder');
+    
+    // Loading states
+    const [loadingPermissions, setLoadingPermissions] = useState(false);
+    const [loadingCellular, setLoadingCellular] = useState(false);
+    const [loadingContacts, setLoadingContacts] = useState(false);
+    const [loadingMoreContacts, setLoadingMoreContacts] = useState(false);
+    const [loadingCallLogs, setLoadingCallLogs] = useState(false);
+    const [loadingSms, setLoadingSms] = useState(false);
+    const [makingCall, setMakingCall] = useState(false);
+    const [sendingSms, setSendingSms] = useState(false);
+
+    // Check permissions on mount
+    useEffect(() => {
+        checkAllPermissions();
+        loadCellularInfo();
+    }, []);
+
+    const checkAllPermissions = async () => {
+        if (Platform.OS !== 'android') {
+            setPermissionStatuses({ platform: 'Only relevant on Android' });
+            return;
+        }
+        try {
+            const allPermissions = [...TELEPHONY_PERMISSIONS, ...SMS_PERMISSIONS, ...CONTACTS_PERMISSIONS];
+            const results: Record<string, string> = {};
+            
+            for (const permission of allPermissions) {
+                const granted = await PermissionsAndroid.check(permission);
+                results[permission] = granted ? 'granted' : 'denied';
+            }
+            
+            setPermissionStatuses(results);
+        } catch (error) {
+            console.error('Error checking permissions:', error);
+        }
+    };
+
+    const loadCellularInfo = async () => {
+        setLoadingCellular(true);
+        try {
+            const [allowsVoip, carrier, cellularGeneration, isoCountryCode, mobileCountryCode, mobileNetworkCode, permission] = await Promise.all([
+                Cellular.allowsVoipAsync(),
+                Cellular.getCarrierNameAsync(),
+                Cellular.getCellularGenerationAsync(),
+                Cellular.getIsoCountryCodeAsync(),
+                Cellular.getMobileCountryCodeAsync(),
+                Cellular.getMobileNetworkCodeAsync(),
+                Cellular.getPermissionsAsync(),
+            ]);
+            setCellularInfo({ allowsVoip, carrier, cellularGeneration, isoCountryCode, mobileCountryCode, mobileNetworkCode, permission });
+        } catch (error) {
+            console.error('Error loading cellular info:', error);
+        } finally {
+            setLoadingCellular(false);
+        }
+    };
+
+    const requestAllPermissions = async () => {
+        if (Platform.OS !== 'android') {
+            setPermissionStatuses({ platform: 'Only relevant on Android' });
+            return;
+        }
+        setLoadingPermissions(true);
+        try {
+            // Request cellular permissions first
+            await Cellular.requestPermissionsAsync();
+            
+            // Request all telephony, SMS, and contacts permissions
+            const allPermissions = [...TELEPHONY_PERMISSIONS, ...SMS_PERMISSIONS, ...CONTACTS_PERMISSIONS];
+            const results = await PermissionsAndroid.requestMultiple(allPermissions);
+            setPermissionStatuses(results);
+            
+            // Refresh cellular info after permission grant
+            await loadCellularInfo();
+        } catch (error) {
+            console.error('Error requesting permissions:', error);
+        } finally {
+            setLoadingPermissions(false);
+        }
+    };
+
+    // Load contacts with pagination
+    const loadContacts = async (loadMore = false) => {
+        if (loadMore) {
+            if (!hasMoreContacts || loadingMoreContacts) return;
+            setLoadingMoreContacts(true);
+        } else {
+            setLoadingContacts(true);
+            setContacts([]);
+            setContactsCursor(undefined);
+            setHasMoreContacts(true);
+        }
+
+        try {
+            const { status } = await Contacts.requestPermissionsAsync();
+            if (status === 'granted') {
+                const options: any = {
+                    fields: [Contacts.Fields.Name, Contacts.Fields.PhoneNumbers, Contacts.Fields.Emails],
+                    pageSize: CONTACTS_PAGE_SIZE,
+                };
+
+                if (loadMore && contactsCursor) {
+                    options.pageOffset = contactsCursor;
+                }
 
-    const request = async () => {
+                const { data, hasNextPage, hasPreviousPage } = await Contacts.getContactsAsync(options);
+                
+                if (loadMore) {
+                    setContacts(prev => [...prev, ...data]);
+                } else {
+                    setContacts(data);
+                }
+
+                setHasMoreContacts(hasNextPage);
+                if (data.length > 0) {
+                    setContactsCursor(data[data.length - 1].id);
+                }
+            } else {
+                Alert.alert('Permission Denied', 'Contact permission is required to view contacts.');
+            }
+        } catch (error) {
+            console.error('Error loading contacts:', error);
+            Alert.alert('Error', 'Failed to load contacts');
+        } finally {
+            if (loadMore) {
+                setLoadingMoreContacts(false);
+            } else {
+                setLoadingContacts(false);
+            }
+        }
+    };
+
+    // Read call logs - Note: This requires a native module in production
+    const loadCallLogs = async () => {
         if (Platform.OS !== 'android') {
-            setStatuses({ platform: 'Only relevant on Android' });
+            Alert.alert('Not Available', 'Call logs are only available on Android');
+            return;
+        }
+        setLoadingCallLogs(true);
+        try {
+            const granted = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.READ_CALL_LOG);
+            if (!granted) {
+                Alert.alert('Permission Required', 'READ_CALL_LOG permission is required. Please request permissions first.');
+                return;
+            }
+
+            // Note: In production, use react-native-call-log or similar
+            Alert.alert('Native Module Required', 'Reading actual call logs requires a native module like react-native-call-log. This is demo data.');
+            setCallLogs([
+                { id: '1', number: '+1234567890', type: 'INCOMING', date: new Date(Date.now() - 3600000).toISOString(), duration: '120' },
+                { id: '2', number: '+0987654321', type: 'OUTGOING', date: new Date(Date.now() - 7200000).toISOString(), duration: '45' },
+                { id: '3', number: '+1122334455', type: 'MISSED', date: new Date(Date.now() - 86400000).toISOString(), duration: '0' },
+            ]);
+        } catch (error) {
+            console.error('Error loading call logs:', error);
+        } finally {
+            setLoadingCallLogs(false);
+        }
+    };
+
+    // Read SMS messages - Note: This requires a native module in production
+    const loadSmsMessages = async () => {
+        if (Platform.OS !== 'android') {
+            Alert.alert('Not Available', 'SMS reading is only available on Android');
+            return;
+        }
+        setLoadingSms(true);
+        try {
+            const granted = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.READ_SMS);
+            if (!granted) {
+                Alert.alert('Permission Required', 'READ_SMS permission is required. Please request permissions first.');
+                return;
+            }
+
+            // Note: In production, use react-native-get-sms-android or similar
+            Alert.alert('Native Module Required', 'Reading actual SMS requires a native module like react-native-get-sms-android. This is demo data.');
+            setSmsMessages([
+                { id: '1', address: '+1234567890', body: 'Hello there!', date: new Date(Date.now() - 3600000).toISOString(), type: 'INBOX' },
+                { id: '2', address: '+0987654321', body: 'Test message', date: new Date(Date.now() - 7200000).toISOString(), type: 'SENT' },
+                { id: '3', address: '+1122334455', body: 'Meeting at 3pm', date: new Date(Date.now() - 86400000).toISOString(), type: 'INBOX' },
+            ]);
+        } catch (error) {
+            console.error('Error loading SMS:', error);
+        } finally {
+            setLoadingSms(false);
+        }
+    };
+
+    // Make a phone call
+    const makeCall = async () => {
+        if (!phoneNumber.trim()) {
+            Alert.alert('Error', 'Please enter a phone number');
+            return;
+        }
+        setMakingCall(true);
+        try {
+            // Use tel: URL scheme - this will open the dialer
+            const url = `tel:${phoneNumber}`;
+            const supported = await Linking.canOpenURL(url);
+            if (supported) {
+                await Linking.openURL(url);
+            } else {
+                Alert.alert('Error', 'Cannot make phone calls on this device');
+            }
+        } catch (error) {
+            console.error('Error making call:', error);
+            Alert.alert('Error', 'Failed to initiate call');
+        } finally {
+            setMakingCall(false);
+        }
+    };
+
+    // Send SMS using expo-sms
+    const sendSms = async () => {
+        if (!phoneNumber.trim()) {
+            Alert.alert('Error', 'Please enter a phone number');
             return;
         }
-        const results = await PermissionsAndroid.requestMultiple(REQUESTS);
-        setStatuses(results);
+        setSendingSms(true);
+        try {
+            const isAvailable = await SMS.isAvailableAsync();
+            if (isAvailable) {
+                const { result } = await SMS.sendSMSAsync([phoneNumber], smsBody);
+                if (result === 'sent') {
+                    Alert.alert('Success', 'SMS sent successfully');
+                } else {
+                    Alert.alert('Cancelled', 'SMS sending was cancelled');
+                }
+            } else {
+                Alert.alert('Not Available', 'SMS is not available on this device');
+            }
+        } catch (error) {
+            console.error('Error sending SMS:', error);
+            Alert.alert('Error', 'Failed to send SMS');
+        } finally {
+            setSendingSms(false);
+        }
+    };
+
+    const getCellularGenerationName = (gen: Cellular.CellularGeneration) => {
+        switch (gen) {
+            case 0: return 'Unknown';
+            case 1: return '2G';
+            case 2: return '3G';
+            case 3: return '4G';
+            case 4: return '5G';
+            default: return 'Unknown';
+        }
+    };
+
+    const renderContactItem = ({ item }: { item: Contact }) => (
+        <View style={styles.listItem}>
+            <Text style={styles.listItemTitle}>{item.name || 'No Name'}</Text>
+            {item.phoneNumbers && item.phoneNumbers.length > 0 && (
+                <Text style={styles.listItemSubtitle}>{item.phoneNumbers[0].number}</Text>
+            )}
+        </View>
+    );
+
+    const renderCallLogItem = ({ item }: { item: CallLogEntry }) => (
+        <View style={styles.listItem}>
+            <Text style={styles.listItemTitle}>{item.number}</Text>
+            <Text style={styles.listItemSubtitle}>
+                {item.type} • Duration: {item.duration}s • {new Date(item.date).toLocaleString()}
+            </Text>
+        </View>
+    );
+
+    const renderSmsItem = ({ item }: { item: SmsEntry }) => (
+        <View style={styles.listItem}>
+            <Text style={styles.listItemTitle}>{item.address}</Text>
+            <Text style={styles.listItemSubtitle} numberOfLines={2}>
+                {item.body}
+            </Text>
+            <Text style={styles.listItemMeta}>{item.type} • {new Date(item.date).toLocaleString()}</Text>
+        </View>
+    );
+
+    const renderContactsFooter = () => {
+        if (!loadingMoreContacts) return null;
+        return (
+            <View style={styles.footerLoader}>
+                <ActivityIndicator size="small" color="#61dafb" />
+                <Text style={styles.footerLoaderText}>Loading more contacts...</Text>
+            </View>
+        );
     };
 
     return (
         <ScrollView style={styles.container} contentContainerStyle={styles.content}>
-            <Text style={styles.title}>Telephony & SMS</Text>
+            {/* Header */}
+            <Text style={styles.title}>Telephony, SMS & Contacts</Text>
             <Text style={styles.copy}>
-                Requests READ_PHONE_STATE, READ_PHONE_NUMBERS, CALL_PHONE, SEND_SMS, ANSWER_PHONE_CALLS, and PROCESS_OUTGOING_CALLS. These
-                permissions are sensitive and may require additional Play Store declarations.
+                This page combines cellular information, telephony permissions, SMS capabilities, contacts access, and call log functionality.
+                Request all permissions to unlock full functionality.
             </Text>
-            <Button title="Request phone & SMS permissions" onPress={request} />
-            <View style={styles.statusBox}>
-                {Object.keys(statuses).length === 0 ? (
-                    <Text style={styles.statusText}>No results yet</Text>
+
+            {/* Main Permission Request Button */}
+            <Pressable 
+                style={[styles.mainButton, loadingPermissions && styles.buttonDisabled]} 
+                onPress={requestAllPermissions} 
+                disabled={loadingPermissions}
+            >
+                {loadingPermissions ? (
+                    <View style={styles.buttonContent}>
+                        <ActivityIndicator size="small" color="#fff" style={{ marginRight: 8 }} />
+                        <Text style={styles.mainButtonText}>Requesting Permissions...</Text>
+                    </View>
+                ) : (
+                    <Text style={styles.mainButtonText}>🔐 Request All Permissions</Text>
+                )}
+            </Pressable>
+
+            {/* Permission Statuses */}
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>📋 Permission Statuses</Text>
+                {Object.keys(permissionStatuses).length === 0 ? (
+                    <View style={styles.loadingContainer}>
+                        <ActivityIndicator size="small" color="#61dafb" />
+                        <Text style={styles.statusText}>Checking permissions...</Text>
+                    </View>
                 ) : (
-                    Object.entries(statuses).map(([key, value]) => (
-                        <Text style={styles.statusText} key={key}>
-                            {key.split('.').pop()}: {value}
-                        </Text>
+                    Object.entries(permissionStatuses).map(([key, value]) => (
+                        <View style={styles.permissionRow} key={key}>
+                            <Text style={styles.permissionName}>{key.split('.').pop()}</Text>
+                            <Text style={[styles.permissionValue, value === 'granted' ? styles.granted : styles.denied]}>{value}</Text>
+                        </View>
                     ))
                 )}
             </View>
+
+            {/* Cellular Information */}
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>📱 Cellular Information</Text>
+                <View style={styles.infoGrid}>
+                    <InfoRow label="Carrier" value={cellularInfo.carrier || 'N/A'} />
+                    <InfoRow label="Network Generation" value={getCellularGenerationName(cellularInfo.cellularGeneration)} />
+                    <InfoRow label="Allows VoIP" value={cellularInfo.allowsVoip !== null ? String(cellularInfo.allowsVoip) : 'N/A'} />
+                    <InfoRow label="ISO Country Code" value={cellularInfo.isoCountryCode || 'N/A'} />
+                    <InfoRow label="Mobile Country Code" value={cellularInfo.mobileCountryCode || 'N/A'} />
+                    <InfoRow label="Mobile Network Code" value={cellularInfo.mobileNetworkCode || 'N/A'} />
+                    <InfoRow label="Permission Status" value={cellularInfo.permission?.status || 'N/A'} />
+                </View>
+                <Pressable 
+                    style={[styles.actionButton, styles.refreshButton, loadingCellular && styles.buttonDisabled]}
+                    onPress={loadCellularInfo}
+                    disabled={loadingCellular}
+                >
+                    {loadingCellular ? (
+                        <View style={styles.buttonContent}>
+                            <ActivityIndicator size="small" color="#fff" style={{ marginRight: 8 }} />
+                            <Text style={styles.actionButtonText}>Refreshing...</Text>
+                        </View>
+                    ) : (
+                        <Text style={styles.actionButtonText}>🔄 Refresh Cellular Info</Text>
+                    )}
+                </Pressable>
+            </View>
+
+            {/* Phone Actions */}
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>📞 Phone Actions</Text>
+                <TextInput
+                    style={styles.input}
+                    placeholder="Enter phone number"
+                    placeholderTextColor="#666"
+                    value={phoneNumber}
+                    onChangeText={setPhoneNumber}
+                    keyboardType="phone-pad"
+                />
+                <View style={styles.buttonRow}>
+                    <Pressable 
+                        style={[styles.actionButton, styles.callButton, makingCall && styles.buttonDisabled]} 
+                        onPress={makeCall}
+                        disabled={makingCall}
+                    >
+                        {makingCall ? (
+                            <View style={styles.buttonContent}>
+                                <ActivityIndicator size="small" color="#fff" style={{ marginRight: 4 }} />
+                                <Text style={styles.actionButtonText}>Calling...</Text>
+                            </View>
+                        ) : (
+                            <Text style={styles.actionButtonText}>📞 Call</Text>
+                        )}
+                    </Pressable>
+                    <Pressable 
+                        style={[styles.actionButton, styles.smsButton, sendingSms && styles.buttonDisabled]} 
+                        onPress={sendSms}
+                        disabled={sendingSms}
+                    >
+                        {sendingSms ? (
+                            <View style={styles.buttonContent}>
+                                <ActivityIndicator size="small" color="#fff" style={{ marginRight: 4 }} />
+                                <Text style={styles.actionButtonText}>Sending...</Text>
+                            </View>
+                        ) : (
+                            <Text style={styles.actionButtonText}>💬 SMS</Text>
+                        )}
+                    </Pressable>
+                </View>
+                <TextInput
+                    style={[styles.input, styles.multilineInput]}
+                    placeholder="SMS message body"
+                    placeholderTextColor="#666"
+                    value={smsBody}
+                    onChangeText={setSmsBody}
+                    multiline
+                />
+            </View>
+
+            {/* Contacts */}
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>👥 Contacts</Text>
+                <Pressable 
+                    style={[styles.actionButton, styles.contactsButton, loadingContacts && styles.buttonDisabled]}
+                    onPress={() => loadContacts(false)}
+                    disabled={loadingContacts}
+                >
+                    {loadingContacts ? (
+                        <View style={styles.buttonContent}>
+                            <ActivityIndicator size="small" color="#fff" style={{ marginRight: 8 }} />
+                            <Text style={styles.actionButtonText}>Loading Contacts...</Text>
+                        </View>
+                    ) : (
+                        <Text style={styles.actionButtonText}>📖 Load Contacts</Text>
+                    )}
+                </Pressable>
+                {contacts.length > 0 && (
+                    <View style={styles.flatListContainer}>
+                        <FlatList
+                            data={contacts}
+                            renderItem={renderContactItem}
+                            keyExtractor={(item, index) => item.id ?? `contact-${index}`}
+                            style={styles.flatList}
+                            onEndReached={() => loadContacts(true)}
+                            onEndReachedThreshold={0.5}
+                            ListFooterComponent={renderContactsFooter}
+                        />
+                    </View>
+                )}
+            </View>
+
+            {/* Call Logs */}
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>📋 Call Logs</Text>
+                <Pressable 
+                    style={[styles.actionButton, styles.callLogsButton, loadingCallLogs && styles.buttonDisabled]}
+                    onPress={loadCallLogs}
+                    disabled={loadingCallLogs}
+                >
+                    {loadingCallLogs ? (
+                        <View style={styles.buttonContent}>
+                            <ActivityIndicator size="small" color="#fff" style={{ marginRight: 8 }} />
+                            <Text style={styles.actionButtonText}>Loading Call Logs...</Text>
+                        </View>
+                    ) : (
+                        <Text style={styles.actionButtonText}>📜 Load Call Logs</Text>
+                    )}
+                </Pressable>
+                {callLogs.length > 0 && (
+                    <View style={styles.flatListContainer}>
+                        <FlatList
+                            data={callLogs}
+                            renderItem={renderCallLogItem}
+                            keyExtractor={(item) => item.id}
+                            style={styles.flatList}
+                        />
+                    </View>
+                )}
+            </View>
+
+            {/* SMS Messages */}
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>💬 SMS Messages</Text>
+                <Pressable 
+                    style={[styles.actionButton, styles.smsMessagesButton, loadingSms && styles.buttonDisabled]}
+                    onPress={loadSmsMessages}
+                    disabled={loadingSms}
+                >
+                    {loadingSms ? (
+                        <View style={styles.buttonContent}>
+                            <ActivityIndicator size="small" color="#fff" style={{ marginRight: 8 }} />
+                            <Text style={styles.actionButtonText}>Loading SMS...</Text>
+                        </View>
+                    ) : (
+                        <Text style={styles.actionButtonText}>📨 Load SMS Messages</Text>
+                    )}
+                </Pressable>
+                {smsMessages.length > 0 && (
+                    <View style={styles.flatListContainer}>
+                        <FlatList
+                            data={smsMessages}
+                            renderItem={renderSmsItem}
+                            keyExtractor={(item) => item.id}
+                            style={styles.flatList}
+                        />
+                    </View>
+                )}
+            </View>
+
+            {/* Notes */}
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>📝 Notes</Text>
+                <Text style={styles.noteText}>
+                    • Telephony permissions require Play Store declarations{'\n'}
+                    • Call log and SMS reading require native modules in production{'\n'}
+                    • Some features may not work on emulators{'\n'}
+                    • SMS/Call permissions are highly restricted by Google Play{'\n'}
+                    • Phone calls and SMS will open device default apps
+                </Text>
+            </View>
         </ScrollView>
     );
 }
 
+function InfoRow({ label, value }: { label: string; value: string }) {
+    return (
+        <View style={styles.infoRow}>
+            <Text style={styles.infoLabel}>{label}</Text>
+            <Text style={styles.infoValue}>{value}</Text>
+        </View>
+    );
+}
+
 const styles = StyleSheet.create({
     container: { flex: 1, backgroundColor: '#000' },
-    content: { padding: 16, gap: 12 },
-    title: { color: '#fff', fontSize: 18, fontWeight: '700' },
-    copy: { color: '#ccc', fontSize: 14, lineHeight: 20 },
-    statusBox: { backgroundColor: '#111', padding: 12, borderRadius: 8, marginTop: 12 },
-    statusText: { color: '#fff', marginBottom: 4 },
+    content: { padding: 16, paddingBottom: 40 },
+    title: { color: '#fff', fontSize: 20, fontWeight: '700', marginBottom: 8 },
+    copy: { color: '#aaa', fontSize: 14, lineHeight: 20, marginBottom: 16 },
+    mainButton: {
+        backgroundColor: '#2196F3',
+        padding: 16,
+        borderRadius: 12,
+        alignItems: 'center',
+        marginBottom: 20,
+    },
+    mainButtonText: { color: '#fff', fontSize: 16, fontWeight: '700' },
+    buttonDisabled: { opacity: 0.6 },
+    buttonContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    loadingContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        padding: 12,
+    },
+    section: {
+        backgroundColor: '#111',
+        padding: 16,
+        borderRadius: 12,
+        marginBottom: 16,
+    },
+    sectionTitle: { color: '#61dafb', fontSize: 16, fontWeight: '700', marginBottom: 12 },
+    permissionRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingVertical: 6,
+        borderBottomWidth: 1,
+        borderBottomColor: '#222',
+    },
+    permissionName: { color: '#ccc', fontSize: 12, flex: 1 },
+    permissionValue: { fontSize: 12, fontWeight: '600' },
+    granted: { color: '#4CAF50' },
+    denied: { color: '#f44336' },
+    statusText: { color: '#666', fontSize: 14 },
+    infoGrid: { marginBottom: 12 },
+    infoRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingVertical: 8,
+        borderBottomWidth: 1,
+        borderBottomColor: '#222',
+    },
+    infoLabel: { color: '#888', fontSize: 14 },
+    infoValue: { color: '#fff', fontSize: 14, fontWeight: '500' },
+    input: {
+        backgroundColor: '#1a1a1a',
+        borderRadius: 8,
+        padding: 12,
+        color: '#fff',
+        fontSize: 16,
+        marginBottom: 12,
+        borderWidth: 1,
+        borderColor: '#333',
+    },
+    multilineInput: {
+        minHeight: 80,
+        textAlignVertical: 'top',
+    },
+    buttonRow: {
+        flexDirection: 'row',
+        gap: 12,
+        marginBottom: 12,
+    },
+    actionButton: {
+        flex: 1,
+        padding: 14,
+        borderRadius: 8,
+        alignItems: 'center',
+    },
+    callButton: { backgroundColor: '#4CAF50' },
+    smsButton: { backgroundColor: '#2196F3' },
+    refreshButton: { backgroundColor: '#61dafb' },
+    contactsButton: { backgroundColor: '#4CAF50', marginBottom: 12 },
+    callLogsButton: { backgroundColor: '#FF9800', marginBottom: 12 },
+    smsMessagesButton: { backgroundColor: '#9C27B0', marginBottom: 12 },
+    actionButtonText: { color: '#fff', fontSize: 14, fontWeight: '600' },
+    flatListContainer: {
+        height: LIST_HEIGHT,
+        backgroundColor: '#1a1a1a',
+        borderRadius: 8,
+        overflow: 'hidden',
+    },
+    flatList: {
+        flex: 1,
+    },
+    listItem: {
+        padding: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: '#333',
+    },
+    listItemTitle: { color: '#fff', fontSize: 14, fontWeight: '600' },
+    listItemSubtitle: { color: '#888', fontSize: 12, marginTop: 4 },
+    listItemMeta: { color: '#666', fontSize: 10, marginTop: 4 },
+    footerLoader: {
+        padding: 12,
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: 8,
+    },
+    footerLoaderText: { color: '#61dafb', fontSize: 12 },
+    noteText: { color: '#888', fontSize: 12, lineHeight: 20 },
 });
diff --git a/package-lock.json b/package-lock.json
index f64fabe..b18c651 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
         "expo-cellular": "8.0.8",
         "expo-clipboard": "8.0.8",
         "expo-constants": "~18.0.13",
+        "expo-contacts": "~15.0.11",
         "expo-dev-client": "6.0.20",
         "expo-device": "8.0.10",
         "expo-font": "~14.0.11",
@@ -41,6 +42,7 @@
         "expo-media-library": "18.2.1",
         "expo-notifications": "0.32.16",
         "expo-router": "~6.0.22",
+        "expo-sms": "~14.0.8",
         "expo-splash-screen": "31.0.13",
         "expo-status-bar": "3.0.9",
         "expo-system-ui": "6.0.9",
@@ -7671,6 +7673,17 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-contacts": {
+      "version": "15.0.11",
+      "resolved": "https://registry.npmjs.org/expo-contacts/-/expo-contacts-15.0.11.tgz",
+      "integrity": "sha512-buKkoQuWJgVSEvR1Yloa5SvGC/ud7T2YeYDe0R7Aa0oz8pwQpjk3W7OoL3QrXIfYcuKTrIz6ffqC8lc3peaAyg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-dev-client": {
       "version": "6.0.20",
       "resolved": "https://registry.npmjs.org/expo-dev-client/-/expo-dev-client-6.0.20.tgz",
@@ -8158,6 +8171,15 @@
         "node": ">=20.16.0"
       }
     },
+    "node_modules/expo-sms": {
+      "version": "14.0.8",
+      "resolved": "https://registry.npmjs.org/expo-sms/-/expo-sms-14.0.8.tgz",
+      "integrity": "sha512-yNdUUP4Y+arvQByXsSzY8UFPadezxcFPH4u1Ubab2VIRNmDJZf7TIAFmDi8dAbm5CPxbzjKBEbBIkmkVKppHHA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-splash-screen": {
       "version": "31.0.13",
       "resolved": "https://registry.npmjs.org/expo-splash-screen/-/expo-splash-screen-31.0.13.tgz",
diff --git a/package.json b/package.json
index f990399..fcafdff 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "expo-cellular": "8.0.8",
     "expo-clipboard": "8.0.8",
     "expo-constants": "~18.0.13",
+    "expo-contacts": "~15.0.11",
     "expo-dev-client": "6.0.20",
     "expo-device": "8.0.10",
     "expo-font": "~14.0.11",
@@ -50,6 +51,7 @@
     "expo-media-library": "18.2.1",
     "expo-notifications": "0.32.16",
     "expo-router": "~6.0.22",
+    "expo-sms": "~14.0.8",
     "expo-splash-screen": "31.0.13",
     "expo-status-bar": "3.0.9",
     "expo-system-ui": "6.0.9",
@@ -59,11 +61,9 @@
     "fs-extra": "11.3.3",
     "nativewind": "^4.2.1",
     "path": "^0.12.7",
-    "tailwindcss": "^4.1.18",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
-    "scheduler": "^0.26.0",
     "react-native-console-view": "^0.0.21",
     "react-native-exception-handler": "^2.10.10",
     "react-native-gesture-handler": "~2.28.0",
@@ -75,7 +75,9 @@
     "react-native-svg": "15.12.1",
     "react-native-web": "^0.21.2",
     "react-native-webview": "13.15.0",
-    "react-native-worklets": "^0.5.1"
+    "react-native-worklets": "^0.5.1",
+    "scheduler": "^0.26.0",
+    "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
     "@babel/core": "^7.28.6",
diff --git a/types/react-native-console-view.d.ts b/types/react-native-console-view.d.ts
new file mode 100644
index 0000000..6d3cea6
--- /dev/null
+++ b/types/react-native-console-view.d.ts
@@ -0,0 +1,5 @@
+declare module 'react-native-console-view' {
+  import type React from 'react';
+
+  export const ConsoleView: React.ComponentType<any>;
+}
diff --git a/utils/camera.utils.ts b/utils/camera.utils.ts
index f62d39b..b3687ab 100644
--- a/utils/camera.utils.ts
+++ b/utils/camera.utils.ts
@@ -13,7 +13,14 @@ export const checkCameraPermission = async (): Promise<PermissionResponse> => {
 };
 
 export const getAvailableCameraTypes = async (): Promise<CameraType[]> => {
-  return ["front", "back"];
+  try {
+    const types = await Camera.getAvailableCameraTypesAsync();
+    return types as CameraType[];
+  } catch (error) {
+    console.warn("Failed to get available camera types:", error);
+    // Fallback to common camera types
+    return ["front", "back"];
+  }
 };
 
 export const isFlashSupported = async (): Promise<boolean> => {
@@ -35,5 +42,5 @@ export const flashModeToLabel = (mode: FlashMode): string => {
 };
 
 export const toggleCameraType = (current: CameraType): CameraType => {
-  return current === "front" ? "front" : "back";
+  return current === "front" ? "back" : "front";
 };
diff --git a/utils/misc.utils.ts b/utils/misc.utils.ts
new file mode 100644
index 0000000..bbbd85e
--- /dev/null
+++ b/utils/misc.utils.ts
@@ -0,0 +1,68 @@
+/**
+ * Miscellaneous utility functions
+ */
+
+/**
+ * Converts a timestamp to a human-readable "time ago" string
+ * @param timestamp - Date object, ISO string, or timestamp in milliseconds
+ * @returns Human-readable string like "<1 min ago", "5 mins ago", "1 hour ago", etc.
+ */
+export const timeAgo = (timestamp: Date | string | number): string => {
+  const now = new Date();
+  const date = timestamp instanceof Date ? timestamp : new Date(timestamp);
+  
+  const diffMs = now.getTime() - date.getTime();
+  const diffSecs = Math.floor(diffMs / 1000);
+  const diffMins = Math.floor(diffSecs / 60);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  const diffWeeks = Math.floor(diffDays / 7);
+  const diffMonths = Math.floor(diffDays / 30);
+  const diffYears = Math.floor(diffDays / 365);
+
+  if (diffSecs < 60) {
+    return '<1 min ago';
+  } else if (diffMins === 1) {
+    return '1 min ago';
+  } else if (diffMins < 60) {
+    return `${diffMins} mins ago`;
+  } else if (diffHours === 1) {
+    return '1 hour ago';
+  } else if (diffHours < 24) {
+    return `${diffHours} hours ago`;
+  } else if (diffDays === 1) {
+    return '1 day ago';
+  } else if (diffDays < 7) {
+    return `${diffDays} days ago`;
+  } else if (diffWeeks === 1) {
+    return '1 week ago';
+  } else if (diffWeeks < 4) {
+    return `${diffWeeks} weeks ago`;
+  } else if (diffMonths === 1) {
+    return '1 month ago';
+  } else if (diffMonths < 12) {
+    return `${diffMonths} months ago`;
+  } else if (diffYears === 1) {
+    return '1 year ago';
+  } else {
+    return `${diffYears} years ago`;
+  }
+};
+
+/**
+ * Creates a Date object from a time string (HH:MM:SS.mmm) and optional reference date
+ * Useful for converting LogViewer timestamps back to Date objects
+ * @param timeString - Time in format "HH:MM:SS.mmm"
+ * @param referenceDate - Optional reference date (defaults to today)
+ * @returns Date object
+ */
+export const parseTimeString = (timeString: string, referenceDate?: Date): Date => {
+  const ref = referenceDate || new Date();
+  const [timePart, msPart] = timeString.split('.');
+  const [hours, minutes, seconds] = timePart.split(':').map(Number);
+  
+  const date = new Date(ref);
+  date.setHours(hours, minutes, seconds, parseInt(msPart || '0', 10));
+  
+  return date;
+};