diff --git a/src/components/HDPath.tsx b/src/components/HDPath.tsx
index cc38bef..185b33c 100644
--- a/src/components/HDPath.tsx
+++ b/src/components/HDPath.tsx
@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
-import { ScrollView, View, Text } from 'react-native';
-import { Button, TextInput } from 'react-native-paper';
+import React, { useState } from "react";
+import { ScrollView, View, Text } from "react-native";
+import { TextInput } from "react-native-paper";
 
-import { addAccountFromHDPath } from '../utils/accounts';
-import { Account, NetworksDataState, PathState } from '../types';
-import styles from '../styles/stylesheet';
-import { useAccounts } from '../context/AccountsContext';
+import { addAccountFromHDPath } from "../utils/accounts";
+import { Account, NetworksDataState, PathState } from "../types";
+import styles from "../styles/stylesheet";
+import { useAccounts } from "../context/AccountsContext";
+import { LoadingButton } from "@mui/lab";
 
 const HDPath = ({
   pathCode,
@@ -21,19 +22,19 @@ const HDPath = ({
   const { setCurrentIndex } = useAccounts();
   const [isAccountCreating, setIsAccountCreating] = useState(false);
   const [path, setPath] = useState<PathState>({
-    firstNumber: '',
-    secondNumber: '',
-    thirdNumber: '',
+    firstNumber: "",
+    secondNumber: "",
+    thirdNumber: "",
   });
 
   const handleChange = (key: keyof PathState, value: string) => {
-    if (key === 'secondNumber' && value !== '' && !['0', '1'].includes(value)) {
+    if (key === "secondNumber" && value !== "" && !["0", "1"].includes(value)) {
       return;
     }
 
     setPath({
       ...path,
-      [key]: value.replace(/[^0-9]/g, ''),
+      [key]: value.replace(/[^0-9]/g, ""),
     });
   };
 
@@ -50,7 +51,7 @@ const HDPath = ({
         hideDialog();
       }
     } catch (error) {
-      console.error('Error creating account:', error);
+      console.error("Error creating account:", error);
     } finally {
       setIsAccountCreating(false);
     }
@@ -63,15 +64,15 @@ const HDPath = ({
         <TextInput
           keyboardType="numeric"
           mode="outlined"
-          onChangeText={text => handleChange('firstNumber', text)}
+          onChangeText={(text) => handleChange("firstNumber", text)}
           value={path.firstNumber}
           style={styles.HDtextInput}
         />
-        <Text style={styles.HDtext}>{'\'/'}</Text>
+        <Text style={styles.HDtext}>{"'/"}</Text>
         <TextInput
           keyboardType="numeric"
           mode="outlined"
-          onChangeText={text => handleChange('secondNumber', text)}
+          onChangeText={(text) => handleChange("secondNumber", text)}
           value={path.secondNumber}
           style={styles.HDtextInput}
         />
@@ -79,19 +80,20 @@ const HDPath = ({
         <TextInput
           keyboardType="numeric"
           mode="outlined"
-          onChangeText={text => handleChange('thirdNumber', text)}
+          onChangeText={(text) => handleChange("thirdNumber", text)}
           value={path.thirdNumber}
           style={styles.HDtextInput}
         />
       </View>
       <View style={styles.HDbuttonContainer}>
-        <Button
-          mode="contained"
-          onPress={createFromHDPathHandler}
+        <LoadingButton
+          variant="contained"
+          onClick={createFromHDPathHandler}
           loading={isAccountCreating}
-          disabled={isAccountCreating}>
-          {isAccountCreating ? 'Adding' : 'Add Account'}
-        </Button>
+          disabled={isAccountCreating}
+        >
+          {isAccountCreating ? "Adding" : "Add Account"}
+        </LoadingButton>
       </View>
     </ScrollView>
   );
diff --git a/src/styles/stylesheet.js b/src/styles/stylesheet.js
index 13cc1cd..937aa0e 100644
--- a/src/styles/stylesheet.js
+++ b/src/styles/stylesheet.js
@@ -1,21 +1,21 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet } from "react-native";
 
 const styles = StyleSheet.create({
   createWalletContainer: {
     marginTop: 20,
-    alignSelf: 'center',
+    alignSelf: "center",
     marginBottom: 30,
   },
   signLink: {
-    alignItems: 'flex-end',
+    alignItems: "flex-end",
     marginTop: 24,
   },
   hyperlink: {
-    fontWeight: '500',
-    textDecorationLine: 'underline',
+    fontWeight: "500",
+    textDecorationLine: "underline",
   },
   highlight: {
-    fontWeight: '700',
+    fontWeight: "700",
   },
   accountContainer: {
     padding: 8,
@@ -23,32 +23,32 @@ const styles = StyleSheet.create({
   },
   addAccountButton: {
     marginTop: 24,
-    alignSelf: 'center',
+    alignSelf: "center",
   },
   accountComponent: {
     flex: 4,
   },
   appSurface: {
-    backgroundColor: '#0f0f0f',
+    backgroundColor: "#0f0f0f",
   },
   appContainer: {
     flexGrow: 1,
     marginTop: 24,
     paddingHorizontal: 24,
-    backgroundColor: '#0f0f0f',
+    backgroundColor: "#0f0f0f",
   },
   resetContainer: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
   },
   resetButton: {
-    alignSelf: 'center',
+    alignSelf: "center",
   },
   signButton: {
     marginTop: 20,
     marginBottom: 20,
     width: 150,
-    alignSelf: 'center',
+    alignSelf: "center",
   },
   signPage: {
     paddingHorizontal: 24,
@@ -74,81 +74,81 @@ const styles = StyleSheet.create({
     borderRadius: 10,
   },
   dialogWarning: {
-    color: '#FFA3A8',
+    color: "#FFA3A8",
   },
-  resetDialogTitle:{
+  resetDialogTitle: {
     width: 500,
-    backgroundColor: '#18181A'
+    backgroundColor: "#18181A",
   },
   resetDialogContent: {
-    backgroundColor: '#18181A',
+    backgroundColor: "#18181A",
   },
   resetDialogActionRow: {
-    backgroundColor: '#18181A',
+    backgroundColor: "#18181A",
   },
   button: {
-    color: '#fff',
-    margin: 10
+    color: "#fff",
+    margin: 10,
   },
   buttonRed: {
-    backgroundColor: '#B20710'
+    backgroundColor: "#B20710",
   },
   buttonBlue: {
-    backgroundColor: '#0000F4'
+    backgroundColor: "#0000F4",
   },
-  mnemonicTitle:{
-    backgroundColor: '#18181A',
+  mnemonicTitle: {
+    backgroundColor: "#18181A",
   },
-  mnemonicContainer:{
-    backgroundColor: '#18181A',
+  mnemonicContainer: {
+    backgroundColor: "#18181A",
   },
   mnomonicDialogWarning: {
-    color: '#FFA3A8',
-    marginTop: 10
+    color: "#FFA3A8",
+    marginTop: 10,
   },
   mnemonicButtonRow: {
     paddingRight: 40,
-    backgroundColor: '#18181A'
+    backgroundColor: "#18181A",
   },
-  mnemonicButton:{
-    backgroundColor: '#0000F4',
-    color: 'white',
+  mnemonicButton: {
+    backgroundColor: "#0000F4",
+    color: "white",
     padding: 2,
-    marginBottom: 20
+    marginBottom: 20,
   },
   mnemonicGridContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
     marginTop: 20,
     paddingBottom: 30,
     borderBottomWidth: 1,
-    borderBottomColor: '#29292E'
+    borderBottomColor: "#29292E",
   },
   gridContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
   },
   gridItem: {
-    width: '30%',
+    width: "30%",
     margin: 4,
     padding: 4,
     borderRadius: 4,
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    backgroundColor: '#29292E'
+    alignItems: "center",
+    justifyContent: "flex-start",
+    backgroundColor: "#29292E",
   },
   HDcontainer: {
     marginTop: 24,
     paddingHorizontal: 8,
   },
   HDrowContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
   },
   HDtext: {
-    color: 'black',
+    color: "#FBFBFB",
     fontSize: 18,
     margin: 4,
   },
@@ -158,15 +158,15 @@ const styles = StyleSheet.create({
   HDbuttonContainer: {
     marginTop: 20,
     width: 200,
-    alignSelf: 'center',
+    alignSelf: "flex-start",
   },
   spinnerContainer: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
   },
   LoadingText: {
-    color: 'black',
+    color: "black",
     fontSize: 18,
     padding: 10,
   },
@@ -174,9 +174,9 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 5,
     marginTop: 50,
-    height: 'auto',
-    alignItems: 'center',
-    justifyContent: 'center',
+    height: "auto",
+    alignItems: "center",
+    justifyContent: "center",
     padding: 10,
   },
   requestDirectMessage: {
@@ -185,51 +185,51 @@ const styles = StyleSheet.create({
     marginTop: 20,
     marginBottom: 50,
     height: 500,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     padding: 8,
   },
   approveTransfer: {
-    height: '40%',
+    height: "40%",
     marginBottom: 30,
   },
   buttonContainer: {
-    flexDirection: 'row',
+    flexDirection: "row",
     marginLeft: 20,
     marginTop: 10,
     marginBottom: 10,
-    justifyContent: 'space-evenly',
+    justifyContent: "space-evenly",
   },
   badRequestContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     padding: 20,
   },
   invalidMessageText: {
-    color: 'black',
+    color: "black",
     fontSize: 16,
-    textAlign: 'center',
+    textAlign: "center",
     marginBottom: 20,
   },
   container: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     marginBottom: 10,
     paddingHorizontal: 20,
   },
   modalContentContainer: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
     borderRadius: 34,
     borderBottomStartRadius: 0,
     borderBottomEndRadius: 0,
     borderWidth: 1,
-    width: '100%',
-    height: '50%',
-    position: 'absolute',
-    backgroundColor: '#0f0f0f',
+    width: "100%",
+    height: "50%",
+    position: "absolute",
+    backgroundColor: "#0f0f0f",
     bottom: 0,
   },
   modalOuterContainer: { flex: 1 },
@@ -238,32 +238,32 @@ const styles = StyleSheet.create({
     height: 50,
     borderRadius: 8,
     marginVertical: 16,
-    overflow: 'hidden',
+    overflow: "hidden",
   },
   space: {
     width: 50,
   },
   flexRow: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
     marginTop: 20,
     paddingHorizontal: 16,
     marginBottom: 10,
   },
   marginVertical8: {
     marginVertical: 8,
-    textAlign: 'center',
+    textAlign: "center",
   },
   subHeading: {
-    textAlign: 'center',
+    textAlign: "center",
     marginBottom: 10,
     marginTop: 10,
-    fontSize: 20
+    fontSize: 20,
   },
   centerText: {
-    textAlign: 'center',
+    textAlign: "center",
   },
   messageBody: {
     borderWidth: 1,
@@ -276,48 +276,48 @@ const styles = StyleSheet.create({
     marginTop: 20,
   },
   dappDetails: {
-    display: 'flex',
-    alignItems: 'center',
+    display: "flex",
+    alignItems: "center",
   },
   dataBoxContainer: {
     marginBottom: 10,
-    backgroundColor: '#29292E',
-    border: 'none'
+    backgroundColor: "#29292E",
+    border: "none",
   },
   dataBoxLabel: {
     fontSize: 18,
-    fontWeight: 'bold',
+    fontWeight: "bold",
     marginBottom: 3,
-    color: 'black',
+    color: "black",
   },
   dataBox: {
     borderWidth: 1,
-    borderColor: '#ccc',
+    borderColor: "#ccc",
     padding: 10,
     borderRadius: 5,
   },
   dataBoxData: {
     fontSize: 16,
-    color: 'white',
+    color: "white",
   },
   transactionText: {
     padding: 8,
     fontSize: 18,
-    fontWeight: 'bold',
-    color: 'black',
+    fontWeight: "bold",
+    color: "black",
   },
   balancePadding: {
     padding: 8,
   },
   noActiveSessions: {
-    display: 'flex',
-    alignItems: 'center',
+    display: "flex",
+    alignItems: "center",
     marginTop: 20,
     marginBottom: 20,
   },
   disconnectSession: {
-    display: 'flex',
-    justifyContent: 'center',
+    display: "flex",
+    justifyContent: "center",
   },
   sessionItem: {
     paddingLeft: 12,
@@ -334,7 +334,7 @@ const styles = StyleSheet.create({
     margin: 0,
   },
   selectNetworkText: {
-    fontWeight: 'bold',
+    fontWeight: "bold",
     marginVertical: 10,
   },
   transactionFeesInput: { marginBottom: 10 },
@@ -345,7 +345,7 @@ const styles = StyleSheet.create({
     paddingVertical: 5,
   },
   transactionLabel: {
-    fontWeight: '700',
+    fontWeight: "700",
     padding: 8,
   },
   linkContainer: {
@@ -354,7 +354,7 @@ const styles = StyleSheet.create({
   networksButton: {
     marginTop: 12,
     marginBottom: 20,
-  }
+  },
 });
 
 export default styles;