diff --git a/backend/src/emails/sendEmail.ts b/backend/src/emails/sendEmail.ts
index 61a5ba951..d14f703e3 100644
--- a/backend/src/emails/sendEmail.ts
+++ b/backend/src/emails/sendEmail.ts
@@ -159,12 +159,13 @@ export interface ChatMessageEmailInput {
   senderUser: UserDbProperties
   recipientUser: UserDbProperties
   email: string
+  roomId: string
 }
 
 export const sendChatMessageMail = async (
   data: ChatMessageEmailInput,
 ): Promise<OriginalMessage> => {
-  const { senderUser, recipientUser } = data
+  const { senderUser, recipientUser, roomId } = data
   const to = data.email
   try {
     const { originalMessage } = await email.send({
@@ -178,7 +179,7 @@ export const sendChatMessageMail = async (
         name: recipientUser.name,
         chattingUser: senderUser.name,
         chattingUserUrl: new URL(`/profile/${senderUser.id}/${senderUser.slug}`, CONFIG.CLIENT_URI),
-        chatUrl: new URL('/chat', CONFIG.CLIENT_URI),
+        chatUrl: new URL(`/chat/${roomId}`, CONFIG.CLIENT_URI),
       },
     })
     return originalMessage as OriginalMessage
diff --git a/backend/src/middleware/notifications/notificationsMiddleware.ts b/backend/src/middleware/notifications/notificationsMiddleware.ts
index 559c72b06..a7ecb1bd0 100644
--- a/backend/src/middleware/notifications/notificationsMiddleware.ts
+++ b/backend/src/middleware/notifications/notificationsMiddleware.ts
@@ -462,6 +462,7 @@ const handleCreateMessage = async (resolve, root, args, context, resolveInfo) =>
     })
 
     return {
+      roomId,
       senderUser: await txResponse.records.map((record) => record.get('senderUser'))[0],
       recipientUser: await txResponse.records.map((record) => record.get('recipientUser'))[0],
       email: await txResponse.records.map((record) => record.get('emailAddress'))[0]?.email,
@@ -470,7 +471,7 @@ const handleCreateMessage = async (resolve, root, args, context, resolveInfo) =>
 
   try {
     // Execute Query
-    const { senderUser, recipientUser, email } = await messageRecipient
+    const { senderUser, recipientUser, email, roomId } = await messageRecipient
 
     if (recipientUser) {
       // send subscriptions
@@ -487,7 +488,7 @@ const handleCreateMessage = async (resolve, root, args, context, resolveInfo) =>
 
       // Send EMail if we found a user(not blocked) and he is not considered online
       if (recipientUser.emailNotificationsChatMessage !== false && !isUserOnline(recipientUser)) {
-        void sendChatMessageMail({ email, senderUser, recipientUser })
+        void sendChatMessageMail({ email, senderUser, recipientUser, roomId })
       }
     }
 
diff --git a/webapp/pages/chat/_roomId.vue b/webapp/pages/chat/_roomId.vue
new file mode 100644
index 000000000..ba022e060
--- /dev/null
+++ b/webapp/pages/chat/_roomId.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <add-chat-room-by-user-search
+      v-if="showUserSearch"
+      @add-chat-room="addChatRoom"
+      @close-user-search="showUserSearch = false"
+    />
+    <chat
+      :roomId="getShowChat.showChat ? getShowChat.roomID : this.$route.params.roomId"
+      ref="chat"
+      @toggle-user-search="showUserSearch = !showUserSearch"
+      :show-room="showRoom"
+    />
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import AddChatRoomByUserSearch from '~/components/Chat/AddChatRoomByUserSearch'
+import Chat from '~/components/Chat/Chat.vue'
+
+export default {
+  components: {
+    AddChatRoomByUserSearch,
+    Chat,
+  },
+  data() {
+    return {
+      showUserSearch: false,
+    }
+  },
+  mounted() {
+    this.showChat({ showChat: false, roomID: null })
+  },
+  computed: {
+    ...mapGetters({
+      getShowChat: 'chat/showChat',
+    }),
+  },
+  methods: {
+    ...mapMutations({
+      showChat: 'chat/SET_OPEN_CHAT',
+    }),
+    addChatRoom(userID) {
+      this.$refs.chat.newRoom(userID)
+    },
+    showRoom(roomId) {
+      this.showChat({ showChat: true, roomID: roomId })
+    },
+  },
+}
+</script>
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat/index.vue
similarity index 95%
rename from webapp/pages/chat.vue
rename to webapp/pages/chat/index.vue
index ffeb6a800..bff4c1172 100644
--- a/webapp/pages/chat.vue
+++ b/webapp/pages/chat/index.vue
@@ -19,7 +19,7 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import AddChatRoomByUserSearch from '~/components/Chat/AddChatRoomByUserSearch'
-import Chat from '../components/Chat/Chat.vue'
+import Chat from '~/components/Chat/Chat.vue'
 
 export default {
   components: {