diff --git a/client/src/components/CallButtons.tsx b/client/src/components/CallButtons.tsx
index dbaef70..594a1cc 100644
--- a/client/src/components/CallButtons.tsx
+++ b/client/src/components/CallButtons.tsx
@@ -18,7 +18,7 @@
 
 import { styled } from '@mui/material/styles';
 import React, { useContext, useMemo } from 'react';
-import { Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import { WebRTCContext } from '../contexts/WebRTCProvider';
 import { ExpandableButton, ExpandableButtonProps, ToggleIconButton } from './Button';
@@ -57,6 +57,7 @@
 
 const ColoredCallButton = styled(
   ({
+    buttonColor,
     ...props
   }: ExpandableButtonProps & {
     buttonColor: ColoredCallButtonColor;
@@ -102,25 +103,26 @@
 };
 
 export const CallingScreenShareButton = (props: ExpandableButtonProps) => {
+  const { t } = useTranslation();
   return (
     <CallButton
       aria-label="screen share"
       Icon={ScreenShareArrowIcon}
       expandMenuOptions={[
         {
-          description: <Trans i18nKey="share_screen" />,
+          description: t('share_screen'),
           icon: <ScreenShareRegularIcon />,
         },
         {
-          description: <Trans i18nKey="share_window" />,
+          description: t('share_window'),
           icon: <WindowIcon />,
         },
         {
-          description: <Trans i18nKey="share_screen_area" />,
+          description: t('share_screen_area'),
           icon: <ScreenShareScreenAreaIcon />,
         },
         {
-          description: <Trans i18nKey="share_file" />,
+          description: t('share_file'),
           icon: <FileIcon />,
         },
       ]}
diff --git a/client/src/components/ConversationListItem.tsx b/client/src/components/ConversationListItem.tsx
index 91dd0f1..2f07076 100644
--- a/client/src/components/ConversationListItem.tsx
+++ b/client/src/components/ConversationListItem.tsx
@@ -29,7 +29,7 @@
 import { Conversation } from 'jami-web-common';
 import { QRCodeCanvas } from 'qrcode.react';
 import { MouseEvent, useState } from 'react';
-import { Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import Modal from 'react-modal';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -95,6 +95,7 @@
   const pathId = conversationId || contactId;
   const isSelected = conversation.getDisplayUri() === pathId;
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
   const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null);
   const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false);
@@ -161,9 +162,7 @@
             <ListItemIcon>
               <MessageIcon style={{ color: iconColor }} />
             </ListItemIcon>
-            <ListItemText>
-              <Trans i18nKey="conversation_message" />
-            </ListItemText>
+            <ListItemText>{t('conversation_message')}</ListItemText>
           </MenuItem>
           <MenuItem
             onClick={() => {
@@ -173,9 +172,7 @@
             <ListItemIcon>
               <AudioCallIcon style={{ color: iconColor }} />
             </ListItemIcon>
-            <ListItemText>
-              <Trans i18nKey="conversation_start_audiocall" />
-            </ListItemText>
+            <ListItemText>{t('conversation_start_audiocall')}</ListItemText>
           </MenuItem>
 
           <MenuItem
@@ -186,9 +183,7 @@
             <ListItemIcon>
               <VideoCallIcon style={{ color: iconColor }} />
             </ListItemIcon>
-            <ListItemText>
-              <Trans i18nKey="conversation_start_videocall" />
-            </ListItemText>
+            <ListItemText>{t('conversation_start_videocall')}</ListItemText>
           </MenuItem>
 
           {isSelected && (
@@ -201,9 +196,7 @@
               <ListItemIcon>
                 <CancelIcon style={{ color: iconColor }} />
               </ListItemIcon>
-              <ListItemText>
-                <Trans i18nKey="conversation_close" />
-              </ListItemText>
+              <ListItemText>{t('conversation_close')}</ListItemText>
             </MenuItem>
           )}
 
@@ -218,9 +211,7 @@
             <ListItemIcon>
               <ContactDetailsIcon style={{ color: iconColor }} />
             </ListItemIcon>
-            <ListItemText>
-              <Trans i18nKey="conversation_details" />
-            </ListItemText>
+            <ListItemText>{t('conversation_details')}</ListItemText>
           </MenuItem>
 
           <MenuItem
@@ -233,9 +224,7 @@
             <ListItemIcon>
               <BlockContactIcon style={{ color: iconColor }} />
             </ListItemIcon>
-            <ListItemText>
-              <Trans i18nKey="conversation_block_contact" />
-            </ListItemText>
+            <ListItemText>{t('conversation_block_contact')}</ListItemText>
           </MenuItem>
 
           <MenuItem
@@ -248,9 +237,7 @@
             <ListItemIcon>
               <RemoveContactIcon style={{ color: iconColor }} />
             </ListItemIcon>
-            <ListItemText>
-              <Trans i18nKey="conversation_delete_contact" />
-            </ListItemText>
+            <ListItemText>{t('conversation_delete_contact')}</ListItemText>
           </MenuItem>
         </Menu>
       </div>
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 6276fa4..8373601 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -17,11 +17,13 @@
  */
 import { Box, Button, Menu, MenuItem } from '@mui/material';
 import { MouseEvent, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import { useAuthContext } from '../contexts/AuthProvider';
 
 export default function Header() {
+  const { t } = useTranslation();
   const { logout } = useAuthContext();
 
   const navigate = useNavigate();
@@ -39,7 +41,7 @@
       <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
         <MenuItem onClick={goToContacts}>Contacts</MenuItem>
         <MenuItem onClick={() => navigate('/settings')}>Account settings</MenuItem>
-        <MenuItem onClick={logout}>Log out</MenuItem>
+        <MenuItem onClick={logout}>{t('logout')}</MenuItem>
       </Menu>
     </Box>
   );
diff --git a/client/src/components/Input.tsx b/client/src/components/Input.tsx
index 40d55b6..b21b2d2 100644
--- a/client/src/components/Input.tsx
+++ b/client/src/components/Input.tsx
@@ -53,7 +53,7 @@
 export type PasswordStatus = StrengthValueCode | 'registration_failed';
 
 export type InputProps<StatusType extends NameStatus | PasswordStatus> = TextFieldProps & {
-  status: StatusType;
+  status?: StatusType;
   infoButtonProps?: IconButtonProps;
   success?: boolean;
   tooltipTitle: string;
@@ -63,7 +63,7 @@
   infoButtonProps,
   onChange: _onChange,
   success,
-  status,
+  status = 'default',
   tooltipTitle,
   ...props
 }: InputProps<NameStatus>) => {
@@ -142,7 +142,7 @@
   onChange: _onChange,
   success,
   tooltipTitle,
-  status,
+  status = 'default',
   ...props
 }: InputProps<PasswordStatus>) => {
   const { t } = useTranslation();
diff --git a/client/src/locale/en/translation.json b/client/src/locale/en/translation.json
index 9210cdd..8a2ee50 100644
--- a/client/src/locale/en/translation.json
+++ b/client/src/locale/en/translation.json
@@ -16,6 +16,7 @@
   "conversation_title_three": "{{member0}}, {{member1}} and {{member2}}",
   "conversation_title_four": "{{member0}}, {{member1}}, {{member2}}, +1 other member",
   "conversation_title_more": "{{member0}}, {{member1}}, {{member2}}, +{{excess}} other members",
+  "logout": "Log out",
   "username_input_helper_text_success": "Username available",
   "username_input_helper_text_taken": "Username already taken",
   "username_input_helper_text_invalid": "Username doesn't follow required pattern",
@@ -53,35 +54,39 @@
   "message_input_placeholder_two": "Write to {{member0}} and {{member1}}",
   "message_input_placeholder_three": "Write to {{member0}}, {{member1}} and {{member2}}",
   "message_input_placeholder_four": "Write to {{member0}}, {{member1}}, {{member2}}, +1 other member",
-  "message_input_placeholder_more": "Write to {{member01}}, {{member1}}, {{member2}}, +{{excess}} other members",
-  "conversation_add_contact": "",
+  "message_input_placeholder_more": "Write to {{member0}}, {{member1}}, {{member2}}, +{{excess}} other members",
+  "conversation_add_contact": "Add contact",
   "calling": "Calling...",
   "connecting": "Connecting...",
   "incoming_call_{medium}": "",
   "end_call": "End call",
   "login_username_not_found": "Username not found",
   "login_invalid_password": "Incorrect password",
-  "login_form_title": "LOGIN",
+  "login_form_title": "Login",
   "login_form_username_tooltip": "The username you registered with",
   "login_form_password_tooltip": "The password you registered with",
-  "login_form_submit_button": "LOG IN",
+  "login_form_submit_button": "Log in",
   "login_form_to_registration_text": "Need an account?",
-  "login_form_to_registration_link": "REGISTER",
+  "login_form_to_registration_link": "Register",
   "registration_success": "You've successfully registered! — Logging you in...",
-  "registration_form_title": "REGISTRATION",
+  "registration_form_title": "Registration",
   "registration_form_username_tooltip": "Username may be from 3 to 32 chraracters long and contain a-z, A-Z, -, _\n\nClick for more details",
   "registration_form_password_tooltip": "Choose a password hard to guess for others but easy to remember for you, it must be at least 10 characters. Your account won't be recovered if you forget it!\n\nClick for more details",
-  "registration_form_submit_button": "REGISTER",
+  "registration_form_submit_button": "Register",
   "registration_form_to_login_text": "Already have an account?",
-  "registration_form_to_login_link": "LOG IN",
-  "logout": "",
-  "setup_login_title": "",
-  "setup_login_welcome": "",
-  "setup_login_admin_creation": "",
-  "password_placeholder": "",
-  "setup_login_password_placeholder_creation": "",
-  "setup_login_password_placeholder_repeat": "",
-  "admin_creation_submit_button": "",
+  "registration_form_to_login_link": "Log in",
+  "setup_login_title": "Jami web node setup",
+  "setup_login_welcome": "Welcome to the Jami web node setup.",
+  "setup_login_admin_creation": "Let's start by creating a new administrator account to control access to the server configuration.",
+  "password_placeholder": "Password",
+  "setup_login_password_placeholder_creation": "New password",
+  "setup_login_password_placeholder_repeat": "Repeat password",
+  "admin_creation_submit_button": "Create admin account",
   "severity_error": "Error",
-  "severity_success": "Success"
+  "severity_success": "Success",
+  "incoming_call_audio": "Incoming audio call from {{member0}}",
+  "incoming_call_video": "Incoming video call from {{member0}}",
+  "refuse_call": "Refuse",
+  "accept_call_audio": "Accept in audio",
+  "accept_call_video": "Accept in video"
 }
diff --git a/client/src/locale/fr/translation.json b/client/src/locale/fr/translation.json
index b519e9d..272b4f1 100644
--- a/client/src/locale/fr/translation.json
+++ b/client/src/locale/fr/translation.json
@@ -15,7 +15,8 @@
   "conversation_title_two": "{{member0}} et {{member1}}",
   "conversation_title_three": "{{member0}}, {{member1}} et {{member2}}",
   "conversation_title_four": "{{member0}}, {{member1}}, {{member2}}, +1 autre membre",
-  "conversation_title_more": "{{member01}}, {{member1}}, {{member2}}, +{{excess}} autres membres",
+  "conversation_title_more": "{{member0}}, {{member1}}, {{member2}}, +{{excess}} autres membres",
+  "logout": "Se déconnecter",
   "username_input_helper_text_success": "Nom d'utilisateur disponible",
   "username_input_helper_text_taken": "Nom d'utilisateur déjà pris",
   "username_input_helper_text_invalid": "Le nom d'utilisateur ne suit pas le modèle",
@@ -53,35 +54,39 @@
   "message_input_placeholder_two": "Écrire à {{member0}} et {{member1}}",
   "message_input_placeholder_three": "Écrire à {{member0}}, {{member1}} et {{member2}}",
   "message_input_placeholder_four": "Écrire à {{member0}}, {{member1}}, {{member2}}, +1 autre membre",
-  "message_input_placeholder_more": "Écrire à {{member01}}, {{member1}}, {{member2}}, +{{excess}} autres membres",
-  "conversation_add_contact": "",
+  "message_input_placeholder_more": "Écrire à {{member0}}, {{member1}}, {{member2}}, +{{excess}} autres membres",
+  "conversation_add_contact": "Ajouter le contact",
   "calling": "Appel en cours...",
   "connecting": "Connexion en cours...",
   "incoming_call_{medium}": "",
   "end_call": "Fin d'appel",
   "login_username_not_found": "Nom d'utilisateur introuvable",
   "login_invalid_password": "Mot de passe incorrect",
-  "login_form_title": "CONNEXION",
+  "login_form_title": "Connexion",
   "login_form_username_tooltip": "Le nom d'utilisateur avec lequel vous vous êtes inscrit(e)",
   "login_form_password_tooltip": "Le mot de passe avec lequel vous vous êtes inscrit(e)",
-  "login_form_submit_button": "SE CONNECTER",
+  "login_form_submit_button": "Se connecter",
   "login_form_to_registration_text": "Besoin d'un compte?",
-  "login_form_to_registration_link": "S'INSCRIRE",
+  "login_form_to_registration_link": "S'inscrire",
   "registration_success": "Inscription réussie! — Connexion en cours...",
-  "registration_form_title": "INSCRIPTION",
+  "registration_form_title": "Inscription",
   "registration_form_username_tooltip": "Le nom d'utilisateur doit avoir de 3 à 32 caractères et contenir a-z, A-Z, -, _\n\nCliquer pour plus de détails",
   "registration_form_password_tooltip": "Choisissez un mot de passe difficile à deviner pour les autres, mais facile à retenir pour vous, il doit avoir au moins 10 caractères. Votre compte ne sera pas récupéré si vous l'oubliez!\n\nCliquer pour plus de détails",
-  "registration_form_submit_button": "S'INSCRIRE",
+  "registration_form_submit_button": "S'inscrire",
   "registration_form_to_login_text": "Déjà inscrit?",
-  "registration_form_to_login_link": "SE CONNECTER",
-  "logout": "",
-  "setup_login_title": "",
-  "setup_login_welcome": "",
-  "setup_login_admin_creation": "",
-  "password_placeholder": "",
-  "setup_login_password_placeholder_creation": "",
-  "setup_login_password_placeholder_repeat": "",
-  "admin_creation_submit_button": "",
+  "registration_form_to_login_link": "Se connecter",
+  "setup_login_title": "Configuration du noeud web Jami",
+  "setup_login_welcome": "Bienvenue à la configuration du noeud web Jami.",
+  "setup_login_admin_creation": "Commençons par créer un nouveau compte administrateur pour contrôler l'accès à la configuration du serveur.",
+  "password_placeholder": "Mot de passe",
+  "setup_login_password_placeholder_creation": "Nouveau mot de passe",
+  "setup_login_password_placeholder_repeat": "Répéter le mot de passe",
+  "admin_creation_submit_button": "Créer un compte admin",
   "severity_error": "Erreur",
-  "severity_success": "Succès"
+  "severity_success": "Succès",
+  "incoming_call_audio": "Appel audio entrant de {{member0}}",
+  "incoming_call_video": "Appel vidéo entrant de {{member0}}",
+  "refuse_call": "Refuser",
+  "accept_call_audio": "Accepter en audio",
+  "accept_call_video": "Accepter en vidéo"
 }
diff --git a/client/src/pages/AddContactPage.tsx b/client/src/pages/AddContactPage.tsx
index 442b405..5e3c375 100644
--- a/client/src/pages/AddContactPage.tsx
+++ b/client/src/pages/AddContactPage.tsx
@@ -17,7 +17,7 @@
  */
 import GroupAddRounded from '@mui/icons-material/GroupAddRounded';
 import { Box, Card, CardContent, Container, Fab, Typography } from '@mui/material';
-import { Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import { useAuthContext } from '../contexts/AuthProvider';
@@ -29,6 +29,7 @@
 };
 
 export default function AddContactPage({ contactId }: AddContactPageProps) {
+  const { t } = useTranslation();
   const { axiosInstance } = useAuthContext();
   const navigate = useNavigate();
 
@@ -52,7 +53,7 @@
           <Box style={{ textAlign: 'center', marginTop: 16 }}>
             <Fab variant="extended" color="primary" onClick={handleClick}>
               <GroupAddRounded />
-              <Trans key="conversation_add_contact" />
+              {t('conversation_add_contact')}
             </Fab>
           </Box>
         </CardContent>
diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
index 3484858..db1e19f 100644
--- a/client/src/pages/CallInterface.tsx
+++ b/client/src/pages/CallInterface.tsx
@@ -248,7 +248,7 @@
             >
               {hiddenButtons.map((SecondaryButton, i) => (
                 <Fragment key={i}>
-                  <SecondaryButton vertical />
+                  <SecondaryButton isVertical />
                 </Fragment>
               ))}
             </Stack>
diff --git a/client/src/pages/CallPending.tsx b/client/src/pages/CallPending.tsx
index 27d28e5..573418a 100644
--- a/client/src/pages/CallPending.tsx
+++ b/client/src/pages/CallPending.tsx
@@ -17,7 +17,7 @@
  */
 
 import { Box, CircularProgress, Grid, Stack, Typography } from '@mui/material';
-import { Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import {
   CallingAnswerAudioButton,
@@ -114,54 +114,57 @@
 };
 
 export const CallPendingCallerInterface = ({ caller }: CallPendingProps) => {
+  const { t } = useTranslation();
   // TODO: Remove the dummy name
   const defaultName = 'Alex Thérieur';
   return (
-    <Stack textAlign="center" spacing={2}>
+    <>
       <Typography variant="h1" color="white">
         {defaultName}
       </Typography>
       <Typography variant="h3" color="white">
-        {caller === 'calling' ? <Trans i18nKey="calling" /> : <Trans i18nKey="connecting" />}
+        {caller === 'calling' ? t('calling') : t('connecting')}
       </Typography>
-      <CallerButtons />
-    </Stack>
+
+      <Stack alignItems="center" spacing={1} width="100%">
+        <CallingEndButton size="large" />
+        <Typography variant="body2" color="white">
+          {t('end_call')}
+        </Typography>
+      </Stack>
+    </>
   );
 };
 
 export const CallPendingReceiverInterface = ({ medium }: CallPendingProps) => {
+  const { t } = useTranslation();
   // TODO: Remove the dummy name
   const defaultName = 'Alain Thérieur';
   return (
-    <Stack textAlign="center" spacing={2}>
+    <>
       <Typography variant="h1" color="white">
-        <Trans i18nKey="incoming_call" context={medium} values={{ member0: defaultName }} />
+        {t('incoming_call', {
+          context: medium,
+          member0: defaultName,
+        })}
       </Typography>
-      <ReceiverButtons />
-    </Stack>
-  );
-};
-
-const CallerButtons = () => {
-  return (
-    <Stack textAlign="center" spacing={1}>
-      <CallingEndButton size="large" />
-      <Typography variant="body2" color="white">
-        <Trans i18nKey="end_call" />
-      </Typography>
-    </Stack>
+      <Box width="50%">
+        <ReceiverButtons />
+      </Box>
+    </>
   );
 };
 
 const ReceiverButtons = () => {
+  const { t } = useTranslation();
   return (
-    <Grid container direction="row" padding={2}>
+    <Grid container spacing={2}>
       {RECEIVER_BUTTONS.map(({ ButtonComponent, translationKey }, i) => (
         <Grid item xs={4} key={i}>
-          <Stack spacing={1}>
+          <Stack alignItems="center" spacing={1}>
             <ButtonComponent color="inherit" size="large" />
-            <Typography variant="body2" color="white" textAlign="center" sx={{ opacity: 0.75 }}>
-              <Trans i18nKey={'' + translationKey} />
+            <Typography variant="body2" color="white" sx={{ opacity: 0.75 }}>
+              {t(translationKey)}
             </Typography>
           </Stack>
         </Grid>
diff --git a/client/src/pages/JamiLogin.tsx b/client/src/pages/JamiLogin.tsx
index cca4a65..256bb76 100644
--- a/client/src/pages/JamiLogin.tsx
+++ b/client/src/pages/JamiLogin.tsx
@@ -106,7 +106,6 @@
             <UsernameInput
               onChange={handleUsername}
               tooltipTitle={t('login_form_username_tooltip')}
-              status={'default'}
               sx={{ width: theme.typography.pxToRem(inputWidth) }}
             />
           </div>
@@ -114,7 +113,6 @@
             <PasswordInput
               onChange={handlePassword}
               tooltipTitle={t('login_form_password_tooltip')}
-              status={'default'}
               sx={{ width: theme.typography.pxToRem(inputWidth) }}
             />
           </div>
diff --git a/client/src/themes/ThemeDemonstrator.tsx b/client/src/themes/ThemeDemonstrator.tsx
index f45be84..daddbee 100644
--- a/client/src/themes/ThemeDemonstrator.tsx
+++ b/client/src/themes/ThemeDemonstrator.tsx
@@ -70,16 +70,10 @@
           <Switch />
         </Stack>
         <Stack padding="5px" width="300px">
-          <UsernameInput onChange={() => {}} tooltipTitle={'Test'} status={'default'} />
-          <UsernameInput onChange={() => {}} tooltipTitle={'Test'} status={'default'} error defaultValue="Cyrille" />
-          <PasswordInput onChange={() => {}} tooltipTitle={'Test'} status={'default'} />
-          <PasswordInput
-            onChange={() => {}}
-            tooltipTitle={'Test'}
-            status={'default'}
-            error
-            defaultValue="SavoirFaireLinux"
-          />
+          <UsernameInput tooltipTitle={'Test'} />
+          <UsernameInput tooltipTitle={'Test'} error defaultValue="Cyrille" />
+          <PasswordInput tooltipTitle={'Test'} />
+          <PasswordInput tooltipTitle={'Test'} error defaultValue="SavoirFaireLinux" />
           <NickNameInput />
           <RegularInput />
         </Stack>