diff --git a/app/client/mobile/src/channels/Channels.tsx b/app/client/mobile/src/channels/Channels.tsx
index 01f49829..36fe576d 100644
--- a/app/client/mobile/src/channels/Channels.tsx
+++ b/app/client/mobile/src/channels/Channels.tsx
@@ -1,4 +1,4 @@
-import {useContext} from 'react';
+import React, {useContext} from 'react';
 import {Text, Button} from 'react-native-paper';
 import {SafeAreaView} from 'react-native';
 
diff --git a/app/client/mobile/src/contacts/Contacts.tsx b/app/client/mobile/src/contacts/Contacts.tsx
index 3f5c3365..23e3c0fc 100644
--- a/app/client/mobile/src/contacts/Contacts.tsx
+++ b/app/client/mobile/src/contacts/Contacts.tsx
@@ -1,4 +1,4 @@
-import {useContext} from 'react';
+import React, {useContext} from 'react';
 import {Text, Button} from 'react-native-paper';
 import {SafeAreaView} from 'react-native';
 
diff --git a/app/client/mobile/src/node/Node.tsx b/app/client/mobile/src/node/Node.tsx
index 2c15ac41..ba77a25a 100644
--- a/app/client/mobile/src/node/Node.tsx
+++ b/app/client/mobile/src/node/Node.tsx
@@ -2,7 +2,7 @@ import {Button} from 'react-native-paper';
 import {Text} from 'react-native';
 import {AppContext} from '../context/AppContext';
 import {View} from 'react-native';
-import {useContext} from 'react';
+import React, {useContext} from 'react';
 
 export function Node() {
   const app = useContext(AppContext);
diff --git a/app/client/mobile/src/session/Session.tsx b/app/client/mobile/src/session/Session.tsx
index 42b99fed..3b737d8c 100644
--- a/app/client/mobile/src/session/Session.tsx
+++ b/app/client/mobile/src/session/Session.tsx
@@ -1,4 +1,4 @@
-import {useState, useContext} from 'react';
+import React, {useState, useContext} from 'react';
 import {View, SafeAreaView} from 'react-native';
 import {styles} from './Session.styled';
 import {BottomNavigation, Button, Text} from 'react-native-paper';
diff --git a/app/client/mobile/src/settings/Settings.tsx b/app/client/mobile/src/settings/Settings.tsx
index 5ba3f28b..dae1e398 100644
--- a/app/client/mobile/src/settings/Settings.tsx
+++ b/app/client/mobile/src/settings/Settings.tsx
@@ -1,4 +1,4 @@
-import {useContext} from 'react';
+import React, {useContext} from 'react';
 import {AppContext} from '../context/AppContext';
 import {Text, Button} from 'react-native-paper';
 import {SafeAreaView} from 'react-native';
diff --git a/app/client/mobile/src/utils/InputCode.styled.ts b/app/client/mobile/src/utils/InputCode.styled.ts
new file mode 100644
index 00000000..e6d76cd4
--- /dev/null
+++ b/app/client/mobile/src/utils/InputCode.styled.ts
@@ -0,0 +1,33 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  row: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  cell: {
+    width: 32,
+    height: '100%',
+    borderWidth: 1,
+    borderRadius: 4,
+    backgroundColor: '#dddddd',
+    borderColor: '#aaaaaa',
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+  },
+  input: {
+    width: '100%',
+    height: '100%',
+    opacity: 0,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+  text: {
+    fontSize: 20,
+  }
+});
diff --git a/app/client/mobile/src/utils/InputCode.tsx b/app/client/mobile/src/utils/InputCode.tsx
index 59fbf64d..d1d6f78d 100644
--- a/app/client/mobile/src/utils/InputCode.tsx
+++ b/app/client/mobile/src/utils/InputCode.tsx
@@ -1,5 +1,6 @@
 import {TextInput, Text, View, TouchableOpacity} from 'react-native';
