diff --git a/client/i18next-parser.config.js b/client/i18next-parser.config.js
index 5622090..2f9d13c 100644
--- a/client/i18next-parser.config.js
+++ b/client/i18next-parser.config.js
@@ -1,7 +1,5 @@
 export default {
   locales: ['fr', 'en'],
   output: 'public/locale/$LOCALE/$NAMESPACE.json',
-  input: [
-    'src/**/*.{js,jsx}',
-  ],
-}
\ No newline at end of file
+  input: ['src/**/*.{js,jsx}'],
+};
diff --git a/client/redux/appSlice.ts b/client/redux/appSlice.ts
index 60b0521..7ddb133 100644
--- a/client/redux/appSlice.ts
+++ b/client/redux/appSlice.ts
@@ -1,6 +1,5 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import Account from "../../model/Account";
-import type { RootState } from "./store";
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import Account from '../../model/Account';
 
 // Define a type for the slice state
 interface appState {
@@ -11,13 +10,13 @@
 
 // Define the initial state using that type
 const initialState: appState = {
-  accountId: "",
+  accountId: '',
   accountObject: null,
   refresh: true,
 };
 
 export const appSlice = createSlice({
-  name: "app",
+  name: 'app',
   // `createSlice` will infer the state type from the `initialState` argument
   initialState,
   reducers: {
diff --git a/client/redux/hooks.ts b/client/redux/hooks.ts
index 6875ea7..beb95c0 100644
--- a/client/redux/hooks.ts
+++ b/client/redux/hooks.ts
@@ -1,5 +1,5 @@
-import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
-import type { RootState, AppDispatch } from "./store";
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch: () => AppDispatch = useDispatch;
diff --git a/client/redux/store.ts b/client/redux/store.ts
index d28f3d0..f6ab51d 100644
--- a/client/redux/store.ts
+++ b/client/redux/store.ts
@@ -1,5 +1,5 @@
-import { configureStore } from "@reduxjs/toolkit";
-import appReducer from "./appSlice";
+import { configureStore } from '@reduxjs/toolkit';
+import appReducer from './appSlice';
 
 export const store = configureStore({
   reducer: {
diff --git a/client/src/App.js b/client/src/App.js
index 2505137..65c9400 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -4,31 +4,30 @@
   License: AGPL-3
 */
 import { ThemeProvider } from '@mui/material/styles';
-import { useState, useEffect } from 'react'
-import { Route, Routes, Navigate } from 'react-router-dom'
-import authManager from './AuthManager'
+import { useState, useEffect } from 'react';
+import { Route, Routes, Navigate } from 'react-router-dom';
+import authManager from './AuthManager';
 
-import SignInPage from "./pages/loginDialog.jsx"
-import JamiMessenger from "./pages/JamiMessenger.jsx"
-import AccountSettings from "./pages/accountSettings.jsx"
-import AccountSelection from "./pages/accountSelection.jsx"
-import ServerSetup from "./pages/serverSetup.jsx"
-import AccountCreationDialog from "./pages/accountCreation.jsx"
-import NotFoundPage from "./pages/404.jsx"
-import JamiAccountDialog from './pages/jamiAccountCreation.jsx'
-import WelcomeAnimation from './components/welcome'
-import defaultTheme from './themes/default'
-import ContactList from './components/ContactList';
+import SignInPage from './pages/loginDialog.jsx';
+import JamiMessenger from './pages/JamiMessenger.jsx';
+import AccountSettings from './pages/accountSettings.jsx';
+import AccountSelection from './pages/accountSelection.jsx';
+import ServerSetup from './pages/serverSetup.jsx';
+import AccountCreationDialog from './pages/accountCreation.jsx';
+import NotFoundPage from './pages/404.jsx';
+import JamiAccountDialog from './pages/jamiAccountCreation.jsx';
+import WelcomeAnimation from './components/welcome';
+import defaultTheme from './themes/default';
 import { ThemeDemonstrator } from './themes/ThemeDemonstrator';
 
 // import { useSelector, useDispatch } from 'react-redux'
 // import { useAppSelector, useAppDispatch } from '../redux/hooks'
 
 const Home = (props) => {
-  console.log(`home ${props}`)
+  console.log(`home ${props}`);
 
-  return <Navigate to="/account" />
-}
+  return <Navigate to="/account" />;
+};
 
 const App = (props) => {
   // const count = useSelector(state => state.counter.value)
@@ -49,15 +48,10 @@
     return () => authManager.deinit();
   }, []);
 
-  console.log("App render");
+  console.log('App render');
 
   if (displayWelcome) {
-    return (
-      <WelcomeAnimation
-        showSetup={!state.auth.setupComplete}
-        onComplete={() => setDisplayWelcome(false)}
-      />
-    );
+    return <WelcomeAnimation showSetup={!state.auth.setupComplete} onComplete={() => setDisplayWelcome(false)} />;
   } else if (!state.auth.setupComplete) {
     return (
       <Routes>
@@ -87,11 +81,9 @@
         <Route path="/" index element={<Home />} />
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
-      {!state.auth.authenticated && (
-        <SignInPage key="signin" open={!state.auth.authenticated} />
-      )}
+      {!state.auth.authenticated && <SignInPage key="signin" open={!state.auth.authenticated} />}
     </ThemeProvider>
   );
 };
 
-export default App
+export default App;
diff --git a/client/src/AuthManager.js b/client/src/AuthManager.js
index 21800cc..60c903b 100644
--- a/client/src/AuthManager.js
+++ b/client/src/AuthManager.js
@@ -18,169 +18,164 @@
  */
 
 class AuthManager {
-    constructor() {
-        console.log("AuthManager()")
-        this.authenticating = false
+  constructor() {
+    console.log('AuthManager()');
+    this.authenticating = false;
 
-        this.state = {
-            initialized: false,
-            authenticated: true,
-            setupComplete: true,
-            error: false
-        }
+    this.state = {
+      initialized: false,
+      authenticated: true,
+      setupComplete: true,
+      error: false,
+    };
 
-        this.tasks = []
-        this.onAuthChanged = undefined
+    this.tasks = [];
+    this.onAuthChanged = undefined;
 
-        if (initData) {
-            console.log("Using static initData")
-            this.setInitData(initData)
-            return
-        }
+    if (initData) {
+      console.log('Using static initData');
+      this.setInitData(initData);
+      return;
     }
+  }
 
-    isAuthenticated() {
-        return this.state.authenticated
+  isAuthenticated() {
+    return this.state.authenticated;
+  }
+
+  getState() {
+    return this.state;
+  }
+
+  setInitData(data) {
+    this.authenticating = false;
+    this.state.initialized = true;
+    if (data.username) {
+      Object.assign(this.state, {
+        authenticated: true,
+        setupComplete: true,
+        error: false,
+        user: { username: data.username, type: data.type },
+      });
+    } else {
+      Object.assign(this.state, {
+        authenticated: false,
+        setupComplete: 'setupComplete' in data ? data.setupComplete : true,
+        error: false,
+      });
     }
-
-    getState() {
-        return this.state
-    }
-
-    setInitData(data) {
-        this.authenticating = false
-        this.state.initialized = true
-        if (data.username) {
-            Object.assign(this.state, {
-                authenticated: true,
-                setupComplete: true,
-                error: false,
-                user: { username: data.username, type: data.type }
-            })
-        } else {
-            Object.assign(this.state, {
-                authenticated: false,
-                setupComplete: 'setupComplete' in data ? data.setupComplete : true,
-                error: false
-            })
-        }
-        console.log("Init ended")
-        /*if (this.onAuthChanged)
+    console.log('Init ended');
+    /*if (this.onAuthChanged)
             this.onAuthChanged(this.state)*/
-    }
+  }
 
-    init(cb) {
-        this.onAuthChanged = cb
-        if (this.state.initialized || this.authenticating)
-            return
-        /*if (initData) {
+  init(cb) {
+    this.onAuthChanged = cb;
+    if (this.state.initialized || this.authenticating) return;
+    /*if (initData) {
             console.log("Using static initData")
             this.setInitData(initData)
             return
         }*/
-        this.authenticating = true
-        fetch('/auth')
-            .then(async (response) => {
-                this.authenticating = false
-                this.state.initialized = true
-                if (response.status === 200) {
-                    this.setInitData(await response.json())
-                } else if (response.status === 401) {
-                    this.setInitData(await response.json())
-                } else {
-                    this.state.error = true
-                    if (this.onAuthChanged)
-                        this.onAuthChanged(this.state)
-                }
-            }).catch(e => {
-                this.authenticating = false
-                console.log(e)
-            })
-    }
-
-    deinit() {
-        console.log("Deinit")
-        this.onAuthChanged = undefined
-    }
-
-    async setup(password) {
-        if (this.authenticating || this.state.setupComplete)
-            return
-        console.log("Starting setup")
-        this.authenticating = true
-        const response = await fetch(`/setup`, {
-            method: 'POST',
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ password })
-        })
-        console.log(response)
-        if (response.ok) {
-            console.log("Success, going home")
-            //navigate('/')
+    this.authenticating = true;
+    fetch('/auth')
+      .then(async (response) => {
+        this.authenticating = false;
+        this.state.initialized = true;
+        if (response.status === 200) {
+          this.setInitData(await response.json());
+        } else if (response.status === 401) {
+          this.setInitData(await response.json());
         } else {
+          this.state.error = true;
+          if (this.onAuthChanged) this.onAuthChanged(this.state);
         }
-        this.authenticating = false
-        this.state.setupComplete = true
-        if (this.onAuthChanged)
-            this.onAuthChanged(this.state)
-        return response.ok
-    }
+      })
+      .catch((e) => {
+        this.authenticating = false;
+        console.log(e);
+      });
+  }
 
-    authenticate(username, password) {
-        if (this.authenticating)
-            return
-        console.log("Starting authentication")
-        this.authenticating = true
-        fetch(`/auth/local?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`, { method:"POST" })
-            .then(response => {
-                console.log(response)
-                this.authenticating = false
-                this.state.authenticated = response.ok && response.status === 200
-                if (this.onAuthChanged)
-                    this.onAuthChanged(this.state)
-                while (this.tasks.length !== 0) {
-                    const task = this.tasks.shift()
-                    if (this.state.authenticated)
-                        fetch(task.url, task.init)
-                        .then(res => task.resolve(res))
-                        .catch(e => console.log("Error executing pending task: " + e))
-                    else
-                        task.reject(new Error("Authentication failed"))
-                }
-            }).catch(e => {
-                this.authenticating = false
-                console.log(e)
-            })
-    }
+  deinit() {
+    console.log('Deinit');
+    this.onAuthChanged = undefined;
+  }
 
-    disconnect() {
-        console.log("Disconnect")
-        this.state.authenticated = false
-        if (this.onAuthChanged)
-            this.onAuthChanged(this.state)
+  async setup(password) {
+    if (this.authenticating || this.state.setupComplete) return;
+    console.log('Starting setup');
+    this.authenticating = true;
+    const response = await fetch(`/setup`, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ password }),
+    });
+    console.log(response);
+    if (response.ok) {
+      console.log('Success, going home');
+      //navigate('/')
+    } else {
     }
+    this.authenticating = false;
+    this.state.setupComplete = true;
+    if (this.onAuthChanged) this.onAuthChanged(this.state);
+    return response.ok;
+  }
 
-    fetch(url, init) {
-        console.log(`fetch ${url}`)
-        if (!this.state.authenticated) {
-            if (!init || !init.method || init.method === 'GET') {
-                return new Promise((resolve, reject) => this.tasks.push({url, init, resolve, reject}))
-            } else {
-                return new Promise((resolve, reject) => reject("Not authenticated"))
-            }
+  authenticate(username, password) {
+    if (this.authenticating) return;
+    console.log('Starting authentication');
+    this.authenticating = true;
+    fetch(`/auth/local?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`, {
+      method: 'POST',
+    })
+      .then((response) => {
+        console.log(response);
+        this.authenticating = false;
+        this.state.authenticated = response.ok && response.status === 200;
+        if (this.onAuthChanged) this.onAuthChanged(this.state);
+        while (this.tasks.length !== 0) {
+          const task = this.tasks.shift();
+          if (this.state.authenticated)
+            fetch(task.url, task.init)
+              .then((res) => task.resolve(res))
+              .catch((e) => console.log('Error executing pending task: ' + e));
+          else task.reject(new Error('Authentication failed'));
         }
-        return fetch(url, init)
-            .then(response => {
-                if (response.status === 401) {
-                    this.disconnect()
-                    return this.fetch(url, init)
-                }
-                return response
-            })
+      })
+      .catch((e) => {
+        this.authenticating = false;
+        console.log(e);
+      });
+  }
+
+  disconnect() {
+    console.log('Disconnect');
+    this.state.authenticated = false;
+    if (this.onAuthChanged) this.onAuthChanged(this.state);
+  }
+
+  fetch(url, init) {
+    console.log(`fetch ${url}`);
+    if (!this.state.authenticated) {
+      if (!init || !init.method || init.method === 'GET') {
+        return new Promise((resolve, reject) => this.tasks.push({ url, init, resolve, reject }));
+      } else {
+        return new Promise((resolve, reject) => reject('Not authenticated'));
+      }
     }
+    return fetch(url, init).then((response) => {
+      if (response.status === 401) {
+        this.disconnect();
+        return this.fetch(url, init);
+      }
+      return response;
+    });
+  }
 }
 
-export default new AuthManager()
\ No newline at end of file
+export default new AuthManager();
diff --git a/client/src/components/AccountPreferences.js b/client/src/components/AccountPreferences.js
index 68509f2..c267af4 100644
--- a/client/src/components/AccountPreferences.js
+++ b/client/src/components/AccountPreferences.js
@@ -1,17 +1,34 @@
-import { useState } from 'react'
+import { useState } from 'react';
 
-import { List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader, Switch, Typography, Grid, Paper, CardContent, Card, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Toolbar, IconButton, ListItemAvatar, Input, TextField } from '@mui/material'
-import { PhoneCallbackRounded, GroupRounded, DeleteRounded, AddCircle } from '@mui/icons-material'
+import {
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText,
+  ListSubheader,
+  Switch,
+  Typography,
+  Grid,
+  Paper,
+  CardContent,
+  Card,
+  Toolbar,
+  IconButton,
+  ListItemAvatar,
+  TextField,
+} from '@mui/material';
+import { PhoneCallbackRounded, GroupRounded, DeleteRounded, AddCircle } from '@mui/icons-material';
 
-import Account from '../../../model/Account'
-import JamiIdCard from './JamiIdCard'
-import ConversationAvatar from './ConversationAvatar'
-import ConversationsOverviewCard from './ConversationsOverviewCard'
+import Account from '../../../model/Account';
+import JamiIdCard from './JamiIdCard';
+import ConversationAvatar from './ConversationAvatar';
+import ConversationsOverviewCard from './ConversationsOverviewCard';
 
-import authManager from '../AuthManager'
-import { motion } from 'framer-motion'
+import authManager from '../AuthManager';
+import { motion } from 'framer-motion';
 
-const transition = { duration: 0.3, ease: [0.43, 0.13, 0.23, 0.96] }
+const transition = { duration: 0.3, ease: [0.43, 0.13, 0.23, 0.96] };
 
 const thumbnailVariants = {
   initial: { scale: 0.9, opacity: 0 },
@@ -19,50 +36,44 @@
   exit: {
     scale: 0.5,
     opacity: 0,
-    transition: { duration: 1.5, ...transition }
-  }
-}
+    transition: { duration: 1.5, ...transition },
+  },
+};
 
 export default function AccountPreferences(props) {
   const account = props.account;
   let devices = [];
   for (var i in account.devices) devices.push([i, account.devices[i]]);
 
-  console.log(devices)
+  console.log(devices);
 
   const isJamiAccount = account.getType() === Account.TYPE_JAMI;
-  const alias = isJamiAccount ? "Jami account" : "SIP account";
+  const alias = isJamiAccount ? 'Jami account' : 'SIP account';
   const moderators = account.getDefaultModerators();
-  const [defaultModeratorUri, setDefaultModeratorUri] = useState("");
+  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";
+    newDetails[key] = value ? 'true' : 'false';
     console.log(newDetails);
     authManager.fetch(`/api/accounts/${account.getId()}`, {
-      method: "POST",
+      method: 'POST',
       headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify(newDetails),
     });
@@ -125,11 +136,7 @@
                   {devices.map((device) => (
                     <ListItem>
                       <GroupRounded />
-                      <ListItemText
-                        id="switch-list-label-rendezvous"
-                        primary={device[1]}
-                        secondary={device[0]}
-                      />
+                      <ListItemText id="switch-list-label-rendezvous" primary={device[1]} secondary={device[0]} />
                     </ListItem>
                   ))}
                   {/* <ListItemTextsion> */}
@@ -152,19 +159,14 @@
             <ListItemIcon>
               <GroupRounded />
             </ListItemIcon>
-            <ListItemText
-              id="switch-list-label-rendezvous"
-              primary="Rendez-Vous point"
-            />
+            <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"}
+                onChange={(e) => handleToggle('Account.rendezVous', e.target.checked)}
+                checked={details['Account.rendezVous'] === 'true'}
                 inputProps={{
-                  "aria-labelledby": "switch-list-label-rendezvous",
+                  'aria-labelledby': 'switch-list-label-rendezvous',
                 }}
               />
             </ListItemSecondaryAction>
@@ -175,18 +177,13 @@
             <ListItemIcon>
               <PhoneCallbackRounded />
             </ListItemIcon>
-            <ListItemText
-              id="switch-list-label-publicin"
-              primary="Allow connection from unkown peers"
-            />
+            <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" }}
+                onChange={(e) => handleToggle('DHT.PublicInCalls', e.target.checked)}
+                checked={details['DHT.PublicInCalls'] === 'true'}
+                inputProps={{ 'aria-labelledby': 'switch-list-label-publicin' }}
               />
             </ListItemSecondaryAction>
           </ListItem>
@@ -224,10 +221,7 @@
                     </ListItemAvatar>
                     <ListItemText primary={moderator.getDisplayName()} />
                     <ListItemSecondaryAction>
-                      <IconButton
-                        onClick={(e) => removeModerator(moderator.uri)}
-                        size="large"
-                      >
+                      <IconButton onClick={(e) => removeModerator(moderator.uri)} size="large">
                         <DeleteRounded />
                       </IconButton>
                     </ListItemSecondaryAction>
diff --git a/client/src/components/ContactList.js b/client/src/components/ContactList.js
index f3f4efa..7da8375 100644
--- a/client/src/components/ContactList.js
+++ b/client/src/components/ContactList.js
@@ -1,20 +1,20 @@
-import List from "@mui/material/List";
-import authManager from "../AuthManager";
-import ConversationAvatar from "./ConversationAvatar";
+import List from '@mui/material/List';
+import authManager from '../AuthManager';
+import ConversationAvatar from './ConversationAvatar';
 import Modal from 'react-modal';
-import { useState, useEffect } from "react";
-import { Person } from "@mui/icons-material";
-import { useAppDispatch, useAppSelector } from "../../redux/hooks";
-import { ListItem, ListItemAvatar, ListItemText } from "@mui/material";
+import { useState, useEffect } from 'react';
+import { Person } from '@mui/icons-material';
+import { useAppDispatch, useAppSelector } from '../../redux/hooks';
+import { ListItem, ListItemAvatar, ListItemText } from '@mui/material';
 
 const customStyles = {
   content: {
-    top: "50%",
-    left: "50%",
-    right: "auto",
-    bottom: "auto",
-    marginRight: "-50%",
-    transform: "translate(-50%, -50%)",
+    top: '50%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    transform: 'translate(-50%, -50%)',
   },
 };
 
@@ -47,23 +47,20 @@
       })
       .then((res) => res.json())
       .then((result) => {
-        console.log("CONTACT LIST - DETAILS: ", result);
+        console.log('CONTACT LIST - DETAILS: ', result);
       })
-      .catch((e) => console.log("ERROR GET CONTACT DETAILS: ", e));
+      .catch((e) => console.log('ERROR GET CONTACT DETAILS: ', e));
   };
 
   const removeOrBlock = (typeOfRemove) => {
-    console.log("REMOVE");
+    console.log('REMOVE');
     setBlockOrRemove(false);
     const controller = new AbortController();
     authManager
-      .fetch(
-        `/api/accounts/${accountId}/contacts/${typeOfRemove}/${currentContact.id}`,
-        {
-          signal: controller.signal,
-          method: "DELETE",
-        }
-      )
+      .fetch(`/api/accounts/${accountId}/contacts/${typeOfRemove}/${currentContact.id}`, {
+        signal: controller.signal,
+        method: 'DELETE',
+      })
       .then((res) => res.json())
       .then((result) => {})
       .catch((e) => console.log(`ERROR ${typeOfRemove}ing CONTACT : `, e));
@@ -78,7 +75,7 @@
       })
       .then((res) => res.json())
       .then((result) => {
-        console.log("CONTACTS: ", result)
+        console.log('CONTACTS: ', result);
         setContacts(result);
       });
     return () => controller.abort();
