diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 5bb6deb..f520eea 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -20,10 +20,10 @@ import {JoyrideService} from 'ngx-joyride';
 export class AppComponent implements AfterViewInit {
     title = 'Netgrif Application Builder';
 
-    @HostListener('window:beforeunload', ['$event'])
-    WindowBeforeUnload($event: any) {
-        $event.returnValue = 'Your data will be lost!';
-    }
+    // @HostListener('window:beforeunload', ['$event'])
+    // WindowBeforeUnload($event: any) {
+    //     $event.returnValue = 'Your data will be lost!';
+    // }
 
     constructor(
         private router: Router,
diff --git a/src/app/modeler/actions-mode/action-detail/action-detail.component.html b/src/app/modeler/actions-mode/action-detail/action-detail.component.html
index 71b0f07..9ed48f9 100644
--- a/src/app/modeler/actions-mode/action-detail/action-detail.component.html
+++ b/src/app/modeler/actions-mode/action-detail/action-detail.component.html
@@ -1,21 +1,17 @@
 <div class="no-overflow" *ngIf="!isFunctionsModeSelected()" fxFlex>
     <mat-tree class="tree overflow-hidden" [dataSource]="dataSource" [treeControl]="treeControl"
-              style="display: flex; flex-direction: column; flex: auto">
+              >
         <!--  Leaf node template  -->
         <mat-tree-node *matTreeNodeDef="let node; when isLeafNode" #actionNode>
-            @defer (on viewport) {
-            <div class="mat-tree-node tree-offset" fxLayout="row" fxLayoutAlign="start center">
+            <div class="mat-tree-node tree-offset">
                 <nab-action-editor-list [leafNode]="node"
                                         (actionChanged)="actionChangedListener($event, node)"
                                         class="full-width editor-list-area-padding"></nab-action-editor-list>
             </div>
-            } @placeholder {
-            <div>loading...</div>
-            }
         </mat-tree-node>
         <!--  Inner node template  -->
         <mat-nested-tree-node *matTreeNodeDef="let node; when: isInnerNode" matTreeNodePadding #eventNode>
-            <div class="mat-tree-node" fxLayout="row" fxLayoutAlign="start center">
+            <div class="mat-tree-node">
                 <button mat-icon-button matTreeNodeToggle
                         [attr.aria-label]="'toggle ' + node.name">
                     <mat-icon class="mat-icon-rtl-mirror">
@@ -30,7 +26,7 @@
         </mat-nested-tree-node>
         <!--  + node template  -->
         <mat-nested-tree-node *matTreeNodeDef="let node; when: isAddNode" matTreeNodePadding #phaseNode>
-            <div class="mat-tree-node" fxLayout="row" fxLayoutAlign="start center">
+            <div class="mat-tree-node">
                 <button mat-icon-button matTreeNodeToggle
                         [attr.aria-label]="'toggle ' + node.name"
                         [disabled]="!actionsExpandable(node)">
diff --git a/src/app/modeler/actions-mode/action-detail/action-detail.component.ts b/src/app/modeler/actions-mode/action-detail/action-detail.component.ts
index 56934da..a718553 100644
--- a/src/app/modeler/actions-mode/action-detail/action-detail.component.ts
+++ b/src/app/modeler/actions-mode/action-detail/action-detail.component.ts
@@ -28,6 +28,7 @@ export class ActionDetailComponent implements OnInit {
     // TREE
     public treeControl = new NestedTreeControl<TreeNode>(node => node.children);
     public dataSource = new MatTreeNestedDataSource<TreeNode>();
+    public loading: boolean;
 
     constructor(private _modelService: ModelService,
                 private _actionsModeService: ActionsModeService,
diff --git a/src/app/modeler/actions-mode/action-editor/action-editor-menu/action-editor-menu.component.html b/src/app/modeler/actions-mode/action-editor/action-editor-menu/action-editor-menu.component.html
index 0fb57c7..c7ceac8 100644
--- a/src/app/modeler/actions-mode/action-editor/action-editor-menu/action-editor-menu.component.html
+++ b/src/app/modeler/actions-mode/action-editor/action-editor-menu/action-editor-menu.component.html
@@ -11,31 +11,33 @@
                 </span>
             </mat-panel-title>
         </mat-expansion-panel-header>
-        <mat-list>
-            <mat-list-item *ngFor="let item of actions.actions" class="menu-list-item">
-                <div fxLayout="row" fxFlex fxLayoutAlign="start center" class="test" *ngIf="item.label.length > 20">
-                    <button mat-button
-                            class="action-menu-panel"
-                            (click)="addTextToEditor(item.action)">
-                        <span matTooltip="{{item.label}}">{{item.label.substring(0, 20)}}...</span>
-                    </button>
-                </div>
-                <div fxLayout="row" fxFlex fxLayoutAlign="start center" class="test" *ngIf="item.label.length <= 20">
-                    <button mat-button
-                            class="action-menu-panel"
-                            (click)="addTextToEditor(item.action)">{{item.label}}
-                    </button>
-                </div>
-                <div fxLayout="row" fxFlex fxLayoutAlign="end center">
-                    <button mat-button
-                            *ngIf="item.description || item.header"
-                            class="description-info-button"
-                            (click)="handleClick(item)"
-                            (blur)="onBlur($event)">
-                        <mat-icon>info</mat-icon>
-                    </button>
-                </div>
-            </mat-list-item>
-        </mat-list>
+        <ng-template matExpansionPanelContent>
+            <mat-list>
+                <mat-list-item *ngFor="let item of actions.actions" class="menu-list-item">
+                    <div fxLayout="row" fxFlex fxLayoutAlign="start center" *ngIf="item.label.length > 28">
+                        <button mat-button
+                                class="action-menu-panel"
+                                (click)="addTextToEditor(item.action)">
+                            <span matTooltip="{{item.label}}">{{item.label.substring(0, 28)}}...</span>
+                        </button>
+                    </div>
+                    <div fxLayout="row" fxFlex fxLayoutAlign="start center" *ngIf="item.label.length <= 28">
+                        <button mat-button
+                                class="action-menu-panel"
+                                (click)="addTextToEditor(item.action)">{{item.label}}
+                        </button>
+                    </div>
+                    <div fxLayout="row" fxFlex fxLayoutAlign="end center">
+                        <button mat-icon-button
+                                *ngIf="item.description || item.header"
+                                class="description-info-button"
+                                (click)="handleClick(item)"
+                                (blur)="onBlur($event)">
+                            <mat-icon>info</mat-icon>
+                        </button>
+                    </div>
+                </mat-list-item>
+            </mat-list>
+        </ng-template>
     </mat-expansion-panel>
 </mat-accordion>
diff --git a/src/app/modeler/actions-mode/action-editor/action-editor-menu/action-editor-menu.component.scss b/src/app/modeler/actions-mode/action-editor/action-editor-menu/action-editor-menu.component.scss
index f6c2e57..a947e9d 100644
--- a/src/app/modeler/actions-mode/action-editor/action-editor-menu/action-editor-menu.component.scss
+++ b/src/app/modeler/actions-mode/action-editor/action-editor-menu/action-editor-menu.component.scss
@@ -1,5 +1,6 @@
 .action-menu-panel {
     font-size: 14px;
+    letter-spacing: normal;
 }
 
 .description-info-button {
@@ -18,6 +19,7 @@
 
 .actions-list-expansion-panel {
     box-shadow: none !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 }
 
 .itemLabel {
@@ -32,3 +34,8 @@ mat-expansion-panel-header {
 .mat-expansion-panel-body {
     padding-left: 0 !important;
 }
+
+.menu-list-item {
+    padding-left: 0;
+    padding-right: 0;
+}
diff --git a/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.html b/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.html
index d95f9e1..13e3666 100644
--- a/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.html
+++ b/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.html
@@ -12,60 +12,62 @@
     <mat-sidenav-content>
         <mat-expansion-panel (closed)="setHeightOnClose(index, action); closeDrawer()" mwlResizeHandle mwlResizable
                              id="{{action.event + '_' + action.phase + '_' + index}}"
-                             [resizeEdges]="{ bottom: true }"
+                             [resizeEdges]="{ bottom: true }" class="panel-fix"
                              (resizing)="onResizeEvent($event, action.event + '_' + action.phase + '_' + index)">
-            <mat-expansion-panel-header>
-                action
+            <mat-expansion-panel-header class="header">
+                Action: {{action.id}}
             </mat-expansion-panel-header>
-            <div fxLayout="row">
-                <div fxFlex fxLayoutGap="3em" fxLayoutAlign="start center">
-                    <button type="button" mat-button (click)="openDrawer()">
-                        <mat-icon *ngIf="drawer.opened; else closed">
-                            keyboard_arrow_left
-                        </mat-icon>
-                        <ng-template #closed>
+            <ng-template matExpansionPanelContent>
+                <div fxLayout="row">
+                    <div fxFlex fxLayoutGap="3em" fxLayoutAlign="start center">
+                        <button type="button" mat-button (click)="openDrawer()">
+                            <mat-icon *ngIf="drawer.opened; else closed">
+                                keyboard_arrow_left
+                            </mat-icon>
+                            <ng-template #closed>
+                                <mat-icon>
+                                    keyboard_arrow_right
+                                </mat-icon>
+                            </ng-template>
                             <mat-icon>
-                                keyboard_arrow_right
+                                functions
                             </mat-icon>
-                        </ng-template>
-                        <mat-icon>
-                            functions
-                        </mat-icon>
-                        Functions
-                    </button>
-                </div>
+                            Functions
+                        </button>
+                    </div>
 
-                <div fxFlex="50" fxLayoutGap="3em" fxLayoutAlign="end center">
-                    <mat-menu #referencesMenu="matMenu">
-                        <ng-container *ngFor="let configuration of editorConfigurations">
-                            <nab-action-editor-menu-item [trigger]="referenceItemTrigger" #referenceItem="menuInOtherComponent" [configuration]="configuration" [hidden]="!referencesOpened"></nab-action-editor-menu-item>
-                            <button mat-menu-item #referenceItemTrigger="matMenuTrigger" [matMenuTriggerFor]="referenceItem.menu">
-                                {{configuration.title}}
-                            </button>
-                        </ng-container>
-                    </mat-menu>
-                    <button #matButton fxFlexAlign="end center" type="button" mat-button
-                            #referencesTrigger="matMenuTrigger"
-                            [matMenuTriggerFor]="referencesMenu">
-                        <mat-icon>
-                            link
-                        </mat-icon>
-                        References
-                        <mat-icon *ngIf="referencesTrigger.menuOpen; else closedMenu">
-                            keyboard_arrow_up
-                        </mat-icon>
-                        <ng-template #closedMenu>
+                    <div fxFlex="50" fxLayoutGap="3em" fxLayoutAlign="end center">
+                        <mat-menu #referencesMenu="matMenu">
+                            <ng-container *ngFor="let configuration of editorConfigurations">
+                                <nab-action-editor-menu-item [trigger]="referenceItemTrigger" #referenceItem="menuInOtherComponent" [configuration]="configuration" [hidden]="!referencesOpened"></nab-action-editor-menu-item>
+                                <button mat-menu-item #referenceItemTrigger="matMenuTrigger" [matMenuTriggerFor]="referenceItem.menu">
+                                    {{configuration.title}}
+                                </button>
+                            </ng-container>
+                        </mat-menu>
+                        <button #matButton fxFlexAlign="end center" type="button" mat-button
+                                #referencesTrigger="matMenuTrigger"
+                                [matMenuTriggerFor]="referencesMenu">
                             <mat-icon>
-                                keyboard_arrow_down
+                                link
                             </mat-icon>
-                        </ng-template>
-                    </button>
+                            References
+                            <mat-icon *ngIf="referencesTrigger.menuOpen; else closedMenu">
+                                keyboard_arrow_up
+                            </mat-icon>
+                            <ng-template #closedMenu>
+                                <mat-icon>
+                                    keyboard_arrow_down
+                                </mat-icon>
+                            </ng-template>
+                        </button>
+                    </div>
+                </div>
+                <div fxLayout="column" fxLayoutAlign="start stretch" id="{{name + '_div'}}">
+    <!--                <ngx-monaco-editor class="full-size-editor" id="{{name + '_editor'}}" [options]="editorOptions"-->
+    <!--                                   [formControl]="formControl" (onInit)="onInit($event)"></ngx-monaco-editor>-->
                 </div>
-            </div>
-            <div fxLayout="column" fxLayoutAlign="start stretch" id="{{name + '_div'}}">
-<!--                <ngx-monaco-editor class="full-size-editor" id="{{name + '_editor'}}" [options]="editorOptions"-->
-<!--                                   [formControl]="formControl" (onInit)="onInit($event)"></ngx-monaco-editor>-->
-            </div>
+            </ng-template>
             <mat-action-row>
                 <div *ngIf="action.type === 'TRANSITION'" fxLayout="row" fxLayoutAlign="start center" class="netgrif-input">
                     <mat-form-field class="margin-left-8px">
diff --git a/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.scss b/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.scss
index 3590a3a..8b658bb 100644
--- a/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.scss
+++ b/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.scss
@@ -32,3 +32,12 @@
 .mat-action-row {
     padding: 4px 16px 4px 16px;
 }
+
+.header {
+    height: 48px !important;
+}
+
+.panel-fix {
+    margin: 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
diff --git a/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.ts b/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.ts
index 86ea47f..08aebef 100644
--- a/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.ts
+++ b/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.ts
@@ -364,7 +364,7 @@ export class ActionEditorComponent implements OnInit {
         element.style.height = newHeight + 'px';
         const innerSize = newHeight - headerSize - bottomSize - 45;
         div.style.height = innerSize + 'px';
-        if (editorObject !== undefined) {
+        if (editorObject !== undefined && editorObject !== null) {
             editorObject.style.height = innerSize + 'px';
         }
 
diff --git a/src/app/modeler/actions-mode/action-master/action-master.component.html b/src/app/modeler/actions-mode/action-master/action-master.component.html
index 894058e..59012ba 100644
--- a/src/app/modeler/actions-mode/action-master/action-master.component.html
+++ b/src/app/modeler/actions-mode/action-master/action-master.component.html
@@ -1,6 +1,6 @@
 <div fxLayout="column" class="height-fix">
-
-        <div *ngIf="!isFunctionsModeSelected()" class="height-max" matSort (matSortChange)="sortData($event)">
+    <div class="height-max" matSort (matSortChange)="sortData($event)">
+        <div *ngIf="!isFunctionsModeSelected()" class="height-100">
             <div mat-subheader class="header-action">
                 <p fxFlex="40" mat-sort-header="id"><strong>ID</strong></p>
                 <p fxFlex mat-sort-header="name">Name</p>
@@ -12,7 +12,7 @@
                                   [masterService]="masterService" ></nab-main-master-item>
             </mat-action-list>
         </div>
-        <div *ngIf="isFunctionsModeSelected()" class="height-max" matSort (matSortChange)="sortData($event)">
+        <div *ngIf="isFunctionsModeSelected()" class="height-100">
             <div mat-subheader class="header-action">
                 <p fxFlex="40"><strong>Name</strong></p>
                 <p fxFlex>Scope</p>
@@ -27,7 +27,7 @@
                                   [masterService]="masterService" ></nab-main-master-item>
             </mat-action-list>
         </div>
-
+    </div>
     <mat-paginator fxFlex class="footer" [length]="totalSize" [pageSize]="pageSize" [pageIndex]="pageIndex"
                    [pageSizeOptions]="pageSizeOptions" (page)="onPageChanged($event)" showFirstLastButtons="false">
     </mat-paginator>
diff --git a/src/app/modeler/actions-mode/action-master/action-master.component.scss b/src/app/modeler/actions-mode/action-master/action-master.component.scss
index 395d6a9..ac80227 100644
--- a/src/app/modeler/actions-mode/action-master/action-master.component.scss
+++ b/src/app/modeler/actions-mode/action-master/action-master.component.scss
@@ -35,3 +35,9 @@ mat-paginator {
 .height-fix {
     height: calc(100vh - 42px);
 }
+
+.height-100 {
+    box-sizing: border-box;
+    height: calc(100%);
+    overflow: auto;
+}
diff --git a/src/app/modeler/components/master-detail/master-detail.component.scss b/src/app/modeler/components/master-detail/master-detail.component.scss
index 31fec8b..502452b 100644
--- a/src/app/modeler/components/master-detail/master-detail.component.scss
+++ b/src/app/modeler/components/master-detail/master-detail.component.scss
@@ -9,7 +9,7 @@
     overflow: auto;
 }
 
-ng-template {
+.fill-space {
     width: 100%;
     height: 100%;
 }
@@ -22,6 +22,3 @@ ng-template {
     border-left: 1px solid #dddddd;
 }
 
-mwlResizable {
-    box-sizing: border-box; // required for the enableGhostResize option to work
-}
diff --git a/src/app/modeler/i18n-mode/languages/languages.component.ts b/src/app/modeler/i18n-mode/languages/languages.component.ts
index a53c44a..ed1c0b2 100644
--- a/src/app/modeler/i18n-mode/languages/languages.component.ts
+++ b/src/app/modeler/i18n-mode/languages/languages.component.ts
@@ -14,9 +14,8 @@ import {map, startWith} from 'rxjs/operators';
 })
 export class LanguagesComponent implements OnInit {
 
-    @ViewChild('newLanguageSelect')
-    newLanguageSelect: MatSelect;
-    newLocaleFormControl = new FormControl('', {
+    @ViewChild('newLanguageSelect') newLanguageSelect: MatSelect;
+    newLocaleFormControl = new FormControl<Locale>(undefined, {
         validators: [this.autocompleteStringValidator(), Validators.required]
     });
     filteredLocales: Observable<Array<Locale>>;
@@ -68,8 +67,7 @@ export class LanguagesComponent implements OnInit {
 
     addLocal() {
         console.log(this.newLocaleFormControl.value);
-        // TODO: release/4.0.0
-        // this.i18nService.addLocale(this.newLocaleFormControl.value.languageCode);
-        // this.newLocaleFormControl.reset();
+        this.i18nService.addLocale(this.newLocaleFormControl.value.languageCode);
+        this.newLocaleFormControl.reset();
     }
 }
diff --git a/src/app/modeler/i18n-mode/languages/progress/progress.component.html b/src/app/modeler/i18n-mode/languages/progress/progress.component.html
index 8b0ec33..9f91d01 100644
--- a/src/app/modeler/i18n-mode/languages/progress/progress.component.html
+++ b/src/app/modeler/i18n-mode/languages/progress/progress.component.html
@@ -1,7 +1,7 @@
-<mat-card fxLayout="row" fxLayoutAlign="start center">
+<div class="card" fxLayout="row" fxLayoutAlign="start center">
     <nab-flag [locale]="locale"></nab-flag>
     <span fxFlex>{{locale.prettyName}}</span>
     <button mat-icon-button class="button-line" matTooltip="Remove locale" (click)="removeLocale()">
         <mat-icon>delete</mat-icon>
     </button>
-</mat-card>
+</div>
diff --git a/src/app/modeler/i18n-mode/languages/progress/progress.component.scss b/src/app/modeler/i18n-mode/languages/progress/progress.component.scss
index 7a45060..525b502 100644
--- a/src/app/modeler/i18n-mode/languages/progress/progress.component.scss
+++ b/src/app/modeler/i18n-mode/languages/progress/progress.component.scss
@@ -4,7 +4,12 @@ nab-flag {
     padding-right: 16px;
 }
 
-button {
+.button-line {
     width: 40px;
     max-width: 40px;
 }
+
+.card {
+    padding: 0 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
diff --git a/src/app/modeler/i18n-mode/translations/translation-group/data-translation/data-translation.component.html b/src/app/modeler/i18n-mode/translations/translation-group/data-translation/data-translation.component.html
index 79876b4..e1e6a11 100644
--- a/src/app/modeler/i18n-mode/translations/translation-group/data-translation/data-translation.component.html
+++ b/src/app/modeler/i18n-mode/translations/translation-group/data-translation/data-translation.component.html
@@ -1,19 +1,27 @@
-<!--TODO: NAB-327 async load: https://medium.com/@vyakymenko/increasing-rendering-performance-in-angular-with-lazy-render-ngfor-ae8c5d16e194-->
 <div fxLayout="column" *ngFor="let dataVariable of model.getDataSet(); let i = index">
-    <h3>{{dataVariable.title.value}} [{{dataVariable.id}}]</h3>
-    <nab-i18n-field [field]="dataVariable.title" [name]="'Title'" [translation]="translation"></nab-i18n-field>
-    <nab-i18n-field [field]="dataVariable.placeholder" [name]="'Placeholder'" [translation]="translation"></nab-i18n-field>
-    <nab-i18n-field [field]="dataVariable.desc" [name]="'Description'" [translation]="translation"></nab-i18n-field>
-    <nab-i18n-field *ngIf="isI18nField(dataVariable)" [field]="dataVariable.init" [name]="'Init'" [translation]="translation"></nab-i18n-field>
-    <div *ngIf="dataVariable.options?.length > 0">
-        <h4>Options:</h4>
-        <nab-i18n-field *ngFor="let option of dataVariable.options" [field]="option.value"
-                        [name]="option.key" class="options" [translation]="translation"></nab-i18n-field>
-    </div>
-    <div *ngIf="dataVariable.validations?.length > 0">
-        <h4>Validations:</h4>
-        <nab-i18n-field *ngFor="let validation of dataVariable.validations" [field]="validation.message"
-                        [name]="validation.expression.expression" class="options" [translation]="translation"></nab-i18n-field>
-    </div>
-    <mat-divider *ngIf="notLast(i)"></mat-divider>
+    @defer (on viewport) {
+        <div>
+            <h3>{{dataVariable.title.value}} [{{dataVariable.id}}]</h3>
+            <nab-i18n-field [field]="dataVariable.title" [name]="'Title'" [translation]="translation"></nab-i18n-field>
+            <nab-i18n-field [field]="dataVariable.placeholder" [name]="'Placeholder'" [translation]="translation"></nab-i18n-field>
+            <nab-i18n-field [field]="dataVariable.desc" [name]="'Description'" [translation]="translation"></nab-i18n-field>
+            <nab-i18n-field *ngIf="isI18nField(dataVariable)" [field]="dataVariable.init" [name]="'Init'" [translation]="translation"></nab-i18n-field>
+            <div *ngIf="dataVariable.options?.length > 0">
+                <h4>Options:</h4>
+                <nab-i18n-field *ngFor="let option of dataVariable.options" [field]="option.value"
+                                [name]="option.key" class="options" [translation]="translation"></nab-i18n-field>
+            </div>
+            <div *ngIf="dataVariable.validations?.length > 0">
+                <h4>Validations:</h4>
+                <nab-i18n-field *ngFor="let validation of dataVariable.validations" [field]="validation.message"
+                                [name]="validation.expression.expression" class="options" [translation]="translation"></nab-i18n-field>
+            </div>
+            <mat-divider *ngIf="notLast(i)"></mat-divider>
+        </div>
+    } @placeholder {
+        <div>
+            <h3>{{dataVariable.title.value}} [{{dataVariable.id}}]</h3>
+            <mat-spinner></mat-spinner>
+        </div>
+    }
 </div>
diff --git a/src/app/modeler/i18n-mode/translations/translation-group/data-translation/data-translation.component.scss b/src/app/modeler/i18n-mode/translations/translation-group/data-translation/data-translation.component.scss
index dd75488..ec79209 100644
--- a/src/app/modeler/i18n-mode/translations/translation-group/data-translation/data-translation.component.scss
+++ b/src/app/modeler/i18n-mode/translations/translation-group/data-translation/data-translation.component.scss
@@ -1,3 +1,6 @@
 .options {
-    margin-left: 16px;
+}
+
+.viewport {
+    height: calc(100vh - 253px);
 }
diff --git a/src/app/modeler/i18n-mode/translations/translation-group/data-translation/data-translation.component.ts b/src/app/modeler/i18n-mode/translations/translation-group/data-translation/data-translation.component.ts
index d22febb..fcb0b8c 100644
--- a/src/app/modeler/i18n-mode/translations/translation-group/data-translation/data-translation.component.ts
+++ b/src/app/modeler/i18n-mode/translations/translation-group/data-translation/data-translation.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {DataVariable, I18nTranslations, PetriNet} from '@netgrif/petriflow';
 import {I18nModeService} from '../../../i18n-mode.service';
 import {ModelService} from '../../../../services/model/model.service';
diff --git a/src/app/modeler/i18n-mode/translations/translation-group/model-translation/model-translation.component.html b/src/app/modeler/i18n-mode/translations/translation-group/model-translation/model-translation.component.html
index 908c8cc..538dc8e 100644
--- a/src/app/modeler/i18n-mode/translations/translation-group/model-translation/model-translation.component.html
+++ b/src/app/modeler/i18n-mode/translations/translation-group/model-translation/model-translation.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="column">
+<div fxLayout="column" class="padding-top">
     <nab-i18n-field [field]="model.title" [name]="'Title'" [translation]="translation"></nab-i18n-field>
     <nab-i18n-field [field]="model.caseName" [name]="'Default case name'" [translation]="translation"></nab-i18n-field>
 </div>
diff --git a/src/app/modeler/i18n-mode/translations/translation-group/model-translation/model-translation.component.scss b/src/app/modeler/i18n-mode/translations/translation-group/model-translation/model-translation.component.scss
index e69de29..c8c3576 100644
--- a/src/app/modeler/i18n-mode/translations/translation-group/model-translation/model-translation.component.scss
+++ b/src/app/modeler/i18n-mode/translations/translation-group/model-translation/model-translation.component.scss
@@ -0,0 +1,3 @@
+.padding-top {
+    padding-top: 8px;
+}
diff --git a/src/app/modeler/i18n-mode/translations/translation-group/role-translation/role-translation.component.html b/src/app/modeler/i18n-mode/translations/translation-group/role-translation/role-translation.component.html
index a5f393d..be15d3b 100644
--- a/src/app/modeler/i18n-mode/translations/translation-group/role-translation/role-translation.component.html
+++ b/src/app/modeler/i18n-mode/translations/translation-group/role-translation/role-translation.component.html
@@ -1,12 +1,21 @@
 <div fxLayout="column" *ngFor="let role of model.getRoles(); let i = index">
-    <h3>{{role.title.value}} [{{role.id}}]</h3>
-    <nab-i18n-field [field]="role.title" [name]="'Title'" [translation]="translation"></nab-i18n-field>
-    <div *ngIf="role.getEvents?.length > 0">
-        <h4>Events:</h4>
-        <div *ngFor="let event of role.getEvents()">
-            <nab-i18n-field [field]="event.title" [name]="'Title'" class="events" [translation]="translation"></nab-i18n-field>
-            <nab-i18n-field [field]="event.message" [name]="'Message'" class="events" [translation]="translation"></nab-i18n-field>
+    @defer (on viewport) {
+    <div>
+        <h3>{{role.title.value}} [{{role.id}}]</h3>
+        <nab-i18n-field [field]="role.title" [name]="'Title'" [translation]="translation"></nab-i18n-field>
+        <div *ngIf="role.getEvents?.length > 0">
+            <h4>Events:</h4>
+            <div *ngFor="let event of role.getEvents()">
+                <nab-i18n-field [field]="event.title" [name]="'Title'" class="events" [translation]="translation"></nab-i18n-field>
+                <nab-i18n-field [field]="event.message" [name]="'Message'" class="events" [translation]="translation"></nab-i18n-field>
+            </div>
         </div>
-    </div>
-    <mat-divider *ngIf="notLast(i)"></mat-divider>
+        <mat-divider *ngIf="notLast(i)"></mat-divider>
+        </div>
+    } @placeholder {
+    <div>
+        <h3>{{role.title.value}} [{{role.id}}]</h3>
+            <mat-spinner></mat-spinner>
+        </div>
+    }
 </div>
diff --git a/src/app/modeler/i18n-mode/translations/translation-group/task-translation/task-translation.component.html b/src/app/modeler/i18n-mode/translations/translation-group/task-translation/task-translation.component.html
index 391e80f..6506a5f 100644
--- a/src/app/modeler/i18n-mode/translations/translation-group/task-translation/task-translation.component.html
+++ b/src/app/modeler/i18n-mode/translations/translation-group/task-translation/task-translation.component.html
@@ -1,12 +1,22 @@
 <div fxLayout="column" *ngFor="let task of model.getTransitions(); let i = index">
-    <h3>{{task.label.value}} [{{task.id}}]</h3>
-    <nab-i18n-field [field]="task.label" [name]="'Title'" [translation]="translation"></nab-i18n-field>
-    <div *ngIf="task.getEvents?.length > 0">
-        <h4>Events:</h4>
-        <div *ngFor="let event of task.getEvents()">
-            <nab-i18n-field [field]="event.title" [name]="'Title'" class="events" [translation]="translation"></nab-i18n-field>
-            <nab-i18n-field [field]="event.message" [name]="'Message'" class="events" [translation]="translation"></nab-i18n-field>
+
+    @defer (on viewport) {
+        <div>
+            <h3>{{task.label.value}} [{{task.id}}]</h3>
+            <nab-i18n-field [field]="task.label" [name]="'Title'" [translation]="translation"></nab-i18n-field>
+            <div *ngIf="task.getEvents?.length > 0">
+                <h4>Events:</h4>
+                <div *ngFor="let event of task.getEvents()">
+                    <nab-i18n-field [field]="event.title" [name]="'Title'" class="events" [translation]="translation"></nab-i18n-field>
+                    <nab-i18n-field [field]="event.message" [name]="'Message'" class="events" [translation]="translation"></nab-i18n-field>
+                </div>
+            </div>
+            <mat-divider *ngIf="notLast(i)"></mat-divider>
         </div>
-    </div>
-    <mat-divider *ngIf="notLast(i)"></mat-divider>
+    } @placeholder {
+        <div>
+            <h3>{{task.label.value}} [{{task.id}}]</h3>
+            <mat-spinner></mat-spinner>
+        </div>
+    }
 </div>
diff --git a/src/app/modeler/i18n-mode/translations/translation-group/translation-group.component.html b/src/app/modeler/i18n-mode/translations/translation-group/translation-group.component.html
deleted file mode 100644
index 83ab01e..0000000
--- a/src/app/modeler/i18n-mode/translations/translation-group/translation-group.component.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<mat-expansion-panel [disabled]="config.disabled()">
-    <mat-expansion-panel-header>
-        <mat-panel-title fxLayout="row" fxLayoutAlign="start center">
-            <mat-icon>{{config.icon}}</mat-icon>
-            <span>{{config.title}}</span>
-        </mat-panel-title>
-        <mat-panel-description>
-            {{config.disabled() ? config.disabledDescription : config.description}}
-        </mat-panel-description>
-    </mat-expansion-panel-header>
-<!-- TODO: fix using portals -->
-    <nab-model-translation *ngIf="isModel()" [translation]="translation"></nab-model-translation>
-    <nab-task-translation *ngIf="isTask()" [translation]="translation"></nab-task-translation>
-    <nab-data-translation *ngIf="isData()" [translation]="translation"></nab-data-translation>
-    <nab-role-translation *ngIf="isRole()" [translation]="translation"></nab-role-translation>
-</mat-expansion-panel>
diff --git a/src/app/modeler/i18n-mode/translations/translation-group/translation-group.component.scss b/src/app/modeler/i18n-mode/translations/translation-group/translation-group.component.scss
deleted file mode 100644
index 9cacd21..0000000
--- a/src/app/modeler/i18n-mode/translations/translation-group/translation-group.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.mat-expansion-panel-header-title,
-.mat-expansion-panel-header-description {
-    flex-basis: 0;
-}
-
-.mat-expansion-panel-header-description {
-    justify-content: space-between;
-    align-items: center;
-}
-
-mat-icon {
-    margin-right: 16px;
-}
diff --git a/src/app/modeler/i18n-mode/translations/translation-group/translation-group.component.ts b/src/app/modeler/i18n-mode/translations/translation-group/translation-group.component.ts
deleted file mode 100644
index 0609a0a..0000000
--- a/src/app/modeler/i18n-mode/translations/translation-group/translation-group.component.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {TranslationGroupConfiguration, Type} from './translation-group-configuration';
-import {Locale} from '../../classes/locale';
-import {I18nTranslations} from '@netgrif/petriflow';
-
-@Component({
-    selector: 'nab-translation-group',
-    templateUrl: './translation-group.component.html',
-    styleUrls: ['./translation-group.component.scss']
-})
-export class TranslationGroupComponent {
-
-    @Input()
-    config: TranslationGroupConfiguration;
-    private _translation: I18nTranslations;
-
-    constructor() {
-    }
-
-    get translation(): I18nTranslations {
-        return this._translation;
-    }
-
-    @Input()
-    set translation(value: I18nTranslations) {
-        this._translation = value;
-    }
-
-    isModel(): boolean {
-        return this.config.type === Type.MODEL;
-    }
-
-    isTask(): boolean {
-        return this.config.type === Type.TASK;
-    }
-
-    isData(): boolean {
-        return this.config.type === Type.DATA;
-    }
-
-    isRole(): boolean {
-        return this.config.type === Type.ROLE;
-    }
-}
diff --git a/src/app/modeler/i18n-mode/translations/translations.component.html b/src/app/modeler/i18n-mode/translations/translations.component.html
index 7085fac..7c51aae 100644
--- a/src/app/modeler/i18n-mode/translations/translations.component.html
+++ b/src/app/modeler/i18n-mode/translations/translations.component.html
@@ -7,10 +7,42 @@
             </mat-select>
         </mat-form-field>
     </mat-card>
-    <mat-accordion multi fxFlexFill *ngIf="!noLocales() && locale">
-        <nab-translation-group [config]="modelMetadataConfig" [translation]="translation"></nab-translation-group>
-        <nab-translation-group [config]="taskMetadataConfig" [translation]="translation"></nab-translation-group>
-        <nab-translation-group [config]="dataMetadataConfig" [translation]="translation"></nab-translation-group>
-        <nab-translation-group [config]="roleMetadataConfig" [translation]="translation"></nab-translation-group>
-    </mat-accordion>
+    <mat-tab-group *ngIf="!noLocales() && locale">
+        <mat-tab [disabled]="modelMetadataConfig.disabled()">
+            <ng-template mat-tab-label>
+                <mat-icon class="example-tab-icon">{{modelMetadataConfig.icon}}</mat-icon>
+                {{modelMetadataConfig.title}}
+            </ng-template>
+            <ng-template matTabContent>
+                <nab-model-translation [translation]="translation"></nab-model-translation>
+            </ng-template>
+        </mat-tab>
+        <mat-tab [disabled]="taskMetadataConfig.disabled()">
+            <ng-template mat-tab-label>
+                <mat-icon class="example-tab-icon">{{taskMetadataConfig.icon}}</mat-icon>
+                {{taskMetadataConfig.title}}
+            </ng-template>
+            <ng-template matTabContent>
+                <nab-task-translation  [translation]="translation"></nab-task-translation>
+            </ng-template>
+        </mat-tab>
+        <mat-tab [disabled]="dataMetadataConfig.disabled()">
+            <ng-template mat-tab-label>
+                <mat-icon class="example-tab-icon">{{dataMetadataConfig.icon}}</mat-icon>
+                {{dataMetadataConfig.title}}
+            </ng-template>
+            <ng-template matTabContent>
+                <nab-data-translation [translation]="translation"></nab-data-translation>
+            </ng-template>
+        </mat-tab>
+        <mat-tab [disabled]="roleMetadataConfig.disabled()">
+            <ng-template mat-tab-label>
+                <mat-icon class="example-tab-icon">{{roleMetadataConfig.icon}}</mat-icon>
+                {{roleMetadataConfig.title}}
+            </ng-template>
+            <ng-template matTabContent>
+                <nab-role-translation  [translation]="translation"></nab-role-translation>
+            </ng-template>
+        </mat-tab>
+    </mat-tab-group>
 </div>
diff --git a/src/app/modeler/i18n-mode/translations/translations.component.scss b/src/app/modeler/i18n-mode/translations/translations.component.scss
index 865b5df..5f24b37 100644
--- a/src/app/modeler/i18n-mode/translations/translations.component.scss
+++ b/src/app/modeler/i18n-mode/translations/translations.component.scss
@@ -1,3 +1,9 @@
 .localeSelect {
     margin-bottom: 16px;
 }
+
+.example-tab-icon {
+    margin-right: 8px;
+}
+
+
diff --git a/src/app/modeler/modeler.module.ts b/src/app/modeler/modeler.module.ts
index b052184..92b186f 100644
--- a/src/app/modeler/modeler.module.ts
+++ b/src/app/modeler/modeler.module.ts
@@ -29,7 +29,6 @@ import {TranslationsComponent} from './i18n-mode/translations/translations.compo
 import {ProgressComponent} from './i18n-mode/languages/progress/progress.component';
 import {FlagComponent} from './i18n-mode/languages/flag/flag.component';
 import {FlagFallbackDirective} from './i18n-mode/languages/flag/flag-fallback.directive';
-import {TranslationGroupComponent} from './i18n-mode/translations/translation-group/translation-group.component';
 import {
     ModelTranslationComponent
 } from './i18n-mode/translations/translation-group/model-translation/model-translation.component';
@@ -67,6 +66,7 @@ import {
     FunctionMasterItemComponent
 } from './actions-mode/action-master/function-master-item/function-master-item.component';
 import {ActionDetailComponent} from './actions-mode/action-detail/action-detail.component';
+import {ScrollingModule} from '@angular/cdk/scrolling';
 
 @NgModule({
     declarations: [
@@ -91,7 +91,6 @@ import {ActionDetailComponent} from './actions-mode/action-detail/action-detail.
         ProgressComponent,
         FlagComponent,
         FlagFallbackDirective,
-        TranslationGroupComponent,
         ModelTranslationComponent,
         I18nFieldComponent,
         DataTranslationComponent,
@@ -134,6 +133,7 @@ import {ActionDetailComponent} from './actions-mode/action-detail/action-detail.
         ResizableModule,
         RouterModule,
         TaskContentComponentModule,
+        ScrollingModule
     ]
 })
 export class ModelerModule {