diff --git a/src/components/common/EmojiSelector/components/Emoji/index.js b/src/components/common/EmojiSelector/components/Emoji/index.tsx
similarity index 64%
rename from src/components/common/EmojiSelector/components/Emoji/index.js
rename to src/components/common/EmojiSelector/components/Emoji/index.tsx
index bdd799f6..e0a969cc 100644
--- a/src/components/common/EmojiSelector/components/Emoji/index.js
+++ b/src/components/common/EmojiSelector/components/Emoji/index.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
 
-import Text from '@/commonComponents/Text';
-import Touchable from '@/commonComponents/Touchable';
+import { Text, Touchable } from '@/components/common';
 
 import { charFromEmojiObject } from '../../utils';
 import styles from './styles';
 
-function Emoji({ onSelect, emojiObject, isLastEmoji }) {
+interface Props {
+  onSelect: (emoji: string) => void;
+  emojiObject: any;
+  isLastEmoji: boolean;
+}
+
+function Emoji({ onSelect, emojiObject, isLastEmoji }: Props) {
   const charEmoji = charFromEmojiObject(emojiObject);
   const margin = { marginRight: isLastEmoji ? 0 : 10 };
 
diff --git a/src/components/common/EmojiSelector/components/Emoji/styles.js b/src/components/common/EmojiSelector/components/Emoji/styles.ts
similarity index 100%
rename from src/components/common/EmojiSelector/components/Emoji/styles.js
rename to src/components/common/EmojiSelector/components/Emoji/styles.ts
diff --git a/src/components/common/EmojiSelector/components/EmojiBar/index.js b/src/components/common/EmojiSelector/components/EmojiBar/index.tsx
similarity index 59%
rename from src/components/common/EmojiSelector/components/EmojiBar/index.js
rename to src/components/common/EmojiSelector/components/EmojiBar/index.tsx
index 0eda9178..6a6230bc 100644
--- a/src/components/common/EmojiSelector/components/EmojiBar/index.js
+++ b/src/components/common/EmojiSelector/components/EmojiBar/index.tsx
@@ -1,21 +1,25 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import Text from '@/commonComponents/Text';
-import Touchable from '@/commonComponents/Touchable';
+import { Text, Touchable } from '@/components/common';
+import { Colors } from '@/constants/theme';
 
-import { Categories, categoryKeys } from '../../utils';
+import { Categories, Category } from '../../utils';
 import styles from './styles';
 
-const EmojiBar = ({ currentCategory, setCurrentCategory }) => {
+interface Props {
+  currentCategory: Category;
+  setCurrentCategory: (category: Category) => void;
+}
+
+function EmojiBar({ currentCategory, setCurrentCategory }: Props) {
   return (
     <View style={styles.emojiBar}>
-      {categoryKeys.map(c => {
-        const category = Categories[c];
+      {Categories.map((category: Category) => {
         const backgroundColor =
           category.name === currentCategory.name
-            ? 'rgba(120, 120, 128, 0.36)'
-            : '#000000';
+            ? Colors.White.Secondary
+            : Colors.Black.Pure;
 
         return (
           <Touchable
@@ -31,6 +35,6 @@ const EmojiBar = ({ currentCategory, setCurrentCategory }) => {
       })}
     </View>
   );
-};
+}
 
 export default EmojiBar;
diff --git a/src/components/common/EmojiSelector/components/EmojiBar/styles.js b/src/components/common/EmojiSelector/components/EmojiBar/styles.ts
similarity index 100%
rename from src/components/common/EmojiSelector/components/EmojiBar/styles.js
rename to src/components/common/EmojiSelector/components/EmojiBar/styles.ts
diff --git a/src/components/common/EmojiSelector/components/EmojiBoard/index.js b/src/components/common/EmojiSelector/components/EmojiBoard/index.js
deleted file mode 100644
index debf99d8..00000000
--- a/src/components/common/EmojiSelector/components/EmojiBoard/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { ScrollView, View } from 'react-native';
-
-import { emojiByCategory, sortEmoji, splitToRows } from '../../utils';
-import Emoji from '../Emoji';
-import styles from './styles';
-
-function EmojiBoard({ onSelect, currentCategory }) {
-  const categoryEmojis = emojiByCategory(currentCategory);
-  const sortedEmojis = sortEmoji(categoryEmojis);
-  const rowsToDisplay = splitToRows(sortedEmojis);
-
-  return (
-    <View style={styles.emojiBoard}>
-      <ScrollView showsVerticalScrollIndicator={false} overScrollMode="never">
-        {rowsToDisplay.map((row, index) => {
-          const isLastRow = rowsToDisplay?.length === index + 1;
-          return (
-            <View
-              style={[styles.emojiBoardRow, isLastRow && styles.lastBoardRow]}
-              key={`${currentCategory}-${index}`}>
-              {row.map((emojiObject, emojiIndex) => (
-                <Emoji
-                  isLastEmoji={emojiIndex + 1 === row?.length}
-                  onSelect={onSelect}
-                  emojiObject={emojiObject}
-                  key={`${emojiObject.utf16}-${emojiIndex}`}
-                />
-              ))}
-            </View>
-          );
-        })}
-      </ScrollView>
-    </View>
-  );
-}
-
-export default EmojiBoard;
diff --git a/src/components/common/EmojiSelector/components/EmojiBoard/index.tsx b/src/components/common/EmojiSelector/components/EmojiBoard/index.tsx
new file mode 100644
index 00000000..b0cdb68d
--- /dev/null
+++ b/src/components/common/EmojiSelector/components/EmojiBoard/index.tsx
@@ -0,0 +1,56 @@
+import React, { useEffect, useRef } from 'react';
+import { ScrollView, View } from 'react-native';
+
+import { Category, emojiByCategory, sortEmoji, splitToRows } from '../../utils';
+import Emoji from '../Emoji';
+import styles from './styles';
+
+interface Props {
+  onSelect: (emoji: string) => void;
+  currentCategory: Category;
+}
+
+function EmojiBoard({ onSelect, currentCategory }: Props) {
+  const categoryEmojis = emojiByCategory(currentCategory);
+  const sortedEmojis = sortEmoji(categoryEmojis);
+  const rowsToDisplay = splitToRows(sortedEmojis);
+  const listRef = useRef<ScrollView>(null);
+
+  useEffect(() => {
+    if (listRef.current) {
+      listRef.current.scrollTo({ y: 0, animated: false });
+    }
+  }, [currentCategory]);
+
+  return (
+    <View style={styles.emojiBoard}>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        overScrollMode="never"
+        ref={listRef}
+        horizontal>
+        {rowsToDisplay.map((row, index) => {
+          const isLastRow = rowsToDisplay?.length === index + 1;
+          return (
+            <View
+              style={[styles.emojiBoardRow, isLastRow && styles.lastBoardRow]}
+              key={`${currentCategory}-${index}`}>
+              {row.map((emojiObject, emojiIndex) => {
+                return (
+                  <Emoji
+                    isLastEmoji={emojiIndex + 1 === row?.length}
+                    onSelect={onSelect}
+                    emojiObject={emojiObject}
+                    key={`${emojiObject.utf16}-${emojiIndex}`}
+                  />
+                );
+              })}
+            </View>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}
+
+export default EmojiBoard;
diff --git a/src/components/common/EmojiSelector/components/EmojiBoard/styles.js b/src/components/common/EmojiSelector/components/EmojiBoard/styles.ts
similarity index 56%
rename from src/components/common/EmojiSelector/components/EmojiBoard/styles.js
rename to src/components/common/EmojiSelector/components/EmojiBoard/styles.ts
index cdb4118b..c76da636 100644
--- a/src/components/common/EmojiSelector/components/EmojiBoard/styles.js
+++ b/src/components/common/EmojiSelector/components/EmojiBoard/styles.ts
@@ -2,15 +2,12 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   emojiBoard: {
-    height: 250,
+    height: 200,
   },
   emojiBoardRow: {
     flex: 1,
-    flexDirection: 'row',
-    marginBottom: 6,
-    justifyContent: 'space-between',
   },
   lastBoardRow: {
-    justifyContent: null,
+    justifyContent: undefined,
   },
 });
diff --git a/src/components/common/EmojiSelector/components/EmojiCategoryTitle/index.js b/src/components/common/EmojiSelector/components/EmojiCategoryTitle/index.js
deleted file mode 100644
index 49b92ff5..00000000
--- a/src/components/common/EmojiSelector/components/EmojiCategoryTitle/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-import Text from '@/components/common/Text';
-
-import styles from './styles';
-
-function EmojiCategoryTitle({ currentCategory }) {
-  return <Text style={styles.emojiCategoryTytle}>{currentCategory.name}</Text>;
-}
-
-export default EmojiCategoryTitle;
diff --git a/src/components/common/EmojiSelector/components/EmojiCategoryTitle/styles.js b/src/components/common/EmojiSelector/components/EmojiCategoryTitle/styles.js
deleted file mode 100644
index b90b5cf1..00000000
--- a/src/components/common/EmojiSelector/components/EmojiCategoryTitle/styles.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  emojiCategoryTytle: {
-    fontSize: 16,
-    marginBottom: 3,
-    color: 'rgba(235, 235, 245, 0.6)',
-  },
-});
diff --git a/src/components/common/EmojiSelector/index.js b/src/components/common/EmojiSelector/index.tsx
similarity index 69%
rename from src/components/common/EmojiSelector/index.js
rename to src/components/common/EmojiSelector/index.tsx
index 9dc70a3a..68276a0e 100644
--- a/src/components/common/EmojiSelector/index.js
+++ b/src/components/common/EmojiSelector/index.tsx
@@ -1,18 +1,25 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
 
+import { Text } from '@/components/common';
+
 import EmojiBar from './components/EmojiBar';
 import EmojiBoard from './components/EmojiBoard';
-import EmojiCategoryTitle from './components/EmojiCategoryTitle';
 import styles from './styles';
 import { Categories } from './utils';
 
-function EmojiSelector({ onSelect }) {
-  const [currentCategory, setCurrentCategory] = useState(Categories.emotion);
+interface Props {
+  onSelect: (emoji: string) => void;
+}
+
+function EmojiSelector({ onSelect }: Props) {
+  const [currentCategory, setCurrentCategory] = useState(Categories[0]);
 
   return (
     <View style={styles.emojiSelector}>
-      <EmojiCategoryTitle currentCategory={currentCategory} />
+      <Text type="subtitle3" style={styles.emojiCategoryTytle}>
+        {currentCategory.name}
+      </Text>
       <EmojiBoard onSelect={onSelect} currentCategory={currentCategory} />
       <EmojiBar
         currentCategory={currentCategory}
diff --git a/src/components/common/EmojiSelector/styles.js b/src/components/common/EmojiSelector/styles.ts
similarity index 69%
rename from src/components/common/EmojiSelector/styles.js
rename to src/components/common/EmojiSelector/styles.ts
index f31f4a47..c3f826ff 100644
--- a/src/components/common/EmojiSelector/styles.js
+++ b/src/components/common/EmojiSelector/styles.ts
@@ -2,11 +2,12 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   emojiSelector: {
-    marginTop: 24,
-    marginLeft: 7,
-    marginRight: 7,
+    marginHorizontal: 8,
     marginBottom: 24,
     width: '100%',
     alignSelf: 'center',
   },
+  emojiCategoryTytle: {
+    marginBottom: 3,
+  },
 });
diff --git a/src/components/common/EmojiSelector/utils.js b/src/components/common/EmojiSelector/utils.js
deleted file mode 100644
index ecb36040..00000000
--- a/src/components/common/EmojiSelector/utils.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import emoji from 'emoji-datasource';
-
-export const Categories = {
-  emotion: {
-    symbol: '😀',
-    name: 'Smileys & Emotion',
-  },
-  people: {
-    symbol: '🧑',
-    name: 'People & Body',
-  },
-  nature: {
-    symbol: '🦄',
-    name: 'Animals & Nature',
-  },
-  food: {
-    symbol: '🍔',
-    name: 'Food & Drink',
-  },
-  activities: {
-    symbol: '⚾️',
-    name: 'Activities',
-  },
-  places: {
-    symbol: '✈️',
-    name: 'Travel & Places',
-  },
-  objects: {
-    symbol: '💡',
-    name: 'Objects',
-  },
-  symbols: {
-    symbol: '🔣',
-    name: 'Symbols',
-  },
-  flags: {
-    symbol: '🏳️',
-    name: 'Flags',
-  },
-};
-
-export const charFromUtf16 = utf16 =>
-  String.fromCodePoint(...utf16.split('-').map(u => '0x' + u));
-
-export const charFromEmojiObject = obj => charFromUtf16(obj.unified);
-
-export const filteredEmojis = emoji.filter(e => !e.obsoleted_by);
-
-export const emojiByCategory = category =>
-  filteredEmojis.filter(e => e.category === category.name);
-
-export const sortEmoji = list =>
-  list.sort((a, b) => a.sort_order - b.sort_order);
-
-export const categoryKeys = Object.keys(Categories);
-
-export const splitToRows = list => {
-  const result = [];
-  while (list.length > 0) {
-    result.push(list.splice(0, 8));
-  }
-  return result;
-};
diff --git a/src/components/common/EmojiSelector/utils.ts b/src/components/common/EmojiSelector/utils.ts
new file mode 100644
index 00000000..798c825b
--- /dev/null
+++ b/src/components/common/EmojiSelector/utils.ts
@@ -0,0 +1,89 @@
+import emoji from 'emoji-datasource';
+
+export interface Category {
+  name: string;
+  symbol: string;
+  type: string;
+}
+
+export interface Emoji {
+  name: string;
+  unified: string;
+  category: string;
+  subcategory: string;
+  sort_order: number;
+  added_in: string;
+  utf16: string;
+  obsoleted_by: string;
+}
+
+export const Categories: Category[] = [
+  {
+    symbol: '😀',
+    name: 'Smileys & Emotion',
+    type: 'emotion',
+  },
+  {
+    symbol: '🧑',
+    name: 'People & Body',
+    type: 'people',
+  },
+  {
+    symbol: '🦄',
+    name: 'Animals & Nature',
+    type: 'nature',
+  },
+  {
+    symbol: '🍔',
+    name: 'Food & Drink',
+    type: 'food',
+  },
+  {
+    symbol: '⚾️',
+    name: 'Activities',
+    type: 'activities',
+  },
+  {
+    symbol: '✈️',
+    name: 'Travel & Places',
+    type: 'places',
+  },
+  {
+    symbol: '💡',
+    name: 'Objects',
+    type: 'objects',
+  },
+  {
+    symbol: '🔣',
+    name: 'Symbols',
+    type: 'symbols',
+  },
+  {
+    symbol: '🏳️',
+    name: 'Flags',
+    type: 'flags',
+  },
+];
+
+export const charFromUtf16 = (utf16: any) =>
+  String.fromCodePoint(...utf16.split('-').map((u: number) => '0x' + u));
+
+export const charFromEmojiObject = (obj: Emoji) => charFromUtf16(obj.unified);
+
+export const filteredEmojis: Emoji[] = emoji.filter(
+  (e: Emoji) => !e.obsoleted_by
+);
+
+export const emojiByCategory = (category: Category) =>
+  filteredEmojis.filter(e => e.category === category.name);
+
+export const sortEmoji = (list: Emoji[]) =>
+  list.sort((a, b) => a.sort_order - b.sort_order);
+
+export const splitToRows = (list: Emoji[]) => {
+  const result = [];
+  while (list.length > 0) {
+    result.push(list.splice(0, 5));
+  }
+  return result;
+};
diff --git a/src/components/common/UserIcon/styles.ts b/src/components/common/UserIcon/styles.ts
index e8ac6716..23a4418a 100644
--- a/src/components/common/UserIcon/styles.ts
+++ b/src/components/common/UserIcon/styles.ts
@@ -25,7 +25,7 @@ export default StyleSheet.create({
     height: 34,
   },
   textextralarge: {
-    fontSize: 40,
+    fontSize: 36,
   },
   textlarge: {
     fontSize: 32,
diff --git a/src/components/layout/styles.js b/src/components/layout/styles.ts
similarity index 100%
rename from src/components/layout/styles.js
rename to src/components/layout/styles.ts
diff --git a/src/screens/tabs/Profile/index.tsx b/src/screens/tabs/Profile/index.tsx
index 2e494d76..ba8f84ca 100644
--- a/src/screens/tabs/Profile/index.tsx
+++ b/src/screens/tabs/Profile/index.tsx
@@ -18,7 +18,7 @@ import {
 import Icon from '@/components/icons';
 import { ERROR_TYPES } from '@/constants/general';
 import { Colors } from '@/constants/theme';
-import { ScreenProps } from '@/interfaces/navigation';
+import { RootScreenProps } from '@/interfaces/navigation';
 import { Transaction } from '@/interfaces/redux';
 import { Container, Separator } from '@/layout';
 import Routes from '@/navigation/Routes';
@@ -33,7 +33,7 @@ import Accounts from './modals/Accounts';
 import ActivityDetail from './modals/ActivityDetail';
 import styles from './styles';
 
-function Profile({ navigation }: ScreenProps<Routes.PROFILE>) {
+function Profile({ navigation }: RootScreenProps<Routes.PROFILE>) {
   const accountsModalRef = useRef<Modalize>(null);
   const activityDetailModalRef = useRef<Modalize>(null);
   const transactionListRef = useRef(null);
diff --git a/src/screens/tabs/Profile/modals/EditEmoji/index.js b/src/screens/tabs/Profile/modals/EditEmoji/index.tsx
similarity index 70%
rename from src/screens/tabs/Profile/modals/EditEmoji/index.js
rename to src/screens/tabs/Profile/modals/EditEmoji/index.tsx
index cd49a922..d8f8e8f6 100644
--- a/src/screens/tabs/Profile/modals/EditEmoji/index.js
+++ b/src/screens/tabs/Profile/modals/EditEmoji/index.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { View } from 'react-native';
+import { Modalize } from 'react-native-modalize';
 
 import EmojiSelector from '@/commonComponents/EmojiSelector';
 import Header from '@/commonComponents/Header';
@@ -11,14 +12,20 @@ import Text from '@/components/common/Text';
 
 import styles from './styles';
 
-const EditEmoji = ({ modalRef, onSave, emoji }) => {
+interface Props {
+  modalRef: React.RefObject<Modalize>;
+  onSave: (emoji: string) => void;
+  emoji?: string;
+}
+
+function EditEmoji({ modalRef, onSave, emoji }: Props) {
   const { t } = useTranslation();
   const [selectedEmoji, setSelectedEmoji] = useState('');
 
   const handleSave = () => {
     onSave(selectedEmoji);
     setSelectedEmoji('');
-    modalRef?.current.close();
+    modalRef.current?.close();
   };
 
   useEffect(() => {
@@ -28,8 +35,14 @@ const EditEmoji = ({ modalRef, onSave, emoji }) => {
   }, [emoji]);
 
   return (
-    <Modal adjustToContentHeight modalRef={modalRef}>
-      <Header center={<Text type="subtitle2">{t('accounts.setEmoji')}</Text>} />
+    <Modal
+      adjustToContentHeight
+      modalRef={modalRef}
+      HeaderComponent={
+        <Header
+          center={<Text type="subtitle2">{t('accounts.setEmoji')}</Text>}
+        />
+      }>
       <View style={styles.content}>
         <UserIcon icon={selectedEmoji} size="extralarge" style={styles.icon} />
         <EmojiSelector onSelect={setSelectedEmoji} />
@@ -37,6 +50,6 @@ const EditEmoji = ({ modalRef, onSave, emoji }) => {
       </View>
     </Modal>
   );
-};
+}
 
 export default EditEmoji;
diff --git a/src/screens/tabs/Profile/modals/EditEmoji/styles.js b/src/screens/tabs/Profile/modals/EditEmoji/styles.ts
similarity index 92%
rename from src/screens/tabs/Profile/modals/EditEmoji/styles.js
rename to src/screens/tabs/Profile/modals/EditEmoji/styles.ts
index 09bb5ac1..f5f4b0d7 100644
--- a/src/screens/tabs/Profile/modals/EditEmoji/styles.js
+++ b/src/screens/tabs/Profile/modals/EditEmoji/styles.ts
@@ -4,7 +4,6 @@ export default StyleSheet.create({
   content: {
     flex: 1,
     paddingHorizontal: 20,
-    paddingTop: 20,
     paddingBottom: 35,
     justifyContent: 'space-between',
   },