diff --git a/servicio-usuarios/src/users/users.controller.ts b/servicio-usuarios/src/users/users.controller.ts
index 0bf8f960..71173308 100644
--- a/servicio-usuarios/src/users/users.controller.ts
+++ b/servicio-usuarios/src/users/users.controller.ts
@@ -82,7 +82,8 @@ export class UsersController {
   
   @MessagePattern({ cmd: 'updateAdminCommunity' })
   updateAdminCommunity(@Payload() user: UserDocument) {
-    return this.userService.update(user._id, user);
+    console.log(user)
+    return this.userService.updateAdminCommunity(user['_id'], user);
   }
 
   @MessagePattern({ cmd: 'updateTenant' })
diff --git a/servicio-usuarios/src/users/users.service.ts b/servicio-usuarios/src/users/users.service.ts
index 0e5a3dff..6e59353f 100644
--- a/servicio-usuarios/src/users/users.service.ts
+++ b/servicio-usuarios/src/users/users.service.ts
@@ -134,6 +134,17 @@ export class UsersService {
     });
   }
 
+  async updateAdminCommunity(id: string, user: UserDocument) {
+
+    return this.userModel.findOneAndUpdate({ _id: id }, {
+      name: user['name'], last_name: user['last_name'],
+      dni: user['dni'], email: user['email'], phone: user['phone'],
+      community_id: user['community_id']
+    }, {
+      new: true,
+    });
+  }
+
   async updateTenant(id: string, user: UserDocument) {
     await this.saveTenant(user.community_id, user.number_house, user.id);
 
diff --git a/web-ui/web-react/src/components/AdministradoresComunidad.js b/web-ui/web-react/src/components/AdministradoresComunidad.js
index 42b24186..ef8cdd92 100644
--- a/web-ui/web-react/src/components/AdministradoresComunidad.js
+++ b/web-ui/web-react/src/components/AdministradoresComunidad.js
@@ -50,6 +50,7 @@ const AdministradoresComunidad = () => {
 
     const [changeStatusAdminCommunityDialog, setChangeStatusAdminCommunityDialog] = useState(false);
     const [saveButtonTitle, setSaveButtonTitle] = useState("Registrar");
+    const [adminDialog, setAdminDialog] = useState(false);
 
 
     async function listaAdmin() {
@@ -280,6 +281,7 @@ const AdministradoresComunidad = () => {
                         toast.current.show({ severity: 'success', summary: 'Exito', detail: 'Administrador de Comunidad de vivienda Creada', life: 3000 });
 
                         setListaAdmins(_administrators);
+                        setAdminDialog(false)
 
                         setAdminCommunity(emptyAdminCommunity);
 
@@ -295,7 +297,6 @@ const AdministradoresComunidad = () => {
         } else {
             console.log(`Actualizando admnistrador de comunidad: ${_admin}`)
             _admin.community_id = communityId;
-            console.log(`Actualizando admnistrador de comunidad: ${_admin}`)
 
             fetch(`http://localhost:4000/user/updateAdminCommunity/${_admin._id}`, {
                 cache: 'no-cache',
@@ -319,7 +320,7 @@ const AdministradoresComunidad = () => {
 
                 listaAdmin();
                 setCommunityId('');
-
+                setAdminDialog(false)
                 setAdminCommunity(emptyAdminCommunity);
             })
         }
@@ -356,6 +357,8 @@ const AdministradoresComunidad = () => {
         setAdminCommunity(admin);
         setSaveButtonTitle('Actualizar');
         setCommunityId(admin.community_id)
+        setAdminDialog(true)
+
     }
 
 
@@ -365,6 +368,20 @@ const AdministradoresComunidad = () => {
         setCommunityId('');
     }
 
+    const openNewAdmin = () => {
+        setAdminCommunity(emptyAdminCommunity);
+        setAdminDialog(true)
+        setSubmitted(false);
+    };
+
+    const hideAdminDialog = () => {
+        setSubmitted(false);
+        setAdminDialog(false)
+        setAdminCommunity(emptyAdminCommunity);
+        setSaveButtonTitle('Registrar');
+
+    };
+
     const actionsAdminCommunity = (rowData) => {
         let icono = '';
         let text = '';
@@ -431,10 +448,33 @@ const AdministradoresComunidad = () => {
         </>
     );
 
+    const adminDialogFooter = (
+        <>
+            <Button
+                label={`${saveButtonTitle}`}
+                icon="pi pi-check"
+                className="p-button-primary"
+                onClick={saveAdminCommunity}
+            />
+            <Button
+                label="Cerrar"
+                icon="pi pi-times"
+                className="p-button-text"
+                onClick={hideAdminDialog}
+            />
+        </>
+    );
+
     const leftToolbarTemplate = () => {
         return (
             <React.Fragment>
                 <div className="my-2">
+                    <Button
+                        label="Agregar Administrador"
+                        icon="pi pi-plus"
+                        className="p-button-primary mr-2"
+                        onClick={openNewAdmin}
+                    />
                     <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" onClick={confirmDeleteSelected} disabled={!selectedAdminsCommunities || !selectedAdminsCommunities.length} />
                 </div>
             </React.Fragment>
@@ -562,9 +602,9 @@ const AdministradoresComunidad = () => {
                 <Toast ref={toast} />
                 <div className="card">
                     <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
-                    <DataTable ref={dt} value={listaAdmins} dataKey="_id" paginator rows={5} selection={selectedAdminsCommunities} onSelectionChange={(e) => setSelectedAdminsCommunities(e.value)}
-                        scrollable scrollHeight="400px" scrollDirection="both" header={header}
-                        rowsPerPageOptions={[5, 10, 25]} className="datatable-responsive mt-3"
+                    <DataTable ref={dt} value={listaAdmins} dataKey="_id" paginator rows={10} selection={selectedAdminsCommunities} onSelectionChange={(e) => setSelectedAdminsCommunities(e.value)}
+                        scrollable scrollHeight="800px" scrollDirection="both" header={header}
+                        rowsPerPageOptions={[10, 20, 30]} className="datatable-responsive mt-3"
                         paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                         currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} administradores de comunidades de viviendas"
                         globalFilter={globalFilter} emptyMessage="No hay administradores de comunidades registrados.">
@@ -577,7 +617,7 @@ const AdministradoresComunidad = () => {
                         <Column field="phone" header={headerPhone} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
                         <Column field="community_name" sortable header={headerCommuntiy} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
                         <Column field="status" sortable header={headerStatus} body={statusBodyTemplate} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
-                        <Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsAdminCommunity}></Column>
+                        <Column style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }} body={actionsAdminCommunity}></Column>
                     </DataTable>
                     <Dialog visible={deleteAdminCommunityDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteAdminCommunityDialogFooter} onHide={hideDeleteAdminCommunityDialog}>
                         <div className="flex align-items-center justify-content-center">
@@ -611,116 +651,112 @@ const AdministradoresComunidad = () => {
                             )}
                         </div>
                     </Dialog>
-                </div>
-            </div>
-            <div className="col-12">
-                <div className="card">
-                    <h5>Registro de un administrador de una comunidad de viviendas</h5>
-                    <div className="p-fluid formgrid grid">
-                        <div className="field col-12 md:col-6">
-                            <label htmlFor="name">Nombre</label>
-                            <div className="p-0 col-12 md:col-12">
-                                <div className="p-inputgroup">
-                                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                                        <i className="pi pi-user"></i>
-                                    </span>
-                                    <InputText id="name" value={adminCommunity.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.name === '' })} />
+                    <Dialog
+                        visible={adminDialog}
+                        style={{ width: '850px' }}
+                        header="Mantenimiento Administradores de la Comunidad"
+                        modal
+                        className="p-fluid"
+                        footer={adminDialogFooter}
+                        onHide={hideAdminDialog}
+                    >
+                        {adminCommunity && (
+                            <div className="p-fluid formgrid grid">
+                                <div className="field col-12 md:col-6">
+                                    <label htmlFor="name">Nombre</label>
+                                    <div className="p-0 col-12 md:col-12">
+                                        <div className="p-inputgroup">
+                                            <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                                                <i className="pi pi-user"></i>
+                                            </span>
+                                            <InputText id="name" value={adminCommunity.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.name === '' })} />
+                                        </div>
+                                        {submitted && adminCommunity.name === '' && <small className="p-invalid">Nombre es requirido.</small>}
+                                    </div>
                                 </div>
-                                {submitted && adminCommunity.name === '' && <small className="p-invalid">Nombre es requirido.</small>}
-                            </div>
-                        </div>
-                        <div className="field col-12 md:col-6">
-                            <label htmlFor="name">Apellido(s)</label>
-                            <div className="p-0 col-12 md:col-12">
-                                <div className="p-inputgroup">
-                                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                                        <i className="pi pi-user"></i>
-                                    </span>
-                                    <InputText id="last_name" value={adminCommunity.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.last_name === '' })} />
+                                <div className="field col-12 md:col-6">
+                                    <label htmlFor="name">Apellido(s)</label>
+                                    <div className="p-0 col-12 md:col-12">
+                                        <div className="p-inputgroup">
+                                            <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                                                <i className="pi pi-user"></i>
+                                            </span>
+                                            <InputText id="last_name" value={adminCommunity.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.last_name === '' })} />
+                                        </div>
+                                        {submitted && adminCommunity.last_name === '' && <small className="p-invalid">Apellidos es requirido.</small>}
+                                    </div>
                                 </div>
