diff --git a/frontend/occupi-mobile4/app/_layout.tsx b/frontend/occupi-mobile4/app/_layout.tsx
index a9fcb4f7..9093268b 100644
--- a/frontend/occupi-mobile4/app/_layout.tsx
+++ b/frontend/occupi-mobile4/app/_layout.tsx
@@ -6,6 +6,7 @@ import { Stack } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
 import 'react-native-reanimated';
 import { GluestackUIProvider } from "@gluestack-ui/themed";
+import { NavBarProvider } from '@/components/NavBarProvider';
 import { config } from "@gluestack-ui/config"; // Optional if you want to use default theme
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
@@ -31,6 +32,7 @@ export default function RootLayout() {
 
   return (
     <GluestackUIProvider config={config} theme={theme}>
+      <NavBarProvider>
       <Stack>
         <Stack.Screen name="index" options={{ headerShown: false }} />
         <Stack.Screen name="login" options={{ headerShown: false }} />
@@ -56,6 +58,7 @@ export default function RootLayout() {
         <Stack.Screen name="set-security" options={{ headerShown: false }} />
         <Stack.Screen name="notiftester" options={{ headerShown: false }} />
       </Stack>
+      </NavBarProvider>
     </GluestackUIProvider>
   );
 }
\ No newline at end of file
diff --git a/frontend/occupi-mobile4/components/NavBar.tsx b/frontend/occupi-mobile4/components/NavBar.tsx
index b10a2b22..3dfd448a 100644
--- a/frontend/occupi-mobile4/components/NavBar.tsx
+++ b/frontend/occupi-mobile4/components/NavBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { StyleSheet } from 'react-native';
 import { Text, Button, Icon, CalendarDaysIcon, BellIcon } from '@gluestack-ui/themed';
 import { Feather } from '@expo/vector-icons';
@@ -7,31 +7,145 @@ import { router } from 'expo-router';
 import { BlurView } from 'expo-blur';
 import { useColorScheme } from 'react-native';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
+import { useNavBar } from './NavBarProvider';
 
 const NavBar = () => {
   let colorScheme = useColorScheme();
   const styles = getStyles(colorScheme);
+  const { currentTab, setCurrentTab } = useNavBar();
+
+  const handleTabPress = (tabName, route) => {
+    setCurrentTab(tabName);
+    router.replace(route);
+  };
+  console.log(currentTab);
+
   return (
-    <BlurView tint="light" pb={hp('3%')} backgroundColor={colorScheme === 'dark' ? 'black' : '#fff'} intensity={20} style={styles.container}>
-      <Button onPress={() => router.replace('/home')} flex={1} mt={hp('1%')} w={wp('20%')} backgroundColor="none" title="Home" flexDirection="column">
-        <Feather name="home" size={hp('3%')} color={colorScheme === 'dark' ? 'white' : 'black'} />
-        <Text numberOfLines={1} w={wp('9%')} fontSize={wp('3%')} color={colorScheme === 'dark' ? 'white' : 'black'}>Home</Text>
+    <BlurView
+      tint="light"
+      pb={hp('3%')}
+      backgroundColor={colorScheme === 'dark' ? 'black' : '#fff'}
+      intensity={20}
+      style={styles.container}
+    >
+      <Button
+        onPress={() => handleTabPress('Home', '/home')}
+        flex={1}
+        mt={hp('1%')}
+        w={wp('20%')}
+        backgroundColor="none"
+        title="Home"
+        flexDirection="column"
+      >
+        <Feather
+          name="home"
+          size={hp('3%')}
+          color={currentTab === 'Home' ? 'yellowgreen' : colorScheme === 'dark' ? 'white' : 'black'}
+        />
+        <Text
+          numberOfLines={1}
+          w={wp('9%')}
+          fontSize={wp('3%')}
+          color={currentTab === 'Home' ? 'yellowgreen' : colorScheme === 'dark' ? 'white' : 'black'}
+        >
+          Home
+        </Text>
       </Button>
-      <Button onPress={() => router.replace('/viewbookings')} flex={1} mt={hp('1%')} w={wp('20%')} backgroundColor="none" title="Search" flexDirection="column">
-        <Ionicons name="receipt-outline" size={24} color={colorScheme === 'dark' ? '#fff' : '#000'} />
-        <Text numberOfLines={1} w={wp('19%')} fontSize={wp('3%')} color={colorScheme === 'dark' ? 'white' : 'black'}>My bookings</Text>
+      <Button
+        onPress={() => handleTabPress('ViewBookings', '/viewbookings')}
+        flex={1}
+        mt={hp('1%')}
+        w={wp('20%')}
+        backgroundColor="none"
+        title="Search"
+        flexDirection="column"
+      >
+        <Ionicons
+          name="receipt-outline"
+          size={24}
+          color={currentTab === 'ViewBookings' ? 'yellowgreen' : colorScheme === 'dark' ? 'white' : 'black'}
+        />
+        <Text
+          numberOfLines={1}
+          w={wp('19%')}
+          fontSize={wp('3%')}
+          color={currentTab === 'ViewBookings' ? 'yellowgreen' : colorScheme === 'dark' ? 'white' : 'black'}
+        >
+          My bookings
+        </Text>
       </Button>
-      <Button onPress={() => router.replace('/bookings')} flex={1} mt={hp('1%')} w={wp('20%')} backgroundColor="none" title="Book" flexDirection="column">
-        <Icon as={CalendarDaysIcon} w={hp('3%')} h={hp('3%')} color={colorScheme === 'dark' ? 'white' : 'black'} />
-        <Text numberOfLines={1} w={wp('7.4%')} fontSize={wp('3%')} color={colorScheme === 'dark' ? 'white' : 'black'}>Book</Text>
+      <Button
+        onPress={() => handleTabPress('Book', '/bookings')}
+        flex={1}
+        mt={hp('1%')}
+        w={wp('20%')}
+        backgroundColor="none"
+        title="Book"
+        flexDirection="column"
+      >
+        <Icon
+          as={CalendarDaysIcon}
+          w={hp('3%')}
+          h={hp('3%')}
+          color={currentTab === 'Book' ? 'yellowgreen' : colorScheme === 'dark' ? 'white' : 'black'}
+        />
+        <Text
+          numberOfLines={1}
+          w={wp('7.4%')}
+          fontSize={wp('3%')}
+          color={currentTab === 'Book' ? 'yellowgreen' : colorScheme === 'dark' ? 'white' : 'black'}
+        >
+          Book
+        </Text>
       </Button>
-      <Button onPress={() => router.replace('/notifications')} flex={1} mt={hp('1%')} w={wp('20%')} backgroundColor="none" title="Notifications" flexDirection="column">
-        <Icon as={BellIcon} w={hp('3%')} h={hp('3%')} color={colorScheme === 'dark' ? 'white' : 'black'} />
-        <Text pl={wp('1%')} numberOfLines={1} w={wp('20%')} fontSize={wp('3%')} color={colorScheme === 'dark' ? 'white' : 'black'}>Notifications</Text>
+      <Button
+        onPress={() => handleTabPress('Notifications', '/notifications')}
+        flex={1}
+        mt={hp('1%')}
+        w={wp('20%')}
+        backgroundColor="none"
+        title="Notifications"
+        flexDirection="column"
+      >
+        <Icon
+          as={BellIcon}
+          w={hp('3%')}
+          h={hp('3%')}
+          color={currentTab === 'Notifications' ? 'yellowgreen' : colorScheme === 'dark' ? 'white' : 'black'}
+        />
+        <Text
+          pl={wp('1%')}
+          numberOfLines={1}
+          w={wp('20%')}
+          fontSize={wp('3%')}
+          color={currentTab === 'Notifications' ? 'yellowgreen' : colorScheme === 'dark' ? 'white' : 'black'}
+        >
+          Notifications
+        </Text>
       </Button>
-      <Button onPress={() => router.replace('/settings')} flex={1} mt={hp('1%')} w={wp('20%')} backgroundColor="none" title="Profile" flexDirection="column">
-        <FontAwesome6 name="user" size={hp('3%')} color={colorScheme === 'dark' ? 'white' : 'black'} />
-        <Text pl={wp('1%')} numberOfLines={1} w={wp('12%')} fontSize={wp('3%')} color={colorScheme === 'dark' ? 'white' : 'black'}>Profile</Text>
+      <Button
+        onPress={() => handleTabPress('Profile', '/settings')}
+        flex={1}
+        mt={hp('1%')}
+        w={wp('20%')}
+        backgroundColor="none"
+        title="Profile"
+        flexDirection="column"
+      >
+        <FontAwesome6
+          name="user"
+          size={hp('3%')}
+          color={currentTab === 'Profile' ? 'yellowgreen' : colorScheme === 'dark' ? 'white' : 'black'}
+        />
+        <Text
+          pl={wp('1%')}
+          numberOfLines={1}
+          w={wp('12%')}
+          fontSize={wp('3%')}
+          color={currentTab === 'Profile' ? 'yellowgreen' : colorScheme === 'dark' ? 'white' : 'black'}
+        >
+          Profile
+        </Text>
       </Button>
     </BlurView>
   );
diff --git a/frontend/occupi-mobile4/components/NavBarProvider.tsx b/frontend/occupi-mobile4/components/NavBarProvider.tsx
new file mode 100644
index 00000000..e43656e5
--- /dev/null
+++ b/frontend/occupi-mobile4/components/NavBarProvider.tsx
@@ -0,0 +1,15 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const NavBarContext = createContext();
+
+export const NavBarProvider = ({ children }) => {
+  const [currentTab, setCurrentTab] = useState('');
+
+  return (
+    <NavBarContext.Provider value={{ currentTab, setCurrentTab }}>
+      {children}
+    </NavBarContext.Provider>
+  );
+};
+
+export const useNavBar = () => useContext(NavBarContext);
diff --git a/frontend/occupi-mobile4/package-lock.json b/frontend/occupi-mobile4/package-lock.json
index a77eb560..1b41a554 100644
--- a/frontend/occupi-mobile4/package-lock.json
+++ b/frontend/occupi-mobile4/package-lock.json
@@ -42,6 +42,7 @@
         "expo-system-ui": "~3.0.6",
         "expo-web-browser": "~13.0.3",
         "lucide-react-native": "^0.395.0",
+        "moti": "^0.29.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-hook-form": "^7.52.0",
@@ -2206,6 +2207,21 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -5131,6 +5147,64 @@
         }
       }
     },
