diff --git a/web-ui/web-react/public/assets/themes/khaki/theme.css b/web-ui/web-react/public/assets/themes/khaki/theme.css
index 08d350a6..5aa7ff7b 100644
--- a/web-ui/web-react/public/assets/themes/khaki/theme.css
+++ b/web-ui/web-react/public/assets/themes/khaki/theme.css
@@ -89,8 +89,8 @@
 }
 
 .p-icon-input-khaki {
-    border-top-right-radius: 0!important;
-    border-bottom-right-radius: 0!important;
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
     border-color: #C08135;
 }
 
@@ -7117,4 +7117,34 @@
 
 .p-button.p-button-danger:enabled:focus {
     box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black;
+}
+
+
+.status {
+    border-radius: var(--border-radius);
+    padding: 0.25em 0.5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: 0.3px;
+}
+
+.status.status-1 {
+    background: #c8e6c9!important;
+    color: #256029!important;
+}
+
+.status.status-0 {
+    background: #ffcdd2;
+    color: #c63737;
+}
+
+.status.status-2 {
+    background: #feedaf;
+    color: #8a5340;
+}
+
+.status.status--1 {
+    background: #565656;
+    color: #f7f9f7;
 }
\ No newline at end of file
diff --git a/web-ui/web-react/src/components/AreasComunes.js b/web-ui/web-react/src/components/AreasComunes.js
index 51a3746c..252a54bb 100644
--- a/web-ui/web-react/src/components/AreasComunes.js
+++ b/web-ui/web-react/src/components/AreasComunes.js
@@ -24,16 +24,11 @@ const AreasComunes = () => {
         _id: null,
         dni: '',
         name: '',
-        last_name: '',
-        email: '',
-        phone: '',
-        password: '',
-        confirmPassword: '',
+        hourMin: '',
+        hourMax: '',
         community_id: '',
-        community_name: '',
-        user_type: '2',
-        date_entry: new Date(),
-        status: '1'
+        bookable: '1',
+        bookable_text: '',
     };
 
     const [commonAreaList, setCommonAreaList] = useState([]);
@@ -53,7 +48,16 @@ const AreasComunes = () => {
             .then((response) => response.json())
             .then(data => data.message)
             .then(data => {
-                setCommonAreaList(data)
+                if(data) {
+                    data.map(item => {
+                        if(item.bookable == '1') {
+                            item.bookable_text = 'Disponible';
+                        } else{
+                            item.bookable_text = 'Cerrado';
+                        }
+                    })
+                }
+                setCommonAreaList(data);
             });
     }
 
@@ -248,19 +252,20 @@ const AreasComunes = () => {
         </>
     )
 
-    const headerCommuntiy = (
-        <>
-            <p>
-                {' '}
-                <FontAwesomeIcon icon={faHomeAlt} style={{ color: "#C08135" }} />{' '}
-                Comunidad</p>
-        </>
-    )
 
+    const statusBodyTemplate = (rowData) => {
+        return (
+          <>
+            <span
+              className={`status status-${rowData.bookable}`}
+            >
+              {rowData.bookable_text}
+            </span>
+          </>
+        );
+      };
 
     return (
-
-
         <div className="grid">
             <div className="col-12">
                 <Toast ref={toast} />
@@ -274,10 +279,9 @@ const AreasComunes = () => {
                         globalFilter={globalFilter} emptyMessage="No hay administradores de comunidades registrados.">
                         <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
                         <Column field="name" sortable header={headerName} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
-                        <Column field="hour_min"  header={headerHourMin} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }} alignFrozen="left"></Column>
-                        <Column field="hour_max"  header={headerHourMax} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>                    </Column>
-                        <Column field="bookable" sortable header={headerBookable} 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="hourMin"  header={headerHourMin} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }} alignFrozen="left"></Column>
+                        <Column field="hourMax"  header={headerHourMax} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>                    </Column>
+                        <Column field="bookable" sortable header={headerBookable} body={statusBodyTemplate} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
                         <Column style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsCommonArea}></Column>
                     </DataTable>
                     <Dialog visible={deleteCommonAreaDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteCommonAreaDialogFooter} onHide={hideDeleteCommonAreaDialog}>