-                                {submitted && adminCommunity.last_name === '' && <small className="p-invalid">Apellidos es requirido.</small>}
-                            </div>
-                        </div>
-                        <div className="field col-12 md:col-6">
-                            <label htmlFor="name">Correo Electrónico</label>
-                            <div className="p-0 col-12 md:col-12">
-                                <div className="p-inputgroup">
-                                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                                        <i className="pi pi-at"></i>
-                                    </span>
-                                    <InputText id="email" value={adminCommunity.email} 
-                                    onChange={(e) => onInputChange(e, 'email')} required autoFocus 
-                                    className={classNames({ 'p-invalid': submitted && 
-                                    (adminCommunity.email === '' || findRepeated('email', adminCommunity.email) > 0) })} />
+                                <div className="field col-12 md:col-6">
+                                    <label htmlFor="name">Correo Electrónico</label>
+                                    <div className="p-0 col-12 md:col-12">
+                                        <div className="p-inputgroup">
+                                            <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                                                <i className="pi pi-at"></i>
+                                            </span>
+                                            <InputText id="email" value={adminCommunity.email}
+                                                onChange={(e) => onInputChange(e, 'email')} required autoFocus
+                                                className={classNames({
+                                                    'p-invalid': submitted &&
+                                                        (adminCommunity.email === '' || findRepeated('email', adminCommunity.email) > 0)
+                                                })} />
+                                        </div>
+                                        {submitted && adminCommunity.email === '' && <small className="p-invalid">Correo electrónico
+                                            es requirido.</small>}
+                                        {submitted && findRepeated('email', adminCommunity.email) > 0 &&
+                                            <small className="p-invalid">Correo electrónico se encuentra repetido.</small>
+                                        }
+                                    </div>
                                 </div>
-                                {submitted && adminCommunity.email === '' && <small className="p-invalid">Correo electrónico
-                                    es requirido.</small>}
-                                {submitted && findRepeated('email', adminCommunity.email) > 0 &&
-                                    <small className="p-invalid">Correo electrónico se encuentra repetido.</small>
-                                }
-                            </div>
-                        </div>
-                        <div className="field col-12 md:col-6">
-                            <label htmlFor="name">Identificación</label>
-                            <div className="p-0 col-12 md:col-12">
-                                <div className="p-inputgroup">
-                                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                                        <i className="pi pi-id-card"></i>
-                                    </span>
-                                    <InputText id="dni" value={adminCommunity.dni} 
-                                    onChange={(e) => onInputChange(e, 'dni')} required autoFocus 
-                                    className={classNames({ 'p-invalid': submitted 
-                                    && (adminCommunity.dni === '' || findRepeated('dni', adminCommunity.dni) > 0)})} />
+                                <div className="field col-12 md:col-6">
+                                    <label htmlFor="name">Identificación</label>
+                                    <div className="p-0 col-12 md:col-12">
+                                        <div className="p-inputgroup">
+                                            <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                                                <i className="pi pi-id-card"></i>
+                                            </span>
+                                            <InputText id="dni" value={adminCommunity.dni}
+                                                onChange={(e) => onInputChange(e, 'dni')} required autoFocus
+                                                className={classNames({
+                                                    'p-invalid': submitted
+                                                        && (adminCommunity.dni === '' || findRepeated('dni', adminCommunity.dni) > 0)
+                                                })} />
+                                        </div>
+                                        {submitted && adminCommunity.dni === '' && <small className="p-invalid">Identificación es requirida.</small>}
+                                        {submitted && findRepeated('dni', adminCommunity.dni) > 0 &&
+                                            <small className="p-invalid">Identificación se encuentra repetida.</small>
+                                        }
+                                    </div>
                                 </div>
-                                {submitted && adminCommunity.dni === '' && <small className="p-invalid">Identificación es requirida.</small>}
-                                {submitted && findRepeated('dni', adminCommunity.dni) > 0 &&
-                                    <small className="p-invalid">Identificación se encuentra repetida.</small>
-                                }
-                            </div>
-                        </div>
-                        <div className="field col-12 md:col-6">
-                            <label htmlFor="name">Número de teléfono</label>
-                            <div className="p-0 col-12 md:col-12">
-                                <div className="p-inputgroup">
-                                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                                        <i className="pi pi-phone"></i>
-                                    </span>
-                                    <InputText id="phone" value={adminCommunity.phone} onChange={(e) => onInputChange(e, 'phone')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.phone === '' })} />
+                                <div className="field col-12 md:col-6">
+                                    <label htmlFor="name">Número de teléfono</label>
+                                    <div className="p-0 col-12 md:col-12">
+                                        <div className="p-inputgroup">
+                                            <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                                                <i className="pi pi-phone"></i>
+                                            </span>
+                                            <InputText id="phone" value={adminCommunity.phone} onChange={(e) => onInputChange(e, 'phone')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.phone === '' })} />
+                                        </div>
+                                        {submitted && adminCommunity.phone === '' && <small className="p-invalid">Número de teléfono es requirida.</small>}
+                                    </div>
                                 </div>
-                                {submitted && adminCommunity.phone === '' && <small className="p-invalid">Número de teléfono es requirida.</small>}
-                            </div>
-                        </div>
-                        <div className="field col-12 md:col-6">
-                            <label htmlFor="administrator">Comunidad a asignar: </label>
-                            <div className="p-0 col-12 md:col-12">
-                                <div className="p-inputgroup">
-                                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                                        <i className="pi pi-home"></i>
-                                    </span>
-                                    <Dropdown placeholder="--Seleccione la Comunidad a Asignar--" id="administrator" value={communityId} options={cList}
-                                        onChange={handleCommunities} required autoFocus className={classNames({ 'p-invalid': submitted && !communityId })} />
+                                <div className="field col-12 md:col-6">
+                                    <label htmlFor="administrator">Comunidad a asignar: </label>
+                                    <div className="p-0 col-12 md:col-12">
+                                        <div className="p-inputgroup">
+                                            <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                                                <i className="pi pi-home"></i>
+                                            </span>
+                                            <Dropdown placeholder="--Seleccione la Comunidad a Asignar--" id="administrator" value={communityId} options={cList}
+                                                onChange={handleCommunities} required autoFocus className={classNames({ 'p-invalid': submitted && !communityId })} />
+                                        </div>
+                                        {submitted && !communityId && <small className="p-invalid">Comunidad es requirida.</small>}
+                                    </div>
                                 </div>
-                                {submitted && !communityId && <small className="p-invalid">Comunidad es requirida.</small>}
-                            </div>
-                        </div>
-                        <div style={{
-                            display: "flex",
-                            justifyContent: "center",
-                            gap: "10px",
-                            width: "100%"
-                        }}>
-                            <Button
-                                label={`${saveButtonTitle}`}
-                                onClick={saveAdminCommunity}
-                            />
-                            {saveButtonTitle === 'Actualizar' && (
-                                <Button
-                                    label="Cancelar"
-                                    onClick={cancelEdit}
-                                    className="p-button-danger" />)}
-                        </div>
+                               
 
-                    </div>
+                            </div>
+                        )}
+                    </Dialog>
                 </div>
             </div>
         </div>
diff --git a/web-ui/web-react/src/components/AdministradoresSistema.js b/web-ui/web-react/src/components/AdministradoresSistema.js
index a3f47866..319d9ec3 100644
--- a/web-ui/web-react/src/components/AdministradoresSistema.js
+++ b/web-ui/web-react/src/components/AdministradoresSistema.js
@@ -50,7 +50,7 @@ const AdministradoresSistema = () => {
   const [adminDialog, setAdminDialog] = useState(false);
   const [submitted, setSubmitted] = useState(false);
 
-  const [editAdminDialog, setEditAdminDialog] = useState(false);
+  const [formAdminDialog, setFormAdminDialog] = useState(false);
   const [saveButtonTitle, setSaveButtonTitle] = useState("Registrar")
 
 
@@ -136,7 +136,7 @@ const AdministradoresSistema = () => {
                   life: 3000,
                 });
                 setAdministrators(_administrators)
-                setEditAdminDialog(false);
+                setFormAdminDialog(false);
                 setSysAdmin(emptySysAdmin);
               }
             )
