diff --git a/src/popup/components/BookmarkFolderSession.vue b/src/popup/components/BookmarkFolderSession.vue
index 25637aa..1caa418 100644
--- a/src/popup/components/BookmarkFolderSession.vue
+++ b/src/popup/components/BookmarkFolderSession.vue
@@ -6,7 +6,7 @@ import { Icon as Iconify } from '@iconify/vue';
 import FolderGrid from './FolderGrid.vue';
 import SearchFolder from './SearchFolder.vue';
 
-const props = defineProps(['nodeTreeId'])
+const props = defineProps(['nodeTreeId']);
 
 /**
  * select folder
@@ -20,7 +20,7 @@ const bookmarkFolderId = inject('bookmarkFolderId');
 const setBookmarkFolderId = inject('setBookmarkFolderId');
 
 const resetBookmarkFolder = () => {
-  setBookmarkFolderId(bookmarkOriginFolderId.value)
+  setBookmarkFolderId(bookmarkOriginFolderId.value);
 }
 
 // the folder node selected (an object without children property)
@@ -29,8 +29,8 @@ const selectFolderNode = ref(null) // an object
 // get the node tree object
 watch(bookmarkFolderId, async () => {
   if(bookmarkFolderId.value) {
-    const result = await chrome.bookmarks.get(bookmarkFolderId.value)
-    selectFolderNode.value = result[0]
+    const result = await chrome.bookmarks.get(bookmarkFolderId.value);
+    selectFolderNode.value = result[0];
   }
 }, { immediate: true })
 
@@ -42,16 +42,18 @@ const setNewFolder = inject('setNewFolder');
  */
 // node tree (with children property)
 // nodeTreeId is folder id of node tree start point
-const nodeTreeId = ref(props.nodeTreeId)
-const nodeTree = ref(null) // an object (data structure is a tree)
+const nodeTreeId = ref(props.nodeTreeId);
+const nodeTreeFolder = ref(null);
+const nodeTree = ref(null); // an object (data structure is a tree)
+
 
 // set the node tree id manually or automatically
 const setNodeTreeId = (id) => {
-  nodeTreeId.value = id
-  showFolderSearch.value = false
+  nodeTreeId.value = id;
+  showFolderSearch.value = false;
 }
