diff --git a/src/components/BuyQortInformation.tsx b/src/components/BuyQortInformation.tsx
index b6aed75..00fcf52 100644
--- a/src/components/BuyQortInformation.tsx
+++ b/src/components/BuyQortInformation.tsx
@@ -1,154 +1,152 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react';
 import {
-    Avatar,
-    Box,
-    Button,
-    ButtonBase,
-    Collapse,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogContentText,
-    DialogTitle,
-    Input,
-    ListItem,
-    ListItemAvatar,
-    ListItemButton,
-    ListItemIcon,
-    ListItemText,
-    List,
-    MenuItem,
-    Popover,
-    Select,
-    TextField,
-    Typography,
-  } from "@mui/material";
-import { Label } from './Group/AddGroup';
+  Box,
+  Button,
+  ButtonBase,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  List,
+  Typography,
+  useTheme,
+} from '@mui/material';
 import { Spacer } from '../common/Spacer';
-import { LoadingButton } from '@mui/lab';
-import { getBaseApiReact, MyContext } from '../App';
-import { getFee } from '../background';
-import qTradeLogo from "../assets/Icons/q-trade-logo.webp";
-
+import qTradeLogo from '../assets/Icons/q-trade-logo.webp';
 import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
-import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from '../utils/events';
-import { BarSpinner } from '../common/Spinners/BarSpinner/BarSpinner';
+import {
+  executeEvent,
+  subscribeToEvent,
+  unsubscribeFromEvent,
+} from '../utils/events';
 
