diff --git a/src/components/flatTree/flatTree.template.html b/src/components/flatTree/flatTree.template.html
index 883c78e0e5fdea67043eb9029787ee735a5aa04c..642dc3ac63058e3dc905a12649d4bd8d988d0959 100644
--- a/src/components/flatTree/flatTree.template.html
+++ b/src/components/flatTree/flatTree.template.html
@@ -1,40 +1,46 @@
-<div *ngFor = "let flattenedItems of (inputItem | flattenTreePipe : findChildren | filterRowsByVisbilityPipe : findChildren : searchFilter | appendSiblingFlagPipe | clusteringPipe : clusterNumber ); let index = index" clusterContainer>
+<div *ngFor="let flattenedItems of (inputItem | flattenTreePipe : findChildren | filterRowsByVisbilityPipe : findChildren : searchFilter | appendSiblingFlagPipe | clusteringPipe : clusterNumber ); let index = index" clusterContainer>
 
-  <div [attr.clusterindex] = "index" flatTreeStart #flatTreeStart>
+  <div
+    class="pe-none"
+    [attr.clusterindex]="index"
+    flatTreeStart
+    #flatTreeStart>
   </div>
 
-  <div *ngIf = "showCluster(index)">
+  <div *ngIf="showCluster(index)">
     <div
-      *ngFor = "let flattenedItem of flattenedItems"
-      [ngClass] = "getClass(flattenedItem.flattenedTreeLevel)"
-      [attr.flattenedtreelevel] = "flattenedItem.flattenedTreeLevel" 
-      [attr.collapsed] = "flattenedItem.collapsed ? flattenedItem.collapsed : false"
-      [attr.lvlId] = "flattenedItem.lvlId"
-      [hidden] = "collapseRow(flattenedItem) "
+      *ngFor="let flattenedItem of flattenedItems"
+      [ngClass]="getClass(flattenedItem.flattenedTreeLevel)"
+      class="text-nowrap"
+      [attr.flattenedtreelevel]="flattenedItem.flattenedTreeLevel" 
+      [attr.collapsed]="flattenedItem.collapsed ? flattenedItem.collapsed : false"
+      [attr.lvlId]="flattenedItem.lvlId"
+      [hidden]="collapseRow(flattenedItem) "
       renderNode>
     
-      <span class = "padding-block-container">
+      <span class="padding-block-container">
         <span
-          *ngFor = "let block of flattenedItem.siblingFlags"
-          [attr.hidemargin] = "block"
-          class = "padding-block">
+          *ngFor="let block of flattenedItem.siblingFlags"
+          [attr.hidemargin]="block"
+          class="padding-block">
     
         </span>
       </span>
       <span 
-        *ngIf = "findChildren(flattenedItem).length > 0; else noChildren"
-        (click) = "$event.stopPropagation(); toggleCollapse(flattenedItem)" >
-        <i [ngClass] = "isCollapsed(flattenedItem) ? '' : 'r-270'" class="fas fa-chevron-down"></i>
+        class="test"
+        *ngIf="findChildren(flattenedItem).length > 0; else noChildren"
+        (click)="$event.stopPropagation(); toggleCollapse(flattenedItem)" >
+        <i [ngClass]="isCollapsed(flattenedItem) ? 'r-270' : ''" class="fas fa-chevron-down"></i>
       </span>
       <span
-        (click) = "treeNodeClick.emit({event:$event,inputItem:flattenedItem})"
-        class = "render-node-text"
-        [innerHtml] = "flattenedItem | renderPipe : renderNode ">
+        (click)="treeNodeClick.emit({event:$event,inputItem:flattenedItem})"
+        class="render-node-text"
+        [innerHtml]="flattenedItem | renderPipe : renderNode ">
       </span>
     </div>
   </div>
 
-  <div [attr.clusterindex] = "index" flatTreeEnd #flatTreeEnd>
+  <div [attr.clusterindex]="index" flatTreeEnd #flatTreeEnd>
   </div>
 </div>
 
diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index 76a78ef596f49cd91cbd672ca265a89331f7eff1..dcd4278bd4fe34378217ad9ef28e2c40d3a469fc 100644
--- a/src/res/css/extra_styles.css
+++ b/src/res/css/extra_styles.css
@@ -314,4 +314,9 @@ markdown-dom pre code
 .h-0
 {
   height: 0px;
+}
+
+.pe-none
+{
+  pointer-events: none;
 }
\ No newline at end of file
diff --git a/src/ui/regionHierachy/regionHierarchy.template.html b/src/ui/regionHierachy/regionHierarchy.template.html
index 4bca1df173961ab907436be224abae80e6f53d53..faa9ea2d7d6771a56b2cd990e0c1c33ce9ff8a19 100644
--- a/src/ui/regionHierachy/regionHierarchy.template.html
+++ b/src/ui/regionHierachy/regionHierarchy.template.html
@@ -17,18 +17,18 @@
   hideScrollbarContainer>
 
   <div treeContainer #treeContainer>
-    <div *ngIf="false" treeHeader>
+    <div treeHeader>
       <span>{{ selectedRegions.length }} {{ selectedRegions.length > 1 ? 'regions' : 'region' }} selected</span> 
       <span (click)="clearRegions($event)" *ngIf="selectedRegions.length > 0" class="btn btn-link">clear all</span>
     </div>
     
     <ng-container *ngIf="selectedParcellation && selectedParcellation.regions as regions">
-
+      <!-- TODO deprecate flat tree component, opt for material cdk infinit scroll component -->
       <flat-tree-component
         *ngFor="let region of regions"
         [flatTreeViewPort]="treeContainer"
         (treeNodeClick)="handleClickRegion($event)"
-        [inputItem]="aggregatedRegionTree"
+        [inputItem]="region"
         [renderNode]="displayTreeNode.bind(this)"
         [searchFilter]="filterTreeBySearch.bind(this)">
         
diff --git a/src/ui/signinBanner/signinBanner.template.html b/src/ui/signinBanner/signinBanner.template.html
index ca76f39d4b97109d48f62471143ff2a972ad4183..90ea9f1428ac2ebce356b4c34db4a4b87d6fc28e 100644
--- a/src/ui/signinBanner/signinBanner.template.html
+++ b/src/ui/signinBanner/signinBanner.template.html
@@ -1,12 +1,13 @@
-<ng-container *ngIf="selectedTemplate$ | async as selectedTemplate">
-  <region-hierarchy
-    [selectedRegions]="selectedRegions$ | async | filterNull"
-    (singleClickRegion)="handleRegionClick({ mode: 'single', region: $event })"
-    (doubleClickRegion)="handleRegionClick({ mode: 'double', region: $event })"
-    *ngIf="selectedParcellation$ | async as selectedParcellation"
-    [selectedParcellation]="selectedParcellation">
+<dropdown-component
+  *ngIf="!isMobile"
+  (itemSelected)="changeTemplate($event)"
+  [activeDisplay]="displayActiveTemplate"
+  [selectedItem]="selectedTemplate$ | async"
+  [inputArray]="loadedTemplates$ | async | filterNull">
 
-  </region-hierarchy>
+</dropdown-component>
+
+<ng-container *ngIf="selectedTemplate$ | async as selectedTemplate">
   <dropdown-component
     *ngIf="selectedParcellation$ | async as selectedParcellation"
     (itemSelected)="changeParcellation($event)"
@@ -15,16 +16,15 @@
     [inputArray]="selectedTemplate.parcellations">
   
   </dropdown-component>
-</ng-container>
-
-<dropdown-component
-  *ngIf="!isMobile"
-  (itemSelected)="changeTemplate($event)"
-  [activeDisplay]="displayActiveTemplate"
-  [selectedItem]="selectedTemplate$ | async"
-  [inputArray]="loadedTemplates$ | async | filterNull">
+  <region-hierarchy
+    [selectedRegions]="selectedRegions$ | async | filterNull"
+    (singleClickRegion)="handleRegionClick({ mode: 'single', region: $event })"
+    (doubleClickRegion)="handleRegionClick({ mode: 'double', region: $event })"
+    *ngIf="selectedParcellation$ | async as selectedParcellation"
+    [selectedParcellation]="selectedParcellation">
 
-</dropdown-component>
+  </region-hierarchy>
+</ng-container>
 
 <!-- help btn -->
 <div