diff --git a/api-gateway/src/app.controller.ts b/api-gateway/src/app.controller.ts
index abc90be1..ea569ede 100644
--- a/api-gateway/src/app.controller.ts
+++ b/api-gateway/src/app.controller.ts
@@ -215,6 +215,8 @@ export class AppController {
   ) {
     return this.appService.changeStatusCommunity(pId, pStatus);
   }
+
+  
   // #==== API Common Areas
   @Post('commonArea/createCommonArea')
   createCommonArea(
@@ -254,6 +256,14 @@ export class AppController {
     return this.appService.deleteCommonArea(id);
   }
 
+  @Post('commonArea/changeStatus')
+  changeStatusCommonArea(
+    @Body('id') pId: string,
+    @Body('status') pStatus: string,
+  ) {
+    return this.appService.changeStatusCommonArea(pId, pStatus);
+  }
+
   // #==== API GUEST
   //#API userService - create user
   @Post('guest/createGuest')
diff --git a/api-gateway/src/app.service.ts b/api-gateway/src/app.service.ts
index a5df9129..9dc93a79 100644
--- a/api-gateway/src/app.service.ts
+++ b/api-gateway/src/app.service.ts
@@ -343,6 +343,15 @@ export class AppService {
       .pipe(map((message: string) => ({ message })));
   }
 
+  changeStatusCommonArea(pId: string, pStatus: string) {
+    const pattern = { cmd: 'changeStatus' };
+    const payload = { id: pId, status: pStatus };
+    return this.clientCommonAreaApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
+
   // ====================== GUESTS ===============================
 
   //POST parameter from API
diff --git a/servicio-areas-comunes/src/common_areas/common_areas.controller.ts b/servicio-areas-comunes/src/common_areas/common_areas.controller.ts
index b4374c7d..28b5ce7e 100644
--- a/servicio-areas-comunes/src/common_areas/common_areas.controller.ts
+++ b/servicio-areas-comunes/src/common_areas/common_areas.controller.ts
@@ -39,4 +39,12 @@ export class CommonAreasController {
     let _community_id = id['community_id'];
     return this.commonAreasService.findByCommunity(_community_id);
   }
+
+   //cambiar de estado
+   @MessagePattern({ cmd: 'changeStatus' })
+   changeStatus(@Payload() body: string) {
+     let pid = body['id'];
+     let pstatus = body['status'];
+     return this.commonAreasService.changeStatus(pid,pstatus);
+   }
 }
diff --git a/servicio-areas-comunes/src/common_areas/common_areas.service.ts b/servicio-areas-comunes/src/common_areas/common_areas.service.ts
index 9135b5a2..e617df0c 100644
--- a/servicio-areas-comunes/src/common_areas/common_areas.service.ts
+++ b/servicio-areas-comunes/src/common_areas/common_areas.service.ts
@@ -41,4 +41,10 @@ export class CommonAreasService {
     return this.commonAreaModel.find({ community_id: community_id }).exec();
   }
 
+  async changeStatus(id: string, status: string) {
+    return this.commonAreaModel.findOneAndUpdate({ _id: id }, {status: status}, {
+      new: true,
+    });  
+  }
+
 }
diff --git a/web-ui/web-react/src/components/AdministradoresSistema.js b/web-ui/web-react/src/components/AdministradoresSistema.js
index 10f299f2..a301c3ed 100644
--- a/web-ui/web-react/src/components/AdministradoresSistema.js
+++ b/web-ui/web-react/src/components/AdministradoresSistema.js
@@ -44,7 +44,6 @@ const AdministradoresSistema = () => {
     status_text: '',
   };
 
-
   async function fetchP() {
     let nombres = await fetch(urlFetch, { method: 'GET' });
     let adminRes = await nombres.json();
@@ -60,11 +59,11 @@ const AdministradoresSistema = () => {
     })
     setAdministrators(await data);
   }
+
   useEffect(() => {
     fetchP();
   }, [])
 