+export const BuyQortInformation = ({ balance }) => {
+  const [isOpen, setIsOpen] = useState(false);
 
+  const openBuyQortInfoFunc = useCallback(
+    (e) => {
+      setIsOpen(true);
+    },
+    [setIsOpen]
+  );
 
-export const BuyQortInformation = ({balance}) => {
-  const [isOpen, setIsOpen] = useState(false) 
+  const theme = useTheme();
 
-    const openBuyQortInfoFunc = useCallback((e) => {
-     setIsOpen(true)
- 
-     }, [ setIsOpen]);
-   
-     useEffect(() => {
-       subscribeToEvent("openBuyQortInfo", openBuyQortInfoFunc);
-   
-       return () => {
-         unsubscribeFromEvent("openBuyQortInfo", openBuyQortInfoFunc);
-       };
-     }, [openBuyQortInfoFunc]);
+  useEffect(() => {
+    subscribeToEvent('openBuyQortInfo', openBuyQortInfoFunc);
+
+    return () => {
+      unsubscribeFromEvent('openBuyQortInfo', openBuyQortInfoFunc);
+    };
+  }, [openBuyQortInfoFunc]);
 
   return (
     <Dialog
-          open={isOpen}
-          aria-labelledby="alert-dialog-title"
-          aria-describedby="alert-dialog-description"
-        >
-          <DialogTitle id="alert-dialog-title">
-            {"Get QORT"}
-          </DialogTitle>
-          <DialogContent>
-          <Box
-          sx={{
-            width: "400px",
-            maxWidth: '90vw',
-            height: "400px",
-            maxHeight: '90vh',
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: "10px",
-            padding: "10px",
-          }}
-        >
-         <Typography>Get QORT using Qortal's crosschain trade portal</Typography>
-         <ButtonBase
-        sx={{
-          "&:hover": { backgroundColor: "secondary.main" },
-          transition: "all 0.1s ease-in-out",
-          padding: "5px",
-          borderRadius: "5px",
-          gap: "5px",
-        }}
-        onClick={async () => {
-            executeEvent("addTab", {
-              data: { service: "APP", name: "q-trade" },
-            });
-            executeEvent("open-apps-mode", {});
-            setIsOpen(false)
-          }}
-      >
-        <img
-          style={{
-            borderRadius: "50%",
-            height: '30px'
-          }}
-          src={qTradeLogo}
-        />
-        <Typography
-          sx={{
-            fontSize: "1rem",
-          }}
-        >
-          Trade QORT
-        </Typography>
-      </ButtonBase>
-      <Spacer height='40px' />
-         <Typography sx={{
-            textDecoration: 'underline'
-         }}>Benefits of having QORT</Typography>
-         <List
-      sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
-      aria-label="contacts"
+      open={isOpen}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
     >
-      <ListItem disablePadding>
-         
-          <ListItemIcon>
-            <RadioButtonCheckedIcon sx={{
-                color: 'white'
-            }} />
-          </ListItemIcon>
-          <ListItemText primary="Create transactions on the Qortal Blockchain" />
-     
-      </ListItem>
-      <ListItem disablePadding>
-         
-         <ListItemIcon>
-           <RadioButtonCheckedIcon sx={{
-               color: 'white'
-           }} />
-         </ListItemIcon>
-         <ListItemText primary="Having at least 4 QORT in your balance allows you to send chat messages at near instant speed." />
-    
-     </ListItem>
-    </List>
-        </Box>
-          </DialogContent>
-          <DialogActions>
-            <Button
-              variant="contained"
-              onClick={() => {
-                setIsOpen(false)
+      <DialogTitle id="alert-dialog-title">{'Get QORT'}</DialogTitle>
+      <DialogContent>
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '10px',
+            height: '400px',
+            maxHeight: '90vh',
+            maxWidth: '90vw',
+            padding: '10px',
+            width: '400px',
+          }}
+        >
+          <Typography>
+            Get QORT using Qortal's crosschain trade portal
+          </Typography>
+          <ButtonBase
+            sx={{
+              '&:hover': { backgroundColor: theme.palette.secondary.main },
+              transition: 'all 0.1s ease-in-out',
+              padding: '5px',
+              borderRadius: '5px',
+              gap: '5px',
+            }}
+            onClick={async () => {
+              executeEvent('addTab', {
+                data: { service: 'APP', name: 'q-trade' },
+              });
+              executeEvent('open-apps-mode', {});
+              setIsOpen(false);
+            }}
+          >
+            <img
+              style={{
+                borderRadius: '50%',
+                height: '30px',
+              }}
+              src={qTradeLogo}
+            />
+            <Typography
+              sx={{
+                fontSize: '1rem',
               }}
             >
-              Close
-            </Button>
-            
-          </DialogActions>
-        </Dialog>
-  )
-}
+              Trade QORT
+            </Typography>
+          </ButtonBase>
+          <Spacer height="40px" />
+          <Typography
+            sx={{
+              textDecoration: 'underline',
+            }}
+          >
+            Benefits of having QORT
+          </Typography>
+          <List
+            sx={{
+              width: '100%',
+              maxWidth: 360,
+              bgcolor: theme.palette.background.paper,
+            }}
+            aria-label="contacts"
+          >
+            <ListItem disablePadding>
+              <ListItemIcon>
+                <RadioButtonCheckedIcon
+                  sx={{
+                    color: theme.palette.primary.main,
+                  }}
+                />
+              </ListItemIcon>
+              <ListItemText primary="Create transactions on the Qortal Blockchain" />
+            </ListItem>
+            <ListItem disablePadding>
+              <ListItemIcon>
+                <RadioButtonCheckedIcon
+                  sx={{
+                    color: theme.palette.primary.main,
+                  }}
+                />
+              </ListItemIcon>
+              <ListItemText primary="Having at least 4 QORT in your balance allows you to send chat messages at near instant speed." />
+            </ListItem>
+          </List>
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          onClick={() => {
+            setIsOpen(false);
+          }}
+        >
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
diff --git a/src/components/Group/QMailMessages.tsx b/src/components/Group/QMailMessages.tsx
index f51517d..6b87f1e 100644
--- a/src/components/Group/QMailMessages.tsx
+++ b/src/components/Group/QMailMessages.tsx
@@ -5,7 +5,7 @@ import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import moment from 'moment';
-import { Box, ButtonBase, Collapse, Typography } from '@mui/material';
+import { Box, ButtonBase, Collapse, Typography, useTheme } from '@mui/material';
 import { getBaseApiReact, isMobile } from '../../App';
 import MailIcon from '@mui/icons-material/Mail';
 import MailOutlineIcon from '@mui/icons-material/MailOutline';
@@ -51,6 +51,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
     qMailLastEnteredTimestampAtom
   );
   const [loading, setLoading] = useState(true);
