diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index 206272642..64f511fd8 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -138,6 +138,19 @@ export default {
     middleware: ['authenticated', 'termsAndConditions'],
     linkActiveClass: 'router-link-active',
     linkExactActiveClass: 'router-link-exact-active',
+    extendRoutes(routes, resolve) {
+      // Remove the default /chat route
+      const chatIndex = routes.findIndex((r) => r.name === 'chat')
+      if (chatIndex !== -1) {
+        routes.splice(chatIndex, 1)
+      }
+
+      routes.push({
+        name: 'chat',
+        path: '/chat/:id?',
+        component: resolve(__dirname, 'pages/chat.vue'),
+      })
+    },
   },
 
   /*
diff --git a/webapp/pages/chat/index.vue b/webapp/pages/chat.vue
similarity index 88%
rename from webapp/pages/chat/index.vue
rename to webapp/pages/chat.vue
index bff4c1172..9f2bfe6f9 100644
--- a/webapp/pages/chat/index.vue
+++ b/webapp/pages/chat.vue
@@ -7,7 +7,7 @@
     />
     <client-only>
       <chat
-        :roomId="getShowChat.showChat ? getShowChat.roomID : null"
+        :roomId="getShowChat.showChat ? getShowChat.roomID : this.$route.params.roomId"
         ref="chat"
         @toggle-user-search="showUserSearch = !showUserSearch"
         :show-room="showRoom"
@@ -47,6 +47,7 @@ export default {
       this.$refs.chat.newRoom(userID)
     },
     showRoom(roomId) {
+      this.$router.push({ name: 'chat', params: { roomId } })
       this.showChat({ showChat: true, roomID: roomId })
     },
   },
diff --git a/webapp/pages/chat/_roomId.vue b/webapp/pages/chat/_roomId.vue
deleted file mode 100644
index ba022e060..000000000
--- a/webapp/pages/chat/_roomId.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<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>