diff --git a/client/src/pages/messenger.jsx b/client/src/pages/messenger.jsx
index 3833956..48edb5d 100644
--- a/client/src/pages/messenger.jsx
+++ b/client/src/pages/messenger.jsx
@@ -11,6 +11,7 @@
 import AddContactPage from './addContactPage.jsx';
 import LoadingPage from '../components/loading';
 import { useParams } from 'react-router';
+import { Stack } from '@mui/material';
 
 const Messenger = (props) => {
   const [conversations, setConversations] = useState(undefined)
@@ -57,15 +58,30 @@
 
   console.log("Messenger render")
   return (
-    <div className="app" >
-      <Header />
-      <NewContactForm onChange={setSearchQuery} />
-      {conversations ?
-        <ConversationList search={searchResult} conversations={conversations} accountId={accountId} /> :
-        <div className="rooms-list"><LoadingPage /></div>}
-      {conversationId && <ConversationView accountId={accountId} conversationId={conversationId} />}
-      {contactId && <AddContactPage accountId={accountId} contactId={contactId} />}
-    </div>
+    <Stack
+      direction="row"
+      height="100vh"
+      width="100vw"
+    >
+      <Stack
+        flexGrow={0}
+        flexShrink={0}
+        overflow="auto"
+      >
+        <Header />
+        <NewContactForm onChange={setSearchQuery} />
+        {contactId && <AddContactPage accountId={accountId} contactId={contactId} />}
+        {conversations ?
+          <ConversationList search={searchResult} conversations={conversations} accountId={accountId} /> :
+          <div className="rooms-list"><LoadingPage /></div>
+        }
+      </Stack>
+      <Stack
+        flexGrow={1}
+      >
+        {conversationId && <ConversationView accountId={accountId} conversationId={conversationId} />}
+      </Stack>
+    </Stack>
   )
 }