diff --git a/client/src/components/AccountPreferences.js b/client/src/components/AccountPreferences.js
index edf1588..0c62204 100644
--- a/client/src/components/AccountPreferences.js
+++ b/client/src/components/AccountPreferences.js
@@ -24,149 +24,220 @@
 }
 
 export default function AccountPreferences(props) {
-  const account = props.account
-  const isJamiAccount = account.getType() === Account.TYPE_JAMI
-  const alias = isJamiAccount ? "Jami account" : "SIP account"
-  const moderators = account.getDefaultModerators()
-  const [defaultModeratorUri, setDefaultModeratorUri] = useState('')
+  const account = props.account;
+  let devices = [];
+  for (var i in account.devices) devices.push([i, account.devices[i]]);
 
-  const [details, setDetails] = useState(account.getDetails())
+  console.log(devices)
+
+  const isJamiAccount = account.getType() === Account.TYPE_JAMI;
+  const alias = isJamiAccount ? "Jami account" : "SIP account";
+  const moderators = account.getDefaultModerators();
+  const [defaultModeratorUri, setDefaultModeratorUri] = useState("");
+
+  const [details, setDetails] = useState(account.getDetails());
 
   const addModerator = () => {
     if (defaultModeratorUri) {
-      authManager.fetch(`/api/accounts/${account.getId()}/defaultModerators/${defaultModeratorUri}`, {method: "PUT"})
-      setDefaultModeratorUri('')
+      authManager.fetch(
+        `/api/accounts/${account.getId()}/defaultModerators/${defaultModeratorUri}`,
+        { method: "PUT" }
+      );
+      setDefaultModeratorUri("");
     }
-  }
+  };
 
   const removeModerator = (uri) =>
