diff --git a/client/redux/appSlice.ts b/client/redux/appSlice.ts
index 7ddb133..61e73ea 100644
--- a/client/redux/appSlice.ts
+++ b/client/redux/appSlice.ts
@@ -1,4 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
 import Account from '../../model/Account';
 
 // Define a type for the slice state
diff --git a/client/redux/hooks.ts b/client/redux/hooks.ts
index beb95c0..3539fad 100644
--- a/client/redux/hooks.ts
+++ b/client/redux/hooks.ts
@@ -1,5 +1,6 @@
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
-import type { RootState, AppDispatch } from './store';
+
+import type { AppDispatch, RootState } 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 f6ab51d..3c67034 100644
--- a/client/redux/store.ts
+++ b/client/redux/store.ts
@@ -1,4 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit';
+
 import appReducer from './appSlice';
 
 export const store = configureStore({
diff --git a/client/src/App.js b/client/src/App.js
index 65c9400..d4ef605 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -4,19 +4,19 @@
   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 { useEffect, useState } from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
 
-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 authManager from './AuthManager';
 import WelcomeAnimation from './components/welcome';
+import NotFoundPage from './pages/404.jsx';
+import AccountCreationDialog from './pages/accountCreation.jsx';
+import AccountSelection from './pages/accountSelection.jsx';
+import AccountSettings from './pages/accountSettings.jsx';
+import JamiAccountDialog from './pages/jamiAccountCreation.jsx';
+import JamiMessenger from './pages/JamiMessenger.jsx';
+import SignInPage from './pages/loginDialog.jsx';
+import ServerSetup from './pages/serverSetup.jsx';
 import defaultTheme from './themes/default';
 import { ThemeDemonstrator } from './themes/ThemeDemonstrator';
 
diff --git a/client/src/App.test.js b/client/src/App.test.js
index 9a9be2e..0c64377 100644
--- a/client/src/App.test.js
+++ b/client/src/App.test.js
@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+
 import App from './App';
 
 test('renders learn react link', () => {
diff --git a/client/src/components/AccountPreferences.js b/client/src/components/AccountPreferences.js
index c267af4..7ad89da 100644
--- a/client/src/components/AccountPreferences.js
+++ b/client/src/components/AccountPreferences.js
@@ -1,32 +1,30 @@
-import { useState } from 'react';
-
+import { AddCircle, DeleteRounded, GroupRounded, PhoneCallbackRounded } from '@mui/icons-material';
 import {
+  Card,
+  CardContent,
+  Grid,
+  IconButton,
   List,
   ListItem,
+  ListItemAvatar,
   ListItemIcon,
   ListItemSecondaryAction,
   ListItemText,
   ListSubheader,
-  Switch,
-  Typography,
-  Grid,
   Paper,
-  CardContent,
-  Card,
-  Toolbar,
-  IconButton,
-  ListItemAvatar,
+  Switch,
   TextField,
+  Toolbar,
+  Typography,
 } from '@mui/material';
-import { PhoneCallbackRounded, GroupRounded, DeleteRounded, AddCircle } from '@mui/icons-material';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
 
 import Account from '../../../model/Account';
-import JamiIdCard from './JamiIdCard';
+import authManager from '../AuthManager';
 import ConversationAvatar from './ConversationAvatar';
 import ConversationsOverviewCard from './ConversationsOverviewCard';
-
-import authManager from '../AuthManager';
-import { motion } from 'framer-motion';
+import JamiIdCard from './JamiIdCard';
 
 const transition = { duration: 0.3, ease: [0.43, 0.13, 0.23, 0.96] };
 
diff --git a/client/src/components/ContactList.js b/client/src/components/ContactList.js
index 7da8375..d8e6add 100644
--- a/client/src/components/ContactList.js
+++ b/client/src/components/ContactList.js
@@ -1,11 +1,12 @@
+import { Person } from '@mui/icons-material';
+import { ListItem, ListItemAvatar, ListItemText } from '@mui/material';
 import List from '@mui/material/List';
+import { useEffect, useState } from 'react';
+import Modal from 'react-modal';
+
+import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 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';
 
 const customStyles = {
   content: {
diff --git a/client/src/components/ConversationList.js b/client/src/components/ConversationList.js
index 38628ad..e25dd9c 100644
--- a/client/src/components/ConversationList.js
+++ b/client/src/components/ConversationList.js
@@ -1,11 +1,12 @@
-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';
+import List from '@mui/material/List';
+import ListSubheader from '@mui/material/ListSubheader';
 import Typography from '@mui/material/Typography';
+import { useEffect } from 'react';
+
+import Conversation from '../../../model/Conversation';
 import { useAppSelector } from '../../redux/hooks';
+import ConversationListItem from './ConversationListItem';
 
 export default function ConversationList(props) {
   const { refresh } = useAppSelector((state) => state.app);
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index aab6dc1..4bea190 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -1,15 +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 { RemoveContactIcon, VideoCallIcon } from './svgIcons';
-import { AudioCallIcon, BlockContactIcon, ContactDetailsIcon, CrossIcon, MessageIcon } from './svgIcons';
+import { Box, ListItem, ListItemAvatar, ListItemText, Stack, Typography } from '@mui/material';
 import { QRCodeCanvas } from 'qrcode.react';
+import { useState } from 'react';
+import Modal from 'react-modal';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import Conversation from '../../../model/Conversation';
 import { setRefreshFromSlice } from '../../redux/appSlice';
 import { useAppDispatch } from '../../redux/hooks';
+import authManager from '../AuthManager';
+import ConversationAvatar from './ConversationAvatar';
+import { RemoveContactIcon, VideoCallIcon } from './svgIcons';
+import { AudioCallIcon, BlockContactIcon, ContactDetailsIcon, CrossIcon, MessageIcon } from './svgIcons';
 
 const customStyles = {
   content: {
diff --git a/client/src/components/ConversationView.js b/client/src/components/ConversationView.js
index c286f8a..51e9254 100644
--- a/client/src/components/ConversationView.js
+++ b/client/src/components/ConversationView.js
@@ -1,12 +1,13 @@
+import { Box, Stack, Typography } from '@mui/material';
 import { useCallback, useContext, useEffect, useState } from 'react';
+
+import Conversation from '../../../model/Conversation';
+import { SocketContext } from '../contexts/socket';
+import { useConversationQuery, useMessagesQuery, useSendMessageMutation } from '../services/conversation';
+import ConversationAvatar from './ConversationAvatar';
+import LoadingPage from './loading';
 import MessageList from './MessageList';
 import SendMessageForm from './SendMessageForm';
-import Conversation from '../../../model/Conversation';
-import LoadingPage from './loading';
-import { Box, Stack, Typography } from '@mui/material';
-import ConversationAvatar from './ConversationAvatar';
-import { useConversationQuery, useMessagesQuery, useSendMessageMutation } from '../services/conversation';
-import { SocketContext } from '../contexts/socket';
 
 const ConversationView = (props) => {
   const socket = useContext(SocketContext);
diff --git a/client/src/components/ConversationsOverviewCard.js b/client/src/components/ConversationsOverviewCard.js
index baf5bf8..8acaf52 100644
--- a/client/src/components/ConversationsOverviewCard.js
+++ b/client/src/components/ConversationsOverviewCard.js
@@ -1,8 +1,9 @@
-import { useEffect, useState } from 'react';
 import { Card, CardActionArea, CardContent, CircularProgress, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router';
-import authManager from '../AuthManager';
+
 import Conversation from '../../../model/Conversation';
+import authManager from '../AuthManager';
 
 export default function ConversationsOverviewCard(props) {
   const navigate = useNavigate();
diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index 165ff1b..637b529 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -1,6 +1,7 @@
-import { useState } from 'react';
 import { Box, Button, Menu, MenuItem } from '@mui/material';
+import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+
 import authManager from '../AuthManager';
 
 export default function Header() {
diff --git a/client/src/components/ListItemLink.js b/client/src/components/ListItemLink.js
index 8080de2..d020503 100644
--- a/client/src/components/ListItemLink.js
+++ b/client/src/components/ListItemLink.js
@@ -1,8 +1,8 @@
-import { useMemo, forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
+import PropTypes from 'prop-types';
+import { forwardRef, useMemo } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 
 function ListItemLink(props) {
diff --git a/client/src/components/Message.js b/client/src/components/Message.js
index 7626c6e..0278d0b 100644
--- a/client/src/components/Message.js
+++ b/client/src/components/Message.js
@@ -5,6 +5,7 @@
 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';
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index 0dc4975..0d2dc10 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,16 +1,17 @@
+import { Stack } from '@mui/system';
 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 { useMemo } from 'react';
+
 import {
+  MessageBubblesGroup,
   MessageCall,
   MessageDate,
   MessageInitial,
   MessageMember,
-  MessageBubblesGroup,
-  MessageTime,
   MessageMerge,
+  MessageTime,
 } from './Message';
 
 dayjs.extend(dayOfYear);
diff --git a/client/src/components/NewContactForm.js b/client/src/components/NewContactForm.js
index db0ce31..9862453 100644
--- a/client/src/components/NewContactForm.js
+++ b/client/src/components/NewContactForm.js
@@ -1,6 +1,6 @@
-import { useState } from 'react';
-import { InputBase, InputAdornment } from '@mui/material';
 import { SearchRounded } from '@mui/icons-material';
+import { InputAdornment, InputBase } from '@mui/material';
+import { useState } from 'react';
 
 export default function NewContactForm(props) {
   const [value, setValue] = useState('');
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index d46883c..69e6b6e 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -1,5 +1,7 @@
-import { useState, useCallback } from 'react';
 import { Divider, InputBase } from '@mui/material';
+import { Stack } from '@mui/system';
+import { useCallback, useState } from 'react';
+
 import {
   RecordVideoMessageButton,
   RecordVoiceMessageButton,
@@ -7,7 +9,6 @@
   SendMessageButton,
   UploadFileButton,
 } from './buttons';
-import { Stack } from '@mui/system';
 
 export default function SendMessageForm(props) {
   const [currentMessage, setCurrentMessage] = useState('');
diff --git a/client/src/components/UsernameChooser.js b/client/src/components/UsernameChooser.js
index 0061701..57fa242 100644
--- a/client/src/components/UsernameChooser.js
+++ b/client/src/components/UsernameChooser.js
@@ -1,7 +1,8 @@
+import { SearchRounded } from '@mui/icons-material';
+import { InputAdornment, TextField } from '@mui/material';
 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;
diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
index 1b26c03..0f7666e 100644
--- a/client/src/components/buttons.js
+++ b/client/src/components/buttons.js
@@ -2,7 +2,8 @@
 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 React, { useCallback, useState } from 'react';
+
 import {
   Arrow2Icon,
   Arrow3Icon,
diff --git a/client/src/components/inputs.js b/client/src/components/inputs.js
index 42ca4be..a607a31 100644
--- a/client/src/components/inputs.js
+++ b/client/src/components/inputs.js
@@ -1,8 +1,9 @@
 import { Stack, TextField } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { useState, useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+
 import { InfoButton, ToggleVisibilityButton } from './buttons';
-import { CheckedIcon, RoundSaltireIcon, LockIcon, PenIcon, PersonIcon } from './svgIcons';
+import { CheckedIcon, LockIcon, PenIcon, PersonIcon, RoundSaltireIcon } from './svgIcons';
 
 const iconsHeight = '16px';
 const StyledCheckedIconSuccess = styled(CheckedIcon)(({ theme }) => ({
diff --git a/client/src/components/welcome.js b/client/src/components/welcome.js
index 7960820..a8738e9 100644
--- a/client/src/components/welcome.js
+++ b/client/src/components/welcome.js
@@ -1,6 +1,7 @@
 import { Button, Container } from '@mui/material';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useState } from 'react';
+
 import JamiLogo from '../../public/jami-logo-icon.svg';
 
 const list = {
diff --git a/client/src/i18n.js b/client/src/i18n.js
index b9cdf11..7c5c2f8 100644
--- a/client/src/i18n.js
+++ b/client/src/i18n.js
@@ -1,5 +1,6 @@
 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';
 
diff --git a/client/src/index.js b/client/src/index.js
index a8b2eba..51e6676 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,16 +1,17 @@
 '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 './i18n';
 
 // import config from "../sentry-client.config.json"
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Provider } from 'react-redux';
+import { BrowserRouter as Router } from 'react-router-dom';
 import socketio from 'socket.io-client';
+
+import { store } from '../redux/store';
+import App from './App.js';
 import { SocketProvider } from './contexts/socket.js';
 
 const queryClient = new QueryClient({
diff --git a/client/src/pages/accountCreation.jsx b/client/src/pages/accountCreation.jsx
index f4d3921..cd948a2 100644
--- a/client/src/pages/accountCreation.jsx
+++ b/client/src/pages/accountCreation.jsx
@@ -1,5 +1,6 @@
-import { Container, Card, CardContent, Typography, List, Avatar, Divider } from '@mui/material';
 import { DialerSipRounded, GroupOutlined, RoomRounded } from '@mui/icons-material';
+import { Avatar, Card, CardContent, Container, Divider, List, Typography } from '@mui/material';
+
 import ListItemLink from '../components/ListItemLink';
 
 export default function AccountCreationDialog(props) {
diff --git a/client/src/pages/accountSelection.jsx b/client/src/pages/accountSelection.jsx
index 77c033a..8d96885 100644
--- a/client/src/pages/accountSelection.jsx
+++ b/client/src/pages/accountSelection.jsx
@@ -1,14 +1,15 @@
-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 Account from '../../../model/Account';
-import LoadingPage from '../components/loading';
-import ListItemLink from '../components/ListItemLink';
-import ConversationAvatar from '../components/ConversationAvatar';
 import { AddRounded } from '@mui/icons-material';
-import { useNavigate } from 'react-router';
+import { Avatar, Card, CardHeader, Container, List } from '@mui/material';
 import { motion } from 'framer-motion';
+import { Fragment, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+
+import Account from '../../../model/Account';
+import authManager from '../AuthManager';
+import ConversationAvatar from '../components/ConversationAvatar';
+import Header from '../components/Header';
+import ListItemLink from '../components/ListItemLink';
+import LoadingPage from '../components/loading';
 
 const variants = {
   enter: { opacity: 1, y: 0 },
diff --git a/client/src/pages/accountSettings.jsx b/client/src/pages/accountSettings.jsx
index e7d08c2..ed580e2 100644
--- a/client/src/pages/accountSettings.jsx
+++ b/client/src/pages/accountSettings.jsx
@@ -1,12 +1,13 @@
+import { CircularProgress, Container } from '@mui/material';
 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 { useAppDispatch } from '../../redux/hooks';
 import { setAccountId, setAccountObject } from '../../redux/appSlice';
+import { useAppDispatch } from '../../redux/hooks';
+import authManager from '../AuthManager';
+import AccountPreferences from '../components/AccountPreferences';
+import Header from '../components/Header';
 
 const AccountSettings = (props) => {
   console.log('ACCOUNT SETTINGS', props.account);
diff --git a/client/src/pages/addContactPage.jsx b/client/src/pages/addContactPage.jsx
index 0fbd21b..c1b242f 100644
--- a/client/src/pages/addContactPage.jsx
+++ b/client/src/pages/addContactPage.jsx
@@ -1,10 +1,10 @@
+import GroupAddRounded from '@mui/icons-material/GroupAddRounded';
+import { Box, Card, CardContent, Container, Fab, Typography } from '@mui/material';
 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 { useAppDispatch } from '../../redux/hooks';
 import { setRefreshFromSlice } from '../../redux/appSlice';
+import { useAppDispatch } from '../../redux/hooks';
+import authManager from '../AuthManager';
 
 export default function AddContactPage(props) {
   const navigate = useNavigate();
diff --git a/client/src/pages/jamiAccountCreation.jsx b/client/src/pages/jamiAccountCreation.jsx
index 8d47b48..fbff909 100644
--- a/client/src/pages/jamiAccountCreation.jsx
+++ b/client/src/pages/jamiAccountCreation.jsx
@@ -1,10 +1,11 @@
-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 { Box, Card, CardActions, CardContent, Container, Fab, Typography } from '@mui/material';
+import { useState } from 'react';
 import { useNavigate } from 'react-router';
 
+import authManager from '../AuthManager';
+import UsernameChooser from '../components/UsernameChooser';
+
 export default function JamiAccountDialog(props) {
   const [name, setName] = useState('');
   const [loading, setLoading] = useState(false);
diff --git a/client/src/pages/loginDialog.jsx b/client/src/pages/loginDialog.jsx
index 9a7ff0c..34070d7 100644
--- a/client/src/pages/loginDialog.jsx
+++ b/client/src/pages/loginDialog.jsx
@@ -1,15 +1,14 @@
-import { Component } from 'react';
-
 import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
-import Link from '@mui/material/Link';
-import Typography from '@mui/material/Typography';
-import DialogTitle from '@mui/material/DialogTitle';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Link from '@mui/material/Link';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { Component } from 'react';
 
 import authManager from '../AuthManager';
 
diff --git a/client/src/pages/messenger.jsx b/client/src/pages/messenger.jsx
index f8d5907..3108fe6 100644
--- a/client/src/pages/messenger.jsx
+++ b/client/src/pages/messenger.jsx
@@ -1,18 +1,18 @@
+import { Stack } from '@mui/material';
 import { useEffect, useState } from 'react';
-import Header from '../components/Header';
-import NewContactForm from '../components/NewContactForm';
+import { useParams } from 'react-router';
 
+import Contact from '../../../model/Contact';
+import Conversation from '../../../model/Conversation';
+import { useAppSelector } from '../../redux/hooks';
+import authManager from '../AuthManager';
 //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 ConversationView from '../components/ConversationView';
-import AddContactPage from './addContactPage.jsx';
+import Header from '../components/Header';
 import LoadingPage from '../components/loading';
-import { useParams } from 'react-router';
-import { Stack } from '@mui/material';
-import { useAppSelector } from '../../redux/hooks';
+import NewContactForm from '../components/NewContactForm';
+import AddContactPage from './addContactPage.jsx';
 
 const Messenger = (props) => {
   const { refresh } = useAppSelector((state) => state.app);
diff --git a/client/src/pages/serverConfiguration.jsx b/client/src/pages/serverConfiguration.jsx
index 8ac85df..da6250a 100644
--- a/client/src/pages/serverConfiguration.jsx
+++ b/client/src/pages/serverConfiguration.jsx
@@ -1,9 +1,10 @@
-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 Container from '@mui/material/Container';
+
 import Account from '../../../model/Account';
+import authManager from '../AuthManager';
+import AccountPreferences from '../components/AccountPreferences';
+import Header from '../components/Header';
 
 const ServerOverview = (props) => {
   this.accountId = props.accountId || props.match.params.accountId;
diff --git a/client/src/pages/serverSetup.jsx b/client/src/pages/serverSetup.jsx
index cf9b3eb..95fc032 100644
--- a/client/src/pages/serverSetup.jsx
+++ b/client/src/pages/serverSetup.jsx
@@ -1,7 +1,7 @@
+import GroupAddRounded from '@mui/icons-material/GroupAddRounded';
+import { Box, Card, CardContent, Container, Fab, Input, Typography } from '@mui/material';
 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';
 
 export default function ServerSetup(props) {
diff --git a/client/src/themes/ThemeDemonstrator.js b/client/src/themes/ThemeDemonstrator.js
index 6f12209..d989569 100644
--- a/client/src/themes/ThemeDemonstrator.js
+++ b/client/src/themes/ThemeDemonstrator.js
@@ -1,13 +1,14 @@
 import { Button, Stack, Switch, ThemeProvider, Typography } from '@mui/material';
+
 import {
-  CancelPictureButton,
-  EditPictureButton,
-  UploadPictureButton,
-  TakePictureButton,
-  InfoButton,
-  TipButton,
   BackButton,
+  CancelPictureButton,
   CloseButton,
+  EditPictureButton,
+  InfoButton,
+  TakePictureButton,
+  TipButton,
+  UploadPictureButton,
 } from '../components/buttons';
 import { NickNameInput, PasswordInput, RegularInput, UsernameInput } from '../components/inputs';
 import defaultTheme from './default';
diff --git a/client/webpack.config.js b/client/webpack.config.js
index 0538e30..583b3aa 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -1,9 +1,9 @@
 'use strict';
 
-import { dirname, resolve } from 'path';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
 import dotenv from 'dotenv';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-import CopyWebpackPlugin from 'copy-webpack-plugin';
+import { dirname, resolve } from 'path';
 import { fileURLToPath } from 'url';
 
 const __filename = fileURLToPath(import.meta.url);