diff --git a/doc/tree/TemplateDoc.vue b/doc/tree/TemplateDoc.vue
index 871ca5a59..e65e46f97 100644
--- a/doc/tree/TemplateDoc.vue
+++ b/doc/tree/TemplateDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Tree is used to display hierarchical data.</p>
+        <p>Each node can have a distinct template by matching the <i>type</i> property to the slot name.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Tree :value="nodes" class="w-full md:w-30rem">
@@ -8,7 +8,7 @@
                 <b>{{ slotProps.node.label }}</b>
             </template>
             <template #url="slotProps">
-                <a :href="slotProps.node.data">{{ slotProps.node.label }}</a>
+                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-700 hover:text-primary">{{ slotProps.node.label }}</a>
             </template>
         </Tree>
     </div>
@@ -27,7 +27,7 @@ export default {
                         { key: '0-0', label: 'What is Vue.js?', data: 'https://vuejs.org/guide/introduction.html#what-is-vue', type: 'url' },
                         { key: '0-1', label: 'Quick Start', data: 'https://vuejs.org/guide/quick-start.html#quick-start', type: 'url' },
                         { key: '0-2', label: 'Creating a Vue Application', data: 'https://vuejs.org/guide/essentials/application.html#creating-a-vue-application', type: 'url' },
-                        { key: '0-3', label: 'Conditionals Rendering', data: 'https://vuejs.org/guide/essentials/conditional.html#conditional-rendering', type: 'url' }
+                        { key: '0-3', label: 'Conditional Rendering', data: 'https://vuejs.org/guide/essentials/conditional.html#conditional-rendering', type: 'url' }
                     ]
                 },
                 {
@@ -59,7 +59,7 @@ export default {
                 <b>{{ slotProps.node.label }}</b>
             </template>
             <template #url="slotProps">
-                <a :href="slotProps.node.data">{{ slotProps.node.label }}</a>
+                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-700 hover:text-primary">{{ slotProps.node.label }}</a>
             </template>
         </Tree>
     </div>
@@ -77,7 +77,7 @@ export default {
                         { key: '0-0', label: 'What is Vue.js?', data: 'https://vuejs.org/guide/introduction.html#what-is-vue', type: 'url' },
                         { key: '0-1', label: 'Quick Start', data: 'https://vuejs.org/guide/quick-start.html#quick-start', type: 'url' },
                         { key: '0-2', label: 'Creating a Vue Application', data: 'https://vuejs.org/guide/essentials/application.html#creating-a-vue-application', type: 'url' },
-                        { key: '0-3', label: 'Conditionals Rendering', data: 'https://vuejs.org/guide/essentials/conditional.html#conditional-rendering', type: 'url' }
+                        { key: '0-3', label: 'Conditional Rendering', data: 'https://vuejs.org/guide/essentials/conditional.html#conditional-rendering', type: 'url' }
                     ]
                 },
                 {
@@ -103,7 +103,7 @@ export default {
                 <b>{{ slotProps.node.label }}</b>
             </template>
             <template #url="slotProps">
-                <a :href="slotProps.node.data">{{ slotProps.node.label }}</a>
+                <a :href="slotProps.node.data" target="_blank" rel="noopener noreferrer" class="text-700 hover:text-primary">{{ slotProps.node.label }}</a>
             </template>
         </Tree>
     </div>
@@ -120,7 +120,7 @@ const nodes = ref([
             { key: '0-0', label: 'What is Vue.js?', data: 'https://vuejs.org/guide/introduction.html#what-is-vue', type: 'url' },
             { key: '0-1', label: 'Quick Start', data: 'https://vuejs.org/guide/quick-start.html#quick-start', type: 'url' },
             { key: '0-2', label: 'Creating a Vue Application', data: 'https://vuejs.org/guide/essentials/application.html#creating-a-vue-application', type: 'url' },
-                { key: '0-3', label: 'Conditionals Rendering', data: 'https://vuejs.org/guide/essentials/conditional.html#conditional-rendering', type: 'url' }
+                { key: '0-3', label: 'Conditional Rendering', data: 'https://vuejs.org/guide/essentials/conditional.html#conditional-rendering', type: 'url' }
         ]
     },
     {