@@ -164,6 +164,8 @@ const AdministradoresSistema = () => {
               function (response) {
                 _administrators.push(_admin);
                 setAdministrators(_administrators)
+                setFormAdminDialog(false)
+
               }
             )
             .catch(
@@ -267,7 +269,23 @@ const AdministradoresSistema = () => {
   const editAdmin = (sysadmin) => {
     setSysAdmin({ ...sysadmin });
     setSaveButtonTitle('Actualizar');
+    setFormAdminDialog(true)
+
   };
+  const openNewAdmin = () => {
+    setSysAdmin(emptySysAdmin);
+    setFormAdminDialog(true)
+    setSubmitted(false);
+  };
+
+  const hideFormAdminDialog = () => {
+    setSubmitted(false);
+    setFormAdminDialog(false)
+    setSysAdmin(emptySysAdmin);
+    setSaveButtonTitle('Registrar');
+
+  };
+
 
   const deleteSysAdmin = () => {
     fetch('http://localhost:4000/user/deleteAdminSystem/' + sysadmin._id, {
@@ -386,6 +404,12 @@ const AdministradoresSistema = () => {
     return (
       <React.Fragment>
         <div className="my-2">
+        <Button
+            label="Agregar Administrador"
+            icon="pi pi-plus"
+            className="p-button-primary mr-2"
+            onClick={openNewAdmin}
+          />
           <Button
             label="Eliminar"
             icon="pi pi-trash"
@@ -478,19 +502,19 @@ const AdministradoresSistema = () => {
   );
 
 
-  const editAdminDialogFooter = (
+  const formAdminDialogFooter = (
     <>
       <Button
-        label="No"
-        icon="pi pi-times"
-        className="p-button-text"
-        onClick={hideChangeStatusAdminDialog}
+        label={`${saveButtonTitle}`}
+        icon="pi pi-check"
+        className="p-button-primary"
+        onClick={guardarAdmin}
       />
       <Button
-        label="Yes"
-        icon="pi pi-check"
+        label="Cerrar"
+        icon="pi pi-times"
         className="p-button-text"
-        onClick={editAdmin}
+        onClick={hideFormAdminDialog}
       />
     </>
   );
@@ -691,7 +715,7 @@ const AdministradoresSistema = () => {
             </Column>
             <Column
 
-              style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }}
+              style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }}
               body={actionsAdmin}
             ></Column>
           </DataTable>
@@ -834,13 +858,15 @@ const AdministradoresSistema = () => {
               )}
             </div>
           </Dialog>
-
-        </div>
-      </div>
-      <div className="col-12">
-        <div className="card">
-          <h5>Mantenimiento Administrador del Sistema</h5>
-          <div className="p-fluid formgrid grid">
+          <Dialog
+            visible={formAdminDialog}
+            style={{ width: '650px' }}
+            header="Mantenimiento Administrador del Sistema"
+            modal
+            className="p-fluid"
+            footer={formAdminDialogFooter}
+            onHide={hideFormAdminDialog}>
+           <div className="p-fluid formgrid grid">
             <div className="field col-6 md:col-6">
               <label htmlFor="name">Nombre</label>
 
@@ -953,28 +979,12 @@ const AdministradoresSistema = () => {
                 )}
               </div>
             </div>
-            <div style={{
-              display: "flex",
-              justifyContent: "center",
-              gap: "10px",
-              width: "100%"
-            }}>
-              <Button
-                label={`${saveButtonTitle}`}
-                onClick={guardarAdmin}
-              />
-              {saveButtonTitle === 'Actualizar' && (
-                <Button
-                  label="Cancelar"
-                  onClick={cancelEdit}
-                  className="p-button-danger" />)}
-            </div>
-
           </div>
 
+          </Dialog>
         </div>
-
       </div>
+      
     </div>
   );
 };
diff --git a/web-ui/web-react/src/components/AreasComunes.js b/web-ui/web-react/src/components/AreasComunes.js
index b8c2b0f9..c74e2e3a 100644
--- a/web-ui/web-react/src/components/AreasComunes.js
+++ b/web-ui/web-react/src/components/AreasComunes.js
@@ -608,7 +608,6 @@ const AreasComunes = () => {
         );
     };
 
-
     function compareTimesMinRequired(hour1, hour2) {
         var timeFormat1 = Number(hour1.replace(/[:]/g, ''));
         var timeFormat2 = Number(hour2.replace(/[:]/g, ''));
@@ -619,10 +618,6 @@ const AreasComunes = () => {
         }
     }
 
-
-
-
-
     return (
         <div className="grid">
             <div className="col-12">
@@ -641,7 +636,7 @@ const AreasComunes = () => {
                         <Column field="hourMax" sortable header={headerHourMax} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>                    </Column>
                         <Column field="bookable" sortable header={headerBookable} body={bookableBodyTemplate} style={{ flexGrow: 1, flexBasis: '200px', minWidth: '200px', wordBreak: 'break-word' }}></Column>
                         <Column field="status" sortable header={headerStatus} body={statusBodyTemplate} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
-                        <Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsCommonArea}></Column>
+                        <Column style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }} body={actionsCommonArea}></Column>
                     </DataTable>
                     <Dialog
                         visible={areaDialog}
diff --git a/web-ui/web-react/src/components/ComunidadViviendas.js b/web-ui/web-react/src/components/ComunidadViviendas.js
index 548388fb..94b70bdd 100644
--- a/web-ui/web-react/src/components/ComunidadViviendas.js
+++ b/web-ui/web-react/src/components/ComunidadViviendas.js
@@ -49,6 +49,7 @@ const Communities = () => {
   const [editCommunityDialog, setEditCommunityDialog] = useState(false);
   const toast = useRef(null);
   const dt = useRef(null);
+  const [formCommunityDialog, setFormCommunityDialog] = useState(false);
 
   //para el perfil de la comunidad
   const [tenants, setTenants] = useState([]);
@@ -273,10 +274,37 @@ const Communities = () => {
           if (response.status != 200)
             console.log('Ocurrió un error con el servicio: ' + response.status);
           else return response.json();
-        }).catch((err) => console.log('Ocurrió un error con el fetch', err));
-        setSaveButtonLabel('Registrar');
-        setCommunity(emptyCommunity);
-      }
+        })
+        .then(() => {
+          _community.province = provincesList.find(
+            (p) => p.code === _community.province,
+          ).name;
+          _community.canton = cantonsList.find(
+            (p) => p.code === _community.canton,
+          ).name;
+          _community.district = districtsList.find(
+            (p) => p.code === _community.district,
+          ).name;
+
+          _communities.push(_community);
+          toast.current.show({
+            severity: 'success',
+            summary: 'Registro exitoso',
+            detail: 'Comunidad de vivienda Creada',
+            life: 3000,
+          });
+
+          setCommunitiesList(_communities);
+
+          setProvinciaId('');
+          setCantonId('');
+          setDistrictId('');
+          setCodeHouses('');
+          setFormCommunityDialog(false);
+
+          setCommunity(emptyCommunity);
+        })
+        .catch((err) => console.log('Ocurrió un error con el fetch', err));
     } else {
       setSubmitted(true);
     }
@@ -343,6 +371,16 @@ const Communities = () => {
     setEditCommunityDialog(true);
   };
 