+  const theme = useTheme();
 
   const getMails = useCallback(async () => {
     try {
@@ -175,14 +176,14 @@ export const QMailMessages = ({ userName, userAddress }) => {
         <Box
           className="scrollable-container"
           sx={{
-            width: '322px',
-            height: isMobile ? '165px' : '250px',
+            bgcolor: theme.palette.background.paper,
+            borderRadius: '19px',
             display: 'flex',
             flexDirection: 'column',
-            bgcolor: 'background.paper',
-            padding: '20px',
-            borderRadius: '19px',
+            height: isMobile ? '165px' : '250px',
             overflow: 'auto',
+            padding: '20px',
+            width: '322px',
           }}
         >
           {loading && mails.length === 0 && (
@@ -210,7 +211,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
                 sx={{
                   fontSize: '11px',
                   fontWeight: 400,
-                  color: 'rgba(255, 255, 255, 0.2)',
+                  color: theme.palette.primary,
                 }}
               >
                 Nothing to display
diff --git a/src/components/TaskManager/TaskManager.tsx b/src/components/TaskManager/TaskManager.tsx
index c995cd5..f9f728e 100644
--- a/src/components/TaskManager/TaskManager.tsx
+++ b/src/components/TaskManager/TaskManager.tsx
@@ -5,6 +5,7 @@ import {
   ListItemText,
   Collapse,
   IconButton,
+  useTheme,
 } from '@mui/material';
 import React, { useContext, useEffect, useRef } from 'react';
 import PendingIcon from '@mui/icons-material/Pending';
@@ -18,6 +19,7 @@ export const TaskManager = ({ getUserInfo }) => {
   const { txList, setTxList, memberGroups } = useContext(MyContext);
   const [open, setOpen] = React.useState(false);
   const intervals = useRef({});
+  const theme = useTheme();
 
   const handleClick = () => {
     setOpen((prev) => !prev);
@@ -146,12 +148,9 @@ export const TaskManager = ({ getUserInfo }) => {
         <IconButton
           onClick={handleClick}
           sx={{
-            // position: "fixed",
-            // bottom: 16,
-            // right: 16,
-            bgcolor: 'primary.main',
-            color: 'white',
-            ':hover': { bgcolor: 'primary.dark' },
+            bgcolor: theme.palette.primary.main,
+            color: theme.palette.text.primary,
+            ':hover': { bgcolor: theme.palette.primary },
           }}
         >
           {txList.some((item) => !item.done) ? (
@@ -164,16 +163,16 @@ export const TaskManager = ({ getUserInfo }) => {
       {open && (
         <List
           sx={{
-            position: 'fixed',
+            bgcolor: theme.palette.background.paper,
             bottom: 16,
+            boxShadow: 4,
+            maxHeight: '400px',
+            overflow: 'auto',
+            padding: '0px',
+            position: 'fixed',
             right: 16,
             width: '300px',
-            maxHeight: '400px',
-            bgcolor: 'background.paper',
-            boxShadow: 4,
-            overflow: 'auto',
             zIndex: 10,
-            padding: '0px',
           }}
           component="nav"
         >
@@ -182,13 +181,13 @@ export const TaskManager = ({ getUserInfo }) => {
               {txList.some((item) => !item.done) ? (
                 <PendingIcon
                   sx={{
-                    color: 'white',
+                    color: theme.palette.primary,
                   }}
                 />
               ) : (
                 <TaskAltIcon
                   sx={{
-                    color: 'white',
+                    color: theme.palette.primary,
                   }}
                 />
               )}