diff --git a/src/app/showcase/doc/tree/templatedoc.ts b/src/app/showcase/doc/tree/templatedoc.ts
index d9100d1557a..035469d10dc 100644
--- a/src/app/showcase/doc/tree/templatedoc.ts
+++ b/src/app/showcase/doc/tree/templatedoc.ts
@@ -11,7 +11,7 @@ import { Code } from '../../domain/code';
         <div class="card flex justify-content-center">
             <p-tree [value]="nodes" class="w-full md:w-30rem">
                 <ng-template let-node pTemplate="url">
-                    <a [href]="node.data" target="_blank">{{ node.label }}</a>
+                    <a [href]="node.data" target="_blank" rel="noopener noreferrer" class="text-700 hover:text-primary">{{ node.label }}</a>
                 </ng-template>
                 <ng-template let-node pTemplate="default">
                     <b>{{ node.label }}</b>
@@ -57,7 +57,7 @@ export class TemplateDoc implements OnInit {
         basic: `
 <p-tree [value]="nodes" class="w-full md:w-30rem">
     <ng-template let-node pTemplate="url">
-        <a [href]="node.data" target="_blank">{{ node.label }}</a>
+         <a [href]="node.data" target="_blank" rel="noopener noreferrer" class="text-700 hover:text-primary">{{ node.label }}</a>
     </ng-template>
     <ng-template let-node pTemplate="default">
         <b>{{ node.label }}</b>
@@ -68,7 +68,7 @@ export class TemplateDoc implements OnInit {
 <div class="card flex justify-content-center">
     <p-tree [value]="nodes" class="w-full md:w-30rem">
         <ng-template let-node pTemplate="url">
-            <a [href]="node.data" target="_blank">{{ node.label }}</a>
+             <a [href]="node.data" target="_blank" rel="noopener noreferrer" class="text-700 hover:text-primary">{{ node.label }}</a>
         </ng-template>
         <ng-template let-node pTemplate="default">
             <b>{{ node.label }}</b>