diff --git a/src/App.tsx b/src/App.tsx
index 7236213..d6033d4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -351,25 +351,25 @@ function App() {
     }
   };
  
-  const checkIfUserHasLocalNode = useCallback(async () => {
-    try {
-      const url = `http://127.0.0.1:12391/admin/status`;
-      const response = await fetch(url, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-      const data = await response.json();
-      if (data?.isSynchronizing === false && data?.syncPercent === 100) {
-        setHasLocalNode(true);
-      }
-    } catch (error) {}
-  }, []);
+  // const checkIfUserHasLocalNode = useCallback(async () => {
+  //   try {
+  //     const url = `http://127.0.0.1:12391/admin/status`;
+  //     const response = await fetch(url, {
+  //       method: "GET",
+  //       headers: {
+  //         "Content-Type": "application/json",
+  //       },
+  //     });
+  //     const data = await response.json();
+  //     if (data?.isSynchronizing === false && data?.syncPercent === 100) {
+  //       setHasLocalNode(true);
+  //     }
+  //   } catch (error) {}
+  // }, []);
 
-  useEffect(() => {
-    checkIfUserHasLocalNode();
-  }, [extState]);
+  // useEffect(() => {
+  //   checkIfUserHasLocalNode();
+  // }, [extState]);
 
   const address = useMemo(() => {
     if (!rawWallet?.address0) return "";
@@ -1418,7 +1418,7 @@ function App() {
               }}
             />
           </Box>
-          {hasLocalNode && (
+          {!isMobile && (
             <>
               <Spacer height="15px" />
               <Box
@@ -1568,17 +1568,20 @@ function App() {
             {!isMobile && renderProfile()}
            
           </Box>
-          <Box
-            sx={{
-              position: "fixed",
-              right: "25px",
-              bottom: "25px",
-              width: "350px",
-              zIndex: 100000,
-            }}
-          >
-            <TaskManger getUserInfo={getUserInfo} />
-          </Box>
+          {!isMobile && (
+             <Box
+             sx={{
+               position: "fixed",
+               right: "25px",
+               bottom: "25px",
+               width: "350px",
+               zIndex: 100000,
+             }}
+           >
+             <TaskManger getUserInfo={getUserInfo} />
+           </Box>
+          )}
+         
         </MyContext.Provider>
       )}
       {extState === "send-qort" && isMainWindow && (
diff --git a/src/components/Chat/AnnouncementDiscussion.tsx b/src/components/Chat/AnnouncementDiscussion.tsx
index 00c7691..792695a 100644
--- a/src/components/Chat/AnnouncementDiscussion.tsx
+++ b/src/components/Chat/AnnouncementDiscussion.tsx
@@ -26,6 +26,8 @@ export const AnnouncementDiscussion = ({
 }) => {
   const [isSending, setIsSending] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [isFocusedParent, setIsFocusedParent] = useState(false);
+
   const [comments, setComments] = useState([])
   const [tempPublishedList, setTempPublishedList] = useState([])
   const firstMountRef = useRef(false)
@@ -38,6 +40,12 @@ export const AnnouncementDiscussion = ({
   const clearEditorContent = () => {
     if (editorRef.current) {
       editorRef.current.chain().focus().clearContent().run();
+      if(isMobile){
+        setTimeout(() => {
+          editorRef.current?.chain().blur().run(); 
+          setIsFocusedParent(false)
+        }, 200);
+      }
     }
   };
 
@@ -78,6 +86,7 @@ export const AnnouncementDiscussion = ({
          
             if (!response?.error) {
               res(response);
+              return
             }
             rej(response.error);
           }
@@ -281,14 +290,18 @@ export const AnnouncementDiscussion = ({
           // position: 'fixed',
           // bottom: '0px',
           backgroundColor: "#232428",
-          minHeight: "150px",
-          maxHeight: "400px",
+          minHeight: isMobile ? "0px" : "150px",
+          maxHeight: isMobile ? "auto" : "400px",
           display: "flex",
           flexDirection: "column",
           overflow: "hidden",
           width: "100%",
           boxSizing: "border-box",
-          padding: "20px",
+          padding: isMobile ? "10px":  "20px",
+          position: isFocusedParent ? 'fixed' : 'relative',
+          bottom: isFocusedParent ? '0px' : 'unset',
+          top: isFocusedParent ? '0px' : 'unset',
+          zIndex: isFocusedParent ? 5 : 'unset',
           flexShrink:0,
         }}
       >
@@ -297,6 +310,7 @@ export const AnnouncementDiscussion = ({
             display: "flex",
             flexDirection: "column",
             // height: '100%',
+            flexGrow: isMobile && 1,
             overflow: "auto",
           }}
         >
@@ -304,8 +318,19 @@ export const AnnouncementDiscussion = ({
             setEditorRef={setEditorRef}
             onEnter={publishComment}
             disableEnter
+            maxHeightOffset="60px"
+            isFocusedParent={isFocusedParent} setIsFocusedParent={setIsFocusedParent}
+            
           />
         </div>
+        <Box sx={{
+        display: 'flex',
+        width: '100&',
+        gap: '10px',
+        justifyContent: 'center',
+        flexShrink: 0,
+        position: 'relative',
+      }}>
         <CustomButton
           onClick={() => {
             if (isSending) return;
@@ -317,6 +342,8 @@ export const AnnouncementDiscussion = ({
             cursor: isSending ? "default" : "pointer",
             background: isSending && "rgba(0, 0, 0, 0.8)",
             flexShrink: 0,
+            padding: isMobile && '5px',
+            fontSize: isMobile && '14px'
           }}
         >
           {isSending && (
@@ -334,6 +361,30 @@ export const AnnouncementDiscussion = ({
           )}
           {` Publish Comment`}
         </CustomButton>
+        {isFocusedParent && (
+               <CustomButton
+               onClick={()=> {
+                 if(isSending) return
+                 setIsFocusedParent(false)
+                 clearEditorContent()
+                 // Unfocus the editor
+               }}
+               style={{
+                 marginTop: 'auto',
+                 alignSelf: 'center',
+                 cursor: isSending ? 'default' : 'pointer',
+                 background: isSending && 'rgba(0, 0, 0, 0.8)',
+                 flexShrink: 0,
+                 padding: isMobile && '5px',
+                 fontSize: isMobile && '14px',
+               }}
+             >
+               
+               {` Close`}
+             </CustomButton>
+           
+            )}
+              </Box>
       </div>
    
       <LoadingSnackbar
diff --git a/src/components/Chat/ChatDirect.tsx b/src/components/Chat/ChatDirect.tsx
index 8ab3e8c..a0fd312 100644
--- a/src/components/Chat/ChatDirect.tsx
+++ b/src/components/Chat/ChatDirect.tsx
@@ -6,7 +6,7 @@ import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
 import Tiptap from './TipTap'
 import { CustomButton } from '../../App-styles'
 import CircularProgress from '@mui/material/CircularProgress';
-import { Input } from '@mui/material';
+import { Box, Input } from '@mui/material';
 import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar';
 import { getNameInfo } from '../Group/Group';
 import { Spacer } from '../../common/Spacer';
@@ -15,6 +15,7 @@ import { getBaseApiReactSocket, isMobile, pauseAllQueues, resumeAllQueues } from
 import { getPublicKey } from '../../background';
 import { useMessageQueue } from '../../MessageQueueContext';
 import { executeEvent } from '../../utils/events';
+import zIndex from '@mui/material/styles/zIndex';
 
 
 
@@ -22,6 +23,7 @@ import { executeEvent } from '../../utils/events';
 
 export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDirect, setNewChat, getTimestampEnterChat, myName, balance}) => {
   const { queueChats, addToQueue, } = useMessageQueue();
+    const [isFocusedParent, setIsFocusedParent] = useState(false);
 
   const [messages, setMessages] = useState([])
   const [isSending, setIsSending] = useState(false)
@@ -252,6 +254,13 @@ const sendChatDirect = async ({ chatReference = undefined, messageText}: any, ad
 const clearEditorContent = () => {
   if (editorRef.current) {
     editorRef.current.chain().focus().clearContent().run();
+    if(isMobile){
+      setTimeout(() => {
+        editorRef.current?.chain().blur().run(); 
+        setIsFocusedParent(false)
+        executeEvent("sent-new-message-group", {})
+      }, 200);
+    }
   }
 };
 
@@ -293,7 +302,6 @@ const clearEditorContent = () => {
           executeEvent("sent-new-message-group", {})
         }, 150);
         clearEditorContent()
-        clearEditorContent()
         }
         // send chat message
       } catch (error) {
@@ -310,7 +318,7 @@ const clearEditorContent = () => {
       }
     }
 
-
+console.log('isFocusedParent', isFocusedParent)
     
   return (
     <div style={{
@@ -336,25 +344,37 @@ const clearEditorContent = () => {
         // position: 'fixed',
         // bottom: '0px',
         backgroundColor: "#232428",
-        minHeight: '150px',
-        maxHeight: '400px',
+        minHeight: isMobile ? '0px' : '150px',
+        maxHeight: isMobile ? 'auto' : '400px',
         display: 'flex',
         flexDirection: 'column',
         overflow: 'hidden',
         width: '100%',
         boxSizing: 'border-box',
-        padding: '20px'
+        padding: isMobile ? '10px' : '20px',
+        position: isFocusedParent ? 'fixed' : 'relative',
+        bottom: isFocusedParent ? '0px' : 'unset',
+        top: isFocusedParent ? '0px' : 'unset',
+        zIndex: isFocusedParent ? 5 : 'unset'
       }}>
       <div style={{
             display: 'flex',
             flexDirection: 'column',
-            // height: '100%',
-            overflow: 'auto'
+            flexGrow: isMobile && 1,
+            overflow: !isMobile &&  "auto",
       }}>
 
      
-      <Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} isChat />
+      <Tiptap isFocusedParent={isFocusedParent} setEditorRef={setEditorRef} onEnter={sendMessage} isChat disableEnter={isMobile ? true : false} setIsFocusedParent={setIsFocusedParent}/>
       </div>
+      <Box sx={{
+        display: 'flex',
+        width: '100&',
+        gap: '10px',
+        justifyContent: 'center',
+        flexShrink: 0,
+        position: 'relative',
+      }}>
       <CustomButton
               onClick={()=> {
                 if(isSending) return
@@ -365,7 +385,8 @@ const clearEditorContent = () => {
                 alignSelf: 'center',
                 cursor: isSending ? 'default' : 'pointer',
                 background: isSending && 'rgba(0, 0, 0, 0.8)',
-                flexShrink: 0
+                flexShrink: 0,
+                padding: isMobile && '5px'
               }}
             >
               {isSending && (
@@ -383,6 +404,29 @@ const clearEditorContent = () => {
               )}
               {` Send`}
             </CustomButton>
+            {isFocusedParent && (
+               <CustomButton
+               onClick={()=> {
+                 if(isSending) return
+                 setIsFocusedParent(false)
+                 clearEditorContent()
+                 // Unfocus the editor
+               }}
+               style={{
+                 marginTop: 'auto',
+                 alignSelf: 'center',
+                 cursor: isSending ? 'default' : 'pointer',
+                 background: isSending && 'rgba(0, 0, 0, 0.8)',
+                 flexShrink: 0,
+                 padding: isMobile && '5px'
+               }}
+             >
+               
+               {` Close`}
+             </CustomButton>
+           
+            )}
+              </Box>
       </div>
       <LoadingSnackbar open={isLoading} info={{
         message: "Loading chat... please wait."
diff --git a/src/components/Chat/ChatGroup.tsx b/src/components/Chat/ChatGroup.tsx
index 98b3d5a..ccfb2f6 100644
--- a/src/components/Chat/ChatGroup.tsx
+++ b/src/components/Chat/ChatGroup.tsx
@@ -15,6 +15,7 @@ import { CustomizedSnackbars } from '../Snackbar/Snackbar'
 import { PUBLIC_NOTIFICATION_CODE_FIRST_SECRET_KEY } from '../../constants/codes'
 import { useMessageQueue } from '../../MessageQueueContext'
 import { executeEvent } from '../../utils/events'
+import { Box } from '@mui/material'
 
 
 
@@ -28,6 +29,8 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
   const [openSnack, setOpenSnack] = React.useState(false);
   const [infoSnack, setInfoSnack] = React.useState(null);
   const hasInitialized = useRef(false)
+  const [isFocusedParent, setIsFocusedParent] = useState(false);
+
   const hasInitializedWebsocket = useRef(false)
   const socketRef = useRef(null); // WebSocket reference
   const timeoutIdRef = useRef(null); // Timeout ID reference
@@ -270,6 +273,13 @@ const sendChatGroup = async ({groupId, typeMessage = undefined, chatReference =
 const clearEditorContent = () => {
   if (editorRef.current) {
     editorRef.current.chain().focus().clearContent().run();
+    if(isMobile){
+      setTimeout(() => {
+        editorRef.current?.chain().blur().run(); 
+        setIsFocusedParent(false)
+        executeEvent("sent-new-message-group", {})
+      }, 200);
+    }
   }
 };
 
@@ -354,25 +364,37 @@ const clearEditorContent = () => {
         // position: 'fixed',
         // bottom: '0px',
         backgroundColor: "#232428",
-        minHeight: '150px',
-        maxHeight: '400px',
+        minHeight: isMobile ? '0px' : '150px',
+        maxHeight: isMobile ? 'auto' : '400px',
         display: 'flex',
         flexDirection: 'column',
         overflow: 'hidden',
         width: '100%',
         boxSizing: 'border-box',
-        padding: '20px'
+        padding: isMobile ? '10px' : '20px',
+        position: isFocusedParent ? 'fixed' : 'relative',
+        bottom: isFocusedParent ? '0px' : 'unset',
+        top: isFocusedParent ? '0px' : 'unset',
+        zIndex: isFocusedParent ? 5 : 'unset'
       }}>
       <div style={{
             display: 'flex',
             flexDirection: 'column',
-            // height: '100%',
-            overflow: 'auto'
+            flexGrow: isMobile && 1,
+            overflow: !isMobile &&  "auto",
       }}>
 
      
-      <Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} isChat />
+      <Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} isChat disableEnter={isMobile ? true : false} isFocusedParent={isFocusedParent} setIsFocusedParent={setIsFocusedParent} />
       </div>
+      <Box sx={{
+        display: 'flex',
+        width: '100&',
+        gap: '10px',
+        justifyContent: 'center',
+        flexShrink: 0,
+        position: 'relative',
+      }}>
       <CustomButton
               onClick={()=> {
                 if(isSending) return
@@ -383,7 +405,9 @@ const clearEditorContent = () => {
                 alignSelf: 'center',
                 cursor: isSending ? 'default' : 'pointer',
                 background: isSending && 'rgba(0, 0, 0, 0.8)',
-                flexShrink: 0
+                flexShrink: 0,
+                padding: isMobile && '5px',
+                
               }}
             >
               {isSending && (
@@ -401,6 +425,29 @@ const clearEditorContent = () => {
               )}
               {` Send`}
             </CustomButton>
+            {isFocusedParent && (
+               <CustomButton
+               onClick={()=> {
+                 if(isSending) return
+                 setIsFocusedParent(false)
+                 clearEditorContent()
+                 // Unfocus the editor
+               }}
+               style={{
+                 marginTop: 'auto',
+                 alignSelf: 'center',
+                 cursor: isSending ? 'default' : 'pointer',
+                 background: isSending && 'rgba(0, 0, 0, 0.8)',
+                 flexShrink: 0,
+                 padding: isMobile && '5px'
+               }}
+             >
+               
+               {` Close`}
+             </CustomButton>
+           
+            )}
+              </Box>
       {/* <button onClick={sendMessage}>send</button> */}
       </div>
       {/* <ChatContainerComp messages={formatMessages} /> */}
diff --git a/src/components/Chat/GroupAnnouncements.tsx b/src/components/Chat/GroupAnnouncements.tsx
index d592523..3b11931 100644
--- a/src/components/Chat/GroupAnnouncements.tsx
+++ b/src/components/Chat/GroupAnnouncements.tsx
@@ -51,6 +51,7 @@ export const saveTempPublish = async ({ data, key }: any) => {
       
         if (!response?.error) {
           res(response);
+          return
         }
         rej(response.error);
       }
@@ -71,6 +72,7 @@ export const getTempPublish = async () => {
       (response) => {
         if (!response?.error) {
           res(response);
+          return
         }
         rej(response.error);
       }
@@ -135,6 +137,8 @@ export const GroupAnnouncements = ({
   const [tempPublishedList, setTempPublishedList] = useState([])
   const [announcementData, setAnnouncementData] = useState({});
   const [selectedAnnouncement, setSelectedAnnouncement] = useState(null);
+  const [isFocusedParent, setIsFocusedParent] = useState(false);
+
   const { show } = React.useContext(MyContext);
   const [openSnack, setOpenSnack] = React.useState(false);
   const [infoSnack, setInfoSnack] = React.useState(null);
@@ -226,6 +230,12 @@ export const GroupAnnouncements = ({
   const clearEditorContent = () => {
     if (editorRef.current) {
       editorRef.current.chain().focus().clearContent().run();
+      if(isMobile){
+        setTimeout(() => {
+          editorRef.current?.chain().blur().run(); 
+          setIsFocusedParent(false)
+        }, 200);
+      }
     }
   };
 
@@ -500,18 +510,18 @@ export const GroupAnnouncements = ({
           width: "100%",
           display: "flex",
           justifyContent: "center",
-          padding: "25px",
-          fontSize: "20px",
+          padding: isMobile ? '8px' : "25px",
+          fontSize: isMobile ? '16px' : "20px",
           gap: '20px',
           alignItems: 'center'
         }}
       >
         <CampaignIcon sx={{
-          fontSize: '30px'
+          fontSize: isMobile ? '16px' : '30px'
         }} />
         Group Announcements
       </Box>
-      <Spacer height="25px" />
+      <Spacer height={isMobile ? "10px" : "25px"} />
 
       </div>
       {!isLoading && combinedListTempAndReal?.length === 0 && (
@@ -541,31 +551,46 @@ export const GroupAnnouncements = ({
      // position: 'fixed',
      // bottom: '0px',
      backgroundColor: "#232428",
-     minHeight: "150px",
-     maxHeight: "400px",
+     minHeight: isMobile ? "0px" : "150px",
+     maxHeight: isMobile ? "auto" : "400px",
      display: "flex",
      flexDirection: "column",
      overflow: "hidden",
      width: "100%",
      boxSizing: "border-box",
-     padding: "20px",
-     flexShrink: 0
+     padding: isMobile ? "10px":  "20px",
+     position: isFocusedParent ? 'fixed' : 'relative',
+        bottom: isFocusedParent ? '0px' : 'unset',
+        top: isFocusedParent ? '0px' : 'unset',
+        zIndex: isFocusedParent ? 5 : 'unset',
+        flexShrink: 0
    }}
  >
    <div
      style={{
        display: "flex",
        flexDirection: "column",
+       flexGrow: isMobile && 1,
+       overflow:  "auto",
        // height: '100%',
-       overflow: "auto",
-     }}
+      }}
    >
      <Tiptap
        setEditorRef={setEditorRef}
        onEnter={publishAnnouncement}
        disableEnter
+       maxHeightOffset="40px"
+       isFocusedParent={isFocusedParent} setIsFocusedParent={setIsFocusedParent}
      />
    </div>
+   <Box sx={{
+        display: 'flex',
+        width: '100&',
+        gap: '10px',
+        justifyContent: 'center',
+        flexShrink: 0,
+        position: 'relative',
+      }}>
    <CustomButton
      onClick={() => {
        if (isSending) return;
@@ -577,6 +602,9 @@ export const GroupAnnouncements = ({
        cursor: isSending ? "default" : "pointer",
        background: isSending && "rgba(0, 0, 0, 0.8)",
        flexShrink: 0,
+      padding: isMobile && '5px',
+      fontSize: isMobile && '14px',
+
      }}
    >
      {isSending && (
@@ -594,6 +622,30 @@ export const GroupAnnouncements = ({
      )}
      {` Publish Announcement`}
    </CustomButton>
+   {isFocusedParent && (
+               <CustomButton
+               onClick={()=> {
+                 if(isSending) return
+                 setIsFocusedParent(false)
+                 clearEditorContent()
+                 // Unfocus the editor
+               }}
+               style={{
+                 marginTop: 'auto',
+                 alignSelf: 'center',
+                 cursor: isSending ? 'default' : 'pointer',
+                 background: isSending && 'rgba(0, 0, 0, 0.8)',
+                 flexShrink: 0,
+                 padding: isMobile && '5px',
+                 fontSize: isMobile && '14px',
+               }}
+             >
+               
+               {` Close`}
+             </CustomButton>
+           
+            )}
+              </Box>
  </div>
 )}
 
diff --git a/src/components/Chat/TipTap.tsx b/src/components/Chat/TipTap.tsx
index 4bdf3c6..be6abff 100644
--- a/src/components/Chat/TipTap.tsx
+++ b/src/components/Chat/TipTap.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { EditorProvider, useCurrentEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { Color } from '@tiptap/extension-color';
@@ -25,6 +25,7 @@ import CustomImage from './CustomImage';
 import Compressor from 'compressorjs'
 
 import ImageResize from 'tiptap-extension-resize-image'; // Import the ResizeImage extension
+import { isMobile } from '../../App';
 const MenuBar = ({ setEditorRef, isChat }) => {
   const { editor } = useCurrentEditor();
   const fileInputRef = useRef(null); 
@@ -88,10 +89,11 @@ const MenuBar = ({ setEditorRef, isChat }) => {
           }
           // color={editor.isActive('bold') ? 'white' : 'gray'}
           sx={{
-            color: editor.isActive('bold') ? 'white' : 'gray'
+            color: editor.isActive('bold') ? 'white' : 'gray',
+            padding: isMobile ? '5px' : 'revert'
           }}
         >
-          <FormatBoldIcon />
+          <FormatBoldIcon  />
         </IconButton>
         <IconButton
           onClick={() => editor.chain().focus().toggleItalic().run()}
@@ -104,7 +106,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
           }
           // color={editor.isActive('italic') ? 'white' : 'gray'}
           sx={{
-            color: editor.isActive('italic') ? 'white' : 'gray'
+            color: editor.isActive('italic') ? 'white' : 'gray',
+            padding: isMobile ? '5px' : 'revert'
           }}
         >
           <FormatItalicIcon />
@@ -120,7 +123,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
           }
           // color={editor.isActive('strike') ? 'white' : 'gray'}
           sx={{
-            color: editor.isActive('strike') ? 'white' : 'gray'
+            color: editor.isActive('strike') ? 'white' : 'gray',
+            padding: isMobile ? '5px' : 'revert'
           }}
         >
           <StrikethroughSIcon />
@@ -136,19 +140,23 @@ const MenuBar = ({ setEditorRef, isChat }) => {
           }
           // color={editor.isActive('code') ? 'white' : 'gray'}
           sx={{
-            color: editor.isActive('code') ? 'white' : 'gray'
+            color: editor.isActive('code') ? 'white' : 'gray',
+            padding: isMobile ? '5px' : 'revert'
           }}
         >
           <CodeIcon />
         </IconButton>
-        <IconButton onClick={() => editor.chain().focus().unsetAllMarks().run()}>
+        <IconButton sx={{
+          padding: isMobile ? '5px' : 'revert'
+        }} onClick={() => editor.chain().focus().unsetAllMarks().run()}>
           <FormatClearIcon />
         </IconButton>
         <IconButton
           onClick={() => editor.chain().focus().toggleBulletList().run()}
           // color={editor.isActive('bulletList') ? 'white' : 'gray'}
           sx={{
-            color: editor.isActive('bulletList') ? 'white' : 'gray'
+            color: editor.isActive('bulletList') ? 'white' : 'gray',
+            padding: isMobile ? '5px' : 'revert'
           }}
         >
           <FormatListBulletedIcon />
@@ -157,7 +165,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
           onClick={() => editor.chain().focus().toggleOrderedList().run()}
           // color={editor.isActive('orderedList') ? 'white' : 'gray'}
           sx={{
-            color: editor.isActive('orderedList') ? 'white' : 'gray'
+            color: editor.isActive('orderedList') ? 'white' : 'gray',
+            padding: isMobile ? '5px' : 'revert'
           }}
         >
           <FormatListNumberedIcon />
@@ -166,7 +175,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
           onClick={() => editor.chain().focus().toggleCodeBlock().run()}
           // color={editor.isActive('codeBlock') ? 'white' : 'gray'}
           sx={{
-            color: editor.isActive('codeBlock') ? 'white' : 'gray'
+            color: editor.isActive('codeBlock') ? 'white' : 'gray',
+            padding: isMobile ? '5px' : 'revert'
           }}
         >
           <DeveloperModeIcon />
@@ -175,7 +185,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
           onClick={() => editor.chain().focus().toggleBlockquote().run()}
           // color={editor.isActive('blockquote') ? 'white' : 'gray'}
           sx={{
-            color: editor.isActive('blockquote') ? 'white' : 'gray'
+            color: editor.isActive('blockquote') ? 'white' : 'gray',
+            padding: isMobile ? '5px' : 'revert'
           }}
         >
           <FormatQuoteIcon />
@@ -187,7 +198,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
           onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
           // color={editor.isActive('heading', { level: 1 }) ? 'white' : 'gray'}
           sx={{
-            color: editor.isActive('heading', { level: 1 }) ? 'white' : 'gray'
+            color: editor.isActive('heading', { level: 1 }) ? 'white' : 'gray',
+            padding: isMobile ? '5px' : 'revert'
           }}
         >
           <FormatHeadingIcon fontSize="small" />
@@ -202,7 +214,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
               .run()
           }
           sx={{
-            color: 'gray'
+            color: 'gray',
+            padding: isMobile ? '5px' : 'revert'
           }}
         >
           <UndoIcon />
@@ -227,7 +240,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
            <IconButton
           onClick={triggerImageUpload}
           sx={{
-            color: 'gray'
+            color: 'gray',
+            padding: isMobile ? '5px' : 'revert'
           }}
         >
           <ImageIcon />
@@ -268,32 +282,66 @@ const extensions = [
 
 const content = ``;
 
-export default ({ setEditorRef, onEnter, disableEnter, isChat }) => {
-  
+export default ({ setEditorRef, onEnter, disableEnter, isChat, maxHeightOffset,  setIsFocusedParent, isFocusedParent, overrideMobile, customEditorHeight }) => {
+  const [isFocused, setIsFocused] = useState(false);
   const extensionsFiltered = isChat ? extensions.filter((item)=> item?.name !== 'image') :  extensions
+  const editorRef = useRef(null);
+  const setEditorRefFunc = (editorInstance) => {
+    editorRef.current = editorInstance;
+    setEditorRef(editorInstance)
+  };
+  const handleFocus = () => {
+    if(!isMobile) return
+    // setIsFocused(true);
+    setIsFocusedParent(true)
+  };
+
+  const handleBlur = () => {
+    const htmlContent = editorRef.current.getHTML();
+      
+        if (!htmlContent?.trim() || htmlContent?.trim() === "<p></p>"){
+          // setIsFocused(false);
+          // setIsFocusedParent(false)
+        };
+    
+  };
+  // useEffect(()=> {
+  //   setIsFocused(isFocusedParent)
+  // },[isFocusedParent])
+
   return (
     <EditorProvider
-      slotBefore={<MenuBar setEditorRef={setEditorRef} isChat={isChat} />}
-      extensions={extensionsFiltered}
-      content={content}
-      editorProps={{
-        handleKeyDown(view, event) {
-          if (!disableEnter && event.key === 'Enter') {
-            if (event.shiftKey) {
-              // Shift+Enter: Insert a hard break
-              view.dispatch(view.state.tr.replaceSelectionWith(view.state.schema.nodes.hardBreak.create()));
-              return true;
-            } else {
-              // Enter: Call the callback function
-              if (typeof onEnter === 'function') {
-                onEnter();
-              }
-              return true; // Prevent the default action of adding a new line
+    slotBefore={(isFocusedParent || !isMobile || overrideMobile) && <MenuBar setEditorRef={setEditorRefFunc} isChat={isChat} />}
+    extensions={extensionsFiltered}
+    content={content}
+    onCreate={({ editor }) => {
+      editor.on('focus', handleFocus);   // Listen for focus event
+      editor.on('blur', handleBlur);     // Listen for blur event
+    }}
+    onUpdate={({ editor }) => {
+      editor.on('focus', handleFocus);   // Ensure focus is updated
+      editor.on('blur', handleBlur);     // Ensure blur is updated
+    }}
+    editorProps={{
+      attributes: {
+        class: 'tiptap-prosemirror',
+        style: isMobile && `overflow: auto; min-height: ${customEditorHeight ? '200px' : '0px'}; 200px; max-height:calc(100svh - ${ customEditorHeight ? customEditorHeight : '140px'})`,
+      },
+      handleKeyDown(view, event) {
+        if (!disableEnter && event.key === 'Enter') {
+          if (event.shiftKey) {
+            view.dispatch(view.state.tr.replaceSelectionWith(view.state.schema.nodes.hardBreak.create()));
+            return true;
+          } else {
+            if (typeof onEnter === 'function') {
+              onEnter();
             }
+            return true;
           }
-          return false; // Allow default handling for other keys
-        },
-      }}
-    />
-  );
+        }
+        return false;
+      },
+    }}
+  />
+  )
 };
diff --git a/src/components/Chat/styles.css b/src/components/Chat/styles.css
index f7b28ea..8766c40 100644
--- a/src/components/Chat/styles.css
+++ b/src/components/Chat/styles.css
@@ -118,4 +118,5 @@
 .tiptap img {
   display: block;
   max-width: 100%; 
-}
\ No newline at end of file
+}
+
diff --git a/src/components/Group/AddGroup.tsx b/src/components/Group/AddGroup.tsx
index ed27d35..288e6f3 100644
--- a/src/components/Group/AddGroup.tsx
+++ b/src/components/Group/AddGroup.tsx
@@ -29,7 +29,7 @@ import { AddGroupList } from "./AddGroupList";
 import { UserListOfInvites } from "./UserListOfInvites";
 import { CustomizedSnackbars } from "../Snackbar/Snackbar";
 import { getFee } from "../../background";
-import { MyContext } from "../../App";
+import { MyContext, isMobile } from "../../App";
 import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events";
 
 export const Label = styled("label")(
@@ -220,44 +220,50 @@ export const AddGroup = ({ address, open, setOpen }) => {
           }}
         >
           <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-            <Tabs
-              sx={{
-                "& .MuiTabs-indicator": {
-                  backgroundColor: "white",
-                },
-              }}
-              value={value}
-              onChange={handleChange}
-              aria-label="basic tabs example"
-            >
-              <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="Create Group"
-                {...a11yProps(0)}
-              />
-              <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="Find Group"
-                {...a11yProps(1)}
-              />
-              <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="Group Invites"
-                {...a11yProps(2)}
-              />
-            </Tabs>
+          <Tabs
+      value={value}
+      onChange={handleChange}
+      aria-label="basic tabs example"
+      variant={isMobile ? 'scrollable' : 'fullWidth'} // Scrollable on mobile, full width on desktop
+      scrollButtons="auto"
+      allowScrollButtonsMobile
+      sx={{
+        "& .MuiTabs-indicator": {
+          backgroundColor: "white",
+        },
+      }}
+    >
+      <Tab
+        label="Create Group"
+        {...a11yProps(0)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
+        }}
+      />
+      <Tab
+        label="Find Group"
+        {...a11yProps(1)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
+        }}
+      />
+      <Tab
+        label="Group Invites"
+        {...a11yProps(2)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
+        }}
+      />
+    </Tabs>
           </Box>
           
           {value === 0 && (
diff --git a/src/components/Group/AddGroupList.tsx b/src/components/Group/AddGroupList.tsx
index 2eb9495..4f459e0 100644
--- a/src/components/Group/AddGroupList.tsx
+++ b/src/components/Group/AddGroupList.tsx
@@ -247,7 +247,7 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
         style={{
           position: "relative",
           height: "500px",
-          width: "600px",
+          width: "100%",
           display: "flex",
           flexDirection: "column",
           flexShrink: 1,
diff --git a/src/components/Group/Forum/NewThread.tsx b/src/components/Group/Forum/NewThread.tsx
index a716823..ff1626d 100644
--- a/src/components/Group/Forum/NewThread.tsx
+++ b/src/components/Group/Forum/NewThread.tsx
@@ -30,7 +30,7 @@ import { formatBytes } from "../../../utils/Size";
 import { CreateThreadIcon } from "../../../assets/svgs/CreateThreadIcon";
 import { SendNewMessage } from "../../../assets/svgs/SendNewMessage";
 import { TextEditor } from "./TextEditor";
-import { MyContext, pauseAllQueues, resumeAllQueues } from "../../../App";
+import { MyContext, isMobile, pauseAllQueues, resumeAllQueues } from "../../../App";
 import { getFee } from "../../../background";
 import TipTap from "../../Chat/TipTap";
 import { MessageDisplay } from "../../Chat/MessageDisplay";
@@ -410,7 +410,7 @@ export const NewThread = ({
       <ReusableModal
         open={isOpen}
         customStyles={{
-          maxHeight: "95vh",
+          maxHeight: isMobile ? '95svh' : "95vh",
           maxWidth: "950px",
           height: "700px",
           borderRadius: "12px 12px 0px 0px",
@@ -421,25 +421,27 @@ export const NewThread = ({
       >
         <InstanceListHeader
           sx={{
-            height: "50px",
-            padding: "20px 42px",
+            height: isMobile ? 'auto' : "50px",
+            padding: isMobile ? '5px' : "20px 42px",
             flexDirection: "row",
+            alignItems: 'center',
             justifyContent: "space-between",
-            alignItems: "center",
             backgroundColor: "#434448",
           }}
         >
           <NewMessageHeaderP>
             {isMessage ? "Post Message" : "New Thread"}
           </NewMessageHeaderP>
-          <CloseContainer onClick={closeModal}>
+          <CloseContainer sx={{
+            height: '40px'
+          }} onClick={closeModal}>
             <NewMessageCloseImg src={ModalCloseSVG} />
           </CloseContainer>
         </InstanceListHeader>
         <InstanceListContainer
           sx={{
             backgroundColor: "#434448",
-            padding: "20px 42px",
+            padding: isMobile ? '5px' : "20px 42px",
             height: "calc(100% - 150px)",
             flexShrink: 0,
           }}
@@ -463,7 +465,7 @@ export const NewThread = ({
                     color: "white",
                     "& .MuiInput-input::placeholder": {
                       color: "rgba(255,255,255, 0.70) !important",
-                      fontSize: "20px",
+                      fontSize: isMobile ? '14px' : "20px",
                       fontStyle: "normal",
                       fontWeight: 400,
                       lineHeight: "120%", // 24px
@@ -491,7 +493,10 @@ export const NewThread = ({
               <MessageDisplay htmlContent={postReply?.textContentV2} />
             </Box>
           )}
-          <Spacer height="30px" />
+          {!isMobile && (
+                      <Spacer height="30px" />
+
+          )}
           <Box
             sx={{
               maxHeight: "40vh",
@@ -501,6 +506,8 @@ export const NewThread = ({
               setEditorRef={setEditorRef}
               onEnter={sendMail}
               disableEnter
+              overrideMobile
+              customEditorHeight="240px"
             />
             {/* <TextEditor
               inlineContent={value}
@@ -513,9 +520,9 @@ export const NewThread = ({
         <InstanceFooter
           sx={{
             backgroundColor: "#434448",
-            padding: "20px 42px",
+            padding: isMobile ? '5px' :  "20px 42px",
             alignItems: "center",
-            height: "90px",
+            height: isMobile ? 'auto' :  "90px",
           }}
         >
           <NewMessageSendButton onClick={sendMail}>
diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx
index 6e6a14a..642119d 100644
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@@ -522,6 +522,36 @@ export const Group = ({
     return hasUnread;
   }, [timestampEnterData, directs, myAddress]);
 
+  const groupChatHasUnread = useMemo(() => {
+    let hasUnread = false;
+    groups.forEach((group) => {
+      if (
+        group?.data && isExtMsg(group?.data) &&  group?.sender !== myAddress &&
+        group?.timestamp &&
+        ((!timestampEnterData[group?.groupId] &&
+          Date.now() - group?.timestamp <
+            timeDifferenceForNotificationChats) ||
+          timestampEnterData[group?.groupId] < group?.timestamp)
+      ) {
+        hasUnread = true;
+      }
+    });
+    return hasUnread;
+  }, [timestampEnterData, groups, myAddress]);
+
+  const groupsAnnHasUnread = useMemo(() => {
+    let hasUnread = false;
+    groups.forEach((group) => {
+      if (
+        groupAnnouncements[group?.groupId] &&
+                  !groupAnnouncements[group?.groupId]?.seentimestamp
+      ) {
+        hasUnread = true;
+      }
+    });
+    return hasUnread;
+  }, [groupAnnouncements, groups]);
+
   // useEffect(() => {
   //   if (!myAddress) return;
   //   checkGroupListFunc(myAddress);
@@ -1660,6 +1690,7 @@ export const Group = ({
               setNewChat(true);
               setSelectedDirect(null);
               setSelectedGroup(null);
+              setIsOpenDrawer(false)
             }}
           >
             <CreateIcon
@@ -2205,7 +2236,11 @@ export const Group = ({
            size="small"
            variant="contained"
            startIcon={<AnnouncementsIcon />}
-           sx={{ padding: '4px 6px' }} // Make padding smaller
+           sx={{ padding: '4px 6px', 
+           color: groupSection === 'announcement'  ? 'black' : 'white',
+           backgroundColor: isUnread
+           ? "red" : groupSection === 'announcement'  ? 'white' : 'black',
+           }} 
            onClick={goToAnnouncements}
          >
            ANN
@@ -2217,7 +2252,10 @@ export const Group = ({
            size="small"
            variant="contained"
            startIcon={<ChatIcon />}
-           sx={{ padding: '4px 6px' }}
+           sx={{ padding: '4px 6px',  color: groupSection === 'chat'  ? 'black' : 'white',
+           backgroundColor: isUnreadChat
+           ? "red"
+           : groupSection === 'chat'  ? 'white' : 'black', }}
            onClick={goToChat}
          >
            Chat
@@ -2229,7 +2267,8 @@ export const Group = ({
            size="small"
            variant="contained"
            startIcon={<ForumIcon />}
-           sx={{ padding: '4px 6px' }}
+           sx={{ padding: '4px 6px',  color: groupSection === 'forum'  ? 'black' : 'white',
+           backgroundColor: groupSection === 'forum'  ? 'white' : 'black', }}
            onClick={() => setGroupSection("forum")}
          >
            Forum
@@ -2241,7 +2280,7 @@ export const Group = ({
            size="small"
            variant="contained"
            startIcon={<GroupIcon />}
-           sx={{ padding: '4px 6px' }}
+           sx={{ padding: '4px 6px', backgroundColor: 'black' }}
            onClick={() => setOpenManageMembers(true)}
          >
            Members
@@ -2257,7 +2296,7 @@ export const Group = ({
           size="small"
           variant="contained"
           startIcon={<GroupIcon />}
-          sx={{ padding: '2px 4px' }}
+          sx={{ padding: '2px 4px', backgroundColor: groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread ? "red" : 'black'  }}
           onClick={() => {
             setIsOpenDrawer(true);
             setDrawerMode("groups");
diff --git a/src/components/Group/ListOfBans.tsx b/src/components/Group/ListOfBans.tsx
index b25d21e..41ef9f4 100644
--- a/src/components/Group/ListOfBans.tsx
+++ b/src/components/Group/ListOfBans.tsx
@@ -168,7 +168,7 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
   return (
     <div>
       <p>Ban list</p>
-      <div style={{ position: 'relative', height: '500px', width: '600px', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
+      <div style={{ position: 'relative', height: '500px', width: '100%', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
         <AutoSizer>
           {({ height, width }) => (
             <List
diff --git a/src/components/Group/ListOfInvites.tsx b/src/components/Group/ListOfInvites.tsx
index ff6359e..9bdf124 100644
--- a/src/components/Group/ListOfInvites.tsx
+++ b/src/components/Group/ListOfInvites.tsx
@@ -169,7 +169,7 @@ export const ListOfInvites = ({ groupId, setInfoSnack, setOpenSnack, show }) =>
   return (
     <div>
       <p>Invitees list</p>
-      <div style={{ position: 'relative', height: '500px', width: '600px', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
+      <div style={{ position: 'relative', height: '500px', width: '100%', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
         <AutoSizer>
           {({ height, width }) => (
             <List
diff --git a/src/components/Group/ListOfJoinRequests.tsx b/src/components/Group/ListOfJoinRequests.tsx
index cb47ab9..52393a0 100644
--- a/src/components/Group/ListOfJoinRequests.tsx
+++ b/src/components/Group/ListOfJoinRequests.tsx
@@ -169,7 +169,7 @@ export const ListOfJoinRequests = ({ groupId, setInfoSnack, setOpenSnack, show }
   return (
     <div>
       <p>Join request list</p>
-      <div style={{ position: 'relative', height: '500px', width: '600px', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
+      <div style={{ position: 'relative', height: '500px', width: '100%', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
         <AutoSizer>
           {({ height, width }) => (
             <List
diff --git a/src/components/Group/ListOfMembers.tsx b/src/components/Group/ListOfMembers.tsx
index 6a81cf0..54950f6 100644
--- a/src/components/Group/ListOfMembers.tsx
+++ b/src/components/Group/ListOfMembers.tsx
@@ -357,7 +357,7 @@ const ListOfMembers = ({
         style={{
           position: "relative",
           height: "500px",
-          width: "600px",
+          width: "100%",
           display: "flex",
           flexDirection: "column",
           flexShrink: 1,
diff --git a/src/components/Group/ManageMembers.tsx b/src/components/Group/ManageMembers.tsx
index 57e5712..078cecc 100644
--- a/src/components/Group/ManageMembers.tsx
+++ b/src/components/Group/ManageMembers.tsx
@@ -19,7 +19,7 @@ import { ListOfBans } from "./ListOfBans";
 import { ListOfJoinRequests } from "./ListOfJoinRequests";
 import { Box, Tab, Tabs } from "@mui/material";
 import { CustomizedSnackbars } from "../Snackbar/Snackbar";
-import { MyContext } from "../../App";
+import { MyContext, isMobile } from "../../App";
 import { getGroupMembers, getNames } from "./Group";
 import { LoadingSnackbar } from "../Snackbar/LoadingSnackbar";
 import { getFee } from "../../background";
@@ -173,63 +173,72 @@ export const ManageMembers = ({
           }}
         >
           <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-            <Tabs
-              sx={{
-                "& .MuiTabs-indicator": {
-                  backgroundColor: "white",
-                },
-              }}
-              value={value}
-              onChange={handleChange}
-              aria-label="basic tabs example"
-            >
-              <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="List of members"
-                {...a11yProps(0)}
-              />
-               <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="Invite new member"
-                {...a11yProps(1)}
-              />
-              <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="List of invites"
-                {...a11yProps(2)}
-              />
-              <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="List of bans"
-                {...a11yProps(3)}
-              />
-             
-              <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="Join requests"
-                {...a11yProps(4)}
-              />
-            </Tabs>
+          <Tabs
+      value={value}
+      onChange={handleChange}
+      aria-label="basic tabs example"
+      variant="scrollable"  // Make tabs scrollable
+      scrollButtons="auto"  // Show scroll buttons automatically
+      allowScrollButtonsMobile  // Show scroll buttons on mobile as well
+      sx={{
+        "& .MuiTabs-indicator": {
+          backgroundColor: "white",
+        },
+        maxWidth: '100%',  // Ensure the tabs container fits within the available space
+        overflow: 'hidden', // Prevents overflow on small screens
+      }}
+    >
+      <Tab
+        label="List of members"
+        {...a11yProps(0)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
+        }}
+      />
+      <Tab
+        label="Invite new member"
+        {...a11yProps(1)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem',
+        }}
+      />
+      <Tab
+        label="List of invites"
+        {...a11yProps(2)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem',
+        }}
+      />
+      <Tab
+        label="List of bans"
+        {...a11yProps(3)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem',
+        }}
+      />
+      <Tab
+        label="Join requests"
+        {...a11yProps(4)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem',
+        }}
+      />
+    </Tabs>
           </Box>
 
           {selectedGroup?.groupId && !isOwner &&  (
diff --git a/src/components/Group/UserListOfInvites.tsx b/src/components/Group/UserListOfInvites.tsx
index 98f37f1..20aa6fb 100644
--- a/src/components/Group/UserListOfInvites.tsx
+++ b/src/components/Group/UserListOfInvites.tsx
@@ -186,7 +186,7 @@ export const UserListOfInvites = ({myAddress, setInfoSnack, setOpenSnack}) => {
     return (
       <div>
         <p>Invite list</p>
-        <div style={{ position: 'relative', height: '500px', width: '600px', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
+        <div style={{ position: 'relative', height: '500px', width: '100%', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
           <AutoSizer>
             {({ height, width }) => (
               <List