diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx
index b3a508b..030ac51 100644
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@@ -1632,7 +1632,7 @@ export const Group = ({
 
   const renderDirects = () => {
     return (
-      <div
+      <Box
         style={{
           alignItems: 'flex-start',
           background: theme.palette.background.paper,
@@ -1718,8 +1718,8 @@ export const Group = ({
           </ButtonBase>
         </Box>
 
-        <div
-          style={{
+        <Box
+          sx={{
             alignItems: 'flex-start',
             display: 'flex',
             flexDirection: 'column',
@@ -1803,22 +1803,24 @@ export const Group = ({
                             postProcess: 'capitalizeFirstChar',
                           })
                     }
-                    primaryTypographyProps={{
-                      style: {
-                        color:
-                          direct?.address === selectedDirect?.address &&
-                          theme.palette.text.primary,
-                        textWrap: 'wrap',
-                        overflow: 'hidden',
-                        fontSize: '16px',
+                    slotProps={{
+                      primary: {
+                        style: {
+                          color:
+                            direct?.address === selectedDirect?.address &&
+                            theme.palette.text.primary,
+                          textWrap: 'wrap',
+                          overflow: 'hidden',
+                          fontSize: '16px',
+                        },
                       },
-                    }} // Change the color of the primary text
-                    secondaryTypographyProps={{
-                      style: {
-                        color:
-                          direct?.address === selectedDirect?.address &&
-                          theme.palette.text.primary,
-                        fontSize: '12px',
+                      secondary: {
+                        style: {
+                          color:
+                            direct?.address === selectedDirect?.address &&
+                            theme.palette.text.primary,
+                          fontSize: '12px',
+                        },
                       },
                     }}
                     sx={{
@@ -1844,10 +1846,10 @@ export const Group = ({
               </ListItem>
             </List>
           ))}
-        </div>
+        </Box>
 
-        <div
-          style={{
+        <Box
+          sx={{
             display: 'flex',
             width: '100%',
             gap: '10px',
@@ -1871,6 +1873,7 @@ export const Group = ({
               postProcess: 'capitalizeFirstChar',
             })}
           </CustomButton>
+
           {!isRunningPublicNode && (
             <CustomButton
               onClick={() => {
@@ -1888,8 +1891,8 @@ export const Group = ({
               />
             </CustomButton>
           )}
-        </div>
-      </div>
+        </Box>
+      </Box>
     );
   };
 
diff --git a/src/components/Group/GroupList.tsx b/src/components/Group/GroupList.tsx
index e928331..a32dac1 100644
--- a/src/components/Group/GroupList.tsx
+++ b/src/components/Group/GroupList.tsx
@@ -59,7 +59,7 @@ export const GroupList = ({
   const [isRunningPublicNode] = useAtom(isRunningPublicNodeAtom);
 
   return (
-    <div
+    <Box
       style={{
         alignItems: 'flex-start',
         background: theme.palette.background.surface,
@@ -178,8 +178,8 @@ export const GroupList = ({
         </List>
       </div>
 
-      <div
-        style={{
+      <Box
+        sx={{
           display: 'flex',
           gap: '10px',
           justifyContent: 'center',
@@ -195,7 +195,7 @@ export const GroupList = ({
           >
             <AddCircleOutlineIcon
               sx={{
-                color: theme.palette.text.primary,
+                color: theme.palette.text.secondary,
               }}
             />
             {t('group:group.group', { postProcess: 'capitalizeFirstChar' })}
@@ -213,14 +213,14 @@ export const GroupList = ({
             >
               <PersonOffIcon
                 sx={{
-                  color: theme.palette.text.primary,
+                  color: theme.palette.text.secondary,
                 }}
               />
             </CustomButton>
           )}
         </>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };
 
@@ -294,20 +294,22 @@ const GroupItem = React.memo(
                   ? 'no messages'
                   : `last message: ${formatEmailDate(group?.timestamp)}`
               }
-              primaryTypographyProps={{
-                style: {
-                  color:
-                    group?.groupId === selectedGroup?.groupId &&
-                    theme.palette.text.primary,
-                  fontSize: '16px',
+              slotProps={{
+                primary: {
+                  style: {
+                    color:
+                      group?.groupId === selectedGroup?.groupId &&
+                      theme.palette.text.primary,
+                    fontSize: '16px',
+                  },
                 },
-              }}
-              secondaryTypographyProps={{
-                style: {
-                  color:
-                    group?.groupId === selectedGroup?.groupId &&
-                    theme.palette.text.primary,
-                  fontSize: '12px',
+                secondary: {
+                  style: {
+                    color:
+                      group?.groupId === selectedGroup?.groupId &&
+                      theme.palette.text.primary,
+                    fontSize: '12px',
+                  },
                 },
               }}
               sx={{