diff --git a/backend/CheckInApp/bin/Debug/net7.0/CheckInApp.dll b/backend/CheckInApp/bin/Debug/net7.0/CheckInApp.dll
index a77c52d..c455159 100644
Binary files a/backend/CheckInApp/bin/Debug/net7.0/CheckInApp.dll and b/backend/CheckInApp/bin/Debug/net7.0/CheckInApp.dll differ
diff --git a/backend/CheckInApp/bin/Debug/net7.0/CheckInApp.pdb b/backend/CheckInApp/bin/Debug/net7.0/CheckInApp.pdb
index 2c0f76f..b3d7a98 100644
Binary files a/backend/CheckInApp/bin/Debug/net7.0/CheckInApp.pdb and b/backend/CheckInApp/bin/Debug/net7.0/CheckInApp.pdb differ
diff --git a/frontend/CheckInApp/App.tsx b/frontend/CheckInApp/App.tsx
index ee36497..80b695c 100644
--- a/frontend/CheckInApp/App.tsx
+++ b/frontend/CheckInApp/App.tsx
@@ -5,96 +5,91 @@
  * @format
  */
 
-import React, {FC, useEffect, useState} from 'react';
-import {
-  Alert,
-  AppState,
-  AppStateStatus,
-  Button,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import React, { FC, useEffect, useState } from 'react';
+import { Alert, AppState, AppStateStatus, Button, Text, View } from 'react-native';
+import { UserInfo, UserService } from './user.service';
 
-import {UserInfo, UserService} from './user.service';
-
-function forceRenderHook() {
-  const [count, setCount] = useState(0);
-  return () => setCount(count + 1);
-}
-
-const HomeScreen: FC<{userInfo: UserInfo}> = ({userInfo}) => {
-  const forceRender = forceRenderHook();
+const HomeScreen: FC<{
+  userInfo: UserInfo | null;
+  onCheckIn: () => Promise<void>;
+  onCheckOut: () => Promise<void>;
+}> = ({ userInfo, onCheckIn, onCheckOut }) => {
   const canCheckIn =
-    userInfo.lastCheckIn == null ||
+    userInfo?.lastCheckIn == null ||
     (userInfo.lastCheckIn.timeIn != null &&
       userInfo.lastCheckIn.timeOut != null);
 
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{color: canCheckIn ? 'red' : 'green'}}>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ color: canCheckIn ? 'red' : 'green' }}>
         {canCheckIn ? 'User is checked-out' : 'User is checked-in'}
       </Text>
-      <Text style={{color: canCheckIn ? 'red' : 'green'}}>
+      <Text style={{ color: canCheckIn ? 'red' : 'green' }}>
         {JSON.stringify(userInfo || {}, null, 4)}
       </Text>
       {canCheckIn && (
-        <Button
-          onPress={() => {
-            UserService.CheckIn().then(response => {
-              if (response.success) {
-                userInfo!.lastCheckIn = response.data;
-                forceRender();
-              } else {
-                Alert.alert(response.data || 'Unknown error');
-                if (response.data === 'You must be checked in to checkout') {
-                  return UserService.UserInfo().then(r => {
-                    if (r.success) {
-                      userInfo!.lastCheckIn = r.data.lastCheckIn;
-                      forceRender();
-                    }
-                  });
-                }
-              }
-            });
-          }}
-          title={'Check-In'}
-        />
+        <Button onPress={onCheckIn} title={'Check-In'} />
       )}
-
       {!canCheckIn && (
-        <Button
-          onPress={() => {
-            UserService.CheckOut().then(response => {
-              if (response.success) {
-                userInfo!.lastCheckIn = response.data;
-                forceRender();
-              } else {
-                Alert.alert(response.data || 'Unknown error');
-                if (response.data === 'You were forced checkout') {
-                  return UserService.UserInfo().then(r => {
-                    if (r.success) {
-                      userInfo!.lastCheckIn = r.data.lastCheckIn;
-                      forceRender();
-                    }
-                  });
-                }
-              }
-            });
-          }}
-          title={'Checkout'}
-        />
+        <Button onPress={onCheckOut} title={'CheckOut'} />
       )}
     </View>
   );
 };
 
