diff --git a/src/App.tsx b/src/App.tsx
index 6297047..f8e4146 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -30,7 +30,6 @@ import { CountdownCircleTimer } from 'react-countdown-circle-timer';
 import Logo1Dark from './assets/svgs/Logo1Dark.svg';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import DownloadIcon from '@mui/icons-material/Download';
-import Copy from './assets/svgs/Copy.svg';
 import ltcLogo from './assets/ltc.png';
 import PersonSearchIcon from '@mui/icons-material/PersonSearch';
 import qortLogo from './assets/qort.png';
@@ -137,6 +136,7 @@ import ThemeSelector from './components/Theme/ThemeSelector.tsx';
 import { useTranslation } from 'react-i18next';
 import LanguageSelector from './components/Language/LanguageSelector.tsx';
 import { DownloadWallet } from './components/Auth/DownloadWallet.tsx';
+import { CopyIcon } from './assets/Icons/CopyIcon.tsx';
 
 type extStates =
   | 'not-authenticated'
@@ -1297,7 +1297,8 @@ function App() {
             <CopyToClipboard text={rawWallet?.ltcAddress}>
               <AddressBox>
                 {rawWallet?.ltcAddress?.slice(0, 6)}...
-                {rawWallet?.ltcAddress?.slice(-4)} <img src={Copy} />
+                {rawWallet?.ltcAddress?.slice(-4)}{' '}
+                <CopyIcon color={theme.palette.text.primary} />
               </AddressBox>
             </CopyToClipboard>
 
@@ -1362,7 +1363,8 @@ function App() {
             <CopyToClipboard text={rawWallet?.address0}>
               <AddressBox>
                 {rawWallet?.address0?.slice(0, 6)}...
-                {rawWallet?.address0?.slice(-4)} <img src={Copy} />
+                {rawWallet?.address0?.slice(-4)}{' '}
+                <CopyIcon color={theme.palette.text.primary} />
               </AddressBox>
             </CopyToClipboard>
             <Spacer height="10px" />
@@ -1519,7 +1521,11 @@ function App() {
                   },
                 }}
               >
-                <LogoutIcon />
+                <LogoutIcon
+                  sx={{
+                    color: theme.palette.text.secondary,
+                  }}
+                />
               </Tooltip>
             </ButtonBase>
 
@@ -1559,7 +1565,11 @@ function App() {
                   },
                 }}
               >
-                <SettingsIcon />
+                <SettingsIcon
+                  sx={{
+                    color: theme.palette.text.secondary,
+                  }}
+                />
               </Tooltip>
             </ButtonBase>
 
@@ -1599,7 +1609,11 @@ function App() {
                   },
                 }}
               >
-                <PersonSearchIcon />
+                <PersonSearchIcon
+                  sx={{
+                    color: theme.palette.text.secondary,
+                  }}
+                />
               </Tooltip>
             </ButtonBase>
 
@@ -1639,7 +1653,11 @@ function App() {
                   },
                 }}
               >
-                <AccountBalanceWalletIcon />
+                <AccountBalanceWalletIcon
+                  sx={{
+                    color: theme.palette.text.secondary,
+                  }}
+                />
               </Tooltip>
             </ButtonBase>
 
@@ -1681,7 +1699,10 @@ function App() {
                       setIsOpenDrawerProfile(true);
                     }}
                   >
-                    <WalletIcon width="25" />
+                    <WalletIcon
+                      color={theme.palette.text.secondary}
+                      width="25"
+                    />
                   </ButtonBase>
                 </Tooltip>
               </>
@@ -1787,7 +1808,11 @@ function App() {
                   },
                 }}
               >
-                <EngineeringIcon />
+                <EngineeringIcon
+                  sx={{
+                    color: theme.palette.text.secondary,
+                  }}
+                />
               </Tooltip>
             </ButtonBase>
 
@@ -1832,7 +1857,11 @@ function App() {
                     },
                   }}
                 >
-                  <HelpIcon />
+                  <HelpIcon
+                    sx={{
+                      color: theme.palette.text.secondary,
+                    }}
+                  />
                 </Tooltip>
               </ButtonBase>
             )}
@@ -1874,7 +1903,11 @@ function App() {
                   },
                 }}
               >
-                <DownloadIcon />
+                <DownloadIcon
+                  sx={{
+                    color: theme.palette.text.secondary,
+                  }}
+                />
               </Tooltip>
             </ButtonBase>
             <Spacer height="40px" />
