diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index 39dd465e2..0cc9bc28b 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -417,6 +417,8 @@ export default {
         })
         .then(({ data: { CreateRoom } }) => {
           this.fetchRooms({ room: CreateRoom, options: { refetch: true } })
+          this.roomId = CreateRoom.id
+          this.$emit('show-chat', CreateRoom.id)
         })
         .catch((error) => {
           this.$toast.error(error.message)
diff --git a/webapp/graphql/Rooms.js b/webapp/graphql/Rooms.js
index 757a6cfa4..3433a84a7 100644
--- a/webapp/graphql/Rooms.js
+++ b/webapp/graphql/Rooms.js
@@ -5,6 +5,18 @@ export const createRoom = () => gql`
     CreateRoom(userId: $userId) {
       id
       roomId
+      roomName
+      lastMessageAt
+      unreadCount
+      #avatar
+      users {
+        _id
+        id
+        name
+        avatar {
+          url
+        }
+      }
     }
   }
 `
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat.vue
index acb186f4e..96df8cc6b 100644
--- a/webapp/pages/chat.vue
+++ b/webapp/pages/chat.vue
@@ -12,6 +12,7 @@
       :roomId="getShowChat.showChat ? getShowChat.roomID : null"
       ref="chat"
       @toggle-user-search="showUserSearch = !showUserSearch"
+      :show-room="showRoom"
     />
   </div>
 </template>
@@ -47,6 +48,9 @@ export default {
     addChatRoom(userID) {
       this.$refs.chat.newRoom(userID)
     },
+    showRoom(roomId) {
+      this.showChat({ showChat: true, roomID: roomId })
+    }
   },
 }
 </script>