diff --git a/client/package-lock.json b/client/package-lock.json
index 9d66bdf..506ce2a 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -47,6 +47,7 @@
         "@types/node": "^18.7.13",
         "@types/react": "^18.0.17",
         "@types/react-dom": "^18.0.6",
+        "@types/react-modal": "^3.13.1",
         "babel-loader": "^8.2.5",
         "copy-webpack-plugin": "^11.0.0",
         "css-loader": "^6.7.1",
@@ -3154,6 +3155,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-modal": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
+      "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -12605,6 +12615,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-modal": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
+      "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
diff --git a/client/package.json b/client/package.json
index 317ae40..f75fe9c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -59,6 +59,7 @@
     "@types/node": "^18.7.13",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "@types/react-modal": "^3.13.1",
     "babel-loader": "^8.2.5",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
diff --git a/client/src/components/ConversationAvatar.js b/client/src/components/ConversationAvatar.js
deleted file mode 100644
index dbf78e1..0000000
--- a/client/src/components/ConversationAvatar.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Avatar } from '@mui/material';
-
-export default function ConversationAvatar({ displayName, ...props }) {
-  return <Avatar {...props} alt={displayName} src="/broken" />;
-}
diff --git a/client/src/components/ConversationAvatar.tsx b/client/src/components/ConversationAvatar.tsx
new file mode 100644
index 0000000..decdb65
--- /dev/null
+++ b/client/src/components/ConversationAvatar.tsx
@@ -0,0 +1,8 @@
+import { Avatar, AvatarProps } from '@mui/material';
+
+type ConversationAvatarProps = AvatarProps & {
+  displayName?: string;
+};
+export default function ConversationAvatar({ displayName, ...props }: ConversationAvatarProps) {
+  return <Avatar {...props} alt={displayName} src="/broken" />;
+}
diff --git a/client/src/components/ConversationList.js b/client/src/components/ConversationList.tsx
similarity index 87%
rename from client/src/components/ConversationList.js
rename to client/src/components/ConversationList.tsx
index e25dd9c..59ccfc3 100644
--- a/client/src/components/ConversationList.js
+++ b/client/src/components/ConversationList.tsx
@@ -8,7 +8,12 @@
 import { useAppSelector } from '../../redux/hooks';
 import ConversationListItem from './ConversationListItem';
 