@@ -2165,10 +2198,10 @@ function App() {
                   defaultChecked={messageQortalRequest?.checkbox1?.value}
                   sx={{
                     '&.Mui-checked': {
-                      color: 'white', // Customize the color when checked
+                      color: theme.palette.text.secondary, // Customize the color when checked
                     },
                     '& .MuiSvgIcon-root': {
-                      color: 'white',
+                      color: theme.palette.text.secondary,
                     },
                   }}
                 />
@@ -3407,10 +3440,10 @@ function App() {
                     }
                     sx={{
                       '&.Mui-checked': {
-                        color: 'white', // Customize the color when checked
+                        color: theme.palette.text.secondary, // Customize the color when checked
                       },
                       '& .MuiSvgIcon-root': {
-                        color: 'white',
+                        color: theme.palette.text.secondary,
                       },
                     }}
                   />
@@ -3436,10 +3469,10 @@ function App() {
                       disableRipple
                       sx={{
                         '&.Mui-checked': {
-                          color: 'white',
+                          color: theme.palette.text.secondary,
                         },
                         '& .MuiSvgIcon-root': {
-                          color: 'white',
+                          color: theme.palette.text.secondary,
                         },
                       }}
                     />
diff --git a/src/assets/Icons/ChatIcon.tsx b/src/assets/Icons/ChatIcon.tsx
index f68ed35..8546949 100644
--- a/src/assets/Icons/ChatIcon.tsx
+++ b/src/assets/Icons/ChatIcon.tsx
@@ -1,12 +1,18 @@
 import React from 'react';
 
-export const ChatIcon= ({ color = 'white', height = 15, width = 15 }) => {
-    return (
-        <svg width={width} height={height} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.5 0C3.35915 0 0 3.35915 0 7.5V13.8169C0 14.4718 0.528169 15 1.1831 15H7.5C11.6408 15 15 11.6408 15 7.5C15 3.35915 11.6408 0 7.5 0ZM11.0915 10.669H3.90845C3.67606 10.669 3.48592 10.4789 3.48592 10.2465C3.48592 10.0141 3.67606 9.82394 3.90845 9.82394H11.0915C11.3239 9.82394 11.5141 10.0141 11.5141 10.2465C11.5141 10.4789 11.3239 10.669 11.0915 10.669ZM11.0915 8.34507H3.90845C3.67606 8.34507 3.48592 8.15493 3.48592 7.92254C3.48592 7.69014 3.67606 7.5 3.90845 7.5H11.0915C11.3239 7.5 11.5141 7.69014 11.5141 7.92254C11.5141 8.15493 11.3239 8.34507 11.0915 8.34507ZM11.0915 6.02113H3.90845C3.67606 6.02113 3.48592 5.83099 3.48592 5.59859C3.48592 5.3662 3.67606 5.17606 3.90845 5.17606H11.0915C11.3239 5.17606 11.5141 5.3662 11.5141 5.59859C11.5141 5.83099 11.3239 6.02113 11.0915 6.02113Z" fill={color}/>
-</svg>
-
-
-    );
-  };
-  
\ No newline at end of file
+export const ChatIcon = ({ color = 'white', height = 15, width = 15 }) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.5 0C3.35915 0 0 3.35915 0 7.5V13.8169C0 14.4718 0.528169 15 1.1831 15H7.5C11.6408 15 15 11.6408 15 7.5C15 3.35915 11.6408 0 7.5 0ZM11.0915 10.669H3.90845C3.67606 10.669 3.48592 10.4789 3.48592 10.2465C3.48592 10.0141 3.67606 9.82394 3.90845 9.82394H11.0915C11.3239 9.82394 11.5141 10.0141 11.5141 10.2465C11.5141 10.4789 11.3239 10.669 11.0915 10.669ZM11.0915 8.34507H3.90845C3.67606 8.34507 3.48592 8.15493 3.48592 7.92254C3.48592 7.69014 3.67606 7.5 3.90845 7.5H11.0915C11.3239 7.5 11.5141 7.69014 11.5141 7.92254C11.5141 8.15493 11.3239 8.34507 11.0915 8.34507ZM11.0915 6.02113H3.90845C3.67606 6.02113 3.48592 5.83099 3.48592 5.59859C3.48592 5.3662 3.67606 5.17606 3.90845 5.17606H11.0915C11.3239 5.17606 11.5141 5.3662 11.5141 5.59859C11.5141 5.83099 11.3239 6.02113 11.0915 6.02113Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
diff --git a/src/assets/Icons/CopyIcon.tsx b/src/assets/Icons/CopyIcon.tsx
new file mode 100644
index 0000000..67ede2d
--- /dev/null
+++ b/src/assets/Icons/CopyIcon.tsx
@@ -0,0 +1,25 @@
+import { useTheme } from '@mui/material';
+import React from 'react';
+
+export const CopyIcon = ({ color, height = 11, width = 10 }) => {
+  const theme = useTheme();
+
+  const setColor = color ? color : theme.palette.text.primary;
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 10 11"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M3.92857 0.5H8.57143C9.36071 0.5 10 1.13929 10 1.92857V6.57143C10 7.36071 9.36071 8 8.57143 8H8.21429V4.42857C8.21429 3.24643 7.25357 2.28571 6.07143 2.28571H2.5V1.92857C2.5 1.13929 3.13929 0.5 3.92857 0.5ZM1.42857 3H6.07143C6.86041 3 7.5 3.63959 7.5 4.42857V9.07143C7.5 9.86041 6.86041 10.5 6.07143 10.5H1.42857C0.639593 10.5 0 9.86041 0 9.07143V4.42857C0 3.63959 0.639593 3 1.42857 3Z"
+        fill={setColor}
+        fill-opacity="0.5"
+      />
+    </svg>
+  );
+};
diff --git a/src/assets/Icons/MessagingIcon2.tsx b/src/assets/Icons/MessagingIcon2.tsx
deleted file mode 100644
index da367cd..0000000
--- a/src/assets/Icons/MessagingIcon2.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-export const MessagingIcon2= ({ color = '#8F8F91', height = 24, width =24 }) => {
-    return (
-        <svg width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fillRule="evenodd" clipRule="evenodd" d="M22.6636 0.00168233C22.6127 -0.000756257 22.5614 -0.000627677 22.5099 0.00261984C22.3724 0.0112798 22.2331 0.0405753 22.0969 0.093558L1.02096 8.28971C0.362343 8.54585 -0.00366118 9.18408 2.76147e-05 9.79253C0.00371641 10.401 0.377567 11.0341 1.03925 11.2822L9.02065 14.2752C9.34631 14.3974 9.60258 14.6536 9.72471 14.9793L12.7177 22.9607C12.9658 23.6224 13.5989 23.9963 14.2074 24C14.8158 24.0037 15.454 23.6376 15.7102 22.979L23.9063 1.90295C24.1182 1.35797 23.9526 0.768987 23.5917 0.408091C23.3549 0.171254 23.02 0.0187526 22.6636 0.00168233ZM18.4022 4.99812C18.5613 4.99815 18.7139 5.06138 18.8264 5.17391C18.9389 5.28643 19.0021 5.43902 19.0021 5.59813C19.0021 5.75724 18.9389 5.90983 18.8264 6.02235L13.2239 11.6244C13.1114 11.7369 12.9588 11.8001 12.7997 11.8001C12.6406 11.8001 12.488 11.7369 12.3755 11.6244C12.263 11.5119 12.1998 11.3593 12.1998 11.2002C12.1998 11.0411 12.263 10.8885 12.3755 10.776L17.9775 5.17391C18.0333 5.11813 18.0995 5.0739 18.1724 5.04374C18.2452 5.01357 18.3233 4.99807 18.4022 4.99812Z" fill={color}/>
-        </svg>
-        
-
-        
-
-    );
-  };
-  
\ No newline at end of file
diff --git a/src/assets/Icons/MessagingIconFilled.tsx b/src/assets/Icons/MessagingIconFilled.tsx
new file mode 100644
index 0000000..5dc6e04
--- /dev/null
+++ b/src/assets/Icons/MessagingIconFilled.tsx
@@ -0,0 +1,24 @@
+import { useTheme } from '@mui/material';
+import React from 'react';
+
+export const MessagingIconFilled = ({ color, height = 31, width = 31 }) => {
+  const theme = useTheme();
+
+  const setColor = color ? color : theme.palette.text.primary;
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M22.6636 0.00168233C22.6127 -0.000756257 22.5614 -0.000627677 22.5099 0.00261984C22.3724 0.0112798 22.2331 0.0405753 22.0969 0.093558L1.02096 8.28971C0.362343 8.54585 -0.00366118 9.18408 2.76147e-05 9.79253C0.00371641 10.401 0.377567 11.0341 1.03925 11.2822L9.02065 14.2752C9.34631 14.3974 9.60258 14.6536 9.72471 14.9793L12.7177 22.9607C12.9658 23.6224 13.5989 23.9963 14.2074 24C14.8158 24.0037 15.454 23.6376 15.7102 22.979L23.9063 1.90295C24.1182 1.35797 23.9526 0.768987 23.5917 0.408091C23.3549 0.171254 23.02 0.0187526 22.6636 0.00168233ZM18.4022 4.99812C18.5613 4.99815 18.7139 5.06138 18.8264 5.17391C18.9389 5.28643 19.0021 5.43902 19.0021 5.59813C19.0021 5.75724 18.9389 5.90983 18.8264 6.02235L13.2239 11.6244C13.1114 11.7369 12.9588 11.8001 12.7997 11.8001C12.6406 11.8001 12.488 11.7369 12.3755 11.6244C12.263 11.5119 12.1998 11.3593 12.1998 11.2002C12.1998 11.0411 12.263 10.8885 12.3755 10.776L17.9775 5.17391C18.0333 5.11813 18.0995 5.0739 18.1724 5.04374C18.2452 5.01357 18.3233 4.99807 18.4022 4.99812Z"
+        fill={setColor}
+      />
+    </svg>
+  );
+};
diff --git a/src/assets/Icons/QappDevelopText.tsx b/src/assets/Icons/QappDevelopText.tsx
index e0856cf..9bd30f9 100644
--- a/src/assets/Icons/QappDevelopText.tsx
+++ b/src/assets/Icons/QappDevelopText.tsx
@@ -14,8 +14,8 @@ export const QappDevelopText: React.FC<SVGProps> = ({
   return (
     <svg
       {...children}
-      width="83"
-      height="40"
+      width="124"
+      height="60"
       viewBox="0 0 83 40"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/Apps/AppPublish.tsx b/src/components/Apps/AppPublish.tsx
index 62cc098..486fd8a 100644
--- a/src/components/Apps/AppPublish.tsx
+++ b/src/components/Apps/AppPublish.tsx
@@ -20,7 +20,13 @@ import {
   PublishQAppChoseFile,
   PublishQAppInfo,
 } from './Apps-styles';
-import { InputBase, InputLabel, MenuItem, Select } from '@mui/material';
+import {
+  InputBase,
+  InputLabel,
+  MenuItem,
+  Select,
+  useTheme,
+} from '@mui/material';
 import { styled } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 import { Add } from '@mui/icons-material';
@@ -59,11 +65,11 @@ const CustomSelect = styled(Select)({
 });
 
 const CustomMenuItem = styled(MenuItem)({
-  backgroundColor: '#1f1f1f', // Background for dropdown items
-  color: '#ccc',
-  '&:hover': {
-    backgroundColor: '#333', // Darker background on hover
-  },
+  // backgroundColor: '#1f1f1f', // Background for dropdown items
+  // color: '#ccc',
+  // '&:hover': {
+  //   backgroundColor: '#333', // Darker background on hover
+  // },
 });
 
 export const AppPublish = ({ names, categories }) => {
@@ -74,7 +80,7 @@ export const AppPublish = ({ names, categories }) => {
   const [appType, setAppType] = useState('APP');
   const [file, setFile] = useState(null);
   const { show } = useContext(MyContext);
-
+  const theme = useTheme();
   const [tag1, setTag1] = useState('');
   const [tag2, setTag2] = useState('');
   const [tag3, setTag3] = useState('');
@@ -263,9 +269,7 @@ export const AppPublish = ({ names, categories }) => {
 
         <Spacer height="18px" />
 
-        <InputLabel
-          sx={{ color: '#888', fontSize: '14px', marginBottom: '2px' }}
-        >
+        <InputLabel sx={{ fontSize: '14px', marginBottom: '2px' }}>
           Name/App
         </InputLabel>
 
@@ -278,11 +282,11 @@ export const AppPublish = ({ names, categories }) => {
           <CustomMenuItem value="">
             <em
               style={{
-                color: 'var(--50-white, #FFFFFF80)',
+                color: theme.palette.text.secondary,
               }}
             >
               Select Name/App
-            </em>{' '}
+            </em>
             {/* This is the placeholder item */}
           </CustomMenuItem>
           {names.map((name) => {
@@ -292,9 +296,7 @@ export const AppPublish = ({ names, categories }) => {
 
         <Spacer height="15px" />
 
-        <InputLabel
-          sx={{ color: '#888', fontSize: '14px', marginBottom: '2px' }}
-        >
+        <InputLabel sx={{ fontSize: '14px', marginBottom: '2px' }}>
           App service type
         </InputLabel>
 
@@ -307,12 +309,11 @@ export const AppPublish = ({ names, categories }) => {
           <CustomMenuItem value="">
             <em
               style={{
-                color: 'var(--50-white, #FFFFFF80)',
+                color: theme.palette.text.secondary,
               }}
             >
               Select App Type
-            </em>{' '}
-            {/* This is the placeholder item */}
+            </em>
           </CustomMenuItem>
           <CustomMenuItem value={'APP'}>App</CustomMenuItem>
           <CustomMenuItem value={'WEBSITE'}>Website</CustomMenuItem>
@@ -320,9 +321,7 @@ export const AppPublish = ({ names, categories }) => {
 
         <Spacer height="15px" />
 
-        <InputLabel
-          sx={{ color: '#888', fontSize: '14px', marginBottom: '2px' }}
-        >
+        <InputLabel sx={{ fontSize: '14px', marginBottom: '2px' }}>
           Title
         </InputLabel>
 
@@ -330,7 +329,7 @@ export const AppPublish = ({ names, categories }) => {
           value={title}
           onChange={(e) => setTitle(e.target.value)}
           sx={{
-            border: '0.5px solid var(--50-white, #FFFFFF80)',
+            border: `0.5px solid ${theme.palette.action.disabled}`,
             padding: '0px 15px',
             borderRadius: '5px',
             height: '36px',
@@ -347,9 +346,7 @@ export const AppPublish = ({ names, categories }) => {
 
         <Spacer height="15px" />
 
-        <InputLabel
-          sx={{ color: '#888', fontSize: '14px', marginBottom: '2px' }}
-        >
+        <InputLabel sx={{ fontSize: '14px', marginBottom: '2px' }}>
           Description
         </InputLabel>
 
@@ -357,7 +354,7 @@ export const AppPublish = ({ names, categories }) => {
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           sx={{
-            border: '0.5px solid var(--50-white, #FFFFFF80)',
+            border: `0.5px solid ${theme.palette.action.disabled}`,
             padding: '0px 15px',
             borderRadius: '5px',
             height: '36px',
@@ -374,9 +371,7 @@ export const AppPublish = ({ names, categories }) => {
 
         <Spacer height="15px" />
 
-        <InputLabel
-          sx={{ color: '#888', fontSize: '14px', marginBottom: '2px' }}
-        >
+        <InputLabel sx={{ fontSize: '14px', marginBottom: '2px' }}>
           Category
         </InputLabel>
 
@@ -389,12 +384,11 @@ export const AppPublish = ({ names, categories }) => {
           <CustomMenuItem value="">
             <em
               style={{
-                color: 'var(--50-white, #FFFFFF80)',
+                color: theme.palette.text.secondary,
               }}
             >
               Select Category
-            </em>{' '}
-            {/* This is the placeholder item */}
+            </em>
           </CustomMenuItem>
           {categories?.map((category) => {
             return (
@@ -407,9 +401,7 @@ export const AppPublish = ({ names, categories }) => {
 
         <Spacer height="15px" />
 
-        <InputLabel
-          sx={{ color: '#888', fontSize: '14px', marginBottom: '2px' }}
-        >
+        <InputLabel sx={{ fontSize: '14px', marginBottom: '2px' }}>
           Tags
         </InputLabel>
 
@@ -418,7 +410,7 @@ export const AppPublish = ({ names, categories }) => {
             value={tag1}
             onChange={(e) => setTag1(e.target.value)}
             sx={{
-              border: '0.5px solid var(--50-white, #FFFFFF80)',
+              border: `0.5px solid ${theme.palette.action.disabled}`,
               padding: '0px 15px',
               borderRadius: '5px',
               height: '36px',
@@ -435,7 +427,7 @@ export const AppPublish = ({ names, categories }) => {
             value={tag2}
             onChange={(e) => setTag2(e.target.value)}
             sx={{
-              border: '0.5px solid var(--50-white, #FFFFFF80)',
+              border: `0.5px solid ${theme.palette.action.disabled}`,
               padding: '0px 15px',
               borderRadius: '5px',
               height: '36px',
@@ -452,7 +444,7 @@ export const AppPublish = ({ names, categories }) => {
             value={tag3}
             onChange={(e) => setTag3(e.target.value)}
             sx={{
-              border: '0.5px solid var(--50-white, #FFFFFF80)',
+              border: `0.5px solid ${theme.palette.action.disabled}`,
               padding: '0px 15px',
               borderRadius: '5px',
               height: '36px',
@@ -469,7 +461,7 @@ export const AppPublish = ({ names, categories }) => {
             value={tag4}
             onChange={(e) => setTag4(e.target.value)}
             sx={{
-              border: '0.5px solid var(--50-white, #FFFFFF80)',
+              border: `0.5px solid ${theme.palette.action.disabled}`,
               padding: '0px 15px',
               borderRadius: '5px',
               height: '36px',
@@ -486,7 +478,7 @@ export const AppPublish = ({ names, categories }) => {
             value={tag5}
             onChange={(e) => setTag5(e.target.value)}
             sx={{
-              border: '0.5px solid var(--50-white, #FFFFFF80)',
+              border: `0.5px solid ${theme.palette.action.disabled}`,
               padding: '0px 15px',
               borderRadius: '5px',
               height: '36px',
diff --git a/src/components/Apps/AppViewerContainer.tsx b/src/components/Apps/AppViewerContainer.tsx
index daa3a7e..43c661f 100644
--- a/src/components/Apps/AppViewerContainer.tsx
+++ b/src/components/Apps/AppViewerContainer.tsx
@@ -27,7 +27,7 @@ const AppViewerContainer = React.forwardRef(
               }
               .frame-content {
                 overflow: hidden;
-                height: '100vh';
+                height: 100vh;
               }
             `}
             </style>
@@ -35,7 +35,7 @@ const AppViewerContainer = React.forwardRef(
         }
         style={{
           border: 'none',
-          height: '100vh',
+          height: customHeight || '100vh',
           left: (!isSelected || hide) && '-200vw',
           overflow: 'hidden',
           position: (!isSelected || hide) && 'fixed',
diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx
index a335810..40192a3 100644
--- a/src/components/Apps/Apps-styles.tsx
+++ b/src/components/Apps/Apps-styles.tsx
@@ -141,7 +141,7 @@ export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
 
 export const AppCircle = styled(Box)(({ theme }) => ({
   alignItems: 'center',
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.palette.background.surface,
   borderColor:
     theme.palette.mode === 'dark'
       ? 'rgb(209, 209, 209)'
@@ -283,7 +283,7 @@ export const TabParent = styled(Box)(({ theme }) => ({
 
 export const PublishQAppCTAParent = styled(Box)(({ theme }) => ({
   alignItems: 'center',
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.palette.background.paper,
   color: theme.palette.text.primary,
   display: 'flex',
   justifyContent: 'space-between',
@@ -292,7 +292,7 @@ export const PublishQAppCTAParent = styled(Box)(({ theme }) => ({
 
 export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({
   alignItems: 'center',
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.palette.background.paper,
   color: theme.palette.text.primary,
   display: 'flex',
   justifyContent: 'flex-start',
@@ -300,7 +300,7 @@ export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({
 
 export const PublishQAppCTARight = styled(Box)(({ theme }) => ({
   alignItems: 'center',
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.palette.background.paper,
   color: theme.palette.text.primary,
   display: 'flex',
   justifyContent: 'flex-end',
@@ -308,8 +308,8 @@ export const PublishQAppCTARight = styled(Box)(({ theme }) => ({
 
 export const PublishQAppCTAButton = styled(ButtonBase)(({ theme }) => ({
   alignItems: 'center',
-  backgroundColor: theme.palette.background.paper,
-  borderColor: theme.palette.background.default,
+  backgroundColor: theme.palette.background.default,
+  borderColor: theme.palette.text.primary,
   borderRadius: '25px',
   borderStyle: 'solid',
   borderWidth: '1px',
@@ -322,10 +322,10 @@ export const PublishQAppCTAButton = styled(ButtonBase)(({ theme }) => ({
 
 export const PublishQAppDotsBG = styled(Box)(({ theme }) => ({
   alignItems: 'center',
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.palette.background.paper,
   color: theme.palette.text.primary,
   display: 'flex',
-  height: '60px',
+  height: '80px',
   justifyContent: 'center',
   width: '60px',
 }));
@@ -333,7 +333,7 @@ export const PublishQAppDotsBG = styled(Box)(({ theme }) => ({
 export const PublishQAppInfo = styled(Typography)(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
-  fontSize: '10px',
+  fontSize: '16px',
   fontStyle: 'italic',
   fontWeight: 400,
   lineHeight: 1.2,
@@ -341,15 +341,18 @@ export const PublishQAppInfo = styled(Typography)(({ theme }) => ({
 
 export const PublishQAppChoseFile = styled(ButtonBase)(({ theme }) => ({
   alignItems: 'center',
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.palette.background.paper,
   borderRadius: '5px',
   color: theme.palette.text.primary,
   display: 'flex',
-  fontSize: '10px',
+  fontSize: '16px',
   fontWeight: 600,
-  height: '30px',
+  height: '40px',
   justifyContent: 'center',
-  width: '101px',
+  width: '120px',
+  '&:hover': {
+    backgroundColor: 'action.hover', // background on hover
+  },
 }));
 
 export const AppsCategoryInfo = styled(Box)(({ theme }) => ({
diff --git a/src/components/Apps/AppsDesktop.tsx b/src/components/Apps/AppsDesktop.tsx
index e81e1a3..32098e2 100644
--- a/src/components/Apps/AppsDesktop.tsx
+++ b/src/components/Apps/AppsDesktop.tsx
@@ -24,6 +24,7 @@ import { useRecoilState } from 'recoil';
 import { enabledDevModeAtom } from '../../atoms/global';
 import { AppsIcon } from '../../assets/Icons/AppsIcon';
 import { CoreSyncStatus } from '../CoreSyncStatus';
+import { MessagingIconFilled } from '../../assets/Icons/MessagingIconFilled';
 
 const uid = new ShortUniqueId({ length: 8 });
 
@@ -342,6 +343,8 @@ export const AppsDesktop = ({
           gap: '25px',
           height: '100vh',
           width: '60px',
+          backgroundColor: theme.palette.background.surface,
+          borderRight: `1px solid ${theme.palette.border.subtle}`,
         }}
       >
         <ButtonBase
@@ -392,7 +395,7 @@ export const AppsDesktop = ({
             label="Chat"
             disableWidth
           >
-            <MessagingIcon
+            <MessagingIconFilled
               height={30}
               color={
                 hasUnreadDirects || hasUnreadGroups
diff --git a/src/components/Apps/AppsDevMode.tsx b/src/components/Apps/AppsDevMode.tsx
index 1209f08..df7e0ca 100644
--- a/src/components/Apps/AppsDevMode.tsx
+++ b/src/components/Apps/AppsDevMode.tsx
@@ -1,15 +1,6 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { AppsDevModeHome } from './AppsDevModeHome';
 import { Spacer } from '../../common/Spacer';
-import { MyContext, getBaseApiReact } from '../../App';
-import { AppInfo } from './AppInfo';
 
 import {
   executeEvent,
@@ -19,19 +10,15 @@ import {
 import { AppsParent } from './Apps-styles';
 import AppViewerContainer from './AppViewerContainer';
 import ShortUniqueId from 'short-unique-id';
-import { AppPublish } from './AppPublish';
-import { AppsLibraryDesktop } from './AppsLibraryDesktop';
-import { AppsCategoryDesktop } from './AppsCategoryDesktop';
-import { AppsNavBarDesktop } from './AppsNavBarDesktop';
+
 import { Box, ButtonBase, useTheme } from '@mui/material';
 import { HomeIcon } from '../../assets/Icons/HomeIcon';
-import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
 import { Save } from '../Save/Save';
-import { HubsIcon } from '../../assets/Icons/HubsIcon';
 import { AppsDevModeNavBar } from './AppsDevModeNavBar';
 import { AppsIcon } from '../../assets/Icons/AppsIcon';
 import { IconWrapper } from '../Desktop/DesktopFooter';
 import { CoreSyncStatus } from '../CoreSyncStatus';
+import { MessagingIconFilled } from '../../assets/Icons/MessagingIconFilled';
 
 const uid = new ShortUniqueId({ length: 8 });
 
@@ -311,7 +298,7 @@ export const AppsDevMode = ({
             label="Chat"
             disableWidth
           >
-            <MessagingIcon
+            <MessagingIconFilled
               height={30}
               color={
                 hasUnreadDirects || hasUnreadGroups
diff --git a/src/components/Apps/AppsDevModeNavBar.tsx b/src/components/Apps/AppsDevModeNavBar.tsx
index 433ce9b..a677d67 100644
--- a/src/components/Apps/AppsDevModeNavBar.tsx
+++ b/src/components/Apps/AppsDevModeNavBar.tsx
@@ -81,7 +81,7 @@ export const AppsDevModeNavBar = () => {
       sx={{
         position: 'relative',
         flexDirection: 'column',
-        width: '60px',
+        width: '59px',
         height: 'unset',
         maxHeight: '70vh',
         borderRadius: '0px 30px 30px 0px',
@@ -116,7 +116,7 @@ export const AppsDevModeNavBar = () => {
             '& .MuiTabs-indicator': {
               backgroundColor: 'white',
             },
-            maxHeight: `320px`, // Ensure the tabs container fits within the available space
+            maxHeight: `275px`, // Ensure the tabs container fits within the available space
             overflow: 'hidden', // Prevents overflow on small screens
           }}
         >
diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx
index 1c6206e..f09e7c1 100644
--- a/src/components/Apps/AppsLibraryDesktop.tsx
+++ b/src/components/Apps/AppsLibraryDesktop.tsx
@@ -467,11 +467,13 @@ export const AppsLibraryDesktop = ({
                           borderRadius: '6px',
                           borderStyle: 'solid',
                           borderWidth: '4px',
-                          boxShadow: '2px 4px 0px 0px #000000',
                           display: 'flex',
                           height: '50px',
                           justifyContent: 'center',
                           padding: '0px 20px',
+                          '&:hover': {
+                            backgroundColor: 'action.hover', // background on hover
+                          },
                         }}
                       >
                         All
@@ -495,11 +497,13 @@ export const AppsLibraryDesktop = ({
                               borderRadius: '6px',
                               borderStyle: 'solid',
                               borderWidth: '4px',
-                              boxShadow: '2px 4px 0px 0px #000000',
                               display: 'flex',
                               height: '50px',
                               justifyContent: 'center',
                               padding: '0px 20px',
+                              '&:hover': {
+                                backgroundColor: 'action.hover', // background on hover
+                              },
                             }}
                           >
                             {category?.name}
diff --git a/src/components/Apps/AppsNavBarDesktop.tsx b/src/components/Apps/AppsNavBarDesktop.tsx
index 890c297..3c6d91c 100644
--- a/src/components/Apps/AppsNavBarDesktop.tsx
+++ b/src/components/Apps/AppsNavBarDesktop.tsx
@@ -160,7 +160,7 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
         maxHeight: '70vh',
         padding: '10px',
         position: 'relative',
-        width: '60px',
+        width: '59px',
       }}
     >
       <AppsNavBarLeft
@@ -190,7 +190,7 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
             '& .MuiTabs-indicator': {
               backgroundColor: theme.palette.background.default,
             },
-            maxHeight: `320px`, // Ensure the tabs container fits within the available space
+            maxHeight: `275px`, // Ensure the tabs container fits within the available space
             overflow: 'hidden', // Prevents overflow on small screens
           }}
         >
diff --git a/src/components/Apps/AppsPrivate.tsx b/src/components/Apps/AppsPrivate.tsx
index 4d3e852..4a39b63 100644
--- a/src/components/Apps/AppsPrivate.tsx
+++ b/src/components/Apps/AppsPrivate.tsx
@@ -261,6 +261,12 @@ export const AppsPrivate = ({ myName }) => {
           }}
           maxWidth="md"
           fullWidth={true}
+          PaperProps={{
+            style: {
+              backgroundColor: theme.palette.background.paper,
+              boxShadow: 'none',
+            },
+          }}
         >
           <Box>
             <Tabs
diff --git a/src/components/Auth/DownloadWallet.tsx b/src/components/Auth/DownloadWallet.tsx
index 12b46f4..3136dc3 100644
--- a/src/components/Auth/DownloadWallet.tsx
+++ b/src/components/Auth/DownloadWallet.tsx
@@ -184,6 +184,14 @@ export const DownloadWallet = ({
                 edge="start"
                 tabIndex={-1}
                 disableRipple
+                sx={{
+                  '&.Mui-checked': {
+                    color: theme.palette.text.secondary,
+                  },
+                  '& .MuiSvgIcon-root': {
+                    color: theme.palette.text.secondary,
+                  },
+                }}
               />
             }
             label={
diff --git a/src/components/Chat/ChatGroup.tsx b/src/components/Chat/ChatGroup.tsx
index 2a86f1d..503ec3a 100644
--- a/src/components/Chat/ChatGroup.tsx
+++ b/src/components/Chat/ChatGroup.tsx
@@ -1217,7 +1217,7 @@ export const ChatGroup = ({
               >
                 <CloseIcon
                   sx={{
-                    color: 'white',
+                    color: theme.palette.text.primary,
                   }}
                 />
               </ButtonBase>
diff --git a/src/components/Chat/ChatOptions.tsx b/src/components/Chat/ChatOptions.tsx
index ed808f2..c70dbff 100644
--- a/src/components/Chat/ChatOptions.tsx
+++ b/src/components/Chat/ChatOptions.tsx
@@ -576,7 +576,7 @@ export const ChatOptions = ({
       <Box
         sx={{
           alignItems: 'center',
-          backgroundColor: theme.palette.background.default,
+          backgroundColor: theme.palette.background.paper,
           borderBottomLeftRadius: '20px',
           borderTopLeftRadius: '20px',
           display: 'flex',
@@ -711,7 +711,7 @@ export const ChatOptions = ({
                     (!lastMentionTimestamp ||
                       lastMentionTimestamp < mentionList[0]?.timestamp)
                       ? 'var(--unread)'
-                      : 'white',
+                      : theme.palette.text.primary,
                 }}
               />
             </Tooltip>
diff --git a/src/components/Chat/TipTap.tsx b/src/components/Chat/TipTap.tsx
index 3c5403f..01155b5 100644
--- a/src/components/Chat/TipTap.tsx
+++ b/src/components/Chat/TipTap.tsx
@@ -365,6 +365,7 @@ export default ({
   membersWithNames,
   enableMentions,
 }) => {
+  const theme = useTheme();
   const [isDisabledEditorEnter, setIsDisabledEditorEnter] = useRecoilState(
     isDisabledEditorEnterAtom
   );
@@ -483,12 +484,16 @@ export default ({
   }, []);
 
   return (
-    <div
-      style={{
+    <Box
+      sx={{
         display: 'flex',
         flexDirection: 'column',
         height: '100%',
         justifyContent: 'space-between',
+        '--text-primary': theme.palette.text.primary,
+        '--text-secondary': theme.palette.text.secondary,
+        '--background-default': theme.palette.background.default,
+        '--background-secondary': theme.palette.background.paper,
       }}
     >
       <EditorProvider
@@ -537,6 +542,6 @@ export default ({
           },
         }}
       />
-    </div>
+    </Box>
   );
 };
diff --git a/src/components/DesktopSideBar.tsx b/src/components/DesktopSideBar.tsx
index e632b06..f1ccf22 100644
--- a/src/components/DesktopSideBar.tsx
+++ b/src/components/DesktopSideBar.tsx
@@ -1,6 +1,5 @@
 import { Box, ButtonBase, useTheme } from '@mui/material';
 import { HomeIcon } from '../assets/Icons/HomeIcon';
-import { MessagingIcon } from '../assets/Icons/MessagingIcon';
 import { Save } from './Save/Save';
 import { IconWrapper } from './Desktop/DesktopFooter';
 import { useRecoilState } from 'recoil';
@@ -9,6 +8,7 @@ import { AppsIcon } from '../assets/Icons/AppsIcon';
 import ThemeSelector from './Theme/ThemeSelector';
 import { CoreSyncStatus } from './CoreSyncStatus';
 import LanguageSelector from './Language/LanguageSelector';
+import { MessagingIconFilled } from '../assets/Icons/MessagingIconFilled';
 
 export const DesktopSideBar = ({
   goToHome,
@@ -111,7 +111,7 @@ export const DesktopSideBar = ({
           label="Chat"
           disableWidth
         >
-          <MessagingIcon
+          <MessagingIconFilled
             height={30}
             color={
               hasUnreadDirects || hasUnreadGroups
diff --git a/src/components/Embeds/AttachmentEmbed.tsx b/src/components/Embeds/AttachmentEmbed.tsx
index f17ba6f..6fde16e 100644
--- a/src/components/Embeds/AttachmentEmbed.tsx
+++ b/src/components/Embeds/AttachmentEmbed.tsx
@@ -15,6 +15,7 @@ import {
   Dialog,
   IconButton,
   CircularProgress,
+  useTheme,
 } from '@mui/material';
 import { base64ToBlobUrl } from '../../utils/fileReading';
 import { saveFileToDiskGeneric } from '../../utils/generateWallet/generateWallet';
@@ -44,6 +45,7 @@ export const AttachmentCard = ({
 }) => {
   const [isOpen, setIsOpen] = useState(true);
   const { downloadResource } = useContext(MyContext);
+  const theme = useTheme();
 
   const saveToDisk = async () => {
     const { name, service, identifier } = resourceData;
@@ -110,7 +112,7 @@ export const AttachmentCard = ({
   return (
     <Card
       sx={{
-        backgroundColor: '#1F2023',
+        backgroundColor: theme.palette.background.default,
         height: '250px',
         // height: isOpen ? "auto" : "150px",
       }}
@@ -132,7 +134,7 @@ export const AttachmentCard = ({
         >
           <AttachmentIcon
             sx={{
-              color: 'white',
+              color: theme.palette.text.primary,
             }}
           />
           <Typography>ATTACHMENT embed</Typography>
@@ -149,7 +151,7 @@ export const AttachmentCard = ({
               onClick={refresh}
               sx={{
                 fontSize: '24px',
-                color: 'white',
+                color: theme.palette.text.primary,
               }}
             />
           </ButtonBase>
@@ -159,7 +161,7 @@ export const AttachmentCard = ({
                 onClick={openExternal}
                 sx={{
                   fontSize: '24px',
-                  color: 'white',
+                  color: theme.palette.text.primary,
                 }}
               />
             </ButtonBase>
@@ -174,7 +176,6 @@ export const AttachmentCard = ({
         <Typography
           sx={{
             fontSize: '12px',
-            color: 'white',
           }}
         >
           Created by {decodeIfEncoded(owner)}
@@ -281,10 +282,10 @@ export const AttachmentCard = ({
                 resourceDetails?.status?.status !== 'FAILED_TO_DOWNLOAD' && (
                   <>
                     <CircularProgress
-                      sx={{
-                        color: 'white',
-                      }}
                       size={20}
+                      sx={{
+                        color: theme.palette.text.primary,
+                      }}
                     />
                     <FileAttachmentFont>
                       Downloading:{' '}
diff --git a/src/components/Embeds/ImageEmbed.tsx b/src/components/Embeds/ImageEmbed.tsx
index 4122dfb..24cab97 100644
--- a/src/components/Embeds/ImageEmbed.tsx
+++ b/src/components/Embeds/ImageEmbed.tsx
@@ -8,6 +8,7 @@ import {
   Divider,
   Dialog,
   IconButton,
+  useTheme,
 } from '@mui/material';
 
 import RefreshIcon from '@mui/icons-material/Refresh';
@@ -28,6 +29,7 @@ export const ImageCard = ({
   errorMsg,
   encryptionType,
 }) => {
+  const theme = useTheme();
   const [isOpen, setIsOpen] = useState(true);
   const [height, setHeight] = useState('400px');
   useEffect(() => {
@@ -45,7 +47,7 @@ export const ImageCard = ({
   return (
     <Card
       sx={{
-        backgroundColor: '#1F2023',
+        backgroundColor: theme.palette.background.default,
         height: height,
         transition: 'height 0.6s ease-in-out',
       }}
@@ -67,7 +69,7 @@ export const ImageCard = ({
         >
           <ImageIcon
             sx={{
-              color: 'white',
+              color: theme.palette.text.primary,
             }}
           />
           <Typography>IMAGE embed</Typography>
@@ -84,7 +86,7 @@ export const ImageCard = ({
               onClick={refresh}
               sx={{
                 fontSize: '24px',
-                color: 'white',
+                color: theme.palette.text.primary,
               }}
             />
           </ButtonBase>
@@ -94,7 +96,7 @@ export const ImageCard = ({
                 onClick={openExternal}
                 sx={{
                   fontSize: '24px',
-                  color: 'white',
+                  color: theme.palette.text.primary,
                 }}
               />
             </ButtonBase>
@@ -109,7 +111,6 @@ export const ImageCard = ({
         <Typography
           sx={{
             fontSize: '12px',
-            color: 'white',
           }}
         >
           Created by {decodeIfEncoded(owner)}
@@ -182,7 +183,7 @@ export function ImageViewer({ src, alt = '' }) {
 
   const handleOpenFullscreen = () => setIsFullscreen(true);
   const handleCloseFullscreen = () => setIsFullscreen(false);
-
+  const theme = useTheme();
   return (
     <>
       {/* Image in container */}
@@ -231,7 +232,7 @@ export function ImageViewer({ src, alt = '' }) {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            backgroundColor: '#000', // Optional: dark background for fullscreen mode
+            backgroundColor: theme.palette.background.paper, // Optional: dark background for fullscreen mode
           }}
         >
           {/* Close Button */}
@@ -242,7 +243,7 @@ export function ImageViewer({ src, alt = '' }) {
               top: 8,
               right: 8,
               zIndex: 10,
-              color: 'white',
+              color: theme.palette.text.primary,
             }}
           >
             <CloseIcon />
diff --git a/src/components/Embeds/PollEmbed.tsx b/src/components/Embeds/PollEmbed.tsx
index 65e5983..4adda15 100644
--- a/src/components/Embeds/PollEmbed.tsx
+++ b/src/components/Embeds/PollEmbed.tsx
@@ -12,6 +12,7 @@ import {
   Box,
   ButtonBase,
   Divider,
+  useTheme,
 } from '@mui/material';
 import { getNameInfo } from '../Group/Group';
 import PollIcon from '@mui/icons-material/Poll';
@@ -37,6 +38,7 @@ export const PollCard = ({
   const [isOpen, setIsOpen] = useState(false);
   const { show, userInfo } = useContext(MyContext);
   const [isLoadingSubmit, setIsLoadingSubmit] = useState(false);
+  const theme = useTheme();
   const handleVote = async () => {
     const fee = await getFee('VOTE_ON_POLL');
 
@@ -103,7 +105,7 @@ export const PollCard = ({
   return (
     <Card
       sx={{
-        backgroundColor: '#1F2023',
+        backgroundColor: theme.palette.background.default,
         height: isOpen ? 'auto' : '150px',
       }}
     >
@@ -124,7 +126,7 @@ export const PollCard = ({
         >
           <PollIcon
             sx={{
-              color: 'white',
+              color: theme.palette.text.primary,
             }}
           />
           <Typography>POLL embed</Typography>
@@ -141,7 +143,7 @@ export const PollCard = ({
               onClick={refresh}
               sx={{
                 fontSize: '24px',
-                color: 'white',
+                color: theme.palette.text.primary,
               }}
             />
           </ButtonBase>
@@ -151,7 +153,7 @@ export const PollCard = ({
                 onClick={openExternal}
                 sx={{
                   fontSize: '24px',
-                  color: 'white',
+                  color: theme.palette.text.primary,
                 }}
               />
             </ButtonBase>
@@ -186,9 +188,6 @@ export const PollCard = ({
             <Button
               size="small"
               variant="contained"
-              sx={{
-                backgroundColor: 'var(--green)',
-              }}
               onClick={() => {
                 setIsOpen(true);
               }}
@@ -260,16 +259,7 @@ export const PollCard = ({
               <FormControlLabel
                 key={index}
                 value={index}
-                control={
-                  <Radio
-                    sx={{
-                      color: 'white', // Unchecked color
-                      '&.Mui-checked': {
-                        color: 'var(--green)', // Checked color
-                      },
-                    }}
-                  />
-                }
+                control={<Radio />}
                 label={option?.optionName}
                 sx={{
                   '& .MuiFormControlLabel-label': {
diff --git a/src/components/GeneralNotifications.tsx b/src/components/GeneralNotifications.tsx
index bdfac09..25fbb6b 100644
--- a/src/components/GeneralNotifications.tsx
+++ b/src/components/GeneralNotifications.tsx
@@ -77,7 +77,7 @@ export const GeneralNotifications = ({ address }) => {
             sx={{
               color: hasNewPayment
                 ? 'var(--unread)'
-                : theme.palette.text.primary,
+                : theme.palette.text.secondary,
             }}
           />
         </Tooltip>
diff --git a/src/components/Group/GroupInvites.tsx b/src/components/Group/GroupInvites.tsx
index 9883911..ca3f32c 100644
--- a/src/components/Group/GroupInvites.tsx
+++ b/src/components/Group/GroupInvites.tsx
@@ -71,7 +71,7 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
             fontSize: '1rem',
           }}
         >
-          {t('group:group_invites', { postProcess: 'capitalize' })}{' '}
+          {t('group:group.invites', { postProcess: 'capitalize' })}{' '}
           {groupsWithJoinRequests?.length > 0 &&
             ` (${groupsWithJoinRequests?.length})`}
         </Typography>
diff --git a/src/components/Group/ManageMembers.tsx b/src/components/Group/ManageMembers.tsx
index 05d30aa..eba8de3 100644
--- a/src/components/Group/ManageMembers.tsx
+++ b/src/components/Group/ManageMembers.tsx
@@ -13,7 +13,7 @@ import { InviteMember } from './InviteMember';
 import { ListOfInvites } from './ListOfInvites';
 import { ListOfBans } from './ListOfBans';
 import { ListOfJoinRequests } from './ListOfJoinRequests';
-import { Box, ButtonBase, Card, Tab, Tabs } from '@mui/material';
+import { Box, ButtonBase, Card, Tab, Tabs, useTheme } from '@mui/material';
 import { CustomizedSnackbars } from '../Snackbar/Snackbar';
 import { MyContext, getBaseApiReact } from '../../App';
 import { getGroupMembers, getNames } from './Group';
@@ -60,6 +60,7 @@ export const ManageMembers = ({
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
+  const theme = useTheme();
   const { show, setTxList } = React.useContext(MyContext);
 
   const handleClose = () => {
@@ -172,9 +173,14 @@ export const ManageMembers = ({
         onClose={handleClose}
         TransitionComponent={Transition}
       >
-        <AppBar sx={{ position: 'relative', bgcolor: '#232428' }}>
+        <AppBar
+          sx={{
+            position: 'relative',
+            bgcolor: theme.palette.background.default,
+          }}
+        >
           <Toolbar>
-            <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
+            <Typography sx={{ ml: 2, flex: 1 }} variant="h4" component="div">
               Manage Members
             </Typography>
             <IconButton
@@ -189,8 +195,8 @@ export const ManageMembers = ({
         </AppBar>
         <Box
           sx={{
-            bgcolor: '#27282c',
-            color: 'white',
+            bgcolor: theme.palette.background.default,
+            color: theme.palette.text.primary,
             flexGrow: 1,
             overflowY: 'auto',
           }}
@@ -205,7 +211,7 @@ export const ManageMembers = ({
               allowScrollButtonsMobile // Show scroll buttons on mobile as well
               sx={{
                 '& .MuiTabs-indicator': {
-                  backgroundColor: 'white',
+                  backgroundColor: theme.palette.background.default,
                 },
                 maxWidth: '100%', // Ensure the tabs container fits within the available space
                 overflow: 'hidden', // Prevents overflow on small screens
@@ -216,7 +222,7 @@ export const ManageMembers = ({
                 {...a11yProps(0)}
                 sx={{
                   '&.Mui-selected': {
-                    color: 'white',
+                    color: theme.palette.text.primary,
                   },
                   fontSize: '1rem',
                 }}
@@ -227,7 +233,7 @@ export const ManageMembers = ({
                 {...a11yProps(1)}
                 sx={{
                   '&.Mui-selected': {
-                    color: 'white',
+                    color: theme.palette.text.primary,
                   },
                   fontSize: '1rem',
                 }}
@@ -238,7 +244,7 @@ export const ManageMembers = ({
                 {...a11yProps(2)}
                 sx={{
                   '&.Mui-selected': {
-                    color: 'white',
+                    color: theme.palette.text.primary,
                   },
                   fontSize: '1rem',
                 }}
@@ -249,7 +255,7 @@ export const ManageMembers = ({
                 {...a11yProps(3)}
                 sx={{
                   '&.Mui-selected': {
-                    color: 'white',
+                    color: theme.palette.text.primary,
                   },
                   fontSize: '1rem',
                 }}
@@ -260,7 +266,7 @@ export const ManageMembers = ({
                 {...a11yProps(4)}
                 sx={{
                   '&.Mui-selected': {
-                    color: 'white',
+                    color: theme.palette.text.primary,
                   },
                   fontSize: '1rem',
                 }}
diff --git a/src/components/QMailStatus.tsx b/src/components/QMailStatus.tsx
index 6600211..f62b346 100644
--- a/src/components/QMailStatus.tsx
+++ b/src/components/QMailStatus.tsx
@@ -87,7 +87,11 @@ export const QMailStatus = () => {
           },
         }}
       >
-        <Mail />
+        <Mail
+          sx={{
+            color: theme.palette.text.secondary,
+          }}
+        />
       </Tooltip>
     </ButtonBase>
   );
diff --git a/src/styles/App-styles.ts b/src/styles/App-styles.ts
index 8031321..af273e5 100644
--- a/src/styles/App-styles.ts
+++ b/src/styles/App-styles.ts
@@ -54,7 +54,6 @@ export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({
 }));
 
 export const TextP = styled(Typography)(({ theme }) => ({
-  backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
   fontFamily: 'Inter',
   fontSize: '13px',
@@ -62,7 +61,6 @@ export const TextP = styled(Typography)(({ theme }) => ({
 }));
 
 export const TextItalic = styled('span')(({ theme }) => ({
-  backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
   fontFamily: 'Inter',
   fontSize: '13px',
@@ -71,7 +69,6 @@ export const TextItalic = styled('span')(({ theme }) => ({
 }));
 
 export const TextSpan = styled('span')(({ theme }) => ({
-  backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
   fontFamily: 'Inter',
   fontSize: '13px',
diff --git a/src/styles/theme-dark.ts b/src/styles/theme-dark.ts
index fb348a8..971da81 100644
--- a/src/styles/theme-dark.ts
+++ b/src/styles/theme-dark.ts
@@ -81,6 +81,20 @@ const darkThemeOptions: ThemeOptions = {
         },
       },
     },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          backgroundImage: 'none',
+        },
+      },
+    },
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          backgroundImage: 'none',
+        },
+      },
+    },
   },
 };
 
diff --git a/src/styles/theme-light.ts b/src/styles/theme-light.ts
index db025d3..a220c73 100644
--- a/src/styles/theme-light.ts
+++ b/src/styles/theme-light.ts
@@ -19,8 +19,8 @@ const lightThemeOptions: ThemeOptions = {
       surface: 'rgb(240, 240, 240)', // optional middle gray for replies, side panels
     },
     text: {
-      primary: 'rgba(0, 0, 0, 1)',
-      secondary: 'rgba(82, 82, 82, 1)',
+      primary: 'rgba(0, 0, 0, 0.87)', // 87% black (slightly softened)
+      secondary: 'rgba(0, 0, 0, 0.6)', // 60% black
     },
     border: {
       main: 'rgba(0, 0, 0, 0.12)',
@@ -82,6 +82,20 @@ const lightThemeOptions: ThemeOptions = {
         },
       },
     },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          backgroundImage: 'none',
+        },
+      },
+    },
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          backgroundImage: 'none',
+        },
+      },
+    },
   },
 };