diff --git a/mobile-ui/App.js b/mobile-ui/App.js
index 9f43ccee..fd210975 100644
--- a/mobile-ui/App.js
+++ b/mobile-ui/App.js
@@ -1,27 +1,60 @@
-import React from "react";
+import React,{useState} from "react";
 import {
-  NativeBaseProvider
+  NativeBaseProvider, 
+  Icon
 } from "native-base";
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import LogIn from "./components/LogIn";
 import Home from "./components/Home";
 import RecoverPassword from "./components/RecoverPassword";
+import Reservas from "./components/Reservas";
+import Profile from "./components/Profile"; 
+import { MaterialCommunityIcons } from '@expo/vector-icons'; 
+import AreaComun from "./components/AreaComun";
 
 const Stack = createNativeStackNavigator();
+const Tab = createBottomTabNavigator(); 
 
+
+
+function HomeTab() {
+
+const [selected, setSelected] = useState(0);
+
+  return (
+    <Tab.Navigator initialRouteName="Comunicados" > 
+    <Tab.Screen  name="Comunicados" component={Home} options={{headerStyle: {
+      backgroundColor: "#D7A86E"
+    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(0)} /> 
+    <Tab.Screen  name="Reservas" component={Reservas } options={{headerStyle: {
+      backgroundColor: "#D7A86E"
+    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="#D7A86E" size="md" />)} } onclick={() => setSelected(1)}  /> 
+    <Tab.Screen  name="Perfil" component={Profile} options={{headerStyle: {
+      backgroundColor: "#D7A86E"
+    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(2)} /> 
+  </Tab.Navigator>
+  )
+}
 export default function App() {
   return (
     <NativeBaseProvider>
 
     <NavigationContainer>
       <Stack.Navigator initialRouteName="LogIn">
-        <Stack.Screen name="Inicio" component={LogIn} />
-        <Stack.Screen name="Home" component={Home} />
-       <Stack.Screen name="Password" component={RecoverPassword} />
+        <Stack.Screen name="Inicio" component={LogIn} options={{headerStyle: {
+      backgroundColor: "#D7A86E"
+    }}} />
+        <Stack.Screen name="Comunicados" component={HomeTab} options={{headerShown: false}} />
+        <Stack.Screen name="Password" component={RecoverPassword} />
+        <Stack.Screen name="area" component={AreaComun} options={{headerStyle: {
+      backgroundColor: "#D7A86E"
+    }}} />
       </Stack.Navigator>
+
+    
     </NavigationContainer>
-      
     </NativeBaseProvider>
   );
 }
\ No newline at end of file
diff --git a/mobile-ui/components/AreaComun.js b/mobile-ui/components/AreaComun.js
new file mode 100644
index 00000000..ddd29bd2
--- /dev/null
+++ b/mobile-ui/components/AreaComun.js
@@ -0,0 +1,53 @@
+import React from "react";
+
+import {
+    Box, 
+    Heading, 
+    VStack, 
+    FormControl, 
+    Input, 
+    Button,
+    Center
+  } from "native-base";
+
+export default function AreaComun({navigation}){
+
+    return (
+        <Center>
+             <Box safeArea p="2" w="90%" maxW="290" py="8">
+        <Heading size="lg" color="coolGray.800" _dark={{
+        color: "warmGray.50"
+      }} fontWeight="semibold">
+          Katoikia
+        </Heading>
+        <Heading mt="1" color="coolGray.600" _dark={{
+        color: "warmGray.200"
+      }} fontWeight="medium" size="xs">
+         Reserve su área común 
+        </Heading>
+        <VStack space={3} mt="5">
+          <FormControl>
+            <FormControl.Label>Hora de inicio</FormControl.Label>
+            <Input type="text"/>
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Hora de finalización</FormControl.Label>
+            <Input type="text" />
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Lugar</FormControl.Label>
+            <Input type="text" />
+          </FormControl>
+        
+          <Button mt="2" backgroundColor="orange.300">
+            Reservar
+          </Button>
+          <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Comunicados')}>
+            Cancelar
+          </Button>
+        </VStack>
+      </Box>
+        </Center>
+       
+    )
+}
\ No newline at end of file
diff --git a/mobile-ui/components/Home.js b/mobile-ui/components/Home.js
index 6f35a009..ab60fb52 100644
--- a/mobile-ui/components/Home.js
+++ b/mobile-ui/components/Home.js
@@ -2,34 +2,100 @@ import React from "react";
 import {
     Text,
     HStack,
-    IconButton,
+    Badge,
     Box,
-    StatusBar,
-    Icon, 
-    MaterialIcons,
-    Center
+Pressable,
+    Spacer, 
   } from "native-base";
-
+  import { MaterialCommunityIcons } from '@expo/vector-icons'; 
 export default function Home(){
 
+  const [selected, setSelected] = React.useState(0);
     return (
-        <Center width={"100%"} marginTop={"auto"}>
-             <StatusBar bg="#D7A86E" barStyle="light-content" />
-      <Box safeAreaTop bg="#D7A86E" />
-      <HStack bg="#D7A86E" px="2" py="4" justifyContent="space-between" alignItems="center" w="100%" maxW="100%">
-        <HStack alignItems="center">
-          <IconButton icon={<Icon size="sm" as={MaterialIcons} name="menu" color="white" />} />
-          <Text color="white" fontSize="20" fontWeight="bold">
-            Home
+
+      <Box alignItems="center">
+      <Pressable onPress={() => console.log("I'm Pressed")} rounded="8" overflow="hidden" borderWidth="1" borderColor="coolGray.300" maxW="96" shadow="3" bg="coolGray.100" p="5" marginTop="4">
+        <Box>
+          <HStack alignItems="center">
+            <Badge colorScheme="darkBlue" _text={{
+            color: "white"
+          }} variant="solid" rounded="4">
+              Comunicado
+            </Badge>
+            <Spacer />
+            <Text fontSize={10} color="coolGray.800">
+              1 month ago
+            </Text>
+          </HStack>
+          <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
+            Administrador de Comunidad
           </Text>
-        </HStack>
-        <HStack>
-          <IconButton icon={<Icon as={MaterialIcons} name="favorite" size="sm" color="white" />} />
-          <IconButton icon={<Icon as={MaterialIcons} name="search" size="sm" color="white" />} />
-          <IconButton icon={<Icon as={MaterialIcons} name="more-vert" size="sm" color="white" />} />
-        </HStack>
-      </HStack>
-      </Center>
+          <Text mt="2" fontSize="sm" color="coolGray.700">
+            Notificacion sobre la aplicacion
+          </Text>
+         
+        </Box>
+      </Pressable>
+      <Pressable onPress={() => console.log("I'm Pressed")} rounded="8" overflow="hidden" borderWidth="1" borderColor="coolGray.300" maxW="96" shadow="3" bg="coolGray.100" p="5" marginTop="4">
+        <Box>
+          <HStack alignItems="center">
+            <Badge colorScheme="darkBlue" _text={{
+            color: "white"
+          }} variant="solid" rounded="4">
+              Comunicado
+            </Badge>
+            <Spacer />
+            <Text fontSize={10} color="coolGray.800">
+              1 month ago
+            </Text>
+          </HStack>
+          <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
+            Administrador General
+          </Text>
+          <Text mt="2" fontSize="sm" color="coolGray.700">
+            Notificacion sobre la aplicacion
+          </Text>
+         
+        </Box>
+      </Pressable>
+    </Box>
+      //   <Center width={"100%"} marginTop={"auto"}>
+           
+      // <Box safeAreaTop bg="#D7A86E" flex={1} />
+      // <HStack bg="#D7A86E" px="2" py="4" justifyContent="space-between" alignItems="center" w="100%" maxW="100%">
+
+      //   <Pressable opacity={selected === 0 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(0) && navigation.navigate('Home')}>
+      //       <Center>
+      //         <Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="white" size="md" />
+      //         <Text color="white" fontSize="15">
+      //           Inicio
+      //         </Text>
+      //       </Center>
+      //     </Pressable>
+      
+        
+      //   <Pressable opacity={selected === 1 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(1) && ( () => navigation.navigate('Reservas'))}>
+      //       <Center>
+      //         <Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="white" size="md" />
+      //         <Text color="white" fontSize="15">
+      //           Reservas
+      //         </Text>
+      //       </Center>
+      //     </Pressable>
+      
+       
+      //   <Pressable opacity={selected === 2 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(2)}>
+      //       <Center>
+      //         <Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="white" size="md" />
+      //         <Text color="white" fontSize="15">
+      //           Perfil
+      //         </Text>
+      //       </Center>
+      //     </Pressable>
+     
+        
+      // </HStack>
+      // </Center>
        
     )
 }
\ No newline at end of file
diff --git a/mobile-ui/components/LogIn.js b/mobile-ui/components/LogIn.js
index c5b5e76d..eeb75cb9 100644
--- a/mobile-ui/components/LogIn.js
+++ b/mobile-ui/components/LogIn.js
@@ -1,21 +1,92 @@
 import React from "react";
+import Cookies from 'universal-cookie';
 import {
   Text,
   Link,
-  View,
   Center,
   Heading,
   VStack,
   Box,
   FormControl,
-  Input,
   Button,
-  Image, 
-  TextInput
+  Image
 } from "native-base";
 import logo from "../assets/logo-katoikia.png";
 import { Entypo } from '@expo/vector-icons'; 
 import { MaterialCommunityIcons } from '@expo/vector-icons'; 
+import { View, TextInput, StyleSheet } from "react-native";
+
+const baseURL = "http://localhost:4000/user/loginUser"; 
+const cookies = new Cookies(); 
+
+const styles = StyleSheet.create({
+  input: {
+    height: 40,
+    margin: 10,
+    borderWidth: 0.5,
+    padding: 5,
+    flex: 1,
+    paddingTop: 10,
+    paddingRight: 10,
+    paddingBottom: 10,
+    paddingLeft: 0,
+    marginTop: 50, 
+    marginBottom: 10
+  }, 
+
+  iconStyle: {
+    padding: 10, 
+  }, 
+
+  viewSection: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 10
+  },
+
+  container: {
+
+  }
+})
+
+const iniciarSesion = async()  => {
+
+  try {
+
+    await fetch(baseURL, {
+      cache: 'no-cache', 
+      method: 'POST', 
+      body: JSON.stringify(), 
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    .then(response => {
+      if (response.status != 201){
+        console.log('ocurrio un error ');
+      }else{
+        return response.json(); 
+      }
+    })
+    .then( response => {
+       const user = response.message
+
+        if(user.user_type == '3'){
+          cookies.set('id',user._id, {path: "/"} )
+          cookies.set('name',user.name, {path: "/"} )
+          cookies.set('email',user.email, {path: "/"} )
+          cookies.set('type',user.user_type, {path: "/"} )
+        }
+    })
+    
+  } catch (error) {
+    
+  }
+
+   
+}
 
 export default function LogIn({navigation}) {
   return (
@@ -23,11 +94,15 @@ export default function LogIn({navigation}) {
       
       <Center w="100%">
         <Box safeArea p="2" py="8" w="90%" maxW="290">
-        <Image source={
+
+          <Center> 
+          <Image  source={
           logo
-        } width={500} height={550}
+        } width={500} height={550} m='2'
     alt="Katoikia logo" size="xl" justifyContent="center" />
 
+          </Center>
+      
           <Heading
             size="lg"
             fontWeight="600"
@@ -50,27 +125,29 @@ export default function LogIn({navigation}) {
              Su app de comunidad de confianza
           </Heading>
 
-          <VStack space={3} mt="5">
+<View style={styles.container}>
+  <VStack space={3} mt="5">
             <FormControl>
               <FormControl.Label> Correo Electrónico </FormControl.Label>
 
-              <View> 
-              <Entypo name="email" size={20} color="grey" />
-              <Input type="text" />
+              <View style={styles.viewSection}> 
+              <Entypo name="email" size={20} color="grey" style={styles.iconStyle} />
+              <TextInput type="text" style={styles.input} />
               </View>
               
             </FormControl>
             <FormControl>
             <FormControl.Label> Contraseña </FormControl.Label>
-                <View> 
-                <MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" />
-                <Input type="password" />
+                <View style={styles.viewSection}> 
+                <MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" style={styles.iconStyle}/>
+                <TextInput type="password" style={styles.input} />
                 </View>
               <Link
                 _text={{
                   fontSize: "xs",
                   fontWeight: "500",
                   color: "indigo.500",
+                  marginTop: "10"
                 }}
                 alignSelf="flex-end"
                 mt="1"
@@ -82,13 +159,17 @@ export default function LogIn({navigation}) {
                
               </Link>
             </FormControl>
-            <Button  mt="2" colorScheme="primary" onPress={() => navigation.navigate('Home')}
+            <Button  mt="2" backgroundColor="#D7A86E" onPress={() => navigation.navigate('Comunicados')}
             >
               <Text>Continuar</Text>
             </Button>
            
-          </VStack>
+          </VStack></View>
+          
         </Box>
       </Center>
   );
+
+
+ 
 }
\ No newline at end of file
diff --git a/mobile-ui/components/Profile.js b/mobile-ui/components/Profile.js
index e69de29b..79e4b9b5 100644
--- a/mobile-ui/components/Profile.js
+++ b/mobile-ui/components/Profile.js
@@ -0,0 +1,57 @@
+import React from "react";
+
+import {
+    Box, 
+    Heading, 
+    VStack, 
+    FormControl, 
+    Input, 
+    Button,
+    Center
+  } from "native-base";
+
+export default function Profile({navigation}){
+
+    return (
+        <Center>
+             <Box safeArea p="2" w="90%" maxW="290" py="8">
+        <Heading size="lg" color="coolGray.800" _dark={{
+        color: "warmGray.50"
+      }} fontWeight="semibold">
+          Katoikia
+        </Heading>
+        <Heading mt="1" color="coolGray.600" _dark={{
+        color: "warmGray.200"
+      }} fontWeight="medium" size="xs">
+          Modifique sus datos
+        </Heading>
+        <VStack space={3} mt="5">
+          <FormControl>
+            <FormControl.Label>Nombre</FormControl.Label>
+            <Input type="text"/>
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Correo Electrónico</FormControl.Label>
+            <Input type="text" />
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Teléfono</FormControl.Label>
+            <Input type="text" />
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Contraseña actual</FormControl.Label>
+            <Input type="password" />
+          </FormControl>
+          
+          <Button mt="2" backgroundColor="orange.300">
+            Actualizar
+          </Button>
+          <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Inicio')}>
+            Cerrar sesión
+          </Button>
+        </VStack>
+      </Box>
+        </Center>
+       
+    )
+}
\ No newline at end of file
diff --git a/mobile-ui/components/Reservas.js b/mobile-ui/components/Reservas.js
new file mode 100644
index 00000000..dd5b8532
--- /dev/null
+++ b/mobile-ui/components/Reservas.js
@@ -0,0 +1,148 @@
+import React from "react";
+import {
+  Text,
+  HStack,
+  AntDesign,
+  Heading,
+  Stack,
+  Box,
+  ScrollView,
+  Fab,
+  Icon
+} from "native-base";
+import logo from "../assets/logo-katoikia.png";
+import { Entypo } from '@expo/vector-icons'; 
+import { MaterialCommunityIcons } from '@expo/vector-icons'; 
+import { View, TextInput, StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  input: {
+    height: 40,
+    margin: 10,
+    borderWidth: 0.5,
+    padding: 5,
+    flex: 1,
+    paddingTop: 10,
+    paddingRight: 10,
+    paddingBottom: 10,
+    paddingLeft: 0,
+    marginTop: 50, 
+    marginBottom: 10
+  }, 
+
+  iconStyle: {
+    padding: 10, 
+  }, 
+
+  viewSection: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 10
+  },
+
+  container: {
+
+  }
+})
+
+export default function Reservas({navigation}) {
+  return (
+  
+    <ScrollView showsVerticalScrollIndicator={false}>
+          
+       
+      
+    <Box alignItems="center">
+      <Box width="80" rounded="lg" overflow="hidden" borderColor="coolGray.200" borderWidth="1" _dark={{
+      borderColor: "coolGray.600",
+      backgroundColor: "gray.700"
+    }} _web={{
+      shadow: 2,
+      borderWidth: 0
+    }} _light={{
+      backgroundColor: "gray.50"
+    }}>
+        <Stack p="4" space={3}>
+          <Stack space={2}>
+            <Heading size="md" ml="-1">
+              Reserva #1
+            </Heading>
+            <Text fontSize="xs" _light={{
+            color: "violet.500"
+          }} _dark={{
+            color: "violet.400"
+          }} fontWeight="500" ml="-0.5" mt="-1">
+              horario de Reserva
+            </Text>
+          </Stack>
+          <Text fontWeight="400">
+            Descripcion
+          </Text>
+          <HStack alignItems="center" space={4} justifyContent="space-between">
+            <HStack alignItems="center">
+              <Text color="coolGray.600" _dark={{
+              color: "warmGray.200"
+            }} fontWeight="400">
+                6 mins ago
+              </Text>
+            </HStack>
+          </HStack>
+        </Stack>
+      </Box>
+    </Box>
+
+    <Box alignItems="center" width={"100%"}>
+      <Box width="80" rounded="lg" overflow="hidden" borderColor="coolGray.200" borderWidth="1" _dark={{
+      borderColor: "coolGray.600",
+      backgroundColor: "gray.700"
+    }} _web={{
+      shadow: 2,
+      borderWidth: 0
+    }} _light={{
+      backgroundColor: "gray.50"
+    }}>
+        
+        <Stack p="4" space={3}>
+          <Stack space={2}>
+            <Heading size="md" ml="-1">
+              Reserva #1
+            </Heading>
+            <Text fontSize="xs" _light={{
+            color: "violet.500"
+          }} _dark={{
+            color: "violet.400"
+          }} fontWeight="500" ml="-0.5" mt="-1">
+              horario de Reserva
+            </Text>
+          </Stack>
+          <Text fontWeight="400">
+            Descripcion
+          </Text>
+          <HStack alignItems="center" space={4} justifyContent="space-between">
+            <HStack alignItems="center">
+              <Text color="coolGray.600" _dark={{
+              color: "warmGray.200"
+            }} fontWeight="400">
+                6 mins ago
+              </Text>
+            </HStack>
+          </HStack>
+        </Stack>
+      </Box>
+    </Box>
+
+    <Box height="200" w="300" shadow="2" rounded="lg" m='5' ml='9' _dark={{
+      bg: "coolGray.200:alpha.20"
+    }} _light={{
+      bg: "coolGray.200:alpha.20"
+    }}>
+        <Fab renderInPortal={false} shadow={2} size="sm" icon={<Icon mb="0.5" as={<MaterialCommunityIcons name={'plus'} />} color="white" size="sm" />} onPress={() => navigation.navigate('area')}/>
+      </Box>
+    </ScrollView>
+  );
+
+
+ 
+}
\ No newline at end of file
diff --git a/mobile-ui/package-lock.json b/mobile-ui/package-lock.json
index 860e1166..3085b0cd 100644
--- a/mobile-ui/package-lock.json
+++ b/mobile-ui/package-lock.json
@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@react-native-community/masked-view": "^0.1.11",
+        "@react-navigation/bottom-tabs": "^6.3.2",
         "@react-navigation/native": "^6.0.11",
         "@react-navigation/native-stack": "^6.7.0",
         "@react-navigation/stack": "^6.2.2",
@@ -24,7 +25,8 @@
         "react-native-safe-area-context": "3.3.2",
         "react-native-screens": "~3.10.1",
         "react-native-svg": "12.1.1",
-        "react-native-web": "0.17.1"
+        "react-native-web": "0.17.1",
+        "universal-cookie": "^4.0.4"
       },
       "devDependencies": {
         "@babel/core": "^7.12.9"
@@ -3533,6 +3535,23 @@
       "resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-1.0.0.tgz",
       "integrity": "sha512-0jbp4RxjYopTsIdLl+/Fy2TiwVYHy4mgeu07DG4b/LyM0OS/+lPP5c9sbnt/AMlnF6qz2JRZpPpGw1eMNS6A4w=="
     },
+    "node_modules/@react-navigation/bottom-tabs": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.3.2.tgz",
+      "integrity": "sha512-uS0XV2aH7bAW54Zuf5ks2V60riarbMALyMz3cB3204l4aGhx41UPUIr/K72pGAVdIPizpjz8Fk8qwczAwex9eg==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.4",
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
     "node_modules/@react-navigation/core": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.2.2.tgz",
@@ -4077,6 +4096,11 @@
       "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
       "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
     },
+    "node_modules/@types/cookie": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -5163,6 +5187,14 @@
         "safe-buffer": "~5.1.1"
       }
     },
+    "node_modules/cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/copy-descriptor": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
@@ -10806,6 +10838,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/universal-cookie": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
+      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
+      "dependencies": {
+        "@types/cookie": "^0.3.3",
+        "cookie": "^0.4.0"
+      }
+    },
     "node_modules/universalify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
@@ -13852,6 +13893,16 @@
       "resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-1.0.0.tgz",
       "integrity": "sha512-0jbp4RxjYopTsIdLl+/Fy2TiwVYHy4mgeu07DG4b/LyM0OS/+lPP5c9sbnt/AMlnF6qz2JRZpPpGw1eMNS6A4w=="
     },
