diff --git a/frontend/src/sections/devices/cwmp/devices-wifi.js b/frontend/src/sections/devices/cwmp/devices-wifi.js
index c5f4389..b08202c 100644
--- a/frontend/src/sections/devices/cwmp/devices-wifi.js
+++ b/frontend/src/sections/devices/cwmp/devices-wifi.js
@@ -21,133 +21,31 @@ import {
   Box,
   IconButton,
   Icon,
+  SnackbarContent,
+  Snackbar,
   Checkbox,
-  FormControlLabel
+  FormControlLabel,
+  useTheme,
 } from '@mui/material';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
-import PaperAirplane from '@heroicons/react/24/solid/PaperAirplaneIcon';
-import Check from '@heroicons/react/24/outline/CheckIcon'
+import Check from '@heroicons/react/24/outline/CheckIcon';
+//import ExclamationTriangleIcon from '@heroicons/react/24/solid/ExclamationTriangleIcon';
 import CircularProgress from '@mui/material/CircularProgress';
 import Backdrop from '@mui/material/Backdrop';
 import { useRouter } from 'next/router';
 import GlobeAltIcon from '@heroicons/react/24/outline/GlobeAltIcon';
 
-
 export const DevicesWiFi = () => {
 
+    const theme = useTheme();
     const router = useRouter()
 
-    const [content, setContent] = useState(
-    [
-        {
-            "path": "InternetGatewayDevice.LANDevice.1.WLANConfiguration.1.",
-            "name": {
-                "writable": false,
-                "value": "wl1"
-            },
-            "ssid": {
-                "writable": true,
-                "value": "HUAWEI-TEST-1"
-            },
-            "password": {
-                "writable": false,
-                "value": ""
-            },
-            "security": {
-                "writable": false,
-                "value": "b/g/n"
-            },
-            "enable": {
-                "writable": true,
-                "value": "0"
-            },
-            "status": {
-                "writable": false,
-                "value": "Disabled"
-            }
-        },
-        {
-            "path": "InternetGatewayDevice.LANDevice.1.WLANConfiguration.2.",
-            "name": {
-                "writable": false,
-                "value": "wl0"
-            },
-            "ssid": {
-                "writable": true,
-                "value": "HUAWEI-TEST-1"
-            },
-            "password": {
-                "writable": false,
-                "value": ""
-            },
-            "security": {
-                "writable": false,
-                "value": "a/n/ac/ax"
-            },
-            "enable": {
-                "writable": true,
-                "value": "1"
-            },
-            "status": {
-                "writable": false,
-                "value": "Up"
-            }
-        },
-        {
-            "path": "InternetGatewayDevice.LANDevice.2.WLANConfiguration.1.",
-            "name": {
-                "writable": false,
-                "value": "wl1.1"
-            },
-            "ssid": {
-                "writable": true,
-                "value": "HUAWEI-1BLSP6_Guest"
-            },
-            "password": {
-                "writable": false,
-                "value": ""
-            },
-            "security": {
-                "writable": false,
-                "value": "b/g/n"
-            },
-            "enable": {
-                "writable": true,
-                "value": "0"
-            },
-            "status": {
-                "writable": false,
-                "value": "Disabled"
-            }
-        },
-        {
-            "path": "InternetGatewayDevice.LANDevice.2.WLANConfiguration.2.",
-            "name": {
-                "writable": false,
-                "value": "wl0.1"
-            },
-            "ssid": {
-                "writable": true,
-                "value": "Mobile WiFi"
-            },
-            "password": {
-                "writable": false,
-                "value": ""
-            },
-            "security": {
-                "writable": false,
-                "value": "a/n/ac/ax"
-            },
-            "enable": {
-                "writable": true,
-                "value": "0"
-            },
-            "status": {
-                "writable": false,
-                "value": "Disabled"
-            }
-        }
-    ])
+    const [content, setContent] = useState([])
+    const [applyContent, setApplyContent] = useState([])
+    const [apply, setApply] = useState(false)
+
+    const [errorModal, setErrorModal] = useState(false)
+    const [errorModalText, setErrorModalText] = useState("")
 
     const fetchWifiData = async () => {
 
@@ -162,33 +60,39 @@ export const DevicesWiFi = () => {
         };
 
         fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT}/device/${router.query.id[0]}/wifi`, requestOptions)
-        .then(response => response.text())
+        .then(response => {
+            if (response.status === 401) {
+                router.push("/auth/login")
+            }
+            return response.json()
+        })
         .then(result => {
-          if (result.status === 401){
-            router.push("/auth/login")
-          }
-          if (result.status === 404){
-            //TODO: set device as offline
-            return
-          }
-          stepContentClasses(result)
+            console.log("wifi content", result)
+            result.map((item) => {
+                let contentToApply = {
+                    hasChanges: false,
+                    path: item.path,
+                }
+                setApplyContent(oldValue => [...oldValue, contentToApply])
+            })
+            setContent(result)
         })
         .catch(error => console.log('error', error));
     };
 
     useEffect(()=>{
-        // fetchWifiData()
+        fetchWifiData()
     },[])
 
-    return ( content &&
+    return (<div>
         <Stack 
         direction="row" 
         spacing={2}   
         justifyContent="center" 
         alignItems="center"
         >
-            {
-                content.map((item, index) => {
+            {content.length > 1 ?
+                (content.map((item, index) => {
                     return (
                         <Card key={index}>
                             <CardHeader
@@ -201,31 +105,99 @@ export const DevicesWiFi = () => {
                             />
                             <CardContent>
                                 <Stack spacing={3}>
-                                    <FormControlLabel control={<Checkbox defaultChecked />} label="Enabled" />
-                                    <TextField
+                                    { item.enable.value != null &&
+                                    <FormControlLabel control={<Checkbox defaultChecked={item.enable.value == 1 ? true : false} 
+                                    onChange={(e) => {
+                                        let enable = e.target.value == 1 ? "1" : "0"
+                                        applyContent[index].hasChanges = true
+                                        applyContent[index].enable = {
+                                            value : enable
+                                        }
+                                        setApplyContent([...applyContent])
+                                        item.enable.value = enable
+                                    }}/>}
+                                    label="Enabled" />}
+                                    {item.ssid.value != null && <TextField
                                         fullWidth
                                         label="SSID"
                                         value={item.ssid.value}
-                                        variant="outlined"
-                                    />
+                                        disabled={!item.ssid.writable}
+                                        onChange={(e) => {
+                                            applyContent[index].hasChanges = true
+                                            applyContent[index].ssid = {
+                                                value : e.target.value
+                                            }
+                                            setApplyContent([...applyContent])
+                                            item.ssid.value = e.target.value
+                                        }}
+                                    />}
+                                    {item.securityCapabilities &&
                                     <TextField
                                         fullWidth
                                         label="Encryption"
                                         value={""}
-                                        variant="outlined"
-                                    />
+                                    />}
+                                    {item.password.value != null &&
                                     <TextField
                                         fullWidth
-                                        label="Key"
+                                        label="Password"
+                                        disabled={!item.password.writable}
                                         value={item.password.value}
-                                        variant="outlined"
-                                    />
+                                    />}
+                                    {item.standard.value != null &&
+                                    <TextField
+                                        fullWidth
+                                        label="Standard"
+                                        disabled={!item.standard.writable}
+                                        value={item.standard.value}
+                                    />}
                                 </Stack>
                                 <CardActions sx={{display:"flex", justifyContent:"flex-end"}}>
                                     <Button 
                                         variant="contained" 
+                                        disabled={!applyContent[index].hasChanges}
                                         endIcon={<SvgIcon><Check /></SvgIcon>} 
-                                        //onClick={}
+                                        onClick={
+                                            ()=>{
+                                                setApply(true)
+                                                var myHeaders = new Headers();
+                                                myHeaders.append("Content-Type", "application/json");
+                                                myHeaders.append("Authorization", localStorage.getItem("token"));
+                                                
+                                                delete applyContent[index].hasChanges
+                                                let contentToApply = [applyContent[index]]
+                                                console.log("contentToApply: ", contentToApply)
+                                                var data = JSON.stringify(contentToApply);
+                                                var requestOptions = {
+                                                    method: 'PUT',
+                                                    headers: myHeaders,
+                                                    body: data,
+                                                    redirect: 'follow'
+                                                };
+                                                fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT}/device/${router.query.id[0]}/wifi`, requestOptions)
+                                                .then(response => {
+                                                    if (response.status === 401) {
+                                                        router.push("/auth/login")
+                                                    }
+                                                    if (response.status == 500) {
+                                                        setErrorModal(true)
+                                                    }
+                                                    return response.json()
+                                                })
+                                                .then(result => {
+                                                    if (errorModal) {
+                                                        setErrorModalText(result)
+                                                    }
+                                                    setApply(false)
+                                                    if (result == 1) {
+                                                        setErrorModalText("This change could not be applied, or It's gonna be applied later on")
+                                                        setErrorModal(true)
+                                                        //TODO: fetch wifi data again
+                                                    }
+                                                })
+                                                .catch(error => console.log('error', error));
+                                            }
+                                        }
                                         sx={{mt:'25px', mb:'-15px'}}
                                         >
                                         Apply
