diff --git a/backend/src/schema/resolvers/rooms.ts b/backend/src/schema/resolvers/rooms.ts
index 2fe621d23..02309e172 100644
--- a/backend/src/schema/resolvers/rooms.ts
+++ b/backend/src/schema/resolvers/rooms.ts
@@ -12,7 +12,11 @@ export default {
       if (resolved) {
         resolved.forEach((room) => {
           if (room.users) {
+            // buggy, you must query the username for this to function correctly
             room.roomName = room.users.filter((user) => user.id !== context.user.id)[0].name
+            room.avatar =
+              room.users.filter((user) => user.id !== context.user.id)[0].avatar?.url ||
+              'default-avatar'
             room.users.forEach((user) => {
               user._id = user.id
             })
diff --git a/backend/src/schema/types/type/Room.gql b/backend/src/schema/types/type/Room.gql
index c90ebda3a..2ce6556f6 100644
--- a/backend/src/schema/types/type/Room.gql
+++ b/backend/src/schema/types/type/Room.gql
@@ -14,6 +14,7 @@ type Room {
 
   roomId: String! @cypher(statement: "RETURN this.id")
   roomName: String! ## @cypher(statement: "MATCH (this)<-[:CHATS_IN]-(user:User) WHERE NOT user.id = $cypherParams.currentUserId RETURN user[0].name")
+  avatar: String! ## @cypher match not own user in users array
 }
 
 type Mutation {
diff --git a/package.json b/package.json
index 5a116bd13..9f8399db7 100644
--- a/package.json
+++ b/package.json
@@ -27,12 +27,12 @@
     "@babel/register": "^7.12.10",
     "@badeball/cypress-cucumber-preprocessor": "^15.1.4",
     "@cypress/browserify-preprocessor": "^3.0.2",
-    "@faker-js/faker": "7.6.0",
+    "@faker-js/faker": "8.0.2",
     "auto-changelog": "^2.3.0",
     "bcryptjs": "^2.4.3",
     "cross-env": "^7.0.3",
     "cucumber": "^6.0.5",
-    "cypress": "^12.14.0",
+    "cypress": "^12.17.0",
     "cypress-file-upload": "^3.5.3",
     "cypress-network-idle": "^1.14.2",
     "date-fns": "^2.25.0",
diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index c2b02c0af..2b9514bf3 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -3,7 +3,7 @@
     <client-only>
       <vue-advanced-chat
         :theme="theme"
-        :current-user-id="currentUserId"
+        :current-user-id="currentUser.id"
         :room-id="null"
         :template-actions="JSON.stringify(templatesText)"
         :menu-actions="JSON.stringify(menuActions)"
@@ -27,8 +27,9 @@
 </template>
 
 <script>
-// import { roomQuery } from '~/graphql/Rooms'
-import { messageQuery } from '~/graphql/Messages'
+import { roomQuery, createRoom } from '~/graphql/Rooms'
+import { messageQuery, createMessageMutation } from '~/graphql/Messages'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'Chat',
@@ -36,16 +37,15 @@ export default {
     theme: {
       type: String,
     },
-    singleRoom: {
-      type: Boolean,
-      default: false,
+    singleRoomId: {
+      type: String,
+      default: null,
     },
   },
   data() {
     return {
-      currentUserId: '1234',
       menuActions: [
-        {
+        /* {
           name: 'inviteUser',
           title: 'Invite User',
         },
@@ -56,7 +56,7 @@ export default {
         {
           name: 'deleteRoom',
           title: 'Delete Room',
-        },
+        }, */
       ],
       messageActions: [
         {
@@ -93,6 +93,7 @@ export default {
         CANCEL_SELECT_MESSAGE: 'Annuler Sélection',
       },
       roomActions: [
+        /*
         {
           name: 'archiveRoom',
           title: 'Archive Room',
@@ -100,138 +101,116 @@ export default {
         { name: 'inviteUser', title: 'Invite User' },
         { name: 'removeUser', title: 'Remove User' },
         { name: 'deleteRoom', title: 'Delete Room' },
+        */
       ],
-      rooms: [
-        {
-          roomId: '1',
-          roomName: 'John Snow',
-          avatar: 'https://66.media.tumblr.com/avatar_c6a8eae4303e_512.pnj',
-          users: [
-            { _id: '1234', username: 'John Doe' },
-            { _id: '4321', username: 'John Snow' },
-          ],
-        },
-        {
-          roomId: '2',
-          roomName: 'Max J. Mustermann',
-          avatar:
-            'https://64.media.tumblr.com/8889b6e26370f4e3837584c1c59721a6/f4f76ed6b0249d08-4b/s1280x1920/810e9e5fa724366d26c10c0fa22ba97dad8778d1.pnj',
-          users: [
-            { _id: '1234', username: 'Johnx Doe' },
-            { _id: '43210', username: 'Max J. Mustermann' },
-          ],
-        },
-      ],
+      rooms: [],
       messages: [],
       messagesLoaded: true,
       showDemoOptions: true,
       responsiveBreakpoint: 600,
+      singleRoom: !!this.singleRoomId || false,
     }
   },
-
+  mounted() {
+    if (this.singleRoom) {
+      this.$apollo
+        .mutate({
+          mutation: createRoom(),
+          variables: {
+            userId: this.singleRoomId,
+          },
+        })
+        .then(() => {
+          this.$apollo.queries.Rooms.refetch()
+        })
+        .catch((error) => {
+          this.$toast.error(error)
+        })
+        .finally(() => {
+          // this.loading = false
+        })
+    }
+  },
+  computed: {
+    ...mapGetters({
+      currentUser: 'auth/user',
+    }),
+  },
   methods: {
     fetchMessages({ room, options = {} }) {
-      // console.log(room, options)
       this.messagesLoaded = false
       setTimeout(async () => {
-        if (options.reset) {
-          // console.log('reset messages')
-          this.messages = [] // this.addMessages(true)
-        } else {
-          try {
-            const {
-              data: { Message },
-            } = await this.$apollo.query({
-              query: messageQuery(),
-              variables: {
-                roomId: room.id,
-              },
-            })
-            // console.log('Messages', Message)
-            this.messages = Message
-          } catch (error) {
-            // console.log('Error', error)
-            this.messages = [] // this.addMessages(true)
-            this.$toast.error(error.message)
-          }
+        try {
+          const {
+            data: { Message },
+          } = await this.$apollo.query({
+            query: messageQuery(),
+            variables: {
+              roomId: room.id,
+            },
+            fetchPolicy: 'no-cache',
+          })
+          this.messages = Message
+        } catch (error) {
+          this.messages = []
+          this.$toast.error(error.message)
         }
         this.messagesLoaded = true
       })
     },
 
-    /* addMessages(reset) {
-      const messages = []
-
-      for (let i = 0; i < 30; i++) {
-        messages.push({
-          _id: reset ? i : this.messages.length + i,
-          content: `${reset ? '' : 'paginated'} message ${i + 1}`,
-          senderId: '4321',
-          username: 'John Doe',
-          date: '13 November',
-          timestamp: '10:20',
-        })
-      }
-      messages.push({
-        _id: '31',
-        content: `Hallo Welt`,
-        senderId: '1234',
-        username: 'John Doe',
-        date: '13 November',
-        timestamp: '10:20',
-      })
-
-      return messages
-    }, */
-
-    sendMessage(message) {
-      this.messages = [
-        ...this.messages,
-        {
-          _id: this.messages.length,
-          content: message.content,
-          senderId: this.currentUserId,
-          timestamp: new Date().toString().substring(16, 21),
-          date: new Date().toDateString(),
-        },
-      ]
+    refetchMessage(roomId) {
+      this.fetchMessages({ room: this.rooms.find((r) => r.roomId === roomId) })
     },
 
-    addNewMessage() {
-      setTimeout(() => {
-        this.messages = [
-          ...this.messages,
-          {
-            _id: this.messages.length,
-            content: 'NEW MESSAGE',
-            senderId: '1234',
-            timestamp: new Date().toString().substring(16, 21),
-            date: new Date().toDateString(),
+    async sendMessage(message) {
+      try {
+        await this.$apollo.mutate({
+          mutation: createMessageMutation(),
+          variables: {
+            roomId: message.roomId,
+            content: message.content,
           },
-        ]
-      }, 2000)
+        })
+      } catch (error) {
+        this.$toast.error(error.message)
+      }
+      this.refetchMessage(message.roomId)
+    },
+  },
+  apollo: {
+    Rooms: {
+      query() {
+        return roomQuery()
+      },
+      update({ Room }) {
+        if (!Room) {
+          this.rooms = []
+          return
+        }
+
+        // Backend result needs mapping of the following values
+        // room[i].users[j].name -> room[i].users[j].username
+        // room[i].users[j].avatar.url -> room[i].users[j].avatar
+        // also filter rooms for the single room
+        this.rooms = Room.map((r) => {
+          return {
+            ...r,
+            users: r.users.map((u) => {
+              return { ...u, username: u.name, avatar: u.avatar?.url }
+            }),
+          }
+        }).filter((r) =>
+          this.singleRoom ? r.users.filter((u) => u.id === this.singleRoomId).length > 0 : true,
+        )
+      },
+      error(error) {
+        this.rooms = []
+        this.$toast.error(error.message)
+      },
+      fetchPolicy: 'no-cache',
     },
   },
-  //   apollo: {
-  //     Rooms: {
-  //       query() {
-  //         return roomQuery()
-  //       },
-  //       update({ Room }) {
-  //         console.log('Rooms', Room)
-  //         if (!Room) {
-  //           this.rooms = []
-  //           return
-  //         }
-  //         this.rooms = Room
-  //       },
-  //       error(error) {
-  //         this.rooms = []
-  //         this.$toast.error(error.message)
-  //       },
-  //       fetchPolicy: 'cache-and-network',
-  //     },
-  //   },
 }
 </script>
 <style lang="scss">
diff --git a/webapp/graphql/Messages.js b/webapp/graphql/Messages.js
index 099a7265e..41d647d4b 100644
--- a/webapp/graphql/Messages.js
+++ b/webapp/graphql/Messages.js
@@ -4,7 +4,9 @@ export const messageQuery = () => {
   return gql`
     query ($roomId: ID!) {
       Message(roomId: $roomId) {
+        _id
         id
+        senderId
         content
         author {
           id
@@ -13,3 +15,14 @@ export const messageQuery = () => {
     }
   `
 }
+
+export const createMessageMutation = () => {
+  return gql`
+    mutation ($roomId: ID!, $content: String!) {
+      CreateMessage(roomId: $roomId, content: $content) {
+        id
+        content
+      }
+    }
+  `
+}
diff --git a/webapp/graphql/Rooms.js b/webapp/graphql/Rooms.js
index e8f1d9f6f..7bab25509 100644
--- a/webapp/graphql/Rooms.js
+++ b/webapp/graphql/Rooms.js
@@ -4,9 +4,26 @@ export const roomQuery = () => gql`
   query {
     Room {
       id
+      roomId
+      roomName
+      avatar
       users {
+        _id
         id
+        name
+        avatar {
+          url
+        }
       }
     }
   }
 `
+
+export const createRoom = () => gql`
+  mutation ($userId: ID!) {
+    CreateRoom(userId: $userId) {
+      id
+      roomId
+    }
+  }
+`
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index ae6c10b73..8b6b80604 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -20,7 +20,7 @@
           x
         </ds-button>
       </ds-text>
-      <chat-module :singleRoom="true" />
+      <chat-module :singleRoomId="$store.getters['chat/showChat'].roomID" />
     </div>
     >
   </div>
diff --git a/yarn.lock b/yarn.lock
index be628e106..bae0e9a19 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1975,10 +1975,10 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz#8cfaf2ff603e9aabb910e9c0558c26cf32744061"
   integrity sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==
 
-"@faker-js/faker@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-7.6.0.tgz#9ea331766084288634a9247fcd8b84f16ff4ba07"
-  integrity sha512-XK6BTq1NDMo9Xqw/YkYyGjSsg44fbNwYRx7QK2CuoQgyy+f1rrTDHoExVM5PsyXCtfl2vs2vVJ0MN0yN6LppRw==
+"@faker-js/faker@8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-8.0.2.tgz#bab698c5d3da9c52744e966e0e3eedb6c8b05c37"
+  integrity sha512-Uo3pGspElQW91PCvKSIAXoEgAUlRnH29sX2/p89kg7sP1m2PzCufHINd0FhTXQf6DYGiUlVncdSPa2F9wxed2A==
 
 "@hapi/address@2.x.x":
   version "2.1.4"
@@ -3164,10 +3164,10 @@ cypress-network-idle@^1.14.2:
   resolved "https://registry.yarnpkg.com/cypress-network-idle/-/cypress-network-idle-1.14.2.tgz#0837100861feeb5a18f4c2d9815be079f8590f4d"
   integrity sha512-xAdR8dH58KFPv8eCDWjviScITrJOcUpuMXYfYTc175nk2/NvnJ+I6ylSn1CM7yZmoV/gLbFa36QLiH5NfNEaLQ==
 
-cypress@^12.14.0:
-  version "12.14.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-12.14.0.tgz#37a19b85f5e9d881995e9fee1ddf41b3d3a623dd"
-  integrity sha512-HiLIXKXZaIT1RT7sw1sVPt+qKtis3uYNm6KwC4qoYjabwLKaqZlyS/P+uVvvlBNcHIwL/BC6nQZajpbUd7hOgQ==
+cypress@^12.17.0:
+  version "12.17.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-12.17.0.tgz#3a907a41c4afbb44be7b84e822e4914d734a6bb0"
+  integrity sha512-nq0ug8Zrjq/2khHU1PTNxg+3/n1oqtmAFCxwQhS6QzkQ4mR6RLitX+cGIOuIMfnEbDAtVub0hZh661FOA16JxA==
   dependencies:
     "@cypress/request" "^2.88.10"
     "@cypress/xvfb" "^1.2.4"
@@ -3206,7 +3206,7 @@ cypress@^12.14.0:
     pretty-bytes "^5.6.0"
     proxy-from-env "1.0.0"
     request-progress "^3.0.0"
-    semver "^7.3.2"
+    semver "^7.5.3"
     supports-color "^8.1.1"
     tmp "~0.2.1"
     untildify "^4.0.0"
@@ -5358,10 +5358,10 @@ semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.3.2, semver@^7.3.5:
-  version "7.5.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.1.tgz#c90c4d631cf74720e46b21c1d37ea07edfab91ec"
-  integrity sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==
+semver@^7.3.5, semver@^7.5.3:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
   dependencies:
     lru-cache "^6.0.0"