diff --git a/client/src/components/AccountPreferences.tsx b/client/src/components/AccountPreferences.tsx
index f0c5d31..2086f14 100644
--- a/client/src/components/AccountPreferences.tsx
+++ b/client/src/components/AccountPreferences.tsx
@@ -39,7 +39,6 @@
 import { useState } from 'react';
 
 import { useAuthContext } from '../contexts/AuthProvider';
-import { apiUrl } from '../utils/constants';
 import ConversationAvatar from './ConversationAvatar';
 import ConversationsOverviewCard from './ConversationsOverviewCard';
 import JamiIdCard from './JamiIdCard';
@@ -56,18 +55,8 @@
   },
 };
 
-type AccountPreferencesProps = {
-  // TODO: Remove account prop after migration to new server
-  account?: Account;
-};
-
-export default function AccountPreferences({ account: _account }: AccountPreferencesProps) {
-  const authContext = useAuthContext(true);
-  const account = _account ?? authContext?.account;
-  const token = authContext?.token;
-  if (!account || !token) {
-    throw new Error('Account not defined');
-  }
+export default function AccountPreferences() {
+  const { account, axiosInstance } = useAuthContext();
 
   const devices: string[][] = [];
   const accountDevices = account.getDevices();
@@ -82,40 +71,21 @@
 
   const [details, setDetails] = useState(account.getDetails());
 
-  const addModerator = () => {
+  const addModerator = async () => {
     if (defaultModeratorUri) {
-      fetch(new URL(`/default-moderators/${defaultModeratorUri}`, apiUrl), {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-        method: 'PUT',
-      });
+      await axiosInstance.put(`/default-moderators/${defaultModeratorUri}`);
       setDefaultModeratorUri('');
     }
   };
 
-  const removeModerator = (uri: string) =>
-    fetch(new URL(`/default-moderators/${uri}`, apiUrl), {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-      method: 'DELETE',
-    });
+  const removeModerator = async (uri: string) => await axiosInstance.delete(`/default-moderators/${uri}`);
 
-  const handleToggle = (key: keyof AccountDetails, value: boolean) => {
+  const handleToggle = async (key: keyof AccountDetails, value: boolean) => {
     console.log(`handleToggle ${key} ${value}`);
     const newDetails: Partial<AccountDetails> = {};
     newDetails[key] = value ? 'true' : 'false';
     console.log(newDetails);
-    fetch(new URL('/account', apiUrl), {
-      method: 'PATCH',
-      headers: {
-        Accept: 'application/json',
-        Authorization: `Bearer ${token}`,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(newDetails),
-    });
+    await axiosInstance.patch('/account', newDetails);
     setDetails({ ...account.updateDetails(newDetails) });
   };
 
diff --git a/client/src/components/ContactList.jsx b/client/src/components/ContactList.jsx
index 3bc040b..578d3c9 100644
--- a/client/src/components/ContactList.jsx
+++ b/client/src/components/ContactList.jsx
@@ -23,7 +23,6 @@
 
 import { useAuthContext } from '../contexts/AuthProvider';
 import { useAppDispatch, useAppSelector } from '../redux/hooks';
-import { apiUrl } from '../utils/constants';
 import ConversationAvatar from './ConversationAvatar';
 
 const customStyles = {
@@ -38,7 +37,7 @@
 };
 
 export default function ContactList() {
-  const { token } = useAuthContext();
+  const { axiosInstance } = useAuthContext();
   const { accountId } = useAppSelector((state) => state.userInfo);
   const dispatch = useAppDispatch();
 
@@ -59,22 +58,19 @@
   const closeModalDetails = () => setModalDetailsIsOpen(false);
   const closeModalDelete = () => setModalDeleteIsOpen(false);
 
-  const getContactDetails = () => {
+  const getContactDetails = async () => {
     const controller = new AbortController();
-    fetch(new URL(`/contacts/${currentContact.id}`, apiUrl), {
-      signal: controller.signal,
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    })
-      .then((res) => res.json())
-      .then((result) => {
-        console.log('CONTACT LIST - DETAILS: ', result);
-      })
-      .catch((e) => console.log('ERROR GET CONTACT DETAILS: ', e));
+    try {
+      const data = await axiosInstance.get(`/contacts/${currentContact.id}`, {
+        signal: controller.signal,
+      });
+      console.log('CONTACT LIST - DETAILS: ', data);
+    } catch (e) {
+      console.log('ERROR GET CONTACT DETAILS: ', e);
+    }
   };
 
-  const removeOrBlock = (block = false) => {
+  const removeOrBlock = async (block = false) => {
     console.log('REMOVE');
     setBlockOrRemove(false);
     const controller = new AbortController();
@@ -82,33 +78,29 @@
     if (block) {
       url += '/block';
     }
-    fetch(new URL(url, apiUrl), {
-      signal: controller.signal,
-      method: block ? 'POST' : 'DELETE',
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    })
-      .then((res) => res.json())
-      .catch((e) => console.log(`ERROR ${block ? 'blocking' : 'removing'} CONTACT : `, e));
+    try {
+      await axiosInstance(url, {
+        signal: controller.signal,
+        method: block ? 'POST' : 'DELETE',
+      });
+    } catch (e) {
+      console.log(`ERROR ${block ? 'blocking' : 'removing'} CONTACT : `, e);
+    }
     closeModalDelete();
   };
 
   useEffect(() => {
     const controller = new AbortController();
-    fetch(new URL(`/contacts`, apiUrl), {
-      signal: controller.signal,
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    })
-      .then((res) => res.json())
-      .then((result) => {
-        console.log('CONTACTS: ', result);
-        setContacts(result);
+    axiosInstance
+      .get(`/contacts`, {
+        signal: controller.signal,
+      })
+      .then(({ data }) => {
+        console.log('CONTACTS: ', data);
+        setContacts(data);
       });
     return () => controller.abort();
-  }, [token]);
+  }, [axiosInstance]);
 
   return (
     <div className="rooms-list">
diff --git a/client/src/components/ConversationListItem.tsx b/client/src/components/ConversationListItem.tsx
index 5f10f6e..aeef7de 100644
--- a/client/src/components/ConversationListItem.tsx
+++ b/client/src/components/ConversationListItem.tsx
@@ -36,7 +36,6 @@
 import { useAuthContext } from '../contexts/AuthProvider';
 import { setRefreshFromSlice } from '../redux/appSlice';
 import { useAppDispatch } from '../redux/hooks';
-import { apiUrl } from '../utils/constants';
 import ConversationAvatar from './ConversationAvatar';
 import {
   AudioCallIcon,
@@ -89,7 +88,7 @@
 };
 
 export default function ConversationListItem({ conversation }: ConversationListItemProps) {
-  const { token } = useAuthContext();
+  const { axiosInstance } = useAuthContext();
   const { conversationId, contactId } = useParams();
   const dispatch = useAppDispatch();
 
@@ -115,47 +114,36 @@
   const closeModalDetails = () => setModalDetailsIsOpen(false);
   const closeModalDelete = () => setModalDeleteIsOpen(false);
 
-  const getContactDetails = () => {
+  const getContactDetails = async () => {
     const controller = new AbortController();
-    fetch(new URL(`/contacts/${userId}`, apiUrl), {
-      signal: controller.signal,
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    })
-      .then((res) => res.json())
-      .then((result) => {
-        console.log('CONTACT LIST - DETAILS: ', result);
-      })
-      .catch((e) => console.log('ERROR GET CONTACT DETAILS: ', e));
+    try {
+      const data = await axiosInstance.get(`/contacts/${userId}`, {
+        signal: controller.signal,
+      });
+      console.log('CONTACT LIST - DETAILS: ', data);
+    } catch (e) {
+      console.log('ERROR GET CONTACT DETAILS: ', e);
+    }
   };
 
-  const removeOrBlock = (block = false) => {
+  const removeOrBlock = async (block = false) => {
     setBlockOrRemove(false);
 
-    console.log('EEEH', conversation.getAccountId(), userId);
-
     const controller = new AbortController();
     let url = `/contacts/${userId}`;
     if (block) {
       url += '/block';
     }
-    fetch(new URL(url, apiUrl), {
-      signal: controller.signal,
-      method: block ? 'POST' : 'DELETE',
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    })
-      .then((res) => res.json())
-      .then(() => {
-        console.log('propre');
-        dispatch(setRefreshFromSlice());
-      })
-      .catch((e) => {
-        console.log(`ERROR ${block ? 'blocking' : 'removing'} CONTACT : `, e);
-        dispatch(setRefreshFromSlice());
+    try {
+      await axiosInstance(url, {
+        signal: controller.signal,
+        method: block ? 'POST' : 'DELETE',
       });
+      dispatch(setRefreshFromSlice());
+    } catch (e) {
+      console.error(`Error ${block ? 'blocking' : 'removing'} contact : `, e);
+      dispatch(setRefreshFromSlice());
+    }
     closeModalDelete();
   };
 
diff --git a/client/src/components/ConversationsOverviewCard.tsx b/client/src/components/ConversationsOverviewCard.tsx
index 8a73cc2..84d022d 100644
--- a/client/src/components/ConversationsOverviewCard.tsx
+++ b/client/src/components/ConversationsOverviewCard.tsx
@@ -21,10 +21,9 @@
 import { useNavigate } from 'react-router';
 
 import { useAuthContext } from '../contexts/AuthProvider';
-import { apiUrl } from '../utils/constants';
 
 export default function ConversationsOverviewCard() {
-  const { token, account } = useAuthContext();
+  const { axiosInstance, account } = useAuthContext();
   const navigate = useNavigate();
 
   const [conversationCount, setConversationCount] = useState<number | undefined>();
@@ -33,19 +32,16 @@
 
   useEffect(() => {
     const controller = new AbortController();
-    fetch(new URL('/conversations', apiUrl), {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-      signal: controller.signal,
-    })
-      .then((res) => res.json())
-      .then((result: Conversation[]) => {
-        console.log(result);
-        setConversationCount(result.length);
+    axiosInstance
+      .get<Conversation[]>('/conversations', {
+        signal: controller.signal,
+      })
+      .then(({ data }) => {
+        console.log(data);
+        setConversationCount(data.length);
       });
     return () => controller.abort(); // crash on React18
-  }, [token, accountId]);
+  }, [axiosInstance, accountId]);
 
   return (
     <Card onClick={() => navigate(`/`)}>
diff --git a/client/src/components/UsernameChooser.jsx b/client/src/components/UsernameChooser.jsx
index 3c1f584..77c1d73 100644
--- a/client/src/components/UsernameChooser.jsx
+++ b/client/src/components/UsernameChooser.jsx
@@ -17,8 +17,8 @@
  */
 import { SearchRounded } from '@mui/icons-material';
 import { InputAdornment, TextField } from '@mui/material';
+import axios from 'axios';
 import { useEffect, useState } from 'react';
-import usePromise from 'react-fetch-hook/usePromise';
 
 import { apiUrl } from '../utils/constants.js';
 
@@ -26,17 +26,29 @@
 
 export default function UsernameChooser({ setName, ...props }) {
   const [query, setQuery] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState();
+  const [data, setData] = useState();
 
-  const { isLoading, data, error } = usePromise(
-    () =>
-      isInputValid(query)
-        ? fetch(new URL(`/ns/username/${query}`, apiUrl)).then((res) => {
-            if (res.status === 200) return res.json();
-            else throw res.status;
-          })
-        : new Promise((res, rej) => rej(400)),
-    [query]
-  );
+  useEffect(() => {
+    if (isInputValid(query)) {
+      setIsLoading(true);
+      axios
+        .get(`/ns/username/${query}`, {
+          baseURL: apiUrl,
+        })
+        .then((res) => {
+          setIsLoading(false);
+          if (res.status === 200) {
+            setData(res.data);
+          } else {
+            throw res.status;
+          }
+        });
+    } else {
+      setError(400);
+    }
+  }, [query]);
 
   useEffect(() => {
     if (!isLoading) {