-function App(): JSX.Element {
-  const [userInfo, setUserInfo] = useState({});
+const App: FC = () => {
+  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
+
+  const handleCheckIn = async () => {
+    const response = await UserService.CheckIn();
+    if (response.success) {
+        setUserInfo(prevUserInfo => ({
+            ...prevUserInfo,
+            email: prevUserInfo?.email || "", // provide default value if undefined
+            lastCheckIn: response.data
+        }));
+    } else {
+      Alert.alert(response.data || 'Unknown error');
+      if (response.data === 'You must be checked in to checkout') {
+          const r = await UserService.UserInfo();
+          if (r.success) {
+              setUserInfo(prevUserInfo => ({
+                  ...prevUserInfo,
+                  email: prevUserInfo?.email || "",  // Ensure email field is always set
+                  lastCheckIn: r.data.lastCheckIn
+              }));
+          }
+      }
+  }
+  
+};
+
+const handleCheckOut = async () => {
+  const response = await UserService.CheckOut();
+  if (response.success) {
+      setUserInfo(prevUserInfo => ({
+          ...prevUserInfo,
+          email: prevUserInfo?.email || "",  // Ensure email field is always set
+          lastCheckIn: response.data
+      }));
+  } else {
+      Alert.alert(response.data || 'Unknown error');
+      if (response.data === 'You were forced checkout') {
+          const r = await UserService.UserInfo();
+          if (r.success) {
+              setUserInfo(prevUserInfo => ({
+                  ...prevUserInfo,
+                  email: prevUserInfo?.email || "",  // Ensure email field is always set
+                  lastCheckIn: r.data.lastCheckIn
+              }));
+          }
+      }
+  }
+};
+
 
   useEffect(() => {
     const appStateChangedHandler = async (state: AppStateStatus) => {
-      console.log('AppStateStatus', state);
       if (state === 'active') {
         const r = await UserService.UserInfo();
         if (r.success) {
@@ -105,14 +100,13 @@ function App(): JSX.Element {
       }
     };
     const handler = AppState.addEventListener('change', appStateChangedHandler);
-    // app launch
     appStateChangedHandler(AppState.currentState);
     return () => {
       handler.remove();
     };
   }, []);
 
-  return <HomeScreen userInfo={userInfo} />;
-}
+  return <HomeScreen userInfo={userInfo} onCheckIn={handleCheckIn} onCheckOut={handleCheckOut} />;
+};
 
 export default App;
diff --git a/frontend/CheckInApp/ios/CheckInApp.xcodeproj/project.pbxproj b/frontend/CheckInApp/ios/CheckInApp.xcodeproj/project.pbxproj
index ea84f88..b5823fd 100644
--- a/frontend/CheckInApp/ios/CheckInApp.xcodeproj/project.pbxproj
+++ b/frontend/CheckInApp/ios/CheckInApp.xcodeproj/project.pbxproj
@@ -486,6 +486,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = 7FAQS7D3VT;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = CheckInApp/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
@@ -498,7 +499,7 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
+				PRODUCT_BUNDLE_IDENTIFIER = com.bowen.checkin;
 				PRODUCT_NAME = CheckInApp;
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
@@ -513,6 +514,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = 7FAQS7D3VT;
 				INFOPLIST_FILE = CheckInApp/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
@@ -524,7 +526,7 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
+				PRODUCT_BUNDLE_IDENTIFIER = com.bowen.checkin;
 				PRODUCT_NAME = CheckInApp;
 				SWIFT_VERSION = 5.0;
 				VERSIONING_SYSTEM = "apple-generic";
diff --git a/frontend/CheckInApp/ios/CheckInApp.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/frontend/CheckInApp/ios/CheckInApp.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
new file mode 100644
index 0000000..18d9810
--- /dev/null
+++ b/frontend/CheckInApp/ios/CheckInApp.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>
diff --git a/frontend/CheckInApp/tsconfig.json b/frontend/CheckInApp/tsconfig.json
index 45a6c70..451e7af 100644
--- a/frontend/CheckInApp/tsconfig.json
+++ b/frontend/CheckInApp/tsconfig.json
@@ -1,3 +1,6 @@
 {
+  "compilerOptions": {
+    "jsx": "react-native"
+  },
   "extends": "@tsconfig/react-native/tsconfig.json"
 }