+  const openNewCommunity = () => {
+    setCommunity({ emptyCommunity });
+    setFormCommunityDialog(true);
+  };
+
+  const hideFormCommunityDialog = () => {
+    setCommunity({ emptyCommunity });
+    setFormCommunityDialog(false);
+  };
+
   //desactivar o activar una comunidad
   const cambiarEstadoCommunity = () => {
     if (community.status == '1') {
@@ -512,6 +550,12 @@ const Communities = () => {
     return (
       <React.Fragment>
         <div className="my-2">
+          <Button
+            label="Agregar Comunidad"
+            icon="pi pi-plus"
+            className="p-button-primary mr-2"
+            onClick={openNewCommunity}
+          />
           <Button
             label="Eliminar"
             icon="pi pi-trash"
@@ -561,6 +605,25 @@ const Communities = () => {
     </>
   );
 
+  const formCommunityDialogFooter = (
+    <>
+      <Button
+        label={'Registrar'}
+        icon="pi pi-check"
+        className="p-button-primary"
+        onClick={saveCommunity}
+      />
+      <Button
+        label="Cerrar"
+        icon="pi pi-times"
+        className="p-button-text"
+        onClick={hideFormCommunityDialog}
+      />
+
+    </>
+  );
+
+
   const deleteCommunityDialogFooter = (
     <>
       <Button
@@ -673,8 +736,8 @@ const Communities = () => {
     <>
       <p>
         {' '}
-        <FontAwesomeIcon icon={faHashtag} style={{ color: '#D7A86E' }} /> Número
-        de viviendas
+        <FontAwesomeIcon icon={faHashtag} style={{ color: '#D7A86E' }} />{' '}
+        Cantidad de viviendas
       </p>
     </>
   );
@@ -713,6 +776,16 @@ const Communities = () => {
     </>
   );
 
+  const headerCodeHouses = (
+    <>
+      <p>
+        {' '}
+        <FontAwesomeIcon icon={faHashtag} style={{ color: '#D7A86E' }} />{' '}
+        Código de vivienda
+      </p>
+    </>
+  );
+
   const statusBodyTemplate = (rowData) => {
     return (
       <>
@@ -748,14 +821,14 @@ const Communities = () => {
             value={communitiesList}
             dataKey="_id"
             paginator
-            rows={5}
+            rows={10}
             selection={selectedCommunities}
             onSelectionChange={(e) => setSelectedCommunities(e.value)}
             scrollable
-            scrollHeight="400px"
+            scrollHeight="800px"
             scrollDirection="both"
             header={header}
-            rowsPerPageOptions={[5, 10, 25]}
+            rowsPerPageOptions={[10, 20, 30]}
             className="datatable-responsive mt-3"
             paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
             currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} comunidades de viviendas"
@@ -790,11 +863,6 @@ const Communities = () => {
               header={headerDistrict}
               style={{ flexGrow: 1, flexBasis: '160px' }}
             ></Column>
-            <Column
-              field="phone"
-              header={headerPhone}
-              style={{ flexGrow: 1, flexBasis: '180px' }}
-            ></Column>
             <Column
               field="num_houses"
               sortable
@@ -821,7 +889,7 @@ const Communities = () => {
             ></Column>
             <Column
               body={actionsCommunity}
-              style={{ flexGrow: 2, flexBasis: '100px', flexDirection: 'row' }}
+              style={{ flexGrow: 1, flexBasis: '160px' }}
             ></Column>
           </DataTable>
 
@@ -837,13 +905,11 @@ const Communities = () => {
             <div className="container text-center">
               <div className="row my-4">
                 <div className=" col-12 md:col-12">
-                  <p>Nombre</p>
-                  <div
-                    className="p-0 col-2  md:col-2"
-                    style={{ margin: '0 auto' }}
-                  >
+                  <i className="pi pi-home icon-khaki"></i>
+
+                  <p><strong>Nombre</strong></p>
+                  <div className="p-0 col-2  md:col-2" style={{ margin: '0 auto' }}>
                     <div className="p-inputgroup align-items-center justify-content-evenly">
-                      <i className="pi pi-home icon-khaki"></i>
                       <p>{community.name}</p>
                     </div>
                   </div>
@@ -851,25 +917,21 @@ const Communities = () => {
               </div>
               <div className="row my-5">
                 <div className=" col-6 md:col-6">
-                  <p>Administrador</p>
-                  <div
-                    className="p-0 col-6  md:col-6"
-                    style={{ margin: '0 auto' }}
-                  >
+                  <i className="pi pi-user icon-khaki"></i>
+
+                  <p><strong>Administrador</strong></p>
+                  <div className="p-0 col-6  md:col-6" style={{ margin: '0 auto' }}>
                     <div className="p-inputgroup align-items-center justify-content-evenly">
-                      <i className="pi pi-user icon-khaki"></i>
                       <p>{community.name_admin}</p>
                     </div>
                   </div>
                 </div>
                 <div className=" col-6 md:col-6">
-                  <p>Teléfono Administrativo</p>
-                  <div
-                    className="p-0 col-6  md:col-6"
-                    style={{ margin: '0 auto' }}
-                  >
+                  <i className="pi pi-phone icon-khaki"></i>
+
+                  <p><strong>Teléfono Administrativo</strong></p>
+                  <div className="p-0 col-6  md:col-6" style={{ margin: '0 auto' }}>
                     <div className="p-inputgroup align-items-center justify-content-evenly">
-                      <i className="pi pi-phone icon-khaki"></i>
                       <p>{community.phone}</p>
                     </div>
                   </div>
@@ -878,28 +940,31 @@ const Communities = () => {
 
               <div className="row my-5">
                 <div className=" col-4 col-md-4 md:col-4">
-                  <p>Provincia</p>
-                  <div className="p-0 col-10 md:col-10">
+                  <i className="pi pi-map-marker icon-khaki"></i>
+
+                  <p><strong>Provincia</strong></p>
+                  <div className="p-0 col-12 md:col-12">
                     <div className="p-inputgroup align-items-center justify-content-evenly">
-                      <i className="pi pi-map-marker icon-khaki"></i>
                       <p>{community.province}</p>
                     </div>
                   </div>
                 </div>
                 <div className=" col-4 md:col-4">
-                  <p>Cantón</p>
-                  <div className="p-0 col-10 md:col-10">
+                  <i className="pi pi-map-marker icon-khaki"></i>
+
+                  <p><strong>Cantón</strong></p>
+                  <div className="p-0 col-12 md:col-12">
                     <div className="p-inputgroup align-items-center justify-content-evenly">
-                      <i className="pi pi-map-marker icon-khaki"></i>
                       <p>{community.canton}</p>
                     </div>
                   </div>
                 </div>
                 <div className=" col-4 md:col-4">
-                  <p>Distrito</p>
-                  <div className="p-0 col-10 md:col-10">
+                  <i className="pi pi-map-marker icon-khaki"></i>
+
+                  <p><strong>Distrito</strong></p>
+                  <div className="p-0 col-12 md:col-12">
                     <div className="p-inputgroup align-items-center justify-content-evenly">
-                      <i className="pi pi-map-marker icon-khaki"></i>
                       <p>{community.district}</p>
                     </div>
                   </div>
@@ -907,13 +972,11 @@ const Communities = () => {
               </div>
               <div className="row my-5">
                 <div className=" col-12 md:col-12">
-                  <p>Número de Viviendas</p>
-                  <div
-                    className="p-0 col-2  md:col-2"
-                    style={{ margin: '0 auto' }}
-                  >
+                  <i className="pi pi-hashtag icon-khaki"></i>
+
+                  <p><strong>Cantidad de viviendas</strong></p>
+                  <div className="p-0 col-2  md:col-2" style={{ margin: '0 auto' }}>
                     <div className="p-inputgroup justify-content-evenly">
-                      <i className="pi pi-hashtag icon-khaki"></i>
                       <p>{community.num_houses}</p>
                     </div>
                   </div>
@@ -945,12 +1008,8 @@ const Communities = () => {
                       >
                         <Column
                           field="number_house"
-                          header={headerNumberHouses}
-                          style={{
-                            flexGrow: 1,
-                            flexBasis: '160px',
-                            minWidth: '160px',
-                          }}
+                          header={headerCodeHouses}
+                          style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }}
                         ></Column>
                         <Column
                           field="tenants"
@@ -1032,201 +1091,189 @@ const Communities = () => {
               )}
             </div>
           </Dialog>
-        </div>
-      </div>
-      <div className="col-12">
-        <div className="card">
-          <h5>Registro de comunidad de viviendas</h5>
-          <div className="p-fluid formgrid grid">
-            <div className="field col-12 md:col-12">
-              <label htmlFor="name">Nombre</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-home"></i>
-                  </span>
-                  <InputText
-                    id="name"
-                    value={community.name}
-                    onChange={(e) => onInputChange(e, 'name')}
-                    required
-                    autoFocus
-                    className={classNames({
-                      'p-invalid': submitted && community.name === '',
-                    })}
-                  />
+          <Dialog
+            visible={formCommunityDialog}
+            style={{ width: '850px' }}
+            header="Mantenimiento de comunidad de viviendas"
+            modal
+            footer={formCommunityDialogFooter}
+            onHide={hideFormCommunityDialog}
+          >
+            <div className="p-fluid formgrid grid">
+              <div className="field col-12 md:col-12">
+                <label htmlFor="name">Nombre</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-home"></i>
+                    </span>
+                    <InputText
+                      id="name"
+                      value={community.name}
+                      onChange={(e) => onInputChange(e, 'name')}
+                      required
+                      autoFocus
+                      className={classNames({
+                        'p-invalid': submitted && community.name === '',
+                      })}
+                    />
+                  </div>
+                  {submitted && community.name === '' && (
+                    <small className="p-invalid">Nombre es requirido.</small>
+                  )}
                 </div>
-                {submitted && community.name === '' && (
-                  <small className="p-invalid">Nombre es requirido.</small>
-                )}
               </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="provinces">Provincia</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-map-marker"></i>
-                  </span>
-                  <Dropdown
-                    placeholder="--Seleccione Provincia--"
-                    value={provinciaId}
-                    options={p}
-                    onChange={handleProvinces}
-                    required
-                    autoFocus
-                    className={classNames({
-                      'p-invalid': submitted && !provinciaId,
-                    })}
-                  />
+              <div className="field col-12 md:col-6">
+                <label htmlFor="provinces">Provincia</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-map-marker"></i>
+                    </span>
+                    <Dropdown
+                      placeholder="--Seleccione Provincia--"
+                      value={provinciaId}
+                      options={p}
+                      onChange={handleProvinces}
+                      required
+                      autoFocus
+                      className={classNames({
+                        'p-invalid': submitted && !provinciaId,
+                      })}
+                    />
+                  </div>
+                  {submitted && !provinciaId && (
+                    <small className="p-invalid">Provincia es requirido.</small>
+                  )}
                 </div>
-                {submitted && !provinciaId && (
-                  <small className="p-invalid">Provincia es requirido.</small>
-                )}
               </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="cantons">Cantón</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-map-marker"></i>
-                  </span>
-                  <Dropdown
-                    placeholder="--Seleccione Cantón--"
-                    value={cantonId}
-                    options={c}
-                    onChange={handleCanton}
-                    required
-                    autoFocus
-                    className={classNames({
-                      'p-invalid': submitted && !cantonId,
-                    })}
-                  />
+              <div className="field col-12 md:col-6">
+                <label htmlFor="cantons">Cantón</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-map-marker"></i>
+                    </span>
+                    <Dropdown
+                      placeholder="--Seleccione Cantón--"
+                      value={cantonId}
+                      options={c}
+                      onChange={handleCanton}
+                      required
+                      autoFocus
+                      className={classNames({
+                        'p-invalid': submitted && !cantonId,
+                      })}
+                    />
+                  </div>
+                  {submitted && !cantonId && (
+                    <small className="p-invalid">Cantón es requirido.</small>
+                  )}
                 </div>
-                {submitted && !cantonId && (
-                  <small className="p-invalid">Cantón es requirido.</small>
-                )}
               </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="districts">Distrito</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-map-marker"></i>
-                  </span>
-                  <Dropdown
-                    placeholder="--Seleccione Distrito--"
-                    value={districtId}
-                    options={d}
-                    onChange={handleDistrict}
-                    required
-                    autoFocus
-                    className={classNames({
-                      'p-invalid': submitted && !districtId,
-                    })}
-                  />
+              <div className="field col-12 md:col-6">
+                <label htmlFor="districts">Distrito</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-map-marker"></i>
+                    </span>
+                    <Dropdown
+                      placeholder="--Seleccione Distrito--"
+                      value={districtId}
+                      options={d}
+                      onChange={handleDistrict}
+                      required
+                      autoFocus
+                      className={classNames({
+                        'p-invalid': submitted && !districtId,
+                      })}
+                    />
+                  </div>
+                  {submitted && !districtId && (
+                    <small className="p-invalid">Distrito es requirido.</small>
+                  )}
                 </div>
-                {submitted && !districtId && (
-                  <small className="p-invalid">Distrito es requirido.</small>
-                )}
               </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="telefono">Número de Teléfono</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-phone"></i>
-                  </span>
-                  <InputText
-                    id="phone"
-                    value={community.phone}
-                    onChange={(e) => onInputChange(e, 'phone')}
-                    required
-                    autoFocus
-                    className={classNames({
-                      'p-invalid': submitted && community.phone === '',
-                    })}
-                  />
+              <div className="field col-12 md:col-6">
+                <label htmlFor="telefono">Número de Teléfono</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-phone"></i>
+                    </span>
+                    <InputText
+                      id="phone"
+                      value={community.phone}
+                      onChange={(e) => onInputChange(e, 'phone')}
+                      required
+                      autoFocus
+                      className={classNames({
+                        'p-invalid': submitted && community.phone === '',
+                      })}
+                    />
+                  </div>
+                  {submitted && community.phone === '' && (
+                    <small className="p-invalid">
+                      Número de teléfono es requirido.
+                    </small>
+                  )}
                 </div>
-                {submitted && community.phone === '' && (
-                  <small className="p-invalid">
-                    Número de teléfono es requirido.
-                  </small>
-                )}
               </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="numHouse">Numero de Viviendas</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-hashtag"></i>
-                  </span>
-                  <InputText
-                    id="num_houses"
-                    value={community.num_houses}
-                    onChange={(e) => onInputChange(e, 'num_houses')}
-                    required
-                    autoFocus
-                    className={classNames({
-                      'p-invalid': submitted && community.num_houses < 1,
-                    })}
-                  />
+              <div className="field col-12 md:col-6">
+                <label htmlFor="numHouse">Numero de Viviendas</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-hashtag"></i>
+                    </span>
+                    <InputText
+                      id="num_houses"
+                      value={community.num_houses}
+                      onChange={(e) => onInputChange(e, 'num_houses')}
+                      required
+                      autoFocus
+                      className={classNames({
+                        'p-invalid': submitted && community.num_houses < 1,
+                      })}
+                    />
+                  </div>
+                  {submitted && community.num_houses < 1 && (
+                    <small className="p-invalid">
+                      Número de viviendas es requirido y debe ser mayor que 0.
+                    </small>
+                  )}
                 </div>
-                {submitted && community.num_houses < 1 && (
-                  <small className="p-invalid">
-                    Número de viviendas es requirido y debe ser mayor que 0.
-                  </small>
-                )}
               </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="numHouse">
-                Ingrese el prefijo para el código de las viviendas
-              </label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-hashtag"></i>
-                  </span>
-                  <InputText
-                    id="code_houses"
-                    value={codeHouses}
-                    onChange={handleCodeHouses}
-                    autoFocus
-                    className={classNames({
-                      'p-invalid': submitted && codeHouses === '',
-                    })}
-                  />
+              <div className="field col-12 md:col-6">
+                <label htmlFor="numHouse">
+                  Ingrese el prefijo para el código de las viviendas
+                </label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-hashtag"></i>
+                    </span>
+                    <InputText
+                      id="code_houses"
+                      value={codeHouses}
+                      onChange={handleCodeHouses}
+                      autoFocus
+                      className={classNames({
+                        'p-invalid': submitted && codeHouses === '',
+                      })}
+                    />
+                  </div>
+                  {submitted && codeHouses === '' && (
+                    <small className="p-invalid">
+                      El código para las viviendas es requirido.
+                    </small>
+                  )}
                 </div>
-                {submitted && codeHouses === '' && (
-                  <small className="p-invalid">
-                    El código para las viviendas es requirido.
-                  </small>
-                )}
               </div>
+             
             </div>
-            <div style={{
-              display: "flex",
-              justifyContent: "center",
-              gap: "10px",
-              width: "100%"
-            }} className="col-12 md:col-12 py-2">
-              <Button
-                label={saveButtonLabel}
-                icon="pi pi-check"
-                onClick={saveCommunity}
-              />
-              {saveButtonLabel === 'Actualizar' && (
-                <Button
-                  label="Cancelar"
-                  onClick={cancelEdit}
-                  className="p-button-danger" />)}
-            </div>
-          </div>
+          </Dialog>
         </div>
       </div>
     </div>
diff --git a/web-ui/web-react/src/components/GuardasSeguridad.js b/web-ui/web-react/src/components/GuardasSeguridad.js
index 1654a330..4ddd8464 100644
--- a/web-ui/web-react/src/components/GuardasSeguridad.js
+++ b/web-ui/web-react/src/components/GuardasSeguridad.js
@@ -46,6 +46,7 @@ const GuardasSeguridad = () => {
   const [changeStatusGuardDialog, setChangeStatusGuardDialog] = useState(false);
   const [guardDialog, setGuardDialog] = useState(false);
   const [submitted, setSubmitted] = useState(false);
+  const [formGuardDialog, setFormGuardDialog] = useState(false);
 
 
   async function listaGuardasF() {
@@ -98,6 +99,8 @@ const GuardasSeguridad = () => {
           return response.json();
       }).then(() => {
         listaGuardasF();
+        setFormGuardDialog(false)
+        setGuarda(emptyGuarda)
       }).catch(
         err => console.log('Ocurrió un error con el fetch', err)
       );
@@ -122,6 +125,8 @@ const GuardasSeguridad = () => {
           detail: 'Guarda actualizado correctamente'
         });
         setGuarda(emptyGuarda);
+        setFormGuardDialog(false)
+
         listaGuardasF();
       })
     }
@@ -179,7 +184,7 @@ const GuardasSeguridad = () => {
         console.log(`Ocurrió un error con el servicio: ${response.status}`);
       else
         return response.json();
-    }).then(function() {
+    }).then(function () {
       let _guarda = listaGuardas.filter(val => val._id !== guarda._id);
       setListaGuardas(_guarda);
       setDeleteGuardaDialog(false);
@@ -251,13 +256,29 @@ const GuardasSeguridad = () => {
 
   const editGuard = (guard) => {
     setGuarda(guard);
-    console.log(guard);
+    setFormGuardDialog(true)
     setSaveButtonTitle("Actualizar");
   }
 
   const cancelEdit = () => {
     setGuarda(emptyGuarda);
     setSaveButtonTitle("Registrar");
+    setFormGuardDialog(false)
+
+  }
+
+
+  const openNewGuard = () => {
+    setGuarda(emptyGuarda);
+    setFormGuardDialog(true)
+    setSubmitted(false);
+  };
+
+  const hideFormGuardDialog = () => {
+    setSubmitted(false);
+    setFormGuardDialog(false)
+    setGuarda(emptyGuarda);
+    setSaveButtonTitle('Registrar');
   }
 
   const actionsGuard = (rowData) => {
@@ -300,6 +321,12 @@ const GuardasSeguridad = () => {
     return (
       <React.Fragment>
         <div className="my-2">
+          <Button
+            label="Agregar Guarda"
+            icon="pi pi-plus"
+            className="p-button-primary mr-2"
+            onClick={openNewGuard}
+          />
           <Button label="Eliminar"
             icon="pi pi-trash"
             className="p-button-danger"
@@ -372,6 +399,22 @@ const GuardasSeguridad = () => {
     </>
   );
 
+  const formGuardDialogFooter = (
+    <>
+      <Button
+        label={`${saveButtonTitle}`}
+        icon="pi pi-check"
+        className="p-button-primary"
+        onClick={registrarGuarda}
+      />
+      <Button
+        label="Cerrar"
+        icon="pi pi-times"
+        className="p-button-text"
+        onClick={hideFormGuardDialog}
+      />
+    </>
+  );
 
   const headerName = (
     <>
@@ -472,7 +515,7 @@ const GuardasSeguridad = () => {
               body={statusBodyTemplate}
               style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
             </Column>
-            <Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsGuard}></Column>
+            <Column style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }} body={actionsGuard}></Column>
           </DataTable>
           <Dialog
             visible={guardDialog}
@@ -484,30 +527,22 @@ const GuardasSeguridad = () => {
             onHide={hideGuardDialog}>
             <div className='container text-center'>
               <div className='row my-4'>
-                <div className=" col-4 md:col-4">
-                  <p>Nombre</p>
-                  <div className="p-0 col-2  md:col-2" style={{ margin: '0 auto' }}>
-                    <div className="p-inputgroup align-items-center justify-content-evenly">
-                      <i className="pi pi-user icon-khaki"></i>
-                      <p>{guarda.name}</p>
-                    </div>
-                  </div>
-                </div>
-                <div className=" col-4 md:col-4">
-                  <p>Apellido(s)</p>
-                  <div className="p-0 col-6  md:col-6" style={{ margin: '0 auto' }}>
-                    <div className="p-inputgroup align-items-center justify-content-evenly">
-                      <i className="pi pi-user icon-khaki"></i>
-                      <p>{guarda.last_name}</p>
-                    </div>
+                <div className=" col-6 md:col-6">
 
+                  <i className="pi pi-user icon-khaki"></i>
+                  <p><strong>Nombre Completo</strong></p>
+                  <div className="p-0 col-12  md:col-12" style={{ margin: '0 auto' }}>
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <p>{guarda.name + ' ' + guarda.last_name}</p>
+                    </div>
                   </div>
                 </div>
-                <div className=" col-4 col-md-4 md:col-4">
-                  <p>Identificación</p>
-                  <div className="p-0 col-10 md:col-10" style={{ margin: '0 auto' }}>
+
+                <div className=" col-6 col-md-6 md:col-6">
+                  <i className="pi pi-id-card icon-khaki"></i>
+                  <p><strong>Identificación</strong></p>
+                  <div className="p-0 col-12 md:col-12" style={{ margin: '0 auto' }}>
                     <div className="p-inputgroup align-items-center justify-content-evenly">
-                      <i className="pi pi-id-card icon-khaki"></i>
                       <p>{guarda.dni}</p>
                     </div>
 
@@ -517,21 +552,22 @@ const GuardasSeguridad = () => {
               <div className='row my-5 justify-content-center'>
               </div>
               <div className='row my-5 justify-content-center'>
-                <div className=" col-4 md:col-4">
-                  <p>Teléfono</p>
-                  <div className="p-0 col-10 md:col-10">
+                <div className=" col-6 md:col-6">
+                  <i className="pi pi-phone icon-khaki"></i>
+                  <p><strong>Teléfono</strong></p>
+                  <div className="p-0 col-12 md:col-12">
                     <div className="p-inputgroup align-items-center justify-content-evenly">
-                      <i className="pi pi-phone icon-khaki"></i>
                       <p>{guarda.phone}</p>
                     </div>
 
                   </div>
                 </div>
                 <div className=" col-6 md:col-6">
-                  <p>Correo Electrónico</p>
-                  <div className="p-0 col-10  md:col-10" style={{ margin: '0 auto' }}>
+                  <i className="pi pi-envelope icon-khaki"></i>
+
+                  <p><strong>Correo Electrónico</strong></p>
+                  <div className="p-0 col-12  md:col-12" style={{ margin: '0 auto' }}>
                     <div className="p-inputgroup align-items-center justify-content-evenly">
-                      <i className="pi pi-envelope icon-khaki"></i>
                       <p>{guarda.email}</p>
                     </div>
 
@@ -573,93 +609,83 @@ const GuardasSeguridad = () => {
               )}
             </div>
           </Dialog>
+          <Dialog
+            visible={formGuardDialog}
+            style={{ width: '750px' }}
+            header='Mantenimiento de Guarda de Seguridad'
+            modal
+            footer={formGuardDialogFooter}
+            onHide={hideFormGuardDialog}
+          >
+            <div className="p-fluid formgrid grid">
+              <div className="field col-12 md:col-6">
+                <label htmlFor="name">Nombre</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-home"></i>
+                    </span>
+                    <InputText type="text" id="name" value={guarda.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.name === '' })} />
+                  </div>
+                  {submitted && guarda.name === '' && <small className="p-invalid">Nombre es requerido.</small>}
+                </div>
+              </div>
+              <div className="field col-12 md:col-6">
+                <label htmlFor="name">Apellido(s)</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-home"></i>
+                    </span>
+                    <InputText type="text" id="last_name" value={guarda.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.last_name === '' })} />
+                  </div>
+                  {submitted && guarda.last_name === '' && <small className="p-invalid">Apellidos son requeridos.</small>}
+                </div>
+              </div>
+              <div className="field col-12 md:col-6">
+                <label htmlFor="name">Correo Electrónico</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-home"></i>
+                    </span>
+                    <InputText type='email' id="email" value={guarda.email} onChange={(e) => onInputChange(e, 'email')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.email === '' })} />
+                  </div>
+                  {submitted && guarda.email === '' && <small className="p-invalid">Correo electrónico es requerido.</small>}
+                </div>
+              </div>
+              <div className="field col-12 md:col-6">
+                <label htmlFor="dni">Identificación</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-home"></i>
+                    </span>
+                    <InputText id="dni" value={guarda.dni} onChange={(e) => onInputChange(e, 'dni')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.dni === '' })} />
+                  </div>
+                  {submitted && guarda.email === '' && <small className="p-invalid">Identificación es requerida.</small>}
+                </div>
+              </div>
+              <div className="field col-12 md:col-6">
+                <label htmlFor="phone">Número de teléfono</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-phone"></i>
+                    </span>
+                    <InputText id="phone" value={guarda.phone} onChange={(e) => onInputChange(e, 'phone')} type='tel' required autoFocus className={classNames({ 'p-invalid': submitted && guarda.phone === '' })} />
+                  </div>
+                  {submitted
+                    && guarda.phone === ''
+                    && <small className="p-invalid">Número de teléfono es requerido.</small>}
+                </div>
+              </div>
+
+            </div>
+          </Dialog>
         </div>
       </div>
-      <div className="col-12">
-        <div className="card">
-          <h5>Registro de un Guarda de Seguridad</h5>
-          <div className="p-fluid formgrid grid">
-            <div className="field col-12 md:col-6">
-              <label htmlFor="name">Nombre</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-home"></i>
-                  </span>
-                  <InputText type="text" id="name" value={guarda.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.name === '' })} />
-                </div>
-                {submitted && guarda.name === '' && <small className="p-invalid">Nombre es requerido.</small>}
-              </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="name">Apellido(s)</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-home"></i>
-                  </span>
-                  <InputText type="text" id="last_name" value={guarda.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.last_name === '' })} />
-                </div>
-                {submitted && guarda.last_name === '' && <small className="p-invalid">Apellidos son requeridos.</small>}
-              </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="name">Correo Electrónico</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-home"></i>
-                  </span>
-                  <InputText type='email' id="email" value={guarda.email} onChange={(e) => onInputChange(e, 'email')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.email === '' })} />
-                </div>
-                {submitted && guarda.email === '' && <small className="p-invalid">Correo electrónico es requerido.</small>}
-              </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="dni">Identificación</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-home"></i>
-                  </span>
-                  <InputText id="dni" value={guarda.dni} onChange={(e) => onInputChange(e, 'dni')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.dni === '' })} />
-                </div>
-                {submitted && guarda.email === '' && <small className="p-invalid">Identificación es requerida.</small>}
-              </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="phone">Número de teléfono</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-phone"></i>
-                  </span>
-                  <InputText id="phone" value={guarda.phone} onChange={(e) => onInputChange(e, 'phone')} type='tel' required autoFocus className={classNames({ 'p-invalid': submitted && guarda.phone === '' })} />
-                </div>
-                {submitted
-                  && guarda.phone === ''
-                  && <small className="p-invalid">Número de teléfono es requerido.</small>}
-              </div>
-            </div>
-            <div style={{
-              display: "flex",
-              justifyContent: "center",
-              gap: "10px",
-              width: "100%"
-            }}>
-              <Button
-                label={`${saveButtonTitle}`}
-                onClick={registrarGuarda}
-              />
-              {saveButtonTitle === 'Actualizar' && (
-                <Button
-                  label="Cancel"
-                  onClick={cancelEdit}
-                  className="p-button-danger" />)}
-            </div>
-          </div>
-        </div>
-      </div>
+
     </div>
   );
 };