+    "@react-navigation/bottom-tabs": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.3.2.tgz",
+      "integrity": "sha512-uS0XV2aH7bAW54Zuf5ks2V60riarbMALyMz3cB3204l4aGhx41UPUIr/K72pGAVdIPizpjz8Fk8qwczAwex9eg==",
+      "requires": {
+        "@react-navigation/elements": "^1.3.4",
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      }
+    },
     "@react-navigation/core": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.2.2.tgz",
@@ -14265,6 +14316,11 @@
       "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
       "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
     },
+    "@types/cookie": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+    },
     "@types/graceful-fs": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -15145,6 +15201,11 @@
         "safe-buffer": "~5.1.1"
       }
     },
+    "cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA=="
+    },
     "copy-descriptor": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
@@ -19577,6 +19638,15 @@
         }
       }
     },
+    "universal-cookie": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
+      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
+      "requires": {
+        "@types/cookie": "^0.3.3",
+        "cookie": "^0.4.0"
+      }
+    },
     "universalify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
diff --git a/mobile-ui/package.json b/mobile-ui/package.json
index 7b717cc6..9fa4b879 100644
--- a/mobile-ui/package.json
+++ b/mobile-ui/package.json
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.11",
+    "@react-navigation/bottom-tabs": "^6.3.2",
     "@react-navigation/native": "^6.0.11",
     "@react-navigation/native-stack": "^6.7.0",
     "@react-navigation/stack": "^6.2.2",
@@ -32,7 +33,8 @@
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "~3.10.1",
     "react-native-svg": "12.1.1",
-    "react-native-web": "0.17.1"
+    "react-native-web": "0.17.1",
+    "universal-cookie": "^4.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"