diff --git a/src/App.tsx b/src/App.tsx
index c765d66..3b659dd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -71,11 +71,9 @@ import { PasswordField, ErrorText } from './components';
 import { Group, requestQueueMemberNames } from './components/Group/Group';
 import { TaskManager } from './components/TaskManager/TaskManager.tsx';
 import { useModal } from './common/useModal';
-import { Label } from './components/Group/AddGroup';
 import { CustomizedSnackbars } from './components/Snackbar/Snackbar';
 import SettingsIcon from '@mui/icons-material/Settings';
 import HelpIcon from '@mui/icons-material/Help';
-
 import {
   cleanUrl,
   getProtocol,
@@ -119,11 +117,6 @@ import {
 } from './atoms/global';
 import { useAppFullScreen } from './useAppFullscreen';
 import { NotAuthenticated } from './ExtStates/NotAuthenticated';
-import {
-  openIndexedDB,
-  showSaveFilePicker,
-} from './components/Apps/useQortalMessageListener';
-import { fileToBase64 } from './utils/fileReading';
 import { handleGetFileFromIndexedDB } from './utils/indexedDB';
 import { CoreSyncStatus } from './components/CoreSyncStatus';
 import { Wallets } from './Wallets';
@@ -131,7 +124,6 @@ import { RandomSentenceGenerator } from './utils/seedPhrase/RandomSentenceGenera
 import { useFetchResources } from './common/useFetchResources';
 import { Tutorials } from './components/Tutorials/Tutorials';
 import { useHandleTutorials } from './components/Tutorials/useHandleTutorials';
-import BoundedNumericTextField from './common/BoundedNumericTextField';
 import { useHandleUserInfo } from './components/Group/useHandleUserInfo';
 import { Minting } from './components/Minting/Minting';
 import { isRunningGateway } from './qortalRequests';
@@ -139,7 +131,6 @@ import { QMailStatus } from './components/QMailStatus';
 import { GlobalActions } from './components/GlobalActions/GlobalActions';
 import { useBlockedAddresses } from './components/Group/useBlockUsers';
 import { WalletIcon } from './assets/Icons/WalletIcon';
-import { DrawerUserLookup } from './components/Drawer/DrawerUserLookup';
 import { UserLookup } from './components/UserLookup.tsx/UserLookup';
 import { RegisterName } from './components/RegisterName';
 import { BuyQortInformation } from './components/BuyQortInformation';
@@ -1350,13 +1341,13 @@ function App() {
               slotProps={{
                 tooltip: {
                   sx: {
-                    color: '#ffffff',
-                    backgroundColor: '#444444',
+                    color: theme.palette.text.primary,
+                    backgroundColor: theme.palette.background.default,
                   },
                 },
                 arrow: {
                   sx: {
-                    color: '#444444',
+                    color: theme.palette.text.primary,
                   },
                 },
               }}
@@ -1387,13 +1378,13 @@ function App() {
               slotProps={{
                 tooltip: {
                   sx: {
-                    color: '#ffffff',
-                    backgroundColor: '#444444',
+                    color: theme.palette.text.primary,
+                    backgroundColor: theme.palette.background.default,
                   },
                 },
                 arrow: {
                   sx: {
-                    color: '#444444',
+                    color: theme.palette.text.primary,
                   },
                 },
               }}
@@ -1438,10 +1429,10 @@ function App() {
               >
                 <TextP
                   sx={{
-                    textAlign: 'center',
-                    lineHeight: '24px',
                     fontSize: '20px',
                     fontWeight: 700,
+                    lineHeight: '24px',
+                    textAlign: 'center',
                   }}
                 >
                   {ltcBalance} LTC
@@ -1496,10 +1487,10 @@ function App() {
               >
                 <TextP
                   sx={{
-                    textAlign: 'center',
-                    lineHeight: '24px',
                     fontSize: '20px',
                     fontWeight: 700,
+                    lineHeight: '24px',
+                    textAlign: 'center',
                   }}
                 >
                   {balance?.toFixed(2)} QORT
@@ -1518,13 +1509,13 @@ function App() {
             {userInfo && !userInfo?.name && (
               <TextP
                 sx={{
-                  textAlign: 'center',
-                  lineHeight: 1.2,
+                  color: 'red',
+                  cursor: 'pointer',
                   fontSize: '16px',
                   fontWeight: 500,
-                  cursor: 'pointer',
+                  lineHeight: 1.2,
                   marginTop: '10px',
-                  color: 'red',
+                  textAlign: 'center',
                   textDecoration: 'underline',
                 }}
                 onClick={() => {
@@ -1549,12 +1540,12 @@ function App() {
         )}
         <TextP
           sx={{
-            textAlign: 'center',
-            lineHeight: '24px',
+            cursor: 'pointer',
             fontSize: '12px',
             fontWeight: 500,
-            cursor: 'pointer',
+            lineHeight: '24px',
             marginTop: '10px',
+            textAlign: 'center',
             textDecoration: 'underline',
           }}
           onClick={async () => {
@@ -1574,18 +1565,18 @@ function App() {
     return (
       <AuthenticatedContainer
         sx={{
-          width: isMobile ? '100vw' : 'auto',
+          backgroundColor: theme.palette.background.default,
           display: 'flex',
-          backgroundColor: 'var(--bg-2)',
           justifyContent: 'flex-end',
+          width: isMobile ? '100vw' : 'auto',
         }}
       >
         {isMobile && (
           <Box
             sx={{
-              padding: '10px',
               display: 'flex',
               justifyContent: 'flex-end',
+              padding: '10px',
             }}
           >
             <CloseIcon
@@ -1610,10 +1601,10 @@ function App() {
         >
           <Box
             sx={{
-              width: '100%',
+              alignItems: 'center',
               display: 'flex',
               flexDirection: 'column',
-              alignItems: 'center',
+              width: '100%',
             }}
           >
             <Spacer height="20px" />
@@ -1638,13 +1629,13 @@ function App() {
                   slotProps={{
                     tooltip: {
                       sx: {
-                        color: '#ffffff',
-                        backgroundColor: '#444444',
+                        color: theme.palette.text.primary,
+                        backgroundColor: theme.palette.background.default,
                       },
                     },
                     arrow: {
                       sx: {
-                        color: '#444444',
+                        color: theme.palette.text.primary,
                       },
                     },
                   }}
@@ -1687,13 +1678,13 @@ function App() {
                 slotProps={{
                   tooltip: {
                     sx: {
-                      color: '#ffffff',
-                      backgroundColor: '#444444',
+                      color: theme.palette.text.primary,
+                      backgroundColor: theme.palette.background.default,
                     },
                   },
                   arrow: {
                     sx: {
-                      color: '#444444',
+                      color: theme.palette.text.primary,
                     },
                   },
                 }}
@@ -1724,13 +1715,13 @@ function App() {
                 slotProps={{
                   tooltip: {
                     sx: {
-                      color: '#ffffff',
-                      backgroundColor: '#444444',
+                      color: theme.palette.text.primary,
+                      backgroundColor: theme.palette.background.default,
                     },
                   },
                   arrow: {
                     sx: {
-                      color: '#444444',
+                      color: theme.palette.text.primary,
                     },
                   },
                 }}
@@ -1761,13 +1752,13 @@ function App() {
                 slotProps={{
                   tooltip: {
                     sx: {
-                      color: '#ffffff',
-                      backgroundColor: '#444444', // TODO: use theme and adapt colors
+                      color: theme.palette.text.primary,
+                      backgroundColor: theme.palette.background.default,
                     },
                   },
                   arrow: {
                     sx: {
-                      color: '#444444',
+                      color: theme.palette.text.primary,
                     },
                   },
                 }}
@@ -1797,13 +1788,13 @@ function App() {
                   slotProps={{
                     tooltip: {
                       sx: {
-                        color: '#ffffff',
-                        backgroundColor: '#444444',
+                        color: theme.palette.text.primary,
+                        backgroundColor: theme.palette.background.default,
                       },
                     },
                     arrow: {
                       sx: {
-                        color: '#444444',
+                        color: theme.palette.text.primary,
                       },
                     },
                   }}
@@ -1904,13 +1895,13 @@ function App() {
                 slotProps={{
                   tooltip: {
                     sx: {
-                      color: '#ffffff',
-                      backgroundColor: '#444444',
+                      color: theme.palette.text.primary,
+                      backgroundColor: theme.palette.background.default,
                     },
                   },
                   arrow: {
                     sx: {
-                      color: '#444444',
+                      color: theme.palette.text.primary,
                     },
                   },
                 }}
@@ -1947,13 +1938,13 @@ function App() {
                   slotProps={{
                     tooltip: {
                       sx: {
-                        color: '#ffffff',
-                        backgroundColor: '#444444',
+                        color: theme.palette.text.primary,
+                        backgroundColor: theme.palette.background.default,
                       },
                     },
                     arrow: {
                       sx: {
-                        color: '#444444',
+                        color: theme.palette.text.primary,
                       },
                     },
                   }}
@@ -1976,13 +1967,13 @@ function App() {
               slotProps={{
                 tooltip: {
                   sx: {
-                    color: '#ffffff',
-                    backgroundColor: '#444444',
+                    color: theme.palette.text.primary,
+                    backgroundColor: theme.palette.background.default,
                   },
                 },
                 arrow: {
                   sx: {
-                    color: '#444444',
+                    color: theme.palette.text.primary,
                   },
                 },
               }}
@@ -2104,7 +2095,7 @@ function App() {
               width: '100%',
               height: '100%',
               position: 'fixed',
-              background: '#27282c',
+              background: theme.palette.background.default,
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'center',
@@ -2573,6 +2564,7 @@ function App() {
               <img src={Logo1Dark} className="base-image" />
             </div>
             <Spacer height="38px" />
+
             <TextP
               sx={{
                 textAlign: 'center',
@@ -2583,7 +2575,9 @@ function App() {
               <TextItalic>{requestConnection?.hostname}</TextItalic> <br></br>
               <TextSpan>requests authentication</TextSpan>
             </TextP>
+
             <Spacer height="38px" />
+
             <Box
               sx={{
                 display: 'flex',
@@ -2591,12 +2585,16 @@ function App() {
                 gap: '14px',
               }}
             ></Box>
+
             <Spacer height="38px" />
+
             <CustomButton {...getRootProps()}>
               <input {...getInputProps()} />
               Authenticate
             </CustomButton>
+
             <Spacer height="6px" />
+
             <CustomButton
               onClick={() => {
                 setExtstate('create-wallet');
@@ -2609,14 +2607,15 @@ function App() {
         {extState === 'wallets' && (
           <>
             <Spacer height="22px" />
+
             <Box
               sx={{
-                display: 'flex',
-                width: '100%',
-                justifyContent: 'flex-start',
-                paddingLeft: '22px',
                 boxSizing: 'border-box',
+                display: 'flex',
+                justifyContent: 'flex-start',
                 maxWidth: '700px',
+                paddingLeft: '22px',
+                width: '100%',
               }}
             >
               <Return
@@ -2631,6 +2630,7 @@ function App() {
                 }}
               />
             </Box>
+
             <Wallets
               setRawWallet={setRawWallet}
               setExtState={setExtstate}
@@ -2643,12 +2643,12 @@ function App() {
             <Spacer height="22px" />
             <Box
               sx={{
-                display: 'flex',
-                width: '100%',
-                justifyContent: 'flex-start',
-                paddingLeft: '22px',
                 boxSizing: 'border-box',
+                display: 'flex',
+                justifyContent: 'flex-start',
                 maxWidth: '700px',
+                paddingLeft: '22px',
+                width: '100%',
               }}
             >
               <Return
@@ -2684,7 +2684,9 @@ function App() {
               <Typography>
                 {rawWallet?.name ? rawWallet?.name : rawWallet?.address0}
               </Typography>
+
               <Spacer height="10px" />
+
               <TextP
                 sx={{
                   textAlign: 'start',
@@ -2696,13 +2698,16 @@ function App() {
                 Authenticate
               </TextP>
             </Box>
+
             <Spacer height="35px" />
 
             <>
               <CustomLabel htmlFor="standard-adornment-password">
                 Wallet Password
               </CustomLabel>
+
               <Spacer height="5px" />
+
               <PasswordField
                 id="standard-adornment-password"
                 value={authenticatePassword}
@@ -2739,9 +2744,11 @@ function App() {
               )}
 
               <Spacer height="20px" />
+
               <CustomButton onClick={authenticateWallet}>
                 Authenticate
               </CustomButton>
+
               <ErrorText>{walletToBeDecryptedError}</ErrorText>
             </>
           </>
@@ -2751,12 +2758,12 @@ function App() {
             <Spacer height="22px" />
             <Box
               sx={{
-                display: 'flex',
-                width: '100%',
-                justifyContent: 'flex-start',
-                paddingLeft: '22px',
                 boxSizing: 'border-box',
+                display: 'flex',
+                justifyContent: 'flex-start',
                 maxWidth: '700px',
+                paddingLeft: '22px',
+                width: '100%',
               }}
             >
               <Return
@@ -2777,7 +2784,9 @@ function App() {
             >
               <img src={Logo1Dark} className="base-image" />
             </div>
+
             <Spacer height="35px" />
+
             <Box
               sx={{
                 display: 'flex',
@@ -2796,7 +2805,9 @@ function App() {
                 Download Account
               </TextP>
             </Box>
+
             <Spacer height="35px" />
+
             {!walletToBeDownloaded && (
               <>
                 <CustomLabel htmlFor="standard-adornment-password">
@@ -2841,12 +2852,12 @@ function App() {
                 <Spacer height="22px" />
                 <Box
                   sx={{
-                    display: 'flex',
-                    width: '100%',
-                    justifyContent: 'flex-start',
-                    paddingLeft: '22px',
                     boxSizing: 'border-box',
+                    display: 'flex',
+                    justifyContent: 'flex-start',
                     maxWidth: '700px',
+                    paddingLeft: '22px',
+                    width: '100%',
                   }}
                 >
                   <Return
@@ -2947,7 +2958,6 @@ function App() {
                       sx={{
                         fontSize: '18px',
                         marginTop: '15px',
-
                         textAlign: 'center',
                       }}
                     >
@@ -2988,11 +2998,11 @@ function App() {
                     <DialogContent>
                       <Box
                         sx={{
-                          flexDirection: 'column',
-                          maxWidth: '400px',
                           alignItems: 'center',
-                          gap: '10px',
                           display: showSeed ? 'flex' : 'none',
+                          flexDirection: 'column',
+                          gap: '10px',
+                          maxWidth: '400px',
                         }}
                       >
                         <Typography
@@ -3005,11 +3015,11 @@ function App() {
 
                         <Box
                           sx={{
-                            textAlign: 'center',
-                            width: '100%',
-                            backgroundColor: '#1f2023',
+                            background: theme.palette.background.paper,
                             borderRadius: '5px',
                             padding: '10px',
+                            textAlign: 'center',
+                            width: '100%',
                           }}
                         >
                           {generatorRef.current?.parsedString}
@@ -3036,6 +3046,7 @@ function App() {
                     </DialogActions>
                   </Dialog>
                 </Box>
+
                 <Box
                   sx={{
                     display: creationStep === 2 ? 'flex' : 'none',
@@ -3044,10 +3055,13 @@ function App() {
                   }}
                 >
                   <Spacer height="14px" />
+
                   <CustomLabel htmlFor="standard-adornment-password">
                     Wallet Password
                   </CustomLabel>
+
                   <Spacer height="5px" />
+
                   <PasswordField
                     id="standard-adornment-password"
                     value={walletToBeDownloadedPassword}
@@ -3055,11 +3069,15 @@ function App() {
                       setWalletToBeDownloadedPassword(e.target.value)
                     }
                   />
+
                   <Spacer height="6px" />
+
                   <CustomLabel htmlFor="standard-adornment-password">
                     Confirm Wallet Password
                   </CustomLabel>
+
                   <Spacer height="5px" />
+
                   <PasswordField
                     id="standard-adornment-password"
                     value={walletToBeDownloadedPasswordConfirm}
@@ -3068,9 +3086,11 @@ function App() {
                     }
                   />
                   <Spacer height="5px" />
+
                   <Typography variant="body2">
                     There is no minimum length requirement
                   </Typography>
+
                   <Spacer height="17px" />
 
                   <CustomButton onClick={createAccountFunc}>
@@ -3127,13 +3147,13 @@ function App() {
         {isOpenSendQortSuccess && (
           <Box
             sx={{
-              width: '100%',
-              height: '100%',
-              position: 'fixed',
-              background: '#27282c',
+              alignItems: 'center',
+              background: theme.palette.background.default,
               display: 'flex',
               flexDirection: 'column',
-              alignItems: 'center',
+              height: '100%',
+              position: 'fixed',
+              width: '100%',
               zIndex: 10000,
             }}
           >
@@ -3260,7 +3280,7 @@ function App() {
               <Button
                 sx={{
                   backgroundColor: 'var(--green)',
-                  color: 'black',
+                  color: theme.palette.text.primary,
                   fontWeight: 'bold',
                   opacity: 0.7,
                   '&:hover': {
diff --git a/src/components/QortPayment.tsx b/src/components/QortPayment.tsx
index ec68533..d9baa65 100644
--- a/src/components/QortPayment.tsx
+++ b/src/components/QortPayment.tsx
@@ -1,5 +1,5 @@
-import { Box, CircularProgress } from '@mui/material';
-import React, { useEffect, useState } from 'react';
+import { Box, CircularProgress, useTheme } from '@mui/material';
+import { useState } from 'react';
 import {
   CustomButton,
   CustomInput,
@@ -13,6 +13,7 @@ import { ErrorText } from './ErrorText/ErrorText';
 import { getFee } from '../background';
 
 export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
+  const theme = useTheme();
   const [paymentTo, setPaymentTo] = useState<string>(defaultPaymentTo);
   const [paymentAmount, setPaymentAmount] = useState<number>(0);
   const [paymentPassword, setPaymentPassword] = useState<string>('');
@@ -42,7 +43,9 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
         message: `Would you like to transfer ${Number(paymentAmount)} QORT?`,
         paymentFee: fee.fee + ' QORT',
       });
+
       setIsLoadingSendCoin(true);
+
       window
         .sendMessage('sendCoin', {
           amount: Number(paymentAmount),
@@ -62,65 +65,76 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
           setIsLoadingSendCoin(false);
         });
     } catch (error) {
-      // error
+      console.log(error);
     }
   };
+
   return (
     <>
       <Box
         sx={{
+          alignItems: 'flex-start',
           display: 'flex',
           flexDirection: 'column',
-          alignItems: 'flex-start',
         }}
       >
         <TextP
           sx={{
-            textAlign: 'start',
-            lineHeight: '24px',
             fontSize: '20px',
             fontWeight: 600,
+            lineHeight: '24px',
+            textAlign: 'start',
           }}
         >
           Transfer QORT
         </TextP>
+
         <Spacer height="35px" />
+
         <TextP
           sx={{
-            textAlign: 'start',
-            lineHeight: '16px',
+            color: theme.palette.text.primary,
             fontSize: '20px',
             fontWeight: 600,
-            color: 'rgba(255, 255, 255, 0.5)',
+            lineHeight: '16px',
+            textAlign: 'start',
           }}
         >
           Balance:
         </TextP>
+
         <TextP
           sx={{
-            textAlign: 'start',
-            lineHeight: '24px',
             fontSize: '20px',
             fontWeight: 700,
+            lineHeight: '24px',
+            textAlign: 'start',
           }}
         >
           {balance?.toFixed(2)} QORT
         </TextP>
       </Box>
+
       <Spacer height="35px" />
 
       <Box>
         <CustomLabel htmlFor="standard-adornment-name">To</CustomLabel>
+
         <Spacer height="5px" />
+
         <CustomInput
           id="standard-adornment-name"
           value={paymentTo}
           onChange={(e) => setPaymentTo(e.target.value)}
           autoComplete="off"
         />
+
         <Spacer height="6px" />
+
         <CustomLabel htmlFor="standard-adornment-amount">Amount</CustomLabel>
+
         <Spacer height="5px" />
+
         <BoundedNumericTextField
           value={paymentAmount}
           minValue={0}
@@ -130,11 +144,15 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
           allowNegatives={false}
           afterChange={(e: string) => setPaymentAmount(+e)}
         />
+
         <Spacer height="6px" />
+
         <CustomLabel htmlFor="standard-adornment-password">
           Confirm Wallet Password
         </CustomLabel>
+
         <Spacer height="5px" />
+
         <PasswordField
           id="standard-adornment-password"
           value={paymentPassword}
@@ -142,10 +160,14 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
           autoComplete="off"
         />
       </Box>
+
       <Spacer height="10px" />
+
       <ErrorText>{sendPaymentError}</ErrorText>
       {/* <Typography>{sendPaymentSuccess}</Typography> */}
+
       <Spacer height="25px" />
+
       <CustomButton
         sx={{
           cursor: isLoadingSendCoin ? 'default' : 'pointer',
@@ -159,7 +181,7 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
           <CircularProgress
             size={16}
             sx={{
-              color: 'white',
+              color: theme.palette.text.primary,
             }}
           />
         )}
diff --git a/src/components/UserLookup.tsx/UserLookup.tsx b/src/components/UserLookup.tsx/UserLookup.tsx
index fe6fb44..0b19ba1 100644
--- a/src/components/UserLookup.tsx/UserLookup.tsx
+++ b/src/components/UserLookup.tsx/UserLookup.tsx
@@ -497,6 +497,7 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
                           </ButtonBase>
                         </Tooltip>
                       </TableCell>
+
                       <TableCell>
                         <Tooltip
                           title={
diff --git a/src/styles/App-styles.ts b/src/styles/App-styles.ts
index da2b8c1..eba266f 100644
--- a/src/styles/App-styles.ts
+++ b/src/styles/App-styles.ts
@@ -2,113 +2,106 @@ 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',
-  height: '100vh',
-  radius: '15px',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100vh',
   overflow: 'hidden',
+  radius: '15px',
+  width: '100vw',
 }));
 
 export const AuthenticatedContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  justifyContent: 'space-between',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
+  display: 'flex',
+  height: '100%',
+  justifyContent: 'space-between',
+  width: '100%',
 }));
 
 export const AuthenticatedContainerInnerLeft = styled(Box)(({ theme }) => ({
-  display: 'flex',
   alignItems: 'center',
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+  display: 'flex',
   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%',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  width: '60px',
 }));
 
 export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({
-  display: 'flex',
   alignItems: 'center',
-  justifyContent: 'flex-start',
-  width: '100%px',
-  height: '60px',
-  padding: '20px',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
+  display: 'flex',
+  height: '60px',
+  justifyContent: 'flex-start',
+  padding: '20px',
+  width: '100%px',
 }));
 
 export const TextP = styled(Typography)(({ theme }) => ({
-  fontSize: '13px',
-  fontWeight: 600,
-  fontFamily: 'Inter',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
+  fontFamily: 'Inter',
+  fontSize: '13px',
+  fontWeight: 600,
 }));
 
 export const TextItalic = styled('span')(({ theme }) => ({
-  fontSize: '13px',
-  fontWeight: 600,
-  fontFamily: 'Inter',
-  fontStyle: 'italic',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
+  fontFamily: 'Inter',
+  fontSize: '13px',
+  fontStyle: 'italic',
+  fontWeight: 600,
 }));
 
 export const TextSpan = styled('span')(({ theme }) => ({
-  fontSize: '13px',
-  fontFamily: 'Inter',
-  fontWeight: 800,
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
+  fontFamily: 'Inter',
+  fontSize: '13px',
+  fontWeight: 800,
 }));
 
 export const AddressBox = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  border: `1px solid ${
-    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',
+  backgroundColor: theme.palette.background.default,
+  borderColor: theme.palette.background.paper,
   borderRadius: '100px',
+  borderStyle: 'solid',
+  borderWidth: '1px',
+  color: theme.palette.text.primary,
+  cursor: 'pointer',
+  display: 'flex',
   fontFamily: 'Inter',
   fontSize: '12px',
   fontWeight: 600,
+  gap: '5px',
+  height: '25px',
+  justifyContent: 'space-between',
   lineHeight: '14.52px',
+  padding: '5px 15px',
   textAlign: 'left',
-  backgroundColor: theme.palette.background.default,
-  color: theme.palette.text.primary,
-  cursor: 'pointer',
   transition: 'all 0.2s',
-
+  width: 'auto',
   '&:hover': {
-    backgroundColor:
-      theme.palette.mode === 'dark'
-        ? 'rgba(41, 41, 43, 1)'
-        : 'rgba(240, 240, 240, 1)',
-    color: theme.palette.mode === 'dark' ? '#fff' : '#000',
-
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.secondary,
     'svg path': {
       fill: theme.palette.mode === 'dark' ? '#fff' : '#000',
     },
@@ -116,40 +109,29 @@ export const AddressBox = styled(Box)(({ theme }) => ({
 }));
 
 export const CustomButton = styled(Box)(({ theme }) => ({
-  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)'
-  }`,
-  filter: 'drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3))',
-  borderRadius: '5px',
-
-  display: 'inline-flex',
-  justifyContent: 'center',
   alignItems: 'center',
-
-  width: 'fit-content',
-  minWidth: '160px',
-  cursor: 'pointer',
-  transition: 'all 0.2s',
-
-  fontWeight: 600,
-  fontFamily: 'Inter',
-  textAlign: 'center',
   backgroundColor: theme.palette.background.default,
+  borderColor: theme.palette.background.paper,
+  borderRadius: '5px',
+  borderStyle: 'solid',
+  borderWidth: '0.5px',
+  boxSizing: 'border-box',
   color: theme.palette.text.primary,
-
+  cursor: 'pointer',
+  display: 'inline-flex',
+  filter: 'drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3))',
+  fontFamily: 'Inter',
+  fontWeight: 600,
+  gap: '10px',
+  justifyContent: 'center',
+  minWidth: '160px',
+  padding: '15px 20px',
+  textAlign: 'center',
+  transition: 'all 0.2s',
+  width: 'fit-content',
   '&:hover': {
-    backgroundColor:
-      theme.palette.mode === 'dark'
-        ? 'rgb(136, 130, 130)'
-        : 'rgb(173, 173, 180)',
+    backgroundColor: theme.palette.background.default,
     color: '#fff',
-
     'svg path': {
       fill: '#fff',
     },
@@ -163,40 +145,30 @@ interface CustomButtonProps {
 
 export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
   ({ bgColor, color, theme }) => ({
-    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)'
-    }`,
-    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',
-    minWidth: 160,
+    backgroundColor: bgColor || theme.palette.background.default,
+    borderColor: theme.palette.background.paper,
+    borderRadius: 5,
+    borderStyle: 'solid',
+    borderWidth: '0.5px',
+    boxSizing: 'border-box',
+    color: color || theme.palette.background.default,
     cursor: 'pointer',
-    fontWeight: 600,
+    display: 'inline-flex',
+    filter: 'drop-shadow(1px 4px 10.5px rgba(0,0,0,0.3))',
     fontFamily: 'Inter',
-    textAlign: 'center',
+    fontWeight: 600,
+    gap: '10px',
+    justifyContent: 'center',
+    minWidth: 160,
     opacity: 0.7,
-
-    // Color and backgroundColor with fallbacks
-    backgroundColor:
-      bgColor || (theme.palette.mode === 'dark' ? '#1d1d1d' : '#f5f5f5'),
-    color: color || (theme.palette.mode === 'dark' ? '#fff' : '#000'),
-
+    padding: '15px 20px',
+    textAlign: 'center',
+    transition: 'all 0.2s',
+    width: 'fit-content',
     '&:hover': {
       opacity: 1,
-      backgroundColor:
-        bgColor ||
-        (theme.palette.mode === 'dark'
-          ? 'rgba(41, 41, 43, 1)'
-          : 'rgba(230, 230, 230, 1)'),
+      backgroundColor: bgColor || theme.palette.background.default,
       color: color || '#fff',
       svg: {
         path: {
@@ -208,33 +180,39 @@ export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
 );
 
 export const CustomInput = styled(TextField)(({ theme }) => ({
-  width: '183px', // Adjust the width as needed
-  borderRadius: '5px',
-  // backgroundColor: "rgba(30, 30, 32, 1)",
-  outline: 'none',
   backgroundColor: theme.palette.background.default,
+  borderColor: theme.palette.background.paper,
+  borderRadius: '5px',
   color: theme.palette.text.primary,
+  outline: 'none',
+  width: '183px', // Adjust the width as needed
   input: {
     fontSize: 10,
     fontFamily: 'Inter',
     fontWeight: 400,
-    color: 'white',
+    color: theme.palette.text.primary,
     '&::placeholder': {
       fontSize: 16,
-      color: 'rgba(255, 255, 255, 0.2)',
+      color: theme.palette.text.secondary,
     },
     outline: 'none',
     padding: '10px',
   },
   '& .MuiOutlinedInput-root': {
     '& fieldset': {
-      border: '0.5px solid rgba(255, 255, 255, 0.5)',
+      borderColor: theme.palette.background.paper,
+      borderRadius: '0.5px',
+      borderStyle: 'solid',
     },
     '&:hover fieldset': {
-      border: '0.5px solid rgba(255, 255, 255, 0.5)',
+      borderColor: theme.palette.background.paper,
+      borderRadius: '0.5px',
+      borderStyle: 'solid',
     },
     '&.Mui-focused fieldset': {
-      border: '0.5px solid rgba(255, 255, 255, 0.5)',
+      borderColor: theme.palette.background.paper,
+      borderRadius: '0.5px',
+      borderStyle: 'solid',
     },
   },
   '& .MuiInput-underline:before': {
@@ -249,12 +227,10 @@ export const CustomInput = styled(TextField)(({ theme }) => ({
 }));
 
 export const CustomLabel = styled(InputLabel)(({ theme }) => ({
-  fontWeight: 400,
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
   fontFamily: 'Inter',
   fontSize: '10px',
+  fontWeight: 400,
   lineHeight: '12px',
-  color:
-    theme.palette.mode === 'dark'
-      ? 'rgba(255, 255, 255, 0.5)'
-      : 'rgba(0, 0, 0, 0.5)',
 }));