diff --git a/web-ui/web-react/src/components/Inquilinos.js b/web-ui/web-react/src/components/Inquilinos.js
index 2fc7413d..594547b3 100644
--- a/web-ui/web-react/src/components/Inquilinos.js
+++ b/web-ui/web-react/src/components/Inquilinos.js
@@ -51,6 +51,8 @@ const Inquilinos = () => {
   const dt = useRef(null)
   const [cookies] = useCookies()
   const [changeStatusTenantDialog, setChangeStatusTenantDialog] = useState(false)
+  const [tenantDialog, setTenantDialog] = useState(false)
+
 
   async function tenantsList() {
     await fetch(
@@ -74,7 +76,7 @@ const Inquilinos = () => {
         })
         data = data.filter(
           (val) => val.status != -1,
-      );
+        );
         setTenants(data)
       })
   }
@@ -155,6 +157,8 @@ const Inquilinos = () => {
             setTenants(_tenants)
             setTenant(emptyTenant)
             setHouseNumber('')
+            setTenantDialog(false)
+
           })
           .catch((error) => console.log(`Ocurrió un error: ${error}`))
       } else setSubmitted(true)
@@ -175,14 +179,14 @@ const Inquilinos = () => {
       }).then(() => {
 
         fetch('http://localhost:4000/community/saveTenant',
-        {
-          cache: 'no-cache',
-          method: 'POST',
-          body: JSON.stringify(_tenant),
-          headers: {
-            'Content-Type': 'application/json',
-          }
-        });
+          {
+            cache: 'no-cache',
+            method: 'POST',
+            body: JSON.stringify(_tenant),
+            headers: {
+              'Content-Type': 'application/json',
+            }
+          });
 
         toast.current.show({
           severity: 'success',
@@ -193,6 +197,8 @@ const Inquilinos = () => {
         tenantsList()
         setTenant(emptyTenant)
         setHouseNumber('')
+        setTenantDialog(false)
+
       })
     }
   }
