diff --git a/web-ui/web-react/src/components/AdministradoresComunidad.js b/web-ui/web-react/src/components/AdministradoresComunidad.js
index 37c4dae6..09c1fcf6 100644
--- a/web-ui/web-react/src/components/AdministradoresComunidad.js
+++ b/web-ui/web-react/src/components/AdministradoresComunidad.js
@@ -345,15 +345,7 @@ const AdministradoresComunidad = () => {
         </>
     )
 
-    const headerOptions = (
-        <>
-            <p>
-                {' '}
-                <FontAwesomeIcon icon={faEllipsis} size="2x" style={{ color: "#C08135" }} />{' '}
-
-            </p>
-        </>
-    )
+  
 
     const onInputChange = (e, name) => {
         const val = (e.target && e.target.value) || '';
@@ -389,9 +381,9 @@ const AdministradoresComunidad = () => {
                         <Column field="dni" sortable header={headerDNI} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
                         </Column>
                         <Column field="email" sortable header={headerEmail} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
-                        <Column field="phone" sortable header={headerPhone} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
-                        <Column field="community_name" header={headerCommuntiy} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
-                        <Column header={headerOptions} style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsAdminCommunity}></Column>
+                        <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  style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} 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">
diff --git a/web-ui/web-react/src/components/AdministradoresSistema.js b/web-ui/web-react/src/components/AdministradoresSistema.js
index 5d007e38..6b609bcf 100644
--- a/web-ui/web-react/src/components/AdministradoresSistema.js
+++ b/web-ui/web-react/src/components/AdministradoresSistema.js
@@ -313,15 +313,6 @@ const AdministradoresSistema = () => {
     </>
   );
 
