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();