diff --git a/src/App-styles.ts b/src/App-styles.ts
index 96112b3..9774f06 100644
--- a/src/App-styles.ts
+++ b/src/App-styles.ts
@@ -1,160 +1,157 @@
-import { Typography, Box, TextField, InputLabel } from "@mui/material";
-import { styled } from "@mui/system";
+import { Typography, Box, TextField, InputLabel } from '@mui/material';
+import { styled } from '@mui/system';
 
 export const AppContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  flexDirection: "column",
-  width: "100vw",
-  background: "rgba(39, 40, 44, 1)",
-  height: "100vh",
-  radius: "15px",
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  width: '100vw',
+  height: '100vh',
+  radius: '15px',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
-  overflow: 'hidden'
+  overflow: 'hidden',
 }));
 
 export const AuthenticatedContainer = styled(Box)(({ theme }) => ({
-  display: "flex",
-  width: "100%",
-  height: "100%",
-  justifyContent: "space-between",
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  justifyContent: 'space-between',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AuthenticatedContainerInnerLeft = styled(Box)(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  flexDirection: "column",
-  height: "100%",
-  width: "100%",
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  height: '100%',
+  width: '100%',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AuthenticatedContainerInnerRight = styled(Box)(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  flexDirection: "column",
-  width: "60px",
-  height: "100%",
-  background: "rgba(0, 0, 0, 0.1)",
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  width: '60px',
+  height: '100%',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-start",
-  width: "100%px",
-  height: "60px",
-  background: "rgba(0, 0, 0, 0.1)",
-  padding: "20px",
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  width: '100%px',
+  height: '60px',
+  padding: '20px',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const TextP = styled(Typography)(({ theme }) => ({
-  fontSize: "13px",
+  fontSize: '13px',
   fontWeight: 600,
-  fontFamily: "Inter",
+  fontFamily: 'Inter',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
-export const TextItalic = styled("span")(({ theme }) => ({
-  fontSize: "13px",
+export const TextItalic = styled('span')(({ theme }) => ({
+  fontSize: '13px',
   fontWeight: 600,
-  fontFamily: "Inter",
-  fontStyle: "italic",
+  fontFamily: 'Inter',
+  fontStyle: 'italic',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
-export const TextSpan = styled("span")(({ theme }) => ({
-  fontSize: "13px",
-  fontFamily: "Inter",
+export const TextSpan = styled('span')(({ theme }) => ({
+  fontSize: '13px',
+  fontFamily: 'Inter',
   fontWeight: 800,
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
 
 export const AddressBox = styled(Box)(({ theme }) => ({
-  display: "flex",
+  display: 'flex',
   border: `1px solid ${
-    theme.palette.mode === "dark"
-      ? "rgba(255, 255, 255, 0.5)"
-      : "rgba(0, 0, 0, 0.3)"
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, 0.5)'
+      : 'rgba(0, 0, 0, 0.3)'
   }`,
-  justifyContent: "space-between",
-  alignItems: "center",
-  width: "auto",
-  height: "25px",
-  padding: "5px 15px",
-  gap: "5px",
-  borderRadius: "100px",
-  fontFamily: "Inter",
-  fontSize: "12px",
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: 'auto',
+  height: '25px',
+  padding: '5px 15px',
+  gap: '5px',
+  borderRadius: '100px',
+  fontFamily: 'Inter',
+  fontSize: '12px',
   fontWeight: 600,
-  lineHeight: "14.52px",
-  textAlign: "left",
+  lineHeight: '14.52px',
+  textAlign: 'left',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
-  cursor: "pointer",
-  transition: "all 0.2s",
+  cursor: 'pointer',
+  transition: 'all 0.2s',
 
-  "&:hover": {
+  '&:hover': {
     backgroundColor:
-      theme.palette.mode === "dark"
-        ? "rgba(41, 41, 43, 1)"
-        : "rgba(240, 240, 240, 1)",
-    color: theme.palette.mode === "dark" ? "#fff" : "#000",
+      theme.palette.mode === 'dark'
+        ? 'rgba(41, 41, 43, 1)'
+        : 'rgba(240, 240, 240, 1)',
+    color: theme.palette.mode === 'dark' ? '#fff' : '#000',
 
-    "svg path": {
-      fill: theme.palette.mode === "dark" ? "#fff" : "#000",
+    'svg path': {
+      fill: theme.palette.mode === 'dark' ? '#fff' : '#000',
     },
   },
 }));
 
 export const CustomButton = styled(Box)(({ theme }) => ({
-  boxSizing: "border-box",
-  padding: "15px 20px",
-  gap: "10px",
+  boxSizing: 'border-box',
+  padding: '15px 20px',
+  gap: '10px',
 
   border: `0.5px solid ${
-    theme.palette.mode === "dark"
-      ? "rgba(255, 255, 255, 0.5)"
-      : "rgba(0, 0, 0, 0.3)"
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, 0.5)'
+      : 'rgba(0, 0, 0, 0.3)'
   }`,
-  filter: "drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3))",
-  borderRadius: "5px",
+  filter: 'drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3))',
+  borderRadius: '5px',
 
-  display: "inline-flex",
-  justifyContent: "center",
-  alignItems: "center",
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
 
-  width: "fit-content",
-  minWidth: "160px",
-  cursor: "pointer",
-  transition: "all 0.2s",
+  width: 'fit-content',
+  minWidth: '160px',
+  cursor: 'pointer',
+  transition: 'all 0.2s',
 
   fontWeight: 600,
-  fontFamily: "Inter",
-  textAlign: "center",
+  fontFamily: 'Inter',
+  textAlign: 'center',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 
-  "&:hover": {
+  '&:hover': {
     backgroundColor:
-      theme.palette.mode === "dark"
-        ? "rgba(41, 41, 43, 1)"
-        : "rgba(230, 230, 230, 1)",
-    color: "#fff",
+      theme.palette.mode === 'dark'
+        ? 'rgba(41, 41, 43, 1)'
+        : 'rgba(230, 230, 230, 1)',
+    color: '#fff',
 
-    "svg path": {
-      fill: "#fff",
+    'svg path': {
+      fill: '#fff',
     },
   },
 }));
@@ -166,39 +163,44 @@ interface CustomButtonProps {
 
 export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
   ({ bgColor, color, theme }) => ({
-    boxSizing: "border-box",
-    padding: "15px 20px",
-    gap: "10px",
+    boxSizing: 'border-box',
+    padding: '15px 20px',
+    gap: '10px',
     border: `0.5px solid ${
-      theme.palette.mode === "dark"
-        ? "rgba(255, 255, 255, 0.5)"
-        : "rgba(0, 0, 0, 0.3)"
+      theme.palette.mode === 'dark'
+        ? 'rgba(255, 255, 255, 0.5)'
+        : 'rgba(0, 0, 0, 0.3)'
     }`,
-    filter: "drop-shadow(1px 4px 10.5px rgba(0,0,0,0.3))",
+    filter: 'drop-shadow(1px 4px 10.5px rgba(0,0,0,0.3))',
     borderRadius: 5,
-    display: "inline-flex",
-    justifyContent: "center",
-    alignItems: "center",
-    width: "fit-content",
-    transition: "all 0.2s",
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 'fit-content',
+    transition: 'all 0.2s',
     minWidth: 160,
-    cursor: "pointer",
+    cursor: 'pointer',
     fontWeight: 600,
-    fontFamily: "Inter",
-    textAlign: "center",
+    fontFamily: 'Inter',
+    textAlign: 'center',
     opacity: 0.7,
 
     // Color and backgroundColor with fallbacks
-    backgroundColor: bgColor || (theme.palette.mode === "dark" ? "#1d1d1d" : "#f5f5f5"),
-    color: color || (theme.palette.mode === "dark" ? "#fff" : "#000"),
+    backgroundColor:
+      bgColor || (theme.palette.mode === 'dark' ? '#1d1d1d' : '#f5f5f5'),
+    color: color || (theme.palette.mode === 'dark' ? '#fff' : '#000'),
 
-    "&:hover": {
+    '&:hover': {
       opacity: 1,
-      backgroundColor: bgColor || (theme.palette.mode === "dark" ? "rgba(41, 41, 43, 1)" : "rgba(230, 230, 230, 1)"),
-      color: color || "#fff",
+      backgroundColor:
+        bgColor ||
+        (theme.palette.mode === 'dark'
+          ? 'rgba(41, 41, 43, 1)'
+          : 'rgba(230, 230, 230, 1)'),
+      color: color || '#fff',
       svg: {
         path: {
-          fill: color || "#fff",
+          fill: color || '#fff',
         },
       },
     },
@@ -206,53 +208,53 @@ export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
 );
 
 export const CustomInput = styled(TextField)(({ theme }) => ({
-  width: "183px", // Adjust the width as needed
-  borderRadius: "5px",
+  width: '183px', // Adjust the width as needed
+  borderRadius: '5px',
   // backgroundColor: "rgba(30, 30, 32, 1)",
-  outline: "none",
+  outline: 'none',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
   input: {
     fontSize: 10,
-    fontFamily: "Inter",
+    fontFamily: 'Inter',
     fontWeight: 400,
-    color: "white",
-    "&::placeholder": {
+    color: 'white',
+    '&::placeholder': {
       fontSize: 16,
-      color: "rgba(255, 255, 255, 0.2)",
+      color: 'rgba(255, 255, 255, 0.2)',
     },
-    outline: "none",
-    padding: "10px",
+    outline: 'none',
+    padding: '10px',
   },
-  "& .MuiOutlinedInput-root": {
-    "& fieldset": {
-      border: "0.5px solid rgba(255, 255, 255, 0.5)",
+  '& .MuiOutlinedInput-root': {
+    '& fieldset': {
+      border: '0.5px solid rgba(255, 255, 255, 0.5)',
     },
-    "&:hover fieldset": {
-      border: "0.5px solid rgba(255, 255, 255, 0.5)",
+    '&:hover fieldset': {
+      border: '0.5px solid rgba(255, 255, 255, 0.5)',
     },
-    "&.Mui-focused fieldset": {
-      border: "0.5px solid rgba(255, 255, 255, 0.5)",
+    '&.Mui-focused fieldset': {
+      border: '0.5px solid rgba(255, 255, 255, 0.5)',
     },
   },
-  "& .MuiInput-underline:before": {
-    borderBottom: "none",
+  '& .MuiInput-underline:before': {
+    borderBottom: 'none',
   },
-  "& .MuiInput-underline:hover:not(.Mui-disabled):before": {
-    borderBottom: "none",
+  '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
+    borderBottom: 'none',
   },
-  "& .MuiInput-underline:after": {
-    borderBottom: "none",
+  '& .MuiInput-underline:after': {
+    borderBottom: 'none',
   },
 }));
 
 export const CustomLabel = styled(InputLabel)(({ theme }) => ({
   fontWeight: 400,
-  fontFamily: "Inter",
-  fontSize: "10px",
-  lineHeight: "12px",
+  fontFamily: 'Inter',
+  fontSize: '10px',
+  lineHeight: '12px',
   color:
-    theme.palette.mode === "dark"
-      ? "rgba(255, 255, 255, 0.5)"
-      : "rgba(0, 0, 0, 0.5)",
-}));
\ No newline at end of file
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, 0.5)'
+      : 'rgba(0, 0, 0, 0.5)',
+}));