-  const headerOptions = (
-    <>
-      <p>
-        Opciones{' '}
-        <FontAwesomeIcon icon={faEllipsis} style={{ color: '#D7A86E' }} />
-      </p>
-    </>
-  );
-
   return (
     <div className="grid">
       <div className="col-12">
@@ -402,7 +393,6 @@ const AdministradoresSistema = () => {
             ></Column>
             <Column
               field="phone"
-              sortable
               header={headerPhone}
               style={{
                 flexGrow: 1,
@@ -412,7 +402,7 @@ const AdministradoresSistema = () => {
               }}
             ></Column>
             <Column
-              header={headerOptions}
+              
               style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }}
               body={actionsAdmin}
             ></Column>
diff --git a/web-ui/web-react/src/components/ComunidadViviendas.js b/web-ui/web-react/src/components/ComunidadViviendas.js
index 706f9063..c0d9a92c 100644
--- a/web-ui/web-react/src/components/ComunidadViviendas.js
+++ b/web-ui/web-react/src/components/ComunidadViviendas.js
@@ -432,7 +432,7 @@ const Communities = () => {
           icon={faMapLocationDot}
           style={{ color: '#D7A86E' }}
         />{' '}
-        Pronvincia
+        Provincia
       </p>
     </>
   );
@@ -493,15 +493,6 @@ const Communities = () => {
     </>
   );
 
-  const headerOptions = (
-    <>
-      <p>
-        Opciones{' '}
-        <FontAwesomeIcon icon={faEllipsis} style={{ color: '#D7A86E' }} />
-      </p>
-    </>
-  );
-
   return (
     <div className="grid">
       <div className="col-12">
@@ -537,21 +528,25 @@ const Communities = () => {
             ></Column>
             <Column
               field="name"
+              sortable
               header={headerName}
               style={{ flexGrow: 1, flexBasis: '160px' }}
             ></Column>
             <Column
               field="province"
+              sortable
               header={headerProvince}
               style={{ flexGrow: 1, flexBasis: '160px' }}
             ></Column>
             <Column
               field="canton"
+              sortable
               header={headerCanton}
               style={{ flexGrow: 1, flexBasis: '160px' }}
             ></Column>
             <Column
               field="district"
+              sortable
               header={headerDistrict}
               style={{ flexGrow: 1, flexBasis: '160px' }}
             ></Column>
@@ -562,15 +557,16 @@ const Communities = () => {
             ></Column>
             <Column
               field="num_houses"
+              sortable
               header={headerNumberHouses}
               style={{ flexGrow: 1, flexBasis: '180px' }}
             ></Column>
             <Column
               field="name_admin"
-              header={headerAdministrator}
+              sortable
               style={{ flexGrow: 1, flexBasis: '180px' }}
             ></Column>
-            <Column header={headerOptions} body={actionsCommunity}></Column>
+            <Column  body={actionsCommunity}></Column>
           </DataTable>
           <Dialog
             visible={deleteCommunityDialog}
diff --git a/web-ui/web-react/src/components/GuardasSeguridad.js b/web-ui/web-react/src/components/GuardasSeguridad.js
index e7ff5192..a092910f 100644
--- a/web-ui/web-react/src/components/GuardasSeguridad.js
+++ b/web-ui/web-react/src/components/GuardasSeguridad.js
@@ -14,8 +14,8 @@ import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons';
 import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
 
 const GuardasSeguridad = () => {
-    const [listaGuardas,setListaGuardas]=useState([]);
-    const [urlFetch,setUrlFetch]=useState('http://localhost:4000/user/findGuards/62be68215692582bbfd77134');
+    const [listaGuardas, setListaGuardas] = useState([]);
+    const [urlFetch, setUrlFetch] = useState('http://localhost:4000/user/findGuards/62be68215692582bbfd77134');
     const [guarda, setGuarda] = useState(emptyGuarda);
     const [selectedGuardas, setSelectedGuardas] = useState(null);
     const [globalFilter, setGlobalFilter] = useState(null);
@@ -37,14 +37,14 @@ const GuardasSeguridad = () => {
 
 
 
-    async function listaGuardasF(){
-    let nombres=await fetch(urlFetch, {method:'GET'});
-    let listaGuardasRes= await nombres.json();
-    setListaGuardas(listaGuardasRes.message);
-   }
-    useEffect(()=>{
+    async function listaGuardasF() {
+        let nombres = await fetch(urlFetch, { method: 'GET' });
+        let listaGuardasRes = await nombres.json();
+        setListaGuardas(listaGuardasRes.message);
+    }
+    useEffect(() => {
         listaGuardasF();
-    },[])
+    }, [])
 
     function registrarGuarda() {
         var data = {
@@ -56,9 +56,9 @@ const GuardasSeguridad = () => {
             password: document.getElementById('correo_electronico').value,
             user_type: "4", //4 es guarda
             status: "1",
-            community_id:"62be68215692582bbfd77134"
+            community_id: "62be68215692582bbfd77134"
         };
-        var data2={
+        var data2 = {
             dni: "11979037",
             name: "Jorge",
             last_name: "Soto",
@@ -67,35 +67,35 @@ const GuardasSeguridad = () => {
             password: "1203",
             user_type: "2",
             status: "4",
-            community_id:"62be68215692582bbfd77134"
+            community_id: "62be68215692582bbfd77134"
         }
-console.log('ssss');
-         fetch('http://localhost:4000/user/createGuard', {
+        console.log('ssss');
+        fetch('http://localhost:4000/user/createGuard', {
             cache: 'no-cache',
             method: 'POST',
-            mode:'cors',
+            mode: 'cors',
             body: JSON.stringify(data2),
             headers: {
                 'Content-Type': 'application/json'
             }
         })
-        .then(
-            function (response) {
-                if (response.status != 201)
-                    console.log('Ocurrió un error con el servicio: ' + response.status);
-                else
-                    return response.json();
-            }
-        )
-        .then(
-            function (response) {
-                 console.log('fff');
-                listaGuardasF();
-            }
-        )
-        .catch(
-            err => console.log('Ocurrió un error con el fetch', err)
-        );
+            .then(
+                function (response) {
+                    if (response.status != 201)
+                        console.log('Ocurrió un error con el servicio: ' + response.status);
+                    else
+                        return response.json();
+                }
+            )
+            .then(
+                function (response) {
+                    console.log('fff');
+                    listaGuardasF();
+                }
+            )
+            .catch(
+                err => console.log('Ocurrió un error con el fetch', err)
+            );
     }
 
     const hideDeleteGuardaDialog = () => {
@@ -218,48 +218,58 @@ console.log('ssss');
 
     const headerName = (
         <>
-            <p>Nombre</p>
+            <p>{' '}
+                <FontAwesomeIcon icon={faUserAlt} style={{ color: "#C08135" }} /> {' '}
+                Nombre
+            </p>
         </>
     )
 
     const headerLastName = (
         <>
-            <p>Apellidos</p>
+            <p>
+                {' '}
+                <FontAwesomeIcon icon={faUserAlt} style={{ color: "#D7A86E" }} />{' '}
+                Apellido(s)
+            </p>
         </>
     )
 
     const headerDNI = (
-        <>
-            <p>Identificación</p>
-        </>
+        <p> {' '}
+            <FontAwesomeIcon icon={faIdCardAlt} style={{ color: "#C08135" }} />{' '}
+            Identificación
+        </p>
     )
 
     const headerEmail = (
         <>
-            <p>Correo Electrónico</p>
+            <p> {' '}
+                <FontAwesomeIcon icon={faAt} style={{ color: "#D7A86E" }} />{' '}
+                Correo Electrónico
+            </p>
         </>
     )
 
     const headerPhone = (
         <>
-            <p>Teléfono</p>
+            <p>
+                {' '}
+                <FontAwesomeIcon icon={faPhoneAlt} style={{ color: '#C08135' }} />{' '}
+                Teléfono
+            </p>
         </>
     )
 
-    const headerOptions = (
-        <>
-            <p>Opciones</p>
-        </>
-    )
 
     return (
         <div className="grid">
-            <div className="col-12"> 
+            <div className="col-12">
                 <Toast ref={toast} />
                 <div className="card">
-                <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
+                    <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
                     <DataTable ref={dt} value={listaGuardas} dataKey="_id" paginator rows={5} selection={selectedGuardas} onSelectionChange={(e) => setSelectedGuardas(e.value)}
-                        responsiveLayout="scroll"  header={header}
+                        responsiveLayout="scroll" header={header}
                         rowsPerPageOptions={[5, 10, 25]} className="datatable-responsive mt-3"
                         paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                         currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords}"
@@ -270,8 +280,8 @@ console.log('ssss');
                         <Column field="dni" sortable header={headerDNI} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
                         </Column>
                         <Column field="email" sortable header={headerEmail} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
-                        <Column field="phone" sortable header={headerPhone} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
-                        <Column header={headerOptions} style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsAdmin}></Column>
+                        <Column field="phone" header={headerPhone} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
+                        <Column style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsAdmin}></Column>
                     </DataTable>
                     <Dialog visible={deleteGuardaDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteAdminSystemDialogFooter} onHide={hideDeleteGuardaDialog}>
                         <div className="flex align-items-center justify-content-center">
@@ -316,7 +326,7 @@ console.log('ssss');
                 </div>
             </div>
         </div>
-  );
+    );
 };
 
 export default React.memo(GuardasSeguridad);