@@ -234,7 +206,8 @@ export const DevicesWiFi = () => {
                             </CardContent>
                         </Card>
                     )
-                })
+                })):
+                <CircularProgress />
             }
             {/* <Card>
                 <CardHeader
@@ -252,19 +225,16 @@ export const DevicesWiFi = () => {
                             fullWidth
                             label="SSID"
                             value="wlan0"
-                            variant="outlined"
                         />
                         <TextField
                             fullWidth
                             label="Encryption"
                             value="WPA2-PSK"
-                            variant="outlined"
                         />
                         <TextField
                             fullWidth
                             label="Key"
                             value="password"
-                            variant="outlined"
                         />
                     </Stack>
                 </CardContent>
@@ -285,9 +255,7 @@ export const DevicesWiFi = () => {
                             fullWidth
                             label="SSID"
                             value="wlan0"
-                            variant="outlined"
                         />
-                        <FormControl variant="outlined" sx={{ m: 1, minWidth: 120 }}>
                             <InputLabel id="demo-simple-select-standard-label">Security</InputLabel>
                             <Select
                             labelId="demo-simple-select-standard-label"
@@ -305,7 +273,6 @@ export const DevicesWiFi = () => {
                             fullWidth
                             label="Key"
                             value="password"
-                            variant="outlined"
                         />
                     </Stack>
                     <CardActions sx={{display:"flex", justifyContent:"flex-end"}}>
@@ -320,7 +287,74 @@ export const DevicesWiFi = () => {
                     </CardActions>
                 </CardContent>
             </Card> */}