-provide('nodeTreeId', nodeTreeId)
-provide('setNodeTreeId', setNodeTreeId)
+provide('nodeTreeId', nodeTreeId);
+provide('setNodeTreeId', setNodeTreeId);
 
 
 watch(bookmarkOriginFolderId, async () => {
@@ -60,17 +62,17 @@ watch(bookmarkOriginFolderId, async () => {
 
 // watch the nodeTreeId change and get the node tree object
 watch(nodeTreeId, async () => {
-  const result = await chrome.bookmarks.getSubTree(nodeTreeId.value)
-  const targetNodeTree = result[0]
+  const result = await chrome.bookmarks.getSubTree(nodeTreeId.value);
+  const targetNodeTree = result[0];
   // sort the nodeTree children nodes
   // move the folder node to top
   targetNodeTree.children.sort((nodeA, nodeB) => {
     if (nodeA.children && !nodeB.children) {
-      return -1
+      return -1;
     } else if (!nodeA.children && nodeB.children) {
-      return 1
+      return 1;
     } else {
-      return 0
+      return 0;
     }
   })
   nodeTree.value = targetNodeTree
@@ -79,30 +81,34 @@ watch(nodeTreeId, async () => {
 /**
  * folder path in component header navbar
  */
-const folderPath = ref([])
+const folderPath = ref([]);
 
 const getFolderPath = async (id) => {
-  const resultForFolderNode = await chrome.bookmarks.get(id)
-  const folderNode = resultForFolderNode[0]
-  folderPath.value.unshift(folderNode)
+  const resultForFolderNode = await chrome.bookmarks.get(id);
+  const folderNode = resultForFolderNode[0];
+  folderPath.value.unshift(folderNode);
   if (folderNode.parentId) {
     // recursion get the folder path
     // from the node tree top folder to the root folder
-    getFolderPath(folderNode.parentId)
+    getFolderPath(folderNode.parentId);
   }
 }
 
 // watch the nodeTreeId change and update the folder path
 watch(nodeTreeId, async () => {
+  const resultForFolderNode = await chrome.bookmarks.get(nodeTreeId.value);
+  nodeTreeFolder.value = resultForFolderNode[0];
   // reset folder path
-  folderPath.value = []
-  await getFolderPath(nodeTreeId.value)
+  folderPath.value = [];
+  if (nodeTreeFolder.value?.parentId) {
+    await getFolderPath(nodeTreeFolder.value.parentId);
+  }
 }, { immediate: true })
 
 /**
  * search folder
  */
-const showFolderSearch = ref(false)
+const showFolderSearch = ref(false);
 </script>
 
 <template>
@@ -139,7 +145,7 @@ const showFolderSearch = ref(false)
       </div>
     </div>
     <div class="w-full">
-      <FolderGrid v-if="nodeTree" v-show="!showFolderSearch" :folder-path="folderPath" :nodes="nodeTree.children"></FolderGrid>
+      <FolderGrid v-if="nodeTree" v-show="!showFolderSearch" :node-tree-folder="nodeTreeFolder" :folder-path="folderPath" :nodes="nodeTree.children"></FolderGrid>
       <SearchFolder v-show="showFolderSearch" :show-state="showFolderSearch" @hide="showFolderSearch = false"></SearchFolder>
     </div>
   </section>
diff --git a/src/popup/components/FolderGrid.vue b/src/popup/components/FolderGrid.vue
index 3da1111..673b05e 100644
--- a/src/popup/components/FolderGrid.vue
+++ b/src/popup/components/FolderGrid.vue
@@ -5,7 +5,7 @@ import { useGetFaviconURL } from '@/composables/getFaviconURL';
 import { useGetTranslation } from '@/composables/getTranslation';
 import FolderGridItem from './FolderGridItem.vue';
 
-const props = defineProps(['folderPath', 'nodes']);
+const props = defineProps(['nodeTreeFolder', 'folderPath', 'nodes', ]);
 
 const showBookmark = ref(true)
 provide('showBookmark', showBookmark)
@@ -15,6 +15,7 @@ const setNodeTreeId = inject('setNodeTreeId')
 
 const selectFolderType = inject('selectFolderType')
 const bookmarkFolderId = inject('bookmarkFolderId')
+const setBookmarkFolderId = inject('setBookmarkFolderId')
 
 // new folder
 const newFolder = inject('newFolder')
@@ -58,17 +59,26 @@ const setNewFolderHandler = () => {
   <div class="rounded-md shadow shadow-orange-100">
     <!-- grid header -->
     <div class="px-2 py-1.5 flex justify-between items-start gap-4 bg-orange-50/50 border-b border-orange-200 rounded-t-md shadow shadow-orange-50">
-      <div class="grow flex justify-start items-start">
+      <div class="grow flex justify-start items-start gap-1">
         <button :title="useGetTranslation('popup_main_bookmark_folder_section_toggle_bookmark_btn_title')" @click="showBookmark = !showBookmark" class="shrink-0 p-1 rounded transition-colors duration-300" :class="showBookmark ? 'hover:bg-orange-100' : 'hover:bg-orange-200'">
           <img src="@/assets/nut-mark.svg" alt="nut mark icon" class="w-4 h-4" :class="showBookmark ? 'opacity-100' : 'opacity-30'">
         </button>
         <!-- folder path -->
-        <div class="flex flex-wrap justify-start items-center gap-1">
-          <div v-for="(folder, index) in props.folderPath" :key="folder.id" class="flex justify-center items-center gap-0.5 text-orange-500">
+        <div class="flex flex-wrap justify-start items-center gap-0.5">
+          <template v-for="folder in props.folderPath" :key="folder.id">
+            <span class="text-orange-500 text-xs select-none">/</span>
             <button :title="useGetTranslation('popup_main_bookmark_folder_section_folder_path_nav_btn_title')" class="px-1.5 py-1 text-xs font-bold rounded transition-colors duration-300"
-            :class="selectFolderType === 'old' && bookmarkFolderId === folder.id ? 'text-green-500 hover:bg-green-100 ' : 'text-orange-500 hover:bg-orange-100 '"
+            :class="selectFolderType === 'old' && bookmarkFolderId === folder.id ? 'text-green-500 hover:bg-green-100' : 'text-orange-500 hover:bg-orange-100'"
             @click="setNodeTreeId(folder.id)">{{ folder.id === '0' ? useGetTranslation('popup_main_bookmark_folder_section_folder_path_nav_root_btn_content') : (folder.title || useGetTranslation('bookmark_folder_default_name')) }}</button>
-            <span v-if="index < props.folderPath.length -1">/</span>
+          </template>
+          <span class="text-orange-500 text-xs select-none">/</span>
+          <button v-if="props.nodeTreeFolder && props.nodeTreeFolder.id !== '0'" class="px-1.5 py-1 text-xs font-bold hover:text-green-500 hover:bg-green-100 rounded transition-colors duration-300"
+              :class="props.nodeTreeFolder && selectFolderType === 'old' && bookmarkFolderId === props.nodeTreeFolder.id ? 'text-green-500' : 'text-orange-500'"
+              @click="setBookmarkFolderId(props.nodeTreeFolder.id)">
+            {{ props.nodeTreeFolder.title || useGetTranslation('bookmark_folder_default_name') }}
+          </button>
+          <div v-if="props.nodeTreeFolder && props.nodeTreeFolder.id === '0'" class="px-1.5 py-1 text-xs font-bold text-orange-500 rounded select-none">
+            {{ useGetTranslation('popup_main_bookmark_folder_section_folder_path_nav_root_btn_content') }}
           </div>
         </div>
       </div>