diff --git a/src/components/Dashboard/EventCard.vue b/src/components/Dashboard/EventCard.vue
index f1f753213..1341ca8a9 100644
--- a/src/components/Dashboard/EventCard.vue
+++ b/src/components/Dashboard/EventCard.vue
@@ -12,7 +12,7 @@ import { imagePath } from '@nextcloud/router'
 import usernameToColor from '@nextcloud/vue/functions/usernameToColor'
 import { useNow } from '@vueuse/core'
 import { computed } from 'vue'
-import { useRouter } from 'vue-router/composables'
+import { useRouter } from 'vue-router'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcChip from '@nextcloud/vue/components/NcChip'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
diff --git a/src/components/Dashboard/TalkDashboard.vue b/src/components/Dashboard/TalkDashboard.vue
index 9615a5dc5..5b543059e 100644
--- a/src/components/Dashboard/TalkDashboard.vue
+++ b/src/components/Dashboard/TalkDashboard.vue
@@ -8,7 +8,7 @@ import { emit } from '@nextcloud/event-bus'
 import { isRTL, t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router/composables'
+import { useRouter } from 'vue-router'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcInputField from '@nextcloud/vue/components/NcInputField'
diff --git a/src/components/ExtendOneToOneDialog.vue b/src/components/ExtendOneToOneDialog.vue
index 98ef6bf6f..23d6ad1f3 100644
--- a/src/components/ExtendOneToOneDialog.vue
+++ b/src/components/ExtendOneToOneDialog.vue
@@ -7,7 +7,7 @@
 import { showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 import { provide, ref, watch } from 'vue'
-import { useRouter } from 'vue-router/composables'
+import { useRouter } from 'vue-router'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcPopover from '@nextcloud/vue/components/NcPopover'
 import IconAccountMultiplePlus from 'vue-material-design-icons/AccountMultiplePlus.vue'
diff --git a/src/components/RightSidebar/SearchMessages/SearchMessageItem.vue b/src/components/RightSidebar/SearchMessages/SearchMessageItem.vue
index ad3688709..79629dacf 100644
--- a/src/components/RightSidebar/SearchMessages/SearchMessageItem.vue
+++ b/src/components/RightSidebar/SearchMessages/SearchMessageItem.vue
@@ -7,6 +7,7 @@
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcDateTime from '@nextcloud/vue/components/NcDateTime'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
@@ -60,6 +61,8 @@ const props = defineProps({
 	},
 })
 
+const router = useRouter()
+const route = useRoute()
 const store = useStore()
 const dashboardStore = useDashboardStore()
 
@@ -91,12 +94,17 @@ const clearReminderLabel = computed(() => {
 	}
 	return t('spreed', 'Clear reminder – {timeLocale}', { timeLocale: moment(+props.timestamp * 1000).format('ddd LT') })
 })
+
+const active = computed(() => {
+	return route.fullPath === router.resolve(props.to).fullPath
+})
 </script>
 
 <template>
 	<NcListItem :data-nav-id="`message_${messageId}`"
 		:name="name"
 		:to="to"
+		:active="active"
 		:title="richSubline"
 		force-menu>
 		<template #icon>
diff --git a/src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue b/src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue
index 3c2251941..65176fb2e 100644
--- a/src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue
+++ b/src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue
@@ -4,7 +4,7 @@
 -->
 
 <script setup lang="ts">