+    "node_modules/@motionone/animation": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.18.0.tgz",
+      "integrity": "sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw==",
+      "dependencies": {
+        "@motionone/easing": "^10.18.0",
+        "@motionone/types": "^10.17.1",
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "dependencies": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/easing": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.18.0.tgz",
+      "integrity": "sha512-VcjByo7XpdLS4o9T8t99JtgxkdMcNWD3yHU/n6CLEz3bkmKDRZyYQ/wmSf6daum8ZXqfUAgFeCZSpJZIMxaCzg==",
+      "dependencies": {
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/generators": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.18.0.tgz",
+      "integrity": "sha512-+qfkC2DtkDj4tHPu+AFKVfR/C30O1vYdvsGYaR13W/1cczPrrcjdvYCj0VLFuRMN+lP1xvpNZHCRNM4fBzn1jg==",
+      "dependencies": {
+        "@motionone/types": "^10.17.1",
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/types": {
+      "version": "10.17.1",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.1.tgz",
+      "integrity": "sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A=="
+    },
+    "node_modules/@motionone/utils": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.18.0.tgz",
+      "integrity": "sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==",
+      "dependencies": {
+        "@motionone/types": "^10.17.1",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -12815,9 +12889,9 @@
       "dev": true
     },
     "node_modules/fast-loops": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
-      "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g=="
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.4.tgz",
+      "integrity": "sha512-8dbd3XWoKCTms18ize6JmQF1SFnnfj5s0B7rRry22EofgMu7B6LKHVh+XfFqFGsqnbH54xgeO83PzpKI+ODhlg=="
     },
     "node_modules/fast-xml-parser": {
       "version": "4.4.0",
@@ -13197,6 +13271,34 @@
         "node": ">= 6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/framesync": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/freeport-async": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/freeport-async/-/freeport-async-2.0.0.tgz",
@@ -13601,6 +13703,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -18085,6 +18192,17 @@
         "node": "*"
       }
     },