-export default function ConversationList(props) {
+type ConversationListProps = {
+  accountId: string;
+  conversations: Conversation[];
+  search?: Conversation;
+};
+export default function ConversationList(props: ConversationListProps) {
   const { refresh } = useAppSelector((state) => state.app);
 
   useEffect(() => {
diff --git a/client/src/components/ConversationView.tsx b/client/src/components/ConversationView.tsx
index ac738b4..16f6710 100644
--- a/client/src/components/ConversationView.tsx
+++ b/client/src/components/ConversationView.tsx
@@ -5,7 +5,7 @@
 import { SocketContext } from '../contexts/Socket';
 import { useConversationQuery, useMessagesQuery, useSendMessageMutation } from '../services/Conversation';
 import ConversationAvatar from './ConversationAvatar';
-import LoadingPage from './loading';
+import LoadingPage from './Loading';
 import MessageList from './MessageList';
 import SendMessageForm from './SendMessageForm';
 
diff --git a/client/src/components/Header.js b/client/src/components/Header.tsx
similarity index 82%
rename from client/src/components/Header.js
rename to client/src/components/Header.tsx
index 637b529..00d5ebb 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.tsx
@@ -1,13 +1,13 @@
 import { Box, Button, Menu, MenuItem } from '@mui/material';
-import { useState } from 'react';
+import { MouseEvent, useState } from 'react';
 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 [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget);
   const handleClose = () => setAnchorEl(null);
   const params = useParams();
 
diff --git a/client/src/components/JamiIdCard.js b/client/src/components/JamiIdCard.tsx
similarity index 82%
rename from client/src/components/JamiIdCard.js
rename to client/src/components/JamiIdCard.tsx
index e25610b..2f54d91 100644
--- a/client/src/components/JamiIdCard.js
+++ b/client/src/components/JamiIdCard.tsx
@@ -1,6 +1,12 @@
 import { Box, Card, CardContent, Typography } from '@mui/material';
 
-export default function JamiIdCard(props) {
+import Account from '../../../model/Account';
+
+type JamiIdCardProps = {
+  account: Account;
+};
+
+export default function JamiIdCard(props: JamiIdCardProps) {
   const account = props.account;
   const registeredName = account.getRegisteredName();
   return (
diff --git a/client/src/components/loading.js b/client/src/components/Loading.tsx
similarity index 100%
rename from client/src/components/loading.js
rename to client/src/components/Loading.tsx
diff --git a/client/src/components/NewContactForm.js b/client/src/components/NewContactForm.tsx
similarity index 68%
rename from client/src/components/NewContactForm.js
rename to client/src/components/NewContactForm.tsx
index 9862453..06d0222 100644
--- a/client/src/components/NewContactForm.js
+++ b/client/src/components/NewContactForm.tsx
@@ -1,16 +1,21 @@
 import { SearchRounded } from '@mui/icons-material';
 import { InputAdornment, InputBase } from '@mui/material';
-import { useState } from 'react';
+import { ChangeEvent, FormEvent, useState } from 'react';
 
-export default function NewContactForm(props) {
+type NewContactFormProps = {
+  onChange?: (v: string) => void;
+  onSubmit?: (v: string) => void;
+};
+
+export default function NewContactForm(props: NewContactFormProps) {
   const [value, setValue] = useState('');
 
-  const handleChange = (event) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
     if (props.onChange) props.onChange(event.target.value);
   };
 
-  const handleSubmit = (event) => {
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (value && props.onSubmit) props.onSubmit(value);
   };
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.tsx
similarity index 75%
rename from client/src/components/SendMessageForm.js
rename to client/src/components/SendMessageForm.tsx
index 5685c8a..1a3b11c 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.tsx
@@ -1,6 +1,6 @@
 import { Divider, InputBase } from '@mui/material';
 import { Stack } from '@mui/system';
-import { useCallback, useState } from 'react';
+import { ChangeEvent, FormEvent, useCallback, useState } from 'react';
 
 import {
   RecordVideoMessageButton,
@@ -8,22 +8,26 @@
   SelectEmojiButton,
   SendMessageButton,
   UploadFileButton,
-} from './Button.tsx';
+} from './Button';
 
-export default function SendMessageForm(props) {
+type SendMessageFormProps = {
+  onSend: (message: string) => void;
+};
+
+export default function SendMessageForm(props: SendMessageFormProps) {
   const [currentMessage, setCurrentMessage] = useState('');
 
-  const handleSubmit = (e) => {
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (currentMessage) {
       props.onSend(currentMessage);
       setCurrentMessage('');
     }
   };
-  const handleInputChange = (event) => setCurrentMessage(event.target.value);
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => setCurrentMessage(event.target.value);
 
   const onEmojiSelected = useCallback(
-    (emoji) => setCurrentMessage((currentMessage) => currentMessage + emoji),
+    (emoji: string) => setCurrentMessage((currentMessage) => currentMessage + emoji),
     [setCurrentMessage]
   );
 
diff --git a/client/src/components/avatar.js b/client/src/components/avatar.js
deleted file mode 100644
index e69de29..0000000
--- a/client/src/components/avatar.js
+++ /dev/null
diff --git a/client/src/pages/AccountSelection.tsx b/client/src/pages/AccountSelection.tsx
index 9f6fcc8..9085309 100644
--- a/client/src/pages/AccountSelection.tsx
+++ b/client/src/pages/AccountSelection.tsx
@@ -9,7 +9,7 @@
 import ConversationAvatar from '../components/ConversationAvatar';
 import Header from '../components/Header';
 import ListItemLink from '../components/ListItemLink';
-import LoadingPage from '../components/loading';
+import LoadingPage from '../components/Loading';
 
 const variants = {
   enter: { opacity: 1, y: 0 },
diff --git a/client/src/pages/Messenger.tsx b/client/src/pages/Messenger.tsx
index c9449cd..d22bbc3 100644
--- a/client/src/pages/Messenger.tsx
+++ b/client/src/pages/Messenger.tsx
@@ -10,7 +10,7 @@
 import ConversationList from '../components/ConversationList';
 import ConversationView from '../components/ConversationView';
 import Header from '../components/Header';
-import LoadingPage from '../components/loading';
+import LoadingPage from '../components/Loading';
 import NewContactForm from '../components/NewContactForm';
 import AddContactPage from './AddContactPage';