+            {/* <Snackbar
+                open={errorToApplyContent}
+                TransitionComponent={"Slide"}
+                color="red"
+                onClose={() => setErrorToApplyContent(false)}
+                autoHideDuration={1200} 
+            >
+                <SnackbarContent style={{
+                    backgroundColor:theme.palette.warning.main,
+                    }}
+                    message={
+                        <div style={{display:"flex"}}>
+                            <SvgIcon>
+                                <ExclamationTriangleIcon />
+                            </SvgIcon>
+                            <div style={{margin: "5px"}}></div>
+                            <span id="client-snackbar">
+                                No changes to apply
+                            </span>
+                        </div>
+                    }
+                />
+            </Snackbar> */}
         </Stack>
-      
+        <Backdrop
+            sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+            open={apply}
+        >
+            <CircularProgress color="inherit" />
+        </Backdrop>
+        <Dialog open={errorModal && errorModalText != ""} 
+                    slotProps={{ backdrop: { style: { backgroundColor: 'rgba(255,255,255,0.5)' } } }}
+                    fullWidth={ true } 
+                    maxWidth={"md"}   
+                    scroll={"paper"}
+                    aria-labelledby="scroll-dialog-title"
+                    aria-describedby="scroll-dialog-description" 
+                >
+                <DialogTitle id="scroll-dialog-title">
+                <Box display="flex" alignItems="center">
+                    <Box flexGrow={1} >Response</Box>
+                    <Box>
+                        <IconButton onClick={()=>{
+                                    setErrorModalText("")
+                                    setErrorModal(false)
+                                }}>
+                                <SvgIcon 
+                                >
+                                < XMarkIcon/>
+                            </SvgIcon>
+                        </IconButton>
+                    </Box>
+                </Box>
+                </DialogTitle>    
+                    <DialogContent dividers={scroll === 'paper'}>
+                    <DialogContentText id="scroll-dialog-description"tabIndex={-1}>
+                    <pre style={{color: 'black'}}>
+                        {errorModalText}
+                    </pre>
+                    </DialogContentText>
+                    </DialogContent>
+                    <DialogActions>
+                    <Button onClick={()=>{
+                        setErrorModalText("")
+                        setErrorModal(false)
+                    }}>OK</Button>
+                    </DialogActions>
+                </Dialog>
+        </div>
   );
 };