diff --git a/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx b/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx
index fa7ae1659c..a9da0f1ef3 100644
--- a/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx
+++ b/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Alert, Box, Paper, Dialog, DialogContent, DialogTitle, IconButton, Stack, Typography } from '@mui/material';
 import { Close } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
 
 const passwordCreationSteps = [
   'Log out',
@@ -10,34 +11,46 @@ const passwordCreationSteps = [
   'Now you can create multiple accounts',
 ];
 
-export const MultiAccountHowTo = ({ show, handleClose }: { show: boolean; handleClose: () => void }) => (
-  <Dialog open={show} onClose={handleClose} fullWidth PaperComponent={Paper} PaperProps={{ elevation: 0 }}>
-    <DialogTitle>
-      <Box display="flex" justifyContent="space-between" alignItems="center">
-        <Typography variant="h6">Multi accounts</Typography>
-        <IconButton onClick={handleClose}>
-          <Close />
-        </IconButton>
-      </Box>
-      <Typography variant="body1" sx={{ color: (theme) => theme.palette.nym.text.muted }}>
-        How to set up multiple accounts
-      </Typography>
-    </DialogTitle>
-    <DialogContent>
-      <Stack spacing={2}>
-        <Alert
-          severity="warning"
-          icon={false}
-          sx={(t) => (t.palette.mode === 'dark' ? { bgcolor: (theme) => theme.palette.background.paper } : {})}
-        >
-          <Typography>In order to create multiple accounts your wallet needs a password.</Typography>
-          <Typography>Follow steps below to create password.</Typography>
-        </Alert>
-        <Typography>How to create a password for your account</Typography>
-        {passwordCreationSteps.map((step, index) => (
-          <Typography key={step}>{`${index + 1}. ${step}`}</Typography>
-        ))}
-      </Stack>
-    </DialogContent>
-  </Dialog>
-);
+export const MultiAccountHowTo = ({ show, handleClose }: { show: boolean; handleClose: () => void }) => {
+  const theme = useTheme();
+  return (
+    <Dialog
+      open={show}
+      onClose={handleClose}
+      fullWidth
+      PaperProps={{
+        style: { border: `1px solid ${theme.palette.nym.nymWallet.modal.border}` },
+      }}
+    >
+      <Paper>
+        <DialogTitle>
+          <Box display="flex" justifyContent="space-between" alignItems="center">
+            <Typography variant="h6">Multi accounts</Typography>
+            <IconButton onClick={handleClose}>
+              <Close />
+            </IconButton>
+          </Box>
+          <Typography variant="body1" sx={{ color: (theme) => theme.palette.nym.text.muted }}>
+            How to set up multiple accounts
+          </Typography>
+        </DialogTitle>
+        <DialogContent>
+          <Stack spacing={2}>
+            <Alert
+              severity="warning"
+              icon={false}
+              sx={(t) => (t.palette.mode === 'dark' ? { bgcolor: (theme) => theme.palette.background.paper } : {})}
+            >
+              <Typography>In order to create multiple accounts your wallet needs a password.</Typography>
+              <Typography>Follow steps below to create password.</Typography>
+            </Alert>
+            <Typography>How to create a password for your account</Typography>
+            {passwordCreationSteps.map((step, index) => (
+              <Typography key={step}>{`${index + 1}. ${step}`}</Typography>
+            ))}
+          </Stack>
+        </DialogContent>
+      </Paper>
+    </Dialog>
+  );
+};
diff --git a/nym-wallet/src/components/Accounts/modals/AccountsModal.tsx b/nym-wallet/src/components/Accounts/modals/AccountsModal.tsx
index efe5a5428c..91525b8a54 100644
--- a/nym-wallet/src/components/Accounts/modals/AccountsModal.tsx
+++ b/nym-wallet/src/components/Accounts/modals/AccountsModal.tsx
@@ -12,6 +12,7 @@ import {
   Divider,
 } from '@mui/material';
 import { Add, ArrowDownwardSharp, Close } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
 import { AccountsContext } from 'src/context';
 import { AccountItem } from '../AccountItem';
 import { ConfirmPasswordModal } from './ConfirmPasswordModal';
@@ -21,6 +22,8 @@ export const AccountsModal = () => {
     useContext(AccountsContext);
   const [accountToSwitchTo, setAccountToSwitchTo] = useState<string>();
 
+  const theme = useTheme();
+
   const handleClose = () => {
     setDialogToDisplay(undefined);
     setError(undefined);
@@ -47,48 +50,51 @@ export const AccountsModal = () => {
       open={dialogToDisplay === 'Accounts'}
       onClose={handleClose}
       fullWidth
-      PaperComponent={Paper}
-      PaperProps={{ elevation: 0 }}
+      PaperProps={{
+        style: { border: `1px solid ${theme.palette.nym.nymWallet.modal.border}` },
+      }}
     >
-      <DialogTitle>
-        <Box display="flex" justifyContent="space-between" alignItems="center">
-          <Typography variant="h6">Accounts</Typography>
-          <IconButton onClick={handleClose}>
-            <Close />
-          </IconButton>
-        </Box>
-        <Typography fontSize="small" sx={{ color: 'grey.600' }}>
-          Switch between accounts
-        </Typography>
-      </DialogTitle>
-      <DialogContent sx={{ padding: 0 }}>
-        {accounts?.map(({ id, address }) => (
-          <AccountItem
-            name={id}
-            address={address}
-            key={address}
-            onSelectAccount={() => {
-              if (selectedAccount?.id !== id) {
-                setAccountToSwitchTo(id);
-              }
-            }}
-          />
-        ))}
-      </DialogContent>
-      <Divider variant="middle" sx={{ mt: 3 }} />
-      <DialogActions sx={{ p: 3 }}>
-        <Button startIcon={<ArrowDownwardSharp />} onClick={() => setDialogToDisplay('Import')}>
-          Import account
-        </Button>
-        <Button
-          disableElevation
-          variant="contained"
-          startIcon={<Add fontSize="small" />}
-          onClick={() => setDialogToDisplay('Add')}
-        >
-          Add new account
-        </Button>
-      </DialogActions>
+      <Paper>
+        <DialogTitle>
+          <Box display="flex" justifyContent="space-between" alignItems="center">
+            <Typography variant="h6">Accounts</Typography>
+            <IconButton onClick={handleClose}>
+              <Close />
+            </IconButton>
+          </Box>
+          <Typography fontSize="small" sx={{ color: 'grey.600' }}>
+            Switch between accounts
+          </Typography>
+        </DialogTitle>
+        <DialogContent sx={{ padding: 0 }}>
+          {accounts?.map(({ id, address }) => (
+            <AccountItem
+              name={id}
+              address={address}
+              key={address}
+              onSelectAccount={() => {
+                if (selectedAccount?.id !== id) {
+                  setAccountToSwitchTo(id);
+                }
+              }}
+            />
+          ))}
+        </DialogContent>
+        <Divider variant="middle" sx={{ mt: 3 }} />
+        <DialogActions sx={{ p: 3 }}>
+          <Button startIcon={<ArrowDownwardSharp />} onClick={() => setDialogToDisplay('Import')}>
+            Import account
+          </Button>
+          <Button
+            disableElevation
+            variant="contained"
+            startIcon={<Add fontSize="small" />}
+            onClick={() => setDialogToDisplay('Add')}
+          >
+            Add new account
+          </Button>
+        </DialogActions>
+      </Paper>
     </Dialog>
   );
 };
diff --git a/nym-wallet/src/components/Accounts/modals/ConfirmPasswordModal.tsx b/nym-wallet/src/components/Accounts/modals/ConfirmPasswordModal.tsx
index 29694fcda8..07baa9b8d8 100644
--- a/nym-wallet/src/components/Accounts/modals/ConfirmPasswordModal.tsx
+++ b/nym-wallet/src/components/Accounts/modals/ConfirmPasswordModal.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { Box, Paper, Dialog, DialogTitle, IconButton, Typography } from '@mui/material';
-import { ArrowBack } from '@mui/icons-material';
+import { Paper, Dialog, DialogTitle, Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { ConfirmPassword } from 'src/components/ConfirmPassword';
 import { AccountsContext } from 'src/context';
 
@@ -14,28 +14,32 @@ export const ConfirmPasswordModal = ({
   onConfirm: (password: string) => Promise<void>;
 }) => {
   const { isLoading, error } = useContext(AccountsContext);
+  const theme = useTheme();
 
   return (
     <Dialog
       open={Boolean(accountName)}
       onClose={onClose}
       fullWidth
-      PaperComponent={Paper}
-      PaperProps={{ elevation: 0 }}
+      PaperProps={{
+        style: { border: `1px solid ${theme.palette.nym.nymWallet.modal.border}` },
+      }}
     >
-      <DialogTitle>
-        <Typography variant="h6">Switch account</Typography>
-        <Typography fontSize="small" sx={{ color: 'grey.600' }}>
-          Confirm password
-        </Typography>
-      </DialogTitle>
-      <ConfirmPassword
-        onConfirm={onConfirm}
-        error={error}
-        isLoading={isLoading}
-        buttonTitle="Switch account"
-        onCancel={onClose}
-      />
+      <Paper>
+        <DialogTitle>
+          <Typography variant="h6">Switch account</Typography>
+          <Typography fontSize="small" sx={{ color: 'grey.600' }}>
+            Confirm password
+          </Typography>
+        </DialogTitle>
+        <ConfirmPassword
+          onConfirm={onConfirm}
+          error={error}
+          isLoading={isLoading}
+          buttonTitle="Switch account"
+          onCancel={onClose}
+        />
+      </Paper>
     </Dialog>
   );
 };
diff --git a/nym-wallet/src/components/Accounts/modals/EditAccountModal.tsx b/nym-wallet/src/components/Accounts/modals/EditAccountModal.tsx
index 91a0a65e9d..8ddbb207b3 100644
--- a/nym-wallet/src/components/Accounts/modals/EditAccountModal.tsx
+++ b/nym-wallet/src/components/Accounts/modals/EditAccountModal.tsx
@@ -12,6 +12,7 @@ import {
   Typography,
 } from '@mui/material';
 import { Close } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
 import { AccountsContext } from 'src/context';
 
 export const EditAccountModal = () => {
@@ -19,6 +20,8 @@ export const EditAccountModal = () => {
 
   const { accountToEdit, dialogToDisplay, setDialogToDisplay, handleEditAccount } = useContext(AccountsContext);
 
+  const theme = useTheme();
+
   useEffect(() => {
     setAccountName(accountToEdit ? accountToEdit?.id : '');
   }, [accountToEdit]);
@@ -28,48 +31,51 @@ export const EditAccountModal = () => {
       open={dialogToDisplay === 'Edit'}
       onClose={() => setDialogToDisplay('Accounts')}
       fullWidth
-      PaperComponent={Paper}
-      PaperProps={{ elevation: 0 }}
+      PaperProps={{
+        style: { border: `1px solid ${theme.palette.nym.nymWallet.modal.border}` },
+      }}
     >
-      <DialogTitle>
-        <Box display="flex" justifyContent="space-between" alignItems="center">
-          <Typography variant="h6">Edit account name</Typography>
-          <IconButton onClick={() => setDialogToDisplay('Accounts')}>
-            <Close />
-          </IconButton>
-        </Box>
-        <Typography fontSize="small" sx={{ color: 'grey.600' }}>
-          New wallet address
-        </Typography>
-      </DialogTitle>
-      <DialogContent sx={{ p: 0 }}>
-        <Box sx={{ px: 3, mt: 1 }}>
-          <TextField
-            label="Account name"
+      <Paper>
+        <DialogTitle>
+          <Box display="flex" justifyContent="space-between" alignItems="center">
+            <Typography variant="h6">Edit account name</Typography>
+            <IconButton onClick={() => setDialogToDisplay('Accounts')}>
+              <Close />
+            </IconButton>
+          </Box>
+          <Typography fontSize="small" sx={{ color: 'grey.600' }}>
+            New wallet address
+          </Typography>
+        </DialogTitle>
+        <DialogContent sx={{ p: 0 }}>
+          <Box sx={{ px: 3, mt: 1 }}>
+            <TextField
+              label="Account name"
+              fullWidth
+              value={accountName}
+              onChange={(e) => setAccountName(e.target.value)}
+              autoFocus
+            />
+          </Box>
+        </DialogContent>
+        <DialogActions sx={{ p: 3 }}>
+          <Button
             fullWidth
-            value={accountName}
-            onChange={(e) => setAccountName(e.target.value)}
-            autoFocus
-          />
-        </Box>
-      </DialogContent>
-      <DialogActions sx={{ p: 3 }}>
-        <Button
-          fullWidth
-          disableElevation
-          variant="contained"
-          size="large"
-          onClick={() => {
-            if (accountToEdit) {
-              handleEditAccount({ ...accountToEdit, id: accountName });
-              setDialogToDisplay('Accounts');
-            }
-          }}
-          disabled={!accountName?.length}
-        >
-          Edit
-        </Button>
-      </DialogActions>
+            disableElevation
+            variant="contained"
+            size="large"
+            onClick={() => {
+              if (accountToEdit) {
+                handleEditAccount({ ...accountToEdit, id: accountName });
+                setDialogToDisplay('Accounts');
+              }
+            }}
+            disabled={!accountName?.length}
+          >
+            Edit
+          </Button>
+        </DialogActions>
+      </Paper>
     </Dialog>
   );
 };
diff --git a/nym-wallet/src/components/Bonding/forms/BondMixnodeForm.tsx b/nym-wallet/src/components/Bonding/forms/BondMixnodeForm.tsx
index a603907e4d..fe74699dcf 100644
--- a/nym-wallet/src/components/Bonding/forms/BondMixnodeForm.tsx
+++ b/nym-wallet/src/components/Bonding/forms/BondMixnodeForm.tsx
@@ -157,7 +157,7 @@ const AmountFormData = ({
 
   return (
     <Stack gap={3}>
-      <Box display="flex" gap={3} justifyContent="center" sx={{ mt: 2 }}>
+      <Box display="flex" gap={3} justifyContent="center">
         {hasVestingTokens && <TokenPoolSelector disabled={false} onSelect={(pool) => setValue('tokenPool', pool)} />}
         <CurrencyFormField
           required
@@ -205,7 +205,7 @@ export const BondMixnodeForm = ({
   <>
     {step === 1 && (
       <>
-        <Box sx={{ mb: 2 }}>
+        <Box sx={{ mb: 3 }}>
           <NodeTypeSelector disabled={false} setNodeType={onSelectNodeType} nodeType="mixnode" />
         </Box>
         <NodeFormData onNext={onValidateMixnodeData} mixnodeData={mixnodeData} />
diff --git a/nym-wallet/src/components/Bonding/modals/BondMixnodeModal.tsx b/nym-wallet/src/components/Bonding/modals/BondMixnodeModal.tsx
index c2bf747d83..3151ffad5d 100644
--- a/nym-wallet/src/components/Bonding/modals/BondMixnodeModal.tsx
+++ b/nym-wallet/src/components/Bonding/modals/BondMixnodeModal.tsx
@@ -152,18 +152,16 @@ export const BondMixnodeModal = ({
       subHeader={`Step ${step}/2`}
       okLabel="Next"
     >
-      <Box sx={{ mb: 2 }}>
-        <BondMixnodeForm
-          step={step}
-          denom={denom}
-          mixnodeData={mixnodeData}
-          amountData={amountData}
-          hasVestingTokens={hasVestingTokens}
-          onValidateMixnodeData={handleUpdateMixnodeData}
-          onValidateAmountData={handleUpdateAmountData}
-          onSelectNodeType={onSelectNodeType}
-        />
-      </Box>
+      <BondMixnodeForm
+        step={step}
+        denom={denom}
+        mixnodeData={mixnodeData}
+        amountData={amountData}
+        hasVestingTokens={hasVestingTokens}
+        onValidateMixnodeData={handleUpdateMixnodeData}
+        onValidateAmountData={handleUpdateAmountData}
+        onSelectNodeType={onSelectNodeType}
+      />
     </SimpleModal>
   );
 };
diff --git a/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx b/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx
index 4bdc611f68..ac8cf7fc36 100644
--- a/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx
+++ b/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx
@@ -111,7 +111,7 @@ export const NodeSettings = ({
           Set profit margin
         </Typography>
         <Box sx={{ mb: 3 }}>
-          <TextField placeholder="Profit margin" value={pm} onChange={(e) => setPm(e.target.value)} fullWidth />
+          <TextField label="Profit margin" value={pm} onChange={(e) => setPm(e.target.value)} fullWidth />
           {error && (
             <FormHelperText sx={{ color: 'error.main' }}>
               Profit margin should be a number between 0 and 100
diff --git a/nym-wallet/src/components/ConfirmTX.stories.tsx b/nym-wallet/src/components/ConfirmTX.stories.tsx
index 77bbf4fdcf..2eec07b7e3 100644
--- a/nym-wallet/src/components/ConfirmTX.stories.tsx
+++ b/nym-wallet/src/components/ConfirmTX.stories.tsx
@@ -10,9 +10,9 @@ export default {
 
 const Template: ComponentStory<typeof ConfirmTx> = (args) => (
   <ConfirmTx {...args}>
-    <ModalListItem label="Transaction type:" value="Bond" divider />
-    <ModalListItem label="Current bond:" value="100 NYM" divider />
-    <ModalListItem label="Additional bond:" value="50 NYM" divider />
+    <ModalListItem label="Transaction type" value="Bond" divider />
+    <ModalListItem label="Current bond" value="100 NYM" divider />
+    <ModalListItem label="Additional bond" value="50 NYM" divider />
   </ConfirmTx>
 );
 
diff --git a/nym-wallet/src/components/Delegation/DelegateModal.tsx b/nym-wallet/src/components/Delegation/DelegateModal.tsx
index 50873055e4..a6c1bb0dbf 100644
--- a/nym-wallet/src/components/Delegation/DelegateModal.tsx
+++ b/nym-wallet/src/components/Delegation/DelegateModal.tsx
@@ -213,8 +213,8 @@ export const DelegateModal: React.FC<{
         onPrev={resetFeeState}
         onConfirm={handleOk}
       >
-        <ModalListItem label="Node identity key:" value={identityKey} divider />
-        <ModalListItem label="Amount:" value={`${amount} ${denom.toUpperCase()}`} divider />
+        <ModalListItem label="Node identity key" value={identityKey} divider />
+        <ModalListItem label="Amount" value={`${amount} ${denom.toUpperCase()}`} divider />
       </ConfirmTx>
     );
   }
@@ -267,7 +267,7 @@ export const DelegateModal: React.FC<{
       >
         {errorIdentityKey}
       </Typography>
-      <Box display="flex" gap={3} alignItems="center" sx={{ mt: 3 }}>
+      <Box display="flex" gap={2} alignItems="center" sx={{ mt: 3 }}>
         {hasVestingContract && <TokenPoolSelector disabled={false} onSelect={(pool) => setTokenPool(pool)} />}
         <CurrencyFormField
           required
diff --git a/nym-wallet/src/components/Modals/ErrorModal.tsx b/nym-wallet/src/components/Modals/ErrorModal.tsx
index 3ea54368d2..42d66c634a 100644
--- a/nym-wallet/src/components/Modals/ErrorModal.tsx
+++ b/nym-wallet/src/components/Modals/ErrorModal.tsx
@@ -11,7 +11,10 @@ export const ErrorModal: React.FC<{
   onClose: () => void;
 }> = ({ children, open, title, message, sx, backdropProps, onClose }) => (
   <Modal open={open} onClose={onClose} BackdropProps={backdropProps}>
-    <Box sx={{ ...modalStyle, ...sx }} textAlign="center">
+    <Box
+      sx={{ border: (t) => `1px solid ${t.palette.nym.nymWallet.modal.border}`, ...modalStyle, ...sx }}
+      textAlign="center"
+    >
       <Typography color={(theme) => theme.palette.error.main} mb={1}>
         {title || 'Oh no! Something went wrong...'}
       </Typography>
diff --git a/nym-wallet/src/components/Modals/LoadingModal.tsx b/nym-wallet/src/components/Modals/LoadingModal.tsx
index a50bec77eb..eda3d407a4 100644
--- a/nym-wallet/src/components/Modals/LoadingModal.tsx
+++ b/nym-wallet/src/components/Modals/LoadingModal.tsx
@@ -18,7 +18,10 @@ export const LoadingModal: React.FC<{
   backdropProps?: object;
 }> = ({ sx, backdropProps }) => (
   <Modal open BackdropProps={backdropProps}>
-    <Box sx={sx ? { ...modalStyle, ...sx } : { ...modalStyle }} textAlign="center">
+    <Box
+      sx={{ border: (t) => `1px solid ${t.palette.nym.nymWallet.modal.border}`, ...modalStyle, ...sx }}
+      textAlign="center"
+    >
       <Stack spacing={4} direction="row" alignItems="center">
         <CircularProgress />
         <Typography sx={{ color: 'text.primary' }}>Please wait...</Typography>
diff --git a/nym-wallet/src/components/Modals/ModalFee.tsx b/nym-wallet/src/components/Modals/ModalFee.tsx
index f60f6690ac..752be087a7 100644
--- a/nym-wallet/src/components/Modals/ModalFee.tsx
+++ b/nym-wallet/src/components/Modals/ModalFee.tsx
@@ -5,17 +5,33 @@ import { ModalListItem } from './ModalListItem';
 import { ModalDivider } from './ModalDivider';
 
 type TFeeProps = { fee?: FeeDetails; isLoading: boolean; error?: string; divider?: boolean };
+type TTotalAmountProps = { fee?: FeeDetails; amount?: string; isLoading: boolean; error?: string; divider?: boolean };
 
-const getValue = ({ fee, isLoading, error }: TFeeProps) => {
+const getValue = ({ fee, amount, isLoading, error }: TTotalAmountProps) => {
   if (isLoading) return <CircularProgress size={15} />;
   if (error && !isLoading) return 'n/a';
-  if (fee) return `${fee.amount?.amount} ${fee.amount?.denom.toUpperCase()}`;
+  if (fee) {
+    const numericFee = Number(fee.amount?.amount);
+    const numericAmountToTransfer = Number(amount);
+    return amount
+      ? `${numericFee + numericAmountToTransfer}  ${fee.amount?.denom.toUpperCase()}`
+      : `${fee.amount?.amount} ${fee.amount?.denom.toUpperCase()}`;
+  }
   return '-';
 };
 
 export const ModalFee = ({ fee, isLoading, error, divider }: TFeeProps) => (
   <>
-    <ModalListItem label="Fee for this operation" value={getValue({ fee, isLoading, error })} />
+    <ModalListItem label="Fee for this transaction" value={getValue({ fee, isLoading, error })} />
     {divider && <ModalDivider />}
   </>
 );
+
+export const ModalTotalAmount = ({ fee, amount, isLoading, error, divider }: TTotalAmountProps) => {
+  return (
+    <>
+      <ModalListItem label="Total amount" value={getValue({ fee, amount, isLoading, error })} fontWeight={600} />
+      {divider && <ModalDivider />}
+    </>
+  );
+};
diff --git a/nym-wallet/src/components/Modals/ModalListItem.tsx b/nym-wallet/src/components/Modals/ModalListItem.tsx
index 2c1524dec8..1bf70c2384 100644
--- a/nym-wallet/src/components/Modals/ModalListItem.tsx
+++ b/nym-wallet/src/components/Modals/ModalListItem.tsx
@@ -12,11 +12,11 @@ export const ModalListItem: React.FC<{
 }> = ({ label, value, hidden, fontWeight, divider }) => (
   <Box sx={{ display: hidden ? 'none' : 'block' }}>
     <Stack direction="row" justifyContent="space-between">
-      <Typography fontSize="smaller" fontWeight={fontWeight} sx={{ color: 'text.primary' }}>
+      <Typography fontSize="smaller" fontWeight={fontWeight} sx={{ color: 'text.primary', fontSize: 14 }}>
         {label}
       </Typography>
       {value && (
-        <Typography fontSize="smaller" fontWeight={fontWeight} sx={{ color: 'text.primary' }}>
+        <Typography fontSize="smaller" fontWeight={fontWeight} sx={{ color: 'text.primary', fontSize: 14 }}>
           {value}
         </Typography>
       )}
diff --git a/nym-wallet/src/components/Modals/SimpleModal.tsx b/nym-wallet/src/components/Modals/SimpleModal.tsx
index 6b043aa7c3..62673b9a63 100644
--- a/nym-wallet/src/components/Modals/SimpleModal.tsx
+++ b/nym-wallet/src/components/Modals/SimpleModal.tsx
@@ -38,7 +38,7 @@ export const SimpleModal: React.FC<{
   backdropProps,
 }) => (
   <Modal open={open} onClose={onClose} BackdropProps={backdropProps}>
-    <Box sx={{ ...modalStyle, ...sx }}>
+    <Box sx={{ border: (t) => `1px solid ${t.palette.nym.nymWallet.modal.border}`, ...modalStyle, ...sx }}>
       {displayErrorIcon && <ErrorOutline color="error" sx={{ mb: 3 }} />}
       <Stack direction="row" justifyContent="space-between" alignItems="center">
         {typeof header === 'string' ? (
@@ -52,7 +52,7 @@ export const SimpleModal: React.FC<{
       </Stack>
 
       <Typography
-        mt={0.5}
+        mt={subHeader ? 0.5 : 0}
         mb={3}
         fontSize={12}
         color={(theme) => theme.palette.text.secondary}
@@ -64,10 +64,10 @@ export const SimpleModal: React.FC<{
       {children}
 
       {(onOk || onBack) && (
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mt: 3 }}>
-          {onBack && <StyledBackButton onBack={onBack} />}
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 1 }}>
+          {onBack && <StyledBackButton onBack={onBack} sx={{ mt: 3 }} />}
           {onOk && (
-            <Button variant="contained" fullWidth size="large" onClick={onOk} disabled={okDisabled}>
+            <Button variant="contained" fullWidth size="large" onClick={onOk} disabled={okDisabled} sx={{ mt: 3 }}>
               {okLabel}
             </Button>
           )}
diff --git a/nym-wallet/src/components/Receive/ReceiveModal.tsx b/nym-wallet/src/components/Receive/ReceiveModal.tsx
index 181e93c0c7..951ce8ff25 100644
--- a/nym-wallet/src/components/Receive/ReceiveModal.tsx
+++ b/nym-wallet/src/components/Receive/ReceiveModal.tsx
@@ -1,35 +1,52 @@
 import React, { useContext } from 'react';
 import { AppContext } from 'src/context';
-import { Box, Stack, Typography, SxProps, Dialog, DialogTitle, DialogContent, Paper } from '@mui/material';
+import { Box, Stack, SxProps } from '@mui/material';
 import QRCode from 'qrcode.react';
 import { ClientAddress } from '../ClientAddress';
 import { ModalListItem } from '../Modals/ModalListItem';
-import { Close as CloseIcon } from '@mui/icons-material';
+import { SimpleModal } from '../Modals/SimpleModal';
 
-export const ReceiveModal = ({ onClose }: { onClose: () => void; sx?: SxProps; backdropProps?: object }) => {
-  const { clientDetails, mode } = useContext(AppContext);
+export const ReceiveModal = ({
+  onClose,
+  sx,
+  backdropProps,
+}: {
+  onClose: () => void;
+  sx?: SxProps;
+  backdropProps?: object;
+}) => {
+  const { clientDetails } = useContext(AppContext);
   return (
-    <Dialog open maxWidth="sm" fullWidth onClose={onClose} PaperComponent={Paper} PaperProps={{ elevation: 0 }}>
-      <DialogTitle>
-        <Box sx={{ mt: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-          <Typography fontSize={20} fontWeight={600}>
-            Receive
-          </Typography>
-          <CloseIcon onClick={onClose} cursor="pointer" />
-        </Box>
-      </DialogTitle>
-      <DialogContent sx={{ p: 0 }}>
-        <Box sx={{ px: 3 }}>
-          <ModalListItem label="Your address:" value={<ClientAddress withCopy showEntireAddress />} />
-        </Box>
+    <SimpleModal
+      header="Receive"
+      subHeader="Provide your address to receive tokens"
+      open
+      onClose={onClose}
+      okLabel=""
+      sx={sx}
+      backdropProps={backdropProps}
+      subHeaderStyles={{ mb: 0 }}
+    >
+      <Stack gap={3} sx={{ position: 'relative', top: '32px' }}>
+        <ModalListItem label="Your address" value={<ClientAddress withCopy showEntireAddress />} />
         <Stack
           alignItems="center"
-          sx={{ px: 0, py: 3, mt: 3, bgcolor: mode === 'light' ? 'rgba(251, 110, 78, 5%)' : 'nym.background.dark' }}
+          sx={{
+            position: 'relative',
+            left: '-32px',
+            width: '598px',
+            py: 4,
+            bgcolor: (t) => (t.palette.mode === 'dark' ? t.palette.background.default : 'rgba(251, 110, 78, 5%)'),
+            borderRadius: '0px 0px 16px 16px',
+          }}
         >
           <Box
             sx={{
-              border: (t) => `1px solid ${mode === 'light' ? t.palette.nym.highlight : t.palette.nym.text.grey} `,
-              bgcolor: mode === 'light' ? 'white' : 'nym.background.main',
+              border: (t) =>
+                t.palette.mode === 'dark'
+                  ? `1px solid ${t.palette.nym.nymWallet.modal.border}`
+                  : `1px solid ${t.palette.nym.highlight}`,
+              bgcolor: (t) => (t.palette.mode === 'dark' ? 'transparent' : 'white'),
               borderRadius: 2,
               p: 3,
             }}
@@ -37,7 +54,7 @@ export const ReceiveModal = ({ onClose }: { onClose: () => void; sx?: SxProps; b
             {clientDetails && <QRCode data-testid="qr-code" value={clientDetails?.client_address} />}
           </Box>
         </Stack>
-      </DialogContent>
-    </Dialog>
+      </Stack>
+    </SimpleModal>
   );
 };
diff --git a/nym-wallet/src/components/Send/SendDetailsModal.tsx b/nym-wallet/src/components/Send/SendDetailsModal.tsx
index eac87cded3..f2b7d13491 100644
--- a/nym-wallet/src/components/Send/SendDetailsModal.tsx
+++ b/nym-wallet/src/components/Send/SendDetailsModal.tsx
@@ -3,7 +3,7 @@ import { Stack, SxProps } from '@mui/material';
 import { FeeDetails, DecCoin, CurrencyDenom } from '@nymproject/types';
 import { SimpleModal } from '../Modals/SimpleModal';
 import { ModalListItem } from '../Modals/ModalListItem';
-import { ModalFee } from '../Modals/ModalFee';
+import { ModalFee, ModalTotalAmount } from '../Modals/ModalFee';
 
 export const SendDetailsModal = ({
   amount,
@@ -38,11 +38,12 @@ export const SendDetailsModal = ({
     sx={sx}
     backdropProps={backdropProps}
   >
-    <Stack gap={0.5} sx={{ mt: 4 }}>
-      <ModalListItem label="From:" value={fromAddress} divider />
-      <ModalListItem label="To:" value={toAddress} divider />
-      <ModalListItem label="Amount:" value={`${amount?.amount} ${denom.toUpperCase()}`} divider />
+    <Stack gap={0.5} sx={{ mt: 3 }}>
+      <ModalListItem label="From" value={fromAddress} divider />
+      <ModalListItem label="To" value={toAddress} divider />
+      <ModalListItem label="Amount" value={`${amount?.amount} ${denom.toUpperCase()}`} divider />
       <ModalFee fee={fee} divider isLoading={false} />
+      <ModalTotalAmount fee={fee} amount={amount?.amount} divider isLoading={false} />
     </Stack>
   </SimpleModal>
 );
diff --git a/nym-wallet/src/components/Send/SendInputModal.tsx b/nym-wallet/src/components/Send/SendInputModal.tsx
index cbd735f57b..c27eb58781 100644
--- a/nym-wallet/src/components/Send/SendInputModal.tsx
+++ b/nym-wallet/src/components/Send/SendInputModal.tsx
@@ -55,8 +55,8 @@ export const SendInputModal = ({
       sx={sx}
       backdropProps={backdropProps}
     >
-      <Stack gap={3} sx={{ mt: 3 }}>
-        <ModalListItem label="Your address:" value={fromAddress} fontWeight="light" />
+      <Stack gap={3}>
+        <ModalListItem label="Your address" value={fromAddress} fontWeight="light" />
         <TextField
           label="Recipient address"
           fullWidth
@@ -77,8 +77,8 @@ export const SendInputModal = ({
           {error}
         </Typography>
       </Stack>
-      <Stack gap={0.5}>
-        <ModalListItem label="Account balance:" value={balance?.toUpperCase()} divider fontWeight={600} />
+      <Stack gap={0.5} sx={{ mt: 1 }}>
+        <ModalListItem label="Account balance" value={balance?.toUpperCase()} divider fontWeight={600} />
         <Typography fontSize="smaller" sx={{ color: 'text.primary' }}>
           Est. fee for this transaction will be show on the next page
         </Typography>
diff --git a/nym-wallet/src/components/StyledBackButton.tsx b/nym-wallet/src/components/StyledBackButton.tsx
index c934cc7968..319bb84c02 100644
--- a/nym-wallet/src/components/StyledBackButton.tsx
+++ b/nym-wallet/src/components/StyledBackButton.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { Button } from '@mui/material';
+import { Button, SxProps } from '@mui/material';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 
-export const StyledBackButton = ({ onBack }: { onBack: () => void }) => (
-  <Button disableFocusRipple size="large" variant="outlined" onClick={onBack}>
+export const StyledBackButton = ({ onBack, sx }: { onBack: () => void; sx?: SxProps }) => (
+  <Button disableFocusRipple size="large" variant="outlined" onClick={onBack} sx={sx}>
     <ArrowBackIosNewIcon fontSize="small" />
   </Button>
 );
diff --git a/nym-wallet/src/pages/balance/components/TransferModal.tsx b/nym-wallet/src/pages/balance/components/TransferModal.tsx
index 451a9899e8..02a8318064 100644
--- a/nym-wallet/src/pages/balance/components/TransferModal.tsx
+++ b/nym-wallet/src/pages/balance/components/TransferModal.tsx
@@ -87,12 +87,12 @@ export const TransferModal = ({ onClose }: { onClose: () => void }) => {
         ) : (
           <>
             <ModalListItem
-              label="Unlocked transferrable tokens:"
+              label="Unlocked transferrable tokens"
               value={`${userBalance.tokenAllocation?.spendable} ${clientDetails?.display_mix_denom.toUpperCase()}`}
               divider
             />
             <ModalListItem
-              label="Est. fee for this transaction:"
+              label="Est. fee for this transaction"
               value={fee ? `${fee.amount?.amount} ${fee.amount?.denom}` : <CircularProgress size={15} />}
               divider
             />
diff --git a/nym-wallet/src/theme/mui-theme.d.ts b/nym-wallet/src/theme/mui-theme.d.ts
index 4015963ec3..2a6cd001a8 100644
--- a/nym-wallet/src/theme/mui-theme.d.ts
+++ b/nym-wallet/src/theme/mui-theme.d.ts
@@ -67,6 +67,9 @@ declare module '@mui/material/styles' {
     hover: {
       background: string;
     };
+    modal: {
+      border: string;
+    };
   }
 
   /**
@@ -85,7 +88,7 @@ declare module '@mui/material/styles' {
   /**
    * Add anything not palette related to the theme here
    */
-  interface NymTheme {}
+  interface NymTheme { }
 
   /**
    * This augments the definitions of the MUI Theme with the Nym theme, as well as
@@ -93,8 +96,8 @@ declare module '@mui/material/styles' {
    *
    * IMPORTANT: only add extensions to the interfaces above, do not modify the lines below
    */
-  interface Theme extends NymTheme {}
-  interface ThemeOptions extends Partial<NymTheme> {}
-  interface Palette extends NymPaletteAndNymWalletPalette {}
-  interface PaletteOptions extends NymPaletteAndNymWalletPaletteOptions {}
+  interface Theme extends NymTheme { }
+  interface ThemeOptions extends Partial<NymTheme> { }
+  interface Palette extends NymPaletteAndNymWalletPalette { }
+  interface PaletteOptions extends NymPaletteAndNymWalletPaletteOptions { }
 }
diff --git a/nym-wallet/src/theme/theme.tsx b/nym-wallet/src/theme/theme.tsx
index b686c8a833..494ef6408a 100644
--- a/nym-wallet/src/theme/theme.tsx
+++ b/nym-wallet/src/theme/theme.tsx
@@ -59,6 +59,9 @@ const darkMode: NymPaletteVariant = {
   hover: {
     background: '#36393E',
   },
+  modal: {
+    border: '#484d53',
+  },
 };
 
 const lightMode: NymPaletteVariant = {
@@ -86,6 +89,9 @@ const lightMode: NymPaletteVariant = {
   hover: {
     background: '#F9F9F9',
   },
+  modal: {
+    border: 'transparent',
+  },
 };
 
 /**