-import type { Route } from 'vue-router'
+import type { RouteLocation } from 'vue-router'
 import type {
 	Participant,
 	SearchMessagePayload,
@@ -108,7 +108,7 @@ onBeforeUnmount(() => {
 	abortSearch()
 })
 
-const onRouteChange = ({ from, to }: { from: Route, to: Route }): void => {
+const onRouteChange = ({ from, to }: { from: RouteLocation, to: RouteLocation }): void => {
 	if (to.name !== 'conversation' || from.params.token !== to.params.token || (to.hash && isInCall.value)) {
 		abortSearch()
 		emit('close')
diff --git a/src/components/UIShared/ConversationActionsShortcut.vue b/src/components/UIShared/ConversationActionsShortcut.vue
index edcfbfb96..0b2f432c0 100644
--- a/src/components/UIShared/ConversationActionsShortcut.vue
+++ b/src/components/UIShared/ConversationActionsShortcut.vue
@@ -9,7 +9,7 @@ import { getLanguage, t } from '@nextcloud/l10n'
 import { spawnDialog } from '@nextcloud/vue/functions/dialog'
 import { computed } from 'vue'
 import { isNavigationFailure, NavigationFailureType } from 'vue-router'
-import { useRoute, useRouter } from 'vue-router/composables'
+import { useRoute, useRouter } from 'vue-router'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import IconCheckUnderline from 'vue-material-design-icons/CheckUnderline.vue'
 import IconDelete from 'vue-material-design-icons/Delete.vue'
diff --git a/src/composables/useDocumentTitle.ts b/src/composables/useDocumentTitle.ts
index 442dde90e..b90af2852 100644
--- a/src/composables/useDocumentTitle.ts
+++ b/src/composables/useDocumentTitle.ts
@@ -3,12 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { Route } from 'vue-router'
+import type { RouteLocation } from 'vue-router'
 import type { Conversation } from '../types/index.ts'
 
 import { t } from '@nextcloud/l10n'
 import { computed, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router/composables'
+import { useRoute, useRouter } from 'vue-router'
 import { EventBus } from '../services/EventBus.ts'
 import { useActorStore } from '../stores/actor.ts'
 import { hasCall, hasUnreadMentions } from '../utils/conversation.ts'
@@ -134,7 +134,7 @@ export function useDocumentTitle() {
 	 *
 	 * @param route current web route
 	 */
-	function setPageTitleFromRoute(route: Route) {
+	function setPageTitleFromRoute(route: RouteLocation) {
 		switch (route.name) {
 			case 'conversation':
 				setPageTitle(store.getters.conversation(route.params.token)?.displayName ?? '')
diff --git a/src/router/router.ts b/src/router/router.ts
index 8c80177c8..dac3a220c 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -4,8 +4,7 @@
  */
 
 import { generateUrl, getRootUrl } from '@nextcloud/router'
-import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import CallView from '../components/CallView/CallView.vue'
 import ForbiddenView from '../views/ForbiddenView.vue'
 import MainView from '../views/MainView.vue'
@@ -13,8 +12,6 @@ import NotFoundView from '../views/NotFoundView.vue'
 import SessionConflictView from '../views/SessionConflictView.vue'
 import WelcomeView from '../views/WelcomeView.vue'
 
-Vue.use(Router)
-
 /**
  * Generate base url for Talk Web app based on server's root
  *
@@ -30,10 +27,9 @@ function generateTalkWebBasePath(): string {
 	})
 }
 
-export default new Router({
+export default createRouter({
 	// On desktop (Electron) app is open via file:// protocol - History API is not available and no base path
-	mode: !IS_DESKTOP ? 'history' : 'hash',
-	base: !IS_DESKTOP ? generateTalkWebBasePath() : '',
+	history: !IS_DESKTOP ? createWebHistory(generateTalkWebBasePath()) : createWebHashHistory(''),
 
 	linkActiveClass: 'active',
 
diff --git a/src/services/EventBus.ts b/src/services/EventBus.ts
index 15755d3b5..710d4df43 100644
--- a/src/services/EventBus.ts
+++ b/src/services/EventBus.ts
@@ -4,7 +4,7 @@
  */
 
 import type { Emitter, EventType, Handler, WildcardHandler } from 'mitt'
-import type { Route } from 'vue-router'
+import type { RouteLocation } from 'vue-router'
 import type {
 	ChatMessage,
 	Conversation,
@@ -37,7 +37,7 @@ export type Events = {
 	'refresh-peer-list': void
 	'refresh-talk-dashboard': void
 	'retry-message': number
-	'route-change': { from: Route, to: Route }
+	'route-change': { from: RouteLocation, to: RouteLocation }
 	'scroll-chat-to-bottom': { smooth?: boolean, force?: boolean }
 	'should-refresh-chat-messages': void
 	'should-refresh-conversations': { token: string, properties: Partial<Conversation> } | { all: true } | void
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 525bf57e8..77eafbb87 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -5,7 +5,7 @@
 <script lang="ts" setup>
 import { emit } from '@nextcloud/event-bus'
 import { computed, onMounted, watch, watchEffect } from 'vue'
-import { useRoute, useRouter } from 'vue-router/composables'
+import { useRoute, useRouter } from 'vue-router'
 import CallFailedDialog from '../components/CallView/CallFailedDialog.vue'
 import CallView from '../components/CallView/CallView.vue'
 import ChatView from '../components/ChatView.vue'
diff --git a/src/views/WelcomeView.vue b/src/views/WelcomeView.vue
index 02da09341..57e420683 100644
--- a/src/views/WelcomeView.vue
+++ b/src/views/WelcomeView.vue
@@ -7,7 +7,7 @@
 import { showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 import { computed, ref, watchEffect } from 'vue'
-import { useRoute, useRouter } from 'vue-router/composables'
+import { useRoute, useRouter } from 'vue-router'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import TalkDashboard from '../components/Dashboard/TalkDashboard.vue'