diff --git a/src/components/@shared/Orbis/DirectMessages/Conversation.module.css b/src/components/@shared/Orbis/DirectMessages/Conversation.module.css
index 226a827f0..5ca69620c 100644
--- a/src/components/@shared/Orbis/DirectMessages/Conversation.module.css
+++ b/src/components/@shared/Orbis/DirectMessages/Conversation.module.css
@@ -1,8 +1,12 @@
 .conversation {
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 0;
   height: 100%;
+  width: 100%;
   display: flex;
   flex-direction: column;
+  background-color: var(--background-content);
 }
 
 .loading {
diff --git a/src/components/@shared/Orbis/DirectMessages/index.module.css b/src/components/@shared/Orbis/DirectMessages/index.module.css
index d59419b6c..270d21a33 100644
--- a/src/components/@shared/Orbis/DirectMessages/index.module.css
+++ b/src/components/@shared/Orbis/DirectMessages/index.module.css
@@ -38,6 +38,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  position: relative;
 }
 
 .walletWrapper {
diff --git a/src/components/@shared/Orbis/DirectMessages/index.tsx b/src/components/@shared/Orbis/DirectMessages/index.tsx
index 856402562..a13bdf8ef 100644
--- a/src/components/@shared/Orbis/DirectMessages/index.tsx
+++ b/src/components/@shared/Orbis/DirectMessages/index.tsx
@@ -74,11 +74,12 @@ const BodyContent = () => {
     )
   }
 
-  if (conversationId) {
-    return <Conversation />
-  }
-
-  return <List />
+  return (
+    <>
+      <List />
+      {conversationId && <Conversation />}
+    </>
+  )
 }
 
 export default function DirectMessages() {