@@ -352,17 +358,34 @@ const Inquilinos = () => {
 
   const editTenant = (tenant) => {
     setTenant(tenant);
-    console.log(tenant);
     setSaveButtonTitle('Actualizar');
     setHouseNumber(tenant.number_house);
+    setTenantDialog(true)
+
   }
 
   const cancelEdit = () => {
     setTenant(emptyTenant);
     setSaveButtonTitle('Registrar');
     setHouseNumber('');
+    setTenantDialog(false)
+
   }
 
+  const openNewTenant = () => {
+    setTenant(emptyTenant);
+    setTenantDialog(true)
+    setSubmitted(false);
+  };
+
+  const hideTenantDialog = () => {
+    setSubmitted(false);
+    setTenantDialog(false)
+    setTenant(emptyTenant);
+    setSaveButtonTitle('Registrar');
+
+  };
+
   const actionsTenant = (rowData) => {
     let icono = ''
     let text = ''
@@ -407,6 +430,12 @@ const Inquilinos = () => {
     return (
       <React.Fragment>
         <div className='my-2'>
+          <Button
+            label="Agregar Inquilino"
+            icon="pi pi-plus"
+            className="p-button-primary mr-2"
+            onClick={openNewTenant}
+          />
           <Button
             label='Eliminar'
             icon='pi pi-trash'
@@ -507,6 +536,23 @@ const Inquilinos = () => {
     </>
   );
 
+  const tenantDialogFooter = (
+    <>
+      <Button
+        label={`${saveButtonTitle}`}
+        icon="pi pi-check"
+        className="p-button-primary"
+        onClick={saveTenant}
+      />
+      <Button
+        label="Cerrar"
+        icon="pi pi-times"
+        className="p-button-text"
+        onClick={hideTenantDialog}
+      />
+    </>
+  );
+
   const headerName = (
     <>
       <p>
@@ -610,14 +656,14 @@ const Inquilinos = () => {
             value={tenants}
             dataKey='_id'
             paginator
-            rows={5}
+            rows={10}
             selection={selectedTentants}
             onSelectionChange={(e) => setSelectedTenants(e.value)}
             scrollable
-            scrollHeight='400px'
+            scrollHeight='800px'
             scrollDirection='both'
             header={header}
-            rowsPerPageOptions={[5, 10, 25]}
+            rowsPerPageOptions={[10, 20, 30]}
             className='datatable-responsive mt-3'
             paginatorTemplate='FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown'
             currentPageReportTemplate='Mostrando {first} a {last} de {totalRecords} inquilinos'
@@ -673,16 +719,7 @@ const Inquilinos = () => {
                 wordBreak: 'break-word',
               }}
             ></Column>
-            <Column
-              field='phone'
-              header={headerPhone}
-              style={{
-                flexGrow: 1,
-                flexBasis: '80px',
-                minWidth: '80px',
-                wordBreak: 'break-word',
-              }}
-            ></Column>
+
             <Column
               field='number_house'
               sortable
@@ -707,7 +744,7 @@ const Inquilinos = () => {
                 wordBreak: 'break-word',
               }}
             ></Column>
-            <Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsTenant}></Column>
+            <Column style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }} body={actionsTenant}></Column>
           </DataTable>
           <Dialog
             visible={infoDialogVisible}
@@ -780,23 +817,155 @@ const Inquilinos = () => {
 
           </Dialog>
           <Dialog
-            visible={deleteTenantDialog}
-            style={{ width: '450px' }}
-            header='Confirmar'
+            visible={infoDialogVisible}
+            style={{ width: '650px' }}
+            header="Información del Inquilino"
             modal
-            footer={deleteTenantDialogFooter}
-            onHide={hideDeleteTenantDialog}
+            className="p-fluid"
+            footer={infoDialogFooter}
+            onHide={hideInfoDialog}>
+            <div className='container text-center'>
+              <div className='row my-4 justify-content-center'>
+                <div className=" col-6 md:col-6">
+                  <i className="pi pi-user icon-khaki"></i>
+                  <p><strong>Nombre Completo</strong></p>
+                  <div className="p-0 col-12  md:col-12" style={{ margin: '0 auto' }}>
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <p>{tenant.name + ' ' + tenant.last_name} </p>
+                    </div>
+                  </div>
+                </div>
+                <div className=" col-6 col-md-6 md:col-6">
+                  <i className="pi pi-id-card icon-khaki"></i>
+                  <p><strong>Identificación</strong></p>
+                  <div className="p-0 col-10 md:col-10" style={{ margin: '0 auto' }}>
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <p>{tenant.dni}</p>
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+
+              <div className='row my-5 justify-content-center'>
+                <div className=" col-6 md:col-6">
+                  <i className="pi pi-phone icon-khaki"></i>
+                  <p><strong>Teléfono</strong></p>
+                  <div className="p-0 col-12 md:col-12">
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <p>{tenant.phone}</p>
+                    </div>
+                  </div>
+                </div>
+                <div className=" col-6 md:col-6">
+                  <i className="pi pi-envelope icon-khaki"></i>
+
+                  <p><strong>Correo Electrónico</strong></p>
+                  <div className="p-0 col-12  md:col-12" style={{ margin: '0 auto' }}>
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <p>{tenant.email}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Dialog>
+          <Dialog
+            visible={tenantDialog}
+            style={{ width: '750px' }}
+            header='Mantenimiento de inquilino'
+            modal
+            footer={tenantDialogFooter}
+            onHide={hideTenantDialog}
           >
-            <div className='flex align-items-center justify-content-center'>
-              <i
-                className='pi pi-exclamation-triangle mr-3'
-                style={{ fontSize: '2rem' }}
-              />
-              {tenant && (
-                <span>
-                  ¿Estás seguro que desea eliminar a <b>{tenant.name}</b>?
-                </span>
-              )}
+            <div className="p-fluid formgrid grid">
+              <div className="field col-12 md:col-6">
+                <label htmlFor="name">Nombre</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-home"></i>
+                    </span>
+                    <InputText type="text" id="name" value={tenant.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.name === '' })} />
+                  </div>
+                  {submitted && tenant.name === '' && <small className="p-invalid">Nombre es requerido.</small>}
+                </div>
+              </div>
+              <div className="field col-12 md:col-6">
+                <label htmlFor="name">Apellido(s)</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-home"></i>
+                    </span>
+                    <InputText type="text" id="last_name" value={tenant.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.last_name === '' })} />
+                  </div>
+                  {submitted && tenant.last_name === '' && <small className="p-invalid">Apellidos son requeridos.</small>}
+                </div>
+              </div>
+              <div className="field col-12 md:col-6">
+                <label htmlFor="name">Correo Electrónico</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-home"></i>
+                    </span>
+                    <InputText type='email' id="email" value={tenant.email} onChange={(e) => onInputChange(e, 'email')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.email === '' })} />
+                  </div>
+                  {submitted && tenant.email === '' && <small className="p-invalid">Correo electrónico es requerido.</small>}
+                </div>
+              </div>
+              <div className="field col-12 md:col-6">
+                <label htmlFor="dni">Identificación</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-home"></i>
+                    </span>
+                    <InputText id="dni" value={tenant.dni} onChange={(e) => onInputChange(e, 'dni')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.dni === '' })} />
+                  </div>
+                  {submitted && tenant.dni === '' && <small className="p-invalid">Identificación es requerida.</small>}
+                </div>
+              </div>
+              <div className="field col-12 md:col-6">
+                <label htmlFor="phone">Número de teléfono</label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-phone"></i>
+                    </span>
+                    <InputText id="phone" value={tenant.phone} onChange={(e) => onInputChange(e, 'phone')} type='tel' required autoFocus className={classNames({ 'p-invalid': submitted && tenant.phone === '' })} />
+                  </div>
+                  {submitted
+                    && tenant.phone === ''
+                    && <small className="p-invalid">Número de teléfono es requerido.</small>}
+                </div>
+              </div>
+              <div className="field col-12 md:col-6">
+                <label htmlFor="number_house">Casa a asignar: </label>
+                <div className="p-0 col-12 md:col-12">
+                  <div className="p-inputgroup">
+                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                      <i className="pi pi-home"></i>
+                    </span>
+                    <Dropdown
+                      placeholder="--Seleccione la Casa a Asignar--"
+                      id="number_house"
+                      value={houseNumber}
+                      options={housesList}
+                      onChange={handleHouses}
+                      required autoFocus
+                      className={
+                        classNames({ 'p-invalid': submitted && !houseNumber })}
+                    />
+                  </div>
+                  {submitted
+                    && !houseNumber
+                    && <small className="p-invalid">Casa es requerida.</small>}
+                </div>
+              </div>
+
+
             </div>
           </Dialog>
           <Dialog
