diff --git a/mobile-ui/components/AgregarInvitados.js b/mobile-ui/components/AgregarInvitados.js
index afe09210..e8c80b66 100644
--- a/mobile-ui/components/AgregarInvitados.js
+++ b/mobile-ui/components/AgregarInvitados.js
@@ -76,23 +76,23 @@ export default function AgregarInvitados({ navigation }) {
          Registre el invitado que desee
         </Heading>
         <VStack space={3} mt="5">
-          <FormControl>
+          <FormControl isRequired>
             <FormControl.Label>Nombre</FormControl.Label>
             <TextInput style={styles.input} type="text" onChangeText={(value) => setName(value)}/>
           </FormControl>
-          <FormControl>
+          <FormControl isRequired>
             <FormControl.Label>Apellido</FormControl.Label>
             <TextInput style={styles.input} type="text" onChangeText={(value) => setApellido(value)}/>
           </FormControl>
-          <FormControl>
+          <FormControl isRequired>
             <FormControl.Label>Identificación</FormControl.Label>
             <TextInput style={styles.input} type="text" onChangeText={(value) => setDNI(value)}/>
           </FormControl>
-          <FormControl>
+          <FormControl isRequired>
             <FormControl.Label>Teléfono</FormControl.Label>
             <TextInput style={styles.input} type="text" onChangeText={(value) => setPhone(value)} />
           </FormControl>
-          <Button mt="2" onPress={() => saveInvitado()}>
+          <Button mt="2" backgroundColor='tertiary.600' onPress={() => saveInvitado()}>
            Guardar
           </Button>
         </VStack>
diff --git a/mobile-ui/components/AreaComun.js b/mobile-ui/components/AreaComun.js
index ddd29bd2..c6b3a71c 100644
--- a/mobile-ui/components/AreaComun.js
+++ b/mobile-ui/components/AreaComun.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useContext, useEffect, useState} from "react";
 
 import {
     Box, 
@@ -7,11 +7,54 @@ import {
     FormControl, 
     Input, 
     Button,
-    Center
+    Center, 
+    Select, CheckIcon
   } from "native-base";
+import { UserContext } from "../context/UserContext";
+import { API } from "../environment/api";
 
 export default function AreaComun({navigation}){
 
+  const { user } = useContext(UserContext)
+  const [service, setService] = useState("");
+  const [areas, setAreas] = useState([])
+  const [isRequesting, setIsRequesting] = useState(false);
+
+    useEffect(() => {
+
+      const onRequestReservasData = async () => {
+        setIsRequesting(true);
+  
+        try {
+          const jsonResponse = await fetch(`${API.BASE_URL}/commonArea/allCommonAreas`, {
+            method: "GET",
+            headers: {
+              'Content-Type': 'application/json'
+            }
+          })
+  
+          const response = await jsonResponse.json();
+          console.log(response.message);
+  
+          setAreas(response.message);
+  
+
+  
+        } catch (error) {
+            console.log("ERROR:" + error);
+        }
+  
+        setIsRequesting(false)
+      }
+  
+      onRequestReservasData()
+
+
+    }, [user])
+    
+
+   
+
     return (
         <Center>
              <Box safeArea p="2" w="90%" maxW="290" py="8">
@@ -26,20 +69,46 @@ export default function AreaComun({navigation}){
          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>
+        <FormControl isRequired>
+            <FormControl.Label>Área común</FormControl.Label>
+            <Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Elija su área común" _selectedItem={{
+        bg: "teal.600",
+        endIcon: <CheckIcon size="5" />
+      }} mt={1} onValueChange={itemValue => setService(itemValue)}>
+
+        {areas.map(item => (
+          <Select.Item label={item.name} value={item.name} />
+        ))}
+          
         
-          <Button mt="2" backgroundColor="orange.300">
+          
+        </Select>
+          </FormControl>
+          <FormControl isRequired>
+            <FormControl.Label>Hora de inicio</FormControl.Label>
+            <Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Hora de inicio" _selectedItem={{
+        bg: "teal.600",
+        endIcon: <CheckIcon size="5" />
+      }} mt={1} onValueChange={itemValue => setService(itemValue)}>
+          <Select.Item label="UX Research" value="ux" />
+          <Select.Item label="Web Development" value="web" />
+          
+        </Select>
+          </FormControl>
+          <FormControl isRequired>
+            <FormControl.Label>Hora de finalización</FormControl.Label>
+            <Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Hora de finalización" _selectedItem={{
+        bg: "teal.600",
+        endIcon: <CheckIcon size="5" />
+      }} mt={1} onValueChange={itemValue => setService(itemValue)}>
+          <Select.Item label="UX Research" value="ux" />
+          <Select.Item label="Web Development" value="web" />
+          
+        </Select>
+          </FormControl>
+         
+        
+          <Button mt="2" backgroundColor="tertiary.600">
             Reservar
           </Button>
           <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Comunicados')}>
diff --git a/mobile-ui/components/LogIn.js b/mobile-ui/components/LogIn.js
index 758166c3..fdb48f9f 100644
--- a/mobile-ui/components/LogIn.js
+++ b/mobile-ui/components/LogIn.js
@@ -52,7 +52,7 @@ export default function LogIn({ navigation }) {
       })
       .then( response => {
 
-        // inqulino 4 y guarda 63
+        // inqulino 4 y guarda 3
          const user = response.message
           if(user.user_type == '4'){
             addUser(user);
diff --git a/mobile-ui/components/ReservasCard/index.js b/mobile-ui/components/ReservasCard/index.js
index 083a84ca..43a67af2 100644
--- a/mobile-ui/components/ReservasCard/index.js
+++ b/mobile-ui/components/ReservasCard/index.js
@@ -4,7 +4,8 @@ import {
     ScrollView,
     Text, 
     Stack, 
-    Heading
+    Heading,
+    Badge
 } from "native-base";
 import PropTypes from 'prop-types';
 
@@ -36,6 +37,12 @@ export const ReservasCard = ({ date, startTime, endTime, status}) => {
     }}>
         <Stack p="4" space={3}>
           <Stack space={2}>
+
+          <Badge backgroundColor={status === 1 ? 'tertiary.500' : 'danger.600'} _text={{
+                        color: "white"
+                    }} variant="solid" rounded="4">
+                        <Text bold={true} color='danger.50'> {status === 1 ? 'LIBRE' : 'RESERVADO'}</Text>
+                    </Badge>
             <Heading size="md" ml="-1">
               Reserva #1
             </Heading>