diff --git a/src/components/Chat/ChatDirect.tsx b/src/components/Chat/ChatDirect.tsx
index c499eb3..5341fd9 100644
--- a/src/components/Chat/ChatDirect.tsx
+++ b/src/components/Chat/ChatDirect.tsx
@@ -344,8 +344,32 @@ const clearEditorContent = () => {
       height: isMobile ? '100%' : '100vh',
       display: 'flex',
       flexDirection: 'column',
-      width: '100%'
+      width: '100%',
+      background: !isMobile && 'var(--bg-2)'
     }}>
+      {!isMobile && (
+         <Box onClick={close} sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '5px',
+          cursor: 'pointer',
+          padding: '4px 6px',
+          width: 'fit-content',
+          borderRadius: '3px',
+          background: 'rgb(35, 36, 40)',
+          margin: '10px 0px',
+          alignSelf: 'center'
+        }}>
+          <ArrowBackIcon sx={{
+            color: 'white',
+            fontSize: isMobile ? '20px' : '20px'
+          }}/>
+          <Typography sx={{
+            color: 'white',
+            fontSize: isMobile ? '14px' : '14px'
+          }}>Close Direct Chat</Typography>
+        </Box>
+      )}
        {isMobile && (
          <Box
          sx={{
diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx
index a38eff1..6c5cda3 100644
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@@ -2202,59 +2202,61 @@ export const Group = ({
           {mobileViewModeKeepOpen === "messaging" && renderDirects()}
           {newChat && (
             <>
-                <Box
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  width: "100%",
-                  marginTop: "14px",
-                  justifyContent: "center",
-                  height: "15px",
-                }}
-              >
-                <Box
+                {isMobile && (
+                  <Box
                   sx={{
                     display: "flex",
                     alignItems: "center",
-                    justifyContent: "space-between",
-                    width: "320px",
+                    width: "100%",
+                    marginTop: "14px",
+                    justifyContent: "center",
+                    height: "15px",
                   }}
                 >
                   <Box
                     sx={{
                       display: "flex",
                       alignItems: "center",
-                      width: "50px",
+                      justifyContent: "space-between",
+                      width: "320px",
                     }}
                   >
-                    <ButtonBase
-                      onClick={() => {
-                        close()
+                    <Box
+                      sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        width: "50px",
                       }}
                     >
-                      <ReturnIcon />
-                    </ButtonBase>
-                  </Box>
-                 
-                  <Box
-                    sx={{
-                      display: "flex",
-                      alignItems: "center",
-                      width: "50px",
-                      justifyContent: "flex-end",
-                    }}
-                  >
                       <ButtonBase
-                      onClick={() => {
-                        setSelectedDirect(null)
-                        setMobileViewModeKeepOpen('')
+                        onClick={() => {
+                          close()
+                        }}
+                      >
+                        <ReturnIcon />
+                      </ButtonBase>
+                    </Box>
+                   
+                    <Box
+                      sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        width: "50px",
+                        justifyContent: "flex-end",
                       }}
                     >
-                    <ExitIcon />
-                    </ButtonBase>
+                        <ButtonBase
+                        onClick={() => {
+                          setSelectedDirect(null)
+                          setMobileViewModeKeepOpen('')
+                        }}
+                      >
+                      <ExitIcon />
+                      </ButtonBase>
+                    </Box>
                   </Box>
                 </Box>
-              </Box>
+                )}
               <Box
                 sx={{
                   position: "absolute",