diff --git a/meshchatx/src/frontend/components/App.vue b/meshchatx/src/frontend/components/App.vue
index a12a2ee..767521e 100644
--- a/meshchatx/src/frontend/components/App.vue
+++ b/meshchatx/src/frontend/components/App.vue
@@ -664,10 +664,10 @@ export default {
         },
     },
     watch: {
-        $route() {
+        $route(to, from) {
             this.isSidebarOpen = false;
             // Close tutorial modal if it's open and we navigate away
-            if (this.$refs.tutorialModal && this.$refs.tutorialModal.visible) {
+            if (from && from.name && this.$refs.tutorialModal && this.$refs.tutorialModal.visible) {
                 this.$refs.tutorialModal.visible = false;
             }
         },
diff --git a/tests/frontend/AppModals.test.js b/tests/frontend/AppModals.test.js
index 6d138bc..b0dce1d 100644
--- a/tests/frontend/AppModals.test.js
+++ b/tests/frontend/AppModals.test.js
@@ -32,28 +32,30 @@ const i18n = createI18n({
     },
 });
 
-const router = createRouter({
-    history: createWebHashHistory(),
-    routes: [
-        { path: "/", name: "messages", component: { template: "<div>Messages</div>" } },
-        { path: "/nomadnetwork", name: "nomadnetwork", component: { template: "<div>Nomad</div>" } },
-        { path: "/map", name: "map", component: { template: "<div>Map</div>" } },
-        { path: "/archives", name: "archives", component: { template: "<div>Archives</div>" } },
-        { path: "/call", name: "call", component: { template: "<div>Call</div>" } },
-        { path: "/interfaces", name: "interfaces", component: { template: "<div>Interfaces</div>" } },
-        { path: "/network-visualiser", name: "network-visualiser", component: { template: "<div>Network</div>" } },
-        { path: "/tools", name: "tools", component: { template: "<div>Tools</div>" } },
-        { path: "/settings", name: "settings", component: { template: "<div>Settings</div>" } },
-        { path: "/identities", name: "identities", component: { template: "<div>Identities</div>" } },
-        { path: "/about", name: "about", component: { template: "<div>About</div>" } },
-        { path: "/profile/icon", name: "profile.icon", component: { template: "<div>Profile</div>" } },
-        { path: "/changelog", name: "changelog", component: { template: "<div>Changelog</div>" } },
-        { path: "/tutorial", name: "tutorial", component: { template: "<div>Tutorial</div>" } },
-    ],
-});
+const routes = [
+    { path: "/", name: "messages", component: { template: "<div>Messages</div>" } },
+    { path: "/nomadnetwork", name: "nomadnetwork", component: { template: "<div>Nomad</div>" } },
+    { path: "/map", name: "map", component: { template: "<div>Map</div>" } },
+    { path: "/archives", name: "archives", component: { template: "<div>Archives</div>" } },
+    { path: "/call", name: "call", component: { template: "<div>Call</div>" } },
+    { path: "/interfaces", name: "interfaces", component: { template: "<div>Interfaces</div>" } },
+    { path: "/network-visualiser", name: "network-visualiser", component: { template: "<div>Network</div>" } },
+    { path: "/tools", name: "tools", component: { template: "<div>Tools</div>" } },
+    { path: "/settings", name: "settings", component: { template: "<div>Settings</div>" } },
+    { path: "/identities", name: "identities", component: { template: "<div>Identities</div>" } },
+    { path: "/about", name: "about", component: { template: "<div>About</div>" } },
+    { path: "/profile/icon", name: "profile.icon", component: { template: "<div>Profile</div>" } },
+    { path: "/changelog", name: "changelog", component: { template: "<div>Changelog</div>" } },
+    { path: "/tutorial", name: "tutorial", component: { template: "<div>Tutorial</div>" } },
+];
 
 describe("App.vue Modals", () => {
+    let router;
     beforeEach(() => {
+        router = createRouter({
+            history: createWebHashHistory(),
+            routes,
+        });
         vi.clearAllMocks();
         axiosMock.get.mockImplementation((url) => {
             if (url === "/api/v1/app/info") {
@@ -139,6 +141,7 @@ describe("App.vue Modals", () => {
             },
         });
 
+        await router.isReady();
         await new Promise((resolve) => setTimeout(resolve, 200));
 
         expect(wrapper.vm.$refs.tutorialModal.visible).toBe(true);
@@ -197,6 +200,7 @@ describe("App.vue Modals", () => {
             },
         });
 
+        await router.isReady();
         await new Promise((resolve) => setTimeout(resolve, 200));
 
         expect(wrapper.vm.$refs.changelogModal.visible).toBe(true);