diff --git a/web-ui/web-react/src/components/Inquilinos.js b/web-ui/web-react/src/components/Inquilinos.js
index 4325bcf5..e012e88e 100644
--- a/web-ui/web-react/src/components/Inquilinos.js
+++ b/web-ui/web-react/src/components/Inquilinos.js
@@ -15,6 +15,7 @@ import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons'
 import { faHashtag } from '@fortawesome/free-solid-svg-icons'
 import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons'
 import { useCookies } from 'react-cookie'
+import InfoDialog from './generic/InfoDialog'
 
 const Inquilinos = () => {
   let emptyTenant = {
@@ -43,6 +44,7 @@ const Inquilinos = () => {
   const [communitiesList, setCommunitiesList] = useState([])
   const [communityId, setCommunityId] = useState(null)
   const [submitted, setSubmitted] = useState(false)
+  let [openInfoDialog] = useState(false)
   const toast = useRef(null)
   const dt = useRef(null)
 
@@ -144,6 +146,10 @@ const Inquilinos = () => {
     })
   }
 
+  function openDialog() {
+    openInfoDialog = true
+  }
+
   const deleteSelectedTenants = () => {
     let _tenants = tenants.filter((val) => !selectedTentants.includes(val))
     setTenants(_tenants)
@@ -418,6 +424,13 @@ const Inquilinos = () => {
     )
   }
 
+  const testInquilino = {
+    name: 'Juan', // Nombre
+    last_name: 'Pérez', // Apellidos
+    email: 'jperez@gmail.com',
+    phone: '+57 300 1234567', // Teléfono
+  }
+
   return (
     <div className='grid'>
       <div className='col-12'>
@@ -619,6 +632,7 @@ const Inquilinos = () => {
               />
             </div>
             <Button label='Registrar' onClick={registrarInquilino} />
+            <Button label='testDialog' onClick={openDialog} />
           </div>
         </div>
       </div>
diff --git a/web-ui/web-react/src/components/generic/InfoDialog.js b/web-ui/web-react/src/components/generic/InfoDialog.js
index 4747ec65..d1faaceb 100644
--- a/web-ui/web-react/src/components/generic/InfoDialog.js
+++ b/web-ui/web-react/src/components/generic/InfoDialog.js
@@ -1,4 +1,6 @@
 import React from 'react'
+import { Dialog } from 'primereact/dialog'
+import { Button } from 'primereact/button'
 
 class InfoDialog extends React.Component {
   constructor(props) {
@@ -15,75 +17,81 @@ class InfoDialog extends React.Component {
   onClose = () => this.setState({ openInfoDialog: false })
   render() {
     return (
-      <Dialog
-        visible={this.state.openInfoDialog}
-        style={{ width: '650px' }}
-        modal
-        className='p-fluid'
-        header={this.props.header}
-        footer={this.state.footer}
-      >
-        <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' />
-                  <p>{this.props.info.name}</p>
-                </div>
-              </div>
+      <div>
+        <Dialog
+          visible={this.state.openInfoDialog}
+          style={{ width: '650px' }}
+          modal
+          className='p-fluid'
+          header={this.props.header}
+          footer={this.state.footer}
+        >
+          <div className='container text-center'>
+            <div className='row my-4'>
               <div className='col-4 md:col-4'>
-                <p>Apellido(s)</p>
+                <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' />
-                    <p>{this.props.info.last_name}</p>
+                    <p>{this.props.info.name}</p>
+                  </div>
+                </div>
+                <div className='col-4 md:col-4'>
+                  <p>Apellido(s)</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' />
+                      <p>{this.props.info.last_name}</p>
+                    </div>
+                  </div>
+                </div>
+                <div className='col-4 md:col-4'>
+                  <p>Identificación</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' />
+                      <p>{this.props.info.dni}</p>
+                    </div>
                   </div>
                 </div>
               </div>
-              <div className='col-4 md:col-4'>
-                <p>Identificación</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' />
-                    <p>{this.props.info.dni}</p>
+              <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='p-inputgroup align-items-center justify-content-evenly'>
+                      <i className='pi pi-phone icon-khaki'></i>
+                      <p>{this.props.info.phone}</p>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </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='p-inputgroup align-items-center justify-content-evenly'>
-                    <i className='pi pi-phone icon-khaki'></i>
-                    <p>{this.props.info.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' }}
-                >
-                  <div className='p-inputgroup align-items-center justify-content-evenly'>
-                    <i className='pi pi-envelope icon-khaki'></i>
-                    <p>{this.props.info.email}</p>
+                <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' }}
+                  >
+                    <div className='p-inputgroup align-items-center justify-content-evenly'>
+                      <i className='pi pi-envelope icon-khaki'></i>
+                      <p>{this.props.info.email}</p>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-      </Dialog>
+        </Dialog>
+      </div>
     )
   }
 }
+export default InfoDialog