-
   function registrarAdmin() {
     var data = {
       dni: document.getElementById('identificacion').value,
diff --git a/web-ui/web-react/src/components/AreasComunes.js b/web-ui/web-react/src/components/AreasComunes.js
index 0850e31c..7b0b6fd8 100644
--- a/web-ui/web-react/src/components/AreasComunes.js
+++ b/web-ui/web-react/src/components/AreasComunes.js
@@ -43,6 +43,7 @@ const AreasComunes = () => {
     const dt = useRef(null);
 
     const [cookies, setCookie] = useCookies();
+    const [changeStatusAreaDialog, setChangeStatusAreaDialog] = useState(false);
 
 
 
@@ -220,6 +221,51 @@ const AreasComunes = () => {
         });
     };
 
+    const cambiarStatuscommonArea = () => {
+        if (commonArea.status == '1') {
+            commonArea.status = '0';
+            commonArea.status_text = 'Inactivo';
+
+        } else if (commonArea.status == '0') {
+            commonArea.status = '1';
+            commonArea.status_text = 'Activo';
+        }
+        var data = {
+            id: commonArea._id,
+            status: commonArea.status,
+        };
+        fetch('http://localhost:4000/commonArea/changeStatus', {
+            cache: 'no-cache',
+            method: 'POST',
+            body: JSON.stringify(data),
+            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) {
+                    setChangeStatusAreaDialog(false);
+                    toast.current.show({
+                        severity: 'success',
+                        summary: 'Éxito',
+                        detail: 'Área Común Actualizada',
+                        life: 3000,
+                    });
+                }
+            )
+            .catch(
+                err => console.log('Ocurrió un error con el fetch', err)
+            );
+    }
+
     const hideDeleteCommonAreaDialog = () => {
         setDeleteCommonAreaDialog(false);
     }
@@ -237,9 +283,36 @@ const AreasComunes = () => {
         setDeleteCommonAreasDialog(true);
     };
 
+
+
+    const hideChangeStatusAreaDialog = () => {
+        setChangeStatusAreaDialog(false);
+    };
+
+    const confirmChangeStatusArea = (commonArea) => {
+        setCommonArea(commonArea);
+        setChangeStatusAreaDialog(true);
+    };
+
     const actionsCommonArea = (rowData) => {
+        let icono = '';
+        let text = '';
+        if (rowData.status == '0') {
+            icono = "pi pi-eye";
+            text = "Activar Área Común"
+        } else if (rowData.status == '1') {
+            icono = "pi pi-eye-slash";
+            text = "Inactivar Área Común"
+        }
+
         return (
             <div className="actions">
+                <Button
+                    icon={`${icono}`}
+                    className="p-button-rounded p-button-warning mt-2 mx-2"
+                    onClick={() => confirmChangeStatusArea(rowData)}
+                    title={`${text}`}
+                />
                 <Button
                     icon="pi pi-trash"
                     className="p-button-rounded p-button-danger mt-2"
@@ -276,6 +349,22 @@ const AreasComunes = () => {
         </>
     );
 
+    const changeStatusAreaDialogFooter = (
+        <>
+            <Button
+                label="No"
+                icon="pi pi-times"
+                className="p-button-text"
+                onClick={hideChangeStatusAreaDialog}
+            />
+            <Button
+                label="Yes"
+                icon="pi pi-check"
+                className="p-button-text"
+                onClick={cambiarStatuscommonArea}
+            />
+        </>
+    );
 
     const leftToolbarTemplate = () => {
         return (
@@ -431,6 +520,26 @@ const AreasComunes = () => {
                             {selectedCommonAreas && <span>¿Está seguro eliminar las áreas comunes seleccionadas?</span>}
                         </div>
                     </Dialog>
+                    <Dialog
+                        visible={changeStatusAreaDialog}
+                        style={{ width: '450px' }}
+                        header="Confirmar"
+                        modal
+                        footer={changeStatusAreaDialogFooter}
+                        onHide={hideChangeStatusAreaDialog}
+                    >
+                        <div className="flex align-items-center justify-content-center">
+                            <i
+                                className="pi pi-exclamation-triangle mr-3"
+                                style={{ fontSize: '2rem' }}
+                            />
+                            {commonArea && (
+                                <span>
+                                    ¿Estás seguro que desea cambiar estado a <b>{commonArea.name}</b>?
+                                </span>
+                            )}
+                        </div>
+                    </Dialog>
                 </div>
             </div>
             <div className="col-12">
@@ -513,7 +622,7 @@ const AreasComunes = () => {
                         </div>
                         <div className="field col-12 md:col-6">
                             <label htmlFor="bookable">¿Necesita Reservación?</label>
-                            <div className="formgrid grid align-items-end" style={{marginTop: '12px', width: '300px'}}>
+                            <div className="formgrid grid align-items-end" style={{ marginTop: '12px', width: '300px' }}>
                                 <div className="field-radiobutton col-6">
 
                                     <RadioButton