diff --git a/src/router/guard/title.ts b/src/router/guard/title.ts
index 5b603682..b1b2d7ba 100644
--- a/src/router/guard/title.ts
+++ b/src/router/guard/title.ts
@@ -8,6 +8,12 @@ export function createDocumentTitleGuard(router: Router) {
 
     const documentTitle = i18nKey ? $t(i18nKey) : title;
 
-    useTitle(documentTitle);
+    changeDocumentTitle(documentTitle);
+  });
+}
+
+export function changeDocumentTitle(documentTitle: string) {
+  useTitle(documentTitle, {
+    titleTemplate: `%s | ${import.meta.env.VITE_APP_TITLE}`
   });
 }
diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts
index 1b8c4b7d..9de06b7b 100644
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@@ -1,12 +1,13 @@
 import { effectScope, nextTick, onScopeDispose, ref, watch } from 'vue';
 import { defineStore } from 'pinia';
-import { breakpointsTailwind, useBreakpoints, useEventListener, useTitle } from '@vueuse/core';
+import { breakpointsTailwind, useBreakpoints, useEventListener } from '@vueuse/core';
 import { useBoolean } from '@sa/hooks';
 import { SetupStoreId } from '@/enum';
 import { router } from '@/router';
 import { $t, setLocale } from '@/locales';
 import { setDayjsLocale } from '@/locales/dayjs';
 import { localStg } from '@/utils/storage';
+import { changeDocumentTitle } from '@/router/guard/title';
 import { useRouteStore } from '../route';
 import { useTabStore } from '../tab';
 import { useThemeStore } from '../theme';
@@ -73,7 +74,7 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
 
     const documentTitle = i18nKey ? $t(i18nKey) : title;
 
-    useTitle(documentTitle);
+    changeDocumentTitle(documentTitle);
   }
 
   function init() {