diff --git a/src/App.tsx b/src/App.tsx
index 01d00e1..f6bffc6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2793,11 +2793,11 @@ function App() {
               accept
             </Button>
             <Button sx={{
-                  backgroundColor: 'var(--unread)',
+                  backgroundColor: 'var(--danger)',
                   color: 'black',
                   opacity: 0.7,
                   '&:hover': {
-                    backgroundColor: 'var(--unread)',
+                    backgroundColor: 'var(--danger)',
                   color: 'black',
                   opacity: 1
                   },
@@ -3093,7 +3093,7 @@ function App() {
               </CustomButtonAccept>
               <CustomButtonAccept
                color="black"
-               bgColor="var(--unread)"
+               bgColor="var(--danger)"
                 sx={{
                   minWidth: "102px",
                 }}
diff --git a/src/Wallets.tsx b/src/Wallets.tsx
index 4ef1643..2290ea5 100644
--- a/src/Wallets.tsx
+++ b/src/Wallets.tsx
@@ -434,12 +434,12 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
             </Button>
             <Button
             sx={{
-                backgroundColor: 'var(--unread)',
+                backgroundColor: 'var(--danger)',
                 "&:hover": {
-                    backgroundColor: "var(--unread)", 
+                    backgroundColor: "var(--danger)", 
                   },
                   "&:focus": {
-                    backgroundColor: "var(--unread)", 
+                    backgroundColor: "var(--danger)", 
                   },
             }}
             size="small"
diff --git a/src/components/Apps/AppsDesktop.tsx b/src/components/Apps/AppsDesktop.tsx
index 8797a52..2eb1005 100644
--- a/src/components/Apps/AppsDesktop.tsx
+++ b/src/components/Apps/AppsDesktop.tsx
@@ -381,7 +381,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
               height={30}
               color={
                 hasUnreadDirects
-                  ? "var(--unread)"
+                  ? "var(--danger)"
                   : isDirects
                   ? "white"
                   : "rgba(250, 250, 250, 0.5)"
@@ -399,7 +399,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
               height={30}
               color={
                 hasUnreadGroups
-                  ? "var(--unread)"
+                  ? "var(--danger)"
                   : isGroups
                   ? "white"
                   : "rgba(250, 250, 250, 0.5)"
diff --git a/src/components/Apps/AppsNavBarDesktop.tsx b/src/components/Apps/AppsNavBarDesktop.tsx
index f42e45b..3184af6 100644
--- a/src/components/Apps/AppsNavBarDesktop.tsx
+++ b/src/components/Apps/AppsNavBarDesktop.tsx
@@ -321,7 +321,7 @@ export const AppsNavBarDesktop = ({disableBack}) => {
             <PushPinIcon
               height={20}
               sx={{
-                color: isSelectedAppPinned ? "red" : "rgba(250, 250, 250, 0.5)",
+                color: isSelectedAppPinned ? "var(--danger)" : "rgba(250, 250, 250, 0.5)",
               }}
             />
           </ListItemIcon>
@@ -330,7 +330,7 @@ export const AppsNavBarDesktop = ({disableBack}) => {
               "& .MuiTypography-root": {
                 fontSize: "12px",
                 fontWeight: 600,
-                color: isSelectedAppPinned ? "red" : "rgba(250, 250, 250, 0.5)",
+                color: isSelectedAppPinned ? "var(--danger)" : "rgba(250, 250, 250, 0.5)",
               },
             }}
             primary={`${isSelectedAppPinned ? "Unpin app" : "Pin app"}`}
diff --git a/src/components/Chat/ChatDirect.tsx b/src/components/Chat/ChatDirect.tsx
index ace54ce..d23f026 100644
--- a/src/components/Chat/ChatDirect.tsx
+++ b/src/components/Chat/ChatDirect.tsx
@@ -656,7 +656,7 @@ useEffect(() => {
         }}>
                 <Typography sx={{
                   fontSize: '12px',
-                  color: messageSize > 4000 ? 'var(--unread)' : 'unset'
+                  color: messageSize > 4000 ? 'var(--danger)' : 'unset'
                 }}>{`Your message size is of ${messageSize} bytes out of a maximum of 4000`}</Typography>
 
           </Box>
diff --git a/src/components/Chat/ChatGroup.tsx b/src/components/Chat/ChatGroup.tsx
index f4ae843..afcb055 100644
--- a/src/components/Chat/ChatGroup.tsx
+++ b/src/components/Chat/ChatGroup.tsx
@@ -873,7 +873,7 @@ const clearEditorContent = () => {
         }}>
                 <Typography sx={{
                   fontSize: '12px',
-                  color: messageSize > 4000 ? 'var(--unread)' : 'unset'
+                  color: messageSize > 4000 ? 'var(--danger)' : 'unset'
                 }}>{`Your message size is of ${messageSize} bytes out of a maximum of 4000`}</Typography>
 
           </Box>
diff --git a/src/components/Chat/ChatList.tsx b/src/components/Chat/ChatList.tsx
index 7504301..9d5e42b 100644
--- a/src/components/Chat/ChatList.tsx
+++ b/src/components/Chat/ChatList.tsx
@@ -377,7 +377,7 @@ export const ChatList = ({
               position: "absolute",
               right: 20,
               backgroundColor: "var(--unread)",
-              color: "white",
+              color: "black",
               padding: "10px 20px",
               borderRadius: "20px",
               cursor: "pointer",
diff --git a/src/components/Chat/GroupAnnouncements.tsx b/src/components/Chat/GroupAnnouncements.tsx
index fe5bf34..192114b 100644
--- a/src/components/Chat/GroupAnnouncements.tsx
+++ b/src/components/Chat/GroupAnnouncements.tsx
@@ -647,7 +647,7 @@ export const GroupAnnouncements = ({
                   marginTop: "auto",
                   alignSelf: "center",
                   cursor: isSending ? "default" : "pointer",
-                  background: "red",
+                  background: "var(--danger)",
                   flexShrink: 0,
                   padding: isMobile && "5px",
                   fontSize: isMobile && "14px",
diff --git a/src/components/Desktop/DesktopFooter.tsx b/src/components/Desktop/DesktopFooter.tsx
index faac91b..6da8f4e 100644
--- a/src/components/Desktop/DesktopFooter.tsx
+++ b/src/components/Desktop/DesktopFooter.tsx
@@ -150,7 +150,7 @@ export const DesktopFooter = ({
               height={30}
               color={
                 hasUnreadGroups
-                  ? "var(--unread)"
+                  ? "var(--danger)"
                   : isGroups
                   ? "white"
                   : "rgba(250, 250, 250, 0.5)"
@@ -172,7 +172,7 @@ export const DesktopFooter = ({
               height={30}
               color={
                 hasUnreadDirects
-                  ? "var(--unread)"
+                  ? "var(--danger)"
                   : isDirects
                   ? "white"
                   : "rgba(250, 250, 250, 0.5)"
diff --git a/src/components/Desktop/DesktopHeader.tsx b/src/components/Desktop/DesktopHeader.tsx
index 9be4d2f..6c256e8 100644
--- a/src/components/Desktop/DesktopHeader.tsx
+++ b/src/components/Desktop/DesktopHeader.tsx
@@ -109,7 +109,7 @@ export const DesktopHeader = ({
         )}
         {isPrivate === false && (
           <NoEncryptionGmailerrorredIcon sx={{
-            color: 'var(--unread)'
+            color: 'var(--danger)'
           }} />
         )}
         <Typography
@@ -158,7 +158,7 @@ export const DesktopHeader = ({
               height={25}
               color={
                 hasUnreadGroups
-                  ? "var(--unread)"
+                  ? "var(--danger)"
                   : isGroups
                   ? "white"
                   : "rgba(250, 250, 250, 0.5)"
@@ -180,7 +180,7 @@ export const DesktopHeader = ({
               height={25}
               color={
                 hasUnreadDirects
-                  ? "var(--unread)"
+                  ? "var(--danger)"
                   : isDirects
                   ? "white"
                   : "rgba(250, 250, 250, 0.5)"
diff --git a/src/components/DesktopSideBar.tsx b/src/components/DesktopSideBar.tsx
index 9ee123d..76f2f2e 100644
--- a/src/components/DesktopSideBar.tsx
+++ b/src/components/DesktopSideBar.tsx
@@ -90,7 +90,7 @@ export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDire
               height={30}
               color={
                 hasUnreadGroups
-                  ? "var(--unread)"
+                  ? "var(--danger)"
                   : isGroups
                   ? "white"
                   : "rgba(250, 250, 250, 0.5)"
diff --git a/src/components/Embeds/AttachmentEmbed.tsx b/src/components/Embeds/AttachmentEmbed.tsx
index 3b78d74..c068d3b 100644
--- a/src/components/Embeds/AttachmentEmbed.tsx
+++ b/src/components/Embeds/AttachmentEmbed.tsx
@@ -228,7 +228,7 @@ export const AttachmentCard = ({
               <Typography
                 sx={{
                   fontSize: "14px",
-                  color: "var(--unread)",
+                  color: "var(--danger)",
                 }}
               >
                 {errorMsg}
diff --git a/src/components/Embeds/ImageEmbed.tsx b/src/components/Embeds/ImageEmbed.tsx
index 0ac1a7c..f1cc859 100644
--- a/src/components/Embeds/ImageEmbed.tsx
+++ b/src/components/Embeds/ImageEmbed.tsx
@@ -159,7 +159,7 @@ export const ImageCard = ({
               <Typography
                 sx={{
                   fontSize: "14px",
-                  color: "var(--unread)",
+                  color: "var(--danger)",
                 }}
               >
                 {errorMsg}
diff --git a/src/components/Embeds/PollEmbed.tsx b/src/components/Embeds/PollEmbed.tsx
index 69d1369..3da02c3 100644
--- a/src/components/Embeds/PollEmbed.tsx
+++ b/src/components/Embeds/PollEmbed.tsx
@@ -221,7 +221,7 @@ export const PollCard = ({
               <Typography
                 sx={{
                   fontSize: "14px",
-                  color: "var(--unread)",
+                  color: "var(--danger)",
                 }}
               >
                 {errorMsg}
diff --git a/src/components/Group/AddGroupList.tsx b/src/components/Group/AddGroupList.tsx
index 977430d..ccd4850 100644
--- a/src/components/Group/AddGroupList.tsx
+++ b/src/components/Group/AddGroupList.tsx
@@ -240,7 +240,7 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
         )}
         {group?.isOpen === true && (
           <NoEncryptionGmailerrorredIcon sx={{
-            color: 'var(--unread)'
+            color: 'var(--danger)'
           }} />
         )}
         <Spacer width="15px" />
diff --git a/src/components/Group/Forum/NewThread.tsx b/src/components/Group/Forum/NewThread.tsx
index 165b760..4c237ec 100644
--- a/src/components/Group/Forum/NewThread.tsx
+++ b/src/components/Group/Forum/NewThread.tsx
@@ -534,14 +534,12 @@ export const NewThread = ({
             </NewMessageSendP>
             {isMessage ? (
               <SendNewMessage
-                color="red"
                 opacity={1}
                 height="25px"
                 width="25px"
               />
             ) : (
               <CreateThreadIcon
-                color="red"
                 opacity={1}
                 height="25px"
                 width="25px"
diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx
index ebfa5e2..38a4fa6 100644
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@@ -1687,7 +1687,7 @@ export const Group = ({
                         direct?.timestamp) && (
                       <MarkChatUnreadIcon
                         sx={{
-                          color: "red",
+                          color: "var(--unread)",
                         }}
                       />
                     )}
@@ -1897,7 +1897,7 @@ export const Group = ({
                           justifyContent: 'center'
                         }}>
                         <NoEncryptionGmailerrorredIcon sx={{
-                          color: 'var(--unread)'
+                          color: 'var(--danger)'
                         }} />
                         </Box>
                       //   <Avatar
@@ -1940,7 +1940,7 @@ export const Group = ({
                       !groupAnnouncements[group?.groupId]?.seentimestamp && (
                         <CampaignIcon
                           sx={{
-                            color: "red",
+                            color: "var(--unread)",
                             marginRight: "5px",
                           }}
                         />
@@ -1956,7 +1956,7 @@ export const Group = ({
                           group?.timestamp) && (
                         <MarkChatUnreadIcon
                           sx={{
-                            color: "red",
+                            color: "var(--unread)",
                           }}
                         />
                       )}
diff --git a/src/components/Group/GroupMenu.tsx b/src/components/Group/GroupMenu.tsx
index a02dbff..a44c480 100644
--- a/src/components/Group/GroupMenu.tsx
+++ b/src/components/Group/GroupMenu.tsx
@@ -73,13 +73,13 @@ export const GroupMenu = ({ setGroupSection, groupSection, setOpenManageMembers,
             }}
           >
             {groupSection === "announcement" &&(
-                 <> <NotificationIcon2 color={hasUnreadAnnouncements || hasUnreadChat ? 'var(--unread)' : 'white'}  /> {" Announcements"}</>
+                 <> <NotificationIcon2 color={hasUnreadAnnouncements || hasUnreadChat ? 'var(--danger)' : 'white'}  /> {" Announcements"}</>
             )}
              {groupSection === "chat" &&(
-                 <> <ChatIcon color={hasUnreadAnnouncements || hasUnreadChat ? 'var(--unread)' : 'white'} /> {" Group Chats"}</>
+                 <> <ChatIcon color={hasUnreadAnnouncements || hasUnreadChat ? 'var(--danger)' : 'white'} /> {" Group Chats"}</>
             )}
              {groupSection === "forum" &&(
-                 <> <ThreadsIcon color={hasUnreadAnnouncements || hasUnreadChat ? 'var(--unread)' : 'white'} /> {" Threads"}</>
+                 <> <ThreadsIcon color={hasUnreadAnnouncements || hasUnreadChat ? 'var(--danger)' : 'white'} /> {" Threads"}</>
             )}
           </Box>
           <ArrowDownIcon color="white" />
@@ -128,13 +128,13 @@ export const GroupMenu = ({ setGroupSection, groupSection, setOpenManageMembers,
             
             minWidth: '24px !important'
           }}>
-            <ChatIcon color={hasUnreadChat ? 'var(--unread)' : "#fff"}  />
+            <ChatIcon color={hasUnreadChat ? 'var(--danger)' : "#fff"}  />
           </ListItemIcon>
           <ListItemText sx={{
                   "& .MuiTypography-root": {
                     fontSize: "12px",
                     fontWeight: 600,
-                    color: hasUnreadChat ? "var(--unread)" :"#fff"
+                    color: hasUnreadChat ? "var(--danger)" :"#fff"
                   },
                 }} primary="Chat" />
         </MenuItem>
@@ -148,13 +148,13 @@ export const GroupMenu = ({ setGroupSection, groupSection, setOpenManageMembers,
             
             minWidth: '24px !important'
           }}>
-          <NotificationIcon2 color={hasUnreadAnnouncements ? 'var(--unread)' : "#fff" } />
+          <NotificationIcon2 color={hasUnreadAnnouncements ? 'var(--danger)' : "#fff" } />
           </ListItemIcon>
           <ListItemText sx={{
                   "& .MuiTypography-root": {
                     fontSize: "12px",
                     fontWeight: 600,
-                    color: hasUnreadAnnouncements ? "var(--unread)" :"#fff"
+                    color: hasUnreadAnnouncements ? "var(--danger)" :"#fff"
                   },
                 }} primary="Announcements" />
         </MenuItem>
diff --git a/src/components/Group/ListOfGroupPromotions.tsx b/src/components/Group/ListOfGroupPromotions.tsx
index a9ed3de..6ed444a 100644
--- a/src/components/Group/ListOfGroupPromotions.tsx
+++ b/src/components/Group/ListOfGroupPromotions.tsx
@@ -555,7 +555,7 @@ export const ListOfGroupPromotions = () => {
         )}
         {promotion?.isOpen === true && (
           <NoEncryptionGmailerrorredIcon sx={{
-            color: 'var(--unread)'
+            color: 'var(--danger)'
           }} />
         )}
          <Typography
diff --git a/src/components/Group/UserListOfInvites.tsx b/src/components/Group/UserListOfInvites.tsx
index bbabe05..2a63896 100644
--- a/src/components/Group/UserListOfInvites.tsx
+++ b/src/components/Group/UserListOfInvites.tsx
@@ -192,7 +192,7 @@ export const UserListOfInvites = ({myAddress, setInfoSnack, setOpenSnack}) => {
         )}
         {invite?.isOpen === true && (
           <NoEncryptionGmailerrorredIcon sx={{
-            color: 'var(--unread)'
+            color: 'var(--danger)'
           }} />
         )}
         <Spacer width="15px" />
diff --git a/src/components/Mobile/MobileFooter.tsx b/src/components/Mobile/MobileFooter.tsx
index 7179f6e..52e5c7c 100644
--- a/src/components/Mobile/MobileFooter.tsx
+++ b/src/components/Mobile/MobileFooter.tsx
@@ -108,7 +108,7 @@ export const MobileFooter = ({
           }}
           icon={
             <IconWrapper color="rgba(250, 250, 250, 0.5)" label="Groups">
-              <HubsIcon color={hasUnreadGroups ? "var(--unread)" : "rgba(250, 250, 250, 0.5)"} />
+              <HubsIcon color={hasUnreadGroups ? "var(--danger)" : "rgba(250, 250, 250, 0.5)"} />
             </IconWrapper>
           }
           sx={{
@@ -175,7 +175,7 @@ export const MobileFooter = ({
           }}
           icon={
             <IconWrapper label="Messaging" color="rgba(250, 250, 250, 0.5)">
-              <MessagingIcon color={hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} />
+              <MessagingIcon color={hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"} />
             </IconWrapper>
           }
           sx={{
diff --git a/src/components/Mobile/MobileHeader.tsx b/src/components/Mobile/MobileHeader.tsx
index 9902a28..cd98ba9 100644
--- a/src/components/Mobile/MobileHeader.tsx
+++ b/src/components/Mobile/MobileHeader.tsx
@@ -92,7 +92,7 @@ const Header = ({
              
               onClick={handleClick}
             >
-              <NotificationIcon height={20} width={21} color={hasUnreadDirects || hasUnreadGroups ? "var(--unread)" : "rgba(145, 145, 147, 1)"} />
+              <NotificationIcon height={20} width={21} color={hasUnreadDirects || hasUnreadGroups ? "var(--danger)" : "rgba(145, 145, 147, 1)"} />
             </ButtonBase>
             {fullScreen && (
                <ButtonBase onClick={()=> {
@@ -135,7 +135,7 @@ const Header = ({
                 setMobileViewModeKeepOpen("messaging");
               }}
             >
-              <MessagingIcon2    height={20}              color={hasUnreadDirects ? "var(--unread)" : "rgba(145, 145, 147, 1)"}
+              <MessagingIcon2    height={20}              color={hasUnreadDirects ? "var(--danger)" : "rgba(145, 145, 147, 1)"}
                 
               />
             </ButtonBase>
@@ -197,13 +197,13 @@ const Header = ({
             
             minWidth: '24px !important'
           }}>
-            <HubsIcon height={20} color={hasUnreadGroups ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} />
+            <HubsIcon height={20} color={hasUnreadGroups ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"} />
           </ListItemIcon>
           <ListItemText sx={{
                   "& .MuiTypography-root": {
                     fontSize: "12px",
                     fontWeight: 600,
-                    color: hasUnreadGroups ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"
+                    color: hasUnreadGroups ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"
                   },
                 }} primary="Groups" />
         </MenuItem>
@@ -218,13 +218,13 @@ const Header = ({
             
             minWidth: '24px !important'
           }}>
-          <MessagingIcon height={20} color={hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} />
+          <MessagingIcon height={20} color={hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"} />
           </ListItemIcon>
           <ListItemText sx={{
                   "& .MuiTypography-root": {
                     fontSize: "12px",
                     fontWeight: 600,
-                    color: hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"
+                    color: hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"
                   },
                 }} primary="Messaging" />
         </MenuItem>
@@ -358,7 +358,7 @@ const Header = ({
           }}
         >
           <IconButton  onClick={handleClick} color="inherit">
-            <NotificationIcon color={hasUnreadDirects || hasUnreadGroups ? "var(--unread)" : "rgba(255, 255, 255, 1)"} />
+            <NotificationIcon color={hasUnreadDirects || hasUnreadGroups ? "var(--danger)" : "rgba(255, 255, 255, 1)"} />
           </IconButton>
         </Box>
 
@@ -433,13 +433,13 @@ const Header = ({
             
             minWidth: '24px !important'
           }}>
-            <HubsIcon height={20} color={hasUnreadGroups ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} />
+            <HubsIcon height={20} color={hasUnreadGroups ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"} />
           </ListItemIcon>
           <ListItemText sx={{
                   "& .MuiTypography-root": {
                     fontSize: "12px",
                     fontWeight: 600,
-                    color: hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"
+                    color: hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"
                   },
                 }} primary="Groups" />
         </MenuItem>
@@ -454,13 +454,13 @@ const Header = ({
             
             minWidth: '24px !important'
           }}>
-          <MessagingIcon height={20} color={hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} />
+          <MessagingIcon height={20} color={hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"} />
           </ListItemIcon>
           <ListItemText sx={{
                   "& .MuiTypography-root": {
                     fontSize: "12px",
                     fontWeight: 600,
-                    color: hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"
+                    color: hasUnreadDirects ? "var(--danger)" :"rgba(250, 250, 250, 0.5)"
                   },
                 }} primary="Messaging" />
         </MenuItem>
diff --git a/src/components/Save/Save.tsx b/src/components/Save/Save.tsx
index 378f198..4f2a293 100644
--- a/src/components/Save/Save.tsx
+++ b/src/components/Save/Save.tsx
@@ -300,11 +300,11 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
                     onClick={revertChanges}
                     variant="contained"
                     sx={{
-                      backgroundColor: "var(--unread)",
+                      backgroundColor: "var(--danger)",
                       color: "black",
                       opacity: 0.7,
                       "&:hover": {
-                        backgroundColor: "var(--unread)",
+                        backgroundColor: "var(--danger)",
                         color: "black",
                         opacity: 1,
                       },
@@ -360,11 +360,11 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
                 onClick={saveToQdn}
                 variant="contained"
                 sx={{
-                  backgroundColor: "var(--unread)",
+                  backgroundColor: "var(--danger)",
                   color: "black",
                   opacity: 0.7,
                   "&:hover": {
-                    backgroundColor: "var(--unread)",
+                    backgroundColor: "var(--danger)",
                     color: "black",
                     opacity: 1,
                   },
diff --git a/src/index.css b/src/index.css
index a9946c7..147eae9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -34,7 +34,8 @@
   --bg-primary : rgba(31, 32, 35, 1);
   --bg-2: #27282c;
   --bg-3: rgba(0, 0, 0, 0.1);
-  --unread: #B14646;
+  --unread: #4297e2; 
+  --danger: #B14646;
   --apps-circle: #1F2023;
   --green: #5EB049;
 }