-import {useState, useRef} from 'react';
+import React, {useState, useRef} from 'react';
+import {styles} from './InputCode.styled';
 
 export function InputCode({onChangeText, style}) {
   const [code, setCode] = useState('');
@@ -20,108 +21,27 @@ export function InputCode({onChangeText, style}) {
   return (
     <View style={style}>
       <View style={{width: '100%', height: 32}}>
-        <View
-          style={{
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-          }}>
-          <View
-            style={{
-              width: 32,
-              height: '100%',
-              borderWidth: 1,
-              borderRadius: 4,
-              backgroundColor: '#dddddd',
-              borderColor: '#aaaaaa',
-              alignItems: 'center',
-              justifyContent: 'center',
-              display: 'flex',
-            }}>
-            <Text style={{fontSize: 20}}>{code.charAt(0)}</Text>
+        <View style={styles.row}>
+          <View style={styles.cell}>
+            <Text style={styles.text}>{code.charAt(0)}</Text>
           </View>
-          <View
-            style={{
-              width: 32,
-              height: '100%',
-              borderWidth: 1,
-              borderRadius: 4,
-              backgroundColor: '#dddddd',
-              borderColor: '#aaaaaa',
-              alignItems: 'center',
-              justifyContent: 'center',
-              display: 'flex',
-            }}>
-            <Text style={{fontSize: 20}}>{code.charAt(1)}</Text>
+          <View style={styles.cell}>
+            <Text style={styles.text}>{code.charAt(1)}</Text>
           </View>
-          <View
-            style={{
-              width: 32,
-              height: '100%',
-              borderWidth: 1,
-              borderRadius: 4,
-              backgroundColor: '#dddddd',
-              borderColor: '#aaaaaa',
-              alignItems: 'center',
-              justifyContent: 'center',
-              display: 'flex',
-            }}>
-            <Text style={{fontSize: 20}}>{code.charAt(2)}</Text>
+          <View style={styles.cell}>
+            <Text style={styles.text}>{code.charAt(2)}</Text>
           </View>
-          <View
-            style={{
-              width: 32,
-              height: '100%',
-              borderWidth: 1,
-              borderRadius: 4,
-              backgroundColor: '#dddddd',
-              borderColor: '#aaaaaa',
-              alignItems: 'center',
-              justifyContent: 'center',
-              display: 'flex',
-            }}>
-            <Text style={{fontSize: 20}}>{code.charAt(3)}</Text>
+          <View style={styles.cell}>
+            <Text style={styles.text}>{code.charAt(3)}</Text>
           </View>
-          <View
-            style={{
-              width: 32,
-              height: '100%',
-              borderWidth: 1,
-              borderRadius: 4,
-              backgroundColor: '#dddddd',
-              borderColor: '#aaaaaa',
-              alignItems: 'center',
-              justifyContent: 'center',
-              display: 'flex',
-            }}>
-            <Text style={{fontSize: 20}}>{code.charAt(4)}</Text>
+          <View style={styles.cell}>
+            <Text style={styles.text}>{code.charAt(4)}</Text>
           </View>
-          <View
-            style={{
-              width: 32,
-              height: '100%',
-              borderWidth: 1,
-              borderRadius: 4,
-              backgroundColor: '#dddddd',
-              borderColor: '#aaaaaa',
-              alignItems: 'center',
-              justifyContent: 'center',
-              display: 'flex',
-            }}>
-            <Text style={{fontSize: 20}}>{code.charAt(5)}</Text>
+          <View style={styles.cell}>
+            <Text style={styles.text}>{code.charAt(5)}</Text>
           </View>
         </View>
-        <TextInput
-          style={{
-            width: '100%',
-            height: '100%',
-            opacity: 0,
-            position: 'absolute',
-            top: 0,
-            left: 0,
-          }}
+        <TextInput style={styles.input}
           keyboardType={Platform.OS === 'ios' ? 'numeric' : 'number-pad'}
           onChangeText={updateCode}
           autoCorrect={false}