+    "node_modules/moti": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/moti/-/moti-0.29.0.tgz",
+      "integrity": "sha512-o/blVE3lm0i/6E5X0RLK59SVWEGxo7pQh8dTm+JykVCYY9bcz0lWyZFCO1s+MMNq+nMsSZBX8lkp4im/AZmhyw==",
+      "dependencies": {
+        "framer-motion": "^6.5.1"
+      },
+      "peerDependencies": {
+        "react-native-reanimated": "*"
+      }
+    },
     "node_modules/mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -19061,6 +19179,17 @@
       "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz",
       "integrity": "sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw=="
     },
+    "node_modules/popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "dependencies": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -21292,6 +21421,15 @@
       "resolved": "https://registry.npmjs.org/structured-headers/-/structured-headers-0.4.1.tgz",
       "integrity": "sha512-0MP/Cxx5SzeeZ10p/bZI0S6MpgD+yxAhi1BOQ34jgnMXsCq3j1t6tQnZu+KdlL7dvJTLT3g9xN8tl10TqgFMcg=="
     },
+    "node_modules/style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/styleq": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/styleq/-/styleq-0.1.3.tgz",
@@ -22075,9 +22213,9 @@
       }
     },
     "node_modules/undici": {
-      "version": "6.19.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-6.19.0.tgz",
-      "integrity": "sha512-9gGwbSLgYMjp4r6M5P9bhqhx1E+RyUIHqZE0r7BmrRoqroJUG6xlVu5TXH9DnwmCPLkcaVNrcYtxUE9d3InnyQ==",
+      "version": "6.19.2",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.19.2.tgz",
+      "integrity": "sha512-JfjKqIauur3Q6biAtHJ564e3bWa8VvT+7cSiOJHFbX4Erv6CLGDpg8z+Fmg/1OI/47RA+GI2QZaF48SSaLvyBA==",
       "engines": {
         "node": ">=18.17"
       }
diff --git a/frontend/occupi-mobile4/package.json b/frontend/occupi-mobile4/package.json
index 523c4813..932fa432 100644
--- a/frontend/occupi-mobile4/package.json
+++ b/frontend/occupi-mobile4/package.json
@@ -52,6 +52,7 @@
     "expo-system-ui": "~3.0.6",
     "expo-web-browser": "~13.0.3",
     "lucide-react-native": "^0.395.0",
+    "moti": "^0.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.52.0",
diff --git a/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx b/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx
index 0a1f8c9c..a6cc44df 100644
--- a/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx
+++ b/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx
@@ -12,6 +12,7 @@ import {
 import Navbar from '../../components/NavBar';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
 import * as SecureStore from 'expo-secure-store';
+import { Skeleton } from 'moti/skeleton';
 
 const groupDataInPairs = (data) => {
   if (!data) return [];
@@ -39,11 +40,12 @@ const BookRoom = () => {
   const toast = useToast();
   const [isDarkMode, setIsDarkMode] = useState(colorScheme === 'dark');
   const [layout, setLayout] = useState("row");
+  const [loading, setLoading] = useState(true);
   const [roomData, setRoomData] = useState<Room[]>([]);
   const toggleLayout = () => {
     setLayout((prevLayout) => (prevLayout === "row" ? "grid" : "row"));
   };
-  const apiUrl = process.env.EXPO_PUBLIC_LOCAL_API_URL;
+  const apiUrl = process.env.EXPO_PUBLIC_DEVELOP_API_URL;
   const viewroomsendpoint = process.env.EXPO_PUBLIC_VIEW_ROOMS;
 
   useEffect(() => {
@@ -62,18 +64,10 @@ const BookRoom = () => {
         // console.log(data);
         if (response.ok) {
           setRoomData(data.data || []); // Ensure data is an array
-          // toast.show({
-          //   placement: 'top',
-          //   render: ({ id }) => {
-          //     return (
-          //       <Toast nativeID={id} variant="accent" action="success">
-          //         <ToastTitle>{data.message}</ToastTitle>
-          //       </Toast>
-          //     );
-          //   },
-          // });
+          setLoading(false);
         } else {
           console.log(data);
+          setLoading(false);
           toast.show({
             placement: 'top',
             render: ({ id }) => {
@@ -142,7 +136,20 @@ const BookRoom = () => {
             </TouchableOpacity>
           </View>
         </View>
-        {layout === "grid" ? (
+        {loading === true ? (
+                <>
+                    <View mt='$4' paddingHorizontal={11}>
+                        <Skeleton colorMode={isDarkMode ? 'dark' : 'light'} height={160} width={"100%"} />
+                    </View>
+                    <View mt='$2' paddingHorizontal={11}>
+                        <Skeleton colorMode={isDarkMode ? 'dark' : 'light'} height={160} width={"100%"} />
+                    </View>
+                    <View mt='$2' paddingHorizontal={11}>
+                        <Skeleton colorMode={isDarkMode ? 'dark' : 'light'} height={160} width={"100%"} />
+                    </View>
+                </>
+            ) :
+        layout === "grid" ? (
           <ScrollView style={{ flex: 1, marginTop: 10, paddingHorizontal: 11, marginBottom: 84 }} showsVerticalScrollIndicator={false}>
             {roomPairs.map((pair, index) => (
               <View key={index} style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20 }}>
diff --git a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx
index fb34d61f..a15d1703 100644
--- a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx
+++ b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { ScrollView, useColorScheme, TouchableOpacity, RefreshControl, StyleSheet } from 'react-native';
 import {
-    Icon, View, Text, Input, InputField, Image, Box, ChevronDownIcon, Toast,
+    Icon, View, Text, Input, InputField, Image, Box, ChevronDownIcon, Toast, Stack,
     ToastTitle,
     useToast,
 } from '@gluestack-ui/themed';
@@ -13,6 +13,7 @@ import { Ionicons } from '@expo/vector-icons';
 import Navbar from '../../components/NavBar';
 import * as SecureStore from 'expo-secure-store';
 import { useRouter } from 'expo-router';
+import { Skeleton } from 'moti/skeleton';
 
 const groupDataInPairs = (data) => {
     const pairs = [];
@@ -57,8 +58,9 @@ const ViewBookings = () => {
     // const [selectedSort, setSelectedSort] = useState("newest");
     const [email, setEmail] = useState('');
     const router = useRouter();
+    const [loading, setLoading] = useState(true);
     const [refreshing, setRefreshing] = useState(false);
-    const apiUrl = process.env.EXPO_PUBLIC_LOCAL_API_URL;
+    const apiUrl = process.env.EXPO_PUBLIC_DEVELOP_API_URL;
     const viewbookingsendpoint = process.env.EXPO_PUBLIC_VIEW_BOOKINGS;
 
 
@@ -78,19 +80,10 @@ const ViewBookings = () => {
                 const data = await response.json();
                 if (response.ok) {
                     setRoomData(data.data || []); // Ensure data is an array
-                    // console.log(data);
-                    // toast.show({
-                    //     placement: 'top',
-                    //     render: ({ id }) => {
-                    //         return (
-                    //             <Toast nativeID={id} variant="accent" action="success">
-                    //                 <ToastTitle>{data.message}</ToastTitle>
-                    //             </Toast>
-                    //         );
-                    //     },
-                    // });
+                    setLoading(false);
                 } else {
                     console.log(data);
+                    setLoading(false);
                     toast.show({
                         placement: 'top',
                         render: ({ id }) => {
@@ -173,19 +166,10 @@ const ViewBookings = () => {
                 // console.log(data);
                 if (response.ok) {
                     setRoomData(data.data || []); // Ensure data is an array
-                    // console.log(data);
-                    // toast.show({
-                    //     placement: 'top',
-                    //     render: ({ id }) => {
-                    //         return (
-                    //             <Toast nativeID={id} variant="accent" action="success">
-                    //                 <ToastTitle>{data.message}</ToastTitle>
-                    //             </Toast>
-                    //         );
-                    //     },
-                    // });
+                    setLoading(false);
                 } else {
                     console.log(data);
+                    setLoading(false);
                     toast.show({
                         placement: 'top',
                         render: ({ id }) => {
@@ -289,126 +273,140 @@ const ViewBookings = () => {
                     </TouchableOpacity>
                 </View>
             </View>
-            {layout === "grid" ? (
-                <ScrollView
-                    style={{ flex: 1, marginTop: 10, marginBottom: 84 }}
-                    showsVerticalScrollIndicator={false}
-                    refreshControl={
-                        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-                    }
-                >
-                    {roomPairs.map((pair, index) => (
-                        <View
-                            key={index}
-                            style={{
-                                flexDirection: 'row',
-                                justifyContent: 'space-between',
-                                marginBottom: 20,
-                            }}
-                        >
-                            {pair.map((room) => (
-                                <TouchableOpacity
-                                    onPress={() => handleRoomClick(JSON.stringify(room))}
-                                    style={{
-                                        flex: 1,
-                                        borderWidth: 1,
-                                        borderColor: cardBackgroundColor,
-                                        borderRadius: 12,
-                                        backgroundColor: cardBackgroundColor,
-                                        marginHorizontal: 4,
-                                        width: '45%'
-                                    }}>
-                                    <Image
-                                        w="$full"
-                                        h="$24"
-                                        alt="image"
-                                        borderRadius={10}
-                                        source={'https://content-files.shure.com/OriginFiles/BlogPosts/best-layouts-for-conference-rooms/img5.png'}
-                                    />
-                                    <View
-                                        // key={room.title}
+
+            {loading === true ? (
+                <>
+                    <View mt='$4'>
+                        <Skeleton colorMode={isDarkMode ? 'dark' : 'light'} height={160} width={"100%"} />
+                    </View>
+                    <View mt='$2'>
+                        <Skeleton colorMode={isDarkMode ? 'dark' : 'light'} height={160} width={"100%"} />
+                    </View>
+                    <View mt='$2'>
+                        <Skeleton colorMode={isDarkMode ? 'dark' : 'light'} height={160} width={"100%"} />
+                    </View>
+                </>
+            ) :
+                layout === "grid" ? (
+                    <ScrollView
+                        style={{ flex: 1, marginTop: 10, marginBottom: 84 }}
+                        showsVerticalScrollIndicator={false}
+                        refreshControl={
+                            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+                        }
+                    >
+                        {roomPairs.map((pair, index) => (
+                            <View
+                                key={index}
+                                style={{
+                                    flexDirection: 'row',
+                                    justifyContent: 'space-between',
+                                    marginBottom: 20,
+                                }}
+                            >
+                                {pair.map((room) => (
+                                    <TouchableOpacity
+                                        onPress={() => handleRoomClick(JSON.stringify(room))}
                                         style={{
-                                            padding: 10,
-                                        }}
-                                    >
-                                        <View>
-                                            <Text style={{ fontSize: 18, fontWeight: 'bold', color: textColor }}>{room.roomName}</Text>
-                                            <View flexDirection="row" alignItems="center">
-                                                <Octicons name="people" size={22} color={isDarkMode ? '#fff' : '#000'} /><Text style={{ color: textColor }} fontSize={15}> Attendees: {room.emails.length}</Text>
+                                            flex: 1,
+                                            borderWidth: 1,
+                                            borderColor: cardBackgroundColor,
+                                            borderRadius: 12,
+                                            backgroundColor: cardBackgroundColor,
+                                            marginHorizontal: 4,
+                                            width: '45%'
+                                        }}>
+                                        <Image
+                                            w="$full"
+                                            h="$24"
+                                            alt="image"
+                                            borderRadius={10}
+                                            source={'https://content-files.shure.com/OriginFiles/BlogPosts/best-layouts-for-conference-rooms/img5.png'}
+                                        />
+                                        <View
+                                            // key={room.title}
+                                            style={{
+                                                padding: 10,
+                                            }}
+                                        >
+                                            <View>
+                                                <Text style={{ fontSize: 18, fontWeight: 'bold', color: textColor }}>{room.roomName}</Text>
+                                                <View flexDirection="row" alignItems="center">
+                                                    <Octicons name="people" size={22} color={isDarkMode ? '#fff' : '#000'} /><Text style={{ color: textColor }} fontSize={15}> Attendees: {room.emails.length}</Text>
+                                                </View>
+                                                <Text color={isDarkMode ? '#fff' : '#000'} fontWeight="$light" my="$1">Your booking time:</Text>
+                                            </View>
+                                            <View flexDirection="row" alignItems="center" justifyContent="space-between">
+                                                <View>
+                                                    <Text my="$1" fontSize={14} fontWeight="$light" color={textColor}>{extractDateFromDate(room.date)} </Text>
+                                                    <Text>{extractTimeFromDate(room.start)}-{extractTimeFromDate(room.end)}</Text>
+                                                </View>
+                                                <SimpleLineIcons name="options" size={24} color={isDarkMode ? "white" : "black"} />
                                             </View>
-                                            <Text color={isDarkMode ? '#fff' : '#000'} fontWeight="$light" my="$1">Your booking time:</Text>
                                         </View>
-                                        <View flexDirection="row" alignItems="center" justifyContent="space-between">
+                                    </TouchableOpacity>
+                                ))}
+                            </View>
+                        ))}
+                    </ScrollView>
+                ) : (
+                    <ScrollView
+                        style={{ flex: 1, marginTop: 10, marginBottom: 84 }}
+                        showsVerticalScrollIndicator={false}
+                        refreshControl={
+                            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+                        }
+                    >
+                        {roomData.map((room) => (
+                            <TouchableOpacity
+                                onPress={() => handleRoomClick(JSON.stringify(room))}
+                                style={{
+                                    flex: 1,
+                                    borderWidth: 1,
+                                    borderColor: cardBackgroundColor,
+                                    borderRadius: 12,
+                                    height: 160,
+                                    backgroundColor: cardBackgroundColor,
+                                    marginVertical: 4,
+                                    flexDirection: "row"
+
+                                }}>
+                                <Image
+                                    width={"50%"}
+                                    h="$full"
+                                    alt="image"
+                                    borderRadius={10}
+                                    source={'https://content-files.shure.com/OriginFiles/BlogPosts/best-layouts-for-conference-rooms/img5.png'}
+                                />
+                                <View
+                                    // key={room.title}
+                                    w="$48"
+                                    style={{
+                                        padding: 10,
+                                        flexDirection: "column",
+                                        justifyContent: "space-between"
+                                    }}
+                                >
+                                    <Text style={{ fontSize: 17, fontWeight: 'bold', color: textColor }}>{room.roomName}</Text>
+                                    <View flexDirection="row" alignItems="center">
+                                        <Octicons name="people" size={22} color={isDarkMode ? '#fff' : '#000'} /><Text style={{ color: textColor }} fontSize={15}> Attendees: {room.emails.length}</Text>
+                                    </View>
+                                    <View flexDirection="column">
+                                        <Text my="$1" fontWeight="$light" color={isDarkMode ? '#fff' : '#000'}>Your booking time:</Text>
+                                        <View flexDirection="row" alignItems="center" justifyContent="space-between" pr="$4">
                                             <View>
-                                                <Text my="$1" fontSize={14} fontWeight="$light" color={textColor}>{extractDateFromDate(room.date)} </Text>
+                                                <Text my="$1" fontSize={14} fontWeight="$light" color={textColor}>{extractDateFromDate(room.date)}</Text>
                                                 <Text>{extractTimeFromDate(room.start)}-{extractTimeFromDate(room.end)}</Text>
                                             </View>
                                             <SimpleLineIcons name="options" size={24} color={isDarkMode ? "white" : "black"} />
                                         </View>
                                     </View>
-                                </TouchableOpacity>
-                            ))}
-                        </View>
-                    ))}
-                </ScrollView>
-            ) : (
-                <ScrollView
-                    style={{ flex: 1, marginTop: 10, marginBottom: 84 }}
-                    showsVerticalScrollIndicator={false}
-                    refreshControl={
-                        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-                    }
-                >
-                    {roomData.map((room) => (
-                        <TouchableOpacity
-                            onPress={() => handleRoomClick(JSON.stringify(room))}
-                            style={{
-                                flex: 1,
-                                borderWidth: 1,
-                                borderColor: cardBackgroundColor,
-                                borderRadius: 12,
-                                height: 160,
-                                backgroundColor: cardBackgroundColor,
-                                marginVertical: 4,
-                                flexDirection: "row"
 
-                            }}>
-                            <Image
-                                width={"50%"}
-                                h="$full"
-                                alt="image"
-                                borderRadius={10}
-                                source={'https://content-files.shure.com/OriginFiles/BlogPosts/best-layouts-for-conference-rooms/img5.png'}
-                            />
-                            <View
-                                // key={room.title}
-                                w="$48"
-                                style={{
-                                    padding: 10,
-                                    flexDirection: "column",
-                                    justifyContent: "space-between"
-                                }}
-                            >
-                                <Text style={{ fontSize: 17, fontWeight: 'bold', color: textColor }}>{room.roomName}</Text>
-                                <View flexDirection="row" alignItems="center">
-                                    <Octicons name="people" size={22} color={isDarkMode ? '#fff' : '#000'} /><Text style={{ color: textColor }} fontSize={15}> Attendees: {room.emails.length}</Text>
                                 </View>
-                                <View flexDirection="column">
-                                    <Text my="$1" fontWeight="$light" color={isDarkMode ? '#fff' : '#000'}>Your booking time:</Text>
-                                    <View flexDirection="row" alignItems="center" justifyContent="space-between" pr="$4">
-                                        <View>
-                                            <Text my="$1" fontSize={14} fontWeight="$light" color={textColor}>{extractDateFromDate(room.date)}</Text>
-                                            <Text>{extractTimeFromDate(room.start)}-{extractTimeFromDate(room.end)}</Text>
-                                        </View>
-                                        <SimpleLineIcons name="options" size={24} color={isDarkMode ? "white" : "black"} />
-                                    </View>
-                                </View>
-
-                            </View>
-                        </TouchableOpacity>
-                    ))}
-                </ScrollView>
-            )}
+                            </TouchableOpacity>
+                        ))}
+                    </ScrollView>
+                )}
             <Navbar style={{ position: 'absolute', bottom: 0, width: '100%' }} />
         </View>
     );
diff --git a/frontend/occupi-mobile4/screens/Login/OtpVerification.tsx b/frontend/occupi-mobile4/screens/Login/OtpVerification.tsx
index 6011eb01..0e17aa20 100644
--- a/frontend/occupi-mobile4/screens/Login/OtpVerification.tsx
+++ b/frontend/occupi-mobile4/screens/Login/OtpVerification.tsx
@@ -67,7 +67,7 @@ const OTPVerification = () => {
     console.log(pin);
     setLoading(true);
     try {
-      const response = await fetch('https://dev.occupi.tech/auth/verify-otp', {
+      const response = await fetch('https://dev.occupi.tech/auth/verify-otp-mobile-login', {
         method: 'POST',
         headers: {
           Accept: 'application/json',
@@ -82,6 +82,7 @@ const OTPVerification = () => {
       const data = await response.json();
       if (response.ok) {
         setLoading(false);
+        console.log(data);
         toast.show({
               placement: 'top',
               render: ({ id }) => {
diff --git a/frontend/occupi-mobile4/screens/Login/SignIn.tsx b/frontend/occupi-mobile4/screens/Login/SignIn.tsx
index 083b56ff..1f726722 100644
--- a/frontend/occupi-mobile4/screens/Login/SignIn.tsx
+++ b/frontend/occupi-mobile4/screens/Login/SignIn.tsx
@@ -67,7 +67,7 @@ const SignInForm = () => {
   } = useForm<SignInSchemaType>({
     resolver: zodResolver(signInSchema),
   });
-  const apiUrl = process.env.EXPO_PUBLIC_LOCAL_API_URL;
+  const apiUrl = process.env.EXPO_PUBLIC_DEVELOP_API_URL;
   const loginUrl = process.env.EXPO_PUBLIC_LOGIN;
   const getUserDetailsUrl= process.env.EXPO_PUBLIC_GET_USER_DETAILS;
   console.log(apiUrl + "" +loginUrl);
@@ -96,6 +96,10 @@ const SignInForm = () => {
     await SecureStore.setItemAsync('Token', value);
   }
 
+  async function storeUserEmail(value) {
+    await SecureStore.setItemAsync('Email', value);
+  }
+
 
   const handleBiometricSignIn = async () => {
     const biometricType = await LocalAuthentication.supportedAuthenticationTypesAsync();
@@ -188,7 +192,6 @@ const SignInForm = () => {
         try {
           let authToken = await SecureStore.getItemAsync('Token');
           // console.log(authToken);
-
           const response = await fetch(`${apiUrl}${getUserDetailsUrl}?email=${_data.email}`, {
             method: 'GET',
             headers: {
diff --git a/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx b/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx
index 3e0c538a..2a9b5ad9 100644
--- a/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx
+++ b/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx
@@ -93,7 +93,7 @@ export default function SplashScreen() {
   useEffect(() => {
     const timer = setTimeout(() => {
       setSelectedIndex(1); // Assuming Onboarding1 is at index 1
-      router.replace('/settings'); // Navigate to Onboarding1 screen
+      router.replace('/verify-otp'); // Navigate to Onboarding1 screen
     }, 5000); // 8 seconds
 
     return () => clearTimeout(timer); // Clean up timer on component unmount
diff --git a/frontend/occupi-mobile4/screens/Settings/Profile.tsx b/frontend/occupi-mobile4/screens/Settings/Profile.tsx
index a902d670..30b03cac 100644
--- a/frontend/occupi-mobile4/screens/Settings/Profile.tsx
+++ b/frontend/occupi-mobile4/screens/Settings/Profile.tsx
@@ -57,7 +57,7 @@ const Profile = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
   let colorScheme = useColorScheme();
-  const apiUrl = process.env.EXPO_PUBLIC_LOCAL_API_URL;
+  const apiUrl = process.env.EXPO_PUBLIC_DEVELOP_API_URL;
   const getUserDetailsUrl= process.env.EXPO_PUBLIC_GET_USER_DETAILS;
   const updateDetailsUrl = process.env.EXPO_PUBLIC_UPDATE_USER_DETAILS;
   console.log(apiUrl, getUserDetailsUrl, updateDetailsUrl);