@@ -108,7 +105,7 @@
 
         <div
           onClick={() => {
-            console.log("open dialog Supprimer: ");
+            console.log('open dialog Supprimer: ');
             setBlockOrRemove(false);
             closeModal();
             openModalDelete();
@@ -120,7 +117,7 @@
 
         <div
           onClick={() => {
-            console.log("open dialog BLOCK: ");
+            console.log('open dialog BLOCK: ');
             setBlockOrRemove(true);
             closeModal();
             openModalDelete();
@@ -132,7 +129,7 @@
 
         <div
           onClick={() => {
-            console.log("open details contact for: ");
+            console.log('open details contact for: ');
             closeModal();
             openModalDetails();
             getContactDetails();
@@ -148,13 +145,12 @@
         style={customStyles}
         contentLabel="Merci de confirmer"
       >
-        Voulez vous vraiment {blockOrRemove ? "bloquer" : "supprimer"} ce
-        contact?
+        Voulez vous vraiment {blockOrRemove ? 'bloquer' : 'supprimer'} ce contact?
         <br />
         {blockOrRemove ? (
-          <button onClick={() => removeOrBlock("block")}>Bloquer</button>
+          <button onClick={() => removeOrBlock('block')}>Bloquer</button>
         ) : (
-          <button onClick={() => removeOrBlock("remove")}>Supprimer</button>
+          <button onClick={() => removeOrBlock('remove')}>Supprimer</button>
         )}
         <button onClick={closeModalDelete}>Annuler</button>
       </Modal>
diff --git a/client/src/components/ConversationAvatar.js b/client/src/components/ConversationAvatar.js
index ea9fcb0..dbf78e1 100644
--- a/client/src/components/ConversationAvatar.js
+++ b/client/src/components/ConversationAvatar.js
@@ -1,9 +1,5 @@
-import { Avatar } from '@mui/material'
+import { Avatar } from '@mui/material';
 
-export default function ConversationAvatar({displayName,...props}) {
-  return <Avatar
-    {...props}
-    alt={displayName}
-    src="/broken"
-  />
+export default function ConversationAvatar({ displayName, ...props }) {
+  return <Avatar {...props} alt={displayName} src="/broken" />;
 }
diff --git a/client/src/components/ConversationList.js b/client/src/components/ConversationList.js
index d81ebb2..38628ad 100644
--- a/client/src/components/ConversationList.js
+++ b/client/src/components/ConversationList.js
@@ -1,6 +1,6 @@
-import List from '@mui/material/List'
-import { useEffect } from "react";
-import ConversationListItem from './ConversationListItem'
+import List from '@mui/material/List';
+import { useEffect } from 'react';
+import ConversationListItem from './ConversationListItem';
 import ListSubheader from '@mui/material/ListSubheader';
 import Conversation from '../../../model/Conversation';
 import { GroupRounded as GroupIcon } from '@mui/icons-material';
@@ -8,31 +8,34 @@
 import { useAppSelector } from '../../redux/hooks';
 
 export default function ConversationList(props) {
-    const { refresh } = useAppSelector((state) => state.app)
+  const { refresh } = useAppSelector((state) => state.app);
 
-    useEffect(() => {
-      console.log("refresh list");
-    }, [refresh])
+  useEffect(() => {
+    console.log('refresh list');
+  }, [refresh]);
 
-    return (
-        <div className="rooms-list">
-            <List>
-                {props.search instanceof Conversation &&
-                (<div>
-                    <ListSubheader>Public directory</ListSubheader>
-                    <ConversationListItem conversation={props.search} />
-                    <ListSubheader>Conversations</ListSubheader>
-                </div>)}
-                {props.conversations.map(conversation =>
-                    <ConversationListItem key={conversation.getId()} conversation={conversation} />
-                )}
-                {props.conversations.length === 0 && (
-                    <div className="list-placeholder">
-                        <GroupIcon color="disabled" fontSize="large"  />
-                        <Typography className="subtitle" variant="subtitle2">No conversation yet</Typography>
-                    </div>
-                )}
-            </List>
-        </div>
-    )
+  return (
+    <div className="rooms-list">
+      <List>
+        {props.search instanceof Conversation && (
+          <div>
+            <ListSubheader>Public directory</ListSubheader>
+            <ConversationListItem conversation={props.search} />
+            <ListSubheader>Conversations</ListSubheader>
+          </div>
+        )}
+        {props.conversations.map((conversation) => (
+          <ConversationListItem key={conversation.getId()} conversation={conversation} />
+        ))}
+        {props.conversations.length === 0 && (
+          <div className="list-placeholder">
+            <GroupIcon color="disabled" fontSize="large" />
+            <Typography className="subtitle" variant="subtitle2">
+              No conversation yet
+            </Typography>
+          </div>
+        )}
+      </List>
+    </div>
+  );
 }
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index e0b8e49..aab6dc1 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -1,17 +1,16 @@
 import Modal from 'react-modal';
-import authManager from '../AuthManager'
-import ConversationAvatar from './ConversationAvatar'
-import Conversation from '../../../model/Conversation'
-import { useState } from "react";
-import { useNavigate, useParams } from "react-router-dom"
-import { ListItem, Stack, ListItemAvatar, ListItemText, Box, Typography } from '@mui/material'
+import authManager from '../AuthManager';
+import ConversationAvatar from './ConversationAvatar';
+import Conversation from '../../../model/Conversation';
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { ListItem, Stack, ListItemAvatar, ListItemText, Box, Typography } from '@mui/material';
 import { RemoveContactIcon, VideoCallIcon } from './svgIcons';
 import { AudioCallIcon, BlockContactIcon, ContactDetailsIcon, CrossIcon, MessageIcon } from './svgIcons';
-import { QRCodeCanvas} from 'qrcode.react';
+import { QRCodeCanvas } from 'qrcode.react';
 import { setRefreshFromSlice } from '../../redux/appSlice';
 import { useAppDispatch } from '../../redux/hooks';
 
-
 const customStyles = {
   content: {
     // right: "auto",
@@ -21,68 +20,68 @@
     // padding: "16px"
 
     // top: "1364px",
-    left: "94px",
-    width: "180px",
-    height: "262px",
-    background: "#FFFFFF 0% 0% no-repeat padding-box",
-    boxShadow: "3px 3px 7px #00000029",
-    borderRadius: "5px 20px 20px 20px",
-    opacity: "1",
+    left: '94px',
+    width: '180px',
+    height: '262px',
+    background: '#FFFFFF 0% 0% no-repeat padding-box',
+    boxShadow: '3px 3px 7px #00000029',
+    borderRadius: '5px 20px 20px 20px',
+    opacity: '1',
 
-    textAlign: "left",
-    font: "normal normal normal 12px/26px Ubuntu",
-    letterSpacing: "0px",
-    color: "#000000",
+    textAlign: 'left',
+    font: 'normal normal normal 12px/26px Ubuntu',
+    letterSpacing: '0px',
+    color: '#000000',
   },
 };
 
 const cancelStyles = {
   content: {
-    left: "94px",
-    width: "300px",
-    height: "220px",
-    background: "#FFFFFF 0% 0% no-repeat padding-box",
-    boxShadow: "3px 3px 7px #00000029",
-    borderRadius: "20px",
-    opacity: "1",
+    left: '94px',
+    width: '300px',
+    height: '220px',
+    background: '#FFFFFF 0% 0% no-repeat padding-box',
+    boxShadow: '3px 3px 7px #00000029',
+    borderRadius: '20px',
+    opacity: '1',
 
-    textAlign: "left",
-    font: "normal normal normal 12px/26px Ubuntu",
-    letterSpacing: "0px",
-    color: "#000000",
+    textAlign: 'left',
+    font: 'normal normal normal 12px/26px Ubuntu',
+    letterSpacing: '0px',
+    color: '#000000',
   },
 };
 
 const contactDetailsStyles = {
   content: {
-    left: "94px",
-    width: "450px",
-    height: "450px",
-    background: "#FFFFFF 0% 0% no-repeat padding-box",
-    boxShadow: "3px 3px 7px #00000029",
-    borderRadius: "20px",
-    opacity: "1",
+    left: '94px',
+    width: '450px',
+    height: '450px',
+    background: '#FFFFFF 0% 0% no-repeat padding-box',
+    boxShadow: '3px 3px 7px #00000029',
+    borderRadius: '20px',
+    opacity: '1',
 
-    textAlign: "left",
-    font: "normal normal normal 12px/26px Ubuntu",
-    letterSpacing: "0px",
-    color: "#000000",
+    textAlign: 'left',
+    font: 'normal normal normal 12px/26px Ubuntu',
+    letterSpacing: '0px',
+    color: '#000000',
   },
 };
 
 const stackStyles = {
-  flexDirection: "row",
-  marginBottom: "4px",
-  spacing: "40px",
+  flexDirection: 'row',
+  marginBottom: '4px',
+  spacing: '40px',
   flex: 1,
-  alignItems: "center",
+  alignItems: 'center',
 };
 
 const iconTextStyle = {
-  marginRight: "10px",
+  marginRight: '10px',
 };
 
-const iconColor = "#005699";
+const iconColor = '#005699';
 
 export default function ConversationListItem(props) {
   const { conversationId, contactId } = useParams();
@@ -98,10 +97,8 @@
   const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false);
   const [modalDeleteIsOpen, setModalDeleteIsOpen] = useState(false);
   const [blockOrRemove, setBlockOrRemove] = useState(true);
-  const [userId, setUserId] = useState(
-    conversation?.getFirstMember()?.contact.getUri()
-  );
-  const [isSwarm, setIsSwarm] = useState("true");
+  const [userId, setUserId] = useState(conversation?.getFirstMember()?.contact.getUri());
+  const [isSwarm, setIsSwarm] = useState('true');
 
   const openModal = (e) => {
     e.preventDefault();
@@ -117,43 +114,37 @@
   let subtitle;
   function afterOpenModal() {
     // references are now sync'd and can be accessed.
-    subtitle.style.color = "#f00";
+    subtitle.style.color = '#f00';
   }
 
   const getContactDetails = () => {
     const controller = new AbortController();
     authManager
-      .fetch(
-        `/api/accounts/${conversation.getAccountId()}/contacts/details/${userId}`,
-        {
-          signal: controller.signal,
-        }
-      )
+      .fetch(`/api/accounts/${conversation.getAccountId()}/contacts/details/${userId}`, {
+        signal: controller.signal,
+      })
       .then((res) => res.json())
       .then((result) => {
-        console.log("CONTACT LIST - DETAILS: ", result);
+        console.log('CONTACT LIST - DETAILS: ', result);
       })
-      .catch((e) => console.log("ERROR GET CONTACT DETAILS: ", e));
+      .catch((e) => console.log('ERROR GET CONTACT DETAILS: ', e));
   };
 
   const removeOrBlock = (typeOfRemove) => {
     console.log(typeOfRemove);
     setBlockOrRemove(false);
 
-    console.log("EEEH", typeOfRemove, conversation.getAccountId(), userId);
+    console.log('EEEH', typeOfRemove, conversation.getAccountId(), userId);
 
     const controller = new AbortController();
     authManager
-      .fetch(
-        `/api/accounts/${conversation.getAccountId()}/contacts/${typeOfRemove}/${userId}`,
-        {
-          signal: controller.signal,
-          method: "DELETE",
-        }
-      )
+      .fetch(`/api/accounts/${conversation.getAccountId()}/contacts/${typeOfRemove}/${userId}`, {
+        signal: controller.signal,
+        method: 'DELETE',
+      })
       .then((res) => res.json())
       .then((result) => {
-        console.log("propre");
+        console.log('propre');
         dispatch(setRefreshFromSlice());
       })
       .catch((e) => {
@@ -163,10 +154,7 @@
     closeModalDelete();
   };
 
-
-  const uri = conversation.getId()
-    ? `conversation/${conversation.getId()}`
-    : `addContact/${userId}`;
+  const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${userId}`;
   if (conversation instanceof Conversation) {
     return (
       <div onContextMenu={openModal}>
@@ -219,7 +207,7 @@
 
             <Stack
               onClick={() => {
-                console.log("open details contact for: ");
+                console.log('open details contact for: ');
                 closeModal();
                 openModalDetails();
                 getContactDetails();
@@ -269,35 +257,33 @@
             style={contactDetailsStyles}
             contentLabel="Détails contact"
           >
-            <Stack direction={"row"} alignContent="flex-end">
-              <Stack direction={"column"}>
-                <div style={{ height: "100px" }}>
-                  <ConversationAvatar
-                    displayName={conversation.getDisplayNameNoFallback()}
-                  />
+            <Stack direction={'row'} alignContent="flex-end">
+              <Stack direction={'column'}>
+                <div style={{ height: '100px' }}>
+                  <ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} />
                 </div>
 
                 <div
                   style={{
-                    fontSize: "20px",
-                    marginBottom: "20px",
-                    height: "20px",
+                    fontSize: '20px',
+                    marginBottom: '20px',
+                    height: '20px',
                   }}
                 >
                   Informations
                 </div>
 
                 <Typography variant="caption">Nom d'utilisateur</Typography>
-                <div style={{ height: "20px" }} />
+                <div style={{ height: '20px' }} />
                 <Typography variant="caption">Identifiant </Typography>
-                <div style={{ height: "20px" }} />
+                <div style={{ height: '20px' }} />
 
                 <div
                   style={{
                     flex: 1,
-                    height: "150px",
-                    direction: "column",
-                    flexDirection: "column",
+                    height: '150px',
+                    direction: 'column',
+                    flexDirection: 'column',
                     // alignSelf: "flex-end",
                   }}
                 >
@@ -307,54 +293,52 @@
                 <Typography variant="caption">est un swarm </Typography>
               </Stack>
 
-              <Stack direction={"column"}>
+              <Stack direction={'column'}>
                 <div
                   style={{
-                    fontWeight: "bold",
-                    fontSize: "20px",
-                    height: "100px",
+                    fontWeight: 'bold',
+                    fontSize: '20px',
+                    height: '100px',
                   }}
                 >
-                  {conversation.getDisplayNameNoFallback() + "(resolved name)"}
+                  {conversation.getDisplayNameNoFallback() + '(resolved name)'}
                 </div>
 
                 <div
                   style={{
-                    height: "40px",
+                    height: '40px',
                   }}
                 />
                 <Typography variant="caption">
-                  <div style={{ fontWeight: "bold" }}>
-                    {conversation.getDisplayNameNoFallback()}
-                  </div>
+                  <div style={{ fontWeight: 'bold' }}>{conversation.getDisplayNameNoFallback()}</div>
                 </Typography>
 
-                <div style={{ height: "20px" }} />
+                <div style={{ height: '20px' }} />
 
                 <Typography variant="caption">
-                  <div style={{ fontWeight: "bold" }}> {userId}</div>
+                  <div style={{ fontWeight: 'bold' }}> {userId}</div>
                 </Typography>
 
-                <div style={{ height: "20px" }} />
+                <div style={{ height: '20px' }} />
 
-                <div height={"40px"}>
+                <div height={'40px'}>
                   <QRCodeCanvas value={`${userId}`} />
                 </div>
 
                 <Typography variant="caption">
-                  <div style={{ fontWeight: "bold" }}> {isSwarm}</div>
+                  <div style={{ fontWeight: 'bold' }}> {isSwarm}</div>
                 </Typography>
               </Stack>
             </Stack>
             <div
               onClick={closeModalDetails}
               style={{
-                width: "100px",
-                borderStyle: "solid",
-                textAlign: "center",
-                borderRadius: "5px",
-                marginLeft: "150px",
-                marginTop: "10px",
+                width: '100px',
+                borderStyle: 'solid',
+                textAlign: 'center',
+                borderRadius: '5px',
+                marginLeft: '150px',
+                marginTop: '10px',
               }}
             >
               <Typography variant="caption">Fermer</Typography>
@@ -370,49 +354,39 @@
             contentLabel="Merci de confirmer"
           >
             <Typography variant="h4">Merci de confirmer</Typography>
-            <Stack
-              direction={"column"}
-              justifyContent="space-around"
-              spacing={"75px"}
-            >
-              <div style={{ textAlign: "center", marginTop: "10%" }}>
+            <Stack direction={'column'} justifyContent="space-around" spacing={'75px'}>
+              <div style={{ textAlign: 'center', marginTop: '10%' }}>
                 <Typography variant="body2">
-                  Voulez vous vraiment {blockOrRemove ? "bloquer" : "supprimer"}{" "}
-                  ce contact?
+                  Voulez vous vraiment {blockOrRemove ? 'bloquer' : 'supprimer'} ce contact?
                 </Typography>
               </div>
 
-              <Stack
-                direction={"row"}
-                top={"25px"}
-                alignSelf="center"
-                spacing={1}
-              >
+              <Stack direction={'row'} top={'25px'} alignSelf="center" spacing={1}>
                 <Box
                   onClick={() => {
-                    if (blockOrRemove) removeOrBlock("block");
-                    else removeOrBlock("remove");
+                    if (blockOrRemove) removeOrBlock('block');
+                    else removeOrBlock('remove');
                   }}
                   style={{
-                    width: "100px",
-                    textAlign: "center",
-                    borderStyle: "solid",
-                    borderColor: "red",
-                    borderRadius: "10px",
-                    color: "red",
+                    width: '100px',
+                    textAlign: 'center',
+                    borderStyle: 'solid',
+                    borderColor: 'red',
+                    borderRadius: '10px',
+                    color: 'red',
                   }}
                 >
-                  {blockOrRemove ? "Bloquer" : "Supprimer"}
+                  {blockOrRemove ? 'Bloquer' : 'Supprimer'}
                 </Box>
                 <Box
                   onClick={closeModalDelete}
                   style={{
-                    width: "100px",
-                    textAlign: "center",
-                    paddingLeft: "12px",
-                    paddingRight: "12px",
-                    borderStyle: "solid",
-                    borderRadius: "10px",
+                    width: '100px',
+                    textAlign: 'center',
+                    paddingLeft: '12px',
+                    paddingRight: '12px',
+                    borderStyle: 'solid',
+                    borderRadius: '10px',
                   }}
                 >
                   Annuler
@@ -426,19 +400,12 @@
           button
           alignItems="flex-start"
           selected={isSelected}
-          onClick={() =>
-            navigate(`/account/${conversation.getAccountId()}/${uri}`)
-          }
+          onClick={() => navigate(`/account/${conversation.getAccountId()}/${uri}`)}
         >
           <ListItemAvatar>
-            <ConversationAvatar
-              displayName={conversation.getDisplayNameNoFallback()}
-            />
+            <ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} />
           </ListItemAvatar>
-          <ListItemText
-            primary={conversation.getDisplayName()}
-            secondary={conversation.getDisplayUri()}
-          />
+          <ListItemText primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
         </ListItem>
       </div>
     );
diff --git a/client/src/components/ConversationView.js b/client/src/components/ConversationView.js
index 9d12665..c286f8a 100644
--- a/client/src/components/ConversationView.js
+++ b/client/src/components/ConversationView.js
@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useState } from 'react'
+import { useCallback, useContext, useEffect, useState } from 'react';
 import MessageList from './MessageList';
 import SendMessageForm from './SendMessageForm';
 import Conversation from '../../../model/Conversation';
@@ -8,107 +8,99 @@
 import { useConversationQuery, useMessagesQuery, useSendMessageMutation } from '../services/conversation';
 import { SocketContext } from '../contexts/socket';
 
-const ConversationView = props => {
-  const socket = useContext(SocketContext)
-  const [conversation, setConversation] = useState()
-  const [messages, setMessages] = useState([])
-  const [isLoading, setIsLoading] = useState(true)
-  const [error, setError] = useState(false)
+const ConversationView = (props) => {
+  const socket = useContext(SocketContext);
+  const [conversation, setConversation] = useState();
+  const [messages, setMessages] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(false);
 
-  const conversationQuery = useConversationQuery(props.accountId, props.conversationId)
-  const messagesQuery = useMessagesQuery(props.accountId, props.conversationId)
-  const sendMessageMutation = useSendMessageMutation(props.accountId, props.conversationId)
+  const conversationQuery = useConversationQuery(props.accountId, props.conversationId);
+  const messagesQuery = useMessagesQuery(props.accountId, props.conversationId);
+  const sendMessageMutation = useSendMessageMutation(props.accountId, props.conversationId);
 
   useEffect(() => {
     if (conversationQuery.isSuccess) {
-      const conversation = Conversation.from(props.accountId, conversationQuery.data)
-      setConversation(conversation)
+      const conversation = Conversation.from(props.accountId, conversationQuery.data);
+      setConversation(conversation);
     }
-  }, [conversationQuery.data])
+  }, [conversationQuery.data]);
 
   useEffect(() => {
     if (messagesQuery.isSuccess) {
-      const sortedMessages = sortMessages(messagesQuery.data)
-      setMessages(sortedMessages)
+      const sortedMessages = sortMessages(messagesQuery.data);
+      setMessages(sortedMessages);
     }
-  }, [messagesQuery.data])
+  }, [messagesQuery.data]);
 
   useEffect(() => {
-    setIsLoading(conversationQuery.isLoading || messagesQuery.isLoading)
-  }, [conversationQuery.isLoading, messagesQuery.isLoading])
-  
-  useEffect(() => {
-    setError(conversationQuery.isError || messagesQuery.isError)
-  }, [conversationQuery.isError, messagesQuery.isError])
-
-  const sendMessage = useCallback(
-    (message) => sendMessageMutation.mutate(message),
-    [sendMessageMutation]
-  )
+    setIsLoading(conversationQuery.isLoading || messagesQuery.isLoading);
+  }, [conversationQuery.isLoading, messagesQuery.isLoading]);
 
   useEffect(() => {
-    if (!conversation)
-      return
-    console.log(`io set conversation ${props.conversationId} `+ socket)
-    if (socket)
-      socket.emit('conversation', { accountId: props.accountId, conversationId: props.conversationId })
-    socket.off('newMessage')
+    setError(conversationQuery.isError || messagesQuery.isError);
+  }, [conversationQuery.isError, messagesQuery.isError]);
+
+  const sendMessage = useCallback((message) => sendMessageMutation.mutate(message), [sendMessageMutation]);
+
+  useEffect(() => {
+    if (!conversation) return;
+    console.log(`io set conversation ${props.conversationId} ` + socket);
+    if (socket) socket.emit('conversation', { accountId: props.accountId, conversationId: props.conversationId });
+    socket.off('newMessage');
     socket.on('newMessage', (data) => {
-      console.log("newMessage")
-      setMessages(
-        (messages) => addMessage(messages, data)
-      )
-    })
-  }, [socket, setMessages])
+      console.log('newMessage');
+      setMessages((messages) => addMessage(messages, data));
+    });
+  }, [socket, setMessages]);
 
   if (isLoading) {
-      return <LoadingPage />
+    return <LoadingPage />;
   } else if (error) {
-      return <div>Error loading {props.conversationId}</div>
+    return <div>Error loading {props.conversationId}</div>;
   }
 
   return (
-    <Stack
-      flexGrow={1}
-      height="100%"
-    >
+    <Stack flexGrow={1} height="100%">
       <Stack direction="row" flexGrow={0}>
         <Box style={{ margin: 16, flexShrink: 0 }}>
           <ConversationAvatar displayName={conversation?.getDisplayNameNoFallback()} />
         </Box>
-        <Box style={{ flex: "1 1 auto", overflow: 'hidden' }}>
-          <Typography className="title" variant="h6">{conversation?.getDisplayName()}</Typography>
-          <Typography className="subtitle" variant="subtitle1" >{props.conversationId}</Typography>
+        <Box style={{ flex: '1 1 auto', overflow: 'hidden' }}>
+          <Typography className="title" variant="h6">
+            {conversation?.getDisplayName()}
+          </Typography>
+          <Typography className="subtitle" variant="subtitle1">
+            {props.conversationId}
+          </Typography>
         </Box>
       </Stack>
       <Stack flexGrow={1} overflow="auto" direction="column-reverse">
-        <MessageList
-          messages={messages}
-        />
+        <MessageList messages={messages} />
       </Stack>
       <Stack flexGrow={0}>
         <SendMessageForm onSend={sendMessage} />
       </Stack>
     </Stack>
-  )
-}
+  );
+};
 
 const addMessage = (sortedMessages, message) => {
   if (sortedMessages.length === 0) {
-    return [message]
+    return [message];
   } else if (message.id === sortedMessages[sortedMessages.length - 1].linearizedParent) {
-    return [...sortedMessages, message]
+    return [...sortedMessages, message];
   } else if (message.linearizedParent === sortedMessages[0].id) {
-    return [message, ...sortedMessages]
+    return [message, ...sortedMessages];
   } else {
-    console.log("Can't insert message " + message.id)
+    console.log("Can't insert message " + message.id);
   }
-}
+};
 
 const sortMessages = (messages) => {
-  let sortedMessages = []
-  messages.forEach(message => sortedMessages = addMessage(sortedMessages, message))
-  return sortedMessages
-}
+  let sortedMessages = [];
+  messages.forEach((message) => (sortedMessages = addMessage(sortedMessages, message)));
+  return sortedMessages;
+};
 
-export default ConversationView
\ No newline at end of file
+export default ConversationView;
diff --git a/client/src/components/ConversationsOverviewCard.js b/client/src/components/ConversationsOverviewCard.js
index 04f74f5..baf5bf8 100644
--- a/client/src/components/ConversationsOverviewCard.js
+++ b/client/src/components/ConversationsOverviewCard.js
@@ -1,29 +1,30 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
 import { Card, CardActionArea, CardContent, CircularProgress, Typography } from '@mui/material';
 import { useNavigate, useParams } from 'react-router';
-import authManager from '../AuthManager'
+import authManager from '../AuthManager';
 import Conversation from '../../../model/Conversation';
 
 export default function ConversationsOverviewCard(props) {
-  const navigate = useNavigate()
-  const accountId = props.accountId || useParams().accountId
-  const [loaded, setLoaded] = useState(false)
-  const [conversations, setConversations] = useState([])
+  const navigate = useNavigate();
+  const accountId = props.accountId || useParams().accountId;
+  const [loaded, setLoaded] = useState(false);
+  const [conversations, setConversations] = useState([]);
 
   useEffect(() => {
-    const controller = new AbortController()
-    authManager.fetch(`/api/accounts/${accountId}/conversations`, { signal: controller.signal })
-      .then(res => res.json())
-      .then(result => {
-        console.log(result)
-        setLoaded(true)
-        setConversations(Object.values(result).map(c => Conversation.from(accountId, c)))
-      })
+    const controller = new AbortController();
+    authManager
+      .fetch(`/api/accounts/${accountId}/conversations`, { signal: controller.signal })
+      .then((res) => res.json())
+      .then((result) => {
+        console.log(result);
+        setLoaded(true);
+        setConversations(Object.values(result).map((c) => Conversation.from(accountId, c)));
+      });
     // return () => controller.abort() // crash on React18
-  }, [accountId])
+  }, [accountId]);
 
   return (
-    <Card onClick={() => navigate(`/account/${accountId}`)} >
+    <Card onClick={() => navigate(`/account/${accountId}`)}>
       <CardActionArea>
         <CardContent>
           <Typography color="textSecondary" gutterBottom>
@@ -35,5 +36,5 @@
         </CardContent>
       </CardActionArea>
     </Card>
-  )
+  );
 }
diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index 0c3eda4..165ff1b 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -1,35 +1,30 @@
-import { useState } from 'react'
-import { Box, Button, Menu, MenuItem } from '@mui/material'
-import { useNavigate, useParams } from "react-router-dom"
-import authManager from '../AuthManager'
+import { useState } from 'react';
+import { Box, Button, Menu, MenuItem } from '@mui/material';
+import { useNavigate, useParams } from 'react-router-dom';
+import authManager from '../AuthManager';
 
 export default function Header() {
-  const navigate = useNavigate()
-  const [anchorEl, setAnchorEl] = useState(null)
-  const handleClick = (event) => setAnchorEl(event.currentTarget)
-  const handleClose = () => setAnchorEl(null)
-  const params = useParams()
+  const navigate = useNavigate();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const handleClick = (event) => setAnchorEl(event.currentTarget);
+  const handleClose = () => setAnchorEl(null);
+  const params = useParams();
 
-  const goToAccountSelection = () => navigate(`/account`)
-  const goToContacts = () => navigate(`/Contacts`)
-  const goToAccountSettings = () => navigate(`/account/${params.accountId}/settings`)
+  const goToAccountSelection = () => navigate(`/account`);
+  const goToContacts = () => navigate(`/Contacts`);
+  const goToAccountSettings = () => navigate(`/account/${params.accountId}/settings`);
 
   return (
     <Box>
       <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
         Menu
       </Button>
-      <Menu
-        id="simple-menu"
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={handleClose}
-      >
+      <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
         <MenuItem onClick={goToAccountSelection}>Change account</MenuItem>
         <MenuItem onClick={goToContacts}>Contacts</MenuItem>
         {params.accountId && <MenuItem onClick={goToAccountSettings}>Account settings</MenuItem>}
         <MenuItem onClick={() => authManager.disconnect()}>Log out</MenuItem>
       </Menu>
-      </Box>
-  )
-}
\ No newline at end of file
+    </Box>
+  );
+}
diff --git a/client/src/components/JamiIdCard.js b/client/src/components/JamiIdCard.js
index b999780a..e25610b 100644
--- a/client/src/components/JamiIdCard.js
+++ b/client/src/components/JamiIdCard.js
@@ -1,23 +1,26 @@
 import { Box, Card, CardContent, Typography } from '@mui/material';
 
 export default function JamiIdCard(props) {
-  const account = props.account
-  const registeredName = account.getRegisteredName()
-  return <Card style={{marginBottom:16}}>
+  const account = props.account;
+  const registeredName = account.getRegisteredName();
+  return (
+    <Card style={{ marginBottom: 16 }}>
       <CardContent>
         <Box>
-        <Typography color="textSecondary">
-          Jami ID
-        </Typography>
-          <Typography variant="h5" component="h2" gutterBottom noWrap>{account.getUri()}</Typography>
+          <Typography color="textSecondary">Jami ID</Typography>
+          <Typography variant="h5" component="h2" gutterBottom noWrap>
+            {account.getUri()}
+          </Typography>
         </Box>
-        {registeredName && <Box>
-          <Typography color="textSecondary" >
-          Jami username
-        </Typography>
-            <Typography variant="h5" component="h2" noWrap>{registeredName}</Typography>
+        {registeredName && (
+          <Box>
+            <Typography color="textSecondary">Jami username</Typography>
+            <Typography variant="h5" component="h2" noWrap>
+              {registeredName}
+            </Typography>
           </Box>
-        }
+        )}
       </CardContent>
     </Card>
+  );
 }
diff --git a/client/src/components/ListItemLink.js b/client/src/components/ListItemLink.js
index c72a268..8080de2 100644
--- a/client/src/components/ListItemLink.js
+++ b/client/src/components/ListItemLink.js
@@ -1,4 +1,4 @@
-import { useMemo, forwardRef } from 'react'
+import { useMemo, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
@@ -6,20 +6,23 @@
 import { Link as RouterLink } from 'react-router-dom';
 
 function ListItemLink(props) {
-  const { icon, primary, secondary, to, account } = props
+  const { icon, primary, secondary, to, account } = props;
 
   const renderLink = useMemo(
-    () => forwardRef((itemProps, ref) => {
-    console.log("LIST ITEM LINK: ", account, itemProps)
-    return <RouterLink to={to} ref={ref} {...itemProps} state={account}/>}),
-    [to])
+    () =>
+      forwardRef((itemProps, ref) => {
+        console.log('LIST ITEM LINK: ', account, itemProps);
+        return <RouterLink to={to} ref={ref} {...itemProps} state={account} />;
+      }),
+    [to]
+  );
 
   return (
     <ListItem button component={renderLink}>
       {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
       <ListItemText primary={primary} secondary={secondary} />
     </ListItem>
-  )
+  );
 }
 
 ListItemLink.propTypes = {
@@ -27,7 +30,7 @@
   primary: PropTypes.string.isRequired,
   secondary: PropTypes.string,
   to: PropTypes.string.isRequired,
-  account: PropTypes.object
-}
+  account: PropTypes.object,
+};
 
-export default ListItemLink
\ No newline at end of file
+export default ListItemLink;
diff --git a/client/src/components/Message.js b/client/src/components/Message.js
index c7f22f1..7626c6e 100644
--- a/client/src/components/Message.js
+++ b/client/src/components/Message.js
@@ -1,76 +1,56 @@
-import { Box, Chip, Divider, List, ListItemButton, ListItemText, Stack, Tooltip, Typography } from "@mui/material"
-import { styled } from "@mui/material/styles";
-import dayjs from "dayjs"
-import isToday from "dayjs/plugin/isToday"
-import isYesterday from "dayjs/plugin/isYesterday"
-import React, { useCallback, useMemo, useState } from "react"
-import { useTranslation } from "react-i18next"
-import { EmojiButton, MoreButton, ReplyMessageButton } from "./buttons";
-import ConversationAvatar from "./ConversationAvatar"
-import { OppositeArrowsIcon, TrashBinIcon, TwoSheetsIcon } from "./svgIcons"
+import { Box, Chip, Divider, List, ListItemButton, ListItemText, Stack, Tooltip, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import isYesterday from 'dayjs/plugin/isYesterday';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { EmojiButton, MoreButton, ReplyMessageButton } from './buttons';
+import ConversationAvatar from './ConversationAvatar';
+import { OppositeArrowsIcon, TrashBinIcon, TwoSheetsIcon } from './svgIcons';
 
-dayjs.extend(isToday)
-dayjs.extend(isYesterday)
+dayjs.extend(isToday);
+dayjs.extend(isYesterday);
 
 export const MessageCall = (props) => {
-  return (
-    <Stack
-      alignItems="center"
-    >
-      "Appel"
-    </Stack>
-  )
-}
+  return <Stack alignItems="center">"Appel"</Stack>;
+};
 
 export const MessageInitial = (props) => {
-  const { t } = useTranslation()
-  return (
-    <Stack
-      alignItems="center"
-    >
-      {t("message_swarm_created")}
-    </Stack>
-  )
-}
+  const { t } = useTranslation();
+  return <Stack alignItems="center">{t('message_swarm_created')}</Stack>;
+};
 
 export const MessageDataTransfer = (props) => {
   return (
     <MessageBubble
-      backgroundColor={"#E5E5E5"}
+      backgroundColor={'#E5E5E5'}
       position={props.position}
       isFirstOfGroup={props.isFirstOfGroup}
       isLastOfGroup={props.isLastOfGroup}
     >
       "data-transfer"
     </MessageBubble>
-  )
-}
+  );
+};
 
 export const MessageMember = (props) => {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   return (
-    <Stack
-      alignItems="center"
-    >
+    <Stack alignItems="center">
       <Chip
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
         }}
-        label={t("message_user_joined", {user: props.message.author})}
+        label={t('message_user_joined', { user: props.message.author })}
       />
     </Stack>
-  )
-}
+  );
+};
 
 export const MessageMerge = (props) => {
-  return (
-    <Stack
-      alignItems="center"
-    >
-      "merge"
-    </Stack>
-  )
-}
+  return <Stack alignItems="center">"merge"</Stack>;
+};
 
 export const MessageText = (props) => {
   return (
@@ -84,37 +64,35 @@
         {props.message.body}
       </Typography>
     </MessageBubble>
-  )
-}
+  );
+};
 
-export const MessageDate = ({time}) => {
-  let textDate
+export const MessageDate = ({ time }) => {
+  let textDate;
 
   if (time.isToday()) {
-    textDate = "Today"
-  }
-  else if (time.isYesterday()) {
-    textDate = "Yesterday"
-  }
-  else {
-    const date = time.date().toString().padStart(2,'0')
-    const month = (time.month()+1).toString().padStart(2,'0')
-    textDate = `${date}/${month}/${time.year()}`
+    textDate = 'Today';
+  } else if (time.isYesterday()) {
+    textDate = 'Yesterday';
+  } else {
+    const date = time.date().toString().padStart(2, '0');
+    const month = (time.month() + 1).toString().padStart(2, '0');
+    textDate = `${date}/${month}/${time.year()}`;
   }
 
   return (
-    <Box marginTop="30px" >
+    <Box marginTop="30px">
       <Divider
         sx={{
-          ".MuiDivider-wrapper": {
+          '.MuiDivider-wrapper': {
             margin: 0,
             padding: 0,
           },
-          "&::before": {
-            borderTop: "1px solid #E5E5E5",
+          '&::before': {
+            borderTop: '1px solid #E5E5E5',
           },
-          "&::after": {
-            borderTop: "1px solid #E5E5E5",
+          '&::after': {
+            borderTop: '1px solid #E5E5E5',
           },
         }}
       >
@@ -129,37 +107,28 @@
         </Typography>
       </Divider>
     </Box>
-  )
-}
+  );
+};
 
-export const MessageTime = ({time, hasDateOnTop}) => {
-  const hour = time.hour().toString().padStart(2,'0')
-  const minute = time.minute().toString().padStart(2,'0')
-  const textTime = `${hour}:${minute}`
+export const MessageTime = ({ time, hasDateOnTop }) => {
+  const hour = time.hour().toString().padStart(2, '0');
+  const minute = time.minute().toString().padStart(2, '0');
+  const textTime = `${hour}:${minute}`;
 
   return (
-    <Stack
-      direction="row"
-      justifyContent="center"
-      margin="30px"
-      marginTop={hasDateOnTop ? "20px" : "30px"}
-    >
-      <Typography
-        variant="caption"
-        color="#A7A7A7"
-        fontWeight={700}
-      >
+    <Stack direction="row" justifyContent="center" margin="30px" marginTop={hasDateOnTop ? '20px' : '30px'}>
+      <Typography variant="caption" color="#A7A7A7" fontWeight={700}>
         {textTime}
       </Typography>
     </Stack>
-  )
-}
+  );
+};
 
 export const MessageBubblesGroup = (props) => {
-  const isUser = false // should access user from the store
-  const position = isUser ? "end" : "start"
-  const bubbleColor = isUser ? "#005699" : "#E5E5E5"
-  const textColor = isUser ? "white" : "black"
+  const isUser = false; // should access user from the store
+  const position = isUser ? 'end' : 'start';
+  const bubbleColor = isUser ? '#005699' : '#E5E5E5';
+  const textColor = isUser ? 'white' : 'black';
 
   return (
     <Stack // Row for a group of message bubbles with the user's infos
@@ -168,234 +137,202 @@
       alignItems="end"
       spacing="10px"
     >
-      {
-        !isUser
-        &&
-          <ConversationAvatar
-            displayName="TempDisplayName"
-            sx={{ width: "22px", height: "22px", fontSize: "15px" }}
-          />
-      }
+      {!isUser && (
+        <ConversationAvatar displayName="TempDisplayName" sx={{ width: '22px', height: '22px', fontSize: '15px' }} />
+      )}
       <Stack // Container to align the bubbles to the same side of a row
         width="66.66%"
         alignItems={position}
       >
-        <ParticipantName
-          name={props.messages[0]?.author}
-          position={position}
-        />
+        <ParticipantName name={props.messages[0]?.author} position={position} />
         <Stack // Container for a group of message bubbles
           spacing="6px"
           alignItems={position}
           direction="column-reverse"
         >
-          {props.messages.map(
-            (message, index) => {
-              let Component
-              switch (message.type) {
-                case "text/plain":
-                  Component = MessageText
-                  break
-                case "application/data-transfer+json":
-                  Component = MessageDataTransfer
-                  break
-              } 
-              return (
-                <Component // Single message
-                  key={message.id} 
-                  message={message}
-                  textColor={textColor}
-                  position={position}
-                  bubbleColor={bubbleColor}
-                  isFirstOfGroup={index == props.messages.length-1}
-                  isLastOfGroup={index == 0}
-                />
-              )
+          {props.messages.map((message, index) => {
+            let Component;
+            switch (message.type) {
+              case 'text/plain':
+                Component = MessageText;
+                break;
+              case 'application/data-transfer+json':
+                Component = MessageDataTransfer;
+                break;
             }
-          )}
+            return (
+              <Component // Single message
+                key={message.id}
+                message={message}
+                textColor={textColor}
+                position={position}
+                bubbleColor={bubbleColor}
+                isFirstOfGroup={index == props.messages.length - 1}
+                isLastOfGroup={index == 0}
+              />
+            );
+          })}
         </Stack>
       </Stack>
     </Stack>
-  )
-}
+  );
+};
 
 const MessageTooltip = styled(({ className, ...props }) => {
-  const [open, setOpen] = useState(false)
-  const emojis = ["😎", "😄", "😍"] // Should be last three used emojis
+  const [open, setOpen] = useState(false);
+  const emojis = ['😎', '😄', '😍']; // Should be last three used emojis
   const additionalOptions = [
     {
       Icon: TwoSheetsIcon,
-      text: "Copy",
+      text: 'Copy',
       action: () => {},
     },
     {
       Icon: OppositeArrowsIcon,
-      text: "Transfer",
+      text: 'Transfer',
       action: () => {},
     },
     {
       Icon: TrashBinIcon,
-      text: "Delete message",
+      text: 'Delete message',
       action: () => {},
     },
-  ]
+  ];
 
-  const toggleMoreMenu = useCallback(
-    () => setOpen(open => !open),
-    [setOpen]
-  )
+  const toggleMoreMenu = useCallback(() => setOpen((open) => !open), [setOpen]);
 
-  const onClose = useCallback(
-    () => {
-      setOpen(false)
-    },
-    [setOpen]
-  )
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
 
   return (
     <Tooltip
       {...props}
       classes={{ tooltip: className }} // Required for styles. Don't know why
-      placement={props.position == "start" ? "right-start" : "left-start"}
+      placement={props.position == 'start' ? 'right-start' : 'left-start'}
       PopperProps={{
         modifiers: [
           {
-            name: "offset",
+            name: 'offset',
             options: {
-                offset: [-2, -30],
+              offset: [-2, -30],
             },
           },
         ],
       }}
       onClose={onClose}
       title={
-        <Stack> {/* Whole tooltip's content */}
+        <Stack>
+          {' '}
+          {/* Whole tooltip's content */}
           <Stack // Main options
             direction="row"
             spacing="16px"
           >
-            {
-              emojis.map(
-                emoji => <EmojiButton key={emoji} emoji={emoji}/>
-              )
-            }
-            <ReplyMessageButton/>
-            <MoreButton
-              onClick={toggleMoreMenu}
-            />
+            {emojis.map((emoji) => (
+              <EmojiButton key={emoji} emoji={emoji} />
+            ))}
+            <ReplyMessageButton />
+            <MoreButton onClick={toggleMoreMenu} />
           </Stack>
-          {open && // Additional menu options
+          {open && ( // Additional menu options
             <>
-            <Divider sx={{paddingTop:"16px"}}/>
-            <List sx={{padding: 0, paddingTop: "8px", marginBottom: "-8px"}}>
-              {
-                additionalOptions.map(
-                  (option) => (
-                    <ListItemButton
-                      key={option.text}
-                      sx={{
-                        padding: "8px",
-                      }}
+              <Divider sx={{ paddingTop: '16px' }} />
+              <List sx={{ padding: 0, paddingTop: '8px', marginBottom: '-8px' }}>
+                {additionalOptions.map((option) => (
+                  <ListItemButton
+                    key={option.text}
+                    sx={{
+                      padding: '8px',
+                    }}
+                  >
+                    <Stack // Could not find proper way to set spacing between ListItemIcon and ListItemText
+                      direction="row"
+                      spacing="16px"
                     >
-                      <Stack // Could not find proper way to set spacing between ListItemIcon and ListItemText
-                        direction="row"
-                        spacing="16px"
-                      >
-                        <option.Icon
-                          sx={{
-                            height: "16px",
-                            margin: 0,
-                            color: theme => theme.palette.primary.dark,
-                          }}
-                        />
-                        <ListItemText
-                          primary={option.text}
-                          primaryTypographyProps={{
-                            fontSize: "12px",
-                            lineHeight: "16px",
-                          }}
-                          sx={{
-                            height: "16px",
-                            margin: 0,
-                          }}
-                        />
-                      </Stack>
-                    </ListItemButton>
-                  )
-                )
-              }
-            </List>
+                      <option.Icon
+                        sx={{
+                          height: '16px',
+                          margin: 0,
+                          color: (theme) => theme.palette.primary.dark,
+                        }}
+                      />
+                      <ListItemText
+                        primary={option.text}
+                        primaryTypographyProps={{
+                          fontSize: '12px',
+                          lineHeight: '16px',
+                        }}
+                        sx={{
+                          height: '16px',
+                          margin: 0,
+                        }}
+                      />
+                    </Stack>
+                  </ListItemButton>
+                ))}
+              </List>
             </>
-          }
+          )}
         </Stack>
       }
     />
-  )
+  );
 })(({ theme, position }) => {
-  const largeRadius = "20px"
-  const smallRadius = "5px"
+  const largeRadius = '20px';
+  const smallRadius = '5px';
   return {
-    backgroundColor: "white",
-    padding: "16px",
-    boxShadow: "3px 3px 7px #00000029",
+    backgroundColor: 'white',
+    padding: '16px',
+    boxShadow: '3px 3px 7px #00000029',
     borderRadius: largeRadius,
-    borderStartStartRadius: position == "start" ? smallRadius : largeRadius,
-    borderStartEndRadius: position == "end" ? smallRadius : largeRadius,
-  }
+    borderStartStartRadius: position == 'start' ? smallRadius : largeRadius,
+    borderStartEndRadius: position == 'end' ? smallRadius : largeRadius,
+  };
 });
 
 const MessageBubble = (props) => {
-  const largeRadius = "20px"
-  const smallRadius = "5px"
+  const largeRadius = '20px';
+  const smallRadius = '5px';
   const radius = useMemo(() => {
-    if (props.position == "start") {
+    if (props.position == 'start') {
       return {
         borderStartStartRadius: props.isFirstOfGroup ? largeRadius : smallRadius,
         borderStartEndRadius: largeRadius,
         borderEndStartRadius: props.isLastOfGroup ? largeRadius : smallRadius,
         borderEndEndRadius: largeRadius,
-      }
+      };
     }
     return {
       borderStartStartRadius: largeRadius,
       borderStartEndRadius: props.isFirstOfGroup ? largeRadius : smallRadius,
       borderEndStartRadius: largeRadius,
       borderEndEndRadius: props.isLastOfGroup ? largeRadius : smallRadius,
-    }
-  }, [props.isFirstOfGroup, props.isLastOfGroup, props.position])
+    };
+  }, [props.isFirstOfGroup, props.isLastOfGroup, props.position]);
 
   return (
-    <MessageTooltip
-      position={props.position}
-    >
+    <MessageTooltip position={props.position}>
       <Box
         sx={{
-          width: "fit-content",
+          width: 'fit-content',
           backgroundColor: props.backgroundColor,
-          padding: "16px",
+          padding: '16px',
           ...radius,
         }}
       >
         {props.children}
       </Box>
     </MessageTooltip>
-  )
-}
+  );
+};
 
 const ParticipantName = (props) => {
   return (
-    <Box
-      marginBottom="6px"
-      marginLeft="16px"
-      marginRight="16px"
-    >
-      <Typography
-        variant="caption"
-        color="#A7A7A7"
-        fontWeight={700}
-      >
+    <Box marginBottom="6px" marginLeft="16px" marginRight="16px">
+      <Typography variant="caption" color="#A7A7A7" fontWeight={700}>
         {props.name}
       </Typography>
     </Box>
-  )
-}
\ No newline at end of file
+  );
+};
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index a6084a7..0dc4975 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,30 +1,31 @@
-import dayjs from "dayjs"
-import { useMemo } from 'react'
-import dayOfYear from 'dayjs/plugin/dayOfYear'
-import isBetween from 'dayjs/plugin/isBetween'
-import { Stack } from "@mui/system"
-import { MessageCall, MessageDate, MessageInitial, MessageMember, MessageBubblesGroup, MessageTime, MessageMerge } from "./Message"
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import dayOfYear from 'dayjs/plugin/dayOfYear';
+import isBetween from 'dayjs/plugin/isBetween';
+import { Stack } from '@mui/system';
+import {
+  MessageCall,
+  MessageDate,
+  MessageInitial,
+  MessageMember,
+  MessageBubblesGroup,
+  MessageTime,
+  MessageMerge,
+} from './Message';
 
-dayjs.extend(dayOfYear)
-dayjs.extend(isBetween)
+dayjs.extend(dayOfYear);
+dayjs.extend(isBetween);
 
 export default function MessageList(props) {
-  const messagesComponents = useMemo(
-    () => buildMessagesList(props.messages),
-    [props.messages]
-  )
+  const messagesComponents = useMemo(() => buildMessagesList(props.messages), [props.messages]);
 
   return (
-    <Stack
-      marginLeft="16px"
-      marginRight="16px"
-      direction="column-reverse"
-    >
-      {messagesComponents?.map(
-        ({Component, id, props}) => <Component key={id} {...props}/>
-      )}
+    <Stack marginLeft="16px" marginRight="16px" direction="column-reverse">
+      {messagesComponents?.map(({ Component, id, props }) => (
+        <Component key={id} {...props} />
+      ))}
     </Stack>
-  )
+  );
 }
 
 const buildMessagesList = (messages) => {
@@ -32,124 +33,125 @@
     return null;
   }
 
-  const components = []
-  let lastTime = dayjs.unix(messages[0].timestamp)
-  let lastAuthor = messages[0].author
-  let messageBubblesGroup = []
+  const components = [];
+  let lastTime = dayjs.unix(messages[0].timestamp);
+  let lastAuthor = messages[0].author;
+  let messageBubblesGroup = [];
 
   const pushMessageBubblesGroup = () => {
     if (messageBubblesGroup.length == 0) {
-      return
+      return;
     }
     components.push({
       id: `group-${messageBubblesGroup[0].id}`,
       Component: MessageBubblesGroup,
       props: { messages: messageBubblesGroup },
-    })
-    messageBubblesGroup = []
-  }
+    });
+    messageBubblesGroup = [];
+  };
 
   const pushMessageCall = (message) => {
     components.push({
       id: `call-${message.id}`,
       Component: MessageCall,
       props: { message },
-    })
-  }
+    });
+  };
 
   const pushMessageMember = (message) => {
     components.push({
       id: `member-${message.id}`,
       Component: MessageMember,
       props: { message },
-    })
-  }
+    });
+  };
 
   const pushMessageMerge = (message) => {
     components.push({
       id: `merge-${message.id}`,
       Component: MessageMerge,
       props: { message },
-    })
-  }
+    });
+  };
 
-  const pushMessageTime = (message, time, hasDateOnTop=false) => {
+  const pushMessageTime = (message, time, hasDateOnTop = false) => {
     components.push({
       id: `time-${message.id}`,
       Component: MessageTime,
       props: { time, hasDateOnTop },
-    })
-  }
+    });
+  };
 
   const pushMessageDate = (message, time) => {
     components.push({
       id: `date-${message.id}`,
       Component: MessageDate,
-      props: { time }
-    })
-  }
+      props: { time },
+    });
+  };
 
   const pushMessageInitial = (message) => {
     components.push({
       id: `initial-${message.id}`,
       Component: MessageInitial,
-      props: { message }
-    })
-  }
+      props: { message },
+    });
+  };
 
-  messages.forEach(message => { // most recent messages first
+  messages.forEach((message) => {
+    // most recent messages first
     switch (message.type) {
-      case "text/plain":
-      case "application/data-transfer+json":
+      case 'text/plain':
+      case 'application/data-transfer+json':
         if (lastAuthor != message.author) {
-          pushMessageBubblesGroup()
+          pushMessageBubblesGroup();
         }
-        messageBubblesGroup.push(message)
-        break
-      case "application/call-history+json":
-        pushMessageBubblesGroup()
-        pushMessageCall(message)
-        break
-      case "member":
-        pushMessageBubblesGroup()
-        pushMessageMember(message)
-        break
-      case "merge":
-        pushMessageBubblesGroup()
-        pushMessageMerge(message)
-        break
-      case "initial":
+        messageBubblesGroup.push(message);
+        break;
+      case 'application/call-history+json':
+        pushMessageBubblesGroup();
+        pushMessageCall(message);
+        break;
+      case 'member':
+        pushMessageBubblesGroup();
+        pushMessageMember(message);
+        break;
+      case 'merge':
+        pushMessageBubblesGroup();
+        pushMessageMerge(message);
+        break;
+      case 'initial':
       default:
-        break
+        break;
     }
 
-    const time = dayjs.unix(message.timestamp)
-    if (message.type == "initial") {
-      pushMessageBubblesGroup()
-      pushMessageTime(message, time, true)
-      pushMessageDate(message, time)
-      pushMessageInitial(message)
-    }
-    else {
-      if ( // If the date is different
-        lastTime?.year() != time.year()
-        || lastTime?.dayOfYear() != time.dayOfYear()
-      ) { 
-        pushMessageBubblesGroup()
-        pushMessageTime(message, time, true)
-        pushMessageDate(message, time)
-      }
-      else if ( // If more than 5 minutes have passed since the last message
-        !lastTime.isBetween(time, time?.add(5, "minute"))
+    const time = dayjs.unix(message.timestamp);
+    if (message.type == 'initial') {
+      pushMessageBubblesGroup();
+      pushMessageTime(message, time, true);
+      pushMessageDate(message, time);
+      pushMessageInitial(message);
+    } else {
+      if (
+        // If the date is different
+        lastTime?.year() != time.year() ||
+        lastTime?.dayOfYear() != time.dayOfYear()
       ) {
-        pushMessageBubblesGroup()
-        pushMessageTime(message, time)
+        pushMessageBubblesGroup();
+        pushMessageTime(message, time, true);
+        pushMessageDate(message, time);
+      } else if (
+        // If more than 5 minutes have passed since the last message
+        !lastTime.isBetween(time, time?.add(5, 'minute'))
+      ) {
+        pushMessageBubblesGroup();
+        pushMessageTime(message, time);
       }
 
-      lastTime = time
-      lastAuthor = message.author
+      lastTime = time;
+      lastAuthor = message.author;
     }
-  })
+  });
 
-  return components
-}
+  return components;
+};
diff --git a/client/src/components/NewContactForm.js b/client/src/components/NewContactForm.js
index 9482948..db0ce31 100644
--- a/client/src/components/NewContactForm.js
+++ b/client/src/components/NewContactForm.js
@@ -1,32 +1,34 @@
-import { useState } from 'react'
+import { useState } from 'react';
 import { InputBase, InputAdornment } from '@mui/material';
 import { SearchRounded } from '@mui/icons-material';
 
 export default function NewContactForm(props) {
-    const [value, setValue] = useState('')
+  const [value, setValue] = useState('');
 
-    const handleChange = event => {
-        setValue(event.target.value)
-        if (props.onChange)
-            props.onChange(event.target.value)
-    }
+  const handleChange = (event) => {
+    setValue(event.target.value);
+    if (props.onChange) props.onChange(event.target.value);
+  };
 
-    const handleSubmit = event => {
-        event.preventDefault()
-        if (value && props.onSubmit)
-            props.onSubmit(value)
-    }
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (value && props.onSubmit) props.onSubmit(value);
+  };
 
-    return (
-        <form className="main-search" onSubmit={handleSubmit} noValidate autoComplete="off">
-            <InputBase
-                className="main-search-input"
-                type="search"
-                placeholder="Ajouter un contact"
-                value={value}
-                onChange={handleChange}
-                startAdornment={<InputAdornment position="start"><SearchRounded /></InputAdornment>}
-            />
-        </form>
-    )
+  return (
+    <form className="main-search" onSubmit={handleSubmit} noValidate autoComplete="off">
+      <InputBase
+        className="main-search-input"
+        type="search"
+        placeholder="Ajouter un contact"
+        value={value}
+        onChange={handleChange}
+        startAdornment={
+          <InputAdornment position="start">
+            <SearchRounded />
+          </InputAdornment>
+        }
+      />
+    </form>
+  );
 }
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index df520ff..d46883c 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -1,32 +1,36 @@
-import { useState, useCallback } from 'react'
-import { Divider, InputBase } from '@mui/material'
-import { RecordVideoMessageButton, RecordVoiceMessageButton, SelectEmojiButton, SendMessageButton, UploadFileButton } from './buttons';
+import { useState, useCallback } from 'react';
+import { Divider, InputBase } from '@mui/material';
+import {
+  RecordVideoMessageButton,
+  RecordVoiceMessageButton,
+  SelectEmojiButton,
+  SendMessageButton,
+  UploadFileButton,
+} from './buttons';
 import { Stack } from '@mui/system';
 
 export default function SendMessageForm(props) {
-  const [currentMessage, setCurrentMessage] = useState("")
+  const [currentMessage, setCurrentMessage] = useState('');
 
-  const handleSubmit = e => {
-    e.preventDefault()
+  const handleSubmit = (e) => {
+    e.preventDefault();
     if (currentMessage) {
-      props.onSend(currentMessage)
-      setCurrentMessage('')
+      props.onSend(currentMessage);
+      setCurrentMessage('');
     }
-  }
-  const handleInputChange = (event) => setCurrentMessage(event.target.value)
+  };
+  const handleInputChange = (event) => setCurrentMessage(event.target.value);
 
   const onEmojiSelected = useCallback(
     (emoji) => setCurrentMessage((currentMessage) => currentMessage + emoji),
-    [setCurrentMessage],
-  )
+    [setCurrentMessage]
+  );
 
   return (
-    <Stack
-      padding="30px 16px 0px 16px"
-    >
+    <Stack padding="30px 16px 0px 16px">
       <Divider
         sx={{
-          bordeTop: "1px solid #E5E5E5",
+          bordeTop: '1px solid #E5E5E5',
         }}
       />
       <Stack
@@ -38,31 +42,27 @@
         spacing="20px"
         padding="16px 0px"
       >
-        <UploadFileButton/>
-        <RecordVoiceMessageButton/>
-        <RecordVideoMessageButton/>
+        <UploadFileButton />
+        <RecordVoiceMessageButton />
+        <RecordVideoMessageButton />
 
-        <Stack
-          flexGrow={1}
-        >
+        <Stack flexGrow={1}>
           <InputBase
             placeholder="Write something nice"
             value={currentMessage}
             onChange={handleInputChange}
             sx={{
-              fontSize: "15px",
-              color: "black",
-              "& ::placeholder": {
-                color: "#7E7E7E",
+              fontSize: '15px',
+              color: 'black',
+              '& ::placeholder': {
+                color: '#7E7E7E',
                 opacity: 1,
               },
             }}
           />
         </Stack>
-        <SelectEmojiButton
-          onEmojiSelected={onEmojiSelected}
-        />
-        { currentMessage && <SendMessageButton type="submit"/> }
+        <SelectEmojiButton onEmojiSelected={onEmojiSelected} />
+        {currentMessage && <SendMessageButton type="submit" />}
       </Stack>
     </Stack>
   );
diff --git a/client/src/components/UsernameChooser.js b/client/src/components/UsernameChooser.js
index 7703639..0061701 100644
--- a/client/src/components/UsernameChooser.js
+++ b/client/src/components/UsernameChooser.js
@@ -1,48 +1,59 @@
-import { useEffect, useState } from 'react'
-import usePromise from "react-fetch-hook/usePromise"
-import { InputAdornment, TextField } from '@mui/material'
-import { SearchRounded } from '@mui/icons-material'
-import authManager from '../AuthManager'
+import { useEffect, useState } from 'react';
+import usePromise from 'react-fetch-hook/usePromise';
+import { InputAdornment, TextField } from '@mui/material';
+import { SearchRounded } from '@mui/icons-material';
+import authManager from '../AuthManager';
 
-const isInputValid = input => input && input.length > 2
+const isInputValid = (input) => input && input.length > 2;
 
 export default function UsernameChooser(props) {
-  const [query, setQuery] = useState('')
+  const [query, setQuery] = useState('');
 
-  const { isLoading, data, error } = usePromise(() => isInputValid(query) ? authManager.fetch(`/api/ns/name/${query}`)
-    .then(res => {
-      if (res.status === 200)
-        return res.json()
-      else throw res.status
-    }) : new Promise((res, rej) => rej(400)),
-    [query])
+  const { isLoading, data, error } = usePromise(
+    () =>
+      isInputValid(query)
+        ? authManager.fetch(`/api/ns/name/${query}`).then((res) => {
+            if (res.status === 200) return res.json();
+            else throw res.status;
+          })
+        : new Promise((res, rej) => rej(400)),
+    [query]
+  );
 
   useEffect(() => {
     if (!isLoading) {
-      if (error === 404)
-        props.setName(query)
-      else
-        props.setName('')
+      if (error === 404) props.setName(query);
+      else props.setName('');
     }
-  }, [query, isLoading, data, error])
+  }, [query, isLoading, data, error]);
 
-  const handleChange = event => setQuery(event.target.value)
+  const handleChange = (event) => setQuery(event.target.value);
 
   return (
-      <TextField
-        className="main-search-input"
-        type="search"
-        placeholder="Register a unique name"
-        error={!error}
-        label={isLoading ? 'Searching...' : (error && error !== 400 ? 'This name is available' : (data && data.address ? 'This name is not available' : ''))}
-        value={query}
-        disabled={props.disabled}
-        onChange={handleChange}
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start"><SearchRounded /></InputAdornment>
-          )
-        }}
-      />
-  )
+    <TextField
+      className="main-search-input"
+      type="search"
+      placeholder="Register a unique name"
+      error={!error}
+      label={
+        isLoading
+          ? 'Searching...'
+          : error && error !== 400
+          ? 'This name is available'
+          : data && data.address
+          ? 'This name is not available'
+          : ''
+      }
+      value={query}
+      disabled={props.disabled}
+      onChange={handleChange}
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <SearchRounded />
+          </InputAdornment>
+        ),
+      }}
+    />
+  );
 }
diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
index d0db1c0..1b26c03 100644
--- a/client/src/components/buttons.js
+++ b/client/src/components/buttons.js
@@ -1,328 +1,245 @@
-import { QuestionMark } from "@mui/icons-material";
-import { Box, ClickAwayListener, IconButton, Popper } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import EmojiPicker from "emoji-picker-react";
-import React, { useState, useCallback } from "react";
-import { Arrow2Icon, Arrow3Icon, ArrowIcon, CameraIcon, CameraInBubbleIcon, CancelIcon, CrossedEyeIcon, CrossIcon, EmojiIcon, EyeIcon, FolderIcon, InfoIcon, MicroInBubbleIcon, PaperClipIcon, PenIcon, SaltireIcon } from "./svgIcons";
+import { QuestionMark } from '@mui/icons-material';
+import { Box, ClickAwayListener, IconButton, Popper } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import EmojiPicker from 'emoji-picker-react';
+import React, { useState, useCallback } from 'react';
+import {
+  Arrow2Icon,
+  Arrow3Icon,
+  ArrowIcon,
+  CameraIcon,
+  CameraInBubbleIcon,
+  CancelIcon,
+  CrossedEyeIcon,
+  CrossIcon,
+  EmojiIcon,
+  EyeIcon,
+  FolderIcon,
+  InfoIcon,
+  MicroInBubbleIcon,
+  PaperClipIcon,
+  PenIcon,
+  SaltireIcon,
+} from './svgIcons';
 
-const RoundButton = styled(
-    ({Icon, ...props}) => (
-        <IconButton {...props} disableRipple={true}>
-            <Icon fontSize="inherit"/>
-        </IconButton>
-    )
-)(({theme}) => ({
-    border: `1px solid ${theme.palette.primary.dark}`,
-    color: theme.palette.primary.dark,
-    fontSize: "15px",
-    "&:hover": {
-        background: theme.palette.primary.light,
-    },
-    "&:active": {
-        color: "#FFF",
-        background: theme.palette.primary.dark,
-    },
-    "&.MuiIconButton-sizeSmall": {
-        height: "15px",
-        width: "15px",
-    },
-    "&.MuiIconButton-sizeMedium": {
-        height: "30px",
-        width: "30px",
-    },
-    "&.MuiIconButton-sizeLarge": {
-        height: "53px",
-        width: "53px",
-    }
+const RoundButton = styled(({ Icon, ...props }) => (
+  <IconButton {...props} disableRipple={true}>
+    <Icon fontSize="inherit" />
+  </IconButton>
+))(({ theme }) => ({
+  border: `1px solid ${theme.palette.primary.dark}`,
+  color: theme.palette.primary.dark,
+  fontSize: '15px',
+  '&:hover': {
+    background: theme.palette.primary.light,
+  },
+  '&:active': {
+    color: '#FFF',
+    background: theme.palette.primary.dark,
+  },
+  '&.MuiIconButton-sizeSmall': {
+    height: '15px',
+    width: '15px',
+  },
+  '&.MuiIconButton-sizeMedium': {
+    height: '30px',
+    width: '30px',
+  },
+  '&.MuiIconButton-sizeLarge': {
+    height: '53px',
+    width: '53px',
+  },
 }));
 
 export const CancelPictureButton = (props) => {
-    return (
-        <RoundButton {...props}
-            aria-label="remove picture"
-            Icon={CancelIcon}
-            size="large"
-        />
-    )
-}
+  return <RoundButton {...props} aria-label="remove picture" Icon={CancelIcon} size="large" />;
+};
 
 export const EditPictureButton = (props) => {
-    return (
-        <RoundButton {...props}
-            aria-label="edit picture"
-            Icon={PenIcon}
-            size="large"
-        />
-    )
-}
+  return <RoundButton {...props} aria-label="edit picture" Icon={PenIcon} size="large" />;
+};
 
 export const UploadPictureButton = (props) => {
-    return (
-        <RoundButton {...props}
-            aria-label="upload picture"
-            Icon={FolderIcon}
-            size="large"
-        />
-    )
-}
+  return <RoundButton {...props} aria-label="upload picture" Icon={FolderIcon} size="large" />;
+};
 
 export const TakePictureButton = (props) => {
-    return (
-        <RoundButton {...props}
-            aria-label="take picture"
-            Icon={CameraIcon}
-            size="large"
-        />
-    )
-}
+  return <RoundButton {...props} aria-label="take picture" Icon={CameraIcon} size="large" />;
+};
 
 export const InfoButton = (props) => {
-    return (
-        <RoundButton {...props}
-            aria-label="informations"
-            Icon={InfoIcon}
-            size="small"
-        />
-    )
-}
+  return <RoundButton {...props} aria-label="informations" Icon={InfoIcon} size="small" />;
+};
 
 export const TipButton = (props) => {
-    return (
-        <RoundButton {...props}
-            aria-label="tip"
-            Icon={QuestionMark}
-            size="medium"
-        />
-    )
-}
+  return <RoundButton {...props} aria-label="tip" Icon={QuestionMark} size="medium" />;
+};
 
-export const MoreButton = styled(
-    (props) => {
-        return (
-            <IconButton
-                {...props}
-                disableRipple={true}
-                aria-label="more"
-            >
-                <CrossIcon fontSize="inherit"/>
-            </IconButton>
-        )
-    }
-)(({theme}) => ({
-    border: `1px solid ${theme.palette.primary.dark}`,
-    color: theme.palette.primary.dark,
-    fontSize: "10px",
-    height: "20px",
-    width: "20px",
-    "&:hover": {
-        background: theme.palette.primary.light,
-    },
-    "&:active": {
-        color: "#FFF",
-        background: theme.palette.primary.dark,
-    },
-}))
+export const MoreButton = styled((props) => {
+  return (
+    <IconButton {...props} disableRipple={true} aria-label="more">
+      <CrossIcon fontSize="inherit" />
+    </IconButton>
+  );
+})(({ theme }) => ({
+  border: `1px solid ${theme.palette.primary.dark}`,
+  color: theme.palette.primary.dark,
+  fontSize: '10px',
+  height: '20px',
+  width: '20px',
+  '&:hover': {
+    background: theme.palette.primary.light,
+  },
+  '&:active': {
+    color: '#FFF',
+    background: theme.palette.primary.dark,
+  },
+}));
 
-export const BackButton = styled(
-    (props) => {
-        return (
-            <IconButton
-                {...props}
-                disableRipple={true}
-                aria-label="back"
-            >
-                <ArrowIcon fontSize="inherit"/>
-            </IconButton>
-        )
-    }
-)(({theme}) => ({
-    color: theme.palette.primary.dark,
-    fontSize: "15px",
-    height: "30px",
-    width: "51px",
-    borderRadius: "5px",
-    "&:hover": {
-        background: theme.palette.primary.light,
-    },
-}))
+export const BackButton = styled((props) => {
+  return (
+    <IconButton {...props} disableRipple={true} aria-label="back">
+      <ArrowIcon fontSize="inherit" />
+    </IconButton>
+  );
+})(({ theme }) => ({
+  color: theme.palette.primary.dark,
+  fontSize: '15px',
+  height: '30px',
+  width: '51px',
+  borderRadius: '5px',
+  '&:hover': {
+    background: theme.palette.primary.light,
+  },
+}));
 
-export const CloseButton = styled(
-    (props) => {
-        return (
-            <IconButton
-                {...props}
-                disableRipple={true}
-                aria-label="close"
-            >
-                <SaltireIcon fontSize="inherit"/>
-            </IconButton>
-        )
-    }
-)(({theme}) => ({
-    color: theme.palette.primary.dark,
-    fontSize: "15px",
-    height: "30px",
-    width: "30px",
-    borderRadius: "5px",
-    "&:hover": {
-        background: theme.palette.primary.light,
-    },
-}))
+export const CloseButton = styled((props) => {
+  return (
+    <IconButton {...props} disableRipple={true} aria-label="close">
+      <SaltireIcon fontSize="inherit" />
+    </IconButton>
+  );
+})(({ theme }) => ({
+  color: theme.palette.primary.dark,
+  fontSize: '15px',
+  height: '30px',
+  width: '30px',
+  borderRadius: '5px',
+  '&:hover': {
+    background: theme.palette.primary.light,
+  },
+}));
 
-export const ToggleVisibilityButton = styled(
-    ({visible, ...props}) => {
-        const Icon = visible ? CrossedEyeIcon : EyeIcon
-        return (
-            <IconButton {...props} disableRipple={true}>
-                <Icon fontSize="inherit"/>
-            </IconButton>
-        )
-    }
-)(({theme}) => ({
-    color: theme.palette.primary.dark,
-    fontSize: "15px",
-    height: "15px",
-    width: "15px",
-    "&:hover": {
-        background: theme.palette.primary.light,
-    },
-}))
+export const ToggleVisibilityButton = styled(({ visible, ...props }) => {
+  const Icon = visible ? CrossedEyeIcon : EyeIcon;
+  return (
+    <IconButton {...props} disableRipple={true}>
+      <Icon fontSize="inherit" />
+    </IconButton>
+  );
+})(({ theme }) => ({
+  color: theme.palette.primary.dark,
+  fontSize: '15px',
+  height: '15px',
+  width: '15px',
+  '&:hover': {
+    background: theme.palette.primary.light,
+  },
+}));
 
-const SquareButton = styled(
-    ({Icon, ...props}) => (
-        <IconButton {...props} disableRipple={true}>
-            <Icon fontSize="inherit"/>
-        </IconButton>
-    )
-)(({theme}) => ({
-    color: "#7E7E7E",
-    fontSize: "25px",
-    height: "36px",
-    width: "36px",
-    borderRadius: "5px",
-    "&:hover": {
-        background: "#E5E5E5",
-    },
+const SquareButton = styled(({ Icon, ...props }) => (
+  <IconButton {...props} disableRipple={true}>
+    <Icon fontSize="inherit" />
+  </IconButton>
+))(({ theme }) => ({
+  color: '#7E7E7E',
+  fontSize: '25px',
+  height: '36px',
+  width: '36px',
+  borderRadius: '5px',
+  '&:hover': {
+    background: '#E5E5E5',
+  },
 }));
 
 export const RecordVideoMessageButton = (props) => {
-    return (
-        <SquareButton {...props}
-            aria-label="record video message"
-            Icon={CameraInBubbleIcon}
-        />
-    )
-}
+  return <SquareButton {...props} aria-label="record video message" Icon={CameraInBubbleIcon} />;
+};
 
 export const RecordVoiceMessageButton = (props) => {
-    return (
-        <SquareButton {...props}
-            aria-label="record voice message"
-            Icon={MicroInBubbleIcon}
-        />
-    )
-}
+  return <SquareButton {...props} aria-label="record voice message" Icon={MicroInBubbleIcon} />;
+};
 
 export const UploadFileButton = (props) => {
-    return (
-        <SquareButton {...props}
-            aria-label="upload file"
-            Icon={PaperClipIcon}
-        />
-    )
-}
+  return <SquareButton {...props} aria-label="upload file" Icon={PaperClipIcon} />;
+};
 
 export const SendMessageButton = (props) => {
-    return (
-        <SquareButton {...props}
-            aria-label="send message"
-            Icon={Arrow2Icon}
-        />
-    )
-}
+  return <SquareButton {...props} aria-label="send message" Icon={Arrow2Icon} />;
+};
 
-export const ReplyMessageButton = styled(
-    ({Icon, ...props}) => (
-        <IconButton
-            {...props}
-            disableRipple={true}
-            aria-label="send message"
-        >
-            <Arrow3Icon fontSize="inherit"/>
-        </IconButton>
-    )
-)(({theme}) => ({
-    color: theme.palette.primary.dark,
-    fontSize: "20px",
-    height: "20px",
-    width: "20px",
-    borderRadius: "5px",
-    "&:hover": {
-        background: "#E5E5E5",
-    },
+export const ReplyMessageButton = styled(({ Icon, ...props }) => (
+  <IconButton {...props} disableRipple={true} aria-label="send message">
+    <Arrow3Icon fontSize="inherit" />
+  </IconButton>
+))(({ theme }) => ({
+  color: theme.palette.primary.dark,
+  fontSize: '20px',
+  height: '20px',
+  width: '20px',
+  borderRadius: '5px',
+  '&:hover': {
+    background: '#E5E5E5',
+  },
 }));
 
-export const EmojiButton = styled(
-    ({emoji, ...props}) => (
-        <IconButton {...props} disableRipple={true}>
-            {emoji}
-        </IconButton>
-    )
-)(({theme}) => ({
-    color: "white",
-    fontSize: "20px",
-    height: "20px",
-    width: "20px",
+export const EmojiButton = styled(({ emoji, ...props }) => (
+  <IconButton {...props} disableRipple={true}>
+    {emoji}
+  </IconButton>
+))(({ theme }) => ({
+  color: 'white',
+  fontSize: '20px',
+  height: '20px',
+  width: '20px',
 }));
 
 export const SelectEmojiButton = (props) => {
-    const [anchorEl, setAnchorEl] = useState(null)
-  
-    const handleOpenEmojiPicker = useCallback(
-      e => setAnchorEl(anchorEl ? null : e.currentTarget),
-      [anchorEl],
-    )
-  
-    const handleClose = useCallback(
-      () => setAnchorEl(null),
-      [setAnchorEl],
-    )
-  
-    const onEmojiClick = useCallback(
-      (e, emojiObject) => {
-        props.onEmojiSelected(emojiObject.emoji)
-        handleClose()
-      },
-      [handleClose, props.onEmojiSelected],
-    )
-  
-    const open = Boolean(anchorEl)
-    const id = open ? 'simple-popover' : undefined
-  
-    return (
-        <ClickAwayListener onClickAway={handleClose}>
-            <Box>
-                <SquareButton
-                    aria-describedby={id}
-                    aria-label="select emoji"
-                    Icon={EmojiIcon}
-                    onClick={handleOpenEmojiPicker}
-                />
-                <Popper
-                    id={id}
-                    open={open}
-                    anchorEl={anchorEl}
-                    onClose={handleClose}
-                >
-                    <EmojiPicker.default
-                        onEmojiClick={onEmojiClick}
-                        disableAutoFocus={true}
-                        disableSkinTonePicker={true}
-                        native
-                    />
-                </Popper>
-            </Box>
-        </ClickAwayListener>
-    )
-}
+  const [anchorEl, setAnchorEl] = useState(null);
 
+  const handleOpenEmojiPicker = useCallback((e) => setAnchorEl(anchorEl ? null : e.currentTarget), [anchorEl]);
+
+  const handleClose = useCallback(() => setAnchorEl(null), [setAnchorEl]);
+
+  const onEmojiClick = useCallback(
+    (e, emojiObject) => {
+      props.onEmojiSelected(emojiObject.emoji);
+      handleClose();
+    },
+    [handleClose, props.onEmojiSelected]
+  );
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popover' : undefined;
+
+  return (
+    <ClickAwayListener onClickAway={handleClose}>
+      <Box>
+        <SquareButton
+          aria-describedby={id}
+          aria-label="select emoji"
+          Icon={EmojiIcon}
+          onClick={handleOpenEmojiPicker}
+        />
+        <Popper id={id} open={open} anchorEl={anchorEl} onClose={handleClose}>
+          <EmojiPicker.default
+            onEmojiClick={onEmojiClick}
+            disableAutoFocus={true}
+            disableSkinTonePicker={true}
+            native
+          />
+        </Popper>
+      </Box>
+    </ClickAwayListener>
+  );
+};
diff --git a/client/src/components/inputs.js b/client/src/components/inputs.js
index aec48d3..42ca4be 100644
--- a/client/src/components/inputs.js
+++ b/client/src/components/inputs.js
@@ -1,174 +1,187 @@
-import { Stack, TextField } from "@mui/material"
-import { styled } from "@mui/material/styles"
-import { useState, useCallback, useEffect } from "react";
-import { InfoButton, ToggleVisibilityButton } from "./buttons"
-import { CheckedIcon, RoundSaltireIcon, LockIcon, PenIcon, PersonIcon } from "./svgIcons"
+import { Stack, TextField } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useState, useCallback, useEffect } from 'react';
+import { InfoButton, ToggleVisibilityButton } from './buttons';
+import { CheckedIcon, RoundSaltireIcon, LockIcon, PenIcon, PersonIcon } from './svgIcons';
 
-const iconsHeight = "16px"
-const StyledCheckedIconSuccess = styled(CheckedIcon)(({theme}) => ({height: iconsHeight, color: theme.palette.success.main}))
-const StyledRoundSaltireIconError = styled(RoundSaltireIcon)(({theme}) => ({height: iconsHeight, color: theme.palette.error.main}))
-const StyledPenIconLight = styled(PenIcon)({height: iconsHeight, color: "#03B9E9"})
-const StyledPenIconDark  = styled(PenIcon)(({theme}) => ({height: iconsHeight, color: theme.palette.primary.dark}))
-const StyledPersonIconLight = styled(PersonIcon)({height: iconsHeight, color: "#03B9E9"})
-const StyledLockIcon = styled(LockIcon)({height: iconsHeight, color: "#03B9E9"})
+const iconsHeight = '16px';
+const StyledCheckedIconSuccess = styled(CheckedIcon)(({ theme }) => ({
+  height: iconsHeight,
+  color: theme.palette.success.main,
+}));
+const StyledRoundSaltireIconError = styled(RoundSaltireIcon)(({ theme }) => ({
+  height: iconsHeight,
+  color: theme.palette.error.main,
+}));
+const StyledPenIconLight = styled(PenIcon)({ height: iconsHeight, color: '#03B9E9' });
+const StyledPenIconDark = styled(PenIcon)(({ theme }) => ({ height: iconsHeight, color: theme.palette.primary.dark }));
+const StyledPersonIconLight = styled(PersonIcon)({ height: iconsHeight, color: '#03B9E9' });
+const StyledLockIcon = styled(LockIcon)({ height: iconsHeight, color: '#03B9E9' });
 
-export const UsernameInput = ({infoButtonProps, ...props}) => {
-    const [isSelected, setIsSelected] = useState(false);
-    const [input, setInput] = useState(props.defaultValue);
-    const [startAdornment, setStartAdornment] = useState()
+export const UsernameInput = ({ infoButtonProps, ...props }) => {
+  const [isSelected, setIsSelected] = useState(false);
+  const [input, setInput] = useState(props.defaultValue);
+  const [startAdornment, setStartAdornment] = useState();
 
-    const onChange = useCallback((event) => {
-        setInput(event.target.value)
-        props.onChange?.(event)
-    }, [props.onChange])
+  const onChange = useCallback(
+    (event) => {
+      setInput(event.target.value);
+      props.onChange?.(event);
+    },
+    [props.onChange]
+  );
 
-    useEffect(() => {
-        /* Handle startAdornment */
-        let Icon = StyledPersonIconLight
-        let visibility = "visible"
-        if (props.error) {
-            Icon = StyledRoundSaltireIconError
-        }
-        else if (props.success) {
-            Icon = StyledCheckedIconSuccess
-        }
-        else if (!isSelected && !input) {
-            visibility = "hidden" // keep icon's space so text does not move
-        }
-        setStartAdornment(<Icon sx={{visibility}}/>)
-    }, [props.error, props.success, isSelected, input])
-
-    return (
-        <TextField
-            {...props}
-            label="Choose an identifier"
-            variant="standard"
-            InputLabelProps={{ shrink: !!(isSelected || input) }}
-            onChange={onChange}
-            InputProps={{
-                startAdornment,
-                endAdornment: <InfoButton {...infoButtonProps}/>,
-            }}
-            onFocus={() => setIsSelected(true)}
-            onBlur={() => setIsSelected(false)}
-        />
-    )
-}
-
-export const PasswordInput = ({infoButtonProps, ...props}) => {
-    const [showPassword, setShowPassword] = useState(false);
-    const [isSelected, setIsSelected] = useState(false);
-    const [input, setInput] = useState(props.defaultValue);
-    const [startAdornment, setStartAdornment] = useState()
-
-    const toggleShowPassword = () => {
-        setShowPassword((showPassword) => !showPassword);
+  useEffect(() => {
+    /* Handle startAdornment */
+    let Icon = StyledPersonIconLight;
+    let visibility = 'visible';
+    if (props.error) {
+      Icon = StyledRoundSaltireIconError;
+    } else if (props.success) {
+      Icon = StyledCheckedIconSuccess;
+    } else if (!isSelected && !input) {
+      visibility = 'hidden'; // keep icon's space so text does not move
     }
+    setStartAdornment(<Icon sx={{ visibility }} />);
+  }, [props.error, props.success, isSelected, input]);
 
-    const onChange = useCallback((event) => {
-        setInput(event.target.value)
-        props.onChange?.(event)
-    }, [props.onChange])
+  return (
+    <TextField
+      {...props}
+      label="Choose an identifier"
+      variant="standard"
+      InputLabelProps={{ shrink: !!(isSelected || input) }}
+      onChange={onChange}
+      InputProps={{
+        startAdornment,
+        endAdornment: <InfoButton {...infoButtonProps} />,
+      }}
+      onFocus={() => setIsSelected(true)}
+      onBlur={() => setIsSelected(false)}
+    />
+  );
+};
 
-    useEffect(() => {
-        /* Handle startAdornment */
-        let Icon = StyledLockIcon
-        let visibility = "visible"
-        if (props.error) {
-            Icon = StyledRoundSaltireIconError
-        }
-        else if (props.success) {
-            Icon = StyledCheckedIconSuccess
-        }
-        else if (!isSelected && !input) {
-            visibility = "hidden" // keep icon's space so text does not move
-        }
-        setStartAdornment(<Icon sx={{visibility}}/>)
-    }, [props.error, props.success, isSelected, input])
+export const PasswordInput = ({ infoButtonProps, ...props }) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const [isSelected, setIsSelected] = useState(false);
+  const [input, setInput] = useState(props.defaultValue);
+  const [startAdornment, setStartAdornment] = useState();
 
-    return (
-        <TextField
-            {...props}
-            label="Password"
-            type={showPassword ? "text" : "password"}
-            variant="standard"
-            autoComplete="current-password"
-            InputLabelProps={{ shrink: !!(isSelected || input) }}
-            onChange={onChange}
-            InputProps={{
-                startAdornment,
-                endAdornment: <Stack direction="row" spacing="14px">
-                    <InfoButton {...infoButtonProps}/>
-                    <ToggleVisibilityButton
-                        visible={showPassword}
-                        onClick={toggleShowPassword}
-                    />
-                </Stack>,
-            }}
-            onFocus={() => setIsSelected(true)}
-            onBlur={() => setIsSelected(false)}
-        />
-    )
-}
+  const toggleShowPassword = () => {
+    setShowPassword((showPassword) => !showPassword);
+  };
+
+  const onChange = useCallback(
+    (event) => {
+      setInput(event.target.value);
+      props.onChange?.(event);
+    },
+    [props.onChange]
+  );
+
+  useEffect(() => {
+    /* Handle startAdornment */
+    let Icon = StyledLockIcon;
+    let visibility = 'visible';
+    if (props.error) {
+      Icon = StyledRoundSaltireIconError;
+    } else if (props.success) {
+      Icon = StyledCheckedIconSuccess;
+    } else if (!isSelected && !input) {
+      visibility = 'hidden'; // keep icon's space so text does not move
+    }
+    setStartAdornment(<Icon sx={{ visibility }} />);
+  }, [props.error, props.success, isSelected, input]);
+
+  return (
+    <TextField
+      {...props}
+      label="Password"
+      type={showPassword ? 'text' : 'password'}
+      variant="standard"
+      autoComplete="current-password"
+      InputLabelProps={{ shrink: !!(isSelected || input) }}
+      onChange={onChange}
+      InputProps={{
+        startAdornment,
+        endAdornment: (
+          <Stack direction="row" spacing="14px">
+            <InfoButton {...infoButtonProps} />
+            <ToggleVisibilityButton visible={showPassword} onClick={toggleShowPassword} />
+          </Stack>
+        ),
+      }}
+      onFocus={() => setIsSelected(true)}
+      onBlur={() => setIsSelected(false)}
+    />
+  );
+};
 
 export const NickNameInput = (props) => {
-    const [isSelected, setIsSelected] = useState(false);
-    const [input, setInput] = useState(props.defaultValue);
-    const [startAdornmentVisibility, setStartAdornmentVisibility] = useState()
+  const [isSelected, setIsSelected] = useState(false);
+  const [input, setInput] = useState(props.defaultValue);
+  const [startAdornmentVisibility, setStartAdornmentVisibility] = useState();
 
-    const onChange = useCallback((event) => {
-        setInput(event.target.value)
-        props.onChange?.(event)
-    }, [props.onChange])
+  const onChange = useCallback(
+    (event) => {
+      setInput(event.target.value);
+      props.onChange?.(event);
+    },
+    [props.onChange]
+  );
 
-    useEffect(() => {
-        setStartAdornmentVisibility((isSelected || input) ? "visible" : "hidden")
-    }, [isSelected, input])
+  useEffect(() => {
+    setStartAdornmentVisibility(isSelected || input ? 'visible' : 'hidden');
+  }, [isSelected, input]);
 
-    return (
-        <TextField
-            {...props}
-            label="Nickname, surname..."
-            variant="standard"
-            InputLabelProps={{ shrink: !!(isSelected || input) }}
-            onChange={onChange}
-            InputProps={{
-                startAdornment: <StyledPenIconLight sx={{visibility: startAdornmentVisibility}}/>,
-            }}
-            onFocus={() => setIsSelected(true)}
-            onBlur={() => setIsSelected(false)}
-        />
-    )
-}
+  return (
+    <TextField
+      {...props}
+      label="Nickname, surname..."
+      variant="standard"
+      InputLabelProps={{ shrink: !!(isSelected || input) }}
+      onChange={onChange}
+      InputProps={{
+        startAdornment: <StyledPenIconLight sx={{ visibility: startAdornmentVisibility }} />,
+      }}
+      onFocus={() => setIsSelected(true)}
+      onBlur={() => setIsSelected(false)}
+    />
+  );
+};
 
 export const RegularInput = (props) => {
-    const [isSelected, setIsSelected] = useState(false);
-    const [input, setInput] = useState(props.defaultValue);
-    const [startAdornmentVisibility, setStartAdornmentVisibility] = useState()
-    const [endAdornmentVisibility, setEndAdornmentVisibility] = useState()
+  const [isSelected, setIsSelected] = useState(false);
+  const [input, setInput] = useState(props.defaultValue);
+  const [startAdornmentVisibility, setStartAdornmentVisibility] = useState();
+  const [endAdornmentVisibility, setEndAdornmentVisibility] = useState();
 
-    const onChange = useCallback((event) => {
-        setInput(event.target.value)
-        props.onChange?.(event)
-    }, [props.onChange])
+  const onChange = useCallback(
+    (event) => {
+      setInput(event.target.value);
+      props.onChange?.(event);
+    },
+    [props.onChange]
+  );
 
-    useEffect(() => {
-        setStartAdornmentVisibility((isSelected || input) ? "visible" : "hidden")
-        setEndAdornmentVisibility((isSelected || input) ? "hidden" : "visible")
-    }, [isSelected, input])
+  useEffect(() => {
+    setStartAdornmentVisibility(isSelected || input ? 'visible' : 'hidden');
+    setEndAdornmentVisibility(isSelected || input ? 'hidden' : 'visible');
+  }, [isSelected, input]);
 
-    return (
-        <TextField
-            {...props}
-            variant="standard"
-            InputLabelProps={{ shrink: !!(isSelected || input) }}
-            onChange={onChange}
-            InputProps={{
-                startAdornment: <StyledPenIconLight sx={{visibility: startAdornmentVisibility}}/>,
-                endAdornment: <StyledPenIconDark sx={{visibility: endAdornmentVisibility}}/>,
-            }}
-            onFocus={() => setIsSelected(true)}
-            onBlur={() => setIsSelected(false)}
-        />
-    )
-}
+  return (
+    <TextField
+      {...props}
+      variant="standard"
+      InputLabelProps={{ shrink: !!(isSelected || input) }}
+      onChange={onChange}
+      InputProps={{
+        startAdornment: <StyledPenIconLight sx={{ visibility: startAdornmentVisibility }} />,
+        endAdornment: <StyledPenIconDark sx={{ visibility: endAdornmentVisibility }} />,
+      }}
+      onFocus={() => setIsSelected(true)}
+      onBlur={() => setIsSelected(false)}
+    />
+  );
+};
diff --git a/client/src/components/loading.js b/client/src/components/loading.js
index a928a22..d9836e1 100644
--- a/client/src/components/loading.js
+++ b/client/src/components/loading.js
@@ -1,7 +1,9 @@
 import { CircularProgress, Container } from '@mui/material';
 
 export default function LoadingPage() {
-    return <Container style={{ textAlign: "center" }}>
-        <CircularProgress style={{ margin: 32 }} />
+  return (
+    <Container style={{ textAlign: 'center' }}>
+      <CircularProgress style={{ margin: 32 }} />
     </Container>
-}
\ No newline at end of file
+  );
+}
diff --git a/client/src/components/svgIcons.js b/client/src/components/svgIcons.js
index 621d457..617eb20 100644
--- a/client/src/components/svgIcons.js
+++ b/client/src/components/svgIcons.js
@@ -1,4 +1,4 @@
-import { SvgIcon } from "@mui/material"
+import { SvgIcon } from '@mui/material';
 
 /*
     We use SvgIcon so the icons can be handled more easily by Material ui components.
@@ -11,190 +11,213 @@
 */
 
 export const ArrowIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 -3 20 20">
-                <g>
-                    <path d="M0.302825536,7.53652162 L6.27862638,13.4439361 L6.37822306,13.542393 C6.77660979,13.9362206 7.47378655,13.8377637 7.77257659,13.4439361 C8.07136664,13.0501085 8.07136664,12.3609101 7.67297991,12.0655394 L3.39032264,7.83189235 L18.9274048,7.83189235 C19.5249849,7.83189235 19.9233716,7.43806472 19.9233716,6.84732327 C19.9233716,6.25658182 19.5249849,5.86275419 18.9274048,5.86275419 L3.39032264,5.86275419 L7.67297991,1.62910716 C7.97176996,1.23527953 7.97176996,0.742994993 7.67297991,0.349167363 C7.27459319,-0.0446602682 6.67701311,-0.143117176 6.27862638,0.250710455 L0.302825536,6.15812492 C0.00403549366,6.45349564 -0.0955611871,6.84732327 0.103632174,7.2411509 C0.103632174,7.33960781 0.203228855,7.43806472 0.302825536,7.53652162" id="Fill-1"></path>
-                </g>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 -3 20 20">
+      <g>
+        <path
+          d="M0.302825536,7.53652162 L6.27862638,13.4439361 L6.37822306,13.542393 C6.77660979,13.9362206 7.47378655,13.8377637 7.77257659,13.4439361 C8.07136664,13.0501085 8.07136664,12.3609101 7.67297991,12.0655394 L3.39032264,7.83189235 L18.9274048,7.83189235 C19.5249849,7.83189235 19.9233716,7.43806472 19.9233716,6.84732327 C19.9233716,6.25658182 19.5249849,5.86275419 18.9274048,5.86275419 L3.39032264,5.86275419 L7.67297991,1.62910716 C7.97176996,1.23527953 7.97176996,0.742994993 7.67297991,0.349167363 C7.27459319,-0.0446602682 6.67701311,-0.143117176 6.27862638,0.250710455 L0.302825536,6.15812492 C0.00403549366,6.45349564 -0.0955611871,6.84732327 0.103632174,7.2411509 C0.103632174,7.33960781 0.203228855,7.43806472 0.302825536,7.53652162"
+          id="Fill-1"
+        ></path>
+      </g>
+    </SvgIcon>
+  );
+};
 
 export const Arrow2Icon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 21.776 20.23">
-            <path style={{fill:"none", stroke:"#7e7e7e", strokeMiterlimit:10, strokeWidth:"1.75px"}} d="M.219 18.221a.771.771 0 0 1-.143-.87l3.942-8.124L.076 1.1A.77.77 0 0 1 1.085.068l18.461 8.461a.765.765 0 0 1 0 1.394L1.085 18.385a.771.771 0 0 1-.867-.164Z" transform="translate(.903 .901)"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 21.776 20.23">
+      <path
+        style={{ fill: 'none', stroke: '#7e7e7e', strokeMiterlimit: 10, strokeWidth: '1.75px' }}
+        d="M.219 18.221a.771.771 0 0 1-.143-.87l3.942-8.124L.076 1.1A.77.77 0 0 1 1.085.068l18.461 8.461a.765.765 0 0 1 0 1.394L1.085 18.385a.771.771 0 0 1-.867-.164Z"
+        transform="translate(.903 .901)"
+      />
+    </SvgIcon>
+  );
+};
 
 export const Arrow3Icon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 21.045 14.743">
-            <path d="m15.54 32.48 8.635 6.49a.2.2 0 0 0 .319-.174V34.74c9.823.666 10.982 4.984 10.982 4.984 0-8.982-7.186-10.228-10.982-10.257v-3.651a.187.187 0 0 0-.319-.145l-8.635 6.49a.227.227 0 0 0 0 .319Z" transform="translate(-14.93 -25.11)" style={{fill:"none", stroke:"#005699"}}/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 21.045 14.743">
+      <path
+        d="m15.54 32.48 8.635 6.49a.2.2 0 0 0 .319-.174V34.74c9.823.666 10.982 4.984 10.982 4.984 0-8.982-7.186-10.228-10.982-10.257v-3.651a.187.187 0 0 0-.319-.145l-8.635 6.49a.227.227 0 0 0 0 .319Z"
+        transform="translate(-14.93 -25.11)"
+        style={{ fill: 'none', stroke: '#005699' }}
+      />
+    </SvgIcon>
+  );
+};
 
 export const CameraIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="2 3 20 19">
-            <path d="M3.6 20.3c-.4 0-.8-.2-1.1-.5-.2-.2-.4-.6-.4-.9V7.7c-.1-.3.1-.7.4-1 .2-.3.5-.4.8-.5H7.9l1.2-2.5h5.7L16 6.2h4.3c.4 0 .8.2 1.1.5.2.2.4.6.4.9v11.2c0 .4-.2.8-.5 1.1-.2.2-.6.4-.9.4H3.6zm0-12.6-.1 11v.1h17.1V7.7h-5.3L14 5.2h-4L8.8 7.7H3.6zm8.4 9.7c-1.2 0-2.3-.5-3.2-1.3-.8-.8-1.3-2-1.3-3.2 0-1.2.5-2.3 1.3-3.2.8-.8 2-1.3 3.2-1.3 1.2 0 2.3.5 3.2 1.3.8.8 1.3 2 1.3 3.2s-.5 2.3-1.3 3.2c-.9.8-2 1.3-3.2 1.3zm0-7.5c-.8 0-1.6.3-2.1.9S9 12.1 9 12.9s.3 1.6.9 2.1c1.1 1.1 3.1 1.1 4.3 0 .6-.6.9-1.3.9-2.1s-.3-1.6-.9-2.1c-.6-.6-1.4-.9-2.2-.9z"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="2 3 20 19">
+      <path d="M3.6 20.3c-.4 0-.8-.2-1.1-.5-.2-.2-.4-.6-.4-.9V7.7c-.1-.3.1-.7.4-1 .2-.3.5-.4.8-.5H7.9l1.2-2.5h5.7L16 6.2h4.3c.4 0 .8.2 1.1.5.2.2.4.6.4.9v11.2c0 .4-.2.8-.5 1.1-.2.2-.6.4-.9.4H3.6zm0-12.6-.1 11v.1h17.1V7.7h-5.3L14 5.2h-4L8.8 7.7H3.6zm8.4 9.7c-1.2 0-2.3-.5-3.2-1.3-.8-.8-1.3-2-1.3-3.2 0-1.2.5-2.3 1.3-3.2.8-.8 2-1.3 3.2-1.3 1.2 0 2.3.5 3.2 1.3.8.8 1.3 2 1.3 3.2s-.5 2.3-1.3 3.2c-.9.8-2 1.3-3.2 1.3zm0-7.5c-.8 0-1.6.3-2.1.9S9 12.1 9 12.9s.3 1.6.9 2.1c1.1 1.1 3.1 1.1 4.3 0 .6-.6.9-1.3.9-2.1s-.3-1.6-.9-2.1c-.6-.6-1.4-.9-2.2-.9z" />
+    </SvgIcon>
+  );
+};
 
 export const CameraInBubbleIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 25 25">
-            <path d="M25 25H12.5A12.379 12.379 0 0 1 0 12.5 12.379 12.379 0 0 1 12.5 0 12.379 12.379 0 0 1 25 12.5ZM12.5 1.75a11 11 0 0 0-7.625 3.125 10.865 10.865 0 0 0 0 15.25A10.781 10.781 0 0 0 12.5 23.25h10.75V12.5a11 11 0 0 0-3.125-7.625A11 11 0 0 0 12.5 1.75Z"/>
-            <path d="M15.125 18.375H6.75a1.329 1.329 0 0 1-1.5-1.25v-8a1.465 1.465 0 0 1 1.375-1.25H15a1.286 1.286 0 0 1 1.375 1.25v.75l1.375-.75A1.146 1.146 0 0 1 19.125 9a1.034 1.034 0 0 1 .625 1v6.25a1.248 1.248 0 0 1-.625 1.125 1.479 1.479 0 0 1-1.25-.125L16.5 16.5v.75a1.276 1.276 0 0 1-1.375 1.125Zm-8.25-1.625h8v-1.625a1.08 1.08 0 0 1 .375-.75.8.8 0 0 1 .75 0l2 1.125v-4.75l-1.875 1.125a.8.8 0 0 1-.75 0 .685.685 0 0 1-.5-.75V9.5h-8Zm11.875-.875Z"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 25 25">
+      <path d="M25 25H12.5A12.379 12.379 0 0 1 0 12.5 12.379 12.379 0 0 1 12.5 0 12.379 12.379 0 0 1 25 12.5ZM12.5 1.75a11 11 0 0 0-7.625 3.125 10.865 10.865 0 0 0 0 15.25A10.781 10.781 0 0 0 12.5 23.25h10.75V12.5a11 11 0 0 0-3.125-7.625A11 11 0 0 0 12.5 1.75Z" />
+      <path d="M15.125 18.375H6.75a1.329 1.329 0 0 1-1.5-1.25v-8a1.465 1.465 0 0 1 1.375-1.25H15a1.286 1.286 0 0 1 1.375 1.25v.75l1.375-.75A1.146 1.146 0 0 1 19.125 9a1.034 1.034 0 0 1 .625 1v6.25a1.248 1.248 0 0 1-.625 1.125 1.479 1.479 0 0 1-1.25-.125L16.5 16.5v.75a1.276 1.276 0 0 1-1.375 1.125Zm-8.25-1.625h8v-1.625a1.08 1.08 0 0 1 .375-.75.8.8 0 0 1 .75 0l2 1.125v-4.75l-1.875 1.125a.8.8 0 0 1-.75 0 .685.685 0 0 1-.5-.75V9.5h-8Zm11.875-.875Z" />
+    </SvgIcon>
+  );
+};
 
 export const CancelIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="2 2 20 20">
-            <path d="M12 2C6.4771525 2 2 6.4771525 2 12s4.4771525 10 10 10 10-4.4771525 10-10S17.5228475 2 12 2Zm0 1.33333168c2.0746076-.00128199 4.079864.74684198 5.6466667 2.10666832L5.39333333 17.5933333c-2.17561675-2.5749862-2.66070945-6.17789412-1.2436087-9.23660098C5.56682538 5.29802546 8.62897124 3.33855529 12 3.33333168Zm0 17.33333502c-2.08385186-.000638-4.09692832-.7561338-5.66666667-2.1266667L18.5866667 6.38c2.1903962 2.57136307 2.6872505 6.1810635 1.2730136 9.2485834C18.4454435 18.6961032 15.3778286 20.6624553 12 20.6666667Z"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="2 2 20 20">
+      <path d="M12 2C6.4771525 2 2 6.4771525 2 12s4.4771525 10 10 10 10-4.4771525 10-10S17.5228475 2 12 2Zm0 1.33333168c2.0746076-.00128199 4.079864.74684198 5.6466667 2.10666832L5.39333333 17.5933333c-2.17561675-2.5749862-2.66070945-6.17789412-1.2436087-9.23660098C5.56682538 5.29802546 8.62897124 3.33855529 12 3.33333168Zm0 17.33333502c-2.08385186-.000638-4.09692832-.7561338-5.66666667-2.1266667L18.5866667 6.38c2.1903962 2.57136307 2.6872505 6.1810635 1.2730136 9.2485834C18.4454435 18.6961032 15.3778286 20.6624553 12 20.6666667Z" />
+    </SvgIcon>
+  );
+};
 
 export const CheckedIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 16 16">
-            <path d="M11.138 5.152 6.802 9.486l-1.936-1.94a.64205296.64205296 0 0 0-.908.908l2.39 2.394a.642.642 0 0 0 .908 0l4.79-4.785a.6431145.6431145 0 0 0-.908-.911Z"/>
-            <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 1.284A6.716 6.716 0 1 0 14.716 8 6.723 6.723 0 0 0 8 1.284Z"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 16">
+      <path d="M11.138 5.152 6.802 9.486l-1.936-1.94a.64205296.64205296 0 0 0-.908.908l2.39 2.394a.642.642 0 0 0 .908 0l4.79-4.785a.6431145.6431145 0 0 0-.908-.911Z" />
+      <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 1.284A6.716 6.716 0 1 0 14.716 8 6.723 6.723 0 0 0 8 1.284Z" />
+    </SvgIcon>
+  );
+};
 
 export const CrossedEyeIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 15.931 12.145">
-            <path d="M7.933 10.41a7.081 7.081 0 0 1-3.7-1.292 12.409 12.409 0 0 1-2.874-2.717.237.237 0 0 1 0-.366 14.122 14.122 0 0 1 2.429-2.372L3 2.873a14.6 14.6 0 0 0-2.836 2.93.629.629 0 0 0 .019.87 13.62 13.62 0 0 0 4.222 3.834 7.4 7.4 0 0 0 3.547 1 7.067 7.067 0 0 0 2.948-.711l-.848-.848a5.577 5.577 0 0 1-2.119.462ZM15.74 5.784a13.154 13.154 0 0 0-4.26-3.856A7.284 7.284 0 0 0 8.145.941a6.436 6.436 0 0 0-2.892.6l.848.848a5.691 5.691 0 0 1 1.793-.348 5.788 5.788 0 0 1 2.583.617 11.437 11.437 0 0 1 3.586 2.783c.193.212.347.424.54.636a.209.209 0 0 1 .019.289 13.993 13.993 0 0 1-2.256 2.275l.79.79a14.6 14.6 0 0 0 2.6-2.737.658.658 0 0 0-.016-.91Z"/>
-            <path d="m9.687 5.974 1 1a3.349 3.349 0 0 0 .1-.752 2.867 2.867 0 0 0-2.835-2.848 2.576 2.576 0 0 0-.771.116l1.022 1.021a1.738 1.738 0 0 1 1.484 1.463ZM5.311 5.205a2.6 2.6 0 0 0-.193 1.022A2.867 2.867 0 0 0 7.971 9.06a3.005 3.005 0 0 0 1.022-.193l-.906-.906h-.135a1.749 1.749 0 0 1-1.734-1.773v-.077ZM2.882.173A.514.514 0 0 0 2.493 0a.659.659 0 0 0-.556.386.49.49 0 0 0 .135.578l11.007 11.007a.514.514 0 0 0 .386.173.659.659 0 0 0 .559-.386.49.49 0 0 0-.131-.577Z"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 15.931 12.145">
+      <path d="M7.933 10.41a7.081 7.081 0 0 1-3.7-1.292 12.409 12.409 0 0 1-2.874-2.717.237.237 0 0 1 0-.366 14.122 14.122 0 0 1 2.429-2.372L3 2.873a14.6 14.6 0 0 0-2.836 2.93.629.629 0 0 0 .019.87 13.62 13.62 0 0 0 4.222 3.834 7.4 7.4 0 0 0 3.547 1 7.067 7.067 0 0 0 2.948-.711l-.848-.848a5.577 5.577 0 0 1-2.119.462ZM15.74 5.784a13.154 13.154 0 0 0-4.26-3.856A7.284 7.284 0 0 0 8.145.941a6.436 6.436 0 0 0-2.892.6l.848.848a5.691 5.691 0 0 1 1.793-.348 5.788 5.788 0 0 1 2.583.617 11.437 11.437 0 0 1 3.586 2.783c.193.212.347.424.54.636a.209.209 0 0 1 .019.289 13.993 13.993 0 0 1-2.256 2.275l.79.79a14.6 14.6 0 0 0 2.6-2.737.658.658 0 0 0-.016-.91Z" />
+      <path d="m9.687 5.974 1 1a3.349 3.349 0 0 0 .1-.752 2.867 2.867 0 0 0-2.835-2.848 2.576 2.576 0 0 0-.771.116l1.022 1.021a1.738 1.738 0 0 1 1.484 1.463ZM5.311 5.205a2.6 2.6 0 0 0-.193 1.022A2.867 2.867 0 0 0 7.971 9.06a3.005 3.005 0 0 0 1.022-.193l-.906-.906h-.135a1.749 1.749 0 0 1-1.734-1.773v-.077ZM2.882.173A.514.514 0 0 0 2.493 0a.659.659 0 0 0-.556.386.49.49 0 0 0 .135.578l11.007 11.007a.514.514 0 0 0 .386.173.659.659 0 0 0 .559-.386.49.49 0 0 0-.131-.577Z" />
+    </SvgIcon>
+  );
+};
 
 export const CrossIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 10 10">
-            <path d="M32 979.362a.652.652 0 0 0-.652.652v3.7h-3.7a.652.652 0 0 0 0 1.3h3.7v3.7a.652.652 0 0 0 1.3 0v-3.7h3.7a.652.652 0 0 0 0-1.3h-3.7v-3.7a.652.652 0 0 0-.648-.652Z" transform="translate(-27 -979.362)"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 10 10">
+      <path
+        d="M32 979.362a.652.652 0 0 0-.652.652v3.7h-3.7a.652.652 0 0 0 0 1.3h3.7v3.7a.652.652 0 0 0 1.3 0v-3.7h3.7a.652.652 0 0 0 0-1.3h-3.7v-3.7a.652.652 0 0 0-.648-.652Z"
+        transform="translate(-27 -979.362)"
+      />
+    </SvgIcon>
+  );
+};
 
 export const SaltireIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="5 5 14 14">
-            <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="5 5 14 14">
+      <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+    </SvgIcon>
+  );
+};
 
 export const EmojiIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 25 25">
-            <path d="M12.5 0A12.5 12.5 0 1 0 25 12.5 12.537 12.537 0 0 0 12.5 0Zm0 23.25A10.75 10.75 0 1 1 23.25 12.5 10.749 10.749 0 0 1 12.5 23.25Z"/>
-            <path d="M18.25 14a.688.688 0 0 0-.625.25 9.558 9.558 0 0 1-5.125 1.625 7.867 7.867 0 0 1-5.125-1.625C7.25 14 6.875 14 6.75 14a1.34 1.34 0 0 0-.75.25c-.125.125-.125.5-.125.75a.853.853 0 0 0 .375.625A10.559 10.559 0 0 0 12.5 17.5a11.419 11.419 0 0 0 6.25-1.875 1.726 1.726 0 0 0 .375-.5V15a.937.937 0 0 0-.125-.625ZM7.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.049 1.049 0 0 0 7.5 8.5a1.049 1.049 0 0 0-1.125 1.125A1.049 1.049 0 0 0 7.5 10.75ZM17.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.116 1.116 0 0 0 17.5 8.5a1.208 1.208 0 0 0-1.125 1.125.994.994 0 0 0 1.125 1.125Z"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 25 25">
+      <path d="M12.5 0A12.5 12.5 0 1 0 25 12.5 12.537 12.537 0 0 0 12.5 0Zm0 23.25A10.75 10.75 0 1 1 23.25 12.5 10.749 10.749 0 0 1 12.5 23.25Z" />
+      <path d="M18.25 14a.688.688 0 0 0-.625.25 9.558 9.558 0 0 1-5.125 1.625 7.867 7.867 0 0 1-5.125-1.625C7.25 14 6.875 14 6.75 14a1.34 1.34 0 0 0-.75.25c-.125.125-.125.5-.125.75a.853.853 0 0 0 .375.625A10.559 10.559 0 0 0 12.5 17.5a11.419 11.419 0 0 0 6.25-1.875 1.726 1.726 0 0 0 .375-.5V15a.937.937 0 0 0-.125-.625ZM7.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.049 1.049 0 0 0 7.5 8.5a1.049 1.049 0 0 0-1.125 1.125A1.049 1.049 0 0 0 7.5 10.75ZM17.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.116 1.116 0 0 0 17.5 8.5a1.208 1.208 0 0 0-1.125 1.125.994.994 0 0 0 1.125 1.125Z" />
+    </SvgIcon>
+  );
+};
 
 export const EyeIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 15.931 10.568">
-            <path d="M7.933 9.469a7.081 7.081 0 0 1-3.7-1.292A12.409 12.409 0 0 1 1.359 5.46a.237.237 0 0 1 0-.366c.733-.892 3.322-3.276 4.685-3.702l-.791-.79a18.682 18.682 0 0 0-5.089 4.26.629.629 0 0 0 .019.867 13.62 13.62 0 0 0 4.222 3.837 7.4 7.4 0 0 0 3.547 1 7.067 7.067 0 0 0 2.948-.711l-.847-.853a5.577 5.577 0 0 1-2.12.467Z"/>
-            <path d="M15.74 4.843A13.154 13.154 0 0 0 11.48.987 7.284 7.284 0 0 0 8.145 0a6.436 6.436 0 0 0-2.892.6l.848.848A5.691 5.691 0 0 1 7.894 1.1a5.788 5.788 0 0 1 2.583.617A11.437 11.437 0 0 1 14.063 4.5c.193.212.347.424.54.636a.209.209 0 0 1 .019.289 17.151 17.151 0 0 1-4.627 3.6l.79.79a21.4 21.4 0 0 0 4.973-4.067.658.658 0 0 0-.018-.905Z"/>
-            <g transform="translate(4.952 1.963)" style={{"stroke": "#005699", "fill": "none"}}>
-                <circle cx="3" cy="3" r="3" style={{"stroke": "none"}}/>
-                <circle cx="3" cy="3" r="2.5"/>
-            </g>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 15.931 10.568">
+      <path d="M7.933 9.469a7.081 7.081 0 0 1-3.7-1.292A12.409 12.409 0 0 1 1.359 5.46a.237.237 0 0 1 0-.366c.733-.892 3.322-3.276 4.685-3.702l-.791-.79a18.682 18.682 0 0 0-5.089 4.26.629.629 0 0 0 .019.867 13.62 13.62 0 0 0 4.222 3.837 7.4 7.4 0 0 0 3.547 1 7.067 7.067 0 0 0 2.948-.711l-.847-.853a5.577 5.577 0 0 1-2.12.467Z" />
+      <path d="M15.74 4.843A13.154 13.154 0 0 0 11.48.987 7.284 7.284 0 0 0 8.145 0a6.436 6.436 0 0 0-2.892.6l.848.848A5.691 5.691 0 0 1 7.894 1.1a5.788 5.788 0 0 1 2.583.617A11.437 11.437 0 0 1 14.063 4.5c.193.212.347.424.54.636a.209.209 0 0 1 .019.289 17.151 17.151 0 0 1-4.627 3.6l.79.79a21.4 21.4 0 0 0 4.973-4.067.658.658 0 0 0-.018-.905Z" />
+      <g transform="translate(4.952 1.963)" style={{ stroke: '#005699', fill: 'none' }}>
+        <circle cx="3" cy="3" r="3" style={{ stroke: 'none' }} />
+        <circle cx="3" cy="3" r="2.5" />
+      </g>
+    </SvgIcon>
+  );
+};
 
 export const FolderIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 17.504 14.812">
-            <path d="M15.484 14.812H2.02a.675.675 0 0 1-.666-.578L.007 4.809a.674.674 0 0 1 .665-.769h.673V.673A.674.674 0 0 1 2.02 0h4.039a.676.676 0 0 1 .373.113l1.85 1.233h7.2a.674.674 0 0 1 .673.673v2.02h.673a.675.675 0 0 1 .667.769l-1.346 9.426a.677.677 0 0 1-.665.578ZM1.449 5.387 2.6 13.466h12.3l1.154-8.079Zm1.244-4.04v2.692h12.118V2.693H8.078A.677.677 0 0 1 7.7 2.58L5.855 1.346Z"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 17.504 14.812">
+      <path d="M15.484 14.812H2.02a.675.675 0 0 1-.666-.578L.007 4.809a.674.674 0 0 1 .665-.769h.673V.673A.674.674 0 0 1 2.02 0h4.039a.676.676 0 0 1 .373.113l1.85 1.233h7.2a.674.674 0 0 1 .673.673v2.02h.673a.675.675 0 0 1 .667.769l-1.346 9.426a.677.677 0 0 1-.665.578ZM1.449 5.387 2.6 13.466h12.3l1.154-8.079Zm1.244-4.04v2.692h12.118V2.693H8.078A.677.677 0 0 1 7.7 2.58L5.855 1.346Z" />
+    </SvgIcon>
+  );
+};
 
 export const InfoIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="2 2 20 20">
-            <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="2 2 20 20">
+      <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
+    </SvgIcon>
+  );
+};
 
 export const LockIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 12.727 15.636">
-            <path d="M10.727 15.636H2a2 2 0 0 1-2-2V7.454a2 2 0 0 1 2-2h8.727a2 2 0 0 1 2 2v6.182a2 2 0 0 1-2 2ZM2 6.545a.91.91 0 0 0-.909.909v6.182a.91.91 0 0 0 .909.909h8.727a.908.908 0 0 0 .909-.909V7.454a.908.908 0 0 0-.909-.909Z"/>
-            <path d="M10.363 6.546h-8A.546.546 0 0 1 1.818 6V4.181a4.048 4.048 0 0 1 1.35-2.974A4.73 4.73 0 0 1 6.364 0a4.729 4.729 0 0 1 3.195 1.207 4.048 4.048 0 0 1 1.35 2.974V6a.546.546 0 0 1-.546.546Zm-4-5.455a3.645 3.645 0 0 0-2.462.923 2.918 2.918 0 0 0-.993 2.167v1.274h6.91V4.181a2.918 2.918 0 0 0-.993-2.167 3.644 3.644 0 0 0-2.461-.923ZM6.363 11.272a1.636 1.636 0 1 1 1.636-1.636 1.638 1.638 0 0 1-1.636 1.636Zm0-2.182a.545.545 0 1 0 .545.545.546.546 0 0 0-.545-.544Z"/>
-            <path d="M5.818 10.727v1.819a.5455.5455 0 1 0 1.091 0v-1.819a.5455.5455 0 0 0-1.091 0Z"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 12.727 15.636">
+      <path d="M10.727 15.636H2a2 2 0 0 1-2-2V7.454a2 2 0 0 1 2-2h8.727a2 2 0 0 1 2 2v6.182a2 2 0 0 1-2 2ZM2 6.545a.91.91 0 0 0-.909.909v6.182a.91.91 0 0 0 .909.909h8.727a.908.908 0 0 0 .909-.909V7.454a.908.908 0 0 0-.909-.909Z" />
+      <path d="M10.363 6.546h-8A.546.546 0 0 1 1.818 6V4.181a4.048 4.048 0 0 1 1.35-2.974A4.73 4.73 0 0 1 6.364 0a4.729 4.729 0 0 1 3.195 1.207 4.048 4.048 0 0 1 1.35 2.974V6a.546.546 0 0 1-.546.546Zm-4-5.455a3.645 3.645 0 0 0-2.462.923 2.918 2.918 0 0 0-.993 2.167v1.274h6.91V4.181a2.918 2.918 0 0 0-.993-2.167 3.644 3.644 0 0 0-2.461-.923ZM6.363 11.272a1.636 1.636 0 1 1 1.636-1.636 1.638 1.638 0 0 1-1.636 1.636Zm0-2.182a.545.545 0 1 0 .545.545.546.546 0 0 0-.545-.544Z" />
+      <path d="M5.818 10.727v1.819a.5455.5455 0 1 0 1.091 0v-1.819a.5455.5455 0 0 0-1.091 0Z" />
+    </SvgIcon>
+  );
+};
 
 export const MicroInBubbleIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 25 25">
-            <g transform="translate(-2 -2)">
-                <g transform="translate(2 2)">
-                    <path d="M23.375,5.625A12.372,12.372,0,0,0,14.5,2,12.379,12.379,0,0,0,2,14.5,12.379,12.379,0,0,0,14.5,27H27V14.5A12.372,12.372,0,0,0,23.375,5.625ZM25.25,25.25H14.5a11,11,0,0,1-7.625-3.125A10.781,10.781,0,0,1,3.75,14.5,11,11,0,0,1,6.875,6.875a10.865,10.865,0,0,1,15.25,0A10.781,10.781,0,0,1,25.25,14.5Z" transform="translate(-2 -2)"/>
-                    <path d="M16.6,10.35a.649.649,0,0,0-.25.5V12.6a3.125,3.125,0,0,1-6.25,0V10.85a.948.948,0,0,0-.25-.5.649.649,0,0,0-.5-.25h0a.649.649,0,0,0-.5.25.649.649,0,0,0-.25.5V12.6a4.563,4.563,0,0,0,3.875,4.5v.625H11.35a.625.625,0,0,0,0,1.25h3.5a.625.625,0,0,0,0-1.25H13.725V17.1A4.68,4.68,0,0,0,17.6,12.6V10.85a.948.948,0,0,0-.25-.5A.564.564,0,0,0,16.6,10.35Zm-7.25.125Z" transform="translate(-0.35 0.025)"/>
-                </g>
-                <g transform="translate(12.625 8.5)">
-                    <path d="M12.75,15.575a2.241,2.241,0,0,1-2.25-2.25V9.45a2.25,2.25,0,0,1,4.5,0v4A2.138,2.138,0,0,1,12.75,15.575Zm0-6.875a.72.72,0,0,0-.75.75v4a.75.75,0,1,0,1.5,0v-4A.807.807,0,0,0,12.75,8.7Z" transform="translate(-10.5 -7.2)"/>
-                </g>
-            </g>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 25 25">
+      <g transform="translate(-2 -2)">
+        <g transform="translate(2 2)">
+          <path
+            d="M23.375,5.625A12.372,12.372,0,0,0,14.5,2,12.379,12.379,0,0,0,2,14.5,12.379,12.379,0,0,0,14.5,27H27V14.5A12.372,12.372,0,0,0,23.375,5.625ZM25.25,25.25H14.5a11,11,0,0,1-7.625-3.125A10.781,10.781,0,0,1,3.75,14.5,11,11,0,0,1,6.875,6.875a10.865,10.865,0,0,1,15.25,0A10.781,10.781,0,0,1,25.25,14.5Z"
+            transform="translate(-2 -2)"
+          />
+          <path
+            d="M16.6,10.35a.649.649,0,0,0-.25.5V12.6a3.125,3.125,0,0,1-6.25,0V10.85a.948.948,0,0,0-.25-.5.649.649,0,0,0-.5-.25h0a.649.649,0,0,0-.5.25.649.649,0,0,0-.25.5V12.6a4.563,4.563,0,0,0,3.875,4.5v.625H11.35a.625.625,0,0,0,0,1.25h3.5a.625.625,0,0,0,0-1.25H13.725V17.1A4.68,4.68,0,0,0,17.6,12.6V10.85a.948.948,0,0,0-.25-.5A.564.564,0,0,0,16.6,10.35Zm-7.25.125Z"
+            transform="translate(-0.35 0.025)"
+          />
+        </g>
+        <g transform="translate(12.625 8.5)">
+          <path
+            d="M12.75,15.575a2.241,2.241,0,0,1-2.25-2.25V9.45a2.25,2.25,0,0,1,4.5,0v4A2.138,2.138,0,0,1,12.75,15.575Zm0-6.875a.72.72,0,0,0-.75.75v4a.75.75,0,1,0,1.5,0v-4A.807.807,0,0,0,12.75,8.7Z"
+            transform="translate(-10.5 -7.2)"
+          />
+        </g>
+      </g>
+    </SvgIcon>
+  );
+};
 
 export const OppositeArrowsIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 16.123 17" style={{fill:"none", stroke: "#005699", fillRule:"evenodd"}}>
-            <path d="M15.623 11.025a.358.358 0 0 0-.358-.358h-8.1v-1.4a.358.358 0 0 0-.537-.31l-2.972 1.717-2.977 1.72a.358.358 0 0 0 0 .62l2.977 1.718 2.975 1.719a.358.358 0 0 0 .537-.31v-1.4h8.1a.358.358 0 0 0 .358-.358v-3.36ZM.5 2.615a.358.358 0 0 1 .358-.358h8.1v-1.4a.358.358 0 0 1 .537-.31l2.976 1.718 2.977 1.72a.358.358 0 0 1 0 .62l-2.977 1.718-2.978 1.719a.358.358 0 0 1-.537-.31v-1.4h-8.1a.358.358 0 0 1-.358-.358v-3.36Z"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 16.123 17" style={{ fill: 'none', stroke: '#005699', fillRule: 'evenodd' }}>
+      <path d="M15.623 11.025a.358.358 0 0 0-.358-.358h-8.1v-1.4a.358.358 0 0 0-.537-.31l-2.972 1.717-2.977 1.72a.358.358 0 0 0 0 .62l2.977 1.718 2.975 1.719a.358.358 0 0 0 .537-.31v-1.4h8.1a.358.358 0 0 0 .358-.358v-3.36ZM.5 2.615a.358.358 0 0 1 .358-.358h8.1v-1.4a.358.358 0 0 1 .537-.31l2.976 1.718 2.977 1.72a.358.358 0 0 1 0 .62l-2.977 1.718-2.978 1.719a.358.358 0 0 1-.537-.31v-1.4h-8.1a.358.358 0 0 1-.358-.358v-3.36Z" />
+    </SvgIcon>
+  );
+};
 
 export const PaperClipIcon = (props) => {
-    return(
-        <SvgIcon {...props} viewBox="0 0 12.208 25.75">
-            <path
-                style={{ fill:"#7e7e7e", stroke:"#7e7e7e", strokeMiterlimit:10, strokeWidth:".75px" }}
-                d="M5.729 25A5.736 5.736 0 0 1 0 19.271V4.167a4.167 4.167 0 0 1 8.333 0v13.541a2.6 2.6 0 0 1-5.208 0V5.7a.521.521 0 1 1 1.042 0v12.008a1.563 1.563 0 0 0 3.125 0V4.167a3.125 3.125 0 0 0-6.25 0v15.1a4.687 4.687 0 0 0 9.375 0V5.053a.521.521 0 0 1 1.042 0v14.218A5.736 5.736 0 0 1 5.729 25Z"
-            />
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 12.208 25.75">
+      <path
+        style={{ fill: '#7e7e7e', stroke: '#7e7e7e', strokeMiterlimit: 10, strokeWidth: '.75px' }}
+        d="M5.729 25A5.736 5.736 0 0 1 0 19.271V4.167a4.167 4.167 0 0 1 8.333 0v13.541a2.6 2.6 0 0 1-5.208 0V5.7a.521.521 0 1 1 1.042 0v12.008a1.563 1.563 0 0 0 3.125 0V4.167a3.125 3.125 0 0 0-6.25 0v15.1a4.687 4.687 0 0 0 9.375 0V5.053a.521.521 0 0 1 1.042 0v14.218A5.736 5.736 0 0 1 5.729 25Z"
+      />
+    </SvgIcon>
+  );
+};
 
 export const PenIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 14.863 14.863">
-            <path d="m0 14.863.025-5.4L9.49 0l5.373 5.388-3.941 3.941-.711-.715.918-.913-3.967-3.966-6.123 6.129v3.966H5l2.959-2.958.71.715L5.4 14.838ZM9.49 1.426l-1.6 1.6 3.946 3.946 1.6-1.6L9.49 1.427Z"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 14.863 14.863">
+      <path d="m0 14.863.025-5.4L9.49 0l5.373 5.388-3.941 3.941-.711-.715.918-.913-3.967-3.966-6.123 6.129v3.966H5l2.959-2.958.71.715L5.4 14.838ZM9.49 1.426l-1.6 1.6 3.946 3.946 1.6-1.6L9.49 1.427Z" />
+    </SvgIcon>
+  );
+};
 
 export const PersonIcon = (props) => {
-    return (
+  return (
     <SvgIcon {...props} viewBox="0 0 24 24">
-        <g stroke="#03B9E9" strokeWidth="1.75" fill="none" fillRule="evenodd" strokeLinejoin="round">
-            <path d="M17 6.5c0 2.48522308-2.0147769 4.5-4.5 4.5C10.01477692 11 8 8.98522308 8 6.5 8 4.0147769 10.01477692 2 12.5 2 14.9852231 2 17 4.0147769 17 6.5ZM3 22c0-5.5228267 4.02947764-10 9.00005436-10C16.9705224 12 21 16.4771733 21 22"/>
-        </g>
+      <g stroke="#03B9E9" strokeWidth="1.75" fill="none" fillRule="evenodd" strokeLinejoin="round">
+        <path d="M17 6.5c0 2.48522308-2.0147769 4.5-4.5 4.5C10.01477692 11 8 8.98522308 8 6.5 8 4.0147769 10.01477692 2 12.5 2 14.9852231 2 17 4.0147769 17 6.5ZM3 22c0-5.5228267 4.02947764-10 9.00005436-10C16.9705224 12 21 16.4771733 21 22" />
+      </g>
     </SvgIcon>
-    )
-}
+  );
+};
 
 export const RoundCrossIcon = (props) => {
   return (
@@ -217,17 +240,17 @@
         <defs>
           <style>.a{"fill:#005699;"}</style>
         </defs> */}
-        <g transform="translate(-3.7 -4.4)">
-          <g transform="translate(3.7 4.4)">
-            <g transform="translate(0 0)">
-              <path
-                class="a"
-                d="M5.134,14.954a.869.869,0,0,1-.482-.1A1.252,1.252,0,0,1,3.881,13.7V11.773H3.3a2.614,2.614,0,0,1-2.6-2.7V3.1A2.675,2.675,0,0,1,3.3.4H14a2.635,2.635,0,0,1,2.7,2.7v5.88a2.694,2.694,0,0,1-2.7,2.7H9.086L6,14.569A1.222,1.222,0,0,1,5.134,14.954ZM3.3,1.653A1.547,1.547,0,0,0,1.76,3.292v5.88A1.585,1.585,0,0,0,3.3,10.713H5.037V13.8a.094.094,0,0,0,.1.1h.193L8.7,10.617h5.4A1.585,1.585,0,0,0,15.64,9.075V3.1A1.585,1.585,0,0,0,14.1,1.557H3.3Z"
-                transform="translate(-0.7 -0.4)"
-              />
-            </g>
+      <g transform="translate(-3.7 -4.4)">
+        <g transform="translate(3.7 4.4)">
+          <g transform="translate(0 0)">
+            <path
+              className="a"
+              d="M5.134,14.954a.869.869,0,0,1-.482-.1A1.252,1.252,0,0,1,3.881,13.7V11.773H3.3a2.614,2.614,0,0,1-2.6-2.7V3.1A2.675,2.675,0,0,1,3.3.4H14a2.635,2.635,0,0,1,2.7,2.7v5.88a2.694,2.694,0,0,1-2.7,2.7H9.086L6,14.569A1.222,1.222,0,0,1,5.134,14.954ZM3.3,1.653A1.547,1.547,0,0,0,1.76,3.292v5.88A1.585,1.585,0,0,0,3.3,10.713H5.037V13.8a.094.094,0,0,0,.1.1h.193L8.7,10.617h5.4A1.585,1.585,0,0,0,15.64,9.075V3.1A1.585,1.585,0,0,0,14.1,1.557H3.3Z"
+              transform="translate(-0.7 -0.4)"
+            />
           </g>
         </g>
+      </g>
       {/* </svg> */}
     </SvgIcon>
   );
@@ -245,17 +268,17 @@
         <defs>
           <style>.a{"fill:#005699;"}</style>
         </defs> */}
-        <g transform="translate(-2.404 -1.956)">
-          <g transform="translate(2.404 1.956)">
-            <g transform="translate(0)">
-              <path
-                class="a"
-                d="M10.417,14.956a6.077,6.077,0,0,1-1.676-.239C4.669,13.6.359,9.049-.44,4.9A5.052,5.052,0,0,1,1.237-.37h0a2.456,2.456,0,0,1,2.075-.639A1.767,1.767,0,0,1,4.51.109a7.417,7.417,0,0,0,.4.8c.718,1.357,1.2,2.395.4,3.273h-.08l-.4.319c-1.118.718-1.118.8-.958,1.038a9.647,9.647,0,0,0,4.39,4.869c.239.16.319.16,1.038-.8.16-.16.239-.319.4-.479l.08-.08c.958-.8,1.916-.16,3.432.718l.559.319a1.849,1.849,0,0,1,.958,1.277,2.7,2.7,0,0,1-.718,2A4.721,4.721,0,0,1,10.417,14.956ZM1.875.508A3.893,3.893,0,0,0,.6,4.659c.718,3.752,4.79,7.983,8.382,9.02a3.72,3.72,0,0,0,4.151-1.038,1.254,1.254,0,0,0,.479-1.118.761.761,0,0,0-.479-.559l-.479-.319c-1.277-.8-1.756-1.038-2.075-.8a1.741,1.741,0,0,1-.319.4c-.639.8-1.357,1.756-2.475,1.118A10.6,10.6,0,0,1,2.913,6.016C2.195,4.9,3.232,4.18,4.19,3.541L4.51,3.3c.239-.319,0-.8-.639-1.916a7.417,7.417,0,0,1-.4-.8A.72.72,0,0,0,2.993.109c-.239-.08-.639.08-1.118.4Z"
-                transform="translate(0.596 1.044)"
-              />
-            </g>
+      <g transform="translate(-2.404 -1.956)">
+        <g transform="translate(2.404 1.956)">
+          <g transform="translate(0)">
+            <path
+              className="a"
+              d="M10.417,14.956a6.077,6.077,0,0,1-1.676-.239C4.669,13.6.359,9.049-.44,4.9A5.052,5.052,0,0,1,1.237-.37h0a2.456,2.456,0,0,1,2.075-.639A1.767,1.767,0,0,1,4.51.109a7.417,7.417,0,0,0,.4.8c.718,1.357,1.2,2.395.4,3.273h-.08l-.4.319c-1.118.718-1.118.8-.958,1.038a9.647,9.647,0,0,0,4.39,4.869c.239.16.319.16,1.038-.8.16-.16.239-.319.4-.479l.08-.08c.958-.8,1.916-.16,3.432.718l.559.319a1.849,1.849,0,0,1,.958,1.277,2.7,2.7,0,0,1-.718,2A4.721,4.721,0,0,1,10.417,14.956ZM1.875.508A3.893,3.893,0,0,0,.6,4.659c.718,3.752,4.79,7.983,8.382,9.02a3.72,3.72,0,0,0,4.151-1.038,1.254,1.254,0,0,0,.479-1.118.761.761,0,0,0-.479-.559l-.479-.319c-1.277-.8-1.756-1.038-2.075-.8a1.741,1.741,0,0,1-.319.4c-.639.8-1.357,1.756-2.475,1.118A10.6,10.6,0,0,1,2.913,6.016C2.195,4.9,3.232,4.18,4.19,3.541L4.51,3.3c.239-.319,0-.8-.639-1.916a7.417,7.417,0,0,1-.4-.8A.72.72,0,0,0,2.993.109c-.239-.08-.639.08-1.118.4Z"
+              transform="translate(0.596 1.044)"
+            />
           </g>
         </g>
+      </g>
       {/* </svg> */}
     </SvgIcon>
   );
@@ -273,15 +296,15 @@
         <defs>
           <style>.a{"fill:#005699;"}</style>
         </defs> */}
-        <g transform="translate(-4.4 -6)">
-          <g transform="translate(4.4 6)">
-            <path
-              class="a"
-              d="M12.485,13H2.759C1.923,13,1.4,12.5,1.4,11.9V2.1A1.166,1.166,0,0,1,2.655,1H12.38a1.073,1.073,0,0,1,1.15,1.1V3.6l2.2-1.3a1.173,1.173,0,0,1,1.15,0,.993.993,0,0,1,.523.9v7.7a.842.842,0,0,1-.523.9.832.832,0,0,1-1.046-.1l-2.2-1.3v1.5A1.073,1.073,0,0,1,12.485,13ZM2.55,11.9Zm0,0H12.59V9.4c-.1-.2-.1-.3.209-.4a.485.485,0,0,1,.523,0l2.824,1.7V3.4L13.322,5A.485.485,0,0,1,12.8,5a.537.537,0,0,1-.314-.4V2.1H2.759c-.209,0-.209.1-.209.1Z"
-              transform="translate(-1.4 -1)"
-            />
-          </g>
+      <g transform="translate(-4.4 -6)">
+        <g transform="translate(4.4 6)">
+          <path
+            className="a"
+            d="M12.485,13H2.759C1.923,13,1.4,12.5,1.4,11.9V2.1A1.166,1.166,0,0,1,2.655,1H12.38a1.073,1.073,0,0,1,1.15,1.1V3.6l2.2-1.3a1.173,1.173,0,0,1,1.15,0,.993.993,0,0,1,.523.9v7.7a.842.842,0,0,1-.523.9.832.832,0,0,1-1.046-.1l-2.2-1.3v1.5A1.073,1.073,0,0,1,12.485,13ZM2.55,11.9Zm0,0H12.59V9.4c-.1-.2-.1-.3.209-.4a.485.485,0,0,1,.523,0l2.824,1.7V3.4L13.322,5A.485.485,0,0,1,12.8,5a.537.537,0,0,1-.314-.4V2.1H2.759c-.209,0-.209.1-.209.1Z"
+            transform="translate(-1.4 -1)"
+          />
         </g>
+      </g>
       {/* </svg> */}
     </SvgIcon>
   );
@@ -299,11 +322,11 @@
         <defs>
           <style>.a{"fill:#005699;"}</style>
         </defs> */}
-        <path
-          class="a"
-          d="M11.258,9.562A3.774,3.774,0,0,0,13.965,5.9,3.79,3.79,0,0,0,10.144,2,3.871,3.871,0,0,0,8.95,9.562,7.806,7.806,0,0,0,2.9,17.443a.557.557,0,1,0,1.114,0c0-3.821,2.786-6.925,6.209-6.925s6.209,3.1,6.209,6.925a.557.557,0,0,0,1.114,0C17.388,13.463,14.681,10.119,11.258,9.562ZM7.278,5.9a2.866,2.866,0,1,1,5.731,0,2.787,2.787,0,0,1-2.866,2.786A2.838,2.838,0,0,1,7.278,5.9Z"
-          transform="translate(-2.9 -2)"
-        />
+      <path
+        className="a"
+        d="M11.258,9.562A3.774,3.774,0,0,0,13.965,5.9,3.79,3.79,0,0,0,10.144,2,3.871,3.871,0,0,0,8.95,9.562,7.806,7.806,0,0,0,2.9,17.443a.557.557,0,1,0,1.114,0c0-3.821,2.786-6.925,6.209-6.925s6.209,3.1,6.209,6.925a.557.557,0,0,0,1.114,0C17.388,13.463,14.681,10.119,11.258,9.562ZM7.278,5.9a2.866,2.866,0,1,1,5.731,0,2.787,2.787,0,0,1-2.866,2.786A2.838,2.838,0,0,1,7.278,5.9Z"
+        transform="translate(-2.9 -2)"
+      />
       {/* </svg> */}
     </SvgIcon>
   );
@@ -316,17 +339,17 @@
         <defs>
           <style>.a{"fill:#005699;"}</style>
         </defs> */}
-        <g transform="translate(-2 -2.3)">
-          <path
-            class="a"
-            d="M15.88,11.5a4.08,4.08,0,1,0,4.08,4.08A4.1,4.1,0,0,0,15.88,11.5Zm0,.96a3.282,3.282,0,0,1,1.76.56l-4.48,4a3.309,3.309,0,0,1-.4-1.52A3.22,3.22,0,0,1,15.88,12.46Zm0,6.24a3.091,3.091,0,0,1-2.16-.88l4.56-4.08a2.852,2.852,0,0,1,.64,1.84A3.007,3.007,0,0,1,15.88,18.7Z"
-            transform="translate(-1.96 -1.84)"
-          />
-          <path
-            class="a"
-            d="M12,10.94l.56-.32A6.445,6.445,0,0,0,9.92,9.5a3.626,3.626,0,0,0,2.56-3.52A3.555,3.555,0,0,0,8.88,2.3,3.735,3.735,0,0,0,7.76,9.58,7.327,7.327,0,0,0,2,17.02a.547.547,0,0,0,.56.56.547.547,0,0,0,.56-.56c0-3.6,2.64-6.56,5.92-6.56a5.3,5.3,0,0,1,2.88.88A.971.971,0,0,1,12,10.94ZM8.88,8.7A2.68,2.68,0,1,1,11.6,6.06,2.631,2.631,0,0,1,8.88,8.7Z"
-          />
-        </g>
+      <g transform="translate(-2 -2.3)">
+        <path
+          className="a"
+          d="M15.88,11.5a4.08,4.08,0,1,0,4.08,4.08A4.1,4.1,0,0,0,15.88,11.5Zm0,.96a3.282,3.282,0,0,1,1.76.56l-4.48,4a3.309,3.309,0,0,1-.4-1.52A3.22,3.22,0,0,1,15.88,12.46Zm0,6.24a3.091,3.091,0,0,1-2.16-.88l4.56-4.08a2.852,2.852,0,0,1,.64,1.84A3.007,3.007,0,0,1,15.88,18.7Z"
+          transform="translate(-1.96 -1.84)"
+        />
+        <path
+          className="a"
+          d="M12,10.94l.56-.32A6.445,6.445,0,0,0,9.92,9.5a3.626,3.626,0,0,0,2.56-3.52A3.555,3.555,0,0,0,8.88,2.3,3.735,3.735,0,0,0,7.76,9.58,7.327,7.327,0,0,0,2,17.02a.547.547,0,0,0,.56.56.547.547,0,0,0,.56-.56c0-3.6,2.64-6.56,5.92-6.56a5.3,5.3,0,0,1,2.88.88A.971.971,0,0,1,12,10.94ZM8.88,8.7A2.68,2.68,0,1,1,11.6,6.06,2.631,2.631,0,0,1,8.88,8.7Z"
+        />
+      </g>
       {/* </svg> */}
     </SvgIcon>
   );
@@ -344,39 +367,45 @@
         <defs>
           <style>.a{"fill:#005699;"}</style>
         </defs> */}
-        <g transform="translate(-2 -2)">
-          <g transform="translate(2 2)">
-            <path
-              class="a"
-              d="M8,0a8,8,0,1,0,8,8A8.024,8.024,0,0,0,8,0ZM8,1.04a6.5,6.5,0,0,1,4.48,1.68L2.72,12.48A6.9,6.9,0,0,1,1.68,5.12,7.081,7.081,0,0,1,8,1.04ZM8,14.96a7.274,7.274,0,0,1-4.56-1.68l9.84-9.76a6.9,6.9,0,0,1,1.04,7.36A7.032,7.032,0,0,1,8,14.96Z"
-            />
-          </g>
+      <g transform="translate(-2 -2)">
+        <g transform="translate(2 2)">
+          <path
+            className="a"
+            d="M8,0a8,8,0,1,0,8,8A8.024,8.024,0,0,0,8,0ZM8,1.04a6.5,6.5,0,0,1,4.48,1.68L2.72,12.48A6.9,6.9,0,0,1,1.68,5.12,7.081,7.081,0,0,1,8,1.04ZM8,14.96a7.274,7.274,0,0,1-4.56-1.68l9.84-9.76a6.9,6.9,0,0,1,1.04,7.36A7.032,7.032,0,0,1,8,14.96Z"
+          />
         </g>
+      </g>
       {/* </svg> */}
     </SvgIcon>
   );
 };
 export const RoundSaltireIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 16 16">
-            <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z"/>
-            <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 16">
+      <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z" />
+      <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z" />
+    </SvgIcon>
+  );
+};
 
 export const TrashBinIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 15.44 16">
-            <path d="M17.2 4.08h-4.72v-.32A1.776 1.776 0 0 0 10.72 2H9.44a1.776 1.776 0 0 0-1.76 1.76V4H2.96a.56.56 0 1 0 0 1.12h1.12l.56 11.04A1.879 1.879 0 0 0 6.56 18h7.12a1.879 1.879 0 0 0 1.92-1.84l.56-11.04h1.12a.547.547 0 0 0 .56-.56c0-.32-.32-.48-.64-.48Zm-8.48 0v-.32a.631.631 0 0 1 .64-.64h1.28a.631.631 0 0 1 .64.64V4H8.72Zm6.24 1.04-.56 10.96a.8.8 0 0 1-.8.8H6.56a.756.756 0 0 1-.8-.8L5.12 5.12Z" transform="translate(-2.4 -2)"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 15.44 16">
+      <path
+        d="M17.2 4.08h-4.72v-.32A1.776 1.776 0 0 0 10.72 2H9.44a1.776 1.776 0 0 0-1.76 1.76V4H2.96a.56.56 0 1 0 0 1.12h1.12l.56 11.04A1.879 1.879 0 0 0 6.56 18h7.12a1.879 1.879 0 0 0 1.92-1.84l.56-11.04h1.12a.547.547 0 0 0 .56-.56c0-.32-.32-.48-.64-.48Zm-8.48 0v-.32a.631.631 0 0 1 .64-.64h1.28a.631.631 0 0 1 .64.64V4H8.72Zm6.24 1.04-.56 10.96a.8.8 0 0 1-.8.8H6.56a.756.756 0 0 1-.8-.8L5.12 5.12Z"
+        transform="translate(-2.4 -2)"
+      />
+    </SvgIcon>
+  );
+};
 
 export const TwoSheetsIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 16 15.68">
-            <path d="M16.72 2.2H7.2a1.264 1.264 0 0 0-1.28 1.28V5.8H3.28A1.264 1.264 0 0 0 2 7.08v9.52a1.264 1.264 0 0 0 1.28 1.28h9.52a1.264 1.264 0 0 0 1.28-1.28v-2.32h2.64A1.264 1.264 0 0 0 18 13V3.48a1.264 1.264 0 0 0-1.28-1.28Zm-3.68 14.4a.212.212 0 0 1-.24.24H3.28a.212.212 0 0 1-.24-.24V7.08a.255.255 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24Zm3.92-3.6a.212.212 0 0 1-.24.24h-2.64V7.08A1.264 1.264 0 0 0 12.8 5.8H6.96V3.48a.212.212 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24V13Z" transform="translate(-2 -2.2)"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 15.68">
+      <path
+        d="M16.72 2.2H7.2a1.264 1.264 0 0 0-1.28 1.28V5.8H3.28A1.264 1.264 0 0 0 2 7.08v9.52a1.264 1.264 0 0 0 1.28 1.28h9.52a1.264 1.264 0 0 0 1.28-1.28v-2.32h2.64A1.264 1.264 0 0 0 18 13V3.48a1.264 1.264 0 0 0-1.28-1.28Zm-3.68 14.4a.212.212 0 0 1-.24.24H3.28a.212.212 0 0 1-.24-.24V7.08a.255.255 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24Zm3.92-3.6a.212.212 0 0 1-.24.24h-2.64V7.08A1.264 1.264 0 0 0 12.8 5.8H6.96V3.48a.212.212 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24V13Z"
+        transform="translate(-2 -2.2)"
+      />
+    </SvgIcon>
+  );
+};
diff --git a/client/src/components/welcome.js b/client/src/components/welcome.js
index 24a217a..7960820 100644
--- a/client/src/components/welcome.js
+++ b/client/src/components/welcome.js
@@ -1,41 +1,57 @@
 import { Button, Container } from '@mui/material';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useState } from 'react'
-import JamiLogo from '../../public/jami-logo-icon.svg'
+import { useState } from 'react';
+import JamiLogo from '../../public/jami-logo-icon.svg';
 
 const list = {
-    hidden: { opacity: 0 },
-    visible: {opacity: 1,
-        transition: {
-            when: "beforeChildren",
-            staggerChildren: 0.3,
-          },
-      }
-}
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      when: 'beforeChildren',
+      staggerChildren: 0.3,
+    },
+  },
+};
 const item = {
-    visible: { opacity: 1, x: 0 },
-    hidden: { opacity: 0, x: 0 },
-}
+  visible: { opacity: 1, x: 0 },
+  hidden: { opacity: 0, x: 0 },
+};
 
 export default function WelcomeAnimation(props) {
-    const [visible, setVisible] = useState(true)
+  const [visible, setVisible] = useState(true);
 
-    return <Container style={{ textAlign: "center", display:"flex", flexDirection:"column", alignItems:"center"  }}>
-        <AnimatePresence>
-        {visible && <motion.div initial="hidden" animate="visible" exit="hidden" variants={list} onAnimationComplete={a => {
-                if (a === "hidden") {
-                    props.onComplete()
-                } else if (!props.showSetup) {
-                    setVisible(false)
-                }
-            }}>
-            <motion.div variants={item}><JamiLogo size="32px" /></motion.div>
-            <motion.h1 variants={item}>Welcome to Jami</motion.h1>
-            {props.showSetup &&
+  return (
+    <Container style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <AnimatePresence>
+        {visible && (
+          <motion.div
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            variants={list}
+            onAnimationComplete={(a) => {
+              if (a === 'hidden') {
+                props.onComplete();
+              } else if (!props.showSetup) {
+                setVisible(false);
+              }
+            }}
+          >
             <motion.div variants={item}>
-                <Button variant="outlined" onClick={() => setVisible(false)}>Start setup</Button>
-            </motion.div>}
-        </motion.div>}
-        </AnimatePresence>
+              <JamiLogo size="32px" />
+            </motion.div>
+            <motion.h1 variants={item}>Welcome to Jami</motion.h1>
+            {props.showSetup && (
+              <motion.div variants={item}>
+                <Button variant="outlined" onClick={() => setVisible(false)}>
+                  Start setup
+                </Button>
+              </motion.div>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
     </Container>
-}
\ No newline at end of file
+  );
+}
diff --git a/client/src/contexts/socket.js b/client/src/contexts/socket.js
index ad3b507..1143296 100644
--- a/client/src/contexts/socket.js
+++ b/client/src/contexts/socket.js
@@ -1,9 +1,6 @@
-
-import { createContext } from "react";
+import { createContext } from 'react';
 
 export const SocketContext = createContext();
-export const SocketProvider = ({socket, children}) => (
-    <SocketContext.Provider value={socket}>
-        {children}
-    </SocketContext.Provider>
-)
\ No newline at end of file
+export const SocketProvider = ({ socket, children }) => (
+  <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>
+);
diff --git a/client/src/i18n.js b/client/src/i18n.js
index 80d13a8..b9cdf11 100644
--- a/client/src/i18n.js
+++ b/client/src/i18n.js
@@ -1,13 +1,11 @@
-import i18n from "i18next"
-import { initReactI18next } from "react-i18next"
-import translationEn from "../public/locale/en/translation.json"
-import translationFr from "../public/locale/fr/translation.json"
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import translationEn from '../public/locale/en/translation.json';
+import translationFr from '../public/locale/fr/translation.json';
 
-i18n
-.use(initReactI18next)
-.init({
-  debug: process.env.NODE_ENV == "development",
-  lng: "en",
+i18n.use(initReactI18next).init({
+  debug: process.env.NODE_ENV == 'development',
+  lng: 'en',
   interpolation: {
     escapeValue: false,
   },
@@ -19,6 +17,6 @@
       translation: translationFr,
     },
   },
-})
+});
 
-export default i18n
+export default i18n;
diff --git a/client/src/index.js b/client/src/index.js
index fb7917e..a8b2eba 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,16 +1,14 @@
-'use strict'
-import './index.scss'
-import { StrictMode } from 'react'
+'use strict';
+import './index.scss';
+import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './App.js'
-import { store } from "../redux/store";
-import { Provider } from "react-redux";
-import { BrowserRouter as Router } from "react-router-dom";
+import App from './App.js';
+import { store } from '../redux/store';
+import { Provider } from 'react-redux';
+import { BrowserRouter as Router } from 'react-router-dom';
 import './i18n';
 
 // import config from "../sentry-client.config.json"
-import * as Sentry from "@sentry/react";
-import { BrowserTracing } from "@sentry/tracing";
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import socketio from 'socket.io-client';
 import { SocketProvider } from './contexts/socket.js';
@@ -21,11 +19,11 @@
       cacheTime: Infinity, // websocket is responsible to tell when data needs to be updated
     },
   },
-})
+});
 
-const socket = socketio()
+const socket = socketio();
 
-const container = document.getElementById("root");
+const container = document.getElementById('root');
 const root = createRoot(container);
 root.render(
   <Provider store={store}>
@@ -33,7 +31,7 @@
       <QueryClientProvider client={queryClient}>
         <SocketProvider socket={socket}>
           <Router>
-            <App/>
+            <App />
           </Router>
         </SocketProvider>
       </QueryClientProvider>
@@ -42,7 +40,7 @@
 );
 
 if (import.meta.webpackHot)
-  import.meta.webpackHot.accept("./App", () => {
+  import.meta.webpackHot.accept('./App', () => {
     try {
       render(App);
     } catch (e) {
diff --git a/client/src/pages/404.jsx b/client/src/pages/404.jsx
index 23882b2..9738fe3 100644
--- a/client/src/pages/404.jsx
+++ b/client/src/pages/404.jsx
@@ -1,9 +1,9 @@
 const NotFoundPage = () => {
-    return (
-        <div>
-            <h3>404 Page not found</h3>
-        </div>
-    )
-}
+  return (
+    <div>
+      <h3>404 Page not found</h3>
+    </div>
+  );
+};
 
-export default NotFoundPage;
\ No newline at end of file
+export default NotFoundPage;
diff --git a/client/src/pages/JamiMessenger.jsx b/client/src/pages/JamiMessenger.jsx
index 9760146..017a9b9 100644
--- a/client/src/pages/JamiMessenger.jsx
+++ b/client/src/pages/JamiMessenger.jsx
@@ -1,11 +1,13 @@
-import { Route, Routes } from 'react-router-dom'
+import { Route, Routes } from 'react-router-dom';
 
-import Messenger from "./messenger.jsx"
+import Messenger from './messenger.jsx';
 
 export default function JamiMessenger(props) {
-    return <Routes>
-        <Route path="addContact/:contactId" element={<Messenger />} />
-        <Route path="conversation/:conversationId" element={<Messenger />} />
-        <Route index path="*" element={<Messenger />} />
+  return (
+    <Routes>
+      <Route path="addContact/:contactId" element={<Messenger />} />
+      <Route path="conversation/:conversationId" element={<Messenger />} />
+      <Route index path="*" element={<Messenger />} />
     </Routes>
+  );
 }
diff --git a/client/src/pages/accountCreation.jsx b/client/src/pages/accountCreation.jsx
index ae59d1b..f4d3921 100644
--- a/client/src/pages/accountCreation.jsx
+++ b/client/src/pages/accountCreation.jsx
@@ -3,7 +3,6 @@
 import ListItemLink from '../components/ListItemLink';
 
 export default function AccountCreationDialog(props) {
-
   return (
     <Container>
       <Card>
@@ -12,7 +11,8 @@
             Create new account
           </Typography>
           <Typography variant="body2" color="textSecondary" component="p">
-            Welcome to the Jami web node setup.<br />
+            Welcome to the Jami web node setup.
+            <br />
             Let's start by creating a new administrator account to control access to the server configuration.
           </Typography>
         </CardContent>
@@ -20,22 +20,38 @@
         <List>
           <ListItemLink
             to="/newAccount/rendezVous"
-            icon={<Avatar><RoomRounded /></Avatar>}
+            icon={
+              <Avatar>
+                <RoomRounded />
+              </Avatar>
+            }
             primary="Rendez-vous point"
-            secondary="A Rendez-vous account provides a unique space suitable to easily organize meetings" />
+            secondary="A Rendez-vous account provides a unique space suitable to easily organize meetings"
+          />
           <Divider />
           <ListItemLink
             to="/newAccount/jami"
-            icon={<Avatar><GroupOutlined /></Avatar>}
+            icon={
+              <Avatar>
+                <GroupOutlined />
+              </Avatar>
+            }
             primary="Jami account"
-            secondary="A pesonal communication account to join a Rendez-vous point or directly contact other Jami users" />
+            secondary="A pesonal communication account to join a Rendez-vous point or directly contact other Jami users"
+          />
           <Divider />
           <ListItemLink
             to="/newAccount/sip"
-            icon={<Avatar><DialerSipRounded /></Avatar>}
+            icon={
+              <Avatar>
+                <DialerSipRounded />
+              </Avatar>
+            }
             primary="SIP Account"
-            secondary="Connect with standard SIP communication providers or classic telephony services" />
+            secondary="Connect with standard SIP communication providers or classic telephony services"
+          />
         </List>
       </Card>
-    </Container>)
+    </Container>
+  );
 }
diff --git a/client/src/pages/accountSelection.jsx b/client/src/pages/accountSelection.jsx
index 65728d8..77c033a 100644
--- a/client/src/pages/accountSelection.jsx
+++ b/client/src/pages/accountSelection.jsx
@@ -1,7 +1,7 @@
-import { Fragment, useEffect, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react';
 import { Avatar, Card, CardHeader, Container, List } from '@mui/material';
-import Header from '../components/Header'
-import authManager from '../AuthManager'
+import Header from '../components/Header';
+import authManager from '../AuthManager';
 import Account from '../../../model/Account';
 import LoadingPage from '../components/loading';
 import ListItemLink from '../components/ListItemLink';
@@ -12,60 +12,73 @@
 
 const variants = {
   enter: { opacity: 1, y: 0 },
-  exit: { opacity: 0, y: "-50px" },
-}
+  exit: { opacity: 0, y: '-50px' },
+};
 
 const AccountSelection = (props) => {
-  const navigate = useNavigate()
-  const [loaded, setLoaded] = useState(false)
-  const [error, setError] = useState(false)
-  const [accounts, setAccounts] = useState([])
+  const navigate = useNavigate();
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+  const [accounts, setAccounts] = useState([]);
 
   useEffect(() => {
-    const controller = new AbortController()
-    authManager.fetch(`/api/accounts`, {signal: controller.signal})
-      .then(res => res.json())
-      .then(result => {
-        console.log(result)
-        if (result.length === 0) {
-          navigate('/newAccount')
-        } else {
-          setLoaded(true)
-          setAccounts(result.map(account => Account.from(account)))
+    const controller = new AbortController();
+    authManager
+      .fetch(`/api/accounts`, { signal: controller.signal })
+      .then((res) => res.json())
+      .then(
+        (result) => {
+          console.log(result);
+          if (result.length === 0) {
+            navigate('/newAccount');
+          } else {
+            setLoaded(true);
+            setAccounts(result.map((account) => Account.from(account)));
+          }
+        },
+        (error) => {
+          console.log(`get error ${error}`);
+          setLoaded(true);
+          setError(true);
         }
-      }, error => {
-        console.log(`get error ${error}`)
-        setLoaded(true)
-        setError(true)
-      }).catch(e => console.log(e))
-   // return () => controller.abort() // crash on React18
-  }, [])
+      )
+      .catch((e) => console.log(e));
+    // return () => controller.abort() // crash on React18
+  }, []);
 
-  if (!loaded)
-    return <LoadingPage />
+  if (!loaded) return <LoadingPage />;
   return (
     <Fragment>
       <Header />
-      <Container maxWidth="sm" style={{paddingBottom:32}}>
+      <Container maxWidth="sm" style={{ paddingBottom: 32 }}>
         <motion.div drag="x" initial="exit" animate="enter" exit="exit" variants={variants}>
-        <Card style={{marginTop:32, marginBottom:32}}>
-          <CardHeader title="Choose an account" />
-          <List>
-            {accounts.map(account => <ListItemLink key={account.getId()}
-              icon={<ConversationAvatar displayName={account.getDisplayNameNoFallback()} />}
-              to={`/account/${account.getId()}/settings`}
-              primary={account.getDisplayName()}
-              secondary={account.getDisplayUri()} />)}
-            <ListItemLink
-              icon={<Avatar><AddRounded /></Avatar>}
-              to='/newAccount'
-              primary="Create new account" />
-          </List>
-        </Card>
+          <Card style={{ marginTop: 32, marginBottom: 32 }}>
+            <CardHeader title="Choose an account" />
+            <List>
+              {accounts.map((account) => (
+                <ListItemLink
+                  key={account.getId()}
+                  icon={<ConversationAvatar displayName={account.getDisplayNameNoFallback()} />}
+                  to={`/account/${account.getId()}/settings`}
+                  primary={account.getDisplayName()}
+                  secondary={account.getDisplayUri()}
+                />
+              ))}
+              <ListItemLink
+                icon={
+                  <Avatar>
+                    <AddRounded />
+                  </Avatar>
+                }
+                to="/newAccount"
+                primary="Create new account"
+              />
+            </List>
+          </Card>
         </motion.div>
       </Container>
     </Fragment>
   );
-}
+};
 
-export default AccountSelection
\ No newline at end of file
+export default AccountSelection;
diff --git a/client/src/pages/accountSettings.jsx b/client/src/pages/accountSettings.jsx
index 9808efd..e7d08c2 100644
--- a/client/src/pages/accountSettings.jsx
+++ b/client/src/pages/accountSettings.jsx
@@ -1,45 +1,55 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router';
 import { Container, CircularProgress } from '@mui/material';
-import Header from '../components/Header'
-import AccountPreferences from '../components/AccountPreferences'
-import authManager from '../AuthManager'
-import Account from '../../../model/Account'
-import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import Header from '../components/Header';
+import AccountPreferences from '../components/AccountPreferences';
+import authManager from '../AuthManager';
+import Account from '../../../model/Account';
+import { useAppDispatch } from '../../redux/hooks';
 import { setAccountId, setAccountObject } from '../../redux/appSlice';
 
 const AccountSettings = (props) => {
-  console.log("ACCOUNT SETTINGS", props.account)
-  const accountId = props.accountId || useParams().accountId
+  console.log('ACCOUNT SETTINGS', props.account);
+  const accountId = props.accountId || useParams().accountId;
   const dispatch = useAppDispatch();
 
-  const [state, setState] = useState({ loaded: false })
+  const [state, setState] = useState({ loaded: false });
 
   useEffect(() => {
-    dispatch(setAccountId(accountId))
+    dispatch(setAccountId(accountId));
 
-    const controller = new AbortController()
-    authManager.fetch(`/api/accounts/${accountId}`, { signal: controller.signal })
-      .then(res => res.json())
-      .then(result => {
-        let account = Account.from(result)
-        account.setDevices(result.devices)
-        dispatch(setAccountObject(account))
-        setState({ loaded: true, account: account})
-
-      }).catch(e => console.log(e))
-     // return () => controller.abort() // crash on React18
-  }, [accountId])
+    const controller = new AbortController();
+    authManager
+      .fetch(`/api/accounts/${accountId}`, { signal: controller.signal })
+      .then((res) => res.json())
+      .then((result) => {
+        let account = Account.from(result);
+        account.setDevices(result.devices);
+        dispatch(setAccountObject(account));
+        setState({ loaded: true, account: account });
+      })
+      .catch((e) => console.log(e));
+    // return () => controller.abort() // crash on React18
+  }, [accountId]);
 
   return (
     <Container maxWidth="sm">
       <Header />
-      {state.loaded ? <AccountPreferences account={state.account} onAccontChanged={account => setState(state => {
-        state.account = account
-        return state
-      })} /> : <CircularProgress />}
+      {state.loaded ? (
+        <AccountPreferences
+          account={state.account}
+          onAccontChanged={(account) =>
+            setState((state) => {
+              state.account = account;
+              return state;
+            })
+          }
+        />
+      ) : (
+        <CircularProgress />
+      )}
     </Container>
-  )
-}
+  );
+};
 
-export default AccountSettings;
\ No newline at end of file
+export default AccountSettings;
diff --git a/client/src/pages/addContactPage.jsx b/client/src/pages/addContactPage.jsx
index 702b01d..0fbd21b 100644
--- a/client/src/pages/addContactPage.jsx
+++ b/client/src/pages/addContactPage.jsx
@@ -1,50 +1,52 @@
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
 
 import { Box, Container, Fab, Card, CardContent, Typography } from '@mui/material';
 import GroupAddRounded from '@mui/icons-material/GroupAddRounded';
-import authManager from '../AuthManager'
+import authManager from '../AuthManager';
 import { useAppDispatch } from '../../redux/hooks';
 import { setRefreshFromSlice } from '../../redux/appSlice';
 
-
 export default function AddContactPage(props) {
   const navigate = useNavigate();
-  const accountId = props.accountId || props.match.params.accountId
-  const contactId = props.contactId || props.match.params.contactId
+  const accountId = props.accountId || props.match.params.accountId;
+  const contactId = props.contactId || props.match.params.contactId;
   const dispatch = useAppDispatch();
 
-  const handleClick = async e => {
-    const response = await authManager.fetch(`/api/accounts/${accountId}/conversations`, {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({members:[contactId]})
-    }).then(res => {
-      dispatch(setRefreshFromSlice())
-      return res.json()
-    })
+  const handleClick = async (e) => {
+    const response = await authManager
+      .fetch(`/api/accounts/${accountId}/conversations`, {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ members: [contactId] }),
+      })
+      .then((res) => {
+        dispatch(setRefreshFromSlice());
+        return res.json();
+      });
 
-    console.log(response)
+    console.log(response);
     if (response.conversationId) {
-      navigate(`/account/${accountId}/conversation/${response.conversationId}`)
+      navigate(`/account/${accountId}/conversation/${response.conversationId}`);
     }
-  }
+  };
 
   return (
-    <Container className='messenger'>
-      <Card variant='outlined' style={{ borderRadius: 16, maxWidth: 560, margin: "16px auto" }}>
+    <Container className="messenger">
+      <Card variant="outlined" style={{ borderRadius: 16, maxWidth: 560, margin: '16px auto' }}>
         <CardContent>
-          <Typography variant='h6'>Jami key ID</Typography>
-          <Typography variant='body1'>{contactId}</Typography>
-          <Box style={{textAlign: 'center', marginTop: 16}}>
-          <Fab variant='extended' color='primary' onClick={handleClick}>
-            <GroupAddRounded/>
-            Add contact
-          </Fab>
+          <Typography variant="h6">Jami key ID</Typography>
+          <Typography variant="body1">{contactId}</Typography>
+          <Box style={{ textAlign: 'center', marginTop: 16 }}>
+            <Fab variant="extended" color="primary" onClick={handleClick}>
+              <GroupAddRounded />
+              Add contact
+            </Fab>
           </Box>
         </CardContent>
       </Card>
-    </Container>)
+    </Container>
+  );
 }
diff --git a/client/src/pages/jamiAccountCreation.jsx b/client/src/pages/jamiAccountCreation.jsx
index a551569..8d47b48 100644
--- a/client/src/pages/jamiAccountCreation.jsx
+++ b/client/src/pages/jamiAccountCreation.jsx
@@ -1,36 +1,36 @@
-import { useState } from 'react'
+import { useState } from 'react';
 import { Container, Card, CardContent, Typography, Fab, CardActions, Box } from '@mui/material';
 import { AddRounded } from '@mui/icons-material';
 import UsernameChooser from '../components/UsernameChooser';
-import authManager from '../AuthManager'
+import authManager from '../AuthManager';
 import { useNavigate } from 'react-router';
 
 export default function JamiAccountDialog(props) {
-  const [name, setName] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState(false)
-  const navigate = useNavigate()
+  const [name, setName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const navigate = useNavigate();
 
-  const onSubmit = async event => {
-    event.preventDefault()
-    setLoading(true)
-    const result = await authManager.fetch('/api/accounts', {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ registerName: name })
-    })
-      .then(res => res.json())
-      .catch(error => {
-        setLoading(false)
-        setError(error)
+  const onSubmit = async (event) => {
+    event.preventDefault();
+    setLoading(true);
+    const result = await authManager
+      .fetch('/api/accounts', {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ registerName: name }),
       })
-    console.log(result)
-    if (result && result.accountId)
-      navigate(`/account/${result.accountId}/settings`)
-  }
+      .then((res) => res.json())
+      .catch((error) => {
+        setLoading(false);
+        setError(error);
+      });
+    console.log(result);
+    if (result && result.accountId) navigate(`/account/${result.accountId}/settings`);
+  };
 
   return (
     <Container>
@@ -40,7 +40,8 @@
             Create Jami account
           </Typography>
           <Typography variant="body2" color="textSecondary" component="p">
-            Welcome to the Jami web node setup.<br />
+            Welcome to the Jami web node setup.
+            <br />
             Let's start by creating a new administrator account to control access to the server configuration.
           </Typography>
 
@@ -51,10 +52,11 @@
         <CardActions>
           {error && <Typography color="error">Error: {JSON.stringify(error)}</Typography>}
           <Fab color="primary" type="submit" variant="extended" disabled={!name || loading}>
-            <AddRounded/>
+            <AddRounded />
             Register name
           </Fab>
         </CardActions>
       </Card>
-    </Container>)
+    </Container>
+  );
 }
diff --git a/client/src/pages/loginDialog.jsx b/client/src/pages/loginDialog.jsx
index ef647e8..9a7ff0c 100644
--- a/client/src/pages/loginDialog.jsx
+++ b/client/src/pages/loginDialog.jsx
@@ -1,4 +1,4 @@
-import { Component } from 'react'
+import { Component } from 'react';
 
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
@@ -11,48 +11,49 @@
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 
-import authManager from '../AuthManager'
+import authManager from '../AuthManager';
 
 function Copyright() {
-    return (
-        <Typography variant="body2" color="textSecondary" align="center">
-            {'Copyright © 2016-'}{new Date().getFullYear()}{' Savoir-faire Linux Inc.'}
-            <Link color="inherit" href="https://jami.net/">
-                Jami.net
-        </Link>{' '}
-            {'.'}
-        </Typography>
-    );
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {'Copyright © 2016-'}
+      {new Date().getFullYear()}
+      {' Savoir-faire Linux Inc.'}
+      <Link color="inherit" href="https://jami.net/">
+        Jami.net
+      </Link>{' '}
+      {'.'}
+    </Typography>
+  );
 }
 
 class SignInPage extends Component {
+  constructor(props) {
+    console.log('SignInPage ' + props.open);
+    super(props);
+    this.state = {
+      submitted: false,
+      loading: false,
+    };
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.localLogin = this.localLogin.bind(this);
+  }
 
-    constructor(props) {
-        console.log("SignInPage " + props.open)
-        super(props)
-        this.state = {
-            submitted: false,
-            loading: false,
-        }
-        this.handleSubmit = this.handleSubmit.bind(this);
-        this.localLogin = this.localLogin.bind(this);
-    }
+  handleusername(text) {
+    this.setState({ username: text.target.value });
+  }
 
-    handleusername(text) {
-        this.setState({ username: text.target.value })
-    }
+  handlePassword(text) {
+    this.setState({ password: text.target.value });
+  }
 
-    handlePassword(text) {
-        this.setState({ password: text.target.value })
-    }
-
-    localLogin() {
-        this.setState({
-            submitted: true,
-            loading: true
-        })
-        authManager.authenticate('admin', 'admin')
-        /*fetch('/api/localLogin?username=none&password=none', {
+  localLogin() {
+    this.setState({
+      submitted: true,
+      loading: true,
+    });
+    authManager.authenticate('admin', 'admin');
+    /*fetch('/api/localLogin?username=none&password=none', {
             header: { "Content-Type": "application/json" },
             method: "POST",
             credentials: 'same-origin'
@@ -80,111 +81,109 @@
                     errorMessage: e.toString()
                 })
             })*/
-    }
+  }
 
-    handleSubmit(event) {
-        event.preventDefault();
-        let obj = {}
-        obj.username = this.state.username;
-        obj.password = this.state.password;
+  handleSubmit(event) {
+    event.preventDefault();
+    let obj = {};
+    obj.username = this.state.username;
+    obj.password = this.state.password;
 
+    this.setState({
+      submitted: true,
+      loading: true,
+    });
+
+    fetch('/api/login?username=' + obj.username + '&password=' + obj.password, {
+      header: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+      credentials: 'same-origin',
+      //body: JSON.stringify({ obj })
+    })
+      .then((res) => {
+        if (res.status === '200') {
+          this.setState({
+            redirect: true,
+          });
+        } else if (res.status === '401') {
+          this.setState({
+            loading: false,
+            error: true,
+            open: true,
+            errorMessage: 'Wrong credentials! Your are not allowed to connect',
+          });
+        }
+        //this.setState({ session: res });
+      })
+      .catch((e) => {
         this.setState({
-            submitted: true,
-            loading: true
-        })
+          loading: false,
+          error: true,
+          open: true,
+          errorMessage: e.toString(),
+        });
+      });
+  }
 
-        fetch('/api/login?username=' + obj.username + '&password=' + obj.password,
-            {
-                header: {
-                    "Content-Type": "application/json"
-                },
-                method: "POST",
-                credentials: 'same-origin'
-                //body: JSON.stringify({ obj })
-            }
-        ).then((res) => {
-            if (res.status === '200') {
-                this.setState({
-                    redirect: true
-                });
-            } else if (res.status === '401') {
-                this.setState({
-                    loading: false,
-                    error: true,
-                    open: true,
-                    errorMessage: "Wrong credentials! Your are not allowed to connect"
-                })
-            }
-            //this.setState({ session: res });
-        }).catch((e) => {
-            this.setState({
-                loading: false,
-                error: true,
-                open: true,
-                errorMessage: e.toString()
-            })
-        })
-    }
+  render() {
+    console.log('SignInPage render ' + this.props.open);
+    return (
+      <Dialog open={this.props.open}>
+        <DialogTitle>Se connecter</DialogTitle>
+        <DialogContent>
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            className="" /*{classes.submit}*/
+            onClick={() => {
+              this.localLogin();
+            }}
+          >
+            Compte local
+          </Button>
+          <TextField
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            id="username"
+            label="LDAP Savoir-faire Linux"
+            name="username"
+            autoComplete="email"
+            autoFocus
+            onChange={(text) => {
+              this.handleusername(text);
+            }}
+          />
+          <TextField
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            name="password"
+            label="Mot de passe"
+            type="password"
+            id="password"
+            autoComplete="current-password"
+            onChange={(text) => {
+              this.handlePassword(text);
+            }}
+          />
+          <FormControlLabel control={<Checkbox value="remember" color="primary" />} label="Se rapeller de moi" />
+        </DialogContent>
 
-    render() {
-        console.log("SignInPage render " + this.props.open)
-        return (
-            <Dialog open={this.props.open}>
-                <DialogTitle>Se connecter</DialogTitle>
-                <DialogContent>
-                    <Button
-                        type="submit"
-                        fullWidth
-                        variant="contained"
-                        color="primary"
-                        className=""/*{classes.submit}*/
-                        onClick={() => { this.localLogin() }}
-                    >
-                        Compte local
-                    </Button>
-                    <TextField
-                        variant="outlined"
-                        margin="normal"
-                        required
-                        fullWidth
-                        id="username"
-                        label="LDAP Savoir-faire Linux"
-                        name="username"
-                        autoComplete="email"
-                        autoFocus
-                        onChange={(text) => { this.handleusername(text) }}
-                    />
-                    <TextField
-                        variant="outlined"
-                        margin="normal"
-                        required
-                        fullWidth
-                        name="password"
-                        label="Mot de passe"
-                        type="password"
-                        id="password"
-                        autoComplete="current-password"
-                        onChange={(text) => { this.handlePassword(text) }}
-                    />
-                    <FormControlLabel
-                        control={<Checkbox value="remember" color="primary" />}
-                        label="Se rapeller de moi"
-                    />
-                </DialogContent>
-
-                <DialogActions>
-                    <Button
-                        type="submit"
-                        size="medium"
-                        onClick={this.handleSubmit}
-                    >
-                        Se connecter
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        );
-    }
+        <DialogActions>
+          <Button type="submit" size="medium" onClick={this.handleSubmit}>
+            Se connecter
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
 }
 
-
-export default SignInPage;
\ No newline at end of file
+export default SignInPage;
diff --git a/client/src/pages/messenger.jsx b/client/src/pages/messenger.jsx
index a256290..f8d5907 100644
--- a/client/src/pages/messenger.jsx
+++ b/client/src/pages/messenger.jsx
@@ -1,12 +1,12 @@
-import { useEffect, useState } from 'react'
-import Header from '../components/Header'
-import NewContactForm from '../components/NewContactForm'
+import { useEffect, useState } from 'react';
+import Header from '../components/Header';
+import NewContactForm from '../components/NewContactForm';
 
 //import Sound from 'react-sound';
 import ConversationList from '../components/ConversationList';
-import authManager from '../AuthManager'
-import Conversation from '../../../model/Conversation'
-import Contact from '../../../model/Contact'
+import authManager from '../AuthManager';
+import Conversation from '../../../model/Conversation';
+import Contact from '../../../model/Contact';
 import ConversationView from '../components/ConversationView';
 import AddContactPage from './addContactPage.jsx';
 import LoadingPage from '../components/loading';
@@ -14,80 +14,75 @@
 import { Stack } from '@mui/material';
 import { useAppSelector } from '../../redux/hooks';
 
-
 const Messenger = (props) => {
   const { refresh } = useAppSelector((state) => state.app);
 
-  const [conversations, setConversations] = useState(undefined)
-  const [searchQuery, setSearchQuery] = useState('')
-  const [searchResult, setSearchResults] = useState(undefined)
+  const [conversations, setConversations] = useState(undefined);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResult, setSearchResults] = useState(undefined);
 
-  const params = useParams()
-  const accountId = props.accountId || params.accountId
-  const conversationId = props.conversationId || params.conversationId
-  const contactId = props.contactId || params.contactId
+  const params = useParams();
+  const accountId = props.accountId || params.accountId;
+  const conversationId = props.conversationId || params.conversationId;
+  const contactId = props.contactId || params.contactId;
 
   useEffect(() => {
-    console.log("REFRESH CONVERSATIONS FROM MESSENGER")
-    const controller = new AbortController()
-    authManager.fetch(`/api/accounts/${accountId}/conversations`, {signal: controller.signal})
-    .then(res => res.json())
-    .then(result => {
-      console.log(result)
-      setConversations(Object.values(result).map(c => Conversation.from(accountId, c)))
-    })
+    console.log('REFRESH CONVERSATIONS FROM MESSENGER');
+    const controller = new AbortController();
+    authManager
+      .fetch(`/api/accounts/${accountId}/conversations`, { signal: controller.signal })
+      .then((res) => res.json())
+      .then((result) => {
+        console.log(result);
+        setConversations(Object.values(result).map((c) => Conversation.from(accountId, c)));
+      });
     // return () => controller.abort()
-  }, [accountId, refresh])
+  }, [accountId, refresh]);
 
   useEffect(() => {
-    if (!searchQuery)
-      return
-    const controller = new AbortController()
-    authManager.fetch(`/api/accounts/${accountId}/ns/name/${searchQuery}`, {signal: controller.signal})
-    .then(response => {
-      if (response.status === 200) {
-        return response.json()
-      } else {
-        throw new Error(response.status)
-      }
-    }).then(response => {
-      console.log(response)
-      const contact = new Contact(response.address)
-      contact.setRegisteredName(response.name)
-      setSearchResults(contact ? Conversation.fromSingleContact(accountId, contact) : undefined)
-    }).catch(e => {
-      setSearchResults(undefined)
-    })
-   // return () => controller.abort() // crash on React18
-  }, [accountId, searchQuery])
+    if (!searchQuery) return;
+    const controller = new AbortController();
+    authManager
+      .fetch(`/api/accounts/${accountId}/ns/name/${searchQuery}`, { signal: controller.signal })
+      .then((response) => {
+        if (response.status === 200) {
+          return response.json();
+        } else {
+          throw new Error(response.status);
+        }
+      })
+      .then((response) => {
+        console.log(response);
+        const contact = new Contact(response.address);
+        contact.setRegisteredName(response.name);
+        setSearchResults(contact ? Conversation.fromSingleContact(accountId, contact) : undefined);
+      })
+      .catch((e) => {
+        setSearchResults(undefined);
+      });
+    // return () => controller.abort() // crash on React18
+  }, [accountId, searchQuery]);
 
-  console.log("Messenger render")
+  console.log('Messenger render');
   return (
-    <Stack
-      direction="row"
-      height="100vh"
-      width="100vw"
-    >
-      <Stack
-        flexGrow={0}
-        flexShrink={0}
-        overflow="auto"
-      >
+    <Stack direction="row" height="100vh" width="100vw">
+      <Stack flexGrow={0} flexShrink={0} overflow="auto">
         <Header />
         <NewContactForm onChange={setSearchQuery} />
         {contactId && <AddContactPage accountId={accountId} contactId={contactId} />}
-        {conversations ?
-          <ConversationList search={searchResult} conversations={conversations} accountId={accountId} /> :
-          <div className="rooms-list"><LoadingPage /></div>
-        }
+        {conversations ? (
+          <ConversationList search={searchResult} conversations={conversations} accountId={accountId} />
+        ) : (
+          <div className="rooms-list">
+            <LoadingPage />
+          </div>
+        )}
       </Stack>
-      <Stack
-        flexGrow={1}
-      >
+      <Stack flexGrow={1}>
         {conversationId && <ConversationView accountId={accountId} conversationId={conversationId} />}
       </Stack>
     </Stack>
-  )
-}
+  );
+};
 
-export default Messenger
\ No newline at end of file
+export default Messenger;
diff --git a/client/src/pages/serverConfiguration.jsx b/client/src/pages/serverConfiguration.jsx
index 5c80131..8ac85df 100644
--- a/client/src/pages/serverConfiguration.jsx
+++ b/client/src/pages/serverConfiguration.jsx
@@ -1,31 +1,32 @@
-import Header from '../components/Header'
-import AccountPreferences from '../components/AccountPreferences'
-import Container from '@mui/material/Container'
-import CircularProgress from '@mui/material/CircularProgress'
-import authManager from '../AuthManager'
-import Account from '../../../model/Account'
+import Header from '../components/Header';
+import AccountPreferences from '../components/AccountPreferences';
+import Container from '@mui/material/Container';
+import CircularProgress from '@mui/material/CircularProgress';
+import authManager from '../AuthManager';
+import Account from '../../../model/Account';
 
 const ServerOverview = (props) => {
-
-  this.accountId = props.accountId || props.match.params.accountId
+  this.accountId = props.accountId || props.match.params.accountId;
 
   useEffect(() => {
-    const controller = new AbortController()
-    authManager.fetch(`/api/serverConfig`, {signal: controller.signal})
-      .then(res => res.json())
-      .then(result => {
-        console.log(result)
-        setState({loaded: true, account: Account.from(result)})
-      }).catch(e => console.log(e))
-     // return () => controller.abort() // crash on React18
-  }, [accountId])
+    const controller = new AbortController();
+    authManager
+      .fetch(`/api/serverConfig`, { signal: controller.signal })
+      .then((res) => res.json())
+      .then((result) => {
+        console.log(result);
+        setState({ loaded: true, account: Account.from(result) });
+      })
+      .catch((e) => console.log(e));
+    // return () => controller.abort() // crash on React18
+  }, [accountId]);
 
   return (
-    <Container maxWidth="sm" className="app" >
+    <Container maxWidth="sm" className="app">
       <Header />
       {this.state.loaded ? <AccountPreferences account={this.state.account} /> : <CircularProgress />}
     </Container>
-  )
-}
+  );
+};
 
-export default ServerOverview
\ No newline at end of file
+export default ServerOverview;
diff --git a/client/src/pages/serverSetup.jsx b/client/src/pages/serverSetup.jsx
index eaefc51..cf9b3eb 100644
--- a/client/src/pages/serverSetup.jsx
+++ b/client/src/pages/serverSetup.jsx
@@ -1,62 +1,70 @@
-import { useState } from 'react'
+import { useState } from 'react';
 
-import { Box, Container, Fab, Card, CardContent, Typography, Input } from '@mui/material'
-import GroupAddRounded from '@mui/icons-material/GroupAddRounded'
-import authManager from '../AuthManager'
+import { Box, Container, Fab, Card, CardContent, Typography, Input } from '@mui/material';
+import GroupAddRounded from '@mui/icons-material/GroupAddRounded';
+import authManager from '../AuthManager';
 
 export default function ServerSetup(props) {
-  const [password, setPassword] = useState('')
-  const [passwordRepeat, setPasswordRepeat] = useState('')
-  const [loading, setLoading] = useState(false)
+  const [password, setPassword] = useState('');
+  const [passwordRepeat, setPasswordRepeat] = useState('');
+  const [loading, setLoading] = useState(false);
 
-  const isValid = () => password && password === passwordRepeat
+  const isValid = () => password && password === passwordRepeat;
 
-  const handleSubmit = e => {
-    e.preventDefault()
-    setLoading(true)
-    if (!isValid())
-      return
-    authManager.setup(password)
-  }
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setLoading(true);
+    if (!isValid()) return;
+    authManager.setup(password);
+  };
 
   return (
-    <Container className='message-list'>
+    <Container className="message-list">
       <Card disabled={loading}>
         <CardContent component="form" onSubmit={handleSubmit}>
           <Typography gutterBottom variant="h5" component="h2">
-          Jami Web Node setup
+            Jami Web Node setup
           </Typography>
           <Typography variant="body2" color="textSecondary" component="p">
-            Welcome to the Jami web node setup.<br/>
+            Welcome to the Jami web node setup.
+            <br />
             Let's start by creating a new administrator account to control access to the server configuration.
           </Typography>
 
           <Box style={{ textAlign: 'center', marginTop: 8, marginBottom: 16 }}>
-          <div><Input value="admin" name="username" autoComplete="username" disabled /></div>
-          <div><Input
-            value={password}
-            onChange={e => setPassword(e.target.value)}
-            name="password"
-            type='password'
-            placeholder="New password"
-            autoComplete="new-password" />
-          </div>
-          <div><Input
-            value={passwordRepeat}
-            onChange={e => setPasswordRepeat(e.target.value)}
-            name="password"
-            error={!!passwordRepeat && !isValid()}
-            type='password'
-            placeholder="Repeat password"
-            autoComplete="new-password" /></div>
+            <div>
+              <Input value="admin" name="username" autoComplete="username" disabled />
+            </div>
+            <div>
+              <Input
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                name="password"
+                type="password"
+                placeholder="New password"
+                autoComplete="new-password"
+              />
+            </div>
+            <div>
+              <Input
+                value={passwordRepeat}
+                onChange={(e) => setPasswordRepeat(e.target.value)}
+                name="password"
+                error={!!passwordRepeat && !isValid()}
+                type="password"
+                placeholder="Repeat password"
+                autoComplete="new-password"
+              />
+            </div>
           </Box>
           <Box style={{ textAlign: 'center', marginTop: 24 }}>
-            <Fab variant='extended' color='primary' type='submit' disabled={!isValid()}>
-              <GroupAddRounded/>
+            <Fab variant="extended" color="primary" type="submit" disabled={!isValid()}>
+              <GroupAddRounded />
               Create admin account
             </Fab>
           </Box>
         </CardContent>
       </Card>
-    </Container>)
+    </Container>
+  );
 }
diff --git a/client/src/services/conversation.js b/client/src/services/conversation.js
index 4a68077..1caa40e 100644
--- a/client/src/services/conversation.js
+++ b/client/src/services/conversation.js
@@ -1,46 +1,30 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import axios from "axios"
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import axios from 'axios';
 
 export const useConversationQuery = (accountId, conversationId) => {
-    return useQuery(
-        ["conversation", accountId, conversationId],
-        () => fetchConversation(accountId, conversationId),
-        {
-            "enabled": !!(accountId && conversationId),
-        }
-    )
-}
+  return useQuery(['conversation', accountId, conversationId], () => fetchConversation(accountId, conversationId), {
+    enabled: !!(accountId && conversationId),
+  });
+};
 
 export const useMessagesQuery = (accountId, conversationId) => {
-    return useQuery(
-        ["messages", accountId, conversationId],
-        () => fetchMessages(accountId, conversationId),
-        {
-            "enabled": !!(accountId && conversationId),
-        }
-    )
-}
+  return useQuery(['messages', accountId, conversationId], () => fetchMessages(accountId, conversationId), {
+    enabled: !!(accountId && conversationId),
+  });
+};
 
 export const useSendMessageMutation = (accountId, conversationId) => {
-    const queryClient = useQueryClient();
-    return useMutation(
-        (message) => (
-            axios.post(`/api/accounts/${accountId}/conversations/${conversationId}`, {message})
-        ),
-        {
-            "onSuccess": () => queryClient.invalidateQueries(["messages", accountId, conversationId]),
-        }
-    )
-}
+  const queryClient = useQueryClient();
+  return useMutation(
+    (message) => axios.post(`/api/accounts/${accountId}/conversations/${conversationId}`, { message }),
+    {
+      onSuccess: () => queryClient.invalidateQueries(['messages', accountId, conversationId]),
+    }
+  );
+};
 
-const fetchConversation = (accountId, conversationId) => (
-    axios
-    .get(`/api/accounts/${accountId}/conversations/${conversationId}`)
-    .then((result) => result.data)
-)
+const fetchConversation = (accountId, conversationId) =>
+  axios.get(`/api/accounts/${accountId}/conversations/${conversationId}`).then((result) => result.data);
 
-const fetchMessages = (accountId, conversationId) => (
-    axios
-    .get(`/api/accounts/${accountId}/conversations/${conversationId}/messages`)
-    .then((result) => result.data)
-)
\ No newline at end of file
+const fetchMessages = (accountId, conversationId) =>
+  axios.get(`/api/accounts/${accountId}/conversations/${conversationId}/messages`).then((result) => result.data);
diff --git a/client/src/themes/ThemeDemonstrator.js b/client/src/themes/ThemeDemonstrator.js
index 968a2a5..6f12209 100644
--- a/client/src/themes/ThemeDemonstrator.js
+++ b/client/src/themes/ThemeDemonstrator.js
@@ -1,60 +1,65 @@
-import { Button, Stack, Switch, ThemeProvider, Typography } from "@mui/material"
-import { CancelPictureButton, EditPictureButton, UploadPictureButton, TakePictureButton, InfoButton, TipButton, BackButton, CloseButton } from "../components/buttons"
-import { NickNameInput, PasswordInput, RegularInput, UsernameInput } from "../components/inputs"
-import defaultTheme from './default'
+import { Button, Stack, Switch, ThemeProvider, Typography } from '@mui/material';
+import {
+  CancelPictureButton,
+  EditPictureButton,
+  UploadPictureButton,
+  TakePictureButton,
+  InfoButton,
+  TipButton,
+  BackButton,
+  CloseButton,
+} from '../components/buttons';
+import { NickNameInput, PasswordInput, RegularInput, UsernameInput } from '../components/inputs';
+import defaultTheme from './default';
 
 export const ThemeDemonstrator = () => {
-    return (
-        <ThemeProvider theme={defaultTheme}>
-            <Stack spacing="5px">
-                <Stack>
-                    <Typography variant="h1">Exemple de titre H1</Typography>
-                    <Typography variant="h2">Exemple de titre H2</Typography>
-                    <Typography variant="h3">Exemple de titre H3</Typography>
-                    <Typography variant="h4">Exemple de titre H4</Typography>
-                    <Typography variant="h5">Exemple de titre H5</Typography>
-                    <Typography variant="body1">Texte courant principal</Typography>
-                    <Typography variant="body2">Texte courant secondaire</Typography>
-                    <Typography variant="caption">Légendes et annotations</Typography>
-                </Stack>
-                <Stack spacing="5px" padding="5px" width="300px" >
-                    <Button variant="contained">Bouton primaire</Button>
-                    <Button variant="outlined">Bouton secondaire</Button>
-                    <Button variant="text">Bouton tertiaire</Button>
-                    <Button variant="contained" size="small">Bouton liste préférences</Button>
-                </Stack>
-                <Stack direction="row" spacing="5px">
-                    <CancelPictureButton/>
-                    <EditPictureButton/>
-                    <UploadPictureButton/>
-                    <TakePictureButton/>
-                </Stack>
-                <Stack direction="row" spacing="5px">
-                    <InfoButton/>
-                    <TipButton/>
-                </Stack>
-                <Stack direction="row" spacing="5px">
-                    <BackButton/>
-                    <CloseButton/>
-                </Stack>
-                <Stack>
-                    <Switch/>
-                </Stack>
-                <Stack padding="5px" width="300px" >
-                    <UsernameInput/>
-                    <UsernameInput
-                        error
-                        defaultValue="Cyrille"
-                    />
-                    <PasswordInput/>
-                    <PasswordInput
-                        error
-                        defaultValue="SavoirFaireLinux"
-                    />
-                    <NickNameInput/>
-                    <RegularInput/>
-                </Stack>
-            </Stack>
-        </ThemeProvider>
-    )
-}
\ No newline at end of file
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <Stack spacing="5px">
+        <Stack>
+          <Typography variant="h1">Exemple de titre H1</Typography>
+          <Typography variant="h2">Exemple de titre H2</Typography>
+          <Typography variant="h3">Exemple de titre H3</Typography>
+          <Typography variant="h4">Exemple de titre H4</Typography>
+          <Typography variant="h5">Exemple de titre H5</Typography>
+          <Typography variant="body1">Texte courant principal</Typography>
+          <Typography variant="body2">Texte courant secondaire</Typography>
+          <Typography variant="caption">Légendes et annotations</Typography>
+        </Stack>
+        <Stack spacing="5px" padding="5px" width="300px">
+          <Button variant="contained">Bouton primaire</Button>
+          <Button variant="outlined">Bouton secondaire</Button>
+          <Button variant="text">Bouton tertiaire</Button>
+          <Button variant="contained" size="small">
+            Bouton liste préférences
+          </Button>
+        </Stack>
+        <Stack direction="row" spacing="5px">
+          <CancelPictureButton />
+          <EditPictureButton />
+          <UploadPictureButton />
+          <TakePictureButton />
+        </Stack>
+        <Stack direction="row" spacing="5px">
+          <InfoButton />
+          <TipButton />
+        </Stack>
+        <Stack direction="row" spacing="5px">
+          <BackButton />
+          <CloseButton />
+        </Stack>
+        <Stack>
+          <Switch />
+        </Stack>
+        <Stack padding="5px" width="300px">
+          <UsernameInput />
+          <UsernameInput error defaultValue="Cyrille" />
+          <PasswordInput />
+          <PasswordInput error defaultValue="SavoirFaireLinux" />
+          <NickNameInput />
+          <RegularInput />
+        </Stack>
+      </Stack>
+    </ThemeProvider>
+  );
+};
diff --git a/client/src/themes/default.js b/client/src/themes/default.js
index db10bde..d8b6147 100644
--- a/client/src/themes/default.js
+++ b/client/src/themes/default.js
@@ -1,63 +1,63 @@
-import { createTheme } from "@mui/material";
+import { createTheme } from '@mui/material';
 
 const theme = createTheme({
   palette: {
     primary: {
-      light: "#E5EEF5", // same as "#0056991A"
-      main: "#0071C9",
-      dark: "#005699",
+      light: '#E5EEF5', // same as "#0056991A"
+      main: '#0071C9',
+      dark: '#005699',
     },
     error: {
-      main: "#CC0022",
+      main: '#CC0022',
     },
     success: {
-      main: "#009980",
+      main: '#009980',
     },
   },
   typography: {
-    fontFamily: "Ubuntu",
+    fontFamily: 'Ubuntu',
     allVariants: {
-      color: "black"
+      color: 'black',
     },
     h1: {
       fontWeight: 400,
-      fontSize: "26px",
-      lineHeight: "36px",
+      fontSize: '26px',
+      lineHeight: '36px',
     },
     h2: {
       fontWeight: 400,
-      fontSize: "22px",
-      lineHeight: "30px",
+      fontSize: '22px',
+      lineHeight: '30px',
     },
     h3: {
       fontWeight: 400,
-      fontSize: "18px",
-      lineHeight: "26px",
+      fontSize: '18px',
+      lineHeight: '26px',
     },
     h4: {
       fontWeight: 500,
-      fontSize: "15px",
-      lineHeight: "22px",
+      fontSize: '15px',
+      lineHeight: '22px',
     },
     h5: {
       fontWeight: 500,
-      fontSize: "13px",
-      lineHeight: "19px",
+      fontSize: '13px',
+      lineHeight: '19px',
     },
     body1: {
       fontWeight: 400,
-      fontSize: "15px",
-      lineHeight: "22px"
+      fontSize: '15px',
+      lineHeight: '22px',
     },
     body2: {
       fontWeight: 400,
-      fontSize: "13px",
-      lineHeight: "19px",
+      fontSize: '13px',
+      lineHeight: '19px',
     },
     caption: {
       fontWeight: 400,
-      fontSize: "12px",
-      lineHeight: "16px",
+      fontSize: '12px',
+      lineHeight: '16px',
     },
   },
   components: {
@@ -119,43 +119,43 @@
         }
       `,
     },
-  }
-})
+  },
+});
 
 export default createTheme(theme, {
   components: {
     MuiButton: {
       styleOverrides: {
         root: {
-          height: "46px",
+          height: '46px',
           fontWeight: 700,
-          fontSize: "15px",
-          lineHeight: "17px",
-          textTransform: "none",
-          borderRadius: "5px",
+          fontSize: '15px',
+          lineHeight: '17px',
+          textTransform: 'none',
+          borderRadius: '5px',
         },
         sizeSmall: {
-          height: "36px",
+          height: '36px',
         },
         contained: {
           background: theme.palette.primary.dark,
-          "&:hover": {
+          '&:hover': {
             background: theme.palette.primary.main,
           },
         },
         outlined: {
-          background: "#FFF",
-          borderColor: "#0056995C",
+          background: '#FFF',
+          borderColor: '#0056995C',
           color: theme.palette.primary.dark,
-          "&:hover": {
+          '&:hover': {
             background: theme.palette.primary.light,
             borderColor: theme.palette.primary.dark,
           },
         },
         text: {
-          background: "#fff",
+          background: '#fff',
           color: theme.palette.primary.dark,
-          "&:hover": {
+          '&:hover': {
             background: theme.palette.primary.light,
           },
         },
@@ -167,38 +167,38 @@
       },
       styleOverrides: {
         root: {
-          width: "60px",
-          height: "30px",
+          width: '60px',
+          height: '30px',
           padding: 0,
         },
         switchBase: {
           padding: 0,
-          "&.Mui-checked": {
+          '&.Mui-checked': {
             transform: `translateX(30px)`,
           },
         },
         thumb: {
-          width: "28px",
-          height: "28px",
+          width: '28px',
+          height: '28px',
           border: `1px solid ${theme.palette.primary.dark}`,
-          ".Mui-checked.Mui-checked &": {
-            width: "30px",
-            height: "30px",
-            border: "none",
-          }
+          '.Mui-checked.Mui-checked &': {
+            width: '30px',
+            height: '30px',
+            border: 'none',
+          },
         },
         track: {
           backgroundColor: theme.palette.primary.light,
-          borderRadius: "30px",
+          borderRadius: '30px',
           opacity: 1,
-          ".Mui-checked.Mui-checked + &": {
+          '.Mui-checked.Mui-checked + &': {
             backgroundColor: theme.palette.primary.light,
             opacity: 1,
-          }
+          },
         },
         colorPrimary: {
-          color: "#fff",
-          "&.Mui-checked": {
+          color: '#fff',
+          '&.Mui-checked': {
             color: theme.palette.primary.dark,
           },
         },
@@ -208,7 +208,7 @@
       styleOverrides: {
         root: {
           color: theme.palette.primary.dark,
-          "&.Mui-error": {
+          '&.Mui-error': {
             color: theme.palette.error.main,
           },
         },
@@ -217,56 +217,56 @@
             Material UI uses "before" for the regular underline.
             There is a second underline called "after" placed over "before"
           */
-          "&:before": {
+          '&:before': {
             borderBottom: `2px solid ${theme.palette.primary.dark}`,
           },
-          "&:hover:not(.Mui-disabled, .Mui-error):before": {
-            borderBottom: "2px solid #03B9E9",
+          '&:hover:not(.Mui-disabled, .Mui-error):before': {
+            borderBottom: '2px solid #03B9E9',
           },
-          "&:after": {
-            borderBottom: "2px solid #03B9E9",
+          '&:after': {
+            borderBottom: '2px solid #03B9E9',
           },
-          "&:hover:not(.Mui-error):after": {
-            borderBottom: "2px solid #03B9E9",
+          '&:hover:not(.Mui-error):after': {
+            borderBottom: '2px solid #03B9E9',
           },
         },
-      }
+      },
     },
     MuiFormControl: {
       styleOverrides: {
         root: {
-          height: "90px",
+          height: '90px',
         },
       },
     },
     MuiFormHelperText: {
       styleOverrides: {
         root: {
-          position: "absolute",
-          bottom: "0px",
-          fontSize: "15px",
+          position: 'absolute',
+          bottom: '0px',
+          fontSize: '15px',
         },
       },
     },
     MuiInputLabel: {
       styleOverrides: {
         root: {
-          color: "black",
-          fontSize: "15px",
-          left: "50%",
-          transform: "translate(-50%, 20px)",
-          transition: "left .2s, transform .2s",
+          color: 'black',
+          fontSize: '15px',
+          left: '50%',
+          transform: 'translate(-50%, 20px)',
+          transition: 'left .2s, transform .2s',
         },
         shrink: {
-          color: "black",
+          color: 'black',
           left: 0,
-          transform: "translate(0, 50px) scale(0.75)",
-          transition: "left .2s, transform .2s",
-          "&.Mui-focused, &.Mui-error": {
-            color: "black",
+          transform: 'translate(0, 50px) scale(0.75)',
+          transition: 'left .2s, transform .2s',
+          '&.Mui-focused, &.Mui-error': {
+            color: 'black',
           },
         },
       },
     },
   },
-})
+});
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 51406b2..9e31f8f 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -5,5 +5,5 @@
     "jsx": "react-jsx",
     /* Specify an output folder for all emitted files. */
     "outDir": "./dist/"
-  },
+  }
 }
diff --git a/client/webpack.config.js b/client/webpack.config.js
index f5aeab5..0538e30 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -1,52 +1,53 @@
-'use strict'
+'use strict';
 
-import {dirname, resolve} from 'path'
-import dotenv from 'dotenv'
-import HtmlWebpackPlugin from 'html-webpack-plugin'
-import CopyWebpackPlugin from 'copy-webpack-plugin'
-import webpack from 'webpack'
-import {fileURLToPath} from 'url';
+import { dirname, resolve } from 'path';
+import dotenv from 'dotenv';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import { fileURLToPath } from 'url';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-dotenv.config({ path: resolve(__dirname, '..', '.env') })
+dotenv.config({ path: resolve(__dirname, '..', '.env') });
 
-const mode = process.env.NODE_ENV || 'development'
+const mode = process.env.NODE_ENV || 'development';
 
-let entry = [resolve(__dirname, 'src', 'index.js')]
+let entry = [resolve(__dirname, 'src', 'index.js')];
 let plugins = [
   new HtmlWebpackPlugin({
     template: '!!raw-loader!' + resolve(__dirname, 'src', 'index.ejs'),
-    filename: 'index.ejs'
+    filename: 'index.ejs',
   }),
   new CopyWebpackPlugin({
-    patterns: [{
-      from: resolve(__dirname, 'public'),
-      to: resolve(__dirname, 'dist')
-    }]
-  })
-]
+    patterns: [
+      {
+        from: resolve(__dirname, 'public'),
+        to: resolve(__dirname, 'dist'),
+      },
+    ],
+  }),
+];
 
-let devtool = undefined
-let babelLoaderPlugins = ["@babel/plugin-transform-runtime"]
+let devtool = undefined;
+let babelLoaderPlugins = ['@babel/plugin-transform-runtime'];
 
 if (mode === 'development') {
-  const webpack = (await import('webpack')).default
-  const ReactRefreshWebpackPlugin = (await import('@pmmmwh/react-refresh-webpack-plugin')).default
-  entry = ['webpack-hot-middleware/client', ...entry]
-  plugins = [new webpack.HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin(), ...plugins]
-  babelLoaderPlugins = [...babelLoaderPlugins, "react-refresh/babel"]
-  devtool = 'inline-source-map'
+  const webpack = (await import('webpack')).default;
+  const ReactRefreshWebpackPlugin = (await import('@pmmmwh/react-refresh-webpack-plugin')).default;
+  entry = ['webpack-hot-middleware/client', ...entry];
+  plugins = [new webpack.HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin(), ...plugins];
+  babelLoaderPlugins = [...babelLoaderPlugins, 'react-refresh/babel'];
+  devtool = 'inline-source-map';
 }
-console.log(`Webpack configured for ${mode}`)
+console.log(`Webpack configured for ${mode}`);
 
 export default {
   entry,
   output: {
-    path: resolve(__dirname, "dist"),
-    filename: "bundle.js",
-    publicPath: "/",
+    path: resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+    publicPath: '/',
   },
   devtool,
   mode,
@@ -60,49 +61,47 @@
         },
         exclude: /node_modules/,
         use: {
-          loader: "babel-loader",
+          loader: 'babel-loader',
           options: {
             plugins: babelLoaderPlugins,
             presets: [
               [
-                "@babel/preset-env",
+                '@babel/preset-env',
                 {
-                  useBuiltIns: "entry",
-                  corejs: { version: "3.10", proposals: true },
+                  useBuiltIns: 'entry',
+                  corejs: { version: '3.10', proposals: true },
                 },
               ],
               [
-                "@babel/preset-react",
+                '@babel/preset-react',
                 {
-                  runtime: "automatic",
+                  runtime: 'automatic',
                 },
               ],
-              [
-                "@babel/preset-typescript"
-              ],
+              ['@babel/preset-typescript'],
             ],
           },
         },
       },
       {
         test: /\.s[ac]ss$/i,
-        use: ["style-loader", "css-loader", "sass-loader"],
+        use: ['style-loader', 'css-loader', 'sass-loader'],
       },
       {
         test: /\.svg$/,
-        use: ["@svgr/webpack"],
+        use: ['@svgr/webpack'],
       },
       {
         // test: /\.tsx?$/,
         test: /\.(js|jsx|ts|tsx)?$/,
         exclude: /node_modules/,
-        loader: "ts-loader",
+        loader: 'ts-loader',
       },
     ],
   },
   resolve: {
-    modules: ["node_modules", resolve(__dirname)],
-    extensions: [".ts", ".tsx", ".js", ".jsx"],
+    modules: ['node_modules', resolve(__dirname)],
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
   },
   plugins,
 };