@@ -838,116 +1007,9 @@ const Inquilinos = () => {
             </div>
           </Dialog>
         </div>
-      </div>
-      <div className="col-12">
-        <div className="card">
-          <h5>Registro de un Inquilino</h5>
-          <div className="p-fluid formgrid grid">
-            <div className="field col-12 md:col-6">
-              <label htmlFor="name">Nombre</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-home"></i>
-                  </span>
-                  <InputText type="text" id="name" value={tenant.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.name === '' })} />
-                </div>
-                {submitted && tenant.name === '' && <small className="p-invalid">Nombre es requerido.</small>}
-              </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="name">Apellido(s)</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-home"></i>
-                  </span>
-                  <InputText type="text" id="last_name" value={tenant.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.last_name === '' })} />
-                </div>
-                {submitted && tenant.last_name === '' && <small className="p-invalid">Apellidos son requeridos.</small>}
-              </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="name">Correo Electrónico</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-home"></i>
-                  </span>
-                  <InputText type='email' id="email" value={tenant.email} onChange={(e) => onInputChange(e, 'email')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.email === '' })} />
-                </div>
-                {submitted && tenant.email === '' && <small className="p-invalid">Correo electrónico es requerido.</small>}
-              </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="dni">Identificación</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-home"></i>
-                  </span>
-                  <InputText id="dni" value={tenant.dni} onChange={(e) => onInputChange(e, 'dni')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.dni === '' })} />
-                </div>
-                {submitted && tenant.dni === '' && <small className="p-invalid">Identificación es requerida.</small>}
-              </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="phone">Número de teléfono</label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-phone"></i>
-                  </span>
-                  <InputText id="phone" value={tenant.phone} onChange={(e) => onInputChange(e, 'phone')} type='tel' required autoFocus className={classNames({ 'p-invalid': submitted && tenant.phone === '' })} />
-                </div>
-                {submitted
-                  && tenant.phone === ''
-                  && <small className="p-invalid">Número de teléfono es requerido.</small>}
-              </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="number_house">Casa a asignar: </label>
-              <div className="p-0 col-12 md:col-12">
-                <div className="p-inputgroup">
-                  <span className="p-inputgroup-addon p-button p-icon-input-khaki">
-                    <i className="pi pi-home"></i>
-                  </span>
-                  <Dropdown
-                    placeholder="--Seleccione la Casa a Asignar--"
-                    id="number_house"
-                    value={houseNumber}
-                    options={housesList}
-                    onChange={handleHouses}
-                    required autoFocus
-                    className={
-                      classNames({ 'p-invalid': submitted && !houseNumber })}
-                  />
-                </div>
-                {submitted
-                  && !houseNumber
-                  && <small className="p-invalid">Casa es requerida.</small>}
-              </div>
-            </div>
-            <div style={{
-              display: "flex",
-              justifyContent: "center",
-              gap: "10px",
-              width: "100%"
-            }}>
-              <Button
-                label={`${saveButtonTitle}`}
-                onClick={saveTenant}
-              />
-              {saveButtonTitle === 'Actualizar' && (
-                <Button
-                  label="Cancelar"
-                  onClick={cancelEdit}
-                  className="p-button-danger" />)}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+      </div >
+
+    </div >
   )
 }
 
