diff --git a/src/assets/Icons/AppsIcon.tsx b/src/assets/Icons/AppsIcon.tsx
index 3f58604..631c2e2 100644
--- a/src/assets/Icons/AppsIcon.tsx
+++ b/src/assets/Icons/AppsIcon.tsx
@@ -1,8 +1,10 @@
 import { useTheme } from '@mui/material';
 
-export const AppsIcon = ({ height = 31, width = 31 }) => {
+export const AppsIcon = ({ height = 31, width = 31, color }) => {
   const theme = useTheme();
 
+  const setColor = color ? color : theme.palette.text.primary;
+
   return (
     <svg
       width={width}
@@ -13,39 +15,39 @@ export const AppsIcon = ({ height = 31, width = 31 }) => {
     >
       <path
         d="M3.76596 7.53192C5.84584 7.53192 7.53192 5.84584 7.53192 3.76596C7.53192 1.68608 5.84584 0 3.76596 0C1.68608 0 0 1.68608 0 3.76596C0 5.84584 1.68608 7.53192 3.76596 7.53192Z"
-        fill={theme.palette.text.primary}
+        fill={setColor}
       />
       <path
         d="M15 7.53192C17.0799 7.53192 18.766 5.84584 18.766 3.76596C18.766 1.68608 17.0799 0 15 0C12.9201 0 11.2341 1.68608 11.2341 3.76596C11.2341 5.84584 12.9201 7.53192 15 7.53192Z"
-        fill={theme.palette.text.primary}
+        fill={setColor}
       />
       <path
         d="M26.234 7.53192C28.3139 7.53192 30 5.84584 30 3.76596C30 1.68608 28.3139 0 26.234 0C24.1542 0 22.4681 1.68608 22.4681 3.76596C22.4681 5.84584 24.1542 7.53192 26.234 7.53192Z"
-        fill={theme.palette.text.primary}
+        fill={setColor}
       />
       <path
         d="M3.76596 30.0001C5.84584 30.0001 7.53192 28.314 7.53192 26.2341C7.53192 24.1542 5.84584 22.4681 3.76596 22.4681C1.68608 22.4681 0 24.1542 0 26.2341C0 28.314 1.68608 30.0001 3.76596 30.0001Z"
-        fill={theme.palette.text.primary}
+        fill={setColor}
       />
       <path
         d="M15 30.0002C17.0799 30.0002 18.766 28.3141 18.766 26.2342C18.766 24.1543 17.0799 22.4683 15 22.4683C12.9201 22.4683 11.2341 24.1543 11.2341 26.2342C11.2341 28.3141 12.9201 30.0002 15 30.0002Z"
-        fill={theme.palette.text.primary}
+        fill={setColor}
       />
       <path
         d="M26.234 30.0002C28.3139 30.0002 30 28.3141 30 26.2342C30 24.1543 28.3139 22.4683 26.234 22.4683C24.1542 22.4683 22.4681 24.1543 22.4681 26.2342C22.4681 28.3141 24.1542 30.0002 26.234 30.0002Z"
-        fill={theme.palette.text.primary}
+        fill={setColor}
       />
       <path
         d="M3.76596 18.766C5.84584 18.766 7.53192 17.08 7.53192 15.0001C7.53192 12.9202 5.84584 11.2341 3.76596 11.2341C1.68608 11.2341 0 12.9202 0 15.0001C0 17.08 1.68608 18.766 3.76596 18.766Z"
-        fill={theme.palette.text.primary}
+        fill={setColor}
       />
       <path
         d="M15 18.766C17.0799 18.766 18.766 17.08 18.766 15.0001C18.766 12.9202 17.0799 11.2341 15 11.2341C12.9201 11.2341 11.2341 12.9202 11.2341 15.0001C11.2341 17.08 12.9201 18.766 15 18.766Z"
-        fill={theme.palette.text.primary}
+        fill={setColor}
       />
       <path
         d="M26.234 18.766C28.3139 18.766 30 17.08 30 15.0001C30 12.9202 28.3139 11.2341 26.234 11.2341C24.1542 11.2341 22.4681 12.9202 22.4681 15.0001C22.4681 17.08 24.1542 18.766 26.234 18.766Z"
-        fill={theme.palette.text.primary}
+        fill={setColor}
       />
     </svg>
   );
diff --git a/src/assets/Icons/HomeIcon.tsx b/src/assets/Icons/HomeIcon.tsx
index 0d3c4fe..4432c42 100644
--- a/src/assets/Icons/HomeIcon.tsx
+++ b/src/assets/Icons/HomeIcon.tsx
@@ -1,8 +1,9 @@
 import { useTheme } from '@mui/material';
 
-export const HomeIcon = ({ height = 20, width = 23 }) => {
+export const HomeIcon = ({ height = 20, width = 23, color }) => {
   const theme = useTheme();
 
+  const setColor = color ? color : theme.palette.text.primary;
   return (
     <svg
       width={width}
@@ -13,7 +14,7 @@ export const HomeIcon = ({ height = 20, width = 23 }) => {
     >
       <path
         d="M22.936 11.9842C22.8122 12.2972 22.5127 12.502 22.1801 12.5008H19.7155V19.1668C19.714 19.6263 19.3471 19.9985 18.8939 20H14.7862V14.1673C14.7862 12.3265 13.3149 10.8343 11.5 10.8343C9.68509 10.8343 8.21381 12.3265 8.21381 14.1673V20H4.10607C3.65294 19.9985 3.28596 19.6263 3.28452 19.1668V12.5008H0.819874C0.487346 12.502 0.187777 12.2972 0.0640491 11.9842C-0.0642812 11.6739 0.00375033 11.3157 0.236574 11.076L10.9167 0.243778C11.2395 -0.0812593 11.7605 -0.0812593 12.0833 0.243778L22.7634 11.076C22.9963 11.3157 23.0643 11.6739 22.936 11.9842Z"
-        fill={theme.palette.text.primary}
+        fill={setColor}
       />
     </svg>
   );
diff --git a/src/components/Apps/AppsDesktop.tsx b/src/components/Apps/AppsDesktop.tsx
index c7bb5c6..e81e1a3 100644
--- a/src/components/Apps/AppsDesktop.tsx
+++ b/src/components/Apps/AppsDesktop.tsx
@@ -363,7 +363,7 @@ export const AppsDesktop = ({
             goToHome();
           }}
         >
-          <HomeIcon height={34} />
+          <HomeIcon height={34} color={theme.palette.text.secondary} />
         </ButtonBase>
 
         <ButtonBase
@@ -372,7 +372,7 @@ export const AppsDesktop = ({
           }}
         >
           <IconWrapper label="Apps" disableWidth>
-            <AppsIcon height={30} />
+            <AppsIcon height={30} color={theme.palette.text.primary} />
           </IconWrapper>
         </ButtonBase>
 
@@ -385,7 +385,9 @@ export const AppsDesktop = ({
             color={
               hasUnreadDirects || hasUnreadGroups
                 ? 'var(--unread)'
-                : theme.palette.text.primary
+                : desktopViewMode === 'chat'
+                  ? theme.palette.text.primary
+                  : theme.palette.text.secondary
             }
             label="Chat"
             disableWidth
@@ -395,48 +397,13 @@ export const AppsDesktop = ({
               color={
                 hasUnreadDirects || hasUnreadGroups
                   ? 'var(--unread)'
-                  : theme.palette.text.primary
+                  : desktopViewMode === 'chat'
+                    ? theme.palette.text.primary
+                    : theme.palette.text.secondary
               }
             />
           </IconWrapper>
         </ButtonBase>
-        {/* <ButtonBase
-          onClick={() => {
-            setDesktopSideView("directs");
-            toggleSideViewDirects()
-          }}
-        >
-        
-            <MessagingIcon
-              height={30}
-              color={
-                hasUnreadDirects
-                  ? "var(--danger)"
-                  : isDirects
-                  ? "white"
-                  : "rgba(250, 250, 250, 0.5)"
-              }
-            />
-
-        </ButtonBase>
-        <ButtonBase
-          onClick={() => {
-            setDesktopSideView("groups");
-            toggleSideViewGroups()
-          }}
-        >
-            <HubsIcon
-              height={30}
-              color={
-                hasUnreadGroups
-                  ? "var(--danger)"
-                  : isGroups
-                  ? "white"
-                  : "rgba(250, 250, 250, 0.5)"
-              }
-            />
-     
-        </ButtonBase> */}
         <Save isDesktop disableWidth myName={myName} />
         {isEnabledDevMode && (
           <ButtonBase
diff --git a/src/components/Apps/AppsDevMode.tsx b/src/components/Apps/AppsDevMode.tsx
index 6301286..1209f08 100644
--- a/src/components/Apps/AppsDevMode.tsx
+++ b/src/components/Apps/AppsDevMode.tsx
@@ -23,7 +23,7 @@ import { AppPublish } from './AppPublish';
 import { AppsLibraryDesktop } from './AppsLibraryDesktop';
 import { AppsCategoryDesktop } from './AppsCategoryDesktop';
 import { AppsNavBarDesktop } from './AppsNavBarDesktop';
-import { Box, ButtonBase } from '@mui/material';
+import { Box, ButtonBase, useTheme } from '@mui/material';
 import { HomeIcon } from '../../assets/Icons/HomeIcon';
 import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
 import { Save } from '../Save/Save';
@@ -60,6 +60,7 @@ export const AppsDevMode = ({
   const [isNewTabWindow, setIsNewTabWindow] = useState(false);
   const [categories, setCategories] = useState([]);
   const iframeRefs = useRef({});
+  const theme = useTheme();
 
   useEffect(() => {
     setTimeout(() => {
@@ -266,7 +267,9 @@ export const AppsDevMode = ({
           <HomeIcon
             height={34}
             color={
-              desktopViewMode === 'home' ? 'white' : 'rgba(250, 250, 250, 0.5)'
+              desktopViewMode === 'home'
+                ? theme.palette.text.primary
+                : theme.palette.text.secondary
             }
           />
         </ButtonBase>
@@ -276,13 +279,19 @@ export const AppsDevMode = ({
           }}
         >
           <IconWrapper
-            color={isApps ? 'white' : 'rgba(250, 250, 250, 0.5)'}
+            color={
+              isApps ? theme.palette.text.primary : theme.palette.text.secondary
+            }
             label="Apps"
             disableWidth
           >
             <AppsIcon
               height={30}
-              color={isApps ? 'white' : 'rgba(250, 250, 250, 0.5)'}
+              color={
+                isApps
+                  ? theme.palette.text.primary
+                  : theme.palette.text.secondary
+              }
             />
           </IconWrapper>
         </ButtonBase>
@@ -296,8 +305,8 @@ export const AppsDevMode = ({
               hasUnreadDirects || hasUnreadGroups
                 ? 'var(--unread)'
                 : desktopViewMode === 'chat'
-                  ? 'white'
-                  : 'rgba(250, 250, 250, 0.5)'
+                  ? theme.palette.text.primary
+                  : theme.palette.text.secondary
             }
             label="Chat"
             disableWidth
@@ -308,8 +317,8 @@ export const AppsDevMode = ({
                 hasUnreadDirects || hasUnreadGroups
                   ? 'var(--unread)'
                   : desktopViewMode === 'chat'
-                    ? 'white'
-                    : 'rgba(250, 250, 250, 0.5)'
+                    ? theme.palette.text.primary
+                    : theme.palette.text.secondary
               }
             />
           </IconWrapper>
@@ -322,14 +331,18 @@ export const AppsDevMode = ({
         >
           <IconWrapper
             color={
-              desktopViewMode === 'dev' ? 'white' : 'rgba(250, 250, 250, 0.5)'
+              desktopViewMode === 'dev'
+                ? theme.palette.text.primary
+                : theme.palette.text.secondary
             }
             label="Dev"
             disableWidth
           >
             <AppsIcon
               color={
-                desktopViewMode === 'dev' ? 'white' : 'rgba(250, 250, 250, 0.5)'
+                desktopViewMode === 'dev'
+                  ? theme.palette.text.primary
+                  : theme.palette.text.secondary
               }
               height={30}
             />
diff --git a/src/components/Chat/AnnouncementItem.tsx b/src/components/Chat/AnnouncementItem.tsx
index 73faf24..e63c7a3 100644
--- a/src/components/Chat/AnnouncementItem.tsx
+++ b/src/components/Chat/AnnouncementItem.tsx
@@ -51,7 +51,7 @@ export const AnnouncementItem = ({
   return (
     <div
       style={{
-        backgroundColor: theme.palette.background.default,
+        backgroundColor: theme.palette.background.paper,
         borderRadius: '7px',
         display: 'flex',
         flexDirection: 'column',
diff --git a/src/components/Desktop/DesktopFooter.tsx b/src/components/Desktop/DesktopFooter.tsx
index ebfbc6f..47a8181 100644
--- a/src/components/Desktop/DesktopFooter.tsx
+++ b/src/components/Desktop/DesktopFooter.tsx
@@ -24,7 +24,7 @@ export const IconWrapper = ({
       sx={{
         alignItems: 'center',
         backgroundColor: selected
-          ? theme.palette.background.default
+          ? theme.palette.action.selected
           : 'transparent',
         borderRadius: '50%',
         color: color ? color : theme.palette.text.primary,
@@ -39,7 +39,7 @@ export const IconWrapper = ({
       {children}
       <Typography
         sx={{
-          color: theme.palette.text.primary,
+          color: color || theme.palette.text.primary,
           fontFamily: 'Inter',
           fontSize: '12px',
           fontWeight: 500,
diff --git a/src/components/Desktop/DesktopHeader.tsx b/src/components/Desktop/DesktopHeader.tsx
index 9dbe111..d04a803 100644
--- a/src/components/Desktop/DesktopHeader.tsx
+++ b/src/components/Desktop/DesktopHeader.tsx
@@ -1,18 +1,6 @@
 import * as React from 'react';
-import {
-  BottomNavigation,
-  BottomNavigationAction,
-  ButtonBase,
-  Typography,
-} from '@mui/material';
-import { Home, Groups, Message, ShowChart } from '@mui/icons-material';
+import { ButtonBase, Typography, useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
-import BottomLogo from '../../assets/svgs/BottomLogo5.svg';
-import { CustomSvg } from '../../common/CustomSvg';
-import { HubsIcon } from '../../assets/Icons/HubsIcon';
-import { TradingIcon } from '../../assets/Icons/TradingIcon';
-import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
-import { HomeIcon } from '../../assets/Icons/HomeIcon';
 import { NotificationIcon2 } from '../../assets/Icons/NotificationIcon2';
 import { ChatIcon } from '../../assets/Icons/ChatIcon';
 import { ThreadsIcon } from '../../assets/Icons/ThreadsIcon';
@@ -94,6 +82,7 @@ export const DesktopHeader = ({
   isPrivate,
 }) => {
   const [value, setValue] = React.useState(0);
+  const theme = useTheme();
   return (
     <Box
       sx={{
@@ -151,10 +140,14 @@ export const DesktopHeader = ({
           }}
         >
           <IconWrapper
-            color={isAnnouncement ? 'black' : 'rgba(250, 250, 250, 0.5)'}
+            color={
+              isAnnouncement
+                ? theme.palette.text.primary
+                : theme.palette.text.secondary
+            }
             label="ANN"
             selected={isAnnouncement}
-            selectColor="#09b6e8"
+            selectColor={theme.palette.action.selected}
             customHeight="55px"
           >
             <NotificationIcon2
@@ -164,8 +157,8 @@ export const DesktopHeader = ({
                 isUnread
                   ? 'var(--unread)'
                   : isAnnouncement
-                    ? 'black'
-                    : 'rgba(250, 250, 250, 0.5)'
+                    ? theme.palette.text.primary
+                    : theme.palette.text.secondary
               }
             />
           </IconWrapper>
@@ -177,10 +170,12 @@ export const DesktopHeader = ({
           }}
         >
           <IconWrapper
-            color={isChat ? 'black' : 'rgba(250, 250, 250, 0.5)'}
+            color={
+              isChat ? theme.palette.text.primary : theme.palette.text.secondary
+            }
             label="Chat"
             selected={isChat}
-            selectColor="#09b6e8"
+            selectColor={theme.palette.action.selected}
             customHeight="55px"
           >
             <ChatIcon
@@ -190,8 +185,8 @@ export const DesktopHeader = ({
                 isUnreadChat
                   ? 'var(--unread)'
                   : isChat
-                    ? 'black'
-                    : 'rgba(250, 250, 250, 0.5)'
+                    ? theme.palette.text.primary
+                    : theme.palette.text.secondary
               }
             />
           </IconWrapper>
@@ -203,16 +198,24 @@ export const DesktopHeader = ({
           }}
         >
           <IconWrapper
-            color={isForum ? 'black' : 'rgba(250, 250, 250, 0.5)'}
+            color={
+              isForum
+                ? theme.palette.text.primary
+                : theme.palette.text.secondary
+            }
             label="Threads"
             selected={isForum}
-            selectColor="#09b6e8"
+            selectColor={theme.palette.action.selected}
             customHeight="55px"
           >
             <ThreadsIcon
               height={25}
               width={20}
-              color={isForum ? 'black' : 'rgba(250, 250, 250, 0.5)'}
+              color={
+                isForum
+                  ? theme.palette.text.primary
+                  : theme.palette.text.secondary
+              }
             />
           </IconWrapper>
         </ButtonBase>
@@ -222,7 +225,7 @@ export const DesktopHeader = ({
           }}
         >
           <IconWrapper
-            color="rgba(250, 250, 250, 0.5)"
+            color={theme.palette.text.secondary}
             label="Members"
             selected={false}
             customHeight="55px"
@@ -230,7 +233,7 @@ export const DesktopHeader = ({
             <MembersIcon
               height={25}
               width={20}
-              color={isForum ? 'white' : 'rgba(250, 250, 250, 0.5)'}
+              color={theme.palette.text.secondary}
             />
           </IconWrapper>
         </ButtonBase>
@@ -242,21 +245,21 @@ export const DesktopHeader = ({
           <IconWrapper
             color={
               groupSection === 'adminSpace'
-                ? 'black'
-                : 'rgba(250, 250, 250, 0.5)'
+                ? theme.palette.text.primary
+                : theme.palette.text.secondary
             }
             label="Admins"
             selected={groupSection === 'adminSpace'}
             customHeight="55px"
-            selectColor="#09b6e8"
+            selectColor={theme.palette.action.selected}
           >
             <AdminsIcon
               height={25}
               width={20}
               color={
                 groupSection === 'adminSpace'
-                  ? 'black'
-                  : 'rgba(250, 250, 250, 0.5)'
+                  ? theme.palette.text.primary
+                  : theme.palette.text.secondary
               }
             />
           </IconWrapper>
diff --git a/src/components/DesktopSideBar.tsx b/src/components/DesktopSideBar.tsx
index b25d206..b422f81 100644
--- a/src/components/DesktopSideBar.tsx
+++ b/src/components/DesktopSideBar.tsx
@@ -28,6 +28,8 @@ export const DesktopSideBar = ({
 
   const theme = useTheme();
 
+  console.log('test', desktopViewMode === 'home');
+
   return (
     <Box
       sx={{
@@ -71,8 +73,6 @@ export const DesktopSideBar = ({
       <ButtonBase
         onClick={() => {
           setDesktopViewMode('apps');
-          // setIsOpenSideViewDirects(false)
-          // setIsOpenSideViewGroups(false)
         }}
       >
         <IconWrapper
@@ -101,7 +101,9 @@ export const DesktopSideBar = ({
           color={
             hasUnreadDirects || hasUnreadGroups
               ? 'var(--unread)'
-              : theme.palette.text.primary
+              : desktopViewMode === 'chat'
+                ? theme.palette.text.primary
+                : theme.palette.text.secondary
           }
           label="Chat"
           disableWidth
@@ -111,7 +113,9 @@ export const DesktopSideBar = ({
             color={
               hasUnreadDirects || hasUnreadGroups
                 ? 'var(--unread)'
-                : theme.palette.text.primary
+                : desktopViewMode === 'chat'
+                  ? theme.palette.text.primary
+                  : theme.palette.text.secondary
             }
           />
         </IconWrapper>
@@ -134,7 +138,7 @@ export const DesktopSideBar = ({
             label="Dev"
             disableWidth
           >
-            <AppsIcon height={30} />
+            <AppsIcon height={30} color={theme.palette.text.secondary} />
           </IconWrapper>
         </ButtonBase>
       )}
diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx
index a4629ce..eaa89e6 100644
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@@ -1679,9 +1679,6 @@ export const Group = ({
                   width: '100%',
                   flexDirection: 'column',
                   cursor: 'pointer',
-                  borderColor: theme.palette.primary,
-                  borderWidth: '1px',
-                  borderStyle: 'solid',
                   padding: '2px',
                   borderRadius: '2px',
                   background:
@@ -1721,6 +1718,7 @@ export const Group = ({
                           theme.palette.text.primary,
                         textWrap: 'wrap',
                         overflow: 'hidden',
+                        fontSize: '16px',
                       },
                     }} // Change the color of the primary text
                     secondaryTypographyProps={{
@@ -1781,7 +1779,7 @@ export const Group = ({
       </div>
     );
   };
-
+  console.log('groupsProperties', groupsProperties);
   const renderGroups = () => {
     return (
       <div
@@ -1918,15 +1916,15 @@ export const Group = ({
                   display: 'flex',
                   background:
                     group?.groupId === selectedGroup?.groupId &&
-                    theme.palette.background.default,
-                  borderColor: theme.palette.primary,
+                    theme.palette.action.selected,
                   borderRadius: '2px',
-                  borderStyle: 'solid',
-                  borderWidth: '1px',
                   cursor: 'pointer',
                   flexDirection: 'column',
                   padding: '2px',
                   width: '100%',
+                  '&:hover': {
+                    backgroundColor: 'action.hover', // background on hover
+                  },
                 }}
               >
                 <ContextMenu
@@ -1954,6 +1952,9 @@ export const Group = ({
                             width: '40px',
                           }}
                         >
+                          {/* <Avatar src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
+                    app?.name
+                  }/qortal_avatar?async=true`} /> */}
                           <LockIcon
                             sx={{
                               color: 'var(--green)',
@@ -1994,6 +1995,7 @@ export const Group = ({
                           color:
                             group?.groupId === selectedGroup?.groupId &&
                             theme.palette.text.primary,
+                          fontSize: '16px',
                         },
                       }} // Change the color of the primary text
                       secondaryTypographyProps={{
diff --git a/src/components/Save/Save.tsx b/src/components/Save/Save.tsx
index f0fbc4f..eef881e 100644
--- a/src/components/Save/Save.tsx
+++ b/src/components/Save/Save.tsx
@@ -10,7 +10,14 @@ import {
   settingsQDNLastUpdatedAtom,
   sortablePinnedAppsAtom,
 } from '../../atoms/global';
-import { Box, Button, ButtonBase, Popover, Typography } from '@mui/material';
+import {
+  Box,
+  Button,
+  ButtonBase,
+  Popover,
+  Typography,
+  useTheme,
+} from '@mui/material';
 import { objectToBase64 } from '../../qdn/encryption/group-encryption';
 import { MyContext } from '../../App';
 import { getFee } from '../../background';
@@ -77,7 +84,7 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
   const [oldPinnedApps, setOldPinnedApps] = useRecoilState(oldPinnedAppsAtom);
   const [anchorEl, setAnchorEl] = useState(null);
   const { show } = useContext(MyContext);
-
+  const theme = useTheme();
   const { t } = useTranslation(['core']);
 
   const hasChanged = useMemo(() => {
@@ -229,13 +236,28 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
               postProcess: 'capitalize',
             })}
             selected={false}
+            color={
+              hasChanged && !isLoading
+                ? '#5EB049'
+                : theme.palette.text.secondary
+            }
           >
             <SaveIcon
-              color={hasChanged && !isLoading ? '#5EB049' : undefined}
+              color={
+                hasChanged && !isLoading
+                  ? '#5EB049'
+                  : theme.palette.text.secondary
+              }
             />
           </IconWrapper>
         ) : (
-          <SaveIcon color={hasChanged && !isLoading ? '#5EB049' : undefined} />
+          <SaveIcon
+            color={
+              hasChanged && !isLoading
+                ? '#5EB049'
+                : theme.palette.text.secondary
+            }
+          />
         )}
       </ButtonBase>