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