diff --git a/web-ui/web-react/src/components/InvitadosComunidad.js b/web-ui/web-react/src/components/InvitadosComunidad.js
index 4e59b24f..0ebb6c92 100644
--- a/web-ui/web-react/src/components/InvitadosComunidad.js
+++ b/web-ui/web-react/src/components/InvitadosComunidad.js
@@ -171,41 +171,35 @@ const InvitadosComunidad = () => {
             globalFilter={globalFilter}
             emptyMessageTemplate="No se encontraron invitados"
           >
-            <Column field="name" header="Nombre" sortable header={headerName} />
+            <Column field="name" sortable header={headerName} />
             <Column
               field="last_name"
-              header="Apellido"
               sortable
               header={headerLastName}
             />
-            <Column field="dni" header="DNI" sortable header={headerDNI} />
+            <Column field="dni"  sortable header={headerDNI} />
             <Column
               field="number_plate"
-              header="Placa"
               sortable
               header={headerPlate}
             />
             <Column
               field="telefono"
-              header="Teléfono"
               sortable
               header={headerPhone}
             />
             <Column
               field="email"
-              header="Email"
               sortable
               header={headerEmail}
             />
             <Column
               field="date_entry"
-              header="Fecha de registro"
               sortable
               header={headerName}
             />
             <Column
               field="tenant_name"
-              header="Inquilino"
               sortable
               header={headerTenant}
             />
diff --git a/web-ui/web-react/src/components/RegistroComunicado.js b/web-ui/web-react/src/components/RegistroComunicado.js
index 945bbc2c..f592e0c1 100644
--- a/web-ui/web-react/src/components/RegistroComunicado.js
+++ b/web-ui/web-react/src/components/RegistroComunicado.js
@@ -37,6 +37,9 @@ const RegistroComunicado = () => {
   const dt = useRef(null);
   const [cookies, setCookie] = useCookies();
   const [globalFilter, setGlobalFilter] = useState(null);
+  const [postDialog, setPostDialog] = useState(false);
+
+
 
   async function listaComunis() {
     let comunicadosResponse = await fetch('http://localhost:4000/post/allPosts', { method: 'GET' });
@@ -127,6 +130,12 @@ const RegistroComunicado = () => {
     return (
       <React.Fragment>
         <div className="my-2">
+        <Button
+            label="Agregar Comunicado"
+            icon="pi pi-plus"
+            className="p-button-primary mr-2"
+            onClick={openNewPost}
+          />
           <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" />
         </div>
       </React.Fragment>
@@ -145,6 +154,8 @@ const RegistroComunicado = () => {
     setComunicado(rowData);
     setComunicadoId(rowData._id);
     setSaveButtonLabel('Actualizar');
+    setPostDialog(true)
+
   }
 
   const cancelEdit = () => {
@@ -177,6 +188,20 @@ const RegistroComunicado = () => {
     setShowDeleteDialog(true);
   }
 
+  const openNewPost = () => {
+    setComunicado(emptyComunicado);
+    setPostDialog(true)
+    setSubmitted(false);
+  };
+
+  const hidePostDialog = () => {
+    setSubmitted(false);
+    setPostDialog(false)
+    setComunicado(emptyComunicado);
+    setSaveButtonLabel('Registrar');
+  }
+
+
   const deleteDialogFooter = (
     <>
       <Button label="Cancelar" icon="pi pi-times" className="p-button-secondary" onClick={() => setShowDeleteDialog(false)} />
@@ -184,6 +209,23 @@ const RegistroComunicado = () => {
     </>
   );
 
+  const postDialogFooter = (
+    <>
+      <Button
+        label={`${saveButtonLabel}`}
+        icon="pi pi-check"
+        className="p-button-primary"
+        onClick={saveComunicado}
+      />
+      <Button
+        label="Cerrar"
+        icon="pi pi-times"
+        className="p-button-text"
+        onClick={hidePostDialog}
+      />
+    </>
+  );
+
   const deleteComunicado = () => {
     fetch(`http://localhost:4000/post/deletePost/${comunicado._id}`, {
       cache: 'no-cache',
@@ -235,12 +277,15 @@ const RegistroComunicado = () => {
               }}
               body={actions} />
           </DataTable>
-        </div>
-      </div>
-      <div className="col-12">
-        <div className="card">
-          <h5>Registro de un comunicado para la comunidad</h5>
-          <div className="p-fluid formgrid grid">
+          <Dialog
+            visible={postDialog}
+            style={{ width: '650px' }}
+            header="Mantenimiento del Comunicado"
+            modal
+            className="p-fluid"
+            footer={postDialogFooter}
+            onHide={hidePostDialog}>
+            <div className="p-fluid formgrid grid">
             <div className="field col-12 md:col-12">
               <label htmlFor="name">Contenido del comunicado</label>
               <div className="p-0 col-12 md:col-12">
@@ -261,25 +306,13 @@ const RegistroComunicado = () => {
                 </div>
               </div>
             </div>
-            <div style={{
-              display: "flex",
-              justifyContent: "center",
-              gap: "10px",
-              width: "100%"
-            }}>
-              <Button
-                label={`${saveButtonLabel}`}
-                onClick={saveComunicado}
-              />
-              {saveButtonLabel === 'Actualizar' && (
-                <Button
-                  label="Cancelar"
-                  onClick={cancelEdit}
-                  className="p-button-danger" />)}
-            </div>
+          
           </div>
+
+          </Dialog>
         </div>
       </div>
+    
     </div>
   );
 };