-    authManager.fetch(`/api/accounts/${account.getId()}/defaultModerators/${uri}`, {method: "DELETE"})
+    authManager.fetch(
+      `/api/accounts/${account.getId()}/defaultModerators/${uri}`,
+      { method: "DELETE" }
+    );
 
   const handleToggle = (key, value) => {
-    console.log(`handleToggle ${key} ${value}`)
-    const newDetails = {}
-    newDetails[key] = value ? "true" : "false"
-    console.log(newDetails)
+    console.log(`handleToggle ${key} ${value}`);
+    const newDetails = {};
+    newDetails[key] = value ? "true" : "false";
+    console.log(newDetails);
     authManager.fetch(`/api/accounts/${account.getId()}`, {
       method: "POST",
       headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
+        Accept: "application/json",
+        "Content-Type": "application/json",
       },
-      body: JSON.stringify(newDetails)
-    })
-    setDetails({...account.updateDetails(newDetails)})
-  }
+      body: JSON.stringify(newDetails),
+    });
+    setDetails({ ...account.updateDetails(newDetails) });
+  };
 
   return (
     <motion.div
-        initial="initial"
-        animate="enter"
-        exit="exit"
-        variants={{
-          enter: { transition: { staggerChildren: 0.05 } },
-          exit: { transition: { staggerChildren: 0.02 } }
-        }}
-      >
-      <motion.div variants={thumbnailVariants}><Typography variant="h2" component="h2" gutterBottom>{alias}</Typography></motion.div>
+      initial="initial"
+      animate="enter"
+      exit="exit"
+      variants={{
+        enter: { transition: { staggerChildren: 0.05 } },
+        exit: { transition: { staggerChildren: 0.02 } },
+      }}
+    >
+      <motion.div variants={thumbnailVariants}>
+        <Typography variant="h2" component="h2" gutterBottom>
+          {alias}
+        </Typography>
+      </motion.div>
       <Grid container spacing={3} style={{ marginBottom: 16 }}>
-        {isJamiAccount &&
-          <Grid item xs={12}><motion.div variants={thumbnailVariants}><JamiIdCard account={account} /></motion.div></Grid>}
+        {isJamiAccount && (
+          <Grid item xs={12}>
+            <motion.div variants={thumbnailVariants}>
+              <JamiIdCard account={account} />
+            </motion.div>
+          </Grid>
+        )}
 
         <Grid item xs={12} sm={6}>
-        <motion.div variants={thumbnailVariants}>
-          <ConversationsOverviewCard accountId={account.getId()} />
+          <motion.div variants={thumbnailVariants}>
+            <ConversationsOverviewCard accountId={account.getId()} />
           </motion.div>
         </Grid>
 
         <Grid item xs={12} sm={6}>
-        <motion.div variants={thumbnailVariants}>
-          <Card>
-            <CardContent>
-              <Typography color="textSecondary" gutterBottom>
-                Current calls
-              </Typography>
-              <Typography gutterBottom variant="h5" component="h2">
-                0
-              </Typography>
-            </CardContent>
-          </Card>
+          <motion.div variants={thumbnailVariants}>
+            <Card>
+              <CardContent>
+                <Typography color="textSecondary" gutterBottom>
+                  Current calls
+                </Typography>
+                <Typography gutterBottom variant="h5" component="h2">
+                  0
+                </Typography>
+              </CardContent>
+            </Card>
           </motion.div>
         </Grid>
 
+        <Grid item xs={12} sm={6}>
+          <motion.div variants={thumbnailVariants}>
+            <Card>
+              <CardContent>
+                <Typography color="textSecondary" gutterBottom>
+                  Appareils associés
+                </Typography>
+                <Typography gutterBottom variant="h5" component="h2">
+                  {devices.map((device) => (
+                    <ListItem>
+                      <GroupRounded />
+                      <ListItemText
+                        id="switch-list-label-rendezvous"
+                        primary={device[1]}
+                        secondary={device[0]}
+                      />
+                    </ListItem>
+                  ))}
+                  {/* <ListItemTextsion> */}
+                </Typography>
+              </CardContent>
+            </Card>
+          </motion.div>
+        </Grid>
       </Grid>
 
-      <List subheader={<motion.div variants={thumbnailVariants}><ListSubheader>Settings</ListSubheader></motion.div>}>
-      <motion.div variants={thumbnailVariants}>
-        <ListItem>
-          <ListItemIcon>
-            <GroupRounded />
-          </ListItemIcon>
-          <ListItemText id="switch-list-label-rendezvous" primary="Rendez-Vous point" />
-          <ListItemSecondaryAction>
-            <Switch
-              edge="end"
-              onChange={e => handleToggle('Account.rendezVous', e.target.checked)}
-              checked={details['Account.rendezVous'] === 'true'}
-              inputProps={{ 'aria-labelledby': 'switch-list-label-rendezvous' }}
+      <List
+        subheader={
+          <motion.div variants={thumbnailVariants}>
+            <ListSubheader>Settings</ListSubheader>
+          </motion.div>
+        }
+      >
+        <motion.div variants={thumbnailVariants}>
+          <ListItem>
+            <ListItemIcon>
+              <GroupRounded />
+            </ListItemIcon>
+            <ListItemText
+              id="switch-list-label-rendezvous"
+              primary="Rendez-Vous point"
             />
-          </ListItemSecondaryAction>
-        </ListItem>
+            <ListItemSecondaryAction>
+              <Switch
+                edge="end"
+                onChange={(e) =>
+                  handleToggle("Account.rendezVous", e.target.checked)
+                }
+                checked={details["Account.rendezVous"] === "true"}
+                inputProps={{
+                  "aria-labelledby": "switch-list-label-rendezvous",
+                }}
+              />
+            </ListItemSecondaryAction>
+          </ListItem>
         </motion.div>
         <motion.div variants={thumbnailVariants}>
-        <ListItem>
-          <ListItemIcon>
-            <PhoneCallbackRounded />
-          </ListItemIcon>
-          <ListItemText id="switch-list-label-publicin" primary="Allow connection from unkown peers" />
-          <ListItemSecondaryAction>
-            <Switch
-              edge="end"
-              onChange={e => handleToggle('DHT.PublicInCalls', e.target.checked)}
-              checked={details['DHT.PublicInCalls'] === 'true'}
-              inputProps={{ 'aria-labelledby': 'switch-list-label-publicin' }}
+          <ListItem>
+            <ListItemIcon>
+              <PhoneCallbackRounded />
+            </ListItemIcon>
+            <ListItemText
+              id="switch-list-label-publicin"
+              primary="Allow connection from unkown peers"
             />
-          </ListItemSecondaryAction>
-        </ListItem>
+            <ListItemSecondaryAction>
+              <Switch
+                edge="end"
+                onChange={(e) =>
+                  handleToggle("DHT.PublicInCalls", e.target.checked)
+                }
+                checked={details["DHT.PublicInCalls"] === "true"}
+                inputProps={{ "aria-labelledby": "switch-list-label-publicin" }}
+              />
+            </ListItemSecondaryAction>
+          </ListItem>
         </motion.div>
         <motion.div variants={thumbnailVariants}>
-        <Paper>
-          <Toolbar>
-            <Typography variant="h6">
-              Default moderators
-          </Typography>
-          </Toolbar>
-          <List>
-            <ListItem key="add">
-              <TextField variant="outlined"
-                value={defaultModeratorUri}
-                onChange={e => setDefaultModeratorUri(e.target.value)}
-                label="Add new default moderator"
-                placeholder="Enter new moderator name or URI"
-                fullWidth />
-              <ListItemSecondaryAction>
-                <IconButton onClick={addModerator} size="large"><AddCircle /></IconButton>
-              </ListItemSecondaryAction>
-            </ListItem>
-            {!moderators || moderators.length === 0 ?
-              <ListItem key="placeholder">
-                <ListItemText primary="No default moderator" /></ListItem> :
-              moderators.map((moderator) => (
-                <ListItem key={moderator.uri}>
-                  <ListItemAvatar>
-                    <ConversationAvatar name={moderator.getDisplayName()} />
-                  </ListItemAvatar>
-                  <ListItemText primary={moderator.getDisplayName()} />
-                  <ListItemSecondaryAction>
-                    <IconButton onClick={e => removeModerator(moderator.uri)} size="large"><DeleteRounded /></IconButton>
-                  </ListItemSecondaryAction>
+          <Paper>
+            <Toolbar>
+              <Typography variant="h6">Default moderators</Typography>
+            </Toolbar>
+            <List>
+              <ListItem key="add">
+                <TextField
+                  variant="outlined"
+                  value={defaultModeratorUri}
+                  onChange={(e) => setDefaultModeratorUri(e.target.value)}
+                  label="Add new default moderator"
+                  placeholder="Enter new moderator name or URI"
+                  fullWidth
+                />
+                <ListItemSecondaryAction>
+                  <IconButton onClick={addModerator} size="large">
+                    <AddCircle />
+                  </IconButton>
+                </ListItemSecondaryAction>
+              </ListItem>
+              {!moderators || moderators.length === 0 ? (
+                <ListItem key="placeholder">
+                  <ListItemText primary="No default moderator" />
                 </ListItem>
-              ))}
-          </List>
-        </Paper>
+              ) : (
+                moderators.map((moderator) => (
+                  <ListItem key={moderator.uri}>
+                    <ListItemAvatar>
+                      <ConversationAvatar name={moderator.getDisplayName()} />
+                    </ListItemAvatar>
+                    <ListItemText primary={moderator.getDisplayName()} />
+                    <ListItemSecondaryAction>
+                      <IconButton
+                        onClick={(e) => removeModerator(moderator.uri)}
+                        size="large"
+                      >
+                        <DeleteRounded />
+                      </IconButton>
+                    </ListItemSecondaryAction>
+                  </ListItem>
+                ))
+              )}
+            </List>
+          </Paper>
         </motion.div>
       </List>
-
     </motion.div>
   );
 }
diff --git a/client/src/pages/accountSettings.jsx b/client/src/pages/accountSettings.jsx
index cb7fa4a..cb861a3 100644
--- a/client/src/pages/accountSettings.jsx
+++ b/client/src/pages/accountSettings.jsx
@@ -12,11 +12,13 @@
 
   useEffect(() => {
     const controller = new AbortController()
-    authManager.fetch(`/api/accounts/${accountId}`, {signal: controller.signal})
+    authManager.fetch(`/api/accounts/${accountId}`, { signal: controller.signal })
       .then(res => res.json())
       .then(result => {
-        console.log(result)
-        setState({loaded: true, account: Account.from(result)})
+        let account = Account.from(result)
+        account.setDevices(result.devices)
+        setState({ loaded: true, account: account})
+
       }).catch(e => console.log(e))
      // return () => controller.abort() // crash on React18
   }, [accountId])