diff --git a/api/config/get.go b/api/config/get.go
index a38758d60..4578029c8 100644
--- a/api/config/get.go
+++ b/api/config/get.go
@@ -10,6 +10,7 @@ import (
 	"github.com/sashabaranov/go-openai"
 	"net/http"
 	"os"
+	"path/filepath"
 )
 
 type APIConfigResp struct {
@@ -19,30 +20,30 @@ type APIConfigResp struct {
 }
 
 func GetConfig(c *gin.Context) {
-	name := c.Param("name")
+	relativePath := c.Param("path")
 
-	path := nginx.GetConfPath("/", name)
-	if !helper.IsUnderDirectory(path, nginx.GetConfPath()) {
+	absPath := nginx.GetConfPath(relativePath)
+	if !helper.IsUnderDirectory(absPath, nginx.GetConfPath()) {
 		c.JSON(http.StatusForbidden, gin.H{
 			"message": "path is not under the nginx conf path",
 		})
 		return
 	}
 
-	stat, err := os.Stat(path)
+	stat, err := os.Stat(absPath)
 	if err != nil {
 		api.ErrHandler(c, err)
 		return
 	}
 
-	content, err := os.ReadFile(path)
+	content, err := os.ReadFile(absPath)
 	if err != nil {
 		api.ErrHandler(c, err)
 		return
 	}
 	q := query.Config
 	g := query.ChatGPTLog
-	chatgpt, err := g.Where(g.Name.Eq(path)).FirstOrCreate()
+	chatgpt, err := g.Where(g.Name.Eq(absPath)).FirstOrCreate()
 	if err != nil {
 		api.ErrHandler(c, err)
 		return
@@ -52,7 +53,7 @@ func GetConfig(c *gin.Context) {
 		chatgpt.Content = make([]openai.ChatCompletionMessage, 0)
 	}
 
-	cfg, err := q.Where(q.Filepath.Eq(path)).FirstOrInit()
+	cfg, err := q.Where(q.Filepath.Eq(absPath)).FirstOrInit()
 	if err != nil {
 		api.ErrHandler(c, err)
 		return
@@ -63,8 +64,9 @@ func GetConfig(c *gin.Context) {
 			Name:            stat.Name(),
 			Content:         string(content),
 			ChatGPTMessages: chatgpt.Content,
-			FilePath:        path,
+			FilePath:        absPath,
 			ModifiedAt:      stat.ModTime(),
+			Dir:             filepath.Dir(relativePath),
 		},
 		SyncNodeIds:   cfg.SyncNodeIds,
 		SyncOverwrite: cfg.SyncOverwrite,
diff --git a/api/config/modify.go b/api/config/modify.go
index 7c7053dcc..c232a6d64 100644
--- a/api/config/modify.go
+++ b/api/config/modify.go
@@ -11,6 +11,7 @@ import (
 	"github.com/sashabaranov/go-openai"
 	"net/http"
 	"os"
+	"path/filepath"
 	"time"
 )
 
@@ -19,11 +20,9 @@ type EditConfigJson struct {
 }
 
 func EditConfig(c *gin.Context) {
-	name := c.Param("name")
+	relativePath := c.Param("path")
 	var json struct {
 		Name          string   `json:"name" binding:"required"`
-		Filepath      string   `json:"filepath" binding:"required"`
-		NewFilepath   string   `json:"new_filepath" binding:"required"`
 		Content       string   `json:"content"`
 		SyncOverwrite bool     `json:"sync_overwrite"`
 		SyncNodeIds   []uint64 `json:"sync_node_ids"`
@@ -32,22 +31,8 @@ func EditConfig(c *gin.Context) {
 		return
 	}
 
-	path := json.Filepath
-	if !helper.IsUnderDirectory(path, nginx.GetConfPath()) {
-		c.JSON(http.StatusForbidden, gin.H{
-			"message": "filepath is not under the nginx conf path",
-		})
-		return
-	}
-
-	if !helper.IsUnderDirectory(json.NewFilepath, nginx.GetConfPath()) {
-		c.JSON(http.StatusForbidden, gin.H{
-			"message": "new filepath is not under the nginx conf path",
-		})
-		return
-	}
-
-	if !helper.FileExists(path) {
+	absPath := nginx.GetConfPath(relativePath)
+	if !helper.FileExists(absPath) {
 		c.JSON(http.StatusNotFound, gin.H{
 			"message": "file not found",
 		})
@@ -55,14 +40,14 @@ func EditConfig(c *gin.Context) {
 	}
 
 	content := json.Content
-	origContent, err := os.ReadFile(path)
+	origContent, err := os.ReadFile(absPath)
 	if err != nil {
 		api.ErrHandler(c, err)
 		return
 	}
 
 	if content != "" && content != string(origContent) {
-		err = os.WriteFile(path, []byte(content), 0644)
+		err = os.WriteFile(absPath, []byte(content), 0644)
 		if err != nil {
 			api.ErrHandler(c, err)
 			return
@@ -70,17 +55,15 @@ func EditConfig(c *gin.Context) {
 	}
 
 	q := query.Config
-	cfg, err := q.Where(q.Filepath.Eq(json.Filepath)).FirstOrCreate()
+	cfg, err := q.Where(q.Filepath.Eq(absPath)).FirstOrCreate()
 	if err != nil {
 		api.ErrHandler(c, err)
 		return
 	}
 
-	_, err = q.Where(q.Filepath.Eq(json.Filepath)).
-		Select(q.Name, q.Filepath, q.SyncNodeIds, q.SyncOverwrite).
+	_, err = q.Where(q.Filepath.Eq(absPath)).
+		Select(q.SyncNodeIds, q.SyncOverwrite).
 		Updates(&model.Config{
-			Name:          json.Name,
-			Filepath:      json.NewFilepath,
 			SyncNodeIds:   json.SyncNodeIds,
 			SyncOverwrite: json.SyncOverwrite,
 		})
@@ -89,27 +72,12 @@ func EditConfig(c *gin.Context) {
 		return
 	}
 
-	g := query.ChatGPTLog
-	// handle rename
-	if path != json.NewFilepath {
-		if helper.FileExists(json.NewFilepath) {
-			c.JSON(http.StatusNotAcceptable, gin.H{
-				"message": "File exists",
-			})
-			return
-		}
-		err := os.Rename(json.Filepath, json.NewFilepath)
-		if err != nil {
-			api.ErrHandler(c, err)
-			return
-		}
-
-		// update ChatGPT record
-		_, _ = g.Where(g.Name.Eq(json.NewFilepath)).Delete()
-		_, _ = g.Where(g.Name.Eq(path)).Update(g.Name, json.NewFilepath)
-	}
+	// use the new values
+	cfg.SyncNodeIds = json.SyncNodeIds
+	cfg.SyncOverwrite = json.SyncOverwrite
 
-	err = config.SyncToRemoteServer(cfg, json.NewFilepath)
+	g := query.ChatGPTLog
+	err = config.SyncToRemoteServer(cfg, absPath)
 	if err != nil {
 		api.ErrHandler(c, err)
 		return
@@ -123,7 +91,7 @@ func EditConfig(c *gin.Context) {
 		return
 	}
 
-	chatgpt, err := g.Where(g.Name.Eq(json.NewFilepath)).FirstOrCreate()
+	chatgpt, err := g.Where(g.Name.Eq(absPath)).FirstOrCreate()
 	if err != nil {
 		api.ErrHandler(c, err)
 		return
@@ -134,10 +102,11 @@ func EditConfig(c *gin.Context) {
 	}
 
 	c.JSON(http.StatusOK, config.Config{
-		Name:            name,
+		Name:            filepath.Base(absPath),
 		Content:         content,
 		ChatGPTMessages: chatgpt.Content,
-		FilePath:        json.NewFilepath,
+		FilePath:        absPath,
 		ModifiedAt:      time.Now(),
+		Dir:             filepath.Dir(relativePath),
 	})
 }
diff --git a/api/config/rename.go b/api/config/rename.go
index fa1facac0..4e5efb948 100644
--- a/api/config/rename.go
+++ b/api/config/rename.go
@@ -5,11 +5,13 @@ import (
 	"github.com/0xJacky/Nginx-UI/internal/config"
 	"github.com/0xJacky/Nginx-UI/internal/helper"
 	"github.com/0xJacky/Nginx-UI/internal/nginx"
+	"github.com/0xJacky/Nginx-UI/model"
 	"github.com/0xJacky/Nginx-UI/query"
 	"github.com/gin-gonic/gin"
 	"github.com/uozi-tech/cosy/logger"
 	"net/http"
 	"os"
+	"strings"
 )
 
 func Rename(c *gin.Context) {
@@ -77,7 +79,10 @@ func Rename(c *gin.Context) {
 		_, _ = g.Where(g.Name.Like(origFullPath+"%")).Update(g.Name, g.Name.Replace(origFullPath, newFullPath))
 	}
 
-	_, err = q.Where(q.Filepath.Eq(origFullPath)).Update(q.Filepath, newFullPath)
+	_, err = q.Where(q.Filepath.Eq(origFullPath)).Updates(&model.Config{
+		Filepath: newFullPath,
+		Name:     json.NewName,
+	})
 	if err != nil {
 		api.ErrHandler(c, err)
 		return
@@ -92,6 +97,6 @@ func Rename(c *gin.Context) {
 	}
 
 	c.JSON(http.StatusOK, gin.H{
-		"message": "ok",
+		"path": strings.TrimLeft(newFullPath, nginx.GetConfPath()),
 	})
 }
diff --git a/api/config/router.go b/api/config/router.go
index 2031a237a..2d9b9d0f5 100644
--- a/api/config/router.go
+++ b/api/config/router.go
@@ -9,9 +9,9 @@ func InitRouter(r *gin.RouterGroup) {
 	r.GET("config_base_path", GetBasePath)
 
 	r.GET("configs", GetConfigs)
-	r.GET("configs/*name", GetConfig)
+	r.GET("configs/*path", GetConfig)
 	r.POST("configs", AddConfig)
-	r.POST("configs/*name", EditConfig)
+	r.POST("configs/*path", EditConfig)
 
 	o := r.Group("", middleware.RequireSecureSession())
 	{
diff --git a/api/notification/live.go b/api/notification/live.go
new file mode 100644
index 000000000..4f028e66b
--- /dev/null
+++ b/api/notification/live.go
@@ -0,0 +1,31 @@
+package notification
+
+import (
+	"github.com/0xJacky/Nginx-UI/internal/notification"
+	"github.com/0xJacky/Nginx-UI/model"
+	"github.com/gin-gonic/gin"
+	"io"
+)
+
+func Live(c *gin.Context) {
+	c.Header("Content-Type", "text/event-stream")
+	c.Header("Cache-Control", "no-cache")
+	c.Header("Connection", "keep-alive")
+
+	evtChan := make(chan *model.Notification)
+
+	notification.SetClient(c, evtChan)
+
+	notify := c.Writer.CloseNotify()
+	go func() {
+		<-notify
+		notification.RemoveClient(c)
+	}()
+
+	for n := range evtChan {
+		c.Stream(func(w io.Writer) bool {
+			c.SSEvent("message", n)
+			return false
+		})
+	}
+}
diff --git a/api/notification/router.go b/api/notification/router.go
index 87c3d166c..fc5caa295 100644
--- a/api/notification/router.go
+++ b/api/notification/router.go
@@ -7,4 +7,6 @@ func InitRouter(r *gin.RouterGroup) {
 	r.GET("notifications/:id", Get)
 	r.DELETE("notifications/:id", Destroy)
 	r.DELETE("notifications", DestroyAll)
+
+	r.GET("notifications/live", Live)
 }
diff --git a/app/package.json b/app/package.json
index c4cb7cda6..17203839b 100644
--- a/app/package.json
+++ b/app/package.json
@@ -38,6 +38,7 @@
     "pinia-plugin-persistedstate": "^4.1.2",
     "reconnecting-websocket": "^4.4.0",
     "sortablejs": "^1.15.3",
+    "sse.js": "^2.5.0",
     "universal-cookie": "^7.2.2",
     "unocss": "^0.63.6",
     "vite-plugin-build-id": "0.5.0",
diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
index 6c3106c00..b703590b5 100644
--- a/app/pnpm-lock.yaml
+++ b/app/pnpm-lock.yaml
@@ -83,6 +83,9 @@ importers:
       sortablejs:
         specifier: ^1.15.3
         version: 1.15.3
+      sse.js:
+        specifier: ^2.5.0
+        version: 2.5.0
       universal-cookie:
         specifier: ^7.2.2
         version: 7.2.2
@@ -4271,6 +4274,9 @@ packages:
   spdx-license-ids@3.0.20:
     resolution: {integrity: sha512-jg25NiDV/1fLtSgEgyvVyDunvaNHbuwF9lfNV17gSmPFAlYzdfNBlLtLzXTevwkPj7DhGbmN9VnmJIgLnhvaBw==}
 
+  sse.js@2.5.0:
+    resolution: {integrity: sha512-I7zYndqOOkNpz9KIdFZ8c8A7zs1YazNewBr8Nsi/tqThfJkVPuP1q7UE2h4B0RwoWZxbBYpd06uoW3NI3SaZXg==}
+
   stable-hash@0.0.4:
     resolution: {integrity: sha512-LjdcbuBeLcdETCrPn9i8AYAZ1eCtu4ECAWtP7UleOiZ9LzVxRzzUZEoZ8zB24nhkQnDWyET0I+3sWokSDS3E7g==}
 
@@ -9690,6 +9696,8 @@ snapshots:
 
   spdx-license-ids@3.0.20: {}
 
+  sse.js@2.5.0: {}
+
   stable-hash@0.0.4: {}
 
   std-env@3.7.0: {}
diff --git a/app/src/api/config.ts b/app/src/api/config.ts
index b43c65ef9..f1876c7d9 100644
--- a/app/src/api/config.ts
+++ b/app/src/api/config.ts
@@ -10,6 +10,7 @@ export interface Config {
   modified_at: string
   sync_node_ids?: number[]
   sync_overwrite?: false
+  dir: string
 }
 
 class ConfigCurd extends Curd<Config> {
@@ -25,7 +26,7 @@ class ConfigCurd extends Curd<Config> {
     return http.post('/config_mkdir', { base_path: basePath, folder_name: name })
   }
 
-  rename(basePath: string, origName: string, newName: string, syncNodeIds: number[]) {
+  rename(basePath: string, origName: string, newName: string, syncNodeIds?: number[]) {
     return http.post('/config_rename', {
       base_path: basePath,
       orig_name: origName,
diff --git a/app/src/components/Notification/Notification.vue b/app/src/components/Notification/Notification.vue
index 49ae62d0e..c88f1045e 100644
--- a/app/src/components/Notification/Notification.vue
+++ b/app/src/components/Notification/Notification.vue
@@ -1,22 +1,71 @@
 <script setup lang="ts">
 import type { Notification } from '@/api/notification'
 import type { CustomRenderProps } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
+import type { SSEvent } from 'sse.js'
 import type { Ref } from 'vue'
-import notification from '@/api/notification'
+import notificationApi from '@/api/notification'
 import { detailRender } from '@/components/Notification/detailRender'
 import { NotificationTypeT } from '@/constants'
 import { useUserStore } from '@/pinia'
 import { BellOutlined, CheckCircleOutlined, CloseCircleOutlined, DeleteOutlined, InfoCircleOutlined, WarningOutlined } from '@ant-design/icons-vue'
-import { message } from 'ant-design-vue'
+import { message, notification } from 'ant-design-vue'
+import { SSE } from 'sse.js'
+
+defineProps<{
+  headerRef: HTMLElement
+}>()
 
 const loading = ref(false)
 
-const { unreadCount } = storeToRefs(useUserStore())
+const { token, unreadCount } = storeToRefs(useUserStore())
 
 const data = ref([]) as Ref<Notification[]>
+
+const sse = shallowRef(newSSE())
+
+function reconnect() {
+  setTimeout(() => {
+    sse.value = newSSE()
+  }, 5000)
+}
+
+function newSSE() {
+  const s = new SSE('/api/notifications/live', {
+    headers: {
+      Authorization: token.value,
+    },
+  })
+
+  s.onmessage = (e: SSEvent) => {
+    const data = JSON.parse(e.data)
+    // data.type may be 0
+    if (data.type === undefined || data.type === null || data.type === '') {
+      return
+    }
+
+    const typeTrans = {
+      0: 'error',
+      1: 'warning',
+      2: 'info',
+      3: 'success',
+    }
+
+    notification[typeTrans[data.type]]({
+      message: $gettext(data.title),
+      description: detailRender({ text: data.details, record: data } as CustomRenderProps),
+    })
+  }
+
+  // reconnect
+  s.onerror = reconnect
+  s.onabort = reconnect
+
+  return s
+}
+
 function init() {
   loading.value = true
-  notification.get_list().then(r => {
+  notificationApi.get_list().then(r => {
     data.value = r.data
     unreadCount.value = r.pagination?.total || 0
   }).catch(e => {
@@ -38,7 +87,7 @@ watch(open, v => {
 })
 
 function clear() {
-  notification.clear().then(() => {
+  notificationApi.clear().then(() => {
     message.success($gettext('Cleared successfully'))
     data.value = []
     unreadCount.value = 0
@@ -48,7 +97,7 @@ function clear() {
 }
 
 function remove(id: number) {
-  notification.destroy(id).then(() => {
+  notificationApi.destroy(id).then(() => {
     message.success($gettext('Removed successfully'))
     init()
   }).catch(e => {
@@ -70,6 +119,7 @@ function viewAll() {
       placement="bottomRight"
       overlay-class-name="notification-popover"
       trigger="click"
+      :get-popup-container="() => headerRef"
     >
       <ABadge
         :count="unreadCount"
diff --git a/app/src/components/Notification/config.ts b/app/src/components/Notification/config.ts
index d8541cd88..60ffda45b 100644
--- a/app/src/components/Notification/config.ts
+++ b/app/src/components/Notification/config.ts
@@ -11,13 +11,13 @@ export function syncConfigError(text: string) {
     return $gettext('Please upgrade the remote Nginx UI to the latest version')
   }
 
-  return $gettext('Sync config %{config_name} to %{env_name} failed, response: %{resp}', { config_name: data.cert_name, env_name: data.env_name, resp: data.resp_body }, true)
+  return $gettext('Sync config %{config_name} to %{env_name} failed, response: %{resp}', { config_name: data.config_name, env_name: data.env_name, resp: data.resp_body }, true)
 }
 
 export function syncRenameConfigSuccess(text: string) {
   const data = JSON.parse(text)
 
-  return $gettext('Rename %{orig_path} to %{new_path} on %{env_name} successfully', { orig_path: data.orig_path, new_path: data.orig_path, env_name: data.env_name })
+  return $gettext('Rename %{orig_path} to %{new_path} on %{env_name} successfully', { orig_path: data.orig_path, new_path: data.new_path, env_name: data.env_name })
 }
 
 export function syncRenameConfigError(text: string) {
@@ -27,12 +27,12 @@ export function syncRenameConfigError(text: string) {
     return $gettext('Please upgrade the remote Nginx UI to the latest version')
   }
 
-  return $gettext('Rename %{orig_path} to %{new_path} on %{env_name} failed, response: %{resp}', { orig_path: data.orig_path, new_path: data.orig_path, resp: data.resp_body, env_name: data.env_name }, true)
+  return $gettext('Rename %{orig_path} to %{new_path} on %{env_name} failed, response: %{resp}', { orig_path: data.orig_path, new_path: data.new_path, resp: data.resp_body, env_name: data.env_name }, true)
 }
 
 export function saveSiteSuccess(text: string) {
   const data = JSON.parse(text)
-  return $gettext('Save Site %{site} to %{node} successfully', { site: data.site, node: data.node })
+  return $gettext('Save Site %{site} to %{node} successfully', { site: data.name, node: data.node })
 }
 
 export function saveSiteError(text: string) {
diff --git a/app/src/components/Notification/detailRender.ts b/app/src/components/Notification/detailRender.ts
index 71b043d5f..0a28f3664 100644
--- a/app/src/components/Notification/detailRender.ts
+++ b/app/src/components/Notification/detailRender.ts
@@ -18,42 +18,48 @@ import {
 } from '@/components/Notification/config'
 
 export function detailRender(args: CustomRenderProps) {
-  switch (args.record.title) {
-    case 'Sync Certificate Success':
-      return syncCertificateSuccess(args.text)
-    case 'Sync Certificate Error':
-      return syncCertificateError(args.text)
-    case 'Rename Remote Config Success':
-      return syncRenameConfigSuccess(args.text)
-    case 'Rename Remote Config Error':
-      return syncRenameConfigError(args.text)
+  try {
+    switch (args.record.title) {
+      case 'Sync Certificate Success':
+        return syncCertificateSuccess(args.text)
+      case 'Sync Certificate Error':
+        return syncCertificateError(args.text)
+      case 'Rename Remote Config Success':
+        return syncRenameConfigSuccess(args.text)
+      case 'Rename Remote Config Error':
+        return syncRenameConfigError(args.text)
 
-    case 'Save Remote Site Success':
-      return saveSiteSuccess(args.text)
-    case 'Save Remote Site Error':
-      return saveSiteError(args.text)
-    case 'Delete Remote Site Success':
-      return deleteSiteSuccess(args.text)
-    case 'Delete Remote Site Error':
-      return deleteSiteError(args.text)
-    case 'Enable Remote Site Success':
-      return enableSiteSuccess(args.text)
-    case 'Enable Remote Site Error':
-      return enableSiteError(args.text)
-    case 'Disable Remote Site Success':
-      return disableSiteSuccess(args.text)
-    case 'Disable Remote Site Error':
-      return disableSiteError(args.text)
-    case 'Rename Remote Site Success':
-      return renameSiteSuccess(args.text)
-    case 'Rename Remote Site Error':
-      return renameSiteError(args.text)
+      case 'Save Remote Site Success':
+        return saveSiteSuccess(args.text)
+      case 'Save Remote Site Error':
+        return saveSiteError(args.text)
+      case 'Delete Remote Site Success':
+        return deleteSiteSuccess(args.text)
+      case 'Delete Remote Site Error':
+        return deleteSiteError(args.text)
+      case 'Enable Remote Site Success':
+        return enableSiteSuccess(args.text)
+      case 'Enable Remote Site Error':
+        return enableSiteError(args.text)
+      case 'Disable Remote Site Success':
+        return disableSiteSuccess(args.text)
+      case 'Disable Remote Site Error':
+        return disableSiteError(args.text)
+      case 'Rename Remote Site Success':
+        return renameSiteSuccess(args.text)
+      case 'Rename Remote Site Error':
+        return renameSiteError(args.text)
 
-    case 'Sync Config Success':
-      return syncConfigSuccess(args.text)
-    case 'Sync Config Error':
-      return syncConfigError(args.text)
-    default:
-      return args.text
+      case 'Sync Config Success':
+        return syncConfigSuccess(args.text)
+      case 'Sync Config Error':
+        return syncConfigError(args.text)
+      default:
+        return args.text
+    }
+  }
+  // eslint-disable-next-line sonarjs/no-ignored-exceptions
+  catch (e) {
+    return args.text
   }
 }
diff --git a/app/src/constants/index.ts b/app/src/constants/index.ts
index 23580867a..df3054019 100644
--- a/app/src/constants/index.ts
+++ b/app/src/constants/index.ts
@@ -35,6 +35,8 @@ export const PrivateKeyTypeMask = {
   P384: 'EC384',
 } as const
 
-export const PrivateKeyTypeList = Object.entries(PrivateKeyTypeMask).map(([key, name]) => ({ key, name }))
+export const PrivateKeyTypeList
+    = Object.entries(PrivateKeyTypeMask).map(([key, name]) =>
+      ({ key, name }))
 
 export type PrivateKeyType = keyof typeof PrivateKeyTypeMask
diff --git a/app/src/layouts/HeaderLayout.vue b/app/src/layouts/HeaderLayout.vue
index 54322cdaa..11f943c65 100644
--- a/app/src/layouts/HeaderLayout.vue
+++ b/app/src/layouts/HeaderLayout.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ShallowRef } from 'vue'
 import auth from '@/api/auth'
 import NginxControl from '@/components/NginxControl/NginxControl.vue'
 import Notification from '@/components/Notification/Notification.vue'
@@ -21,10 +22,12 @@ function logout() {
     router.push('/login')
   })
 }
+
+const headerRef = useTemplateRef('headerRef') as Readonly<ShallowRef<HTMLDivElement>>
 </script>
 
 <template>
-  <div class="header">
+  <div ref="headerRef" class="header">
     <div class="tool">
       <MenuUnfoldOutlined @click="emit('clickUnFold')" />
     </div>
@@ -37,7 +40,7 @@ function logout() {
 
       <SwitchAppearance />
 
-      <Notification />
+      <Notification :header-ref="headerRef" />
 
       <NginxControl />
 
diff --git a/app/src/views/config/ConfigEditor.vue b/app/src/views/config/ConfigEditor.vue
index 6e216d0db..bdb62e95d 100644
--- a/app/src/views/config/ConfigEditor.vue
+++ b/app/src/views/config/ConfigEditor.vue
@@ -11,6 +11,7 @@ import NodeSelector from '@/components/NodeSelector/NodeSelector.vue'
 import { useBreadcrumbs } from '@/composables/useBreadcrumbs'
 import { formatDateTime } from '@/lib/helper'
 import { useSettingsStore } from '@/pinia'
+import ConfigName from '@/views/config/components/ConfigName.vue'
 import InspectConfig from '@/views/config/InspectConfig.vue'
 import { InfoCircleOutlined } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
@@ -255,7 +256,7 @@ function goBack() {
                 name="name"
                 :label="$gettext('Name')"
               >
-                <AInput v-model:value="data.name" />
+                <ConfigName :name="data.name" :dir="data.dir" />
               </AFormItem>
               <AFormItem
                 v-if="!addMode"
diff --git a/app/src/views/config/ConfigList.vue b/app/src/views/config/ConfigList.vue
index e3322667d..364de4f1e 100644
--- a/app/src/views/config/ConfigList.vue
+++ b/app/src/views/config/ConfigList.vue
@@ -7,7 +7,6 @@ import Mkdir from '@/views/config/components/Mkdir.vue'
 import Rename from '@/views/config/components/Rename.vue'
 import configColumns from '@/views/config/configColumns'
 import InspectConfig from '@/views/config/InspectConfig.vue'
-import { $gettext } from '../../gettext'
 
 const table = ref()
 const route = useRoute()
@@ -143,12 +142,12 @@ const refRename = ref()
           size="small"
           @click="() => {
             if (!record.is_dir) {
-              $router.push({
+              router.push({
                 path: `/config/${basePath}${record.name}/edit`,
               })
             }
             else {
-              $router.push({
+              router.push({
                 query: {
                   dir: basePath + record.name,
                 },
diff --git a/app/src/views/config/components/ConfigName.vue b/app/src/views/config/components/ConfigName.vue
new file mode 100644
index 000000000..ccb7fcefe
--- /dev/null
+++ b/app/src/views/config/components/ConfigName.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import config from '@/api/config'
+import use2FAModal from '@/components/TwoFA/use2FAModal'
+import { message } from 'ant-design-vue'
+
+const props = defineProps<{
+  dir?: string
+}>()
+
+const name = defineModel<string>('name', { default: '' })
+
+const router = useRouter()
+
+const modify = ref(false)
+const buffer = ref('')
+const loading = ref(false)
+
+function clickModify() {
+  buffer.value = name.value
+  modify.value = true
+}
+
+function save() {
+  loading.value = true
+  const otpModal = use2FAModal()
+
+  otpModal.open().then(() => {
+    config.rename(props.dir!, name.value, buffer.value).then(r => {
+      modify.value = false
+      message.success($gettext('Renamed successfully'))
+      router.push({
+        path: `/config/${r.path}/edit`,
+      })
+    }).catch(e => {
+      message.error($gettext(e?.message ?? 'Server error'))
+    }).finally(() => {
+      loading.value = false
+    })
+  })
+}
+</script>
+
+<template>
+  <div v-if="!modify" class="flex items-center">
+    <div class="mr-2">
+      {{ name }}
+    </div>
+    <div>
+      <AButton type="link" size="small" @click="clickModify">
+        {{ $gettext('Rename') }}
+      </AButton>
+    </div>
+  </div>
+  <div v-else>
+    <AInput v-model:value="buffer">
+      <template #suffix>
+        <AButton :disabled="buffer === name" type="link" size="small" :loading @click="save">
+          {{ $gettext('Save') }}
+        </AButton>
+      </template>
+    </AInput>
+  </div>
+</template>
+
+<style scoped lang="less">
+
+</style>
diff --git a/internal/config/config.go b/internal/config/config.go
index 53fc9a0d0..43225d8ec 100644
--- a/internal/config/config.go
+++ b/internal/config/config.go
@@ -17,4 +17,5 @@ type Config struct {
 	SiteCategoryID  uint64                         `json:"site_category_id"`
 	SiteCategory    *model.SiteCategory            `json:"site_category,omitempty"`
 	Enabled         bool                           `json:"enabled"`
+	Dir             string                         `json:"dir"`
 }
diff --git a/internal/notification/notification.go b/internal/notification/notification.go
index b7d19c7f2..a9ffc1ce9 100644
--- a/internal/notification/notification.go
+++ b/internal/notification/notification.go
@@ -3,8 +3,29 @@ package notification
 import (
 	"github.com/0xJacky/Nginx-UI/model"
 	"github.com/0xJacky/Nginx-UI/query"
+	"github.com/gin-gonic/gin"
+	"github.com/uozi-tech/cosy/logger"
+	"sync"
 )
 
+var (
+	clientMap = make(map[*gin.Context]chan *model.Notification)
+	mutex     = &sync.RWMutex{}
+)
+
+func SetClient(c *gin.Context, evtChan chan *model.Notification) {
+	mutex.Lock()
+	defer mutex.Unlock()
+	clientMap[c] = evtChan
+}
+
+func RemoveClient(c *gin.Context) {
+	mutex.Lock()
+	defer mutex.Unlock()
+	close(clientMap[c])
+	delete(clientMap, c)
+}
+
 func Info(title string, details string) {
 	push(model.NotificationInfo, title, details)
 }
@@ -24,9 +45,24 @@ func Success(title string, details string) {
 func push(nType model.NotificationType, title string, details string) {
 	n := query.Notification
 
-	_ = n.Create(&model.Notification{
+	data := &model.Notification{
 		Type:    nType,
 		Title:   title,
 		Details: details,
-	})
+	}
+
+	err := n.Create(data)
+	if err != nil {
+		logger.Error(err)
+		return
+	}
+	broadcast(data)
+}
+
+func broadcast(data *model.Notification) {
+	mutex.RLock()
+	defer mutex.RUnlock()
+	for _, evtChan := range clientMap {
+		evtChan <- data
+	}
 }
diff --git a/internal/site/sync.go b/internal/site/sync.go
index 186659026..cc87d2bc1 100644
--- a/internal/site/sync.go
+++ b/internal/site/sync.go
@@ -44,6 +44,7 @@ type SyncResult struct {
 	Name       string `json:"name"`
 	NewName    string `json:"new_name,omitempty"`
 	Response   gin.H  `json:"response"`
+	Error      string `json:"error"`
 }
 
 func NewSyncResult(node string, siteName string, resp *resty.Response) (s *SyncResult) {