diff --git a/src/app/app.component.html b/src/app/app.component.html
index 72c18826..da1e21ba 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,17 +1,17 @@
-<sm-survey *ngIf="!demo && (showSurvey$ | async) && !showNotification" (dismiss)="dismissSurvey()"></sm-survey>
-<sm-update-notifier [availableUpdates]="(updatesAvailable$ | async)"
-  [dismissedVersion]="serverUpdatesService.lastDismissedVersion"
-  (versionDismissed)="versionDismissed($event)"
-  (notifierActive)="notifierActive($event)">
+<sm-survey *ngIf="!demo && !guestUser && (showSurvey$ | async) && !update?.active" (dismiss)="dismissSurvey()"></sm-survey>
+<sm-update-notifier #update
+                    [availableUpdates]="(updatesAvailable$ | async)"
+                    [currentUser]="currentUser"
+                    [dismissedVersion]="serverUpdatesService.lastDismissedVersion"
+                    (versionDismissed)="versionDismissed($event)"
+                    (notifierActive)="notifierActive($event)">
 </sm-update-notifier>
-<div>
-  <sm-color-picker-wrapper id="color-picker-outlet"></sm-color-picker-wrapper>
-  <sm-server-notification-dialog-container></sm-server-notification-dialog-container>
-  <sm-spinner></sm-spinner>
-  <sm-side-nav></sm-side-nav>
-  <div class="app-container" [class.notifier-open]="showNotification || (showSurvey$ | async)">
-    <sm-header [isDashboard]="isDashboardContext"></sm-header>
-    <router-outlet class="main-router"></router-outlet>
-  </div>
+<sm-color-picker-wrapper id="color-picker-outlet"></sm-color-picker-wrapper>
+<sm-server-notification-dialog-container></sm-server-notification-dialog-container>
+<sm-spinner></sm-spinner>
+<sm-side-nav></sm-side-nav>
+<div class="app-container" [class.notifier-open]="update?.active || ((showSurvey$ | async) && !demo && !guestUser)">
+  <sm-header [isDashboard]="isDashboardContext" [isLogin]="isLoginContext"></sm-header>
+  <router-outlet class="main-router"></router-outlet>
 </div>
 <notifier-container></notifier-container>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 92b8ae8c..b3d0cdeb 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -4,22 +4,29 @@
 $notifier-height: 30px;
 
 .app-container {
+  height: 100%;
   margin-left: $side-bar-close-width;
+
+  &.notifier-open {
+    height: calc(100% - #{$notifier-height});
+    .main-router + * {
+      height: calc(100% - #{$top-bar-height});
+    }
+  }
 }
 
 .main-router + * {
   display: block;
-  height: calc(100vh - #{$top-bar-height});
+  height: calc(100% - #{$top-bar-height});
 }
 
-.notifier-open {
-  .main-router + * {
-    height: calc(100vh - #{$top-bar-height + $notifier-height});
-  }
-}
 
 sm-side-nav {
+  display: block;
+  position: fixed;
+  top: 0;
   z-index: 999;
+  height: 100%;
 }
 
 #color-picker-outlet {
@@ -27,6 +34,3 @@ sm-side-nav {
   visibility: hidden;
 }
 
-
-
-
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index dd0a82e1..f8a39675 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,6 @@
 import {ApiUsersService} from './business-logic/api-services/users.service';
 import {selectCurrentUser} from './webapp-common/core/reducers/users-reducer';
-import {Component, OnDestroy, OnInit, ViewEncapsulation, HostListener} from '@angular/core';
+import {Component, OnDestroy, OnInit, ViewEncapsulation, HostListener, Renderer2} from '@angular/core';
 import {ActivatedRoute, NavigationEnd, Router, Params} from '@angular/router';
 import {Title} from '@angular/platform-browser';
 import {selectLoggedOut} from './webapp-common/core/reducers/view-reducer';
@@ -11,12 +11,17 @@ import {ApiProjectsService} from './business-logic/api-services/projects.service
 import {Project} from './business-logic/model/projects/project';
 import {GetAllProjects, SetSelectedProjectId, UpdateProject} from './webapp-common/core/actions/projects.actions';
 import {selectSelectedProject} from './webapp-common/core/reducers/projects.reducer';
-import {selectS3BucketCredentialsBucketCredentials, selectS3PopUpDetails, selectShowLocalFilesPopUp, selectShowS3PopUp} from './webapp-common/core/reducers/common-auth-reducer';
+import {
+  selectS3BucketCredentialsBucketCredentials,
+  selectS3PopUpDetails,
+  selectShowLocalFilesPopUp,
+  selectShowS3PopUp
+} from './webapp-common/core/reducers/common-auth-reducer';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 import {S3AccessResolverComponent} from './webapp-common/layout/s3-access-resolver/s3-access-resolver.component';
 import {cancelS3Credentials, getTutorialBucketCredentials} from './webapp-common/core/actions/common-auth.actions';
 import {FetchCurrentUser} from './webapp-common/core/actions/users.actions';
-import {filter, map, take, withLatestFrom} from 'rxjs/operators';
+import {distinct, distinctUntilChanged, filter, map, take, withLatestFrom} from 'rxjs/operators';
 import * as routerActions from './webapp-common/core/actions/router.actions';
 import {combineLatest, Observable, Subscription} from 'rxjs';
 import {selectBreadcrumbsStrings} from './webapp-common/layout/layout.reducer';
@@ -25,17 +30,19 @@ import {formatStaticCrumb} from './webapp-common/layout/breadcrumbs/breadcrumbs-
 import {ServerUpdatesService} from './webapp-common/shared/services/server-updates.service';
 import {selectAvailableUpdates, selectShowSurvey} from './core/reducers/view-reducer';
 import {UPDATE_SERVER_PATH} from './app.constants';
-import {VisibilityChanged} from './webapp-common/core/actions/layout.actions';
+import {setScaleFactor, VisibilityChanged} from './webapp-common/core/actions/layout.actions';
 import {UiUpdatesService} from './webapp-common/shared/services/ui-updates.service';
 import {UsageStatsService} from './core/Services/usage-stats.service';
 import {UiUpdateDialogComponent} from './webapp-common/layout/ui-update-dialog/ui-update-dialog.component';
 import {dismissSurvey} from './core/Actions/layout.actions';
 import {environment} from '../environments/environment';
+import {getScaleFactor} from './webapp-common/shared/utils/shared-utils';
+import {User} from './business-logic/model/users/user';
 
 @Component({
-  selector     : 'sm-root',
-  templateUrl  : 'app.component.html',
-  styleUrls    : ['app.component.scss'],
+  selector: 'sm-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class AppComponent implements OnInit, OnDestroy {
@@ -57,12 +64,14 @@ export class AppComponent implements OnInit, OnDestroy {
   public showNotification: boolean = true;
   public showSurvey$: Observable<boolean>;
   public demo = environment.demo;
+  public isLoginContext: boolean;
+  public currentUser: User;
 
   @HostListener('document:visibilitychange') onVisibilityChange() {
     this.store.dispatch(new VisibilityChanged(!document.hidden));
   }
 
-  constructor (
+  constructor(
     private router: Router,
     private route: ActivatedRoute,
     private titleService: Title,
@@ -72,15 +81,16 @@ export class AppComponent implements OnInit, OnDestroy {
     public serverUpdatesService: ServerUpdatesService,
     private uiUpdatesService: UiUpdatesService,
     private matDialog: MatDialog,
-    private userStats: UsageStatsService
+    private userStats: UsageStatsService,
+    private renderer: Renderer2
   ) {
-    this.showS3Popup$            = this.store.select(selectShowS3PopUp);
-    this.showLocalFilePopup$     = this.store.pipe(select(selectShowLocalFilesPopUp));
-    this.loggedOut$              = store.select(selectLoggedOut);
-    this.selectedProject$        = this.store.select(selectSelectedProject);
-    this.updatesAvailable$       = this.store.select(selectAvailableUpdates);
-    this.showSurvey$       = this.store.select(selectShowSurvey);
-    this.selectedCurrentUser$    = this.store.select(selectCurrentUser);
+    this.showS3Popup$ = this.store.select(selectShowS3PopUp);
+    this.showLocalFilePopup$ = this.store.pipe(select(selectShowLocalFilesPopUp));
+    this.loggedOut$ = store.select(selectLoggedOut);
+    this.selectedProject$ = this.store.select(selectSelectedProject);
+    this.updatesAvailable$ = this.store.select(selectAvailableUpdates);
+    this.showSurvey$ = this.store.select(selectShowSurvey);
+    this.selectedCurrentUser$ = this.store.select(selectCurrentUser);
     this.selectedProjectFromUrl$ = this.store.select(selectRouterParams)
       .pipe(
         filter((params: Params) => !!params),
@@ -100,8 +110,11 @@ export class AppComponent implements OnInit, OnDestroy {
     this.store.dispatch(new FetchCurrentUser());
     this.selectedCurrentUser$.pipe(
       filter( user => !!user),
-      take(1))
-      .subscribe(() => this.serverUpdatesService.checkForUpdates(UPDATE_SERVER_PATH));
+      distinctUntilChanged())
+      .subscribe((user) => {
+        this.currentUser = user;
+        this.serverUpdatesService.checkForUpdates(UPDATE_SERVER_PATH);
+      } );
 
     this.selectedProjectFromUrl$.subscribe((projectId: string) => {
       this.store.dispatch(new SetSelectedProjectId(projectId));
@@ -116,7 +129,7 @@ export class AppComponent implements OnInit, OnDestroy {
         )
           .subscribe(([data, bucketCredentials, popupDetails]) => {
             if (!(data && data.success)) {
-              const emptyCredentials          = bucketCredentials.find((cred => cred.Bucket === popupDetails.credentials.Bucket)) === undefined;
+              const emptyCredentials = bucketCredentials.find((cred => cred.Bucket === popupDetails.credentials.Bucket)) === undefined;
               const dontAskAgainForBucketName = emptyCredentials ? '' : popupDetails.credentials.Bucket + popupDetails.credentials.Endpoint;
               this.store.dispatch(cancelS3Credentials({dontAskAgainForBucketName}));
             }
@@ -126,9 +139,10 @@ export class AppComponent implements OnInit, OnDestroy {
 
     this.urlSubscription = combineLatest([this.store.select(selectRouterUrl), this.store.select(selectRouterParams)])
       .subscribe(([url, params]) => {
-        this.projectId          = get('projectId', params);
+        this.projectId = get('projectId', params);
         this.isDashboardContext = url && url.includes('dashboard');
-        this.isWorkersContext   = url && url.includes('workers-and-queues');
+        this.isLoginContext = url && url.includes('login');
+        this.isWorkersContext = url && url.includes('workers-and-queues');
         if (this.projectId) {
           try { // TODO: refactor to a better solution after all navbar are declared...
             this.activeFeature = url.split(this.projectId)[1].split('/')[1];
@@ -147,6 +161,9 @@ export class AppComponent implements OnInit, OnDestroy {
         this.updateTitle();
       }
     );
+    if (window.localStorage.getItem('disableHidpi') !== 'true') {
+      this.setScale();
+    }
 
     // TODO: move to somewhere else...
     this.store.dispatch(new GetAllProjects());
@@ -154,6 +171,16 @@ export class AppComponent implements OnInit, OnDestroy {
     this.uiUpdatesService.checkForUiUpdate();
   }
 
+  private setScale() {
+    const dimensionRatio = getScaleFactor();
+    this.store.dispatch(setScaleFactor({scale: dimensionRatio}));
+    const scale = 100 / dimensionRatio;
+    this.renderer.setStyle(document.body, 'transform', `scale(${scale})`);
+    this.renderer.setStyle(document.body, 'transform-origin', '0 0');
+    this.renderer.setStyle(document.body, 'height', `${dimensionRatio}vh`);
+    this.renderer.setStyle(document.body, 'width', `${dimensionRatio}vw`);
+  }
+
   nameChanged(name) {
     this.store.dispatch(new UpdateProject({id: this.projectId, changes: {name: name}}));
   }
@@ -172,13 +199,13 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   updateTitle() {
-    let route       = this.route.snapshot.firstChild;
+    let route = this.route.snapshot.firstChild;
     let routeConfig = [];
 
     while (route) {
-      const path  = route.routeConfig.path.split('/').filter((item) => !!item);
+      const path = route.routeConfig.path.split('/').filter((item) => !!item);
       routeConfig = routeConfig.concat(path);
-      route       = route.firstChild;
+      route = route.firstChild;
     }
     const crumbs = routeConfig
       .reduce((acc, config) => {
@@ -201,5 +228,9 @@ export class AppComponent implements OnInit, OnDestroy {
     this.store.dispatch(dismissSurvey());
 
   }
+
+  get guestUser(): boolean {
+    return !this.currentUser || this.currentUser?.role === 'guest';
+  }
 }
 
diff --git a/src/app/app.constants.ts b/src/app/app.constants.ts
index 55ee8f0a..796af860 100644
--- a/src/app/app.constants.ts
+++ b/src/app/app.constants.ts
@@ -256,7 +256,7 @@ export const NAVIGATION_ACTIONS = {
 
 
 
-export const ENVIRONMENT = {API_VERSION: '/v2.8'};
+export const ENVIRONMENT = {API_VERSION: '/v2.9'};
 const url                = window.location.origin;
 let apiBaseUrl: string;
 if (environment.apiBaseUrl) {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 94d1d9d2..337c4630 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -16,39 +16,42 @@ import {ApiUsersService} from './business-logic/api-services/users.service';
 import {loadUserAndPreferences} from './webapp-common/user-preferences';
 import {AdminModule} from './webapp-common/admin/admin.module';
 import {AngularSplitModule} from 'angular-split';
-import {NotifierModule} from 'angular-notifier';
+import {NotifierModule} from './webapp-common/angular-notifier';
 import {LayoutModule} from './layout/layout.module';
 import {ColorHashService} from './webapp-common/shared/services/color-hash/color-hash.service';
-import {LoginModule} from './webapp-common/login/login.module';
 import {LoginService} from './webapp-common/shared/services/login.service';
 import {Store} from '@ngrx/store';
-import {TitleCasePipe} from '@angular/common';
+import {SharedModule} from './shared/shared.module';
 
 @NgModule({
   declarations   : [AppComponent],
-  imports        : [
+  imports: [
     FormsModule,
     BrowserAnimationsModule,
     BrowserModule,
     SMCoreModule,
     BusinessLogicModule,
     SMSharedModule,
-    LoginModule,
     AngularSplitModule.forRoot(),
-    RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules, scrollPositionRestoration: 'top', onSameUrlNavigation: 'reload'}),
+    RouterModule.forRoot(routes, {
+      preloadingStrategy: PreloadAllModules,
+      scrollPositionRestoration: 'top',
+      onSameUrlNavigation: 'reload'
+    }),
     AdminModule,
     NotifierModule.withConfig({
-      theme    : 'material',
+      theme: 'material',
       behaviour: {
         autoHide: {default: 5000, error: false}
       },
-      position : {
-        vertical  : {position: 'top', distance: 12, gap: 10},
+      position: {
+        vertical: {position: 'top', distance: 12, gap: 10},
         horizontal: {position: 'right', distance: 12}
       }
     }),
     CommonLayoutModule,
     LayoutModule,
+    SharedModule,
   ],
   providers      : [
     {
@@ -65,19 +68,4 @@ import {TitleCasePipe} from '@angular/common';
   exports        : []
 })
 
-export class AppModule {
-
-  constructor() {
-
-    // store.select(selectRouter)
-    // // .filter(state => !state.skipNextNavigation)
-    //   .subscribe(state => {
-    //     this.store.dispatch(new ResetDontShowAgainForBucketEndpoint());
-    //     (!state.params || !state.url) ?
-    //       this.router.navigateByUrl(state.url, { queryParams: { unGuard: state.unGuard } }) :
-    //       this.router.navigate([state.url, state.params], { queryParams: { unGuard: state.unGuard } });
-    //   });
-
-  }
-
-}
+export class AppModule {}
diff --git a/src/app/business-logic/api-services/auth.service.ts b/src/app/business-logic/api-services/auth.service.ts
index 03bb9cdc..908d4bab 100644
--- a/src/app/business-logic/api-services/auth.service.ts
+++ b/src/app/business-logic/api-services/auth.service.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/api-services/events.service.ts b/src/app/business-logic/api-services/events.service.ts
index c321be4a..49231a43 100644
--- a/src/app/business-logic/api-services/events.service.ts
+++ b/src/app/business-logic/api-services/events.service.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -540,7 +540,7 @@ export class ApiEventsService {
 
     /**
      * 
-     * Get all \&#39;log\&#39; events for this task
+     * Get \&#39;log\&#39; events for this task
      * @param request request body
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
diff --git a/src/app/business-logic/api-services/models.service.ts b/src/app/business-logic/api-services/models.service.ts
index 7f7c5152..7f0a94a8 100644
--- a/src/app/business-logic/api-services/models.service.ts
+++ b/src/app/business-logic/api-services/models.service.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -36,6 +36,8 @@ import { ModelsGetByIdRequest } from '../model/models/modelsGetByIdRequest';
 import { ModelsGetByIdResponse } from '../model/models/modelsGetByIdResponse';
 import { ModelsGetByTaskIdRequest } from '../model/models/modelsGetByTaskIdRequest';
 import { ModelsGetByTaskIdResponse } from '../model/models/modelsGetByTaskIdResponse';
+import { ModelsGetFrameworksRequest } from '../model/models/modelsGetFrameworksRequest';
+import { ModelsGetFrameworksResponse } from '../model/models/modelsGetFrameworksResponse';
 import { ModelsSetReadyRequest } from '../model/models/modelsSetReadyRequest';
 import { ModelsSetReadyResponse } from '../model/models/modelsSetReadyResponse';
 import { ModelsUpdateForTaskRequest } from '../model/models/modelsUpdateForTaskRequest';
@@ -394,6 +396,51 @@ export class ApiModelsService {
         );
     }
 
+    /**
+     * 
+     * Get the list of frameworks used in the company models
+     * @param request request body
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public modelsGetFrameworks(request: ModelsGetFrameworksRequest, options?: any, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+        if (request === null || request === undefined) {
+            throw new Error('Required parameter request was null or undefined when calling modelsGetFrameworks.');
+        }
+
+        let headers = this.defaultHeaders;
+        if (options && options.async_enable) {
+            headers = headers.set(this.configuration.asyncHeader, '1');
+        }
+
+        // to determine the Accept header
+        const httpHeaderAccepts: string[] = [
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set("Accept", httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+        const httpContentTypeSelected:string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected != undefined) {
+            headers = headers.set("Content-Type", httpContentTypeSelected);
+        }
+
+	return this.apiRequest.post<ModelsGetFrameworksResponse>(`${this.basePath}/models.get_frameworks`,
+            request,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
     /**
      * 
      * Set the model ready flag to True. If the model is an output model of a task   then try to publish the task.
diff --git a/src/app/business-logic/api-services/organization.service.ts b/src/app/business-logic/api-services/organization.service.ts
index e870d52e..6ecae49d 100644
--- a/src/app/business-logic/api-services/organization.service.ts
+++ b/src/app/business-logic/api-services/organization.service.ts
@@ -2,7 +2,7 @@
  * organization
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.8
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/api-services/projects.service.ts b/src/app/business-logic/api-services/projects.service.ts
index ce66af40..ba9cda48 100644
--- a/src/app/business-logic/api-services/projects.service.ts
+++ b/src/app/business-logic/api-services/projects.service.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -34,6 +34,10 @@ import { ProjectsGetByIdRequest } from '../model/projects/projectsGetByIdRequest
 import { ProjectsGetByIdResponse } from '../model/projects/projectsGetByIdResponse';
 import { ProjectsGetHyperParametersRequest } from '../model/projects/projectsGetHyperParametersRequest';
 import { ProjectsGetHyperParametersResponse } from '../model/projects/projectsGetHyperParametersResponse';
+import { ProjectsGetModelTagsRequest } from '../model/projects/projectsGetModelTagsRequest';
+import { ProjectsGetModelTagsResponse } from '../model/projects/projectsGetModelTagsResponse';
+import { ProjectsGetTaskTagsRequest } from '../model/projects/projectsGetTaskTagsRequest';
+import { ProjectsGetTaskTagsResponse } from '../model/projects/projectsGetTaskTagsResponse';
 import { ProjectsGetUniqueMetricVariantsRequest } from '../model/projects/projectsGetUniqueMetricVariantsRequest';
 import { ProjectsGetUniqueMetricVariantsResponse } from '../model/projects/projectsGetUniqueMetricVariantsResponse';
 import { ProjectsUpdateRequest } from '../model/projects/projectsUpdateRequest';
@@ -302,7 +306,7 @@ export class ApiProjectsService {
 
     /**
      * 
-     * Get a list of all hyper parameter names used in tasks within the given project.
+     * Get a list of all hyper parameter sections and names used in tasks within the   given project.
      * @param request request body
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
@@ -345,6 +349,96 @@ export class ApiProjectsService {
         );
     }
 
+    /**
+     * 
+     * Get user and system tags used for the models under the specified projects
+     * @param request request body
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public projectsGetModelTags(request: ProjectsGetModelTagsRequest, options?: any, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+        if (request === null || request === undefined) {
+            throw new Error('Required parameter request was null or undefined when calling projectsGetModelTags.');
+        }
+
+        let headers = this.defaultHeaders;
+        if (options && options.async_enable) {
+            headers = headers.set(this.configuration.asyncHeader, '1');
+        }
+
+        // to determine the Accept header
+        const httpHeaderAccepts: string[] = [
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set("Accept", httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+        const httpContentTypeSelected:string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected != undefined) {
+            headers = headers.set("Content-Type", httpContentTypeSelected);
+        }
+
+	return this.apiRequest.post<ProjectsGetModelTagsResponse>(`${this.basePath}/projects.get_model_tags`,
+            request,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 
+     * Get user and system tags used for the tasks under the specified projects
+     * @param request request body
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public projectsGetTaskTags(request: ProjectsGetTaskTagsRequest, options?: any, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+        if (request === null || request === undefined) {
+            throw new Error('Required parameter request was null or undefined when calling projectsGetTaskTags.');
+        }
+
+        let headers = this.defaultHeaders;
+        if (options && options.async_enable) {
+            headers = headers.set(this.configuration.asyncHeader, '1');
+        }
+
+        // to determine the Accept header
+        const httpHeaderAccepts: string[] = [
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set("Accept", httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+        const httpContentTypeSelected:string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected != undefined) {
+            headers = headers.set("Content-Type", httpContentTypeSelected);
+        }
+
+	return this.apiRequest.post<ProjectsGetTaskTagsResponse>(`${this.basePath}/projects.get_task_tags`,
+            request,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
     /**
      * 
      * Get all metric/variant pairs reported for tasks in a specific project. If no   project is specified, metrics/variant paris reported for all tasks will be   returned. If the project does not exist, an empty list will be returned.
diff --git a/src/app/business-logic/api-services/queues.service.ts b/src/app/business-logic/api-services/queues.service.ts
index b18762cb..50773ea7 100644
--- a/src/app/business-logic/api-services/queues.service.ts
+++ b/src/app/business-logic/api-services/queues.service.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/api-services/server.service.ts b/src/app/business-logic/api-services/server.service.ts
index b8b81a8d..41166fd6 100644
--- a/src/app/business-logic/api-services/server.service.ts
+++ b/src/app/business-logic/api-services/server.service.ts
@@ -2,7 +2,7 @@
  * server
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/api-services/tasks.service.ts b/src/app/business-logic/api-services/tasks.service.ts
index 2fde00b8..430674a6 100644
--- a/src/app/business-logic/api-services/tasks.service.ts
+++ b/src/app/business-logic/api-services/tasks.service.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.8
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -32,10 +32,18 @@ import { TasksCompletedRequest } from '../model/tasks/tasksCompletedRequest';
 import { TasksCompletedResponse } from '../model/tasks/tasksCompletedResponse';
 import { TasksCreateRequest } from '../model/tasks/tasksCreateRequest';
 import { TasksCreateResponse } from '../model/tasks/tasksCreateResponse';
+import { TasksDeleteConfigurationRequest } from '../model/tasks/tasksDeleteConfigurationRequest';
+import { TasksDeleteConfigurationResponse } from '../model/tasks/tasksDeleteConfigurationResponse';
+import { TasksDeleteHyperParamsRequest } from '../model/tasks/tasksDeleteHyperParamsRequest';
+import { TasksDeleteHyperParamsResponse } from '../model/tasks/tasksDeleteHyperParamsResponse';
 import { TasksDeleteRequest } from '../model/tasks/tasksDeleteRequest';
 import { TasksDeleteResponse } from '../model/tasks/tasksDeleteResponse';
 import { TasksDequeueRequest } from '../model/tasks/tasksDequeueRequest';
 import { TasksDequeueResponse } from '../model/tasks/tasksDequeueResponse';
+import { TasksEditConfigurationRequest } from '../model/tasks/tasksEditConfigurationRequest';
+import { TasksEditConfigurationResponse } from '../model/tasks/tasksEditConfigurationResponse';
+import { TasksEditHyperParamsRequest } from '../model/tasks/tasksEditHyperParamsRequest';
+import { TasksEditHyperParamsResponse } from '../model/tasks/tasksEditHyperParamsResponse';
 import { TasksEditRequest } from '../model/tasks/tasksEditRequest';
 import { TasksEditResponse } from '../model/tasks/tasksEditResponse';
 import { TasksEnqueueRequest } from '../model/tasks/tasksEnqueueRequest';
@@ -48,6 +56,12 @@ import { TasksGetAllRequest } from '../model/tasks/tasksGetAllRequest';
 import { TasksGetAllResponse } from '../model/tasks/tasksGetAllResponse';
 import { TasksGetByIdRequest } from '../model/tasks/tasksGetByIdRequest';
 import { TasksGetByIdResponse } from '../model/tasks/tasksGetByIdResponse';
+import { TasksGetConfigurationNamesRequest } from '../model/tasks/tasksGetConfigurationNamesRequest';
+import { TasksGetConfigurationNamesResponse } from '../model/tasks/tasksGetConfigurationNamesResponse';
+import { TasksGetConfigurationsRequest } from '../model/tasks/tasksGetConfigurationsRequest';
+import { TasksGetConfigurationsResponse } from '../model/tasks/tasksGetConfigurationsResponse';
+import { TasksGetHyperParamsRequest } from '../model/tasks/tasksGetHyperParamsRequest';
+import { TasksGetHyperParamsResponse } from '../model/tasks/tasksGetHyperParamsResponse';
 import { TasksGetTypesRequest } from '../model/tasks/tasksGetTypesRequest';
 import { TasksGetTypesResponse } from '../model/tasks/tasksGetTypesResponse';
 import { TasksPingRequest } from '../model/tasks/tasksPingRequest';
@@ -374,6 +388,96 @@ export class ApiTasksService {
         );
     }
 
+    /**
+     * 
+     * Delete task configuration items
+     * @param request request body
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public tasksDeleteConfiguration(request: TasksDeleteConfigurationRequest, options?: any, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+        if (request === null || request === undefined) {
+            throw new Error('Required parameter request was null or undefined when calling tasksDeleteConfiguration.');
+        }
+
+        let headers = this.defaultHeaders;
+        if (options && options.async_enable) {
+            headers = headers.set(this.configuration.asyncHeader, '1');
+        }
+
+        // to determine the Accept header
+        const httpHeaderAccepts: string[] = [
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set("Accept", httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+        const httpContentTypeSelected:string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected != undefined) {
+            headers = headers.set("Content-Type", httpContentTypeSelected);
+        }
+
+	return this.apiRequest.post<TasksDeleteConfigurationResponse>(`${this.basePath}/tasks.delete_configuration`,
+            request,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 
+     * Delete task hyper parameters
+     * @param request request body
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public tasksDeleteHyperParams(request: TasksDeleteHyperParamsRequest, options?: any, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+        if (request === null || request === undefined) {
+            throw new Error('Required parameter request was null or undefined when calling tasksDeleteHyperParams.');
+        }
+
+        let headers = this.defaultHeaders;
+        if (options && options.async_enable) {
+            headers = headers.set(this.configuration.asyncHeader, '1');
+        }
+
+        // to determine the Accept header
+        const httpHeaderAccepts: string[] = [
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set("Accept", httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+        const httpContentTypeSelected:string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected != undefined) {
+            headers = headers.set("Content-Type", httpContentTypeSelected);
+        }
+
+	return this.apiRequest.post<TasksDeleteHyperParamsResponse>(`${this.basePath}/tasks.delete_hyper_params`,
+            request,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
     /**
      * 
      * Remove a task from its queue. Fails if task status is not queued.
@@ -464,6 +568,96 @@ export class ApiTasksService {
         );
     }
 
+    /**
+     * 
+     * Add or update task configuration
+     * @param request request body
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public tasksEditConfiguration(request: TasksEditConfigurationRequest, options?: any, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+        if (request === null || request === undefined) {
+            throw new Error('Required parameter request was null or undefined when calling tasksEditConfiguration.');
+        }
+
+        let headers = this.defaultHeaders;
+        if (options && options.async_enable) {
+            headers = headers.set(this.configuration.asyncHeader, '1');
+        }
+
+        // to determine the Accept header
+        const httpHeaderAccepts: string[] = [
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set("Accept", httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+        const httpContentTypeSelected:string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected != undefined) {
+            headers = headers.set("Content-Type", httpContentTypeSelected);
+        }
+
+	return this.apiRequest.post<TasksEditConfigurationResponse>(`${this.basePath}/tasks.edit_configuration`,
+            request,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 
+     * Add or update task hyper parameters
+     * @param request request body
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public tasksEditHyperParams(request: TasksEditHyperParamsRequest, options?: any, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+        if (request === null || request === undefined) {
+            throw new Error('Required parameter request was null or undefined when calling tasksEditHyperParams.');
+        }
+
+        let headers = this.defaultHeaders;
+        if (options && options.async_enable) {
+            headers = headers.set(this.configuration.asyncHeader, '1');
+        }
+
+        // to determine the Accept header
+        const httpHeaderAccepts: string[] = [
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set("Accept", httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+        const httpContentTypeSelected:string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected != undefined) {
+            headers = headers.set("Content-Type", httpContentTypeSelected);
+        }
+
+	return this.apiRequest.post<TasksEditHyperParamsResponse>(`${this.basePath}/tasks.edit_hyper_params`,
+            request,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
     /**
      * 
      * Adds a task into a queue.   Fails if task state is not \&#39;created\&#39;.   Fails if the following parameters in the task were not filled:   * execution.script.repository   * execution.script.entrypoint
@@ -689,6 +883,141 @@ export class ApiTasksService {
         );
     }
 
+    /**
+     * 
+     * Get the list of task configuration items names
+     * @param request request body
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public tasksGetConfigurationNames(request: TasksGetConfigurationNamesRequest, options?: any, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+        if (request === null || request === undefined) {
+            throw new Error('Required parameter request was null or undefined when calling tasksGetConfigurationNames.');
+        }
+
+        let headers = this.defaultHeaders;
+        if (options && options.async_enable) {
+            headers = headers.set(this.configuration.asyncHeader, '1');
+        }
+
+        // to determine the Accept header
+        const httpHeaderAccepts: string[] = [
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set("Accept", httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+        const httpContentTypeSelected:string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected != undefined) {
+            headers = headers.set("Content-Type", httpContentTypeSelected);
+        }
+
+	return this.apiRequest.post<TasksGetConfigurationNamesResponse>(`${this.basePath}/tasks.get_configuration_names`,
+            request,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 
+     * Get the list of task configurations
+     * @param request request body
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public tasksGetConfigurations(request: TasksGetConfigurationsRequest, options?: any, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+        if (request === null || request === undefined) {
+            throw new Error('Required parameter request was null or undefined when calling tasksGetConfigurations.');
+        }
+
+        let headers = this.defaultHeaders;
+        if (options && options.async_enable) {
+            headers = headers.set(this.configuration.asyncHeader, '1');
+        }
+
+        // to determine the Accept header
+        const httpHeaderAccepts: string[] = [
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set("Accept", httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+        const httpContentTypeSelected:string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected != undefined) {
+            headers = headers.set("Content-Type", httpContentTypeSelected);
+        }
+
+	return this.apiRequest.post<TasksGetConfigurationsResponse>(`${this.basePath}/tasks.get_configurations`,
+            request,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 
+     * Get the list of task hyper parameters
+     * @param request request body
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public tasksGetHyperParams(request: TasksGetHyperParamsRequest, options?: any, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+        if (request === null || request === undefined) {
+            throw new Error('Required parameter request was null or undefined when calling tasksGetHyperParams.');
+        }
+
+        let headers = this.defaultHeaders;
+        if (options && options.async_enable) {
+            headers = headers.set(this.configuration.asyncHeader, '1');
+        }
+
+        // to determine the Accept header
+        const httpHeaderAccepts: string[] = [
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set("Accept", httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+        const httpContentTypeSelected:string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected != undefined) {
+            headers = headers.set("Content-Type", httpContentTypeSelected);
+        }
+
+	return this.apiRequest.post<TasksGetHyperParamsResponse>(`${this.basePath}/tasks.get_hyper_params`,
+            request,
+            {
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
     /**
      * 
      * Get the list of task types used in the specified projects
diff --git a/src/app/business-logic/api-services/users.service.ts b/src/app/business-logic/api-services/users.service.ts
index 841dbe4a..fc44c562 100644
--- a/src/app/business-logic/api-services/users.service.ts
+++ b/src/app/business-logic/api-services/users.service.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.8
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/api-services/workers.service.ts b/src/app/business-logic/api-services/workers.service.ts
index 59e51c8e..a631dca9 100644
--- a/src/app/business-logic/api-services/workers.service.ts
+++ b/src/app/business-logic/api-services/workers.service.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/authCreateCredentialsResponse.ts b/src/app/business-logic/model/auth/authCreateCredentialsResponse.ts
index 21b336c2..37b8ec48 100644
--- a/src/app/business-logic/model/auth/authCreateCredentialsResponse.ts
+++ b/src/app/business-logic/model/auth/authCreateCredentialsResponse.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/authCreateUserRequest.ts b/src/app/business-logic/model/auth/authCreateUserRequest.ts
index 7d8808b5..e73a2a0e 100644
--- a/src/app/business-logic/model/auth/authCreateUserRequest.ts
+++ b/src/app/business-logic/model/auth/authCreateUserRequest.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/authCreateUserResponse.ts b/src/app/business-logic/model/auth/authCreateUserResponse.ts
index a464525d..af8a70ee 100644
--- a/src/app/business-logic/model/auth/authCreateUserResponse.ts
+++ b/src/app/business-logic/model/auth/authCreateUserResponse.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/authEditUserRequest.ts b/src/app/business-logic/model/auth/authEditUserRequest.ts
index bb531031..7937d02a 100644
--- a/src/app/business-logic/model/auth/authEditUserRequest.ts
+++ b/src/app/business-logic/model/auth/authEditUserRequest.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/authEditUserResponse.ts b/src/app/business-logic/model/auth/authEditUserResponse.ts
index 59195a1b..f1f0fd40 100644
--- a/src/app/business-logic/model/auth/authEditUserResponse.ts
+++ b/src/app/business-logic/model/auth/authEditUserResponse.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/authFixedUsersModeResponse.ts b/src/app/business-logic/model/auth/authFixedUsersModeResponse.ts
index 12dce9d1..520569aa 100644
--- a/src/app/business-logic/model/auth/authFixedUsersModeResponse.ts
+++ b/src/app/business-logic/model/auth/authFixedUsersModeResponse.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/authGetCredentialsResponse.ts b/src/app/business-logic/model/auth/authGetCredentialsResponse.ts
index 7a8a6fea..b0837af4 100644
--- a/src/app/business-logic/model/auth/authGetCredentialsResponse.ts
+++ b/src/app/business-logic/model/auth/authGetCredentialsResponse.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/authGetTokenForUserRequest.ts b/src/app/business-logic/model/auth/authGetTokenForUserRequest.ts
index 17fc9e55..1f6e20f7 100644
--- a/src/app/business-logic/model/auth/authGetTokenForUserRequest.ts
+++ b/src/app/business-logic/model/auth/authGetTokenForUserRequest.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/authGetTokenForUserResponse.ts b/src/app/business-logic/model/auth/authGetTokenForUserResponse.ts
index c45ee7b1..4d976b62 100644
--- a/src/app/business-logic/model/auth/authGetTokenForUserResponse.ts
+++ b/src/app/business-logic/model/auth/authGetTokenForUserResponse.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/authLoginRequest.ts b/src/app/business-logic/model/auth/authLoginRequest.ts
index a0ec111a..8eadea62 100644
--- a/src/app/business-logic/model/auth/authLoginRequest.ts
+++ b/src/app/business-logic/model/auth/authLoginRequest.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/authLoginResponse.ts b/src/app/business-logic/model/auth/authLoginResponse.ts
index e10def57..26c3ec5b 100644
--- a/src/app/business-logic/model/auth/authLoginResponse.ts
+++ b/src/app/business-logic/model/auth/authLoginResponse.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/authRevokeCredentialsRequest.ts b/src/app/business-logic/model/auth/authRevokeCredentialsRequest.ts
index 7894ebed..50f9173c 100644
--- a/src/app/business-logic/model/auth/authRevokeCredentialsRequest.ts
+++ b/src/app/business-logic/model/auth/authRevokeCredentialsRequest.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/authRevokeCredentialsResponse.ts b/src/app/business-logic/model/auth/authRevokeCredentialsResponse.ts
index 3d6b7b1f..06499a5a 100644
--- a/src/app/business-logic/model/auth/authRevokeCredentialsResponse.ts
+++ b/src/app/business-logic/model/auth/authRevokeCredentialsResponse.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/authValidateTokenRequest.ts b/src/app/business-logic/model/auth/authValidateTokenRequest.ts
index f5d0047a..11eb60b7 100644
--- a/src/app/business-logic/model/auth/authValidateTokenRequest.ts
+++ b/src/app/business-logic/model/auth/authValidateTokenRequest.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/authValidateTokenResponse.ts b/src/app/business-logic/model/auth/authValidateTokenResponse.ts
index fd5c9a62..960f7308 100644
--- a/src/app/business-logic/model/auth/authValidateTokenResponse.ts
+++ b/src/app/business-logic/model/auth/authValidateTokenResponse.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/credentialKey.ts b/src/app/business-logic/model/auth/credentialKey.ts
index 9e8389fb..a55c915a 100644
--- a/src/app/business-logic/model/auth/credentialKey.ts
+++ b/src/app/business-logic/model/auth/credentialKey.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/credentials.ts b/src/app/business-logic/model/auth/credentials.ts
index bd9aa4e9..6bcf149c 100644
--- a/src/app/business-logic/model/auth/credentials.ts
+++ b/src/app/business-logic/model/auth/credentials.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/auth/role.ts b/src/app/business-logic/model/auth/role.ts
index 3d074660..9ec562fb 100644
--- a/src/app/business-logic/model/auth/role.ts
+++ b/src/app/business-logic/model/auth/role.ts
@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventTypeEnum.ts b/src/app/business-logic/model/events/eventTypeEnum.ts
index 7ff99d1e..5634d8ab 100644
--- a/src/app/business-logic/model/events/eventTypeEnum.ts
+++ b/src/app/business-logic/model/events/eventTypeEnum.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsAddBatchResponse.ts b/src/app/business-logic/model/events/eventsAddBatchResponse.ts
index bd06bef6..cf371e56 100644
--- a/src/app/business-logic/model/events/eventsAddBatchResponse.ts
+++ b/src/app/business-logic/model/events/eventsAddBatchResponse.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -15,4 +15,5 @@
 export interface EventsAddBatchResponse {
     added?: number;
     errors?: number;
+    errors_info?: object;
 }
diff --git a/src/app/business-logic/model/events/eventsDebugImagesRequest.ts b/src/app/business-logic/model/events/eventsDebugImagesRequest.ts
index f344dfb5..16e26dea 100644
--- a/src/app/business-logic/model/events/eventsDebugImagesRequest.ts
+++ b/src/app/business-logic/model/events/eventsDebugImagesRequest.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -23,7 +23,7 @@ export interface EventsDebugImagesRequest {
      */
     iters?: number;
     /**
-     * If set then events are retreived from later iterations to earlier ones.   Otherwise from earlier iterations to the later. The default is True
+     * If set then events are retreived from latest iterations to earliest ones.   Otherwise from earliest iterations to the latest. The default is True
      */
     navigate_earlier?: boolean;
     /**
diff --git a/src/app/business-logic/model/events/eventsDebugImagesResponse.ts b/src/app/business-logic/model/events/eventsDebugImagesResponse.ts
index 22eb4760..c3a23d3b 100644
--- a/src/app/business-logic/model/events/eventsDebugImagesResponse.ts
+++ b/src/app/business-logic/model/events/eventsDebugImagesResponse.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsDeleteForTaskRequest.ts b/src/app/business-logic/model/events/eventsDeleteForTaskRequest.ts
index e39076ef..fb8337a0 100644
--- a/src/app/business-logic/model/events/eventsDeleteForTaskRequest.ts
+++ b/src/app/business-logic/model/events/eventsDeleteForTaskRequest.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsDeleteForTaskResponse.ts b/src/app/business-logic/model/events/eventsDeleteForTaskResponse.ts
index 836f2628..3a2561c1 100644
--- a/src/app/business-logic/model/events/eventsDeleteForTaskResponse.ts
+++ b/src/app/business-logic/model/events/eventsDeleteForTaskResponse.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsDownloadTaskLogRequest.ts b/src/app/business-logic/model/events/eventsDownloadTaskLogRequest.ts
index 5326f7f2..9e8785ce 100644
--- a/src/app/business-logic/model/events/eventsDownloadTaskLogRequest.ts
+++ b/src/app/business-logic/model/events/eventsDownloadTaskLogRequest.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetMultiTaskPlotsRequest.ts b/src/app/business-logic/model/events/eventsGetMultiTaskPlotsRequest.ts
index f822a568..93239976 100644
--- a/src/app/business-logic/model/events/eventsGetMultiTaskPlotsRequest.ts
+++ b/src/app/business-logic/model/events/eventsGetMultiTaskPlotsRequest.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetMultiTaskPlotsResponse.ts b/src/app/business-logic/model/events/eventsGetMultiTaskPlotsResponse.ts
index 16d66bc6..50484a8c 100644
--- a/src/app/business-logic/model/events/eventsGetMultiTaskPlotsResponse.ts
+++ b/src/app/business-logic/model/events/eventsGetMultiTaskPlotsResponse.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetScalarMetricDataRequest.ts b/src/app/business-logic/model/events/eventsGetScalarMetricDataRequest.ts
index 0ed63ba3..1fa23cbd 100644
--- a/src/app/business-logic/model/events/eventsGetScalarMetricDataRequest.ts
+++ b/src/app/business-logic/model/events/eventsGetScalarMetricDataRequest.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetScalarMetricDataResponse.ts b/src/app/business-logic/model/events/eventsGetScalarMetricDataResponse.ts
index 31495484..fd1ea88b 100644
--- a/src/app/business-logic/model/events/eventsGetScalarMetricDataResponse.ts
+++ b/src/app/business-logic/model/events/eventsGetScalarMetricDataResponse.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetScalarMetricsAndVariantsRequest.ts b/src/app/business-logic/model/events/eventsGetScalarMetricsAndVariantsRequest.ts
index b777c0fd..9714f785 100644
--- a/src/app/business-logic/model/events/eventsGetScalarMetricsAndVariantsRequest.ts
+++ b/src/app/business-logic/model/events/eventsGetScalarMetricsAndVariantsRequest.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetScalarMetricsAndVariantsResponse.ts b/src/app/business-logic/model/events/eventsGetScalarMetricsAndVariantsResponse.ts
index 113dd368..3a6f994c 100644
--- a/src/app/business-logic/model/events/eventsGetScalarMetricsAndVariantsResponse.ts
+++ b/src/app/business-logic/model/events/eventsGetScalarMetricsAndVariantsResponse.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetTaskEventsRequest.ts b/src/app/business-logic/model/events/eventsGetTaskEventsRequest.ts
index 3b06e650..bee529cc 100644
--- a/src/app/business-logic/model/events/eventsGetTaskEventsRequest.ts
+++ b/src/app/business-logic/model/events/eventsGetTaskEventsRequest.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetTaskEventsResponse.ts b/src/app/business-logic/model/events/eventsGetTaskEventsResponse.ts
index f5307c26..b70bf448 100644
--- a/src/app/business-logic/model/events/eventsGetTaskEventsResponse.ts
+++ b/src/app/business-logic/model/events/eventsGetTaskEventsResponse.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesRequest.ts b/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesRequest.ts
index 81f067d0..ea3fb4bd 100644
--- a/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesRequest.ts
+++ b/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesRequest.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesResponse.ts b/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesResponse.ts
index 920c1bd1..afc93836 100644
--- a/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesResponse.ts
+++ b/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesResponse.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesResponseMetrics.ts b/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesResponseMetrics.ts
index 9980a3f1..721958a7 100644
--- a/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesResponseMetrics.ts
+++ b/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesResponseMetrics.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesResponseVariants.ts b/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesResponseVariants.ts
index 633aead1..66c9b7ed 100644
--- a/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesResponseVariants.ts
+++ b/src/app/business-logic/model/events/eventsGetTaskLatestScalarValuesResponseVariants.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetTaskLogRequest.ts b/src/app/business-logic/model/events/eventsGetTaskLogRequest.ts
index a01f71c4..71ee736c 100644
--- a/src/app/business-logic/model/events/eventsGetTaskLogRequest.ts
+++ b/src/app/business-logic/model/events/eventsGetTaskLogRequest.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -18,31 +18,15 @@ export interface EventsGetTaskLogRequest {
      */
     task: string;
     /**
-     * Timestamp order in which log events will be returned (defaults to ascending)
-     */
-    order?: EventsGetTaskLogRequest.OrderEnum;
-    /**
-     * Where will the log entries be taken from (default to the head of the log)
-     */
-    from?: EventsGetTaskLogRequest.FromEnum;
-    /**
-     * 
-     */
-    scroll_id?: string;
-    /**
-     * 
+     * The amount of log events to return
      */
     batch_size?: number;
-}
-export namespace EventsGetTaskLogRequest {
-    export type OrderEnum = 'asc' | 'desc';
-    export const OrderEnum = {
-        Asc: 'asc' as OrderEnum,
-        Desc: 'desc' as OrderEnum
-    }
-    export type FromEnum = 'head' | 'tail';
-    export const FromEnum = {
-        Head: 'head' as FromEnum,
-        Tail: 'tail' as FromEnum
-    }
+    /**
+     * If set then log events are retreived from the latest to the earliest ones (in   timestamp descending order). Otherwise from the earliest to the latest ones (in   timestamp ascending order). The default is True
+     */
+    navigate_earlier?: boolean;
+    /**
+     * Epoch time in UTC ms to use as the navigation start
+     */
+    from_timestamp?: number;
 }
diff --git a/src/app/business-logic/model/events/eventsGetTaskLogResponse.ts b/src/app/business-logic/model/events/eventsGetTaskLogResponse.ts
index 04deac4d..e2ea1bc9 100644
--- a/src/app/business-logic/model/events/eventsGetTaskLogResponse.ts
+++ b/src/app/business-logic/model/events/eventsGetTaskLogResponse.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -18,15 +18,11 @@ export interface EventsGetTaskLogResponse {
      */
     events?: Array<object>;
     /**
-     * Number of results returned
+     * Number of log events returned
      */
     returned?: number;
     /**
-     * Total number of results available for this query
+     * Total number of log events available for this query
      */
     total?: number;
-    /**
-     * Scroll ID for getting more results
-     */
-    scroll_id?: string;
 }
diff --git a/src/app/business-logic/model/events/eventsGetTaskMetricsRequest.ts b/src/app/business-logic/model/events/eventsGetTaskMetricsRequest.ts
index a8d97d52..47f7915d 100644
--- a/src/app/business-logic/model/events/eventsGetTaskMetricsRequest.ts
+++ b/src/app/business-logic/model/events/eventsGetTaskMetricsRequest.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetTaskMetricsResponse.ts b/src/app/business-logic/model/events/eventsGetTaskMetricsResponse.ts
index f478e94f..e80d7361 100644
--- a/src/app/business-logic/model/events/eventsGetTaskMetricsResponse.ts
+++ b/src/app/business-logic/model/events/eventsGetTaskMetricsResponse.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetTaskPlotsRequest.ts b/src/app/business-logic/model/events/eventsGetTaskPlotsRequest.ts
index e20a4e3e..ec8c4383 100644
--- a/src/app/business-logic/model/events/eventsGetTaskPlotsRequest.ts
+++ b/src/app/business-logic/model/events/eventsGetTaskPlotsRequest.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetTaskPlotsResponse.ts b/src/app/business-logic/model/events/eventsGetTaskPlotsResponse.ts
index 9a10121d..a3ce4934 100644
--- a/src/app/business-logic/model/events/eventsGetTaskPlotsResponse.ts
+++ b/src/app/business-logic/model/events/eventsGetTaskPlotsResponse.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetVectorMetricsAndVariantsRequest.ts b/src/app/business-logic/model/events/eventsGetVectorMetricsAndVariantsRequest.ts
index b838b036..e2cbbb28 100644
--- a/src/app/business-logic/model/events/eventsGetVectorMetricsAndVariantsRequest.ts
+++ b/src/app/business-logic/model/events/eventsGetVectorMetricsAndVariantsRequest.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsGetVectorMetricsAndVariantsResponse.ts b/src/app/business-logic/model/events/eventsGetVectorMetricsAndVariantsResponse.ts
index df9be254..2e59433c 100644
--- a/src/app/business-logic/model/events/eventsGetVectorMetricsAndVariantsResponse.ts
+++ b/src/app/business-logic/model/events/eventsGetVectorMetricsAndVariantsResponse.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsMultiTaskScalarMetricsIterHistogramRequest.ts b/src/app/business-logic/model/events/eventsMultiTaskScalarMetricsIterHistogramRequest.ts
index 1b843a8c..29b8b347 100644
--- a/src/app/business-logic/model/events/eventsMultiTaskScalarMetricsIterHistogramRequest.ts
+++ b/src/app/business-logic/model/events/eventsMultiTaskScalarMetricsIterHistogramRequest.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsScalarMetricsIterHistogramRequest.ts b/src/app/business-logic/model/events/eventsScalarMetricsIterHistogramRequest.ts
index 65e8046f..8f6d65c7 100644
--- a/src/app/business-logic/model/events/eventsScalarMetricsIterHistogramRequest.ts
+++ b/src/app/business-logic/model/events/eventsScalarMetricsIterHistogramRequest.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsScalarMetricsIterHistogramResponse.ts b/src/app/business-logic/model/events/eventsScalarMetricsIterHistogramResponse.ts
index 8f43bb2d..3c6f9e2b 100644
--- a/src/app/business-logic/model/events/eventsScalarMetricsIterHistogramResponse.ts
+++ b/src/app/business-logic/model/events/eventsScalarMetricsIterHistogramResponse.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsVectorMetricsIterHistogramRequest.ts b/src/app/business-logic/model/events/eventsVectorMetricsIterHistogramRequest.ts
index e46922e6..5fd6ed4f 100644
--- a/src/app/business-logic/model/events/eventsVectorMetricsIterHistogramRequest.ts
+++ b/src/app/business-logic/model/events/eventsVectorMetricsIterHistogramRequest.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/eventsVectorMetricsIterHistogramResponse.ts b/src/app/business-logic/model/events/eventsVectorMetricsIterHistogramResponse.ts
index 18eb9a93..0474206a 100644
--- a/src/app/business-logic/model/events/eventsVectorMetricsIterHistogramResponse.ts
+++ b/src/app/business-logic/model/events/eventsVectorMetricsIterHistogramResponse.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/logLevelEnum.ts b/src/app/business-logic/model/events/logLevelEnum.ts
index 64a2ddf1..4418330b 100644
--- a/src/app/business-logic/model/events/logLevelEnum.ts
+++ b/src/app/business-logic/model/events/logLevelEnum.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/metricsImageEvent.ts b/src/app/business-logic/model/events/metricsImageEvent.ts
index 7631cf5f..4d6c4c20 100644
--- a/src/app/business-logic/model/events/metricsImageEvent.ts
+++ b/src/app/business-logic/model/events/metricsImageEvent.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/metricsPlotEvent.ts b/src/app/business-logic/model/events/metricsPlotEvent.ts
index 0b8fff21..9a19b1e5 100644
--- a/src/app/business-logic/model/events/metricsPlotEvent.ts
+++ b/src/app/business-logic/model/events/metricsPlotEvent.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/metricsScalarEvent.ts b/src/app/business-logic/model/events/metricsScalarEvent.ts
index 05e7adf8..44038faa 100644
--- a/src/app/business-logic/model/events/metricsScalarEvent.ts
+++ b/src/app/business-logic/model/events/metricsScalarEvent.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/metricsVectorEvent.ts b/src/app/business-logic/model/events/metricsVectorEvent.ts
index acdbdbfa..39133119 100644
--- a/src/app/business-logic/model/events/metricsVectorEvent.ts
+++ b/src/app/business-logic/model/events/metricsVectorEvent.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/scalarKeyEnum.ts b/src/app/business-logic/model/events/scalarKeyEnum.ts
index 42b6ee3e..6ce8832c 100644
--- a/src/app/business-logic/model/events/scalarKeyEnum.ts
+++ b/src/app/business-logic/model/events/scalarKeyEnum.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -15,7 +15,7 @@
 export type ScalarKeyEnum = 'iter' | 'timestamp' | 'iso_time';
 
 export const ScalarKeyEnum = {
-  Iter: 'iter' as ScalarKeyEnum,
-  Timestamp: 'timestamp' as ScalarKeyEnum,
-  IsoTime: 'iso_time' as ScalarKeyEnum
-};
+    Iter: 'iter' as ScalarKeyEnum,
+    Timestamp: 'timestamp' as ScalarKeyEnum,
+    IsoTime: 'iso_time' as ScalarKeyEnum
+}
diff --git a/src/app/business-logic/model/events/taskLogEvent.ts b/src/app/business-logic/model/events/taskLogEvent.ts
index c6a16083..5376ea28 100644
--- a/src/app/business-logic/model/events/taskLogEvent.ts
+++ b/src/app/business-logic/model/events/taskLogEvent.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/events/taskMetric.ts b/src/app/business-logic/model/events/taskMetric.ts
index d15ce1d3..3a42af29 100644
--- a/src/app/business-logic/model/events/taskMetric.ts
+++ b/src/app/business-logic/model/events/taskMetric.ts
@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/model.ts b/src/app/business-logic/model/models/model.ts
index 401bfcae..791beb86 100644
--- a/src/app/business-logic/model/models/model.ts
+++ b/src/app/business-logic/model/models/model.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/models.ts b/src/app/business-logic/model/models/models.ts
index a7f4abcf..ac5c48e4 100644
--- a/src/app/business-logic/model/models/models.ts
+++ b/src/app/business-logic/model/models/models.ts
@@ -13,6 +13,8 @@ export * from './modelsGetByIdRequest';
 export * from './modelsGetByIdResponse';
 export * from './modelsGetByTaskIdRequest';
 export * from './modelsGetByTaskIdResponse';
+export * from './modelsGetFrameworksRequest';
+export * from './modelsGetFrameworksResponse';
 export * from './modelsSetReadyRequest';
 export * from './modelsSetReadyResponse';
 export * from './modelsSetReadyResponsePublishedTask';
diff --git a/src/app/business-logic/model/models/modelsCreateRequest.ts b/src/app/business-logic/model/models/modelsCreateRequest.ts
index 4fcd174f..61317b2f 100644
--- a/src/app/business-logic/model/models/modelsCreateRequest.ts
+++ b/src/app/business-logic/model/models/modelsCreateRequest.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsCreateResponse.ts b/src/app/business-logic/model/models/modelsCreateResponse.ts
index 93542954..5c339a8a 100644
--- a/src/app/business-logic/model/models/modelsCreateResponse.ts
+++ b/src/app/business-logic/model/models/modelsCreateResponse.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsDeleteRequest.ts b/src/app/business-logic/model/models/modelsDeleteRequest.ts
index d607a22d..1dfdc4a2 100644
--- a/src/app/business-logic/model/models/modelsDeleteRequest.ts
+++ b/src/app/business-logic/model/models/modelsDeleteRequest.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsDeleteResponse.ts b/src/app/business-logic/model/models/modelsDeleteResponse.ts
index 6c1e14fe..caf6b017 100644
--- a/src/app/business-logic/model/models/modelsDeleteResponse.ts
+++ b/src/app/business-logic/model/models/modelsDeleteResponse.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsEditRequest.ts b/src/app/business-logic/model/models/modelsEditRequest.ts
index d3b95dd4..eacfac7f 100644
--- a/src/app/business-logic/model/models/modelsEditRequest.ts
+++ b/src/app/business-logic/model/models/modelsEditRequest.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsEditResponse.ts b/src/app/business-logic/model/models/modelsEditResponse.ts
index 1aba5b97..8fac1327 100644
--- a/src/app/business-logic/model/models/modelsEditResponse.ts
+++ b/src/app/business-logic/model/models/modelsEditResponse.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsGetAllExRequest.ts b/src/app/business-logic/model/models/modelsGetAllExRequest.ts
index 2892e9c6..21d5448a 100644
--- a/src/app/business-logic/model/models/modelsGetAllExRequest.ts
+++ b/src/app/business-logic/model/models/modelsGetAllExRequest.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.8
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsGetAllExResponse.ts b/src/app/business-logic/model/models/modelsGetAllExResponse.ts
index ac56b32c..b4fd1c89 100644
--- a/src/app/business-logic/model/models/modelsGetAllExResponse.ts
+++ b/src/app/business-logic/model/models/modelsGetAllExResponse.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsGetAllRequest.ts b/src/app/business-logic/model/models/modelsGetAllRequest.ts
index a5f6798d..a2817ede 100644
--- a/src/app/business-logic/model/models/modelsGetAllRequest.ts
+++ b/src/app/business-logic/model/models/modelsGetAllRequest.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.8
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsGetAllResponse.ts b/src/app/business-logic/model/models/modelsGetAllResponse.ts
index fada0595..dc641b73 100644
--- a/src/app/business-logic/model/models/modelsGetAllResponse.ts
+++ b/src/app/business-logic/model/models/modelsGetAllResponse.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsGetByIdRequest.ts b/src/app/business-logic/model/models/modelsGetByIdRequest.ts
index a4b2f6d4..250ccba5 100644
--- a/src/app/business-logic/model/models/modelsGetByIdRequest.ts
+++ b/src/app/business-logic/model/models/modelsGetByIdRequest.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsGetByIdResponse.ts b/src/app/business-logic/model/models/modelsGetByIdResponse.ts
index 783fc43a..31467696 100644
--- a/src/app/business-logic/model/models/modelsGetByIdResponse.ts
+++ b/src/app/business-logic/model/models/modelsGetByIdResponse.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsGetByTaskIdRequest.ts b/src/app/business-logic/model/models/modelsGetByTaskIdRequest.ts
index f8237f39..736138ba 100644
--- a/src/app/business-logic/model/models/modelsGetByTaskIdRequest.ts
+++ b/src/app/business-logic/model/models/modelsGetByTaskIdRequest.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsGetByTaskIdResponse.ts b/src/app/business-logic/model/models/modelsGetByTaskIdResponse.ts
index dd372b0d..f057f9f0 100644
--- a/src/app/business-logic/model/models/modelsGetByTaskIdResponse.ts
+++ b/src/app/business-logic/model/models/modelsGetByTaskIdResponse.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsSetReadyRequest.ts b/src/app/business-logic/model/models/modelsSetReadyRequest.ts
index 7e16021b..f12e05bb 100644
--- a/src/app/business-logic/model/models/modelsSetReadyRequest.ts
+++ b/src/app/business-logic/model/models/modelsSetReadyRequest.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsSetReadyResponse.ts b/src/app/business-logic/model/models/modelsSetReadyResponse.ts
index 4160602b..32e7056c 100644
--- a/src/app/business-logic/model/models/modelsSetReadyResponse.ts
+++ b/src/app/business-logic/model/models/modelsSetReadyResponse.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsSetReadyResponsePublishedTask.ts b/src/app/business-logic/model/models/modelsSetReadyResponsePublishedTask.ts
index 438acd25..dc394568 100644
--- a/src/app/business-logic/model/models/modelsSetReadyResponsePublishedTask.ts
+++ b/src/app/business-logic/model/models/modelsSetReadyResponsePublishedTask.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsSetReadyResponsePublishedTaskData.ts b/src/app/business-logic/model/models/modelsSetReadyResponsePublishedTaskData.ts
index b9c73a33..2ebbd401 100644
--- a/src/app/business-logic/model/models/modelsSetReadyResponsePublishedTaskData.ts
+++ b/src/app/business-logic/model/models/modelsSetReadyResponsePublishedTaskData.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsUpdateForTaskRequest.ts b/src/app/business-logic/model/models/modelsUpdateForTaskRequest.ts
index 5a159f93..eb43f99b 100644
--- a/src/app/business-logic/model/models/modelsUpdateForTaskRequest.ts
+++ b/src/app/business-logic/model/models/modelsUpdateForTaskRequest.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -18,7 +18,7 @@ export interface ModelsUpdateForTaskRequest {
      */
     task: string;
     /**
-     * URI for the model
+     * URI for the model. Exactly one of uri or override_model_id is a required.
      */
     uri?: string;
     /**
@@ -38,7 +38,7 @@ export interface ModelsUpdateForTaskRequest {
      */
     system_tags?: Array<string>;
     /**
-     * Override model ID. If provided, this model is updated in the task.
+     * Override model ID. If provided, this model is updated in the task. Exactly one   of override_model_id or uri is required.
      */
     override_model_id?: string;
     /**
diff --git a/src/app/business-logic/model/models/modelsUpdateForTaskResponse.ts b/src/app/business-logic/model/models/modelsUpdateForTaskResponse.ts
index bdcb5dcd..3c7f8904 100644
--- a/src/app/business-logic/model/models/modelsUpdateForTaskResponse.ts
+++ b/src/app/business-logic/model/models/modelsUpdateForTaskResponse.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsUpdateRequest.ts b/src/app/business-logic/model/models/modelsUpdateRequest.ts
index a4747791..e7e4dee2 100644
--- a/src/app/business-logic/model/models/modelsUpdateRequest.ts
+++ b/src/app/business-logic/model/models/modelsUpdateRequest.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/modelsUpdateResponse.ts b/src/app/business-logic/model/models/modelsUpdateResponse.ts
index d5cb590b..27cc2625 100644
--- a/src/app/business-logic/model/models/modelsUpdateResponse.ts
+++ b/src/app/business-logic/model/models/modelsUpdateResponse.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/models/multiFieldPatternData.ts b/src/app/business-logic/model/models/multiFieldPatternData.ts
index aa476f79..a1354e3a 100644
--- a/src/app/business-logic/model/models/multiFieldPatternData.ts
+++ b/src/app/business-logic/model/models/multiFieldPatternData.ts
@@ -2,7 +2,7 @@
  * models
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/organization/models.ts b/src/app/business-logic/model/organization/models.ts
index 2da7de70..6e63d7d8 100644
--- a/src/app/business-logic/model/organization/models.ts
+++ b/src/app/business-logic/model/organization/models.ts
@@ -1,2 +1,3 @@
 export * from './organizationGetTagsRequest';
+export * from './organizationGetTagsRequestFilter';
 export * from './organizationGetTagsResponse';
diff --git a/src/app/business-logic/model/organization/organizationGetTagsRequest.ts b/src/app/business-logic/model/organization/organizationGetTagsRequest.ts
index 119066e7..60171a9c 100644
--- a/src/app/business-logic/model/organization/organizationGetTagsRequest.ts
+++ b/src/app/business-logic/model/organization/organizationGetTagsRequest.ts
@@ -2,7 +2,7 @@
  * organization
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.8
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -17,4 +17,5 @@ export interface OrganizationGetTagsRequest {
      * If set to \'true\' then the list of the system tags is also returned. The default   value is \'false\'
      */
     include_system?: boolean;
+    filter?: object;
 }
diff --git a/src/app/business-logic/model/organization/organizationGetTagsResponse.ts b/src/app/business-logic/model/organization/organizationGetTagsResponse.ts
index 83a02051..241e9e57 100644
--- a/src/app/business-logic/model/organization/organizationGetTagsResponse.ts
+++ b/src/app/business-logic/model/organization/organizationGetTagsResponse.ts
@@ -2,7 +2,7 @@
  * organization
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.8
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/metricVariantResult.ts b/src/app/business-logic/model/projects/metricVariantResult.ts
index 59da407c..6ea99d08 100644
--- a/src/app/business-logic/model/projects/metricVariantResult.ts
+++ b/src/app/business-logic/model/projects/metricVariantResult.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/models.ts b/src/app/business-logic/model/projects/models.ts
index 2110f9e0..ba0ab2d4 100644
--- a/src/app/business-logic/model/projects/models.ts
+++ b/src/app/business-logic/model/projects/models.ts
@@ -14,6 +14,11 @@ export * from './projectsGetByIdRequest';
 export * from './projectsGetByIdResponse';
 export * from './projectsGetHyperParametersRequest';
 export * from './projectsGetHyperParametersResponse';
+export * from './projectsGetModelTagsRequest';
+export * from './projectsGetModelTagsResponse';
+export * from './projectsGetTaskTagsRequest';
+export * from './projectsGetTaskTagsRequestFilter';
+export * from './projectsGetTaskTagsResponse';
 export * from './projectsGetUniqueMetricVariantsRequest';
 export * from './projectsGetUniqueMetricVariantsResponse';
 export * from './projectsUpdateRequest';
diff --git a/src/app/business-logic/model/projects/multiFieldPatternData.ts b/src/app/business-logic/model/projects/multiFieldPatternData.ts
index e82e51f8..f3f798e2 100644
--- a/src/app/business-logic/model/projects/multiFieldPatternData.ts
+++ b/src/app/business-logic/model/projects/multiFieldPatternData.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/project.ts b/src/app/business-logic/model/projects/project.ts
index 3f6404e8..5b4a550b 100644
--- a/src/app/business-logic/model/projects/project.ts
+++ b/src/app/business-logic/model/projects/project.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/projectsCreateRequest.ts b/src/app/business-logic/model/projects/projectsCreateRequest.ts
index d8face30..e5ba8ff0 100644
--- a/src/app/business-logic/model/projects/projectsCreateRequest.ts
+++ b/src/app/business-logic/model/projects/projectsCreateRequest.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/projectsCreateResponse.ts b/src/app/business-logic/model/projects/projectsCreateResponse.ts
index 0ec6459e..2e7c430c 100644
--- a/src/app/business-logic/model/projects/projectsCreateResponse.ts
+++ b/src/app/business-logic/model/projects/projectsCreateResponse.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/projectsDeleteRequest.ts b/src/app/business-logic/model/projects/projectsDeleteRequest.ts
index 90f5312c..9acd8cbd 100644
--- a/src/app/business-logic/model/projects/projectsDeleteRequest.ts
+++ b/src/app/business-logic/model/projects/projectsDeleteRequest.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/projectsDeleteResponse.ts b/src/app/business-logic/model/projects/projectsDeleteResponse.ts
index 44d162f2..cb92082c 100644
--- a/src/app/business-logic/model/projects/projectsDeleteResponse.ts
+++ b/src/app/business-logic/model/projects/projectsDeleteResponse.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/projectsGetAllExRequest.ts b/src/app/business-logic/model/projects/projectsGetAllExRequest.ts
index 798738cc..1624f36a 100644
--- a/src/app/business-logic/model/projects/projectsGetAllExRequest.ts
+++ b/src/app/business-logic/model/projects/projectsGetAllExRequest.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -64,6 +64,10 @@ export interface ProjectsGetAllExRequest {
      * Report stats include only statistics for tasks in the specified state. If Null   is provided, stats for all task states will be returned.
      */
     stats_for_state?: ProjectsGetAllExRequest.StatsForStateEnum;
+    /**
+     * Return only non-public projects
+     */
+    non_public?: boolean;
 }
 export namespace ProjectsGetAllExRequest {
     export type StatsForStateEnum = 'active' | 'archived';
diff --git a/src/app/business-logic/model/projects/projectsGetAllExResponse.ts b/src/app/business-logic/model/projects/projectsGetAllExResponse.ts
index b2070d75..1e44264c 100644
--- a/src/app/business-logic/model/projects/projectsGetAllExResponse.ts
+++ b/src/app/business-logic/model/projects/projectsGetAllExResponse.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/projectsGetAllRequest.ts b/src/app/business-logic/model/projects/projectsGetAllRequest.ts
index 20e8f307..3343a40c 100644
--- a/src/app/business-logic/model/projects/projectsGetAllRequest.ts
+++ b/src/app/business-logic/model/projects/projectsGetAllRequest.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/projectsGetAllResponse.ts b/src/app/business-logic/model/projects/projectsGetAllResponse.ts
index febad89c..6ef25a30 100644
--- a/src/app/business-logic/model/projects/projectsGetAllResponse.ts
+++ b/src/app/business-logic/model/projects/projectsGetAllResponse.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/projectsGetAllResponseSingle.ts b/src/app/business-logic/model/projects/projectsGetAllResponseSingle.ts
index 82429df6..ee8b2b8b 100644
--- a/src/app/business-logic/model/projects/projectsGetAllResponseSingle.ts
+++ b/src/app/business-logic/model/projects/projectsGetAllResponseSingle.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/projectsGetByIdRequest.ts b/src/app/business-logic/model/projects/projectsGetByIdRequest.ts
index 7a5ddb06..dbc4fbef 100644
--- a/src/app/business-logic/model/projects/projectsGetByIdRequest.ts
+++ b/src/app/business-logic/model/projects/projectsGetByIdRequest.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/projectsGetByIdResponse.ts b/src/app/business-logic/model/projects/projectsGetByIdResponse.ts
index 68b4982b..d5904bfb 100644
--- a/src/app/business-logic/model/projects/projectsGetByIdResponse.ts
+++ b/src/app/business-logic/model/projects/projectsGetByIdResponse.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/projectsGetHyperParametersRequest.ts b/src/app/business-logic/model/projects/projectsGetHyperParametersRequest.ts
index 4e5b1af2..e8c8c9f0 100644
--- a/src/app/business-logic/model/projects/projectsGetHyperParametersRequest.ts
+++ b/src/app/business-logic/model/projects/projectsGetHyperParametersRequest.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/projectsGetHyperParametersResponse.ts b/src/app/business-logic/model/projects/projectsGetHyperParametersResponse.ts
index bc59001c..7877011e 100644
--- a/src/app/business-logic/model/projects/projectsGetHyperParametersResponse.ts
+++ b/src/app/business-logic/model/projects/projectsGetHyperParametersResponse.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -14,9 +14,9 @@
 
 export interface ProjectsGetHyperParametersResponse {
     /**
-     * A list of hyper parameter names
+     * A list of parameter sections and names
      */
-    parameters?: Array<string>;
+    parameters?: Array<object>;
     /**
      * Remaining results
      */
diff --git a/src/app/business-logic/model/projects/projectsGetUniqueMetricVariantsRequest.ts b/src/app/business-logic/model/projects/projectsGetUniqueMetricVariantsRequest.ts
index 6db65f09..bd8c0d9d 100644
--- a/src/app/business-logic/model/projects/projectsGetUniqueMetricVariantsRequest.ts
+++ b/src/app/business-logic/model/projects/projectsGetUniqueMetricVariantsRequest.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/projectsGetUniqueMetricVariantsResponse.ts b/src/app/business-logic/model/projects/projectsGetUniqueMetricVariantsResponse.ts
index efd42aa3..1a987e4f 100644
--- a/src/app/business-logic/model/projects/projectsGetUniqueMetricVariantsResponse.ts
+++ b/src/app/business-logic/model/projects/projectsGetUniqueMetricVariantsResponse.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/projectsUpdateRequest.ts b/src/app/business-logic/model/projects/projectsUpdateRequest.ts
index 90b8f5fd..2dc8e935 100644
--- a/src/app/business-logic/model/projects/projectsUpdateRequest.ts
+++ b/src/app/business-logic/model/projects/projectsUpdateRequest.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/projectsUpdateResponse.ts b/src/app/business-logic/model/projects/projectsUpdateResponse.ts
index 390d241e..0ab16fba 100644
--- a/src/app/business-logic/model/projects/projectsUpdateResponse.ts
+++ b/src/app/business-logic/model/projects/projectsUpdateResponse.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/stats.ts b/src/app/business-logic/model/projects/stats.ts
index a0344110..a34f389e 100644
--- a/src/app/business-logic/model/projects/stats.ts
+++ b/src/app/business-logic/model/projects/stats.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/statsStatusCount.ts b/src/app/business-logic/model/projects/statsStatusCount.ts
index e2be9c7f..c30e9002 100644
--- a/src/app/business-logic/model/projects/statsStatusCount.ts
+++ b/src/app/business-logic/model/projects/statsStatusCount.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/projects/statsStatusCountStatusCount.ts b/src/app/business-logic/model/projects/statsStatusCountStatusCount.ts
index 1f9d820a..a6858890 100644
--- a/src/app/business-logic/model/projects/statsStatusCountStatusCount.ts
+++ b/src/app/business-logic/model/projects/statsStatusCountStatusCount.ts
@@ -2,7 +2,7 @@
  * projects
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/entry.ts b/src/app/business-logic/model/queues/entry.ts
index c6ddbd7d..be28e83e 100644
--- a/src/app/business-logic/model/queues/entry.ts
+++ b/src/app/business-logic/model/queues/entry.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queue.ts b/src/app/business-logic/model/queues/queue.ts
index 40e05bff..28c15d72 100644
--- a/src/app/business-logic/model/queues/queue.ts
+++ b/src/app/business-logic/model/queues/queue.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queueMetrics.ts b/src/app/business-logic/model/queues/queueMetrics.ts
index fadcfa06..0d02d0d0 100644
--- a/src/app/business-logic/model/queues/queueMetrics.ts
+++ b/src/app/business-logic/model/queues/queueMetrics.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesAddTaskRequest.ts b/src/app/business-logic/model/queues/queuesAddTaskRequest.ts
index 51ddf891..ed2c056c 100644
--- a/src/app/business-logic/model/queues/queuesAddTaskRequest.ts
+++ b/src/app/business-logic/model/queues/queuesAddTaskRequest.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesAddTaskResponse.ts b/src/app/business-logic/model/queues/queuesAddTaskResponse.ts
index 0941a8a7..90e9b017 100644
--- a/src/app/business-logic/model/queues/queuesAddTaskResponse.ts
+++ b/src/app/business-logic/model/queues/queuesAddTaskResponse.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesCreateRequest.ts b/src/app/business-logic/model/queues/queuesCreateRequest.ts
index 88db5942..16fc523c 100644
--- a/src/app/business-logic/model/queues/queuesCreateRequest.ts
+++ b/src/app/business-logic/model/queues/queuesCreateRequest.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesCreateResponse.ts b/src/app/business-logic/model/queues/queuesCreateResponse.ts
index db42559c..6b23e971 100644
--- a/src/app/business-logic/model/queues/queuesCreateResponse.ts
+++ b/src/app/business-logic/model/queues/queuesCreateResponse.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesDeleteRequest.ts b/src/app/business-logic/model/queues/queuesDeleteRequest.ts
index 27b83fb5..ed806fd8 100644
--- a/src/app/business-logic/model/queues/queuesDeleteRequest.ts
+++ b/src/app/business-logic/model/queues/queuesDeleteRequest.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesDeleteResponse.ts b/src/app/business-logic/model/queues/queuesDeleteResponse.ts
index 26fda13c..17eaca13 100644
--- a/src/app/business-logic/model/queues/queuesDeleteResponse.ts
+++ b/src/app/business-logic/model/queues/queuesDeleteResponse.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesGetAllExRequest.ts b/src/app/business-logic/model/queues/queuesGetAllExRequest.ts
index 297170cd..65ac7af7 100644
--- a/src/app/business-logic/model/queues/queuesGetAllExRequest.ts
+++ b/src/app/business-logic/model/queues/queuesGetAllExRequest.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesGetAllExResponse.ts b/src/app/business-logic/model/queues/queuesGetAllExResponse.ts
index ebe4e633..72ec384f 100644
--- a/src/app/business-logic/model/queues/queuesGetAllExResponse.ts
+++ b/src/app/business-logic/model/queues/queuesGetAllExResponse.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesGetAllRequest.ts b/src/app/business-logic/model/queues/queuesGetAllRequest.ts
index a2602158..6e72daf4 100644
--- a/src/app/business-logic/model/queues/queuesGetAllRequest.ts
+++ b/src/app/business-logic/model/queues/queuesGetAllRequest.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesGetAllResponse.ts b/src/app/business-logic/model/queues/queuesGetAllResponse.ts
index 213a0bf8..92f5e13f 100644
--- a/src/app/business-logic/model/queues/queuesGetAllResponse.ts
+++ b/src/app/business-logic/model/queues/queuesGetAllResponse.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesGetByIdRequest.ts b/src/app/business-logic/model/queues/queuesGetByIdRequest.ts
index 3907edc0..fb172c49 100644
--- a/src/app/business-logic/model/queues/queuesGetByIdRequest.ts
+++ b/src/app/business-logic/model/queues/queuesGetByIdRequest.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesGetByIdResponse.ts b/src/app/business-logic/model/queues/queuesGetByIdResponse.ts
index 5956aaae..3ccffc39 100644
--- a/src/app/business-logic/model/queues/queuesGetByIdResponse.ts
+++ b/src/app/business-logic/model/queues/queuesGetByIdResponse.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesGetDefaultResponse.ts b/src/app/business-logic/model/queues/queuesGetDefaultResponse.ts
index d4b2f5fe..9b7ce82f 100644
--- a/src/app/business-logic/model/queues/queuesGetDefaultResponse.ts
+++ b/src/app/business-logic/model/queues/queuesGetDefaultResponse.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesGetNextTaskRequest.ts b/src/app/business-logic/model/queues/queuesGetNextTaskRequest.ts
index 60643c96..1531e097 100644
--- a/src/app/business-logic/model/queues/queuesGetNextTaskRequest.ts
+++ b/src/app/business-logic/model/queues/queuesGetNextTaskRequest.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesGetNextTaskResponse.ts b/src/app/business-logic/model/queues/queuesGetNextTaskResponse.ts
index 0a392989..ea92ce2d 100644
--- a/src/app/business-logic/model/queues/queuesGetNextTaskResponse.ts
+++ b/src/app/business-logic/model/queues/queuesGetNextTaskResponse.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesGetQueueMetricsRequest.ts b/src/app/business-logic/model/queues/queuesGetQueueMetricsRequest.ts
index 7c8c81d3..b0209345 100644
--- a/src/app/business-logic/model/queues/queuesGetQueueMetricsRequest.ts
+++ b/src/app/business-logic/model/queues/queuesGetQueueMetricsRequest.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesGetQueueMetricsResponse.ts b/src/app/business-logic/model/queues/queuesGetQueueMetricsResponse.ts
index 7b502184..a6683a0e 100644
--- a/src/app/business-logic/model/queues/queuesGetQueueMetricsResponse.ts
+++ b/src/app/business-logic/model/queues/queuesGetQueueMetricsResponse.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesMoveTaskBackwardRequest.ts b/src/app/business-logic/model/queues/queuesMoveTaskBackwardRequest.ts
index f6bdf8af..4e7a9400 100644
--- a/src/app/business-logic/model/queues/queuesMoveTaskBackwardRequest.ts
+++ b/src/app/business-logic/model/queues/queuesMoveTaskBackwardRequest.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesMoveTaskBackwardResponse.ts b/src/app/business-logic/model/queues/queuesMoveTaskBackwardResponse.ts
index e5e6361b..7e0d4ab8 100644
--- a/src/app/business-logic/model/queues/queuesMoveTaskBackwardResponse.ts
+++ b/src/app/business-logic/model/queues/queuesMoveTaskBackwardResponse.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesMoveTaskForwardRequest.ts b/src/app/business-logic/model/queues/queuesMoveTaskForwardRequest.ts
index 63ab1648..e588c056 100644
--- a/src/app/business-logic/model/queues/queuesMoveTaskForwardRequest.ts
+++ b/src/app/business-logic/model/queues/queuesMoveTaskForwardRequest.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesMoveTaskForwardResponse.ts b/src/app/business-logic/model/queues/queuesMoveTaskForwardResponse.ts
index ab1ef1ea..99cdc301 100644
--- a/src/app/business-logic/model/queues/queuesMoveTaskForwardResponse.ts
+++ b/src/app/business-logic/model/queues/queuesMoveTaskForwardResponse.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesMoveTaskToBackRequest.ts b/src/app/business-logic/model/queues/queuesMoveTaskToBackRequest.ts
index 142d7f39..8d945a2f 100644
--- a/src/app/business-logic/model/queues/queuesMoveTaskToBackRequest.ts
+++ b/src/app/business-logic/model/queues/queuesMoveTaskToBackRequest.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesMoveTaskToBackResponse.ts b/src/app/business-logic/model/queues/queuesMoveTaskToBackResponse.ts
index f711d31d..d76a7485 100644
--- a/src/app/business-logic/model/queues/queuesMoveTaskToBackResponse.ts
+++ b/src/app/business-logic/model/queues/queuesMoveTaskToBackResponse.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesMoveTaskToFrontRequest.ts b/src/app/business-logic/model/queues/queuesMoveTaskToFrontRequest.ts
index 4873e053..0ae4edd8 100644
--- a/src/app/business-logic/model/queues/queuesMoveTaskToFrontRequest.ts
+++ b/src/app/business-logic/model/queues/queuesMoveTaskToFrontRequest.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesMoveTaskToFrontResponse.ts b/src/app/business-logic/model/queues/queuesMoveTaskToFrontResponse.ts
index 1ff1c5ca..51453a9f 100644
--- a/src/app/business-logic/model/queues/queuesMoveTaskToFrontResponse.ts
+++ b/src/app/business-logic/model/queues/queuesMoveTaskToFrontResponse.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesRemoveTaskRequest.ts b/src/app/business-logic/model/queues/queuesRemoveTaskRequest.ts
index 7b11526d..3fe82a16 100644
--- a/src/app/business-logic/model/queues/queuesRemoveTaskRequest.ts
+++ b/src/app/business-logic/model/queues/queuesRemoveTaskRequest.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesRemoveTaskResponse.ts b/src/app/business-logic/model/queues/queuesRemoveTaskResponse.ts
index d268a0a2..a7977d43 100644
--- a/src/app/business-logic/model/queues/queuesRemoveTaskResponse.ts
+++ b/src/app/business-logic/model/queues/queuesRemoveTaskResponse.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesUpdateRequest.ts b/src/app/business-logic/model/queues/queuesUpdateRequest.ts
index a1bd5c69..fd373836 100644
--- a/src/app/business-logic/model/queues/queuesUpdateRequest.ts
+++ b/src/app/business-logic/model/queues/queuesUpdateRequest.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/queues/queuesUpdateResponse.ts b/src/app/business-logic/model/queues/queuesUpdateResponse.ts
index 072b5b40..23f2feaa 100644
--- a/src/app/business-logic/model/queues/queuesUpdateResponse.ts
+++ b/src/app/business-logic/model/queues/queuesUpdateResponse.ts
@@ -2,7 +2,7 @@
  * queues
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/server/serverConfigRequest.ts b/src/app/business-logic/model/server/serverConfigRequest.ts
index 338a8fd2..03bfe641 100644
--- a/src/app/business-logic/model/server/serverConfigRequest.ts
+++ b/src/app/business-logic/model/server/serverConfigRequest.ts
@@ -2,7 +2,7 @@
  * server
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/server/serverInfoResponse.ts b/src/app/business-logic/model/server/serverInfoResponse.ts
index 94392a05..1a2d8d1d 100644
--- a/src/app/business-logic/model/server/serverInfoResponse.ts
+++ b/src/app/business-logic/model/server/serverInfoResponse.ts
@@ -2,7 +2,7 @@
  * server
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -25,4 +25,8 @@ export interface ServerInfoResponse {
      * VCS commit number
      */
     commit?: string;
+    /**
+     * Server UID
+     */
+    uid?: string;
 }
diff --git a/src/app/business-logic/model/server/serverReportStatsOptionRequest.ts b/src/app/business-logic/model/server/serverReportStatsOptionRequest.ts
index 4b17e455..7dcdc9c0 100644
--- a/src/app/business-logic/model/server/serverReportStatsOptionRequest.ts
+++ b/src/app/business-logic/model/server/serverReportStatsOptionRequest.ts
@@ -2,7 +2,7 @@
  * server
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/server/serverReportStatsOptionResponse.ts b/src/app/business-logic/model/server/serverReportStatsOptionResponse.ts
index f727de4f..b405dc08 100644
--- a/src/app/business-logic/model/server/serverReportStatsOptionResponse.ts
+++ b/src/app/business-logic/model/server/serverReportStatsOptionResponse.ts
@@ -2,7 +2,7 @@
  * server
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/artifact.ts b/src/app/business-logic/model/tasks/artifact.ts
index b14f48e2..68d827b7 100644
--- a/src/app/business-logic/model/tasks/artifact.ts
+++ b/src/app/business-logic/model/tasks/artifact.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/artifactTypeData.ts b/src/app/business-logic/model/tasks/artifactTypeData.ts
index c2e71135..7bb365b7 100644
--- a/src/app/business-logic/model/tasks/artifactTypeData.ts
+++ b/src/app/business-logic/model/tasks/artifactTypeData.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/execution.ts b/src/app/business-logic/model/tasks/execution.ts
index b80c1ef5..66d237b7 100644
--- a/src/app/business-logic/model/tasks/execution.ts
+++ b/src/app/business-logic/model/tasks/execution.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/lastMetricsEvent.ts b/src/app/business-logic/model/tasks/lastMetricsEvent.ts
index 2830966f..f1aaa11c 100644
--- a/src/app/business-logic/model/tasks/lastMetricsEvent.ts
+++ b/src/app/business-logic/model/tasks/lastMetricsEvent.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/models.ts b/src/app/business-logic/model/tasks/models.ts
index 88358b7e..d81b9b10 100644
--- a/src/app/business-logic/model/tasks/models.ts
+++ b/src/app/business-logic/model/tasks/models.ts
@@ -1,9 +1,13 @@
 export * from './artifact';
 export * from './artifactTypeData';
+export * from './configurationItem';
 export * from './execution';
 export * from './lastMetricsEvent';
 export * from './multiFieldPatternData';
 export * from './output';
+export * from './paramKey';
+export * from './paramsItem';
+export * from './replaceHyperparamsEnum';
 export * from './script';
 export * from './task';
 export * from './taskStatusEnum';
@@ -18,10 +22,18 @@ export * from './tasksCompletedRequest';
 export * from './tasksCompletedResponse';
 export * from './tasksCreateRequest';
 export * from './tasksCreateResponse';
+export * from './tasksDeleteConfigurationRequest';
+export * from './tasksDeleteConfigurationResponse';
+export * from './tasksDeleteHyperParamsRequest';
+export * from './tasksDeleteHyperParamsResponse';
 export * from './tasksDeleteRequest';
 export * from './tasksDeleteResponse';
 export * from './tasksDequeueRequest';
 export * from './tasksDequeueResponse';
+export * from './tasksEditConfigurationRequest';
+export * from './tasksEditConfigurationResponse';
+export * from './tasksEditHyperParamsRequest';
+export * from './tasksEditHyperParamsResponse';
 export * from './tasksEditRequest';
 export * from './tasksEditResponse';
 export * from './tasksEnqueueRequest';
@@ -34,6 +46,14 @@ export * from './tasksGetAllRequest';
 export * from './tasksGetAllResponse';
 export * from './tasksGetByIdRequest';
 export * from './tasksGetByIdResponse';
+export * from './tasksGetConfigurationNamesRequest';
+export * from './tasksGetConfigurationNamesResponse';
+export * from './tasksGetConfigurationsRequest';
+export * from './tasksGetConfigurationsResponse';
+export * from './tasksGetHyperParamsRequest';
+export * from './tasksGetHyperParamsResponse';
+export * from './tasksGetTypesRequest';
+export * from './tasksGetTypesResponse';
 export * from './tasksPingRequest';
 export * from './tasksPublishRequest';
 export * from './tasksPublishResponse';
diff --git a/src/app/business-logic/model/tasks/multiFieldPatternData.ts b/src/app/business-logic/model/tasks/multiFieldPatternData.ts
index 4ee4e613..6b2b60c0 100644
--- a/src/app/business-logic/model/tasks/multiFieldPatternData.ts
+++ b/src/app/business-logic/model/tasks/multiFieldPatternData.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/output.ts b/src/app/business-logic/model/tasks/output.ts
index 6e4028b1..600af7f1 100644
--- a/src/app/business-logic/model/tasks/output.ts
+++ b/src/app/business-logic/model/tasks/output.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/script.ts b/src/app/business-logic/model/tasks/script.ts
index c8b117f9..92bdc393 100644
--- a/src/app/business-logic/model/tasks/script.ts
+++ b/src/app/business-logic/model/tasks/script.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/task.ts b/src/app/business-logic/model/tasks/task.ts
index ea968ce1..987d9d97 100644
--- a/src/app/business-logic/model/tasks/task.ts
+++ b/src/app/business-logic/model/tasks/task.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -10,9 +10,11 @@
  * Do not edit the class manually.
  */
 
+import { ConfigurationItem } from './configurationItem';
 import { Execution } from './execution';
 import { LastMetricsEvent } from './lastMetricsEvent';
 import { Output } from './output';
+import { ParamsItem } from './paramsItem';
 import { Script } from './script';
 import { TaskStatusEnum } from './taskStatusEnum';
 import { TaskTypeEnum } from './taskTypeEnum';
@@ -108,4 +110,12 @@ export interface Task {
      * Last metric variants (hash to events), one for each metric hash
      */
     last_metrics?: { [key: string]: any; };
+    /**
+     * Task hyper params per section
+     */
+    hyperparams?: { [key: string]: any; };
+    /**
+     * Task configuration params
+     */
+    configuration?: { [key: string]: ConfigurationItem; };
 }
diff --git a/src/app/business-logic/model/tasks/taskStatusEnum.ts b/src/app/business-logic/model/tasks/taskStatusEnum.ts
index 0dc8e718..06db753e 100644
--- a/src/app/business-logic/model/tasks/taskStatusEnum.ts
+++ b/src/app/business-logic/model/tasks/taskStatusEnum.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/taskTypeEnum.ts b/src/app/business-logic/model/tasks/taskTypeEnum.ts
index 774301c3..706bddd9 100644
--- a/src/app/business-logic/model/tasks/taskTypeEnum.ts
+++ b/src/app/business-logic/model/tasks/taskTypeEnum.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -12,9 +12,18 @@
 
 
 
-export type TaskTypeEnum = 'training' | 'testing';
+export type TaskTypeEnum = 'training' | 'testing' | 'inference' | 'data_processing' | 'application' | 'monitor' | 'controller' | 'optimizer' | 'service' | 'qc' | 'custom';
 
 export const TaskTypeEnum = {
     Training: 'training' as TaskTypeEnum,
-    Testing: 'testing' as TaskTypeEnum
+    Testing: 'testing' as TaskTypeEnum,
+    Inference: 'inference' as TaskTypeEnum,
+    DataProcessing: 'data_processing' as TaskTypeEnum,
+    Application: 'application' as TaskTypeEnum,
+    Monitor: 'monitor' as TaskTypeEnum,
+    Controller: 'controller' as TaskTypeEnum,
+    Optimizer: 'optimizer' as TaskTypeEnum,
+    Service: 'service' as TaskTypeEnum,
+    Qc: 'qc' as TaskTypeEnum,
+    Custom: 'custom' as TaskTypeEnum
 }
diff --git a/src/app/business-logic/model/tasks/tasksAddOrUpdateArtifactsRequest.ts b/src/app/business-logic/model/tasks/tasksAddOrUpdateArtifactsRequest.ts
index 2886716d..319eca6c 100644
--- a/src/app/business-logic/model/tasks/tasksAddOrUpdateArtifactsRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksAddOrUpdateArtifactsRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksAddOrUpdateArtifactsResponse.ts b/src/app/business-logic/model/tasks/tasksAddOrUpdateArtifactsResponse.ts
index db0f46a9..b20fc3b4 100644
--- a/src/app/business-logic/model/tasks/tasksAddOrUpdateArtifactsResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksAddOrUpdateArtifactsResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksCloneRequest.ts b/src/app/business-logic/model/tasks/tasksCloneRequest.ts
index f2871862..57231b67 100644
--- a/src/app/business-logic/model/tasks/tasksCloneRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksCloneRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -10,7 +10,9 @@
  * Do not edit the class manually.
  */
 
+import { ConfigurationItem } from './configurationItem';
 import { Execution } from './execution';
+import { ParamsItem } from './paramsItem';
 
 
 export interface TasksCloneRequest {
@@ -42,5 +44,17 @@ export interface TasksCloneRequest {
      * The project of the cloned task. If not provided then taken from the original   task
      */
     new_task_project?: string;
+    /**
+     * The hyper params for the new task. If not provided then taken from the original   task
+     */
+    new_task_hyperparams?: { [key: string]: any; };
+    /**
+     * The configuration for the new task. If not provided then taken from the   original task
+     */
+    new_task_configuration?: { [key: string]: ConfigurationItem; };
     execution_overrides?: Execution;
+    /**
+     * If set to \'false\' then the task fields that are copied from the original task   are not validated. The default is false.
+     */
+    validate_references?: boolean;
 }
diff --git a/src/app/business-logic/model/tasks/tasksCloneResponse.ts b/src/app/business-logic/model/tasks/tasksCloneResponse.ts
index e86ee55d..f425c3c4 100644
--- a/src/app/business-logic/model/tasks/tasksCloneResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksCloneResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksCloseRequest.ts b/src/app/business-logic/model/tasks/tasksCloseRequest.ts
index b1080ffa..2fec5c7f 100644
--- a/src/app/business-logic/model/tasks/tasksCloseRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksCloseRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksCloseResponse.ts b/src/app/business-logic/model/tasks/tasksCloseResponse.ts
index 1262664a..0eafd8a6 100644
--- a/src/app/business-logic/model/tasks/tasksCloseResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksCloseResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksCompletedRequest.ts b/src/app/business-logic/model/tasks/tasksCompletedRequest.ts
index a971059e..d64e0d03 100644
--- a/src/app/business-logic/model/tasks/tasksCompletedRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksCompletedRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksCompletedResponse.ts b/src/app/business-logic/model/tasks/tasksCompletedResponse.ts
index b831b4aa..7c73ff6c 100644
--- a/src/app/business-logic/model/tasks/tasksCompletedResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksCompletedResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksCreateRequest.ts b/src/app/business-logic/model/tasks/tasksCreateRequest.ts
index 953c7d8a..271378e5 100644
--- a/src/app/business-logic/model/tasks/tasksCreateRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksCreateRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -10,7 +10,9 @@
  * Do not edit the class manually.
  */
 
+import { ConfigurationItem } from './configurationItem';
 import { Execution } from './execution';
+import { ParamsItem } from './paramsItem';
 import { Script } from './script';
 import { TaskTypeEnum } from './taskTypeEnum';
 
@@ -47,4 +49,12 @@ export interface TasksCreateRequest {
     output_dest?: string;
     execution?: Execution;
     script?: Script;
+    /**
+     * Task hyper params per section
+     */
+    hyperparams?: { [key: string]: any; };
+    /**
+     * Task configuration params
+     */
+    configuration?: { [key: string]: ConfigurationItem; };
 }
diff --git a/src/app/business-logic/model/tasks/tasksCreateResponse.ts b/src/app/business-logic/model/tasks/tasksCreateResponse.ts
index 1ade117e..f932cb25 100644
--- a/src/app/business-logic/model/tasks/tasksCreateResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksCreateResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksDeleteRequest.ts b/src/app/business-logic/model/tasks/tasksDeleteRequest.ts
index fe697603..f1d56b57 100644
--- a/src/app/business-logic/model/tasks/tasksDeleteRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksDeleteRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksDeleteResponse.ts b/src/app/business-logic/model/tasks/tasksDeleteResponse.ts
index bef20d19..25c4b711 100644
--- a/src/app/business-logic/model/tasks/tasksDeleteResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksDeleteResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksDequeueRequest.ts b/src/app/business-logic/model/tasks/tasksDequeueRequest.ts
index 1d294382..a9114168 100644
--- a/src/app/business-logic/model/tasks/tasksDequeueRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksDequeueRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksDequeueResponse.ts b/src/app/business-logic/model/tasks/tasksDequeueResponse.ts
index eea2c360..ceab7ba2 100644
--- a/src/app/business-logic/model/tasks/tasksDequeueResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksDequeueResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksEditRequest.ts b/src/app/business-logic/model/tasks/tasksEditRequest.ts
index 92530196..9a84af73 100644
--- a/src/app/business-logic/model/tasks/tasksEditRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksEditRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -10,7 +10,9 @@
  * Do not edit the class manually.
  */
 
+import { ConfigurationItem } from './configurationItem';
 import { Execution } from './execution';
+import { ParamsItem } from './paramsItem';
 import { Script } from './script';
 import { TaskTypeEnum } from './taskTypeEnum';
 
@@ -54,5 +56,13 @@ export interface TasksEditRequest {
      */
     output_dest?: string;
     execution?: Execution;
+    /**
+     * Task hyper params per section
+     */
+    hyperparams?: { [key: string]: any; };
+    /**
+     * Task configuration params
+     */
+    configuration?: { [key: string]: ConfigurationItem; };
     script?: Script;
 }
diff --git a/src/app/business-logic/model/tasks/tasksEditResponse.ts b/src/app/business-logic/model/tasks/tasksEditResponse.ts
index 928467bf..961198f6 100644
--- a/src/app/business-logic/model/tasks/tasksEditResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksEditResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksEnqueueRequest.ts b/src/app/business-logic/model/tasks/tasksEnqueueRequest.ts
index 9d3e5c0d..1e31ed68 100644
--- a/src/app/business-logic/model/tasks/tasksEnqueueRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksEnqueueRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksEnqueueResponse.ts b/src/app/business-logic/model/tasks/tasksEnqueueResponse.ts
index 022a4350..8d8f94f8 100644
--- a/src/app/business-logic/model/tasks/tasksEnqueueResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksEnqueueResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksFailedRequest.ts b/src/app/business-logic/model/tasks/tasksFailedRequest.ts
index 8929aa34..183eb53e 100644
--- a/src/app/business-logic/model/tasks/tasksFailedRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksFailedRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksFailedResponse.ts b/src/app/business-logic/model/tasks/tasksFailedResponse.ts
index 658bcb26..bb07c2c8 100644
--- a/src/app/business-logic/model/tasks/tasksFailedResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksFailedResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksGetAllExRequest.ts b/src/app/business-logic/model/tasks/tasksGetAllExRequest.ts
index b326a01d..5a0d9d7e 100644
--- a/src/app/business-logic/model/tasks/tasksGetAllExRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksGetAllExRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -40,7 +40,7 @@ export interface TasksGetAllExRequest {
      */
     page_size?: number;
     /**
-     * List of field names to order by. When search_text is used, \'@text_score\' can be   used as a field representing the text score of returned documents. Use \'-\'   prefix to specify descending order. Optional, recommended when using page
+     * List of field names to order by. When search_text is used, \'@text_score\' can be   used as a field representing the text score of returned documents. Use \'-\'   prefix to specify descending order. Optional, recommended when using page. If   the first order field is a hyper parameter or metric then string values are   ordered according to numeric ordering rules where applicable
      */
     order_by?: Array<string>;
     /**
diff --git a/src/app/business-logic/model/tasks/tasksGetAllExResponse.ts b/src/app/business-logic/model/tasks/tasksGetAllExResponse.ts
index a77c57a1..85383b87 100644
--- a/src/app/business-logic/model/tasks/tasksGetAllExResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksGetAllExResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksGetAllRequest.ts b/src/app/business-logic/model/tasks/tasksGetAllRequest.ts
index ccc79bb5..5dfc8416 100644
--- a/src/app/business-logic/model/tasks/tasksGetAllRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksGetAllRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -40,7 +40,7 @@ export interface TasksGetAllRequest {
      */
     page_size?: number;
     /**
-     * List of field names to order by. When search_text is used, \'@text_score\' can be   used as a field representing the text score of returned documents. Use \'-\'   prefix to specify descending order. Optional, recommended when using page
+     * List of field names to order by. When search_text is used, \'@text_score\' can be   used as a field representing the text score of returned documents. Use \'-\'   prefix to specify descending order. Optional, recommended when using page. If   the first order field is a hyper parameter or metric then string values are   ordered according to numeric ordering rules where applicable
      */
     order_by?: Array<string>;
     /**
diff --git a/src/app/business-logic/model/tasks/tasksGetAllResponse.ts b/src/app/business-logic/model/tasks/tasksGetAllResponse.ts
index 95711abf..661b506a 100644
--- a/src/app/business-logic/model/tasks/tasksGetAllResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksGetAllResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksGetByIdRequest.ts b/src/app/business-logic/model/tasks/tasksGetByIdRequest.ts
index 70313d77..b013373a 100644
--- a/src/app/business-logic/model/tasks/tasksGetByIdRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksGetByIdRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksGetByIdResponse.ts b/src/app/business-logic/model/tasks/tasksGetByIdResponse.ts
index 4f65bb68..f41d664c 100644
--- a/src/app/business-logic/model/tasks/tasksGetByIdResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksGetByIdResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksGetTypesRequest.ts b/src/app/business-logic/model/tasks/tasksGetTypesRequest.ts
index ddb53d42..7f569cc9 100644
--- a/src/app/business-logic/model/tasks/tasksGetTypesRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksGetTypesRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.8
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksGetTypesResponse.ts b/src/app/business-logic/model/tasks/tasksGetTypesResponse.ts
index 5f69e6a5..2e00d831 100644
--- a/src/app/business-logic/model/tasks/tasksGetTypesResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksGetTypesResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.8
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksPingRequest.ts b/src/app/business-logic/model/tasks/tasksPingRequest.ts
index da66f340..3ae7d39a 100644
--- a/src/app/business-logic/model/tasks/tasksPingRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksPingRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksPublishRequest.ts b/src/app/business-logic/model/tasks/tasksPublishRequest.ts
index 3b2a2594..cd94658b 100644
--- a/src/app/business-logic/model/tasks/tasksPublishRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksPublishRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksPublishResponse.ts b/src/app/business-logic/model/tasks/tasksPublishResponse.ts
index d4ad0524..71f458c1 100644
--- a/src/app/business-logic/model/tasks/tasksPublishResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksPublishResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksResetRequest.ts b/src/app/business-logic/model/tasks/tasksResetRequest.ts
index 2e05a93e..f90b086d 100644
--- a/src/app/business-logic/model/tasks/tasksResetRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksResetRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -17,6 +17,10 @@ export interface TasksResetRequest {
      * If not true, call fails if the task status is \'completed\'
      */
     force?: boolean;
+    /**
+     * Clear script and execution sections completely
+     */
+    clear_all?: boolean;
     /**
      * Task ID
      */
diff --git a/src/app/business-logic/model/tasks/tasksResetResponse.ts b/src/app/business-logic/model/tasks/tasksResetResponse.ts
index 31e063b5..4ec1d351 100644
--- a/src/app/business-logic/model/tasks/tasksResetResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksResetResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksSetRequirementsRequest.ts b/src/app/business-logic/model/tasks/tasksSetRequirementsRequest.ts
index f991445c..f8d04fe9 100644
--- a/src/app/business-logic/model/tasks/tasksSetRequirementsRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksSetRequirementsRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksSetRequirementsResponse.ts b/src/app/business-logic/model/tasks/tasksSetRequirementsResponse.ts
index 95cc0d64..1c7011d8 100644
--- a/src/app/business-logic/model/tasks/tasksSetRequirementsResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksSetRequirementsResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksStartedRequest.ts b/src/app/business-logic/model/tasks/tasksStartedRequest.ts
index 1002be3e..badc059d 100644
--- a/src/app/business-logic/model/tasks/tasksStartedRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksStartedRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksStartedResponse.ts b/src/app/business-logic/model/tasks/tasksStartedResponse.ts
index b8809c35..7de51e6d 100644
--- a/src/app/business-logic/model/tasks/tasksStartedResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksStartedResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksStopRequest.ts b/src/app/business-logic/model/tasks/tasksStopRequest.ts
index 02112e81..29dd638b 100644
--- a/src/app/business-logic/model/tasks/tasksStopRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksStopRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksStopResponse.ts b/src/app/business-logic/model/tasks/tasksStopResponse.ts
index 38eb7441..ed70ca7d 100644
--- a/src/app/business-logic/model/tasks/tasksStopResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksStopResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksStoppedRequest.ts b/src/app/business-logic/model/tasks/tasksStoppedRequest.ts
index 41d199c1..c8a2437a 100644
--- a/src/app/business-logic/model/tasks/tasksStoppedRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksStoppedRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksStoppedResponse.ts b/src/app/business-logic/model/tasks/tasksStoppedResponse.ts
index cb4da04a..606ea77e 100644
--- a/src/app/business-logic/model/tasks/tasksStoppedResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksStoppedResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksUpdateBatchResponse.ts b/src/app/business-logic/model/tasks/tasksUpdateBatchResponse.ts
index 7ea6c8fa..95366ad3 100644
--- a/src/app/business-logic/model/tasks/tasksUpdateBatchResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksUpdateBatchResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksUpdateRequest.ts b/src/app/business-logic/model/tasks/tasksUpdateRequest.ts
index 32a6c55c..17e95e44 100644
--- a/src/app/business-logic/model/tasks/tasksUpdateRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksUpdateRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksUpdateResponse.ts b/src/app/business-logic/model/tasks/tasksUpdateResponse.ts
index 3f8eb82f..0f253b45 100644
--- a/src/app/business-logic/model/tasks/tasksUpdateResponse.ts
+++ b/src/app/business-logic/model/tasks/tasksUpdateResponse.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/tasks/tasksValidateRequest.ts b/src/app/business-logic/model/tasks/tasksValidateRequest.ts
index d8ceb638..0cff9b59 100644
--- a/src/app/business-logic/model/tasks/tasksValidateRequest.ts
+++ b/src/app/business-logic/model/tasks/tasksValidateRequest.ts
@@ -2,7 +2,7 @@
  * tasks
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -10,7 +10,9 @@
  * Do not edit the class manually.
  */
 
+import { ConfigurationItem } from './configurationItem';
 import { Execution } from './execution';
+import { ParamsItem } from './paramsItem';
 import { Script } from './script';
 import { TaskTypeEnum } from './taskTypeEnum';
 
@@ -46,5 +48,13 @@ export interface TasksValidateRequest {
      */
     output_dest?: string;
     execution?: Execution;
+    /**
+     * Task hyper params per section
+     */
+    hyperparams?: { [key: string]: any; };
+    /**
+     * Task configuration params
+     */
+    configuration?: { [key: string]: ConfigurationItem; };
     script?: Script;
 }
diff --git a/src/app/business-logic/model/users/getCurrentUserResponseUserObject.ts b/src/app/business-logic/model/users/getCurrentUserResponseUserObject.ts
index 355e0da5..715bcb1c 100644
--- a/src/app/business-logic/model/users/getCurrentUserResponseUserObject.ts
+++ b/src/app/business-logic/model/users/getCurrentUserResponseUserObject.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/users/getCurrentUserResponseUserObjectCompany.ts b/src/app/business-logic/model/users/getCurrentUserResponseUserObjectCompany.ts
index 440910d6..81fce563 100644
--- a/src/app/business-logic/model/users/getCurrentUserResponseUserObjectCompany.ts
+++ b/src/app/business-logic/model/users/getCurrentUserResponseUserObjectCompany.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/users/user.ts b/src/app/business-logic/model/users/user.ts
index 062b1435..d833a3d8 100644
--- a/src/app/business-logic/model/users/user.ts
+++ b/src/app/business-logic/model/users/user.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/users/usersCreateRequest.ts b/src/app/business-logic/model/users/usersCreateRequest.ts
index 06afb448..4670aaf7 100644
--- a/src/app/business-logic/model/users/usersCreateRequest.ts
+++ b/src/app/business-logic/model/users/usersCreateRequest.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/users/usersDeleteRequest.ts b/src/app/business-logic/model/users/usersDeleteRequest.ts
index 66436533..d5a0c503 100644
--- a/src/app/business-logic/model/users/usersDeleteRequest.ts
+++ b/src/app/business-logic/model/users/usersDeleteRequest.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/users/usersGetAllExRequest.ts b/src/app/business-logic/model/users/usersGetAllExRequest.ts
index 90f32a9c..b65d0dcd 100644
--- a/src/app/business-logic/model/users/usersGetAllExRequest.ts
+++ b/src/app/business-logic/model/users/usersGetAllExRequest.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.8
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -38,7 +38,7 @@ export interface UsersGetAllExRequest {
      */
     order_by?: Array<string>;
     /**
-     * List of prejects that user was active in. If empty list is passed then all   projects
+     * List of project IDs. If provided, return only users that were active in these   projects. If empty list is provided, return users that were active in all   projects
      */
     active_in_projects?: Array<string>;
 }
diff --git a/src/app/business-logic/model/users/usersGetAllExResponse.ts b/src/app/business-logic/model/users/usersGetAllExResponse.ts
index 85025caf..f2c9262b 100644
--- a/src/app/business-logic/model/users/usersGetAllExResponse.ts
+++ b/src/app/business-logic/model/users/usersGetAllExResponse.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.8
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/users/usersGetAllRequest.ts b/src/app/business-logic/model/users/usersGetAllRequest.ts
index c38a2bae..ec8a6f7d 100644
--- a/src/app/business-logic/model/users/usersGetAllRequest.ts
+++ b/src/app/business-logic/model/users/usersGetAllRequest.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.8
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/users/usersGetAllResponse.ts b/src/app/business-logic/model/users/usersGetAllResponse.ts
index 8ed9b414..4e500f60 100644
--- a/src/app/business-logic/model/users/usersGetAllResponse.ts
+++ b/src/app/business-logic/model/users/usersGetAllResponse.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.8
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/users/usersGetByIdRequest.ts b/src/app/business-logic/model/users/usersGetByIdRequest.ts
index 5daada77..adc335af 100644
--- a/src/app/business-logic/model/users/usersGetByIdRequest.ts
+++ b/src/app/business-logic/model/users/usersGetByIdRequest.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/users/usersGetByIdResponse.ts b/src/app/business-logic/model/users/usersGetByIdResponse.ts
index c3387654..4e897c9d 100644
--- a/src/app/business-logic/model/users/usersGetByIdResponse.ts
+++ b/src/app/business-logic/model/users/usersGetByIdResponse.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/users/usersGetCurrentUserResponse.ts b/src/app/business-logic/model/users/usersGetCurrentUserResponse.ts
index 2761519a..72a3e5aa 100644
--- a/src/app/business-logic/model/users/usersGetCurrentUserResponse.ts
+++ b/src/app/business-logic/model/users/usersGetCurrentUserResponse.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/users/usersGetPreferencesResponse.ts b/src/app/business-logic/model/users/usersGetPreferencesResponse.ts
index 8481e2f5..4de6e78f 100644
--- a/src/app/business-logic/model/users/usersGetPreferencesResponse.ts
+++ b/src/app/business-logic/model/users/usersGetPreferencesResponse.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/users/usersSetPreferencesRequest.ts b/src/app/business-logic/model/users/usersSetPreferencesRequest.ts
index 6a6b4b9e..7dd6ae0e 100644
--- a/src/app/business-logic/model/users/usersSetPreferencesRequest.ts
+++ b/src/app/business-logic/model/users/usersSetPreferencesRequest.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/users/usersSetPreferencesResponse.ts b/src/app/business-logic/model/users/usersSetPreferencesResponse.ts
index d6553ef1..428fb8a9 100644
--- a/src/app/business-logic/model/users/usersSetPreferencesResponse.ts
+++ b/src/app/business-logic/model/users/usersSetPreferencesResponse.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/users/usersUpdateRequest.ts b/src/app/business-logic/model/users/usersUpdateRequest.ts
index 9fb485e3..1cc09cec 100644
--- a/src/app/business-logic/model/users/usersUpdateRequest.ts
+++ b/src/app/business-logic/model/users/usersUpdateRequest.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/users/usersUpdateResponse.ts b/src/app/business-logic/model/users/usersUpdateResponse.ts
index e1eaabac..30049adc 100644
--- a/src/app/business-logic/model/users/usersUpdateResponse.ts
+++ b/src/app/business-logic/model/users/usersUpdateResponse.ts
@@ -2,7 +2,7 @@
  * users
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/activitySeries.ts b/src/app/business-logic/model/workers/activitySeries.ts
index 48f7e338..35fee279 100644
--- a/src/app/business-logic/model/workers/activitySeries.ts
+++ b/src/app/business-logic/model/workers/activitySeries.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/aggregationStats.ts b/src/app/business-logic/model/workers/aggregationStats.ts
index 07a3571b..ad13ba25 100644
--- a/src/app/business-logic/model/workers/aggregationStats.ts
+++ b/src/app/business-logic/model/workers/aggregationStats.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/aggregationType.ts b/src/app/business-logic/model/workers/aggregationType.ts
index 61301af7..a1f41f79 100644
--- a/src/app/business-logic/model/workers/aggregationType.ts
+++ b/src/app/business-logic/model/workers/aggregationType.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/currentTaskEntry.ts b/src/app/business-logic/model/workers/currentTaskEntry.ts
index a64b067e..a614c60b 100644
--- a/src/app/business-logic/model/workers/currentTaskEntry.ts
+++ b/src/app/business-logic/model/workers/currentTaskEntry.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -14,11 +14,11 @@
 
 export interface CurrentTaskEntry {
     /**
-     * Worker ID
+     * ID
      */
     id?: string;
     /**
-     * Worker name
+     * Name
      */
     name?: string;
     /**
diff --git a/src/app/business-logic/model/workers/idNameEntry.ts b/src/app/business-logic/model/workers/idNameEntry.ts
index 290f856a..1d5965be 100644
--- a/src/app/business-logic/model/workers/idNameEntry.ts
+++ b/src/app/business-logic/model/workers/idNameEntry.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -14,11 +14,11 @@
 
 export interface IdNameEntry {
     /**
-     * Worker ID
+     * ID
      */
     id?: string;
     /**
-     * Worker name
+     * Name
      */
     name?: string;
 }
diff --git a/src/app/business-logic/model/workers/machineStats.ts b/src/app/business-logic/model/workers/machineStats.ts
index a1d7dd7e..9e0c4ac6 100644
--- a/src/app/business-logic/model/workers/machineStats.ts
+++ b/src/app/business-logic/model/workers/machineStats.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/metricStats.ts b/src/app/business-logic/model/workers/metricStats.ts
index baaf8a3e..a89fe967 100644
--- a/src/app/business-logic/model/workers/metricStats.ts
+++ b/src/app/business-logic/model/workers/metricStats.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/metricsCategory.ts b/src/app/business-logic/model/workers/metricsCategory.ts
index 8e2a3055..11d16c65 100644
--- a/src/app/business-logic/model/workers/metricsCategory.ts
+++ b/src/app/business-logic/model/workers/metricsCategory.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/queueEntry.ts b/src/app/business-logic/model/workers/queueEntry.ts
index b2472f00..37bff4b5 100644
--- a/src/app/business-logic/model/workers/queueEntry.ts
+++ b/src/app/business-logic/model/workers/queueEntry.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -15,11 +15,11 @@ import { IdNameEntry } from './idNameEntry';
 
 export interface QueueEntry {
     /**
-     * Worker ID
+     * ID
      */
     id?: string;
     /**
-     * Worker name
+     * Name
      */
     name?: string;
     next_task?: IdNameEntry;
diff --git a/src/app/business-logic/model/workers/statItem.ts b/src/app/business-logic/model/workers/statItem.ts
index d88066a3..8ac6dddf 100644
--- a/src/app/business-logic/model/workers/statItem.ts
+++ b/src/app/business-logic/model/workers/statItem.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/worker.ts b/src/app/business-logic/model/workers/worker.ts
index 59e061d9..53fc3cbe 100644
--- a/src/app/business-logic/model/workers/worker.ts
+++ b/src/app/business-logic/model/workers/worker.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -39,6 +39,7 @@ export interface Worker {
      */
     last_report_time?: Date;
     task?: CurrentTaskEntry;
+    project?: IdNameEntry;
     queue?: QueueEntry;
     /**
      * List of queues on which the worker is listening
diff --git a/src/app/business-logic/model/workers/workerStats.ts b/src/app/business-logic/model/workers/workerStats.ts
index 921b42ef..895715fc 100644
--- a/src/app/business-logic/model/workers/workerStats.ts
+++ b/src/app/business-logic/model/workers/workerStats.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/workersGetActivityReportRequest.ts b/src/app/business-logic/model/workers/workersGetActivityReportRequest.ts
index 74198987..5b5649b1 100644
--- a/src/app/business-logic/model/workers/workersGetActivityReportRequest.ts
+++ b/src/app/business-logic/model/workers/workersGetActivityReportRequest.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/workersGetActivityReportResponse.ts b/src/app/business-logic/model/workers/workersGetActivityReportResponse.ts
index 7887f4d9..325a961e 100644
--- a/src/app/business-logic/model/workers/workersGetActivityReportResponse.ts
+++ b/src/app/business-logic/model/workers/workersGetActivityReportResponse.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/workersGetAllRequest.ts b/src/app/business-logic/model/workers/workersGetAllRequest.ts
index a70d4b02..7d84433a 100644
--- a/src/app/business-logic/model/workers/workersGetAllRequest.ts
+++ b/src/app/business-logic/model/workers/workersGetAllRequest.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/workersGetAllResponse.ts b/src/app/business-logic/model/workers/workersGetAllResponse.ts
index 9626c997..77c0e814 100644
--- a/src/app/business-logic/model/workers/workersGetAllResponse.ts
+++ b/src/app/business-logic/model/workers/workersGetAllResponse.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/workersGetMetricKeysRequest.ts b/src/app/business-logic/model/workers/workersGetMetricKeysRequest.ts
index 0ba90ce1..9d20a434 100644
--- a/src/app/business-logic/model/workers/workersGetMetricKeysRequest.ts
+++ b/src/app/business-logic/model/workers/workersGetMetricKeysRequest.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/workersGetMetricKeysResponse.ts b/src/app/business-logic/model/workers/workersGetMetricKeysResponse.ts
index 9b9844ce..31ac7c46 100644
--- a/src/app/business-logic/model/workers/workersGetMetricKeysResponse.ts
+++ b/src/app/business-logic/model/workers/workersGetMetricKeysResponse.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/workersGetStatsRequest.ts b/src/app/business-logic/model/workers/workersGetStatsRequest.ts
index d20f7fc0..eebc0463 100644
--- a/src/app/business-logic/model/workers/workersGetStatsRequest.ts
+++ b/src/app/business-logic/model/workers/workersGetStatsRequest.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/workersGetStatsResponse.ts b/src/app/business-logic/model/workers/workersGetStatsResponse.ts
index 8532de0b..db8b97cc 100644
--- a/src/app/business-logic/model/workers/workersGetStatsResponse.ts
+++ b/src/app/business-logic/model/workers/workersGetStatsResponse.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/workersRegisterRequest.ts b/src/app/business-logic/model/workers/workersRegisterRequest.ts
index 5aabd383..d168eb3e 100644
--- a/src/app/business-logic/model/workers/workersRegisterRequest.ts
+++ b/src/app/business-logic/model/workers/workersRegisterRequest.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/workersStatusReportRequest.ts b/src/app/business-logic/model/workers/workersStatusReportRequest.ts
index 65bac691..42e94b81 100644
--- a/src/app/business-logic/model/workers/workersStatusReportRequest.ts
+++ b/src/app/business-logic/model/workers/workersStatusReportRequest.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/business-logic/model/workers/workersUnregisterRequest.ts b/src/app/business-logic/model/workers/workersUnregisterRequest.ts
index 976d0a9c..e7d78c91 100644
--- a/src/app/business-logic/model/workers/workersUnregisterRequest.ts
+++ b/src/app/business-logic/model/workers/workersUnregisterRequest.ts
@@ -2,7 +2,7 @@
  * workers
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
diff --git a/src/app/core/effects/users.effects.ts b/src/app/core/effects/users.effects.ts
index 9230f3df..f034d440 100644
--- a/src/app/core/effects/users.effects.ts
+++ b/src/app/core/effects/users.effects.ts
@@ -20,13 +20,7 @@ export class UserEffects {
   logoutFlow = this.actions.pipe(
     ofType(USERS_ACTIONS.LOGOUT),
     map(() => {
-      let domainParts = window.location.host.split(':')[0].split('.');
-      if (domainParts.length > 2) {
-        domainParts = domainParts.slice(1);
-      }
-      const domain = domainParts.join('.');
       this.authService.authLogout({}).subscribe();
-      this.cookiesService.delete('trains_token_basic', '/', domain);
       return {type: USERS_ACTIONS.LOGOUT_SUCCESS};
     })
   );
diff --git a/src/app/features/admin/usage-stats/usage-stats.component.html b/src/app/features/admin/usage-stats/usage-stats.component.html
index d79e50d0..3d07e307 100644
--- a/src/app/features/admin/usage-stats/usage-stats.component.html
+++ b/src/app/features/admin/usage-stats/usage-stats.component.html
@@ -1,5 +1,4 @@
 <ng-container *ngIf="!demo">
-  <div class="separator"></div>
   <mat-slide-toggle
     (change)="statsChange($event)"
     [checked]="allowed$ | async">Send anonymous usage data (Global setting)</mat-slide-toggle>
diff --git a/src/app/features/admin/usage-stats/usage-stats.component.scss b/src/app/features/admin/usage-stats/usage-stats.component.scss
index 1d2ed914..266875b2 100644
--- a/src/app/features/admin/usage-stats/usage-stats.component.scss
+++ b/src/app/features/admin/usage-stats/usage-stats.component.scss
@@ -1,11 +1,3 @@
-@import "../../../webapp-common/shared/ui-components/styles/variables.scss";
-@import "../../../webapp-common/shared/ui-components/styles/mixins/lines.scss";
-
-.separator {
-  margin: $card-spacer-y / 2 $card-spacer-x;
-  @include line($line-height-sm + px)
-}
-
 .mat-slide-toggle {
   margin: 10px 0;
 }
diff --git a/src/app/features/dashboard/dashboard.component.html b/src/app/features/dashboard/dashboard.component.html
index 1d72eb13..1ceb5db1 100644
--- a/src/app/features/dashboard/dashboard.component.html
+++ b/src/app/features/dashboard/dashboard.component.html
@@ -1,19 +1,19 @@
 <sm-dashboard-search [ngClass]="{'dashboard-search': (activeSearch$ | async)}"></sm-dashboard-search>
 <div *ngIf="!(activeSearch$ | async)" class="recent">
-  <div  class="container h-100">
-<div *ngIf="!(activeSearch$ | async)" class="container h-100">
-  <div class="recent">
-    <sm-dashboard-projects></sm-dashboard-projects>
-    <sm-dashboard-experiments>
-        <div header-buttons>
-          <button
-            class="btn btn-primary d-flex align-items-center"
-            (click)="redirectToWorkers()"
-          >
-            <i class="icon sm i-queues"></i>&nbsp; MANAGE WORKERS AND QUEUES
-          </button>
-        </div>
-      </sm-dashboard-experiments>
+  <div class="container h-100">
+    <div *ngIf="!(activeSearch$ | async)" class="container h-100">
+      <div class="recent">
+        <sm-dashboard-projects></sm-dashboard-projects>
+        <sm-dashboard-experiments>
+          <div header-buttons>
+            <button
+              *smCheckPermission="true"
+              class="btn btn-primary d-flex align-items-center"
+              (click)="redirectToWorkers()"
+            ><i class="al-icon al-ico-queues al-color light-grey-blue sm mr-2"></i>MANAGE WORKERS AND QUEUES</button>
+          </div>
+        </sm-dashboard-experiments>
+      </div>
+    </div>
   </div>
 </div>
-
diff --git a/src/app/features/dashboard/dashboard.const.ts b/src/app/features/dashboard/dashboard.const.ts
index 2124a7e9..b6e67ee9 100644
--- a/src/app/features/dashboard/dashboard.const.ts
+++ b/src/app/features/dashboard/dashboard.const.ts
@@ -7,42 +7,38 @@ export const RECENT_EXPERIMENTS_TABLE_COLS: ISmCol[] = [
     id            : RECENT_TASKS_TABLE_COL_FIELDS.TYPE,
     headerType    : ColHeaderTypeEnum.title,
     header        : 'TYPE',
-    bodyStyleClass: 'type-col'
+    bodyStyleClass: 'type-col',
+    disableDrag   : true,
   },
   {
-    id        : RECENT_TASKS_TABLE_COL_FIELDS.NAME,
-    headerType: ColHeaderTypeEnum.title,
-    header    : 'TITLE',
+    id         : RECENT_TASKS_TABLE_COL_FIELDS.NAME,
+    headerType : ColHeaderTypeEnum.title,
+    header     : 'TITLE',
+    disableDrag: true,
   },
   {
-    id        : RECENT_TASKS_TABLE_COL_FIELDS.PROJECT,
-    headerType: ColHeaderTypeEnum.title,
-    header    : 'PROJECT',
+    id         : RECENT_TASKS_TABLE_COL_FIELDS.PROJECT,
+    headerType : ColHeaderTypeEnum.title,
+    header     : 'PROJECT',
+    disableDrag: true,
   },
   {
-    id        : RECENT_TASKS_TABLE_COL_FIELDS.STARTED,
-    headerType: ColHeaderTypeEnum.title,
-    header    : 'STARTED',
+    id         : RECENT_TASKS_TABLE_COL_FIELDS.STARTED,
+    headerType : ColHeaderTypeEnum.title,
+    header     : 'STARTED',
+    disableDrag: true,
   },
   {
-    id        : RECENT_TASKS_TABLE_COL_FIELDS.LAST_UPDATE,
-    headerType: ColHeaderTypeEnum.title,
-    header    : 'UPDATED'
+    id         : RECENT_TASKS_TABLE_COL_FIELDS.LAST_UPDATE,
+    headerType : ColHeaderTypeEnum.title,
+    header     : 'UPDATED',
+    disableDrag: true,
   },
-  // {
-  //   id        : RECENT_TASKS_TABLE_COL_FIELDS.QUEUE,
-  //   headerType: ColHeaderTypeEnum.title,
-  //   header    : 'QUEUE'
-  // },
-  // {
-  //   id        : RECENT_TASKS_TABLE_COL_FIELDS.WORKER,
-  //   headerType: ColHeaderTypeEnum.title,
-  //   header    : 'WORKER'
-  // },
   {
     id            : RECENT_TASKS_TABLE_COL_FIELDS.STATUS,
     headerType    : ColHeaderTypeEnum.title,
     header        : 'STATUS',
-    bodyStyleClass: 'status-col'
+    bodyStyleClass: 'status-col',
+    disableDrag   : true,
   }
 ];
diff --git a/src/app/features/dashboard/dashboard.module.ts b/src/app/features/dashboard/dashboard.module.ts
index 458f383e..1c8ffc39 100644
--- a/src/app/features/dashboard/dashboard.module.ts
+++ b/src/app/features/dashboard/dashboard.module.ts
@@ -12,18 +12,20 @@ import {commonDashboardReducer} from '../../webapp-common/dashboard/common-dashb
 import {CommonSearchResultsModule} from '../../webapp-common/search/common-search-results.module';
 import {DashboardSearchComponent} from './containers/dashboard-search/dashboard-search.component';
 import {SearchResultsPageComponent} from './dumb/search-results-page/search-results-page.component';
+import {SharedModule} from '../../shared/shared.module';
 
 @NgModule({
-  imports        : [
-    ProjectCreateDialogModule,
-    CommonModule,
-    SMSharedModule,
-    ExperimentSharedModule,
-    DashboardRoutingModule,
-    CommonSearchResultsModule,
-    StoreModule.forFeature('dashboard', commonDashboardReducer),
-    CommonDashboardModule,
-  ],
+    imports: [
+        ProjectCreateDialogModule,
+        CommonModule,
+        SMSharedModule,
+        ExperimentSharedModule,
+        DashboardRoutingModule,
+        CommonSearchResultsModule,
+        StoreModule.forFeature('dashboard', commonDashboardReducer),
+        CommonDashboardModule,
+        SharedModule,
+    ],
   declarations   : [DashboardComponent, GettingStartedCardComponent, DashboardSearchComponent, SearchResultsPageComponent]
 })
 export class DashboardModule {
diff --git a/src/app/features/experiments-compare/experiment-details-reverter-service.base.ts b/src/app/features/experiments-compare/experiment-details-reverter-service.base.ts
index 7c1ac21d..d77c2536 100644
--- a/src/app/features/experiments-compare/experiment-details-reverter-service.base.ts
+++ b/src/app/features/experiments-compare/experiment-details-reverter-service.base.ts
@@ -15,19 +15,17 @@ export abstract class ExperimentDetailsReverterServiceBase {
     return experimentIds.map(id => {
       const exp = experiments.find(ex => ex.id === id);
       return {
-        id            : exp.id,
-        name          : exp.name,
-        status        : exp.status,
+        id: exp.id,
+        name: exp.name,
+        status: exp.status,
         last_iteration: exp.last_iteration,
-        last_update   : exp.last_update,
-        project       : exp.project,
-        completed     : exp.completed,
-        tags          : exp.tags,
-        execution     : this.revertExecution(exp),
-        artifacts     : this.revertArtifacts(exp),
-        parameters    : get('execution.parameters', exp) ?
-          this.revertExecutionParameters(exp.execution.parameters) :
-          undefined,
+        last_update: exp.last_update,
+        project: exp.project,
+        completed: exp.completed,
+        tags: exp.tags,
+        execution: this.revertExecution(exp),
+        artifacts: this.revertArtifacts(exp),
+        configuration: exp.configuration
       };
     });
   }
@@ -35,18 +33,13 @@ export abstract class ExperimentDetailsReverterServiceBase {
   protected sortObjectByKey(obj) {
     const orderedLabels = {};
     Object.keys(obj).sort().forEach((key) => {
-      orderedLabels[key] = obj[key];
+      orderedLabels[key] = typeof obj[key] === 'string' ? obj[key] : this.sortObjectByKey(obj[key]);
     });
 
     return orderedLabels;
   }
 
-  public revertExecutionParameters(parameters: Execution['parameters']) {
-    return this.sortObjectByKey(parameters);
-  }
-
   abstract revertArtifacts(exp: ISelectedExperiment);
 
   abstract revertExecution(exp: ISelectedExperiment);
-
 }
diff --git a/src/app/features/experiments-compare/experiments-compare-consts.ts b/src/app/features/experiments-compare/experiments-compare-consts.ts
index ee163464..eaf3f9a6 100644
--- a/src/app/features/experiments-compare/experiments-compare-consts.ts
+++ b/src/app/features/experiments-compare/experiments-compare-consts.ts
@@ -1,14 +1,17 @@
-export const EXPERIMENT_INFO_ONLY_FIELDS = [
+export const COMPARE_DETAILS_ONLY_FIELDS = [
   'id',
   'name',
   'type',
   'status',
   'last_update',
   'project.name',
-  'execution',
+  'execution.artifacts',
+  'execution.docker_cmd',
+  'execution.model_labels',
   'execution.model.name',
   'execution.model.uri',
   'execution.model.framework',
+  'execution.model.design',
   'script',
   'tags',
   'published',
@@ -17,5 +20,18 @@ export const EXPERIMENT_INFO_ONLY_FIELDS = [
   'output.model.uri',
   'output.model.framework',
   'output.model.design',
-
+  'configuration'
+];
+
+export const COMPARE_PARAMS_ONLY_FIELDS = [
+  'id',
+  'name',
+  'type',
+  'status',
+  'last_update',
+  'project.name',
+  'tags',
+  'published',
+  'last_iteration',
+  'hyperparams'
 ];
diff --git a/src/app/features/experiments-compare/experiments-compare-details.base.ts b/src/app/features/experiments-compare/experiments-compare-details.base.ts
index ec077349..bc607bc5 100644
--- a/src/app/features/experiments-compare/experiments-compare-details.base.ts
+++ b/src/app/features/experiments-compare/experiments-compare-details.base.ts
@@ -3,6 +3,7 @@ export abstract class ExperimentCompareDetailsBase {
     return {
       artifacts: this.buildSectionTree(experiment, 'artifacts', mergedExperiment),
       execution: this.buildSectionTree(experiment, 'execution', mergedExperiment),
+      configuration: this.buildSectionTree(experiment, 'configuration', mergedExperiment),
     };
   }
 
diff --git a/src/app/features/experiments/actions/experiments-info.actions.ts b/src/app/features/experiments/actions/experiments-info.actions.ts
index 3ac39157..2519d7a3 100644
--- a/src/app/features/experiments/actions/experiments-info.actions.ts
+++ b/src/app/features/experiments/actions/experiments-info.actions.ts
@@ -37,21 +37,6 @@ export class CustomOutputLabelAdded implements Action {
 
 
 
-export class ModelSelected implements Action {
-  readonly type = MODEL_SELECTED;
-  public payload: {
-    model: Model;
-    fieldsToPopulate: { labelEnum: boolean; networkDesign: boolean };
-  };
-
-  constructor(payload: {
-    model: Model;
-    fieldsToPopulate: { labelEnum: boolean; networkDesign: boolean };
-  }) {
-    this.payload = payload;
-  }
-}
-
 export class UpdateSectionKnowledge implements Action {
   readonly type = UPDATE_SECTION_KNOWLEDGE;
 
@@ -61,7 +46,6 @@ export class UpdateSectionKnowledge implements Action {
 
 export class ExperimentDataUpdated implements Action {
   readonly type = EXPERIMENT_DATA_UPDATED;
-
   constructor(public payload: { id: Task['id']; changes: Partial<IExperimentInfo> }) {
   }
 }
diff --git a/src/app/features/experiments/containers/experiment-info-execution/experiment-info-execution.component.html b/src/app/features/experiments/containers/experiment-info-execution/experiment-info-execution.component.html
index 3261ce60..62e23e0d 100644
--- a/src/app/features/experiments/containers/experiment-info-execution/experiment-info-execution.component.html
+++ b/src/app/features/experiments/containers/experiment-info-execution/experiment-info-execution.component.html
@@ -6,6 +6,7 @@
     [editable]="editable$ | async"
     [isInDev]="isInDev$ | async"
     [formData]="executionInfo$ | async"
+    [showExtraDataSpinner]="showExtraDataloader$ | async"
     [saving]="saving$ |async"
     (formDataChanged)="onFormValuesChanged($event)"
     (saveFormData)="saveExecutionData()"
diff --git a/src/app/features/experiments/containers/experiment-info-execution/experiment-info-execution.component.ts b/src/app/features/experiments/containers/experiment-info-execution/experiment-info-execution.component.ts
index 4cae3934..d7394dfe 100644
--- a/src/app/features/experiments/containers/experiment-info-execution/experiment-info-execution.component.ts
+++ b/src/app/features/experiments/containers/experiment-info-execution/experiment-info-execution.component.ts
@@ -4,19 +4,20 @@ import {Observable, Subscription} from 'rxjs';
 import {IExecutionForm} from '../../shared/experiment-execution.model';
 import {ISelectedExperiment} from '../../shared/experiment-info.model';
 import {IExperimentInfoState} from '../../reducers/experiment-info.reducer';
-import {selectIsExperimentEditable, selectSelectedExperiment} from '../../reducers';
+import {selectIsExperimentEditable, selectSelectedExperiment, selectShowExtraDataSpinner} from '../../reducers';
 import * as infoActions from '../../actions/experiments-info.actions';
 import {selectExperimentExecutionInfoData, selectIsExperimentSaving, selectIsSelectedExperimentInDev} from '../../../../webapp-common/experiments/reducers';
 import {selectBackdropActive} from '../../../../webapp-common/core/reducers/view-reducer';
 
 @Component({
-  selector   : 'sm-experiment-info-input-model',
+  selector   : 'sm-experiment-info-execution',
   templateUrl: './experiment-info-execution.component.html',
   styleUrls  : ['./experiment-info-execution.component.scss']
 })
 export class ExperimentInfoExecutionComponent implements OnInit, OnDestroy {
 
   public executionInfo$: Observable<IExecutionForm>;
+  public showExtraDataloader$: Observable<boolean>;
   public selectedExperimentSubscrition: Subscription;
   private selectedExperiment: ISelectedExperiment;
   public editable$: Observable<boolean>;
@@ -26,6 +27,7 @@ export class ExperimentInfoExecutionComponent implements OnInit, OnDestroy {
 
   constructor(private store: Store<IExperimentInfoState>) {
     this.executionInfo$  = this.store.select(selectExperimentExecutionInfoData);
+    this.showExtraDataloader$  = this.store.select(selectShowExtraDataSpinner);
     this.editable$       = this.store.select(selectIsExperimentEditable);
     this.isInDev$        = this.store.select(selectIsSelectedExperimentInDev);
     this.saving$         = this.store.select(selectIsExperimentSaving);
diff --git a/src/app/features/experiments/containers/experiment-info/experiment-info.component.html b/src/app/features/experiments/containers/experiment-info/experiment-info.component.html
index 926b729b..181dc1bb 100644
--- a/src/app/features/experiments/containers/experiment-info/experiment-info.component.html
+++ b/src/app/features/experiments/containers/experiment-info/experiment-info.component.html
@@ -1,16 +1,16 @@
 <sm-experiment-info-header-status-progress-bar
-  [status]="selectedExperiment?.status"
+  [status]="(tableSelectedExperiment$| async)?.status || selectedExperiment?.status"
   [editable]="editable$ | async"
-  [showMaximize]="showMaximize"
+  [showMaximize]="resultsTab"
   (closeInfoClicked)="deselectExperiment()"
   (maximizedClicked)="maximize()">
 </sm-experiment-info-header-status-progress-bar>
 
 <div class="experiment-info-container light-theme">
   <sm-experiment-info-header
-    [experiment]="selectedExperiment"
+    [experiment]="(tableSelectedExperiment$| async) || selectedExperiment"
     [infoData]="infoData$ | async"
-    [editable]=" ! isExample"
+    [editable]=" !isExample"
     [showMenu]="true"
     [backdropActive]="backdropActive$|async"
     (experimentNameChanged)="updateExperimentName($event)"
@@ -20,8 +20,9 @@
     <span routerLink="execution" queryParamsHandling="merge">
       <sm-navbar-item header="execution" [active]="routerConfig.includes('execution')"></sm-navbar-item>
     </span>
-    <span [routerLink]="['hyper-params']" queryParamsHandling="merge">
-      <sm-navbar-item header="hyper parameters" [active]="routerConfig.includes('hyper-params')"></sm-navbar-item>
+
+    <span [routerLink]="['hyper-params/hyper-param/_empty_']" queryParamsHandling="merge">
+      <sm-navbar-item header="configuration" [active]="routerConfig.includes('hyper-params')"></sm-navbar-item>
     </span>
     <span [routerLink]="['artifacts']"  queryParamsHandling="preserve">
       <sm-navbar-item header="artifacts" [active]="routerConfig.includes('artifacts')"></sm-navbar-item>
diff --git a/src/app/features/experiments/containers/experiment-info/experiment-info.component.ts b/src/app/features/experiments/containers/experiment-info/experiment-info.component.ts
index 6cf90cbf..19c424e8 100644
--- a/src/app/features/experiments/containers/experiment-info/experiment-info.component.ts
+++ b/src/app/features/experiments/containers/experiment-info/experiment-info.component.ts
@@ -14,12 +14,14 @@ import * as commonInfoActions from '../../../../webapp-common/experiments/action
 import * as infoActions from '../../actions/experiments-info.actions';
 import {AddMessage} from '../../../../webapp-common/core/actions/layout.actions';
 import {IExperimentInfo, ISelectedExperiment} from '../../shared/experiment-info.model';
+import {selectSelectedTableExperiment} from '../../../../webapp-common/experiments/reducers';
+import {ITableExperiment} from '../../../../webapp-common/experiments/shared/common-experiment-model.model';
 
 
 @Component({
-  selector   : 'sm-experiment-info',
+  selector: 'sm-experiment-info',
   templateUrl: './experiment-info.component.html',
-  styleUrls  : ['./experiment-info.component.scss']
+  styleUrls: ['./experiment-info.component.scss']
 })
 export class ExperimentInfoComponent implements OnInit, OnDestroy {
 
@@ -32,20 +34,22 @@ export class ExperimentInfoComponent implements OnInit, OnDestroy {
   public isExample: boolean;
   private projectId: string;
   private experimentId: string;
-  public showMaximize: boolean;
+  public resultsTab: boolean;
   public queryParams$: Observable<Params>;
   public routerConfig: string[];
   private routerConfigSubscription: Subscription;
+  public tableSelectedExperiment$: Observable<ITableExperiment>;
 
   constructor(
     private router: Router,
     private store: Store<IExperimentInfoState>,
     private route: ActivatedRoute
   ) {
-    this.editable$       = this.store.select(selectIsExperimentEditable);
-    this.infoData$       = this.store.select(selectExperimentInfoData);
+    this.editable$ = this.store.select(selectIsExperimentEditable);
+    this.infoData$ = this.store.select(selectExperimentInfoData);
     this.backdropActive$ = this.store.select(selectBackdropActive);
-    this.queryParams$    = this.store.select(selectRouterQueryParams);
+    this.queryParams$ = this.store.select(selectRouterQueryParams);
+    this.tableSelectedExperiment$ = this.store.select(selectSelectedTableExperiment)
 
   }
 
@@ -53,16 +57,17 @@ export class ExperimentInfoComponent implements OnInit, OnDestroy {
     this.selectedExperimentSubscription = this.store.select(selectSelectedExperiment)
       .subscribe(experiment => {
         this.selectedExperiment = experiment;
-        this.isExample          = isExample(experiment);
+        this.isExample = isExample(experiment);
       });
-    this.routerConfigSubscription       = this.store.select(selectRouterConfig).subscribe(routerConfig => {
+    this.routerConfigSubscription = this.store.select(selectRouterConfig).subscribe(routerConfig => {
       this.routerConfig = routerConfig;
     });
-    this.paramsSubscription             = this.store.select(selectRouterParams)
+
+    this.paramsSubscription = this.store.select(selectRouterParams)
       .pipe(
         tap((params) => {
-          this.projectId    = get('projectId', params);
-          this.showMaximize = 'info-output' === this.route.firstChild.routeConfig.path;
+          this.projectId = get('projectId', params);
+          this.resultsTab = 'info-output' === this.route.firstChild.routeConfig.path;
         }),
         debounceTime(150),
         map(params => get('experimentId', params)),
@@ -71,8 +76,12 @@ export class ExperimentInfoComponent implements OnInit, OnDestroy {
       )
       .subscribe(experimentId => {
         this.experimentId = experimentId;
-        this.store.dispatch(new commonInfoActions.ResetExperimentInfo());
-        this.store.dispatch(new commonInfoActions.GetExperimentInfo(experimentId));
+
+        // We already have GetExperimentInfo in output (results) component
+        if (!this.resultsTab) {
+          this.store.dispatch(new commonInfoActions.ResetExperimentInfo());
+          this.store.dispatch(new commonInfoActions.GetExperimentInfo(experimentId));
+        }
       });
   }
 
@@ -80,7 +89,7 @@ export class ExperimentInfoComponent implements OnInit, OnDestroy {
     this.paramsSubscription.unsubscribe();
     this.selectedExperimentSubscription.unsubscribe();
     this.routerConfigSubscription.unsubscribe();
-    this.store.dispatch(new commonInfoActions.SetExperiment(null));
+    // this.store.dispatch(new commonInfoActions.SetExperiment(null));
     this.store.dispatch(new commonInfoActions.ResetExperimentInfo());
   }
 
diff --git a/src/app/features/experiments/experiments-routing.module.ts b/src/app/features/experiments/experiments-routing.module.ts
index 40269604..8ac3bc3b 100644
--- a/src/app/features/experiments/experiments-routing.module.ts
+++ b/src/app/features/experiments/experiments-routing.module.ts
@@ -18,6 +18,8 @@ import {ExperimentInfoInputModelComponent} from '../../webapp-common/experiments
 import {ExperimentInfoOutputModelComponent} from '../../webapp-common/experiments/containers/experiment-info-output-model/experiment-info-output-model.component';
 import {ExperimentInfoArtifactItemComponent} from '../../webapp-common/experiments/containers/experiment-info-artifact-item/experiment-info-artifact-item.component';
 import {LeavingBeforeSaveAlertGuard} from '../../webapp-common/shared/guards/leaving-before-save-alert.guard';
+import {ExperimentInfoTaskModelComponent} from '../../webapp-common/experiments/containers/experiment-info-task-model/experiment-info-task-model.component';
+import {ExperimentInfoHyperParametersFormContainerComponent} from '../../webapp-common/experiments/containers/experiment-info-hyper-parameters-form-container/experiment-info-hyper-parameters-form-container.component';
 
 export const routes: Routes = [
   {
@@ -35,11 +37,17 @@ export const routes: Routes = [
               {path: '', redirectTo: 'input-model', pathMatch: 'full'},
               {path: 'input-model', component: ExperimentInfoInputModelComponent},
               {path: 'output-model', component: ExperimentInfoOutputModelComponent},
-              {path: 'artifact/:artifactId', children:[{ path:':mode', component: ExperimentInfoArtifactItemComponent}]},
-              {path: 'other/:artifactId', children:[{ path:':mode', component: ExperimentInfoArtifactItemComponent}]}
+              {path: 'artifact/:artifactId', children: [{path: ':mode', component: ExperimentInfoArtifactItemComponent}]},
+              {path: 'other/:artifactId', children: [{path: ':mode', component: ExperimentInfoArtifactItemComponent}]}
+            ]
+          },
+          {
+            path    : 'hyper-params', component: ExperimentInfoHyperParametersComponent, canDeactivate: [LeavingBeforeSaveAlertGuard],
+            children: [
+              {path: 'configuration/:configObject', component: ExperimentInfoTaskModelComponent},
+              {path: 'hyper-param/:hyperParamId', component: ExperimentInfoHyperParametersFormContainerComponent}
             ]
           },
-          {path: 'hyper-params', component: ExperimentInfoHyperParametersComponent, canDeactivate: [LeavingBeforeSaveAlertGuard]},
           {path: 'general', component: ExperimentInfoGeneralComponent},
           {
             path     : 'info-output',
diff --git a/src/app/features/experiments/experiments.consts.ts b/src/app/features/experiments/experiments.consts.ts
index fa94330c..7bfaf446 100644
--- a/src/app/features/experiments/experiments.consts.ts
+++ b/src/app/features/experiments/experiments.consts.ts
@@ -24,6 +24,7 @@ export const EXPERIMENT_INFO_ONLY_FIELDS = [
   'output.model.project',
   'output.model.design',
   'output.model.uri',
+  'hyperparams',
   'execution',
   'execution.model.name',
   'execution.model.uri',
@@ -32,11 +33,19 @@ export const EXPERIMENT_INFO_ONLY_FIELDS = [
   'execution.model.task.project.id',
   'execution.model.project.id',
   'execution.model.labels',
-  'script',
+  'execution.model.design',
+  'script.binary',
+  'script.repository',
+  'script.tag',
+  'script.branch',
+  'script.version_num',
+  'script.entry_point',
+  'script.working_dir',
+  'script.requirements',
   'system_tags',
   'published',
   'last_iteration',
-  'tags'
+  'tags',
 ];
 
 export const INITIAL_EXPERIMENT_TABLE_COLS: ISmCol[] = [
@@ -98,6 +107,7 @@ export const INITIAL_EXPERIMENT_TABLE_COLS: ISmCol[] = [
     },
   {
     id              : EXPERIMENTS_TABLE_COL_FIELDS.USER,
+    getter          : 'user.name',
     headerType      : ColHeaderTypeEnum.sortFilter,
     searchableFilter: true,
     filterable      : true,
diff --git a/src/app/features/experiments/reducers/experiment-info.reducer.ts b/src/app/features/experiments/reducers/experiment-info.reducer.ts
index ca7e6d0f..29c6a473 100644
--- a/src/app/features/experiments/reducers/experiment-info.reducer.ts
+++ b/src/app/features/experiments/reducers/experiment-info.reducer.ts
@@ -4,7 +4,7 @@ import {experimentSections, experimentSectionsEnum} from '../shared/experiments.
 import {get, set} from 'lodash/fp';
 import {commonExperimentInfoReducer, ICommonExperimentInfoState, initialCommonExperimentInfoState} from '../../../webapp-common/experiments/reducers/common-experiment-info.reducer';
 import * as actions from '../../../webapp-common/experiments/actions/common-experiments-info.actions';
-import {SET_EXPERIMENT} from '../../../webapp-common/experiments/actions/common-experiments-info.actions';
+import {deleteHyperParamsSection, hyperParamsSectionUpdated, saveExperimentConfigObj, saveHyperParamsSection, SET_EXPERIMENT, setExperimentSaving, updateExperimentAtPath} from '../../../webapp-common/experiments/actions/common-experiments-info.actions';
 
 export interface IExperimentInfoState extends ICommonExperimentInfoState {
   activeSectionEdit: string;
@@ -16,13 +16,13 @@ export interface IExperimentInfoState extends ICommonExperimentInfoState {
 
 export const initialState: IExperimentInfoState = {
   ...initialCommonExperimentInfoState,
-  activeSectionEdit       : null,
-  saving                  : false,
-  infoDataFreeze          : null,
-  userKnowledge           : {
+  activeSectionEdit: null,
+  saving           : false,
+  infoDataFreeze   : null,
+  userKnowledge    : {
     [experimentSections.MODEL_INPUT]: false
   } as any,
-  errors                  : {
+  errors           : {
     model    : null,
     execution: null,
   },
@@ -40,8 +40,17 @@ export function experimentInfoReducer(state: IExperimentInfoState = initialState
       return {...state, infoData: {...state.infoData, model: {...state.infoData.model, ...action.payload}}};
     case EXPERIMENT_DATA_UPDATED:
       return {...state, infoData: {...state.infoData, ...action.payload.changes}};
+    case hyperParamsSectionUpdated.type:
+      return {...state, infoData: {...state.infoData, hyperparams: {...state.infoData.hyperparams, [action.section]: action.hyperparams}}};
+
     case EXPERIMENT_SAVE:
       return {...state, saving: true};
+    case saveHyperParamsSection.type:
+      return {...state, saving: true};
+    case saveExperimentConfigObj.type:
+      return {...state, saving: true};
+    case deleteHyperParamsSection.type:
+      return {...state, saving: true};
     case ACTIVATE_EDIT:
       return {...state, activeSectionEdit: action.payload, infoDataFreeze: state.infoData};
     case SET_FREEZE_INFO:
@@ -52,6 +61,11 @@ export function experimentInfoReducer(state: IExperimentInfoState = initialState
       return {...state, infoData: state.infoDataFreeze ? state.infoDataFreeze : state.infoData};
     case EXPERIMENT_DETAILS_UPDATED:
       return {...state, infoData: {...state.infoData, ...action.payload.changes}};
+    case setExperimentSaving.type:
+      return {...state, saving: action.saving};
+    case updateExperimentAtPath.type:
+      const newInfoData = set(action.path, action.value, state.infoData);
+      return {...state, infoData: newInfoData as any};
     case actions.EXPERIMENT_UPDATED_SUCCESSFULLY:
       return {...state, saving: false};
     case ADD_CUSTOM_OUTPUT_LABEL: {
diff --git a/src/app/features/experiments/reducers/experiments-view.reducer.ts b/src/app/features/experiments/reducers/experiments-view.reducer.ts
index a461f9cd..dc41055c 100644
--- a/src/app/features/experiments/reducers/experiments-view.reducer.ts
+++ b/src/app/features/experiments/reducers/experiments-view.reducer.ts
@@ -12,7 +12,7 @@ export function experimentsViewReducer(state: IExperimentsViewState = initialSta
 
   switch (action.type) {
     case commonActions.RESET_EXPERIMENTS:
-      return {...state, experiments: [], selectedExperiment: null, metricVariants: []};
+      return {...state, experiments: [], selectedExperiment: null, metricVariants: [], showAllSelectedIsActive: false};
     default:
       return <IExperimentsViewState>commonExperimentsViewReducer(state, action);
   }
diff --git a/src/app/features/experiments/reducers/index.ts b/src/app/features/experiments/reducers/index.ts
index 5b198a3a..4e0b36b4 100644
--- a/src/app/features/experiments/reducers/index.ts
+++ b/src/app/features/experiments/reducers/index.ts
@@ -34,6 +34,8 @@ export const selectMetricsLoading         = createSelector(experimentsView, (sta
 export const experimentInfo           = createSelector(experiments, (state): IExperimentInfoState => state ? state.info : {});
 export const selectSelectedExperiment = createSelector(experimentInfo, (state): ISelectedExperiment => state.selectedExperiment);
 export const selectExperimentInfoData = createSelector(experimentInfo, (state): IExperimentInfo => state.infoData);
+export const selectShowExtraDataSpinner = createSelector(experimentInfo, state => state.showExtraDataSpinner);
+
 
 
 // output selectors
diff --git a/src/app/features/experiments/shared/components/experiment-menu/experiment-menu.component.html b/src/app/features/experiments/shared/components/experiment-menu/experiment-menu.component.html
index 55930756..061b62e5 100644
--- a/src/app/features/experiments/shared/components/experiment-menu/experiment-menu.component.html
+++ b/src/app/features/experiments/shared/components/experiment-menu/experiment-menu.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="showButton" mat-button [matMenuTriggerFor]="experimentMenu" class="p-0 cell menu-button btn icon sm i-list-view"></div>
+<div *ngIf="showButton" mat-button [matMenuTriggerFor]="experimentMenu" class="p-0 cell menu-button btn al-icon sm-md al-ico-bars-menu al-color light-grey-blue"></div>
 <div *ngIf="!showButton" #contextTrigger
      style="visibility: hidden; position: fixed"
      [style.left.px]="position.x"
@@ -13,10 +13,10 @@
     <i [class]="'fa '+ ICONS.QUEUED"></i>Manage Queue
   </button>
   <button mat-menu-item (click)="viewWorkerClicked()" [disabled]="experiment?.status !== TaskStatusEnum.InProgress">
-    <i [class]="'fa '+ ICONS.WORKER"></i>View worker
+    <i [class]="'fa '+ ICONS.WORKER"></i>View Worker
   </button>
   <hr>
-  <button mat-menu-item (click)="restoreArchivePopup()" [disabled]="isExample">
+  <button mat-menu-item (click)="restoreArchive()" [disabled]="isExample">
     <i [class]="'fa ' + (experiment && experiment?.system_tags && experiment?.system_tags.includes('archived') ? ICONS.SHOW : ICONS.HIDE)"></i>
     {{experiment?.system_tags && experiment?.system_tags.includes('archived') ? 'Restore from archive' : 'Archive' + (numSelected > 1 ? ' (' + numSelected + ' items)' : '')}}
   </button>
@@ -36,7 +36,11 @@
     <i [class]="'fa ' + ICONS.PUBLISHED"></i>Publish
   </button>
   <hr>
-  <button mat-menu-item [matMenuTriggerFor]="tagMenu" (menuOpened)="tagMenuOpened()" (menuClosed)="tagMenuContent.clear()">
+  <button mat-menu-item
+          [matMenuTriggerFor]="tagMenu"
+          [disabled]="isExample"
+          (menuOpened)="tagMenuOpened()"
+          (menuClosed)="tagMenuContent.clear()">
     <i class="fas fa-tag rotate-135"></i>
     <span>{{'Add Tag' + (numSelected > 1 ? ' (' + numSelected + ' items)' : '')}}</span>
   </button>
@@ -45,7 +49,7 @@
     <i class="fa fa-clone"></i>Clone
   </button>
   <button mat-menu-item (click)="moveToProjectPopup()" [disabled]="isExample">
-    <i class="fa fa-arrow-right"></i>Move To Project
+    <i class="fa fa-arrow-right"></i>Move to Project
   </button>
 </mat-menu>
 
diff --git a/src/app/features/experiments/shared/components/experiment-menu/experiment-menu.component.scss b/src/app/features/experiments/shared/components/experiment-menu/experiment-menu.component.scss
index 1d4a1648..49773ec6 100644
--- a/src/app/features/experiments/shared/components/experiment-menu/experiment-menu.component.scss
+++ b/src/app/features/experiments/shared/components/experiment-menu/experiment-menu.component.scss
@@ -20,3 +20,6 @@ button {
   }
 }
 
+.al-ico-bars-menu {
+  line-height: 20px;
+}
diff --git a/src/app/features/experiments/shared/experiment-info.model.ts b/src/app/features/experiments/shared/experiment-info.model.ts
index 85f8b18e..437fcead 100644
--- a/src/app/features/experiments/shared/experiment-info.model.ts
+++ b/src/app/features/experiments/shared/experiment-info.model.ts
@@ -6,10 +6,11 @@ import {TaskStatusEnum} from '../../../business-logic/model/tasks/taskStatusEnum
 import {Project} from '../../../business-logic/model/projects/project';
 import {Script} from '../../../business-logic/model/tasks/script';
 import {IExecutionForm} from './experiment-execution.model';
-import {Execution} from '../../../business-logic/model/tasks/execution';
 import {IHyperParamsForm} from '../../../webapp-common/experiments/shared/experiment-hyper-params.model';
 import {Artifact} from '../../../business-logic/model/tasks/artifact';
 import {IExperimentModelInfo} from '../../../webapp-common/experiments/shared/common-experiment-model.model';
+import {ParamsItem} from '../../../business-logic/model/tasks/paramsItem';
+import {ConfigurationItem} from '../../../business-logic/model/tasks/configurationItem';
 
 /**
  * an extended object of task that includes projection, will come from the server as an api response.
@@ -38,6 +39,8 @@ export interface ISelectedExperiment {
   status_message?: string;
   status_reason?: string;
   last_iteration?: number;
+  hyperparams?: { [section: string]: { [key: string]: ParamsItem } };
+  configuration?: { [key: string]: ConfigurationItem };
 }
 
 /**
@@ -49,7 +52,8 @@ export interface IExperimentInfo {
   comment?: string;
   model?: IExperimentModelInfo;
   execution?: IExecutionForm;
-  hyperParams?: IHyperParamsForm;
+  hyperparams?: { [key: string]: { [key: string]: ParamsItem }; };
+  configuration?: any;
   artifacts?: Artifact[];
 }
 
@@ -70,6 +74,7 @@ export interface ISelectedExperimentExecution {
     id: Model['id'],
     name: Model['name'],
     uri: Model['uri'],
+    design?: Model['design'];
     created: Model['created'],
     labels: Model['labels'],
     task: {
@@ -85,8 +90,6 @@ export interface ISelectedExperimentExecution {
       name: User['name'];
     },
   };
-  parameters: Execution['parameters'];
-  model_desc?: any;
   framework?: any;
   model_labels?: { [key: string]: number; };
   artifacts?: Artifact[];
diff --git a/src/app/features/experiments/shared/experiments.const.ts b/src/app/features/experiments/shared/experiments.const.ts
index c9f1b572..f147c18a 100644
--- a/src/app/features/experiments/shared/experiments.const.ts
+++ b/src/app/features/experiments/shared/experiments.const.ts
@@ -21,7 +21,7 @@ export const EXPERIMENTS_TABLE_COL_FIELDS = {
   TYPE          : 'type' as ExperimentTableColFieldsEnum,
   NAME          : 'name' as ExperimentTableColFieldsEnum,
   TAGS          : 'tags' as ExperimentTableColFieldsEnum,
-  USER          : 'user.name' as ExperimentTableColFieldsEnum,
+  USER          : 'users' as ExperimentTableColFieldsEnum,
   STARTED       : 'started' as ExperimentTableColFieldsEnum,
   COMPLETED     : 'completed' as ExperimentTableColFieldsEnum,
   STATUS        : 'status' as ExperimentTableColFieldsEnum,
diff --git a/src/app/features/experiments/shared/services/experiment-converter.service.ts b/src/app/features/experiments/shared/services/experiment-converter.service.ts
index f650c87a..7b764935 100644
--- a/src/app/features/experiments/shared/services/experiment-converter.service.ts
+++ b/src/app/features/experiments/shared/services/experiment-converter.service.ts
@@ -24,19 +24,18 @@ export class ExperimentConverterService {
 
     if (!isEqual(executionInfoNoOutputDest, executionInfoNoOutputDestBeforeChange) ||
       !isEqual(experimentInfo.model, experimentInfoBeforeChange.model) ||
-      !isEqual(experimentInfo.hyperParams, experimentInfoBeforeChange.hyperParams) ||
+      !isEqual(experimentInfo.hyperparams, experimentInfoBeforeChange.hyperparams) ||
       !isEqual(experimentInfo.model, experimentInfoBeforeChange.model)
     ) {
       convertedExperiment.execution = this.convertExecution(experimentInfo.execution,
-        experimentInfo.model, experimentInfo.hyperParams);
+        experimentInfo.model);
     }
     return convertedExperiment;
   }
 
-  convertExecution(execution: IExecutionForm, model: IExperimentModelInfo,
-                   hyperParams: IHyperParamsForm): Execution {
+  convertExecution(execution: IExecutionForm, model: IExperimentModelInfo): Execution {
     return {
-      ...this.commonExperimentConverterService.commonConvertExecution(execution, model, hyperParams),
+      ...this.commonExperimentConverterService.commonConvertExecution(execution, model),
     };
   }
 
diff --git a/src/app/features/models/containers/model-menu/model-menu.component.html b/src/app/features/models/containers/model-menu/model-menu.component.html
index a18820c3..bd22e2e7 100644
--- a/src/app/features/models/containers/model-menu/model-menu.component.html
+++ b/src/app/features/models/containers/model-menu/model-menu.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="showButton" mat-button [matMenuTriggerFor]="modelMenu" class="p-0 cell menu-button btn icon sm i-list-view"></div>
+<div *ngIf="showButton" mat-button [matMenuTriggerFor]="modelMenu" class="p-0 cell menu-button btn al-icon sm-md al-ico-bars-menu al-color light-grey-blue"></div>
 <div *ngIf="!showButton" #contextTrigger
      style="visibility: hidden; position: fixed"
      [style.left.px]="position.x"
@@ -9,12 +9,14 @@
   <button mat-menu-item (click)="publishPopup()" [disabled]="isExample || model?.ready">
     <i [class]="'fa ' + ICONS.PUBLISHED"></i>Publish
   </button>
-  <button mat-menu-item (click)="restoreArchivePopup()" [disabled]="isExample">
+  <button mat-menu-item (click)="archiveClicked()" [disabled]="isExample">
     <i [class]="'fa ' + (model?.system_tags?.includes('archived') ? ICONS.SHOW : ICONS.HIDE)"></i>
     {{model?.system_tags?.includes('archived') ? 'Restore from archive' : 'Archive'}}
   </button>
   <hr>
-  <button mat-menu-item [matMenuTriggerFor]="tagMenu"
+  <button mat-menu-item
+          [matMenuTriggerFor]="tagMenu"
+          [disabled]="isExample"
           (menuOpened)="tagMenuOpened()"
           (menuClosed)="tagMenuContent.clear()"
   >
@@ -26,7 +28,7 @@
     <i [class]="'fa ' + ICONS.DOWNLOAD"></i>Download
   </button>
   <button mat-menu-item (click)="moveToProjectPopup()" [disabled]="isExample">
-    <i class="fa fa-arrow-right"></i>Move To Project
+    <i class="fa fa-arrow-right"></i>Move to Project
   </button>
 </mat-menu>
 
diff --git a/src/app/features/models/containers/model-menu/model-menu.component.scss b/src/app/features/models/containers/model-menu/model-menu.component.scss
index 3ef56047..49773ec6 100644
--- a/src/app/features/models/containers/model-menu/model-menu.component.scss
+++ b/src/app/features/models/containers/model-menu/model-menu.component.scss
@@ -19,3 +19,7 @@ button {
     }
   }
 }
+
+.al-ico-bars-menu {
+  line-height: 20px;
+}
diff --git a/src/app/features/models/dumb/model-header/model-header.component.scss b/src/app/features/models/dumb/model-header/model-header.component.scss
index 5f704723..20307753 100644
--- a/src/app/features/models/dumb/model-header/model-header.component.scss
+++ b/src/app/features/models/dumb/model-header/model-header.component.scss
@@ -4,7 +4,6 @@
 
   .header-container {
     padding-left: 24px;
-    padding-right: 24px;
     height: 66px;
     transition: background-color 0.5s;
     /deep/ button {
diff --git a/src/app/features/not-found/not-found/not-found.component.html b/src/app/features/not-found/not-found/not-found.component.html
index 3738275c..e80dd6d0 100644
--- a/src/app/features/not-found/not-found/not-found.component.html
+++ b/src/app/features/not-found/not-found/not-found.component.html
@@ -1,6 +1,6 @@
 <div id="not-found-container" class="">
   <div class="d-flex justify-content-center">
-    <div class="cat i-cat "></div>
+    <div class="cat al-icon al-ico-cat al-color white"></div>
     <h1>404</h1>
   </div>
 
diff --git a/src/app/features/not-found/not-found/not-found.component.scss b/src/app/features/not-found/not-found/not-found.component.scss
index 5b448712..d2d3cef3 100644
--- a/src/app/features/not-found/not-found/not-found.component.scss
+++ b/src/app/features/not-found/not-found/not-found.component.scss
@@ -45,6 +45,7 @@
     }
   }
   .cat{
+    font-size: 140px;
     width:140px;
     height:140px;
     margin-top:44px;
diff --git a/src/app/features/projects/dumb/project-card/project-card.component.html b/src/app/features/projects/dumb/project-card/project-card.component.html
index e24a2461..ce01f388 100644
--- a/src/app/features/projects/dumb/project-card/project-card.component.html
+++ b/src/app/features/projects/dumb/project-card/project-card.component.html
@@ -1,5 +1,5 @@
 <sm-card class="project-card" (click)="projectClicked()"
-         [isExample]=" project.name !== 'All projects' && (! project.company || ! project.company.id)">
+         [isExample]=" project.name !== 'All projects' && !project.company?.id">
   <div header-content>
     <div class="d-flex justify-content-between align-items-center">
       <sm-inline-edit #projectName
@@ -16,11 +16,12 @@
       </sm-inline-edit>
       <div *ngIf="project.system_tags?.includes('default')" class="justify-content-end project-tag">Sample</div>
       <div class="menu-wrapper" *ngIf="!hideMenu">
-        <sm-menu buttonClass="icon sm i-list-view" [showCart]="false">
+        <sm-menu buttonClass="al-icon sm al-ico-bars-menu al-color light-grey-blue" [showCart]="false">
           <sm-menu-item itemLabel="Rename"
                         [disabled]="!project.company?.id"
                         (itemClicked)="projectName.inlineActivated()"></sm-menu-item>
           <sm-menu-item itemLabel="Delete"
+                        [disabled]="!project.company?.id"
                         (itemClicked)="deleteProjectClicked.emit(project.id)"></sm-menu-item>
         </sm-menu>
       </div>
diff --git a/src/app/layout/layout.module.ts b/src/app/layout/layout.module.ts
index cb27070a..47edd50d 100644
--- a/src/app/layout/layout.module.ts
+++ b/src/app/layout/layout.module.ts
@@ -5,16 +5,18 @@ import {SMSharedModule} from '../webapp-common/shared/shared.module';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {SurveyComponent} from './survey/survey.component';
+import {SharedModule} from '../shared/shared.module';
 
 @NgModule({
   declarations: [SideNavComponent, SurveyComponent],
   exports: [SideNavComponent, SurveyComponent],
-  imports: [
-    CommonModule,
-    SMSharedModule,
-    FormsModule,
-    ReactiveFormsModule,
-    RouterModule,
-  ]
+    imports: [
+        CommonModule,
+        SMSharedModule,
+        FormsModule,
+        ReactiveFormsModule,
+        RouterModule,
+        SharedModule,
+    ]
 })
 export class LayoutModule { }
diff --git a/src/app/layout/side-nav/side-nav.component.html b/src/app/layout/side-nav/side-nav.component.html
index 1fe937c2..80b3621e 100644
--- a/src/app/layout/side-nav/side-nav.component.html
+++ b/src/app/layout/side-nav/side-nav.component.html
@@ -3,7 +3,7 @@
 <div class="side-nav">
   <div class="item logo">
     <div class="item-icon">
-      <img src="../../../assets/t-logo-w.svg" class="logo-a">
+      <img src="../../../assets/t-logo-w.svg?v=3" class="logo-a">
     </div>
     <div class="caption">
 <!--      <img src="../../../assets/logo-white.png" class="logo-full">-->
@@ -14,7 +14,7 @@
     <a class="item d-block" #rlaHome="routerLinkActive" routerLink="/dashboard" routerLinkActive (click)="resetSearch()"
       smTooltip="HOMEPAGE" showDelay="0" position="right">
       <div class="item-icon">
-        <img [src]="'./app/webapp-common/assets/icons/side-nav/' + (rlaHome.isActive ? 'home-neon.svg': 'home.svg')">
+        <i [class]="'al-icon al-ico-home al-color ' + (rlaHome.isActive ? 'neon-yellow': 'blue-300')" ></i>
       </div>
       <div class="caption">homepage</div>
     </a>
@@ -22,11 +22,12 @@
     <a class="item d-block" smTooltip="PROJECTS" showDelay="0" position="right" routerLink="/projects"
       [routerLinkActive] #rlaProjects="routerLinkActive">
       <div class="item-icon">
-        <img [src]="'./app/webapp-common/assets/icons/side-nav/' + (rlaProjects.isActive ? 'projects-neon.svg': 'projects.svg')">
+        <i [class]="'al-icon al-ico-projects al-color ' + (rlaProjects.isActive ? 'neon-yellow': 'blue-300')" ></i>
       </div>
       <div class="caption">projects</div>
     </a>
     <a class="item d-block"
+       *smCheckPermission="true"
        routerLink="/workers-and-queues"
        routerLinkActive
        #rlaQueues="routerLinkActive"
@@ -34,27 +35,51 @@
        showDelay="0"
        position="right">
       <div class="item-icon">
-        <img [src]="'./app/webapp-common/assets/icons/side-nav/' + (rlaQueues.isActive?'queues-neon.svg': 'queues.svg')">
+        <i [class]="'al-icon al-ico-queues al-color ' + (rlaQueues.isActive ? 'neon-yellow': 'blue-300')" ></i>
       </div>
       <div class="caption">workers & queues</div>
     </a>
 
   </ng-container>
-    <div class="account">
-      <a *ngIf="currentUser" class="item d-block" routerLink="/profile" routerLinkActive
-         #rlaAdmin="routerLinkActive" smTooltip="PROFILE"showDelay="0" position="right"
+  <div *ngIf="currentUser" class="account">
+    <a *ngIf="environment.whiteLabelLink" class="item d-block" target="_blank"
+       [smTooltip]="environment.whiteLabelLink.tooltip" showDelay="0" position="right"
+       [href]="environment.whiteLabelLink.link">
+      <div class="item-icon"
+           [style.background-image]="'url(' + environment.whiteLabelLink.logo + ')'"
+           style="width: 64px; height: 64px"
       >
-        <div class="item-icon">
-          <i class="fa fa-user-alt fa-2x" [ngClass]="{'neon': rlaAdmin.isActive}"></i>
-        </div>
-        <div class="caption">Profile</div>
-      </a>
-      <a class="item d-block" href="https://github.com/allegroai" target="_blank" smTooltip="Fork us on GitHub"
-        showDelay="0" position="right">
-        <div class="item-icon">
-          <i class="fab fa-github fa-2x"></i>
-        </div>
-        <div class="caption">Fork us on GitHub</div>
-      </a>
-    </div>
+      </div>
+      <div class="caption">Ignite</div>
+    </a>
+    <a class="item d-block" target="_blank"
+       smTooltip="Community on Slack" showDelay="0" position="right"
+       href="https://join.slack.com/t/allegroai-trains/shared_invite/enQtOTQyMTI1MzQxMzE4LTY5NTUxOTY1NmQ1MzQ5MjRhMGRhZmM4ODE5NTNjMTg2NTBlZGQzZGVkMWU3ZDg1MGE1MjQxNDEzMWU2NmVjZmY">
+      <div class="item-icon">
+        <i class="fab fa-slack fa-24 al-color blue-300"></i>
+      </div>
+      <div class="caption">Slack</div>
+    </a>
+    <a class="item d-block" href="https://allegro.ai/docs" target="_blank"
+       smTooltip="Allegro Trains Documentation" showDelay="0" position="right">
+      <div class="item-icon">
+        <i class="al-icon al-ico-documentation al-color blue-300"></i>
+      </div>
+      <div class="caption">Documentation</div>
+    </a>
+    <a class="item d-block" href="https://www.youtube.com/c/AllegroAI/featured" target="_blank"
+       smTooltip="Allegro Trains on YouTube" showDelay="0" position="right">
+      <div class="item-icon">
+        <i class="fab fa-youtube fa-24 al-color blue-300"></i>
+      </div>
+      <div class="caption">YouTube</div>
+    </a>
+    <a class="item d-block" href="https://github.com/allegroai/trains" target="_blank"
+       smTooltip="GitHub Repository" showDelay="0" position="right">
+      <div class="item-icon">
+        <i class="fab fa-github fa-24 al-color blue-300"></i>
+      </div>
+      <div class="caption">GitHub</div>
+    </a>
+  </div>
 </div>
diff --git a/src/app/layout/side-nav/side-nav.component.scss b/src/app/layout/side-nav/side-nav.component.scss
index ac7ff3bb..3f8a7726 100644
--- a/src/app/layout/side-nav/side-nav.component.scss
+++ b/src/app/layout/side-nav/side-nav.component.scss
@@ -1,11 +1,5 @@
 @import "../../webapp-common/shared/ui-components/styles/variables";
 
-:host {
-  position: fixed;
-  height: 100%;
-  top: 0;
-}
-
 $transition-delay: 0.1;
 $transition-speed: 0.15;
 
@@ -19,19 +13,6 @@ $transition-speed: 0.15;
   transition-delay: $transition-delay + s;
   overflow: hidden;
 
-  //&:hover {
-  //  width: $side-bar-open-width;
-  //  .item.logo {
-  //    .item-icon {
-  //      transition: opacity $transition-speed + $transition-delay + s;
-  //      opacity: 0;
-  //    }
-  //.caption {
-  //  opacity: 1;
-  //}
-  //}
-  //}
-
   .item.logo {
     background: $eggplant-purple;
     cursor: default;
@@ -41,10 +22,6 @@ $transition-speed: 0.15;
       opacity: 1;
       height: 100%;
 
-      .logo-a {
-        max-height: $side-bar-close-width * 0.5;
-        width: auto;
-      }
     }
 
     &:hover {
@@ -55,7 +32,7 @@ $transition-speed: 0.15;
   }
 
   a:hover {
-    color: $cloudy-blue;
+    color: $blue-250;
   }
 
   .item {
@@ -66,8 +43,12 @@ $transition-speed: 0.15;
     text-align: center;
     cursor: pointer;
 
+    .fa-24 {
+      font-size: 24px;
+    }
+
     &:hover {
-      background-color: $dark-grey-blue-two;
+      background-color: $blue-500;
       box-shadow: inset 0 -1px 0 0 #252b3d;
 
       .caption {
@@ -81,17 +62,11 @@ $transition-speed: 0.15;
       position: absolute;
       left: 0;
       color: #a7b2d8;
-
-      img {
-        max-width: 48%;
-        height: 100%;
-        padding: 4px;
-
-        &.resized-icon {
-          max-width: 62%;
-        }
+      i{
+        line-height: 64px;
+        height: 64px;
+        width: 64px;
       }
-
       .neon {
         color: $neon-yellow-betterinchrome;
       }
@@ -104,7 +79,7 @@ $transition-speed: 0.15;
       text-transform: uppercase;
       font-size: 15px;
       opacity: 0.4;
-      color: $cloudy-blue;
+      color: $blue-250;
     }
   }
 
diff --git a/src/app/layout/side-nav/side-nav.component.ts b/src/app/layout/side-nav/side-nav.component.ts
index a9a5112a..5bda6739 100644
--- a/src/app/layout/side-nav/side-nav.component.ts
+++ b/src/app/layout/side-nav/side-nav.component.ts
@@ -5,6 +5,7 @@ import {selectSelectedProjectId} from '../../webapp-common/core/reducers/project
 import {Observable} from 'rxjs';
 import {Router} from '@angular/router';
 import {SearchDeactivate} from '../../webapp-common/search/common-search-results.actions';
+import {environment} from '../../../environments/environment';
 
 
 @Component({
@@ -15,6 +16,8 @@ import {SearchDeactivate} from '../../webapp-common/search/common-search-results
 export class SideNavComponent {
   public selectedProjectId$: Observable<any>;
   currentUser: any;
+  environment = environment;
+
 
   constructor(public store: Store<any>, private router: Router) {
     this.selectedProjectId$ = this.store.select(selectSelectedProjectId);
@@ -25,4 +28,8 @@ export class SideNavComponent {
   public resetSearch() {
     this.store.dispatch(new SearchDeactivate());
   }
+
+  get guestUser(): boolean {
+    return this.currentUser && this.currentUser?.role === 'guest';
+  }
 }
diff --git a/src/app/shared/constants/non-common-consts.ts b/src/app/shared/constants/non-common-consts.ts
index cc0a0625..6c69d1f3 100644
--- a/src/app/shared/constants/non-common-consts.ts
+++ b/src/app/shared/constants/non-common-consts.ts
@@ -5,14 +5,23 @@ export const PROJECT_ROUTES = ['experiments', 'models'];
 export type PROJECT_ROUTES_TYPE = 'models' | 'experiments';
 
 export const EXPERIMENTS_STATUS_LABELS = {
-  [TaskStatusEnum.Created]      : 'Draft',
-  [TaskStatusEnum.Queued]       : 'Pending',
-  [TaskStatusEnum.InProgress]   : 'Running',
-  [TaskStatusEnum.Completed]    : 'Completed',
-  [TaskStatusEnum.Published]    : 'Published',
-  [TaskStatusEnum.Failed]       : 'Failed',
-  [TaskStatusEnum.Stopped]      : 'Completed',
-  [TaskStatusEnum.Closed]       : 'Closed',
-  [TaskTypeEnum.Testing]        : 'Testing',
-  [TaskTypeEnum.Training]       : 'Training'
+  [TaskStatusEnum.Created]     : 'Draft',
+  [TaskStatusEnum.Queued]      : 'Pending',
+  [TaskStatusEnum.InProgress]  : 'Running',
+  [TaskStatusEnum.Completed]   : 'Completed',
+  [TaskStatusEnum.Published]   : 'Published',
+  [TaskStatusEnum.Failed]      : 'Failed',
+  [TaskStatusEnum.Stopped]     : 'Completed',
+  [TaskStatusEnum.Closed]      : 'Closed',
+  [TaskTypeEnum.Testing]       : 'Testing',
+  [TaskTypeEnum.Training]      : 'Training',
+  [TaskTypeEnum.Inference]     : 'Inference',
+  [TaskTypeEnum.DataProcessing]: 'Data Processing',
+  [TaskTypeEnum.Application]   : 'Application',
+  [TaskTypeEnum.Monitor]       : 'Monitor',
+  [TaskTypeEnum.Controller]    : 'Controller',
+  [TaskTypeEnum.Optimizer]     : 'Optimizer',
+  [TaskTypeEnum.Service]       : 'Service',
+  [TaskTypeEnum.Qc]            : 'Qc',
+  [TaskTypeEnum.Custom]        : 'Custom'
 };
diff --git a/src/app/shared/directives/check-permission.directive.ts b/src/app/shared/directives/check-permission.directive.ts
index 5e158f86..f177c57d 100644
--- a/src/app/shared/directives/check-permission.directive.ts
+++ b/src/app/shared/directives/check-permission.directive.ts
@@ -1,15 +1,51 @@
-import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
+import {Directive, Input, OnDestroy, TemplateRef, ViewContainerRef} from '@angular/core';
+import { Store } from '@ngrx/store';
+import {selectCurrentUser} from '../../webapp-common/core/reducers/users-reducer';
+import {Subscription} from 'rxjs';
+import {User} from '../../business-logic/model/users/user';
 
 @Directive({
   selector: '[smCheckPermission]'
 })
-export class CheckPermissionDirective {
+export class CheckPermissionDirective implements OnDestroy{
+  private userDataSubscription: Subscription;
+  private elseTemplateRef: TemplateRef<any>|null = null;
+  private user: User;
+  private blocked = true;
 
-  @Input() set smCheckPermission(permission: string) {
-    this.viewContainer.createEmbeddedView(this.templateRef);
+  @Input() set smCheckPermission(permission: boolean) {
+    this.blocked = !permission;
+    this.setUpView();
   }
-  constructor(private templateRef: TemplateRef<any>,
-              private viewContainer: ViewContainerRef
-  ) {
+
+  @Input()
+  set smCheckPermissionElse(templateRef: TemplateRef<any>|null) {
+    this.elseTemplateRef = templateRef;
+    this.setUpView();
+  }
+
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef,
+    private store: Store<any>) {
+    this.userDataSubscription = this.store.select(selectCurrentUser)
+      .subscribe((user: User) => {
+        this.user = user;
+        this.setUpView();
+      });
+  }
+
+  setUpView() {
+    const allowed = !this.blocked && this.user && this.user.role !== 'guest';
+    this.viewContainer.clear();
+    if (allowed) {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+    } else if (this.elseTemplateRef) {
+      this.viewContainer.createEmbeddedView(this.elseTemplateRef);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.userDataSubscription?.unsubscribe();
   }
 }
diff --git a/src/app/shared/guards/auth.guard.ts b/src/app/shared/guards/auth.guard.ts
deleted file mode 100644
index b6dde761..00000000
--- a/src/app/shared/guards/auth.guard.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// src/app/auth/auth-guard.service.ts
-import {Injectable} from '@angular/core';
-import {Router, CanActivate} from '@angular/router';
-import {Store} from '@ngrx/store';
-import {selectCurrentUser} from '../../webapp-common/core/reducers/users-reducer';
-import {User} from '../../business-logic/model/users/user';
-
-@Injectable()
-export class AuthGuard implements CanActivate {
-  private user: User;
-
-  constructor(
-    public router: Router,
-    public store: Store<any>) {
-    this.store.select(selectCurrentUser).subscribe(user => {this.user = user; });
-  }
-
-  canActivate(): boolean {
-    if (!this.user) {
-      this.router.navigateByUrl('/login');
-    }
-    return !!this.user;
-  }
-}
diff --git a/src/app/webapp-common/admin/admin.component.html b/src/app/webapp-common/admin/admin.component.html
index 528be3bb..d2d2cdb2 100644
--- a/src/app/webapp-common/admin/admin.component.html
+++ b/src/app/webapp-common/admin/admin.component.html
@@ -3,7 +3,13 @@
   <div headerButtons class="d-inline">
     <button class="btn btn-primary" style="float: right" (click)="logoutClicked()"> logout </button>
   </div>
+  <div class="separator"></div>
   <sm-usage-stats></sm-usage-stats>
+  <mat-slide-toggle
+    *ngIf="isChrome"
+    (change)="HidpiChange($event)"
+    [checked]="disableHidpi">Disable HiDPI browser scale override. <span class="reload" [class.highlight]="disableHidpiChanged" (click)="reload($event)">Reload to apply</span>
+  </mat-slide-toggle>
 </sm-card>
 <sm-card header="App Credentials" *smCheckPermission="'manageAppCredentials'">
   <div>
@@ -12,7 +18,7 @@
                                  (credentialRevoked)="onCredentialRevoked($event)">
       </sm-admin-credential-table>
       <button class="btn btn-primary btn-token pointer new-credentials" (click)="createCredential()">
-        <i class="i-plus-blue sm icon"> </i>&nbsp; Create new credentials
+        <i class="al-icon al-color blue-400 msm al-ico-plus"> </i>&nbsp; Create new credentials
       </button>
     </div>
   </div>
diff --git a/src/app/webapp-common/admin/admin.component.scss b/src/app/webapp-common/admin/admin.component.scss
index 40f216fb..616ba81f 100644
--- a/src/app/webapp-common/admin/admin.component.scss
+++ b/src/app/webapp-common/admin/admin.component.scss
@@ -1,6 +1,11 @@
+@import "../../webapp-common/shared/ui-components/styles/variables.scss";
+@import "../../webapp-common/shared/ui-components/styles/mixins/lines.scss";
+
 :host {
   margin: 0 auto;
   width: 97%;
+  overflow: auto;
+  padding-top: 20px;
 
   /deep/ .empty-card .line {
     display: none;
@@ -11,4 +16,24 @@
     align-items: center;
     margin-top: 20px;
   }
+
+  .separator {
+    margin: $card-spacer-y / 2 $card-spacer-x;
+    @include line($line-height-sm + px)
+  }
+
+  mat-slide-toggle {
+    display: block;
+  }
+
+  .reload {
+    color: transparent;
+    text-decoration: underline;
+    transition: color 0.5s;
+
+    &.highlight {
+      color: $neon-yellow;
+      transition: color 0.5s;
+    }
+  }
 }
diff --git a/src/app/webapp-common/admin/admin.component.ts b/src/app/webapp-common/admin/admin.component.ts
index 6171de28..3ae313c5 100644
--- a/src/app/webapp-common/admin/admin.component.ts
+++ b/src/app/webapp-common/admin/admin.component.ts
@@ -11,6 +11,8 @@ import {CreateCredentialDialogComponent} from './create-credential-dialog/create
 import {filter, map} from 'rxjs/operators';
 import {Logout} from '../core/actions/users.actions';
 import * as versions from '../../../version.json';
+import {MatSlideToggleChange} from '@angular/material/slide-toggle';
+
 
 @Component({
   selector   : 'sm-admin',
@@ -24,13 +26,17 @@ export class AdminComponent implements OnInit, OnDestroy {
   public credentials: Observable<any>;
   public newCredential: Observable<any>;
   public S3BucketCredentials: Observable<any>;
-  public version = versions['webapp-treeish'];
+  public version = versions['version'];
+  public disableHidpi: boolean = false;
+  public disableHidpiChanged: boolean = false;
+  public isChrome: boolean;
 
   constructor(
     public adminService: AdminService,
     private store: Store<any>,
     private dialog: MatDialog
   ) {
+    this.isChrome = window['chrome'];
     this.currentUser         = store.select(selectCurrentUser);
     this.userTitle           = this.currentUser.pipe(
       map((user) => [
@@ -45,6 +51,9 @@ export class AdminComponent implements OnInit, OnDestroy {
 
 
   ngOnInit() {
+
+    this.disableHidpi = window.localStorage.getItem('disableHidpi') === 'true';
+
     this.store.dispatch(getAllCredentials());
     this.newCredentialSub = this.newCredential.pipe(filter(credential => Object.keys(credential).length > 0)).subscribe(credential => {
       const dialog = this.dialog.open(CreateCredentialDialogComponent, {data: {credential}});
@@ -74,4 +83,17 @@ export class AdminComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.newCredentialSub.unsubscribe();
   }
+
+  HidpiChange(event: MatSlideToggleChange) {
+    window.localStorage.setItem('disableHidpi', JSON.stringify(event.checked));
+    this.disableHidpiChanged = !this.disableHidpiChanged;
+  }
+
+  reload(event) {
+    if (this.disableHidpiChanged) {
+      event.stopPropagation();
+      event.preventDefault();
+      window.location.reload();
+    }
+  }
 }
diff --git a/src/app/webapp-common/admin/base-admin.service.ts b/src/app/webapp-common/admin/base-admin.service.ts
index f9406bc2..30804afb 100644
--- a/src/app/webapp-common/admin/base-admin.service.ts
+++ b/src/app/webapp-common/admin/base-admin.service.ts
@@ -49,7 +49,11 @@ export class BaseAdminService {
     this.store.dispatch(showLocalFilePopUp({url}));
   }
 
-  signUrlIfNeeded(url, skipLocalFile = false) {
+  signUrlIfNeeded(url, skipLocalFile = true, skipFileServer = true) {
+    if (isFileserverUrl(url, window.location.hostname) && !skipFileServer) {
+      return converToReverseProxy(url);
+    }
+
     if (this.isLocalFile(url) && !skipLocalFile) {
       this.checkLocalServerRunning(url);
       return this.redirectToLocalServer(url);
@@ -59,9 +63,6 @@ export class BaseAdminService {
       return this.signGoogleCloudUrl(url);
     }
 
-    if (isFileserverUrl(url, window.location.hostname)) {
-      return converToReverseProxy(url);
-    }
     const now = new Date();
     if (this.previouslySignedUrls[url] && (new Date(this.previouslySignedUrls[url].expires).getTime() > now.getTime())) {
       return this.previouslySignedUrls[url].signedURL;
@@ -180,11 +181,11 @@ export class BaseAdminService {
   }
 
   public isS3Url(src) {
-    return src.startsWith('s3://');
+    return src?.startsWith('s3://');
   }
 
   public isGoogleCloudUrl(src) {
-    return src.startsWith('gs://');
+    return src?.startsWith('gs://');
   }
 
   public getBucketAndKeyFromSrc = (src) => {
@@ -214,6 +215,7 @@ export class BaseAdminService {
       };
     } else {
       try {
+        src = this.encodeSpecialCharacters(src);
         const amazon = AmazonS3URI(src);
         return {
           Bucket: amazon.bucket,
@@ -229,7 +231,7 @@ export class BaseAdminService {
 
   // Uses Allegro Chrome extension injecting patch_local_link function to window - hack to get local files.
   redirectToLocalServer(url: string): string {
-    return `http://localhost:${LOCAL_SERVER_PORT}${url.replace('file://','/')}`;
+    return `http://localhost:${LOCAL_SERVER_PORT}${url.replace('file://', '/')}`;
   }
 
   isLocalFile(url: string): boolean {
@@ -263,4 +265,19 @@ export class BaseAdminService {
     return url.startsWith('azure://');
   }
 
+  public replaceAll(baseString: string, toReplace: string, replaceWith: string, ignore= false): string{
+    return baseString.replace(new RegExp(toReplace.replace(/([\/\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\<\>\-\&])/g,"\\$&"),(ignore?"gi":"g")),(typeof(replaceWith)=="string")?replaceWith.replace(/\$/g,"$$$$"):replaceWith);
+
+  }
+
+
+  private encodeSpecialCharacters(src: string) {
+    src = this.replaceAll(src, '%','%25');
+    src = this.replaceAll(src, '#','%23');
+    src = this.replaceAll(src, '\\','%5C');
+    src = this.replaceAll(src, '^','%5E');
+    return src;
+  }
+
+
 }
diff --git a/src/app/webapp-common/admin/s3-access/s3-access.component.html b/src/app/webapp-common/admin/s3-access/s3-access.component.html
index 77f2f9fc..e63c01ba 100644
--- a/src/app/webapp-common/admin/s3-access/s3-access.component.html
+++ b/src/app/webapp-common/admin/s3-access/s3-access.component.html
@@ -33,7 +33,7 @@
   </div>
   <div class="col-6">
     <button class="pull-left btn btn-primary d-flex align-items-center" (click)="addBucket()" type="button">
-      <i class="icon i-plus-blue sm"></i>
+      <i class="al-icon al-color blue-400 msm al-ico-plus"></i>
     </button>
   </div>
   <div style="height: 40px"></div>
diff --git a/src/app/webapp-common/assets/icons/compare-icon.svg b/src/app/webapp-common/assets/icons/compare-icon.svg
index 2e0e320a..a27cadd1 100644
--- a/src/app/webapp-common/assets/icons/compare-icon.svg
+++ b/src/app/webapp-common/assets/icons/compare-icon.svg
@@ -2,7 +2,7 @@
   <defs>
     <style>
       .cls-1 {
-        fill: #1a1e2c;
+        fill: #dce0ee;
       }
     </style>
   </defs>
diff --git a/src/app/webapp-common/common-styles.scss b/src/app/webapp-common/common-styles.scss
index f9529eaf..1ac1e0da 100644
--- a/src/app/webapp-common/common-styles.scss
+++ b/src/app/webapp-common/common-styles.scss
@@ -1,7 +1,7 @@
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
 @import '~@angular/material/theming';
-@import "~angular-notifier/styles.scss";
-@import "~angular-notifier/styles/themes/theme-material.scss";
+@import "angular-notifier/styles.scss";
+@import "angular-notifier/styles/themes/theme-material.scss";
 @import "shared/ui-components/styles/notifications";
 @import "~britecharts/src/styles/charts/line";
 @import "~britecharts/src/styles/charts/donut";
@@ -10,6 +10,7 @@
 @import "~britecharts/src/styles/common/axes";
 @import "~britecharts/src/styles/common/grid";
 @import "shared/ui-components/styles/material-palette";
+@import "assets/fonts/trains-icons.scss";
 
 @include mat-core();
 //@import "../webapp-common/shared/ui-components/styles/material-theme.scss";
@@ -35,14 +36,16 @@ $sm-theme: mat-light-theme($sm-theme-primary, $sm-theme-accent, $sm-theme-warn);
   @include mat-radio-theme($sm-theme);
 
   .mat-checkbox-frame,
-  .mat-radio-outer-circle{
+  .mat-radio-outer-circle {
     border-color: $purple;
   }
+
   .light-theme .mat-radio-button.mat-radio-disabled .mat-radio-outer-circle,
-  .light-theme .mat-radio-button.mat-radio-disabled .mat-radio-label-content{
+  .light-theme .mat-radio-button.mat-radio-disabled .mat-radio-label-content {
     border-color: $blue-200 !important;
     color: $blue-200 !important;
   }
+
   .light-theme .mat-radio-button.mat-radio-disabled .mat-radio-inner-circle {
     background-color: transparent !important;
   }
@@ -52,13 +55,13 @@ $sm-theme: mat-light-theme($sm-theme-primary, $sm-theme-accent, $sm-theme-warn);
   outline: none !important;
 }
 
-html,
-body {
+html, body {
   height: 100%;
   margin: 0;
   padding: 0;
   font-family: 'Heebo', sans-serif;
   font-size: 13px;
+  overflow: hidden;
 }
 
 
@@ -99,6 +102,22 @@ h5.al-header {
   }
 }
 
+mat-expansion-panel {
+  box-shadow: unset;
+
+  &:hover {
+    background: transparent !important;
+  }
+
+  .mat-expansion-panel-header {
+    margin-bottom: 0;
+
+    &:hover {
+      background: transparent !important;
+    }
+  }
+}
+
 .mat-expansion-panel-header {
   font-family: 'Heebo', sans-serif;
 }
@@ -397,10 +416,10 @@ as-split {
 }
 
 $type-colors: (
-  string: #ff8400,
-  number: $neon-yellow-betterinchrome,
-  boolean: #b938a4,
-  date: #05668D,
+        string: #ff8400,
+        number: $neon-yellow-betterinchrome,
+        boolean: #b938a4,
+        date: #05668D,
 );
 
 .dark-theme {
@@ -418,7 +437,7 @@ $type-colors: (
       }
 
       .segment-key {
-        color: $cloudy-blue !important;
+        color: $blue-250 !important;
       }
     }
   }
@@ -529,3 +548,9 @@ body .mat-menu-panel .mat-form-field {
     }
   }
 }
+
+.hyper-parameters-tooltip {
+  white-space: pre-line;
+  text-align: left !important;
+  font-size: 14px !important;
+}
diff --git a/src/app/webapp-common/core/actions/layout.actions.ts b/src/app/webapp-common/core/actions/layout.actions.ts
index 5fefbde5..a3f9ace8 100644
--- a/src/app/webapp-common/core/actions/layout.actions.ts
+++ b/src/app/webapp-common/core/actions/layout.actions.ts
@@ -1,7 +1,5 @@
-import { MatSnackBarConfig } from '@angular/material/snack-bar';
 import {MessageSeverityEnum, VIEW_ACTIONS} from '../../../app.constants';
-import {Action} from '@ngrx/store';
-import {ISmAction} from '../models/actions';
+import {Action, createAction, props} from '@ngrx/store';
 import {omit} from 'lodash/fp';
 
 export class SetAutoRefresh {
@@ -87,16 +85,15 @@ export class AddMessage implements Action {
   public payload: {
     severity: string;
     msg: string;
-    action?: string;
-    config?: MatSnackBarConfig;
+    userActions?: {actions: any[]; name: string}[];
   };
 
-  constructor(severity: MessageSeverityEnum, msg: string, action?: string, config?: MatSnackBarConfig) {
-    this.payload = {severity, msg, action, config};
+  constructor(severity: MessageSeverityEnum, msg: string, userActions?: {actions: any[]; name: string}[]) {
+    this.payload = {severity, msg, userActions};
   }
 }
 
-export class SetServerUpdatesAvailable implements ISmAction {
+export class SetServerUpdatesAvailable implements Action {
   public type = VIEW_ACTIONS.SET_SERVER_UPDATES_AVAILABLE;
   public payload: { availableUpdates: any };
 
@@ -105,4 +102,9 @@ export class SetServerUpdatesAvailable implements ISmAction {
   }
 }
 
+export const setScaleFactor = createAction(
+  VIEW_ACTIONS + '[set scale]',
+  props<{scale: number}>()
+  );
+
 
diff --git a/src/app/webapp-common/core/actions/users.actions.ts b/src/app/webapp-common/core/actions/users.actions.ts
index 92da2516..49ae883c 100644
--- a/src/app/webapp-common/core/actions/users.actions.ts
+++ b/src/app/webapp-common/core/actions/users.actions.ts
@@ -1,4 +1,4 @@
-import {Action} from '@ngrx/store';
+import {Action, createAction, props} from '@ngrx/store';
 import {USERS_ACTIONS} from '../../../app.constants';
 import {User} from '../../../business-logic/model/users/user';
 
@@ -8,11 +8,10 @@ export class FetchCurrentUser implements Action {
 
 }
 
-export class SetCurrentUser implements Action {
-  type = USERS_ACTIONS.SET_CURRENT_USER;
-
-  constructor(public payload: User) {}
-}
+export const setCurrentUser = createAction(
+  USERS_ACTIONS.SET_CURRENT_USER,
+  props<{user: User; terms_of_use?: any}>()
+);
 
 export class Logout implements Action {
   type = USERS_ACTIONS.LOGOUT;
diff --git a/src/app/webapp-common/core/effects/layout.effects.ts b/src/app/webapp-common/core/effects/layout.effects.ts
index 20549af2..1899b061 100644
--- a/src/app/webapp-common/core/effects/layout.effects.ts
+++ b/src/app/webapp-common/core/effects/layout.effects.ts
@@ -1,15 +1,15 @@
 import {Injectable} from '@angular/core';
 import {Actions, Effect, ofType} from '@ngrx/effects';
-import {VIEW_ACTIONS} from '../../../app.constants';
+import {EmptyAction, VIEW_ACTIONS} from '../../../app.constants';
 import * as layoutActions from '../actions/layout.actions';
-import {filter, flatMap, map, switchMap, tap, take} from 'rxjs/operators';
+import {filter, map, switchMap, take, flatMap} from 'rxjs/operators';
 import {get} from 'lodash/fp';
 import {ApiTasksService} from '../../../business-logic/api-services/tasks.service';
 import {Observable, of} from 'rxjs';
 import {ApiModelsService} from '../../../business-logic/api-services/models.service';
-import {NotifierService} from 'angular-notifier';
 import { MatDialogRef, MatDialog } from '@angular/material/dialog';
 import {AlertDialogComponent} from '../../shared/ui-components/overlay/alert-dialog/alert-dialog.component';
+import {NotifierService} from '../../angular-notifier';
 
 const ERROR_AGGREGATION = 600000;
 
@@ -46,6 +46,7 @@ export class LayoutEffects {
   @Effect({dispatch: false})
   popupError = this.actions.pipe(
     ofType<layoutActions.SetServerError>(VIEW_ACTIONS.SET_SERVER_ERROR),
+    filter(action => action.payload.serverError?.status !== 401),
     map((action) => {
       const customMessage: string = action.payload.customMessage;
       if (action.payload.aggregateSimilar) {
@@ -70,13 +71,12 @@ export class LayoutEffects {
     })
   );
 
-  @Effect({dispatch: false})
+  @Effect()
   addMessage: Observable<any> = this.actions.pipe(
     ofType<layoutActions.AddMessage>(VIEW_ACTIONS.ADD_MESSAGE),
     map((action: layoutActions.AddMessage) => action.payload),
-    tap(payload => {
-      this.notifierService.show({type: payload.severity, message: payload.msg});
-    })
+    flatMap(payload => this.notifierService.show({type: payload.severity, message: payload.msg, actions: payload.userActions})),
+    flatMap(actions => actions.length > 0? actions : [new EmptyAction()])
   );
 
   private parseError(errorMessage) {
diff --git a/src/app/webapp-common/core/effects/projects.effects.ts b/src/app/webapp-common/core/effects/projects.effects.ts
index bba095ea..ad7ddf13 100644
--- a/src/app/webapp-common/core/effects/projects.effects.ts
+++ b/src/app/webapp-common/core/effects/projects.effects.ts
@@ -24,6 +24,8 @@ import {MatDialog} from '@angular/material/dialog';
 import {ApiOrganizationService} from '../../../business-logic/api-services/organization.service';
 import {OrganizationGetTagsResponse} from '../../../business-logic/model/organization/organizationGetTagsResponse';
 
+const ALL_PROJECTS_OBJECT = {id: '*', name: 'All Projects'};
+
 @Injectable()
 export class ProjectsEffects {
 
@@ -36,7 +38,7 @@ export class ProjectsEffects {
   getProjects$ = this.actions$.pipe(
     ofType<GetAllProjects>(actions.GET_PROJECTS),
     switchMap(() =>
-      this.projectsApi.projectsGetAllEx({})
+      this.projectsApi.projectsGetAllEx({only_fields:['name', 'company']})
         .pipe(map(res => new actions.SetAllProjects(res.projects)))
     )
   );
@@ -77,7 +79,7 @@ export class ProjectsEffects {
     filter(([action, projects]) => !!action.payload.projectId),
     switchMap(([action, projects]) => {
       if (action.payload.projectId === '*') {
-        return [new actions.SetSelectedProject({id: '*', name: 'All Projects'})];
+        return [new actions.SetSelectedProject(ALL_PROJECTS_OBJECT)];
       } else {
         const proj = projects.find(proj => proj.id === action.payload.projectId);
         if (proj) {
diff --git a/src/app/webapp-common/core/effects/users.effects.ts b/src/app/webapp-common/core/effects/users.effects.ts
index a08737e4..3ef95229 100644
--- a/src/app/webapp-common/core/effects/users.effects.ts
+++ b/src/app/webapp-common/core/effects/users.effects.ts
@@ -3,7 +3,7 @@ import {Router} from '@angular/router';
 import {Actions, Effect, ofType} from '@ngrx/effects';
 import {USERS_ACTIONS} from '../../../app.constants';
 import {ApiUsersService} from '../../../business-logic/api-services/users.service';
-import {FetchCurrentUser, SetCurrentUser} from '../actions/users.actions';
+import {FetchCurrentUser, setCurrentUser} from '../actions/users.actions';
 import {catchError, flatMap, switchMap} from 'rxjs/operators';
 import {RequestFailed} from '../actions/http.actions';
 import {logoutFn} from '../../../shared/utils/logout-utils';
@@ -13,15 +13,17 @@ import {ApiAuthService} from '../../../business-logic/api-services/auth.service'
 @Injectable()
 export class CommonUserEffects {
 
-  constructor(private actions: Actions, private userService: ApiUsersService,
-              private router: Router, private authService: ApiAuthService) {}
+  constructor(
+    private actions: Actions, private userService: ApiUsersService,
+    private router: Router, private authService: ApiAuthService
+  ) {}
 
   @Effect()
   fetchUser$ = this.actions.pipe(
     ofType<FetchCurrentUser>(USERS_ACTIONS.FETCH_CURRENT_USER),
     flatMap(() => this.userService.usersGetCurrentUser({})
       .pipe(
-        switchMap((res) => [new SetCurrentUser(res)]),
+        switchMap((res) => [setCurrentUser(res)]),
         catchError(error => [new RequestFailed(error)])
       )
     )
diff --git a/src/app/webapp-common/core/interceptors/webapp-interceptor.ts b/src/app/webapp-common/core/interceptors/webapp-interceptor.ts
index dce8966a..b9c70801 100644
--- a/src/app/webapp-common/core/interceptors/webapp-interceptor.ts
+++ b/src/app/webapp-common/core/interceptors/webapp-interceptor.ts
@@ -2,13 +2,20 @@ import { Injectable } from '@angular/core';
 import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
 import { Observable, throwError } from 'rxjs';
 import { environment } from '../../../../environments/environment';
-import {catchError, take} from 'rxjs/operators';
+import {catchError} from 'rxjs/operators';
 import { Router } from '@angular/router';
+import {selectCurrentUser} from '../reducers/users-reducer';
+import {Store} from '@ngrx/store';
+import { setCurrentUser } from '../actions/users.actions';
+import {User} from '../../../business-logic/model/users/user';
 
 @Injectable()
 export class WebappIntercptor implements HttpInterceptor {
+  private user: User;
 
-  constructor(private router: Router) {}
+  constructor(private router: Router, private store: Store<any>) {
+    this.store.select(selectCurrentUser).subscribe(user => this.user = user);
+  }
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     request = request.clone({
@@ -19,12 +26,17 @@ export class WebappIntercptor implements HttpInterceptor {
     return next.handle(request).pipe(
       catchError((err: HttpErrorResponse) => {
         const redirectUrl: string = window.location.pathname + window.location.search;
-        if(request.url.endsWith('system.company_info')){
+        if (request.url.endsWith('system.company_info')) {
           return throwError(err);
         }
         // For automatic login don't go to login page (login in APP_INITIALIZER)
-        if (err.status === 401 && (['/dashboard'].includes(redirectUrl) || !environment.autoLogin)) {
+        if (err.status === 401 && (
+          ['/dashboard'].includes(redirectUrl) ||
+          !environment.autoLogin ||
+          (environment.autoLogin && this.user)
+        )) {
           if (redirectUrl.indexOf('/login') === -1) {
+            this.store.dispatch(setCurrentUser({user: null, terms_of_use: null }));
             this.router.navigate(['login'], {queryParams: {redirect: redirectUrl}});
           }
           return throwError(err);
diff --git a/src/app/webapp-common/core/reducers/projects.reducer.ts b/src/app/webapp-common/core/reducers/projects.reducer.ts
index a281eab8..8b754d66 100644
--- a/src/app/webapp-common/core/reducers/projects.reducer.ts
+++ b/src/app/webapp-common/core/reducers/projects.reducer.ts
@@ -1,9 +1,9 @@
 import {createSelector} from '@ngrx/store';
 import * as projectsActions from '../actions/projects.actions';
-import {Project} from '../../../business-logic/model/projects/project';
-import {sortBy} from 'lodash/fp';
 import {setTagColors, setTags, TagColor} from '../actions/projects.actions';
+import {Project} from '../../../business-logic/model/projects/project';
 import {getSystemTags} from '../../../features/experiments/shared/experiments.utils';
+
 export const SYSTEM_TAGS_BLACK_LIST = ['archived'];
 
 interface RootProjects {
@@ -25,7 +25,7 @@ const initRootProjects: RootProjects = {
 };
 
 export const projects = state => state.rootProjects as RootProjects;
-export const selectProjects = createSelector(projects, (state): Project[] => sortBy('name', state.projects));
+export const selectProjects = createSelector(projects, (state): Project[] =>  state.projects);
 export const selectSelectedProject = createSelector(projects, state => state.selectedProject);
 export const selectSelectedProjectId = createSelector(selectSelectedProject, (selectedProject): string => selectedProject ? selectedProject.id : '');
 export const selectIsArchivedMode = createSelector(projects, state => state.archive);
diff --git a/src/app/webapp-common/core/reducers/users-reducer.ts b/src/app/webapp-common/core/reducers/users-reducer.ts
index c8ea06d5..6d69c960 100644
--- a/src/app/webapp-common/core/reducers/users-reducer.ts
+++ b/src/app/webapp-common/core/reducers/users-reducer.ts
@@ -1,5 +1,6 @@
 import {USERS_ACTIONS} from '../../../app.constants';
 import {createSelector} from '@ngrx/store';
+import {setCurrentUser} from '../actions/users.actions';
 
 export interface IUsersState {
   currentUser: string;
@@ -21,11 +22,11 @@ export function usersReducer(state = initUsers, action) {
   switch (action.type) {
     case USERS_ACTIONS.FETCH_CURRENT_USER:
       return {...state};
-    case USERS_ACTIONS.SET_CURRENT_USER:
+    case setCurrentUser.type:
       return {
         ...state,
-        currentUser: action.payload.user,
-        termsOfUse: action.payload.terms_of_use
+        currentUser: action.user,
+        termsOfUse: action.terms_of_use
       };
     case USERS_ACTIONS.LOGOUT:
       return {
diff --git a/src/app/webapp-common/core/reducers/view-reducer.ts b/src/app/webapp-common/core/reducers/view-reducer.ts
index 93f22218..1391a845 100644
--- a/src/app/webapp-common/core/reducers/view-reducer.ts
+++ b/src/app/webapp-common/core/reducers/view-reducer.ts
@@ -1,6 +1,7 @@
 import {HTTP, HTTP_ACTIONS, VIEW_ACTIONS} from '../../../app.constants';
 import {createSelector} from '@ngrx/store';
 import {get} from 'lodash/fp';
+import {setScaleFactor} from '../actions/layout.actions';
 
 export interface ViewState {
   loading: {[endpoint: string]: boolean};
@@ -12,6 +13,7 @@ export interface ViewState {
   autoRefresh: boolean;
   compareAutoRefresh: boolean;
   applicationVisible: boolean;
+  scaleFactor: number;
 }
 
 export const initViewState: ViewState = {
@@ -25,6 +27,7 @@ export const initViewState: ViewState = {
   autoRefresh: true,
   compareAutoRefresh: false,
   applicationVisible: true,
+  scaleFactor: 100
 };
 
 export const views = state => state.views as ViewState;
@@ -38,6 +41,7 @@ export const selectResultMessage = createSelector(views, state => state.resultMe
 export const selectAutoRefresh = createSelector(views, state => state && state.autoRefresh);
 export const selectCompareAutoRefresh = createSelector(views, state => state.compareAutoRefresh);
 export const selectAppVisible = createSelector(views, state => state.applicationVisible);
+export const selectScaleFactor = createSelector(views, state => state.scaleFactor);
 
 
 export function viewReducer(viewState: ViewState = initViewState, action) {
@@ -58,6 +62,8 @@ export function viewReducer(viewState: ViewState = initViewState, action) {
       };
     case VIEW_ACTIONS.VISIBILITY_CHANGED:
       return {...viewState, applicationVisible: action.visible};
+    case setScaleFactor.type:
+      return {...viewState, scaleFactor: action.scale};
     case VIEW_ACTIONS.RESET_LOADER:
       return {...viewState, loading: {}};
     case HTTP.API_REQUEST_SUCCESS:
diff --git a/src/app/webapp-common/dashboard/common-dashboard.actions.ts b/src/app/webapp-common/dashboard/common-dashboard.actions.ts
index 7109e102..c5c13024 100644
--- a/src/app/webapp-common/dashboard/common-dashboard.actions.ts
+++ b/src/app/webapp-common/dashboard/common-dashboard.actions.ts
@@ -11,7 +11,7 @@ export class GetRecentProjects implements ISmAction {
   public type = DASHBOARD_ACTIONS.GET_RECENT_PROJECTS;
   public payload: { getAllFilter: ProjectsGetAllRequest };
 
-  constructor(getAllFilter: any = {stats_for_state: ProjectsGetAllExRequest.StatsForStateEnum.Active, include_stats: true, order_by: ['-last_update'], page: 0, page_size: CARDS_IN_ROW}) {
+  constructor(getAllFilter: any = {stats_for_state: ProjectsGetAllExRequest.StatsForStateEnum.Active, include_stats: true, order_by: ['featured', '-last_update'], page: 0, page_size: CARDS_IN_ROW}) {
     this.payload = {getAllFilter};
   }
 }
diff --git a/src/app/webapp-common/dashboard/common-dashboard.effects.ts b/src/app/webapp-common/dashboard/common-dashboard.effects.ts
index 13e99e0d..143b98e9 100644
--- a/src/app/webapp-common/dashboard/common-dashboard.effects.ts
+++ b/src/app/webapp-common/dashboard/common-dashboard.effects.ts
@@ -28,7 +28,7 @@ export class CommonDashboardEffects {
     flatMap((action) => this.projectsApi.projectsGetAllEx(action.payload.getAllFilter)
       .pipe(
         flatMap(res => [new SetRecentProjects(res.projects), new DeactiveLoader(action.type)]),
-        catchError(error => [new DeactiveLoader(action.type), new AddMessage(MESSAGES_SEVERITY.ERROR, 'Fetching projects failed'), new RequestFailed(error)])
+        catchError(error => [new DeactiveLoader(action.type), new RequestFailed(error)])
       )
     )
   );
@@ -47,7 +47,7 @@ export class CommonDashboardEffects {
       })
         .pipe(
           flatMap(res => [new SetRecentTasks(res.tasks as Array<IRecentTask>), new DeactiveLoader(action.type)]),
-          catchError(err => [new RequestFailed(err), new AddMessage(MESSAGES_SEVERITY.ERROR, 'Fetching recent experiments failed'), new DeactiveLoader(action.type)])
+          catchError(err => [new RequestFailed(err), new DeactiveLoader(action.type)])
         )
     )
   );
diff --git a/src/app/webapp-common/dashboard/common-dashboard.module.ts b/src/app/webapp-common/dashboard/common-dashboard.module.ts
index 0a5defa1..24460cf7 100644
--- a/src/app/webapp-common/dashboard/common-dashboard.module.ts
+++ b/src/app/webapp-common/dashboard/common-dashboard.module.ts
@@ -13,22 +13,25 @@ import {EffectsModule} from '@ngrx/effects';
 import {ProjectsSharedModule} from '../../features/projects/shared/projects-shared.module';
 import {CommonSearchResultsModule} from '../search/common-search-results.module';
 import {CommonExperimentSharedModule} from '../experiments/shared/common-experiment-shared.module';
+import {SharedModule} from '../../shared/shared.module';
 
 @NgModule({
   declarations: [DashboardProjectsComponent, DashboardExperimentsComponent, RecentExperimentTableComponent],
   exports     : [DashboardProjectsComponent, DashboardExperimentsComponent],
-  imports     : [
-    SMSharedModule,
-    ExperimentsCommonModule,
-    CommonModule,
-    ExperimentSharedModule,
-    CommonSearchModule,
-    CommonSearchResultsModule,
-    ProjectsSharedModule,
-    CommonExperimentSharedModule,
-    EffectsModule.forFeature([CommonDashboardEffects]),
-    CommonLayoutModule,
-    ExperimentSharedModule]
+    imports: [
+        SMSharedModule,
+        ExperimentsCommonModule,
+        CommonModule,
+        ExperimentSharedModule,
+        CommonSearchModule,
+        CommonSearchResultsModule,
+        ProjectsSharedModule,
+        CommonExperimentSharedModule,
+        EffectsModule.forFeature([CommonDashboardEffects]),
+        CommonLayoutModule,
+        ExperimentSharedModule,
+        SharedModule
+    ]
 })
 export class CommonDashboardModule {
 }
diff --git a/src/app/webapp-common/dashboard/containers/dashboard-projects/dashboard-projects.component.html b/src/app/webapp-common/dashboard/containers/dashboard-projects/dashboard-projects.component.html
index fd84b951..6154812d 100644
--- a/src/app/webapp-common/dashboard/containers/dashboard-projects/dashboard-projects.component.html
+++ b/src/app/webapp-common/dashboard/containers/dashboard-projects/dashboard-projects.component.html
@@ -3,12 +3,11 @@
     <div class="recent-title">RECENT PROJECTS
       <button class="btn btn-link view-all" (click)="router.navigateByUrl('/projects')">VIEW ALL</button>
     </div>
-    <div>
+    <div *smCheckPermission>
       <button *ngIf="(recentProjectsList$ | async).length >= CARDS_IN_ROW"
               class="btn btn-primary d-flex align-items-center"
               (click)="openCreateProjectDialog()">
-        <i class="icon sm i-plus-blue"></i> &nbsp; NEW PROJECT
-      </button>
+      <i class="al-icon al-color blue-400 msm al-ico-plus mr-2"></i>NEW PROJECT</button>
     </div>
   </div>
 </div>
@@ -19,6 +18,6 @@
   </div>
   <div *ngIf="(recentProjectsList$ | async).length < CARDS_IN_ROW"
        class="col-lg-6 col-md-12">
-    <sm-plus-card (plusCardClick)="openCreateProjectDialog()"></sm-plus-card>
+    <sm-plus-card *smCheckPermission="true" (plusCardClick)="openCreateProjectDialog()"></sm-plus-card>
   </div>
 </div>
diff --git a/src/app/webapp-common/dashboard/dashboard-search.component.base.ts b/src/app/webapp-common/dashboard/dashboard-search.component.base.ts
index dc3d3e58..0291ca22 100644
--- a/src/app/webapp-common/dashboard/dashboard-search.component.base.ts
+++ b/src/app/webapp-common/dashboard/dashboard-search.component.base.ts
@@ -60,7 +60,7 @@ export abstract class DashboardSearchComponentBase {
 
   public searchTermChanged(term: string) {
     if (term && term.length > 0) {
-      this.store.dispatch(new SearchStart(term));
+      this.store.dispatch(new SearchStart(term, term.length < 3));
     } else {
       this.activeLink = 'projects';
       this.store.dispatch(new SearchDeactivate());
diff --git a/src/app/webapp-common/debug-images/debug-image-snippet/debug-image-snippet.component.html b/src/app/webapp-common/debug-images/debug-image-snippet/debug-image-snippet.component.html
index 73f581ec..f7925f92 100644
--- a/src/app/webapp-common/debug-images/debug-image-snippet/debug-image-snippet.component.html
+++ b/src/app/webapp-common/debug-images/debug-image-snippet/debug-image-snippet.component.html
@@ -19,12 +19,12 @@
       (loadedmetadata)="loadedMedia()"
       (click)="imageClicked.emit()"
     ></video>
-    <ng-container *ngIf="isHtml">
+    <div class="html-snippet" *ngIf="isHtml">
       <div class="html-wrap">
         <iframe class="html-viewer" width="400" height="400" referrerpolicy="origin-when-cross-origin" [src]="frame.url | safe:'url'"></iframe>
       </div>
-      <div class="d-flex justify-content-between buttons-footer align-items-center">
-        <div class="clickable-icon d-flex align-items-center justify-content-center pointer"
+      <div class="toolbar">
+        <div class="clickable-icon d-flex align-items-center justify-content-center pointer mr-2"
              ngxClipboard
              smTooltip="Copy URL"
              [cbContent]="frame.url || frame.oldSrc"
@@ -38,7 +38,7 @@
           <i class="fas fa-external-link-alt"></i>
         </div>
       </div>
-    </ng-container>
+    </div>
     <div *ngIf="!isLoading" class="image-var ellipsis" [smTooltip]="frame?.variant">{{frame?.variant}}</div>
   </div>
 
diff --git a/src/app/webapp-common/debug-images/debug-image-snippet/debug-image-snippet.component.scss b/src/app/webapp-common/debug-images/debug-image-snippet/debug-image-snippet.component.scss
index a7457dcb..8a8466a1 100644
--- a/src/app/webapp-common/debug-images/debug-image-snippet/debug-image-snippet.component.scss
+++ b/src/app/webapp-common/debug-images/debug-image-snippet/debug-image-snippet.component.scss
@@ -58,11 +58,28 @@
   transform: scale(0.44);
   transform-origin: 0 0;
 }
+.html-snippet {
+  &:hover {
+    .toolbar {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .toolbar {
+    display: flex;
+    position: absolute;
+    bottom: 8px;
+    left: 16px;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.5s, visibility 0.5s;
+  }
+}
 
 .clickable-icon {
   background-color: #efefef;
   padding: 4px 24px;
-  margin: 0 auto;
   border-radius: 4px;
 }
 
diff --git a/src/app/webapp-common/debug-images/debug-image-snippet/debug-image-snippet.component.ts b/src/app/webapp-common/debug-images/debug-image-snippet/debug-image-snippet.component.ts
index 8202faaa..d6e9531e 100644
--- a/src/app/webapp-common/debug-images/debug-image-snippet/debug-image-snippet.component.ts
+++ b/src/app/webapp-common/debug-images/debug-image-snippet/debug-image-snippet.component.ts
@@ -1,5 +1,5 @@
 import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
-import {isHtmlPage} from '../../shared/utils/shared-utils';
+import {isHtmlPage, isTextFileURL} from '../../shared/utils/shared-utils';
 import {IsAudioPipe} from '../../shared/pipes/is-audio.pipe';
 import {IsVideoPipe} from '../../shared/pipes/is-video.pipe';
 import {AddMessage} from '../../core/actions/layout.actions';
@@ -21,7 +21,7 @@ export class DebugImageSnippetComponent implements OnInit {
     if (frame.url) {
       this.isVideo = (new IsVideoPipe().transform(frame.url));
       this.isAudio = (new IsAudioPipe()).transform(frame.url);
-      this.isHtml = isHtmlPage(frame.url);
+      this.isHtml = isHtmlPage(frame.url) || isTextFileURL(frame.url);
     }
     this._frame = frame;
   }
@@ -35,7 +35,7 @@ export class DebugImageSnippetComponent implements OnInit {
   isFailed = false;
   isLoading = true;
 
-  constructor(private store: Store) {
+  constructor(private store: Store<any>) {
   }
 
   ngOnInit() {
diff --git a/src/app/webapp-common/debug-images/debug-images-view/debug-images-view.component.scss b/src/app/webapp-common/debug-images/debug-images-view/debug-images-view.component.scss
index cd04f676..0ff37a4d 100644
--- a/src/app/webapp-common/debug-images/debug-images-view/debug-images-view.component.scss
+++ b/src/app/webapp-common/debug-images/debug-images-view/debug-images-view.component.scss
@@ -58,9 +58,6 @@
 
     .mat-expansion-panel-header {
       margin-bottom: 0;
-      &:hover{
-        background:transparent;
-      }
     }
 
     .mat-expansion-panel-header-title {
diff --git a/src/app/webapp-common/debug-images/debug-images.component.html b/src/app/webapp-common/debug-images/debug-images.component.html
index 3df7deed..a4993048 100644
--- a/src/app/webapp-common/debug-images/debug-images.component.html
+++ b/src/app/webapp-common/debug-images/debug-images.component.html
@@ -15,20 +15,20 @@
         <label>Iterations:</label>
 
         <div [ngClass]="{'disabled': (beginningOfTime$| async)[experimentId]}" (click)="nextBatch({task: experimentId, metric: metricSelect.value})"
-             class="icon i-next-batch"
+             class="al-icon al-ico-next-batch al-color light-grey-blue"
              smTooltip="Older images"></div>
 
         <b class="text-right">{{debugImages && debugImages[experimentId] && debugImages[experimentId][debugImages[experimentId].length - 1].iter}}</b>
 
-        <div class="icon i-between"></div>
+        <div class="al-icon al-ico-between al-color light-blue-grey"></div>
 
         <b>{{debugImages && debugImages[experimentId] && debugImages[experimentId][0].iter}}</b>
 
-        <div [ngClass]="{'disabled': (timeIsNow$| async)[experimentId]}" (click)="(!timeIsNow[experimentId]) && previousBatch({task: experimentId, metric: metricSelect.value})" class="icon i-prev-batch"
+        <div [ngClass]="{'disabled': (timeIsNow$| async)[experimentId]}" (click)="(!timeIsNow[experimentId]) && previousBatch({task: experimentId, metric: metricSelect.value})" class="al-icon al-ico-prev-batch al-color light-grey-blue"
              smTooltip="Newer images"></div>
 
         <div [ngClass]="{'disabled': (timeIsNow$| async)[experimentId] && !allowAutorefresh }"
-             (click)="(!(timeIsNow[experimentId] && !allowAutorefresh)) && backToNow({task: experimentId, metric: metricSelect.value})" class="icon i-back-to-top"
+             (click)="(!(timeIsNow[experimentId] && !allowAutorefresh)) && backToNow({task: experimentId, metric: metricSelect.value})" class="al-icon al-ico-back-to-top al-color light-grey-blue"
              smTooltip="Newest images"></div>
       </div>
       <div class="no-images icon i-no-debug-samples-with-text" *ngIf="shouldShowNoImagesForExperiment(experimentId)">
diff --git a/src/app/webapp-common/debug-images/debug-images.component.scss b/src/app/webapp-common/debug-images/debug-images.component.scss
index cb528d56..f3cc224b 100644
--- a/src/app/webapp-common/debug-images/debug-images.component.scss
+++ b/src/app/webapp-common/debug-images/debug-images.component.scss
@@ -30,7 +30,7 @@ sm-debug-images-view {
   align-items: center;
   margin-bottom: 24px;
 
-  .i-next-batch, .i-prev-batch, .i-back-to-top {
+  .al-ico-next-batch, .al-ico-prev-batch, .al-ico-back-to-top {
     cursor: pointer;
   }
 
diff --git a/src/app/webapp-common/debug-images/debug-images.component.ts b/src/app/webapp-common/debug-images/debug-images.component.ts
index 722f0d72..ed0738e3 100644
--- a/src/app/webapp-common/debug-images/debug-images.component.ts
+++ b/src/app/webapp-common/debug-images/debug-images.component.ts
@@ -79,13 +79,14 @@ export class DebugImagesComponent implements OnInit, OnDestroy {
         map(([bucketCredentials, debugImages]) => {
           const debugImagesP = Object.entries(debugImages).reduce(((previousValue, currentValue: any) => {
             previousValue[currentValue[0]] = currentValue[1].metrics[0].iterations.map(iteration => {
-                const events = iteration.events.map(event => {
-                  const signedUrl = this.adminService.signUrlIfNeeded(event.url);
-                  return {...event, oldSrc: event.url, url: signedUrl};
-                });
-                return {...iteration, events};
-              }
-            );
+              const events = iteration.events.map(event => {
+                const signedUrl = this.adminService.signUrlIfNeeded(event.url);
+                const parsed = new URL(signedUrl);
+                parsed.searchParams.append('X-Amz-Date', event.timestamp);
+                return {...event, oldSrc: event.url, url: parsed.toString()};
+              });
+              return {...iteration, events};
+            });
             previousValue[currentValue[0]].metric = currentValue[1].metrics[0].metric;
             previousValue[currentValue[0]].scrollId = currentValue[1].scroll_id;
             return previousValue;
diff --git a/src/app/webapp-common/experiments-compare/actions/experiments-compare-charts.actions.ts b/src/app/webapp-common/experiments-compare/actions/experiments-compare-charts.actions.ts
index c55cb0e7..bcba569b 100644
--- a/src/app/webapp-common/experiments-compare/actions/experiments-compare-charts.actions.ts
+++ b/src/app/webapp-common/experiments-compare/actions/experiments-compare-charts.actions.ts
@@ -1,6 +1,7 @@
 import {Action} from '@ngrx/store';
 import {ISmAction} from '../../core/models/actions';
 import {IExperimentSettings} from '../../experiments/reducers/common-experiment-output.reducer';
+import {ScalarKeyEnum} from '../../../business-logic/model/events/scalarKeyEnum';
 
 
 export const EXPERIMENTS_COMPARE_METRICS_CHARTS_ = 'EXPERIMENTS_COMPARE_METRICS_CHARTS_';
@@ -29,7 +30,7 @@ export const RESET_EXPERIMENT_METRICS          = EXPERIMENTS_COMPARE_METRICS_CHA
 export class GetMultiScalarCharts implements ISmAction {
   public type = GET_MULTI_SCALAR_CHARTS;
 
-  constructor(public payload: { taskIds: string[]; autoRefresh?: boolean }) {}
+  constructor(public payload: { taskIds: string[]; autoRefresh?: boolean; cached?: boolean }) {}
 }
 
 export class GetMultiPlotCharts implements ISmAction {
@@ -47,7 +48,7 @@ export class SetSelectedExperiments implements Action {
 export class SetExperimentHistogram implements Action {
   readonly type = SET_EXPERIMENT_HISTOGRAM;
 
-  constructor(public payload: any) {
+  constructor(public payload: any,  public axisType: ScalarKeyEnum) {
   }
 }
 
diff --git a/src/app/webapp-common/experiments-compare/actions/experiments-compare-details.actions.ts b/src/app/webapp-common/experiments-compare/actions/experiments-compare-details.actions.ts
index 5e6c6e46..461a6fe9 100644
--- a/src/app/webapp-common/experiments-compare/actions/experiments-compare-details.actions.ts
+++ b/src/app/webapp-common/experiments-compare/actions/experiments-compare-details.actions.ts
@@ -1,51 +1,6 @@
-import {Action} from '@ngrx/store';
-import {Task} from '../../../business-logic/model/tasks/task';
+import {createAction, props} from '@ngrx/store';
 import {IExperimentDetail} from '../../../features/experiments-compare/experiments-compare-models';
 
-export const EXPERIMENTS_COMPARE_DETAILS_PREFIX = 'EXPERIMENTS_COMPARE_DETAILS_';
-
-// commands.
-export const SET_EXPERIMENTS = EXPERIMENTS_COMPARE_DETAILS_PREFIX + 'SET_EXPERIMENTS';
-export const EXPAND_NODE = EXPERIMENTS_COMPARE_DETAILS_PREFIX + 'EXPAND_NODE';
-export const EXPAND_NODES = EXPERIMENTS_COMPARE_DETAILS_PREFIX + 'EXPAND_NODES';
-export const COLLAPSE_NODE = EXPERIMENTS_COMPARE_DETAILS_PREFIX + 'COLLAPSE_NODE';
-export const RESET_STATE = EXPERIMENTS_COMPARE_DETAILS_PREFIX + 'RESET_STATE';
-
-// events.
-export const EXPERIMENT_LIST_UPDATED = EXPERIMENTS_COMPARE_DETAILS_PREFIX + 'EXPERIMENT_LIST_UPDATED';
-export const REFETCH_EXPERIMENT_REQUESTED = EXPERIMENTS_COMPARE_DETAILS_PREFIX + 'REFETCH_EXPERIMENT_REQUESTED';
-
-
-export class ExperimentListUpdated implements Action {
-  readonly type = EXPERIMENT_LIST_UPDATED;
-
-  constructor(public payload: Array<Task['id']>) {
-  }
-}
-
-export class SetExperiments implements Action {
-  readonly type = SET_EXPERIMENTS;
-
-  constructor(public payload: Array<IExperimentDetail>) {
-  }
-}
-
-export class ExpandNode implements Action {
-  readonly type = EXPAND_NODE;
-
-  // the node path.
-  constructor(public payload: string | Array<string>) {
-  }
-}
-
-export class CollapseNode implements Action {
-  readonly type = COLLAPSE_NODE;
-
-  // the node path.
-  constructor(public payload: string) {
-  }
-}
-
-export class ResetState implements Action {
-  readonly type = RESET_STATE;
-}
+export const resetState = createAction('[experiment compare details] RESET_STATE');
+export const setExperiments = createAction('[experiment compare details] SET_EXPERIMENTS', props<{experiments: IExperimentDetail[]}>());
+export const experimentListUpdated = createAction('[experiment compare details] EXPERIMENT_LIST_UPDATED', props<{ids: string[]}>());
diff --git a/src/app/webapp-common/experiments-compare/actions/experiments-compare-scalars-graph.actions.ts b/src/app/webapp-common/experiments-compare/actions/experiments-compare-scalars-graph.actions.ts
index eb41dd41..2e78242a 100644
--- a/src/app/webapp-common/experiments-compare/actions/experiments-compare-scalars-graph.actions.ts
+++ b/src/app/webapp-common/experiments-compare/actions/experiments-compare-scalars-graph.actions.ts
@@ -1,5 +1,5 @@
 import {createAction, props} from '@ngrx/store';
-import {HyperParams, MetricOption, MetricValueType} from '../reducers/experiments-compare-charts.reducer';
+import {GroupedHyperParams, HyperParams, MetricOption, MetricValueType} from '../reducers/experiments-compare-charts.reducer';
 
 export const EXPERIMENTS_COMPARE_SCALARS_GRAPH = 'EXPERIMENTS_COMPARE_SCALARS_GRAPH_';
 
@@ -14,5 +14,5 @@ export const getExperimentsHyperParams = createAction(GET_EXPERIMENTS_PARAMS, pr
 export const setMetricsList = createAction(SET_METRICS_LIST, props<{ metricsList: MetricOption[] }>());
 export const setTasks = createAction(SET_TASKS, props<{ tasks: any }>());
 export const setvalueType = createAction(SET_VALUE_TYPE, props<{ valueType: MetricValueType }>());
-export const setHyperParamsList = createAction(SET_PARAMS_LIST, props<{ hyperParams: HyperParams }>());
+export const setHyperParamsList = createAction(SET_PARAMS_LIST, props<{ hyperParams: GroupedHyperParams }>());
 export const setShowIdenticalHyperParams = createAction(SET_HIDE_IDENTICAL_HYPER_PARAMS);
diff --git a/src/app/webapp-common/experiments-compare/containers/experiment-compare-details/experiment-compare-details.component.html b/src/app/webapp-common/experiments-compare/containers/experiment-compare-details/experiment-compare-details.component.html
index 997df8e3..b2ace1b5 100644
--- a/src/app/webapp-common/experiments-compare/containers/experiment-compare-details/experiment-compare-details.component.html
+++ b/src/app/webapp-common/experiments-compare/containers/experiment-compare-details/experiment-compare-details.component.html
@@ -1,5 +1,4 @@
 <sm-compare-card-list
-  #cardList
   [experiments]="experiments"
   [baseExperiment]="baseExperiment"
   [ngClass]="calculatingTree ? 'pending' : ''"
@@ -30,7 +29,8 @@
                      [class.selected-diff]="checkIfSelectedPath(node.data)"
                      [class.identical-row]="!allPaths[node.data.path]">
                   <i class="fas" [style.margin-left.px]="2 + node.level * 20" [ngClass]="treeControl.isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'"></i>
-                  <span>{{node.data.key | prettifyTitleKeyPipe}}</span>
+                  <span class="title-key" [class.ellipsis]="showEllipsis">{{(RENAME_MAP[node.data.key] || node.data.key) | hideHashTitle}}</span>
+                  <i *ngIf="node.metaData.tooltip" class="al-icon sm al-ico-description node-icon" customClass="hyper-parameters-tooltip" [smTooltip]="node.metaData.tooltip"></i>
                 </div>
               </div>
               <div *ngIf="!node.hasChildren" class="section" (click)="keyClicked(node.data, $event)">
@@ -45,8 +45,12 @@
                   'hide-identical-mode': hideIdenticalFields
                 }">
                   <div>
-                    <!--                    TODO: check if we can remove "node.data.existOnCompared" and show no keys when no values-->
-                    <pre *ngIf="(node.data.value !== undefined) || (node.data.existOnOrigin && node.data.existOnCompared)">{{node.data.key  | hideHash}}{{node.data.value}}</pre>
+                    <pre *ngIf="(node.data.value !== undefined) || (node.data.existOnOrigin && node.data.existOnCompared)"
+                         [class.no-ellipsis]="((node.data.key | hideHash) + node.data.value).length < 51"
+                         [class.with-ellipsis]="showEllipsis"
+                         [style.width.px]="showEllipsis? 410 - node.level * 20 : null"
+                    >{{node.data.key | hideHash}}{{node.data.value}}<i class="al-icon sm al-ico-line-expand extend-toggle" [class.fa-rotate-180]="!showEllipsis" (click)="toggleEllipsis(); $event.stopPropagation()"></i>
+                    </pre>
                   </div>
                 </div>
               </div>
diff --git a/src/app/webapp-common/experiments-compare/containers/experiment-compare-details/experiment-compare-details.component.scss b/src/app/webapp-common/experiments-compare/containers/experiment-compare-details/experiment-compare-details.component.scss
index 77e65f0a..88762594 100644
--- a/src/app/webapp-common/experiments-compare/containers/experiment-compare-details/experiment-compare-details.component.scss
+++ b/src/app/webapp-common/experiments-compare/containers/experiment-compare-details/experiment-compare-details.component.scss
@@ -1,290 +1,41 @@
-@import "../../../shared/ui-components/styles/variables";
+@import "../experiment-compare-base.component";
 
-sm-compare-card-list {
-  display: block;
-  height: 100%;
-
-  pre {
-    line-height: 28px;
-    vertical-align: middle;
-  }
-
-  .node {
-    height: 28px;
-    line-height: 28px;
-    vertical-align: middle;
-    margin-bottom: 1px;
-    margin-top: 1px;
-
-    &.parent {
-      .fas {
-        margin-left: 6px;
-        font-size: 11px;
-        width: 16px;
-        height: 28px;
-        display: inline-flex;
-        line-height: 28px;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-  }
-
-  &.pending {
-    opacity: 0.2;
-  }
-}
-
-.al-header {
-  margin-bottom: 0px;
-
-  &.main-header {
-    text-transform: uppercase;
-  }
-
-  &.sub-header {
-    color: #5a658e;
-    text-transform: capitalize;
-  }
-}
-
-$extra-header-min-height: 50px;
 :host {
-
-  .tree-card-body {
-    height: 100%;
-    padding: 20px 15px 0 0;
-  }
-
   .section {
-    display: inline-block;
-    font-family: monospace;
-    font-size: 13px;
-    //margin-right: 20px;
-    padding-left: 8px;
-    min-width: 100%;
-    overflow: hidden;
-    text-align: left;
-    color: #1a1e2c;
-
-    .virtual-scroll-container {
-      height: 100% !important;
-
-      .content {
-        &.al-empty-collapse {
-          color: #384161c7;
-          pointer-events: none;
-          cursor: default;
-
-          .fas {
-            width: 3px;
-            visibility: hidden;
-          }
-
-          &.hide-field {
-            background-color: #f8f9fa !important;
-
-            &.al-danger {
-              border-left: 1px #ff9898 solid;
-            }
-
-            > * {
-              visibility: hidden;
-            }
-          }
-        }
-      }
-    }
-
     pre {
-      margin-bottom: 0;
-      margin-top: 0;
+      display: inline-block;
+      position: relative;
       overflow: visible;
-      padding-right: 16px;
-      padding-left: 6px;
-    }
 
-    .node-item-container {
-      margin-bottom: 1px;
-      height: 28px;
-
-      .full-width {
-        width: 100%;
+      &.with-ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 370px;
       }
 
-      .height {
-        min-height: 28px;
-        vertical-align: middle;
-        line-height: 28px;
-        white-space: nowrap;
-        position: relative;
-        width: 99%;
-      }
-
-      .inline-block {
-        display: inline-block;
-      }
-
-      &.not-existing-on-compared {
-        background-color: #f8f9fa !important;
-      }
-
-      &.not-existing-on-origin.not-existing-on-compared.equal-row {
-        background-color: #f8f9fa;
-      }
-
-      &.selected-diff {
-        background-color: #f4f7ff;
-        position: relative;
-
-        &:before {
-          content: ' ';
-          background: #4d66ff;
-          display: block;
-          width: 8px;
-          position: absolute;
-          transform: translate(-100%);
-          height: 100%;
-          border-left: 0px solid;
-          border-top-left-radius: 5px;
-          border-bottom-left-radius: 5px;
-          left: 0;
-        }
-      }
-    }
-
-  }
-
-
-  .parent {
-    //height: 36px;
-    .depth-0 {
-      .content {
-        text-transform: uppercase;
-      }
-    }
-
-    .content {
-      font-family: "Heebo", sans-serif;
-      font-weight: 500;
-      color: #384161;
-      white-space: nowrap;
-      cursor: pointer;
-
-      &.al-empty-collapse {
-        cursor: default;
-      }
-
-      &.selected-diff {
-        background-color: #f4f7ff;
-        position: relative;
-
-        &:before {
-          content: ' ';
-          background: #4d66ff;
-          display: block;
-          width: 8px;
-          position: absolute;
-          transform: translate(-100%);
-          height: 100%;
-          border-left: 0px solid;
-          border-top-left-radius: 5px;
-          border-bottom-left-radius: 5px;
-          left: 0;
-        }
-      }
-    }
-  }
-
-  .is-not-origin {
-    .content.selected-diff {
-      &:before {
-        background: #ff9898;
-      }
-    }
-    .node-item-container {
-      &.not-existing-on-origin.diff-row {
-        background-color: transparent;
-      }
-
-      &.diff-row {
-        background-color: #FFDCDC;
-
-        &:hover {
-          background-color: #ffb4b4;
+      &:hover {
+        .extend-toggle {
+          visibility: visible;
         }
       }
 
-      .equal-row {
-        background-color: transparent;
-      }
+      &.no-ellipsis {
 
-      &.not-existing-on-compared.not-existing-on-origin {
-        border: none;
-
-        pre {
+        .extend-toggle {
           visibility: hidden !important;
         }
       }
-
-      &.not-existing-on-compared {
-        position: relative;
-        width: 100%;
-        background-color: #f8f9fa !important;
-        border-left: 1px #ff9898 solid;
-
-        .tab-forward {
-          padding-left: 0;
-        }
-
-        .border-placeholder {
-          background-color: #f8f9fa;
-          position: relative;
-          width: 100%;
-          height: 100%;
-          border-left: 1px #ff9898 solid;
-          padding-left: 0;
-        }
-
-        &.selected-diff {
-          border-left: none;
-        }
-      }
-
-      &.selected-diff {
-        &:before {
-          background: #ff9898;
-        }
-      }
-
     }
 
-    .hide-identical-mode.equal-row {
-      pre {
-        color: #ced1db;
+    .title-key {
+      width: 100%;
+
+      &.ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 339px;
       }
     }
   }
-
-}
-
-.card-extra-header {
-  display: flex;
-  min-height: $extra-header-min-height;
-  align-items: center;
-  width: 100%;
-  justify-content: flex-end;
-}
-
-.action-container {
-  margin-right: 60px;
-}
-
-.action-title {
-  padding-left: 10px;
-}
-
-.compare-header-container {
-  display: block;
-  height: 64px;
 }
diff --git a/src/app/webapp-common/experiments-compare/containers/experiment-compare-details/experiment-compare-details.component.ts b/src/app/webapp-common/experiments-compare/containers/experiment-compare-details/experiment-compare-details.component.ts
index 1626570e..97cf4b36 100644
--- a/src/app/webapp-common/experiments-compare/containers/experiment-compare-details/experiment-compare-details.component.ts
+++ b/src/app/webapp-common/experiments-compare/containers/experiment-compare-details/experiment-compare-details.component.ts
@@ -1,36 +1,14 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} from '@angular/core';
 import {select, Store} from '@ngrx/store';
+import {experimentListUpdated, setExperiments} from '../../actions/experiments-compare-details.actions';
+import {selectExperimentsDetails} from '../../reducers';
+import {filter, tap} from 'rxjs/operators';
+import {ExperimentCompareTree, IExperimentDetail} from '../../../../features/experiments-compare/experiments-compare-models';
+import {convertExperimentsArrays, getAllKeysEmptyObject, isDetailsConverted} from '../../jsonToDiffConvertor';
+import {ExperimentCompareBase} from '../experiment-compare-base';
+import {ActivatedRoute, Router} from '@angular/router';
 import {IExperimentInfoState} from '../../../../features/experiments/reducers/experiment-info.reducer';
-import {selectRouterParams} from '../../../core/reducers/router-reducer';
-import {get, has, isEqual, isEmpty} from 'lodash/fp';
-import * as detailsActions from '../../actions/experiments-compare-details.actions';
-import {Subscription} from 'rxjs';
-import {selectExperimentsDetails, selectHideIdenticalFields, selectRefreshing} from '../../reducers';
-import {filter, map, tap} from 'rxjs/operators';
-import {ActiveLoader, AddMessage, DeactiveLoader} from '../../../core/actions/layout.actions';
-import {CompareCardListComponent} from '../../dumbs/compare-card-list/compare-card-list.component';
-import {
-  ExperimentCompareTree, ExperimentCompareTreeSection, IExperimentDetail
-} from '../../../../features/experiments-compare/experiments-compare-models';
-import {ExperimentCompareDetailsBase} from '../../../../features/experiments-compare/experiments-compare-details.base';
-import {FlatTreeControl} from '@angular/cdk/tree';
-import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
-import {refetchExperimentRequested} from '../../actions/compare-header.actions';
-import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
-import {TreeNode, TreeNodeMetadata} from '../../shared/experiments-compare-details.model';
-import {treeBuilderService} from '../../services/tree-builder.service';
-import {convertExperimentsArrays, createDiffObjectDetails, getAllKeysEmptyObject} from '../../jsonToDiffConvertor';
-
-export type nextDiffDirectionEnum = 'down' | 'up';
-
-export interface FlatNode {
-  data: any;
-  metaData: TreeNodeMetadata;
-  level: number;
-  parent: TreeNode<any>;
-  hasChildren: boolean;
-}
+import {ConfigurationItem} from '../../../../business-logic/model/tasks/configurationItem';
 
 @Component({
   selector: 'sm-experiment-compare-details',
@@ -38,332 +16,41 @@ export interface FlatNode {
   styleUrls: ['./experiment-compare-details.component.scss', '../../cdk-drag.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ExperimentCompareDetailsComponent extends ExperimentCompareDetailsBase implements OnInit, OnDestroy {
+export class ExperimentCompareDetailsComponent extends ExperimentCompareBase implements OnInit {
+  public showEllipsis: boolean = true;
 
-
-  private paramsSubscription: Subscription;
-  private experimentsSubscription: Subscription;
-  private hideIdenticalFieldsSub: Subscription;
-  private refreshingSubscription: Subscription;
-  // private searchStringSub: Subscription;
-
-  public tree: ExperimentCompareTree = {};
-  public experiments: Array<IExperimentDetail>;
-  private allPathsDiffs: any = {};
-  public selectedPath: string = null;
-  private selectedPathIndex: number = -1;
-  private onlyDiffsPaths: string[];
-  private taskIds: string;
-  public allPaths: any = {};
-  public calculatingTree: boolean;
-  public hideIdenticalFields = false;
-  public experimentsDataControl: { [key: string]: [MatTreeFlatDataSource<TreeNode<any>, FlatNode>, FlatTreeControl<FlatNode>] } = {};
-  public compareTabPage: string;
-  public foundPaths: string[] = [];
-  public foundIndex: number = 0;
-  public searchText = '';
-  private experimentsDataSources: { [id: string]: { all: any; onlyDiffs: any } } = {};
-  private previousOpenPaths: string[] = [];
-  private scrollSubscription: Subscription[];
-  private timeoutIndex: NodeJS.Timeout;
-  private originalScrolledElement: EventTarget;
-  public experimentTags: {[experimentId: string]: string[]} = {};
-
-  get baseExperiment(): IExperimentDetail {
-    return get('[0]', this.experiments);
+  constructor(public router: Router,
+              public store: Store<IExperimentInfoState>,
+              public changeDetection: ChangeDetectorRef,
+              public activeRoute: ActivatedRoute) {
+    super(router, store, changeDetection, activeRoute);
   }
 
-  @ViewChild('cardList', {static: true}) cardList: CompareCardListComponent;
-  @ViewChildren('virtualScrollRef') virtualScrollRef: QueryList<CdkVirtualScrollViewport>;
-
-  constructor(private router: Router,
-              private store: Store<IExperimentInfoState>,
-              private changeDetection: ChangeDetectorRef,
-              private activeRoute: ActivatedRoute) {
-    super();
-  }
+  experiments$ = this.store.pipe(select(selectExperimentsDetails));
 
   ngOnInit() {
-    this.hideIdenticalFieldsSub = this.store.select(selectHideIdenticalFields).subscribe(hide => {
-      this.hideIdenticalFields = hide;
+    this.onInit();
 
-      Object.keys(this.experimentsDataControl).forEach(id => {
-        const [dataSource, treeControl] = this.experimentsDataControl[id];
-        const expandedPaths = treeControl.expansionModel.selected.map(node => node.data.path);
-        dataSource.data = this.experimentsDataSources[id][this.hideIdenticalFields ? 'onlyDiffs' : 'all'];
-        const expandedDataNodes = treeControl.dataNodes.filter(node => node.hasChildren).filter(node => expandedPaths.includes(node.data.path));
-        treeControl.expansionModel.select(...expandedDataNodes);
-      });
-      this.find(this.searchText);
-    });
+    this.routerParamsSubscription = this.taskIds$.subscribe((experimentIds: string) => this.store.dispatch(experimentListUpdated({ids: experimentIds.split(',')})));
 
-    this.compareTabPage = get('snapshot.routeConfig.data.mode', this.activeRoute);
-
-    this.paramsSubscription = this.store.pipe(
-      select(selectRouterParams),
-      map(params => get('ids', params)),
-      tap(taskIds => this.taskIds = taskIds),
-      filter(taskIds => !!taskIds && taskIds !== this.getExperimentIdsParams(this.experiments))
-    )
-      .subscribe((experimentIds: string) => {
-        this.store.dispatch(new detailsActions.ExperimentListUpdated(experimentIds.split(',')));
-      });
-
-    this.experimentsSubscription = this.store.pipe(select(selectExperimentsDetails))
-      .pipe(
-        filter(experiments => !!experiments && experiments.length > 0),
-        tap(experiments => this.syncUrl(experiments, this.taskIds))
-      )
-      .subscribe(experiments => {
-        experiments = experiments.map(({tags, ...experiment}) => {
-          if (tags?.length || !this.experimentTags[experiment.id]?.length) {
-            this.experimentTags[experiment.id] = tags;
-          }
-          return experiment;
-        });
-        experiments = experiments.map(experiment => convertExperimentsArrays(experiment, experiments[0], experiments));
-        this.allPathsDiffs = {};
-        this.onlyDiffsPaths = [];
-        this.experiments = experiments;
-        this.allPaths = [];
-        this.previousOpenPaths = [];
-        this.calculateTree(experiments);
-        // this.refreshDisabled = false;
-      });
-
-    this.refreshingSubscription = this.store.pipe(select(selectRefreshing)).pipe(filter(({refreshing}) => refreshing)).subscribe(({autoRefresh}) =>
-      this.store.dispatch(refetchExperimentRequested({autoRefresh})));
-  }
-
-  ngOnDestroy(): void {
-    this.store.dispatch(new detailsActions.ResetState());
-    this.paramsSubscription.unsubscribe();
-    this.experimentsSubscription.unsubscribe();
-    this.hideIdenticalFieldsSub.unsubscribe();
-    this.refreshingSubscription.unsubscribe();
-  }
-
-  toggleNode(node) {
-    Object.keys(this.experimentsDataControl).forEach(id => {
-      const [dataSource, treeControl] = this.experimentsDataControl[id];
-      const n = treeControl.dataNodes.filter(n => n.hasChildren).find(n => n.data.path === node.data.path);
-      treeControl.toggle(n);
+    this.experimentsSubscription = this.experiments$.pipe(
+      filter(experiments => !!experiments && experiments.length > 0),
+      tap(experiments => {
+        this.syncUrl(experiments);
+        this.extractTags(experiments);
+      }),
+    ).subscribe(experiments => {
+      this.originalExperiments = experiments.reduce((acc, exp) => {
+        acc[exp.id] = isDetailsConverted(exp) ? this.originalExperiments[exp.id] : exp;
+        return acc;
+      }, {} as { [id: string]: ConfigurationItem });
+      experiments = Object.values(this.originalExperiments).map(experiment => convertExperimentsArrays(experiment, this.originalExperiments[experiments[0].id], experiments));
+      this.resetComponentState(experiments);
+      this.calculateTree(experiments);
     });
   }
 
-  calculateTree(experiments) {
-    this.calculatingTree = true;
-    this.store.dispatch(new ActiveLoader('CALCULATING_DIFF_TREE'));
-    this.changeDetection.detectChanges();
-
-    setTimeout(() => {
-      const experimentTrees = this.compareTabPage === 'details' ? this.buildDetailsTree(experiments) : this.buildHyperParamsTree(experiments);
-      this.tree = experimentTrees;
-      this.ClearRemovedExperiment(experiments);
-
-      const treeFlattener = new MatTreeFlattener<TreeNode<any>, FlatNode>(
-        this.nodeTransformer,
-        this.getNodeLevel,
-        this.getIsNodeExpandable,
-        this.getNodeChildren
-      );
-      const expandedsPaths = this.getExpandedPath(experimentTrees);
-
-      Object.keys(experimentTrees).forEach(experimentID => {
-        const sectionTree = experimentTrees[experimentID];
-        let root = Object.keys(sectionTree).map((section: string) => sectionTree[section].children[0]);
-        if (this.compareTabPage === 'hyper-params') {
-          root = root[0].children;
-        }
-        const rootOnlyDiffs = this.filterTreeDiffs(root);
-        const treeControl: FlatTreeControl<FlatNode> = new FlatTreeControl<FlatNode>(this.getNodeLevel, this.getIsNodeExpandable);
-        const dataSource: MatTreeFlatDataSource<TreeNode<any>, FlatNode> = new MatTreeFlatDataSource(treeControl, treeFlattener);
-
-        this.experimentsDataControl[experimentID] = [dataSource, treeControl];
-        this.experimentsDataSources[experimentID] = {all: root, onlyDiffs: rootOnlyDiffs};
-        dataSource.data = this.experimentsDataSources[experimentID][this.hideIdenticalFields ? 'onlyDiffs' : 'all'];
-        this.setExpandedPaths(expandedsPaths, treeControl);
-        this.selectedPath && window.setTimeout(() => this.exapndAndScrollToPath());
-      });
-      this.calculatingTree = false;
-      this.store.dispatch(new DeactiveLoader('CALCULATING_DIFF_TREE'));
-      if (!this.changeDetection['destroyed']) {
-        this.changeDetection.detectChanges();
-      }
-      this.onlyDiffsPaths = Object.keys(this.allPathsDiffs).filter(key => !!this.allPathsDiffs[key]);
-      this.syncScrollSubscription();
-      if (this.searchText) {
-        this.findAllOccurrences(this.searchText);
-        if (this.foundIndex >= this.foundPaths.length) {
-          this.foundIndex = this.foundPaths.length;
-          this.findPrev();
-        }
-        if (this.foundPaths.length > 0 && this.foundIndex === -1) {
-          this.findNext();
-        }
-        this.changeDetection.detectChanges();
-      }
-    }, 0);
-  }
-
-  private ClearRemovedExperiment(experiments) {
-    const expIds = experiments.map(exp => exp.id);
-    Object.keys(this.experimentsDataControl).forEach(expId => {
-      if (!expIds.includes(expId)) {
-        delete this.experimentsDataControl[expId];
-        delete this.experimentsDataSources[expId];
-      }
-    });
-  }
-
-  private getExpandedPath(experimentTrees: ExperimentCompareTree) {
-    let expandedsPaths = [];
-    Object.keys(experimentTrees).some(experimentID => {
-      if (this.experimentsDataControl[experimentID]) {
-        expandedsPaths = this.experimentsDataControl[experimentID][1].expansionModel.selected.map(node => node.data.path);
-        return expandedsPaths.length > 0;
-      }
-    });
-    return expandedsPaths;
-  }
-
-  private setExpandedPaths(expandedsPaths: any[], treeControl: FlatTreeControl<FlatNode>) {
-    if (expandedsPaths.length > 0) {
-      const expandedDatanodes = treeControl.dataNodes.filter(node => node.hasChildren).filter(node => expandedsPaths.includes(node.data.path));
-      treeControl.expansionModel.select(...expandedDatanodes);
-    }
-    if (this.compareTabPage !== 'details') {
-      treeControl.expand(treeControl.dataNodes[0]);
-    }
-  }
-
-  private syncScrollSubscription() {
-    this.scrollSubscription && this.scrollSubscription.forEach(sub => sub.unsubscribe());
-    this.scrollSubscription = this.virtualScrollRef.map(kk => kk.elementScrolled().subscribe((event: Event) => {
-        const target = event.target as HTMLElement;
-        if (!this.originalScrolledElement) {
-          this.originalScrolledElement = target;
-        }
-        if (this.originalScrolledElement !== target) {
-          return;
-        }
-
-        clearTimeout(this.timeoutIndex);
-        this.timeoutIndex = setTimeout(() => this.originalScrolledElement = null, 500);
-        this.virtualScrollRef.forEach(k => {
-          if (k.elementRef.nativeElement !== kk.elementRef.nativeElement) {
-            k.elementRef.nativeElement.scrollTo({top: target.scrollTop, left: target.scrollLeft});
-          }
-        });
-      })
-    );
-  }
-
-  goToNextDiff(direction: nextDiffDirectionEnum) {
-    if (direction === 'down') {
-      this.selectedPathIndex = this.onlyDiffsPaths.length - 1 > this.selectedPathIndex ? this.selectedPathIndex + 1 : 0;
-    } else if (this.selectedPathIndex > 0) {
-      this.selectedPathIndex -= 1;
-    } else {
-      this.selectedPathIndex = this.onlyDiffsPaths.length - 1;
-    }
-    this.selectedPath = this.onlyDiffsPaths[this.selectedPathIndex];
-    this.exapndAndScrollToPath();
-  }
-
-  private exapndAndScrollToPath() {
-    const openPaths = [];
-    let pathPartial = '';
-    const selectedPath = this.selectedPath ? this.selectedPath.split(',') : [];
-    selectedPath.forEach((pathPart, index) => {
-      if (index === 0) {
-        pathPartial = pathPart;
-      } else {
-        pathPartial = pathPartial + ',' + pathPart;
-      }
-      openPaths.push(pathPartial);
-    });
-    let nodeGotExpanded = false;
-    if (!isEqual(openPaths.slice(0, openPaths.length - 1), this.previousOpenPaths)) {
-      Object.keys(this.experimentsDataControl).forEach(id => {
-        const [dataSource, treeControl] = this.experimentsDataControl[id];
-        const nodesToOpen = treeControl.dataNodes.filter(node => node.hasChildren).filter(n => {
-          const currentPath = n.data.path;
-          return !treeControl.isExpanded(n) && openPaths.includes(currentPath);
-        });
-        if (nodesToOpen.length > 0) {
-          treeControl.expansionModel.select(...nodesToOpen);
-          nodeGotExpanded = true;
-        }
-      });
-    }
-    this.previousOpenPaths = openPaths.slice(0, openPaths.length - 1);
-    const [dataSource, treeControl] = Object.values(this.experimentsDataControl)[0];
-    const selectedNodeIndex = this.findRealIndex(dataSource);
-    const scrollToInPixels = (selectedNodeIndex + 1) * 28 - this.virtualScrollRef.first.getViewportSize() / 2;
-    if (nodeGotExpanded) {
-      // Hack to make multiple scroll work with cdk. Don't change
-      window.setTimeout(() => this.virtualScrollRef.forEach(vs => vs.elementRef.nativeElement.scrollTo({top: scrollToInPixels})), 200);
-      window.setTimeout(() => this.virtualScrollRef.forEach(vs => vs.elementRef.nativeElement.scrollTo({top: scrollToInPixels})), 300);
-    } else {
-      this.virtualScrollRef.forEach(vs => vs.elementRef.nativeElement.scrollTo({top: scrollToInPixels}));
-      window.setTimeout(() => this.virtualScrollRef.forEach(vs => vs.elementRef.nativeElement.scrollTo({top: scrollToInPixels})), 0);
-      // window.setTimeout(() => this.virtualScrollRef.forEach(vs => vs.elementRef.nativeElement.scrollTo({top: scrollToInPixels})), 100);
-    }
-  }
-
-  public find(text: string) {
-    if (text) {
-      this.findAllOccurrences(text);
-      this.foundIndex = -1;
-      this.findNext();
-    } else if (this.searchText !== text) {
-      this.foundPaths = [];
-      this.selectedPath = null;
-    }
-    this.searchText = text;
-  }
-
-  private findAllOccurrences(text) {
-    text = text.toLowerCase();
-    const foundPathsPerExpTemp = Object.values(this.experimentsDataControl).map(exp => exp[1].dataNodes
-      .map((node, index) => {
-        if (node.hasChildren) {
-          if (node.data.key.includes(text)) {
-            return {path: node.data.path, index};
-          }
-        } else if (node.data.key.replace(/(a_){0,1}hash_/, '').includes(text) || (node.data.value !== undefined && JSON.stringify(node.data.value).toLowerCase().includes(text))) {
-          return {path: node.data.path, index};
-        }
-      })
-      .filter(i => i)
-    );
-
-    const foundPathsPerExp = (foundPathsPerExpTemp as any).flat()
-      .sort((a, b) => (a.index > b.index) ? 1 : -1)
-      .map(found => found.path);
-    this.foundPaths = Array.from(new Set((foundPathsPerExp)));
-  }
-
-  public findNext() {
-    if (this.foundPaths.length === 0) {
-      return;
-    }
-    this.foundIndex = this.foundIndex === (this.foundPaths.length - 1) ? 0 : this.foundIndex + 1;
-    this.selectedPath = this.foundPaths[this.foundIndex];
-    this.exapndAndScrollToPath();
-  }
-
-  public findPrev() {
-    if (this.foundPaths.length === 0) {
-      return;
-    }
-    this.foundIndex = this.foundIndex === 0 ? this.foundPaths.length - 1 : this.foundIndex - 1;
-    this.selectedPath = this.foundPaths[this.foundIndex];
-    this.exapndAndScrollToPath();
-  }
-
-  buildDetailsTree(experiments: Array<IExperimentDetail>): ExperimentCompareTree {
+  buildCompareTree(experiments: Array<IExperimentDetail>): ExperimentCompareTree {
     const mergedExperiment = getAllKeysEmptyObject(experiments);
     return experiments
       .reduce((acc, cur) => {
@@ -373,158 +60,11 @@ export class ExperimentCompareDetailsComponent extends ExperimentCompareDetailsB
       }, {} as ExperimentCompareTree);
   }
 
-  buildHyperParamsTree(experiments: Array<IExperimentDetail>): ExperimentCompareTree {
-    const mergedExperiment = getAllKeysEmptyObject(experiments);
-    return experiments
-      .reduce((acc, cur) => {
-        acc[cur.id] = {
-          'hyper-params': this.buildSectionTree(cur, 'parameters', mergedExperiment)
-        };
-
-        return acc;
-      }, {} as ExperimentCompareTree);
-  }
-
-  buildSectionTree(experiment, section, mergedExperiment): ExperimentCompareTreeSection {
-    return treeBuilderService.buildTreeFromJson(
-      {[section]: mergedExperiment[section]},
-      this.dataTransformer,
-      this.metaDataTransformer,
-      {experiment: experiment}
-    );
-  }
-
-  dataTransformer = (data, key, path, extraParams: { experiment; section: string }) => {
-    // TODO: get the origin experiment from the state (selectedExperiment).
-    const originExperiment: any = this.baseExperiment;
-    const fullPath = path.concat([key]);
-    const diffObject = createDiffObjectDetails(originExperiment, extraParams.experiment, fullPath, key);
-    return {...diffObject, key, path: fullPath.join(',')};
-  };
-
-  metaDataTransformer = (data, key, path, extraParams): TreeNodeMetadata => {
-    // TODO: get the origin experiment from the state (selectedExperiment).
-    const fullPath = path.concat([key]);
-    const originExperiment: any = this.baseExperiment;
-    const originObject = get(fullPath, originExperiment);
-    const comparedObject = get(fullPath, extraParams.experiment);
-    const keyExists = has(fullPath, extraParams.experiment);
-    const isEquals = (originObject === comparedObject) || isEqual(originObject, comparedObject);
-    const isPrimitive = this.isPrimitive(originObject) || originObject === undefined || originObject === null;
-    const isEmptyObject = isEmpty(comparedObject) || Object.values(comparedObject).every(val => val === undefined);
-
-    this.allPaths[fullPath] = this.allPaths[fullPath] || !isEquals;
-    if (isPrimitive) {
-      this.setPathDif(fullPath, isEquals, (originObject === undefined && comparedObject === undefined));
-    }
-    if (originObject === undefined && comparedObject && !this.isPrimitive(comparedObject)) {
-      delete this.allPathsDiffs[fullPath];
-    }
-    return {
-      classStyle: (isEquals ? '' : 'al-danger ') + (isEmptyObject ? 'al-empty-collapse ' : '') + (keyExists ? '' : 'hide-field'),
-    };
-  };
-
-  isPrimitive(obj) {
-    return (typeof obj === 'string' || typeof obj === 'boolean' || typeof obj === 'number');
-  }
-
-  private setPathDif(fullPath, isEquals, undefinedOriginFirstRun) {
-    if (!this.allPathsDiffs[fullPath]) {
-      this.allPathsDiffs[fullPath] = !isEquals;
-    }
-    if (undefinedOriginFirstRun && this.allPathsDiffs[fullPath] === undefined) {
-      this.allPathsDiffs[fullPath] = false;
-    }
-  }
-
   experimentListChanged(experiments: Array<IExperimentDetail>) {
-    this.store.dispatch(new detailsActions.SetExperiments(experiments));
+    this.store.dispatch(setExperiments({experiments}));
   }
 
-  private syncUrl(experiments: Array<IExperimentDetail>, urlParams: string) {
-    const newParams = this.getExperimentIdsParams(experiments);
-    if (newParams !== urlParams) {
-      this.router.navigateByUrl(this.router.url.replace(urlParams, newParams));
-    }
-  }
-
-  private getExperimentIdsParams(experiments: Array<IExperimentDetail>): string {
-    return experiments ? experiments.map(e => e.id).toString() : '';
-  }
-
-  selectedPathClicked(path) {
-    if (this.onlyDiffsPaths.includes(path)) {
-      this.selectedPath = path;
-      this.selectedPathIndex = this.onlyDiffsPaths.indexOf(this.selectedPath);
-    }
-  }
-
-  keyClicked(data, event: MouseEvent) {
-    const path = data.path;
-    this.selectedPathClicked(path);
-  }
-
-  checkIfSelectedPath = (data: any) => this.selectedPath === (data.path);
-
-  // checkIfFoundPathPath = (data: any) => this.foundPath === (data.path);
-
-  checkIfIdenticalRow(data: any) {
-    if (this.hideIdenticalFields && this.allPaths) {
-      const currentPath = data.path;
-      return !this.allPaths[currentPath];
-    } else {
-      return false;
-    }
-  }
-
-  private filterTreeDiffs(node: any) {
-    if (node.data && this.allPaths[node.data.path] === false) {
-      return false;
-    }
-    if (Array.isArray(node)) {
-      return node.map(item => this.filterTreeDiffs(item)).filter(item => !!item);
-    }
-    if (node.children) {
-      return {...node, children: this.filterTreeDiffs(node.children)};
-    }
-    if (node.data) {
-      return {...node, data: this.filterTreeDiffs(node.data)};
-    }
-    return node;
-  }
-
-  private findRealIndex(ds: MatTreeFlatDataSource<TreeNode<any>, FlatNode>) {
-    return ds._expandedData.value.findIndex(node => node.data?.path === this.selectedPath);
-  }
-
-  copyIdToClipboard() {
-    this.store.dispatch(new AddMessage('success', 'Copied to clipboard'));
-  }
-
-  // Function that maps a nested node to a flat node
-  private nodeTransformer(node: TreeNode<any>, level: number) {
-    return {
-      data: node.data,
-      metaData: node.metaData,
-      level,
-      parent: node.parent,
-      hasChildren: !!node.children,
-    };
-  }
-
-// Function that gets a flat node's level
-  private getNodeLevel({level}: FlatNode) {
-    return level;
-  }
-
-// Function that determines whether a flat node is expandable or not
-  private getIsNodeExpandable({hasChildren}: FlatNode) {
-    return hasChildren;
-  }
-
-// Function that returns a nested node's list of children
-  private getNodeChildren(node: TreeNode<any>) {
-    return node.children;
+  toggleEllipsis() {
+    this.showEllipsis = !this.showEllipsis;
   }
 }
diff --git a/src/app/webapp-common/experiments-compare/containers/experiment-compare-hyper-params-graph/experiment-compare-hyper-params-graph.component.html b/src/app/webapp-common/experiments-compare/containers/experiment-compare-hyper-params-graph/experiment-compare-hyper-params-graph.component.html
index 8fb91f53..b58b6041 100644
--- a/src/app/webapp-common/experiments-compare/containers/experiment-compare-hyper-params-graph/experiment-compare-hyper-params-graph.component.html
+++ b/src/app/webapp-common/experiments-compare/containers/experiment-compare-hyper-params-graph/experiment-compare-hyper-params-graph.component.html
@@ -50,7 +50,7 @@
   <hr class="separate-margins">
 
   <!--#######  Hyper Params Checked List  ######-->
-  <sm-checked-filter-list
+  <sm-grouped-checked-filter-list
     titleText="Parameters"
     [itemsList]="hyperParams"
     [selectedItemsList]="selectedHyperParams"
@@ -63,7 +63,7 @@
       (change)="showIdenticalParamsToggled()"
       [checked]="!showIdenticalParamsActive">Hide identical fields
     </mat-slide-toggle>
-  </sm-checked-filter-list>
+  </sm-grouped-checked-filter-list>
 
 </div>
 <div class="graphs-container h-100">
diff --git a/src/app/webapp-common/experiments-compare/containers/experiment-compare-hyper-params-graph/experiment-compare-hyper-params-graph.component.scss b/src/app/webapp-common/experiments-compare/containers/experiment-compare-hyper-params-graph/experiment-compare-hyper-params-graph.component.scss
index 8c6745db..b9ffba33 100644
--- a/src/app/webapp-common/experiments-compare/containers/experiment-compare-hyper-params-graph/experiment-compare-hyper-params-graph.component.scss
+++ b/src/app/webapp-common/experiments-compare/containers/experiment-compare-hyper-params-graph/experiment-compare-hyper-params-graph.component.scss
@@ -16,19 +16,6 @@
     }
   }
 
-  /deep/ sm-checked-filter-list {
-
-    .title {
-      font-size: 16px;
-      font-weight: 500;
-    }
-
-    .purple-v {
-      width: 20px !important;
-      height: 20px !important;
-    }
-  }
-
   /deep/ .mat-expansion-panel-body {
     padding: 0;
   }
@@ -91,12 +78,6 @@
   }
 }
 
-sm-checked-filter-list {
-  flex: 1;
-  overflow: auto;
-  margin: 0 12px 0 32px;
-}
-
 .separate-margins {
   margin: 24px 0 20px 0;
 }
@@ -121,9 +102,6 @@ sm-checked-filter-list {
   &__header {
     padding: 0 2px 0 0;
 
-    &:hover {
-      background: rgba(0, 0, 0, 0) !important;
-    }
   }
 
   &__title {
@@ -155,7 +133,7 @@ sm-checked-filter-list {
     }
 
     &:hover {
-      background: $very-light-blue;
+      background: $blue-50;
     }
 
   }
@@ -191,3 +169,7 @@ sm-checked-filter-list {
   width: 300px;
   height: 300px;
 }
+
+sm-grouped-checked-filter-list {
+  margin: 0 12px 0 32px;
+}
diff --git a/src/app/webapp-common/experiments-compare/containers/experiment-compare-hyper-params-graph/experiment-compare-hyper-params-graph.component.ts b/src/app/webapp-common/experiments-compare/containers/experiment-compare-hyper-params-graph/experiment-compare-hyper-params-graph.component.ts
index 6fdedcdf..203c2847 100644
--- a/src/app/webapp-common/experiments-compare/containers/experiment-compare-hyper-params-graph/experiment-compare-hyper-params-graph.component.ts
+++ b/src/app/webapp-common/experiments-compare/containers/experiment-compare-hyper-params-graph/experiment-compare-hyper-params-graph.component.ts
@@ -5,11 +5,11 @@ import {select, Store} from '@ngrx/store';
 import {IExperimentInfoState} from '../../../../features/experiments/reducers/experiment-info.reducer';
 import {distinctUntilChanged, distinctUntilKeyChanged, filter, map} from 'rxjs/operators';
 import {selectRouterParams} from '../../../core/reducers/router-reducer';
-import {get} from 'lodash/fp';
+import {get, has} from 'lodash/fp';
 import {SetExperimentSettings, SetSelectedExperiments} from '../../actions/experiments-compare-charts.actions';
 import {selectRefreshing, selectScalarsGraphHyperParams, selectScalarsGraphMetrics, selectScalarsGraphShowIdenticalHyperParams, selectScalarsGraphTasks, selectMetricValueType, selectSelectedSettigsHyperParams, selectSelectedSettigsMetric} from '../../reducers';
 import {getExperimentsHyperParams, setShowIdenticalHyperParams, setvalueType} from '../../actions/experiments-compare-scalars-graph.actions';
-import {HyperParams, MetricOption, MetricValueType, SelectedMetric, VariantOption} from '../../reducers/experiments-compare-charts.reducer';
+import {GroupedHyperParams, HyperParams, MetricOption, MetricValueType, SelectedMetric, VariantOption} from '../../reducers/experiments-compare-charts.reducer';
 import {MatRadioChange} from '@angular/material/radio';
 
 
@@ -32,7 +32,7 @@ export class ExperimentCompareHyperParamsGraphComponent implements OnInit, OnDes
   private refreshingSubscription: Subscription;
 
   public selectShowIdenticalHyperParams$: Observable<boolean>;
-  public hyperParams$: Observable<HyperParams>;
+  public hyperParams$: Observable<GroupedHyperParams>;
   public metrics$: Observable<MetricOption[]>;
   public selectedHyperParams$: Observable<string[]>;
   private selectedMetric$: Observable<SelectedMetric>;
@@ -42,7 +42,7 @@ export class ExperimentCompareHyperParamsGraphComponent implements OnInit, OnDes
   public graphs: { [key: string]: ExperimentGraph };
   public selectedHyperParams: string[];
   public selectedMetric: SelectedMetric;
-  public hyperParams: string[];
+  public hyperParams: { [section: string]: string[] };
   public showIdenticalParamsActive: boolean;
 
   public metrics: MetricOption[];
@@ -76,7 +76,7 @@ export class ExperimentCompareHyperParamsGraphComponent implements OnInit, OnDes
   ngOnInit() {
     this.selectMetricSubscription = this.selectedMetric$.pipe(
       distinctUntilChanged((x, y) => x?.path === y?.path)
-    ).subscribe((selectedMetric: SelectedMetric) => this.selectedMetric = {...selectedMetric});
+    ).subscribe((selectedMetric: SelectedMetric) => this.selectedMetric = selectedMetric?.name? {...selectedMetric} : null);
 
     this.metricSubscription = this.metrics$.pipe(filter(metrics => !!metrics)).subscribe(metrics => {
       this.metrics = metrics;
@@ -93,8 +93,19 @@ export class ExperimentCompareHyperParamsGraphComponent implements OnInit, OnDes
       )
       .subscribe(([selectedParams, allParams, showIdentical]) => {
         this.showIdenticalParamsActive = showIdentical;
-        this.hyperParams = Object.entries(allParams).filter(([param, hasDiff]) => showIdentical || hasDiff).map(([param, hasDiff]) => param).sort((a, b) => a.toLowerCase() > b.toLowerCase() ? 1 : -1);
-        this.selectedHyperParams = selectedParams.filter(selectedParam => this.hyperParams.includes(selectedParam));
+        this.hyperParams = Object.entries(allParams).reduce((acc, [sectionKey, params]) => {
+          const section = Object.keys(params).sort((a, b) => a.toLowerCase() > b.toLowerCase() ? 1 : -1).reduce((acc2, paramKey) => {
+            if (showIdentical || params[paramKey]) {
+              acc2[paramKey] = true;
+            }
+            return acc2;
+          }, {});
+          if (Object.keys(section).length > 0) {
+            acc[sectionKey] = section;
+          }
+          return acc;
+        }, {});
+        this.selectedHyperParams = selectedParams.filter(selectedParam => has(selectedParam, this.hyperParams));
       });
 
     this.routerParamsSubscription = this.store.pipe(
@@ -179,11 +190,11 @@ export class ExperimentCompareHyperParamsGraphComponent implements OnInit, OnDes
     this.listOpen = true;
   }
 
-  trackMetricByFn(item: MetricOption): string {
+  trackMetricByFn(index: number, item: MetricOption): string {
     return item.metricName;
   }
 
-  trackVariantByFn(item: VariantOption['value']): string {
+  trackVariantByFn(index: number, item: VariantOption['value']): string {
     return item.path;
   }
 
diff --git a/src/app/webapp-common/experiments-compare/containers/experiment-compare-metric-charts/experiment-compare-scalar-charts.component.ts b/src/app/webapp-common/experiments-compare/containers/experiment-compare-metric-charts/experiment-compare-scalar-charts.component.ts
index bef2f5f3..f0f9e65e 100644
--- a/src/app/webapp-common/experiments-compare/containers/experiment-compare-metric-charts/experiment-compare-scalar-charts.component.ts
+++ b/src/app/webapp-common/experiments-compare/containers/experiment-compare-metric-charts/experiment-compare-scalar-charts.component.ts
@@ -69,7 +69,9 @@ export class ExperimentCompareScalarChartsComponent implements OnInit, OnDestroy
       distinctUntilChanged(),
       tap(() => this.refreshDisabled = true)
     );
-    this.xAxisSub = this.xAxisType$.pipe(filter((axis) => !!axis)).subscribe((axis) => this.store.dispatch(new GetMultiScalarCharts({taskIds: this.taskIds})));
+    this.xAxisSub = this.xAxisType$
+      .pipe(filter((axis) => !!axis))
+      .subscribe((axis) => this.store.dispatch(new GetMultiScalarCharts({taskIds: this.taskIds, cached: true})));
   }
 
   ngOnInit() {
diff --git a/src/app/webapp-common/experiments-compare/containers/experiment-compare-metric-values/experiment-compare-metric-values.component.scss b/src/app/webapp-common/experiments-compare/containers/experiment-compare-metric-values/experiment-compare-metric-values.component.scss
index 620d911d..a5d0fc49 100644
--- a/src/app/webapp-common/experiments-compare/containers/experiment-compare-metric-values/experiment-compare-metric-values.component.scss
+++ b/src/app/webapp-common/experiments-compare/containers/experiment-compare-metric-values/experiment-compare-metric-values.component.scss
@@ -1,3 +1,5 @@
+@import "../../../shared/ui-components/styles/variables";
+
 .no-metric {
   background-color: #f2f3f6;
 }
@@ -14,6 +16,10 @@
 
       .content {
         cursor: pointer;
+        font-size: 13px;
+        font-weight: 500;
+        color: $blue-500;
+
         .fas {
           margin-left: 6px;
           font-size: 11px;
diff --git a/src/app/webapp-common/experiments-compare/containers/experiment-compare-plots/experiment-compare-plots.component.scss b/src/app/webapp-common/experiments-compare/containers/experiment-compare-plots/experiment-compare-plots.component.scss
index da74936d..94941214 100644
--- a/src/app/webapp-common/experiments-compare/containers/experiment-compare-plots/experiment-compare-plots.component.scss
+++ b/src/app/webapp-common/experiments-compare/containers/experiment-compare-plots/experiment-compare-plots.component.scss
@@ -17,7 +17,7 @@
 
   .graphs-container {
     padding: 0 !important;
-    width: calc(100vw - 420px);
+    width: calc(100% - 420px);
   }
 
 }
diff --git a/src/app/webapp-common/experiments-compare/containers/select-experiments-for-compare/select-experiments-for-compare.component.scss b/src/app/webapp-common/experiments-compare/containers/select-experiments-for-compare/select-experiments-for-compare.component.scss
index 1bb19dd9..dcbb7452 100644
--- a/src/app/webapp-common/experiments-compare/containers/select-experiments-for-compare/select-experiments-for-compare.component.scss
+++ b/src/app/webapp-common/experiments-compare/containers/select-experiments-for-compare/select-experiments-for-compare.component.scss
@@ -23,7 +23,7 @@
   &.show-table {
     height: auto;
     overflow: initial;
-    max-height: 500px;
+    max-height: 400px;
   }
 }
 
@@ -38,7 +38,7 @@
 :host {
   sm-select-experiments-for-compare-table {
     overflow: auto;
-    height: 500px;
+    max-height: 500px;
   }
 
   /deep/ .form-control.table-container footer.d-flex.justify-content-center {
diff --git a/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-general-data/experiment-compare-general-data.component.html b/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-general-data/experiment-compare-general-data.component.html
index 31557cbb..3721d9dc 100644
--- a/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-general-data/experiment-compare-general-data.component.html
+++ b/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-general-data/experiment-compare-general-data.component.html
@@ -1,5 +1,5 @@
 <header>
-  <div class="project ellipsis">{{experiment.project.name}}</div>
+  <div class="project ellipsis">{{experiment.project?.name}}</div>
   <h3 [smTooltip]="experiment.name" class="experiment-name al-header"><a smEllipsisMiddleDirective [href]="buildUrl()">{{experiment.name}}</a>
   </h3>
   <i class="icon i-id-fix id-icon pointer"
diff --git a/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-general-data/experiment-compare-general-data.component.ts b/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-general-data/experiment-compare-general-data.component.ts
index fdef5b0f..8ed947b4 100644
--- a/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-general-data/experiment-compare-general-data.component.ts
+++ b/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-general-data/experiment-compare-general-data.component.ts
@@ -24,6 +24,6 @@ export class ExperimentCompareGeneralDataComponent {
   }
 
   buildUrl() {
-    return `/projects/${this.experiment.project.id}/experiments/${this.experiment.id}`;
+    return `/projects/${this.experiment.project ? this.experiment.project.id : '*'}/experiments/${this.experiment.id}`;
   }
 }
diff --git a/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-header/experiment-compare-header.component.html b/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-header/experiment-compare-header.component.html
index c05efcfa..f82b7191 100644
--- a/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-header/experiment-compare-header.component.html
+++ b/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-header/experiment-compare-header.component.html
@@ -55,12 +55,12 @@
 
   <div id="searchDiff"></div>
 
-  <div>
+  <div class="settings">
     <button *ngIf="currentPage === 'scalars' && viewMode === 'graph'"
-            class="btn btn-secondary"
+            class="btn"
             smTooltip="Settings"
             (click)="toggleSettings()">
-      <i class="fas fa-cog"></i>
+      <i class="fas fa-cog fa-lg"></i>
     </button>
 <!--    <sm-experiment-refresh-->
 <!--      [disabled]="(selectRefreshing$ | async)?.refreshing"-->
diff --git a/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-header/experiment-compare-header.component.scss b/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-header/experiment-compare-header.component.scss
index 03c7a760..2deb53bf 100644
--- a/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-header/experiment-compare-header.component.scss
+++ b/src/app/webapp-common/experiments-compare/dumbs/experiment-compare-header/experiment-compare-header.component.scss
@@ -23,7 +23,7 @@
     }
 
     .btn-group sm-search {
-      width: 243px;
+      width: 200px;
 
       .search-input-container {
 
@@ -60,7 +60,7 @@
 
     .mat-select-trigger {
       width: 142px;
-      border: 1px solid $cloudy-blue;
+      border: 1px solid $blue-250;
       border-radius: 4px;
       height: 32px;
       padding: 7px 14px;
@@ -95,6 +95,18 @@
     }
   }
 
+  .settings {
+    display: flex;
+    align-items: center;
+
+    .btn {
+      color: $blue-300;
+      width: 40px;
+      height: 40px;
+      font-size: 15px;
+    }
+  }
+
   button {
     font-weight: 500;
     font-size: 13px;
@@ -102,7 +114,7 @@
 
   .btn-add-experiment {
     width: 146px;
-    background-color: $very-light-blue;
+    background-color: $blue-50;
   }
 
 
diff --git a/src/app/webapp-common/experiments-compare/dumbs/parallel-coordinates-graph/parallel-coordinates-graph.component.html b/src/app/webapp-common/experiments-compare/dumbs/parallel-coordinates-graph/parallel-coordinates-graph.component.html
index f5862a45..b2b8a2ad 100644
--- a/src/app/webapp-common/experiments-compare/dumbs/parallel-coordinates-graph/parallel-coordinates-graph.component.html
+++ b/src/app/webapp-common/experiments-compare/dumbs/parallel-coordinates-graph/parallel-coordinates-graph.component.html
@@ -4,19 +4,22 @@
   </div>
   <div class="d-flex legend-container">
     <div *ngFor="let experiment of experiments" class="experiment-name">
-    <span class="dot-container">
-          <span #dot class="dot pallete-cursor"
-                [style.background-color]="experimentsColors[experiment.id]"
-                smChooseColor [colorButtonRef]="dot"
-                [defaultColor]="experimentsColors[experiment.id]"
-                [stringToColor]="experiment.id">
+      <span class="dot-container">
+        <span #dot class="dot pallete-cursor"
+              [style.background-color]="experimentsColors[experiment.id]"
+              smChooseColor [colorButtonRef]="dot"
+              [defaultColor]="experimentsColors[experiment.id]"
+              [stringToColor]="experiment.id">
+        </span>
       </span>
-  </span>
-      <div class="task-name" (click)="((experiments.length> filteredExperiments.length + 1) || experiment.hidden) && toggleHideExperiment(experiment.id)"
-           [ngClass]="{'hide':filteredExperiments.includes(experiment.id),
-           'pointer': (experiments.length> filteredExperiments.length + 1) || experiment.hidden}">
+      <span
+        class="task-name pointer"
+        (click)="toggleHideExperiment(experiment.id)"
+        (mouseover)="highlightExperiment(experiment)"
+        (mouseout)="removeHighlightExperiment()"
+        [class.hide]="experiment.hidden">
         {{experiment.name + (experiment.duplicateName ? ('.' + (experiment.id|slice:0:5)) : '')}}
-      </div>
+      </span>
     </div>
   </div>
 </div>
diff --git a/src/app/webapp-common/experiments-compare/dumbs/parallel-coordinates-graph/parallel-coordinates-graph.component.ts b/src/app/webapp-common/experiments-compare/dumbs/parallel-coordinates-graph/parallel-coordinates-graph.component.ts
index 67030496..40f05d18 100644
--- a/src/app/webapp-common/experiments-compare/dumbs/parallel-coordinates-graph/parallel-coordinates-graph.component.ts
+++ b/src/app/webapp-common/experiments-compare/dumbs/parallel-coordinates-graph/parallel-coordinates-graph.component.ts
@@ -2,10 +2,12 @@ import {ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnInit, R
 import {PlotlyGraphBase} from '../../../shared/experiment-graphs/single-graph/plotly-graph-base';
 import {debounceTime, filter} from 'rxjs/operators';
 import {ColorHashService} from '../../../shared/services/color-hash/color-hash.service';
-import {get, isEqual, max, min, uniq, cloneDeep} from 'lodash/fp';
+import {get, getOr, isEqual, max, min, uniq, cloneDeep} from 'lodash/fp';
 import {MetricValueType, SelectedMetric} from '../../reducers/experiments-compare-charts.reducer';
 import {Task} from '../../../../business-logic/model/tasks/task';
 import {select} from 'd3-selection';
+import {sortCol} from '../../../shared/utils/tableParamEncode';
+import {Store} from '@ngrx/store';
 
 declare let Plotly;
 
@@ -14,6 +16,15 @@ interface ExtraTask extends Task {
   hidden: boolean;
 }
 
+interface ParaPlotData {
+  type: string;
+  dimensions: any[];
+  line: {
+    color: Plotly.Color;
+    colorscale?: Plotly.ColorScale;
+  };
+}
+
 @Component({
   selector: 'sm-parallel-coordinates-graph',
   templateUrl: './parallel-coordinates-graph.component.html',
@@ -21,7 +32,7 @@ interface ExtraTask extends Task {
 })
 export class ParallelCoordinatesGraphComponent extends PlotlyGraphBase implements OnInit {
 
-  private data: { line: { color: Task[]; colorscale: (number | string)[][] }; type: string; dimensions: unknown[] }[];
+  private data: ParaPlotData[];
   private _experiments: ExtraTask[];
   private _metric: SelectedMetric;
   public experimentsColors = {};
@@ -32,6 +43,8 @@ export class ParallelCoordinatesGraphComponent extends PlotlyGraphBase implement
   @ViewChild('parallelGraph', {static: true}) parallelGraph: ElementRef;
   private graphWidth: any;
   private _metricValueType: MetricValueType;
+  private highlighted: ExtraTask;
+  private dimensionsOrder: string[];
 
   @HostListener('window:resize')
   redrawChart() {
@@ -122,10 +135,12 @@ export class ParallelCoordinatesGraphComponent extends PlotlyGraphBase implement
   }
 
   constructor(
-    public renderer: Renderer2,
-    public colorHash: ColorHashService,
-    public changeDetector: ChangeDetectorRef) {
-    super();
+    protected store: Store,
+    protected renderer: Renderer2,
+    protected elementRef: ElementRef,
+    private colorHash: ColorHashService,
+    private changeDetector: ChangeDetectorRef) {
+    super(store, renderer, elementRef);
   }
 
   ngOnInit(): void {
@@ -142,46 +157,50 @@ export class ParallelCoordinatesGraphComponent extends PlotlyGraphBase implement
     this.prepareGraph();
   }
 
-  getStringColor(name): string {
-    const colorArr = this.colorHash.initColor(name);
+  getStringColor(experiment: ExtraTask): string {
+    const colorArr = this.colorHash.initColor(experiment.id);
     return `rgb(${colorArr[0]},${colorArr[1]},${colorArr[2]})`;
   }
 
-  getColorsArray(experiments): Task[] {
-    return experiments.map((experiment, index) => (index === (experiments.length - 1)) ? 1.0 : index / 10);
+  getColorsArray(experiments): number[] {
+    return experiments.map((experiment, index) => index / (experiments.length - 1));
   }
 
   private prepareGraph(): void {
-    this.experiments.forEach(experiment => this.experimentsColors[experiment.id] = this.getStringColor(experiment.id));
-    const filteredExperiments = this.experiments.filter(experiment => !this.filteredExperiments.includes(experiment.id));
+    this.experiments.forEach(experiment => this.experimentsColors[experiment.id] = this.getStringColor(experiment));
+    const filteredExperiments = this.experiments.filter(experiment => !experiment.hidden);
     if (this.parameters && filteredExperiments.length > 0) {
-      const trace: any = {
+      const trace = {
         type: 'parcoords',
         dimensions: this.parameters.map((parameter) => {
-          const dimension: any = {};
-          const allValuesIncludingNull = filteredExperiments.map(experiment => experiment.execution.parameters[parameter]);
+          parameter = `${parameter}.value`;
+          const allValuesIncludingNull = this.experiments.map(experiment => get(parameter, experiment.hyperparams));
           const allValues = allValuesIncludingNull.filter(value => (value !== undefined)).filter(value => (value !== ''));
-          dimension.label = parameter;
           const textVal: any = {};
-          dimension.ticktext = this.naturalCompare(uniq(allValues).filter(text => text !== ''));
-          (allValuesIncludingNull.length > allValues.length) && (dimension.ticktext = ['N/A'].concat(dimension.ticktext));
-          dimension.tickvals = dimension.ticktext.map((text, index) => {
+          let ticktext = this.naturalCompare(uniq(allValues).filter(text => text !== ''));
+          (allValuesIncludingNull.length > allValues.length) && (ticktext = ['N/A'].concat(ticktext));
+          const tickvals = ticktext.map((text, index) => {
             textVal[text] = index;
             return index;
           });
-          dimension.values = filteredExperiments.map((experiment) => (textVal[['', undefined].includes(experiment.execution.parameters[parameter]) ? 'N/A' : experiment.execution.parameters[parameter]]));
-          dimension.range = [0, max(dimension.tickvals)];
-          return dimension;
+          return {
+            label: parameter,
+            ticktext,
+            tickvals,
+            values: filteredExperiments.map((experiment) => (textVal[['', undefined].includes(get(parameter, experiment.hyperparams)) ? 'N/A' : get(parameter, experiment.hyperparams)])),
+            range: [0, max(tickvals)]
+          };
         })
-      };
+      } as ParaPlotData ;
       if (filteredExperiments.length > 1) {
         trace.line = {
           color: this.getColorsArray(filteredExperiments),
-          colorscale: filteredExperiments.map((experiment, index) => [index === filteredExperiments.length - 1 ? 1.0 : index / 10, this.getStringColor(experiment.id)])
+          colorscale: filteredExperiments.map((experiment, index) =>
+            [index / (filteredExperiments.length - 1), this.getStringColor(experiment)] as [number, string]),
         };
       } else {
         trace.line = {
-          color: this.getStringColor(filteredExperiments[0].id)
+          color: this.getStringColor(filteredExperiments[0])
         };
       }
 
@@ -190,18 +209,25 @@ export class ParallelCoordinatesGraphComponent extends PlotlyGraphBase implement
       // this.drawChart();
 
       if (this.metric) {
-        const metricDimension: any = {};
-        const allValuesIncludingNull = filteredExperiments.map(experiment => get(`${this.metric.path}.${this.metricValueType}`, experiment.last_metrics));
+        const allValuesIncludingNull = this.experiments.map(experiment => get(`${this.metric.path}.${this.metricValueType}`, experiment.last_metrics));
         const allValues = allValuesIncludingNull.filter(value => value !== undefined);
         const NAVal = this.getNAValue(allValues);
-        metricDimension.label = this.metric.name;
-        metricDimension.ticktext = uniq(allValuesIncludingNull.map(value => value !== undefined ? value : 'N/A'));
-        metricDimension.tickvals = metricDimension.ticktext.map(text => text === 'N/A' ? NAVal : text);
-        metricDimension.values = filteredExperiments.map((experiment) => get(`${this.metric.path}.${this.metricValueType}`, experiment.last_metrics) === undefined ? NAVal :
-          parseFloat(get(`${this.metric.path}.${this.metricValueType}`, experiment.last_metrics)));
-        trace.dimensions.push(metricDimension);
+        const ticktext = uniq(allValuesIncludingNull.map(value => value !== undefined ? value : 'N/A'));
+        const tickvals = ticktext.map(text => text === 'N/A' ? NAVal : text);
+        trace.dimensions.push({
+          label: this.metric.name,
+          ticktext,
+          tickvals,
+          values: filteredExperiments.map((experiment) =>
+            parseFloat(getOr(NAVal, `${this.metric.path}.${this.metricValueType}`, experiment.last_metrics))
+          ),
+          range: [min(tickvals), max(tickvals)]
+        });
       }
       this.data = [trace];
+      if (this.dimensionsOrder) {
+        this.data[0].dimensions.sort((a, b) => sortCol(a.label, b.label, this.dimensionsOrder));
+      }
       this.drawChart();
     }
   }
@@ -212,7 +238,7 @@ export class ParallelCoordinatesGraphComponent extends PlotlyGraphBase implement
     }
     const valuesMax = max(values);
     const valuesMin = min(values);
-    return valuesMax === valuesMin ? (valuesMin - 1) : valuesMin - ((valuesMax - valuesMin) / 10);
+    return valuesMax === valuesMin ? (valuesMin - 1) : valuesMin - ((valuesMax - valuesMin) / values.length);
   }
 
   private drawChart() {
@@ -261,4 +287,20 @@ export class ParallelCoordinatesGraphComponent extends PlotlyGraphBase implement
     const collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
     return (myArray.sort(collator.compare));
   }
+
+  highlightExperiment(experiment: ExtraTask) {
+    if (this.highlighted?.id != experiment?.id) {
+      this.highlighted = experiment;
+      this.dimensionsOrder = this.parallelGraph.nativeElement.data?.[0].dimensions.map(d => d.label);
+      this._experiments = this.experiments.map(exp => ({...exp, hidden: exp.id !== experiment.id}));
+      this.prepareGraph();
+    }
+  }
+
+  removeHighlightExperiment() {
+    this.highlighted = null;
+    this._experiments = this.experiments.map(experiment => ({...experiment, hidden: this.filteredExperiments.includes(experiment.id)}));
+    this.prepareGraph();
+    this.dimensionsOrder = null;
+  }
 }
diff --git a/src/app/webapp-common/experiments-compare/dumbs/select-experiments-for-compare-table/select-experiments-for-compare-table.component.ts b/src/app/webapp-common/experiments-compare/dumbs/select-experiments-for-compare-table/select-experiments-for-compare-table.component.ts
index 03223175..cdae10f4 100644
--- a/src/app/webapp-common/experiments-compare/dumbs/select-experiments-for-compare-table/select-experiments-for-compare-table.component.ts
+++ b/src/app/webapp-common/experiments-compare/dumbs/select-experiments-for-compare-table/select-experiments-for-compare-table.component.ts
@@ -10,7 +10,7 @@ export const EXPERIMENTS_TABLE_COL_FIELDS = {
   USER    : 'user.name' as ExperimentTableColFieldsEnum,
   TAGS    : 'tags' as ExperimentTableColFieldsEnum,
   STATUS  : 'status' as ExperimentTableColFieldsEnum,
-  PROJECT  : 'project.name' as ExperimentTableColFieldsEnum,
+  PROJECT : 'project.name' as ExperimentTableColFieldsEnum,
 };
 
 export const INITIAL_EXPERIMENT_TABLE_COLS = [
@@ -23,64 +23,72 @@ export const INITIAL_EXPERIMENT_TABLE_COLS = [
     static          : true,
     headerStyleClass: 'selected-col-header',
     style           : {width: '20px'},
+    disableDrag     : true,
   },
   {
-    id            : EXPERIMENTS_TABLE_COL_FIELDS.TYPE,
-    sortable      : false,
-    filterable    : false,
-    static        : true,
-    header        : 'TYPE',
-    style         : {width: '40px'},
+    id         : EXPERIMENTS_TABLE_COL_FIELDS.TYPE,
+    sortable   : false,
+    filterable : false,
+    static     : true,
+    header     : 'TYPE',
+    style      : {width: '40px'},
+    disableDrag: true,
   },
   {
-    id              : EXPERIMENTS_TABLE_COL_FIELDS.ID,
-    sortable        : false,
-    filterable      : false,
-    header          : 'ID',
-    hidden          : true,
-    static          : true,
-    style           : {width: '150px'},
+    id         : EXPERIMENTS_TABLE_COL_FIELDS.ID,
+    sortable   : false,
+    filterable : false,
+    header     : 'ID',
+    hidden     : true,
+    static     : true,
+    style      : {width: '150px'},
+    disableDrag: true,
   },
   {
-    id          : EXPERIMENTS_TABLE_COL_FIELDS.NAME,
-    sortable    : false,
-    static      : true,
-    header      : 'NAME',
-    style       : {width: '170px'},
+    id         : EXPERIMENTS_TABLE_COL_FIELDS.NAME,
+    sortable   : false,
+    static     : true,
+    header     : 'NAME',
+    style      : {width: '170px'},
+    disableDrag: true,
   },
   {
-    id      : EXPERIMENTS_TABLE_COL_FIELDS.USER,
-    sortable: false,
-    static  : true,
-    header  : 'USER',
-    style   : {width: '115px'}
+    id         : EXPERIMENTS_TABLE_COL_FIELDS.USER,
+    sortable   : false,
+    static     : true,
+    header     : 'USER',
+    style      : {width: '115px'},
+    disableDrag: true,
   },
   {
-    id      : EXPERIMENTS_TABLE_COL_FIELDS.TAGS,
-    sortable: false,
-    static  : true,
-    header  : 'TAGS',
-    style   : {width: '110px'}
+    id         : EXPERIMENTS_TABLE_COL_FIELDS.TAGS,
+    sortable   : false,
+    static     : true,
+    header     : 'TAGS',
+    style      : {width: '110px'},
+    disableDrag: true,
   },
   {
-    id          : EXPERIMENTS_TABLE_COL_FIELDS.STATUS,
-    filterable  : false,
-    static      : true,
-    header      : 'STATUS',
-    style       : {width: '80px'},
+    id         : EXPERIMENTS_TABLE_COL_FIELDS.STATUS,
+    filterable : false,
+    static     : true,
+    header     : 'STATUS',
+    style      : {width: '80px'},
+    disableDrag: true,
   },
   {
-    id          : EXPERIMENTS_TABLE_COL_FIELDS.PROJECT,
-    filterable  : false,
-    static      : true,
-    header      : 'PROJECT',
-    style       : {width: '80px'},
+    id         : EXPERIMENTS_TABLE_COL_FIELDS.PROJECT,
+    filterable : false,
+    static     : true,
+    header     : 'PROJECT',
+    style      : {width: '80px'},
+    disableDrag: true,
   }
 ];
 
 export enum ExperimentTagsEnum {
   Development = 'development',
-  Hidden      = 'archived'
+  Hidden = 'archived'
 }
 
 export interface AddExperimentEvent {
@@ -106,11 +114,11 @@ export class SelectExperimentsForCompareTableComponent implements OnInit {
   public typeFiltersValue: any;
   public menuPosition: { x: number; y: number };
   public menuData;
-  public menuOpen: boolean                      = false;
+  public menuOpen: boolean = false;
   @Input() searchTerm;
   @Input() tableCols;
   @Input() experiments: Array<ITableExperiment> = [];
-  @Input() selectedExperiments: Array<any>      = [];
+  @Input() selectedExperiments: Array<any> = [];
   @Output() experimentsSelectionChanged = new EventEmitter<AddExperimentEvent>();
 
 
diff --git a/src/app/webapp-common/experiments-compare/effects/experiments-compare-charts.effects.ts b/src/app/webapp-common/experiments-compare/effects/experiments-compare-charts.effects.ts
index 55fb97aa..e3cf6b1a 100644
--- a/src/app/webapp-common/experiments-compare/effects/experiments-compare-charts.effects.ts
+++ b/src/app/webapp-common/experiments-compare/effects/experiments-compare-charts.effects.ts
@@ -11,7 +11,7 @@ import {ApiAuthService} from '../../../business-logic/api-services/auth.service'
 import {BlTasksService} from '../../../business-logic/services/tasks.service';
 import {ApiEventsService} from '../../../business-logic/api-services/events.service';
 import {RequestFailed} from '../../core/actions/http.actions';
-import {selectCompareSelectedSettingsxAxisType} from '../reducers';
+import {selectCompareHistogramCacheAxisType, selectCompareSelectedSettingsxAxisType} from '../reducers';
 import {setRefreshing} from '../actions/compare-header.actions';
 import {ScalarKeyEnum} from '../../../business-logic/model/events/scalarKeyEnum';
 
@@ -33,39 +33,28 @@ export class ExperimentsCompareChartsEffects {
   getMultiScalarCharts = this.actions$.pipe(
     ofType<GetMultiScalarCharts>(chartActions.GET_MULTI_SCALAR_CHARTS),
     debounceTime(200),
-    withLatestFrom(this.store.select(selectCompareSelectedSettingsxAxisType)),
-    flatMap(([action, axisType]) => this.eventsApi.eventsMultiTaskScalarMetricsIterHistogram({
-      tasks: action.payload.taskIds,
-      key: !axisType || axisType === ScalarKeyEnum.IsoTime ? ScalarKeyEnum.Timestamp : axisType
-    }).pipe(
-      flatMap(res => {
-        if (!axisType || axisType === ScalarKeyEnum.IsoTime) {
-          res = {metrics: Object.keys(res.metrics).reduce((metricAcc, metricName) => {
-            const metric = res.metrics[metricName];
-            metricAcc[metricName] = Object.keys(metric).reduce((groupAcc, groupName) => {
-              const group = metric[groupName];
-              groupAcc[groupName] = Object.keys(group).reduce((graphAcc, graphName) => {
-                const graph = group[graphName];
-                graphAcc[graphName] = {...graph, x: graph.x.map(ts => new Date(ts))};
-                return graphAcc;
-              }, {});
-              return groupAcc;
-            }, {});
-            return metricAcc;
-          }, {})};
-        }
-        return [
+    withLatestFrom(this.store.select(selectCompareSelectedSettingsxAxisType), this.store.select(selectCompareHistogramCacheAxisType)),
+    flatMap(([action, axisType, prevAxisType]) => {
+      if ([ScalarKeyEnum.IsoTime, ScalarKeyEnum.Timestamp].includes(prevAxisType) &&
+        [ScalarKeyEnum.IsoTime, ScalarKeyEnum.Timestamp].includes(axisType)) {
+        return [setRefreshing({payload: false}), new DeactiveLoader(action.type)];
+      }
+      return this.eventsApi.eventsMultiTaskScalarMetricsIterHistogram({
+        tasks: action.payload.taskIds,
+        key: !axisType || axisType === ScalarKeyEnum.IsoTime ? ScalarKeyEnum.Timestamp : axisType
+      }).pipe(
+        flatMap(res => [
           // also here
-          new chartActions.SetExperimentHistogram(res),
+          new chartActions.SetExperimentHistogram(res, axisType),
           setRefreshing({payload: false}),
-          new DeactiveLoader(action.type)];
-      }),
-      catchError(error => [
-        new RequestFailed(error), new DeactiveLoader(action.type), setRefreshing({payload: false}),
-        new SetServerError(error, null, 'Failed to get Scalar Charts', action.payload.autoRefresh)
-      ])
-    )
-    )
+          new DeactiveLoader(action.type)]
+        ),
+        catchError(error => [
+          new RequestFailed(error), new DeactiveLoader(action.type), setRefreshing({payload: false}),
+          new SetServerError(error, null, 'Failed to get Scalar Charts', action.payload.autoRefresh)
+        ])
+      );
+    })
   );
 
   @Effect()
diff --git a/src/app/webapp-common/experiments-compare/effects/experiments-compare-details.effects.ts b/src/app/webapp-common/experiments-compare/effects/experiments-compare-details.effects.ts
index d00982d1..62061db2 100644
--- a/src/app/webapp-common/experiments-compare/effects/experiments-compare-details.effects.ts
+++ b/src/app/webapp-common/experiments-compare/effects/experiments-compare-details.effects.ts
@@ -1,90 +1,88 @@
 import {Injectable} from '@angular/core';
 import {Actions, Effect, ofType} from '@ngrx/effects';
 import {select, Store} from '@ngrx/store';
-import {IExperimentCompareDetailsState} from '../reducers/experiments-compare-details.reducer';
-import * as detailsActions from '../actions/experiments-compare-details.actions';
 import {ActiveLoader, DeactiveLoader, SetServerError} from '../../core/actions/layout.actions';
 import {catchError, flatMap, map, switchMap, withLatestFrom} from 'rxjs/operators';
 import {ApiTasksService} from '../../../business-logic/api-services/tasks.service';
 import {ExperimentDetailsReverterService} from '../services/experiment-details-reverter.service';
 import {RequestFailed} from '../../core/actions/http.actions';
-import {selectExperimentIds, selectExperimentsDetails} from '../reducers';
+import {selectExperimentIdsDetails, selectExperimentsDetails} from '../reducers';
 import {Observable, of} from 'rxjs';
-import {EXPERIMENT_INFO_ONLY_FIELDS} from '../../../features/experiments-compare/experiments-compare-consts';
+import {COMPARE_DETAILS_ONLY_FIELDS} from '../../../features/experiments-compare/experiments-compare-consts';
 import {IExperimentDetail} from '../../../features/experiments-compare/experiments-compare-models';
-import {refetchExperimentRequested, setRefreshing} from '../actions/compare-header.actions';
+import {REFETCH_EXPERIMENT_REQUESTED, refetchExperimentRequested, setRefreshing} from '../actions/compare-header.actions';
+import {ExperimentCompareDetailsState} from '../reducers/experiments-compare-details.reducer';
+import {experimentListUpdated, setExperiments} from '../actions/experiments-compare-details.actions';
 
 @Injectable()
 export class ExperimentsCompareDetailsEffects {
 
-  constructor(private actions$: Actions, private tasksApi: ApiTasksService, private store: Store<IExperimentCompareDetailsState>,
+  constructor(private actions$: Actions, private tasksApi: ApiTasksService, private store: Store<ExperimentCompareDetailsState>,
               private experimentDetailsReverter: ExperimentDetailsReverterService
   ) {
   }
 
   @Effect()
   activeLoader$ = this.actions$.pipe(
-    ofType(detailsActions.EXPERIMENT_LIST_UPDATED, detailsActions.REFETCH_EXPERIMENT_REQUESTED),
+    ofType(experimentListUpdated, REFETCH_EXPERIMENT_REQUESTED),
     map(action => new ActiveLoader(action.type))
   );
 
   @Effect()
   UpdateExperimentsDetail$ = this.actions$.pipe(
-    ofType<detailsActions.ExperimentListUpdated>(detailsActions.EXPERIMENT_LIST_UPDATED),
-    withLatestFrom(this.store.pipe(select(selectExperimentIds))),
-    map(([action, oldExperimentIds]) => [action, action.payload.filter(id => !oldExperimentIds.includes(id))]),
-    switchMap(([action, newExperimentIds]: [detailsActions.ExperimentListUpdated, Array<string>]) =>
-      this.fetchExperimentDetails$(newExperimentIds)
-        .pipe(
-          withLatestFrom(this.store.pipe(select(selectExperimentsDetails))),
-          // get only the relevant experiments
-          map(([experiments, oldExperiments]) => oldExperiments.filter(exp => action.payload.includes(exp.id)).concat(experiments)),
-          flatMap(experiments => [
-            new DeactiveLoader(action.type),
-            new detailsActions.SetExperiments(experiments)
-          ]),
-          catchError(error => {
-            return [
-              new RequestFailed(error),
+    ofType(experimentListUpdated),
+    withLatestFrom(this.store.pipe(select(selectExperimentIdsDetails))),
+    switchMap(([action, oldExperimentIds]) => {
+        const newExperimentIds = action.ids.filter(id => !oldExperimentIds.includes(id));
+        return this.fetchExperimentDetails$(newExperimentIds)
+          .pipe(
+            withLatestFrom(this.store.pipe(select(selectExperimentsDetails))),
+            // get only the relevant experiments
+            map(([experiments, oldExperiments]) => oldExperiments.filter(exp => action.ids.includes(exp.id)).concat(experiments)),
+            flatMap(experiments => [
               new DeactiveLoader(action.type),
-              new SetServerError(error, null, 'The attempt to retrieve your experiment data failed. Refresh your browser and try again.')
-            ];
-          })
-        )
+              setExperiments({experiments})
+            ]),
+            catchError(error => [
+                new RequestFailed(error),
+                new DeactiveLoader(action.type),
+                new SetServerError(error, null, 'The attempt to retrieve your experiment data failed. Refresh your browser and try again.')
+              ]
+            )
+          );
+      }
     )
   );
 
   @Effect()
   RefetchExperiment$ = this.actions$.pipe(
     ofType(refetchExperimentRequested),
-    withLatestFrom(this.store.select(selectExperimentIds)),
+    withLatestFrom(this.store.select(selectExperimentIdsDetails)),
     switchMap(([action, newExperimentIds]) =>
       this.fetchExperimentDetails$(newExperimentIds).pipe(
         flatMap(experiments => [
           new DeactiveLoader(action.type),
           setRefreshing({payload: false}),
-          new detailsActions.SetExperiments(experiments)
+          setExperiments({experiments})
         ]),
-        catchError(error => {
-          return [
-            new RequestFailed(error),
-            new DeactiveLoader(action.type),
-            setRefreshing({payload: false}),
-            new SetServerError(
-              error, null,
-              'The attempt to retrieve your experiment data failed. Refresh your browser and try again.',
-              action.autoRefresh
-            )
-          ];
-        })
+        catchError(error => [
+          new RequestFailed(error),
+          new DeactiveLoader(action.type),
+          setRefreshing({payload: false}),
+          new SetServerError(
+            error, null,
+            'The attempt to retrieve your experiment data failed. Refresh your browser and try again.',
+            action.autoRefresh
+          )
+        ])
       )),
   );
 
   fetchExperimentDetails$(ids): Observable<Array<IExperimentDetail>> {
     return ids.length > 0 ?
       this.tasksApi.tasksGetAllEx({
-        id         : ids,
-        only_fields: EXPERIMENT_INFO_ONLY_FIELDS
+        id: ids,
+        only_fields: COMPARE_DETAILS_ONLY_FIELDS
       }).pipe(
         map(res => this.experimentDetailsReverter.revertExperiments(ids, res.tasks))
       )
diff --git a/src/app/webapp-common/experiments-compare/effects/experiments-compare-scalars-graph.effects.ts b/src/app/webapp-common/experiments-compare/effects/experiments-compare-scalars-graph.effects.ts
index 01b688d4..c1098bd3 100644
--- a/src/app/webapp-common/experiments-compare/effects/experiments-compare-scalars-graph.effects.ts
+++ b/src/app/webapp-common/experiments-compare/effects/experiments-compare-scalars-graph.effects.ts
@@ -8,7 +8,7 @@ import {RequestFailed} from '../../core/actions/http.actions';
 import {ApiTasksService} from '../../../business-logic/api-services/tasks.service';
 import {getExperimentsHyperParams, setHyperParamsList, setMetricsList, setTasks} from '../actions/experiments-compare-scalars-graph.actions';
 import {setRefreshing} from '../actions/compare-header.actions';
-import {HyperParams} from '../reducers/experiments-compare-charts.reducer';
+import {GroupedHyperParams, HyperParams} from '../reducers/experiments-compare-charts.reducer';
 
 @Injectable()
 export class ExperimentsCompareScalarsGraphEffects {
@@ -20,32 +20,32 @@ export class ExperimentsCompareScalarsGraphEffects {
   activeLoader = createEffect(() => this.actions$.pipe(
     ofType(getExperimentsHyperParams),
     map(action => new ActiveLoader(action.type))
-  )
+    )
   );
 
   loadMovies$ = createEffect(() => this.actions$.pipe(
     ofType(getExperimentsHyperParams),
     flatMap((action) => this.tasksApiService.tasksGetAllEx({
-      id: action.experimentsIds,
-      only_fields: ['last_metrics', 'name', 'last_iteration', 'execution.parameters']
-    })
-      .pipe(
-        // map(res => res.tasks)),
-        flatMap(res => {
-          const metricsList = this.getMetricOptions(res.tasks);
-          const paramsHasDiffs = this.getParametersHasDiffs(res.tasks);
-          return [
-            setTasks({tasks: res.tasks}),
-            setMetricsList({metricsList: metricsList}),
-            setHyperParamsList({hyperParams: paramsHasDiffs}),
-            setRefreshing({payload: false}),
-            new DeactiveLoader(action.type)];
-        }),
-        catchError(error => [
-          new RequestFailed(error), new DeactiveLoader(action.type), setRefreshing({payload: false}),
-          new SetServerError(error, null, 'Failed to get Compared Experiments')
-        ])
-      )
+        id: action.experimentsIds,
+        only_fields: ['last_metrics', 'name', 'last_iteration', 'hyperparams']
+      })
+        .pipe(
+          // map(res => res.tasks)),
+          flatMap(res => {
+            const metricsList = this.getMetricOptions(res.tasks);
+            const paramsHasDiffs = this.getParametersHasDiffs(res.tasks);
+            return [
+              setTasks({tasks: res.tasks}),
+              setMetricsList({metricsList: metricsList}),
+              setHyperParamsList({hyperParams: paramsHasDiffs}),
+              setRefreshing({payload: false}),
+              new DeactiveLoader(action.type)];
+          }),
+          catchError(error => [
+            new RequestFailed(error), new DeactiveLoader(action.type), setRefreshing({payload: false}),
+            new SetServerError(error, null, 'Failed to get Compared Experiments')
+          ])
+        )
     ))
   );
 
@@ -65,7 +65,7 @@ export class ExperimentsCompareScalarsGraphEffects {
         }
       }
     }
-    const metricsList = Object.keys(metrics).sort((a, b) => a.toLowerCase() > b.toLowerCase() ? 1 :  -1).map(metricName => ({
+    const metricsList = Object.keys(metrics).sort((a, b) => a.toLowerCase() > b.toLowerCase() ? 1 : -1).map(metricName => ({
       metricName,
       variants: Object.keys(metrics[metricName]).sort().map(variant => ({
         name: variant,
@@ -75,18 +75,27 @@ export class ExperimentsCompareScalarsGraphEffects {
     return metricsList;
   }
 
-  private getParametersHasDiffs(tasks): HyperParams  {
+  private getParametersHasDiffs(tasks): GroupedHyperParams {
     const numberOfTasks = tasks.length;
-    const paramsValues: {string?: any[]} = {};
+    let paramsValues: { [section: string]: { [param: string]: any[] } } = {};
     tasks.forEach(task => {
-      Object.entries(task.execution.parameters).forEach( ([param, value]) =>
-        paramsValues.hasOwnProperty(param) ? paramsValues[param].push(value) : (paramsValues[param] = [value])
-      );
+      paramsValues = task.hyperparams ? Object.values(task.hyperparams).reduce((acc, paramsObj) => {
+        Object.values(paramsObj).forEach((paramObj) => {
+          acc[paramObj.section] = acc[paramObj.section] || {};
+          acc[paramObj.section][paramObj.name] = acc[paramObj.section][paramObj.name] || [];
+          acc[paramObj.section][paramObj.name].push(paramObj.value);
+        });
+        return acc;
+      }, paramsValues) as { [section: string]: { [param: string]: any[] } } : paramsValues;
     });
 
-    return Object.entries(paramsValues).reduce((acc, [paramKey, values]) => {
-      acc[paramKey] = values.every(value => value !== '') && (numberOfTasks != values.length || values.some(val => val !== values[0]));
-      return acc;
-    }, {});
+    const paramsValuesHasDiff: { [section: string]: HyperParams } = {};
+    Object.entries(paramsValues).forEach(([section, params]) => {
+      paramsValuesHasDiff[section] = Object.entries(params).reduce((acc, [paramKey, values]) => {
+        acc[paramKey] = values.every(value => value !== '') && (numberOfTasks != values.length || values.some(val => val !== values[0]));
+        return acc;
+      }, {});
+    });
+    return paramsValuesHasDiff;
   }
 }
diff --git a/src/app/webapp-common/experiments-compare/effects/select-experiment-for-compare-effects.service.ts b/src/app/webapp-common/experiments-compare/effects/select-experiment-for-compare-effects.service.ts
index d506f16a..6f75ce04 100644
--- a/src/app/webapp-common/experiments-compare/effects/select-experiment-for-compare-effects.service.ts
+++ b/src/app/webapp-common/experiments-compare/effects/select-experiment-for-compare-effects.service.ts
@@ -13,7 +13,7 @@ import {select, Store} from '@ngrx/store';
 import {get, isEmpty} from 'lodash/fp';
 import {escapeRegex} from '../../shared/utils/shared-utils';
 import {NONE_USER_TASK_TYPES} from '../../experiments/shared/common-experiments.const';
-import {selectExperimentIds, selectExperimentsUpdateTime} from '../reducers';
+import {selectExperimentsUpdateTime} from '../reducers';
 import {EmptyAction} from '../../../app.constants';
 import {selectRouterParams} from '../../core/reducers/router-reducer';
 import {selectAppVisible} from '../../core/reducers/view-reducer';
diff --git a/src/app/webapp-common/experiments-compare/experiments-compare-routing.module.ts b/src/app/webapp-common/experiments-compare/experiments-compare-routing.module.ts
index 46154aee..db2b7d1c 100644
--- a/src/app/webapp-common/experiments-compare/experiments-compare-routing.module.ts
+++ b/src/app/webapp-common/experiments-compare/experiments-compare-routing.module.ts
@@ -9,6 +9,7 @@ import {ExperimentComparePlotsComponent} from './containers/experiment-compare-p
 import {DebugImagesComponent} from '../debug-images/debug-images.component';
 import {ExperimentCompareHyperParamsGraphComponent} from './containers/experiment-compare-hyper-params-graph/experiment-compare-hyper-params-graph.component';
 import {RouterHelperGuard} from './experiment-compare-router-helper.guard';
+import {ExperimentCompareParamsComponent} from './containers/experiment-compare-params/experiment-compare-params.component';
 
 
 export const routes: Routes = [
@@ -22,7 +23,7 @@ export const routes: Routes = [
       {path: 'metrics-charts', redirectTo: 'scalars/graph', pathMatch: 'full'},
 
       {path: 'details', component: ExperimentCompareDetailsComponent, data: {mode: 'details'}},
-      {path: 'hyper-params/values', component: ExperimentCompareDetailsComponent, canActivate: [RouterHelperGuard], data: {mode: 'hyper-params'}},
+      {path: 'hyper-params/values', component: ExperimentCompareParamsComponent, canActivate: [RouterHelperGuard], data: {mode: 'hyper-params'}},
       {path: 'hyper-params/graph', component: ExperimentCompareHyperParamsGraphComponent},
       {path: 'scalars/values', component: ExperimentCompareMetricValuesComponent, canActivate: [RouterHelperGuard]},
       {path: 'scalars/graph', component: ExperimentCompareScalarChartsComponent},
diff --git a/src/app/webapp-common/experiments-compare/experiments-compare.component.scss b/src/app/webapp-common/experiments-compare/experiments-compare.component.scss
index 1755e34f..2c290696 100644
--- a/src/app/webapp-common/experiments-compare/experiments-compare.component.scss
+++ b/src/app/webapp-common/experiments-compare/experiments-compare.component.scss
@@ -87,19 +87,4 @@ $header-height: 60px;
   /deep/ al-drawer button.drawer-toggle {
     border-radius: 0 6px 6px 0;
   }
-
-  /deep/ .labeled-row {
-    .label-container {
-
-      width: 100px !important;
-      flex: 0 0 100px;
-    }
-
-    .content {
-      display: block;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
 }
diff --git a/src/app/webapp-common/experiments-compare/experiments-compare.module.ts b/src/app/webapp-common/experiments-compare/experiments-compare.module.ts
index 1c78065d..33c445b1 100644
--- a/src/app/webapp-common/experiments-compare/experiments-compare.module.ts
+++ b/src/app/webapp-common/experiments-compare/experiments-compare.module.ts
@@ -40,8 +40,9 @@ import {ParallelCoordinatesGraphComponent} from './dumbs/parallel-coordinates-gr
 import {ExperimentCompareHyperParamsGraphComponent} from './containers/experiment-compare-hyper-params-graph/experiment-compare-hyper-params-graph.component';
 import {ExperimentsCompareScalarsGraphEffects} from './effects/experiments-compare-scalars-graph.effects';
 import {ScrollingModule} from '@angular/cdk/scrolling';
-import {PrettifyTitleKeyPipe} from './prettify-title-key.pipe';
 import {MatRadioModule} from '@angular/material/radio';
+import {ExperimentCompareParamsComponent} from './containers/experiment-compare-params/experiment-compare-params.component';
+import {ExperimentsCompareParamsEffects} from './effects/experiments-compare-params.effects';
 
 const syncedKeys = [
   'charts.settingsList',
@@ -57,13 +58,13 @@ export function localStorageReducer(reducer: ActionReducer<any>): ActionReducer<
   declarations: [
     ExperimentsCompareComponent,
     ExperimentCompareDetailsComponent,
+    ExperimentCompareParamsComponent,
     ExperimentCompareMetricValuesComponent,
     ExperimentCompareScalarChartsComponent,
     ExperimentComparePlotsComponent,
     ExperimentCompareHeaderComponent,
     ExperimentCompareGeneralDataComponent,
     GetKeyValueArrayPipePipe,
-    PrettifyTitleKeyPipe,
     SelectExperimentsForCompareComponent,
     SelectExperimentsForCompareTableComponent,
     CompareCardListComponent,
@@ -93,6 +94,7 @@ export function localStorageReducer(reducer: ActionReducer<any>): ActionReducer<
     StoreModule.forFeature('experimentsCompare', experimentsCompareReducers, {metaReducers: [localStorageReducer]}),
     EffectsModule.forFeature([
       ExperimentsCompareDetailsEffects,
+      ExperimentsCompareParamsEffects,
       ExperimentsCompareDebugImagesEffects,
       ExperimentsCompareChartsEffects,
       ExperimentsCompareMetricsValuesEffects,
diff --git a/src/app/webapp-common/experiments-compare/jsonToDiffConvertor.ts b/src/app/webapp-common/experiments-compare/jsonToDiffConvertor.ts
index 642e60df..45568f3b 100644
--- a/src/app/webapp-common/experiments-compare/jsonToDiffConvertor.ts
+++ b/src/app/webapp-common/experiments-compare/jsonToDiffConvertor.ts
@@ -1,9 +1,9 @@
 import {get, has, isArray, isEqual, mergeWith} from 'lodash/fp';
-import hoconParser from 'hocon-parser';
-import hash from 'object-hash';
 import {IExperimentDetail} from '../../features/experiments-compare/experiments-compare-models';
 import {treeBuilderService} from './services/tree-builder.service';
 import {TreeNode} from './shared/experiments-compare-details.model';
+import {getAlternativeConvertedExperiment, getDisplayTextForTitles} from '../../features/experiments-compare/experiment-compare-utils';
+import {ConfigurationItem} from '../../business-logic/model/tasks/configurationItem';
 
 export interface TreeNodeJsonData {
   key: string;
@@ -35,14 +35,10 @@ function isObject(val) {
   return val && typeof val === 'object';
 }
 
-function isArrayOrderNotImportant2(val, key, allExperiments = []) {
-  const allIsOne = allExperiments.every(experiment => experiment && experiment[key] && experiment[key].length === 1);
-  return Array.isArray(val) && !allIsOne && (arrayOrderIsNotImportant(key));
-}
 
-function convertToHashItem(item, originItem) {
-  const itemHash = hash(item);
-  const convertedItemHash = (originItem && isArray(originItem) && originItem.map(element => hash(element)).includes(itemHash) ? 'a_hash_' : 'hash_') + itemHash;
+function convertToHashItem(item, originItem, path) {
+  const itemHash = getDisplayTextForTitles(item, path);
+  const convertedItemHash = (originItem && isArray(originItem) && originItem.map(element => getDisplayTextForTitles(element, path)).includes(itemHash) ? 'a_hash_' : 'hash_') + itemHash;
   return convertedItemHash;
 }
 
@@ -62,7 +58,7 @@ function convertnetworkDesign(networkDesign: string): any {
   if (!networkDesign) {
     return [];
   }
-  if (typeof networkDesign !== 'string'){
+  if (typeof networkDesign !== 'string') {
     return networkDesign;
   }
   return networkDesign;
@@ -86,7 +82,11 @@ function convertUncommittedChanges(diff: string[]): { [files: string]: string[]
       acc[curr] = [];
     } else {
       if (currKey === null) {
-        acc[`hash_${curr}`] = curr;
+        if (curr.startsWith('** Content is too large to display.')) {
+          acc['a_hash_'] = curr;
+        } else {
+          acc[`hash_${curr}`] = curr;
+        }
       } else {
         acc[currKey].push(curr);
       }
@@ -95,9 +95,42 @@ function convertUncommittedChanges(diff: string[]): { [files: string]: string[]
   }, {}) : diff;
 }
 
-export function convertExperimentsArrays(experiment, origin, experiments): IExperimentDetail {
+function convertHyperParams(hyperParams: { [section: string]: { [name: string]: any } }, originHyperParams): { [section: string]: { [name: string]: any } } {
+  if (!hyperParams) {
+    return {};
+  }
+
+  if (isParamsConverted(hyperParams)) {
+    return hyperParams;
+  }
+
+  return Object.entries(hyperParams).reduce((result, [sectionName, section]) => {
+    result[sectionName] = Object.entries(section).reduce((acc, [paramName, param]) => {
+      const hasInOrigin = has(`${sectionName}.${paramName}`, originHyperParams);
+      acc[(hasInOrigin ? ' ' : '') + paramName] = param.value;
+      return acc;
+    }, {});
+    return result;
+  }, {});
+}
+
+function convertConfiguration(confParams: { [name: string]: ConfigurationItem }, originConfParams): { [name: string]: string | string[] } {
+  if (!confParams) {
+    return {};
+  }
+
+  return Object.entries(confParams).reduce((acc, [paramName, {value}]) => {
+    const hasInOrigin = has(paramName, originConfParams.configuration);
+    acc[(hasInOrigin ? ' ' : '') + paramName] = value? value.split('\n'): undefined;
+    return acc;
+  }, {});
+}
+
+export function convertExperimentsArrays(experiment, origin, experiments, path = ''): IExperimentDetail {
   const convertedExperiment: IExperimentDetail = {};
+  let counter = 1;
   Object.keys(experiment).forEach(key => {
+      const newPath = `${path}.${key}`;
       switch (key) {
         case 'installed_packages':
           convertedExperiment[key] = convertInstalledPackages(experiment[key]);
@@ -108,16 +141,35 @@ export function convertExperimentsArrays(experiment, origin, experiments): IExpe
         case 'uncommitted_changes':
           convertedExperiment[key] = convertUncommittedChanges(experiment[key]);
           break;
+        case 'tags':
+          convertedExperiment[key] = experiment[key];
+          break;
+        case 'configuration':
+          convertedExperiment[key] = convertConfiguration(experiment[key], origin);
+          break;
         default:
-          if (isObject(experiment[key]) && (!isArrayOrderNotImportant(experiment[key], key, experiments))) {
-            convertedExperiment[key] = convertExperimentsArrays(experiment[key], origin ? origin[key] : null, experiments.map(exp => exp ? exp[key] : null));
+          const alternativeConvertedExperiment = getAlternativeConvertedExperiment(newPath, experiment[key]);
+          if (alternativeConvertedExperiment) {
+            convertedExperiment[key] = alternativeConvertedExperiment;
+          } else if (isObject(experiment[key]) && (!isArrayOrderNotImportant(experiment[key], key, experiments))) {
+            let newKey = getDisplayTextForTitles(experiment[key], newPath) || key;
+
+            // Makes base/origin rows first
+            if (origin && Array.isArray(origin) && origin.map(item => getDisplayTextForTitles(item, newPath)).includes(newKey)) {
+              newKey = `0${newKey}`;
+            }
+            convertedExperiment[newKey] = convertExperimentsArrays(experiment[key], origin ? origin[key] : null, experiments.map(exp => exp ? exp[key] : null), newPath);
           } else if (isArrayOrderNotImportant(experiment[key], key, experiments)) {
             const hashedObj = {};
             experiment[key].forEach(item => {
-              const convertedItemHash = convertToHashItem(item, origin && origin[key]);
+              let convertedItemHash = convertToHashItem(item, origin && (Array.isArray(origin) ? (origin.map(item => item[key]) as any).flat() : origin[key]), newPath);
+              if (hashedObj[convertedItemHash]) {
+                convertedItemHash = `${counter}${convertedItemHash}`;
+                counter++;
+              }
               if (isObject(item)) {
                 hashedObj[convertedItemHash] =
-                  convertExperimentsArrays(item, origin ? origin[key] : null, experiments.map(exp => exp ? exp[key] : null));
+                  convertExperimentsArrays(item, origin ? origin[key] : null, experiments.map(exp => exp ? exp[key] : null), newPath);
               } else {
                 hashedObj[convertedItemHash] = item;
               }
@@ -132,6 +184,13 @@ export function convertExperimentsArrays(experiment, origin, experiments): IExpe
   return convertedExperiment;
 }
 
+export function convertExperimentsArraysParams(experiment, origin): IExperimentDetail {
+  return Object.keys(experiment).reduce((acc, key) => {
+    acc[key] = key === 'hyperparams' ? convertHyperParams(experiment[key], origin.hyperparams) : experiment[key];
+    return acc;
+  }, {} as IExperimentDetail);
+}
+
 function abSort(obj) {
   return Object.keys(obj).sort(function (a, b) {
       return a.toLowerCase().localeCompare(b.toLowerCase());
@@ -151,6 +210,16 @@ function sortObject(obj, origin, parentKey: string) {
   return orderedObj;
 }
 
+export function isDetailsConverted(exp) {
+  return exp.execution?.installed_packages && !Array.isArray(exp.execution?.installed_packages)
+}
+
+export function isParamsConverted(hyperparams) {
+  const firstKey = hyperparams && Object.keys(hyperparams)[0];
+  const firstParam = firstKey && Object.values(hyperparams[firstKey])[0];
+  return typeof firstParam === 'string';
+}
+
 export function getAllKeysEmptyObject(jsons) {
   let obj = {};
   jsons.forEach(json => obj = mergeWith(customMergeStrategyForArrays, obj, json));
diff --git a/src/app/webapp-common/experiments-compare/prettify-title-key.pipe.ts b/src/app/webapp-common/experiments-compare/prettify-title-key.pipe.ts
deleted file mode 100644
index 45204721..00000000
--- a/src/app/webapp-common/experiments-compare/prettify-title-key.pipe.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {Pipe, PipeTransform} from '@angular/core';
-
-@Pipe({
-  name: 'prettifyTitleKeyPipe',
-  pure: true
-})
-export class PrettifyTitleKeyPipe implements PipeTransform {
-
-  transform(value: string): string {
-    switch (value) {
-      case 'network_design': return 'Network Design';
-      case 'uncommitted_changes': return 'Uncommitted Changes';
-      case 'installed_packages': return 'Installed Packages';
-      case 'base_docker_image': return 'Base Docker Image';
-      case ' input model': return 'Input Model';
-      case ' output model': return 'Output Model';
-      case ' output model': return 'Output Model';
-      case 'model': return 'Model';
-      case 'source': return 'Source';
-      default:
-        return value;
-    }
-
-  }
-
-}
diff --git a/src/app/webapp-common/experiments-compare/reducers/experiments-compare-charts.reducer.ts b/src/app/webapp-common/experiments-compare/reducers/experiments-compare-charts.reducer.ts
index bb21a839..77b4da83 100644
--- a/src/app/webapp-common/experiments-compare/reducers/experiments-compare-charts.reducer.ts
+++ b/src/app/webapp-common/experiments-compare/reducers/experiments-compare-charts.reducer.ts
@@ -9,6 +9,10 @@ export interface SelectedMetric {
   path: string;
 }
 
+export interface GroupedHyperParams {
+  [section: string]: HyperParams;
+}
+
 export interface HyperParams {
   [name: string]: boolean;
 }
@@ -26,6 +30,7 @@ export interface MetricOption {
 export interface IExperimentCompareChartsState {
   metricsMultiScalarsCharts: any;
   metricsHistogramCharts: any;
+  cachedAxisType: ScalarKeyEnum;
   metricsPlotsCharts: any;
   settingsList: Array<IExperimentCompareSettings>;
   searchTerm: string;
@@ -48,6 +53,7 @@ export interface IExperimentCompareSettings {
 export const initialState: IExperimentCompareChartsState = {
   metricsMultiScalarsCharts: null,
   metricsHistogramCharts: null,
+  cachedAxisType: null,
   metricsPlotsCharts: null,
   settingsList: [],  // TODO, Make this an object with ID's as key YK
   searchTerm: '',
@@ -62,7 +68,7 @@ export function experimentsCompareChartsReducer(state: IExperimentCompareChartsS
     case SET_EXPERIMENT_METRICS_SEARCH_TERM:
       return {...state, searchTerm: action.payload.searchTerm};
     case SET_EXPERIMENT_HISTOGRAM:
-      return {...state, metricsHistogramCharts: action.payload};
+      return {...state, metricsHistogramCharts: action.payload, cachedAxisType: action.axisType};
     case SET_EXPERIMENT_PLOTS:
       return {...state, metricsPlotsCharts: action.payload};
     case UPDATE_EXPERIMENT_SETTINGS: {
@@ -77,7 +83,13 @@ export function experimentsCompareChartsReducer(state: IExperimentCompareChartsS
       return {...state, settingsList: newSettings};
     }
     case RESET_EXPERIMENT_METRICS:
-      return {...state, metricsMultiScalarsCharts: null, metricsHistogramCharts: null, metricsPlotsCharts: null};
+      return {
+        ...state,
+        metricsMultiScalarsCharts: initialState.metricsMultiScalarsCharts,
+        metricsHistogramCharts: initialState.metricsHistogramCharts,
+        metricsPlotsCharts: initialState.metricsPlotsCharts,
+        cachedAxisType: initialState.cachedAxisType
+      };
     default:
       return state;
   }
diff --git a/src/app/webapp-common/experiments-compare/reducers/experiments-compare-details.reducer.ts b/src/app/webapp-common/experiments-compare/reducers/experiments-compare-details.reducer.ts
index c1d5d0d9..6ea16da1 100644
--- a/src/app/webapp-common/experiments-compare/reducers/experiments-compare-details.reducer.ts
+++ b/src/app/webapp-common/experiments-compare/reducers/experiments-compare-details.reducer.ts
@@ -1,28 +1,22 @@
-import * as actions from '../actions/experiments-compare-details.actions';
+import {resetState, setExperiments} from '../actions/experiments-compare-details.actions';
 import {IExperimentDetail} from '../../../features/experiments-compare/experiments-compare-models';
+import {createReducer, on} from '@ngrx/store';
 
-export interface IExperimentCompareDetailsState {
+export interface ExperimentCompareDetailsState {
   experiments: Array<IExperimentDetail>;
-  expandedPaths: Array<string>;
 }
 
-export const initialState: IExperimentCompareDetailsState = {
-  expandedPaths: [],
+export const initialState: ExperimentCompareDetailsState = {
   experiments  : []
 };
 
+const _experimentsCompareDetailsReducer = createReducer(initialState,
+  on(setExperiments, (state: ExperimentCompareDetailsState, {experiments}) => ({...state, experiments: experiments})),
+  on(resetState, (state: ExperimentCompareDetailsState) => ({...initialState}))
+);
 
-export function experimentsCompareDetailsReducer(state: IExperimentCompareDetailsState = initialState, action): IExperimentCompareDetailsState {
-  switch (action.type) {
-    case actions.SET_EXPERIMENTS:
-      return {...state, experiments: action.payload};
-    case actions.EXPAND_NODE:
-      return {...state, expandedPaths: state.expandedPaths.concat(action.payload)};
-    case actions.COLLAPSE_NODE:
-      return {...state, expandedPaths: state.expandedPaths.filter(path => path !== action.payload)};
-    case actions.RESET_STATE:
-      return {...initialState};
-    default:
-      return state;
-  }
+export function experimentsCompareDetailsReducer(state, action) {
+  return _experimentsCompareDetailsReducer(state, action);
 }
+
+
diff --git a/src/app/webapp-common/experiments-compare/reducers/experiments-compare-scalars-graph.reducer.ts b/src/app/webapp-common/experiments-compare/reducers/experiments-compare-scalars-graph.reducer.ts
index 2a583b23..f7bf8f1e 100644
--- a/src/app/webapp-common/experiments-compare/reducers/experiments-compare-scalars-graph.reducer.ts
+++ b/src/app/webapp-common/experiments-compare/reducers/experiments-compare-scalars-graph.reducer.ts
@@ -1,11 +1,11 @@
 import {createReducer, on} from '@ngrx/store';
 import {setHyperParamsList, setMetricsList, setShowIdenticalHyperParams, setTasks, setvalueType} from '../actions/experiments-compare-scalars-graph.actions';
-import {HyperParams, MetricOption, MetricValueType} from './experiments-compare-charts.reducer';
+import {GroupedHyperParams, HyperParams, MetricOption, MetricValueType} from './experiments-compare-charts.reducer';
 
 export interface ScalarsGraphState {
   showIdenticalHyperParams: boolean;
   metrics: MetricOption[];
-  hyperParams: HyperParams;
+  hyperParams: GroupedHyperParams;
   tasks: any;
   valueType: MetricValueType;
 }
diff --git a/src/app/webapp-common/experiments-compare/reducers/index.ts b/src/app/webapp-common/experiments-compare/reducers/index.ts
index 495aa4ce..f041b504 100644
--- a/src/app/webapp-common/experiments-compare/reducers/index.ts
+++ b/src/app/webapp-common/experiments-compare/reducers/index.ts
@@ -1,6 +1,6 @@
 import {ActionReducerMap, createFeatureSelector, createSelector} from '@ngrx/store';
-import {experimentsCompareDetailsReducer, IExperimentCompareDetailsState} from './experiments-compare-details.reducer';
-import {experimentsCompareChartsReducer, HyperParams, IExperimentCompareChartsState, IExperimentCompareSettings, MetricOption, MetricValueType} from './experiments-compare-charts.reducer';
+import {ExperimentCompareDetailsState, experimentsCompareDetailsReducer} from './experiments-compare-details.reducer';
+import {experimentsCompareChartsReducer, GroupedHyperParams, HyperParams, IExperimentCompareChartsState, IExperimentCompareSettings, MetricOption, MetricValueType} from './experiments-compare-charts.reducer';
 import {experimentsCompareMetricsValuesReducer, IExperimentCompareMetricsValuesState, MetricSortBy} from './experiments-compare-metrics-values.reducer';
 import {experimentsCompareDebugImagesReducer} from './experiments-compare-debug-images.reducer';
 import {get} from 'lodash/fp';
@@ -9,9 +9,13 @@ import {compareHeader, CompareHeaderState} from './compare-header.reducer';
 import {IExperimentDetail} from '../../../features/experiments-compare/experiments-compare-models';
 import {ScalarKeyEnum} from '../../../business-logic/model/events/scalarKeyEnum';
 import {scalarsGraphReducer, ScalarsGraphState} from './experiments-compare-scalars-graph.reducer';
+import {experimentOutput} from '../../../features/experiments/reducers';
+import {ExperimentParams} from '../shared/experiments-compare-details.model';
+import {ExperimentCompareParamsState, experimentsCompareParamsReducer} from './experiments-compare-params.reducer';
 
 export const experimentsCompareReducers: ActionReducerMap<any, any> = {
   details      : experimentsCompareDetailsReducer,
+  params       : experimentsCompareParamsReducer,
   metricsValues: experimentsCompareMetricsValuesReducer,
   charts       : experimentsCompareChartsReducer,
   debugImages  : experimentsCompareDebugImagesReducer,
@@ -22,12 +26,18 @@ export const experimentsCompareReducers: ActionReducerMap<any, any> = {
 export const experimentsCompare = createFeatureSelector<any>('experimentsCompare');
 
 // Details
-export const experimentsDetails = createSelector(experimentsCompare, (state): IExperimentCompareDetailsState => state ? state.details : {});
+export const experimentsDetails = createSelector(experimentsCompare, (state): ExperimentCompareDetailsState => state ? state.details : {});
 export const selectExperimentsDetails = createSelector(experimentsDetails, (state): Array<IExperimentDetail> => state.experiments);
-export const selectExpandedPaths = createSelector(experimentsDetails, (state): Array<string> => state.expandedPaths);
-export const selectExperimentIds = createSelector(selectExperimentsDetails,
+export const selectExperimentIdsDetails = createSelector(selectExperimentsDetails,
   (experiments): Array<IExperimentDetail['id']> => experiments.map(exp => exp.id));
 
+// Params
+export const experimentsParams = createSelector(experimentsCompare, (state): ExperimentCompareParamsState => state ? state.params : {});
+export const selectExperimentsParams = createSelector(experimentsParams, (state): Array<ExperimentParams> => state.experiments);
+export const selectExperimentIdsParams = createSelector(selectExperimentsParams,
+  (experiments): Array<IExperimentDetail['id']> => experiments.map(exp => exp.id));
+
+
 // select experiments for compare and header
 export const selectCompareHeader = createSelector(experimentsCompare, (state): CompareHeaderState => state ? state.compareHeader : {});
 export const selectExperimentsForCompareSearchResults = createSelector(selectCompareHeader, (state): Array<Task> => state ? state.searchResultsExperiments : []);
@@ -47,7 +57,7 @@ export const selectCompareMetricsValuesSortConfig = createSelector(compareMetric
 // Charts
 export const compareCharts = createSelector(experimentsCompare, (state): IExperimentCompareChartsState => state ? state.charts : {});
 export const selectSelectedExperiments = createSelector(compareCharts, (state): Array<string> => state ? state.selectedExperiments : []);
-export const selectCompareTasksScalarCharts = createSelector(compareCharts, state => state.metricsHistogramCharts);
+export const selectCompareHistogramCacheAxisType = createSelector(compareCharts, (state) => state.cachedAxisType);
 export const selectCompareTasksPlotCharts = createSelector(compareCharts, state => state.metricsPlotsCharts);
 
 export const selectSelectedExperimentSettings = createSelector(compareCharts, selectSelectedExperiments,
@@ -75,7 +85,30 @@ export const selectCompareSelectedSettingsxAxisType = createSelector(selectSelec
 export const selectScalarsGraph = createSelector(experimentsCompare, (state): ScalarsGraphState => state ? state.scalarsGraph : {});
 export const selectScalarsGraphShowIdenticalHyperParams = createSelector(selectScalarsGraph, (state): boolean => state ? state.showIdenticalHyperParams : true);
 export const selectScalarsGraphMetrics = createSelector(selectScalarsGraph, (state): MetricOption[] => state.metrics);
-export const selectScalarsGraphHyperParams = createSelector(selectScalarsGraph, (state): HyperParams => state ? state.hyperParams : {});
+export const selectScalarsGraphHyperParams = createSelector(selectScalarsGraph, (state): GroupedHyperParams => state ? state.hyperParams : {});
 export const selectScalarsGraphTasks = createSelector(selectScalarsGraph, (state): any[] => state ? state.tasks : []);
 export const selectMetricValueType = createSelector(selectScalarsGraph, (state): MetricValueType => state ? state.valueType : 'value');
 
+export const selectCompareTasksScalarCharts = createSelector(
+  selectCompareSelectedSettingsxAxisType,
+  compareCharts,
+  (axisType, state) => {
+    if (!axisType || axisType === ScalarKeyEnum.IsoTime) {
+      return  {
+        metrics: Object.keys(state.metricsHistogramCharts.metrics).reduce((metricAcc, metricName) => {
+          const metric = state.metricsHistogramCharts.metrics[metricName];
+          metricAcc[metricName] = Object.keys(metric).reduce((groupAcc, groupName) => {
+            const group = metric[groupName];
+            groupAcc[groupName] = Object.keys(group).reduce((graphAcc, graphName) => {
+              const graph = group[graphName];
+              graphAcc[graphName] = {...graph, x: graph.x.map(ts => new Date(ts))};
+              return graphAcc;
+            }, {});
+            return groupAcc;
+          }, {});
+          return metricAcc;
+        }, {})
+      };
+    }
+    return state.metricsHistogramCharts;
+  });
diff --git a/src/app/webapp-common/experiments-compare/services/experiment-details-reverter.service.ts b/src/app/webapp-common/experiments-compare/services/experiment-details-reverter.service.ts
index 57851dcf..22de6dbb 100644
--- a/src/app/webapp-common/experiments-compare/services/experiment-details-reverter.service.ts
+++ b/src/app/webapp-common/experiments-compare/services/experiment-details-reverter.service.ts
@@ -9,6 +9,7 @@ import {Task} from '../../../business-logic/model/tasks/task';
 import {ExperimentDetailsReverterServiceBase} from '../../../features/experiments-compare/experiment-details-reverter-service.base';
 import {ARTIFACTS_TYPES} from '../../tasks/tasks.constants';
 import {Artifact} from '../../../business-logic/model/tasks/artifact';
+import {crc32} from '../../shared/utils/shared-utils';
 
 @Injectable({
   providedIn: 'root'
@@ -38,18 +39,17 @@ export class ExperimentDetailsReverterService extends ExperimentDetailsReverterS
   }
 
   revertAuditLog(artifact: Artifact): any {
-    const {uri, content_size, hash, timestamp, display_data, type_data, ...restArtifact} = artifact;
+    const {uri, content_size, hash, timestamp, display_data, mode, key, type_data, ...restArtifact} = artifact;
     const result = {
       ...restArtifact,
-      'file path': uri,
       'file size': content_size,
       'file hash': hash,
-      'timestamp': timestamp
     };
 
     if (type_data) {
+      const preview  = type_data.preview && type_data.preview.trim().split('\n') || [];
       result['content type'] = type_data['content_type'] || '';
-      result['preview'] = type_data.preview && type_data.preview.trim().split('\n') || [];
+      result['preview'] = (preview.length < 3000 && preview[0]?.length < 3000) ? preview : [`** Content is too large to display. Hash: ${crc32(type_data.preview)}`];
       result['data hash'] = type_data.data_hash || '';
     }
     display_data.forEach(pair => result[pair[0]] = pair[1]);
@@ -67,26 +67,27 @@ export class ExperimentDetailsReverterService extends ExperimentDetailsReverterS
   revertModel(experiment: ISelectedExperiment): ModelDetails {
     return {
       model: this.revertModelInput(experiment.execution),
-      network_design: this.revertNetworkDesign(experiment.execution),
+      network_design: this.revertNetworkDesign(experiment.execution.model),
     };
   }
 
-  revertNetworkDesign(execution) {
-    let networkDesign = get('design.design', execution) || get('model_desc.design', execution) || get('model_desc.prototxt', execution);
+  revertNetworkDesign(model): string {
+    let networkDesign = get('design.design', model) || get('design', model);
     networkDesign = typeof networkDesign === 'string' ? networkDesign.split('\n') : {};
     return networkDesign;
   }
 
   revertExecution(experiment: ISelectedExperiment): ExecutionDetails {
     let pip = get('script.requirements.pip', experiment);
-    let diff = get('script.diff', experiment);
     pip = (pip === undefined || Array.isArray(pip)) ? pip : pip.split('\n');
     pip = pip?.filter(row => !row.startsWith('#') && row.length > 0); // Should we remove comments????
 
-    diff = (!diff || Array.isArray(diff)) ? diff : diff.split('\n');
-
-    let base_docker_image = get('execution.docker_cmd', experiment) || '';
-    // base_docker_image = base_docker_image ? {'': base_docker_image} : undefined;
+    let diff = get('script.diff', experiment);
+    if (diff) {
+      diff = (Array.isArray(diff)) ? diff : diff.split('\n');
+      diff = (diff.length < 3000 && diff[0]?.length < 3000) ? diff : [`** Content is too large to display. Hash: ${crc32(get('script.diff', experiment))}`];
+    }
+    const base_docker_image = get('execution.docker_cmd', experiment) || '';
 
     return {
       source: experiment.script ? this.revertExecutionSource(experiment.script) : undefined,
@@ -114,7 +115,7 @@ export class ExperimentDetailsReverterService extends ExperimentDetailsReverterS
       script_path: script.entry_point,
       branch: script.branch,
       commit_id: script.version_num,
-      tag_name: script.tag
+      tag_name: script.tag || '' // In tag_name we want undefined == null == ""
     };
   }
 
diff --git a/src/app/webapp-common/experiments-compare/shared/experiments-compare-details.model.ts b/src/app/webapp-common/experiments-compare/shared/experiments-compare-details.model.ts
index 483c2af5..dc92247c 100644
--- a/src/app/webapp-common/experiments-compare/shared/experiments-compare-details.model.ts
+++ b/src/app/webapp-common/experiments-compare/shared/experiments-compare-details.model.ts
@@ -20,7 +20,16 @@ export interface ExperimentDetailBase {
   tags?: string[];
 }
 
-
+export interface ExperimentParams {
+  id?: Task['id'];
+  name?: string;
+  status?: Task['status'];
+  last_iteration?: Task['last_iteration'];
+  last_update?: Task['last_update'];
+  project?: Project;
+  hyperparams?: any[];
+  tags?: string[];
+}
 
 export interface ModelDetails {
   model?: ModelDetailsInput;
@@ -53,7 +62,6 @@ export interface ExecutionDetails {
     script_path?: string; // Script.entry_point;
     branch?: string; // Script.branch;
   };
-  parameters?: { [key: string]: any };
   uncommitted_changes?: { [key: string]: any };
   installed_packages?: { [key: string]: any };
   base_docker_image?: { [key: string]: any };
diff --git a/src/app/webapp-common/experiments/actions/common-experiment-output.actions.ts b/src/app/webapp-common/experiments/actions/common-experiment-output.actions.ts
index a620f6f4..cc21661b 100644
--- a/src/app/webapp-common/experiments/actions/common-experiment-output.actions.ts
+++ b/src/app/webapp-common/experiments/actions/common-experiment-output.actions.ts
@@ -1,6 +1,7 @@
 import {Action, createAction, props} from '@ngrx/store';
 import {ISelectedExperiment} from '../../../features/experiments/shared/experiment-info.model';
 import {IExperimentSettings} from '../reducers/common-experiment-output.reducer';
+import {ScalarKeyEnum} from '../../../business-logic/model/events/scalarKeyEnum';
 
 export const EXPERIMENTS_OUTPUT_PREFIX = 'EXPERIMENTS_OUTPUT_';
 
@@ -56,7 +57,7 @@ export class ExperimentScalarRequested implements Action {
 export class SetExperimentHistogram implements Action {
   readonly type = SET_EXPERIMENT_HISTOGRAM;
 
-  constructor(public payload: any) {
+  constructor(public payload: any, public axisType: ScalarKeyEnum) {
   }
 }
 
@@ -67,19 +68,15 @@ export class SetExperimentPlots implements Action {
   }
 }
 
-export class GetExperimentLog implements Action {
-  readonly type = GET_EXPERIMENT_LOG;
+export const getExperimentLog = createAction(
+  GET_EXPERIMENT_LOG,
+  props<{id: string; direction?: string; refresh?: boolean; from?: number}>()
+);
 
-  constructor(public payload: ISelectedExperiment['id']) {
-  }
-}
-
-export class SetExperimentLog implements Action {
-  readonly type = SET_EXPERIMENT_LOG;
-
-  constructor(public events: Array<any>, public scrollID: string) {
-  }
-}
+export const setExperimentLog = createAction(
+  SET_EXPERIMENT_LOG,
+  props<{events: any[]; direction?: string; total: number; refresh?: boolean}>()
+);
 
 export class SetExperimentSettings implements Action {
   readonly type = UPDATE_EXPERIMENT_SETTINGS;
diff --git a/src/app/webapp-common/experiments/actions/common-experiments-info.actions.ts b/src/app/webapp-common/experiments/actions/common-experiments-info.actions.ts
index 4ef73ce0..b65fb107 100644
--- a/src/app/webapp-common/experiments/actions/common-experiments-info.actions.ts
+++ b/src/app/webapp-common/experiments/actions/common-experiments-info.actions.ts
@@ -1,8 +1,11 @@
-import {Action} from '@ngrx/store';
+import {Action, createAction, props} from '@ngrx/store';
 import {Task} from '../../../business-logic/model/tasks/task';
 import {IExperimentInfo, ISelectedExperiment} from '../../../features/experiments/shared/experiment-info.model';
 import {Model} from '../../../business-logic/model/models/model';
 import {ITableExperiment} from '../shared/common-experiment-model.model';
+import {ParamsItem} from '../../../business-logic/model/tasks/paramsItem';
+import {ConfigurationItem} from '../../../business-logic/model/tasks/configurationItem';
+
 export const EXPERIMENTS_INFO_PREFIX = 'EXPERIMENTS_INFO_';
 export const GET_EXPERIMENT_INFO             = EXPERIMENTS_INFO_PREFIX + 'GET_EXPERIMENT_INFO';
 export const AUTO_REFRESH_EXPERIMENT_INFO    = EXPERIMENTS_INFO_PREFIX + 'AUTO_REFRESH_EXPERIMENT_INFO';
@@ -40,6 +43,8 @@ export class SetExperiment implements Action {
 
 export class ExperimentUpdatedSuccessfully implements Action {
   readonly type = EXPERIMENT_UPDATED_SUCCESSFULLY;
+  constructor(public payload: string) {
+  }
 }
 
 export class SetExperimentInfoData implements Action {
@@ -49,6 +54,21 @@ export class SetExperimentInfoData implements Action {
   }
 }
 
+export const getExperiment= createAction(
+  EXPERIMENTS_INFO_PREFIX + '[set experiment]',
+  props<{experimentId: string}>()
+);
+
+export const getExperimentUncommittedChanges = createAction(
+  EXPERIMENTS_INFO_PREFIX + '[get uncommitted change]',
+  props<{experimentId: string}>()
+);
+
+export const setExperimentUncommittedChanges = createAction(
+  EXPERIMENTS_INFO_PREFIX + '[set uncommitted change]',
+  props<{diff: string}>()
+);
+
 export class ModelSelected implements Action {
   readonly type = MODEL_SELECTED;
   public payload: {
@@ -67,6 +87,29 @@ export class ModelSelected implements Action {
 export class UpdateExperimentInfoData implements Action {
   readonly type = UPDATE_EXPERIMENT_INFO_DATA;
 
-  constructor(public payload: { id: ITableExperiment['id'], changes: Partial<ITableExperiment> }) {
+  constructor(public payload: { id: ITableExperiment['id'], changes: Partial<IExperimentInfo> }) {
   }
 }
+export const saveHyperParamsSection = createAction(
+  EXPERIMENTS_INFO_PREFIX + 'SAVE_HYPERPARAMS', props<{ hyperparams: ParamsItem[] }>());
+
+export const saveExperimentConfigObj = createAction(
+  EXPERIMENTS_INFO_PREFIX + 'SAVE_CONFIG_OBJ', props<{ configuration: Array<ConfigurationItem>; }>());
+
+export const deleteHyperParamsSection = createAction(
+  EXPERIMENTS_INFO_PREFIX + 'DELETE_HYPERPARAMS_SECTION', props<{ section: string }>());
+
+export const hyperParamsSectionUpdated = createAction(
+  EXPERIMENTS_INFO_PREFIX + 'UPDATE_HYPERPARAMS', props<{ section: string, hyperparams: ParamsItem[] }>());
+
+export const getExperimentConfigurationNames = createAction(
+  EXPERIMENTS_INFO_PREFIX + 'GET_CONFIGURATION',props<{ experimentId: string }>());
+
+export const setExperimentSaving = createAction(
+  EXPERIMENTS_INFO_PREFIX + 'SET_SAVING',props<{ saving: boolean }>());
+
+export const getExperimentConfigurationObj = createAction(
+  EXPERIMENTS_INFO_PREFIX + 'GET_CONFIGURATION_OBJ');
+
+export const updateExperimentAtPath = createAction(
+  EXPERIMENTS_INFO_PREFIX + 'UPDATE_EXPERIMENT_AT_PATH',props<{ path: string, value:any}>());
diff --git a/src/app/webapp-common/experiments/actions/common-experiments-menu.actions.ts b/src/app/webapp-common/experiments/actions/common-experiments-menu.actions.ts
index 3ef46666..874bdf70 100644
--- a/src/app/webapp-common/experiments/actions/common-experiments-menu.actions.ts
+++ b/src/app/webapp-common/experiments/actions/common-experiments-menu.actions.ts
@@ -39,20 +39,6 @@ export class StopClicked implements Action {
   }
 }
 
-export class ArchiveClicked implements Action {
-  readonly type = ARCHIVE_CLICKED;
-
-  constructor(public payload: { experiment: ISelectedExperiment; selectedExperiment: any; projectId: string }) {
-  }
-}
-
-export class RestoreClicked implements Action {
-  readonly type = RESTORE_CLICKED;
-
-  constructor(public payload: { experiment: ISelectedExperiment; selectedExperiment: any; projectId: string }) {
-  }
-}
-
 export class ChangeProjectRequested implements Action {
   readonly type = CHANGE_PROJECT_REQUESTED;
 
diff --git a/src/app/webapp-common/experiments/actions/common-experiments-view.actions.ts b/src/app/webapp-common/experiments/actions/common-experiments-view.actions.ts
index 58df9265..837ac2d2 100644
--- a/src/app/webapp-common/experiments/actions/common-experiments-view.actions.ts
+++ b/src/app/webapp-common/experiments/actions/common-experiments-view.actions.ts
@@ -6,40 +6,41 @@ import {MetricVariantResult} from '../../../business-logic/model/projects/metric
 import {TableFilter} from '../../shared/utils/tableParamEncode';
 import {PROJECTS_PREFIX} from '../../core/actions/projects.actions';
 import {User} from '../../../business-logic/model/users/user';
+import {ParamsItem} from '../../../business-logic/model/tasks/paramsItem';
 
 export const EXPERIMENTS_PREFIX = 'EXPERIMENTS_';
 
 // COMMANDS:
 export const ARCHIVE_SELECTED_EXPERIMENTS = EXPERIMENTS_PREFIX + 'ARCHIVE_SELECTED_EXPERIMENTS';
 export const RESTORE_SELECTED_EXPERIMENTS = EXPERIMENTS_PREFIX + 'RESTORE_SELECTED_EXPERIMENTS';
-export const ADD_MANY_EXPERIMENTS         = EXPERIMENTS_PREFIX + 'ADD_MANY_EXPERIMENTS';
-export const GET_EXPERIMENTS              = EXPERIMENTS_PREFIX + 'GET_EXPERIMENTS';
-export const REFRESH_EXPERIMENTS          = EXPERIMENTS_PREFIX + 'REFRESH_EXPERIMENTS';
-export const GET_NEXT_EXPERIMENTS         = EXPERIMENTS_PREFIX + 'GET_NEXT_EXPERIMENTS';
-export const SET_EXPERIMENTS              = EXPERIMENTS_PREFIX + 'SET_EXPERIMENTS';
-export const SET_NEXT_PAGE                = EXPERIMENTS_PREFIX + 'SET_NEXT_PAGE';
-export const SET_SELECTED_EXPERIMENTS     = EXPERIMENTS_PREFIX + 'SET_SELECTED_EXPERIMENTS';
-export const SET_SELECTED_EXPERIMENT      = EXPERIMENTS_PREFIX + 'SET_SELECTED_EXPERIMENT';
-export const SET_VIEW_MODE                = EXPERIMENTS_PREFIX + 'SET_VIEW_MODE';
-export const SET_NO_MORE_EXPERIMENTS      = EXPERIMENTS_PREFIX + 'SET_NO_MORE_EXPERIMENTS';
-export const REMOVE_MANY_EXPERIMENTS      = EXPERIMENTS_PREFIX + 'REMOVE_MANY_EXPERIMENTS';
-export const UPDATE_ONE_EXPERIMENTS       = EXPERIMENTS_PREFIX + 'UPDATE_ONE_EXPERIMENTS';
-export const RESET_EXPERIMENTS            = EXPERIMENTS_PREFIX + 'RESET_EXPERIMENTS';
+export const ADD_MANY_EXPERIMENTS = EXPERIMENTS_PREFIX + 'ADD_MANY_EXPERIMENTS';
+export const GET_EXPERIMENTS = EXPERIMENTS_PREFIX + 'GET_EXPERIMENTS';
+export const REFRESH_EXPERIMENTS = EXPERIMENTS_PREFIX + 'REFRESH_EXPERIMENTS';
+export const GET_NEXT_EXPERIMENTS = EXPERIMENTS_PREFIX + 'GET_NEXT_EXPERIMENTS';
+export const SET_EXPERIMENTS = EXPERIMENTS_PREFIX + 'SET_EXPERIMENTS';
+export const SET_NEXT_PAGE = EXPERIMENTS_PREFIX + 'SET_NEXT_PAGE';
+export const SET_SELECTED_EXPERIMENTS = EXPERIMENTS_PREFIX + 'SET_SELECTED_EXPERIMENTS';
+export const SET_SELECTED_EXPERIMENT = EXPERIMENTS_PREFIX + 'SET_SELECTED_EXPERIMENT';
+export const SET_VIEW_MODE = EXPERIMENTS_PREFIX + 'SET_VIEW_MODE';
+export const SET_NO_MORE_EXPERIMENTS = EXPERIMENTS_PREFIX + 'SET_NO_MORE_EXPERIMENTS';
+export const REMOVE_MANY_EXPERIMENTS = EXPERIMENTS_PREFIX + 'REMOVE_MANY_EXPERIMENTS';
+export const UPDATE_ONE_EXPERIMENTS = EXPERIMENTS_PREFIX + 'UPDATE_ONE_EXPERIMENTS';
+export const RESET_EXPERIMENTS = EXPERIMENTS_PREFIX + 'RESET_EXPERIMENTS';
 
-export const SHOW_ALL_SELECTED               = EXPERIMENTS_PREFIX + 'SHOW_ALL_SELECTED';
+export const SHOW_ALL_SELECTED = EXPERIMENTS_PREFIX + 'SHOW_ALL_SELECTED';
 export const SET_SHOW_ALL_SELECTED_IS_ACTIVE = EXPERIMENTS_PREFIX + 'SET_SHOW_ALL_SELECTED_IS_ACTIVE';
 // EVENTS:
-export const ARCHIVE_MODE_CHANGED            = EXPERIMENTS_PREFIX + 'ARCHIVE_MODE_CHANGED';
+export const ARCHIVE_MODE_CHANGED = EXPERIMENTS_PREFIX + 'ARCHIVE_MODE_CHANGED';
 
-export const GLOBAL_FILTER_CHANGED        = EXPERIMENTS_PREFIX + 'GLOBAL_FILTER_CHANGED';
-export const TABLE_SORT_CHANGED           = EXPERIMENTS_PREFIX + 'TABLE_SORT_CHANGED';
-export const TABLE_FILTER_CHANGED         = EXPERIMENTS_PREFIX + 'TABLE_FILTER_CHANGED';
+export const GLOBAL_FILTER_CHANGED = EXPERIMENTS_PREFIX + 'GLOBAL_FILTER_CHANGED';
+export const TABLE_SORT_CHANGED = EXPERIMENTS_PREFIX + 'TABLE_SORT_CHANGED';
+export const TABLE_FILTER_CHANGED = EXPERIMENTS_PREFIX + 'TABLE_FILTER_CHANGED';
 export const SET_TABLE_FILTERS = EXPERIMENTS_PREFIX + 'SET_TABLE_FILTERS';
 export const GET_PROJECT_TYPES = EXPERIMENTS_PREFIX + 'GET_PROJECT_TYPES';
 export const SET_PROJECT_TYPES = EXPERIMENTS_PREFIX + 'SET_PROJECT_TYPES';
 export const EXPERIMENT_SELECTION_CHANGED = EXPERIMENTS_PREFIX + 'EXPERIMENT_SELECTION_CHANGED';
 // export const EXPERIMENTS_SELECTION_CHANGED = EXPERIMENTS_PREFIX + 'EXPERIMENTS_SELECTION_CHANGED';
-export const TOGGLE_COL_HIDDEN            = EXPERIMENTS_PREFIX + 'TOGGLE_COL_HIDDEN';
+export const TOGGLE_COL_HIDDEN = EXPERIMENTS_PREFIX + 'TOGGLE_COL_HIDDEN';
 
 export class GetExperiments implements Action {
   readonly type = GET_EXPERIMENTS;
@@ -73,7 +74,7 @@ export class SetExperiments implements Action {
 
 export const setExperimentInPlace = createAction(
   EXPERIMENTS_PREFIX + '[set experiment in place]',
-  props<{experiments: ITableExperiment[]}>()
+  props<{ experiments: ITableExperiment[] }>()
 );
 
 export class SetNoMoreExperiments implements Action {
@@ -136,17 +137,30 @@ export class ToggleColHidden implements Action {
 
 export const setHiddenColumns = createAction(
   EXPERIMENTS_PREFIX + 'SET_HIDDEN_COLS',
-  props<{visibleColumns: string[]}>()
+  props<{ visibleColumns: string[] }>()
 );
 
 export const setUsers = createAction(
   EXPERIMENTS_PREFIX + 'SET_USERS',
-  props<{users: User[]}>()
+  props<{ users: User[] }>()
 );
 
+
+
 export const getUsers = createAction(
   EXPERIMENTS_PREFIX + 'GET_USERS');
 
+export const getFilteredUsers = createAction(
+  EXPERIMENTS_PREFIX + 'GET_FILTERED_USERS');
+
+export const getTags = createAction(
+  EXPERIMENTS_PREFIX + 'GET_TAGS');
+
+export const setTags = createAction(
+  EXPERIMENTS_PREFIX + 'SET_TAGS',
+  props<{ tags: string[] }>()
+);
+
 export class TableSortChanged implements Action {
   public type = TABLE_SORT_CHANGED;
   public payload: { colId: string; sortOrder: (TableSortOrderEnum) };
@@ -159,17 +173,18 @@ export class TableSortChanged implements Action {
 export class TableFilterChanged implements Action {
   public type = TABLE_FILTER_CHANGED;
 
-  constructor(public payload: TableFilter) {}
+  constructor(public payload: TableFilter) {
+  }
 }
 
 export const setTableFilters = createAction(
   SET_TABLE_FILTERS,
-  props<{filters: TableFilter[]}>()
+  props<{ filters: TableFilter[] }>()
 );
 
 export const setProjectsTypes = createAction(
   SET_PROJECT_TYPES,
-  props<{ types?: Array<string>}>()
+  props<{ types?: Array<string> }>()
 );
 
 export const getProjectTypes = createAction(
@@ -210,14 +225,14 @@ export class ArchivedModeChanged implements Action {
 export class ArchivedSelectedExperiments implements Action {
   public type = ARCHIVE_SELECTED_EXPERIMENTS;
 
-  constructor(public payload: { projectId: string }) {
+  constructor(public payload: { skipUndo?: boolean }) {
   }
 }
 
 export class RestoreSelectedExperiments implements Action {
   public type = RESTORE_SELECTED_EXPERIMENTS;
 
-  constructor(public payload: { projectId: string }) {
+  constructor(public payload: { skipUndo?: boolean }) {
   }
 }
 
@@ -237,16 +252,16 @@ export class ResetExperiments implements Action {
   }
 }
 
-export const GET_CUSTOM_METRICS      = EXPERIMENTS_PREFIX + 'GET_CUSTOM_METRICS';
+export const GET_CUSTOM_METRICS = EXPERIMENTS_PREFIX + 'GET_CUSTOM_METRICS';
 export const GET_CUSTOM_HYPER_PARAMS = EXPERIMENTS_PREFIX + 'GET_CUSTOM_HYPER_PARAMS';
-export const SET_CUSTOM_METRICS      = EXPERIMENTS_PREFIX + 'SET_CUSTOM_METRICS';
+export const SET_CUSTOM_METRICS = EXPERIMENTS_PREFIX + 'SET_CUSTOM_METRICS';
 export const SET_CUSTOM_HYPER_PARAMS = EXPERIMENTS_PREFIX + 'SET_CUSTOM_HYPER_PARAMS';
-export const ADD_COL                 = EXPERIMENTS_PREFIX + 'ADD_COL';
-export const REMOVE_COL              = EXPERIMENTS_PREFIX + 'REMOVE_COL';
+export const ADD_COL = EXPERIMENTS_PREFIX + 'ADD_COL';
+export const REMOVE_COL = EXPERIMENTS_PREFIX + 'REMOVE_COL';
 export const SET_COLS_ORDER = EXPERIMENTS_PREFIX + 'SET_COLS_ORDER';
 export const CHANGE_COLS_ORDER = EXPERIMENTS_PREFIX + 'CHANGE_COLS_ORDER';
 export const CLEAR_HYPER_PARAMS_COLS = EXPERIMENTS_PREFIX + 'CLEAR_COLS';
-export const RESET_SORT_ORDER        = EXPERIMENTS_PREFIX + 'RESET_SORT_ORDER';
+export const RESET_SORT_ORDER = EXPERIMENTS_PREFIX + 'RESET_SORT_ORDER';
 
 export class GetCustomMetrics implements Action {
   readonly type = GET_CUSTOM_METRICS;
@@ -276,7 +291,7 @@ export class SetCustomHyperParams implements Action {
 
 export const setExtraColumns = createAction(
   EXPERIMENTS_PREFIX + 'SET_EXTRA_COLUMNS',
-  props<{columns: any[]}>()
+  props<{ columns: any[] }>()
 );
 
 export class AddCol implements Action {
@@ -290,22 +305,24 @@ export class AddCol implements Action {
 
 export class RemoveCol implements Action {
   public type = REMOVE_COL;
-  public payload: { col: {id: string; projectId: string} };
+  public payload: { col: { id: string; projectId: string } };
 
-  constructor(col: {id: string; projectId: string}) {
+  constructor(col: { id: string; projectId: string }) {
     this.payload = {col};
   }
 }
+
 export const changeColsOrder = createAction(
   EXPERIMENTS_PREFIX + 'CHANGE_COLS_ORDER',
-  props<{cols: string[]}>()
+  props<{ cols: string[] }>()
 );
 
 
 export const setColsOrderForProject = createAction(
   EXPERIMENTS_PREFIX + 'SET_COLS_ORDER',
-  props<{cols: string[]; project: string}>()
+  props<{ cols: string[]; project: string }>()
 );
+
 export class ClearHyperParamsCols implements Action {
   public type = CLEAR_HYPER_PARAMS_COLS;
   public payload: { projectId };
@@ -321,10 +338,10 @@ export class ResetSortOrder implements Action {
 
 export const setArchive = createAction(
   EXPERIMENTS_PREFIX + 'SET_ARCHIVE',
-  props<{archive: boolean}>()
+  props<{ archive: boolean }>()
 );
 
 export const afterSetArchive = createAction(EXPERIMENTS_PREFIX + 'AFTER_SET_ARCHIVE');
 
-export const setSplitSize = createAction( EXPERIMENTS_PREFIX + 'SET_SPLIT_SIZE', props<{splitSize: number}>()
+export const setSplitSize = createAction(EXPERIMENTS_PREFIX + 'SET_SPLIT_SIZE', props<{ splitSize: number }>()
 );
diff --git a/src/app/webapp-common/experiments/common-experiments.component.html b/src/app/webapp-common/experiments/common-experiments.component.html
index 6b5ed575..84c0afa1 100644
--- a/src/app/webapp-common/experiments/common-experiments.component.html
+++ b/src/app/webapp-common/experiments/common-experiments.component.html
@@ -17,8 +17,8 @@
   (setAutoRefresh)="setAutoRefresh($event)"
   (clearSelection)="clearSelection()"
 ></sm-experiment-header>
-<div class="experiment-body" [class.compare]="((selectedExperiments$ | async) && (selectedExperiments$ | async)?.length > 1) || (showAllSelectedIsActive$ |async)">
-  <as-split gutterDblClickDuration="400" (gutterDblClick)="closeExperimentPanel()" (dragEnd)="splitSizeChange($event)" (dragStart)="disableInfoPanel()">
+<div class="experiment-body" [class.footer-visible]="((selectedExperiments$ | async) && (selectedExperiments$ | async)?.length > 1) || (showAllSelectedIsActive$ |async)">
+  <as-split gutterDblClickDuration="400" (gutterClick)="clickOnSplit()" (gutterDblClick)="closeExperimentPanel()" (dragEnd)="splitSizeChange($event)" (dragStart)="disableInfoPanel()">
     <as-split-area [size]="100 - (selectSplitSize$ | async)">
       <sm-experiments-table
         class="align-self-stretch"
@@ -37,6 +37,7 @@
         [selectedExperiment]="selectedExperiment$ |async"
         [minimizedView]="(showInfo$ | async)"
         [noMoreExperiments]="noMoreExperiments$ | async"
+        [split]="selectSplitSize$ | async"
         (experimentSelectionChanged)="experimentSelectionChanged($event)"
         (experimentsSelectionChanged)="experimentsSelectionChanged($event)"
         (sortedChanged)="sortedChanged($event)"
@@ -53,15 +54,14 @@
     </as-split-area>
   </as-split>
 </div>
-<sm-experiment-footer
-  [visible]="((selectedExperiments$ | async) && (selectedExperiments$ | async)?.length > 1) || (showAllSelectedIsActive$ |async)"
-  [numberOfSelectedExperiments]="(selectedExperiments$ | async)?.length"
-  [disableArchive]="(selectedExperiments$ | async) | hasExampleItem"
-  [archiveToolTipMessage]="((selectedExperiments$ | async) | hasExampleItem)?'Archiving is disabled as one or more of the experiments you chose are example experiments':null"
+<sm-entity-footer
+  entitiesType="experiments"
+  [visible]="(selectedExperiments$ | async)?.length > 1 || (showAllSelectedIsActive$ |async)"
+  [numberOfSelectedEntities]="(selectedExperiments$ | async)?.length"
   [showAllSelectedIsActive]="showAllSelectedIsActive$ |async"
   [isArchivedMode]="isArchived$ | async"
-  (restoreExperimentsClicked)="restoreExperiments()"
-  (compareExperimentsClicked)="compareExperiments()"
-  (archiveExperimentsClicked)="archiveExperiments()"
+  (compareEntitiesClicked)="compareExperiments()"
   (showAllSelectedClicked)="showAllSelected($event)"
-></sm-experiment-footer>
+  (archiveEntitiesClicked)="archiveExperiments()"
+  (restoreEntitiesClicked)="restoreExperiments()"
+></sm-entity-footer>
diff --git a/src/app/webapp-common/experiments/common-experiments.component.scss b/src/app/webapp-common/experiments/common-experiments.component.scss
index 38e30cbb..82d9b8d7 100644
--- a/src/app/webapp-common/experiments/common-experiments.component.scss
+++ b/src/app/webapp-common/experiments/common-experiments.component.scss
@@ -1,11 +1,11 @@
-@import "./../../webapp-common/shared/ui-components/styles/variables";
-@import "./../../webapp-common/layout/layout.scss";
+@import "./../shared/ui-components/styles/variables";
+@import "./../layout/layout.scss";
 
 :host {
   .experiment-body {
     width: 100%;
     height: calc(100% - #{$project-header-height});
-    &.compare {
+    &.footer-visible {
       height: calc(100% - #{$project-header-height + $project-footer-height});
     }
   }
diff --git a/src/app/webapp-common/experiments/common-experiments.component.ts b/src/app/webapp-common/experiments/common-experiments.component.ts
index a034ddfb..b4cc75c1 100644
--- a/src/app/webapp-common/experiments/common-experiments.component.ts
+++ b/src/app/webapp-common/experiments/common-experiments.component.ts
@@ -1,12 +1,12 @@
 import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
-import {selectExperimentsHiddenTableCols, selectExperimentsList, selectExperimentsMetricsCols, selectExperimentsTableCols, selectExperimentsTableColsOrder, selectGlobalFilter, selectHyperParamsVariants, selectIsExperimentInEditMode, selectNoMoreExperiments, selectSelectedExperiments, selectSelectedTableExperiment, selectShowAllSelectedIsActive, selectTableFilters, selectTableSortField, selectTableSortOrder, selectExperimentsUsers, selectExperimentsTypes} from './reducers/index';
+import {selectExperimentsHiddenTableCols, selectExperimentsList, selectExperimentsMetricsCols, selectExperimentsTableCols, selectExperimentsTableColsOrder, selectGlobalFilter, selectHyperParamsVariants, selectIsExperimentInEditMode, selectNoMoreExperiments, selectSelectedExperiments, selectSelectedTableExperiment, selectShowAllSelectedIsActive, selectTableFilters, selectTableSortField, selectTableSortOrder, selectExperimentsUsers, selectExperimentsTypes, selectExperimentsTags} from './reducers/index';
 import {selectIsArchivedMode, selectProjectSystemTags, selectProjectTags} from '../core/reducers/projects.reducer';
 import {select, Store} from '@ngrx/store';
 import {ColHeaderTypeEnum, ISmCol, TableSortOrderEnum} from '../shared/ui-components/data/table/table.consts';
 import {ActivatedRoute, Params, Router} from '@angular/router';
 import {get, isEqual} from 'lodash/fp';
 import {selectRouterParams} from '../core/reducers/router-reducer';
-import {filter, map, skip, tap, withLatestFrom} from 'rxjs/operators';
+import {filter, map, skip, tap, withLatestFrom, distinctUntilChanged} from 'rxjs/operators';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 import {combineLatest, Observable, Subscription} from 'rxjs';
 import {ConfirmDialogComponent} from '../shared/ui-components/overlay/confirm-dialog/confirm-dialog.component';
@@ -29,6 +29,7 @@ import {getTags, ResetProjectSelection} from '../core/actions/projects.actions';
 import {decodeColumns, decodeFilter, decodeOrder, MetricColumn} from '../shared/utils/tableParamEncode';
 import {BaseEntityPage} from '../shared/entity-page/base-entity-page';
 import {User} from '../../business-logic/model/users/user';
+import {groupHyperParams} from '../shared/utils/shared-utils';
 
 @Component({
   selector       : 'sm-common-experiments',
@@ -53,7 +54,7 @@ export class CommonExperimentsComponent extends BaseEntityPage implements OnInit
   public filteredTableCols$: Observable<ISmCol[]>;
   public tableCols$: Observable<ISmCol[]>;
   public metricVariants$: Observable<any>;
-  public hyperParams$: Observable<any>;
+  public hyperParams$: Observable<any[] >;
   private hiddenTableCols$: Observable<any>;
   private metricTableCols$: Observable<any>;
   private searchSubs: Subscription;
@@ -81,7 +82,7 @@ export class CommonExperimentsComponent extends BaseEntityPage implements OnInit
 
   constructor(
     protected store: Store<IExperimentsViewState>, private route: ActivatedRoute,
-    private router: Router, private dialog: MatDialog, private syncSelector: SmSyncStateSelectorService
+    private router: Router, private dialog: MatDialog
   ) {
     super(store);
     this.tableSortField$ = this.store.select(selectTableSortField).pipe(tap(field => this.sortField = field));
@@ -100,7 +101,7 @@ export class CommonExperimentsComponent extends BaseEntityPage implements OnInit
     this.isExperimentInEditMode$ = this.store.select(selectIsExperimentInEditMode);
     this.users$ = this.store.select(selectExperimentsUsers);
     this.types$ = this.store.select(selectExperimentsTypes);
-    this.tags$ = this.store.select(selectProjectTags);
+    this.tags$ = this.store.select(selectExperimentsTags);
     this.systemTags$ = this.store.select(selectProjectSystemTags);
 
 
@@ -112,12 +113,14 @@ export class CommonExperimentsComponent extends BaseEntityPage implements OnInit
     this.columns$ = this.store.select(selectExperimentsTableCols);
     this.metricVariants$ = this.store.select(selectMetricVariants);
     this.metricLoading$ = this.store.select(selectMetricsLoading);
-    this.hyperParams$ = this.store.select(selectHyperParamsVariants);
+    this.hyperParams$ = this.store.select(selectHyperParamsVariants).pipe(
+      map(hyperParams => groupHyperParams(hyperParams))
+    );
     this.experiments$ = this.store.select(selectExperimentsList).pipe(
       withLatestFrom(this.isArchived$),
       // lil hack for hiding archived task after they been archived from task info or footer...
       map(([experiments, showArchived]) => this.filterArchivedExperiments(experiments, showArchived)),
-      tap(_ => this.refreshing = false)
+      tap(() => this.refreshing = false)
     );
     this.showInfo$ = this.store.pipe(
       select(selectRouterParams),
@@ -137,14 +140,14 @@ export class CommonExperimentsComponent extends BaseEntityPage implements OnInit
       .pipe(
         map(([tableCols, hiddenCols, metricCols]) =>
           tableCols.concat(metricCols.map(col => ({...col, metric: true})))
-            .map(col => ({...col, hidden: hiddenCols[col.id] || null}))),
-        filter(col => col.id !== EXPERIMENTS_TABLE_COL_FIELDS.PROJECT || this.selectedProject == '*')
+            .map(col => ({...col, hidden: hiddenCols[col.id] || null}))
+            .filter(col => col.id !== EXPERIMENTS_TABLE_COL_FIELDS.PROJECT || this.selectedProject == '*'))
       ); // Only show project col on "all projects"
 
     this.tableCols$ = this.filteredTableCols$.pipe(map(cols => cols.filter(col => !col.hidden)));
     let prevQueryParams: Params;
 
-    this.selectedProjectSubs = combineLatest( [
+    this.selectedProjectSubs = combineLatest([
       this.store.select(selectRouterParams),
       this.route.queryParams
     ]).pipe(
@@ -188,6 +191,7 @@ export class CommonExperimentsComponent extends BaseEntityPage implements OnInit
       }
       this.dispatchAndLock(new experimentsActions.GetExperiments());
       this.store.dispatch(experimentsActions.getUsers());
+      this.store.dispatch(experimentsActions.getTags());
       this.store.dispatch(getTags());
       this.store.dispatch(getProjectTypes());
     });
@@ -220,12 +224,13 @@ export class CommonExperimentsComponent extends BaseEntityPage implements OnInit
   }
 
   selectExperimentFromUrl() {
-    this.ExperimentFromUrlSub = combineLatest(
+    this.ExperimentFromUrlSub = combineLatest([
       this.store.select(selectRouterParams)
         .pipe(map(params => get('experimentId', params))),
       this.experiments$
-    ).pipe(
-      map(([experimentId, experiments]) => experiments.find(experiment => experiment.id === experimentId))
+    ]).pipe(
+      map(([experimentId, experiments]) => experiments.find(experiment => experiment.id === experimentId)),
+      distinctUntilChanged()
     ).subscribe((selectedExperiment) => {
       this.store.dispatch(new experimentsActions.SetSelectedExperiment(selectedExperiment));
     });
@@ -237,9 +242,9 @@ export class CommonExperimentsComponent extends BaseEntityPage implements OnInit
 
   filterArchivedExperiments(experiments, showArchived) {
     if (showArchived) {
-      return experiments.filter(ex => ex.system_tags && ex.system_tags.includes('archived'));
+      return experiments.filter(ex => ex?.system_tags?.includes('archived'));
     } else {
-      return experiments.filter(ex => !ex.system_tags || !(ex.system_tags.includes('archived')));
+      return experiments.filter(ex => !(ex?.system_tags?.includes('archived')));
     }
   }
 
@@ -269,11 +274,11 @@ export class CommonExperimentsComponent extends BaseEntityPage implements OnInit
   }
 
   archiveExperiments() {
-    this.store.dispatch(new experimentsActions.ArchivedSelectedExperiments({projectId: this.projectId}));
+    this.store.dispatch(new experimentsActions.ArchivedSelectedExperiments({}));
   }
 
   restoreExperiments() {
-    this.store.dispatch(new experimentsActions.RestoreSelectedExperiments({projectId: this.projectId}));
+    this.store.dispatch(new experimentsActions.RestoreSelectedExperiments({}));
   }
 
   onSearchValueChanged(value: string) {
@@ -363,7 +368,7 @@ export class CommonExperimentsComponent extends BaseEntityPage implements OnInit
 
   createParamColumn(param: string) {
     return {
-      id        : `execution.parameters.${param}`,
+      id        : `hyperparams.${param}`,
       headerType  : ColHeaderTypeEnum.sort,
       sortable  : true,
       filterable: false,
@@ -406,8 +411,12 @@ export class CommonExperimentsComponent extends BaseEntityPage implements OnInit
   }
 
   closeExperimentPanel() {
-    const params = this.syncSelector.selectSync(selectRouterParams);
-    this.router.navigate([`projects/${params.projectId}/experiments`], {queryParamsHandling: 'merge'});
+    this.router.navigate([`projects/${this.projectId}/experiments`], {queryParamsHandling: 'merge'});
+    window.setTimeout(() => this.infoDisabled = false);
+  }
+
+  clickOnSplit() {
+    this.infoDisabled = false;
   }
 
   setAutoRefresh($event: boolean) {
@@ -423,7 +432,7 @@ export class CommonExperimentsComponent extends BaseEntityPage implements OnInit
   }
 
   refreshTagsList() {
-    this.store.dispatch(getTags());
+    this.store.dispatch(experimentsActions.getTags());
   }
 
   refreshTypesList() {
diff --git a/src/app/webapp-common/experiments/common-experiments.module.ts b/src/app/webapp-common/experiments/common-experiments.module.ts
index 8fedea79..b643fa9e 100644
--- a/src/app/webapp-common/experiments/common-experiments.module.ts
+++ b/src/app/webapp-common/experiments/common-experiments.module.ts
@@ -10,13 +10,12 @@ import {CommonExperimentsMenuEffects} from './effects/common-experiments-menu.ef
 import {ExperimentHeaderComponent} from './dumb/experiment-header/experiment-header.component';
 import {ExperimentInfoHeaderComponent} from './dumb/experiment-info-header/experiment-info-header.component';
 import {ExperimentsTableComponent} from './dumb/experiments-table/experiments-table.component';
-import {ExperimentFooterComponent} from './dumb/experiment-footer/experiment-footer.component';
 import {ExperimentOutputComponent} from './containers/experiment-ouptut/experiment-output.component';
 import {ExperimentOutputLogComponent} from './containers/experiment-output-log/experiment-output-log.component';
 import {ExperimentLogInfoComponent} from './dumb/experiment-log-info/experiment-log-info.component';
 import {ExperimentInfoGeneralComponent} from './containers/experiment-info-general/experiment-info-general.component';
 import {ExperimentGeneralInfoComponent} from './dumb/experiment-general-info/experiment-general-info.component';
-import {ExperimentModelsFormComponent} from './dumb/experiment-models-form/experiment-models-form.component';
+import {ExperimentInputModelFormComponent} from './dumb/experiment-input-model-form/experiment-input-model-form.component';
 import {ExperimentNetworkDesignFormComponent} from './dumb/experiment-network-design-form/experiment-network-design-form.component';
 import {ExperimentModelsFormViewComponent} from './dumb/experiment-models-form-view/experiment-models-form-view.component';
 import {ExperimentExecutionFormComponent} from './dumb/experiment-execution-form/experiment-execution-form.component';
@@ -41,11 +40,10 @@ import {ExperimentCompareSharedModule} from '../experiments-compare/shared/exper
 import {ExperimentCustomColsMenuComponent} from './dumb/experiment-custom-cols-menu/experiment-custom-cols-menu.component';
 import {SelectMetricForCustomColComponent} from './dumb/select-metric-for-custom-col/select-metric-for-custom-col.component';
 import {ExperimentInfoHyperParametersComponent} from './containers/experiment-info-hyper-parameters/experiment-info-hyper-parameters.component';
-import {ExperimentHyperParamsFormComponent} from './dumb/experiment-hyper-params-form/experiment-hyper-params-form.component';
 import {ExperimentExecutionDiffComponent} from './dumb/experiment-execution-diff/experiment-execution-diff.component';
 import {ExperimentExecutionRequirementsComponent} from './dumb/experiment-execution-requirements/experiment-execution-requirements.component';
 import {SelectHyperParamsForCustomColComponent} from './dumb/select-hyper-params-for-custom-col/select-hyper-params-for-custom-col.component';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {ExperimentArtifactsNavbarComponent} from './dumb/experiment-artifacts-navbar/experiment-artifacts-navbar.component';
 import {ExperimentOutputModelViewComponent} from './dumb/experiment-output-model-view/experiment-output-model-view.component';
 import {ExperimentInfoArtifactsComponent} from './containers/experiment-info-aritfacts/experiment-info-artifacts.component';
@@ -54,11 +52,16 @@ import {ExperimentInfoOutputModelComponent} from './containers/experiment-info-o
 import {ExperimentInfoArtifactItemComponent} from './containers/experiment-info-artifact-item/experiment-info-artifact-item.component';
 import {ExperimentArtifactItemViewComponent} from './dumb/experiment-artifact-item-view/experiment-artifact-item-view.component';
 import {ExperimentInfoInputModelComponent} from './containers/experiment-info-input-model/experiment-info-input-model.component';
-import { ExperimentOrchestrationFormComponent } from './dumb/experiment-orchestration-form/experiment-orchestration-form.component';
+import {ExperimentOrchestrationFormComponent} from './dumb/experiment-orchestration-form/experiment-orchestration-form.component';
 import {ScrollingModule} from '@angular/cdk/scrolling';
 import {BaseClickableArtifact} from './dumb/base-clickable-artifact';
 import {BaseExperimentMenuComponent} from './shared/components/base-experiment-menu';
 import {NoUnderscorePipe} from '../shared/pipes/no-underscore.pipe';
+import {ExperimentHyperParamsNavbarComponent} from './dumb/experiment-hyper-params-navbar/experiment-hyper-params-navbar.component';
+import {ExperimentInfoTaskModelComponent} from './containers/experiment-info-task-model/experiment-info-task-model.component';
+import {ExperimentInfoHyperParametersFormContainerComponent} from './containers/experiment-info-hyper-parameters-form-container/experiment-info-hyper-parameters-form-container.component';
+import {ExperimentTaskModelFormComponent} from './dumb/experiment-task-model-form/experiment-task-model-form.component';
+import {SharedModule} from '../../shared/shared.module';
 
 @NgModule({
   declarations   : [
@@ -71,13 +74,14 @@ import {NoUnderscorePipe} from '../shared/pipes/no-underscore.pipe';
     ExperimentInfoHeaderComponent,
     ExperimentsTableComponent,
     ExperimentInfoInputModelComponent,
-    ExperimentFooterComponent,
+    ExperimentInfoTaskModelComponent,
     ExperimentOutputComponent,
     ExperimentOutputLogComponent,
     ExperimentLogInfoComponent,
     ExperimentInfoGeneralComponent,
     ExperimentGeneralInfoComponent,
-    ExperimentModelsFormComponent,
+    ExperimentInputModelFormComponent,
+    ExperimentTaskModelFormComponent,
     ExperimentNetworkDesignFormComponent,
     ExperimentModelsFormViewComponent,
     ExperimentOutputModelViewComponent,
@@ -91,11 +95,12 @@ import {NoUnderscorePipe} from '../shared/pipes/no-underscore.pipe';
     ExperimentCustomColsMenuComponent,
     ExperimentTableCardComponent,
     ExperimentInfoHyperParametersComponent,
-    ExperimentHyperParamsFormComponent,
+    ExperimentInfoHyperParametersFormContainerComponent,
     ExperimentExecutionDiffComponent,
     ExperimentExecutionRequirementsComponent,
     ExperimentArtifactsNavbarComponent,
     ExperimentInfoArtifactsComponent,
+    ExperimentHyperParamsNavbarComponent,
     ExperimentOutputModelFormComponent,
     ExperimentInfoOutputModelComponent,
     ExperimentInfoArtifactItemComponent,
@@ -104,24 +109,25 @@ import {NoUnderscorePipe} from '../shared/pipes/no-underscore.pipe';
     BaseExperimentMenuComponent
   ],
   exports        : [ExperimentTypeIconLabelComponent, CommonExperimentsComponent, ExperimentInfoHeaderComponent, ExperimentExecutionFormComponent],
-  imports        : [
-    AngularSplitModule.forRoot(),
-    ScrollingModule,
-    ExperimentGraphsModule,
-    SMMaterialModule,
-    FormsModule,
-    ReactiveFormsModule,
-    ExperimentCompareSharedModule,
-    CommonExperimentSharedModule,
-    CommonLayoutModule,
-    ExperimentSharedModule,
-    SMSharedModule,
-    SharedPipesModule,
-    RouterModule,
-    CommonModule,
-    EffectsModule.forFeature([CommonExperimentsViewEffects, CommonExperimentsInfoEffects, CommonExperimentOutputEffects, CommonExperimentsMenuEffects]),
-    MatProgressSpinnerModule,
-  ],
+    imports: [
+        AngularSplitModule.forRoot(),
+        ScrollingModule,
+        ExperimentGraphsModule,
+        SMMaterialModule,
+        FormsModule,
+        ReactiveFormsModule,
+        ExperimentCompareSharedModule,
+        CommonExperimentSharedModule,
+        CommonLayoutModule,
+        ExperimentSharedModule,
+        SMSharedModule,
+        SharedPipesModule,
+        RouterModule,
+        CommonModule,
+        EffectsModule.forFeature([CommonExperimentsViewEffects, CommonExperimentsInfoEffects, CommonExperimentOutputEffects, CommonExperimentsMenuEffects]),
+        MatProgressSpinnerModule,
+        SharedModule,
+    ],
   providers      : [ExperimentTableCardComponent, NoUnderscorePipe, TitleCasePipe]
 })
 export class ExperimentsCommonModule {
diff --git a/src/app/webapp-common/experiments/containers/experiment-info-aritfacts/experiment-info-aritfacts.component.scss b/src/app/webapp-common/experiments/containers/experiment-info-aritfacts/experiment-info-aritfacts.component.scss
index 09bb546d..783d3b78 100644
--- a/src/app/webapp-common/experiments/containers/experiment-info-aritfacts/experiment-info-aritfacts.component.scss
+++ b/src/app/webapp-common/experiments/containers/experiment-info-aritfacts/experiment-info-aritfacts.component.scss
@@ -1,8 +1,30 @@
+@import "../../../shared/ui-components/styles/variables";
+@import "../../../../webapp-common/layout/layout.scss";
+
 :host {
   display: block;
   position: relative;
   height: 100%;
 
+  .no-data{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    .i-no-data-artifacts{
+      width: 200px;
+      height: 160px;
+    }
+    span{
+      font-size: 20px;
+      font-weight: bold;
+      line-height: 1.45;
+      color: $cloudy-blue-two;
+    }
+  }
+
   .col-6 {
     padding: 0;
   }
diff --git a/src/app/webapp-common/experiments/containers/experiment-info-aritfacts/experiment-info-artifacts.component.html b/src/app/webapp-common/experiments/containers/experiment-info-aritfacts/experiment-info-artifacts.component.html
index 45bf0546..72b23ba1 100644
--- a/src/app/webapp-common/experiments/containers/experiment-info-aritfacts/experiment-info-artifacts.component.html
+++ b/src/app/webapp-common/experiments/containers/experiment-info-aritfacts/experiment-info-artifacts.component.html
@@ -1,14 +1,37 @@
-<sm-overlay [backdropActive]="backdropActive$|async"></sm-overlay>
-<div class="h-100 row">
-  <sm-experiment-artifacts-navbar
-    class="col-6"
-    [artifacts]="(modelInfo$| async)?.artifacts"
-    [outputModel]="(ExperimentInfo$ | async)?.model?.output"
-    [activeSection]="activeSection"
-    [routerConfig]="routerConfig$ | async"
-    [selectedArtifactKey]="artifactKey$ | async"
-  ></sm-experiment-artifacts-navbar>
-  <div class="col-18 artifacts-col">
-    <router-outlet></router-outlet>
+<ng-template
+  let-experimentInfo="experimentInfo"
+  let-modelInfo="modelInfo"
+  let-editable="editable"
+  [ngTemplateOutletContext]="{
+    experimentInfo: ExperimentInfo$ | async,
+    modelInfo: modelInfo$ | async,
+    editable: editable$ | async
+  }" [ngTemplateOutlet]="selfie" #selfie>
+  <sm-overlay [backdropActive]="backdropActive$|async"></sm-overlay>
+  <div class="h-100 row" *ngIf="(experimentInfo?.model?.output?.id) ||
+                                (experimentInfo?.model?.input?.id) ||
+                                (modelInfo?.artifacts?.length>0) ||
+                                editable; else noData">
+    <sm-experiment-artifacts-navbar
+      class="col-6"
+      [artifacts]="modelInfo?.artifacts"
+      [outputModel]="experimentInfo?.model?.output"
+      [inputModel]="experimentInfo?.model?.input"
+      [editable]="editable"
+      [activeSection]="activeSection"
+      [routerConfig]="routerConfig$ | async"
+      [selectedArtifactKey]="artifactKey$ | async"
+    ></sm-experiment-artifacts-navbar>
+    <div class="col-18 artifacts-col">
+      <router-outlet></router-outlet>
+    </div>
   </div>
-</div>
+  <ng-template #noData>
+    <div class="d-flex h-100" *ngIf="experimentInfo?.model">
+      <div class="no-data">
+        <i class="icon i-no-data-artifacts"></i>
+        <span>NO ARTIFACTS RECORDED</span>
+      </div>
+    </div>
+  </ng-template>
+</ng-template>
diff --git a/src/app/webapp-common/experiments/containers/experiment-info-aritfacts/experiment-info-artifacts.component.ts b/src/app/webapp-common/experiments/containers/experiment-info-aritfacts/experiment-info-artifacts.component.ts
index 2f265f60..cbdfccaa 100644
--- a/src/app/webapp-common/experiments/containers/experiment-info-aritfacts/experiment-info-artifacts.component.ts
+++ b/src/app/webapp-common/experiments/containers/experiment-info-aritfacts/experiment-info-artifacts.component.ts
@@ -4,7 +4,7 @@ import {selectBackdropActive} from '../../../core/reducers/view-reducer';
 import {combineLatest, Observable, Subscription} from 'rxjs';
 import {IExperimentInfoState} from '../../../../features/experiments/reducers/experiment-info.reducer';
 import {selectExperimentModelInfoData} from '../../reducers';
-import {selectExperimentInfoData} from '../../../../features/experiments/reducers';
+import {selectExperimentInfoData, selectIsExperimentEditable} from '../../../../features/experiments/reducers';
 import {IExperimentInfo} from '../../../../features/experiments/shared/experiment-info.model';
 import {selectRouterConfig, selectRouterParams} from '../../../core/reducers/router-reducer';
 import {map} from 'rxjs/operators';
@@ -29,10 +29,12 @@ export class ExperimentInfoArtifactsComponent implements OnDestroy {
   private onOutputModel$: Observable<boolean>;
   private experimentKey$: Observable<string>;
   public routerConfig$: Observable<string[]>;
+  public editable$: Observable<boolean>;
 
   constructor(private store: Store<IExperimentInfoState>, public router: Router, private route: ActivatedRoute
   ) {
     this.backdropActive$ = this.store.select(selectBackdropActive);
+    this.editable$       = this.store.select(selectIsExperimentEditable);
     this.modelInfo$ = this.store.select(selectExperimentModelInfoData);
     this.ExperimentInfo$ = this.store.select(selectExperimentInfoData);
     this.routerConfig$       = this.store.select(selectRouterConfig);
diff --git a/src/app/webapp-common/experiments/containers/experiment-info-hyper-parameters/experiment-info-hyper-parameters.component.html b/src/app/webapp-common/experiments/containers/experiment-info-hyper-parameters/experiment-info-hyper-parameters.component.html
index 2180256e..a824bf12 100644
--- a/src/app/webapp-common/experiments/containers/experiment-info-hyper-parameters/experiment-info-hyper-parameters.component.html
+++ b/src/app/webapp-common/experiments/containers/experiment-info-hyper-parameters/experiment-info-hyper-parameters.component.html
@@ -1,13 +1,14 @@
 <sm-overlay [backdropActive]="backdropActive$|async"></sm-overlay>
-<sm-experiment-hyper-params-form
-  *ngIf="hyperParamsInfo$ | async"
-  fieldName="hyperParams"
-  [editable]="editable$ | async"
-  [isInDev]="isInDev$ | async"
-  [formData]="hyperParamsInfo$ | async"
-  [saving]="saving$ |async"
-  (formDataChanged)="onFormValuesChanged($event)"
-  (saveFormData)="saveHyperParametersData()"
-  (cancelFormDataChange)="cancelHyperParametersChange()"
-  (activateEdit)="activateEditChanged($event)"
-></sm-experiment-hyper-params-form>
+<div class="h-100 row">
+  <sm-experiment-hyper-params-navbar
+    class="col-6"
+    [hyperParams]="(hyperParamsInfo$| async)"
+    [configuration]="configuration$ | async"
+    [routerConfig]="routerConfig$ | async"
+    [routerParams]="routerParams$ | async"
+    [disableAdd]="!(selectedExperiment?.status === 'created')"
+  ></sm-experiment-hyper-params-navbar>
+  <div class="col-18 hyper-col">
+    <router-outlet></router-outlet>
+  </div>
+</div>
diff --git a/src/app/webapp-common/experiments/containers/experiment-info-hyper-parameters/experiment-info-hyper-parameters.component.scss b/src/app/webapp-common/experiments/containers/experiment-info-hyper-parameters/experiment-info-hyper-parameters.component.scss
index 62e20bc7..122d870b 100644
--- a/src/app/webapp-common/experiments/containers/experiment-info-hyper-parameters/experiment-info-hyper-parameters.component.scss
+++ b/src/app/webapp-common/experiments/containers/experiment-info-hyper-parameters/experiment-info-hyper-parameters.component.scss
@@ -1,4 +1,32 @@
 :host {
   display: block;
   position: relative;
+  height: 100%;
+
+  .col-6 {
+    padding: 0;
+  }
+
+  .hyper-col {
+    overflow: auto;
+    height: 100%;
+    padding: 0;
+  }
+
+  /deep/ sm-labeled-row {
+    border-bottom: none !important;
+  }
+
+  /deep/ hr {
+    margin: 0 26px;
+  }
+
+  /deep/ sm-textarea-control textarea{
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+
+  sm-experiment-hyper-params-navbar {
+    border-right: 1px solid #dee1e9;
+  }
+
 }
diff --git a/src/app/webapp-common/experiments/containers/experiment-info-hyper-parameters/experiment-info-hyper-parameters.component.ts b/src/app/webapp-common/experiments/containers/experiment-info-hyper-parameters/experiment-info-hyper-parameters.component.ts
index 58be1821..99a25a06 100644
--- a/src/app/webapp-common/experiments/containers/experiment-info-hyper-parameters/experiment-info-hyper-parameters.component.ts
+++ b/src/app/webapp-common/experiments/containers/experiment-info-hyper-parameters/experiment-info-hyper-parameters.component.ts
@@ -1,73 +1,84 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Store} from '@ngrx/store';
-import {selectExperimentHyperParamsInfoData, selectIsExperimentSaving, selectIsSelectedExperimentInDev} from '../../reducers';
+import {selectExperimentConfiguration, selectExperimentHyperParamsInfoData, selectExperimentHyperParamsSelectedSectionFromRoute, selectExperimentSelectedConfigObjectFromRoute, selectIsExperimentSaving, selectIsSelectedExperimentInDev} from '../../reducers';
 import {ICommonExperimentInfoState} from '../../reducers/common-experiment-info.reducer';
 import * as infoActions from '../../../../features/experiments/actions/experiments-info.actions';
 import {ExperimentDataUpdated, SetExperimentFormErrors} from '../../../../features/experiments/actions/experiments-info.actions';
 import {ISelectedExperiment} from '../../../../features/experiments/shared/experiment-info.model';
 import {selectBackdropActive} from '../../../core/reducers/view-reducer';
-import {Observable, Subscription} from 'rxjs';
+import {combineLatest, merge, Observable, Subscription} from 'rxjs';
 import {IHyperParamsForm} from '../../shared/experiment-hyper-params.model';
 import {selectIsExperimentEditable, selectSelectedExperiment} from '../../../../features/experiments/reducers';
 import {cloneDeep} from 'lodash/fp';
+import {selectRouterConfig, selectRouterParams} from '../../../core/reducers/router-reducer';
+import {Params, Router} from '@angular/router';
+import {ParamsItem} from '../../../../business-logic/model/tasks/paramsItem';
+import {filter, tap, withLatestFrom} from 'rxjs/operators';
+import {getExperimentConfigurationNames, getExperimentConfigurationObj} from '../../actions/common-experiments-info.actions';
 
 @Component({
-  selector   : 'sm-experiment-info-hyper-parameters',
+  selector: 'sm-experiment-info-hyper-parameters',
   templateUrl: './experiment-info-hyper-parameters.component.html',
-  styleUrls  : ['./experiment-info-hyper-parameters.component.scss']
+  styleUrls: ['./experiment-info-hyper-parameters.component.scss']
 })
 export class ExperimentInfoHyperParametersComponent implements OnInit, OnDestroy {
 
-  public hyperParamsInfo$: Observable<IHyperParamsForm>;
-  // public errors$: Observable<IExecutionForm>;
-  public selectedExperimentSbscrition: Subscription;
-  private selectedExperiment: ISelectedExperiment;
+  public selectedExperiment: ISelectedExperiment;
   public editable$: Observable<boolean>;
   public isInDev$: Observable<boolean>;
   public saving$: Observable<boolean>;
   public backdropActive$: Observable<boolean>;
-  private selectedExperimentSubscrition: Subscription;
+  private selectedExperimentSubscription: Subscription;
+  public routerConfig$: Observable<string[]>;
+  public routerParams$: Observable<Params>;
+  public hyperParamsInfo$: Observable<{ [p: string]: { [p: string]: ParamsItem } }>;
+  public configuration$: Observable<any>;
+  private hyperParamsConfigSubscription: Subscription;
 
-  constructor(private store: Store<ICommonExperimentInfoState>) {
+  constructor(private store: Store<ICommonExperimentInfoState>, protected router: Router) {
     this.hyperParamsInfo$ = this.store.select(selectExperimentHyperParamsInfoData);
-    this.editable$        = this.store.select(selectIsExperimentEditable);
-    this.isInDev$         = this.store.select(selectIsSelectedExperimentInDev);
-    this.saving$          = this.store.select(selectIsExperimentSaving);
-    this.backdropActive$  = this.store.select(selectBackdropActive);
+    this.configuration$ = this.store.select(selectExperimentConfiguration);
+    this.editable$ = this.store.select(selectIsExperimentEditable);
+    this.isInDev$ = this.store.select(selectIsSelectedExperimentInDev);
+    this.saving$ = this.store.select(selectIsExperimentSaving);
+    this.backdropActive$ = this.store.select(selectBackdropActive);
+    this.routerConfig$ = this.store.select(selectRouterConfig);
+    this.routerParams$ = this.store.select(selectRouterParams);
   }
 
   ngOnInit() {
-    this.selectedExperimentSubscrition = this.store.select(selectSelectedExperiment)
+    this.selectedExperimentSubscription = this.store.select(selectSelectedExperiment)
+      .pipe(
+        tap((selectedExperiment) => this.selectedExperiment = selectedExperiment),
+        filter((selectedExperiment) => selectedExperiment && !selectedExperiment.configuration)
+      )
       .subscribe(selectedExperiment => {
-        this.selectedExperiment = selectedExperiment;
+        this.store.dispatch(getExperimentConfigurationNames({experimentId: selectedExperiment.id}));
+        this.store.dispatch(getExperimentConfigurationObj());
       });
+    this.hyperParamsConfigSubscription = combineLatest([this.hyperParamsInfo$, this.configuration$]).pipe(
+      withLatestFrom(
+        this.store.select(selectExperimentHyperParamsSelectedSectionFromRoute),
+        this.store.select(selectExperimentSelectedConfigObjectFromRoute)
+      )).subscribe(([[hyperparams, configuration], selectedHyperParam, selectedConfig]) => {
+      if ((hyperparams && configuration && !(selectedHyperParam in hyperparams) && !(selectedConfig in configuration))) {
+        if (selectedHyperParam) {
+          this.router.navigateByUrl(this.router.url.replace(selectedHyperParam, Object.keys(hyperparams)[0]));
+        } else if (selectedConfig) {
+          this.router.navigateByUrl(this.router.url.replace(`configuration/${selectedConfig}`, `hyper-param/${Object.keys(hyperparams)[0]}`));
+        }
+      }
+    });
     this.store.dispatch(new SetExperimentFormErrors(null));
   }
 
   ngOnDestroy(): void {
-    this.selectedExperimentSubscrition.unsubscribe();
-  }
-
-  onFormValuesChanged(event) {
-    this.store.dispatch(new ExperimentDataUpdated({id: this.selectedExperiment.id, changes: {[event.field]: cloneDeep(event.value)}}));
-  }
-
-  saveHyperParametersData() {
-    this.store.dispatch(new infoActions.SaveExperiment());
-    this.store.dispatch(new infoActions.DeactivateEdit());
-  }
-
-  cancelHyperParametersChange() {
-    this.store.dispatch(new infoActions.DeactivateEdit());
-    this.store.dispatch(new infoActions.CancelExperimentEdit());
+    this.selectedExperimentSubscription.unsubscribe();
+    this.hyperParamsConfigSubscription.unsubscribe();
   }
 
   activateEditChanged(e) {
     this.store.dispatch(new infoActions.ActivateEdit(e.sectionName));
   }
 
-  // onFormErrorsChanged($event) {
-  //
-  // }
-
 }
diff --git a/src/app/webapp-common/experiments/containers/experiment-info-input-model/experiment-info-input-model.component.html b/src/app/webapp-common/experiments/containers/experiment-info-input-model/experiment-info-input-model.component.html
index 1fef896d..895daa6b 100644
--- a/src/app/webapp-common/experiments/containers/experiment-info-input-model/experiment-info-input-model.component.html
+++ b/src/app/webapp-common/experiments/containers/experiment-info-input-model/experiment-info-input-model.component.html
@@ -1,4 +1,4 @@
-<sm-experiment-models-form
+<sm-experiment-input-models-form
   (activateEdit)="activateEditChanged($event)"
   (cancelFormDataChange)="cancelModelChange()"
   (errorsChanged)="onFormErrorsChanged($event)"
@@ -10,10 +10,11 @@
   [editable]="editable$ | async"
   [errors]="(errors$ | async)?.model"
   [formData]="modelInfo$ | async"
+  [experimentName]="(selectedExperiment$ | async).name"
   [modelLabels]="modelLabels$ | async"
   [saving]="saving$ |async"
   [userKnowledge]="(userKnowledge$ | async)"
   fieldName="model"
 >
-</sm-experiment-models-form>
+</sm-experiment-input-models-form>
 
diff --git a/src/app/webapp-common/experiments/containers/experiment-info-input-model/experiment-info-input-model.component.ts b/src/app/webapp-common/experiments/containers/experiment-info-input-model/experiment-info-input-model.component.ts
index 0f6dd0d5..40c90311 100644
--- a/src/app/webapp-common/experiments/containers/experiment-info-input-model/experiment-info-input-model.component.ts
+++ b/src/app/webapp-common/experiments/containers/experiment-info-input-model/experiment-info-input-model.component.ts
@@ -9,6 +9,8 @@ import {IExperimentInfoState} from '../../../../features/experiments/reducers/ex
 import {experimentSectionsEnum} from '../../../../features/experiments/shared/experiments.const';
 import {selectIsExperimentEditable, selectSelectedExperiment} from '../../../../features/experiments/reducers';
 import * as infoActions from '../../../../features/experiments/actions/experiments-info.actions';
+import { ModelSelected } from '../../actions/common-experiments-info.actions';
+
 
 @Component({
   selector   : 'sm-experiment-info-input-model',
@@ -18,12 +20,13 @@ import * as infoActions from '../../../../features/experiments/actions/experimen
 export class ExperimentInfoInputModelComponent implements OnInit, OnDestroy {
   public modelInfo$: Observable<IExperimentModelInfo>;
   public selectedExperimentSubscription: Subscription;
-  private selectedExperiment: ISelectedExperiment;
+  public selectedExperiment: ISelectedExperiment;
   public editable$: Observable<boolean>;
   public errors$: Observable<IExperimentInfoState['errors']>;
   public userKnowledge$: Observable<Map<experimentSectionsEnum, boolean>>;
   public modelLabels$: Observable<Model['labels']>;
   public saving$: Observable<boolean>;
+  public selectedExperiment$: Observable<ISelectedExperiment>;
 
   constructor(private store: Store<IExperimentInfoState>) {
     this.modelInfo$      = this.store.select(selectExperimentModelInfoData);
@@ -31,6 +34,7 @@ export class ExperimentInfoInputModelComponent implements OnInit, OnDestroy {
     this.errors$         = this.store.select(selectExperimentInfoErrors);
     this.userKnowledge$  = this.store.select(selectExperimentUserKnowledge);
     this.saving$         = this.store.select(selectIsExperimentSaving);
+    this.selectedExperiment$  = this.store.select(selectSelectedExperiment)
   }
 
   ngOnInit() {
@@ -54,7 +58,7 @@ export class ExperimentInfoInputModelComponent implements OnInit, OnDestroy {
   }
 
   onModelSelected(event) {
-    this.store.dispatch(new infoActions.ModelSelected(event));
+    this.store.dispatch(new ModelSelected(event));
   }
 
   updateSectionKnowledge(section: experimentSectionsEnum) {
diff --git a/src/app/webapp-common/experiments/containers/experiment-ouptut/experiment-output.component.html b/src/app/webapp-common/experiments/containers/experiment-ouptut/experiment-output.component.html
index 46dcc281..9d27fa65 100644
--- a/src/app/webapp-common/experiments/containers/experiment-ouptut/experiment-output.component.html
+++ b/src/app/webapp-common/experiments/containers/experiment-ouptut/experiment-output.component.html
@@ -24,15 +24,15 @@
       <sm-navbar-item header="DEBUG SAMPLES" [active]="routerConfig.includes('debugImages')"></sm-navbar-item>
     </span>
     <span class="refresh-position">
-      <span id="refreshIcon"></span>
       <sm-experiment-settings
+        [class.maximized]="!minimized"
         [showSettings]="routerConfig.includes('scalar')"
         (toggleSettings)="toggleSettingsBar()">
       </sm-experiment-settings>
       <span *ngIf="routerConfig.includes('log')">
           <button class="btn btn-primary mb-2 mr-2" (click)="downloadLog()" [disabled]="!experimentId">
             <i class="fa fa-download"></i>
-            download full log
+            Download full log
           </button>
       </span>
       <sm-refresh-button
diff --git a/src/app/webapp-common/experiments/containers/experiment-ouptut/experiment-output.component.scss b/src/app/webapp-common/experiments/containers/experiment-ouptut/experiment-output.component.scss
index 48023ac6..fd41ad40 100644
--- a/src/app/webapp-common/experiments/containers/experiment-ouptut/experiment-output.component.scss
+++ b/src/app/webapp-common/experiments/containers/experiment-ouptut/experiment-output.component.scss
@@ -30,6 +30,11 @@ $output-tabs-height: 64px;
     padding: 7px 10px 0 10px;
     border-bottom: 1px solid #efefef;
   }
+  sm-experiment-settings.maximized {
+    display: block;
+    height: 50px;
+    padding-top: 6px;
+  }
 
   nav{
     height: $output-tabs-height;
@@ -41,6 +46,8 @@ $output-tabs-height: 64px;
       position: absolute;
       right: 10px;
       top: 6px;
+      display: flex;
+      align-items: center;
     }
     .refreshIcon{
       margin-right: 10px;
@@ -50,7 +57,7 @@ $output-tabs-height: 64px;
       text-align: left;
 
       .refresh-position {
-        top: 16px;
+        top: 12px;
       }
     }
   }
diff --git a/src/app/webapp-common/experiments/containers/experiment-ouptut/experiment-output.component.ts b/src/app/webapp-common/experiments/containers/experiment-ouptut/experiment-output.component.ts
index 130fa432..26aebef1 100644
--- a/src/app/webapp-common/experiments/containers/experiment-ouptut/experiment-output.component.ts
+++ b/src/app/webapp-common/experiments/containers/experiment-ouptut/experiment-output.component.ts
@@ -16,6 +16,7 @@ import {SetAutoRefresh} from '../../../core/actions/layout.actions';
 import {SmSyncStateSelectorService} from '../../../core/services/sync-state-selector.service';
 import {interval} from 'rxjs/internal/observable/interval';
 import {AUTO_REFRESH_INTERVAL} from '../../../../app.constants';
+import {selectSelectedExperiments} from '../../reducers';
 
 @Component({
   selector   : 'sm-experiment-output',
@@ -38,41 +39,44 @@ export class ExperimentOutputComponent implements OnInit, OnDestroy {
   private routerConfigSubscription: Subscription;
   public routerConfig: string[];
   private isAppVisible$: Observable<boolean>;
+  private selectedExperiments$: Observable<Array<any>>;
 
   constructor(private store: Store<ExperimentOutputState>, private router: Router, private route: ActivatedRoute, private syncSelector: SmSyncStateSelectorService) {
-    this.infoData$         = this.store.select(selectExperimentInfoData);
+    this.infoData$ = this.store.select(selectExperimentInfoData);
     this.autoRefreshState$ = this.store.select(selectAutoRefresh);
     this.isAppVisible$ = this.store.select(selectAppVisible);
 
   }
 
   ngOnInit() {
-    this.minimized                      = getOr(false, 'data.minimized', this.route.snapshot.routeConfig);
-    this.routerConfigSubscription       = this.store.select(selectRouterConfig).subscribe(routerConfig => {
+    this.minimized = getOr(false, 'data.minimized', this.route.snapshot.routeConfig);
+    this.routerConfigSubscription = this.store.select(selectRouterConfig).subscribe(routerConfig => {
       this.routerConfig = routerConfig;
     });
-    this.paramsSubscription             = this.store.pipe(
+    this.paramsSubscription = this.store.pipe(
       select(selectRouterParams),
       tap((params) => this.projectId = params.projectId),
       map(params => get('experimentId', params)),
       filter(experimentId => !!experimentId),
       tap((experimentId) => this.experimentId = experimentId),
-      distinctUntilChanged()
+      distinctUntilChanged(),
+      withLatestFrom(this.store.select(selectSelectedExperiments))
     )
-      .subscribe((experimentId) => {
+      .subscribe(([experimentId, selectedExperiments]) => {
+        this.selectedExperiment = selectedExperiments.find(experiment => experiment.id === experimentId);
         this.store.dispatch(new ResetExperimentMetrics());
         this.store.dispatch(new infoActions.ResetExperimentInfo());
         this.store.dispatch(new infoActions.GetExperimentInfo(experimentId));
       });
-    this.autoRefreshSub                = interval(AUTO_REFRESH_INTERVAL).pipe(
+    this.autoRefreshSub = interval(AUTO_REFRESH_INTERVAL).pipe(
       withLatestFrom(this.autoRefreshState$, this.isAppVisible$),
       filter(([iteration, autoRefreshState, isVisible]) => isVisible && autoRefreshState && !this.minimized)
     ).subscribe(() => {
       this.refresh(true);
     });
-    this.selectedExperimentSubscription = this.store.select(selectSelectedExperiment)
+    this.selectedExperimentSubscription = this.store.pipe(select(selectSelectedExperiment),
+      filter(experiment => experiment?.id === this.experimentId))
       .subscribe(experiment => this.selectedExperiment = experiment);
-
   }
 
 
diff --git a/src/app/webapp-common/experiments/containers/experiment-output-log/experiment-output-log.component.html b/src/app/webapp-common/experiments/containers/experiment-output-log/experiment-output-log.component.html
index b0277b93..81eef7ef 100644
--- a/src/app/webapp-common/experiments/containers/experiment-output-log/experiment-output-log.component.html
+++ b/src/app/webapp-common/experiments/containers/experiment-output-log/experiment-output-log.component.html
@@ -19,6 +19,9 @@
 </div>
 
 <sm-experiment-log-info *ngIf="hasLog"
+  #log
   [logs]="log$ | async"
+  [beginningOfLog]="logBeginning$ | async"
   [filterString]="filter$ | async"
+  (fetchMore)="getLogs($event)"
 ></sm-experiment-log-info>
diff --git a/src/app/webapp-common/experiments/containers/experiment-output-log/experiment-output-log.component.ts b/src/app/webapp-common/experiments/containers/experiment-output-log/experiment-output-log.component.ts
index ef865e33..7447445a 100644
--- a/src/app/webapp-common/experiments/containers/experiment-output-log/experiment-output-log.component.ts
+++ b/src/app/webapp-common/experiments/containers/experiment-output-log/experiment-output-log.component.ts
@@ -1,13 +1,16 @@
-import {Component, OnDestroy, OnInit, ChangeDetectorRef} from '@angular/core';
-import {select, Store} from '@ngrx/store';
-import {selectExperimentLog, selectIsExperimentInProgress, selectLogFilter} from '../../reducers';
+import {Component, OnDestroy, OnInit, ChangeDetectorRef, ViewChild} from '@angular/core';
+import {Store} from '@ngrx/store';
+import {selectExperimentBeginningOfLog, selectExperimentLog, selectLogFilter} from '../../reducers';
 import {Observable, Subscription} from 'rxjs';
-import {distinctUntilChanged, filter, tap} from 'rxjs/operators';
+import {distinctUntilChanged, filter} from 'rxjs/operators';
+import {last} from 'lodash/fp';
 import {HTTP} from '../../../../app.constants';
 import {ISelectedExperiment} from '../../../../features/experiments/shared/experiment-info.model';
 import {IExperimentInfoState} from '../../../../features/experiments/reducers/experiment-info.reducer';
 import {selectSelectedExperiment} from '../../../../features/experiments/reducers';
-import {GetExperimentLog, ResetLogFilter, ResetOutput, SetLogFilter} from '../../actions/common-experiment-output.actions';
+import {ResetLogFilter, ResetOutput, SetLogFilter, getExperimentLog} from '../../actions/common-experiment-output.actions';
+import {ExperimentLogInfoComponent} from '../../dumb/experiment-log-info/experiment-log-info.component';
+import {selectRefreshing} from '../../../experiments-compare/reducers';
 
 @Component({
   selector: 'sm-experiment-output-log',
@@ -20,19 +23,21 @@ export class ExperimentOutputLogComponent implements OnInit, OnDestroy {
   private experiment: ISelectedExperiment;
 
   public API_BASE_URL = HTTP.API_BASE_URL;
-  public log$: Observable<Array<any>>;
-  public experiment$: Observable<any>;
+  public log$: Observable<any[]>;
+  public experiment$: Observable<ISelectedExperiment>;
   public filter$: Observable<string>;
+  public logBeginning$: Observable<boolean>;
   public creator: string | Worker;
   public disabled: boolean;
   public hasLog: boolean;
-  public selectIsExperimentPendingRunning: Observable<boolean>;
   public logSubscription: Subscription;
+  private refreshingSubscription: Subscription;
 
+  @ViewChild('log', {static: false}) private logRef: ExperimentLogInfoComponent;
 
-  constructor(private store: Store<IExperimentInfoState>,
-              private cdr: ChangeDetectorRef) {
+  constructor(private store: Store<IExperimentInfoState>, private cdr: ChangeDetectorRef) {
     this.log$ = this.store.select(selectExperimentLog);
+    this.logBeginning$ = this.store.select(selectExperimentBeginningOfLog);
     this.filter$ = this.store.select(selectLogFilter);
     this.experiment$ = this.store.select(selectSelectedExperiment);
   }
@@ -52,15 +57,30 @@ export class ExperimentOutputLogComponent implements OnInit, OnDestroy {
         distinctUntilChanged()
       )
       .subscribe(experiment => {
-        if (this.experiment && this.experiment.id !== experiment.id) {
+        if (this.experiment?.id !== experiment.id || this.experiment?.started !== experiment.started) {
           this.store.dispatch(new ResetOutput());
+          this.logRef?.reset();
+          this.experiment = experiment;
+          this.store.dispatch(getExperimentLog({
+            id: this.experiment.id,
+            direction: null
+          }));
+        } else if (!this.logRef?.lines?.length || this.logRef?.canRefresh) {
+          this.store.dispatch(getExperimentLog({
+            id: this.experiment.id,
+            direction: !this.logRef?.orgLogs ? 'prev' : 'next',
+            from: last(this.logRef?.orgLogs)?.timestamp
+          }));
         }
-        this.experiment = experiment;
-        this.store.dispatch(new GetExperimentLog(experiment.id));
       });
-    this.selectIsExperimentPendingRunning = this.store.pipe(
-      select(selectIsExperimentInProgress)
-    );
+
+    this.refreshingSubscription = this.store.select(selectRefreshing)
+      .pipe(filter(({refreshing}) => refreshing))
+      .subscribe(({autoRefresh}) => this.store.dispatch(getExperimentLog({
+        id: this.experiment.id,
+        direction: autoRefresh ? 'prev' : 'next',
+        from: last(this.logRef?.orgLogs)?.timestamp
+      })));
   }
 
   ngOnDestroy(): void {
@@ -70,11 +90,11 @@ export class ExperimentOutputLogComponent implements OnInit, OnDestroy {
     this.store.dispatch(new ResetOutput());
   }
 
-  refreshExperimentLog() {
-    this.store.dispatch(new GetExperimentLog(this.experiment.id));
+  public filterLog(event: KeyboardEvent) {
+    this.store.dispatch(new SetLogFilter((event.target as HTMLInputElement).value));
   }
 
-  public filterLog(event: KeyboardEvent) {
-    this.store.dispatch(new SetLogFilter((<HTMLInputElement>event.target).value));
+  getLogs({direction, from}: {direction: string; from?: number}) {
+    this.store.dispatch(getExperimentLog({id: this.experiment.id, direction, from, refresh: !from}));
   }
 }
diff --git a/src/app/webapp-common/experiments/containers/experiment-output-scalars/experiment-output-scalars.component.html b/src/app/webapp-common/experiments/containers/experiment-output-scalars/experiment-output-scalars.component.html
index 62c10626..21bed719 100644
--- a/src/app/webapp-common/experiments/containers/experiment-output-scalars/experiment-output-scalars.component.html
+++ b/src/app/webapp-common/experiments/containers/experiment-output-scalars/experiment-output-scalars.component.html
@@ -24,6 +24,7 @@
       [xAxisType]="(xAxisType$ | async)"
       [showSettings]="showSettingsBar"
       [splitSize]="splitSize$ | async"
+      [breakPoint]="900"
       (changeWeight)="changeSmoothness($event)"
       (resetGraphs)="resetMetrics()"
       (toggleSettings)="toggleSettingsBar()"
diff --git a/src/app/webapp-common/experiments/containers/experiment-output-scalars/experiment-output-scalars.component.scss b/src/app/webapp-common/experiments/containers/experiment-output-scalars/experiment-output-scalars.component.scss
index c4ac807f..5115acca 100644
--- a/src/app/webapp-common/experiments/containers/experiment-output-scalars/experiment-output-scalars.component.scss
+++ b/src/app/webapp-common/experiments/containers/experiment-output-scalars/experiment-output-scalars.component.scss
@@ -6,7 +6,7 @@
 
 .list-container {
   display: block;
-  height: calc(100vh - 209px);
+  height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
 
diff --git a/src/app/webapp-common/experiments/containers/experiment-output-scalars/experiment-output-scalars.component.ts b/src/app/webapp-common/experiments/containers/experiment-output-scalars/experiment-output-scalars.component.ts
index 4550c07e..4622b8cf 100644
--- a/src/app/webapp-common/experiments/containers/experiment-output-scalars/experiment-output-scalars.component.ts
+++ b/src/app/webapp-common/experiments/containers/experiment-output-scalars/experiment-output-scalars.component.ts
@@ -9,7 +9,7 @@ import {scrollToElement} from '../../../shared/utils/shared-utils';
 import {ActivatedRoute,  Router} from '@angular/router';
 import {of} from 'rxjs';
 import {IExperimentInfoState} from '../../../../features/experiments/reducers/experiment-info.reducer';
-import {ExperimentScalarRequested, GetExperimentLog, ResetExperimentMetrics, SetExperimentMetricsSearchTerm, SetExperimentSettings} from '../../actions/common-experiment-output.actions';
+import {ExperimentScalarRequested, ResetExperimentMetrics, SetExperimentMetricsSearchTerm, SetExperimentSettings} from '../../actions/common-experiment-output.actions';
 import {ExperimentGraph} from '../../../tasks/tasks.model';
 import {convertScalars, sortMetricsList} from '../../../tasks/tasks.utils';
 import {ScalarKeyEnum} from '../../../../business-logic/model/events/scalarKeyEnum';
diff --git a/src/app/webapp-common/experiments/dumb/experiment-artifact-item-view/experiment-artifact-item-view.component.html b/src/app/webapp-common/experiments/dumb/experiment-artifact-item-view/experiment-artifact-item-view.component.html
index 41b19b87..c134198e 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-artifact-item-view/experiment-artifact-item-view.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-artifact-item-view/experiment-artifact-item-view.component.html
@@ -1,29 +1,34 @@
-<div class="model-info-container" *ngIf="artifact">
-  <sm-labeled-row label="FILE PATH">
-    <a *ngIf="artifact?.uri && !isLocalFile && isLinkable" [href]="artifact?.uri" target="_blank">{{artifact?.uri}}</a>
-    <span *ngIf="!isLinkable">{{artifact?.uri}}</span>
-    <i *ngIf="artifact?.uri && !isLocalFile && !isLinkable"
-       class="pointer fa fa-download ml-2"
-       (click)="artifactFilePathClicked(artifact.uri)"
-    ></i>
-    <sm-copy-clipboard *ngIf="artifact?.uri && isLocalFile"
-                       label="" [clipboardText]="artifact.uri"
-                       class="pl-2"
-                       [hideBackground]="true"
-    ></sm-copy-clipboard>
-  </sm-labeled-row>
-  <sm-labeled-row label="FILE SIZE">{{artifact?.content_size ? (artifact?.content_size | filesize) : ''}}</sm-labeled-row>
-  <sm-labeled-row label="HASH">{{artifact?.hash}}</sm-labeled-row>
-  <sm-labeled-row *ngFor="let data of artifact?.display_data" [label]="data[0]| uppercase">{{data[1]}}</sm-labeled-row>
-  <sm-section-header label="PREVIEW"></sm-section-header>
-  <div class="preview">
-    <sm-textarea-control
-      [formData]="artifact?.type_data?.preview"
-      [isReadonly]="true"
-      class="dark"
-      [rows]="8"
-      inputClassName="preview-text resize-none">
-    </sm-textarea-control>
-  </div>
-</div>
+  <sm-editable-section [disableInEditMode]="true" [editable]="false" *ngIf="artifact">
+    <div>
+      <sm-labeled-row label="FILE PATH">
+        <a *ngIf="artifact?.uri && !isLocalFile && isLinkable" [href]="artifact?.uri" target="_blank">{{artifact?.uri}}</a>
+        <span *ngIf="!isLinkable">{{artifact?.uri}}</span>
+        <i *ngIf="artifact?.uri && !isLocalFile && !isLinkable"
+           class="pointer fa fa-download ml-2"
+           (click)="artifactFilePathClicked(artifact.uri)"
+        ></i>
+        <sm-copy-clipboard *ngIf="artifact?.uri && isLocalFile"
+                           label="" [clipboardText]="artifact.uri"
+                           class="pl-2"
+                           [hideBackground]="true"
+        ></sm-copy-clipboard>
+      </sm-labeled-row>
+      <sm-labeled-row label="FILE SIZE">{{artifact?.content_size ? (artifact?.content_size | filesize) : ''}}</sm-labeled-row>
+      <sm-labeled-row label="HASH">{{artifact?.hash}}</sm-labeled-row>
+      <sm-labeled-row *ngFor="let data of artifact?.display_data" [label]="data[0]| uppercase">{{data[1]}}</sm-labeled-row>
+    </div>
+  </sm-editable-section>
+  <sm-editable-section class="editable-design"
+                       [editable]="false"
+                       [disableInEditMode]="true"
+                       containerClass="h-100">
+    <sm-section-header label="PREVIEW"></sm-section-header>
+    <sm-experiment-network-design-form
+      fieldName="prototext"
+      inputClassName="preview-text resize-none"
+      [editable]="false"
+      [formData]="artifact?.type_data?.preview">
+    </sm-experiment-network-design-form>
+  </sm-editable-section>
+
 
diff --git a/src/app/webapp-common/experiments/dumb/experiment-artifact-item-view/experiment-artifact-item-view.component.scss b/src/app/webapp-common/experiments/dumb/experiment-artifact-item-view/experiment-artifact-item-view.component.scss
index 6f02dbc5..78c8b983 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-artifact-item-view/experiment-artifact-item-view.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiment-artifact-item-view/experiment-artifact-item-view.component.scss
@@ -1,17 +1,9 @@
 :host {
-  display: block;
-  padding: 24px;
-  .model-info-container {
-    display: flex;
-    flex-direction: column;
-    height: calc(100% - 20px);
-
-    sm-section-header {
-      margin-top: 48px;
-    }
-
-    .preview {
-      flex: 1;
-    }
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .editable-design {
+    flex: 1;
+    min-height: 300px;
   }
 }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-artifact-item-view/experiment-artifact-item-view.component.ts b/src/app/webapp-common/experiments/dumb/experiment-artifact-item-view/experiment-artifact-item-view.component.ts
index eed04165..3aad37a5 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-artifact-item-view/experiment-artifact-item-view.component.ts
+++ b/src/app/webapp-common/experiments/dumb/experiment-artifact-item-view/experiment-artifact-item-view.component.ts
@@ -33,4 +33,13 @@ export class ExperimentArtifactItemViewComponent extends BaseClickableArtifact{
   constructor(protected adminService: AdminService, protected store: Store<any>) {
     super(adminService, store);
   }
+
+  linkClicked(event: Event) {
+    const signed = this.adminService.signUrlIfNeeded(this.artifact.uri, true);
+    const a = document.createElement('a');
+    a.href = signed || this.artifact.uri;
+    a.target = '_blank';
+    a.click();
+    event.preventDefault();
+  }
 }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-artifacts-navbar/experiment-artifacts-navbar.component.html b/src/app/webapp-common/experiments/dumb/experiment-artifacts-navbar/experiment-artifacts-navbar.component.html
index f7b8f736..986104ce 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-artifacts-navbar/experiment-artifacts-navbar.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-artifacts-navbar/experiment-artifacts-navbar.component.html
@@ -1,10 +1,10 @@
-<mat-expansion-panel expanded="true">
+<mat-expansion-panel expanded="true" *ngIf="inputModel?.id || outputModel?.id || editable">
   <mat-expansion-panel-header collapsedHeight="40px" expandedHeight="40px" [ngClass]="{'active': activeSection === ACTIVE_SECTIONS.model}">
     MODELS
   </mat-expansion-panel-header>
   <div
     queryParamsHandling="preserve"
-    [ngClass]="{'selected': routerConfig.includes('input-model')}"
+    [ngClass]="{'selected': routerConfig.includes('input-model'), 'hide-output-model' :((!inputModel?.id) && !editable)}"
     class="artifact-container pointer"
     routerLink="input-model"
   >
@@ -21,7 +21,7 @@
 </mat-expansion-panel>
 
 <mat-expansion-panel [expanded]="true" *ngIf="dataAuditArtifacts?.length > 0">
-  <mat-expansion-panel-header collapsedHeight="40px" expandedHeight="40px" [ngClass]="{'active': activeSection === ACTIVE_SECTIONS.artifact}">
+  <mat-expansion-panel-header collapsedHeight="40px" expandedHeight="40px" class="active">
     DATA AUDIT
   </mat-expansion-panel-header>
   <div *ngFor="let artifact of dataAuditArtifacts; trackBy: trackByFn"
@@ -30,11 +30,11 @@
        [routerLink]="'artifact/' + artifact.key+ '/' + artifact.mode"
        [ngClass]="{'selected': selectedArtifactKey === artifact.key}"
   >
-    <i class="icon sm i-data-audit"></i> {{artifact.key}}
+    <i class="sm al-icon al-ico-data-audit al-color" [class]="(selectedArtifactKey === artifact.key ? 'white' : 'blue-400')"></i>{{artifact.key}}
   </div>
 </mat-expansion-panel>
 <mat-expansion-panel [expanded]="true" *ngIf="otherArtifacts?.length > 0">
-  <mat-expansion-panel-header collapsedHeight="40px" expandedHeight="40px" [ngClass]="{'active': activeSection === ACTIVE_SECTIONS.other}">
+  <mat-expansion-panel-header collapsedHeight="40px" expandedHeight="40px" class="active">
     OTHER
   </mat-expansion-panel-header>
   <div *ngFor="let artifact of otherArtifacts; trackBy: trackByFn"
@@ -43,6 +43,6 @@
        [routerLink]="'other/' + artifact.key+'/' +artifact.mode"
        [ngClass]="{'selected': selectedArtifactKey===artifact.key}"
   >
-    <i class="icon sm i-data-audit"></i> {{artifact.key}}
+    <i class="sm al-icon al-ico-data-audit al-color" [class]="(selectedArtifactKey === artifact.key ? 'white' : 'blue-400')"></i>{{artifact.key}}
   </div>
 </mat-expansion-panel>
diff --git a/src/app/webapp-common/experiments/dumb/experiment-artifacts-navbar/experiment-artifacts-navbar.component.scss b/src/app/webapp-common/experiments/dumb/experiment-artifacts-navbar/experiment-artifacts-navbar.component.scss
index 803f7d96..f6ef0f59 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-artifacts-navbar/experiment-artifacts-navbar.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiment-artifacts-navbar/experiment-artifacts-navbar.component.scss
@@ -92,7 +92,7 @@
     display: flex;
     align-items: center;
 
-    .icon {
+    .icon, .al-icon {
       margin-right: 10px;
     }
   }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-artifacts-navbar/experiment-artifacts-navbar.component.ts b/src/app/webapp-common/experiments/dumb/experiment-artifacts-navbar/experiment-artifacts-navbar.component.ts
index 3cf24ea8..6e22237e 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-artifacts-navbar/experiment-artifacts-navbar.component.ts
+++ b/src/app/webapp-common/experiments/dumb/experiment-artifacts-navbar/experiment-artifacts-navbar.component.ts
@@ -28,6 +28,8 @@ export class ExperimentArtifactsNavbarComponent {
 
   @Input() selectedArtifactKey;
   @Input() outputModel;
+  @Input() inputModel;
+  @Input() editable;
   @Input() activeSection;
   @Input() routerConfig: string[];
   @Output() artifactSelected = new EventEmitter();
diff --git a/src/app/webapp-common/experiments/dumb/experiment-custom-cols-menu/experiment-custom-cols-menu.component.html b/src/app/webapp-common/experiments/dumb/experiment-custom-cols-menu/experiment-custom-cols-menu.component.html
index 620ae104..f4c54627 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-custom-cols-menu/experiment-custom-cols-menu.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-custom-cols-menu/experiment-custom-cols-menu.component.html
@@ -1,5 +1,5 @@
 <sm-menu
-  [iconClass]="'icon sm-md i-gear pointer create-new-icon '"
+  [iconClass]="'sm-md al-icon al-ico-settings al-color blue-400 pointer create-new-icon '"
   smMenuClass="light-theme custom-columns"
   [showButton]="false"
   (click)="getMetricsToDisplay.emit()"
@@ -27,8 +27,8 @@
         </div>
         <div class="add-button"
              smClickStopPropagation
-             [ngClass]="{disabled: !hyperParams.length}"
-             (click)="hyperParams.length && selectMetricActiveChanged.emit(CustomColumnMode.HyperParams); $event.stopPropagation()"
+             [ngClass]="{disabled: !hasHyperParams}"
+             (click)="hasHyperParams && selectMetricActiveChanged.emit(CustomColumnMode.HyperParams); $event.stopPropagation()"
         ><i class="fas fa-plus pr-1"></i> HYPER PARAMETERS
         </div>
       </div>
diff --git a/src/app/webapp-common/experiments/dumb/experiment-custom-cols-menu/experiment-custom-cols-menu.component.ts b/src/app/webapp-common/experiments/dumb/experiment-custom-cols-menu/experiment-custom-cols-menu.component.ts
index 329cdd7d..ce08dde7 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-custom-cols-menu/experiment-custom-cols-menu.component.ts
+++ b/src/app/webapp-common/experiments/dumb/experiment-custom-cols-menu/experiment-custom-cols-menu.component.ts
@@ -2,28 +2,38 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {CustomColumnMode} from '../../shared/common-experiments.const';
 
 @Component({
-  selector   : 'sm-experiment-custom-cols-menu',
+  selector: 'sm-experiment-custom-cols-menu',
   templateUrl: './experiment-custom-cols-menu.component.html',
-  styleUrls  : ['./experiment-custom-cols-menu.component.scss']
+  styleUrls: ['./experiment-custom-cols-menu.component.scss']
 })
 export class ExperimentCustomColsMenuComponent {
 
 
+  public hasHyperParams: boolean;
+  private _hyperParams: { [section: string]: any[] };
+
+  @Input() metricVariants;
   @Input() customColumnMode: CustomColumnMode;
   @Input() tableCols;
-  @Input() metricVariants;
-  @Input() hyperParams;
+
+  @Input() set hyperParams(hyperParams: { [section: string]: any[] }) {
+    this._hyperParams = hyperParams;
+    this.hasHyperParams = Object.values(hyperParams).some(section =>  Object.keys(section).length > 0);
+  }
+  get hyperParams() {
+    return this._hyperParams;
+  }
+
   @Input() isLoading: boolean;
 
   @Output() selectMetricActiveChanged = new EventEmitter<CustomColumnMode>();
-  @Output() getMetricsToDisplay       = new EventEmitter();
-  @Output() removeColFromList         = new EventEmitter();
-  @Output() selectedTableColsChanged  = new EventEmitter();
-  @Output() selectedMetricToShow      = new EventEmitter();
-  @Output() selectedHyperParamToShow  = new EventEmitter();
-  @Output() addCustomColClicked       = new EventEmitter();
-  @Output() clearSelection       = new EventEmitter();
+  @Output() getMetricsToDisplay = new EventEmitter();
+  @Output() removeColFromList = new EventEmitter();
+  @Output() selectedTableColsChanged = new EventEmitter();
+  @Output() selectedMetricToShow = new EventEmitter();
+  @Output() selectedHyperParamToShow = new EventEmitter();
+  @Output() addCustomColClicked = new EventEmitter();
+  @Output() clearSelection = new EventEmitter();
 
-  public menuFooterHover;
   public CustomColumnMode = CustomColumnMode;
 }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-execution-diff/experiment-execution-diff.component.html b/src/app/webapp-common/experiments/dumb/experiment-execution-diff/experiment-execution-diff.component.html
index 48b81746..f4ca33fd 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-execution-diff/experiment-execution-diff.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-execution-diff/experiment-execution-diff.component.html
@@ -1,10 +1,9 @@
-<sm-textarea-control
-  #diff
-  class="dark"
-  inputClassName=""
-  [rows]="12"
-  [class.hidden]="!editable && !formData"
-  [isReadonly]="!editable"
-  [formData]="formData">
-</sm-textarea-control>
-<span *ngIf="!formData && !editable">No changes logged</span>
+<div *ngIf="!showSpinner && !editable && lines?.length" class="diff-container">
+  <cdk-virtual-scroll-viewport itemSize="19" minBufferPx = 400, maxBufferPx = 600
+                               class="viewport"
+                               [class.isReadonly]="!editable">
+    <div *cdkVirtualFor="let line of lines" class="line">{{line}}</div>
+  </cdk-virtual-scroll-viewport>
+</div>
+<span *ngIf="!showSpinner && !lines?.length && !editable">No changes logged</span>
+<mat-spinner [diameter]="50" *ngIf="showSpinner"></mat-spinner>
diff --git a/src/app/webapp-common/experiments/dumb/experiment-execution-diff/experiment-execution-diff.component.scss b/src/app/webapp-common/experiments/dumb/experiment-execution-diff/experiment-execution-diff.component.scss
index f1dbf577..75c1953d 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-execution-diff/experiment-execution-diff.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiment-execution-diff/experiment-execution-diff.component.scss
@@ -1,7 +1,20 @@
-sm-textarea-control {
-  display: block;
-  height: 180px;
-  &.hidden {
-   display: none;
+@import "../../../shared/ui-components/styles/variables";
+
+:host {
+  .diff-container {
+    background-color: $blue-600;
+    padding: 12px 0 12px 12px;
+    border-radius: 4px;
+
+    .viewport {
+      height: 250px;
+      color: $white;
+      overflow-x: scroll;
+
+      .line {
+        height: 19px;
+        white-space: pre;
+      }
+    }
   }
 }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-execution-diff/experiment-execution-diff.component.ts b/src/app/webapp-common/experiments/dumb/experiment-execution-diff/experiment-execution-diff.component.ts
index 939b1f3b..1f6a1044 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-execution-diff/experiment-execution-diff.component.ts
+++ b/src/app/webapp-common/experiments/dumb/experiment-execution-diff/experiment-execution-diff.component.ts
@@ -10,34 +10,24 @@ import {TextareaControlComponent} from '../../../shared/ui-components/forms/text
   templateUrl: './experiment-execution-diff.component.html',
   styleUrls  : ['./experiment-execution-diff.component.scss'],
 })
-export class ExperimentExecutionDiffComponent implements IExperimentInfoFormComponent, OnInit, OnDestroy {
+export class ExperimentExecutionDiffComponent implements IExperimentInfoFormComponent {
+
+  lines: string[];
+  @Input() set formData(data: IExecutionForm['diff']) {
+    this.lines = data ? data.split('\n') : [];
+  }
 
-  @Input() formData: IExecutionForm['diff'];
   @Input() isInDev: boolean    = false;
   private _editable: boolean;
   @Input() set editable(editable: boolean) {
     this._editable = editable;
-    window.setTimeout(() => this.diff.onResize());
   }
   get editable() {
     return this._editable;
   }
+  @Input() showSpinner: boolean;
   @Output() freezeForm         = new EventEmitter();
   @Output() formDataChanged = new EventEmitter<{ field: string; value: any }>();
   HELP_TEXTS                   = HELP_TEXTS;
 
-  @ViewChild('diff', {static: true}) diff: TextareaControlComponent;
-  private formChangesSubscription: Subscription;
-
-  ngOnInit(): void {
-    this.formChangesSubscription = this.diff.formDataChanged.subscribe(formValue => {
-      if (this.editable) {
-        this.formDataChanged.emit({field: 'diff', value: formValue.value});
-      }
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.formChangesSubscription.unsubscribe();
-  }
 }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-execution-form/experiment-execution-form.component.html b/src/app/webapp-common/experiments/dumb/experiment-execution-form/experiment-execution-form.component.html
index ab6e9eef..fa71bae1 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-execution-form/experiment-execution-form.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-execution-form/experiment-execution-form.component.html
@@ -18,7 +18,8 @@
 
   <sm-editable-section #diffSection
                        [saving]="saving"
-                       [editable]="editable"
+                       [editable]="editable && !showExtraDataSpinner"
+                       [disableInEditMode]="true"
                        (cancelClicked)="sectionCancelled()"
                        (saveClicked)="sectionSaved()"
                        (activateEditClicked)="activateEditClicked($event, 'diff'); editDiff()">
@@ -29,6 +30,7 @@
       [editable]="editable && diffSection.inEditMode"
       [isInDev]="isInDev"
       [formData]="formData.diff"
+      [showSpinner]="showExtraDataSpinner"
       (formDataChanged)="fieldValueChanged($event)"
       (freezeForm)="freezeForm.emit($event)"></sm-experiment-diff>
     <button extra-buttons
@@ -43,11 +45,12 @@
   <sm-editable-section #requirementsSection
                        [saving]="saving"
                        [editable]="editable"
+                       [disableInEditMode]="true"
+                       [disableSave]="false"
                        (cancelClicked)="sectionCancelled()"
                        (saveClicked)="sectionSaved()"
                        (activateEditClicked)="activateEditClicked($event, 'source'); editInstallPackages()">
     <sm-section-header label="INSTALLED PACKAGES"></sm-section-header>
-
     <sm-experiment-requirements-code
       #requirementsForm
       class="form-section"
@@ -57,6 +60,13 @@
       [formData]="formData.requirements"
       (formDataChanged)="fieldValueChanged($event)">
     </sm-experiment-requirements-code>
+    <button extra-buttons
+            *ngIf="formData.requirements?.pip"
+            class="btn-dark-fill mr-3 flex-1"
+            (click)="clearInstalledPackages()">
+      <i class="p-1 fa fa-trash"></i>
+      CLEAR
+    </button>
   </sm-editable-section>
   <sm-editable-section #orchestrationSection
                        [saving]="saving"
diff --git a/src/app/webapp-common/experiments/dumb/experiment-execution-form/experiment-execution-form.component.ts b/src/app/webapp-common/experiments/dumb/experiment-execution-form/experiment-execution-form.component.ts
index 6cd27646..3942e500 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-execution-form/experiment-execution-form.component.ts
+++ b/src/app/webapp-common/experiments/dumb/experiment-execution-form/experiment-execution-form.component.ts
@@ -15,6 +15,7 @@ import {EditJsonComponent} from '../../../shared/ui-components/overlay/edit-json
 })
 export class ExperimentExecutionFormComponent extends ImmutableFormContainer implements IExperimentInfoFormComponent, OnInit, OnDestroy {
   @Input() formData: IExecutionForm;
+  @Input() showExtraDataSpinner: boolean;
   @Input() editable: boolean;
   @Input() isInDev: boolean;
   @Input() saving = false;
@@ -41,13 +42,13 @@ export class ExperimentExecutionFormComponent extends ImmutableFormContainer imp
         body: 'Uncommitted changes will be discarded',
         yes: 'Discard',
         no: 'Cancel',
-        iconClass: 'i-trash',
+        iconClass: 'al-icon al-ico-trash al-color blue-300',
       }
     });
 
     confirmDialogRef.afterClosed().pipe(take(1)).subscribe((confirmed) => {
       if (confirmed) {
-        this.freezeForm.emit();
+        this.activateEdit.emit({editMode: true, sectionName: 'diff'});
         this.fieldValueChanged({field: 'diff', value: ''});
         this.saveFormData.emit();
       }
@@ -98,4 +99,24 @@ export class ExperimentExecutionFormComponent extends ImmutableFormContainer imp
       }
     });
   }
+
+  clearInstalledPackages() {
+    const confirmDialogRef: MatDialogRef<any, boolean> = this.dialog.open(ConfirmDialogComponent, {
+      data: {
+        title: 'Clear installed packages',
+        body: 'Are you sure you want to clear the entire contents of Installed packages?',
+        yes: 'Clear',
+        no: 'Keep',
+        iconClass: 'al-icon al-ico-trash al-color blue-300',
+      }
+    });
+
+    confirmDialogRef.afterClosed().pipe(take(1)).subscribe((confirmed) => {
+      if (confirmed) {
+        this.activateEdit.emit({editMode: true, sectionName: 'requirements'});
+        this.fieldValueChanged({field: 'requirements', value: ''});
+        this.saveFormData.emit();
+      }
+    });
+  }
 }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-execution-output/experiment-execution-output.component.html b/src/app/webapp-common/experiments/dumb/experiment-execution-output/experiment-execution-output.component.html
index c8f741f7..bd010ba0 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-execution-output/experiment-execution-output.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-execution-output/experiment-execution-output.component.html
@@ -2,7 +2,7 @@
   <sm-labeled-row label="DESTINATION">
     <sm-input-group fieldName="destination"
                     [isReadonly]="!editable"
-                    [formData]="formData.destination"
+                    [formData]="formData?.destination"
                     (formDataChanged)="fieldValueChanged($event)"
     >
     </sm-input-group>
@@ -10,7 +10,7 @@
   <sm-labeled-row label="LOG LEVEL">
     <sm-input-group
       fieldName="logLevel"
-      [formData]="formData.logLevel"
+      [formData]="formData?.logLevel"
       [isReadonly]="!editable"
       (formDataChanged)="fieldValueChanged($event)"
     ></sm-input-group>
diff --git a/src/app/webapp-common/experiments/dumb/experiment-execution-parameters/experiment-execution-parameters.component.html b/src/app/webapp-common/experiments/dumb/experiment-execution-parameters/experiment-execution-parameters.component.html
index e98090f6..39a0cf59 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-execution-parameters/experiment-execution-parameters.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-execution-parameters/experiment-execution-parameters.component.html
@@ -1,56 +1,70 @@
-<form #hyperParameters="ngForm">
-  <div [hidden]="!editable">
-    <ng-template ngFor let-parameter [ngForOf]="form" let-index="index">
-      <div class="row w-100">
-        <div class="input-container col-11">
-          <mat-form-field [hintLabel]="parameterKey.invalid && parameterKey?.errors?.required? '*Required': ''" appearance="outline" class="strength w-100">
-            <input
-                #parameterKey="ngModel"
-                [(ngModel)]="parameter.key"
-                (blur)="parameter.key=parameter.key.trim()"
-                name="parameterKey-{{parameter.id}}"
-                matInput
-                required/>
-            <mat-error *ngIf="parameterKey.invalid && parameterKey?.errors?.required">
-              Required
-            </mat-error>
-            <mat-error *ngIf="parameterKey.invalid && parameterKey?.errors?.smNotAllowedStringsValidator">
-              .(dot) $(dollar) and space are not allowed in parameter key.
-            </mat-error>
-          </mat-form-field>
-
-
-        </div>
-        <div class="input-container col-11">
-          <mat-form-field appearance="outline" class="strength w-100">
-            <input
-                #parameterLabel="ngModel"
-                [(ngModel)]="parameter.label"
-                name="parameterLabel-{{parameter.id}}"
-                matInput/>
-          </mat-form-field>
-
-        </div>
-        <div class="input-container col-2 remove-step">
-          <i (click)="removeRow(index)" class="icon i-trash sm-md pointer flashing-icon mb-2"></i>
+<form [class.editable]="editable" #hyperParameters="ngForm">
+  <cdk-virtual-scroll-viewport #formContainer class="form-container" itemSize="73" minBufferPx="280" maxBufferPx="560">
+    <ng-container *ngIf="editable">
+      <div *ngFor="let parameter of formData; let index= index" class="w-100 d-flex">
+        <mat-form-field
+          [hintLabel]="parameterKey.invalid && parameterKey?.errors?.required? '*Required': ''"
+          appearance="outline"
+          class="strength ">
+          <input
+            #parameterKey="ngModel"
+            [(ngModel)]="parameter['name']"
+            placeholder="Parameter"
+            name="parameterKey-{{parameter.id}}"
+            matInput
+            smUniqueNameValidator
+            [existingNames]="formNames(parameter.id)"
+            [smNotAllowedStringsValidator]="['.', '$']"
+            required/>
+          <mat-error *ngIf="parameterKey.invalid && parameterKey?.errors?.required">
+            Required
+          </mat-error>
+          <mat-error *ngIf="parameterKey.invalid && parameterKey?.errors?.smNotAllowedStringsValidator">
+            .(dot) $(dollar) and space are not allowed in parameter key.
+          </mat-error>
+          <mat-error *ngIf="parameterKey.invalid && parameterKey?.errors?.uniqueName">
+            key already exists
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="strength">
+          <input
+            #parameterValue="ngModel"
+            [(ngModel)]="parameter['value']"
+            name="parameterValue-{{parameter.id}}"
+            placeholder="Value"
+            matInput/>
+        </mat-form-field>
+        <div class="remove-step">
+          <i (click)="removeRow(index)" class="al-icon al-ico-trash al-color blue-300 sm-md pointer flashing-icon mb-2"></i>
         </div>
       </div>
-    </ng-template>
-  </div>
+    </ng-container>
+  </cdk-virtual-scroll-viewport>
 </form>
-<button *ngIf="editable" class="btn btn-primary" (click)="addRow()"><i class="icon sm i-plus-blue"></i>
-</button>
-<div *ngIf="!editable">
-  <sm-simple-table-2 [cols]="cols" [rowsData]="formData">
-    <ng-template
-      let-col
-      let-i="rowIndex"
-      let-row="row">
-      <div class="row w-100 param-row">
-        <div class="input-container col-11"><span class="allow-multi-space" smTooltip="{{row.key}}">{{row.key}}</span></div>
-        <div class="input-container col-13"><span class="allow-multi-space" smTooltip="{{row.label}}">{{row.label}}</span></div>
-      </div>
+<button *ngIf="editable" class="btn btn-dark-fill add-parameter" (click)="addRow()"><i class="fas fa-plus"></i> ADD PARAMETER</button>
+<div class="table-container" *ngIf="!editable">
+  <sm-table
+    [columns]="cols"
+    [tableData]="formData"
+    [resizableColumns]="true"
+    [noHeader]="true"
+    [simple]="true"
+    [virtualScroll]="true"
+    rowHeight="32"
+    (rowClicked)="rowActivated($event)"
+  >
+    <ng-template pTemplate="body"
+                 let-col
+                 let-i="rowIndex"
+                 let-row="rowData">
+      <ng-container *ngIf="col.id === 'description'; else defaultRow">
+        <span *ngIf="row.type!=='legacy' && (row.description || row.type)" class="allow-multi-space pointer" customClass="hyper-parameters-tooltip parameter-tooltip"
+              smTooltip="{{(row.type ? ('Type: '+ row.type+'\n') : '') + (row?.description|| '')}}"><i class="al-icon al-ico-description"></i></span>
+      </ng-container>
+      <ng-template #defaultRow>
+        <span class="allow-multi-space" [class.name]="col.id==='name'" smTooltip="{{row[col.id]}}">{{row[col.id]}}</span>
+      </ng-template>
     </ng-template>
-  </sm-simple-table-2>
+  </sm-table>
 </div>
 
diff --git a/src/app/webapp-common/experiments/dumb/experiment-execution-parameters/experiment-execution-parameters.component.scss b/src/app/webapp-common/experiments/dumb/experiment-execution-parameters/experiment-execution-parameters.component.scss
index dca422a0..893e6e21 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-execution-parameters/experiment-execution-parameters.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiment-execution-parameters/experiment-execution-parameters.component.scss
@@ -1,25 +1,62 @@
+@import "../../../shared/ui-components/styles/variables";
+
 :host {
+  form.editable, .table-container {
+    height: 100%;
+    padding-bottom: 6px;
+  }
+
+  form.editable {
+    padding-bottom: 6px;
+  }
+
+  .form-container {
+    height: 100%;
+    overflow: auto;
+  }
+
+  mat-form-field{
+    width: 42%;
+    padding-right: 12px;
+  }
   /deep/ tr:hover {
     cursor: auto !important;
     transition: background-color 0.3s;
   }
+
   .separator {
     width: 100%;
     //border-bottom: solid 1px #dee1e9;
   }
-  .i-trash{
-    padding-top: 60px;
+
+  .remove-step {
+    margin: .25em 0;
+    padding-bottom: 1.34375em;
+    padding-top: 7px;
+    display: flex;
+    align-items: center;
   }
 
   .param-row {
     font-weight: 500;
+
     & > div {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
   }
-  .allow-multi-space{
+  .name{
+    font-weight: 500;
+  }
+
+  .allow-multi-space {
     white-space: pre;
   }
+  .add-parameter{
+    border: 1px solid $grey-purple;
+    background-color: #ffffff;
+    color: $grey-purple;
+    transition: all ease-in-out 0.15s, border ease-in-out 0.15s;
+  }
 }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-execution-parameters/experiment-execution-parameters.component.ts b/src/app/webapp-common/experiments/dumb/experiment-execution-parameters/experiment-execution-parameters.component.ts
index 78f59cb1..590d0d1c 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-execution-parameters/experiment-execution-parameters.component.ts
+++ b/src/app/webapp-common/experiments/dumb/experiment-execution-parameters/experiment-execution-parameters.component.ts
@@ -1,11 +1,12 @@
-import {Component, EventEmitter, Input, OnInit, Output, ViewChild, OnDestroy} from '@angular/core';
-import {IExecutionParameter} from '../../shared/experiment-hyper-params.model';
+import {AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {IExperimentInfoFormComponent} from '../../../../features/experiments/shared/experiment-info.model';
 import {HELP_TEXTS} from '../../shared/common-experiments.const';
-import {cloneDeep, isEqual} from 'lodash/fp';
+import {cloneDeep} from 'lodash/fp';
 import {v4 as uuidV4} from 'uuid';
 import {NgForm} from '@angular/forms';
-import {debounceTime} from 'rxjs/operators';
+import {ParamsItem} from '../../../../business-logic/model/tasks/paramsItem';
+import {ISmCol} from '../../../shared/ui-components/data/table/table.consts';
+import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
 import {Subscription} from 'rxjs';
 
 
@@ -14,56 +15,74 @@ import {Subscription} from 'rxjs';
   templateUrl: './experiment-execution-parameters.component.html',
   styleUrls  : ['./experiment-execution-parameters.component.scss']
 })
-export class ExperimentExecutionParametersComponent implements IExperimentInfoFormComponent, OnInit, OnDestroy {
+export class ExperimentExecutionParametersComponent implements IExperimentInfoFormComponent, OnDestroy, AfterViewInit {
+  private _formData: { name?: string; description?: string; section?: string; id: string; type?: string; value?: string }[]=[];
+  private formContainersSub: Subscription;
 
-  public form: IExecutionParameter[];
-  @ViewChild('hyperParameters', {static: true}) hyperParameters: NgForm;
-  @Output() formDataChanged = new EventEmitter<{ field: string, value: Array<any> }>();
-  private formChangesSubscription: Subscription;
-
-  @Input() set formData(data: IExecutionParameter[]) {
-    if (!isEqual(data, this.form)) {
-      this.form = cloneDeep(data).map((row: IExecutionParameter) => ({...row, id: uuidV4()}));
-      this.hyperParameters.form.updateValueAndValidity();
-    }
+  formNames(id) {
+    return this.formData.filter(parameter=> parameter.id!== id).map(parameter => parameter.name);
   }
 
-  get formData() {
-    return this.form;
+  @ViewChild('hyperParameters') hyperParameters: NgForm;
+  private formContainer: CdkVirtualScrollViewport;
+  @ViewChildren('formContainer') formContainers: QueryList<CdkVirtualScrollViewport>;
+  @Output() formDataChanged = new EventEmitter<{ field: string; value: ParamsItem[] }>();
+  @Input() section;
+
+  @Input() set formData(formData: { name?: string; description?: string; section?: string; id?: string; type?: string; value?: string }[]) {
+      this._formData = cloneDeep(formData).map((row: ParamsItem) => ({...row, id: uuidV4()}));
   }
 
+  get formData(): { name?: string; description?: string; section?: string; id?: string; type?: string; value?: string }[] {
+    return this._formData;
+  }
+
+
   @Input() editable: boolean;
 
-  HELP_TEXTS  = HELP_TEXTS;
+  HELP_TEXTS = HELP_TEXTS;
   public cols = [
-    [
-      {header: 'KEY', class: 'col-11'},
-      {header: 'LABEL', class: 'col-11'},
-      {header: '', class: 'col-2'}
-    ]
-  ];
+    { id: 'name', style: {width: '48%'}},
+    { id: 'value', style: {width: '48%'}},
+    { id: 'description', style: {width: '4%'}}
+  ] as ISmCol[];
+  private clickedRow: number;
+
+  ngAfterViewInit() {
+    this.formContainersSub = this.formContainers.changes
+      .subscribe((list: QueryList<CdkVirtualScrollViewport>) => {
+        this.formContainer = list.first;
+        if (this.formContainer && this.clickedRow !== null) {
+          this.formContainer.scrollToIndex(this.clickedRow, 'smooth');
+          this.clickedRow = null;
+        }
+      });
+  }
 
   addRow() {
     this.formData.push({
-      id   : uuidV4(),
-      key  : null,
-      label: null
+      id         : uuidV4(),
+      section    : this.section,
+      name       : '',
+      value      : '',
+      description: '',
+      type       : ''
     });
+    window.setTimeout(() => {
+      const height = this.formContainer.elementRef.nativeElement.scrollHeight;
+      this.formContainer.scrollToIndex(height, 'smooth');
+    }, 50);
   }
 
   removeRow(index) {
     this.formData.splice(index, 1);
   }
 
-  ngOnInit(): void {
-    this.formChangesSubscription = this.hyperParameters.valueChanges.pipe(debounceTime(10)).subscribe(formValue => {
-      if (this.editable) {
-        this.formDataChanged.emit({field: 'parameters', value: this.formData});
-      }
-    });
+  rowActivated({data, e}: {data: any; e: MouseEvent}) {
+    this.clickedRow = this.formData.findIndex(row => row.name === data.name);
   }
 
-  ngOnDestroy() {
-    this.formChangesSubscription && this.formChangesSubscription.unsubscribe();
+  ngOnDestroy(): void {
+    this.formContainersSub?.unsubscribe();
   }
 }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-execution-requirements/experiment-execution-requirements.component.html b/src/app/webapp-common/experiments/dumb/experiment-execution-requirements/experiment-execution-requirements.component.html
index 60579070..097306b4 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-execution-requirements/experiment-execution-requirements.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-execution-requirements/experiment-execution-requirements.component.html
@@ -1,13 +1,8 @@
-<sm-textarea-control
-  #pip
-  *ngIf="formData.pip || editable"
-  class="dark"
-  fieldName="pip"
-  inputClassName=""
-  [isReadonly]="!editable"
-  [formData]="formData.pip"
-  [rows]="12"
-  (formDataChanged)="fieldValueChanged($event)">
-  >
-</sm-textarea-control>
-<span *ngIf="!formData.pip && !editable">No packages identified</span>
+<div *ngIf="!editable && lines?.length" class="requirements-container">
+  <cdk-virtual-scroll-viewport itemSize="19" minBufferPx = 400, maxBufferPx = 600
+                               class="viewport"
+                               [class.isReadonly]="!editable">
+    <div *cdkVirtualFor="let line of lines" class="line">{{line}}</div>
+  </cdk-virtual-scroll-viewport>
+</div>
+<span *ngIf="!lines?.length && !editable">No packages identified</span>
diff --git a/src/app/webapp-common/experiments/dumb/experiment-execution-requirements/experiment-execution-requirements.component.scss b/src/app/webapp-common/experiments/dumb/experiment-execution-requirements/experiment-execution-requirements.component.scss
index 8b137891..483d2194 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-execution-requirements/experiment-execution-requirements.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiment-execution-requirements/experiment-execution-requirements.component.scss
@@ -1 +1,20 @@
+@import "../../../shared/ui-components/styles/variables";
 
+:host {
+  .requirements-container {
+    background-color: $blue-600;
+    padding: 12px 0 12px 12px;
+    border-radius: 4px;
+
+    .viewport {
+      height: 250px;
+      color: $white;
+      overflow-x: scroll;
+
+      .line {
+        height: 19px;
+        white-space: pre;
+      }
+    }
+  }
+}
diff --git a/src/app/webapp-common/experiments/dumb/experiment-execution-requirements/experiment-execution-requirements.component.ts b/src/app/webapp-common/experiments/dumb/experiment-execution-requirements/experiment-execution-requirements.component.ts
index 08ff4749..2f0d70ce 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-execution-requirements/experiment-execution-requirements.component.ts
+++ b/src/app/webapp-common/experiments/dumb/experiment-execution-requirements/experiment-execution-requirements.component.ts
@@ -10,12 +10,13 @@ import {ImmutableFormContainer} from '../../../shared/ui-components/forms/immuta
   styleUrls  : ['./experiment-execution-requirements.component.scss'],
 })
 export class ExperimentExecutionRequirementsComponent extends ImmutableFormContainer implements IExperimentInfoFormComponent {
+  lines: string[];
 
-  @Input() formData: IExecutionForm['requirements'];
+  @Input() set formData (data: IExecutionForm['requirements']) {
+    this.lines = data?.pip ? data?.pip?.split('\n') : [];
+  }
   @Input() isInDev: boolean = false;
   @Input() editable: boolean;
 
   HELP_TEXTS = HELP_TEXTS;
-
-
 }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-execution-source-code/experiment-execution-source-code.component.html b/src/app/webapp-common/experiments/dumb/experiment-execution-source-code/experiment-execution-source-code.component.html
index 42db10fa..612bf38e 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-execution-source-code/experiment-execution-source-code.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-execution-source-code/experiment-execution-source-code.component.html
@@ -3,13 +3,13 @@
     <sm-labeled-row label="REPOSITORY">
       <div *ngIf="!editable">{{formData?.repository}}</div>
       <mat-form-field appearance="outline" *ngIf="editable" class="col-24">
-        <input matInput [ngModel]="formData.repository" name="repository">
+        <input matInput [ngModel]="formData?.repository" name="repository">
       </mat-form-field>
     </sm-labeled-row>
     <sm-labeled-row
       [label]="editable? '':  'COMMIT ID' ">
       <div *ngIf="!editable">
-        <div [ngSwitch]="formData.scriptType">
+        <div [ngSwitch]="formData?.scriptType">
           <div *ngSwitchCase="sourceTypesEnum.VersionNum">
             {{formData?.version_num}} {{formData?.branch ? ' (in branch ' + formData?.branch + ')' : ''}}
           </div>
@@ -17,49 +17,49 @@
             {{formData?.branch ? 'Latest in branch ' + formData?.branch : '' }}
           </div>
           <div *ngSwitchCase="sourceTypesEnum.Tag">
-            {{formData?.version_num ? 'Tag ' + formData?.tag + ' (commit id ' + formData.version_num + ')' : 'Tag ' + formData?.tag }}
+            {{formData?.version_num ? 'Tag ' + formData?.tag + ' (commit id ' + formData?.version_num + ')' : 'Tag ' + formData?.tag }}
           </div>
         </div>
       </div>
       <div class="d-flex">
         <mat-form-field appearance="outline" *ngIf="editable" class="col-12">
-          <mat-select [ngModel]="formData.scriptType" name="scriptType">
+          <mat-select [ngModel]="formData?.scriptType" name="scriptType">
             <mat-option *ngFor="let type of scriptTypeOptions" [value]="type.value">{{type.label}}</mat-option>
           </mat-select>
         </mat-form-field>
 
         <mat-form-field appearance="outline"
                         *ngIf="editable"
-                        [ngClass]="{'d-none': formData.scriptType !== sourceTypesEnum.VersionNum }" class="col-12">
+                        [ngClass]="{'d-none': formData?.scriptType !== sourceTypesEnum.VersionNum }" class="col-12">
           <mat-error>Required</mat-error>
           <mat-label>Commit ID</mat-label>
           <input matInput type="text"
                  name="version_num"
                  (blur)="resetOtherScriptParameters(sourceTypesEnum.VersionNum)"
-                 [ngModel]="formData.version_num"
-                 [required]="(!!formData?.repository) && formData.scriptType == sourceTypesEnum.VersionNum"
+                 [ngModel]="formData?.version_num"
+                 [required]="(!!formData?.repository) && formData?.scriptType == sourceTypesEnum.VersionNum"
                  [placeholder]="scriptPlaceHolders[sourceTypesEnum.VersionNum]">
         </mat-form-field>
 
-        <mat-form-field appearance="outline" *ngIf="editable" [ngClass]="{'d-none': formData.scriptType !== sourceTypesEnum.Branch }" class="col-12">
+        <mat-form-field appearance="outline" *ngIf="editable" [ngClass]="{'d-none': formData?.scriptType !== sourceTypesEnum.Branch }" class="col-12">
           <mat-label>Branch</mat-label>
           <mat-error>Required</mat-error>
           <input matInput type="text"
                  name="branch"
                  (blur)="resetOtherScriptParameters(sourceTypesEnum.Branch)"
-                 [ngModel]="formData.branch"
-                 [required]="(!!formData?.repository) && formData.scriptType == sourceTypesEnum.Branch"
+                 [ngModel]="formData?.branch"
+                 [required]="(!!formData?.repository) && formData?.scriptType == sourceTypesEnum.Branch"
                  [placeholder]="scriptPlaceHolders[sourceTypesEnum.Branch]">
         </mat-form-field>
 
-        <mat-form-field appearance="outline" *ngIf="editable" [ngClass]="{'d-none': formData.scriptType !== sourceTypesEnum.Tag }" class="col-12">
+        <mat-form-field appearance="outline" *ngIf="editable" [ngClass]="{'d-none': formData?.scriptType !== sourceTypesEnum.Tag }" class="col-12">
           <mat-error>Required</mat-error>
           <mat-label>Tag</mat-label>
           <input matInput type="text"
                  name="tag"
                  (blur)="resetOtherScriptParameters(sourceTypesEnum.Tag)"
-                 [ngModel]="formData.tag"
-                 [required]="(!!formData?.repository) && formData.scriptType == sourceTypesEnum.Tag"
+                 [ngModel]="formData?.tag"
+                 [required]="(!!formData?.repository) && formData?.scriptType == sourceTypesEnum.Tag"
                  [placeholder]="scriptPlaceHolders[sourceTypesEnum.Tag]">
         </mat-form-field>
 
@@ -67,15 +67,15 @@
 
     </sm-labeled-row>
     <sm-labeled-row label="SCRIPT PATH">
-      <div *ngIf="!editable">{{formData.entry_point}}</div>
+      <div *ngIf="!editable">{{formData?.entry_point}}</div>
       <mat-form-field appearance="outline" *ngIf="editable" class="col-24">
-        <input matInput type="text" [ngModel]="formData.entry_point" name="entry_point">
+        <input matInput type="text" [ngModel]="formData?.entry_point" name="entry_point">
       </mat-form-field>
     </sm-labeled-row>
     <sm-labeled-row label="WORKING DIRECTORY">
-      <div *ngIf="!editable">{{formData.working_dir}}</div>
+      <div *ngIf="!editable">{{formData?.working_dir}}</div>
       <mat-form-field appearance="outline" *ngIf="editable" class="col-24">
-        <input matInput type="text" [ngModel]="formData.working_dir" name="working_dir">
+        <input matInput type="text" [ngModel]="formData?.working_dir" name="working_dir">
       </mat-form-field>
     </sm-labeled-row>
   </div>
diff --git a/src/app/webapp-common/experiments/dumb/experiment-execution-source-code/experiment-execution-source-code.component.scss b/src/app/webapp-common/experiments/dumb/experiment-execution-source-code/experiment-execution-source-code.component.scss
index 8b137891..9e546bdc 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-execution-source-code/experiment-execution-source-code.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiment-execution-source-code/experiment-execution-source-code.component.scss
@@ -1 +1,3 @@
-
+.source-code-container {
+  margin-bottom: 16px;
+}
diff --git a/src/app/webapp-common/experiments/dumb/experiment-footer/experiment-footer.component.html b/src/app/webapp-common/experiments/dumb/experiment-footer/experiment-footer.component.html
deleted file mode 100644
index f4d4f790..00000000
--- a/src/app/webapp-common/experiments/dumb/experiment-footer/experiment-footer.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<sm-compare-footer [visible]="visible" class="d-flex align-items-center justify-content-start">
-  <div class="experiment-selected-number">
-    <span class="show-all pointer" (click)="showAllSelectedClicked.emit(!showAllSelectedIsActive)">
-      {{'SHOW ' + (showAllSelectedIsActive ? 'ALL EXPERIMENTS' : (numberOfSelectedExperiments + ' EXPERIMENTS SELECTED'))}} </span>
-  </div>
-  <div class="d-flex align-items-center">
-    <sm-icon-label label="COMPARE" iconClass="icon i-compare"
-                   (iconLabelClicked)="onCompareExperimentsClicked()"></sm-icon-label>
-  </div>
-</sm-compare-footer>
diff --git a/src/app/webapp-common/experiments/dumb/experiment-footer/experiment-footer.component.scss b/src/app/webapp-common/experiments/dumb/experiment-footer/experiment-footer.component.scss
deleted file mode 100644
index a09164fb..00000000
--- a/src/app/webapp-common/experiments/dumb/experiment-footer/experiment-footer.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-    .experiment-selected-number {
-      padding-left: 12px;
-      width: 218px;
-      height: 100%;
-         }
-    span {
-      line-height: 60px;
-    }
-
-    .compare {
-      padding-right: 40px;
-      cursor: pointer;
-    }
-
-    .test-models {
-      cursor: pointer;
-    }
-  .show-all{
-    text-decoration: underline;
-  }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-footer/experiment-footer.component.ts b/src/app/webapp-common/experiments/dumb/experiment-footer/experiment-footer.component.ts
deleted file mode 100644
index 10a8027e..00000000
--- a/src/app/webapp-common/experiments/dumb/experiment-footer/experiment-footer.component.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-
-@Component({
-  selector   : 'sm-experiment-footer',
-  templateUrl: './experiment-footer.component.html',
-  styleUrls  : ['./experiment-footer.component.scss']
-})
-export class ExperimentFooterComponent implements OnInit {
-
-  @Input() visible                 = false;
-  @Input() numberOfSelectedExperiments;
-  @Input() showAllSelectedIsActive;
-  @Input() isArchivedMode;
-  @Input() disableArchive: boolean = false;
-  @Input() archiveToolTipMessage: string;
-
-  @Output() restoreExperimentsClicked = new EventEmitter();
-  @Output() compareExperimentsClicked = new EventEmitter();
-  @Output() archiveExperimentsClicked = new EventEmitter();
-  @Output() showAllSelectedClicked    = new EventEmitter();
-
-  constructor() {
-  }
-
-  ngOnInit() {
-  }
-
-  onCompareExperimentsClicked() {
-    this.compareExperimentsClicked.emit();
-  }
-
-  archiveExperiments() {
-    this.archiveExperimentsClicked.emit();
-  }
-
-  restoreExperiments() {
-    this.restoreExperimentsClicked.emit();
-  }
-}
diff --git a/src/app/webapp-common/experiments/dumb/experiment-general-info/experiment-general-info.component.html b/src/app/webapp-common/experiments/dumb/experiment-general-info/experiment-general-info.component.html
index abe4e185..33fcd380 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-general-info/experiment-general-info.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-general-info/experiment-general-info.component.html
@@ -47,21 +47,21 @@
 </sm-labeled-row>
 
 
-<sm-labeled-row label="DESCRIPTION:" labelClass="pt-2">
-  <sm-inline-edit
-    [fieldValue]="experimentComment"
-    [originalText]="experimentComment"
-    [editable]=" ! isExample"
-    (textChanged)="commentValueChanged($event)"
-  >
-    <span class="general-description">{{experimentComment}}</span>
-  </sm-inline-edit>
-
-</sm-labeled-row>
-
-
 <sm-labeled-row label="PROJECT:">
   {{experiment?.project?.name | NA}}
 </sm-labeled-row>
 
 
+<sm-labeled-row label="DESCRIPTION:" labelClass="pt-2">
+  <sm-inline-edit
+    [fieldValue]="experimentComment"
+    [originalText]="experimentComment"
+    [editable]="!isExample"
+    [multiline]="true"
+    (textChanged)="commentValueChanged($event)"
+    (inlineActiveStateChanged)="editExperimentComment($event)"
+  >
+    <span class="general-description">{{experimentComment}}</span>
+  </sm-inline-edit>
+
+</sm-labeled-row>
diff --git a/src/app/webapp-common/experiments/dumb/experiment-general-info/experiment-general-info.component.ts b/src/app/webapp-common/experiments/dumb/experiment-general-info/experiment-general-info.component.ts
index e25fa785..3003f5cd 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-general-info/experiment-general-info.component.ts
+++ b/src/app/webapp-common/experiments/dumb/experiment-general-info/experiment-general-info.component.ts
@@ -2,6 +2,8 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {ISelectedExperiment} from '../../../../features/experiments/shared/experiment-info.model';
 import {TIME_FORMAT_STRING} from '../../../constants';
+import {ActivateEdit, DeactivateEdit} from '../../../../features/experiments/actions/experiments-info.actions';
+import {Store} from '@ngrx/store';
 
 @Component({
   selector   : 'sm-experiment-general-info',
@@ -9,6 +11,7 @@ import {TIME_FORMAT_STRING} from '../../../constants';
   styleUrls  : ['./experiment-general-info.component.scss']
 })
 export class ExperimentGeneralInfoComponent {
+  constructor(private store: Store<any>) {}
 
   commentControl = new FormControl();
 
@@ -38,5 +41,12 @@ export class ExperimentGeneralInfoComponent {
   commentValueChanged(value) {
     this.commentChanged.emit(value);
   }
+  editExperimentComment(edit) {
+    if (edit) {
+      this.store.dispatch(new ActivateEdit('ExperimentComment'));
+    } else {
+      this.store.dispatch(new DeactivateEdit());
+    }
+  }
 
 }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-header/experiment-header.component.scss b/src/app/webapp-common/experiments/dumb/experiment-header/experiment-header.component.scss
index c48ce1b3..9afd5644 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-header/experiment-header.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiment-header/experiment-header.component.scss
@@ -7,7 +7,6 @@
 
   .header-container {
     padding-left: 24px;
-    padding-right: 24px;
     height: $project-header-height;
     transition: background-color 0.5s;
 
diff --git a/src/app/webapp-common/experiments/dumb/experiment-hyper-params-form/experiment-hyper-params-form.component.html b/src/app/webapp-common/experiments/dumb/experiment-hyper-params-form/experiment-hyper-params-form.component.html
deleted file mode 100644
index 8b873770..00000000
--- a/src/app/webapp-common/experiments/dumb/experiment-hyper-params-form/experiment-hyper-params-form.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
- <sm-editable-section #parameterSection
-                      [saving]="saving"
-                      [editable]="editable"
-                      [disableSave]="!executionParamsForm?.hyperParameters?.form?.valid"
-                      (cancelClicked)="sectionCancelled()"
-                      (saveClicked)="sectionSaved()"
-                      (activateEditClicked)="activateEditClicked($event, 'parameter')">
-   <sm-section-header label="HYPER PARAMETERS" [helpText]="HELP_TEXTS.EXECUTION_HYPER_PARAMETERS"></sm-section-header>
-   <sm-experiment-execution-parameters
-     #executionParamsForm
-     class="form-section"
-     fieldName="parameters"
-     [editable]="editable && parameterSection.inEditMode"
-     [formData]="formData.parameters"
-     (formDataChanged)="fieldValueChanged($event)"
-   ></sm-experiment-execution-parameters>
- </sm-editable-section>
diff --git a/src/app/webapp-common/experiments/dumb/experiment-hyper-params-form/experiment-hyper-params-form.component.scss b/src/app/webapp-common/experiments/dumb/experiment-hyper-params-form/experiment-hyper-params-form.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/webapp-common/experiments/dumb/experiment-hyper-params-form/experiment-hyper-params-form.component.ts b/src/app/webapp-common/experiments/dumb/experiment-hyper-params-form/experiment-hyper-params-form.component.ts
deleted file mode 100644
index fcf057a3..00000000
--- a/src/app/webapp-common/experiments/dumb/experiment-hyper-params-form/experiment-hyper-params-form.component.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {IExperimentInfoFormComponent} from '../../../../features/experiments/shared/experiment-info.model';
-import {ImmutableFormContainer} from '../../../shared/ui-components/forms/immutableFormContainer';
-import {HELP_TEXTS} from '../../shared/common-experiments.const';
-import {IHyperParamsForm} from '../../shared/experiment-hyper-params.model';
-
-@Component({
-  selector   : 'sm-experiment-hyper-params-form',
-  templateUrl: './experiment-hyper-params-form.component.html',
-  styleUrls  : ['./experiment-hyper-params-form.component.scss']
-})
-export class ExperimentHyperParamsFormComponent extends ImmutableFormContainer implements IExperimentInfoFormComponent {
-
-
-  @Input() formData: IHyperParamsForm;
-  @Input() editable: boolean;
-  @Input() isInDev: boolean;
-  @Input() saving = false;
-  HELP_TEXTS      = HELP_TEXTS;
-
-  sectionSaved() {
-    this.saveFormData.emit();
-  }
-
-  sectionCancelled() {
-    this.cancelFormDataChange.emit();
-  }
-
-  activateEditClicked(editMode, sectionName: string) {
-    this.activateEdit.emit({editMode: editMode, sectionName: sectionName});
-  }
-}
diff --git a/src/app/webapp-common/experiments/dumb/experiment-info-header/experiment-info-header.component.html b/src/app/webapp-common/experiments/dumb/experiment-info-header/experiment-info-header.component.html
index 64cb0c7b..3aeee4d6 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-info-header/experiment-info-header.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-info-header/experiment-info-header.component.html
@@ -1,34 +1,44 @@
-<sm-overlay [backdropActive]="backdropActive"></sm-overlay>
 <small class="alert-warning" *ngIf="editName.active && isDev">Renaming a DEV experiment without changing the
   code to reflect the rename, will create a new experiment the next time the code is executed.
 </small>
 <div class="d-flex w-100">
-  <img class="experiment-icon" src="./app/webapp-common/assets/icons/experiment.svg">
+  <sm-experiment-type-icon-label class="experiment-icon" [showLabel]="false" [type]="experiment?.type" iconClass="xl" >
+  </sm-experiment-type-icon-label>
   <div class="middle-col">
     <div class="d-flex p2">
       <sm-inline-edit
         #editName
-        class="edit-name"
-        [originalText]="infoData?.name"
+        class="edit-name pr-3"
+        [originalText]="infoData?.name || experiment?.name"
         [editable]="editable"
         [minWidth]="250"
         (textChanged)="onNameChanged($event)"
+        (inlineActiveStateChanged)="editExperimentName($event)"
       >
-        <span class="experiment-name">{{infoData?.name}}</span>
+        <span class="experiment-name">{{experiment?.name}}</span>
       </sm-inline-edit>
-      <i class="icon i-id id-icon pointer" (click)="viewId = true" *ngIf="!viewId"></i>
+      <i class="icon i-id id-icon pointer" (click)="showID()" *ngIf="!viewId"></i>
       <span class="experiment-id" *ngIf="viewId">{{experiment.id}}</span>
     </div>
     <div class="d-flex align-items-center">
-      <span class="experiment-type">{{experiment?.type |noUnderscore| titlecase }}</span>
+      <span class="experiment-type">{{ experiment?.type |noUnderscore| titlecase }}</span>
       <sm-tag-list
+        *smCheckPermission="editable; else readOnlyTags"
         class="w-100"
-        [class.menu-open]="tagMenu.trigger.menuOpen"
+        [class.menu-open]="!!tagMenu && tagMenu.trigger.menuOpen"
         [sysTags]="systemTags"
         [tags]="experiment?.tags"
         (add)="openTagMenu($event)"
         (remove)="removeTag($event)"></sm-tag-list>
+      <ng-template #readOnlyTags>
+        <sm-tag-list
+          class="w-100"
+          [class.menu-open]="!!tagMenu && tagMenu.trigger.menuOpen"
+          [sysTags]="systemTags"
+          [tags]="experiment?.tags"></sm-tag-list>
+      </ng-template>
       <sm-menu
+        *smCheckPermission="true"
         #tagMenu
         [showCart]="false"
         [showButton]="false"
@@ -45,10 +55,10 @@
       </sm-menu>
     </div>
   </div>
-  <div class="p-2 light-theme">
+  <div *smCheckPermission="true" class="p-2 light-theme menu-container">
     <button class="btn btn-icon" (click)="minimizeClicked.emit()" *ngIf="showMinimize"
             smTooltip="View in experiment table" position="left">
-      <i class="icon i-info-minimize"></i>
+      <i class="al-icon al-ico-info-min al-color light-grey-blue"></i>
     </button>
     <sm-experiment-menu
       *ngIf="showMenu && experiment"
diff --git a/src/app/webapp-common/experiments/dumb/experiment-info-header/experiment-info-header.component.scss b/src/app/webapp-common/experiments/dumb/experiment-info-header/experiment-info-header.component.scss
index 4e5bf728..a2e33e4a 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-info-header/experiment-info-header.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiment-info-header/experiment-info-header.component.scss
@@ -1,6 +1,6 @@
 @import "../../../layout/layout.scss";
 
-:host{
+:host {
   display: block;
   position: relative;
   height: $experiment-info-header-height;
@@ -11,17 +11,19 @@
   }
 
   .experiment-icon {
-    margin: 10px 20px 0 5px;
-    height: 37px;
-    width: 23px;
+    margin: 0px 20px 0 5px;
+  }
+  .menu-container{
+    margin-right: 4px;
   }
-
   .middle-col {
     width: calc(100% - 100px);
+
   }
-   .experiment-name {
+
+  .experiment-name {
     font-size: 15px;
-    min-height:24px;
+    min-height: 24px;
     font-weight: bold;
     max-width: 80ch;
     text-overflow: ellipsis;
@@ -30,7 +32,7 @@
   }
 
   .experiment-type {
-    width: 180px;
+    white-space: nowrap;
     font-size: 15px;
     margin-right: 12px;
   }
@@ -40,12 +42,13 @@
     position: relative;
     font-weight: bold;
   }
-  .id-icon{
+  .id-icon {
     width: 41px;
     height: 31px;
   }
   .edit-name {
-    margin-top:5px;
+    margin-top: 5px;
+    max-width: 100%;
   }
   .menu-button, .menu-button &:hover, .menu-button &:focus {
     cursor: pointer;
@@ -53,4 +56,15 @@
     font-size: 12px;
     text-decoration: none;
   }
+  .btn.btn-icon:not([disabled]):hover {
+    filter: none;
+  }
+
+  .btn {
+    &:hover{
+      .al-icon.al-ico-info-min {
+        color: #212529;
+      }
+    }
+  }
 }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-info-header/experiment-info-header.component.ts b/src/app/webapp-common/experiments/dumb/experiment-info-header/experiment-info-header.component.ts
index 4f452f15..791039fa 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-info-header/experiment-info-header.component.ts
+++ b/src/app/webapp-common/experiments/dumb/experiment-info-header/experiment-info-header.component.ts
@@ -8,10 +8,9 @@ import {Store} from '@ngrx/store';
 import {selectProjectTags} from '../../../core/reducers/projects.reducer';
 import {getTags} from '../../../core/actions/projects.actions';
 import {addTag, removeTag} from '../../actions/common-experiments-menu.actions';
-import {MatMenuTrigger} from '@angular/material/menu';
 import {TagsMenuComponent} from '../../../shared/ui-components/tags/tags-menu/tags-menu.component';
-import {EXPERIMENTS_TAGS} from '../../../../features/experiments/shared/experiments.const';
 import {MenuComponent} from '../../../shared/ui-components/panel/menu/menu.component';
+import {ActivateEdit, DeactivateEdit} from '../../../../features/experiments/actions/experiments-info.actions';
 
 @Component({
   selector   : 'sm-experiment-info-header',
@@ -38,29 +37,36 @@ export class ExperimentInfoHeaderComponent {
   @ViewChild('tagMenu') tagMenu: MenuComponent;
   @ViewChild('tagsMenuContent') tagMenuContent: TagsMenuComponent;
 
-  constructor(private store: Store) {
+  constructor(private store: Store<any>) {
     this.tags$ = this.store.select(selectProjectTags);
   }
 
   private _experiment: ISelectedExperiment;
+  private previousId: string;
 
   get experiment() {
     return this._experiment;
   }
 
   @Input() set experiment(experiment: ISelectedExperiment) {
-
     this._experiment = experiment;
     this.isDev = isDevelopment(experiment);
     this.systemTags = getSystemTags(experiment);
-    this.viewId      = false;
+    if (experiment?.id !== this.previousId) {
+      this.viewId = false;
+    }
+    this.previousId = experiment?.id;
   }
 
+
   onNameChanged(name) {
     this.experimentNameChanged.emit(name);
   }
 
   openTagMenu(event: MouseEvent) {
+    if (!this.tagMenu) {
+      return;
+    }
     this.store.dispatch(getTags());
     this.tagMenu.position = {x: event.clientX, y: event.clientY};
     window.setTimeout(() => {
@@ -80,4 +86,16 @@ export class ExperimentInfoHeaderComponent {
   tagsMenuClosed() {
     this.tagMenuContent.clear();
   }
+
+  editExperimentName(edit) {
+    if (edit) {
+      this.store.dispatch(new ActivateEdit('ExperimentName'));
+    } else {
+      this.store.dispatch(new DeactivateEdit());
+    }
+  }
+
+  showID() {
+    this.viewId = true;
+  }
 }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-log-info/experiment-log-info.component.html b/src/app/webapp-common/experiments/dumb/experiment-log-info/experiment-log-info.component.html
index 07a81ffa..9784ba15 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-log-info/experiment-log-info.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-log-info/experiment-log-info.component.html
@@ -1,7 +1,9 @@
-<cdk-virtual-scroll-viewport itemSize="26" minBufferPx="1000" maxBufferPx="2000"
+<cdk-virtual-scroll-viewport itemSize="25" minBufferPx="1000" maxBufferPx="2000"
   class="viewport" tabindex="0" #LogContainer>
   <div *cdkVirtualFor="let line of lines; trackBy: trackByTimestampFn" class="log-line" [class.separator]="line.separator">
     <div class="timestamp">{{line.timestamp | date:'y-MM-dd HH:mm:ss'}}</div>
     <div class="entry" [innerHTML]="line.entry | safe:'html'"></div>
   </div>
 </cdk-virtual-scroll-viewport>
+<mat-spinner *ngIf="fetching" [diameter]="80" [strokeWidth]="5"></mat-spinner>
+<button class="btn btn-primary get-last" [class.at-end]="canRefresh" (click)="getLast()">Jump to end</button>
diff --git a/src/app/webapp-common/experiments/dumb/experiment-log-info/experiment-log-info.component.scss b/src/app/webapp-common/experiments/dumb/experiment-log-info/experiment-log-info.component.scss
index 5614400c..bd6f08a2 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-log-info/experiment-log-info.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiment-log-info/experiment-log-info.component.scss
@@ -1,5 +1,7 @@
 :host {
   display: block;
+  position: relative;
+  overflow: hidden;
 
   .viewport {
     height: 100%;
@@ -14,7 +16,6 @@
 
   .log-line {
     font: 12px monospace;
-    border-bottom: 1px solid transparent;
 
     .timestamp {
       background-color: #1d1d1d;
@@ -23,18 +24,41 @@
       float: left;
       height: 25px;
       padding: 5px 0 0 20px;
+      border-bottom: 1px solid #1d1d1d;
     }
 
     .entry {
       background-color: #000;
       color: #FFFFFF;
       height: 25px;
-      padding: 5px 190px 0;
+      padding: 5px 0 0 190px;
       white-space: nowrap;
+      border-bottom: 1px solid transparent;
     }
 
     &.separator {
-      border-bottom: 1px solid #343a40;
+      .timestamp, .entry {
+        border-bottom: 1px solid #343a40;
+      }
     }
   }
+
+  .get-last {
+    position: absolute;
+    right: -100px;
+    bottom: 30px;
+    transition: right 0.5s;
+  }
+
+  &:hover {
+    .get-last:not(.at-end) {
+      right: 30px;
+    }
+  }
+
+  mat-spinner {
+    position: absolute;
+    left: 45%;
+    top: 45%;
+  }
 }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-log-info/experiment-log-info.component.ts b/src/app/webapp-common/experiments/dumb/experiment-log-info/experiment-log-info.component.ts
index e73617ec..a144f5a7 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-log-info/experiment-log-info.component.ts
+++ b/src/app/webapp-common/experiments/dumb/experiment-log-info/experiment-log-info.component.ts
@@ -1,9 +1,21 @@
-import {ChangeDetectionStrategy, Component, Input, ViewChild, OnInit, OnDestroy} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  ViewChild,
+  OnInit,
+  OnDestroy,
+  Output,
+  EventEmitter,
+  ChangeDetectorRef
+} from '@angular/core';
 import {Subscription} from 'rxjs';
 import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
+import {last, findIndex} from 'lodash/fp';
 import * as Convert from 'ansi-to-html';
+import {Log} from '../../reducers/common-experiment-output.reducer';
 
-interface ILogRow {
+interface LogRow {
   timestamp?: string;
   entry: string;
   separator?: boolean;
@@ -17,23 +29,32 @@ interface ILogRow {
 })
 export class ExperimentLogInfoComponent implements OnInit, OnDestroy {
 
-  private orgLogs: Array<any>;
-  public lines: ILogRow[];
+  public orgLogs: Log[];
+  public lines = [] as LogRow[];
   private initial = true;
-  public convert: any;
-  private hasFilter: boolean = false;
+  public convert: Convert;
+  private hasFilter = false;
   private regex: RegExp;
   private scrollSubscription: Subscription;
+  private indexSubscription: Subscription;
   private shouldFocusLog = true;
+  public fetching = false;
+  private scrolling: boolean = false;
+  private prevLocation = 0;
+  public canRefresh = true;
+  private prevLine: LogRow;
+  private fetchPrev: boolean;
+  private prevLineOffset: number;
 
   @ViewChild('LogContainer', {static: true}) private logContainer: CdkVirtualScrollViewport;
 
+  @Input() beginningOfLog: boolean;
   @Input() set filterString(filter: string) {
     this.shouldFocusLog = false;
     setTimeout(() => this.shouldFocusLog = true, 1000);
     this.hasFilter = !!filter;
     if (this.hasFilter) {
-      this.regex = this.getRegexFromString(filter);
+      this.regex = ExperimentLogInfoComponent.getRegexFromString(filter);
     }
 
     if (this.orgLogs) {
@@ -41,36 +62,88 @@ export class ExperimentLogInfoComponent implements OnInit, OnDestroy {
     }
   }
 
-  @Input() set logs(log: Array<any>) {
+  @Input() set logs(log: Log[]) {
     if (log === null) {
       return;
     }
     this.orgLogs = log;
     this.calcLines();
-    const elm = this.logContainer.elementRef.nativeElement;
-    if (log && log.length && (elm.scrollTop + elm.offsetHeight > elm.scrollHeight - 100 || this.initial)) {
-      this.initial = false;
-      setTimeout(() => this.logContainer.scrollToIndex(this.lines.length), 10);
+    let prevLocation = findIndex(this.prevLine, this.lines) + this.prevLineOffset;
+    if (this.fetchPrev) {
+      prevLocation -= 25;
     }
+    this.fetchPrev = null;
+    if (this.fetching) {
+      this.scrolling = true;
+      window.setTimeout(() => {
+        this.logContainer.scrollToIndex(prevLocation);
+        window.setTimeout(() => this.scrolling = false, 50);
+      });
+    } else {
+      const elm = this.logContainer.elementRef.nativeElement;
+      if (log?.length && (elm.scrollTop + elm.offsetHeight > elm.scrollHeight - 100 || this.initial)) {
+        this.initial = false;
+        this.scrolling = true;
+        window.setTimeout(() => {
+          this.logContainer.scrollToIndex(this.lines.length);
+          this.canRefresh = true;
+          window.setTimeout(() => this.scrolling = false, 50);
+        }, 10);
+      }
+    }
+    this.fetching = false;
   }
 
-  constructor() {
+  @Output() fetchMore = new EventEmitter<{direction: string; from?: number}>();
+
+  constructor(private cdr: ChangeDetectorRef) {
     this.convert = new Convert();
   }
 
   ngOnInit() {
     this.scrollSubscription = this.logContainer.elementScrolled().subscribe((event: Event) => {
       if(this.shouldFocusLog) {
-        setTimeout(() => (<HTMLElement>event.target).focus(), 50);
+        setTimeout(() => (event.target as HTMLElement).focus(), 50);
       }
-    })
+    });
+    window.setTimeout(() => {
+      this.indexSubscription = this.logContainer.scrolledIndexChange.subscribe((location: number) => {
+        if (!this.fetching && !this.scrolling) {
+          const itemsInView = Math.ceil(this.logContainer.getViewportSize() / 25);
+          if (location < 10 && location < this.prevLocation && !this.beginningOfLog) {
+            this.fetching = true;
+            this.cdr.detectChanges();
+            this.fetchPrev = true;
+            this.fetchMore.emit({direction: 'prev', from: this.orgLogs?.[0]?.timestamp});
+          }
+          else if (location >= this.lines.length - itemsInView && location > this.prevLocation) {
+            this.fetching = true;
+            this.cdr.detectChanges();
+            this.fetchMore.emit({direction: 'next', from: last(this.orgLogs)?.timestamp});
+          }
+        }
+        this.prevLocation = location;
+        this.prevLine = {} as LogRow;
+        let i = 0;
+        while (!this.prevLine.timestamp) {
+          this.prevLine = this.lines[location - i];
+          i += 1;
+        }
+        this.prevLineOffset = i;
+        if (this.canRefresh !== location > this.lines.length - 30) {
+          this.canRefresh = !this.canRefresh;
+          this.cdr.detectChanges();
+        }
+      });
+    }, 500);
   }
 
   ngOnDestroy() {
-    this.scrollSubscription.unsubscribe();
+    this.scrollSubscription?.unsubscribe();
+    this.indexSubscription?.unsubscribe();
   }
 
-  private getRegexFromString(filter: string) {
+  private static getRegexFromString(filter: string) {
     const flags = filter.match(/.*\/([gimy]*)$/);
     if (flags) {
       const pattern = flags ? filter.replace(new RegExp('^/(.*?)/' + flags[1] + '$'), '$1') : filter;
@@ -84,22 +157,35 @@ export class ExperimentLogInfoComponent implements OnInit, OnDestroy {
   calcLines() {
     this.lines = [];
     this.orgLogs.filter((row) => !this.hasFilter || this.regex.test(row.msg))
-    .forEach(logItem => {
-      let first = true;
-      logItem.msg.split('\n').filter(msg => !!msg).forEach((msg: string) => {
-        const converted = msg ? this.convert.toHtml(msg) : '';
-        if (first) {
-          this.lines.push({timestamp: logItem['timestamp'] || logItem['@timestamp'], entry: converted});
-          first = false;
-        } else {
-          this.lines.push({entry: converted});
-        }
+      .forEach(logItem => {
+        let first = true;
+        logItem.msg.split('\n').filter(msg => !!msg).forEach((msg: string) => {
+          const converted = msg ? this.convert.toHtml(msg) : '';
+          if (first) {
+            this.lines.push({timestamp: logItem['timestamp'] || logItem['@timestamp'], entry: converted});
+            first = false;
+          } else {
+            this.lines.push({entry: converted});
+          }
+        });
+        this.lines[this.lines.length - 1].separator = true;
       });
-      this.lines[this.lines.length - 1].separator = true;
-    });
   }
 
-  trackByTimestampFn(line: ILogRow) {
+  trackByTimestampFn(index: number, line: LogRow) {
     return line.timestamp;
   }
+
+  reset() {
+    this.initial = true;
+    this.fetching = false;
+    this.cdr.detectChanges();
+  }
+
+  getLast() {
+    this.prevLine = null;
+    this.prevLineOffset = 0;
+    this.initial = true;
+    this.fetchMore.emit({direction: 'prev'});
+  }
 }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-models-form-view/experiment-models-form-view.component.html b/src/app/webapp-common/experiments/dumb/experiment-models-form-view/experiment-models-form-view.component.html
index 393ab38e..62bbe47d 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-models-form-view/experiment-models-form-view.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-models-form-view/experiment-models-form-view.component.html
@@ -14,13 +14,13 @@
         ></sm-copy-clipboard>
       </span>
       <div *ngIf="editable">
-        <i class="icon i-edit sm-md pointer mr-2"  smTooltip="Select model" (click)="chooseModel()"></i>
-        <i *ngIf="model?.id" class="icon i-trash sm-md pointer" smTooltip="Remove model" (click)="removeModel()"></i>
+        <i class="al-icon al-ico-edit al-color blue-300 sm-md pointer mr-2"  smTooltip="Select model" (click)="chooseModel()"></i>
+        <i *ngIf="model?.id" class="al-icon al-ico-trash al-color blue-300 sm-md pointer" smTooltip="Remove model" (click)="removeModel()"></i>
       </div>
     </div>
   </sm-labeled-row>
   <sm-labeled-row label="CREATING EXPERIMENT">
-    <a [href]="'/projects/'+ ((source?.projectId) ? source?.projectId : '*') + '/experiments/' + source.experimentId"
+    <a [href]="'/projects/'+ ((source?.projectId) ? source?.projectId : '*') + '/experiments/' + (source? source?.experimentId: '')"
        target="_blank">
       {{source?.experimentName}}
     </a>
diff --git a/src/app/webapp-common/experiments/dumb/experiment-models-form-view/experiment-models-form-view.component.scss b/src/app/webapp-common/experiments/dumb/experiment-models-form-view/experiment-models-form-view.component.scss
index 6610d6e9..5d1a720e 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-models-form-view/experiment-models-form-view.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiment-models-form-view/experiment-models-form-view.component.scss
@@ -1,4 +1,3 @@
-//.input-model-container {
-//  display: block;
-//  padding-top: 10px;
-//}
+.input-model-container {
+  margin-bottom: 16px;
+}
diff --git a/src/app/webapp-common/experiments/dumb/experiment-models-form-view/experiment-models-form-view.component.ts b/src/app/webapp-common/experiments/dumb/experiment-models-form-view/experiment-models-form-view.component.ts
index 1b5fba95..19b6b0ee 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-models-form-view/experiment-models-form-view.component.ts
+++ b/src/app/webapp-common/experiments/dumb/experiment-models-form-view/experiment-models-form-view.component.ts
@@ -1,6 +1,6 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {IModelInfoInput, IModelInfoOutput, IModelInfoSource} from '../../shared/common-experiment-model.model';
-import { MatDialog } from '@angular/material/dialog';
+import {MatDialog} from '@angular/material/dialog';
 import {filter} from 'rxjs/operators';
 import {ModelAutoPopulateDialogComponent} from '../model-auto-populate-dialog/model-auto-populate-dialog.component';
 import {Model} from '../../../../business-logic/model/models/model';
@@ -26,9 +26,10 @@ export class ExperimentModelsFormViewComponent extends BaseClickableArtifact {
   @Input() modelLabels: Model['labels'];
   @Input() source: IModelInfoSource;
   @Input() output: IModelInfoOutput;
+  @Input() experimentName: string;
 
   @Input() set model(model: IModelInfoInput) {
-    this._model      = model;
+    this._model = model;
     this.isLocalFile = model && model.url && this.adminService.isLocalFile(model.url);
   }
 
@@ -38,7 +39,7 @@ export class ExperimentModelsFormViewComponent extends BaseClickableArtifact {
 
   @Output() modelSelected = new EventEmitter<{
     model: Model;
-    fieldsToPopulate: { labelEnum: boolean; networkDesign: boolean};
+    fieldsToPopulate: { labelEnum: boolean; networkDesign: boolean };
   }>();
 
   constructor(private dialog: MatDialog, protected adminService: AdminService, protected store: Store<any>) {
@@ -59,27 +60,31 @@ export class ExperimentModelsFormViewComponent extends BaseClickableArtifact {
   }
 
   confirmModelSelection(selectedModel: Model, isDesignEqual: boolean, areLabelsEquals: boolean) {
-    const autoPopulateModelDialog = this.dialog.open(
-      ModelAutoPopulateDialogComponent,
-      {data:
-          {
-            populateLabels: !areLabelsEquals,
-            populateDesign: !isDesignEqual
-          }
-      }
-    );
-    autoPopulateModelDialog.afterClosed().pipe(filter(confirmed => !!confirmed))
-      .subscribe((populateFields) => {
-        this.emitModelSelected(selectedModel, populateFields);
-      });
+    this.emitModelSelected(selectedModel, {
+      labelEnum    : false,
+      networkDesign: false,
+    });
+    // const autoPopulateModelDialog = this.dialog.open(
+    //   ModelAutoPopulateDialogComponent,
+    //   {data:
+    //       {
+    //         populateLabels: !areLabelsEquals,
+    //         populateDesign: !isDesignEqual,
+    //         experimentName: this.experimentName,
+    //         modelName: selectedModel.name,
+    //       }
+    //   }
+    // );
+    // autoPopulateModelDialog.afterClosed().pipe(filter(confirmed => !!confirmed))
+    //   .subscribe((populateFields) => {
+    //     this.emitModelSelected(selectedModel, populateFields);
+    //   });
   }
 
-  private emitModelSelected(model: Model, fieldsToPopulate: {labelEnum: boolean; networkDesign: boolean}) {
+  private emitModelSelected(model: Model, fieldsToPopulate: { labelEnum: boolean; networkDesign: boolean }) {
     this.modelSelected.emit({model: model, fieldsToPopulate: fieldsToPopulate});
   }
 
-
-
   private isDesignEqual(modelDesign: object, design: string) {
     return JSON.stringify(modelDesign) === design;
   }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-models-form/experiment-models-form.component.html b/src/app/webapp-common/experiments/dumb/experiment-models-form/experiment-models-form.component.html
deleted file mode 100644
index 2b31341a..00000000
--- a/src/app/webapp-common/experiments/dumb/experiment-models-form/experiment-models-form.component.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!-- **************** MODEL INPUT **************** -->
-<sm-editable-section #model
-                     [saving]="saving"
-                     [editable]="editable"
-                     (saveClicked)="sectionSaved()"
-                     (cancelClicked)="sectionCancelled()"
-                     (activateEditClicked)="activateEditClicked($event, 'model'); !formData?.input?.id && experimentModelForm.chooseModel() ">
-  <sm-experiment-models-form-view
-    #experimentModelForm
-    [editable]="editable && model.inEditMode"
-    [model]="formData?.input"
-    [projectId]="modelProjectId"
-    [networkDesign]="formData.prototext"
-    [modelLabels]="modelLabels"
-    [source]="formData?.source"
-    [output]="formData.output"
-    (modelSelected)="onModelSelected($event)">
-  </sm-experiment-models-form-view>
-</sm-editable-section>
-
-<sm-editable-section class="editable-design" #prototext [saving]="saving" [editable]="editable"
-                     (saveClicked)="sectionSaved()"
-                     (cancelClicked)="sectionCancelled()"
-                     (activateEditClicked)="activateEditClicked($event, 'prototext'); editPrototext()">
-  <sm-section-header label="MODEL CONFIGURATION"></sm-section-header>
-  <sm-experiment-network-design-form
-
-    fieldName="prototext"
-    inputClassName="preview-text resize-none"
-    [editable]="editable && prototext.inEditMode"
-    [errors]="getFieldErrors('prototext')"
-    [formData]="formData?.prototext"
-    (errorsChanged)="fieldErrorChanged($event)"
-    (formDataChanged)="fieldValueChanged($event)"
-    >
-  </sm-experiment-network-design-form>
-</sm-editable-section>
diff --git a/src/app/webapp-common/experiments/dumb/experiment-models-form/experiment-models-form.component.scss b/src/app/webapp-common/experiments/dumb/experiment-models-form/experiment-models-form.component.scss
deleted file mode 100644
index 7ee2359e..00000000
--- a/src/app/webapp-common/experiments/dumb/experiment-models-form/experiment-models-form.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-
-  .editable-design {
-    height: calc(100% - 180px);
-    min-height: 300px;
-  }
-
-}
diff --git a/src/app/webapp-common/experiments/dumb/experiment-models-form/experiment-models-form.component.ts b/src/app/webapp-common/experiments/dumb/experiment-models-form/experiment-models-form.component.ts
deleted file mode 100644
index 70af417d..00000000
--- a/src/app/webapp-common/experiments/dumb/experiment-models-form/experiment-models-form.component.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
-import {IExperimentModelInfo} from '../../shared/common-experiment-model.model';
-import {Model} from '../../../../business-logic/model/models/model';
-import {ImmutableFormContainer} from '../../../shared/ui-components/forms/immutableFormContainer';
-import {IExperimentInfoFormComponent} from '../../../../features/experiments/shared/experiment-info.model';
-import {experimentSectionsEnum} from '../../../../features/experiments/shared/experiments.const';
-import {HELP_TEXTS} from '../../shared/common-experiments.const';
-import {EditJsonComponent} from '../../../shared/ui-components/overlay/edit-json/edit-json.component';
-import {take} from 'rxjs/operators';
-import {MatDialog} from '@angular/material/dialog';
-
-@Component({
-  selector   : 'sm-experiment-models-form',
-  templateUrl: './experiment-models-form.component.html',
-  styleUrls  : ['./experiment-models-form.component.scss']
-})
-export class ExperimentModelsFormComponent extends ImmutableFormContainer implements OnInit, IExperimentInfoFormComponent {
-
-  HELP_TEXTS = HELP_TEXTS;
-  public modelProjectId: string;
-
-  constructor(private dialog: MatDialog) {
-    super();
-  }
-
-  @Input() editable: boolean;
-  @Input() controlName = 'model';
-  @Input() formData: IExperimentModelInfo;
-  @Input() userKnowledge: Map<experimentSectionsEnum, boolean>;
-  @Input() modelLabels: Model['labels'];
-  @Input() saving;
-  @Output() updateSectionKnowledge = new EventEmitter<experimentSectionsEnum>();
-  @Output() modelSelected = new EventEmitter<{
-    model: Model,
-    fieldsToPopulate: { labelEnum: boolean; networkDesign: boolean; }
-  }>();
-  @ViewChild('prototext') prototextSection;
-
-
-  ngOnInit(): void {
-    // parent
-    super.ngOnInit();
-    this.modelProjectId = this.formData.input && this.formData.input.project && this.formData.input.project.id ? this.formData.input.project.id : '*';
-  }
-
-  onModelSelected(event) {
-    this.modelSelected.emit(event);
-    this.sectionSaved();
-  }
-
-  sectionSaved() {
-    this.saveFormData.emit();
-  }
-
-  sectionCancelled() {
-    this.cancelFormDataChange.emit();
-  }
-
-  activateEditClicked(editMode, sectionName: string) {
-    this.activateEdit.emit({editMode: editMode, sectionName: sectionName});
-  }
-
-  editPrototext() {
-    const editPrototextDialog = this.dialog.open(EditJsonComponent, {
-      data: {textData: this.formData?.prototext, readOnly: false, title: 'EDIT MODEL CONFIGURATION', typeJson: false}
-    });
-
-    editPrototextDialog.afterClosed().pipe(take(1)).subscribe((data) => {
-      if (data === undefined) {
-        this.prototextSection.cancelClickedEvent();
-      } else {
-        this.fieldValueChanged({field: 'prototext', value: data});
-        this.sectionSaved();
-      }
-    });
-  }
-}
diff --git a/src/app/webapp-common/experiments/dumb/experiment-network-design-form/experiment-network-design-form.component.html b/src/app/webapp-common/experiments/dumb/experiment-network-design-form/experiment-network-design-form.component.html
index b8b29188..0d2c35bb 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-network-design-form/experiment-network-design-form.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-network-design-form/experiment-network-design-form.component.html
@@ -1,4 +1,5 @@
 <sm-textarea-control
+  *ngIf="editable"
   #textarearef
   cols='60'
   [formData]="(formData || formData === 0) ? formData : ''"
@@ -13,3 +14,11 @@
   (input)="fieldValueChanged($event.target.value)"
   >
 </sm-textarea-control>
+<div *ngIf="!editable" class="design-container">
+  <cdk-virtual-scroll-viewport itemSize="19" minBufferPx = 400, maxBufferPx = 600
+                               class="viewport"
+                               [class.isReadonly]="!editable">
+    <div *cdkVirtualFor="let line of lines" class="line">{{line}}</div>
+  </cdk-virtual-scroll-viewport>
+</div>
+
diff --git a/src/app/webapp-common/experiments/dumb/experiment-network-design-form/experiment-network-design-form.component.scss b/src/app/webapp-common/experiments/dumb/experiment-network-design-form/experiment-network-design-form.component.scss
index 018b111b..060b0b33 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-network-design-form/experiment-network-design-form.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiment-network-design-form/experiment-network-design-form.component.scss
@@ -1,8 +1,25 @@
-:host {
-  display: block;
-  height: calc(100% - 40px);
-  position: relative;
+@import "../../../shared/ui-components/styles/variables";
 
+:host {
+  .design-container {
+    background-color: $blue-600;
+    padding: 12px 0 12px 12px;
+    border-radius: 4px;
+    height: 100%;
+    font-family: monospace;
+    .viewport {
+      height: 100%;
+      color: $white;
+      overflow-x: scroll;
+      .line {
+        height: 19px;
+        white-space: pre;
+      }
+    }
+  }
+  display: block;
+  flex: 1;
+  position: relative;
   .cursor-default {
     cursor: default;
   }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-network-design-form/experiment-network-design-form.component.ts b/src/app/webapp-common/experiments/dumb/experiment-network-design-form/experiment-network-design-form.component.ts
index 5b02874f..09d0a6d7 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-network-design-form/experiment-network-design-form.component.ts
+++ b/src/app/webapp-common/experiments/dumb/experiment-network-design-form/experiment-network-design-form.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, ViewChild, ElementRef} from '@angular/core';
+import {Component, Input, ViewChild} from '@angular/core';
 import {AbstractControl} from '@angular/forms';
 import {ImmutableFormField} from '../../../shared/ui-components/forms/immutableFormField';
 import {TextareaControlComponent} from '../../../shared/ui-components/forms/textarea-control/textarea-control.component';
@@ -10,13 +10,13 @@ import {TextareaControlComponent} from '../../../shared/ui-components/forms/text
 })
 export class ExperimentNetworkDesignFormComponent extends ImmutableFormField {
 
-  @ViewChild('textarearef', { static: true }) textarea: TextareaControlComponent;
+  @ViewChild('textarearef', {static: true}) textarea: TextareaControlComponent;
   private _editable: boolean;
+  public lines: string;
 
-  @Input() set editable( isEditable: boolean) {
+  @Input() set editable(isEditable: boolean) {
     if (isEditable != this._editable) {
       this._editable = isEditable;
-      window.setTimeout(() => this.textarea.onResize(), 50);
     }
   }
 
@@ -24,6 +24,15 @@ export class ExperimentNetworkDesignFormComponent extends ImmutableFormField {
     return this._editable;
   }
 
+  @Input() set formData(formData) {
+    this._formData = formData
+    this.lines = this._formData ? this._formData.split('\n') : [];
+  }
+
+  get formData() {
+    return this._formData;
+  }
+
   public Object = Object;
 
   constructor() {
@@ -40,7 +49,7 @@ export class ExperimentNetworkDesignFormComponent extends ImmutableFormField {
       return {json: true};
     }
     return null;
-  }
+  };
 
 }
 
diff --git a/src/app/webapp-common/experiments/dumb/experiment-orchestration-form/experiment-orchestration-form.component.scss b/src/app/webapp-common/experiments/dumb/experiment-orchestration-form/experiment-orchestration-form.component.scss
index 78229b0d..d652a810 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-orchestration-form/experiment-orchestration-form.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiment-orchestration-form/experiment-orchestration-form.component.scss
@@ -1,4 +1,7 @@
 :host {
+  .orchestration-form-container {
+    margin-bottom: 16px;
+  }
   /deep/ .labeled-row {
     align-items: baseline;
   }
diff --git a/src/app/webapp-common/experiments/dumb/experiment-output-model-form/experiment-output-model-form.component.html b/src/app/webapp-common/experiments/dumb/experiment-output-model-form/experiment-output-model-form.component.html
index dba9e66a..43daec41 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-output-model-form/experiment-output-model-form.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-output-model-form/experiment-output-model-form.component.html
@@ -3,7 +3,6 @@
     [editable]="false"
     [modelLabels]="modelLabels"
     [model]="formData?.input"
-    [networkDesign]="formData.prototext"
     [output]="formData.output"
     [projectId]="modelProjectId"
     [source]="formData?.source">
@@ -11,11 +10,11 @@
   </sm-experiment-output-model-view>
 
 </sm-editable-section>
-<sm-editable-section class="editable-design" [editable]="false">
+<sm-editable-section class="editable-design" [editable]="false" containerClass="h-100">
   <sm-section-header label="MODEL CONFIGURATION"></sm-section-header>
   <sm-experiment-network-design-form
     [editable]="false"
-    [formData]="formData?.output.design"
+    [formData]="outputDesign"
     fieldName="prototext"
     inputClassName="preview-text resize-none"
     >
diff --git a/src/app/webapp-common/experiments/dumb/experiment-output-model-form/experiment-output-model-form.component.scss b/src/app/webapp-common/experiments/dumb/experiment-output-model-form/experiment-output-model-form.component.scss
index c2c40352..f6a7a805 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-output-model-form/experiment-output-model-form.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiment-output-model-form/experiment-output-model-form.component.scss
@@ -4,7 +4,7 @@
   height: 100%;
 
   .editable-design {
-    height: calc(100% - 150px);
+    flex: 1;
     min-height: 300px;
   }
 
diff --git a/src/app/webapp-common/experiments/dumb/experiment-output-model-form/experiment-output-model-form.component.ts b/src/app/webapp-common/experiments/dumb/experiment-output-model-form/experiment-output-model-form.component.ts
index f4c11da3..7e501349 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-output-model-form/experiment-output-model-form.component.ts
+++ b/src/app/webapp-common/experiments/dumb/experiment-output-model-form/experiment-output-model-form.component.ts
@@ -5,6 +5,7 @@ import {ImmutableFormContainer} from '../../../shared/ui-components/forms/immuta
 import {IExperimentInfoFormComponent} from '../../../../features/experiments/shared/experiment-info.model';
 import {experimentSectionsEnum, experimentSections} from '../../../../features/experiments/shared/experiments.const';
 import {HELP_TEXTS} from '../../shared/common-experiments.const';
+import {getModelDesign} from '../../../tasks/tasks.utils';
 
 @Component({
   selector   : 'sm-experiment-output-model-form',
@@ -21,7 +22,18 @@ export class ExperimentOutputModelFormComponent extends ImmutableFormContainer i
 
   @Input() editable: boolean;
   @Input() controlName = 'model';
-  @Input() formData: IExperimentModelInfo;
+  _formData: IExperimentModelInfo;
+  public outputDesign: any;
+  private designKey: string;
+  @Input() set formData(formData: IExperimentModelInfo){
+    this._formData = formData;
+    const design = getModelDesign(formData?.output?.design)
+    this.outputDesign = design.value ;
+    this.designKey = design.key;
+  };
+  get formData(){
+    return this._formData;
+  }
   @Input() userKnowledge: Map<experimentSectionsEnum, boolean>;
   @Input() modelLabels: Model['labels'];
   @Input() saving;
diff --git a/src/app/webapp-common/experiments/dumb/experiment-output-model-view/experiment-output-model-view.component.scss b/src/app/webapp-common/experiments/dumb/experiment-output-model-view/experiment-output-model-view.component.scss
index 6610d6e9..5d1a720e 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-output-model-view/experiment-output-model-view.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiment-output-model-view/experiment-output-model-view.component.scss
@@ -1,4 +1,3 @@
-//.input-model-container {
-//  display: block;
-//  padding-top: 10px;
-//}
+.input-model-container {
+  margin-bottom: 16px;
+}
diff --git a/src/app/webapp-common/experiments/dumb/experiment-type-icon-label/experiment-type-icon-label.component.html b/src/app/webapp-common/experiments/dumb/experiment-type-icon-label/experiment-type-icon-label.component.html
index 0880edd2..6f5efde0 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-type-icon-label/experiment-type-icon-label.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiment-type-icon-label/experiment-type-icon-label.component.html
@@ -1,6 +1,6 @@
-<i [class]="'icon sm type '+ type"></i>
+<i class="al-icon" [class]="iconClass + ' al-ico-type-' + (type ? type.replace('_', '-') : 'training')"></i>
 
 <span style="margin-left: 6px" [ngClass]="type" *ngIf="showLabel">
-             {{type | noUnderscore | titlecase}}
+  {{type?.length < 4 ? type.toUpperCase() : (type | noUnderscore | titlecase)}}
 </span>
 
diff --git a/src/app/webapp-common/experiments/dumb/experiment-type-icon-label/experiment-type-icon-label.component.scss b/src/app/webapp-common/experiments/dumb/experiment-type-icon-label/experiment-type-icon-label.component.scss
index b2710a6a..e5cc65dc 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-type-icon-label/experiment-type-icon-label.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiment-type-icon-label/experiment-type-icon-label.component.scss
@@ -1,23 +1,8 @@
 @import "../../../shared/ui-components/styles/variables";
 :host{
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: left;
-  color: $light-grey-blue
-}
-
-
-
-.dataset_import {
-  color: $dataset_import;
-}
-
-.testing {
-  color: $testing;
-}
-
-.training {
-  color: $training;
 }
 
 .middle {
diff --git a/src/app/webapp-common/experiments/dumb/experiment-type-icon-label/experiment-type-icon-label.component.ts b/src/app/webapp-common/experiments/dumb/experiment-type-icon-label/experiment-type-icon-label.component.ts
index e1181a2b..aadc8a5d 100644
--- a/src/app/webapp-common/experiments/dumb/experiment-type-icon-label/experiment-type-icon-label.component.ts
+++ b/src/app/webapp-common/experiments/dumb/experiment-type-icon-label/experiment-type-icon-label.component.ts
@@ -8,7 +8,9 @@ import {TaskTypeEnum} from '../../../../business-logic/model/tasks/taskTypeEnum'
   styleUrls: ['./experiment-type-icon-label.component.scss']
 })
 export class ExperimentTypeIconLabelComponent implements OnInit {
+  private displayType: string;
   @Input() type: TaskTypeEnum;
+  @Input() iconClass = 'md';
   @Input() showLabel = true;
   constructor() { }
 
diff --git a/src/app/webapp-common/experiments/dumb/experiments-table/experiments-table.component.html b/src/app/webapp-common/experiments/dumb/experiments-table/experiments-table.component.html
index bd59ed4b..3ccfec35 100644
--- a/src/app/webapp-common/experiments/dumb/experiments-table/experiments-table.component.html
+++ b/src/app/webapp-common/experiments/dumb/experiments-table/experiments-table.component.html
@@ -1,10 +1,12 @@
 <script src="../../../models/shared/models-table/models-table.component.ts"></script>
-<sm-experiment-menu #contextMenu
+<sm-experiment-menu #contextMenu *smCheckPermission="true"
                     [experiment]="contextExperiment"
                     [selectedExperiment]="selectedExperiment"
                     [numSelected]="selectedExperiments.length"
                     [allTags]="tags$ | async"
                     (tagSelected)="addTag($event)"
+                    (menuOpened)="setContextMenuStatus(true)"
+                    (menuClosed)="setContextMenuStatus(false)"
                     [showButton]="false"
 ></sm-experiment-menu>
 <div class="table-header" [hidden]="!minimizedView">
@@ -23,8 +25,8 @@
     <div id="experiments-table-actions"></div>
     <sm-table-card-filter-template [options]="EXPERIMENTS_ALL_FILTER_OPTIONS"
                                    [value]="allFiltersValue"
-                                   [subOptions]="systemTags | labelValue"
                                    [subValue]="systemTagsFiltersValue"
+                                   [columns]="initialColumns"
                                    fixedOptionsSubheader="System tags"
                                    (subFilterChanged)="tableFilterChanged({id:'system_tags'}, $event)"
                                    (filterChanged)="tableAllFiltersChanged($event)"
@@ -36,6 +38,7 @@
 </div>
 <div class="table-container" [class.card-view]="minimizedView" #tableContainer>
   <sm-table
+    #table
     selectionMode="single"
     [tableData]="experiments"
     [columnsOrder]="colsOrder"
@@ -46,6 +49,9 @@
     [minimizedView]="minimizedView"
     [noMoreData]="noMoreExperiments"
     [selection]="selectedExperiment"
+    [activeContextRow]="contextExperiment"
+    [contextMenuOpen]="contextMenuActive"
+    [checkedItems]="selectedExperiments"
     [keyboardControl]="true"
     (rowSelectionChanged)="onRowSelectionChanged($event)"
     (loadMoreClicked)="onLoadMoreClicked()"
@@ -106,7 +112,6 @@
         [enableSort]="col.sortable"
         [enableSearch]="col.searchableFilter"
         [options]="EXPERIMENTS_ALL_FILTER_OPTIONS.tags |filter:tagSearchValue:'label'"
-        [subOptions]="systemTags | labelValue"
         fixedOptionsSubheader="System tags"
         [value]="tagsFiltersValue"
         [subValue]="systemTagsFiltersValue"
@@ -143,9 +148,6 @@
               [smTooltip]="experiment.name">
               {{experiment.name}}
             </div>
-            <sm-tag *ngIf="experiment &&  experiment.company && !experiment.company.id"
-                    label="EXAMPLE" className="example" class="ml-3">
-            </sm-tag>
           </div>
         </ng-container>
         <ng-container *ngSwitchCase="EXPERIMENTS_TABLE_COL_FIELDS.TAGS">
@@ -189,7 +191,7 @@
         </ng-container>
         <!--  Case for hyper params and custom metrics/variants  -->
         <ng-container *ngSwitchDefault>
-          {{col.isParam ? getHyperParam(experiment?.execution?.parameters, col) : getVarient(experiment?.last_metrics, col)}}
+          {{col.isParam ? getHyperParam(experiment?.hyperparams, col) : getVarient(experiment?.last_metrics, col)}}
         </ng-container>
       </div>
     </ng-template>
@@ -200,10 +202,12 @@
                      [cardName]="experiment.name"
                      [columns]="tableCols"
                      [rowData]="experiment"
-                     (contextmenu)="onContextMenu({e: $event, rowData: experiment})"
+                     [checked]="isRowSelected(experiment)"
+                     [activeContextRow]="contextExperiment"
+                     [contextMenuOpen]="contextMenuActive"
       >
         <sm-tag-list class="mb-2" [sysTags]="getSystemTags(experiment)" [tags]="experiment?.tags"></sm-tag-list>
-        <div compact-columns-data>Updated {{experiment.last_update | timeAgo}} &bull; Created by {{experiment.user?.name || 'Unknown User'}}
+        <div class="ellipsis compact-columns-data" compact-columns-data>Updated {{experiment.last_update | timeAgo}} &bull; Created by {{experiment.user?.name || 'Unknown User'}}
           <ng-container *ngIf="experiment.last_iteration"><BR>{{experiment.last_iteration}} Iterations</ng-container>
         </div>
         <sm-experiment-type-icon-label [type]="experiment?.type" [showLabel]="false"></sm-experiment-type-icon-label>
diff --git a/src/app/webapp-common/experiments/dumb/experiments-table/experiments-table.component.scss b/src/app/webapp-common/experiments/dumb/experiments-table/experiments-table.component.scss
index 170cb9ba..ef03c1a2 100644
--- a/src/app/webapp-common/experiments/dumb/experiments-table/experiments-table.component.scss
+++ b/src/app/webapp-common/experiments/dumb/experiments-table/experiments-table.component.scss
@@ -71,6 +71,9 @@ $header-height: 45px;
     }
   }
 
+  .compact-columns-data {
+    color: $blue-250;
+  }
 }
 
 /deep/ sm-models footer.d-flex.justify-content-center {
diff --git a/src/app/webapp-common/experiments/dumb/experiments-table/experiments-table.component.ts b/src/app/webapp-common/experiments/dumb/experiments-table/experiments-table.component.ts
index 04c499e6..d2cbb847 100644
--- a/src/app/webapp-common/experiments/dumb/experiments-table/experiments-table.component.ts
+++ b/src/app/webapp-common/experiments/dumb/experiments-table/experiments-table.component.ts
@@ -1,11 +1,25 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  AfterViewInit,
+  Output,
+  ViewChild,
+  ViewChildren, QueryList
+} from '@angular/core';
 import {ICONS} from '../../../../app.constants';
 import {ColHeaderTypeEnum, ISmCol, TableSortOrderEnum} from '../../../shared/ui-components/data/table/table.consts';
 import {FILTERED_EXPERIMENTS_STATUS_OPTIONS} from '../../shared/common-experiments.const';
-import {get} from 'lodash/fp';
+import {get, uniq} from 'lodash/fp';
 import {FilterMetadata} from 'primeng/api/filtermetadata';
 import {ITableExperiment} from '../../shared/common-experiment-model.model';
-import {DIGITS_AFTER_DECIMAL, EXPERIMENTS_TABLE_COL_FIELDS} from '../../../../features/experiments/shared/experiments.const';
+import {
+  DIGITS_AFTER_DECIMAL,
+  EXPERIMENTS_TABLE_COL_FIELDS
+} from '../../../../features/experiments/shared/experiments.const';
 import {BaseTableView} from '../../../shared/ui-components/data/table/base-table-view';
 import {getSystemTags, isDevelopment} from '../../../../features/experiments/shared/experiments.utils';
 import {User} from '../../../../business-logic/model/users/user';
@@ -18,21 +32,24 @@ import {ExperimentMenuComponent} from '../../../../features/experiments/shared/c
 import {TIME_FORMAT_STRING} from '../../../constants';
 import {NoUnderscorePipe} from '../../../shared/pipes/no-underscore.pipe';
 import {TitleCasePipe} from '@angular/common';
+import {TableComponent} from '../../../shared/ui-components/data/table/table.component';
+import {INITIAL_EXPERIMENT_TABLE_COLS} from '../../../../features/experiments/experiments.consts';
+import {filter, take} from 'rxjs/operators';
 
 @Component({
-  selector       : 'sm-experiments-table',
-  templateUrl    : './experiments-table.component.html',
-  styleUrls      : ['./experiments-table.component.scss'],
+  selector: 'sm-experiments-table',
+  templateUrl: './experiments-table.component.html',
+  styleUrls: ['./experiments-table.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ExperimentsTableComponent extends BaseTableView implements OnInit {
+export class ExperimentsTableComponent extends BaseTableView {
   readonly EXPERIMENTS_TABLE_COL_FIELDS = EXPERIMENTS_TABLE_COL_FIELDS;
   readonly FILTERED_EXPERIMENTS_STATUS_OPTIONS = FILTERED_EXPERIMENTS_STATUS_OPTIONS;
   public EXPERIMENTS_ALL_FILTER_OPTIONS = {
     status: this.FILTERED_EXPERIMENTS_STATUS_OPTIONS,
-    type  :[],
-    users : [],
-    tags  : [],
+    type: [],
+    users: [],
+    tags: [],
   };
   readonly ICONS = ICONS;
   readonly getSystemTags = getSystemTags;
@@ -40,16 +57,19 @@ export class ExperimentsTableComponent extends BaseTableView implements OnInit {
   public sortOrder = 1;
   public statusFiltersValue: any;
   public typeFiltersValue: any;
-  public allFiltersValue: { type: any; status: any; users: any, tags: any };
+  public allFiltersValue: { type: any; status: any; users: any; tags: any };
   public tagsFiltersValue: any;
   public systemTagsFiltersValue: any;
   public isDevelopment = isDevelopment;
   public menuOpen: boolean = false;
   private _selectedExperiments: ITableExperiment[] = [];
   readonly ColHeaderTypeEnum = ColHeaderTypeEnum;
+  public readonly initialColumns = INITIAL_EXPERIMENT_TABLE_COLS;
 
   @Input() tableCols: Array<ISmCol>;
   private _experiments: Array<ITableExperiment> = [];
+  private _selectedExperiment: ITableExperiment;
+
   @Input() set experiments(value: Array<ITableExperiment>) {
     this._experiments = value;
     if (this.contextExperiment) {
@@ -67,9 +87,10 @@ export class ExperimentsTableComponent extends BaseTableView implements OnInit {
   public tags$: Observable<string[]>;
 
   @Input() set users(users: User[]) {
-    this.EXPERIMENTS_ALL_FILTER_OPTIONS.users = users.map(user => {
-      return {label: user.name ? user.name : 'Unknown User', value: user.id};
-    });
+    this.EXPERIMENTS_ALL_FILTER_OPTIONS.users = users.map(user => ({
+      label: user.name ? user.name : 'Unknown User',
+      value: user.id
+    }));
     this.sortOptionalUsersList();
   }
 
@@ -82,27 +103,59 @@ export class ExperimentsTableComponent extends BaseTableView implements OnInit {
     return this._selectedExperiments;
   }
 
-  @Input() selectedExperiment: ITableExperiment;
+  @Input() set selectedExperiment(experiment: ITableExperiment) {
+    if (this._selectedExperiment !== experiment) {
+      window.setTimeout(() => this.table?.focusSelected());
+    }
+    this._selectedExperiment = experiment;
+  }
+  get selectedExperiment() {
+    return this._selectedExperiment;
+  }
   @Input() noMoreExperiments: boolean;
 
   @Input() set tags(tags) {
     const tagsAndActiveFilter = Array.from(new Set(tags.concat(this.tagsFiltersValue)));
-    this.EXPERIMENTS_ALL_FILTER_OPTIONS.tags = tagsAndActiveFilter.map(tag => ({label: tag, value: tag}));
+    this.EXPERIMENTS_ALL_FILTER_OPTIONS.tags = tagsAndActiveFilter.map(tag => ({
+      label: tag === null ? '(No tags)' : tag,
+      value: tag
+    }));
     this.sortOptionalTagsList();
   }
 
-  @Input() systemTags;
-  @Input() set experimentTypes(types: string[]){
-    this.EXPERIMENTS_ALL_FILTER_OPTIONS.type = types.map((type) => ({label: this.titleCasePipe.transform(this.noUnderscorePipe.transform(type)), value: type}))
-  };
+  @Input() set experimentTypes(types: string[]) {
+    const typesAndActiveFilter = uniq(types.concat(this.typeFiltersValue));
+    // under 4 letters assume an acronym and capitalize.
+    this.EXPERIMENTS_ALL_FILTER_OPTIONS.type = typesAndActiveFilter.map((type: string) =>
+      ({
+        label: (type?.length < 4 ? type.toUpperCase() : this.titleCasePipe.transform(this.noUnderscorePipe.transform(type))),
+        value: type
+      })
+    );
+  }
+
+  @Input() systemTags = [] as string[];
+
+  get validSystemTags() {
+    return this.systemTags.filter(tag => tag !== 'archived');
+  }
 
   @Input() set tableFilters(filters: { [s: string]: FilterMetadata }) {
     this.statusFiltersValue = get([EXPERIMENTS_TABLE_COL_FIELDS.STATUS, 'value'], filters) || [];
     this.typeFiltersValue = get([EXPERIMENTS_TABLE_COL_FIELDS.TYPE, 'value'], filters) || [];
     this.userFiltersValue = get([EXPERIMENTS_TABLE_COL_FIELDS.USER, 'value'], filters) || [];
     this.tagsFiltersValue = get([EXPERIMENTS_TABLE_COL_FIELDS.TAGS, 'value'], filters) || [];
-    this.systemTagsFiltersValue = get(['system_tags', 'value'], filters) || [];
-    this.allFiltersValue = {status: this.statusFiltersValue, type: this.typeFiltersValue, users: this.userFiltersValue, tags: this.tagsFiltersValue};
+    this.systemTagsFiltersValue = (get(['system_tags', 'value'], filters) || []);
+    this.allFiltersValue = {
+      status: this.statusFiltersValue,
+      type: this.typeFiltersValue,
+      users: this.userFiltersValue,
+      tags: this.tagsFiltersValue
+    };
+  }
+
+  @Input() set split(size: number) {
+    this.table?.resize();
   }
 
   @Output() experimentSelectionChanged = new EventEmitter<ITableExperiment>();
@@ -112,8 +165,6 @@ export class ExperimentsTableComponent extends BaseTableView implements OnInit {
   @Output() filterChanged = new EventEmitter();
   @Output() tagsMenuOpened = new EventEmitter();
   @Output() typesMenuOpened = new EventEmitter();
-
-  @ViewChild('tableContainer', {static: true}) tableContainer;
   @ViewChild('contextMenu') contextMenu: ExperimentMenuComponent;
   TIME_FORMAT_STRING = TIME_FORMAT_STRING;
 
@@ -124,15 +175,17 @@ export class ExperimentsTableComponent extends BaseTableView implements OnInit {
     }
   }
 
-  constructor(private changeDetector: ChangeDetectorRef, private store: Store, private noUnderscorePipe: NoUnderscorePipe, private titleCasePipe: TitleCasePipe) {
+  constructor(private changeDetector: ChangeDetectorRef, private store: Store<any>, private noUnderscorePipe: NoUnderscorePipe, private titleCasePipe: TitleCasePipe) {
     super();
     this.tags$ = this.store.select(selectProjectTags);
     this.entitiesKey = 'experiments';
     this.selectedEntitiesKey = 'selectedExperiments';
   }
 
-  ngOnInit(): void {
-
+  afterTableInit() {
+    if (this.selectedExperiment) {
+      this.table.scrollToElement(this.selectedExperiment);
+    }
   }
 
   onRowSelectionChanged(event) {
@@ -144,7 +197,7 @@ export class ExperimentsTableComponent extends BaseTableView implements OnInit {
   }
 
   sortOptionalTagsList() {
-    this.EXPERIMENTS_ALL_FILTER_OPTIONS.tags.sort((a, b) => sortByArr(a.value, b.value, this.tagsFiltersValue));
+    this.EXPERIMENTS_ALL_FILTER_OPTIONS.tags.sort((a, b) => sortByArr(a.value, b.value, [null].concat(this.tagsFiltersValue)));
   }
 
   tagSearchValueChanged(searchTerm) {
@@ -158,13 +211,10 @@ export class ExperimentsTableComponent extends BaseTableView implements OnInit {
   }
 
   scrollTableToTop() {
-    this.tableContainer.nativeElement.scroll({top: 0});
+    this.table?.table?.scrollTo({top: 0});
   }
 
   tableAllFiltersChanged(event) {
-    if (event.col === 'users') {
-      event.col = 'user.name';
-    }
     this.filterChanged.emit({col: {id: event.col}, value: event.value});
     this.scrollTableToTop();
   }
@@ -205,8 +255,8 @@ export class ExperimentsTableComponent extends BaseTableView implements OnInit {
 
   getHyperParam(params, col) {
     if (params && col.isParam) {
-      const param = col.id.replace('execution.parameters.', '');
-      return params[param];
+      const param = col.id.replace('hyperparams.', '');
+      return get(`${param}.value`, params);
     }
     return '';
   }
@@ -245,8 +295,13 @@ export class ExperimentsTableComponent extends BaseTableView implements OnInit {
 
   onContextMenu(data) {
     this.contextExperiment = this._experiments.find(experiment => experiment.id === data.rowData.id);
+    if (!this.selectedExperiments.map(exp => exp.id).includes(this.contextExperiment.id)) {
+      this.emitSelection([this.contextExperiment]);
+    }
     const event = data.e as MouseEvent;
     event.preventDefault();
-    this.contextMenu.openMenu({x: event.clientX, y: event.clientY});
+    this.contextMenu?.openMenu({x: event.clientX, y: event.clientY});
   }
+
+
 }
diff --git a/src/app/webapp-common/experiments/dumb/image-displayer/image-displayer.component.html b/src/app/webapp-common/experiments/dumb/image-displayer/image-displayer.component.html
index 1a641d8c..ee075912 100644
--- a/src/app/webapp-common/experiments/dumb/image-displayer/image-displayer.component.html
+++ b/src/app/webapp-common/experiments/dumb/image-displayer/image-displayer.component.html
@@ -3,12 +3,12 @@
     <div class="image-title">
       {{title}}
     </div>
-    <div (click)="imageARef.click()" smTooltip="Download" class="download icon-container" [style.visibility]="(imageSources[currentIndex] | isVideo)?'hidden':'visible'">
-      <i class="icon i-download"></i>
+    <div (click)="downloadImage(); imageARef.click()" smTooltip="Download" class="download icon-container" [style.visibility]="(imageSources[currentIndex] | isVideo)?'hidden':'visible'">
+      <i class="al-icon al-ico-download al-color light-grey-blue"></i>
       <a #imageARef [href]="imageSources[currentIndex]" download style.visibility="hidden" target="_blank"></a>
     </div>
     <div (click)="closeImageDisplayer()" smTooltip="Close" class="icon-container">
-      <i class="icon i-dialog-x gray"></i>
+      <i class="al-icon al-ico-dialog-x al-color blue-400 light-grey-blue"></i>
     </div>
   </div>
   <div class="debug-image-container" #imageContainer>
@@ -26,27 +26,27 @@
     <div class="d-flex flex-column controllers" [style.visibility]="(imageSources[currentIndex] | isVideo) || (imageSources[currentIndex] | isAudio)?'hidden':'visible'">
       <div (click)="fitToScreen()" class="fit-to-screen d-flex flex-column justify-content-around align-items-center controller icon-container" smTooltip="Fit to window" position="left"
            [class.disabled]="scale===autoFitScale">
-        <i class="icon i-zoom-to-fit"></i>
+        <i class="al-icon al-ico-fit al-color light-grey-blue"></i>
       </div>
 
       <div class="zoom controller d-flex flex-column justify-content-around align-items-center">
         <div class="icon-container">
-          <i class="icon i-zoom-plus" (click)="calculateNewScale(true)" smTooltip="Zoom in" position="left"></i>
+          <i class="al-icon al-ico-plus al-color light-grey-blue" (click)="calculateNewScale(true)" smTooltip="Zoom in" position="left"></i>
         </div>
         <div class="d-flex flex-column justify-content-around align-items-center icon-container" (click)="resetScale()" smTooltip="Zoom to 1:1" position="left"
              [class.disabled]="scale===1">
-          <i class="icon i-zoom-reset sm-md"></i>
+          <i class="al-icon al-ico-zoom-1-to-1 al-color light-grey-blue sm-md"></i>
         </div>
         <div class="icon-container">
-          <div class="icon i-zoom-minus" (click)="calculateNewScale(false)" smTooltip="Zoom out" position="left"></div>
+          <div class="al-icon al-ico-minus al-color light-grey-blue" (click)="calculateNewScale(false)" smTooltip="Zoom out" position="left"></div>
         </div>
       </div>
     </div>
     <div class="navigation">
       <div class="icon-container controller d-flex flex-column justify-content-around align-items-center next" (click)="canGoNext() && next()" [class.disabled]="!canGoNext()">
-        <i class="icon i-next"></i></div>
+        <i class="al-icon al-ico-next al-color light-grey-blue"></i></div>
       <div class="icon-container controller d-flex flex-column justify-content-around align-items-center previous" (click)="canGoBack() && previous()" [class.disabled]="!canGoBack()">
-        <i class="icon i-previous"></i></div>
+        <i class="al-icon al-ico-previous al-color light-grey-blue"></i></div>
     </div>
   </div>
 
diff --git a/src/app/webapp-common/experiments/dumb/image-displayer/image-displayer.component.scss b/src/app/webapp-common/experiments/dumb/image-displayer/image-displayer.component.scss
index 8a373b2b..1ac35375 100644
--- a/src/app/webapp-common/experiments/dumb/image-displayer/image-displayer.component.scss
+++ b/src/app/webapp-common/experiments/dumb/image-displayer/image-displayer.component.scss
@@ -129,6 +129,12 @@
 
         &.zoom {
           height: 120px;
+
+          // todo: Amir to fix
+          .al-ico-plus {
+            font-size: 15px;
+            padding-top: 8px;
+          }
         }
 
         &:hover {
diff --git a/src/app/webapp-common/experiments/dumb/image-displayer/image-displayer.component.ts b/src/app/webapp-common/experiments/dumb/image-displayer/image-displayer.component.ts
index 82d1517b..c8902f1e 100644
--- a/src/app/webapp-common/experiments/dumb/image-displayer/image-displayer.component.ts
+++ b/src/app/webapp-common/experiments/dumb/image-displayer/image-displayer.component.ts
@@ -1,6 +1,7 @@
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, Inject, ViewChild} from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import {ConfirmDialogComponent} from '../../../shared/ui-components/overlay/confirm-dialog/confirm-dialog.component';
+import {last} from 'lodash/fp';
 
 @Component({
   selector: 'sm-image-displayer',
@@ -150,4 +151,13 @@ export class ImageDisplayerComponent {
     this.scale = Math.max(this.scale - (0.005 * $event.deltaY), 0.1);
     this.changeScale();
   }
+
+  downloadImage() {
+    const src = new URL(this.imageSources[this.currentIndex]);
+    const a = document.createElement('a') as HTMLAnchorElement;
+    a.href = this.imageSources[this.currentIndex];
+    a.download = last(src.pathname.split('/'));
+    a.target = '_blank';
+    a.click();
+  }
 }
diff --git a/src/app/webapp-common/experiments/dumb/model-auto-populate-dialog/model-auto-populate-dialog.component.html b/src/app/webapp-common/experiments/dumb/model-auto-populate-dialog/model-auto-populate-dialog.component.html
index ac8b1efd..59d66d74 100644
--- a/src/app/webapp-common/experiments/dumb/model-auto-populate-dialog/model-auto-populate-dialog.component.html
+++ b/src/app/webapp-common/experiments/dumb/model-auto-populate-dialog/model-auto-populate-dialog.component.html
@@ -1,37 +1,36 @@
 <sm-dialog-template
-  header="PLEASE CONFIRM CHANGES"
-  subHeader="Please confirm that you want to overwrite the current values for the following fields of the experiment. Uncheck those you don't want to overwrite:"
+  header="Import New Model Configuration?"
+  [subHeader]="subHeader"
 >
 
   <div class="body">
-    <sm-checkbox-control
-      *ngIf="data.populateLabels"
-      label="Label enumeration"
-      fieldName="labelEnum"
-      [formData]="formData.labelEnum"
-      (formDataChanged)="updateFormData($event)"
-    >
+<!--    <sm-checkbox-control-->
+<!--      *ngIf="data.populateLabels"-->
+<!--      label="Label enumeration"-->
+<!--      fieldName="labelEnum"-->
+<!--      [formData]="formData.labelEnum"-->
+<!--      (formDataChanged)="updateFormData($event)"-->
+<!--    >-->
 
-    </sm-checkbox-control>
-    <sm-checkbox-control
-      *ngIf="data.populateDesign"
-      label="Model Configuration"
-      fieldName="networkDesign"
-      [formData]="formData.networkDesign"
-      (formDataChanged)="updateFormData($event)"
-    >
-    </sm-checkbox-control>
+<!--    </sm-checkbox-control>-->
+<!--    <sm-checkbox-control-->
+<!--      *ngIf="data.populateDesign"-->
+<!--      label="Model Configuration"-->
+<!--      fieldName="networkDesign"-->
+<!--      [formData]="formData.networkDesign"-->
+<!--      (formDataChanged)="updateFormData($event)"-->
+<!--    >-->
+<!--    </sm-checkbox-control>-->
   </div>
 
   <div class="buttons">
 
-    <button (click)="closeDialog(false)" class="btn btn-outline-neon yes-button">
-      Cancel
+    <button (click)="closeDialog(false)" class="btn btn-outline-neon yes-button" smTooltip="Accept new model without overwrite model configuration">
+      Keep
     </button>
-    <button (click)="closeDialog(true)" class="btn btn-neon">
-      Confirm
+    <button (click)="closeDialog(true)" class="btn btn-neon" smTooltip="Accept new model and overwrite model configuration">
+      Import
     </button>
-
   </div>
 
 </sm-dialog-template>
diff --git a/src/app/webapp-common/experiments/dumb/model-auto-populate-dialog/model-auto-populate-dialog.component.ts b/src/app/webapp-common/experiments/dumb/model-auto-populate-dialog/model-auto-populate-dialog.component.ts
index b50bbedf..1d7039b0 100644
--- a/src/app/webapp-common/experiments/dumb/model-auto-populate-dialog/model-auto-populate-dialog.component.ts
+++ b/src/app/webapp-common/experiments/dumb/model-auto-populate-dialog/model-auto-populate-dialog.component.ts
@@ -1,29 +1,35 @@
 import {Component, Inject} from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 
 @Component({
-  selector: 'sm-model-auto-populate-dialog',
+  selector   : 'sm-model-auto-populate-dialog',
   templateUrl: './model-auto-populate-dialog.component.html',
-  styleUrls: ['./model-auto-populate-dialog.component.scss']
+  styleUrls  : ['./model-auto-populate-dialog.component.scss']
 })
 export class ModelAutoPopulateDialogComponent {
 
   public showLabelEnumCheckbox: boolean;
   public showDesignCheckbox: boolean;
   public formData;
+  public subHeader: string;
 
   constructor(
     private dialogRef: MatDialogRef<ModelAutoPopulateDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: {populateLabels: boolean, populateDesign: boolean}
+    @Inject(MAT_DIALOG_DATA) public data: { populateLabels: boolean, populateDesign: boolean, experimentName: string, modelName: string }
   ) {
     this.formData = {
-      labelEnum: this.data.populateLabels,
+      labelEnum    : this.data.populateLabels,
       networkDesign: this.data.populateDesign,
     };
+    this.subHeader = `Overwrite the ${this.data.experimentName}’s current model configuration with ${this.data.modelName}'s configuration?`;
   }
 
   closeDialog(isConfirmed) {
-    this.dialogRef.close(isConfirmed ? this.formData : false);
+    if (!isConfirmed) {
+      this.formData.networkDesign = false;
+      this.formData.labelEnum = false;
+    }
+    this.dialogRef.close(this.formData);
   }
 
   updateFormData(event) {
diff --git a/src/app/webapp-common/experiments/dumb/select-hyper-params-for-custom-col/select-hyper-params-for-custom-col.component.html b/src/app/webapp-common/experiments/dumb/select-hyper-params-for-custom-col/select-hyper-params-for-custom-col.component.html
index b2febf18..6ce83cd8 100644
--- a/src/app/webapp-common/experiments/dumb/select-hyper-params-for-custom-col/select-hyper-params-for-custom-col.component.html
+++ b/src/app/webapp-common/experiments/dumb/select-hyper-params-for-custom-col/select-hyper-params-for-custom-col.component.html
@@ -1,14 +1,14 @@
 <div smClickStopPropagation class="d-flex justify-content-between hyper-params-container">
-  <i (click)="goBack.emit()" class="icon sm-md i-back pointer" smClickStopPropagation></i>
+  <i (click)="goBack.emit()" class="al-icon sm-md al-ico-back pointer" smClickStopPropagation></i>
   <div class="hyper-param-header">SELECT HYPER PARAMETERS TO DISPLAY
   </div>
 </div>
 <hr style="margin: 0">
-<sm-checked-filter-list
+<sm-grouped-checked-filter-list
   smClickStopPropagation
   [itemsList]="hyperParams"
   [selectedItemsList]="metricsCols"
   (selectedItems)="toggleParamToDisplay($event)"
   (clearSelection)="clearSelection.emit()"
 >
-</sm-checked-filter-list>
+</sm-grouped-checked-filter-list>
diff --git a/src/app/webapp-common/experiments/dumb/select-hyper-params-for-custom-col/select-hyper-params-for-custom-col.component.scss b/src/app/webapp-common/experiments/dumb/select-hyper-params-for-custom-col/select-hyper-params-for-custom-col.component.scss
index 6cc01455..60bc3728 100644
--- a/src/app/webapp-common/experiments/dumb/select-hyper-params-for-custom-col/select-hyper-params-for-custom-col.component.scss
+++ b/src/app/webapp-common/experiments/dumb/select-hyper-params-for-custom-col/select-hyper-params-for-custom-col.component.scss
@@ -3,7 +3,7 @@
   min-height: 470px;
 }
 
-sm-checked-filter-list {
+sm-grouped-checked-filter-list {
   padding: 15px 15px 0 15px;
   max-height: 419px;
   /deep/ .actions {
diff --git a/src/app/webapp-common/experiments/dumb/select-hyper-params-for-custom-col/select-hyper-params-for-custom-col.component.ts b/src/app/webapp-common/experiments/dumb/select-hyper-params-for-custom-col/select-hyper-params-for-custom-col.component.ts
index 98d9f01d..c2000042 100644
--- a/src/app/webapp-common/experiments/dumb/select-hyper-params-for-custom-col/select-hyper-params-for-custom-col.component.ts
+++ b/src/app/webapp-common/experiments/dumb/select-hyper-params-for-custom-col/select-hyper-params-for-custom-col.component.ts
@@ -10,14 +10,14 @@ export class SelectHyperParamsForCustomColComponent {
 
   public metricsCols: string[];
 
-  @Input() hyperParams: string[];
+  @Input() hyperParams: {[section: string]: any[]};
   @Output() getMetricsToDisplay      = new EventEmitter();
   @Output() selectedHyperParamToShow = new EventEmitter();
   @Output() goBack                   = new EventEmitter();
   @Output() clearSelection           = new EventEmitter();
 
   @Input() set tableCols(tableCols) {
-    this.metricsCols = tableCols.map(tableCol => tableCol.id.replace('execution.parameters.',''));
+    this.metricsCols = tableCols.map(tableCol => tableCol.id.replace('hyperparams.',''));
   }
 
 
diff --git a/src/app/webapp-common/experiments/dumb/select-metric-for-custom-col/select-metric-for-custom-col.component.html b/src/app/webapp-common/experiments/dumb/select-metric-for-custom-col/select-metric-for-custom-col.component.html
index 7f26e8d7..4c6d0bd4 100644
--- a/src/app/webapp-common/experiments/dumb/select-metric-for-custom-col/select-metric-for-custom-col.component.html
+++ b/src/app/webapp-common/experiments/dumb/select-metric-for-custom-col/select-metric-for-custom-col.component.html
@@ -1,6 +1,6 @@
 <div smClickStopPropagation style="width: 370px;">
   <div class="d-flex justify-content-between" style="padding: 15px">
-    <i (click)="goBack.emit()" class="icon sm-md i-back pointer" smClickStopPropagation></i>
+    <i (click)="goBack.emit()" class="al-icon sm-md al-ico-back pointer" smClickStopPropagation></i>
     <div style="color: #5a658e; flex-basis: 84%">SELECT METRIC TO DISPLAY
     </div>
   </div>
diff --git a/src/app/webapp-common/experiments/dumb/select-metric-for-custom-col/select-metric-for-custom-col.component.scss b/src/app/webapp-common/experiments/dumb/select-metric-for-custom-col/select-metric-for-custom-col.component.scss
index 7a109156..0500f885 100644
--- a/src/app/webapp-common/experiments/dumb/select-metric-for-custom-col/select-metric-for-custom-col.component.scss
+++ b/src/app/webapp-common/experiments/dumb/select-metric-for-custom-col/select-metric-for-custom-col.component.scss
@@ -34,9 +34,6 @@
   }
 
   /deep/ .mat-expansion-panel-header {
-    &:hover {
-      background: #f4f7ff !important;
-    }
 
     .mat-expansion-indicator {
       height: 25px;
@@ -48,7 +45,7 @@
       color: $light-grey-blue;
     }
 
-    &.mat-expanded, mat-expanded:focus {
+    &.mat-expanded, .mat-expanded:focus {
       background: #f4f7ff !important;
       font-weight: bold;
 
diff --git a/src/app/webapp-common/experiments/effects/common-experiment-output.effects.ts b/src/app/webapp-common/experiments/effects/common-experiment-output.effects.ts
index 0729ba2f..988759f9 100644
--- a/src/app/webapp-common/experiments/effects/common-experiment-output.effects.ts
+++ b/src/app/webapp-common/experiments/effects/common-experiment-output.effects.ts
@@ -11,79 +11,82 @@ import {RequestFailed} from '../../core/actions/http.actions';
 import * as outputActions from '../actions/common-experiment-output.actions';
 import {ExperimentOutputState} from '../../../features/experiments/reducers/experiment-output.reducer';
 import {LOG_BATCH_SIZE} from '../shared/common-experiments.const';
-import {selectSelectedSettingsxAxisType, selectLogScrollID} from '../reducers';
+import {selectSelectedSettingsxAxisType} from '../reducers';
 import {REFRESH_EXPERIMENTS} from '../actions/common-experiments-view.actions';
 import {EventsGetTaskLogResponse} from '../../../business-logic/model/events/eventsGetTaskLogResponse';
 import {HTTP} from '../../../app.constants';
 import {ScalarKeyEnum} from '../../../business-logic/model/events/scalarKeyEnum';
+import {selectCompareHistogramCacheAxisType} from '../../experiments-compare/reducers';
+import {EXPERIMENT_PLOTS_REQUESTED} from '../actions/common-experiment-output.actions';
 
 
 @Injectable()
 export class CommonExperimentOutputEffects {
   @Effect()
   activeLoader = this.actions$.pipe(
-    ofType(outputActions.CHANGE_PROJECT_REQUESTED, outputActions.GET_EXPERIMENT_LOG),
+    ofType(outputActions.CHANGE_PROJECT_REQUESTED, outputActions.getExperimentLog, outputActions.EXPERIMENT_SCALAR_REQUESTED, outputActions.EXPERIMENT_PLOTS_REQUESTED),
+    filter(action => !action?.['from']),
     map(action => new ActiveLoader(action.type))
   );
 
   @Effect()
   getLog$ = this.actions$.pipe(
-    ofType<outputActions.GetExperimentLog>(outputActions.GET_EXPERIMENT_LOG),
-    withLatestFrom(this.store.select(selectLogScrollID)),
-    flatMap(([action, logScrollID]) => this.eventsApi.eventsGetTaskLog({
-      task      : action.payload,
-      order     : 'asc',
-      from      : 'tail',
-      batch_size: LOG_BATCH_SIZE,
-      // scroll_id: logScrollID
-    }).pipe(
-      flatMap((res: EventsGetTaskLogResponse) => [
-        new outputActions.SetExperimentLog(res.events, res.scroll_id),
-        new DeactiveLoader(action.type),
-        new DeactiveLoader(REFRESH_EXPERIMENTS)
-      ]),
-      catchError(error => [
-        new RequestFailed(error),
-        new DeactiveLoader(action.type),
-        new DeactiveLoader(REFRESH_EXPERIMENTS),
-        new SetServerError(error, null, 'Failed to fetch log')
-      ])
-    ))
+    ofType(outputActions.getExperimentLog),
+    switchMap((action) =>
+      this.eventsApi.eventsGetTaskLog({
+        task: action.id,
+        batch_size: LOG_BATCH_SIZE,
+        navigate_earlier: action.direction !== 'next',
+        from_timestamp: action.refresh ? null : action.from,
+      }).pipe(
+        flatMap((res: EventsGetTaskLogResponse) => [
+          outputActions.setExperimentLog({
+            events: res.events,
+            total: res.total,
+            direction: action.direction,
+            refresh: action.refresh
+          }),
+          new DeactiveLoader(action.type),
+          new DeactiveLoader(REFRESH_EXPERIMENTS)
+        ]),
+        catchError(error => [
+          new RequestFailed(error),
+          new DeactiveLoader(action.type),
+          new DeactiveLoader(REFRESH_EXPERIMENTS),
+          new SetServerError(error, null, 'Failed to fetch log')
+        ])
+      )
+    )
   );
 
   @Effect()
   fetchExperimentScalar$ = this.actions$.pipe(
     ofType<outputActions.ExperimentScalarRequested>(outputActions.EXPERIMENT_SCALAR_REQUESTED),
     debounceTime(200),
-    withLatestFrom(this.store.select(selectSelectedSettingsxAxisType)),
-    switchMap(([action, axisType]) =>
-      this.eventsApi.eventsScalarMetricsIterHistogram({task: action.payload, key: axisType === ScalarKeyEnum.IsoTime ? ScalarKeyEnum.Timestamp : axisType})
+    withLatestFrom(this.store.select(selectSelectedSettingsxAxisType), this.store.select(selectCompareHistogramCacheAxisType)),
+    switchMap(([action, axisType, prevAxisType]) => {
+      if ([ScalarKeyEnum.IsoTime, ScalarKeyEnum.Timestamp].includes(prevAxisType) &&
+        [ScalarKeyEnum.IsoTime, ScalarKeyEnum.Timestamp].includes(axisType)) {
+        return [
+          new DeactiveLoader(REFRESH_EXPERIMENTS),
+          new DeactiveLoader(action.type)
+        ];
+      }
+
+      return this.eventsApi.eventsScalarMetricsIterHistogram({task: action.payload, key: axisType === ScalarKeyEnum.IsoTime ? ScalarKeyEnum.Timestamp : axisType})
         .pipe(
-          flatMap(res => {
-            if (axisType === ScalarKeyEnum.IsoTime) {
-              res = Object.keys(res).reduce((groupAcc, groupName) => {
-                const group = res[groupName];
-                groupAcc[groupName] = Object.keys(group).reduce((graphAcc, graphName) => {
-                  const graph = group[graphName];
-                  graphAcc[graphName] = {...graph, x: graph.x.map(ts => new Date(ts))};
-                  return graphAcc;
-                }, {});
-                return groupAcc;
-              }, {});
-            }
-            return [
-              new outputActions.SetExperimentHistogram(res),
-              new DeactiveLoader(REFRESH_EXPERIMENTS),
-              new DeactiveLoader(action.type)
-            ];
-          }),
+          flatMap(res => [
+            new outputActions.SetExperimentHistogram(res, axisType),
+            new DeactiveLoader(REFRESH_EXPERIMENTS),
+            new DeactiveLoader(action.type)
+          ]),
           catchError(error => [
             new RequestFailed(error),
             new DeactiveLoader(action.type),
             new DeactiveLoader(REFRESH_EXPERIMENTS),
             new SetServerError(error, null, 'Failed to get Scalar Charts')
           ])
-        )
+        );}
     )
   );
 
diff --git a/src/app/webapp-common/experiments/effects/common-experiments-info.effects.ts b/src/app/webapp-common/experiments/effects/common-experiments-info.effects.ts
index e13976c4..d6d1e619 100644
--- a/src/app/webapp-common/experiments/effects/common-experiments-info.effects.ts
+++ b/src/app/webapp-common/experiments/effects/common-experiments-info.effects.ts
@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {Actions, Effect, ofType} from '@ngrx/effects';
 import {Store} from '@ngrx/store';
-import {catchError, filter, flatMap, map, shareReplay, switchMap, withLatestFrom} from 'rxjs/operators';
+import {catchError, filter, flatMap, map, shareReplay, switchMap, tap, withLatestFrom} from 'rxjs/operators';
 import {ApiTasksService} from '../../../business-logic/api-services/tasks.service';
 import {EXPERIMENT_INFO_ONLY_FIELDS} from '../../../features/experiments/experiments.consts';
 import {selectExperimentFormValidity, selectExperimentInfoData, selectExperimentInfoDataFreeze, selectSelectedExperiment} from '../../../features/experiments/reducers';
@@ -11,61 +11,182 @@ import {RequestFailed} from '../../core/actions/http.actions';
 import {ActiveLoader, DeactiveLoader, SetBackdrop, SetServerError} from '../../core/actions/layout.actions';
 import {selectAppVisible} from '../../core/reducers/view-reducer';
 import * as commonInfoActions from '../actions/common-experiments-info.actions';
+import {deleteHyperParamsSection, getExperimentConfigurationNames, getExperimentConfigurationObj, saveExperimentConfigObj, saveHyperParamsSection} from '../actions/common-experiments-info.actions';
 import * as infoActions from '../../../features/experiments/actions/experiments-info.actions';
 import {UpdateExperiment} from '../actions/common-experiments-view.actions';
-import {selectExperimentsList} from '../reducers';
+import {selectExperimentConfiguration, selectExperimentHyperParamsSelectedSectionFromRoute, selectExperimentSelectedConfigObjectFromRoute, selectExperimentsList, selectSelectedExperimentFromRouter, selectSelectedTableExperiment} from '../reducers';
 import {convertStopToComplete} from '../shared/common-experiments.utils';
 import {ExperimentConverterService} from '../../../features/experiments/shared/services/experiment-converter.service';
+import {of} from 'rxjs';
+import {EmptyAction} from '../../../app.constants';
+import {ReplaceHyperparamsEnum} from '../../../business-logic/model/tasks/replaceHyperparamsEnum';
+import {Router} from '@angular/router';
+import {selectRouterParams} from '../../core/reducers/router-reducer';
+import {cloneDeep, get} from 'lodash/fp';
 
 
 @Injectable()
 export class CommonExperimentsInfoEffects {
+  private previousSelectedLastUpdate: Date = null;
+  private previousSelectedId: string;
 
 
   constructor(
     private actions$: Actions, private store: Store<IExperimentInfoState>,
     private apiTasks: ApiTasksService, private reverter: ExperimentReverterService,
-    private converter: ExperimentConverterService
-  ) {}
+    private converter: ExperimentConverterService,
+    private router: Router
+  ) {
+  }
 
   @Effect()
-  activeLoader       = this.actions$.pipe(
+  activeLoader = this.actions$.pipe(
     ofType(commonInfoActions.GET_EXPERIMENT_INFO),
     map(action => new ActiveLoader(action.type))
   );
 
   @Effect()
-  getExperimentInfo$ = this.actions$.pipe(
-    ofType<commonInfoActions.GetExperimentInfo>(commonInfoActions.GET_EXPERIMENT_INFO, commonInfoActions.AUTO_REFRESH_EXPERIMENT_INFO),
+  getExperimentConfigurationNames$ = this.actions$.pipe(
+    ofType(getExperimentConfigurationNames),
     withLatestFrom(
+      this.store.select(selectSelectedExperimentFromRouter),
+      this.store.select(selectExperimentConfiguration),
+      this.store.select(selectExperimentSelectedConfigObjectFromRoute)
+    ),
+    filter(([action, experimentId, configuration, selectedConfiguration]) => !!experimentId),
+    switchMap(([action, experimentId, configuration, selectedConfiguration]) => this.apiTasks.tasksGetConfigurationNames({tasks: [experimentId]})
+      .pipe(
+        flatMap(res => {
+          let configurations = cloneDeep(configuration);
+          if (configurations) {
+            Object.keys(configurations).forEach(name => {
+              if (!res.configurations[0]?.names.includes(name)) {
+                delete configurations.name;
+              }
+            });
+          } else {
+            configurations = {};
+          }
+          res.configurations[0]?.names.forEach(name => {
+            if (!(name in configurations)) {
+              configurations[name] = {};
+            }
+          });
+          return [
+            new commonInfoActions.UpdateExperimentInfoData({id: experimentId, changes: {configuration: configurations}}),
+            selectedConfiguration? getExperimentConfigurationObj(): new EmptyAction(),
+            new DeactiveLoader(action.type),
+          ];
+        }),
+        catchError(error => {
+          console.log(error);
+          return [
+            new RequestFailed(error),
+            new DeactiveLoader(action.type),
+            new SetServerError(error, null, 'Fetch configuration names failed',
+              action.type === commonInfoActions.AUTO_REFRESH_EXPERIMENT_INFO)
+          ];
+        })
+      )
+    )
+  );
+
+  @Effect()
+  getExperimentConfigurationObj$ = this.actions$.pipe(
+    ofType(getExperimentConfigurationObj),
+    withLatestFrom(
+      this.store.select(selectSelectedExperimentFromRouter),
+      this.store.select(selectExperimentConfiguration),
+      this.store.select(selectExperimentSelectedConfigObjectFromRoute)
+    ),
+    filter(([action, experimentId, configuration, configObj]) => configuration && configObj && (configObj in configuration)),
+    switchMap(([action, experimentId, configuration, configObj]) => this.apiTasks.tasksGetConfigurations({tasks: [experimentId], names: [configObj]})
+      .pipe(
+        flatMap((res: any) => {
+          const configurationObj = cloneDeep(configuration);
+          configurationObj[configObj] = res.configurations[0].configuration[0];
+          return [
+            new commonInfoActions.UpdateExperimentInfoData({id: experimentId, changes: {configuration: configurationObj}}),
+            new DeactiveLoader(action.type),
+          ];
+        }),
+        catchError(error => {
+          console.log(error);
+          return [
+            new RequestFailed(error),
+            new DeactiveLoader(action.type),
+            new SetServerError(error, null, 'Fetch configuration failed',
+              action.type === commonInfoActions.AUTO_REFRESH_EXPERIMENT_INFO)
+          ];
+        })
+      )
+    )
+  );
+
+  @Effect()
+  getExperimentInfo$ = this.actions$.pipe(
+    ofType<commonInfoActions.GetExperimentInfo>(commonInfoActions.GET_EXPERIMENT_INFO, commonInfoActions.AUTO_REFRESH_EXPERIMENT_INFO, commonInfoActions.EXPERIMENT_UPDATED_SUCCESSFULLY),
+    withLatestFrom(
+      this.store.select(selectSelectedTableExperiment),
       this.store.select(selectSelectedExperiment),
       this.store.select(selectExperimentsList),
       this.store.select(selectExperimentInfoData),
-      this.store.select(selectAppVisible)
+      this.store.select(selectAppVisible),
     ),
-    filter(([action, selected, experiments, infoData, visible]) => {
-      if (!infoData || !selected || !visible ) {
-        return true;
+    switchMap(([action, tableSelected, selected, experiments, infoData, visible]) => {
+      const currentSelected = tableSelected || selected;
+      if (this.previousSelectedId && currentSelected?.id != this.previousSelectedId) {
+        this.previousSelectedLastUpdate = null;
       }
-      const listed = experiments.find(e => e.id === selected.id);
-      return !listed || new Date(selected.last_update) < new Date(listed.last_update);
+      this.previousSelectedId = currentSelected?.id;
+
+      if (!infoData || !currentSelected || !visible) {
+        return of([action, null, tableSelected, selected]);
+      }
+
+      const listed = experiments.find(e => e.id === currentSelected?.id);
+      return (listed ? of(listed) :
+        this.apiTasks.tasksGetAllEx({id: [selected.id], only_fields: ['last_update']}).pipe(map(res => res.tasks[0])))
+        .pipe(map(task => {
+          return [action, task.last_update, task, selected]}
+          ));
     }),
-    switchMap(([action]) =>
-      this.apiTasks.tasksGetAllEx({id: [action.payload], only_fields: EXPERIMENT_INFO_ONLY_FIELDS})
+    filter(([action, updateTime, tableSelected, selected]) => (action.type !== commonInfoActions.AUTO_REFRESH_EXPERIMENT_INFO || tableSelected?.id === selected?.id)),
+    // Can't have filter here because we need to deactivate loader
+    // filter(([action, selected, updateTime]) => !selected || new Date(selected.last_update) < new Date(updateTime)),
+    switchMap(([action, updateTime, tableSelected, selected]) => {
+      // else will deactivate loader
+      if (!updateTime || (new Date(this.previousSelectedLastUpdate) < new Date(updateTime)) || action.type === commonInfoActions.EXPERIMENT_UPDATED_SUCCESSFULLY) {
+        return [
+          commonInfoActions.getExperiment({experimentId: action.payload}),
+          commonInfoActions.getExperimentUncommittedChanges({experimentId: action.payload})
+        ];
+      } else {
+        return [new DeactiveLoader(action.type)];
+      }
+    }
+    )
+  );
+
+  @Effect()
+  fetchExperiment$ = this.actions$.pipe(
+    ofType(commonInfoActions.getExperiment),
+    switchMap((action) =>
+      this.apiTasks.tasksGetAllEx({id: [action.experimentId], only_fields: EXPERIMENT_INFO_ONLY_FIELDS})
         .pipe(
           flatMap(res => {
             let experiment = res.tasks[0];
+            this.previousSelectedLastUpdate = experiment.last_update;
             if (experiment) {
               experiment = convertStopToComplete([experiment])[0];
               return [
                 new commonInfoActions.SetExperimentInfoData(this.reverter.revertExperiment(experiment)),
                 new commonInfoActions.SetExperiment(experiment),
-                new UpdateExperiment({id: action.payload, changes: experiment}),
+                new UpdateExperiment({id: action.experimentId, changes: experiment}),
                 new DeactiveLoader(action.type),
-                new DeactiveLoader(commonInfoActions.GET_EXPERIMENT_INFO)
+                new DeactiveLoader(commonInfoActions.GET_EXPERIMENT_INFO),
               ];
-            }
-            else {
+            } else {
               return [
                 new SetServerError('Experiment not found'),
                 new DeactiveLoader(action.type),
@@ -89,7 +210,22 @@ export class CommonExperimentsInfoEffects {
   );
 
   @Effect()
-    // Changes fields which can be applied regardless of experiment draft state i.e name, comments, tags
+  fetchDiff$ = this.actions$.pipe(
+    ofType(commonInfoActions.getExperimentUncommittedChanges),
+    switchMap((action) =>
+      this.apiTasks.tasksGetAllEx({id: [action.experimentId], only_fields: ['script.diff']})
+        .pipe(
+          flatMap(res => {
+            const experiment = res.tasks[0];
+            return [commonInfoActions.setExperimentUncommittedChanges({diff: experiment?.script?.diff})];
+          }),
+          catchError(() => [commonInfoActions.setExperimentUncommittedChanges({diff: ''})])
+        )
+    )
+  );
+
+  @Effect()
+  // Changes fields which can be applied regardless of experiment draft state i.e name, comments, tags
   updateExperimentDetails$ = this.actions$.pipe(
     ofType<infoActions.ExperimentDetailsUpdated>(infoActions.EXPERIMENT_DETAILS_UPDATED),
     withLatestFrom(
@@ -104,9 +240,9 @@ export class CommonExperimentsInfoEffects {
           flatMap((res) => {
             const changes = res?.fields || action.payload.changes;
             return [
-              new commonInfoActions.ExperimentUpdatedSuccessfully(),
-              new UpdateExperiment({id: action.payload.id, changes }),
-              new commonInfoActions.UpdateExperimentInfoData({id: action.payload.id, changes})
+              new commonInfoActions.ExperimentUpdatedSuccessfully(action.payload.id),
+              new UpdateExperiment({id: action.payload.id, changes}),
+              selectedExperiment?.id === action.payload.id ? new commonInfoActions.UpdateExperimentInfoData({id: action.payload.id, changes}) : new EmptyAction()
             ];
           }),
           catchError(err => [
@@ -133,14 +269,14 @@ export class CommonExperimentsInfoEffects {
       this.apiTasks.tasksEdit(this.converter.convertExperiment(infoData, selectedExperiment, infoFreeze))
         .pipe(
           flatMap((res) => [
-            new commonInfoActions.ExperimentUpdatedSuccessfully(),
+            new commonInfoActions.ExperimentUpdatedSuccessfully(selectedExperiment.id),
             new SetBackdrop(false)
             // new viewActions.UpdateExperiment({id: action.payload.id, changes: action.payload.changes}),
           ]),
           catchError(err => [
             new RequestFailed(err),
             new SetServerError(err),
-            new commonInfoActions.ExperimentUpdatedSuccessfully(),
+            new commonInfoActions.ExperimentUpdatedSuccessfully(selectedExperiment.id),
             new infoActions.CancelExperimentEdit(),
             new SetBackdrop(false)
           ])
@@ -148,4 +284,109 @@ export class CommonExperimentsInfoEffects {
     ),
     shareReplay(1)
   );
+
+  @Effect()
+  saveExperimentHyperParams$ = this.actions$.pipe(
+    ofType(saveHyperParamsSection),
+    withLatestFrom(
+      this.store.select(selectExperimentInfoData),
+      this.store.select(selectSelectedExperiment),
+      this.store.select(selectExperimentInfoDataFreeze),
+      this.store.select(selectExperimentFormValidity),
+      this.store.select(selectRouterParams).pipe(map(params => get('projectId', params))),
+      this.store.select(selectExperimentHyperParamsSelectedSectionFromRoute)
+    ),
+    filter(([action, infoData, selectedExperiment, infoFreeze, valid, projectId, section]) => valid),
+    switchMap(([action, infoData, selectedExperiment, infoFreeze, valid, projectId, section]) =>
+      this.apiTasks.tasksEditHyperParams({task: selectedExperiment.id, hyperparams: action.hyperparams.length > 0 ? action.hyperparams : [{section}], replace_hyperparams: ReplaceHyperparamsEnum.Section})
+        .pipe(
+          flatMap((res) => [
+            new commonInfoActions.ExperimentUpdatedSuccessfully(selectedExperiment.id),
+            new SetBackdrop(false)
+          ]),
+          catchError(err => [
+            new RequestFailed(err),
+            new SetServerError(err),
+            new commonInfoActions.ExperimentUpdatedSuccessfully(selectedExperiment.id),
+            new infoActions.CancelExperimentEdit(),
+            new SetBackdrop(false)
+          ])
+        )
+    ),
+  );
+
+  // @Effect()
+  // populateDesignFromModel$ = this.actions$.pipe(
+  //   ofType<commonInfoActions.ModelSelected>(commonInfoActions.MODEL_SELECTED),
+  //   filter((action) =>{
+  //       return action.payload.fieldsToPopulate.networkDesign
+  //   }),
+  //   flatMap((action)=> [saveExperimentConfigObj({configuration: [{
+  //     name:getModelDesign(action.payload.model?.design).key|| 'design',
+  //       value: getModelDesign(action.payload.model?.design).value}]})])
+  // )
+
+
+  @Effect()
+  saveExperimentConfigObj$ = this.actions$.pipe(
+    ofType(saveExperimentConfigObj),
+    withLatestFrom(
+      this.store.select(selectExperimentInfoData),
+      this.store.select(selectSelectedExperimentFromRouter),
+      this.store.select(selectExperimentInfoDataFreeze),
+      this.store.select(selectRouterParams).pipe(map(params => get('projectId', params))),
+      this.store.select(selectExperimentHyperParamsSelectedSectionFromRoute)
+    ),
+    switchMap(([action, infoData, selectedExperiment, infoFreeze, projectId, section]) =>
+      this.apiTasks.tasksEditConfiguration({task: selectedExperiment, configuration: action.configuration})
+        .pipe(
+          flatMap((res) => [
+            commonInfoActions.getExperimentConfigurationObj(),
+            commonInfoActions.setExperimentSaving({saving:false}),
+            new SetBackdrop(false)
+          ]),
+          catchError(err => [
+            new RequestFailed(err),
+            new SetServerError(err),
+            commonInfoActions.getExperimentConfigurationObj(),
+            commonInfoActions.setExperimentSaving({saving:false}),
+            new infoActions.CancelExperimentEdit(),
+            new SetBackdrop(false)
+          ])
+        )
+    ),
+  );
+
+  @Effect()
+  deleteExperimentHyperParamsSection$ = this.actions$.pipe(
+    ofType(deleteHyperParamsSection),
+    withLatestFrom(
+      this.store.select(selectExperimentInfoData),
+      this.store.select(selectSelectedExperiment),
+      this.store.select(selectExperimentInfoDataFreeze),
+      this.store.select(selectExperimentFormValidity),
+      this.store.select(selectRouterParams).pipe(map(params => get('projectId', params))),
+      this.store.select(selectExperimentHyperParamsSelectedSectionFromRoute)
+    ),
+    filter(([action, infoData, selectedExperiment, infoFreeze, valid, projectId, section]) => valid),
+    switchMap(([action, infoData, selectedExperiment, infoFreeze, valid, projectId, section]) =>
+      this.apiTasks.tasksDeleteHyperParams({task: selectedExperiment.id, hyperparams: [{section: action.section}]})
+        .pipe(
+          tap(() => this.router.navigateByUrl(this.router.url.replace('/hyper-param/' + section, ''))),
+          flatMap((res) => [
+            new commonInfoActions.ExperimentUpdatedSuccessfully(selectedExperiment.id),
+            new SetBackdrop(false)
+          ]),
+          catchError(err => [
+            new RequestFailed(err),
+            new SetServerError(err),
+            new commonInfoActions.ExperimentUpdatedSuccessfully(selectedExperiment.id),
+            new infoActions.CancelExperimentEdit(),
+            new SetBackdrop(false)
+          ])
+        )
+    ),
+  );
+
+
 }
diff --git a/src/app/webapp-common/experiments/effects/common-experiments-menu.effects.ts b/src/app/webapp-common/experiments/effects/common-experiments-menu.effects.ts
index f877cbad..4bc15acb 100644
--- a/src/app/webapp-common/experiments/effects/common-experiments-menu.effects.ts
+++ b/src/app/webapp-common/experiments/effects/common-experiments-menu.effects.ts
@@ -7,7 +7,7 @@ import {BlTasksService} from '../../../business-logic/services/tasks.service';
 import {ApiEventsService} from '../../../business-logic/api-services/events.service';
 import {Router} from '@angular/router';
 import {catchError, flatMap, map, switchMap, tap, withLatestFrom} from 'rxjs/operators';
-import {ActiveLoader, DeactiveLoader, SetServerError} from '../../core/actions/layout.actions';
+import {ActiveLoader, AddMessage, DeactiveLoader, SetServerError} from '../../core/actions/layout.actions';
 import * as menuActions from '../actions/common-experiments-menu.actions';
 import * as viewActions from '../../../webapp-common/experiments/actions/common-experiments-view.actions';
 import {of} from 'rxjs';
@@ -22,11 +22,12 @@ import * as infoActions from '../actions/common-experiments-info.actions';
 import {EmptyAction} from '../../../app.constants';
 import * as commonViewActions from '../actions/common-experiments-view.actions';
 import {SmSyncStateSelectorService} from '../../core/services/sync-state-selector.service';
-import {ResetExperiments, SetSelectedExperiments} from '../actions/common-experiments-view.actions';
+import {RefreshExperiments, ResetExperiments, SetSelectedExperiments} from '../actions/common-experiments-view.actions';
 import {AutoRefreshExperimentInfo} from '../actions/common-experiments-info.actions';
-import {setArchive} from '../../core/actions/projects.actions';
 import {addTag, removeTag} from '../actions/common-experiments-menu.actions';
 import {ExperimentDetailsUpdated} from '../../../features/experiments/actions/experiments-info.actions';
+import {ISelectedExperiment} from '../../../features/experiments/shared/experiment-info.model';
+import {ResetOutput} from '../actions/common-experiment-output.actions';
 
 
 @Injectable()
@@ -92,10 +93,10 @@ export class CommonExperimentsMenuEffects {
   cloneExperimentRequested$ = this.actions$.pipe(
     ofType<menuActions.CloneExperimentClicked>(menuActions.CLONE_EXPERIMENT_CLICKED),
     switchMap(action => this.apiTasks.tasksClone({
-        task            : action.payload.originExperiment.id,
+        task: action.payload.originExperiment.id,
         new_task_project: action.payload.cloneData.project,
         new_task_comment: action.payload.cloneData.comment,
-        new_task_name   : action.payload.cloneData.name
+        new_task_name: action.payload.cloneData.name
       })
         .pipe(
           flatMap(res => [
@@ -118,7 +119,8 @@ export class CommonExperimentsMenuEffects {
     switchMap(
       action => this.apiTasks.tasksReset({task: action.payload.id})
         .pipe(
-          flatMap((res) => this.updateExperimentSuccess(action.payload.id, action.type, res.fields)),
+          flatMap((res) => [new ResetOutput()]
+            .concat(this.updateExperimentSuccess(action.payload.id, action.type, res.fields))),
           catchError(error => this.updateExperimentFailed(action.type, error))
         )
     )
@@ -149,58 +151,7 @@ export class CommonExperimentsMenuEffects {
   );
 
   @Effect()
-  archiveExperiment$ = this.actions$.pipe(
-    ofType<menuActions.ArchiveClicked>(menuActions.ARCHIVE_CLICKED),
-    tap((action) => {
-      if (action.payload.selectedExperiment && action.payload.selectedExperiment.id === action.payload.experiment.id) {
-        this.router.navigate([`projects/${action.payload.projectId}/experiments/`]);
-      }
-    }),
-    map(action => [action, this.taskBl.addHiddenTag(action.payload.experiment.system_tags)]),
-    withLatestFrom(this.store.pipe(select(selectSelectedExperiments))),
-    switchMap(([[action, system_tags], selectedExperiments]: [[menuActions.ArchiveClicked, Array<string>], Array<ITableExperiment>]) =>
-      this.apiTasks.tasksUpdate({task: action.payload.experiment.id, system_tags: system_tags})
-        .pipe(
-          flatMap(res => [...this.updateExperimentSuccess(action.payload.experiment.id, action.type, res.fields),
-            new commonViewActions.SetSelectedExperiments(selectedExperiments.filter(experiment => experiment.id !== action.payload.experiment.id))]),
-          catchError(error => this.updateExperimentFailed(action.type, error)),
-        )
-    )
-  );
-
-  @Effect()
-  restoreExperiment$ = this.actions$.pipe(
-    ofType<menuActions.RestoreClicked>(menuActions.RESTORE_CLICKED),
-    // (nir) not working anyway
-    // tap((action) => {
-    //   let path = `projects/${action.payload.projectId}/experiments/`;
-    //   if (action.payload.selectedExperiment && action.payload.selectedExperiment.id !== action.payload.experiment.id) {
-    //     path += action.payload.experiment.id;
-    //   }
-    //   this.store.dispatch(setArchive({archive: true}));
-    //   this.router.navigate([path]);
-    // }),
-    map(action => [action, this.taskBl.removeHiddenTag(action.payload.experiment.system_tags)]),
-    withLatestFrom(this.store.pipe(select(selectSelectedExperiments))),
-    switchMap(([[action, system_tags], selectedExperiments]: [[menuActions.RestoreClicked, Array<string>], Array<ITableExperiment>]) =>
-      this.apiTasks.tasksUpdate({task: action.payload.experiment.id, system_tags: system_tags})
-        .pipe(
-          flatMap(() => [
-            this.setExperimentIfSelected(action.payload.experiment.id, {changes: {system_tags: system_tags}}),
-            new commonViewActions.SetSelectedExperiments(selectedExperiments.filter(experiment => experiment.id !== action.payload.experiment.id)),
-            new DeactiveLoader(action.type),
-            new commonViewActions.GetExperiments()
-          ]),
-          catchError(error => [
-            new RequestFailed(error),
-            new DeactiveLoader(action.type),
-            new SetServerError(error, null, 'Update Experiment failed')
-          ])
-        )
-    )
-  );
-  @Effect()
-  changeProject$     = this.actions$.pipe(
+  changeProject$ = this.actions$.pipe(
     ofType<menuActions.ChangeProjectRequested>(menuActions.CHANGE_PROJECT_REQUESTED),
     switchMap(
       action => this.apiTasks.tasksUpdate({task: action.payload.experiment.id, project: action.payload.project.id})
@@ -245,19 +196,24 @@ export class CommonExperimentsMenuEffects {
   @Effect()
   addTag$ = this.actions$.pipe(
     ofType(addTag),
-    switchMap((action) =>
-      action.experiments.map( experiment =>
-        new ExperimentDetailsUpdated({
+    withLatestFrom(this.store.select(selectSelectedExperiments), this.store.select(selectSelectedExperiment)),
+    switchMap(([action, selectedExperiments, selectedExperimentInfo]) => {
+      const experimentsFromState = selectedExperimentInfo ? selectedExperiments.concat(selectedExperimentInfo) as ISelectedExperiment[] : selectedExperiments;
+      return action.experiments.map(experiment => {
+        const experimentFromState = experimentsFromState.find(exp => exp.id === experiment.id);
+        return new ExperimentDetailsUpdated({
           id: experiment.id,
-          changes: {tags: (experiment.tags || []).concat([action.tag]) }}))
-    )
+          changes: {tags: Array.from(new Set((experimentFromState?.tags || experiment.tags || []).concat([action.tag]))).sort()}
+        });
+      });
+    })
   );
 
   @Effect()
   removeTag$ = this.actions$.pipe(
     ofType(removeTag),
     switchMap((action) =>
-      action.experiments.map( experiment => {
+      action.experiments.map(experiment => {
         if (experiment.tags.includes(action.tag)) {
           return new ExperimentDetailsUpdated({
             id: experiment.id,
@@ -267,6 +223,20 @@ export class CommonExperimentsMenuEffects {
           return false;
         }
       }).filter(update => update !== false)
+        .concat(new AddMessage('success', `“${action.tag}” tag has been removed from “${action.experiments[0]?.name}” experiment`, [
+            {
+              name: 'Undo',
+              actions: [
+                new AddMessage('success', `“${action.tag}” tag has been restored`),
+                ...action.experiments.map(experiment => addTag({
+                    experiments: action.experiments,
+                    tag: action.tag
+                  })
+                )
+              ]
+            }
+          ]
+        ) as any)
     )
   );
 }
diff --git a/src/app/webapp-common/experiments/effects/common-experiments-view.effects.ts b/src/app/webapp-common/experiments/effects/common-experiments-view.effects.ts
index 22bf76e2..1077b25e 100644
--- a/src/app/webapp-common/experiments/effects/common-experiments-view.effects.ts
+++ b/src/app/webapp-common/experiments/effects/common-experiments-view.effects.ts
@@ -1,10 +1,9 @@
 import {Injectable} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Actions, Effect, ofType} from '@ngrx/effects';
-import {Action} from '@ngrx/store';
-import {Store} from '@ngrx/store';
-import {cloneDeep, get, getOr, isEqual} from 'lodash/fp';
-import {EMPTY, forkJoin, Observable, of} from 'rxjs';
+import {Action, Store} from '@ngrx/store';
+import {cloneDeep, get, getOr, isEqual, uniq} from 'lodash/fp';
+import {forkJoin, Observable, of} from 'rxjs';
 import {auditTime, catchError, filter, flatMap, map, switchMap, tap, withLatestFrom} from 'rxjs/operators';
 import {ApiProjectsService} from '../../../business-logic/api-services/projects.service';
 import {ApiTasksService} from '../../../business-logic/api-services/tasks.service';
@@ -17,28 +16,29 @@ import {selectSelectedExperiment} from '../../../features/experiments/reducers';
 import {IExperimentsViewState} from '../../../features/experiments/reducers/experiments-view.reducer';
 import {EXPERIMENTS_TABLE_COL_FIELDS} from '../../../features/experiments/shared/experiments.const';
 import {RequestFailed} from '../../core/actions/http.actions';
-import {ActiveLoader, DeactiveLoader, SetServerError} from '../../core/actions/layout.actions';
+import {ActiveLoader, AddMessage, DeactiveLoader, SetServerError} from '../../core/actions/layout.actions';
 import {setArchive as setProjectArchive} from '../../core/actions/projects.actions';
 import {setURLParams} from '../../core/actions/router.actions';
 import {selectIsArchivedMode} from '../../core/reducers/projects.reducer';
-import {selectRouterParams} from '../../core/reducers/router-reducer';
+import {selectRouterConfig, selectRouterParams} from '../../core/reducers/router-reducer';
 import {selectAppVisible} from '../../core/reducers/view-reducer';
 import {FilterMetadata} from 'primeng/api/filtermetadata';
 import {ISmCol} from '../../shared/ui-components/data/table/table.consts';
 import {escapeRegex, getRouteFullUrl} from '../../shared/utils/shared-utils';
 import {encodeColumns} from '../../shared/utils/tableParamEncode';
-import {AutoRefreshExperimentInfo} from '../actions/common-experiments-info.actions';
+import {AutoRefreshExperimentInfo, GetExperimentInfo} from '../actions/common-experiments-info.actions';
 import * as exActions from '../actions/common-experiments-view.actions';
 import {SetCustomHyperParams, SetCustomMetrics} from '../actions/common-experiments-view.actions';
 import * as exSelectors from '../reducers/index';
 import {ITableExperiment} from '../shared/common-experiment-model.model';
-import {EXPERIMENTS_PAGE_SIZE, EXPERIMENTS_TYPES_LABELS} from '../shared/common-experiments.const';
+import {EXPERIMENTS_PAGE_SIZE} from '../shared/common-experiments.const';
 import {convertStopToComplete} from '../shared/common-experiments.utils';
 import {ApiUsersService} from '../../../business-logic/api-services/users.service';
 import {sortByField} from '../../tasks/tasks.utils';
 import {MODEL_TAGS, MODELS_TABLE_COL_FIELDS} from '../../models/shared/models.const';
 import {EmptyAction} from '../../../app.constants';
-import {selectExperimentsList} from '../reducers/index';
+import {selectExperimentsList, selectExperimentsUsers, selectTableFilters} from '../reducers/index';
+import {TasksUpdateResponse} from '../../../business-logic/model/tasks/tasksUpdateResponse';
 
 @Injectable()
 export class CommonExperimentsViewEffects {
@@ -100,15 +100,20 @@ export class CommonExperimentsViewEffects {
         flatMap(res => {
           res.tasks = convertStopToComplete(res.tasks);
           const actions: Action[] = [new DeactiveLoader('EXPERIMENTS_LIST')];
-
-          if (selectedExperiment) {
-            actions.push(new AutoRefreshExperimentInfo(selectedExperiment.id));
-          }
-          if ( selectedExperiment && action.payload.autoRefresh && isEqual(experiments.map(exp => exp.id).sort(), res.tasks.map(exp => exp.id).sort())) {
+          if (selectedExperiment && action.payload.autoRefresh && isEqual(experiments.map(exp => exp.id).sort(), res.tasks.map(exp => exp.id).sort())) {
             actions.push(exActions.setExperimentInPlace({experiments: res.tasks as ITableExperiment[]}));
           } else {
+            // SetExperiments must be before GetExperimentInfo!
             actions.push(new exActions.SetExperiments(res.tasks as ITableExperiment[]));
           }
+          if (selectedExperiment) {
+            if (action.payload.autoRefresh) {
+              actions.push(new AutoRefreshExperimentInfo(selectedExperiment.id));
+            } else {
+              // SetExperiments must be before GetExperimentInfo!
+              actions.push(new GetExperimentInfo(selectedExperiment.id));
+            }
+          }
           return actions;
         }),
         catchError(error => [
@@ -159,28 +164,46 @@ export class CommonExperimentsViewEffects {
   @Effect()
   archiveExperiments = this.actions$.pipe(
     ofType<exActions.ArchivedSelectedExperiments>(exActions.ARCHIVE_SELECTED_EXPERIMENTS),
-    withLatestFrom(this.store.select(exSelectors.selectSelectedExperiments), this.store.select(exSelectors.selectSelectedTableExperiment)),
-    tap(([action, checkedExperiments, selectedExperiment]) => {
+    withLatestFrom(
+      this.store.select(exSelectors.selectSelectedExperiments),
+      this.store.select(exSelectors.selectSelectedTableExperiment),
+      this.store.select(selectRouterParams)
+    ),
+    tap(([action, checkedExperiments, selectedExperiment, routerParams]) => {
       if (this.isSelectedExpInCheckedExps(checkedExperiments, selectedExperiment)) {
-        this.router.navigate([`projects/${action.payload.projectId}/experiments/`]);
+        this.router.navigate([`projects/${routerParams.projectId}/experiments/`]);
       }
     }),
-    map(([action, experiments]) => experiments.map(experiment => ({
-      task       : experiment.id,
-      system_tags: this.taskBl.addHiddenTag(experiment.system_tags)
-    }))),
-    switchMap((experimentsUpdateReq: Array<TasksUpdateRequest>) =>
-      forkJoin(experimentsUpdateReq.map(req => this.apiTasks.tasksUpdate(req)))
+    switchMap(([action, experiments]) => forkJoin(experiments.map(experiment => ({
+        task: experiment.id,
+        system_tags: this.taskBl.addHiddenTag(experiment.system_tags)
+      }) as TasksUpdateRequest).map(req => this.apiTasks.tasksUpdate(req)) as TasksUpdateResponse[])
         .pipe(
-          flatMap(() => [
-            new DeactiveLoader(exActions.ARCHIVE_SELECTED_EXPERIMENTS),
-            new exActions.RemoveExperiments(experimentsUpdateReq.map(exp => exp.task)),
-            new exActions.SetSelectedExperiments([]),
-            new exActions.GetExperiments()
-          ]),
+          withLatestFrom(this.store.select(selectRouterConfig)),
+          flatMap(([res, routerConfig]) => {
+            let actions: Action[] = [
+              new DeactiveLoader('EXPERIMENTS_LIST'),
+              new exActions.SetSelectedExperiments([]),
+              new AddMessage('success', `${experiments.length} experiment${experiments.length > 1 ? 's have' : ' has'} been archived`, action.payload.skipUndo ? [] : [
+                {
+                  name: 'Undo', actions: [
+                    new exActions.SetSelectedExperiments(experiments),
+                    new exActions.RestoreSelectedExperiments({skipUndo: true})
+                  ]
+                }
+              ])
+            ];
+            if (routerConfig.includes('experiments')) {
+              actions = actions.concat([
+                new exActions.RemoveExperiments(experiments.map(exp => exp.task)),
+                new exActions.GetExperiments()
+              ]);
+            }
+            return actions;
+          }),
           catchError(error => [
             new RequestFailed(error),
-            new DeactiveLoader(exActions.ARCHIVE_SELECTED_EXPERIMENTS),
+            new DeactiveLoader('EXPERIMENTS_LIST'),
             new SetServerError(error, null, 'Failed To Archive Experiments')
           ])
         )
@@ -190,30 +213,45 @@ export class CommonExperimentsViewEffects {
   @Effect()
   restoreExperiments = this.actions$.pipe(
     ofType<exActions.RestoreSelectedExperiments>(exActions.RESTORE_SELECTED_EXPERIMENTS),
-    withLatestFrom(this.store.select(exSelectors.selectSelectedExperiments), this.store.select(exSelectors.selectSelectedTableExperiment)),
-    tap(([action, checkedExperiments, selectedExperiment]) => {
-      let path = `projects/${action.payload.projectId}/experiments/`;
-      path += this.isSelectedExpInCheckedExps(checkedExperiments, selectedExperiment) ? '' : selectedExperiment ? selectedExperiment.id : '';
-      this.store.dispatch(exActions.setArchive({archive: true}));
-      this.router.navigate([path]);
+    withLatestFrom(
+      this.store.select(exSelectors.selectSelectedExperiments),
+      this.store.select(exSelectors.selectSelectedTableExperiment),
+      this.store.select(selectRouterParams)),
+    tap(([action, checkedExperiments, selectedExperiment, routerParams]) => {
+      if (this.isSelectedExpInCheckedExps(checkedExperiments, selectedExperiment)) {
+        this.router.navigate([`projects/${routerParams.projectId}/experiments/`]);
+      }
     }),
-    map(([action, experiments]) => experiments.map(experiment => ({
-      task       : experiment.id,
-      system_tags: this.taskBl.removeHiddenTag(experiment.system_tags)
-    }))),
-    switchMap((experimentsUpdateReq: Array<TasksUpdateRequest>) =>
-      forkJoin(experimentsUpdateReq.map(req => this.apiTasks.tasksUpdate(req)))
+    switchMap(([action, experiments]) => forkJoin(experiments.map(experiment => ({
+        task: experiment.id,
+        system_tags: this.taskBl.removeHiddenTag(experiment.system_tags)
+      })).map(req => this.apiTasks.tasksUpdate(req)) as TasksUpdateResponse[])
         .pipe(
-          withLatestFrom(this.store.select(selectRouterParams).pipe(map(params => get('projectId', params)))),
-          flatMap(() => [
-            new DeactiveLoader(exActions.ARCHIVE_SELECTED_EXPERIMENTS),
-            new exActions.RemoveExperiments(experimentsUpdateReq.map(exp => exp.task)),
-            new exActions.SetSelectedExperiments([]),
-            new exActions.GetExperiments()
-          ]),
+          withLatestFrom(this.store.select(selectRouterConfig)),
+          flatMap(([res, routerConfig]) => {
+            let actions: Action[] = [
+              new DeactiveLoader('EXPERIMENTS_LIST'),
+              new exActions.SetSelectedExperiments([]),
+              new AddMessage('success', `${experiments.length} experiment${experiments.length > 1 ? 's have' : ' has'} been restored`, action.payload.skipUndo ? [] : [
+                {
+                  name: 'Undo', actions: [
+                    new exActions.SetSelectedExperiments(experiments),
+                    new exActions.ArchivedSelectedExperiments({skipUndo: true})
+                  ]
+                }
+              ]),
+            ];
+            if (routerConfig.includes('experiments')) {
+              actions = actions.concat([
+                new exActions.RemoveExperiments(experiments.map(exp => exp.task)),
+                new exActions.GetExperiments(),
+              ]);
+            }
+            return actions;
+          }),
           catchError(error => [
             new RequestFailed(error),
-            new DeactiveLoader(exActions.ARCHIVE_SELECTED_EXPERIMENTS),
+            new DeactiveLoader('EXPERIMENTS_LIST'),
             new SetServerError(error, null, 'Failed To Restore Experiments')
           ])
         )
@@ -230,13 +268,13 @@ export class CommonExperimentsViewEffects {
           let filteredTableFilters: any = {};
           if (tableFilters?.type?.value) {
             filteredTableFilters = {
-              col  : 'type',
+              col: 'type',
               value: tableFilters.type.value.filter(filterType => res.types.includes(filterType))
             };
             shouldFilterFilters = filteredTableFilters.value.length !== tableFilters.type.value.length;
           }
           return [
-            shouldFilterFilters ? new exActions.TableFilterChanged(filteredTableFilters): new EmptyAction(),
+            shouldFilterFilters ? new exActions.TableFilterChanged(filteredTableFilters) : new EmptyAction(),
             exActions.setProjectsTypes(res),
             new DeactiveLoader(action.type)
           ];
@@ -250,22 +288,69 @@ export class CommonExperimentsViewEffects {
     )));
 
   @Effect()
-  getUsersEffect = this.actions$.pipe(
-    ofType(exActions.getUsers),
-    withLatestFrom(this.store.select(selectRouterParams).pipe(map(params => get('projectId', params)))),
-    switchMap(([action, projectId]) => this.usersApi.usersGetAllEx({
-      order_by          : ['name'],
-      only_fields       : ['name'],
-      active_in_projects: projectId !== '*' ? [projectId] : []
+  getFilteredUsersEffect = this.actions$.pipe(
+    ofType(exActions.getFilteredUsers),
+    withLatestFrom(this.store.select(selectExperimentsUsers), this.store.select(selectTableFilters)),
+    switchMap(([action, users, filters]) => this.usersApi.usersGetAllEx({
+      order_by: ['name'],
+      only_fields: ['name'],
+      id: getOr([], ['user.name', 'value'], filters)
     }).pipe(
       flatMap(res => [
-        exActions.setUsers(res),
+          exActions.setUsers({users: uniq(res.users.concat(users))}),
+          new DeactiveLoader(action.type)
+        ]
+      ),
+      catchError(error => [
+        new RequestFailed(error),
+        new DeactiveLoader(action.type),
+        new SetServerError(error, null, 'Fetch users failed')]
+      )
+    ))
+  );
+
+  @Effect()
+  getUsersEffect = this.actions$.pipe(
+    ofType(exActions.getUsers),
+    withLatestFrom(
+      this.store.select(selectRouterParams).pipe(map(params => get('projectId', params))),
+      this.store.select(selectTableFilters)),
+    switchMap(([action, projectId, filters]) => this.usersApi.usersGetAllEx({
+      order_by: ['name'],
+      only_fields: ['name'],
+      active_in_projects: projectId !== '*' ? [projectId] : []
+    }).pipe(
+      flatMap(res => {
+        const userFiltersValue = get([EXPERIMENTS_TABLE_COL_FIELDS.USER, 'value'], filters) || [];
+        const resIds = res.users.map(user => user.id);
+        const shouldGetFilteredUsersNames = !(userFiltersValue.every(id => resIds.includes(id)));
+        return [
+          exActions.setUsers(res),
+          shouldGetFilteredUsersNames ? exActions.getFilteredUsers() : new EmptyAction(),
+        ];
+      }),
+      catchError(error => [
+        new RequestFailed(error),
+        new SetServerError(error, null, 'Fetch users failed')]
+      )
+    ))
+  );
+
+  @Effect()
+  getTagsEffect = this.actions$.pipe(
+    ofType(exActions.getTags),
+    withLatestFrom(this.store.select(selectRouterParams).pipe(map(params => get('projectId', params)))),
+    switchMap(([action, projectId]) => this.projectsApi.projectsGetTaskTags({
+      projects: projectId === '*' ? [] : [projectId]
+    }).pipe(
+      flatMap(res => [
+        exActions.setTags({tags: res.tags.concat(null)}),
         new DeactiveLoader(action.type)
       ]),
       catchError(error => [
         new RequestFailed(error),
         new DeactiveLoader(action.type),
-        new SetServerError(error, null, 'Fetch users failed')]
+        new SetServerError(error, null, 'Fetch tags failed')]
       )
     ))
   );
@@ -293,7 +378,7 @@ export class CommonExperimentsViewEffects {
   GetCustomHyperParams = this.actions$.pipe(
     ofType<exActions.GetCustomHyperParams>(exActions.GET_CUSTOM_HYPER_PARAMS),
     withLatestFrom(this.store.select(selectRouterParams).pipe(map(params => get('projectId', params)))),
-    switchMap(([action, projectId]) => this.projectsApi.projectsGetHyperParameters({project: projectId === '*' ? null : projectId})
+    switchMap(([action, projectId]) => this.projectsApi.projectsGetHyperParameters({project: projectId === '*' ? null : projectId, page_size: 1000})
       .pipe(
         flatMap(res => [
           new SetCustomHyperParams(res.parameters),
@@ -341,7 +426,13 @@ export class CommonExperimentsViewEffects {
            cols, hiddenCols, metricsCols, colsOrder
          ]) => {
       const columns = encodeColumns(cols, hiddenCols, this.filterColumns(projectId, metricsCols), colsOrder);
-      return setURLParams({columns, filters, orderField: sortField, orderDirection: sortOrder > 0 ? 'asc' : 'desc', isArchived});
+      return setURLParams({
+        columns,
+        filters,
+        orderField: sortField,
+        orderDirection: sortOrder > 0 ? 'asc' : 'desc',
+        isArchived
+      });
     })
   );
 
@@ -374,22 +465,22 @@ export class CommonExperimentsViewEffects {
     const pageToGet = getAllPages ? 0 : page;
     const pageSizeToGet = getAllPages ? (page + 1) * EXPERIMENTS_PAGE_SIZE : EXPERIMENTS_PAGE_SIZE;
     return {
-      id         : ids,
-      _any_      : searchQuery ? {
+      id: ids,
+      _any_: searchQuery ? {
         pattern: escapeRegex(searchQuery),
-        fields : GET_ALL_QUERY_ANY_FIELDS
+        fields: GET_ALL_QUERY_ANY_FIELDS
       } : undefined,
-      project    : (!projectId || projectId === '*') ? undefined : [projectId],
-      page       : pageToGet,
-      page_size  : pageSizeToGet,
-      order_by   : [(orderSort === 1 ? '-' : '') + orderField],
-      status     : (statusFilter && statusFilter.length > 0) ? statusFilter : undefined,
-      type       : (typeFilter && typeFilter.length > 0) ? typeFilter : [],
-      user       : (userFilter && userFilter.length > 0) ? userFilter : [],
+      project: (!projectId || projectId === '*') ? undefined : [projectId],
+      page: pageToGet,
+      page_size: pageSizeToGet,
+      order_by: [(orderSort === 1 ? '-' : '') + orderField],
+      status: (statusFilter && statusFilter.length > 0) ? statusFilter : undefined,
+      type: (typeFilter && typeFilter.length > 0) ? typeFilter : ['__$not', 'annotation_manual', '__$not', 'annotation', '__$not', 'dataset_import'],
+      user: (userFilter && userFilter.length > 0) ? userFilter : [],
       system_tags: (systemTagsFilter && systemTagsFilter.length > 0) ? systemTagsFilter : [],
-      tags       : (tagsFilter && tagsFilter.length > 0) ? tagsFilter : [],
+      tags: (tagsFilter && tagsFilter.length > 0) ? tagsFilter : [],
       only_fields: ['system_tags', 'company'].concat(
-        cols.filter(col => col.id !== 'selected').map(col => col.id)
+        cols.filter(col => col.id !== 'selected').map(col => col.getter || col.id)
       ).concat(metricCols ? metricCols.map(col => col.id) : [])
     };
   }
@@ -421,7 +512,13 @@ export class CommonExperimentsViewEffects {
           }
           const selectedExperimentsIds = showAllSelectedIsActive ? selectedExperiments.map(exp => exp.id) : [];
           const columns = encodeColumns(cols, hiddenCols, this.filterColumns(projectId, metricsCols), colsOrder);
-          this.store.dispatch(setURLParams({columns, filters, orderField: sortField, orderDirection: sortOrder > 0 ? 'asc' : 'desc', isArchived}));
+          this.store.dispatch(setURLParams({
+            columns,
+            filters,
+            orderField: sortField,
+            orderDirection: sortOrder > 0 ? 'asc' : 'desc',
+            isArchived
+          }));
           return this.apiTasks.tasksGetAllEx(this.getGetAllQuery(getAllPages, pageNumber,
             projectId, gb, isArchived, sortField, sortOrder, myFilters, selectedExperimentsIds,
             cols, metricsCols));
diff --git a/src/app/webapp-common/experiments/reducers/common-experiment-info.reducer.ts b/src/app/webapp-common/experiments/reducers/common-experiment-info.reducer.ts
index 91eb1321..048dde1c 100644
--- a/src/app/webapp-common/experiments/reducers/common-experiment-info.reducer.ts
+++ b/src/app/webapp-common/experiments/reducers/common-experiment-info.reducer.ts
@@ -3,10 +3,11 @@ import {IExperimentInfo, ISelectedExperiment} from '../../../features/experiment
 
 
 export interface ICommonExperimentInfoState {
-  selectedExperiment: ISelectedExperiment; // TODO: declare type.
+  selectedExperiment: ISelectedExperiment;
   experimentLog: Array<any>;
   infoData: IExperimentInfo;
   errors: { [key: string]: any } | null;
+  showExtraDataSpinner: boolean;
 }
 
 export const initialCommonExperimentInfoState: ICommonExperimentInfoState = {
@@ -17,6 +18,7 @@ export const initialCommonExperimentInfoState: ICommonExperimentInfoState = {
     model    : null,
     execution: null,
   },
+  showExtraDataSpinner: false
 };
 
 export function commonExperimentInfoReducer(state: ICommonExperimentInfoState = initialCommonExperimentInfoState, action): ICommonExperimentInfoState {
@@ -25,9 +27,17 @@ export function commonExperimentInfoReducer(state: ICommonExperimentInfoState =
     case actions.RESET_EXPERIMENT_INFO:
       return {...state, infoData: null};
     case actions.SET_EXPERIMENT_INFO_DATA:
-      return {...state, infoData: action.payload};
+      return {...state, infoData: {
+        ...action.payload,
+        configuration: state.infoData?.configuration,
+        execution: {...action.payload?.execution, diff: state.infoData?.execution?.diff}
+      }};
     case actions.UPDATE_EXPERIMENT_INFO_DATA:
-      return {...state, selectedExperiment: {...state.selectedExperiment, ...action.payload.changes}};
+      return {...state, selectedExperiment: {...state.selectedExperiment, ...action.payload.changes}, infoData:{...state.infoData, ...action.payload.changes}};
+    case actions.getExperimentUncommittedChanges.type:
+      return {...state, showExtraDataSpinner: true};
+    case actions.setExperimentUncommittedChanges.type:
+      return {...state, showExtraDataSpinner: false, infoData: {...state?.infoData, execution: {...state?.infoData?.execution, diff: action.diff}}};
     default:
       return state;
   }
diff --git a/src/app/webapp-common/experiments/reducers/common-experiment-output.reducer.ts b/src/app/webapp-common/experiments/reducers/common-experiment-output.reducer.ts
index 4b5a0631..2cec67bd 100644
--- a/src/app/webapp-common/experiments/reducers/common-experiment-output.reducer.ts
+++ b/src/app/webapp-common/experiments/reducers/common-experiment-output.reducer.ts
@@ -1,19 +1,34 @@
 import {Task} from '../../../business-logic/model/tasks/task';
 import * as actions from '../actions/common-experiment-output.actions';
 import {ScalarKeyEnum} from '../../../business-logic/model/events/scalarKeyEnum';
-import {last, getOr} from 'lodash/fp';
+import {sortBy, reverse} from 'lodash/fp';
+import {LOG_BATCH_SIZE} from '../shared/common-experiments.const';
+
+export interface Log {
+  timestamp: number;
+  type:	'log';
+  task: Task['id'];
+  level: 'debug' | 'info' | 'warning' | 'error' | 'critical';
+  worker: string;
+  msg: string;
+  metric: string;
+  variant: string;
+}
 
 export interface CommonExperimentOutputState {
   metricsMultiScalarsCharts: any;
   metricsHistogramCharts: any;
+  cachedAxisType: ScalarKeyEnum;
   metricsPlotsCharts: any;
-  experimentLog: Array<any>;
-  logScrollID: string;
+  experimentLog: Log[];
+  totalLogLines: number;
+  beginningOfLog: boolean;
   settingsList: Array<IExperimentSettings>;
   searchTerm: string;
   logFilter: string;
   showSettings: boolean;
 }
+
 export interface IExperimentSettings {
   id: Task['id'];
   hiddenMetricsScalar: Array<string>;
@@ -28,62 +43,86 @@ export interface IExperimentSettings {
 
 export const initialCommonExperimentOutputState: CommonExperimentOutputState = {
   metricsMultiScalarsCharts: null,
-  metricsHistogramCharts   : null,
-  metricsPlotsCharts       : null,
-  experimentLog            : null,
-  logScrollID              : null,
-  settingsList             : [],
-  searchTerm               : '',
-  logFilter                : null,
+  metricsHistogramCharts: null,
+  cachedAxisType: null,
+  metricsPlotsCharts: null,
+  experimentLog: [],
+  totalLogLines: null,
+  beginningOfLog: false,
+  settingsList: [],
+  searchTerm: '',
+  logFilter: null,
   showSettings: false
 };
 
 export function commonExperimentOutputReducer(state = initialCommonExperimentOutputState, action): CommonExperimentOutputState {
   switch (action.type) {
     case actions.RESET_OUTPUT:
-      return {...state,
+      return {
+        ...state,
         experimentLog: initialCommonExperimentOutputState.experimentLog,
-        logScrollID: initialCommonExperimentOutputState.logScrollID,
         metricsMultiScalarsCharts: initialCommonExperimentOutputState.metricsMultiScalarsCharts,
         metricsHistogramCharts: initialCommonExperimentOutputState.metricsHistogramCharts,
         metricsPlotsCharts: initialCommonExperimentOutputState.metricsPlotsCharts
       };
-    case actions.SET_EXPERIMENT_LOG:
-      const events = (<actions.SetExperimentLog>action).events;
+    case actions.setExperimentLog.type: {
+      const events = reverse(action.events);
       let currLog: any[];
-      let lastTimestamp: number;
-      if (state.experimentLog && state.experimentLog.length > 0 &&
-          last(state.experimentLog).timestamp >= getOr(9999999999999, '[0].timestamp', events)) {
-        currLog = state.experimentLog;
-        lastTimestamp = last(currLog).timestamp
+      let atStart = false;
+      if (action.direction) {
+        if (action.refresh) {
+          currLog = events;
+        } else if(action.direction === 'prev') {
+          if (action.events < LOG_BATCH_SIZE) {
+            atStart = true;
+          }
+          currLog = sortBy('timestamp', events.concat(state.experimentLog));
+          if (currLog.length > 300) {
+            currLog = currLog.slice(0, 300);
+          }
+        } else {
+          currLog = sortBy('timestamp', state.experimentLog.concat(events));
+          if (currLog.length > 300) {
+            currLog = currLog.slice(currLog.length - 300, currLog.length);
+          }
+        }
       } else {
-        currLog = [];
-        lastTimestamp = 0;
+        currLog = events;
       }
-      return {...state,
-        experimentLog: currLog.concat(events.filter(event => event.timestamp > lastTimestamp)),
-        logScrollID: (<actions.SetExperimentLog>action).scrollID
+      return {
+        ...state,
+        experimentLog: currLog,
+        totalLogLines: action.total,
+        beginningOfLog: atStart
       };
+    }
     case actions.SET_EXPERIMENT_METRICS_SEARCH_TERM:
       return {...state, searchTerm: action.payload.searchTerm};
     case actions.SET_EXPERIMENT_HISTOGRAM:
-      return {...state, metricsHistogramCharts: action.payload};
+      return {...state, metricsHistogramCharts: action.payload, cachedAxisType: action.axisType};
     case actions.SET_EXPERIMENT_PLOTS:
       return {...state, metricsPlotsCharts: action.payload};
-    case actions.UPDATE_EXPERIMENT_SETTINGS:
+    case actions.UPDATE_EXPERIMENT_SETTINGS: {
       let newSettings;
-      const isExperimentExists = state.settingsList.find((setting) => setting.id === action.payload.id);
-      if (isExperimentExists) {
+      const experimentExists = state.settingsList.find((setting) => setting.id === action.payload.id);
+      if (experimentExists) {
         newSettings = state.settingsList.map(setting => setting.id === action.payload.id ? {...setting, ...action.payload.changes} : setting);
       } else {
         newSettings = state.settingsList.slice();
         newSettings.push({id: action.payload.id, ...action.payload.changes});
       }
       return {...state, settingsList: newSettings};
+    }
     case actions.RESET_EXPERIMENT_METRICS:
-      return {...state, metricsMultiScalarsCharts: null, metricsHistogramCharts: null, metricsPlotsCharts: null};
+      return {
+        ...state,
+        metricsMultiScalarsCharts: initialCommonExperimentOutputState.metricsHistogramCharts,
+        metricsHistogramCharts: initialCommonExperimentOutputState.metricsHistogramCharts,
+        metricsPlotsCharts: initialCommonExperimentOutputState.metricsHistogramCharts,
+        cachedAxisType: initialCommonExperimentOutputState.cachedAxisType
+      };
     case actions.SET_LOG_FILTER:
-      return {...state, logFilter: (<actions.SetLogFilter>action).filterString};
+      return {...state, logFilter: (action as actions.SetLogFilter).filterString};
     case actions.RESET_LOG_FILTER:
       return {...state, logFilter: null};
     case actions.toggleSettings.type:
diff --git a/src/app/webapp-common/experiments/reducers/common-experiments-view.reducer.ts b/src/app/webapp-common/experiments/reducers/common-experiments-view.reducer.ts
index c9ed9a94..4c33e451 100644
--- a/src/app/webapp-common/experiments/reducers/common-experiments-view.reducer.ts
+++ b/src/app/webapp-common/experiments/reducers/common-experiments-view.reducer.ts
@@ -1,16 +1,13 @@
-import {ISmAction} from '../../core/models/actions';
-import {ExperimentTableColFieldsEnum, ITableExperiment} from '../shared/common-experiment-model.model';
+import {ITableExperiment} from '../shared/common-experiment-model.model';
 import {INITIAL_EXPERIMENT_TABLE_COLS} from '../../../features/experiments/experiments.consts';
-import {FilterMetadata} from 'primeng/api/filtermetadata';
 import {TABLE_SORT_ORDER, TableSortOrderEnum} from '../../shared/ui-components/data/table/table.consts';
 import {EXPERIMENTS_TABLE_COL_FIELDS} from '../../../features/experiments/shared/experiments.const';
 import * as actions from '../actions/common-experiments-view.actions';
+import {setExperimentInPlace} from '../actions/common-experiments-view.actions';
 import {EXPERIMENTS_VIEW_MODES, ExperimentsViewModesEnum} from '../shared/common-experiments.const';
 import {MetricVariantResult} from '../../../business-logic/model/projects/metricVariantResult';
 import {TableFilter} from '../../shared/utils/tableParamEncode';
 import {User} from '../../../business-logic/model/users/user';
-import {experiments} from '../../../features/experiments/reducers';
-import { setExperimentInPlace } from '../actions/common-experiments-view.actions';
 
 
 export interface ICommonExperimentsViewState {
@@ -35,8 +32,9 @@ export interface ICommonExperimentsViewState {
   hyperParams: Array<any>;
   metricsLoading: boolean;
   users: User[];
-  types: Array<string>;
+  types: string[];
   splitSize: number;
+  projectTags: string[];
 }
 
 export const commonExperimentsInitialState: ICommonExperimentsViewState = {
@@ -61,14 +59,15 @@ export const commonExperimentsInitialState: ICommonExperimentsViewState = {
   hyperParams             : [],
   metricsLoading          : false,
   users                   : [],
-  types                   : ['training', 'testing', 'inference', 'data_processing', 'application', 'monitor', 'controller', 'optimizer', 'service', 'qc'],
+  projectTags             : [],
+  types                   : [],
   splitSize: 75
 };
 
 export function commonExperimentsViewReducer(state: ICommonExperimentsViewState = commonExperimentsInitialState, action: any): ICommonExperimentsViewState {
   switch (action.type) {
     case actions.RESET_EXPERIMENTS:
-      return {...state, experiments: [], selectedExperiment: null};
+      return {...state, experiments: [], selectedExperiment: null, showAllSelectedIsActive: false};
     case  actions.SET_SHOW_ALL_SELECTED_IS_ACTIVE:
       return {...state, showAllSelectedIsActive: action.payload, globalFilter: commonExperimentsInitialState.globalFilter, tableFilters: commonExperimentsInitialState.tableFilters};
     case actions.ADD_MANY_EXPERIMENTS:
@@ -81,9 +80,12 @@ export function commonExperimentsViewReducer(state: ICommonExperimentsViewState
         ...state, experiments:
           state.experiments.map(ex => ex.id === payload.id ? {...ex, ...payload.changes} : ex)
       };
-      if (state.selectedExperiment && state.selectedExperiment.id === payload.id) {
+      if (state.selectedExperiment?.id === payload.id) {
         newState.selectedExperiment = {...state.selectedExperiment, ...payload.changes};
       }
+      if (state.selectedExperiments.find(ex => ex.id === payload.id)) {
+        newState.selectedExperiments = state.selectedExperiments.map(ex => ex.id === payload.id ? {...ex, ...payload.changes} : ex);
+      }
       return newState;
     }
     case actions.SET_EXPERIMENTS:
@@ -155,13 +157,15 @@ export function commonExperimentsViewReducer(state: ICommonExperimentsViewState
 
     case actions.setUsers.type:
       return {...state, users: action.users};
+    case actions.setTags.type:
+      return {...state, projectTags: action.tags};
     case actions.setProjectsTypes.type:
       return {...state, types: action.types};
     case actions.CLEAR_HYPER_PARAMS_COLS:
       return {
         ...state,
-        metricsCols   : [...state.metricsCols.filter(tableCol => !(tableCol.id.startsWith('execution.parameters') && tableCol.projectId === action.payload.projectId))],
-        tableSortField: state.tableSortField.startsWith('execution.parameters') ? null : state.tableSortField
+        metricsCols   : [...state.metricsCols.filter(tableCol => !(tableCol.id.startsWith('hyperparams') && tableCol.projectId === action.payload.projectId))],
+        tableSortField: state.tableSortField.startsWith('hyperparams') ? null : state.tableSortField
       };
     case actions.SET_CUSTOM_METRICS:
       return {...state, metricVariants: action.payload.metrics, metricsLoading: false};
@@ -173,7 +177,7 @@ export function commonExperimentsViewReducer(state: ICommonExperimentsViewState
       return {...state, metricsLoading: true};
     case actions.GET_CUSTOM_HYPER_PARAMS:
       return {...state, metricsLoading: true};
-      case actions.setSplitSize.type:
+    case actions.setSplitSize.type:
       return {...state, splitSize: action.splitSize};
     default:
       return state;
diff --git a/src/app/webapp-common/experiments/reducers/index.ts b/src/app/webapp-common/experiments/reducers/index.ts
index 17df3a12..6a286765 100644
--- a/src/app/webapp-common/experiments/reducers/index.ts
+++ b/src/app/webapp-common/experiments/reducers/index.ts
@@ -1,12 +1,11 @@
 import {createSelector} from '@ngrx/store';
-import {ExperimentTableColFieldsEnum, ITableExperiment} from '../shared/common-experiment-model.model';
+import {ITableExperiment} from '../shared/common-experiment-model.model';
 import {TableSortOrderEnum} from '../../shared/ui-components/data/table/table.consts';
-import {FilterMetadata} from 'primeng/api/filtermetadata';
 import {experimentInfo, experimentOutput, experimentsView, selectExperimentInfoData, selectSelectedExperiment} from '../../../features/experiments/reducers';
 import {IExperimentInfo, ISelectedExperiment} from '../../../features/experiments/shared/experiment-info.model';
 import {experimentSectionsEnum} from '../../../features/experiments/shared/experiments.const';
 import {IExperimentSettings} from './common-experiment-output.reducer';
-import {get} from 'lodash/fp';
+import {get, getOr} from 'lodash/fp';
 import {TaskStatusEnum} from '../../../business-logic/model/tasks/taskStatusEnum';
 import {IExecutionForm} from '../../../features/experiments/shared/experiment-execution.model';
 import {ExperimentsViewModesEnum} from '../shared/common-experiments.const';
@@ -15,12 +14,16 @@ import {IHyperParamsForm} from '../shared/experiment-hyper-params.model';
 import {ScalarKeyEnum} from '../../../business-logic/model/events/scalarKeyEnum';
 import {IExperimentModelInfo} from '../shared/common-experiment-model.model';
 import {selectSelectedProjectId} from '../../core/reducers/projects.reducer';
+import {ParamsItem} from '../../../business-logic/model/tasks/paramsItem';
+import {selectRouterParams} from '../../core/reducers/router-reducer';
+import {map} from 'rxjs/operators';
 
 export const selectExperimentsList = createSelector(experimentsView, (state): ITableExperiment[] => state.experiments);
 export const selectSelectedTableExperiment = createSelector(experimentsView, (state): ITableExperiment => state.selectedExperiment);
 
 export const selectExperimentsTableCols = createSelector(experimentsView, (state): Array<any> => state.tableCols);
 export const selectExperimentsUsers = createSelector(experimentsView, (state): Array<any> => state.users);
+export const selectExperimentsTags = createSelector(experimentsView, (state): Array<string> => state.projectTags);
 export const selectExperimentsTypes = createSelector(experimentsView, (state): Array<any> => state.types);
 
 export const selectExperimentsTableColsOrder = createSelector([experimentsView, selectSelectedProjectId], (state, projectId): string[] => (state.colsOrder && projectId) ? state.colsOrder[projectId] : undefined);
@@ -44,9 +47,10 @@ export const selectIsSelectedExperimentInDev = createSelector(experimentInfo, (s
 export const selectIsExperimentSaving = createSelector(experimentInfo, (state): boolean => state.saving);
 export const selectIsExperimentInEditMode = createSelector(experimentInfo, (state): boolean => !!state.activeSectionEdit);
 
-export const selectExperimentLog = createSelector(experimentOutput, (state): Array<any> => state.experimentLog);
+export const selectExperimentLog = createSelector(experimentOutput, (state) => state.experimentLog);
+export const selectExperimentBeginningOfLog = createSelector(experimentOutput, (state) => state.beginningOfLog);
 export const selectExperimentInfoPlots = createSelector(experimentOutput, (state) => state.metricsPlotsCharts);
-export const selectExperimentInfoHistograms = createSelector(experimentOutput, (state) => state.metricsHistogramCharts);
+export const selectExperimentHistogramCacheAxisType = createSelector(experimentOutput, (state) => state.cachedAxisType);
 export const selectExperimentMetricsSearchTerm = createSelector(experimentOutput, (state) => state.searchTerm);
 export const selectHyperParamsVariants = createSelector(experimentsView, (state): Array<any> => state.hyperParams);
 
@@ -54,7 +58,7 @@ export const selectExperimentUserKnowledge = createSelector(experimentInfo,
   (state): Map<experimentSectionsEnum, boolean> => state.userKnowledge);
 
 export const selectLogFilter = createSelector(experimentOutput, (state) => state.logFilter);
-export const selectLogScrollID = createSelector(experimentOutput, (state) => state.logScrollID);
+export const selectTotalLogLines = createSelector(experimentOutput, (state) => state.totalLogLines);
 
 export const selectShowSettings = createSelector(experimentOutput, (state) => state.showSettings);
 export const selectSelectedExperimentSettings = createSelector(experimentOutput, selectSelectedExperiment,
@@ -78,5 +82,46 @@ export const selectExperimentExecutionInfoData = createSelector(selectExperiment
   (info: IExperimentInfo): IExecutionForm => get('execution', info));
 
 export const selectExperimentHyperParamsInfoData = createSelector(selectExperimentInfoData,
-  (info: IExperimentInfo): IHyperParamsForm => get('hyperParams', info));
+  (info: IExperimentInfo): IExperimentInfo['hyperparams'] => info?.hyperparams);
 
+export const selectExperimentConfiguration = createSelector(selectExperimentInfoData,
+  (info: IExperimentInfo): IExperimentInfo['configuration'] => info?.configuration);
+
+export const selectExperimentHyperParamsSelectedSectionFromRoute = createSelector(selectRouterParams,
+  (params): string => get('hyperParamId', params));
+
+export const selectExperimentSelectedConfigObjectFromRoute = createSelector(selectRouterParams,
+  (params): string => get('configObject', params));
+
+
+export const selectSelectedExperimentFromRouter = createSelector(selectRouterParams,
+  (params): string => get('experimentId', params));
+
+export const selectExperimentConfigObj =
+  createSelector(selectExperimentConfiguration, selectExperimentSelectedConfigObjectFromRoute,
+    (configuration: IExperimentInfo['configuration'], configObj: string): any =>getOr(null,configObj, configuration ) );
+
+
+
+export const selectExperimentHyperParamsSelectedSectionParams =
+  createSelector(selectExperimentHyperParamsInfoData, selectExperimentHyperParamsSelectedSectionFromRoute,
+    (hyperparams: IExperimentInfo['hyperparams'], section: string): ParamsItem[] => Object.entries(getOr({},section,hyperparams)).map(([key, value]) => value));
+
+
+export const selectExperimentInfoHistograms = createSelector(
+  selectSelectedSettingsxAxisType,
+  experimentOutput,
+  (axisType, state) => {
+    if (axisType === ScalarKeyEnum.IsoTime) {
+      return Object.keys(state.metricsHistogramCharts).reduce((groupAcc, groupName) => {
+        const group = state.metricsHistogramCharts[groupName];
+        groupAcc[groupName] = Object.keys(group).reduce((graphAcc, graphName) => {
+          const graph = group[graphName];
+          graphAcc[graphName] = {...graph, x: graph.x.map(ts => new Date(ts))};
+          return graphAcc;
+        }, {});
+        return groupAcc;
+      }, {});
+    }
+    return state.metricsHistogramCharts;
+  });
diff --git a/src/app/webapp-common/experiments/shared/common-experiment-model.model.ts b/src/app/webapp-common/experiments/shared/common-experiment-model.model.ts
index ea2c19ef..33087ae3 100644
--- a/src/app/webapp-common/experiments/shared/common-experiment-model.model.ts
+++ b/src/app/webapp-common/experiments/shared/common-experiment-model.model.ts
@@ -11,6 +11,7 @@ export interface IModelInfoInput {
   name: Model['name'];
   labels: Model['labels'];
   project?: Project;
+  design?: any;
 }
 
 export interface IModelFormOutput {
@@ -44,7 +45,6 @@ export interface IExperimentModelInfo {
   output: IModelInfoOutput;
   source: IModelInfoSource;
   artifacts: Artifact[];
-  prototext: string;
 }
 
 export type ExperimentTableColFieldsEnum = 'output.result' | 'comment' | 'id' | 'project.name' | 'name' | 'type' | 'status' | 'created' | 'completed' | 'user.name' | 'queue.name' | 'last_worker' | 'selected' |'last_iteration' | 'last_update' | 'tags';
diff --git a/src/app/webapp-common/experiments/shared/common-experiments.const.ts b/src/app/webapp-common/experiments/shared/common-experiments.const.ts
index 0ddb21b7..60b40e13 100644
--- a/src/app/webapp-common/experiments/shared/common-experiments.const.ts
+++ b/src/app/webapp-common/experiments/shared/common-experiments.const.ts
@@ -32,7 +32,7 @@ export const EXPERIMENTS_METRICS_TYPES = {
   SCALAR: 'scalar',
   PLOTS : 'plots'
 };
-export const EXPERIMENTS_PAGE_SIZE = 10;
+export const EXPERIMENTS_PAGE_SIZE = 15;
 export const EXPERIMENT_TABLE_ONLY_FIELDS = ['id', 'type', 'name', 'started', 'completed', 'status', 'system_tags', 'user.name', 'last_metrics', 'last_update'];
 
 export const FILTERED_EXPERIMENTS_STATUS_OPTIONS = Object.entries(EXPERIMENTS_STATUS_LABELS)
@@ -52,7 +52,7 @@ export const TASK_TAGS = {
   HIDDEN: 'archived' as TaskTagsEnum
 };
 
-export const LOG_BATCH_SIZE = 150;
+export const LOG_BATCH_SIZE = 40;
 
 export enum ThemeEnum {
   Dark = 'dark',
diff --git a/src/app/webapp-common/experiments/shared/components/base-experiment-menu.ts b/src/app/webapp-common/experiments/shared/components/base-experiment-menu.ts
index 953cae1d..b98dd107 100644
--- a/src/app/webapp-common/experiments/shared/components/base-experiment-menu.ts
+++ b/src/app/webapp-common/experiments/shared/components/base-experiment-menu.ts
@@ -40,9 +40,9 @@ import * as experimentsActions from '../../actions/common-experiments-view.actio
   template: ''
 })
 export class BaseExperimentMenuComponent extends BaseContextMenuComponent {
-  readonly ICONS          = ICONS;
+  readonly ICONS = ICONS;
   readonly TaskStatusEnum = TaskStatusEnum;
-  readonly TaskTypeEnum   = TaskTypeEnum;
+  readonly TaskTypeEnum = TaskTypeEnum;
 
   public isExample: boolean;
   protected _experiment: ISelectedExperiment;
@@ -63,54 +63,20 @@ export class BaseExperimentMenuComponent extends BaseContextMenuComponent {
     super(store, eRef);
   }
 
-  public restoreArchivePopup() {
-    const isArchived = this._experiment.system_tags && this._experiment.system_tags.includes('archived');
-    let title: string, bodyName: string;
-    if (this.numSelected > 1) {
-      title = isArchived ? `Restore ${this.numSelected} experiments` : `Archive ${this.numSelected} experiments`;
-      bodyName = `${this.numSelected} Experiments`;
-    } else {
-      title = isArchived ? 'Restore experiment' : 'Archive experiment';
-      bodyName = htmlTextShorte(this._experiment?.name || '');
-    }
-    const confirmDialogRef: MatDialogRef<any, boolean> = this.dialog.open(ConfirmDialogComponent, {
-      data: {
-        title,
-        body     : `<b>${bodyName}</b> will be ${
-          isArchived ? 'restored. It will be visible using "Exit Archive".'
-            : 'archived. It will be visible using "Open Archive"'
-        }.`,
-        yes      : isArchived ? 'Restore from archive' : 'Archive',
-        no       : 'keep',
-        iconClass: 'i-archive',
-      }
-    });
-
-    confirmDialogRef.afterClosed().subscribe((confirmed) => {
-      if (confirmed) {
-        this.restoreArchive();
-      }
-    });
-  }
-
   public getProjectId() {
     const params = this.syncSelector.selectSync(selectRouterParams);
     return get('projectId', params);
   }
 
-  private restoreArchive() {
+  public restoreArchive() {
+    //info header case
+    if (this.showButton) {
+      this.store.dispatch(new experimentsActions.SetSelectedExperiments([this._experiment as any]));
+    }
     if (this._experiment.system_tags && this._experiment.system_tags.includes('archived')) {
-      if (this.numSelected > 1) {
-        this.store.dispatch(new experimentsActions.RestoreSelectedExperiments({projectId: this.getProjectId()}));
-      } else {
-        this.store.dispatch(new commonMenuActions.RestoreClicked({experiment: this._experiment, selectedExperiment: this.selectedExperiment, projectId: this.getProjectId()}));
-      }
+      this.store.dispatch(new experimentsActions.RestoreSelectedExperiments({}));
     } else {
-      if (this.numSelected > 1) {
-        this.store.dispatch(new experimentsActions.ArchivedSelectedExperiments({projectId: this.getProjectId()}));
-      } else {
-        this.store.dispatch(new commonMenuActions.ArchiveClicked({experiment: this._experiment, selectedExperiment: this.selectedExperiment, projectId: this.getProjectId()}));
-      }
+      this.store.dispatch(new experimentsActions.ArchivedSelectedExperiments({}));
     }
   }
 
@@ -136,9 +102,9 @@ export class BaseExperimentMenuComponent extends BaseContextMenuComponent {
 
   enqueuePopup() {
     const selectQueueDialog: MatDialogRef<SelectQueueComponent, { confirmed: boolean; queue: Queue }> =
-            this.dialog.open(SelectQueueComponent, {
-              data: {taskId: this._experiment.id, reference: this._experiment.name}
-            });
+      this.dialog.open(SelectQueueComponent, {
+        data: {taskId: this._experiment.id, reference: this._experiment.name}
+      });
 
     selectQueueDialog.afterClosed().subscribe((res) => {
       if (res && res.confirmed) {
@@ -153,10 +119,10 @@ export class BaseExperimentMenuComponent extends BaseContextMenuComponent {
     this.store.dispatch(new GetQueuesForEnqueue());
     const confirmDialogRef = this.dialog.open(ConfirmDialogComponent, {
       data: {
-        title    : 'Dequeue Experiment',
-        body     : getBody(null),
-        yes      : 'Dequeue',
-        no       : 'Cancel',
+        title: 'Dequeue Experiment',
+        body: getBody(null),
+        yes: 'Dequeue',
+        no: 'Cancel',
         iconClass: 'i-alert',
       }
     });
@@ -190,17 +156,17 @@ export class BaseExperimentMenuComponent extends BaseContextMenuComponent {
 
   public resetPopup() {
     const devWarning: boolean = isDevelopment(this._experiment);
-    const body                = `<b>${htmlTextShorte(this._experiment?.name || '')}</b>
+    const body = `<b>${htmlTextShorte(this._experiment?.name || '')}</b>
 will be reset.<br>
 Resetting an experiment deletes all of its data, including statistics, debug samples, logs, and temporary models.` +
       (devWarning ? `<br><br><b>Note: this is a DEV experiment</b> Any subsequent runs of the experiment will overwrite any changes made to it in the Web-App.<br>
 To avoid this, <b>clone the experiment</b> and work with the cloned experiment.` : '');
-    const confirmDialogRef    = this.dialog.open(ConfirmDialogComponent, {
+    const confirmDialogRef = this.dialog.open(ConfirmDialogComponent, {
       data: {
-        title    : 'RESET',
-        body     : body,
-        yes      : 'Reset',
-        no       : 'Cancel',
+        title: 'RESET',
+        body: body,
+        yes: 'Reset',
+        no: 'Cancel',
         iconClass: 'i-alert',
       }
     });
@@ -218,13 +184,13 @@ To avoid this, <b>clone the experiment</b> and work with the cloned experiment.`
   public stopPopup() {
     const confirmDialogRef = this.dialog.open(ConfirmDialogComponent, {
       data: {
-        title    : 'ABORT',
-        body     : `<b>${htmlTextShorte(this._experiment?.name || '')}</b> will be stopped and
+        title: 'ABORT',
+        body: `<b>${htmlTextShorte(this._experiment?.name || '')}</b> will be stopped and
                 additional model updates will not be allowed.<br>
                 `,
-        yes      : 'Abort',
-        no       : 'Cancel',
-        iconClass: 'i-archive',
+        yes: 'Abort',
+        no: 'Cancel',
+        iconClass: 'al-icon al-ico-archive al-color',
       }
     });
     confirmDialogRef.afterClosed().subscribe((confirmed) => {
@@ -244,10 +210,10 @@ To avoid this, <b>clone the experiment</b> and work with the cloned experiment.`
   public publishPopup() {
     const confirmDialogRef = this.dialog.open(ConfirmDialogComponent, {
       data: {
-        title    : 'PUBLISH',
-        body     : this.publishPopupBody,
-        yes      : 'Publish',
-        no       : 'Cancel',
+        title: 'PUBLISH',
+        body: this.publishPopupBody,
+        yes: 'Publish',
+        no: 'Cancel',
         iconClass: 'd-block fas fa-cloud-upload-alt fa-7x w-auto',
       }
     });
@@ -267,8 +233,8 @@ To avoid this, <b>clone the experiment</b> and work with the cloned experiment.`
       data: {
         currentProject: get('project.id', this._experiment) || this.getProjectId(),
         defaultProject: get('project.id', this._experiment),
-        reference     : this._experiment.name,
-        type          : 'experiment'
+        reference: this._experiment.name,
+        type: 'experiment'
       }
     });
     dialog.afterClosed().pipe(filter(project => !!project)).subscribe(project => {
@@ -291,9 +257,9 @@ To avoid this, <b>clone the experiment</b> and work with the cloned experiment.`
   clonePopup() {
     const confirmDialogRef = this.dialog.open(CloneDialogComponent, {
       data: {
-        type          : 'Experiment',
+        type: 'Experiment',
         defaultProject: get('project.id', this._experiment),
-        defaultName   : this._experiment.name
+        defaultName: this._experiment.name
       }
     });
 
diff --git a/src/app/webapp-common/experiments/shared/components/change-project-dialog/change-project-dialog.component.html b/src/app/webapp-common/experiments/shared/components/change-project-dialog/change-project-dialog.component.html
index e5a61fea..6c894374 100644
--- a/src/app/webapp-common/experiments/shared/components/change-project-dialog/change-project-dialog.component.html
+++ b/src/app/webapp-common/experiments/shared/components/change-project-dialog/change-project-dialog.component.html
@@ -1,5 +1,5 @@
 <sm-dialog-template
-  iconClass="i-move-to-project"
+  iconClass="al-icon al-ico-move-to-project al-color blue-300"
   header="MOVE TO PROJECT"
 >
   <div class="message">
diff --git a/src/app/webapp-common/experiments/shared/components/clone-dialog/clone-dialog.component.html b/src/app/webapp-common/experiments/shared/components/clone-dialog/clone-dialog.component.html
index 208aff70..03eae981 100644
--- a/src/app/webapp-common/experiments/shared/components/clone-dialog/clone-dialog.component.html
+++ b/src/app/webapp-common/experiments/shared/components/clone-dialog/clone-dialog.component.html
@@ -1,14 +1,14 @@
-<sm-dialog-template iconClass="i-clone-black" [header]="header">
+<sm-dialog-template iconClass="al-icon al-ico-clone" [header]="header">
   <div class="reference">
     A draft copy of <b *ngIf="reference" [smTooltip]="reference.length > 80 ? reference : undefined">{{reference.length > 80 ? (reference | slice:0:77) + '...' : reference }}</b> will be created.
   </div>
 <div class="form-container">
   <h5>Project</h5>
   <sm-select-group
-    *ngIf="projects$ | async"
+    *ngIf="projects"
     fieldName="project"
     inputClassName="highlight"
-    [options]="projects$ | async"
+    [options]="projects"
     [placeHolder]=""
     [formData]="formData.project"
     (formDataChanged)="formDataChanged($event)">
@@ -32,7 +32,7 @@
   <sm-textarea-control
     fieldName="comment"
     inputClassName="highlight description"
-    [rows]="4"
+    [rows]="3"
     [formData]="formData.comment"
     (formDataChanged)="formDataChanged($event)">
     >
diff --git a/src/app/webapp-common/experiments/shared/components/clone-dialog/clone-dialog.component.scss b/src/app/webapp-common/experiments/shared/components/clone-dialog/clone-dialog.component.scss
index c577da4f..6ec44c87 100644
--- a/src/app/webapp-common/experiments/shared/components/clone-dialog/clone-dialog.component.scss
+++ b/src/app/webapp-common/experiments/shared/components/clone-dialog/clone-dialog.component.scss
@@ -7,12 +7,15 @@
     padding: 6px;
     margin-bottom: 12px;
     overflow-wrap: break-word;
+    max-width: 500px;
   }
 
-  sm-textarea-control {
-    display: block;
+  /deep/ sm-textarea-control {
     max-height: 100px;
-    height: 20vh;
+
+    textarea {
+      min-height: unset !important;
+    }
   }
 
   .buttons {
diff --git a/src/app/webapp-common/experiments/shared/components/clone-dialog/clone-dialog.component.ts b/src/app/webapp-common/experiments/shared/components/clone-dialog/clone-dialog.component.ts
index ac0853b1..8dfc8431 100644
--- a/src/app/webapp-common/experiments/shared/components/clone-dialog/clone-dialog.component.ts
+++ b/src/app/webapp-common/experiments/shared/components/clone-dialog/clone-dialog.component.ts
@@ -1,30 +1,30 @@
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {Project} from '../../../../../business-logic/model/projects/project';
-import {Component, Inject, OnInit} from '@angular/core';
-import {select, Store} from '@ngrx/store';
+import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
+import {Store} from '@ngrx/store';
 import {Validators} from '@angular/forms';
-import {Observable} from 'rxjs';
+import {Observable, Subscription} from 'rxjs';
 import {selectProjects} from '../../../../core/reducers/projects.reducer';
 import {GetAllProjects} from '../../../../core/actions/projects.actions';
-import {map, tap} from 'rxjs/operators';
-import {isExample} from '../../../../../webapp-common/shared/utils/shared-utils';
+import {map} from 'rxjs/operators';
+import {isExample} from '../../../../shared/utils/shared-utils';
 import {CloneForm} from '../../common-experiment-model.model';
 
 @Component({
-  selector: 'sm-clone-dialog',
+  selector   : 'sm-clone-dialog',
   templateUrl: './clone-dialog.component.html',
-  styleUrls: ['./clone-dialog.component.scss']
+  styleUrls  : ['./clone-dialog.component.scss']
 })
-export class CloneDialogComponent implements OnInit {
+export class CloneDialogComponent implements OnInit, OnDestroy {
 
   CLONE_NAME_PREFIX = 'Clone Of ';
   public reference: string;
   public header: string;
   public type: string;
-  public projects$: Observable<Array<any>>;
+  public projects$: Observable<Project[]>;
   public formData = <CloneForm>{
     project: null,
-    name: null,
+    name   : null,
     comment: null
   };
 
@@ -41,31 +41,37 @@ export class CloneDialogComponent implements OnInit {
   validators = {
     name: [Validators.required]
   };
+  private readonly defaultProjectId: string;
+  private projectsSub: Subscription;
+  public projects: { label: string; value: string }[];
 
   constructor(private store: Store<any>, @Inject(MAT_DIALOG_DATA) data: {
-    type: string;
-    defaultProject: Project['id'];
-    defaultName: string;
-    defaultComment: string; }, public dialogRef: MatDialogRef<CloneDialogComponent>
+                type: string;
+                defaultProject: Project['id'];
+                defaultName: string;
+                defaultComment: string;
+              }, public dialogRef: MatDialogRef<CloneDialogComponent>
   ) {
-    this.projects$ = this.store.pipe(
-      select(selectProjects),
-      map(projects => projects.filter((project) => !isExample(project))),
-      tap(filteredProjects => {
-        const defaultProject = filteredProjects.find(project => project.id === data.defaultProject);
-        this.formData.project = defaultProject ? defaultProject.id : filteredProjects[0] ? filteredProjects[0].id : null;
-        this.formData.comment = data.defaultComment || '';
-      }),
-      map(projects => projects.map(proj => ({value: proj.id, label: proj.name})))
-    );
+    this.projects$ = this.store.select(selectProjects).pipe(map(projects => projects.filter( project => !isExample(project))));
+    this.defaultProjectId = data.defaultProject;
     this.header = `Clone ${data.type}`;
     this.type = data.type.toLowerCase();
     this.reference = data.defaultName;
     this.formData.name = this.CLONE_NAME_PREFIX + data.defaultName;
+    this.formData.comment = data.defaultComment || '';
+  }
+
+  ngOnDestroy(): void {
+    this.projectsSub.unsubscribe();
   }
 
   ngOnInit(): void {
     this.store.dispatch(new GetAllProjects());
+    this.projectsSub = this.projects$.subscribe(projects => {
+      this.projects = projects.map(project => ({value: project.id, label: project.name}));
+      const defaultProject = this.projects.find(project => project.value === this.defaultProjectId);
+      this.formData.project = defaultProject ? defaultProject.value : projects[0] ? this.projects[0].value : null;
+    });
   }
 
   formDataChanged(event: { field: string, value: any }) {
diff --git a/src/app/webapp-common/experiments/shared/experiment-hyper-params.model.ts b/src/app/webapp-common/experiments/shared/experiment-hyper-params.model.ts
index 9734944b..0feb86c9 100644
--- a/src/app/webapp-common/experiments/shared/experiment-hyper-params.model.ts
+++ b/src/app/webapp-common/experiments/shared/experiment-hyper-params.model.ts
@@ -1,6 +1,10 @@
+import {ParamsItem} from '../../../business-logic/model/tasks/paramsItem';
+
 export interface IHyperParamsForm {
-  parameters: Array<IExecutionParameter>;
-}
+  [key: string]: ParamsItem[]
+};
+
+
 
 export interface IExecutionParameter {
   id?: string;
diff --git a/src/app/webapp-common/experiments/shared/services/common-experiment-converter.service.ts b/src/app/webapp-common/experiments/shared/services/common-experiment-converter.service.ts
index acbc994d..882de79d 100644
--- a/src/app/webapp-common/experiments/shared/services/common-experiment-converter.service.ts
+++ b/src/app/webapp-common/experiments/shared/services/common-experiment-converter.service.ts
@@ -16,7 +16,6 @@ export class CommonExperimentConverterService {
   }
 
   convertCommonExperiment(experimentInfo: IExperimentInfo, selectedExperiment: ISelectedExperiment, experimentInfoBeforeChange: IExperimentInfo): TasksEditRequest {
-
     const convertedExperiment: TasksEditRequest = {
       task: selectedExperiment.id,
       type: selectedExperiment.type,
@@ -40,14 +39,9 @@ export class CommonExperimentConverterService {
 
   }
 
-  commonConvertExecution(execution: IExecutionForm, model: IExperimentModelInfo,
-                         hyperParams: IHyperParamsForm): Execution {
+  commonConvertExecution(execution: IExecutionForm, model: IExperimentModelInfo): Execution {
     return {
-      parameters: this.convertParams(hyperParams),
       model     : getOr(<string>null, 'input.id', model),
-      model_desc: {
-        design: getOr('', 'prototext', model)
-      },
       framework : get('input.framework', model),
       docker_cmd: get('docker_cmd', execution)
     };
@@ -77,15 +71,6 @@ export class CommonExperimentConverterService {
     }
   }
 
-  convertParams(parameters: IHyperParamsForm): Execution['parameters'] {
-    return parameters.parameters.reduce((acc, cur) => {
-      if (cur.key) {
-        acc[cur.key] = cur.label;
-      }
-      return acc;
-    }, {});
-  }
-
   private convertRequirments(requirements: any) {
     return {...requirements, pip: requirements.pip ? requirements.pip.split('\n') : undefined};
   }
diff --git a/src/app/webapp-common/experiments/shared/services/common-experiment-reverter.service.ts b/src/app/webapp-common/experiments/shared/services/common-experiment-reverter.service.ts
index 9be33bdf..4019e61b 100644
--- a/src/app/webapp-common/experiments/shared/services/common-experiment-reverter.service.ts
+++ b/src/app/webapp-common/experiments/shared/services/common-experiment-reverter.service.ts
@@ -20,25 +20,36 @@ export class CommonExperimentReverterService {
 
   commonRevertExperiment(experiment: ISelectedExperiment): IExperimentInfo {
     return {
-      id: experiment.id,
-      name: experiment.name,
-      comment: experiment.comment,
-      execution: this.revertExecution(experiment),
-      model: this.revertModel(experiment),
-      hyperParams: {parameters: this.revertExecutionParameters(experiment.execution.parameters)},
+      id         : experiment.id,
+      name       : experiment.name,
+      comment    : experiment.comment,
+      execution  : this.revertExecution(experiment),
+      model      : this.revertModel(experiment),
+      hyperparams: this.revertHyperParams(experiment.hyperparams),
     };
   }
 
+  revertHyperParams(hyperparams) {
+    if (!hyperparams) {
+      hyperparams = {};
+    }
+    if (!('properties' in hyperparams)) {
+      hyperparams['properties'] = {};
+    }
+    return hyperparams;
+  }
+
+
   revertExecution(experiment: ISelectedExperiment): IExecutionForm {
     return {
-      source: this.revertExecutionSource(experiment.script),
-      output: {
+      source      : this.revertExecutionSource(experiment.script),
+      output      : {
         destination: get('destination', experiment.output) || '',
-        logLevel: 'basic'// TODO: should be enum from gencode.
+        logLevel   : 'basic'// TODO: should be enum from gencode.
       },
       requirements: experiment.script ? this.revertRequirements(experiment.script) : {pip: ''},
-      diff: get('diff', experiment.script) || '',
-      docker_cmd: get('docker_cmd', experiment.execution)
+      diff        : get('diff', experiment.script) || '',
+      docker_cmd  : get('docker_cmd', experiment.execution)
     };
   }
 
@@ -51,13 +62,13 @@ export class CommonExperimentReverterService {
 
   revertExecutionSource(script: Task['script']): IExecutionForm['source'] {
     return {
-      repository: get('repository', script) || '',
-      tag: get('tag', script) || '',
+      repository : get('repository', script) || '',
+      tag        : get('tag', script) || '',
       version_num: get('version_num', script) || '',
-      branch: get('branch', script) || '',
+      branch     : get('branch', script) || '',
       entry_point: get('entry_point', script) || '',
       working_dir: get('working_dir', script) || '',
-      scriptType: this.revertScriptType(script)
+      scriptType : this.revertScriptType(script)
     };
   }
 
@@ -74,76 +85,56 @@ export class CommonExperimentReverterService {
 
   revertModel(experiment: ISelectedExperiment): IExperimentModelInfo {
     return {
-      input: {
-        id: get('model.id', experiment.execution),
-        name: get('model.name', experiment.execution),
-        url: get('model.uri', experiment.execution),
+      input    : {
+        id       : get('model.id', experiment.execution),
+        name     : get('model.name', experiment.execution),
+        url      : get('model.uri', experiment.execution),
         framework: get('framework', experiment.execution),
-        labels: get('model.labels', experiment.execution),
-        project: get('model.project', experiment.execution),
+        labels   : get('model.labels', experiment.execution),
+        project  : get('model.project', experiment.execution),
+        design   : get('model.design', experiment.execution) || '',
       },
-      output: {
-        id: get('model.id', experiment.output) || '',
-        name: get('model.name', experiment.output) || '',
-        url: get('model.uri', experiment.output) || '',
+      output   : {
+        id     : get('model.id', experiment.output) || '',
+        name   : get('model.name', experiment.output) || '',
+        url    : get('model.uri', experiment.output) || '',
         project: get('model.project', experiment.output) || '',
-        design: get('model.design.design', experiment.output) || '',
+        design : get('model.design', experiment.output) || '',
       },
       artifacts: get('artifacts', experiment.execution) || [],
-      source: {
+      source   : {
         experimentName: get('model.task.name', experiment.execution),
-        experimentId: get('model.task.id', experiment.execution),
-        projectName: get('model.task.project.name', experiment.execution),
-        projectId: get('model.task.project.id', experiment.execution),
-        userName: get('model.user.name', experiment.execution),
-        timeCreated: get('model.created', experiment.execution),
+        experimentId  : get('model.task.id', experiment.execution),
+        projectName   : get('model.task.project.name', experiment.execution),
+        projectId     : get('model.task.project.id', experiment.execution),
+        userName      : get('model.user.name', experiment.execution),
+        timeCreated   : get('model.created', experiment.execution),
       },
-      prototext: this.getModelDesign(get('model_desc', experiment.execution)),
     };
   }
 
 
   revertModelFromModel(model: Model, populatePrototext: boolean): Partial<IExperimentModelInfo> {
     const modelData: Partial<IExperimentModelInfo> = {
-      input: model.id ? {
-        id: model.id,
-        name: model.name,
-        url: model.uri,
+      input : model.id ? {
+        id       : model.id,
+        name     : model.name,
+        url      : model.uri,
         framework: model.framework,
-        labels: model.labels,
+        labels   : model.labels,
       } : undefined,
-      output: { // TODO: no need?
-        id: null,
-        name: null,
-        url: null
-      },
       source: {
-        experimentId: get('task.id', model),
-        projectId: get('project.id', model),
+        experimentId  : get('task.id', model),
+        projectId     : get('project.id', model),
         experimentName: get('task.name', model),
-        projectName: get('project.name', model),
-        userName: get('user.name', model),
-        timeCreated: model.created,
+        projectName   : get('project.name', model),
+        userName      : get('user.name', model),
+        timeCreated   : model.created,
       },
     };
-
-    if (populatePrototext) {
-      modelData.prototext = this.getModelDesign(model.design);
-    }
-
     return modelData;
   }
 
-  public getModelDesign(modelDesc: Task['execution']['model_desc']) {
-    const modelDesign = get('design', modelDesc) || get('prototxt', modelDesc);
-    return typeof modelDesign === 'string' ? modelDesign : JSON.stringify(modelDesign);
-  }
-
-  public getOutputModelDesign(modelDesc: Task['execution']['model_desc']) {
-    const modelDesign = get('design', modelDesc) || get('prototxt', modelDesc);
-    return typeof modelDesign === 'string' ? modelDesign : JSON.stringify(modelDesign);
-  }
-
   private revertRequirements(script: Script) {
     const pip = getOr([], 'requirements.pip', script);
     return {
diff --git a/src/app/webapp-common/layout/breadcrumbs/breadcrumbs.component.html b/src/app/webapp-common/layout/breadcrumbs/breadcrumbs.component.html
index 689e7285..cc99ce3a 100644
--- a/src/app/webapp-common/layout/breadcrumbs/breadcrumbs.component.html
+++ b/src/app/webapp-common/layout/breadcrumbs/breadcrumbs.component.html
@@ -1,4 +1,4 @@
-<span *ngFor="let crumb of breadcrumbs; let i=index" class="breadcrumbLink">
+<span *ngFor="let crumb of breadcrumbs; let i=index; let last=last" class="breadcrumbLink" [class.ellipsis]="last">
   <a [routerLink]="crumb.url">{{crumb.name}}</a>
   <a *ngIf="i < breadcrumbs?.length - 1"> > </a>
 </span>
@@ -14,7 +14,7 @@
     <div class="share-menu-container" smClickStopPropagation>
       <div class="d-flex align-items-center justify-content-between top">
         <div class="share-title">SHARE</div>
-        <i class="pointer icon i-dialog-x sm-md close-dialog" (click)="menuTrigger.closeMenu()" smClickStopPropagation></i>
+        <i class="pointer al-icon al-ico-dialog-x al-color blue-400 sm-md close-dialog" (click)="menuTrigger.closeMenu()" smClickStopPropagation></i>
       </div>
       <div class="copy-title">Copy the following URL to share this view with others</div>
       <div class="link-box">
diff --git a/src/app/webapp-common/layout/breadcrumbs/breadcrumbs.component.scss b/src/app/webapp-common/layout/breadcrumbs/breadcrumbs.component.scss
index 9cbf9522..5b1b579b 100644
--- a/src/app/webapp-common/layout/breadcrumbs/breadcrumbs.component.scss
+++ b/src/app/webapp-common/layout/breadcrumbs/breadcrumbs.component.scss
@@ -14,7 +14,7 @@ span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: $dark-grey-blue-four;
+  color: $blue-100;
   font-weight: 400;
   display: inline-block;
   padding-right: 4px;
diff --git a/src/app/webapp-common/layout/header/header.component.html b/src/app/webapp-common/layout/header/header.component.html
index e62ebb67..b3a14c78 100644
--- a/src/app/webapp-common/layout/header/header.component.html
+++ b/src/app/webapp-common/layout/header/header.component.html
@@ -1,10 +1,24 @@
-<div class="row header-container">
-  <div *ngIf="!isDashboard">
-    <sm-breadcrumbs></sm-breadcrumbs>
+<div class="header-container" [class.login]="isLogin">
+  <div *ngIf="isDashboard && !isLogin" class="logo-full" [class.make-room-for-slogan]="environment.whiteLabelSlogan">
+    <img [src]="environment.whiteLabelLogo || '../../../../assets/logo-white.svg?v=3'">
+    <div *ngIf="environment.whiteLabelSlogan" class="slogan">{{environment.whiteLabelSlogan}}</div>
   </div>
-  <div *ngIf="isDashboard" class="logo-full">
-    <img src="../../../../assets/logo-white.svg?v=2">
+  <sm-breadcrumbs *ngIf="!isDashboard" class="spacer"></sm-breadcrumbs>
+  <div *ngIf="isLogin && environment.whiteLabelLogo"  class="logo-full">
+    <img [src]="environment.whiteLabelLogo">
+  </div>
+  <div *ngIf="isLogin" class="spacer"></div>
+  <div  *ngIf="user | async" class="d-flex align-items-center right-buttons">
+    <sm-common-search></sm-common-search>
+    <a *smCheckPermission="true; else guestLogOut" class="item" routerLink="/profile" routerLinkActive="neon"
+       smTooltip="PROFILE" showDelay="0" position="below">
+      <i class="fa fa-user-alt"></i>
+    </a>
+    <ng-template #guestLogOut >
+      <a class="logout pointer" (click)="logout()" smTooltip="Logout" showDelay="0" position="below">
+          <i class="al-icon al-ico-user-logout al-color blue-300"></i>
+      </a>
+    </ng-template>
   </div>
-  <sm-common-search *ngIf="user | async"></sm-common-search>
 </div>
 <ng-content></ng-content>
diff --git a/src/app/webapp-common/layout/header/header.component.scss b/src/app/webapp-common/layout/header/header.component.scss
index b54eda3d..f2dda925 100644
--- a/src/app/webapp-common/layout/header/header.component.scss
+++ b/src/app/webapp-common/layout/header/header.component.scss
@@ -5,19 +5,57 @@
   height: $top-bar-height;
 
   .header-container {
+    display: flex;
     background-color: #141822;
     height: 100%;
-    padding: 0 24px;
+    padding: 0 12px 0 24px;
     align-items: center;
     justify-content: space-between;
+    .spacer{
+      min-width: 50px;
+    }
+
+    sm-breadcrumbs :not(.login){
+      width: 95%;
+    }
+
+
+    sm-common-search {
+      margin-right: 24px;
+    }
+
+    .item {
+      display: block;
+      width: 24px;
+      height: 24px;
+      background-color: $light-grey-blue;
+      color: #141822;
+      border-radius: 50%;
+      text-align: center;
+      line-height: 24px;
+      &.neon {
+        background-color: $neon-yellow-betterinchrome;
+      }
+    }
+
+    .logout {
+      color: #141822;
+    }
   }
 
 
-  .logo-full{
+  .logo-full {
     display: flex;
-    position:relative;
-    left:50%;
-    transform: translateX(-50%);
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    &.make-room-for-slogan {
+      justify-content: start;
+      .slogan{
+        padding: 12px;
+      }
+
+    }
   }
 
 }
diff --git a/src/app/webapp-common/layout/header/header.component.ts b/src/app/webapp-common/layout/header/header.component.ts
index 2a1baae8..61658756 100644
--- a/src/app/webapp-common/layout/header/header.component.ts
+++ b/src/app/webapp-common/layout/header/header.component.ts
@@ -3,6 +3,8 @@ import {Store} from '@ngrx/store';
 import {selectCurrentUser} from '../../core/reducers/users-reducer';
 import {Observable} from 'rxjs';
 import {User} from '../../../business-logic/model/users/user';
+import {environment} from '../../../../environments/environment';
+import {Logout} from '../../core/actions/users.actions';
 
 @Component({
   selector   : 'sm-header',
@@ -11,9 +13,15 @@ import {User} from '../../../business-logic/model/users/user';
 })
 export class HeaderComponent {
   @Input() isDashboard: boolean;
+  @Input() isLogin: boolean;
   public user: Observable<User>;
+  environment = environment;
 
   constructor(private store: Store<any>) {
     this.user = this.store.select(selectCurrentUser);
   }
+
+  logout() {
+    this.store.dispatch(new Logout());
+  }
 }
diff --git a/src/app/webapp-common/layout/layout.module.ts b/src/app/webapp-common/layout/layout.module.ts
index 5e887610..841e547a 100644
--- a/src/app/webapp-common/layout/layout.module.ts
+++ b/src/app/webapp-common/layout/layout.module.ts
@@ -14,18 +14,20 @@ import {BreadcrumbsComponent} from './breadcrumbs/breadcrumbs.component';
 import {CommonSearchModule} from '../common-search/common-search.module';
 import {HeaderComponent} from './header/header.component';
 import { UiUpdateDialogComponent } from './ui-update-dialog/ui-update-dialog.component';
+import {SharedModule} from '../../shared/shared.module';
 
 
 @NgModule({
-  imports     : [
-    CommonModule,
-    SMSharedModule,
-    FormsModule,
-    ReactiveFormsModule,
-    CommonSearchModule,
-    RouterModule,
-    StoreModule.forFeature('layout', LayoutReducer),
-  ],
+    imports: [
+        CommonModule,
+        SMSharedModule,
+        FormsModule,
+        ReactiveFormsModule,
+        CommonSearchModule,
+        RouterModule,
+        StoreModule.forFeature('layout', LayoutReducer),
+        SharedModule,
+    ],
   declarations: [HeaderComponent, BreadcrumbsComponent, ProjectContextNavbarComponent, LoggedOutAlertComponent, S3AccessResolverComponent, S3AccessDialogComponent, ServerNotificationDialogContainerComponent, UiUpdateDialogComponent],
   exports     : [HeaderComponent, BreadcrumbsComponent, ProjectContextNavbarComponent, LoggedOutAlertComponent, S3AccessResolverComponent, S3AccessDialogComponent, ServerNotificationDialogContainerComponent, UiUpdateDialogComponent]
 })
diff --git a/src/app/webapp-common/layout/layout.scss b/src/app/webapp-common/layout/layout.scss
index ba820f9f..f8ecc795 100644
--- a/src/app/webapp-common/layout/layout.scss
+++ b/src/app/webapp-common/layout/layout.scss
@@ -9,7 +9,7 @@ $projects-header-height: 2 * $projects-header-padding + 32px;
 
 //Project
 $project-header-height: 66px;
-$project-footer-height: 60px;
+$project-footer-height: 48px;
 
 $project-info-progress-height: 46px;
 
diff --git a/src/app/webapp-common/layout/ui-update-dialog/ui-update-dialog.component.ts b/src/app/webapp-common/layout/ui-update-dialog/ui-update-dialog.component.ts
index 5c3e0a70..09ea80db 100644
--- a/src/app/webapp-common/layout/ui-update-dialog/ui-update-dialog.component.ts
+++ b/src/app/webapp-common/layout/ui-update-dialog/ui-update-dialog.component.ts
@@ -17,6 +17,6 @@ export class UiUpdateDialogComponent {
   }
 
   reload() {
-    window.location.reload();
+    window.location.reload(true);
   }
 }
diff --git a/src/app/webapp-common/login/login.module.ts b/src/app/webapp-common/login/login.module.ts
index 5f5e1378..77a3329c 100644
--- a/src/app/webapp-common/login/login.module.ts
+++ b/src/app/webapp-common/login/login.module.ts
@@ -8,17 +8,19 @@ import { LoginComponent } from './login/login.component';
 
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import {NgxFilesizeModule} from 'ngx-filesize';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 
 @NgModule({
   declarations: [LoginComponent],
   providers: [],
-    imports: [
-        CommonModule,
-        LoginRoutingModule,
-        FormsModule,
-        MatAutocompleteModule,
-        HttpClientModule,
-        NgxFilesizeModule
-    ]
+  imports: [
+    CommonModule,
+    LoginRoutingModule,
+    FormsModule,
+    MatAutocompleteModule,
+    HttpClientModule,
+    NgxFilesizeModule,
+    MatProgressSpinnerModule
+  ]
 })
 export class LoginModule { }
diff --git a/src/app/webapp-common/login/login/login.component.html b/src/app/webapp-common/login/login/login.component.html
index 221e295e..45c1d1dd 100644
--- a/src/app/webapp-common/login/login/login.component.html
+++ b/src/app/webapp-common/login/login/login.component.html
@@ -4,15 +4,19 @@
     </div>
     <br><br><br>
     <div id="mobile-warn" class="alert alert-warning mobile-warn" [class.show]="mobile" role="alert">
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close" (click)="acknowlage()">
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close" (click)="acknowledge()">
             <span aria-hidden="true">×</span></button>
         <strong>Notice!</strong> The Web-App is not yet optimized for mobile devices.
     </div>
+  <div class="white-label" *ngIf="environment.whiteLabelLoginTitle">
+    <div class="white-label-title">{{environment.whiteLabelLoginTitle}}</div>
+    <div class="white-label-subtitle">{{environment.whiteLabelLoginSubtitle}}</div>
+  </div>
     <div class="login-box-wrapper" [class.mobile]="mobile">
       <div class="jumbotron">
           <div class="row login-section">
               <section class="mx-auto">
-                <img src="../../../../assets/logo-white.svg?v=2" class="logo">
+                <img src="../../../../assets/logo-white.svg?v=3" class="logo">
                 <div *ngIf="notice" class="login-notice">{{notice}}</div>
                 <div *ngIf="!loginMode" class="circle" ></div>
                   <form class="form-horizontal" #loginForm="ngForm" [ngClass]="{'d-none':!loginMode}">
@@ -39,10 +43,19 @@
                       <div *ngIf="loginFailed" class="alert alert-danger" role="alert">
                         Invalid User/Password combination
                       </div>
-                      <button class="btn" (click)="login()" [disabled]="!loginForm.valid">
+                      <button class="btn" (click)="login()" [disabled]="!loginForm.valid || showSpinner">
+                        <mat-spinner class="spinner" *ngIf="showSpinner" diameter="16"></mat-spinner>
                         {{buttonCaption}}
                       </button>
 
+                    <div class="mb-n4" *ngIf="guestUser?.enabled">
+                      <div class="separator d-flex mt-4">
+                        <div class="line"></div>
+                        <div class="px-3">OR</div>
+                        <div class="line"></div>
+                      </div>
+                      <button [disabled]="showSpinner" class="btn mt-3" (click)="loginGuest()">LOGIN AS A GUEST</button>
+                    </div>
                       <mat-autocomplete #auto="matAutocomplete">
                           <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
                               {{option.name}}
diff --git a/src/app/webapp-common/login/login/login.component.scss b/src/app/webapp-common/login/login/login.component.scss
index 5c21cadc..62f7b7aa 100644
--- a/src/app/webapp-common/login/login/login.component.scss
+++ b/src/app/webapp-common/login/login/login.component.scss
@@ -2,6 +2,10 @@
 
 :host {
   background-color: #202432;
+
+  /deep/ .mat-spinner circle {
+    stroke: #FFFFFF !important;
+  }
 }
 
 .login-box-wrapper {
@@ -34,23 +38,44 @@
     }
 
     .btn {
+      position: relative;
       background-color: #5a658e;
       color: #ffffff;
-      font-size: 13px;
-      font-weight: bold;
+      font-size: 12px;
+      font-weight: 500;
       margin-top: 12px;
+      padding: 7px 0;
       width: 250px;
-      border: 0px solid transparent; /* this was 1px earlier */
+      border: 0; /* this was 1px earlier */
+      opacity: unset;
 
       &:hover {
         background-color: #c3cdf0;
         color: #2c3246;
         border: 0px solid transparent; /* this was 1px earlier */
       }
+
       &:disabled {
         background-color: #424b6b;
         color: #2c3246;
       }
+
+      .spinner {
+        position: absolute;
+        left: 75px;
+      }
+    }
+
+    .separator {
+      display: flex;
+      color: $blue-250;
+      font-size: 11px;
+
+      .line {
+        border-bottom: 1px solid $blue-250;
+        width: 104px;
+        margin-bottom: 10px;
+      }
     }
   }
 
@@ -79,11 +104,31 @@
 }
 
 
-
 form {
   margin-bottom: 30px;
 }
 
+.white-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .white-label-title {
+    width: 400px;
+    height: 70px;
+    font-size: 24px;
+    line-height: 1.42;
+    text-align: center;
+    color: $blue-100;
+  }
+  .white-label-subtitle{
+    width: 400px;
+    height: 49px;
+    font-family: Heebo;
+    font-size: 12px;
+    line-height: 1.17;
+    text-align: center;
+  }
+}
 
 .mobile-warn {
   font-size: 40px;
@@ -104,32 +149,6 @@ form {
 
 .logo {
   width: 150px;
-  margin-bottom: 30px;
-}
-
-.or-container {
-  position: relative;
-  margin-top: 50px;
-  background-color: #384161;
-  padding-bottom: 20px;
-
-  hr {
-    border-top: 1px solid rgba(255, 255, 255, 0.3);
-  }
-}
-
-.or {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: -10px;
-  margin: auto;
-  width: 30px;
-  font-size: 15px;
-  font-weight: bold;
-  text-align: center;
-  color: $blue-grey;
-  background-color: inherit;
 }
 
 .login-notice {
diff --git a/src/app/webapp-common/login/login/login.component.ts b/src/app/webapp-common/login/login/login.component.ts
index d2bcc86e..e8f1add6 100644
--- a/src/app/webapp-common/login/login/login.component.ts
+++ b/src/app/webapp-common/login/login/login.component.ts
@@ -18,10 +18,11 @@ import {LoginMode, LoginModeEnum, LoginService} from '../../shared/services/logi
 })
 export class LoginComponent implements OnInit, OnDestroy {
 
-  loginModel: { name: any; password: any; } = {
+  loginModel: { name: any; password: any } = {
     name: '',
     password: ''
   };
+
   @ViewChild('loginForm', {static: true}) loginForm: NgForm;
   @ViewChild('nameInput', {static: true}) nameInput: ElementRef;
   options: any[] = [];
@@ -35,13 +36,18 @@ export class LoginComponent implements OnInit, OnDestroy {
   public demo: boolean;
   public mobile: boolean;
   public newUser: boolean;
+  public environment = environment;
   public loginFailed = false;
   public showGitHub: boolean;
   private redirectUrl: string;
   stars: number = 0;
+  showSpinner: boolean;
+  public guestUser: { enabled: boolean; username: string; password: string };
 
-  constructor(private router: Router, private loginService: LoginService,
-    private store: Store<any>, private route: ActivatedRoute) {
+  constructor(
+    private router: Router, private loginService: LoginService,
+    private store: Store<any>, private route: ActivatedRoute)
+  {
     this.mobile = mobilecheck();
   }
 
@@ -63,7 +69,7 @@ export class LoginComponent implements OnInit, OnDestroy {
     this.route.queryParams.subscribe((params: Params) => this.redirectUrl = params['redirect']);
 
     if (this.showGitHub) {
-      fetch('https://api.github.com/repos/allegroai/trains', { method: 'GET' })
+      fetch('https://api.github.com/repos/allegroai/trains', {method: 'GET'})
         .then(response => response.json()
           .then(json => this.stars = json['stargazers_count'])
         );
@@ -71,12 +77,13 @@ export class LoginComponent implements OnInit, OnDestroy {
 
     this.loginService.getLoginMode().pipe(
       finalize(() => {
+        this.guestUser = this.loginService.guestUser;
         if (this.loginMode === LoginModeEnum.simple) {
           this.loginService.getUsers().subscribe(users => {
             this.options = users;
           });
           if (environment.autoLogin && this.redirectUrl &&
-              !['/dashboard'].includes(this.redirectUrl)) {
+            !['/dashboard'].includes(this.redirectUrl)) {
             this.loginForm.controls['name'].setValue((new Date()).getTime().toString());
             this.simpleLogin();
           }
@@ -118,17 +125,23 @@ export class LoginComponent implements OnInit, OnDestroy {
   }
 
   login() {
+    this.showSpinner = true;
     if (this.loginMode === LoginModeEnum.password) {
       const user = this.loginModel.name.trim();
       const password = this.loginModel.password.trim();
       this.loginService.passwordLogin(user, password)
-        .subscribe((res: any) => {
-          this.afterLogin();
-        },
-        () => this.loginFailed = true);
-
+        .subscribe(
+          () => this.afterLogin(),
+          () => {
+            this.showSpinner = false;
+            this.loginFailed = true;
+          });
     } else {
-      this.simpleLogin();
+      const observer = this.simpleLogin();
+      observer?.subscribe(
+        () => this.showSpinner = false,
+        () => this.showSpinner = false
+      );
     }
   }
 
@@ -136,9 +149,11 @@ export class LoginComponent implements OnInit, OnDestroy {
     const user = this.options.find(x => x.name === this.loginModel.name);
 
     if (user) {
-      this.loginService.login(user.id).subscribe((res: any) => {
+      const loginObserver = this.loginService.login(user.id);
+      loginObserver.subscribe((res: any) => {
         this.afterLogin();
       });
+      return loginObserver;
     } else {
       const name = this.loginModel.name.trim();
       this.loginService.autoLogin(name, () => this.afterLogin());
@@ -167,7 +182,19 @@ export class LoginComponent implements OnInit, OnDestroy {
     return this.redirectUrl ? this.redirectUrl : '/dashboard';
   }
 
-  acknowlage() {
+  acknowledge() {
     this.mobile = false;
   }
+
+  loginGuest() {
+    this.showSpinner = true;
+    this.loginService.passwordLogin(this.guestUser.username, this.guestUser.password)
+      .subscribe((res: any) => {
+        this.afterLogin();
+      },
+      () => {
+        this.showSpinner = false;
+        this.loginFailed = true;
+      });
+  }
 }
diff --git a/src/app/webapp-common/models/actions/models-info.actions.ts b/src/app/webapp-common/models/actions/models-info.actions.ts
index 5dde637d..81b103cf 100644
--- a/src/app/webapp-common/models/actions/models-info.actions.ts
+++ b/src/app/webapp-common/models/actions/models-info.actions.ts
@@ -2,7 +2,6 @@ import {Action, createAction, props} from '@ngrx/store';
 import {Model} from '../../../business-logic/model/models/model';
 import {ISelectedModel} from '../shared/models.model';
 import {ModelsUpdateRequest} from '../../../business-logic/model/models/modelsUpdateRequest';
-import {EXPERIMENT_CANCEL_EDIT} from '../../../features/experiments/actions/experiments-info.actions';
 
 
 const MODELS_PREFIX = 'MODELS_INFO_';
diff --git a/src/app/webapp-common/models/actions/models-menu.actions.ts b/src/app/webapp-common/models/actions/models-menu.actions.ts
index 395b57f3..8e8921f2 100644
--- a/src/app/webapp-common/models/actions/models-menu.actions.ts
+++ b/src/app/webapp-common/models/actions/models-menu.actions.ts
@@ -13,21 +13,6 @@ export const PUBLISH_MODEL_CLICKED = MODELS_PREFIX + 'PUBLISH_MODEL_CLICKED';
 export const CHANGE_PROJECT_REQUESTED = MODELS_PREFIX + 'CHANGE_PROJECT_REQUESTED';
 
 
-
-export class ArchiveClicked implements Action {
-  readonly type = ARCHIVE_CLICKED;
-
-  constructor(public payload: { model: ISelectedModel; selectedModel: any }) {
-  }
-}
-
-export class RestoreClicked implements Action {
-  readonly type = RESTORE_CLICKED;
-
-  constructor(public payload: { model: ISelectedModel; selectedModel: any }) {
-  }
-}
-
 export class PublishModelClicked implements Action {
   readonly type = PUBLISH_MODEL_CLICKED;
 
diff --git a/src/app/webapp-common/models/actions/models-view.actions.ts b/src/app/webapp-common/models/actions/models-view.actions.ts
index c1dce477..2e53d9b0 100644
--- a/src/app/webapp-common/models/actions/models-view.actions.ts
+++ b/src/app/webapp-common/models/actions/models-view.actions.ts
@@ -4,7 +4,7 @@ import {ModelsViewModesEnum} from '../models.consts';
 import {ITableModel} from '../shared/models.model';
 import {TableFilter} from '../../shared/utils/tableParamEncode';
 import {User} from '../../../business-logic/model/users/user';
-import {TOGGLE_COL_HIDDEN} from '../../experiments/actions/common-experiments-view.actions';
+import {EXPERIMENTS_PREFIX, TOGGLE_COL_HIDDEN} from '../../experiments/actions/common-experiments-view.actions';
 
 const MODELS_PREFIX = 'MODELS_';
 
@@ -64,7 +64,7 @@ export class SetModels implements Action {
 
 export const setModelsInPlace = createAction(
   MODELS_PREFIX + '[set models in place]',
-  props<{models: ITableModel[]}>()
+  props<{ models: ITableModel[] }>()
 );
 
 export class SetNoMoreModels implements Action {
@@ -79,6 +79,14 @@ export const toggleColHidden = createAction(
   props<{ colName: string }>()
 );
 
+export const getTags = createAction(
+  MODELS_PREFIX + 'GET_TAGS');
+
+export const setTags = createAction(
+  MODELS_PREFIX + 'SET_TAGS',
+  props<{ tags: string[] }>()
+);
+
 export const setHiddenCols = createAction(
   MODELS_PREFIX + 'SET_HIDDEN_COLS',
   props<{ hiddenCols: { [key: string]: boolean } }>()
@@ -101,6 +109,17 @@ export const setUsers = createAction(
 export const getUsers = createAction(
   MODELS_PREFIX + 'GET_USERS');
 
+export const setFrameworks = createAction(
+  MODELS_PREFIX + 'SET_FRAMEWORKS',
+  props<{ frameworks: string[] }>()
+);
+
+export const getFrameworks = createAction(
+  MODELS_PREFIX + 'GET_FRAMEWORKS');
+
+export const getFilteredUsers = createAction(
+  MODELS_PREFIX + 'GET_FILTERED_USERS');
+
 export class AddModels implements Action {
   readonly type = ADD_MANY_MODELS;
 
@@ -202,19 +221,19 @@ export class ArchivedModeChanged implements Action {
 
 export class ArchivedSelectedModels implements Action {
   public type = ARCHIVE_SELECTED_MODELS;
-  public payload: { projectId: string };
+  public payload: { skipUndo: boolean };
 
-  constructor(projectId: string) {
-    this.payload = {projectId};
+  constructor(skipUndo?: boolean) {
+    this.payload = {skipUndo};
   }
 }
 
 export class RestoreSelectedModels implements Action {
   public type = RESTORE_SELECTED_MODELS;
-  public payload: { projectId: string };
+  public payload: { skipUndo: boolean };
 
-  constructor(projectId: string) {
-    this.payload = {projectId};
+  constructor(skipUndo?: boolean) {
+    this.payload = {skipUndo};
   }
 }
 
diff --git a/src/app/webapp-common/models/containers/model-info-general/model-info-general.component.html b/src/app/webapp-common/models/containers/model-info-general/model-info-general.component.html
index 2e4cd209..1d5ded93 100644
--- a/src/app/webapp-common/models/containers/model-info-general/model-info-general.component.html
+++ b/src/app/webapp-common/models/containers/model-info-general/model-info-general.component.html
@@ -1,5 +1,6 @@
 <sm-model-general-info
   [model]="selectedModel"
+  [editable]="!isExample"
   (showModel)="showModel($event)"
   (commentChanged)="commentChanged($event)"
 ></sm-model-general-info>
diff --git a/src/app/webapp-common/models/containers/model-info-general/model-info-general.component.ts b/src/app/webapp-common/models/containers/model-info-general/model-info-general.component.ts
index 813d854c..9959e803 100644
--- a/src/app/webapp-common/models/containers/model-info-general/model-info-general.component.ts
+++ b/src/app/webapp-common/models/containers/model-info-general/model-info-general.component.ts
@@ -6,7 +6,7 @@ import {ISelectedModel} from '../../shared/models.model';
 import {selectSelectedModel} from '../../reducers';
 import {filter} from 'rxjs/operators';
 import {resetDontShowAgainForBucketEndpoint} from '../../../core/actions/common-auth.actions';
-import {createModelLink} from '../../../shared/utils/shared-utils';
+import {createModelLink, isExample} from '../../../shared/utils/shared-utils';
 import {AdminService} from '../../../../features/admin/admin.service';
 import {ModelDetailsUpdated, updateModelDetails} from '../../actions/models-info.actions';
 
@@ -17,12 +17,16 @@ import {ModelDetailsUpdated, updateModelDetails} from '../../actions/models-info
 export class ModelInfoGeneralComponent implements OnDestroy {
 
   public selectedModel: ISelectedModel;
+  public isExample: boolean;
   private selectedModelSubscription: Subscription;
 
   constructor(private store: Store<IModelInfoState>, private adminService: AdminService) {
     this.selectedModelSubscription = this.store.select(selectSelectedModel).pipe(
       filter(model => !!model))
-      .subscribe(model => this.selectedModel = model);
+      .subscribe(model => {
+        this.isExample     = isExample(model);
+        this.selectedModel = model;
+      });
   }
 
   showModel(model) {
diff --git a/src/app/webapp-common/models/containers/model-info/model-info.component.html b/src/app/webapp-common/models/containers/model-info/model-info.component.html
index 2bc1f41d..fb2a8016 100644
--- a/src/app/webapp-common/models/containers/model-info/model-info.component.html
+++ b/src/app/webapp-common/models/containers/model-info/model-info.component.html
@@ -1,13 +1,13 @@
 <sm-experiment-info-header-status-progress-bar
-  [status]="getReadyStatus(selectedModel?.ready)"
+  [status]="getReadyStatus((selectedTableModel$ | async)?.ready || selectedModel?.ready)"
   (closeInfoClicked)="deselectModel()"
 >
 </sm-experiment-info-header-status-progress-bar>
 <div class="model-info-container light-theme">
   <sm-model-info-header #modelInfoHeader
-                        [model]="selectedModel"
-                        [editable]=" !isExample"
-                        [backdropActive]="backdropActive$ | async "
+                        [model]="((selectedTableModel$ | async) || selectedModel)"
+                        [editable]="!isExample"
+                        [backdropActive]="backdropActive$ | async"
                         (deselectModel)="deselectModel()"
                         (modelNameChanged)="updateModelName($event)"
   >
diff --git a/src/app/webapp-common/models/containers/model-info/model-info.component.scss b/src/app/webapp-common/models/containers/model-info/model-info.component.scss
index 00c499d6..29f43b3e 100644
--- a/src/app/webapp-common/models/containers/model-info/model-info.component.scss
+++ b/src/app/webapp-common/models/containers/model-info/model-info.component.scss
@@ -1,3 +1,5 @@
+@import "../../../layout/layout.scss";
+
 :host {
 
   sm-model-info-header {
@@ -6,6 +8,7 @@
   }
 
   .model-info-container {
+    height: calc(100% - 46px);
     padding-left: 10px;
     padding-top: 24px;
 
@@ -16,7 +19,7 @@
   }
 
   .model-info-body {
-    height: calc(100vh - 340px);
+    height: calc(100% - #{$experiment-info-header-height + 46px});
     overflow: auto;
     padding-right: 24px;
   }
diff --git a/src/app/webapp-common/models/containers/model-info/model-info.component.ts b/src/app/webapp-common/models/containers/model-info/model-info.component.ts
index c8b1af61..928b938b 100644
--- a/src/app/webapp-common/models/containers/model-info/model-info.component.ts
+++ b/src/app/webapp-common/models/containers/model-info/model-info.component.ts
@@ -5,8 +5,8 @@ import {Store} from '@ngrx/store';
 import {IModelInfoState} from '../../reducers/model-info.reducer';
 import {get} from 'lodash/fp';
 import * as infoActions from '../../actions/models-info.actions';
-import {selectSelectedModel} from '../../reducers';
-import {ISelectedModel} from '../../shared/models.model';
+import {selectSelectedModel, selectSelectedTableModel} from '../../reducers';
+import {ISelectedModel, ITableModel} from '../../shared/models.model';
 import {AdminService} from '../../../../features/admin/admin.service';
 import {selectS3BucketCredentials} from '../../../core/reducers/common-auth-reducer';
 import {SmSyncStateSelectorService} from '../../../core/services/sync-state-selector.service';
@@ -34,10 +34,12 @@ export class ModelInfoComponent implements OnInit, OnDestroy {
   public isExample: boolean;
   public backdropActive$: Observable<any>;
   private projectId: string;
+  public selectedTableModel$: Observable<ITableModel>;
 
   constructor(private router: Router, private store: Store<IModelInfoState>, private route: ActivatedRoute, private adminService: AdminService, private syncSelector: SmSyncStateSelectorService) {
     this.S3BucketCredentials = store.select(selectS3BucketCredentials);
     this.backdropActive$ = this.store.select(selectBackdropActive);
+    this.selectedTableModel$ = this.store.select(selectSelectedTableModel);
   }
 
   ngOnInit() {
diff --git a/src/app/webapp-common/models/containers/model-menu/model-menu.component.ts b/src/app/webapp-common/models/containers/model-menu/model-menu.component.ts
index 94a2bbde..65e62348 100644
--- a/src/app/webapp-common/models/containers/model-menu/model-menu.component.ts
+++ b/src/app/webapp-common/models/containers/model-menu/model-menu.component.ts
@@ -3,7 +3,7 @@ import * as menuActions from '../../actions/models-menu.actions';
 import {ChangeProjectRequested, PublishModelClicked} from '../../actions/models-menu.actions';
 import {isExample, htmlTextShorte} from '../../../shared/utils/shared-utils';
 import {ICONS} from '../../../../app.constants';
-import { MatDialog } from '@angular/material/dialog';
+import {MatDialog} from '@angular/material/dialog';
 import {Store} from '@ngrx/store';
 import {AdminService} from '../../../../features/admin/admin.service';
 import {selectS3BucketCredentials} from '../../../core/reducers/common-auth-reducer';
@@ -15,6 +15,7 @@ import {filter, first, skip} from 'rxjs/operators';
 import {ChangeProjectDialogComponent} from '../../../experiments/shared/components/change-project-dialog/change-project-dialog.component';
 import {resetDontShowAgainForBucketEndpoint} from '../../../core/actions/common-auth.actions';
 import {BaseContextMenuComponent} from '../../../shared/components/base-context-menu/base-context-menu.component';
+import {ArchivedSelectedModels, RestoreSelectedModels, SetSelectedModels} from '../../actions/models-view.actions';
 
 
 @Component({
@@ -55,34 +56,15 @@ export class BaseModelMenuComponent extends BaseContextMenuComponent {
     this.S3BucketCredentials = store.select(selectS3BucketCredentials);
   }
 
-  restoreArchivePopup() {
-    const isArchived = this.model.system_tags && this.model.system_tags.includes('archived');
-    const confirmDialogRef = this.dialog.open(ConfirmDialogComponent, {
-      data: {
-        title: isArchived ? 'Restore models' : 'Archive models',
-        body: `<b>${htmlTextShorte(this.model.name)}</b> will be ${
-          isArchived ? 'restored. It will be visible using "Exit Archive"'
-            : 'archived. It will be visible using "Open Archive"'
-        }.`,
-        yes: isArchived ? 'Restore from archive' : 'Archive',
-        no: 'keep',
-        iconClass: 'i-archive',
-      }
-    });
-
-    confirmDialogRef.afterClosed().subscribe((confirmed) => {
-      if (confirmed) {
-        this.archiveClicked();
-      }
-    });
-  }
-
   archiveClicked() {
-    const payload = {model: this.model, selectedModel: this.selectedModel};
+    //info header case
+    if (this.showButton) {
+      this.store.dispatch(new SetSelectedModels([this.model]));
+    }
     if (this.model.system_tags && this.model.system_tags.includes('archived')) {
-      this.store.dispatch(new menuActions.RestoreClicked(payload));
+      this.store.dispatch(new RestoreSelectedModels());
     } else {
-      this.store.dispatch(new menuActions.ArchiveClicked(payload));
+      this.store.dispatch(new ArchivedSelectedModels());
     }
   }
 
@@ -127,7 +109,8 @@ export class BaseModelMenuComponent extends BaseContextMenuComponent {
         currentProject: get('project.id', this.model),
         defaultProject: get('project.id', this.model),
         reference: this.model.name,
-        type: 'model' }
+        type: 'model'
+      }
     });
     dialog.afterClosed().pipe(filter(project => !!project)).subscribe(project => {
       this.moveToProjectClicked(project);
diff --git a/src/app/webapp-common/models/dumbs/model-custom-cols-menu/model-custom-cols-menu.component.html b/src/app/webapp-common/models/dumbs/model-custom-cols-menu/model-custom-cols-menu.component.html
index 796c7445..8184bee0 100644
--- a/src/app/webapp-common/models/dumbs/model-custom-cols-menu/model-custom-cols-menu.component.html
+++ b/src/app/webapp-common/models/dumbs/model-custom-cols-menu/model-custom-cols-menu.component.html
@@ -1,5 +1,5 @@
 <sm-menu
-  [iconClass]="'icon sm-md i-gear pointer create-new-icon '"
+  [iconClass]="'al-icon al-ico-settings al-color blue-400 sm-md pointer create-new-icon '"
   smMenuClass="light-theme custom-columns"
   [showButton]="false"
 >
diff --git a/src/app/webapp-common/models/dumbs/model-footer/model-footer.component.html b/src/app/webapp-common/models/dumbs/model-footer/model-footer.component.html
deleted file mode 100644
index d45f860d..00000000
--- a/src/app/webapp-common/models/dumbs/model-footer/model-footer.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<sm-compare-footer [visible]="visible" class="d-flex align-items-center justify-content-start">
-  <div class="model-selected-number">
-    <span class="show-all pointer" (click)="showAllSelectedClicked.emit(!showAllSelectedIsActive)">
-      {{'SHOW ' + (showAllSelectedIsActive? 'ALL MODELS' : (numberOfSelectedModels + ' MODELS SELECTED'))}} </span>
-  </div>
-  <div class="d-flex align-items-center">
-    <sm-icon-label *ngIf="!isArchivedMode" label="ARCHIVE" iconClass="icon i-archive-black" [disabled]="disableArchive" [smTooltip]="archiveToolTipMessage"
-                   (iconLabelClicked)="archiveModels()"></sm-icon-label>
-    <sm-icon-label *ngIf="isArchivedMode" label="RESTORE" iconClass="icon i-archive-black" [disabled]="disableArchive" [smTooltip]="archiveToolTipMessage"
-                   (iconLabelClicked)="restoreModels()"></sm-icon-label>
-  </div>
-</sm-compare-footer>
-
diff --git a/src/app/webapp-common/models/dumbs/model-footer/model-footer.component.scss b/src/app/webapp-common/models/dumbs/model-footer/model-footer.component.scss
deleted file mode 100644
index fb6633f8..00000000
--- a/src/app/webapp-common/models/dumbs/model-footer/model-footer.component.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-:host {
-  .model-selected-number {
-    padding-left: 12px;
-    width: 218px;
-    height: 100%;
-  }
-  span {
-    line-height: 60px;
-  }
-
-  .compare {
-    padding-right: 40px;
-    cursor: pointer;
-  }
-  .test-models {
-    cursor: pointer;
-  }
-  img {
-    cursor: pointer;
-  }
-}
-
diff --git a/src/app/webapp-common/models/dumbs/model-footer/model-footer.component.ts b/src/app/webapp-common/models/dumbs/model-footer/model-footer.component.ts
deleted file mode 100644
index 2c099c53..00000000
--- a/src/app/webapp-common/models/dumbs/model-footer/model-footer.component.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-
-@Component({
-  selector   : 'sm-model-footer',
-  templateUrl: './model-footer.component.html',
-  styleUrls  : ['./model-footer.component.scss']
-})
-export class ModelFooterComponent implements OnInit {
-
-  @Input() visible;
-  @Input() numberOfSelectedModels;
-  @Input() showAllSelectedIsActive;
-  @Input() isArchivedMode;
-  @Input() disableArchive: boolean = false;
-  @Input() archiveToolTipMessage: string;
-
-  @Output() restoreModelsClicked   = new EventEmitter();
-  @Output() compareModelsClicked   = new EventEmitter();
-  @Output() archiveModelsClicked   = new EventEmitter();
-  @Output() showAllSelectedClicked = new EventEmitter();
-
-  constructor() {
-  }
-
-  ngOnInit() {
-  }
-
-  onCompareModelsClicked() {
-    this.compareModelsClicked.emit();
-  }
-
-  archiveModels() {
-    this.archiveModelsClicked.emit();
-  }
-
-  restoreModels() {
-    this.restoreModelsClicked.emit();
-  }
-
-
-}
diff --git a/src/app/webapp-common/models/dumbs/model-general-info/model-general-info.component.html b/src/app/webapp-common/models/dumbs/model-general-info/model-general-info.component.html
index d56c78d3..f59e37a6 100644
--- a/src/app/webapp-common/models/dumbs/model-general-info/model-general-info.component.html
+++ b/src/app/webapp-common/models/dumbs/model-general-info/model-general-info.component.html
@@ -17,9 +17,11 @@
   <sm-inline-edit
     [fieldValue]="model?.comment"
     [originalText]="model?.comment"
-    [editable]="true"
+    [editable]="model?.company?.id"
     [multiline]="true"
     (textChanged)="commentValueChanged($event)"
+    (inlineActiveStateChanged)="editExperimentComment($event)"
+    (cancel)="cancelEdit()"
     >
     <span class="general-description">{{model?.comment | NA}}</span></sm-inline-edit>
 </sm-labeled-row>
diff --git a/src/app/webapp-common/models/dumbs/model-general-info/model-general-info.component.ts b/src/app/webapp-common/models/dumbs/model-general-info/model-general-info.component.ts
index 99ff3c18..99a18592 100644
--- a/src/app/webapp-common/models/dumbs/model-general-info/model-general-info.component.ts
+++ b/src/app/webapp-common/models/dumbs/model-general-info/model-general-info.component.ts
@@ -5,15 +5,17 @@ import {NA} from '../../../../app.constants';
 import {TAGS} from '../../../tasks/tasks.constants';
 import {DatePipe} from '@angular/common';
 import {TIME_FORMAT_STRING} from '../../../constants';
+import {Store} from '@ngrx/store';
+import {ActivateModelEdit, CancelModelEdit} from '../../actions/models-info.actions';
 
 @Component({
-  selector       : 'sm-model-general-info',
-  templateUrl    : './model-general-info.component.html',
-  styleUrls      : ['./model-general-info.component.scss'],
+  selector: 'sm-model-general-info',
+  templateUrl: './model-general-info.component.html',
+  styleUrls: ['./model-general-info.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ModelGeneralInfoComponent {
-  constructor(private datePipe: DatePipe) {
+  constructor(private datePipe: DatePipe, private store: Store<any>) {
   }
 
   public kpis;
@@ -33,8 +35,8 @@ export class ModelGeneralInfoComponent {
         {label: 'USER', value: getOr(NA, 'user.name', model)},
         {
           label: 'CREATING EXPERIMENT', value: getOr(false, 'task.name', model),
-          href : `/projects/${getOr('*', 'task.project.id', model)}/experiments/${getOr('', 'task.id', model)}`,
-          task : getOr(false, 'task.id', model)
+          href: `/projects/${getOr('*', 'task.project.id', model)}/experiments/${getOr('', 'task.id', model)}`,
+          task: getOr(false, 'task.id', model)
         },
         {label: 'ARCHIVED', value: model && model.system_tags && model.system_tags.includes(TAGS.HIDDEN) ? 'Yes' : 'No'},
         {label: 'PROJECT', value: getOr(NA, 'project.name', model)},
@@ -60,4 +62,12 @@ export class ModelGeneralInfoComponent {
   onShowModel() {
     this.showModel.emit(this.model);
   }
+
+  editExperimentComment(edit) {
+    edit && this.store.dispatch(new ActivateModelEdit('ModelComment'));
+  }
+
+  cancelEdit() {
+    this.store.dispatch(new CancelModelEdit());
+  }
 }
diff --git a/src/app/webapp-common/models/dumbs/model-info-header/model-info-header.component.html b/src/app/webapp-common/models/dumbs/model-info-header/model-info-header.component.html
index a28664b7..af088207 100644
--- a/src/app/webapp-common/models/dumbs/model-info-header/model-info-header.component.html
+++ b/src/app/webapp-common/models/dumbs/model-info-header/model-info-header.component.html
@@ -5,11 +5,12 @@
   <div class="middle-col">
     <div class="d-flex p2">
         <sm-inline-edit
-          class="edit-name"
+          class="edit-name pr-3"
           [originalText]="model?.name"
           [editable]="editable"
           [minWidth]="250"
           (textChanged)="onNameChanged($event)"
+          (inlineActiveStateChanged)="editExperimentName($event)"
         >
           <span class="model-name">{{model?.name}}</span>
         </sm-inline-edit>
@@ -18,13 +19,22 @@
       </div>
     <div class="d-flex align-items-center">
       <sm-tag-list
+        *smCheckPermission="editable; else readOnlyTags"
         class="w-100"
-        [class.menu-open]="tagMenu.trigger.menuOpen"
+        [class.menu-open]="tagMenu?.trigger.menuOpen"
         [sysTags]="sysTags"
         [tags]="model?.tags"
         (add)="openTagMenu($event)"
         (remove)="removeTag($event)"></sm-tag-list>
+      <ng-template #readOnlyTags>
+        <sm-tag-list
+          class="w-100"
+          [class.menu-open]="tagMenu?.trigger.menuOpen"
+          [sysTags]="sysTags"
+          [tags]="model?.tags"></sm-tag-list>
+      </ng-template>
       <sm-menu
+        *smCheckPermission="true"
         #tagMenu
         [showCart]="false"
         [showButton]="false"
@@ -41,7 +51,7 @@
       </sm-menu>
     </div>
   </div>
-  <div class="p-2 light-theme">
+  <div *smCheckPermission="true" class="p-2 light-theme">
     <sm-model-menu
       [model]="model"
       [selectedModel]="model"
diff --git a/src/app/webapp-common/models/dumbs/model-info-header/model-info-header.component.scss b/src/app/webapp-common/models/dumbs/model-info-header/model-info-header.component.scss
index d7397cb5..087f6d1d 100644
--- a/src/app/webapp-common/models/dumbs/model-info-header/model-info-header.component.scss
+++ b/src/app/webapp-common/models/dumbs/model-info-header/model-info-header.component.scss
@@ -32,6 +32,7 @@
   }
   .edit-name {
     margin-top:5px;
+    max-width: 100%;
   }
   .menu-button, .menu-button &:hover, .menu-button &:focus {
     cursor: pointer;
diff --git a/src/app/webapp-common/models/dumbs/model-info-header/model-info-header.component.ts b/src/app/webapp-common/models/dumbs/model-info-header/model-info-header.component.ts
index 552485b0..eed0d60b 100644
--- a/src/app/webapp-common/models/dumbs/model-info-header/model-info-header.component.ts
+++ b/src/app/webapp-common/models/dumbs/model-info-header/model-info-header.component.ts
@@ -9,6 +9,7 @@ import { removeTag, addTag } from '../../actions/models-menu.actions';
 import {ISelectedModel, ITableModel} from '../../shared/models.model';
 import {MenuComponent} from '../../../shared/ui-components/panel/menu/menu.component';
 import {getSysTags} from '../../model.utils';
+import {ActivateModelEdit, CancelModelEdit} from '../../actions/models-info.actions';
 
 @Component({
   selector   : 'sm-model-info-header',
@@ -28,17 +29,17 @@ export class ModelInfoHeaderComponent {
   @ViewChild('tagMenu') tagMenu: MenuComponent;
   @ViewChild('tagsMenuContent') tagMenuContent: TagsMenuComponent;
 
-  constructor(private store: Store) {
+  constructor(private store: Store<any>) {
     this.tags$ = this.store.select(selectProjectTags);
   }
 
-  private _model: Model;
+  private _model: Model | ITableModel | ISelectedModel;
 
   get model() {
     return this._model;
   }
 
-  @Input() set model(model: Model) {
+  @Input() set model(model: Model | ITableModel | ISelectedModel) {
     this._model = model;
     this.viewId = false;
     this.sysTags = getSysTags(model as ITableModel);
@@ -49,6 +50,9 @@ export class ModelInfoHeaderComponent {
   }
 
   openTagMenu(event: MouseEvent) {
+    if (!this.tagMenu) {
+      return;
+    }
     this.store.dispatch(getTags());
     this.tagMenu.position = {x: event.clientX, y: event.clientY};
     window.setTimeout(() => {
@@ -68,4 +72,12 @@ export class ModelInfoHeaderComponent {
   tagsMenuClosed() {
     this.tagMenuContent.clear();
   }
+
+  editExperimentName(edit: boolean) {
+    if (edit) {
+      this.store.dispatch(new ActivateModelEdit('ModelName'));
+    } else {
+      this.store.dispatch(new CancelModelEdit());
+    }
+  }
 }
diff --git a/src/app/webapp-common/models/dumbs/model-info-labels-view/model-info-labels-view.component.html b/src/app/webapp-common/models/dumbs/model-info-labels-view/model-info-labels-view.component.html
index e20bf88b..cbeec848 100644
--- a/src/app/webapp-common/models/dumbs/model-info-labels-view/model-info-labels-view.component.html
+++ b/src/app/webapp-common/models/dumbs/model-info-labels-view/model-info-labels-view.component.html
@@ -1,5 +1,5 @@
 <sm-editable-section
-  [editable]=" ! model?.ready"
+  [editable]=" ! model?.ready && model.company?.id"
   [saving]="saving"
   (activateEditClicked)="activateEdit()"
   (saveClicked)="saveClicked()"
@@ -43,13 +43,13 @@
             </div>
 
             <div class="input-container col-2 remove-step">
-              <i (click)="removeRow(i)" class="icon i-trash sm-md pointer flashing-icon mb-2"></i>
+              <i (click)="removeRow(i)" class="al-icon al-ico-trash al-color blue-300 sm-md pointer flashing-icon mb-2"></i>
             </div>
           </div>
         </div>
       </div>
     </form>
-    <button *ngIf="editable" class="btn btn-primary" (click)="addRow()"><i class="icon sm i-plus-blue"></i>
+    <button *ngIf="editable" class="btn btn-primary" (click)="addRow()"><i class="al-icon al-color blue-400 msm al-ico-plus"></i>
     </button>
     <div *ngIf="!editable">
 
diff --git a/src/app/webapp-common/models/dumbs/model-info-labels-view/model-info-labels-view.component.scss b/src/app/webapp-common/models/dumbs/model-info-labels-view/model-info-labels-view.component.scss
index b7d14186..80fe6cce 100644
--- a/src/app/webapp-common/models/dumbs/model-info-labels-view/model-info-labels-view.component.scss
+++ b/src/app/webapp-common/models/dumbs/model-info-labels-view/model-info-labels-view.component.scss
@@ -1,5 +1,5 @@
 :host {
-  .i-trash {
+  .al-ico-trash {
     padding-top: 60px;
   }
 }
diff --git a/src/app/webapp-common/models/dumbs/model-info-labels-view/model-info-labels-view.component.ts b/src/app/webapp-common/models/dumbs/model-info-labels-view/model-info-labels-view.component.ts
index cc438160..aec84437 100644
--- a/src/app/webapp-common/models/dumbs/model-info-labels-view/model-info-labels-view.component.ts
+++ b/src/app/webapp-common/models/dumbs/model-info-labels-view/model-info-labels-view.component.ts
@@ -3,35 +3,41 @@ import {Model} from '../../../../business-logic/model/models/model';
 import {NgForm} from '@angular/forms';
 import {debounceTime} from 'rxjs/operators';
 import {Subscription} from 'rxjs';
+import {ISelectedModel} from '../../shared/models.model';
 
 @Component({
-  selector   : 'sm-model-info-labels-view',
+  selector: 'sm-model-info-labels-view',
   templateUrl: './model-info-labels-view.component.html',
-  styleUrls  : ['./model-info-labels-view.component.scss']
+  styleUrls: ['./model-info-labels-view.component.scss']
 })
 export class ModelInfoLabelsViewComponent implements OnInit, OnDestroy {
   public formData: Array<{ label: string; id: number }> = [];
   public editable: boolean = false;
-
   public cols = [{header: 'Label', class: 'col-10'},
     {header: 'Id', class: 'col-4'}];
+
   private unsavedValue: any;
-  @ViewChild('labels', {static: true}) labels: NgForm;
   private formChangesSubscription: Subscription;
-  private _model: Model;
-  @Input() set model(model: Model) {
+  private _model: ISelectedModel;
+
+  @ViewChild('labels', {static: true}) labels: NgForm;
+
+  @Input() set model(model: ISelectedModel) {
     if (model) {
       this.formData = this.revertParameters(model.labels);
     }
     this._model = model;
   }
+
   get model() {
     return this._model;
   }
+
   @Input() saving = false;
   @Output() saveFormData = new EventEmitter();
   @Output() cancelClicked = new EventEmitter();
   @Output() activateEditClicked = new EventEmitter();
+
   constructor() {
   }
 
@@ -54,10 +60,11 @@ export class ModelInfoLabelsViewComponent implements OnInit, OnDestroy {
 
   addRow() {
     this.formData.push({
-      id   : this.formData.length + 1,
+      id: this.formData.length + 1,
       label: null,
     });
   }
+
   removeRow(index) {
     this.formData.splice(index, 1);
   }
@@ -71,14 +78,16 @@ export class ModelInfoLabelsViewComponent implements OnInit, OnDestroy {
     this.editable = false;
     this.cancelClicked.emit();
   }
+
   // TODO: move to utils.
   revertParameters(labels: Model['labels']): Array<{ id: number, label: string }> {
     return labels ? Object.entries(labels).map(([key, val]) => ({id: val, label: key})).sort((labelA, labelB) => labelA.id - labelB.id) : [];
   }
-  convertParameters(labels: Array<{ id: number, label: string }> ): Model['labels']{
+
+  convertParameters(labels: Array<{ id: number, label: string }>): Model['labels'] {
     const obj = {};
     labels.forEach(l => {
-      obj[l.label] = l.id
+      obj[l.label] = l.id;
     });
     return obj;
   }
diff --git a/src/app/webapp-common/models/dumbs/model-view-network/model-view-network.component.html b/src/app/webapp-common/models/dumbs/model-view-network/model-view-network.component.html
index 2f415df3..e5d19107 100644
--- a/src/app/webapp-common/models/dumbs/model-view-network/model-view-network.component.html
+++ b/src/app/webapp-common/models/dumbs/model-view-network/model-view-network.component.html
@@ -1,7 +1,8 @@
 <sm-editable-section
   #prototext
-  [editable]="!model?.ready"
+  [editable]="!model?.ready && model?.company?.id"
   [saving]="saving"
+  [disableInEditMode]="true"
   (activateEditClicked)="activateEdit(); editPrototext()"
   (saveClicked)="saveClicked()"
   (cancelClicked)="cancelEdit()"
@@ -18,4 +19,11 @@
       >
     </sm-textarea-control>
   </div>
+  <button extra-buttons
+          *ngIf="design"
+          class="btn-dark-fill mr-3 flex-1"
+          (click)="clearPrototext()">
+    <i class="p-1 fa fa-trash"></i>
+    CLEAR
+  </button>
 </sm-editable-section>
diff --git a/src/app/webapp-common/models/dumbs/model-view-network/model-view-network.component.scss b/src/app/webapp-common/models/dumbs/model-view-network/model-view-network.component.scss
index 69292979..1a38d482 100644
--- a/src/app/webapp-common/models/dumbs/model-view-network/model-view-network.component.scss
+++ b/src/app/webapp-common/models/dumbs/model-view-network/model-view-network.component.scss
@@ -1,9 +1,6 @@
 @import "../../../layout/layout.scss";
 
 :host {
-  display: block;
-  height: calc(100% - #{$experiment-info-header-height + 5});
-
   .dark {
     background-color: #2c3246;
     color: #ffffff;
diff --git a/src/app/webapp-common/models/dumbs/model-view-network/model-view-network.component.ts b/src/app/webapp-common/models/dumbs/model-view-network/model-view-network.component.ts
index eb72fc6f..ccee74d7 100644
--- a/src/app/webapp-common/models/dumbs/model-view-network/model-view-network.component.ts
+++ b/src/app/webapp-common/models/dumbs/model-view-network/model-view-network.component.ts
@@ -3,7 +3,9 @@ import {getModelDesign} from '../../../tasks/tasks.utils';
 import {TextareaControlComponent} from '../../../shared/ui-components/forms/textarea-control/textarea-control.component';
 import {EditJsonComponent} from '../../../shared/ui-components/overlay/edit-json/edit-json.component';
 import {take} from 'rxjs/operators';
-import {MatDialog} from '@angular/material/dialog';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {ConfirmDialogComponent} from '../../../shared/ui-components/overlay/confirm-dialog/confirm-dialog.component';
+import {EditableSectionComponent} from '../../../shared/ui-components/panel/editable-section/editable-section.component';
 
 @Component({
   selector   : 'sm-model-view-network',
@@ -14,37 +16,34 @@ export class ModelViewNetworkComponent implements OnInit {
   private _model: any;
   @ViewChild('diff', {static: true}) diff: TextareaControlComponent;
   public design: string;
+  private designKey: string;
+
   @Input() set model(model) {
     this._model = model;
-
-    this.design = (model && model.design) ? getModelDesign(model.design) : '';
+    const design = getModelDesign(model?.design)
+    this.designKey = design.key;
+    this.design = design.value;
   }
+
   get model() {
     return this._model;
   }
-  @Input () saving: boolean;
-  @Output() openNetworkDesignClicked: EventEmitter<any> = new EventEmitter();
-  @Output() saveFormData                                = new EventEmitter();
-  @Output() cancelClicked                               = new EventEmitter();
-  @Output() activateEditClicked                         = new EventEmitter();
-  @ViewChild('prototext') prototextSection;
-  public inEditMode: boolean                            = false;
-  private unsavedValue: string;
 
+  @Input() saving: boolean;
+  @Output() openNetworkDesignClicked: EventEmitter<any> = new EventEmitter();
+  @Output() saveFormData = new EventEmitter();
+  @Output() cancelClicked = new EventEmitter();
+  @Output() activateEditClicked = new EventEmitter();
+  @ViewChild('prototext') prototextSection: EditableSectionComponent;
+  public inEditMode: boolean = false;
+  private unsavedValue: string;
 
   constructor(private dialog: MatDialog) {
   }
+
   ngOnInit() {
   }
 
-  public openNetworkDesign() {
-    this.openNetworkDesignClicked.emit(getModelDesign(this.model.design));
-  }
-
-  public getModelDesign(modelDesign) {
-    return getModelDesign(modelDesign);
-  }
-
   fieldValueChanged(value: any) {
     this.unsavedValue = value;
     this.design = value;
@@ -57,13 +56,14 @@ export class ModelViewNetworkComponent implements OnInit {
 
   saveClicked() {
     this.inEditMode = false;
-    this.saveFormData.emit({...this.model, design: this.unsavedValue});
+    this.saveFormData.emit({...this.model, design: this.designKey ? {[this.designKey]: this.unsavedValue} : this.unsavedValue});
   }
 
   cancelEdit() {
     this.inEditMode = false;
     this.cancelClicked.emit();
   }
+
   editPrototext() {
     const editPrototextDialog = this.dialog.open(EditJsonComponent, {
       data: {textData: this.design, readOnly: false, title: 'EDIT MODEL CONFIGURATION', typeJson: false}
@@ -73,7 +73,27 @@ export class ModelViewNetworkComponent implements OnInit {
       if (data === undefined) {
         this.prototextSection.cancelClickedEvent();
       } else {
-        this.fieldValueChanged( data);
+        this.fieldValueChanged(data);
+        this.saveClicked();
+      }
+    });
+  }
+
+  clearPrototext() {
+    const confirmDialogRef: MatDialogRef<any, boolean> = this.dialog.open(ConfirmDialogComponent, {
+      data: {
+        title    : 'Clear model configuration',
+        body     : 'Are you sure you want to clear the entire contents of Model Configuration?',
+        yes      : 'Clear',
+        no       : 'Keep',
+        iconClass: 'al-icon al-ico-trash al-color blue-300',
+      }
+    });
+
+    confirmDialogRef.afterClosed().pipe(take(1)).subscribe((confirmed) => {
+      if (confirmed) {
+        this.activateEdit();
+        this.fieldValueChanged('');
         this.saveClicked();
       }
     });
diff --git a/src/app/webapp-common/models/effects/models-info.effects.ts b/src/app/webapp-common/models/effects/models-info.effects.ts
index 80003dbb..7defd7a1 100644
--- a/src/app/webapp-common/models/effects/models-info.effects.ts
+++ b/src/app/webapp-common/models/effects/models-info.effects.ts
@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {Actions, Effect, ofType} from '@ngrx/effects';
 import {Store} from '@ngrx/store';
-import {catchError, debounceTime, filter, flatMap, map, shareReplay, switchMap, withLatestFrom} from 'rxjs/operators';
+import {catchError, debounceTime, filter, map, mergeMap, shareReplay, switchMap, withLatestFrom} from 'rxjs/operators';
 import {ApiModelsService} from '../../../business-logic/api-services/models.service';
 import {ModelsGetAllResponse} from '../../../business-logic/model/models/modelsGetAllResponse';
 import {RequestFailed} from '../../core/actions/http.actions';
@@ -11,6 +11,8 @@ import * as infoActions from '../actions/models-info.actions';
 import * as viewActions from '../actions/models-view.actions';
 import {IModelInfoState} from '../reducers/model-info.reducer';
 import {MODELS_INFO_ONLY_FIELDS} from '../shared/models.const';
+import {selectSelectedModel} from '../reducers';
+import {EmptyAction} from '../../../app.constants';
 
 @Injectable()
 export class ModelsInfoEffects {
@@ -27,13 +29,12 @@ export class ModelsInfoEffects {
   @Effect()
   getModelInfo$ = this.actions$.pipe(
     ofType<infoActions.GetModelInfo>(infoActions.GET_MODEL_INFO, infoActions.REFRESH_MODEL_INFO),
-    withLatestFrom(
-      this.store.select(selectAppVisible)),
+    withLatestFrom(this.store.select(selectAppVisible)),
     filter(([action, visible]) => visible),
     switchMap(([action])=>
       this.apiModels.modelsGetAllEx({id: [action.payload], only_fields: MODELS_INFO_ONLY_FIELDS})
         .pipe(
-          flatMap((res: ModelsGetAllResponse) => [
+          mergeMap((res: ModelsGetAllResponse) => [
             new infoActions.SetModel(res.models[0]),
             new DeactiveLoader(action.type)
           ]),
@@ -47,13 +48,13 @@ export class ModelsInfoEffects {
   );
   @Effect()
   editModel$ = this.actions$.pipe(
-      ofType<infoActions.EditModel>(infoActions.EDIT_MODEL),
+    ofType<infoActions.EditModel>(infoActions.EDIT_MODEL),
     debounceTime(1000),
-    switchMap((action) =>{
-      const parent =  action.payload.parent ? (action.payload.parent as any).id : undefined;
-      return this.apiModels.modelsEdit({model: action.payload.id, ...action.payload, project: action.payload.project.id, task: action.payload.task.id, parent: parent})
+    switchMap((action) => {
+      const parent = action.payload.parent ? (action.payload.parent as any).id : undefined;
+      return this.apiModels.modelsEdit({model: action.payload.id, ...action.payload, project: action.payload.project.id, task: action.payload.task?.id, parent: parent})
         .pipe(
-          flatMap((res) => [
+          mergeMap(() => [
             new infoActions.GetModelInfo(action.payload.id),
             new infoActions.SetIsModelSaving(false),
             new SetBackdrop(false)
@@ -64,22 +65,23 @@ export class ModelsInfoEffects {
             new SetBackdrop(false),
             new infoActions.GetModelInfo(action.payload.id)
           ])
-        )}
-    ),
+        );
+    }),
     shareReplay(1)
   );
 
   @Effect()
   updateModelDetails$ = this.actions$.pipe(
     ofType(infoActions.updateModelDetails),
-    flatMap((action) =>
+    withLatestFrom(this.store.select(selectSelectedModel)),
+    mergeMap(([action, selectedModel]) =>
       this.apiModels.modelsUpdate({model: action.id, ...action.changes})
         .pipe(
-          flatMap((res) => {
+          mergeMap((res) => {
             const changes = res?.fields || action.changes;
             return [
               new viewActions.UpdateModel({id: action.id, changes}),
-              new infoActions.ModelDetailsUpdated({id: action.id, changes})
+              selectedModel?.id === action.id ? new infoActions.ModelDetailsUpdated({id: action.id, changes}): new EmptyAction()
             ];
           }),
           catchError(err => [
diff --git a/src/app/webapp-common/models/effects/models-menu.effects.ts b/src/app/webapp-common/models/effects/models-menu.effects.ts
index a9aef2c2..a2c893c3 100644
--- a/src/app/webapp-common/models/effects/models-menu.effects.ts
+++ b/src/app/webapp-common/models/effects/models-menu.effects.ts
@@ -3,11 +3,11 @@ import {Actions, Effect, ofType} from '@ngrx/effects';
 import {Store} from '@ngrx/store';
 import {IModelInfoState} from '../reducers/model-info.reducer';
 import {ApiModelsService} from '../../../business-logic/api-services/models.service';
-import {catchError, flatMap, map, switchMap, tap} from 'rxjs/operators';
+import {catchError, flatMap, map, switchMap, tap, withLatestFrom} from 'rxjs/operators';
 import * as infoActions from '../actions/models-info.actions';
 import * as viewActions from '../actions/models-view.actions';
 import * as menuActions from '../actions/models-menu.actions';
-import {ActiveLoader, DeactiveLoader, SetServerError} from '../../core/actions/layout.actions';
+import {ActiveLoader, AddMessage, DeactiveLoader, SetServerError} from '../../core/actions/layout.actions';
 import {RequestFailed} from '../../core/actions/http.actions';
 import {ApiAuthService} from '../../../business-logic/api-services/auth.service';
 import {BlModelsService} from '../../../business-logic/services/models.service';
@@ -15,9 +15,10 @@ import {get} from 'lodash/fp';
 import {Router} from '@angular/router';
 import {ApiTasksService} from '../../../business-logic/api-services/tasks.service';
 import {of} from 'rxjs';
-import {setArchive} from '../../core/actions/projects.actions';
 import {addTag, removeTag} from '../actions/models-menu.actions';
-import {ModelDetailsUpdated, updateModelDetails} from '../actions/models-info.actions';
+import {updateModelDetails} from '../actions/models-info.actions';
+import {selectSelectedModel, selectSelectedModels, selectSelectedTableModel} from '../reducers';
+import {ISelectedModel} from '../shared/models.model';
 
 @Injectable()
 export class ModelsMenuEffects {
@@ -32,70 +33,16 @@ export class ModelsMenuEffects {
       menuActions.RESTORE_CLICKED, menuActions.CHANGE_PROJECT_REQUESTED),
     map(action => new ActiveLoader(action.type)));
 
-  @Effect()
-  archiveModel$ = this.actions$.pipe(
-    ofType<menuActions.ArchiveClicked>(menuActions.ARCHIVE_CLICKED),
-    // (nir) not working anyway
-    // tap((action) => {
-    //   if (action.payload.selectedModel && action.payload.selectedModel.id === action.payload.model.id) {
-    //     this.router.navigate([`projects/${action.payload.projectId}/models/`]);
-    //   }
-    // }),
-    map(action => [action, this.modelBl.addHiddenTag(action.payload.model.system_tags)]),
-    switchMap(([action, system_tags]: [menuActions.ArchiveClicked, Array<string>]) =>
-      this.apiModels.modelsUpdate({model: action.payload.model.id, system_tags: system_tags})
-        .pipe(
-          flatMap(() => [
-            new infoActions.SetModel({...action.payload.model, system_tags: system_tags}),
-            new viewActions.UpdateModel({id: action.payload.model.id, changes: {system_tags}}),
-            new DeactiveLoader(action.type)
-          ]),
-          catchError(error => [
-            new RequestFailed(error),
-            new DeactiveLoader(action.type),
-            new SetServerError(error, null, 'Update Model failed')
-          ])
-        )
-    )
-  );
-
-  @Effect()
-  restoreModel$ = this.actions$.pipe(
-    ofType<menuActions.RestoreClicked>(menuActions.RESTORE_CLICKED),
-    // tap((action) => {
-    //   let path = `projects/${action.payload.projectId}/models/`;
-    //   if (action.payload.selectedModel && action.payload.selectedModel.id !== action.payload.model.id) {
-    //     path += action.payload.model.id;
-    //   }
-    //   this.store.dispatch(setArchive({archive: true}));
-    //   this.router.navigate([path]);
-    // }),
-    map(action => [action, this.modelBl.removeHiddenTag(action.payload.model.system_tags)]),
-    switchMap(([action, system_tags]: [menuActions.RestoreClicked, Array<string>]) =>
-      this.apiModels.modelsUpdate({model: action.payload.model.id, system_tags: system_tags})
-        .pipe(
-          flatMap(() => [
-            new infoActions.SetModel({...action.payload.model, system_tags: system_tags}),
-            new viewActions.UpdateModel({id: action.payload.model.id, changes: {system_tags}}),
-            new DeactiveLoader(action.type)
-          ]),
-          catchError(error => [
-            new RequestFailed(error),
-            new DeactiveLoader(action.type),
-            new SetServerError(error, null, 'Update Model failed')
-          ])
-        )
-    )
-  );
 
   @Effect()
   publishModel$ = this.actions$.pipe(
     ofType<menuActions.PublishModelClicked>(menuActions.PUBLISH_MODEL_CLICKED),
-    switchMap((action: menuActions.PublishModelClicked) =>
+    withLatestFrom(this.store.select(selectSelectedModel)),
+    switchMap(([action, selectedModel]) =>
       this.apiModels.modelsSetReady({model: action.payload.id})
         .pipe(
           flatMap(() => [
-            new infoActions.SetModel({...action.payload, ready: true}),
+            new infoActions.SetModel({...selectedModel, ready: true}),
             new viewActions.UpdateModel({id: action.payload.id, changes: {ready: true}}),
             new DeactiveLoader(action.type)
           ]),
@@ -147,12 +94,17 @@ export class ModelsMenuEffects {
   @Effect()
   addTag$ = this.actions$.pipe(
     ofType(addTag),
-    switchMap((action) =>
-      action.models.map(model =>
-        updateModelDetails({
-          id: model.id,
-          changes: {tags: (model.tags || []).concat([action.tag])}
-        }))
+    withLatestFrom(this.store.select(selectSelectedModels), this.store.select(selectSelectedTableModel)),
+    switchMap(([action, selectedModels, selectedModelInfo]) => {
+        const modelsFromState = selectedModelInfo ? selectedModels.concat(selectedModelInfo) as ISelectedModel[] : selectedModels;
+        return action.models.map(model => {
+          const modelFromState = modelsFromState.find(mod => mod.id === model.id);
+          return updateModelDetails({
+            id: model.id,
+            changes: {tags: Array.from(new Set((modelFromState?.tags || model.tags || []).concat([action.tag]))).sort() as string[]}
+          });
+        });
+      }
     )
   );
 
@@ -170,6 +122,20 @@ export class ModelsMenuEffects {
           return false;
         }
       }).filter(update => update !== false)
+        .concat(new AddMessage('success', `“${action.tag}” tag has been removed from “${action.models[0]?.name}” model`, [
+            {
+              name: 'Undo',
+              actions: [
+                new AddMessage('success', `“${action.tag}” tag has been restored`),
+                ...action.models.map(experiment => addTag({
+                    models: action.models,
+                    tag: action.tag
+                  })
+                )
+              ]
+            }
+          ]
+        ) as any)
     )
   );
 }
diff --git a/src/app/webapp-common/models/effects/models-view.effects.ts b/src/app/webapp-common/models/effects/models-view.effects.ts
index a4422adb..477f5fc3 100644
--- a/src/app/webapp-common/models/effects/models-view.effects.ts
+++ b/src/app/webapp-common/models/effects/models-view.effects.ts
@@ -1,26 +1,24 @@
 import {Injectable} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Actions, Effect, ofType} from '@ngrx/effects';
-import {Action} from '@ngrx/store';
-import {Store} from '@ngrx/store';
-import {get, isEqual} from 'lodash/fp';
+import {Action, Store} from '@ngrx/store';
+import {get, isEqual, uniq} from 'lodash/fp';
 import {forkJoin, of} from 'rxjs';
 import {auditTime, catchError, filter, flatMap, map, switchMap, tap, withLatestFrom} from 'rxjs/operators';
 import {ApiModelsService} from '../../../business-logic/api-services/models.service';
-import {ModelsUpdateRequest} from '../../../business-logic/model/models/modelsUpdateRequest';
 import {BlModelsService} from '../../../business-logic/services/models.service';
 import {RequestFailed} from '../../core/actions/http.actions';
-import {ActiveLoader, DeactiveLoader, SetServerError} from '../../core/actions/layout.actions';
+import {ActiveLoader, AddMessage, DeactiveLoader, SetServerError} from '../../core/actions/layout.actions';
 import {setArchive as setProjectArchive} from '../../core/actions/projects.actions';
 import {setURLParams} from '../../core/actions/router.actions';
-import {selectIsArchivedMode, selectProjectSystemTags} from '../../core/reducers/projects.reducer';
-import {selectRouterParams} from '../../core/reducers/router-reducer';
+import {selectIsArchivedMode} from '../../core/reducers/projects.reducer';
+import {selectRouterConfig, selectRouterParams} from '../../core/reducers/router-reducer';
 import {selectAppVisible} from '../../core/reducers/view-reducer';
 import {escapeRegex, getRouteFullUrl} from '../../shared/utils/shared-utils';
 import {GetModelInfo, RefreshModelInfo} from '../actions/models-info.actions';
 import * as actions from '../actions/models-view.actions';
 import {MODELS_PAGE_SIZE, MODELS_TABLE_COLS} from '../models.consts';
-import * as exSelectors from '../reducers';
+import * as modelsSelectors from '../reducers';
 import {IModelsViewState} from '../reducers/models-view.reducer';
 import {MODEL_TAGS, MODELS_ONLY_FIELDS, MODELS_TABLE_COL_FIELDS} from '../shared/models.const';
 import {ITableModel} from '../shared/models.model';
@@ -28,12 +26,15 @@ import {ApiUsersService} from '../../../business-logic/api-services/users.servic
 import {EXPERIMENTS_TABLE_COL_FIELDS} from '../../../features/experiments/shared/experiments.const';
 import {ModelsGetAllExRequest} from '../../../business-logic/model/models/modelsGetAllExRequest';
 import {encodeColumns} from '../../shared/utils/tableParamEncode';
+import {EmptyAction} from '../../../app.constants';
+import {ApiProjectsService} from '../../../business-logic/api-services/projects.service';
+import {ModelsUpdateResponse} from '../../../business-logic/model/models/modelsUpdateResponse';
 
 @Injectable()
 export class ModelsViewEffects {
 
   constructor(private actions$: Actions, private store: Store<IModelsViewState>,
-              private apiModels: ApiModelsService, private modelBl: BlModelsService, private usersApi: ApiUsersService,
+              private apiModels: ApiModelsService, private projectsApi: ApiProjectsService, private modelBl: BlModelsService, private usersApi: ApiUsersService,
               private router: Router, private route: ActivatedRoute
   ) {
   }
@@ -64,17 +65,61 @@ export class ModelsViewEffects {
       )
     )
   );
+  @Effect()
+  getFrameworksEffect = this.actions$.pipe(
+    ofType(actions.getFrameworks),
+    withLatestFrom(
+      this.store.select(selectRouterParams).pipe(map(params => get('projectId', params))),
+    ),
+    switchMap(([action, projectId]) => this.apiModels.modelsGetFrameworks({projects: projectId !== '*' ? [projectId] : []})
+      .pipe(
+        flatMap(res => [
+          actions.setFrameworks({frameworks: res.frameworks.concat(null)}),
+        ]),
+        catchError(error => [
+          new RequestFailed(error),
+          new SetServerError(error, null, 'Fetch frameworks failed')]
+        )
+      )
+    )
+  );
+
+
+  @Effect()
+  getFilteredUsersEffect = this.actions$.pipe(
+    ofType(actions.getFilteredUsers),
+    withLatestFrom(this.store.select(modelsSelectors.selectModelsUsers), this.store.select(modelsSelectors.selectTableFilters)),
+    switchMap(([action, users, filters]) => this.usersApi.usersGetAllEx({
+      order_by: ['name'],
+      only_fields: ['name'],
+      id: get(['user.name', 'value'], filters) || []
+    }).pipe(
+      flatMap(res => [
+        actions.setUsers({users: uniq(res.users.concat(users))}),
+      ]),
+      catchError(error => [
+        new RequestFailed(error),
+        new SetServerError(error, null, 'Fetch users failed')]
+      )
+    ))
+  );
+
   @Effect()
   getUsersEffect = this.actions$.pipe(
     ofType(actions.getUsers),
     withLatestFrom(
       this.store.select(selectRouterParams).pipe(map(params => get('projectId', params))),
+      this.store.select(modelsSelectors.selectTableFilters)
     ),
-    switchMap(([action, projectId]) => this.usersApi.usersGetAllEx({order_by: ['name'], only_fields: ['name'], active_in_projects: projectId !== '*' ? [projectId] : []})
+    switchMap(([action, projectId, filters]) => this.usersApi.usersGetAllEx({order_by: ['name'], only_fields: ['name'], active_in_projects: projectId !== '*' ? [projectId] : []})
       .pipe(
         flatMap(res => {
+          const userFiltersValue = get([MODELS_TABLE_COL_FIELDS.USER, 'value'], filters) || [];
+          const resIds = res.users.map(user => user.id);
+          const shouldGetFilteredUsersNames = !(userFiltersValue.every(id => resIds.includes(id)));
           return [
             actions.setUsers(res),
+            shouldGetFilteredUsersNames ? actions.getFilteredUsers() : new EmptyAction(),
             new DeactiveLoader(action.type)
           ];
         }),
@@ -87,14 +132,33 @@ export class ModelsViewEffects {
     )
   );
 
+  @Effect()
+  getTagsEffect = this.actions$.pipe(
+    ofType(actions.getTags),
+    withLatestFrom(this.store.select(selectRouterParams).pipe(map(params => get('projectId', params)))),
+    switchMap(([action, projectId]) => this.projectsApi.projectsGetModelTags({
+      projects: projectId === '*' ? [] : [projectId]
+    }).pipe(
+      flatMap(res => [
+        actions.setTags({tags: res.tags.concat(null)}),
+        new DeactiveLoader(action.type)
+      ]),
+      catchError(error => [
+        new RequestFailed(error),
+        new DeactiveLoader(action.type),
+        new SetServerError(error, null, 'Fetch tags failed')]
+      )
+    ))
+  );
+
 
   @Effect()
   refreshModels = this.actions$.pipe(
     ofType<actions.RefreshModels>(actions.REFRESH_MODELS),
     withLatestFrom(
-      this.store.select(exSelectors.selectCurrentPage),
-      this.store.select(exSelectors.selectSelectedModel),
-      this.store.select(exSelectors.selectModelsList),
+      this.store.select(modelsSelectors.selectCurrentPage),
+      this.store.select(modelsSelectors.selectSelectedModel),
+      this.store.select(modelsSelectors.selectModelsList),
       this.store.select(selectAppVisible)),
     filter((values) => values[4]),
     switchMap(([action, page, selectedModel, models]) => this.fetchModels$(page, true)
@@ -126,7 +190,7 @@ export class ModelsViewEffects {
   @Effect()
   getModels = this.actions$.pipe(
     ofType<actions.GetNextModels>(actions.GET_NEXT_MODELS),
-    withLatestFrom(this.store.select(exSelectors.selectCurrentPage)),
+    withLatestFrom(this.store.select(modelsSelectors.selectCurrentPage)),
     switchMap(([action, page]) =>
       this.fetchModels$(page + 1)
         .pipe(
@@ -159,19 +223,20 @@ export class ModelsViewEffects {
   updateModelsUrlParams = this.actions$.pipe(
     ofType(actions.setColsOrderForProject, actions.toggleColHidden),
     withLatestFrom(
-      this.store.select(exSelectors.selectTableFilters),
-      this.store.select(exSelectors.selectTableSortField),
-      this.store.select(exSelectors.selectTableSortOrder),
+      this.store.select(modelsSelectors.selectTableFilters),
+      this.store.select(modelsSelectors.selectTableSortField),
+      this.store.select(modelsSelectors.selectTableSortOrder),
       this.store.select(selectIsArchivedMode),
-      this.store.select(exSelectors.selectModelsTableColsOrder),
-      this.store.select(exSelectors.selectModelsHiddenTableCols)
+      this.store.select(modelsSelectors.selectModelsTableColsOrder),
+      this.store.select(modelsSelectors.selectModelsHiddenTableCols)
     ),
     flatMap(([action, filters, sortField, sortOrder, isArchived, colsOrder, hiddenCols]) =>
-      [setURLParams({filters: filters as any,
+      [setURLParams({
+        filters: filters as any,
         orderField: sortField,
         orderDirection: sortOrder > 0 ? 'asc' : 'desc',
         isArchived,
-        columns: encodeColumns(MODELS_TABLE_COLS, hiddenCols,[],colsOrder)
+        columns: encodeColumns(MODELS_TABLE_COLS, hiddenCols, [], colsOrder)
       })]
     )
   );
@@ -186,25 +251,43 @@ export class ModelsViewEffects {
   @Effect()
   archiveModels = this.actions$.pipe(
     ofType<actions.ArchivedSelectedModels>(actions.ARCHIVE_SELECTED_MODELS),
-    withLatestFrom(this.store.select(exSelectors.selectSelectedModels), this.store.select(exSelectors.selectSelectedTableModel)),
-    tap(([action, checkedModels, selectedModel]) => {
+    withLatestFrom(
+      this.store.select(modelsSelectors.selectSelectedModels),
+      this.store.select(modelsSelectors.selectSelectedTableModel),
+      this.store.select(selectRouterParams)
+    ),
+    tap(([action, checkedModels, selectedModel, routerParams]) => {
       if (this.isSelectedModelInCheckedModels(checkedModels, selectedModel)) {
-        this.router.navigate([`projects/${action.payload.projectId}/models/`]);
+        this.router.navigate([`projects/${routerParams.projectId}/models/`]);
       }
     }),
-    map(([action, models]) => models.map(model => ({
-      model      : model.id,
-      system_tags: this.modelBl.addHiddenTag(model.system_tags)
-    }))),
-    switchMap((modelsUpdateReq: Array<ModelsUpdateRequest>) =>
-      forkJoin(modelsUpdateReq.map(req => this.apiModels.modelsUpdate(req)))
+    switchMap(([action, models]) => forkJoin(models.map(model => ({
+        model: model.id,
+        system_tags: this.modelBl.addHiddenTag(model.system_tags)
+      })).map(req => this.apiModels.modelsUpdate(req)) as ModelsUpdateResponse[])
         .pipe(
-          flatMap(() => [
-            new DeactiveLoader('Fetch Models'),
-            new actions.RemoveModels(modelsUpdateReq.map(exp => exp.model)),
-            new actions.SetSelectedModels([]),
-            new actions.FetchModelsRequested()
-          ]),
+          withLatestFrom(this.store.select(selectRouterConfig)),
+          flatMap(([res, routerConfig]) => {
+            let dispatchActions: Action[] = [
+              new DeactiveLoader('Fetch Models'),
+              new actions.SetSelectedModels([]),
+              new AddMessage('success', `${models.length} model${models.length > 1 ? 's have' : ' has'} been archived`, action.payload.skipUndo ? [] : [
+                {
+                  name: 'Undo', actions: [
+                    new actions.SetSelectedModels(models),
+                    new actions.RestoreSelectedModels(true)
+                  ]
+                }
+              ])
+            ];
+            if (routerConfig.includes('models')) {
+              dispatchActions = dispatchActions.concat([
+                new actions.RemoveModels(models.map(exp => exp.model)),
+                new actions.FetchModelsRequested()
+              ]);
+            }
+            return dispatchActions;
+          }),
           catchError(error => [
             new RequestFailed(error),
             new DeactiveLoader('Fetch Models'),
@@ -217,26 +300,43 @@ export class ModelsViewEffects {
   @Effect()
   restoreModels = this.actions$.pipe(
     ofType<actions.RestoreSelectedModels>(actions.RESTORE_SELECTED_MODELS),
-    withLatestFrom(this.store.select(exSelectors.selectSelectedModels), this.store.select(exSelectors.selectSelectedTableModel)),
-    tap(([action, checkedModels, selectedModel]) => {
-      let path = `projects/${action.payload.projectId}/models/`;
-      path += this.isSelectedModelInCheckedModels(checkedModels, selectedModel) ? '' : selectedModel ? selectedModel.id : '';
-      this.store.dispatch(actions.setArchive({archive: true}));
-      this.router.navigate([path]);
+    withLatestFrom(
+      this.store.select(modelsSelectors.selectSelectedModels),
+      this.store.select(modelsSelectors.selectSelectedTableModel),
+      this.store.select(selectRouterParams)
+    ),
+    tap(([action, checkedModels, selectedModel, routerParams]) => {
+      if (this.isSelectedModelInCheckedModels(checkedModels, selectedModel)) {
+        this.router.navigate([`projects/${routerParams.projectId}/models/`]);
+      }
     }),
-    map(([action, models]) => models.map(model => ({
-      model      : model.id,
-      system_tags: this.modelBl.removeHiddenTag(model.system_tags)
-    }))),
-    switchMap((modelsUpdateReq: Array<ModelsUpdateRequest>) =>
-      forkJoin(modelsUpdateReq.map(req => this.apiModels.modelsUpdate(req)))
+    switchMap(([action, models]) => forkJoin(models.map(model => ({
+        model: model.id,
+        system_tags: this.modelBl.removeHiddenTag(model.system_tags)
+      })).map(req => this.apiModels.modelsUpdate(req)) as ModelsUpdateResponse[])
         .pipe(
-          flatMap(() => [
-            new DeactiveLoader('Fetch Models'),
-            new actions.RemoveModels(modelsUpdateReq.map(exp => exp.model)),
-            new actions.SetSelectedModels([]),
-            new actions.FetchModelsRequested()
-          ]),
+          withLatestFrom(this.store.select(selectRouterConfig)),
+          flatMap(([res, routerConfig]) => {
+            let dispachActions: Action[] = [
+              new DeactiveLoader('Fetch Models'),
+              new actions.SetSelectedModels([]),
+              new AddMessage('success', `${models.length} model${models.length > 1 ? 's have' : ' has'} been restored`, action.payload.skipUndo ? [] : [
+                {
+                  name: 'Undo', actions: [
+                    new actions.SetSelectedModels(models),
+                    new actions.ArchivedSelectedModels(true)
+                  ]
+                }
+              ])
+            ];
+            if (routerConfig.includes('models')) {
+              dispachActions = dispachActions.concat([
+                new actions.RemoveModels(models.map(exp => exp.model)),
+                new actions.FetchModelsRequested(),
+              ]);
+            }
+            return dispachActions;
+          }),
           catchError(error => [
             new RequestFailed(error),
             new DeactiveLoader('Fetch Models'),
@@ -259,21 +359,21 @@ export class ModelsViewEffects {
     const systemTagsFilter = (isArchivedMode ? [MODEL_TAGS.HIDDEN] : ['-' + MODEL_TAGS.HIDDEN])
       .concat(systemTags ? systemTags : []);
     return {
-      id         : ids,
-      _any_      : {
+      id: ids,
+      _any_: {
         pattern: searchQuery ? escapeRegex(searchQuery) : '',
-        fields : ['id', 'name', 'comment', 'system_tags']
+        fields: ['id', 'name', 'comment', 'system_tags']
       },
-      project    : (!projectId || projectId === '*') ? undefined : [projectId],
-      page       : page,
-      page_size  : pageSize,
-      order_by   : [(orderSort === 1 ? '-' : '') + orderField],
+      project: (!projectId || projectId === '*') ? undefined : [projectId],
+      page: page,
+      page_size: pageSize,
+      order_by: [(orderSort === 1 ? '-' : '') + orderField],
       system_tags: (systemTagsFilter && systemTagsFilter.length > 0) ? systemTagsFilter : [],
-      tags       : (tagsFilter && tagsFilter.length > 0) ? tagsFilter : [],
+      tags: (tagsFilter && tagsFilter.length > 0) ? tagsFilter : [],
       only_fields: MODELS_ONLY_FIELDS,
-      ready      : this.getReadyFilter(tableFilters),
-      framework  : get([MODELS_TABLE_COL_FIELDS.FRAMEWORK, 'value'], tableFilters) || [],
-      user       : (userFilter && userFilter.length > 0) ? userFilter : []
+      ready: this.getReadyFilter(tableFilters),
+      framework: get([MODELS_TABLE_COL_FIELDS.FRAMEWORK, 'value'], tableFilters) || [],
+      user: (userFilter && userFilter.length > 0) ? userFilter : []
     };
   }
 
@@ -284,20 +384,20 @@ export class ModelsViewEffects {
         withLatestFrom(
           this.store.select(selectRouterParams).pipe(map(params => get('projectId', params))),
           this.store.select(selectIsArchivedMode),
-          this.store.select(exSelectors.selectGlobalFilter),
-          this.store.select(exSelectors.selectTableSortField),
-          this.store.select(exSelectors.selectTableSortOrder),
-          this.store.select(exSelectors.selectTableFilters),
-          this.store.select(exSelectors.selectSelectedModels),
-          this.store.select(exSelectors.selectShowAllSelectedIsActive),
-          this.store.select(exSelectors.selectModelsTableColsOrder),
-          this.store.select(exSelectors.selectModelsHiddenTableCols)
+          this.store.select(modelsSelectors.selectGlobalFilter),
+          this.store.select(modelsSelectors.selectTableSortField),
+          this.store.select(modelsSelectors.selectTableSortOrder),
+          this.store.select(modelsSelectors.selectTableFilters),
+          this.store.select(modelsSelectors.selectSelectedModels),
+          this.store.select(modelsSelectors.selectShowAllSelectedIsActive),
+          this.store.select(modelsSelectors.selectModelsTableColsOrder),
+          this.store.select(modelsSelectors.selectModelsHiddenTableCols)
         ),
         switchMap(([pageNumber, projectId, isArchived, gb, sortField, sortOrder, filters, selectedModels, showAllSelectedIsActive, colsOrder, hiddenCols]) => {
           const selectedModelsIds = showAllSelectedIsActive ? selectedModels.map(exp => exp.id) : [];
           const pageToGet = getAllPages ? 0 : page;
           const pageSize = getAllPages ? (page + 1) * MODELS_PAGE_SIZE : MODELS_PAGE_SIZE;
-          const columns                = encodeColumns(MODELS_TABLE_COLS, hiddenCols,[],colsOrder);
+          const columns = encodeColumns(MODELS_TABLE_COLS, hiddenCols, [], colsOrder);
           this.setModelsUrlParams(filters, sortField, sortOrder, isArchived, columns);
           return this.apiModels.modelsGetAllEx(this.getGetAllQuery(pageToGet, pageSize, projectId, gb, isArchived, sortField, sortOrder, filters, selectedModelsIds));
         })
diff --git a/src/app/webapp-common/models/model.utils.ts b/src/app/webapp-common/models/model.utils.ts
index fc01025b..c82270ef 100644
--- a/src/app/webapp-common/models/model.utils.ts
+++ b/src/app/webapp-common/models/model.utils.ts
@@ -2,5 +2,5 @@ import {ITableModel} from './shared/models.model';
 import {isExample} from '../shared/utils/shared-utils';
 
 export function getSysTags(model: ITableModel) {
-  return (model?.system_tags.filter(tag => tag !== 'archived') || []).concat(isExample(model) ? 'example' : []);
+  return (model?.system_tags?.filter(tag => tag !== 'archived') || []).concat(isExample(model) ? 'example' : []);
 }
diff --git a/src/app/webapp-common/models/models.component.html b/src/app/webapp-common/models/models.component.html
index fd08d66f..a5cb1418 100644
--- a/src/app/webapp-common/models/models.component.html
+++ b/src/app/webapp-common/models/models.component.html
@@ -1,61 +1,61 @@
-<div class="h-100 row no-gutters">
-  <div class="w-100 model-header">
-    <sm-model-header
-      [isArchived]="isArchived$ | async"
-      [disableCreateNewButton]="isExampleProject"
-      [autoRefreshState]="autoRefreshState$ | async"
-      (isArchivedChanged)="archivedChanged($event)"
-      (setAutoRefresh)="setAutoRefresh($event)"
-      (refreshListClicked)="refreshList(false)"
-      (selectedTableColsChanged)="selectedTableColsChanged($event)"
-      [tableCols]="tableCols"
-    ></sm-model-header>
-  </div>
-  <div class="models-body">
-    <as-split>
-      <as-split-area size="30">
-        <sm-models-table
-          class="w-100 align-self-stretch"
-          selectionMode="single"
-          [models]="models$ | async"
-          [tableCols]="filteredTableCols"
-          [minimizedView]="(showInfo$ | async)"
-          [noMoreModels]="noMoreModels$ | async"
-          [users]="users$ |async"
-          [tags]="tags$ | async"
-          [systemTags]="systemTags$ | async"
-          [tableSortField]="(tableSortField$ | async)"
-          [tableSortOrder]="(tableSortOrder$ | async)"
-          [tableFilters]="(tableFilters$ | async)"
-          [colsOrder]="(tableColsOrder$ | async)"
-          [selectedModels]="selectedModels$ | async"
-          [selectedModel]="selectedModel$ | async"
-          (onColumnsReordered)="columnsReordered($event)"
-          (modelSelectionChanged)="modelSelectionChanged($event)"
-          (modelsSelectionChanged)="modelsSelectionChanged($event)"
-          (tagsMenuOpened)="refreshTagsList()"
-          (sortedChanged)="sortedChanged($event)"
-          (filterChanged)="filterChanged($event)"
-          (loadMoreModels)="getNextModels()"
-        >
-        </sm-models-table>
-      </as-split-area>
-      <as-split-area size="70" class="light-theme" [visible]="(this.showInfo$ | async)">
-        <router-outlet></router-outlet>
-      </as-split-area>
-    </as-split>
-  </div>
-  <sm-model-footer
-    [visible]="((selectedModels$ | async) && (selectedModels$ | async)?.length > 1)|| (showAllSelectedIsActive$ |async)"
-    [numberOfSelectedModels]="(selectedModels$ | async)?.length"
-    [isArchivedMode]="isArchived$ | async"
-    [disableArchive]="(selectedModels$ | async) | hasExampleItem"
-    [archiveToolTipMessage]="((selectedModels$ | async) | hasExampleItem)?'Archiving is disabled as one or more of the models you chose are example models':null"
-    [showAllSelectedIsActive]="showAllSelectedIsActive$ |async"
-    (compareModelsClicked)="compareModels()"
-    (archiveModelsClicked)="archiveModels()"
-    (restoreModelsClicked)="restoreModels()"
-    (showAllSelectedClicked)="showAllSelected($event)"
-  >
-  </sm-model-footer>
+<div class="w-100 model-header">
+  <sm-model-header
+    [isArchived]="isArchived$ | async"
+    [disableCreateNewButton]="isExampleProject"
+    [autoRefreshState]="autoRefreshState$ | async"
+    (isArchivedChanged)="archivedChanged($event)"
+    (setAutoRefresh)="setAutoRefresh($event)"
+    (refreshListClicked)="refreshList(false)"
+    (selectedTableColsChanged)="selectedTableColsChanged($event)"
+    [tableCols]="tableCols"
+  ></sm-model-header>
 </div>
+<div class="models-body" [class.footer-visible]="(selectedModels$ | async)?.length > 1|| (showAllSelectedIsActive$ |async)">
+  <as-split (dragEnd)="splitSizeChange($event)">
+    <as-split-area size="30">
+      <sm-models-table
+        class="w-100 align-self-stretch"
+        selectionMode="single"
+        [models]="models$ | async"
+        [tableCols]="filteredTableCols"
+        [minimizedView]="(showInfo$ | async)"
+        [noMoreModels]="noMoreModels$ | async"
+        [users]="users$ |async"
+        [frameworks]="frameworks$ |async"
+        [tags]="tags$ | async"
+        [systemTags]="systemTags$ | async"
+        [tableSortField]="(tableSortField$ | async)"
+        [tableSortOrder]="(tableSortOrder$ | async)"
+        [tableFilters]="(tableFilters$ | async)"
+        [colsOrder]="(tableColsOrder$ | async)"
+        [selectedModels]="selectedModels$ | async"
+        [selectedModel]="selectedModel$ | async"
+        [split]="selectSplitSize$ | async"
+        (onColumnsReordered)="columnsReordered($event)"
+        (modelSelectionChanged)="modelSelectionChanged($event)"
+        (modelsSelectionChanged)="modelsSelectionChanged($event)"
+        (tagsMenuOpened)="refreshTagsList()"
+        (sortedChanged)="sortedChanged($event)"
+        (filterChanged)="filterChanged($event)"
+        (loadMoreModels)="getNextModels()"
+      >
+      </sm-models-table>
+    </as-split-area>
+    <as-split-area size="70" class="light-theme" [visible]="(this.showInfo$ | async)">
+      <router-outlet></router-outlet>
+    </as-split-area>
+  </as-split>
+</div>
+<sm-entity-footer
+  entitiesType="models"
+  [visible]="(selectedModels$ | async)?.length > 1|| (showAllSelectedIsActive$ |async)"
+  [numberOfSelectedEntities]="(selectedModels$ | async)?.length"
+  [isArchivedMode]="isArchived$ | async"
+  [disableArchive]="(selectedModels$ | async) | hasExampleItem"
+  [archiveToolTipMessage]="((selectedModels$ | async) | hasExampleItem)?'Archiving is disabled as one or more of the models you chose are example models':null"
+  [showAllSelectedIsActive]="showAllSelectedIsActive$ |async"
+  (archiveEntitiesClicked)="archiveModels()"
+  (restoreEntitiesClicked)="restoreModels()"
+  (showAllSelectedClicked)="showAllSelected($event)"
+>
+</sm-entity-footer>
diff --git a/src/app/webapp-common/models/models.component.scss b/src/app/webapp-common/models/models.component.scss
index 549887eb..dbeeb256 100644
--- a/src/app/webapp-common/models/models.component.scss
+++ b/src/app/webapp-common/models/models.component.scss
@@ -5,7 +5,10 @@
 
   .models-body {
     width: 100%;
-    height: calc(100% - #{$project-header-height})
+    height: calc(100% - #{$project-header-height});
+    &.footer-visible {
+      height: calc(100% - #{$project-header-height + $project-footer-height})
+    }
   }
 
   /* width */
diff --git a/src/app/webapp-common/models/models.component.ts b/src/app/webapp-common/models/models.component.ts
index 573af90a..cd8ede2a 100644
--- a/src/app/webapp-common/models/models.component.ts
+++ b/src/app/webapp-common/models/models.component.ts
@@ -22,10 +22,11 @@ import {decodeFilter, decodeOrder} from '../shared/utils/tableParamEncode';
 import * as modelsActions from './actions/models-view.actions';
 import {MODELS_TABLE_COLS, ModelsViewModesEnum} from './models.consts';
 import * as modelsSelectors from './reducers';
-import {selectModelsHiddenTableCols, selectModelsUsers} from './reducers';
+import {selectModelsFrameworks, selectModelsHiddenTableCols, selectModelsTags, selectModelsUsers} from './reducers';
 import {IModelsViewState} from './reducers/models-view.reducer';
 import {ITableModel, ModelTableColFieldsEnum} from './shared/models.model';
 import {User} from '../../business-logic/model/users/user';
+import * as experimentsActions from '../experiments/actions/common-experiments-view.actions';
 
 
 @Component({
@@ -68,6 +69,7 @@ export class ModelsComponent extends BaseEntityPage implements OnInit, OnDestroy
   public tableCols = MODELS_TABLE_COLS;
   public filteredTableCols= MODELS_TABLE_COLS;
   private hiddenTableColsSub: Subscription;
+  public frameworks$: Observable<Array<string>>;
 
 
   constructor(
@@ -90,9 +92,10 @@ export class ModelsComponent extends BaseEntityPage implements OnInit, OnDestroy
     this.activeSectionEdit$ = this.store.select(modelsSelectors.selectActiveSectionEdit);
     this.tableColsOrder$ = this.store.select(modelsSelectors.selectModelsTableColsOrder);
     this.selectedProjectId$ = this.store.select(selectRouterParams).pipe(map(params => get('projectId', params)));
-    this.tags$ = this.store.select(selectProjectTags);
+    this.tags$ = this.store.select(selectModelsTags);
     this.systemTags$ = this.store.select(selectProjectSystemTags);
     this.users$ = this.store.select(selectModelsUsers);
+    this.frameworks$ = this.store.select(selectModelsFrameworks);
     this.hiddenTableCols$ = this.store.select(selectModelsHiddenTableCols);
 
     this.models$ = this.store.select(modelsSelectors.selectModelsList).pipe(
@@ -115,7 +118,7 @@ export class ModelsComponent extends BaseEntityPage implements OnInit, OnDestroy
         tableCol.hidden = hiddenCols[tableCol.id];
         return tableCol;
       });
-      this.filteredTableCols = MODELS_TABLE_COLS.filter(tableCol=> !hiddenCols[tableCol.id])
+      this.filteredTableCols = MODELS_TABLE_COLS.filter(tableCol=> !hiddenCols[tableCol.id]);
     });
 
     this.selectedModelSubs = combineLatest([
@@ -176,6 +179,8 @@ export class ModelsComponent extends BaseEntityPage implements OnInit, OnDestroy
     this.selectModelFromUrl();
     this.syncAppSearch();
     this.store.dispatch(modelsActions.getUsers());
+    this.store.dispatch(modelsActions.getFrameworks());
+    this.store.dispatch(modelsActions.getTags());
     this.store.dispatch(getTags());
   }
 
@@ -207,7 +212,7 @@ export class ModelsComponent extends BaseEntityPage implements OnInit, OnDestroy
   }
 
   selectModelFromUrl() {
-    this.ModelFromUrlSub = combineLatest(this.store.pipe(select(selectRouterParams), map(params => get('modelId', params))), this.models$)
+    this.ModelFromUrlSub = combineLatest([this.store.pipe(select(selectRouterParams), map(params => get('modelId', params))), this.models$])
       .pipe(
         map(([modelId, models]) => models.find(model => model.id === modelId))
       )
@@ -251,11 +256,11 @@ export class ModelsComponent extends BaseEntityPage implements OnInit, OnDestroy
   }
 
   archiveModels() {
-    this.store.dispatch(new modelsActions.ArchivedSelectedModels(this.projectId));
+    this.store.dispatch(new modelsActions.ArchivedSelectedModels());
   }
 
   restoreModels() {
-    this.store.dispatch(new modelsActions.RestoreSelectedModels(this.projectId));
+    this.store.dispatch(new modelsActions.RestoreSelectedModels());
   }
 
   onSearchValueChanged(value: string) {
@@ -322,6 +327,6 @@ export class ModelsComponent extends BaseEntityPage implements OnInit, OnDestroy
   }
 
   refreshTagsList() {
-    this.store.dispatch(getTags());
+    this.store.dispatch(modelsActions.getTags());
   }
 }
diff --git a/src/app/webapp-common/models/models.consts.ts b/src/app/webapp-common/models/models.consts.ts
index e1eea622..a6cef78c 100644
--- a/src/app/webapp-common/models/models.consts.ts
+++ b/src/app/webapp-common/models/models.consts.ts
@@ -15,7 +15,7 @@ export const MODELS_VIEW_MODES = {
   TREE : 'tree' as ModelsViewModesEnum,
 };
 
-export const MODELS_PAGE_SIZE = 11;
+export const MODELS_PAGE_SIZE = 15;
 export const MODELS_STORE_KEY = 'models';
 
 export const MODELS_PREFIX_INFO = 'MODELS_INFO_';
@@ -47,20 +47,6 @@ export const MODELS_TABLE_COLS: ISmCol[] = [
     style           : {width: '70px'},
     disableDrag     : true
   },
-  {
-    id          : MODELS_TABLE_COL_FIELDS.NAME,
-    headerType  : ColHeaderTypeEnum.sort,
-    sortable    : true,
-    header      : 'MODEL',
-  },
-  {
-    id        : MODELS_TABLE_COL_FIELDS.CREATED,
-    headerType: ColHeaderTypeEnum.sort,
-    sortable  : true,
-    header    : 'CREATED',
-    label     : 'Created',
-    style     : {width: '120px'}
-  },
   {
     id          : MODELS_TABLE_COL_FIELDS.FRAMEWORK,
     headerType  : ColHeaderTypeEnum.sortFilter,
@@ -70,13 +56,10 @@ export const MODELS_TABLE_COLS: ISmCol[] = [
     style       : {width: '140px'},
   },
   {
-    id          : MODELS_TABLE_COL_FIELDS.READY,
-    headerType  : ColHeaderTypeEnum.sortFilter,
+    id          : MODELS_TABLE_COL_FIELDS.NAME,
+    headerType  : ColHeaderTypeEnum.sort,
     sortable    : true,
-    filterable  : true,
-    header      : 'PUBLISHED',
-    hidden      : false,
-    style       : {width: '135px'},
+    header      : 'NAME',
   },
   {
     id          : MODELS_TABLE_COL_FIELDS.TAGS,
@@ -87,6 +70,20 @@ export const MODELS_TABLE_COLS: ISmCol[] = [
     header      : 'TAGS',
     style       : {width: '240px'},
   },
+  {
+    id          : MODELS_TABLE_COL_FIELDS.READY,
+    headerType  : ColHeaderTypeEnum.sortFilter,
+    sortable    : true,
+    filterable  : true,
+    header      : 'STATUS',
+    hidden      : false,
+    style       : {width: '135px'},
+  },
+  {
+    id          : MODELS_TABLE_COL_FIELDS.PROJECT,
+    header      : 'PROJECT',
+    style       : {width: '135px'}
+  },
   {
     id              : MODELS_TABLE_COL_FIELDS.USER,
     headerType      : ColHeaderTypeEnum.sortFilter,
@@ -104,6 +101,14 @@ export const MODELS_TABLE_COLS: ISmCol[] = [
     header    : 'TASK',
     style     : {width: '240px'}
   },
+  {
+    id        : MODELS_TABLE_COL_FIELDS.CREATED,
+    headerType: ColHeaderTypeEnum.sort,
+    sortable  : true,
+    header    : 'CREATED',
+    label     : 'Created',
+    style     : {width: '120px'}
+  },
   {
     id        : MODELS_TABLE_COL_FIELDS.COMMENT,
     headerType: ColHeaderTypeEnum.sort,
diff --git a/src/app/webapp-common/models/models.module.ts b/src/app/webapp-common/models/models.module.ts
index d07f9ffc..dc417ea6 100644
--- a/src/app/webapp-common/models/models.module.ts
+++ b/src/app/webapp-common/models/models.module.ts
@@ -11,7 +11,6 @@ import {reducers} from './reducers';
 import {ModelsViewEffects} from './effects/models-view.effects';
 import {ModelInfoHeaderComponent} from './dumbs/model-info-header/model-info-header.component';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {ModelFooterComponent} from './dumbs/model-footer/model-footer.component';
 import {ModelsInfoEffects} from './effects/models-info.effects';
 import {ModelInfoGeneralComponent} from './containers/model-info-general/model-info-general.component';
 import {ModelGeneralInfoComponent} from './dumbs/model-general-info/model-general-info.component';
@@ -30,6 +29,7 @@ import {createLocalStorageReducer} from '../core/meta-reducers/local-storage-red
 import {ModelCustomColsMenuComponent} from './dumbs/model-custom-cols-menu/model-custom-cols-menu.component';
 import {BaseModelMenuComponent} from './containers/model-menu/model-menu.component';
 import {ModelHeaderComponent} from '../../features/models/dumb/model-header/model-header.component';
+import {SharedModule} from '../../shared/shared.module';
 
 const syncedKeys    = [
   'view.colsOrder'
@@ -41,24 +41,25 @@ export function localStorageReducer(reducer: ActionReducer<any>): ActionReducer<
   return createLocalStorageReducer(key, syncedKeys, actionsPrefix)(reducer);
 }
 @NgModule({
-  imports        : [
-    ExperimentSharedModule,
-    FormsModule,
-    ReactiveFormsModule,
-    CommonModule,
-    CommonLayoutModule,
-    ModelRouterModule,
-    ModelSharedModule,
-    SMSharedModule,
-    FeatureModelsModule,
-    AngularSplitModule.forRoot(),
-    StoreModule.forFeature(MODELS_STORE_KEY, reducers, {metaReducers: [localStorageReducer]}),
-    EffectsModule.forFeature([ModelsViewEffects, ModelsInfoEffects, ModelsMenuEffects]),
-    FeatureModelsModule,
-  ],
+    imports: [
+        ExperimentSharedModule,
+        FormsModule,
+        ReactiveFormsModule,
+        CommonModule,
+        CommonLayoutModule,
+        ModelRouterModule,
+        ModelSharedModule,
+        SMSharedModule,
+        FeatureModelsModule,
+        AngularSplitModule.forRoot(),
+        StoreModule.forFeature(MODELS_STORE_KEY, reducers, {metaReducers: [localStorageReducer]}),
+        EffectsModule.forFeature([ModelsViewEffects, ModelsInfoEffects, ModelsMenuEffects]),
+        FeatureModelsModule,
+        SharedModule,
+    ],
   providers      : [SmFormBuilderService, DatePipe],
   declarations   : [ModelInfoComponent, ModelsComponent, ModelInfoHeaderComponent,
-    ModelViewNetworkComponent, ModelInfoNetworkComponent, ModelFooterComponent,
+    ModelViewNetworkComponent, ModelInfoNetworkComponent,
     ModelInfoLabelsComponent, ModelInfoLabelsViewComponent, ModelInfoGeneralComponent,
     ModelGeneralInfoComponent, ModelHeaderComponent, BaseModelMenuComponent,
     ModelCustomColsMenuComponent]
diff --git a/src/app/webapp-common/models/reducers/index.ts b/src/app/webapp-common/models/reducers/index.ts
index d461cf04..600490e8 100644
--- a/src/app/webapp-common/models/reducers/index.ts
+++ b/src/app/webapp-common/models/reducers/index.ts
@@ -31,6 +31,8 @@ export const selectNoMoreModels = createSelector(modelsView, (state): boolean =>
 export const selectShowAllSelectedIsActive = createSelector(modelsView, (state): boolean => state.showAllSelectedIsActive);
 export const selectModelsTableColsOrder = createSelector([modelsView, selectSelectedProjectId], (state, projectId): string[] => (state.colsOrder && projectId) ? state.colsOrder[projectId] : undefined);
 export const selectModelsUsers = createSelector(modelsView, (state): Array<any> => state.users);
+export const selectModelsFrameworks = createSelector(modelsView, (state): Array<string> => state.frameworks);
+export const selectModelsTags = createSelector(modelsView, (state): Array<string> => state.projectTags);
 export const selectModelsHiddenTableCols = createSelector(modelsView, (state): { [key: string]: boolean } => state.hiddenTableCols);
 
 
diff --git a/src/app/webapp-common/models/reducers/model-info.reducer.ts b/src/app/webapp-common/models/reducers/model-info.reducer.ts
index e40c8c14..960d1d53 100644
--- a/src/app/webapp-common/models/reducers/model-info.reducer.ts
+++ b/src/app/webapp-common/models/reducers/model-info.reducer.ts
@@ -12,7 +12,7 @@ export interface IModelInfoState {
 const initialState: IModelInfoState = {
   selectedModel: null,
   activeSectionEdit: null,
-  infoDataFreeze: {},
+  infoDataFreeze: null,
   saving: false,
 };
 
@@ -24,7 +24,7 @@ export function modelsInfoReducer(state: IModelInfoState = initialState, action)
     case SET_MODEL:
       return {...state, selectedModel: action.payload};
     case MODEL_DETAILS_UPDATED: {
-      const newSelectedModel = Object.assign({}, {...state.selectedModel, ...action.payload.changes});
+      const newSelectedModel = {...state.selectedModel, ...action.payload.changes};
       return {...state, selectedModel: newSelectedModel};
     }
     case ACTIVATE_MODEL_EDIT:
@@ -34,7 +34,7 @@ export function modelsInfoReducer(state: IModelInfoState = initialState, action)
     case SET_IS_MODEL_SAVING:
       return {...state, saving: action.payload};
     case EDIT_MODEL:
-      return {...state, activeSectionEdit: null}
+      return {...state, activeSectionEdit: null};
     default:
       return state;
   }
diff --git a/src/app/webapp-common/models/reducers/models-view.reducer.ts b/src/app/webapp-common/models/reducers/models-view.reducer.ts
index 5f3b1e18..788d8801 100644
--- a/src/app/webapp-common/models/reducers/models-view.reducer.ts
+++ b/src/app/webapp-common/models/reducers/models-view.reducer.ts
@@ -26,25 +26,29 @@ export interface IModelsViewState {
   globalFilter: string;
   showAllSelectedIsActive: boolean;
   users: User[];
+  frameworks: string[];
+  projectTags: string[];
 }
 
 const initialState: IModelsViewState = {
-  models                 : [],
-  colsOrder              : {},
-  hiddenTableCols        : {'comment': true},
-  selectedModels         : [],
-  selectedModel          : null,
-  noMoreModels           : false,
-  selectedModelSource    : null,
-  modelToken             : null,
-  viewMode               : MODELS_VIEW_MODES.TABLE,
-  tableFilters           : null,
-  tableSortField         : MODELS_TABLE_COL_FIELDS.CREATED,
-  tableSortOrder         : TABLE_SORT_ORDER.ASC,
-  page                   : -1, // -1 so the "getNextModels" will send 0.
-  globalFilter           : null,
+  models: [],
+  frameworks: [],
+  colsOrder: {},
+  hiddenTableCols: {'comment': true},
+  selectedModels: [],
+  selectedModel: null,
+  noMoreModels: false,
+  selectedModelSource: null,
+  modelToken: null,
+  viewMode: MODELS_VIEW_MODES.TABLE,
+  tableFilters: null,
+  tableSortField: MODELS_TABLE_COL_FIELDS.CREATED,
+  tableSortOrder: TABLE_SORT_ORDER.ASC,
+  page: -1, // -1 so the "getNextModels" will send 0.
+  globalFilter: null,
   showAllSelectedIsActive: false,
-  users                  : []
+  users: [],
+  projectTags: [],
 };
 
 export function modelsViewReducer(state: IModelsViewState = initialState, action: any): IModelsViewState {
@@ -59,10 +63,18 @@ export function modelsViewReducer(state: IModelsViewState = initialState, action
     case  actions.SET_SHOW_ALL_SELECTED_IS_ACTIVE:
       return {...state, showAllSelectedIsActive: action.payload, globalFilter: initialState.globalFilter, tableFilters: initialState.tableFilters};
     case actions.UPDATE_ONE_MODELS:
-      return {
+      const payload = (action as actions.UpdateModel).payload;
+      const newState = {
         ...state, models:
-          state.models.map(ex => ex.id === action.payload.id ? {...ex, ...action.payload.changes} : ex)
+          state.models.map(ex => ex.id === payload.id ? {...ex, ...payload.changes} : ex)
       };
+      if (state.selectedModel?.id === payload.id) {
+        newState.selectedModel = {...state.selectedModel, ...payload.changes};
+      }
+      if (state.selectedModels.find(ex => ex.id === payload.id)) {
+        newState.selectedModels = state.selectedModels.map(ex => ex.id === payload.id ? {...ex, ...payload.changes} : ex);
+      }
+      return newState;
     case actions.SET_MODELS:
       return {...state, models: action.payload};
     case setModelsInPlace.type:
@@ -87,6 +99,10 @@ export function modelsViewReducer(state: IModelsViewState = initialState, action
       return {...state, hiddenTableCols: action.hiddenCols};
     case actions.setUsers.type:
       return {...state, users: action.users};
+    case actions.setFrameworks.type:
+      return {...state, frameworks: action.frameworks};
+    case actions.setTags.type:
+      return {...state, projectTags: action.tags};
     case actions.TABLE_SORT_CHANGED:
       return {...state, tableSortOrder: action.payload.sortOrder, tableSortField: action.payload.colId};
     case actions.TABLE_FILTER_CHANGED: {
diff --git a/src/app/webapp-common/models/shared/model-shared.module.ts b/src/app/webapp-common/models/shared/model-shared.module.ts
index 9a7b5d51..8ffaf379 100644
--- a/src/app/webapp-common/models/shared/model-shared.module.ts
+++ b/src/app/webapp-common/models/shared/model-shared.module.ts
@@ -11,19 +11,21 @@ import {SelectModelHeaderComponent} from './select-model-header/select-model-hea
 import {CommonLayoutModule} from '../../layout/layout.module';
 import {CommonExperimentSharedModule} from '../../experiments/shared/common-experiment-shared.module';
 import {FeatureModelsModule} from '../../../features/models/feature-models.module';
+import {SharedModule} from '../../../shared/shared.module';
 
 const DECLERATIONS = [ModelTypeIconLabelComponent, ModelStatusIconLabelComponent, SelectModelHeaderComponent, ModelsTableComponent, ModelTagsComponent];
 
 @NgModule({
-  imports     : [
-    CommonExperimentSharedModule,
-    LayoutModule,
-    ExperimentSharedModule,
-    SMSharedModule,
-    CommonModule,
-    CommonLayoutModule,
-    FeatureModelsModule
-  ],
+    imports: [
+        CommonExperimentSharedModule,
+        LayoutModule,
+        ExperimentSharedModule,
+        SMSharedModule,
+        CommonModule,
+        CommonLayoutModule,
+        FeatureModelsModule,
+        SharedModule
+    ],
   declarations: DECLERATIONS,
   exports     : DECLERATIONS
 })
diff --git a/src/app/webapp-common/models/shared/models-table/models-table.component.html b/src/app/webapp-common/models/shared/models-table/models-table.component.html
index c1d93db1..82708429 100644
--- a/src/app/webapp-common/models/shared/models-table/models-table.component.html
+++ b/src/app/webapp-common/models/shared/models-table/models-table.component.html
@@ -1,9 +1,11 @@
-<sm-model-menu #contextMenu
+<sm-model-menu #contextMenu *smCheckPermission="true"
                [model]="this.contextModel"
                [selectedModel]="selectedModel"
                [numSelected]="selectedModels.length"
                [allTags]="tags$ | async"
                (tagSelected)="addTag($event)"
+               (menuOpened)="setContextMenuStatus(true)"
+               (menuClosed)="setContextMenuStatus(false)"
                [showButton]="false"
 ></sm-model-menu>
 <div class="table-header" [hidden]="!minimizedView">
@@ -21,7 +23,7 @@
     <sm-table-card-filter-template [options]="MODELS_ALL_FILTER_OPTIONS"
                                    [value]="allFiltersValue"
                                    [subValue]="systemTagsFiltersValue"
-                                   [subOptions]="systemTags | labelValue"
+                                   [columns]="initialColumns"
                                    fixedOptionsSubheader="System tags"
                                    (subFilterChanged)="tableFilterChanged({id:'system_tags'}, $event)"
                                    (filterChanged)="tableAllFiltersChanged($event)"
@@ -31,8 +33,8 @@
     ></sm-table-card-filter-template>
   </div>
 </div>
-<div class="table-container" [class.card-view]="minimizedView" #tableContainer>
-  <sm-table
+<div class="table-container" [class.card-view]="minimizedView">
+  <sm-table #table
     [selectionMode]="selectionMode"
     [tableData]="models"
     [noMoreData]="noMoreModels"
@@ -42,6 +44,9 @@
     [columnsOrder]="colsOrder"
     [lazyLoading]="true"
     [selection]="selectedModel"
+    [checkedItems]="selectedModels"
+    [activeContextRow]="contextModel"
+    [contextMenuOpen]="contextMenuActive"
     [minimizedView]="minimizedView"
     (colReordered)="columnsReordered($event)"
     [keyboardControl]="true"
@@ -67,10 +72,11 @@
         *ngIf="col.id === MODELS_TABLE_COL_FIELDS.FRAMEWORK"
         [header]="col.header"
         [value]="frameworkFiltersValue"
-        [options]="MODELS_FRAMEWORK_OPTIONS"
+        [options]="MODELS_ALL_FILTER_OPTIONS.framework"
         [sortOrder]="col.id === tableSortField ? tableSortOrder : false"
         (sortOrderChanged)="onSortChanged($event, col.id)"
-        (filterChanged)="tableFilterChanged(col, $event);"
+        (filterChanged)="tableFilterChanged(col, $event)"
+        (menuClosed)="sortOptionalFrameworksList()"
       >
       </sm-table-filter-sort-template>
       <sm-table-filter-sort-template
@@ -102,7 +108,6 @@
         [enableSearch]="col.searchableFilter"
         [searchValue]="tagSearchValue"
         [options]="MODELS_ALL_FILTER_OPTIONS.tags |filter:tagSearchValue:'label'"
-        [subOptions]="systemTags | labelValue"
         fixedOptionsSubheader="System tags"
         [value]="tagsFiltersValue"
         [subValue]="systemTagsFiltersValue"
@@ -133,7 +138,6 @@
         <ng-container *ngSwitchCase="MODELS_TABLE_COL_FIELDS.NAME">
           <div class="d-flex flex-row flex-nowrap">
             <div class="font-weight-bold flex-grow-1" [smTooltip]="model.name">{{model.name}}</div>
-            <sm-tag *ngIf="model &&  model.company && ! model.company.id" label="EXAMPLE" className="example"></sm-tag>
           </div>
         </ng-container>
         <ng-container *ngSwitchCase="MODELS_TABLE_COL_FIELDS.TAGS">
@@ -142,6 +146,9 @@
         <ng-container *ngSwitchCase="MODELS_TABLE_COL_FIELDS.USER">
           {{model.user?.name ? model.user?.name : 'Unknown User'}}
         </ng-container>
+        <ng-container *ngSwitchCase="MODELS_TABLE_COL_FIELDS.PROJECT">
+          {{model?.project?.name}}
+        </ng-container>
         <div *ngSwitchCase="MODELS_TABLE_COL_FIELDS.TASK" [smTooltip]="model.name" class="ellipsis">
           {{model.task?.name}}
         </div>
@@ -178,10 +185,12 @@
                      [cardName]="model.name"
                      [columns]="tableCols"
                      [rowData]="model"
-                     (contextmenu)="openContextMenu({e: $event, rowData: model})"
+                     [checked]="isRowSelected(model)"
+                     [activeContextRow]="contextModel"
+                     [contextMenuOpen]="contextMenuActive"
       >
         <sm-tag-list class="mb-1" [sysTags]="getSysTags(model)" [tags]="model?.tags"></sm-tag-list>
-        <div compact-columns-data>Created {{model.created | timeAgo}} by {{model.user?.name || 'Unknown User'}}
+        <div  class="ellipsis compact-columns-data" compact-columns-data>Created {{model.created | timeAgo}} by {{model.user?.name || 'Unknown User'}}
           <ng-container *ngIf="model.task"><BR>{{model.task.name}}</ng-container>
         </div>
         <sm-experiment-status-icon-label
diff --git a/src/app/webapp-common/models/shared/models-table/models-table.component.scss b/src/app/webapp-common/models/shared/models-table/models-table.component.scss
index 5448ca57..c3d7ed8a 100644
--- a/src/app/webapp-common/models/shared/models-table/models-table.component.scss
+++ b/src/app/webapp-common/models/shared/models-table/models-table.component.scss
@@ -1,4 +1,5 @@
 @import "../../../shared/ui-components/styles/variables";
+@import "../../../layout/layout.scss";
 
 $header-height: 45px;
 
@@ -16,10 +17,12 @@ $header-height: 45px;
   sm-table {
     display: block;
     height: 100%;
+    &.compare {
+      height: calc(100% - #{$project-footer-height});
+    }
   }
 
   .table-container {
-    overflow-y: scroll;
     height: 100%;
 
     &.card-view {
@@ -56,6 +59,9 @@ $header-height: 45px;
       padding-left: 17px;
     }
   }
+  .compact-columns-data {
+    color: $blue-250;
+  }
 
 }
 
diff --git a/src/app/webapp-common/models/shared/models-table/models-table.component.ts b/src/app/webapp-common/models/shared/models-table/models-table.component.ts
index 11a1c110..795f2c4d 100644
--- a/src/app/webapp-common/models/shared/models-table/models-table.component.ts
+++ b/src/app/webapp-common/models/shared/models-table/models-table.component.ts
@@ -1,13 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  HostListener,
-  Input,
-  Output,
-  ViewChild
-} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, Output, ViewChild} from '@angular/core';
 import {ICONS} from '../../../../app.constants';
 import {ColHeaderTypeEnum, ISmCol, TableSortOrderEnum} from '../../../shared/ui-components/data/table/table.consts';
 import {get} from 'lodash/fp';
@@ -23,12 +14,14 @@ import {Store} from '@ngrx/store';
 import {addTag} from '../../actions/models-menu.actions';
 import {ModelMenuComponent} from '../../../../features/models/containers/model-menu/model-menu.component';
 import {TIME_FORMAT_STRING} from '../../../constants';
-import { getSysTags } from '../../model.utils';
+import {getSysTags} from '../../model.utils';
+import {TableComponent} from '../../../shared/ui-components/data/table/table.component';
+import { MODELS_TABLE_COLS } from '../../models.consts';
 
 @Component({
-  selector: 'sm-models-table',
-  templateUrl: './models-table.component.html',
-  styleUrls: ['./models-table.component.scss'],
+  selector       : 'sm-models-table',
+  templateUrl    : './models-table.component.html',
+  styleUrls      : ['./models-table.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ModelsTableComponent extends BaseTableView {
@@ -36,10 +29,10 @@ export class ModelsTableComponent extends BaseTableView {
   readonly MODELS_FRAMEWORK_OPTIONS = Object.entries(MODELS_FRAMEWORK_LABELS).map(([key, val]) => ({label: val, value: key}));
   readonly MODELS_READY_OPTIONS = Object.entries(MODELS_READY_LABELS).map(([key, val]) => ({label: val, value: key}));
   readonly MODELS_ALL_FILTER_OPTIONS = {
-    framework: this.MODELS_FRAMEWORK_OPTIONS,
-    ready: this.MODELS_READY_OPTIONS,
-    users: [],
-    tags: [],
+    framework: [],
+    ready    : this.MODELS_READY_OPTIONS,
+    users    : [],
+    tags     : [],
   };
   readonly ICONS = ICONS;
   public userSearchValue: string;
@@ -51,7 +44,6 @@ export class ModelsTableComponent extends BaseTableView {
   public tagsFiltersValue: any;
   public systemTagsFiltersValue: any;
   public menuOpen: boolean;
-  public menuPosition: { x: number; y: number };
   public allFiltersValue: { framework: any; ready: any; users: any, tags: any };
   public sortOrder = 1;
 
@@ -121,8 +113,17 @@ export class ModelsTableComponent extends BaseTableView {
     }
   }
 
+  private _selectedModel;
+  @Input() set selectedModel(model) {
+    if(model !== this._selectedModel) {
+      window.setTimeout(() => this.table.focusSelected());
+    }
+    this._selectedModel = model;
+  }
 
-  @Input() selectedModel;
+  get selectedModel() {
+    return this._selectedModel;
+  }
 
   @Input() set tableFilters(filters: { [s: string]: FilterMetadata }) {
     this.frameworkFiltersValue = get([MODELS_TABLE_COL_FIELDS.FRAMEWORK, 'value'], filters) || [];
@@ -138,13 +139,29 @@ export class ModelsTableComponent extends BaseTableView {
     this.sortOptionalUsersList();
   }
 
+  @Input() set frameworks(frameworks: string[]) {
+    const frameworksAndActiveFilter = Array.from(new Set(frameworks.concat(this.frameworkFiltersValue)));
+    this.MODELS_ALL_FILTER_OPTIONS.framework = frameworksAndActiveFilter.map(framework => ({
+      label: framework ? framework :
+        (framework === null ? '(No framework)' : 'Unknown'), value: framework
+    }));
+    this.sortOptionalFrameworksList();
+  }
+
   @Input() set tags(tags) {
     const tagsAndActiveFilter = Array.from(new Set(tags.concat(this.tagsFiltersValue)));
-    this.MODELS_ALL_FILTER_OPTIONS.tags = tagsAndActiveFilter.map(tag => ({label: tag, value: tag}));
+    this.MODELS_ALL_FILTER_OPTIONS.tags = tagsAndActiveFilter.map(tag => ({label: tag===null? 'No tag':tag , value: tag}));
     this.sortOptionalTagsList();
   }
 
-  @Input() systemTags;
+  @Input() systemTags = [] as string[];
+  get validSystemTags() {
+    return this.systemTags.filter(tag => tag !== 'archived');
+  }
+
+  @Input() set split(size: number) {
+    this.table?.resize();
+  }
 
   @Output() modelsSelectionChanged = new EventEmitter<Array<ITableModel>>();
   @Output() modelSelectionChanged = new EventEmitter<ITableModel>();
@@ -152,10 +169,11 @@ export class ModelsTableComponent extends BaseTableView {
   @Output() tagsMenuOpened = new EventEmitter();
   @Output() sortedChanged = new EventEmitter<{ sortOrder: TableSortOrderEnum; colId: ISmCol['id'] }>();
   @Output() filterChanged = new EventEmitter() as EventEmitter<{ col: ISmCol; value: any }>;
-  @ViewChild('tableContainer', {static: true}) tableContainer;
+  @ViewChild('table', {static: true}) table: TableComponent;
   @ViewChild('contextMenu') contextMenu: ModelMenuComponent;
   SYSTEM_TAGS_OPTIONS = [{label: 'DEV', value: 'development'}];
   TIME_FORMAT_STRING = TIME_FORMAT_STRING;
+  public readonly initialColumns = MODELS_TABLE_COLS;
 
   @HostListener('document:click', ['$event'])
   clickHandler(event) {
@@ -164,13 +182,19 @@ export class ModelsTableComponent extends BaseTableView {
     }
   }
 
-  constructor(private changeDetector: ChangeDetectorRef, private store: Store) {
+  constructor(private changeDetector: ChangeDetectorRef, private store: Store<any>) {
     super();
     this.tags$ = this.store.select(selectProjectTags);
     this.entitiesKey = 'models';
     this.selectedEntitiesKey = 'selectedModels';
   }
 
+  afterTableInit() {
+    if (this._selectedModel) {
+      this.table.scrollToElement(this._selectedModel);
+    }
+  }
+
   sortOptionalUsersList() {
     this.MODELS_ALL_FILTER_OPTIONS.users.sort((a, b) => sortByArr(a.value, b.value, this.userFiltersValue));
   }
@@ -179,12 +203,16 @@ export class ModelsTableComponent extends BaseTableView {
     this.MODELS_ALL_FILTER_OPTIONS.tags.sort((a, b) => sortByArr(a.value, b.value, this.tagsFiltersValue));
   }
 
+  sortOptionalFrameworksList() {
+    this.MODELS_ALL_FILTER_OPTIONS.framework.sort((a, b) => sortByArr(a.value, b.value, [null].concat(this.frameworkFiltersValue)));
+  }
+
   onRowSelectionChanged(event) {
     this.modelSelectionChanged.emit(event.data);
   }
 
   scrollTableToTop() {
-    this.tableContainer.nativeElement.scroll({top: 0});
+    this.table.table.scrollTo({top: 0});
   }
 
   tableFilterChanged(col: ISmCol, event) {
@@ -196,9 +224,6 @@ export class ModelsTableComponent extends BaseTableView {
   }
 
   tableAllFiltersChanged(event) {
-    if (event.col === 'users') {
-      event.col = 'user.name';
-    }
     this.filterChanged.emit({col: {id: event.col}, value: event.value});
     this.scrollTableToTop();
   }
@@ -268,8 +293,11 @@ export class ModelsTableComponent extends BaseTableView {
 
   openContextMenu(data) {
     this.contextModel = this.models.find(model => model.id === data.rowData.id);
+    if (!this.selectedModels.map(model => model.id).includes(this.contextModel.id)) {
+      this.emitSelection([this.contextModel]);
+    }
     const event = data.e as MouseEvent;
     event.preventDefault();
-    this.contextMenu.openMenu({x: event.clientX, y: event.clientY});
+    this.contextMenu?.openMenu({x: event.clientX, y: event.clientY});
   }
 }
diff --git a/src/app/webapp-common/models/shared/models.const.ts b/src/app/webapp-common/models/shared/models.const.ts
index 8ca3c3bf..fd79257d 100644
--- a/src/app/webapp-common/models/shared/models.const.ts
+++ b/src/app/webapp-common/models/shared/models.const.ts
@@ -9,7 +9,8 @@ export const MODELS_TABLE_COL_FIELDS = {
   CREATED: 'created' as ModelTableColFieldsEnum,
   FRAMEWORK: 'framework' as ModelTableColFieldsEnum,
   READY: 'ready' as ModelTableColFieldsEnum,
-  USER: 'user.name' as ModelTableColFieldsEnum,
+  USER: 'users' as ModelTableColFieldsEnum,
+  PROJECT: 'project.name' as ModelTableColFieldsEnum,
   TASK: 'task.name' as ModelTableColFieldsEnum,
   COMMENT: 'comment' as ModelTableColFieldsEnum,
 };
diff --git a/src/app/webapp-common/models/shared/models.model.ts b/src/app/webapp-common/models/shared/models.model.ts
index 65dc2bcb..0a386823 100644
--- a/src/app/webapp-common/models/shared/models.model.ts
+++ b/src/app/webapp-common/models/shared/models.model.ts
@@ -6,7 +6,7 @@ import {Project} from '../../../business-logic/model/projects/project';
 
 export type ModelTableColFieldsEnum = 'system_tags' | 'id' | 'project.name' | 'name' | 'created' | 'framework' | 'user.name' | 'ready' | 'task.name' | 'selected';
 
-export interface ISelectedModel extends Omit<Model, 'user'|'task'|'project'> {
+export interface ISelectedModel extends Omit<Model, 'user' | 'task' | 'project'> {
   user?: User;
   company?: any;
   task?: Task;
@@ -18,6 +18,7 @@ export type ITableModel = {
   system_tags: Model['system_tags'];
   ready: Model['ready'];
   name: Model['name'];
+  tags: Model['tags'];
 }; // TODO:
 
 // export interface IModelInfo {
diff --git a/src/app/webapp-common/models/shared/select-model-header/select-model-header.component.html b/src/app/webapp-common/models/shared/select-model-header/select-model-header.component.html
index a795b046..5e8d0a18 100644
--- a/src/app/webapp-common/models/shared/select-model-header/select-model-header.component.html
+++ b/src/app/webapp-common/models/shared/select-model-header/select-model-header.component.html
@@ -1,23 +1,4 @@
 <div class="d-flex justify-content-between">
-
-  <div class="">
-    <!--<sm-button-toggle-->
-    <!--[value]="viewMode"-->
-    <!--[options]="viewModeOptions"-->
-    <!--(valueChanged)="onViewModeChanged($event)"-->
-    <!--&gt;-->
-    <!--</sm-button-toggle>-->
-  </div>
-
-  <!--<div *ngIf="!hideArchiveToggle" class="center-buttons-container">-->
-    <!--<sm-button-toggle-->
-      <!--[value]="isArchived"-->
-      <!--[options]="archivedModeOptions"-->
-      <!--(valueChanged)="onIsArchivedChanged($event)"-->
-    <!--&gt;-->
-    <!--</sm-button-toggle>-->
-  <!--</div>-->
-
   <div *ngIf="showAllProjectsToggle" class="center-buttons-container">
     <sm-button-toggle
       [value]="isAllProjects"
diff --git a/src/app/webapp-common/projects/common-projects.effects.ts b/src/app/webapp-common/projects/common-projects.effects.ts
index 4ddd16f1..295f18b6 100644
--- a/src/app/webapp-common/projects/common-projects.effects.ts
+++ b/src/app/webapp-common/projects/common-projects.effects.ts
@@ -70,7 +70,7 @@ export class CommonProjectsEffects {
         include_stats  : true,
         page           : page,
         page_size      : pageSize,
-        order_by       : [sortOrder === TABLE_SORT_ORDER.DESC ? '-' + orderBy : orderBy],
+        order_by       : ['featured', sortOrder === TABLE_SORT_ORDER.DESC ? '-' + orderBy : orderBy],
         _any_          : {
           pattern: searchQuery ? escapeRegex(searchQuery) : '',
           fields : ['id', 'name', 'description', 'system_tags']
diff --git a/src/app/webapp-common/projects/common-projects.module.ts b/src/app/webapp-common/projects/common-projects.module.ts
index fa53bc1e..59a09d2c 100644
--- a/src/app/webapp-common/projects/common-projects.module.ts
+++ b/src/app/webapp-common/projects/common-projects.module.ts
@@ -9,17 +9,19 @@ import {ProjectsListComponent} from './dumb/projects-list/projects-list.componen
 import {ProjectsHeaderComponent} from './dumb/projects-header/projects-header.component';
 import {ProjectCreateDialogModule} from '../shared/project-create-dialog/project-create-dialog.module';
 import {ProjectsSharedModule} from '../../features/projects/shared/projects-shared.module';
+import {SharedModule} from '../../shared/shared.module';
 
 @NgModule({
-  imports        : [
-    CommonModule,
-    SMSharedModule,
-    FormsModule,
-    ReactiveFormsModule,
-    ProjectCreateDialogModule,
-    ProjectsSharedModule,
-    EffectsModule.forFeature([CommonProjectsEffects]),
-  ],
+    imports: [
+        CommonModule,
+        SMSharedModule,
+        FormsModule,
+        ReactiveFormsModule,
+        ProjectCreateDialogModule,
+        ProjectsSharedModule,
+        EffectsModule.forFeature([CommonProjectsEffects]),
+        SharedModule,
+    ],
   declarations   : [CommonProjectsPageComponent, ProjectsListComponent, ProjectsHeaderComponent],
   exports        : [CommonProjectsPageComponent, ProjectsListComponent, ProjectsHeaderComponent]
 })
diff --git a/src/app/webapp-common/projects/common-projects.reducer.ts b/src/app/webapp-common/projects/common-projects.reducer.ts
index 617d7e02..460d8987 100644
--- a/src/app/webapp-common/projects/common-projects.reducer.ts
+++ b/src/app/webapp-common/projects/common-projects.reducer.ts
@@ -25,8 +25,8 @@ export const commonProjectsInitState: ICommonProjectsState = {
   data                   : [],
   selectedProjectId      : '',
   selectedProject        : {},
-  orderBy                : '-last_update',
-  sortOrder              : TABLE_SORT_ORDER.ASC,
+  orderBy                : 'last_update',
+  sortOrder              : TABLE_SORT_ORDER.DESC,
   searchQuery            : '',
   projectsNonFilteredList: [],
   projectReadyForDeletion: {
@@ -41,7 +41,7 @@ const getCorrectSortingOrder = (currentSortOrder: TableSortOrderEnum, currentOrd
   if (currentOrderField === nextOrderField) {
     return currentSortOrder === TABLE_SORT_ORDER.DESC ? TABLE_SORT_ORDER.ASC : TABLE_SORT_ORDER.DESC;
   } else {
-    return TABLE_SORT_ORDER.ASC;
+    return nextOrderField === 'last_update' ? TABLE_SORT_ORDER.DESC : TABLE_SORT_ORDER.ASC;
   }
 };
 
diff --git a/src/app/webapp-common/projects/dumb/projects-header/projects-header.component.html b/src/app/webapp-common/projects/dumb/projects-header/projects-header.component.html
index 4c83ba34..250082f7 100644
--- a/src/app/webapp-common/projects/dumb/projects-header/projects-header.component.html
+++ b/src/app/webapp-common/projects/dumb/projects-header/projects-header.component.html
@@ -1,13 +1,12 @@
 <div class="col-24 d-flex justify-content-between">
   <div class="recent-title">
     <sm-menu [header]="sortByTitle" [iconClass]="sortOrder===1?'fa fa-caret-down':'fa fa-caret-up' " class="menu">
-      <sm-menu-item itemLabel="RECENT" (itemClicked)="orderByChanged.emit('-last_update')"></sm-menu-item>
+      <sm-menu-item itemLabel="RECENT" (itemClicked)="orderByChanged.emit('last_update')"></sm-menu-item>
       <sm-menu-item itemLabel="NAME" (itemClicked)="orderByChanged.emit('name')"></sm-menu-item>
     </sm-menu>
   </div>
-  <div>
+  <div *smCheckPermission="true">
     <button *ngIf="!hideCreateButton" class="btn btn-primary d-flex align-items-center" (click)="createProjectClicked.emit()">
-      <i class="icon sm i-plus-blue"></i> &nbsp; NEW PROJECT
-    </button>
+      <i class="al-icon al-color blue-400 msm al-ico-plus mr-2"></i>NEW PROJECT</button>
   </div>
 </div>
diff --git a/src/app/webapp-common/search/common-search-results.actions.ts b/src/app/webapp-common/search/common-search-results.actions.ts
index 1813a496..1f2f3244 100644
--- a/src/app/webapp-common/search/common-search-results.actions.ts
+++ b/src/app/webapp-common/search/common-search-results.actions.ts
@@ -9,14 +9,14 @@ import {Model} from '../../business-logic/model/models/model';
 export class SearchSetTerm implements ISmAction {
   readonly type = SEARCH_ACTIONS.SET_TERM;
 
-  constructor(public payload: string) {
+  constructor(public payload: string, private force?: boolean) {
   }
 }
 
 export class SearchStart implements ISmAction {
   readonly type = SEARCH_ACTIONS.SEARCH_START;
 
-  constructor(public payload: string) {
+  constructor(public payload: string, public force?: boolean) {
   }
 }
 
diff --git a/src/app/webapp-common/search/common-search-results.effects.ts b/src/app/webapp-common/search/common-search-results.effects.ts
index ebd5bc6b..35625af3 100644
--- a/src/app/webapp-common/search/common-search-results.effects.ts
+++ b/src/app/webapp-common/search/common-search-results.effects.ts
@@ -41,7 +41,7 @@ export class CommonSearchResultsEffects {
         actionsToFire.push(new SearchClear());
         actionsToFire.push(new SearchActivate());
       }
-      actionsToFire.push(new SearchSetTerm(action.payload));
+      actionsToFire.push(new SearchSetTerm(action.payload, action.force));
       actionsToFire.push(new SearchProjects(action.payload));
       actionsToFire.push(new SearchExperiments(action.payload));
       actionsToFire.push(new SearchModels(action.payload));
@@ -85,7 +85,7 @@ export class CommonSearchResultsEffects {
       page       : 0,
       page_size  : SEARCH_PAGE_SIZE,
       only_fields: EXPERIMENT_SEARCH_ONLY_FIELDS,
-      type       : [TaskTypeEnum.Training, TaskTypeEnum.Testing],
+      type       : ['__$not', 'annotation_manual', '__$not', 'annotation', '__$not', 'dataset_import'],
       system_tags: ['-archived']
     }).pipe(
       flatMap(res => [new SetExperimentsResults(res.tasks), new DeactiveLoader(action.type)]),
diff --git a/src/app/webapp-common/search/common-search-results.reducer.ts b/src/app/webapp-common/search/common-search-results.reducer.ts
index 36c80329..73a28d33 100644
--- a/src/app/webapp-common/search/common-search-results.reducer.ts
+++ b/src/app/webapp-common/search/common-search-results.reducer.ts
@@ -12,12 +12,14 @@ export interface ISearchState {
   users: User[];
   resultsCounter: number;
   term: string;
+  forceSearch: boolean;
   active: boolean;
 }
 
 
 const searchInitialState: ISearchState = {
   term          : '',
+  forceSearch: false,
   projects      : [],
   users         : [],
   experiments   : [],
@@ -31,9 +33,9 @@ export function commonSearchResultsReducer<ActionReducer>(state: ISearchState =
     case SEARCH_ACTIONS.ACTIVATE:
       return {...state, active: true};
     case SEARCH_ACTIONS.DEACTIVATE:
-      return {...state, active: false, term: ''};
+      return {...state, active: false, term: '', forceSearch: false};
     case SEARCH_ACTIONS.SET_TERM:
-      return {...state, term: action.payload};
+      return {...state, term: action.payload, forceSearch: action.force};
     case SEARCH_ACTIONS.SET_PROJECTS:
       return {...state, projects: action.payload.projects, resultsCounter: state.resultsCounter + 1};
     case SEARCH_ACTIONS.SET_EXPERIMENTS:
@@ -63,6 +65,6 @@ export const selectSearch             = createFeatureSelector<ISearchState>('sea
 export const selectProjectsResults    = createSelector(selectSearch, (state: ISearchState): Array<Project> => state.projects);
 export const selectExperimentsResults = createSelector(selectSearch, (state: ISearchState): Array<Task> => state.experiments);
 export const selectModelsResults      = createSelector(selectSearch, (state: ISearchState): Array<Model> => state.models);
-export const selectActiveSearch       = createSelector(selectSearch, (state: ISearchState): boolean => state.term.length >= 3);
+export const selectActiveSearch       = createSelector(selectSearch, (state: ISearchState): boolean => state.term.length >= 3 || state.forceSearch);
 export const selectSearchTerm         = createSelector(selectSearch, (state: ISearchState): string => state.term);
 export const selectResultsCounter     = createSelector(selectSearch, (state: ISearchState): number => state.resultsCounter);
diff --git a/src/app/webapp-common/shared/components/base-context-menu/base-context-menu.component.ts b/src/app/webapp-common/shared/components/base-context-menu/base-context-menu.component.ts
index bb6b218b..ad61d15a 100644
--- a/src/app/webapp-common/shared/components/base-context-menu/base-context-menu.component.ts
+++ b/src/app/webapp-common/shared/components/base-context-menu/base-context-menu.component.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, HostListener, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, EventEmitter, HostListener, OnInit, Output, ViewChild} from '@angular/core';
 import {MatMenuTrigger} from '@angular/material/menu';
 import {TagsMenuComponent} from '../../ui-components/tags/tags-menu/tags-menu.component';
 import {getTags} from '../../../core/actions/projects.actions';
@@ -13,11 +13,14 @@ export class BaseContextMenuComponent {
 
   @ViewChild('tagMenuContent') tagMenu: TagsMenuComponent;
   @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
+  @Output() menuOpened = new EventEmitter();
+  @Output() menuClosed = new EventEmitter();
 
   @HostListener('document:click', ['$event'])
   clickOut(event) {
     if(!this.eRef.nativeElement.contains(event.target)) {
-      this.trigger.closeMenu();
+      this.trigger?.closeMenu();
+      this.menuClosed.emit();
     }
   }
 
@@ -27,12 +30,14 @@ export class BaseContextMenuComponent {
   ) {}
 
   openMenu(position: {x: number; y: number}) {
-    if (this.trigger.menuOpen) {
+    if (this.trigger?.menuOpen) {
       this.trigger.closeMenu();
+      this.menuClosed.emit();
     }
     this.position = position;
     window.setTimeout(() => {
       this.trigger.openMenu();
+      this.menuOpened.emit();
     }, 100);
   }
 
diff --git a/src/app/webapp-common/shared/components/charts/donut/donut.component.scss b/src/app/webapp-common/shared/components/charts/donut/donut.component.scss
index 8d6b39d5..a00ea2f8 100644
--- a/src/app/webapp-common/shared/components/charts/donut/donut.component.scss
+++ b/src/app/webapp-common/shared/components/charts/donut/donut.component.scss
@@ -2,14 +2,14 @@
 
 /deep/ .dark-theme {
   .legend-entry-name, .legend-entry-value {
-    fill: $cloudy-blue;
+    fill: $blue-250;
   }
 
   .donut-text {
-    fill: $cloudy-blue;
+    fill: $blue-250;
 
     tspan:nth-child(3) {
-      stroke: $blue-rgb-800;
+      stroke: $blue-800;
       stroke-width: 0.3px;
     }
   }
diff --git a/src/app/webapp-common/shared/components/charts/donut/donut.component.ts b/src/app/webapp-common/shared/components/charts/donut/donut.component.ts
index a318488b..563b4305 100644
--- a/src/app/webapp-common/shared/components/charts/donut/donut.component.ts
+++ b/src/app/webapp-common/shared/components/charts/donut/donut.component.ts
@@ -52,8 +52,6 @@ export class DonutComponent implements OnInit {
     }
   }
 
-  @ViewChild('drawHere', {static: true, read: ViewContainerRef}) singleGraphContainerViewRef: ViewContainerRef;
-
   constructor(private colorHash: ColorHashService, private store: Store<any>) {}
 
   ngOnInit() {
diff --git a/src/app/webapp-common/shared/components/charts/line-chart/line-chart.component.ts b/src/app/webapp-common/shared/components/charts/line-chart/line-chart.component.ts
index 13ae1d71..a4f85073 100644
--- a/src/app/webapp-common/shared/components/charts/line-chart/line-chart.component.ts
+++ b/src/app/webapp-common/shared/components/charts/line-chart/line-chart.component.ts
@@ -1,5 +1,5 @@
 import {Component, OnInit, Input, ChangeDetectionStrategy, ViewChild, ViewContainerRef, ChangeDetectorRef} from '@angular/core';
-import line from './line';
+import line from 'britecharts/src/charts/line';
 import tooltip from 'britecharts/src/charts/tooltip';
 import legend from 'britecharts/src/charts/legend';
 import {select, Selection} from 'd3-selection';
diff --git a/src/app/webapp-common/shared/components/charts/line-chart/line.js b/src/app/webapp-common/shared/components/charts/line-chart/line.js
deleted file mode 100644
index 002045a3..00000000
--- a/src/app/webapp-common/shared/components/charts/line-chart/line.js
+++ /dev/null
@@ -1,1550 +0,0 @@
-define(function(require){
-    'use strict';
-
-    const d3Array = require('d3-array');
-    const d3Axis = require('d3-axis');
-    const d3Collection = require('d3-collection');
-    const d3Dispatch = require('d3-dispatch');
-    const d3Ease = require('d3-ease');
-    const d3Format = require('d3-format');
-    const d3Scale = require('d3-scale');
-    const d3Shape = require('d3-shape');
-    const d3Selection = require('d3-selection');
-    const d3Transition = require('d3-transition');
-    const d3TimeFormat = require('d3-time-format');
-
-    const { exportChart } = require('britecharts/src/charts/helpers/export');
-    const colorHelper = require('britecharts/src/charts/helpers/color');
-    const { line: lineChartLoadingMarkup } = require('britecharts/src/charts/helpers/load');
-
-    const { getTimeSeriesAxis } = require('britecharts/src/charts/helpers/axis');
-    const {
-        axisTimeCombinations,
-        curveMap
-    } = require('britecharts/src/charts/helpers/constants');
-    const {
-        createFilterContainer,
-        createGlowWithMatrix,
-        bounceCircleHighlight
-    } = require('britecharts/src/charts/helpers/filter');
-    const {
-        formatIntegerValue,
-        formatDecimalValue,
-        isInteger,
-        uniqueId
-    } = require('britecharts/src/charts/helpers/number');
-
-    const acceptNullValue = (value) => value === null ? null : +value;
-
-    /**
-     * @typedef D3Selection
-     * @type {Array[]}
-     * @property {Number} length            Size of the selection
-     * @property {DOMElement} parentNode    Parent of the selection
-     */
-
-    /**
-      * @typedef lineChartFlatData
-      * @type {Object}
-      * @property {String} topicName    Topic name (required)
-      * @property {Number} topic        Topic identifier (required)
-      * @property {Object[]} dates      All date entries with values for that topic in ISO8601 format (required)
-      *
-      * @example
-      * [
-      *     {
-      *         topicName: 'San Francisco',
-      *         name: 123,
-      *         date: '2017-01-16T16:00:00-08:00',
-      *         value: 1
-      *     }
-      * ]
-      */
-
-     /**
-      * Former data standard, it is currently calculated internally if not passed
-      * @typedef lineChartDataByTopic
-      * @type {Object}
-      * @property {String} topicName    Topic name (required)
-      * @property {Number} topic        Topic identifier (required)
-      * @property {Object[]} dates      All date entries with values for that topic in ISO8601 format (required)
-      *
-      * @example
-      * {
-      *     topicName: 'San Francisco',
-      *     topic: 123,
-      *     dates: [
-      *         {
-      *             date: '2017-01-16T16:00:00-08:00',
-      *             value: 1
-      *         },
-      *         {
-      *             date: '2017-01-16T17:00:00-08:00',
-      *             value: 2
-      *         }
-      *     ]
-      * }
-      */
-
-    /**
-      * The Data by Date is calculated internally in the chart in order to pass it to our tooltips
-      * @typedef lineChartDataByDate
-      * @type {Object[]}
-      * @property {String} date         Date in ISO8601 format (required)
-      * @property {Object[]} topics     List of topics with values that date (required)
-      *
-      * @example
-      * [
-      *     {
-      *         date: "2015-06-27T07:00:00.000Z",
-      *         topics: [
-      *             {
-      *                 "name": 1,
-      *                 "value": 1,
-      *                 "topicName": "San Francisco"
-      *             },
-      *             {
-      *                 "name": 2,
-      *                 "value": 20,
-      *                 "topicName": "Los Angeles"
-      *             },
-      *             {
-      *                 "name": 3,
-      *                 "value": 10,
-      *                 "topicName": "Oakland"
-      *             }
-      *         ]
-      *     },
-      *     {...}
-      * ]
-      */
-
-     /**
-      * The data shape for the line chart.
-      * Note that up to version 2.10.1, this required a "dataByTopic" array described on lineChartDataByTopic.
-      * The "dataByTopic" schema still works, but we prefer a flat dataset as described here.
-      * @typedef LineChartData
-      * @type {Object}
-      * @property {lineChartFlatData[]} data  Data values to chart (required)
-      *
-      * @example
-      * {
-      *     data: [
-      *         {
-      *             topicName: 'San Francisco',
-      *             name: 1,
-      *             date: '2017-01-16T16:00:00-08:00',
-      *             value: 1
-      *         },
-      *         {
-      *             topicName: 'San Francisco',
-      *             name: 1,
-      *             date: '2017-01-17T16:00:00-08:00',
-      *             value: 2
-      *         },
-      *         {
-      *             topicName: 'Oakland',
-      *             name: 2,
-      *             date: '2017-01-16T16:00:00-08:00',
-      *             value: 3
-      *         },
-      *         {
-      *             topicName: 'Oakland',
-      *             name: 2,
-      *             date: '2017-01-17T16:00:00-08:00',
-      *             value: 7
-      *         }
-      *     ]
-      * }
-      */
-
-    /**
-     * Line Chart reusable API module that allows us
-     * rendering a multi line and configurable chart.
-     *
-     * @module Line
-     * @tutorial line
-     * @requires d3-array, d3-axis, d3-brush, d3-ease, d3-format, d3-scale, d3-shape, d3-selection, d3-time, d3-time-format
-     *
-     * @example
-     * let lineChart = line();
-     *
-     * lineChart
-     *     .aspectRatio(0.5)
-     *     .width(500);
-     *
-     * d3Selection.select('.css-selector')
-     *     .datum(dataset)
-     *     .call(lineChart);
-     *
-     */
-    return function module() {
-
-        let margin = {
-                top: 60,
-                right: 30,
-                bottom: 40,
-                left: 70,
-            },
-            width = 960,
-            height = 500,
-            loadingState = lineChartLoadingMarkup,
-            aspectRatio = null,
-            tooltipThreshold = 480,
-            svg,
-            paths,
-            chartWidth, chartHeight,
-            xScale, yScale, colorScale,
-            xAxis, xMonthAxis, yAxis,
-            xAxisPadding = {
-                top: 0,
-                left: 15,
-                bottom: 0,
-                right: 0
-            },
-            monthAxisPadding = 28,
-            tickPadding = 5,
-            colorSchema = colorHelper.colorSchemas.britecharts,
-            singleLineGradientColors = colorHelper.colorGradients.greenBlue,
-            topicColorMap,
-            linearGradient,
-            lineGradientId = uniqueId('one-line-gradient'),
-
-            highlightFilter = null,
-            highlightFilterId = null,
-            highlightCircleSize = 12,
-            highlightCircleRadius = 5,
-            highlightCircleStroke = 2,
-            highlightCircleStrokeAll = 5,
-            highlightCircleActiveRadius = highlightCircleRadius + 2,
-            highlightCircleActiveStrokeWidth = 5,
-            highlightCircleActiveStrokeOpacity = 0.6,
-
-            xAxisFormat = null,
-            xTicks = null,
-            xAxisCustomFormat = null,
-            locale,
-
-            shouldShowAllDataPoints = false,
-            isAnimated = false,
-            ease = d3Ease.easeQuadInOut,
-            animationDuration = 1500,
-            maskingRectangle,
-
-            lineCurve = 'linear',
-
-            dataByTopic,
-            dataByDate,
-
-            dateLabel = 'date',
-            valueLabel = 'value',
-            topicLabel = 'topic',
-            topicNameLabel = 'topicName',
-
-            xAxisLabel = null,
-            xAxisLabelEl = null,
-            xAxisLabelPadding = 36,
-            yAxisLabel = null,
-            yAxisLabelEl = null,
-            yAxisLabelPadding = 36,
-
-            yTicks = 5,
-
-            overlay,
-            overlayColor = 'rgba(0, 0, 0, 0)',
-            verticalMarkerContainer,
-            verticalMarkerLine,
-            numberFormat,
-
-            verticalGridLines,
-            horizontalGridLines,
-            grid = null,
-
-            baseLine,
-
-            pathYCache = {},
-
-            // extractors
-            getDate = ({date}) => date,
-            getValue = ({value}) => value,
-            getTopic = ({topic}) => topic,
-            getVariableTopicName = (d) => d[topicNameLabel],
-            getLineColor = ({topic}) => colorScale(topic),
-
-            // events
-            dispatcher = d3Dispatch.dispatch(
-                'customMouseOver',
-                'customMouseOut',
-                'customMouseMove',
-                'customDataEntryClick',
-                'customTouchMove'
-            );
-
-        /**
-         * This function creates the graph using the selection and data provided
-         *
-         * @param {D3Selection} _selection A d3 selection that represents
-         *                                  the container(s) where the chart(s) will be rendered
-         * @param {LineChartData} _data The data to attach and generate the chart
-         */
-        function exports(_selection) {
-            _selection.each(function(_data) {
-                ({
-                    dataByTopic,
-                    dataByDate
-                } = cleanData(_data));
-
-                chartWidth = width - margin.left - margin.right;
-                chartHeight = height - margin.top - margin.bottom;
-
-                buildScales();
-                buildSVG(this);
-                buildAxis();
-                drawAxis();
-                buildGradient();
-                drawLines();
-                createMaskingClip();
-
-                if (shouldShowTooltip()) {
-                    drawHoverOverlay();
-                    drawVerticalMarker();
-                    addMouseEvents();
-                }
-
-                if (shouldShowAllDataPoints) {
-                    drawAllDataPoints();
-                }
-
-                addTouchEvents();
-            });
-        }
-
-        /**
-         * Adds a filter to the element
-         * @param {DOMElement} el
-         * @private
-         */
-        function addGlowFilter(el) {
-            if (!highlightFilter) {
-                highlightFilter = createFilterContainer(svg.select('.metadata-group'));
-                highlightFilterId = createGlowWithMatrix(highlightFilter);
-            }
-
-            let glowEl = d3Selection.select(el);
-
-            glowEl
-                .style('stroke-width', highlightCircleActiveStrokeWidth)
-                .style('stroke-opacity', highlightCircleActiveStrokeOpacity)
-                .attr('filter', `url(#${highlightFilterId})`);
-
-            bounceCircleHighlight(
-                glowEl,
-                ease,
-                highlightCircleRadius
-            );
-        }
-
-        /**
-         * Adds events to the container group if the environment is not mobile
-         * Adding: mouseover, mouseout and mousemove
-         */
-        function addMouseEvents() {
-            svg
-                .on('mouseover', function(d) {
-                    handleMouseOver(this, d);
-                })
-                .on('mouseout', function(d) {
-                    handleMouseOut(this, d);
-                })
-                .on('mousemove',  function(d) {
-                    handleMouseMove(this, d);
-                });
-        }
-
-        /**
-         * Adds events to the container group for the mobile environment
-         * Adding: touchmove
-         * @private
-         */
-        function addTouchEvents() {
-            svg
-                .on('touchmove', function(d) {
-                    handleTouchMove(this, d);
-                });
-        }
-
-        /**
-         * Adjusts the position of the y axis' ticks
-         * @param  {D3Selection} selection Y axis group
-         * @return void
-         */
-        function adjustYTickLabels(selection) {
-            selection.selectAll('.tick text')
-                .attr('transform', 'translate(0, -7)');
-        }
-
-        /**
-         * Formats the value depending on its characteristics
-         * @param  {Number} value Value to format
-         * @return {Number}       Formatted value
-         */
-        function getFormattedValue(value) {
-            let format;
-
-            if (isInteger(value)) {
-                format = formatIntegerValue;
-            } else {
-                format = formatDecimalValue;
-            }
-
-            if (numberFormat) {
-                format = d3Format.format(numberFormat)
-            }
-
-            return format(value);
-        }
-
-        /**
-         * Creates the d3 x and y axis, setting orientations
-         * @private
-         */
-        function buildAxis() {
-            let minor, major;
-
-            if (xAxisFormat === 'custom' && typeof xAxisCustomFormat === 'string') {
-                minor = {
-                    tick: xTicks,
-                    format: d3TimeFormat.timeFormat(xAxisCustomFormat)
-                };
-                major = null;
-            } else {
-                ({minor, major} = getTimeSeriesAxis(dataByDate, width, xAxisFormat, locale));
-
-                xMonthAxis = d3Axis.axisBottom(xScale)
-                    .ticks(major.tick)
-                    .tickSize(0, 0)
-                    .tickFormat(major.format);
-            }
-
-            xAxis = d3Axis.axisBottom(xScale)
-                .ticks(minor.tick)
-                .tickSize(10, 0)
-                .tickPadding(tickPadding)
-                .tickFormat(minor.format);
-
-            yAxis = d3Axis.axisLeft(yScale)
-                .ticks(yTicks)
-                .tickSize([0])
-                .tickPadding(tickPadding)
-                .tickFormat(getFormattedValue);
-
-            drawGridLines(minor.tick, yTicks);
-        }
-
-        /**
-         * Builds containers for the chart, the axis and a wrapper for all of them
-         * NOTE: The order of drawing of this group elements is really important,
-         * as everything else will be drawn on top of them
-         * @private
-         */
-        function buildContainerGroups(){
-            let container = svg
-              .append('g')
-                .classed('container-group', true)
-                .attr('transform', `translate(${margin.left},${margin.top})`);
-
-            container
-              .append('g').classed('x-axis-group', true)
-              .append('g').classed('axis x', true);
-            container.selectAll('.x-axis-group')
-              .append('g').classed('month-axis', true);
-            container
-              .append('g').classed('y-axis-group', true)
-              .append('g').classed('axis y', true);
-            container
-              .append('g').classed('grid-lines-group', true);
-            container
-              .append('g').classed('chart-group', true);
-            container
-              .append('g').classed('metadata-group', true);
-        }
-
-        /**
-         * Builds the gradient element to be used later
-         * @return {void}
-         */
-        function buildGradient() {
-            if (!linearGradient) {
-                linearGradient = svg.select('.metadata-group')
-                  .append('linearGradient')
-                    .attr('id', lineGradientId)
-                    .attr('x1', '0%')
-                    .attr('y1', '0%')
-                    .attr('x2', '100%')
-                    .attr('y2', '0%')
-                    .attr('gradientUnits', 'userSpaceOnUse')
-                    .selectAll('stop')
-                    .data([
-                        {offset:'0%', color: singleLineGradientColors[0]},
-                        {offset:'100%', color: singleLineGradientColors[1]}
-                    ])
-                    .enter()
-                      .append('stop')
-                        .attr('offset', ({offset}) => offset)
-                        .attr('stop-color', ({color}) => color)
-            }
-        }
-
-        /**
-         * Creates the x and y scales of the graph
-         * @private
-         */
-        function buildScales(){
-            let minX = d3Array.min(dataByTopic, ({dates}) => d3Array.min(dates, getDate)),
-                maxX = d3Array.max(dataByTopic, ({dates}) => d3Array.max(dates, getDate)),
-                maxY = d3Array.max(dataByTopic, ({dates}) => d3Array.max(dates, getValue)),
-                minY = d3Array.min(dataByTopic, ({dates}) => d3Array.min(dates, getValue));
-            let yScaleBottomValue = minY < 0 ? minY : 0;
-
-            xScale = d3Scale.scaleTime()
-                .domain([minX, maxX])
-                .rangeRound([0, chartWidth]);
-
-            yScale = d3Scale.scaleLinear()
-                .domain([yScaleBottomValue, Math.max(1, Math.abs(maxY))])
-                .rangeRound([chartHeight, 0])
-                .nice();
-
-            colorScale = d3Scale.scaleOrdinal()
-                .range(colorSchema)
-                .domain(dataByTopic.map(getTopic));
-
-            let range = colorScale.range();
-
-            topicColorMap = colorScale.domain().reduce((memo, item, i) => {
-                memo[item] = range[i];
-
-                return memo;
-            }, {});
-        }
-
-        /**
-         * Builds the SVG element that will contain the chart
-         *
-         * @param  {HTMLElement} container DOM element that will work as the container of the graph
-         * @private
-         */
-        function buildSVG(container){
-            if (!svg) {
-                svg = d3Selection.select(container)
-                  .append('svg')
-                    .classed('britechart line-chart', true);
-
-                buildContainerGroups();
-            }
-
-            svg
-                .attr('width', width)
-                .attr('height', height);
-        }
-
-        /**
-         * Parses dates and values into JS Date objects and numbers
-         * @param  {obj} dataByTopic    Raw data grouped by topic
-         * @return {obj}                Parsed data with dataByTopic and dataByDate
-         */
-        function cleanData({dataByTopic, dataByDate, data}) {
-            if (!dataByTopic && !data) {
-                throw new Error('Data needs to have a dataByTopic or data property. See more in http://eventbrite.github.io/britecharts/global.html#LineChartData__anchor');
-            }
-
-            // If dataByTopic or data are not present, we generate them
-            if (!dataByTopic) {
-                dataByTopic = d3Collection.nest()
-                    .key(getVariableTopicName)
-                    .entries(data)
-                    .map(d => ({
-                            topic: d.values[0]['name'],
-                            topicName: d.key,
-                            dates: d.values
-                        })
-                    );
-            } else {
-                data = dataByTopic.reduce((accum, topic) => {
-                    topic.dates.forEach((date) => {
-                        accum.push({
-                            topicName: topic[topicNameLabel],
-                            name: topic[topicLabel],
-                            date: date[dateLabel],
-                            value: date[valueLabel]
-                        });
-                    });
-
-                    return accum;
-                }, []);
-            }
-
-            // Nest data by date and format
-            dataByDate = d3Collection.nest()
-                .key(getDate)
-                .entries(data)
-                .map((d) => {
-                    return {
-                        date: new Date(d.key),
-                        topics: d.values
-                    }
-                });
-
-            const normalizedDataByTopic = dataByTopic.reduce((accum, topic) => {
-                let {dates, ...restProps} = topic;
-
-                let newDates = dates.map(d => {
-                    return {
-                        date: new Date(d[dateLabel]),
-                        value: acceptNullValue(d[valueLabel])
-                    };
-                });
-
-                accum.push({ dates: newDates, ...restProps });
-
-                return accum;
-            }, []);
-
-            return {
-                dataByTopic: normalizedDataByTopic,
-                dataByDate
-            };
-        }
-
-        /**
-         * Removes all the datapoints highlighter circles added to the marker container
-         * @return void
-         */
-        function cleanDataPointHighlights(){
-            verticalMarkerContainer.selectAll('.circle-container').remove();
-        }
-
-        /**
-         * Creates a masking clip that would help us fake an animation if the
-         * proper flag is true
-         *
-         * @return {void}
-         */
-        function createMaskingClip() {
-            if (isAnimated) {
-                // We use a white rectangle to simulate the line drawing animation
-                maskingRectangle = svg.append('rect')
-                    .attr('class', 'masking-rectangle')
-                    .attr('width', width)
-                    .attr('height', height)
-                    .attr('x', 0)
-                    .attr('y', 0);
-
-                maskingRectangle.transition()
-                    .duration(animationDuration)
-                    .ease(ease)
-                    .attr('x', width)
-                    .on('end', () => maskingRectangle.remove());
-            }
-        }
-
-        /**
-         * Draws the x and y axis on the svg object within their
-         * respective groups along with the axis labels if given
-         * @private
-         */
-        function drawAxis(){
-            svg.select('.x-axis-group .axis.x')
-                .attr('transform', `translate(0, ${chartHeight})`)
-                .call(xAxis);
-
-            if (xAxisFormat !== 'custom') {
-                svg.select('.x-axis-group .month-axis')
-                    .attr('transform', `translate(0, ${(chartHeight + monthAxisPadding)})`)
-                    .call(xMonthAxis);
-            }
-
-            if (xAxisLabel) {
-                if (xAxisLabelEl) {
-                    svg.selectAll('.x-axis-label').remove();
-                }
-                let xLabelXPosition = chartWidth/2;
-                let xLabelYPosition = chartHeight + monthAxisPadding + xAxisLabelPadding;
-
-                xAxisLabelEl = svg.select('.x-axis-group')
-                  .append('text')
-                    .attr('x', xLabelXPosition)
-                    .attr('y', xLabelYPosition)
-                    .attr('text-anchor', 'middle')
-                    .attr('class', 'x-axis-label')
-                    .text(xAxisLabel);
-            }
-
-            svg.select('.y-axis-group .axis.y')
-                .attr('transform', `translate(${-xAxisPadding.left}, 0)`)
-                .call(yAxis)
-                .call(adjustYTickLabels);
-
-            if (yAxisLabel) {
-                if (yAxisLabelEl) {
-                    svg.selectAll('.y-axis-label').remove();
-                }
-                // Note this coordinates are rotated, so they are not what they look
-                let yLabelYPosition = -yAxisLabelPadding - xAxisPadding.left;
-                let yLabelXPosition = -chartHeight/2;
-
-                yAxisLabelEl = svg.select('.y-axis-group')
-                  .append('text')
-                    .attr('x', yLabelXPosition)
-                    .attr('y', yLabelYPosition)
-                    .attr('text-anchor', 'middle')
-                    .attr('transform', 'rotate(270)')
-                    .attr('class', 'y-axis-label')
-                    .text(yAxisLabel);
-            }
-        }
-
-        /**
-         * Draws the line elements within the chart group
-         * @private
-         */
-        function drawLines(){
-            let lines,
-                topicLine;
-
-            // clear tooltip chache on path redraw
-            pathYCache = {};
-
-            topicLine = d3Shape.line()
-                .curve(curveMap[lineCurve])
-                .x(({date}) => xScale(date))
-                .defined(({ value }) => value !== null)
-                .y(({value}) => yScale(value));
-
-            lines = svg.select('.chart-group').selectAll('.line')
-                .data(dataByTopic, getTopic);
-
-            paths = lines.enter()
-                .append('g')
-                .attr('class', 'topic')
-                .append('path')
-                .attr('class', 'line')
-                .merge(lines)
-                .attr('id', ({topic}) => topic)
-                .attr('d', ({dates}) => topicLine(dates))
-                .style('stroke', (d) => (
-                    dataByTopic.length === 1 ? `url(#${lineGradientId})` : getLineColor(d)
-                ));
-
-            lines
-                .exit()
-                .remove();
-        }
-
-        /**
-         * Draws grid lines on the background of the chart
-         * @return void
-         */
-        function drawGridLines(xTicks, yTicks){
-            svg.select('.grid-lines-group')
-                .selectAll('line')
-                .remove();
-
-            let minY = d3Array.min(dataByTopic, ({dates}) => d3Array.min(dates, getValue));
-            let shouldHighlightXAxis = minY < 0;
-
-            if (grid === 'horizontal' || grid === 'full') {
-                horizontalGridLines = svg.select('.grid-lines-group')
-                    .selectAll('line.horizontal-grid-line')
-                    .data(yScale.ticks(yTicks))
-                    .enter()
-                      .append('line')
-                        .attr('class', 'horizontal-grid-line')
-                        .attr('x1', (-xAxisPadding.left - 30))
-                        .attr('x2', chartWidth)
-                        .attr('y1', (d) => yScale(d))
-                        .attr('y2', (d) => yScale(d))
-                        .classed('horizontal-grid-line--highlighted', (value) => shouldHighlightXAxis && value === 0);
-            }
-
-            if (grid === 'vertical' || grid === 'full') {
-                verticalGridLines = svg.select('.grid-lines-group')
-                    .selectAll('line.vertical-grid-line')
-                    .data(xScale.ticks(xTicks))
-                    .enter()
-                      .append('line')
-                        .attr('class', 'vertical-grid-line')
-                        .attr('y1', 0)
-                        .attr('y2', chartHeight)
-                        .attr('x1', (d) => xScale(d))
-                        .attr('x2', (d) => xScale(d));
-            }
-
-            //draw a horizontal line to extend x-axis till the edges
-            baseLine = svg.select('.grid-lines-group')
-                .selectAll('line.extended-x-line')
-                .data([0])
-                .enter()
-                  .append('line')
-                    .attr('class', 'extended-x-line')
-                    .attr('x1', (-xAxisPadding.left - 30))
-                    .attr('x2', chartWidth)
-                    .attr('y1', height - margin.bottom - margin.top)
-                    .attr('y2', height - margin.bottom - margin.top);
-        }
-
-        /**
-         * Draws an overlay element over the graph
-         * @inner
-         * @return void
-         */
-        function drawHoverOverlay(){
-            if (!overlay) {
-                overlay = svg.select('.metadata-group')
-                  .append('rect')
-                    .attr('class','overlay')
-                    .attr('y1', 0)
-                    .attr('y2', height)
-                    .attr('height', chartHeight)
-                    .attr('width', chartWidth)
-                    .attr('fill', overlayColor)
-                    .style('display', 'none');
-            }
-        }
-
-        /**
-         * Draws all data points of the chart
-         * if shouldShowAllDataPoints is set to true
-         * @private
-         * @return void
-         */
-        function drawAllDataPoints() {
-            svg.select('.chart-group')
-                .selectAll('.data-points-container')
-                .remove();
-
-            const nodesById = paths.nodes().reduce((acc, node) => {
-                acc[node.id] = node
-
-                return acc;
-            }, {});
-
-
-            const allTopics = dataByDate.reduce((accum, dataPoint) => {
-                const dataPointTopics = dataPoint.topics.map(topic => ({
-                    topic,
-                    node: nodesById[topic.name]
-                }));
-
-                accum = [...accum, ...dataPointTopics];
-
-                return accum;
-            }, []);
-
-            let allDataPoints = svg.select('.chart-group')
-              .append('g')
-              .classed('data-points-container', true)
-              .selectAll('circle')
-              .data(allTopics)
-              .enter()
-                .append('circle')
-                .classed('data-point-mark', true)
-                .attr('r', highlightCircleRadius)
-                .style('stroke-width', highlightCircleStroke)
-                .style('stroke', (d) => topicColorMap[d.topic.name])
-                .style('cursor', 'pointer')
-                .attr('cx', d => xScale(new Date(d.topic.date)))
-                .attr('cy', d => getPathYFromX(xScale(new Date(d.topic.date)), d.node, d.topic.name));
-        }
-
-        /**
-         * Creates the vertical marker
-         * @return void
-         */
-        function drawVerticalMarker(){
-            if (!verticalMarkerContainer) {
-                verticalMarkerContainer = svg.select('.metadata-group')
-                  .append('g')
-                    .attr('class', 'hover-marker vertical-marker-container')
-                    .attr('transform', 'translate(9999, 0)');
-
-                verticalMarkerLine = verticalMarkerContainer.selectAll('path')
-                    .data([{
-                        x1: 0,
-                        y1: 0,
-                        x2: 0,
-                        y2: 0
-                    }])
-                    .enter()
-                      .append('line')
-                        .classed('vertical-marker', true)
-                        .attr('x1', 0)
-                        .attr('y1', chartHeight)
-                        .attr('x2', 0)
-                        .attr('y2', 0);
-            }
-        }
-
-        /**
-         * Finds out which datapoint is closer to the given x position
-         * @param  {Number} x0 Date value for data point
-         * @param  {Object} d0 Previous datapoint
-         * @param  {Object} d1 Next datapoint
-         * @return {Object}    d0 or d1, the datapoint with closest date to x0
-         */
-        function findOutNearestDate(x0, d0, d1){
-            return (new Date(x0).getTime() - new Date(d0.date).getTime()) > (new Date(d1.date).getTime() - new Date(x0).getTime()) ? d0 : d1;
-        }
-
-        /**
-         * Finds out the data entry that is closer to the given position on pixels
-         * @param  {Number} mouseX X position of the mouse
-         * @return {Object}        Data entry that is closer to that x axis position
-         */
-        function getNearestDataPoint(mouseX) {
-            let dateFromInvertedX = xScale.invert(mouseX);
-            let bisectDate = d3Array.bisector(getDate).left;
-            let dataEntryIndex = bisectDate(dataByDate, dateFromInvertedX, 1);
-            let dataEntryForXPosition = dataByDate[dataEntryIndex];
-            let previousDataEntryForXPosition = dataByDate[dataEntryIndex - 1];
-            let nearestDataPoint;
-
-            if (previousDataEntryForXPosition && dataEntryForXPosition) {
-                nearestDataPoint = findOutNearestDate(dateFromInvertedX, dataEntryForXPosition, previousDataEntryForXPosition);
-            } else {
-                nearestDataPoint = dataEntryForXPosition;
-            }
-
-            return nearestDataPoint;
-        }
-
-        /**
-         * MouseMove handler, calculates the nearest dataPoint to the cursor
-         * and updates metadata related to it
-         * @private
-         */
-        function handleMouseMove(e){
-            let [xPosition, yPosition] = d3Selection.mouse(e),
-                xPositionOffset = -margin.left, //Arbitrary number, will love to know how to assess it
-                dataPoint = getNearestDataPoint(xPosition + xPositionOffset),
-                dataPointXPosition;
-
-            if (dataPoint) {
-                dataPointXPosition = xScale(new Date(dataPoint.date));
-                // More verticalMarker to that datapoint
-                moveVerticalMarker(dataPointXPosition);
-                // Add data points highlighting
-                highlightDataPoints(dataPoint);
-                // Emit event with xPosition for tooltip or similar feature
-                dispatcher.call('customMouseMove', e, dataPoint, topicColorMap, dataPointXPosition, yPosition);
-            }
-        }
-
-        /**
-         * MouseOut handler, hides overlay and removes active class on verticalMarkerLine
-         * It also resets the container of the vertical marker
-         * @private
-         */
-        function handleMouseOut(e, d){
-            overlay.style('display', 'none');
-            verticalMarkerLine.classed('bc-is-active', false);
-            verticalMarkerContainer.attr('transform', 'translate(9999, 0)');
-
-            dispatcher.call('customMouseOut', e, d, d3Selection.mouse(e));
-        }
-
-        /**
-         * Mouseover handler, shows overlay and adds active class to verticalMarkerLine
-         * @private
-         */
-        function handleMouseOver(e, d){
-            overlay.style('display', 'block');
-            verticalMarkerLine.classed('bc-is-active', true);
-
-            dispatcher.call('customMouseOver', e, d, d3Selection.mouse(e));
-        }
-
-        /**
-         * Mouseclick handler over one of the highlight points
-         * It will only pass the information with the event
-         * @private
-         */
-        function handleHighlightClick(e, d) {
-            dispatcher.call('customDataEntryClick', e, d, d3Selection.mouse(e));
-        }
-
-        /**
-         * Touchmove highlighted points
-         * It will only pass the information with the event
-         * @private
-         */
-        function handleTouchMove(e, d) {
-            dispatcher.call('customTouchMove', e, d, d3Selection.touch(e));
-        }
-
-        /**
-         * Creates coloured circles marking where the exact data y value is for a given data point
-         * @param  {Object} dataPoint Data point to extract info from
-         * @private
-         */
-        function highlightDataPoints(dataPoint) {
-            cleanDataPointHighlights();
-
-            const nodes = paths.nodes()
-            const nodesById = nodes.reduce((acc, node) => {
-                acc[node.id] = node
-
-                return acc;
-            }, {});
-
-            // Group corresponding path node with its topic, and
-            // sorting the topics based on the order of the colors,
-            // so that the order always stays constant
-            const topicsWithNode = dataPoint.topics
-                .map(topic => ({
-                    topic,
-                    node: nodesById[topic.name]
-                }))
-                .filter(({topic}) => !!topic)
-                .sort((a, b) => topicColorMap[a.topic.name] < topicColorMap[b.topic.name])
-
-            dataPoint.topics = topicsWithNode.map(({topic}) => topic);
-
-            dataPoint.topics.forEach((d, index) => {
-                let marker = verticalMarkerContainer
-                  .append('g')
-                    .classed('circle-container', true)
-                      .append('circle')
-                        .classed('data-point-highlighter', true)
-                        .attr('cx', highlightCircleSize)
-                        .attr('cy', 0)
-                        .attr('r', highlightCircleRadius)
-                        .style('stroke-width', () => (
-                            shouldShowAllDataPoints ? highlightCircleStrokeAll : highlightCircleStroke
-                        ))
-                        .style('stroke', topicColorMap[d.name])
-                        .style('cursor', 'pointer')
-                        .on('click', function () {
-                            addGlowFilter(this);
-                            handleHighlightClick(this, d);
-                        })
-                        .on('mouseout', function () {
-                            removeFilter(this);
-                        });
-
-                const path = topicsWithNode[index].node;
-                const x = xScale(new Date(dataPoint.topics[index].date));
-                const y = getPathYFromX(x, path, d.name);
-
-                marker.attr('transform', `translate( ${(-highlightCircleSize)}, ${y} )` );
-            });
-        }
-
-        /**
-         * Finds the y coordinate of a path given an x coordinate and the line's path node.
-         * @param  {number} x The x coordinate
-         * @param  {node} path The path node element
-         * @param {*} name - The name identifier of the topic
-         * @param  {number} error The margin of error from the actual x coordinate. Default 0.01
-         * @private
-         */
-        function getPathYFromX(x, path, name, error) {
-            const key = `${name}-${x}`;
-
-            if (key in pathYCache) {
-                return pathYCache[key];
-            }
-
-            error = error || 0.01;
-
-            const maxIterations = 100;
-
-            let lengthStart = 0;
-            let lengthEnd = path.getTotalLength();
-            let point;
-            try {
-                point = path.getPointAtLength((lengthEnd + lengthStart) / 2);
-            } catch (e) {
-                point = {x: 0, y: 0}
-            }
-
-            let iterations = 0;
-
-            while (x < point.x - error || x > point.x + error) {
-                const midpoint = (lengthStart + lengthEnd) / 2;
-
-                try {
-                    point = path.getPointAtLength(midpoint);
-                } catch (e) {
-                    point = {x: 0, y: 0}
-                }
-
-                if (x < point.x) {
-                    lengthEnd = midpoint;
-                } else {
-                    lengthStart = midpoint;
-                }
-
-                iterations += 1;
-                if (maxIterations < iterations) {
-                    break;
-                }
-            }
-
-            pathYCache[key] = point.y
-
-            return pathYCache[key]
-        }
-
-        /**
-         * Helper method to update the x position of the vertical marker
-         * @param  {Object} dataPoint Data entry to extract info
-         * @return void
-         */
-        function moveVerticalMarker(verticalMarkerXPosition){
-            verticalMarkerContainer.attr('transform', `translate(${verticalMarkerXPosition},0)`);
-        }
-
-        /**
-         * Resets a point filter
-         * @param {DOMElement} point  Point to reset
-         */
-        function removeFilter(point) {
-            d3Selection.select(point)
-                .attr('filter', 'none');
-        }
-
-        /**
-         * Determines if we should add the tooltip related logic depending on the
-         * size of the chart and the tooltipThreshold variable value
-         * @return {Boolean} Should we build the tooltip?
-         */
-        function shouldShowTooltip() {
-            return width > tooltipThreshold;
-        }
-
-        // API
-
-        /**
-         * Gets or Sets the aspect ratio of the chart
-         * @param  {Number} _x Desired aspect ratio for the graph
-         * @return { (Number | Module) } Current aspect ratio or Line Chart module to chain calls
-         * @public
-         */
-        exports.aspectRatio = function(_x) {
-            if (!arguments.length) {
-                return aspectRatio;
-            }
-            aspectRatio = _x;
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the label of the X axis of the chart
-         * @param  {String} _x Desired label for the X axis
-         * @return { (String | Module) } Current label of the X axis or Line Chart module to chain calls
-         * @public
-         */
-        exports.xAxisLabel = function(_x) {
-            if (!arguments.length) {
-                return xAxisLabel;
-            }
-            xAxisLabel = _x;
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the label of the Y axis of the chart
-         * @param  {String} _x Desired label for the Y axis
-         * @return { (String | Module) } Current label of the Y axis or Line Chart module to chain calls
-         * @public
-         */
-        exports.yAxisLabel = function(_x) {
-            if (!arguments.length) {
-                return yAxisLabel;
-            }
-            yAxisLabel = _x;
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the colorSchema of the chart
-         * @param  {String[]} _x Desired colorSchema for the graph
-         * @return { colorSchema | module} Current colorSchema or Chart module to chain calls
-         * @public
-         */
-        exports.colorSchema = function(_x) {
-            if (!arguments.length) {
-                return colorSchema;
-            }
-            colorSchema = _x;
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the dateLabel of the chart
-         * @param  {Number} _x Desired dateLabel for the graph
-         * @return { dateLabel | module} Current dateLabel or Chart module to chain calls
-         * @public
-         */
-        exports.dateLabel = function(_x) {
-            if (!arguments.length) {
-                return dateLabel;
-            }
-            dateLabel = _x;
-
-            return this;
-        };
-
-        /**
-         * Exposes the ability to force the chart to show a certain x axis grouping
-         * @param  {String} _x Desired format
-         * @return { (String|Module) }    Current format or module to chain calls
-         * @public
-         * @example
-         *     line.xAxisFormat(line.axisTimeCombinations.HOUR_DAY)
-         */
-        exports.xAxisFormat = function(_x) {
-            if (!arguments.length) {
-              return xAxisFormat;
-            }
-            xAxisFormat = _x;
-
-            return this;
-        };
-
-        /**
-         * Exposes the ability to force the chart to show a certain x format
-         * It requires a `xAxisFormat` of 'custom' in order to work.
-         * NOTE: localization not supported
-         * @param  {String} _x              Desired format for x axis
-         * @return { (String|Module) }      Current format or module to chain calls
-         * @public
-         */
-        exports.xAxisCustomFormat = function(_x) {
-            if (!arguments.length) {
-              return xAxisCustomFormat;
-            }
-            xAxisCustomFormat = _x;
-
-            return this;
-        };
-
-        /**
-         * Exposes the ability to force the chart to show a certain x ticks. It requires a `xAxisFormat` of 'custom' in order to work.
-         * NOTE: This value needs to be a multiple of 2, 5 or 10. They won't always work as expected, as D3 decides at the end
-         * how many and where the ticks will appear.
-         *
-         * @param  {Number} _x              Desired number of x axis ticks (multiple of 2, 5 or 10)
-         * @return { (Number|Module) }      Current number or ticks or module to chain calls
-         * @public
-         */
-        exports.xTicks = function(_x) {
-            if (!arguments.length) {
-              return xTicks;
-            }
-            xTicks = _x;
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the grid mode.
-         *
-         * @param  {String} _x Desired mode for the grid ('vertical'|'horizontal'|'full')
-         * @return { String | module} Current mode of the grid or Line Chart module to chain calls
-         * @public
-         */
-        exports.grid = function(_x) {
-            if (!arguments.length) {
-                return grid;
-            }
-            grid = _x;
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the height of the chart
-         * @param  {Number} _x Desired width for the graph
-         * @return { (Number | Module) } Current height or Line Chart module to chain calls
-         * @public
-         */
-        exports.height = function(_x) {
-            if (!arguments.length) {
-                return height;
-            }
-            if (aspectRatio) {
-                width = Math.ceil(_x / aspectRatio);
-            }
-            height = _x;
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the isAnimated property of the chart, making it to animate when render.
-         * By default this is 'false'
-         *
-         * @param  {Boolean} _x Desired animation flag
-         * @return { isAnimated | module} Current isAnimated flag or Chart module
-         * @public
-         */
-        exports.isAnimated = function(_x) {
-            if (!arguments.length) {
-                return isAnimated;
-            }
-            isAnimated = _x;
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the loading state of the chart
-         * @param  {string} markup Desired markup to show when null data
-         * @return { loadingState | module} Current loading state markup or Chart module to chain calls
-         * @public
-         */
-        exports.loadingState = function(_markup) {
-            if (!arguments.length) {
-                return loadingState;
-            }
-            loadingState = _markup;
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the margin of the chart
-         * @param  {Object} _x Margin object to get/set
-         * @return { (Object | Module) } Current margin or Line Chart module to chain calls
-         * @public
-         */
-        exports.margin = function(_x) {
-            if (!arguments.length) {
-                return margin;
-            }
-            margin = {
-                ...margin,
-                ..._x
-            };
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the number format of the line chart
-         * @param  {string} _x Desired number format for the line chart
-         * @return {numberFormat | module} Current numberFormat or Chart module to chain calls
-         * @public
-         */
-        exports.numberFormat = function(_x) {
-            if (!arguments.length) {
-                return numberFormat;
-            }
-            numberFormat = _x;
-
-            return this;
-        }
-
-        /**
-         * Gets or Sets the curve of the line chart
-         * @param  {curve} _x Desired curve for the lines, default 'linear'. Other options are:
-         * basis, natural, monotoneX, monotoneY, step, stepAfter, stepBefore, cardinal, and
-         * catmullRom. Visit https://github.com/d3/d3-shape#curves for more information.
-         * @return { (curve | Module) } Current line curve or Line Chart module to chain calls
-         * @public
-         */
-        exports.lineCurve = function(_x) {
-            if (!arguments.length) {
-                return lineCurve;
-            }
-            lineCurve = _x;
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the gradient colors of the line chart when there is only one line
-         * @param  {String[]} _x Desired color gradient for the line (array of two hexadecimal numbers)
-         * @return { (Number | Module) } Current color gradient or Line Chart module to chain calls
-         * @public
-         */
-        exports.lineGradient = function(_x) {
-            if (!arguments.length) {
-                return singleLineGradientColors;
-            }
-            singleLineGradientColors = _x;
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the topicLabel of the chart
-         * @param  {Boolean} _x=false       Whether all data points should be drawn
-         * @return {shouldShowAllDataPoints | module}   Current shouldShowAllDataPoints or Chart module to chain calls
-         * @public
-         */
-        exports.shouldShowAllDataPoints = function(_x) {
-            if (!arguments.length) {
-                return shouldShowAllDataPoints;
-            }
-            shouldShowAllDataPoints = _x;
-
-            return this;
-        }
-
-        /**
-         * Gets or Sets the minimum width of the graph in order to show the tooltip
-         * NOTE: This could also depend on the aspect ratio
-         * @param  {Number} _x Desired tooltip threshold for the graph
-         * @return { (Number | Module) } Current tooltip threshold or Line Chart module to chain calls
-         * @public
-         */
-        exports.tooltipThreshold = function(_x) {
-            if (!arguments.length) {
-                return tooltipThreshold;
-            }
-            tooltipThreshold = _x;
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the topicLabel of the chart
-         * @param  {Number} _x Desired topicLabel for the graph
-         * @return {topicLabel | module} Current topicLabel or Chart module to chain calls
-         * @public
-         */
-        exports.topicLabel = function(_x) {
-            if (!arguments.length) {
-                return topicLabel;
-            }
-            topicLabel = _x;
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the valueLabel of the chart
-         * @param  {Number} _x Desired valueLabel for the graph
-         * @return {valueLabel | module} Current valueLabel or Chart module to chain calls
-         * @public
-         */
-        exports.valueLabel = function(_x) {
-            if (!arguments.length) {
-                return valueLabel;
-            }
-            valueLabel = _x;
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the yAxisLabelPadding of the chart.
-         * The default value is -36
-         * @param  {Number} _x Desired yAxisLabelPadding for the graph
-         * @return {yAxisLabelPadding | module} Current yAxisLabelPadding or Chart module to chain calls
-         * @public
-         */
-        exports.yAxisLabelPadding = function(_x) {
-            if (!arguments.length) {
-                return yAxisLabelPadding;
-            }
-            yAxisLabelPadding = _x;
-
-            return this;
-        }
-
-        /**
-         * Gets or Sets the number of ticks of the y axis on the chart
-         * (Default is 5)
-         * @param  {Number} _x          Desired yTicks
-         * @return {Number | module}   Current yTicks or Chart module to chain calls
-         * @public
-         */
-        exports.yTicks = function(_x) {
-            if (!arguments.length) {
-                return yTicks;
-            }
-            yTicks = _x;
-
-            return this;
-        };
-
-        /**
-         * Gets or Sets the width of the chart
-         * @param  {Number} _x Desired width for the graph
-         * @return {Number | Module} Current width or Line Chart module to chain calls
-         * @public
-         */
-        exports.width = function(_x) {
-            if (!arguments.length) {
-                return width;
-            }
-            if (aspectRatio) {
-                height = Math.ceil(_x * aspectRatio);
-            }
-            width = _x;
-
-            return this;
-        };
-
-        /**
-         * Pass language tag for the tooltip to localize the date.
-         * Feature uses Intl.DateTimeFormat, for compatability and support, refer to
-         * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
-         * @param  {String} _x  must be a language tag (BCP 47) like 'en-US' or 'fr-FR'
-         * @return { (String|Module) }    Current locale or module to chain calls
-         * @public
-         */
-        exports.locale = function(_x) {
-            if (!arguments.length) {
-                return locale;
-            }
-            locale = _x;
-
-            return this;
-        };
-
-        /**
-         * Chart exported to png and a download action is fired
-         * @param {String} filename     File title for the resulting picture
-         * @param {String} title        Title to add at the top of the exported picture
-         * @public
-         */
-        exports.exportChart = function(filename, title) {
-            exportChart.call(exports, svg, filename, title);
-        };
-
-        /**
-         * Exposes an 'on' method that acts as a bridge with the event dispatcher
-         * We are going to expose this events:
-         * customMouseHover, customMouseMove, customMouseOut,
-         * customDataEntryClick, and customTouchMove
-         *
-         * @return {module} Bar Chart
-         * @public
-         */
-        exports.on = function() {
-            let value = dispatcher.on.apply(dispatcher, arguments);
-
-            return value === dispatcher ? exports : value;
-        };
-
-        /**
-         * Exposes the constants to be used to force the x axis to respect a certain granularity
-         * current options: MINUTE_HOUR, HOUR_DAY, DAY_MONTH, MONTH_YEAR
-         * @example
-         *     line.xAxisCustomFormat(line.axisTimeCombinations.HOUR_DAY)
-         */
-        exports.axisTimeCombinations = axisTimeCombinations;
-
-        return exports;
-    };
-
-});
diff --git a/src/app/webapp-common/shared/components/experiment-settings/experiment-settings.html b/src/app/webapp-common/shared/components/experiment-settings/experiment-settings.html
index 1bf2bff9..5172b518 100644
--- a/src/app/webapp-common/shared/components/experiment-settings/experiment-settings.html
+++ b/src/app/webapp-common/shared/components/experiment-settings/experiment-settings.html
@@ -1,8 +1,3 @@
-<div class="d-flex align-items-center">
-  <div class="p2">
-    <button *ngIf="showSettings" class="btn" smTooltip="Settings" (click)="toggleSettings.emit()">
-      <i class="fas fa-cog"></i>
-    </button>
-  </div>
-
-</div>
+<button *ngIf="showSettings" class="btn" smTooltip="Settings" (click)="toggleSettings.emit()">
+  <i class="fas fa-cog fa-lg"></i>
+</button>
diff --git a/src/app/webapp-common/shared/components/experiment-settings/experiment-settings.ts b/src/app/webapp-common/shared/components/experiment-settings/experiment-settings.ts
index 079b9e52..85a518c8 100644
--- a/src/app/webapp-common/shared/components/experiment-settings/experiment-settings.ts
+++ b/src/app/webapp-common/shared/components/experiment-settings/experiment-settings.ts
@@ -1,21 +1,14 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {Store} from '@ngrx/store';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 
 @Component({
   selector   : 'sm-experiment-settings',
   templateUrl: './experiment-settings.html',
   styleUrls  : ['./experiment-settings.scss']
 })
-export class ExperimentSettingsComponent implements OnInit {
+export class ExperimentSettingsComponent {
 
   @Input() disabled                  = false;
   @Input() showSettings              = false;
   @Output() toggleSettings           = new EventEmitter();
-
-  constructor(private store: Store<any>) {
-  }
-
-  ngOnInit() {  }
-
 }
 
diff --git a/src/app/webapp-common/shared/components/refresh-button/refresh-button.component.scss b/src/app/webapp-common/shared/components/refresh-button/refresh-button.component.scss
index 94a9f81b..30a6031a 100644
--- a/src/app/webapp-common/shared/components/refresh-button/refresh-button.component.scss
+++ b/src/app/webapp-common/shared/components/refresh-button/refresh-button.component.scss
@@ -52,6 +52,5 @@
 
   .autorefresh-checkbox {
     margin-left: 6px;
-    margin-top: 7px;
   }
 }
diff --git a/src/app/webapp-common/shared/components/section-header/section-header.component.scss b/src/app/webapp-common/shared/components/section-header/section-header.component.scss
index 6a9ed082..0ee855ab 100644
--- a/src/app/webapp-common/shared/components/section-header/section-header.component.scss
+++ b/src/app/webapp-common/shared/components/section-header/section-header.component.scss
@@ -1,8 +1,9 @@
 :host {
   display: flex;
   justify-content: space-between;
-  padding: 0 0 10px 0;
+  padding: 12px 0;
   h4 {
+    margin: 0;
     display: block;
     position: relative;
     span.error.ng-star-inserted {
diff --git a/src/app/webapp-common/shared/experiment-graphs/experiment-graphs.component.html b/src/app/webapp-common/shared/experiment-graphs/experiment-graphs.component.html
index 80c942fe..270ce326 100644
--- a/src/app/webapp-common/shared/experiment-graphs/experiment-graphs.component.html
+++ b/src/app/webapp-common/shared/experiment-graphs/experiment-graphs.component.html
@@ -14,14 +14,16 @@
   <div class="all-metrics" [ngClass]="{'row': !isGroupGraphs}" #allMetrics>
     <div *ngFor="let metric of graphList;trackBy: trackByFn" class="metric-group-container less-padding"
          [ngClass]="{'hidden': hiddenList.includes(metric), 'col-xl-24  ': !isGroupGraphs }"
-         [class.col-xxl-12]="!isGroupGraphs && graphList.length > 1">
+         [class.col-xxl-12]="!isGroupGraphs && graphList.length > 1 && isWidthBigEnough()"
+         [style.height.percent]=""
+    >
       <div [id]="EXPERIMENT_GRAPH_ID_PREFIX + metric" class="graph-id">
         <div>
           <h3 class="metric-group-header" *ngIf="isGroupGraphs">{{metric}}</h3>
           <div [ngClass]="{'row': isGroupGraphs, 'single-graph': graphsData[metric].length === 1}">
             <sm-single-graph *ngFor="let chartItem of graphsData[metric];trackBy: trackByIdFn.bind(this, metric)"
                              [ngClass]="{'col-xl-24 less-padding': isGroupGraphs}"
-                             [class.col-xxl-12]="isGroupGraphs && chartItem?.data[0]?.type !== 'table' && graphsData[metric].length > 1"
+                             [class.col-xxl-12]="isGroupGraphs && chartItem?.data[0]?.type !== 'table' && graphsData[metric].length > 1 && isWidthBigEnough()"
                              [legendStringLength]="legendStringLength"
                              [chart]="chartItem"
                              [id]="SINGLE_GRAPH_ID_PREFIX + EXPERIMENT_GRAPH_ID_PREFIX + metric + chartItem.layout.title + chartItem.iter + (chartItem.layout.images && chartItem.layout.images[0]?.source)"
diff --git a/src/app/webapp-common/shared/experiment-graphs/experiment-graphs.component.ts b/src/app/webapp-common/shared/experiment-graphs/experiment-graphs.component.ts
index 89486e01..916b87b4 100644
--- a/src/app/webapp-common/shared/experiment-graphs/experiment-graphs.component.ts
+++ b/src/app/webapp-common/shared/experiment-graphs/experiment-graphs.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, QueryList, Renderer2, ViewChild, ViewChildren} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, Output, QueryList, Renderer2, ViewChild, ViewChildren} from '@angular/core';
 import {sortMetricsList} from '../../tasks/tasks.utils';
 import {SingleGraphComponent} from './single-graph/single-graph.component';
 import {EXPERIMENT_GRAPH_ID_PREFIX, SINGLE_GRAPH_ID_PREFIX} from '../../experiments/shared/common-experiments.const';
@@ -24,11 +24,23 @@ export class ExperimentGraphsComponent {
   private _smoothWeight: any;
   private _xAxisType: number;
   @ViewChild('allMetrics', {static: true}) allMetrics: ElementRef;
+  private visibleEntries: IntersectionObserverEntry[] = [];
+  private timer: number;
+
+  @HostListener('window:resize')
+  onResize() {
+    clearTimeout(this.timer);
+    this.prepareRedraw();
+    this.timer = window.setTimeout(() => {
+      this.graphInView(this.visibleEntries);
+    }, 200);
+  }
 
   @Input() hiddenList: Array<string> = [];
   @Input() isGroupGraphs: boolean;
   @Input() legendStringLength;
   @Input() minimized: boolean;
+  @Input() breakPoint: number = 700;
   @Input() isCompare: boolean = false;
 
 
@@ -51,7 +63,7 @@ export class ExperimentGraphsComponent {
 
   @ViewChildren(SingleGraphComponent) allGraphs !: QueryList<SingleGraphComponent>;
 
-  constructor(private changeDetection: ChangeDetectorRef, private adminService: AdminService) {
+  constructor(private el: ElementRef, private changeDetection: ChangeDetectorRef, private adminService: AdminService) {
   }
 
   @Output() resetGraphs = new EventEmitter();
@@ -60,14 +72,8 @@ export class ExperimentGraphsComponent {
   @Output() toggleSettings = new EventEmitter();
 
   @Input() set splitSize(splitSize: number) {
-    // this.changeDetection.detectChanges();
-    const options = {
-      root: this.allMetrics.nativeElement,
-      rootMargin: '0px',
-      threshold: 0.1,
-    };
-    this.observer = new IntersectionObserver(this.graphInView.bind(this, 'resize'), options);
     this.prepareRedraw();
+    setTimeout(() => this.graphInView(this.visibleEntries));
   }
 
   @Input() showSettings: boolean = false;
@@ -81,7 +87,7 @@ export class ExperimentGraphsComponent {
     Object.values(this.graphsData).forEach((graphs: any[]) => {
       graphs.forEach((graph: Plotly.Frame) => {
         if (getOr(0, 'layout.images.length', graph) > 0) {
-          graph.layout.images.forEach((image: Plotly.Image) => image.source = this.adminService.signUrlIfNeeded(image.source));
+          graph.layout.images.forEach((image: Plotly.Image) => image.source = this.adminService.signUrlIfNeeded(image.source, false, false));
         }
       });
     });
@@ -94,7 +100,7 @@ export class ExperimentGraphsComponent {
       threshold: 0.1
     };
 
-    this.observer = new IntersectionObserver(this.graphInView.bind(this, 'redraw'), options);
+    this.observer = new IntersectionObserver(this.graphInView.bind(this), options);
     this.prepareRedraw();                                     // to apply on updated graphs
 
   }
@@ -121,7 +127,8 @@ export class ExperimentGraphsComponent {
     this.observeGraphs();
   }
 
-  graphInView(redrawMode, entries) {
+  graphInView(entries: IntersectionObserverEntry[]) {
+    this.maintainVisibleEntries(entries);
     for (let i = 0; i < entries.length; i++) {
       if (entries[i].intersectionRatio === 0) {
         continue;
@@ -129,11 +136,21 @@ export class ExperimentGraphsComponent {
       const el = entries[i].target;
       const graphComponent = this.allGraphs.find(graphComp => graphComp.identifier === el.id);
       if (!graphComponent.alreadyDrawn || graphComponent.shouldRefresh) {
-        graphComponent.drawGraph(true, redrawMode === 'resize');
+        graphComponent.drawGraph(true);
       }
     }
   }
 
+  private maintainVisibleEntries(entries: IntersectionObserverEntry[]) {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        this.visibleEntries.push(entry);
+      } else {
+        this.visibleEntries = this.visibleEntries.filter(visEntry => visEntry.target !== entry.target);
+      }
+    });
+  }
+
   sortGraphsData(data) {
     const dataCopy = {};
     for (const key in data) {
@@ -153,4 +170,8 @@ export class ExperimentGraphsComponent {
   trackByIdFn(metric, index, item) {
     return metric + item.layout.title + item.iter;
   }
+
+  isWidthBigEnough() {
+    return this.el.nativeElement.clientWidth > this.breakPoint;
+  }
 }
diff --git a/src/app/webapp-common/shared/experiment-graphs/single-graph/plotly-graph-base.ts b/src/app/webapp-common/shared/experiment-graphs/single-graph/plotly-graph-base.ts
index 0f115bb0..b2f12433 100644
--- a/src/app/webapp-common/shared/experiment-graphs/single-graph/plotly-graph-base.ts
+++ b/src/app/webapp-common/shared/experiment-graphs/single-graph/plotly-graph-base.ts
@@ -1,7 +1,9 @@
 import {hslToRgb, rgbToHsl} from '../../services/color-hash/color-hash.utils';
 import {Subscription} from 'rxjs';
-import {Input, OnDestroy, Directive} from '@angular/core';
+import {Input, OnDestroy, Directive, Renderer2, ElementRef} from '@angular/core';
 import {Data, Frame, Layout, LayoutAxis, Legend, PlotData} from 'plotly.js';
+import {selectScaleFactor} from '../../../core/reducers/view-reducer';
+import {Store} from '@ngrx/store';
 
 export interface ExtFrame extends  Omit<Frame, 'data' | 'layout'> {
   iter: number;
@@ -18,7 +20,7 @@ export interface ExtLegend extends Legend {
   valign:  'top' | 'middle' | 'bottom';
 }
 
-export interface ExtLayoutAxis extends LayoutAxis {
+export interface ExtLayoutAxis extends Omit<LayoutAxis, 'spikesnap'> {
   spikesnap: string;
 }
 
@@ -43,8 +45,25 @@ export class PlotlyGraphBase implements OnDestroy {
   public isSmooth = false;
   public colorSub: Subscription;
   @Input() isCompare: boolean = false;
+  protected dimension: number;
+  protected scale: number;
+  private scaleSub: Subscription;
 
-  constructor() {
+  constructor(
+    protected store: Store,
+    protected renderer: Renderer2,
+    protected elementRef: ElementRef
+  ) {
+    this.scaleSub = store.select(selectScaleFactor).subscribe(scaleFactor => {
+      if (scaleFactor !== 100) {
+        this.dimension = 1 / scaleFactor * 10000;
+        this.scale = scaleFactor / 100;
+        this.renderer.setStyle(this.elementRef.nativeElement, 'transform', `scale(${this.scale})`);
+        this.renderer.setStyle(this.elementRef.nativeElement, 'transform-origin', '50% 0%');
+        this.renderer.setStyle(this.elementRef.nativeElement, 'min-height', '600px');
+        this.renderer.setStyle(this.elementRef.nativeElement, 'width', `${this.dimension}%`);
+      }
+    });
   }
 
   public _reColorTrace(trace, newColor: string[]) {
@@ -111,9 +130,8 @@ export class PlotlyGraphBase implements OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (this.colorSub) {
-      this.colorSub.unsubscribe();
-    }
+    this.colorSub?.unsubscribe();
+    this.scaleSub?.unsubscribe();
   }
 
 }
diff --git a/src/app/webapp-common/shared/experiment-graphs/single-graph/single-graph.component.scss b/src/app/webapp-common/shared/experiment-graphs/single-graph/single-graph.component.scss
index ccbbc2fb..b14b0f40 100644
--- a/src/app/webapp-common/shared/experiment-graphs/single-graph/single-graph.component.scss
+++ b/src/app/webapp-common/shared/experiment-graphs/single-graph/single-graph.component.scss
@@ -9,11 +9,11 @@
     border: 1px solid #efefef;
     margin-left: -1px;
     margin-top: -1px;
+    overflow-y: hidden;
+    overflow-x: auto;
 
     &.whitebg-table {
       height: unset;
-      overflow-y: hidden;
-      overflow-x: auto;
       padding-bottom:12px;
       margin-left: 24px;
       margin-right: 24px;
@@ -52,4 +52,8 @@
   /deep/ .infolayer > .g-gtitle > .gtitle {
     transform: translateY(12px);
   }
+  /deep/ .modebar-container svg.icon {
+    height: unset;
+    width: unset;
+  }
 }
diff --git a/src/app/webapp-common/shared/experiment-graphs/single-graph/single-graph.component.ts b/src/app/webapp-common/shared/experiment-graphs/single-graph/single-graph.component.ts
index d154cd28..31ca4765 100644
--- a/src/app/webapp-common/shared/experiment-graphs/single-graph/single-graph.component.ts
+++ b/src/app/webapp-common/shared/experiment-graphs/single-graph/single-graph.component.ts
@@ -1,9 +1,9 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentFactoryResolver, ElementRef, Input, Renderer2, ViewChild, ViewContainerRef, HostListener,} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewChild} from '@angular/core';
 import {ColorHashService} from '../../services/color-hash/color-hash.service';
 import {chooseTimeUnit, wordWrap} from '../../../tasks/tasks.utils';
 import {attachColorChooser} from '../../ui-components/directives/choose-color/choose-color.directive';
 import {debounceTime, filter} from 'rxjs/operators';
-import {cloneDeep, escape, getOr} from 'lodash/fp';
+import {cloneDeep, escape, getOr, get} from 'lodash/fp';
 import {AxisType, Config, Data, ModeBarDefaultButtons, Root, Margin, Datum, PlotData} from 'plotly.js';
 import {ScalarKeyEnum} from '../../../../business-logic/model/events/scalarKeyEnum';
 import {ExtFrame, ExtLayout, PlotlyGraphBase} from './plotly-graph-base';
@@ -25,14 +25,8 @@ export class SingleGraphComponent extends PlotlyGraphBase {
   private chart_data: any;
   public shouldRefresh: boolean = false;
   private yaxisType: AxisType = 'linear';
-  private timer: NodeJS.Timer;
   public type: PlotData['type'] | 'table';
-
-  @HostListener('window:resize')
-  onResize() {
-    clearTimeout(this.timer);
-    this.timer = setTimeout(() => this.drawGraph(false, true), 200);
-  }
+  private previousOffsetWidth: number;
 
   @Input() identifier: string;
 
@@ -58,7 +52,7 @@ export class SingleGraphComponent extends PlotlyGraphBase {
       clearTimeout(this.smoothnessTimeout);
       this.smoothnessTimeout = window.setTimeout(() => {
           this._chart = cloneDeep(this.originalChart);
-          this.drawGraph(true, false);
+          this.drawGraph(true);
         }
         , 400);
     }
@@ -70,38 +64,38 @@ export class SingleGraphComponent extends PlotlyGraphBase {
   }
 
   @ViewChild('drawHere', {static: true}) singleGraphContainer: ElementRef;
-  @ViewChild('drawHere', {read: ViewContainerRef, static: true}) singleGraphContainerViewRef: ViewContainerRef;
   private chartElm: any;
   private _smoothWeight: number;
 
 
   constructor(
-    public renderer: Renderer2,
-    public colorHash: ColorHashService,
-    public changeDetector: ChangeDetectorRef,
-    private store: Store<any>
+    protected renderer: Renderer2,
+    private colorHash: ColorHashService,
+    private changeDetector: ChangeDetectorRef,
+    protected elementRef: ElementRef,
+    protected store: Store<any>
   ) {
-    super();
+    super(store, renderer, elementRef);
   }
 
-
-  drawGraph(forceRedraw = false, resizeOnly = false) {
+  drawGraph(forceRedraw = false) {
     const container = this.singleGraphContainer.nativeElement;
     if (this.alreadyDrawn && !forceRedraw && !this.shouldRefresh) {
       return;
     }
-    this.alreadyDrawn = this.alreadyDrawn && !forceRedraw  || resizeOnly;
+    this.alreadyDrawn = this.alreadyDrawn && !forceRedraw;
     this.shouldRefresh = false;
     const [root, data, layout, config, graphEl] = this.drawPlotly();
     if (!document.body.contains(graphEl)) {
       container.appendChild(graphEl);
     }
     // root.height > 0 to avoid rare plotly exception
-    if (resizeOnly && (root as HTMLElement).offsetHeight > 0) {
-      Plotly.relayout(root, {width: Math.max(getOr(0, 'data[0].cells.values.length', data) * 100, this.singleGraphContainer.nativeElement.offsetWidth)});
-    } else {
-      Plotly.react(root, data, layout, config);
+    if (this.singleGraphContainer.nativeElement.offsetWidth !== this.previousOffsetWidth && (root as HTMLElement).offsetHeight > 0) {
+      Plotly.relayout(root, {width: Math.max(getOr(0, 'data[0].cells.values.length', data) * 100, this.singleGraphContainer.nativeElement.offsetWidth - 3)});
+      this.previousOffsetWidth = this.singleGraphContainer.nativeElement.offsetWidth - 3;
     }
+    Plotly.react(root, data, layout, config);
+
 
     this.initColorSubscription();
     if (!this.alreadyDrawn) {
@@ -147,7 +141,7 @@ export class SingleGraphComponent extends PlotlyGraphBase {
         'valign': 'top',
         'font': {'color': '#000', 'size': 12, 'family': 'sans-serif'}
       },
-      showlegend: graph.layout ? graph.layout.showlegend !== false : true,
+      showlegend: (this.chartElm.layout?.hasOwnProperty('showlegend')) ? this.chartElm.layout.showlegend : graph.layout?.showlegend !== false,
       margin: graph.layout.margin ? graph.layout.margin : {'l': 70, 'r': 50, 't': 80, 'b': 90, 'pad': 0, 'autoexpand': true} as Partial<Margin>,
     } as Partial<ExtLayout>;
 
@@ -176,7 +170,7 @@ export class SingleGraphComponent extends PlotlyGraphBase {
         },
         line: {width: 0, color: 'transparent'}
       };
-      layout.width = Math.max(getOr(0, 'data[0].cells.values.length', graph) * 100, this.singleGraphContainer.nativeElement.offsetWidth);
+      layout.width = Math.max(getOr(0, 'data[0].cells.values.length', graph) * 100, this.singleGraphContainer.nativeElement.offsetWidth - 3);
       layout.title = {
         ...layout.title as {},
         xanchor: 'left',
@@ -198,7 +192,6 @@ export class SingleGraphComponent extends PlotlyGraphBase {
     }
     const barLayoutConfig = {
       hovermode: 'closest',
-      showlegend: graph.layout ? graph.layout.showlegend !== false : true
     };
 
     const scatterLayoutConfig: Partial<ExtLayout> = {
@@ -228,7 +221,6 @@ export class SingleGraphComponent extends PlotlyGraphBase {
         fixedrange: false,
         type: this.yaxisType,
       },
-      showlegend: graph.layout ? graph.layout.showlegend !== false : true
     };
 
     if (['multiScalar', 'scalar'].includes(graph.layout.type)) {
@@ -239,14 +231,7 @@ export class SingleGraphComponent extends PlotlyGraphBase {
     if (['bar'].includes(this.type)) {
       layout = {...layout, ...barLayoutConfig} as Partial<ExtLayout>;
     }
-    const modBarButtonsToAdd: Plotly.ModeBarButton[] = [{
-      name: 'Download JSON',
-      title: 'Download JSON',
-      icon: this.getIcon(),
-      click: () => {
-        this.downloadGraphAsJson(cloneDeep(this.originalChart));
-      }
-    }];
+    const modBarButtonsToAdd: Plotly.ModeBarButton[] = [];
     if (['multiScalar', 'scalar'].includes(graph.layout.type)) {
       modBarButtonsToAdd.push({
         name: 'Log view',
@@ -268,12 +253,38 @@ export class SingleGraphComponent extends PlotlyGraphBase {
           path.attributes[0].value = icon.path;
           this.smoothnessTimeout = window.setTimeout(() => {
               this._chart = cloneDeep(this.originalChart);
-              this.drawGraph(true, false);
+              this.drawGraph(true);
             }
             , 400);
         }
       });
     }
+    if (!['table'].includes(get('data[0].type', graph)) && graph.layout?.showlegend !== false) {
+      modBarButtonsToAdd.push({
+        name: 'Hide legend',
+        title: this.getHideButtonTitle(),
+        icon: this.getToggleLegendIcon(),
+        click: (element, ev: any) => {
+          const pathElement = ev.target.tagName === 'path' ? ev.target : (ev.target as HTMLElement).querySelector('path');
+          const svg = pathElement.parentElement;
+          pathElement.style.fill = this.chartElm.layout?.showlegend ? 'rgb(77, 102, 255)' : 'rgb(143, 157, 201)';
+          svg.parentElement.attributes['data-title'].value = this.getHideButtonTitle();
+          this.chartElm.layout.showlegend = !this.chartElm.layout.showlegend;
+          if (this.chartElm.layout.showlegend) {
+            setTimeout(() => this.subscribeColorButtons(this.singleGraphContainer.nativeElement), 200);
+          }
+          Plotly.relayout(this.chartElm, {showlegend: this.chartElm.layout.showlegend});
+        }
+      });
+    }
+    modBarButtonsToAdd.push({
+      name: 'Download JSON',
+      title: 'Download JSON',
+      icon: this.getIcon(),
+      click: () => {
+        this.downloadGraphAsJson(cloneDeep(this.originalChart));
+      }
+    });
     const config = {
       'modeBarButtonsToRemove': ['sendDataToCloud'] as ModeBarDefaultButtons[],
       'displaylogo': false,
@@ -462,6 +473,17 @@ export class SingleGraphComponent extends PlotlyGraphBase {
     };
   }
 
+  getToggleLegendIcon() {
+    return {
+      'width': 1000,
+      'fill': 'rgb(77, 102, 255)',
+      'path': 'M200,250H50a50,50,0,0,1,0-100H200a50,50,0,0,1,0,100Zm800-50a50,50,0,0,0-50-50H400a50,50,0,0,0,0,100H950A50,50,0,0,0,1000,200ZM250,400a50,50,0,0,0-50-50H50a50,50,0,0,0,0,100H200A50,50,0,0,0,250,400Zm750,0a50,50,0,0,0-50-50H400a50,50,0,0,0,0,100H950A50,50,0,0,0,1000,400ZM250,600a50,50,0,0,0-50-50H50a50,50,0,0,0,0,100H200A50,50,0,0,0,250,600Zm750,0a50,50,0,0,0-50-50H400a50,50,0,0,0,0,100H950A50,50,0,0,0,1000,600ZM250,800a50,50,0,0,0-50-50H50a50,50,0,0,0,0,100H200A50,50,0,0,0,250,800Zm750,0a50,50,0,0,0-50-50H400a50,50,0,0,0,0,100H950A50,50,0,0,0,1000,800Z',
+      'ascent': 1000,
+      'descent': 0,
+      'transform': 'translate(0, -100)'
+    };
+  }
+
   getLogIcon(onOrOff: boolean) {
     if (!onOrOff) {
       return {
@@ -498,5 +520,7 @@ export class SingleGraphComponent extends PlotlyGraphBase {
     }
   }
 
+  private getHideButtonTitle() {
+    return this.chartElm.layout?.showlegend ? 'Show legend' : 'Hide legend';
+  }
 }
-
diff --git a/src/app/webapp-common/shared/experiment-info-header-status-icon-label/experiment-info-header-status-icon-label.component.html b/src/app/webapp-common/shared/experiment-info-header-status-icon-label/experiment-info-header-status-icon-label.component.html
index 03744f8f..1ab5862d 100644
--- a/src/app/webapp-common/shared/experiment-info-header-status-icon-label/experiment-info-header-status-icon-label.component.html
+++ b/src/app/webapp-common/shared/experiment-info-header-status-icon-label/experiment-info-header-status-icon-label.component.html
@@ -8,14 +8,14 @@
       </div>
       <span class="view-only d-inline" *ngIf="viewOnly === true">  (view only) </span>
     </div>
-    <div>
-      <button *ngIf="showMaximize" class="btn btn-icon" (click)="maximizedClicked.emit()"
-        smTooltip="View full screen" position="left">
-        <i class="icon i-info-maximize"></i>
-      </button>
-      <button class="btn btn-icon" (click)="closeInfoClicked.emit()">
-        <i class="icon i-dialog-x pointer"></i>
-      </button>
+    <div class="right-buttons d-flex align-items-center">
+      <div *ngIf="showMaximize"  (click)="maximizedClicked.emit()"
+        smTooltip="View full screen" position="left" class="ico-container">
+        <i class="al-icon al-ico-info-max pointer"></i>
+      </div>
+      <div (click)="closeInfoClicked.emit()" class="d-flex align-items-center ico-container">
+        <i class="al-icon al-ico-dialog-x pointer"></i>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/app/webapp-common/shared/experiment-info-header-status-icon-label/experiment-info-header-status-icon-label.component.scss b/src/app/webapp-common/shared/experiment-info-header-status-icon-label/experiment-info-header-status-icon-label.component.scss
index 8afbc2f8..1011d335 100644
--- a/src/app/webapp-common/shared/experiment-info-header-status-icon-label/experiment-info-header-status-icon-label.component.scss
+++ b/src/app/webapp-common/shared/experiment-info-header-status-icon-label/experiment-info-header-status-icon-label.component.scss
@@ -6,6 +6,10 @@
     justify-content: center;
     margin-left: 5px;
   }
+  .ico-container{
+    margin-right: 6px;
+    display: flex;
+  }
 
   .icon {
     margin: auto 0;
@@ -30,11 +34,16 @@
   .queued,
   .in_progress,
   .published {
+    color: $blue-600;
     opacity: 0.8;
     font-family: Heebo;
     font-size: 11px;
     font-weight: 500;
-    color: #38446e;
+    .al-icon{
+      &:hover{
+        color: $blue-800;
+      };
+    }
   }
 
   .middle {
diff --git a/src/app/webapp-common/shared/pipes/shared-pipes.module.ts b/src/app/webapp-common/shared/pipes/shared-pipes.module.ts
index 3a713eb3..9a2b2873 100644
--- a/src/app/webapp-common/shared/pipes/shared-pipes.module.ts
+++ b/src/app/webapp-common/shared/pipes/shared-pipes.module.ts
@@ -29,13 +29,18 @@ import {ToPercentagePipe} from './to-precentage.pipe';
 import {ShowSelectedFirstPipe} from './show-selected-first.pipe';
 import {CountPipe} from './count.pipe';
 import {LabelValuePipe} from './label-value.pipe';
+import {HideHashTitlePipe} from './hide-hash-title.pipe';
+import {safeAngularUrlParameterPipe} from './safeAngularUrlParameter.pipe';
+import {ReplaceViaMapPipe} from './replaceViaMap';
+import {FilterByIdPipe} from './filterById.pipe';
+import {FilterOutPipe} from './filterOut.pipe';
 
 
 const pipes = [
   CamelToTitlePipe, FilenameFromPath, FilterPipe, FloorPipe, KeyValuePipe, NAPipe, SortPipe, IsVideoPipe, IsAudioPipe,
   JoinPipe, KeyvalPipe, LabelValuePipe, NoUnderscorePipe, NumberToKPipe, UniqueByPipe, MsToHoursPipe, MsToSecPipe,
-  ToExponentialPipe, HighlightSearchTextPipe, HideHashPipe, TimeAgoPipe, TimeTillNowPipe, HasExampleItemPipe,
-  AdvancedFilterPipe, SafePipe, SelectOptionValueToLabelPipe, ToPercentagePipe
+  ToExponentialPipe, HighlightSearchTextPipe, HideHashPipe, HideHashTitlePipe, TimeAgoPipe, TimeTillNowPipe, HasExampleItemPipe,safeAngularUrlParameterPipe,
+  AdvancedFilterPipe, SafePipe, SelectOptionValueToLabelPipe, ToPercentagePipe, ReplaceViaMapPipe, FilterByIdPipe, FilterOutPipe
 ];
 
 @NgModule({
diff --git a/src/app/webapp-common/shared/project-create-dialog/project-create-dialog.component.html b/src/app/webapp-common/shared/project-create-dialog/project-create-dialog.component.html
index 7e12e97a..6cc65d53 100644
--- a/src/app/webapp-common/shared/project-create-dialog/project-create-dialog.component.html
+++ b/src/app/webapp-common/shared/project-create-dialog/project-create-dialog.component.html
@@ -1,4 +1,4 @@
-<sm-dialog-template iconClass="i-projects" header="NEW PROJECT">
+<sm-dialog-template iconClass="al-icon al-ico-projects al-color blue-300" header="NEW PROJECT">
   <sm-create-new-project-form [projects]="projects$| async" (projectCreated)="createProject($event)">
   </sm-create-new-project-form>
 </sm-dialog-template>
diff --git a/src/app/webapp-common/shared/project-create-dialog/project-create-dialog.effects.ts b/src/app/webapp-common/shared/project-create-dialog/project-create-dialog.effects.ts
index b0466945..26ce2afd 100644
--- a/src/app/webapp-common/shared/project-create-dialog/project-create-dialog.effects.ts
+++ b/src/app/webapp-common/shared/project-create-dialog/project-create-dialog.effects.ts
@@ -47,7 +47,7 @@ export class ProjectCreateDialogEffects {
   @Effect()
   getAllProjects = this.actions.pipe(
     ofType<createNewProjectActions.GetProjects>(CREATE_PROJECT_ACTIONS.GET_PROJECTS),
-    switchMap(action => this.projectsApiService.projectsGetAllEx({})
+    switchMap(action => this.projectsApiService.projectsGetAllEx({only_fields:['name']})
       .pipe(
         flatMap(res => [new createNewProjectActions.SetProjects(res.projects)]),
         catchError(error => [new RequestFailed(error)])
diff --git a/src/app/webapp-common/shared/project-create-dialog/project-create-dialog.reducer.ts b/src/app/webapp-common/shared/project-create-dialog/project-create-dialog.reducer.ts
index 6605e595..8435dbe3 100644
--- a/src/app/webapp-common/shared/project-create-dialog/project-create-dialog.reducer.ts
+++ b/src/app/webapp-common/shared/project-create-dialog/project-create-dialog.reducer.ts
@@ -1,6 +1,7 @@
 import {Project} from '../../../business-logic/model/projects/project';
 import {createFeatureSelector, createSelector} from '@ngrx/store';
 import {CREATE_PROJECT_ACTIONS} from './project-create-dialog.actions';
+import {sortBy} from 'lodash/fp';
 
 export type CreationStatusEnum = 'success' | 'failed' | 'inProgress';
 export const CREATION_STATUS = {
@@ -28,7 +29,7 @@ export function projectCreateDialogReducer<ActionReducer>(state: ICreateProjectD
     case CREATE_PROJECT_ACTIONS.SET_CREATION_STATUS:
       return {...state, creationStatus: action.payload.creationStatus};
     case CREATE_PROJECT_ACTIONS.SET_PROJECTS:
-      return {...state, projects: action.payload.projects};
+      return {...state, projects: sortBy('name', action.payload.projects)};
     case CREATE_PROJECT_ACTIONS.RESET_STATE:
       return {...createProjectInitState};
     default:
diff --git a/src/app/webapp-common/shared/queue-create-dialog/queue-create-dialog.component.html b/src/app/webapp-common/shared/queue-create-dialog/queue-create-dialog.component.html
index 00a126cf..23b6149c 100644
--- a/src/app/webapp-common/shared/queue-create-dialog/queue-create-dialog.component.html
+++ b/src/app/webapp-common/shared/queue-create-dialog/queue-create-dialog.component.html
@@ -1,4 +1,4 @@
-<sm-dialog-template iconClass="i-queues-icon" [header]="queue.id?'RENAME QUEUE' :'NEW QUEUE'">
+<sm-dialog-template iconClass="al-icon al-ico-queues" [header]="queue.id?'RENAME QUEUE' :'NEW QUEUE'">
   <sm-create-new-queue-form [queues]="queues$| async" (queueCreated)="createQueue($event)" [queue]="queue">
   </sm-create-new-queue-form>
 </sm-dialog-template>
diff --git a/src/app/webapp-common/shared/services/login.service.ts b/src/app/webapp-common/shared/services/login.service.ts
index acf26351..9a1aac07 100644
--- a/src/app/webapp-common/shared/services/login.service.ts
+++ b/src/app/webapp-common/shared/services/login.service.ts
@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {catchError, map, switchMap, tap} from 'rxjs/operators';
+import {catchError, filter, map, switchMap, tap} from 'rxjs/operators';
 import {HTTP} from '../../../app.constants';
 import {UsersGetAllResponse} from '../../../business-logic/model/users/usersGetAllResponse';
 import {AuthCreateUserResponse} from '../../../business-logic/model/auth/authCreateUserResponse';
@@ -8,6 +8,10 @@ import {environment} from '../../../../environments/environment';
 import {v1 as uuidV1} from 'uuid';
 import {ApiAuthService} from '../../../business-logic/api-services/auth.service';
 import {Observable, of} from 'rxjs';
+import {MatDialog} from '@angular/material/dialog';
+import {ConfirmDialogComponent} from '../ui-components/overlay/confirm-dialog/confirm-dialog.component';
+import {AuthFixedUsersModeExResponse} from '../../../business-logic/model/FixedUserModeExResponse';
+import {clone} from 'lodash/fp';
 
 export type LoginMode = 'simple' | 'password';
 
@@ -25,8 +29,12 @@ export class LoginService {
   private userSecret: string;
   private companyID: string;
   private _loginMode;
+  private _guestUser: { enabled: boolean; username: string; password: string };
+  get guestUser () {
+    return clone(this._guestUser);
+  }
 
-  constructor(private httpClient: HttpClient, private authApi: ApiAuthService) {
+  constructor(private httpClient: HttpClient, private authApi: ApiAuthService, private dialog: MatDialog) {
   }
 
   initCredentials() {
@@ -43,7 +51,7 @@ export class LoginService {
         this.userSecret = credentials.userSecret;
         this.companyID = credentials.companyID;
       }),
-      catchError( () => of(fromEnv()))
+      catchError(() => of(fromEnv()))
     );
   }
 
@@ -59,10 +67,17 @@ export class LoginService {
     if (this._loginMode !== undefined) {
       return of(this._loginMode);
     } else {
-      return this.authApi.authFixedUsersMode({})
+      return (this.authApi.authFixedUsersMode({}) as Observable<AuthFixedUsersModeExResponse>)
         .pipe(
-          map((res) => res.enabled ? LoginModeEnum.password : LoginModeEnum.simple),
-          tap((mode: LoginMode) => this._loginMode = mode));
+          // for testing: map(res => ({...res, server_errors: {missed_es_upgrade: true}}) ),
+          tap(res => (this.shouldOpenServerError(res.server_errors)) && this.openEs7MessageDialog(res.server_errors)),
+          filter(res => !this.shouldOpenServerError(res.server_errors)),
+          tap((res: AuthFixedUsersModeExResponse) => {
+            this._loginMode = res.enabled ? LoginModeEnum.password : LoginModeEnum.simple;
+            this._guestUser = res.guest;
+          }),
+          map(() => this._loginMode)
+        );
     }
   }
 
@@ -108,4 +123,41 @@ export class LoginService {
           callback(res);
         }));
   }
+
+  private shouldOpenServerError(serverErrors: {missed_es_upgrade: boolean; es_connection_error: boolean}) {
+    return serverErrors?.missed_es_upgrade || serverErrors?.es_connection_error;
+  }
+
+  private openEs7MessageDialog(serverErrors: {missed_es_upgrade: boolean; es_connection_error: boolean}) {
+
+    // Mocking application header
+    const imgElement = new Image();
+    imgElement.setAttribute('src', '../../../../assets/logo-white.svg');
+    imgElement.setAttribute('style', 'width: 100%; height: 64px; background-color: #141822; padding: 15px;');
+    document.body.appendChild(imgElement);
+
+    const body = `The Trains Server database seems to be unavailable.<BR>Possible reasons for this state are:<BR><BR>
+<ul>
+  ${serverErrors?.missed_es_upgrade ? '<li>Upgrading the Trains Server from a version earlier than v0.16 without performing the required data migration (see <a target="_blank" href="https://allegro.ai/docs/deploying_trains/trains_server_es7_migration/">instructions</a>).</li>' : ''}
+  <li>Misconfiguration of the Elasticsearch container storage: Check the directory mappings in the docker-compose YAML configuration file
+     are correct and the target directories have the right permissions (see <a target="_blank" href="https://allegro.ai/docs/deploying_trains/trains_deploy_overview/#option-3-a-self-hosted-trains-server">documentation</a>).</li>
+  <li>Other errors in the database startup sequence: Check the elasticsearch logs in the elasticsearch container for problem description.</li>
+</ul>
+<BR>
+After the issue is resolved and Trains Server is up and running, reload this page.`;
+
+    const confirmDialogRef = this.dialog.open(ConfirmDialogComponent, {
+      disableClose: true,
+      data: {
+        title: 'Database Error',
+        body,
+
+        yes: 'Reload',
+        iconClass: 'i-alert'
+      }
+    });
+    confirmDialogRef.afterClosed().subscribe(() => {
+      window.location.reload();
+    });
+  }
 }
diff --git a/src/app/webapp-common/shared/services/ui-updates.service.ts b/src/app/webapp-common/shared/services/ui-updates.service.ts
index 9a3f23f2..aadde73c 100644
--- a/src/app/webapp-common/shared/services/ui-updates.service.ts
+++ b/src/app/webapp-common/shared/services/ui-updates.service.ts
@@ -17,7 +17,6 @@ export class UiUpdatesService {
   }
 
   checkForUiUpdate() {
-    //remove the assets before qa
     window.setInterval(this.checkForUpdate.bind(this), (1000 * 60  * 3));
   }
 
diff --git a/src/app/webapp-common/shared/shared.module.ts b/src/app/webapp-common/shared/shared.module.ts
index 1ca8574c..e455bb90 100644
--- a/src/app/webapp-common/shared/shared.module.ts
+++ b/src/app/webapp-common/shared/shared.module.ts
@@ -26,6 +26,8 @@ import {ExperimentRefreshComponent} from './components/experiment-refresh/experi
 import {LeavingBeforeSaveAlertGuard} from './guards/leaving-before-save-alert.guard';
 import {CustomColumnsListComponent} from './components/custom-columns-list/custom-columns-list.component';
 import { BaseContextMenuComponent } from './components/base-context-menu/base-context-menu.component';
+import {EntityFooterComponent} from './entity-page/entity-footer/entity-footer.component';
+import {SharedModule} from '../../shared/shared.module';
 
 const _declarations = [
   ExperimentInfoHeaderStatusProgressBarComponent,
@@ -41,24 +43,26 @@ const _declarations = [
   NgxJsonViewerComponent,
   ExperimentRefreshComponent,
   CustomColumnsListComponent,
+  EntityFooterComponent
 ];
 
 @NgModule({
-  imports     : [
-    CommonModule,
-    RouterModule,
-    FormsModule,
-    ReactiveFormsModule,
-    TableModule,
-    ClipboardModule,
-    UiComponentsModule,
-    SharedPipesModule,
-    MatProgressSpinnerModule,
-    MatButtonToggleModule,
-    MatSnackBarModule,
-    NgxFilesizeModule,
-    ChipsModule
-  ],
+    imports: [
+        CommonModule,
+        RouterModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TableModule,
+        ClipboardModule,
+        UiComponentsModule,
+        SharedPipesModule,
+        MatProgressSpinnerModule,
+        MatButtonToggleModule,
+        MatSnackBarModule,
+        NgxFilesizeModule,
+        ChipsModule,
+        SharedModule
+    ],
   declarations: [
     _declarations,
     BaseContextMenuComponent,
diff --git a/src/app/webapp-common/shared/ui-components/buttons/neon-button/neon-button.component.scss b/src/app/webapp-common/shared/ui-components/buttons/neon-button/neon-button.component.scss
index 551eccf6..1b7f8967 100644
--- a/src/app/webapp-common/shared/ui-components/buttons/neon-button/neon-button.component.scss
+++ b/src/app/webapp-common/shared/ui-components/buttons/neon-button/neon-button.component.scss
@@ -21,6 +21,6 @@
   font-size: 12px;
   font-weight: bold;
   text-align: center;
-  color: $dark-grey-blue-two;
+  color: $blue-500;
 }
 
diff --git a/src/app/webapp-common/shared/ui-components/buttons/toggle-archive/toggle-archive.component.scss b/src/app/webapp-common/shared/ui-components/buttons/toggle-archive/toggle-archive.component.scss
index 75ed5f8b..8dde8260 100644
--- a/src/app/webapp-common/shared/ui-components/buttons/toggle-archive/toggle-archive.component.scss
+++ b/src/app/webapp-common/shared/ui-components/buttons/toggle-archive/toggle-archive.component.scss
@@ -1,6 +1,6 @@
 button {
-  width: 138px;
   .button-label {
+    margin-left: 12px;
     text-align: right;
   }
 }
diff --git a/src/app/webapp-common/shared/ui-components/data/checked-filter-list/checked-filter-list.component.scss b/src/app/webapp-common/shared/ui-components/data/checked-filter-list/checked-filter-list.component.scss
index ba77b23a..17ba93a1 100644
--- a/src/app/webapp-common/shared/ui-components/data/checked-filter-list/checked-filter-list.component.scss
+++ b/src/app/webapp-common/shared/ui-components/data/checked-filter-list/checked-filter-list.component.scss
@@ -41,7 +41,7 @@
     }
 
     &:hover {
-      background-color: $very-light-blue;
+      background-color: $blue-50;
     }
   }
 
diff --git a/src/app/webapp-common/shared/ui-components/data/checked-filter-list/checked-filter-list.component.ts b/src/app/webapp-common/shared/ui-components/data/checked-filter-list/checked-filter-list.component.ts
index 643e0ed8..a56c133c 100644
--- a/src/app/webapp-common/shared/ui-components/data/checked-filter-list/checked-filter-list.component.ts
+++ b/src/app/webapp-common/shared/ui-components/data/checked-filter-list/checked-filter-list.component.ts
@@ -63,7 +63,7 @@ export class CheckedFilterListComponent {
     this.clearSelection.emit();
   }
 
-  trackByFn(item) {
+  trackByFn(index: number, item) {
     return item.value;
   }
 }
diff --git a/src/app/webapp-common/shared/ui-components/data/code/code.component.scss b/src/app/webapp-common/shared/ui-components/data/code/code.component.scss
index 950db927..c7032e93 100644
--- a/src/app/webapp-common/shared/ui-components/data/code/code.component.scss
+++ b/src/app/webapp-common/shared/ui-components/data/code/code.component.scss
@@ -58,7 +58,7 @@ $generic-font-size: 11px;
       &:hover, &.copied {
         color: $neon-yellow-hover;
       }
-      background-color: $dusk-four;
+      background-color: $blue-600;
     }
 
     .copied-v {
diff --git a/src/app/webapp-common/shared/ui-components/data/grouped-selectable-list/grouped-selectable-list.component.scss b/src/app/webapp-common/shared/ui-components/data/grouped-selectable-list/grouped-selectable-list.component.scss
index ec561bae..55dae4b9 100644
--- a/src/app/webapp-common/shared/ui-components/data/grouped-selectable-list/grouped-selectable-list.component.scss
+++ b/src/app/webapp-common/shared/ui-components/data/grouped-selectable-list/grouped-selectable-list.component.scss
@@ -8,10 +8,6 @@
   /deep/ .mat-expansion-panel-header {
     padding: 0 12px;
 
-    &:hover {
-      background: #f4f7ff !important;
-    }
-
     .mat-expansion-indicator {
       height: 25px;
     }
diff --git a/src/app/webapp-common/shared/ui-components/data/labeled-row/labeled-row.component.scss b/src/app/webapp-common/shared/ui-components/data/labeled-row/labeled-row.component.scss
index 219893e6..07b23933 100644
--- a/src/app/webapp-common/shared/ui-components/data/labeled-row/labeled-row.component.scss
+++ b/src/app/webapp-common/shared/ui-components/data/labeled-row/labeled-row.component.scss
@@ -2,16 +2,16 @@
 
 .labeled-row {
   display: flex;
-  align-content: center;
   align-items: center;
   font-size: 12px;
   padding: 6px 6px 6px 0;
-  height: 100%;
   align-content: flex-start;
 
   .label-container {
-    font-weight: bold;
     width: 155px;
+    font-weight: 500;
+    color: #71758A;
+    font-size: 11px;
   }
 
   .content {
diff --git a/src/app/webapp-common/shared/ui-components/data/selectable-filter-list/selectable-filter-list.component.scss b/src/app/webapp-common/shared/ui-components/data/selectable-filter-list/selectable-filter-list.component.scss
index f437e949..f4c6f3c1 100644
--- a/src/app/webapp-common/shared/ui-components/data/selectable-filter-list/selectable-filter-list.component.scss
+++ b/src/app/webapp-common/shared/ui-components/data/selectable-filter-list/selectable-filter-list.component.scss
@@ -1,3 +1,14 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+sm-selectable-list {
+  flex: 1;
+  overflow: hidden;
+  margin: 0 -16px 0 0;
+}
 .toggle-all {
   margin-top: 2px;
   cursor: pointer;
diff --git a/src/app/webapp-common/shared/ui-components/data/selectable-list/selectable-list.component.html b/src/app/webapp-common/shared/ui-components/data/selectable-list/selectable-list.component.html
index 64d43553..d8aefd41 100644
--- a/src/app/webapp-common/shared/ui-components/data/selectable-list/selectable-list.component.html
+++ b/src/app/webapp-common/shared/ui-components/data/selectable-list/selectable-list.component.html
@@ -6,6 +6,6 @@
     (click)="onItemSelect.emit(item.value)"
   >
     <div class="pointer ellipsis pr-3" [smTooltip]="item.value" [showDelay]="500">{{item.value}}</div>
-    <i (click)="onItemCheck.emit(item.value); $event.stopPropagation()" [class]="checkIcon + ' fa icon'"></i>
+    <i (click)="onItemCheck.emit(item.value); $event.stopPropagation()" class="fa" [class]="checkIcon"></i>
   </li>
 </ul>
diff --git a/src/app/webapp-common/shared/ui-components/data/selectable-list/selectable-list.component.scss b/src/app/webapp-common/shared/ui-components/data/selectable-list/selectable-list.component.scss
index be0298fb..c1ac1ecb 100644
--- a/src/app/webapp-common/shared/ui-components/data/selectable-list/selectable-list.component.scss
+++ b/src/app/webapp-common/shared/ui-components/data/selectable-list/selectable-list.component.scss
@@ -13,7 +13,6 @@ i.icon {
 
 .list {
   height: 100%;
-  width: calc(100% + 16px);
   padding: 0 16px;
   overflow-y: auto;
   overflow-x: hidden;
diff --git a/src/app/webapp-common/shared/ui-components/data/table-card/table-card.component.html b/src/app/webapp-common/shared/ui-components/data/table-card/table-card.component.html
index 6418dbbc..0268e0a9 100644
--- a/src/app/webapp-common/shared/ui-components/data/table-card/table-card.component.html
+++ b/src/app/webapp-common/shared/ui-components/data/table-card/table-card.component.html
@@ -1,4 +1,4 @@
-<div class="table-card" [ngClass]="{'selected':selected, 'odd': odd}">
+<div class="table-card" [ngClass]="{'selected':selected, 'odd': odd, 'checked':checked, 'contexted': activeContextRow?.id ===rowData?.id && contextMenuOpen}">
   <div class="d-flex">
     <div class="d-flex align-items-start justify-content-around content-row mx-2">
       <ng-content select="sm-checkbox-control"></ng-content>
@@ -19,5 +19,5 @@
       </div>
       <ng-content select="sm-tag-list"></ng-content>
       <ng-content select="[compact-columns-data]"></ng-content>
+    </div>
   </div>
-</div>
diff --git a/src/app/webapp-common/shared/ui-components/data/table-card/table-card.component.scss b/src/app/webapp-common/shared/ui-components/data/table-card/table-card.component.scss
index 32f2eadd..f9d25539 100644
--- a/src/app/webapp-common/shared/ui-components/data/table-card/table-card.component.scss
+++ b/src/app/webapp-common/shared/ui-components/data/table-card/table-card.component.scss
@@ -1,23 +1,30 @@
 @import "../../styles/variables";
 
 .table-card {
-  padding: 15px 25px 15px 6px;
-  background-color: $blue-800;
+  padding: 15px 15px 15px 0;
+  min-height: 90px;
 
-  &.odd {
-    background-color: $blue-700;
+  &:hover {
+    background-color: $blue-650;
+  }
+
+  &.checked:not(.selected) {
+    background-color: $blue-500;
+    &:hover, &.contexted {
+      background-color: $blue-550;
+    }
   }
 
   &.selected {
-    background-color: $purple;
-  }
+    background-color: $blue-400;
 
-  /deep/ .created {
-    margin-left: 10px;
+    &:hover {
+      background-color: $blue-480;
+    }
   }
 
   /deep/ sm-experiment-status-icon-label {
-    margin-right: 10px;
+    width: 80px;
   }
 }
 
diff --git a/src/app/webapp-common/shared/ui-components/data/table-card/table-card.component.ts b/src/app/webapp-common/shared/ui-components/data/table-card/table-card.component.ts
index cf98a685..a70b67c1 100644
--- a/src/app/webapp-common/shared/ui-components/data/table-card/table-card.component.ts
+++ b/src/app/webapp-common/shared/ui-components/data/table-card/table-card.component.ts
@@ -4,19 +4,23 @@ import {get} from 'lodash/fp';
 @Component({
   selector   : 'sm-table-card',
   templateUrl: './table-card.component.html',
-  styleUrls  : ['./table-card.component.scss'],
+  styleUrls  : ['./table-card.component.scss']
 })
 export class TableCardComponent {
   public odd: boolean;
   @Input() columns;
   @Input() cardName;
   @Input() rowData;
+  @Input() activeContextRow;
+  @Input() contextMenuOpen;
+
 
   @Input() set rowNumber(rowNumber) {
     this.odd = rowNumber % 2 === 1;
   }
 
   @Input() selected;
+  @Input() checked: boolean;
 
   constructor() {
   }
diff --git a/src/app/webapp-common/shared/ui-components/data/table-diff/table-diff.component.scss b/src/app/webapp-common/shared/ui-components/data/table-diff/table-diff.component.scss
index f6dbb1de..f76557bb 100644
--- a/src/app/webapp-common/shared/ui-components/data/table-diff/table-diff.component.scss
+++ b/src/app/webapp-common/shared/ui-components/data/table-diff/table-diff.component.scss
@@ -7,6 +7,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 87.5%;
 
   &.header {
     font-size: 11px;
@@ -14,6 +16,7 @@
     color: #5a658e;
     border-top: #ededed solid 1px;
     background-color: #f4f7ff;
+    font-family: 'Heebo', sans-serif;
   }
 
   div {
diff --git a/src/app/webapp-common/shared/ui-components/data/table/base-table-view.ts b/src/app/webapp-common/shared/ui-components/data/table/base-table-view.ts
index 03bbfa15..475c748c 100644
--- a/src/app/webapp-common/shared/ui-components/data/table/base-table-view.ts
+++ b/src/app/webapp-common/shared/ui-components/data/table/base-table-view.ts
@@ -1,13 +1,18 @@
 import {TableSelectionState} from '../../../../constants';
 import {allItemsAreSelected} from '../../../utils/shared-utils';
 import {differenceBy, get, unionBy} from 'lodash/fp';
-import {EventEmitter, Input, Output} from '@angular/core';
+import {AfterViewInit, EventEmitter, Input, Output, QueryList, ViewChildren} from '@angular/core';
 import {TableSortOrderEnum} from './table.consts';
+import {filter, take} from 'rxjs/operators';
+import {TableComponent} from './table.component';
 
-export abstract class BaseTableView {
+export abstract class BaseTableView  implements AfterViewInit {
   public selectionState: TableSelectionState;
   protected entitiesKey: string;
-  protected selectedEntitiesKey: string;
+  public selectedEntitiesKey: string;
+  public contextMenuActive: boolean;
+  public table: TableComponent;
+
   @Input() selectionMode: 'multiple' | 'single' | null = 'single';
   @Input() colsOrder: string[];
   @Input() tableSortField: string;
@@ -15,7 +20,17 @@ export abstract class BaseTableView {
   @Input() minimizedView: boolean;
 
   @Output() onColumnsReordered = new EventEmitter<string[]>();
+  @ViewChildren('table') tables: QueryList<TableComponent>;
 
+  ngAfterViewInit(): void {
+    this.tables.changes
+      .pipe(filter((comps: QueryList<TableComponent>) => !!comps.first), take(1))
+      .subscribe((comps: QueryList<TableComponent>) => {
+        this.table = comps.first;
+        window.setTimeout(() => this.table.focusSelected());
+        this.afterTableInit();
+      });
+  }
 
   updateSelectionState() {
     this.selectionState = allItemsAreSelected(this[this.entitiesKey], this[this.selectedEntitiesKey]) ? 'All' : this[this.selectedEntitiesKey].length > 0 ? 'Partial' : 'None';
@@ -37,13 +52,18 @@ export abstract class BaseTableView {
   }
 
   isRowSelected(entity: { id: any }) {
-    if (!entity) {
+    if (!entity || this[this.selectedEntitiesKey]===undefined) {
       return false;
     }
 
     return this[this.selectedEntitiesKey].length > 0 &&
       (this[this.selectedEntitiesKey].some((selectedEntity: { id: any }) => selectedEntity.id === entity.id));
   }
+  setContextMenuStatus(menuStatus: boolean) {
+    this.contextMenuActive = menuStatus;
+  }
 
   abstract emitSelection(selection: any[]);
+
+  abstract afterTableInit(): void;
 }
diff --git a/src/app/webapp-common/shared/ui-components/data/table/table-card-filter-template/table-card-filter-template.component.html b/src/app/webapp-common/shared/ui-components/data/table/table-card-filter-template/table-card-filter-template.component.html
index e2adc492..1b6275ad 100644
--- a/src/app/webapp-common/shared/ui-components/data/table/table-card-filter-template/table-card-filter-template.component.html
+++ b/src/app/webapp-common/shared/ui-components/data/table/table-card-filter-template/table-card-filter-template.component.html
@@ -1,11 +1,13 @@
 <div class="filter-sort-container d-flex align-items-center"
      [ngClass]="isFiltered() ? 'active' : 'deactive'">
   <div class='cell pointer'>
-    <i [class]="'icon md ' + (isFiltered()? 'i-filter-on':'i-filter-off')" mat-button [matMenuTriggerFor]="menu" (menuOpened)="menuOpened.emit()"></i>
+    <i [class]="'icon ' + (isFiltered()? 'i-filter-on':'i-filter-off')" mat-button [matMenuTriggerFor]="menu" (menuOpened)="menuOpened.emit()"></i>
   </div>
   <mat-menu #menu="matMenu" class="table-card-filter-menu" (closed)="closeMenu()">
     <ng-container *ngFor="let option of options | keyvalue">
-      <button mat-menu-item [matMenuTriggerFor]="subMenu"><i [class.hidden]="!isOptionFiltered(option.key)" class="filter-point icon i-v-black xs"></i> {{option.key | titlecase}}</button>
+      <button mat-menu-item [matMenuTriggerFor]="subMenu">
+        <i [class.hidden]="!isOptionFiltered(option.key)" class="filter-point icon i-v-black xs"></i> {{getColName(option.key)}}
+      </button>
       <mat-menu #subMenu="matMenu" class="table-card-filter-menu">
         <form class="filter-form">
           <mat-form-field *ngIf="['users', 'tags'].includes(option.key)" smClickStopPropagation [style.width]="'222px'">
diff --git a/src/app/webapp-common/shared/ui-components/data/table/table-card-filter-template/table-card-filter-template.component.scss b/src/app/webapp-common/shared/ui-components/data/table/table-card-filter-template/table-card-filter-template.component.scss
index 9cb88368..46ef6489 100644
--- a/src/app/webapp-common/shared/ui-components/data/table/table-card-filter-template/table-card-filter-template.component.scss
+++ b/src/app/webapp-common/shared/ui-components/data/table/table-card-filter-template/table-card-filter-template.component.scss
@@ -7,7 +7,7 @@
       font-weight: bold;
 
       &.active {
-        color: $cloudy-blue;
+        color: $blue-250;
       }
     }
     .cell{
diff --git a/src/app/webapp-common/shared/ui-components/data/table/table-card-filter-template/table-card-filter-template.component.ts b/src/app/webapp-common/shared/ui-components/data/table/table-card-filter-template/table-card-filter-template.component.ts
index bcab8c4c..1771e0d3 100644
--- a/src/app/webapp-common/shared/ui-components/data/table/table-card-filter-template/table-card-filter-template.component.ts
+++ b/src/app/webapp-common/shared/ui-components/data/table/table-card-filter-template/table-card-filter-template.component.ts
@@ -1,5 +1,5 @@
 import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
-import {TABLE_SORT_ORDER} from '../table.consts';
+import {ISmCol, TABLE_SORT_ORDER} from '../table.consts';
 import {addOrRemoveFromArray} from '../../../../utils/shared-utils';
 import {MatMenuTrigger} from '@angular/material/menu';
 
@@ -25,9 +25,10 @@ export class TableCardFilterTemplateComponent {
 
   @Input() fixedOptionsSubheader;
   @Input() subValue: string[] = [];
-  @Input() subOptions: Array<{ label: string, value: string }>;
+  @Input() subOptions: {label: string; value: string}[];
+  @Input() options: { [col: string]: { label: string; value: string }[] };
+  @Input() columns: ISmCol[];
   @Output() subFilterChanged = new EventEmitter();
-  @Input() options: { [col: string]: Array<{ label: string, value: string }> };
   @Output() filterChanged = new EventEmitter();
   @Output() menuClosed = new EventEmitter();
   @Output() menuOpened = new EventEmitter();
@@ -72,4 +73,8 @@ export class TableCardFilterTemplateComponent {
     this.searchTerms[key]='';
     this.setSearchTerm({target:{value:''}}, key)
   }
+
+  getColName(id: string) {
+    return this.columns.find(col => col.id === id)?.header || id;
+  }
 }
diff --git a/src/app/webapp-common/shared/ui-components/data/table/table-filter-sort-template/table-filter-sort-template.component.html b/src/app/webapp-common/shared/ui-components/data/table/table-filter-sort-template/table-filter-sort-template.component.html
index 2b176622..183db414 100644
--- a/src/app/webapp-common/shared/ui-components/data/table/table-filter-sort-template/table-filter-sort-template.component.html
+++ b/src/app/webapp-common/shared/ui-components/data/table/table-filter-sort-template/table-filter-sort-template.component.html
@@ -9,7 +9,7 @@
            (searchValueChanged)="searchValueChanged.emit($event.target.value)"
            [searchValue]="searchValue"
            [buttonClass]="'table-filter-button ' + (isFiltered() ? 'active' : 'deactive')"
-           [iconClass]="'icon md ' + (isFiltered()? 'i-filter-on':'i-filter-off')"
+           [iconClass]="'icon ' + (isFiltered()? 'i-filter-on':'i-filter-off')"
            (menuClosed)="menuClosed.emit()"
            (menuOpened)="menuOpened.emit()"
   >
diff --git a/src/app/webapp-common/shared/ui-components/data/table/table-filter-sort-template/table-filter-sort-template.component.scss b/src/app/webapp-common/shared/ui-components/data/table/table-filter-sort-template/table-filter-sort-template.component.scss
index e6a15741..4bdb1270 100644
--- a/src/app/webapp-common/shared/ui-components/data/table/table-filter-sort-template/table-filter-sort-template.component.scss
+++ b/src/app/webapp-common/shared/ui-components/data/table/table-filter-sort-template/table-filter-sort-template.component.scss
@@ -13,7 +13,7 @@
       font-weight: bold;
 
       &.active {
-        color: $cloudy-blue;
+        color: $blue-250;
       }
     }
 
diff --git a/src/app/webapp-common/shared/ui-components/data/table/table.component.html b/src/app/webapp-common/shared/ui-components/data/table/table.component.html
index 1cdaa250..9b13df10 100644
--- a/src/app/webapp-common/shared/ui-components/data/table/table.component.html
+++ b/src/app/webapp-common/shared/ui-components/data/table/table.component.html
@@ -1,8 +1,7 @@
 <p-table
   class="table"
-  *ngIf="!minimizedView"
   dataKey="id"
-  [scrollHeight]="'100%'"
+  [scrollHeight]="'flex'"
   [autoLayout]="false"
   [columns]="columns"
   [selectionMode]="selectionMode"
@@ -15,6 +14,8 @@
   [resizableColumns]="resizableColumns"
   columnResizeMode="expand"
   [scrollable]="resizableColumns"
+  [virtualScroll]="virtualScroll"
+  [virtualRowHeight]="rowHeight"
   (onColReorder)="onColReorder($event)"
   [first]="first"
   [rowHover]="true"
@@ -26,20 +27,25 @@
   (onContextMenuSelect)="openContext($event)"
   #dataTable>
   <ng-template pTemplate="colgroup" let-columns>
-    <colgroup>
+    <colgroup *ngIf="!minView; else: cardColGroup">
       <col *ngFor="let col of columns" [style.width]="col.style?.width">
     </colgroup>
+    <ng-template #cardColGroup>
+      <colgroup>
+        <col style="width: 100%">
+      </colgroup>
+    </ng-template>
   </ng-template>
   <ng-template pTemplate="emptymessage">
     <tr class="no-data-row">
-      <td [attr.colspan]="columns.length" class="no-data">
+      <td [attr.colspan]="columns.length" class="no-data" [class.simple]="simple">
         {{noDataMessage}}
       </td>
     </tr>
   </ng-template>
 
-  <ng-template pTemplate="header" let-columns let-rowData>
-    <tr class="header ui-state-default">
+  <ng-template pTemplate="header" let-columns let-rowData *ngIf="!noHeader">
+    <tr class="header ui-state-default" *ngIf="!minView; else cardHeader">
       <th *ngFor="let col of columns"
           pReorderableColumn
           resizableColumn
@@ -65,53 +71,53 @@
         </ng-container>
       </th>
     </tr>
+    <ng-template #cardHeader></ng-template>
   </ng-template>
   <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
     <tr
       [pSelectableRow]="rowData"
       [pContextMenuRow]="rowData"
-      [style.height.px]="this.rowHeight"
+      [style.height.px]="minView ? this.cardHeight : this.rowHeight"
       [class.even]="(index + 1) % 2 === 0"
+      [class.checked]="isRowSelected(rowData)"
+      [class.simple]="simple"
+      [class.contexted]="activeContextRow?.id ===rowData?.id && contextMenuOpen"
       [class.selected]="selectionMode==='single'? selection?.id === rowData?.id : selection?.includes(rowData)"
+      [class.cards-table]="minView"
       class="pointer"
-      (click)="rowClicked.emit({e: $event, data: rowData})"
+      (click)="!minView && rowClicked.emit({e: $event, data: rowData})"
     >
-      <td *ngFor="let col of columns; index as i" [class.ui-resizable-column]="resizableColumns">
-        <ng-container *ngIf="bodyTemplate">
-          <ng-container *ngTemplateOutlet="bodyTemplate; context: {$implicit: col, rowData: rowData, rowIndex: index}">
+      <ng-container *ngIf="!minView; else cardBody">
+        <td *ngFor="let col of columns; index as i" [class.ui-resizable-column]="resizableColumns" [class.simple]="simple"
+        >
+          <ng-container *ngIf="bodyTemplate">
+            <ng-container *ngTemplateOutlet="bodyTemplate; context: {$implicit: col, rowData: rowData, rowIndex: index}">
+            </ng-container>
           </ng-container>
-        </ng-container>
-        <ng-container *ngIf="!bodyTemplate">
-          {{getBodyData(rowData, col)}}
-        </ng-container>
-      </td>
+          <ng-container *ngIf="!bodyTemplate">
+            {{getBodyData(rowData, col)}}
+          </ng-container>
+        </td>
+      </ng-container>
+      <ng-template #cardBody class=*ngIf="minView">
+        <td class="pointer p-0" role="button">
+          <ng-container
+            *ngTemplateOutlet="cardTemplate;  context: {rowData: rowData, rowNumber: index, selected:  (selectionMode==='single'? selection?.id === rowData.id :  selection?.includes(rowData))}">
+          </ng-container>
+        </td>
+      </ng-template>
     </tr>
     <tr *ngIf="index === rowsNumber - 1 && lazyLoading && !noMoreData" class="table-load-more">
       <td [colSpan]="columns.length" class="load-more-wrapper">
-        <ng-template [ngTemplateOutlet]="loadMoreButton"></ng-template>
+        <button #loadButton
+                class="btn btn-primary"
+                (click)="loadMore()"
+                [style.margin-left.px]="buttonLeft">
+          <i *ngIf="loading" class="load-spinner"></i>
+          {{loading ? 'LOADING...' : 'LOAD MORE' }}
+        </button>
       </td>
     </tr>
   </ng-template>
 </p-table>
 <p-contextMenu #cm [model]="menuItems" class="d-none"></p-contextMenu>
-
-<div class="cards-table" *ngIf="minimizedView">
-  <div *ngFor="let rowData of tableData ; let i= index"
-       class="pointer"
-       role="button"
-       (click)="onCardClicked(rowData)">
-    <ng-container
-      *ngTemplateOutlet="cardTemplate;  context: {rowData: rowData, rowNumber: i, selected:  (selectionMode==='single'? selection?.id === rowData.id :  selection?.includes(rowData))}">
-    </ng-container>
-  </div>
-  <div *ngIf="lazyLoading && !noMoreData" class="load-more-wrapper">
-    <ng-template [ngTemplateOutlet]="loadMoreButton"></ng-template>
-  </div>
-</div>
-
-<ng-template #loadMoreButton>
-  <button class="btn btn-primary" (click)="loadMore()">
-    <i *ngIf="loading" class="load-spinner"></i>
-    {{loading? 'LOADING...': 'LOAD MORE' }}
-  </button>
-</ng-template>
diff --git a/src/app/webapp-common/shared/ui-components/data/table/table.component.scss b/src/app/webapp-common/shared/ui-components/data/table/table.component.scss
index 33c0d542..7c0124dd 100644
--- a/src/app/webapp-common/shared/ui-components/data/table/table.component.scss
+++ b/src/app/webapp-common/shared/ui-components/data/table/table.component.scss
@@ -7,7 +7,7 @@
     padding-left: 6px;
 
     &:hover {
-      background: #8492c2;
+      background: $blue-300;
       background-clip: content-box;
     }
   }
@@ -26,6 +26,10 @@
     background-color: #8492c2;
   }
 
+  /deep/ .ui-table-scrollable-view .ui-table-scrollable-body {
+    flex: 1 1 0 !important;
+  }
+
   .selected-col-header {
     pointer-events: none;
   }
@@ -38,7 +42,6 @@
 
   .load-more-wrapper {
     padding: 32px 0 12px 0;
-    text-align: center;
 
     button {
       padding: 8px 40px;
@@ -60,22 +63,38 @@
 
   .no-data {
     text-align: center;
-    padding-top: 25px;
+    padding: 15px 0 10px 0;
     font-size: 14px;
   }
 
   tr {
-    &:hover:not(.header):not(.selected):not(.no-data-row) {
-      background-color: $blue-600;
+    transition: height 0.5s cubic-bezier(.55,.06,.68,.19);
+    &:hover:not(.header):not(.selected):not(.no-data-row):not(.simple) {
+      background-color: $blue-650;
+    }
+
+    &.checked:not(.header):not(.selected):not(.no-data-row):not(.simple) {
+      background-color: $blue-500;
+      .td{
+        border-bottom-color: $blue-600;
+      }
+
+      &:hover, &.contexted {
+        background-color: $blue-550;
+      }
     }
 
     &.selected {
-      background-color: $purple;
+      .td{
+        border-bottom-color: $blue-600;
+      }
+      background-color: $blue-400;
+
+      &:hover {
+        background-color: $blue-480;
+      }
     }
 
-    &.even:not(.selected):not(:hover) {
-      background-color: $blue-700;
-    }
 
     &.header {
       height: 48px;
@@ -87,6 +106,7 @@
       background-color: $blue-700;
       vertical-align: middle;
       color: $blue-300;
+      border-bottom: 1px solid $blue-600;
 
       .col-header {
         text-align: left !important;
@@ -105,22 +125,31 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      &:not(.no-data):not(.load-more-wrapper){
+        border-bottom: 1px solid #303443;
+        &.simple{
+          border-bottom-color: $blue-100;
+
+        }
+      }
+
+
 
       &.no-data {
-        color: $cloudy-blue;
+        color: $blue-250;
         text-align: center;
-        padding-top: 25px;
+        padding: 15px 0 10px 0;;
       }
     }
   }
 
   :host-context(.light-theme) {
     tr {
-      &:hover:not(.header):not(.no-data-row) {
+      &:hover:not(.header):not(.no-data-row):not(.simple) {
         background-color: $blue-100;
       }
 
-      &.even:not(.selected):not(:hover) {
+      &:not(.even):not(.selected):not(.no-data-row):not(:hover):not(.simple) {
         background-color: $blue-50;
       }
 
@@ -134,13 +163,12 @@
         background-color: white;
         color: $blue-400;
         font-weight: 500;
-        border-bottom: 1px solid #364164;
-
+        border-bottom: none;
       }
 
       td {
         color: $blue-400;
-
+        border-bottom: none;
         &.no-data {
           color: $blue-300;
         }
diff --git a/src/app/webapp-common/shared/ui-components/data/table/table.component.ts b/src/app/webapp-common/shared/ui-components/data/table/table.component.ts
index 6f0f8ea0..df098e00 100644
--- a/src/app/webapp-common/shared/ui-components/data/table/table.component.ts
+++ b/src/app/webapp-common/shared/ui-components/data/table/table.component.ts
@@ -1,7 +1,7 @@
 import {
-  AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component,
-  ContentChildren, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy,
-  OnInit, Output, QueryList, Renderer2, SimpleChanges, TemplateRef, ViewChild
+  AfterContentInit, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component,
+  ContentChildren, ElementRef, EventEmitter, HostListener, Input, OnDestroy,
+  OnInit, Output, QueryList, Renderer2, TemplateRef, ViewChild, ViewChildren
 } from '@angular/core';
 import {get} from 'lodash/fp';
 import {MenuItem, PrimeTemplate} from 'primeng/api';
@@ -9,7 +9,7 @@ import {FilterMetadata} from 'primeng/api/filtermetadata';
 import {ContextMenu} from 'primeng/contextmenu';
 import {Table} from 'primeng/table';
 import {Subject, Subscription} from 'rxjs';
-import {throttleTime} from 'rxjs/operators';
+import {filter, take, throttleTime} from 'rxjs/operators';
 import {custumFilterFunc, custumSortSingle} from './overrideFilterFunc';
 import {ISmCol, TableSortOrderEnum, ColHeaderTypeEnum} from './table.consts';
 import {sortCol} from '../../../utils/tableParamEncode';
@@ -32,39 +32,26 @@ export class TableComponent implements AfterContentInit, AfterViewInit, OnInit,
   private loadMoreSubscription: Subscription;
   private loadMoreDebouncer: Subject<any>;
   public menuItems = [] as MenuItem;
-  private _minimizedView: boolean;
+  minView: boolean;
   private _filters: { [s: string]: FilterMetadata };
 
 
   readonly ColHeaderTypeEnum = ColHeaderTypeEnum;
-  @ViewChild('dataTable') table: Table;
+  table: Table;
+  @ViewChildren('dataTable') public tableComp: QueryList<Table>;
+  loadButton: ElementRef<HTMLDivElement>;
+  @ViewChildren('loadButton') loadButtons: QueryList<ElementRef<HTMLDivElement>>;
   @ViewChild('cm', {static: true}) menu: ContextMenu;
-
   @ContentChildren(PrimeTemplate) templates: QueryList<any>;
   private _tableData: any;
   private _columnsOrder: string[];
   public loading: boolean;
-
-  @HostListener('window:resize')
-  resize() {
-    if (!this.table) {
-      return;
-    }
-    // HACK: mark "scrollHeight" dirty, so it's re-evaluated.
-    if (this.table.scrollHeight.endsWith(' ')) {
-      this.table.scrollHeight = this.table.scrollHeight.slice(0, -1);
-    } else {
-      this.table.scrollHeight += ' ';
-    }
-    // HACK: force scrollbar show/hide recalc
-    setTimeout(() => {
-      this.table.tableService.onValueChange(this.table._value);
-    }, 1);
-  }
+  private scrollLeft = 0;
+  public buttonLeft: number;
 
   @Input() set tableData(tableData) {
     this.loading = false;
-    this.rowsNumber = tableData? tableData.length : 0;
+    this.rowsNumber = tableData ? tableData.length : 0;
     this._tableData = tableData;
   }
 
@@ -97,43 +84,32 @@ export class TableComponent implements AfterContentInit, AfterViewInit, OnInit,
   @Input() sortOrder: TableSortOrderEnum;
   @Input() sortField: string;
   @Input() selection: any;
+  @Input() activeContextRow;
+  @Input() contextMenuOpen = false;
   @Input() first = 0;
   @Input() rowsNumber = 10;
   @Input() selectionMode: 'multiple' | 'single' | null = 'single';
-  @Input() rowHeight = 67;
+  @Input() rowHeight = 48;
+  @Input() cardHeight = 90;
   @Input() lazyLoading = false;
   @Input() keyboardControl: boolean = false;
   @Input() noMoreData: boolean;
   @Input() rowHover: boolean;
+  @Input() noHeader:boolean= false;
+  @Input() simple: boolean =false;
+
 
   @Input() set minimizedView(minView: boolean) {
-    this._minimizedView = minView;
+    this.minView = minView;
     if (!minView) {
-      window.setTimeout(() => {
-        // Overriding prime ng filter and sort functions so that it wont reset first after data change.
-        this.table._filter = custumFilterFunc.bind(this.table);
-        this.table.sortSingle = custumSortSingle.bind(this.table);
-
-        if (this.keyboardControl) {
-          this.table.first = this.first || 0;
-          this.renderer.setAttribute(this.element.nativeElement, 'tabIndex', '-1');
-          this.element.nativeElement.focus({preventScroll: true});
-        }
-
-        this.table.filters = this._filters;
-      });
+      window.setTimeout(() => this.table && this.updateFilter());
     }
   }
 
-  get minimizedView() {
-    return this._minimizedView;
-  }
-
-
   @Input()
   set filters(filters: { [s: string]: FilterMetadata }) {
     this._filters = filters;
-    if (!this.minimizedView) {
+    if (!this.minView) {
       this.table.filters = filters;
       if (this.active) {
         this.table.first = 0;
@@ -143,6 +119,8 @@ export class TableComponent implements AfterContentInit, AfterViewInit, OnInit,
   }
 
   @Input() noDataMessage = 'No data to show';
+  @Input() checkedItems = [];
+  @Input() virtualScroll: boolean;
 
   @Output() sortChanged = new EventEmitter<{ field: ISmCol['id']; sortOrder: TableSortOrderEnum }>();
   @Output() rowClicked = new EventEmitter();
@@ -152,19 +130,20 @@ export class TableComponent implements AfterContentInit, AfterViewInit, OnInit,
   @Output() onRowRightClick = new EventEmitter();
   @Output() colReordered = new EventEmitter();
 
+  @HostListener('window:resize')
+  resize() {
+    this.updateLoadButton(null);
+  }
+
   @HostListener('keydown', ['$event'])
   keyDownHandler(event) {
-    if (this.keyboardControl === false) {
-      return;
-    }
-    if (event.key != 'ArrowDown' && event.key != 'ArrowUp') {
+    if (this.keyboardControl === false || !['ArrowDown', 'ArrowUp'].includes(event.key)) {
       return;
     }
     event.preventDefault();
     if (event.key == 'ArrowDown') {
       this.incrementIndex(1);
-    }
-    if (event.key == 'ArrowUp') {
+    } else if (event.key == 'ArrowUp') {
       this.incrementIndex((-1));
     }
     setTimeout(() => {
@@ -179,7 +158,7 @@ export class TableComponent implements AfterContentInit, AfterViewInit, OnInit,
 
   }
 
-  constructor(private element: ElementRef, private renderer: Renderer2) {
+  constructor(private element: ElementRef, private renderer: Renderer2, private cdr: ChangeDetectorRef) {
     this.loadMoreDebouncer = new Subject();
     this.loadMoreSubscription = this.loadMoreDebouncer
       .pipe(throttleTime(1500))
@@ -193,9 +172,24 @@ export class TableComponent implements AfterContentInit, AfterViewInit, OnInit,
     this.active = true;
   }
 
-
-  ngAfterViewInit() {
-    this.resize();
+  ngAfterViewInit(): void {
+    this.tableComp.changes
+      .pipe(filter((comps: QueryList<Table>) => !!comps.first), take(1))
+      .subscribe((comps: QueryList<Table>) => {
+        this.table = comps.first;
+        const scrollContainer = this.table.el.nativeElement.getElementsByClassName('ui-table-scrollable-body')[0] as HTMLDivElement;
+        if (scrollContainer) {
+          scrollContainer.onscroll = (e: Event) => this.updateLoadButton(e);
+        }
+        this.updateLoadButton(null);
+        this.updateFilter();
+      });
+    this.loadButtons.changes
+      .pipe(filter((comps: QueryList<ElementRef<HTMLDivElement>>) => !!comps.first), take(1))
+      .subscribe((comps: QueryList<ElementRef<HTMLDivElement>>) => {
+        this.loadButton = comps.first;
+        this.updateLoadButton(null);
+      });
   }
 
   ngAfterContentInit(): void {
@@ -234,20 +228,37 @@ export class TableComponent implements AfterContentInit, AfterViewInit, OnInit,
     this.sortChanged.emit(event);
   }
 
-  onCardClicked(event) {
-    this.onRowSelected({data: event});
-  }
-
   onRowSelected(event) {
     if (this.selection && event.data.id === this.selection.id) {
       this.rowSelectionChanged.emit({data: null, originalEvent: event.originalEvent});
     } else {
       this.rowSelectionChanged.emit(event);
+      if (!this.minView) {
+        this.scrollToElement(event.data);
+      }
     }
   }
 
   onRowDeselected(event) {
-    this.rowSelectionChanged.emit({data: this.table.selection, originalEvent: event.originalEvent});
+    if (this.minView) {
+      this.rowSelectionChanged.emit({data: null, originalEvent: event.originalEvent});
+      this.scrollToElement(event.data);
+    } else {
+      this.rowSelectionChanged.emit({data: this.table?.selection, originalEvent: event.originalEvent});
+    }
+  }
+
+  public scrollToElement(data) {
+    const rowIndex = this.tableData.findIndex(row => row.id === data.id);
+    rowIndex > -1 && window.setTimeout(() => {
+      if (this.table) {
+        const row = this.table.el.nativeElement.getElementsByTagName('tr')[rowIndex] as HTMLTableRowElement;
+        if (row) {
+          const location = row.offsetTop;
+          this.table.scrollTo({top: location, behavior: 'smooth'});
+        }
+      }
+    });
   }
 
   onFirstChanged(event) {
@@ -255,9 +266,11 @@ export class TableComponent implements AfterContentInit, AfterViewInit, OnInit,
   }
 
   openContext(e: { originalEvent: MouseEvent; data: any }) {
-    this.onRowRightClick.emit({e: e.originalEvent, rowData: e.data});
-    this.table.contextMenuSelection = null;
-    window.setTimeout(() => this.menu.hide());
+    if (this.onRowRightClick.observers.length > 0) {
+      this.onRowRightClick.emit({e: e.originalEvent, rowData: e.data});
+      this.table.contextMenuSelection = null;
+      window.setTimeout(() => this.menu.hide());
+    }
   }
 
   trackByFn(index, item) {
@@ -315,4 +328,37 @@ export class TableComponent implements AfterContentInit, AfterViewInit, OnInit,
       );
     }
   }
+
+  isRowSelected(entity: { id: any }) {
+    if (!entity) {
+      return false;
+    }
+
+    return this.checkedItems?.length > 0 &&
+      (this.checkedItems.some((selectedEntity: { id: any }) => selectedEntity.id === entity.id));
+  }
+
+  private updateLoadButton(e: Event) {
+    if (e) {
+      this.scrollLeft = (e.target as HTMLDivElement).scrollLeft;
+    }
+    if (this.loadButton) {
+      this.buttonLeft = (this.table.el.nativeElement.getBoundingClientRect().width / 2) - 90 + this.scrollLeft;
+      this.cdr.detectChanges();
+    }
+  }
+
+  private updateFilter() {
+    if (this.minView) {
+      // Overriding prime ng filter and sort functions so that it wont reset first after data change.
+      this.table._filter = custumFilterFunc.bind(this.table);
+      this.table.sortSingle = custumSortSingle.bind(this.table);
+
+      this.table.filters = this._filters;
+    }
+  }
+
+  focusSelected() {
+    this.table.el.nativeElement.getElementsByClassName('selected')[0]?.focus();
+  }
 }
diff --git a/src/app/webapp-common/shared/ui-components/data/table/table.consts.ts b/src/app/webapp-common/shared/ui-components/data/table/table.consts.ts
index b7757b05..ef4779cb 100644
--- a/src/app/webapp-common/shared/ui-components/data/table/table.consts.ts
+++ b/src/app/webapp-common/shared/ui-components/data/table/table.consts.ts
@@ -16,6 +16,7 @@ declare type FilterMatchModeEnum = 'startsWith' | 'contains' | 'endsWidth' | 'eq
 
 export interface ISmCol {
   id: string; // unique id, by default, will be use as the table data param (e.g name and data[name]).
+  getter?: string;
   header?: string; // the title header.
   label?: string; // Labels to show in cards mode..
   hidden?: boolean; // the column visibility.
diff --git a/src/app/webapp-common/shared/ui-components/directives/choose-color/choose-color.reducer.ts b/src/app/webapp-common/shared/ui-components/directives/choose-color/choose-color.reducer.ts
index 5e5a9ffe..b8bf325e 100644
--- a/src/app/webapp-common/shared/ui-components/directives/choose-color/choose-color.reducer.ts
+++ b/src/app/webapp-common/shared/ui-components/directives/choose-color/choose-color.reducer.ts
@@ -7,7 +7,7 @@ export interface ColorPreferenceState {
 }
 
 export const initialState: ColorPreferenceState = {
-  colorPreferences: {},
+  colorPreferences: null,
   pickerProps: null
 };
 
diff --git a/src/app/webapp-common/shared/ui-components/forms/checkbox-control/checkbox-control.component.scss b/src/app/webapp-common/shared/ui-components/forms/checkbox-control/checkbox-control.component.scss
index 1761d347..090d0cd1 100644
--- a/src/app/webapp-common/shared/ui-components/forms/checkbox-control/checkbox-control.component.scss
+++ b/src/app/webapp-common/shared/ui-components/forms/checkbox-control/checkbox-control.component.scss
@@ -21,11 +21,11 @@
   justify-content: center;
   cursor: pointer;
   user-select: none;
-  width: 18px;
-  height: 18px;
-  flex: 0 0 19px;
+  width: 16px;
+  height: 16px;
+  flex: 0 0 16px;
   border: solid 2px $purple;
-  border-radius: 4px;
+  border-radius: 2px;
   background-clip: unset;
 
   &.select-col-checkbox {
@@ -39,7 +39,7 @@
 
   &.table-check-box {
     margin: 0 auto;
-    border-color: #7480aa;
+    border-color: $blue-50;
     opacity: 1;
   }
 
@@ -65,6 +65,10 @@
       opacity: 0.8;
     }
   }
+
+  .fa-minus {
+    padding: 1px 0 0 1px;
+  }
 }
 
 .disabled {
diff --git a/src/app/webapp-common/shared/ui-components/forms/immutableFormField.ts b/src/app/webapp-common/shared/ui-components/forms/immutableFormField.ts
index 4ac2b707..37dbb65d 100644
--- a/src/app/webapp-common/shared/ui-components/forms/immutableFormField.ts
+++ b/src/app/webapp-common/shared/ui-components/forms/immutableFormField.ts
@@ -5,7 +5,7 @@ import {isEmpty, isEqual} from 'lodash/fp';
 
 @Directive()
 export class ImmutableFormField implements OnInit, OnDestroy, ImmutableForm {
-  private _formData;
+  protected _formData;
 
   @Input() set formData(formData: any) {
     this._formData = formData;
diff --git a/src/app/webapp-common/shared/ui-components/forms/switch/switch.component.scss b/src/app/webapp-common/shared/ui-components/forms/switch/switch.component.scss
index e5f35b99..c6151360 100644
--- a/src/app/webapp-common/shared/ui-components/forms/switch/switch.component.scss
+++ b/src/app/webapp-common/shared/ui-components/forms/switch/switch.component.scss
@@ -6,7 +6,7 @@
     background-color: $blue-400;
   }
   /deep/ .mat-slide-toggle-bar {
-    background: rgba($blue-rgb-300, 0.5);
+    background: rgba($blue-300, 0.5);
   }
 
   /deep/.mat-slide-toggle.mat-checked:not(.mat-disabled) {
@@ -17,7 +17,7 @@
     }
 
     .mat-slide-toggle-bar {
-      background: rgba($blue-rgb-300, 0.5);
+      background: rgba($blue-300, 0.5);
     }
   }
 }
diff --git a/src/app/webapp-common/shared/ui-components/forms/textarea-control/textarea-control.component.html b/src/app/webapp-common/shared/ui-components/forms/textarea-control/textarea-control.component.html
index b93ae3a2..7cd8f0d2 100644
--- a/src/app/webapp-common/shared/ui-components/forms/textarea-control/textarea-control.component.html
+++ b/src/app/webapp-common/shared/ui-components/forms/textarea-control/textarea-control.component.html
@@ -1,10 +1,5 @@
-<div class="form-group"
-     (window:resize)="onResize()"
-     #group>
+<div class="form-group">
   <textarea
-    cdkTextareaAutosize
-    [cdkAutosizeMinRows]="rows"
-    [cdkAutosizeMaxRows]="rows"
     [ngClass]="inputClassName"
     [class.danger]="hasErrors() && showErrors"
     [readonly]="isReadonly"
diff --git a/src/app/webapp-common/shared/ui-components/forms/textarea-control/textarea-control.component.scss b/src/app/webapp-common/shared/ui-components/forms/textarea-control/textarea-control.component.scss
index 4288544b..a0a14da9 100644
--- a/src/app/webapp-common/shared/ui-components/forms/textarea-control/textarea-control.component.scss
+++ b/src/app/webapp-common/shared/ui-components/forms/textarea-control/textarea-control.component.scss
@@ -12,6 +12,8 @@
 
   textarea {
     width: 100%;
+    height: 100%;
+    min-height: 250px;
     border-radius: 4px;
     padding: 12px;
 
diff --git a/src/app/webapp-common/shared/ui-components/forms/textarea-control/textarea-control.component.ts b/src/app/webapp-common/shared/ui-components/forms/textarea-control/textarea-control.component.ts
index aae2d69f..48243691 100644
--- a/src/app/webapp-common/shared/ui-components/forms/textarea-control/textarea-control.component.ts
+++ b/src/app/webapp-common/shared/ui-components/forms/textarea-control/textarea-control.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, Input, ChangeDetectorRef, ViewContainerRef, ViewChild, AfterViewInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, ChangeDetectorRef} from '@angular/core';
 import {ImmutableFormField} from '../immutableFormField';
 
 @Component({
@@ -8,22 +8,12 @@ import {ImmutableFormField} from '../immutableFormField';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 
-export class TextareaControlComponent extends ImmutableFormField implements AfterViewInit {
+export class TextareaControlComponent extends ImmutableFormField {
 
   @Input() rows: number = 12;
-  @ViewChild('group', {read: ViewContainerRef, static: true}) groupRef: ViewContainerRef;
-  public textHeight = 200;
 
   constructor(private cdr: ChangeDetectorRef) {
     super();
   }
 
-  ngAfterViewInit() {
-    this.onResize();
-  }
-
-  onResize() {
-    this.textHeight = Math.max(this.groupRef.element.nativeElement.offsetHeight - 20, 45);
-    this.cdr.detectChanges();
-  }
 }
diff --git a/src/app/webapp-common/shared/ui-components/indicators/circle-status/circle-status.component.html b/src/app/webapp-common/shared/ui-components/indicators/circle-status/circle-status.component.html
index 29aa61b7..99812577 100644
--- a/src/app/webapp-common/shared/ui-components/indicators/circle-status/circle-status.component.html
+++ b/src/app/webapp-common/shared/ui-components/indicators/circle-status/circle-status.component.html
@@ -1,6 +1,7 @@
 <div class="counter-container">
-  <div [class]="'d-flex justify-content-center align-items-center circle ' + status">
-    <i [class]="'icon lg white i-'+ status"></i>
+  <div [class]="'d-flex justify-content-center align-items-center circle ' + (status || type)">
+    <i *ngIf="status" [class]="'icon sm-md white i-'+ status"></i>
+    <i *ngIf="type" [class]="'al-icon md al-color white al-ico-type-'+ type.replace('_', '-')"></i>
   </div>
-  <div class="counter-label">{{EXPERIMENTS_STATUS_LABELS[status]}}</div>
+  <div class="counter-label">{{EXPERIMENTS_STATUS_LABELS[(status|| type)]}}</div>
 </div>
diff --git a/src/app/webapp-common/shared/ui-components/indicators/circle-status/circle-status.component.scss b/src/app/webapp-common/shared/ui-components/indicators/circle-status/circle-status.component.scss
index 406474aa..5d0e2853 100644
--- a/src/app/webapp-common/shared/ui-components/indicators/circle-status/circle-status.component.scss
+++ b/src/app/webapp-common/shared/ui-components/indicators/circle-status/circle-status.component.scss
@@ -55,12 +55,7 @@ $font-size: 18px;
     &.closed {
       background-color: $pending-gray;
     }
-    &.training {
-      background-color: $training;
-    }
-    &.testing {
-      background-color: $testing;
-    }
+
     &.Caffe, &.PyTorch, &.Keras, &.Tensor.Flow, &.Custom {
       background-color: $blue-300;
     }
diff --git a/src/app/webapp-common/shared/ui-components/indicators/circle-status/circle-status.component.ts b/src/app/webapp-common/shared/ui-components/indicators/circle-status/circle-status.component.ts
index 3d245386..ec86fadb 100644
--- a/src/app/webapp-common/shared/ui-components/indicators/circle-status/circle-status.component.ts
+++ b/src/app/webapp-common/shared/ui-components/indicators/circle-status/circle-status.component.ts
@@ -1,6 +1,7 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {TaskStatusEnum} from '../../../../../business-logic/model/tasks/taskStatusEnum';
 import {EXPERIMENTS_STATUS_LABELS} from '../../../../../shared/constants/non-common-consts';
+import {TaskTypeEnum} from '../../../../../business-logic/model/tasks/taskTypeEnum';
 
 
 @Component({
@@ -10,5 +11,6 @@ import {EXPERIMENTS_STATUS_LABELS} from '../../../../../shared/constants/non-com
 })
 export class CircleStatusComponent {
   @Input() status: TaskStatusEnum;
+  @Input() type: TaskTypeEnum;
   public readonly EXPERIMENTS_STATUS_LABELS = EXPERIMENTS_STATUS_LABELS;
 }
diff --git a/src/app/webapp-common/shared/ui-components/indicators/snippet-error/snippet-error.component.html b/src/app/webapp-common/shared/ui-components/indicators/snippet-error/snippet-error.component.html
index 8b330ce7..007f876c 100644
--- a/src/app/webapp-common/shared/ui-components/indicators/snippet-error/snippet-error.component.html
+++ b/src/app/webapp-common/shared/ui-components/indicators/snippet-error/snippet-error.component.html
@@ -3,9 +3,9 @@
 'light-theme': theme===ThemeEnum.Light
 }" >
   <div class="labeled-icon">
-    <i class=" mb-3 icon xl" [ngClass]="{
-    'i-alert-all-grey': theme=== ThemeEnum.Light,
-    'i-alert-all-neon': theme===ThemeEnum.Dark
+    <i class=" mb-3 al-icon xl al-ico-alert-outline al-color " [ngClass]="{
+    'light-grey-blue': theme=== ThemeEnum.Light,
+    'neon-yellow': theme===ThemeEnum.Dark
    }"></i>
     <div class="label">Unable to load image</div>
     <div class="label">{{baseFile}}</div>
diff --git a/src/app/webapp-common/shared/ui-components/inputs/inline-edit/inline-edit.component.html b/src/app/webapp-common/shared/ui-components/inputs/inline-edit/inline-edit.component.html
index 9fa6ece4..bee58787 100644
--- a/src/app/webapp-common/shared/ui-components/inputs/inline-edit/inline-edit.component.html
+++ b/src/app/webapp-common/shared/ui-components/inputs/inline-edit/inline-edit.component.html
@@ -2,7 +2,7 @@
   <div [style.display]="active ? 'none': 'block'" >
     <div class="d-flex" #template (click)="(!inlineDisabled) && inlineActivated()"
       ><ng-content></ng-content>
-      <i *ngIf="editable" class='p2 fa pull-right editable-pen' [ngClass]="(!inlineDisabled)? ICONS.EDITABLE :''"></i>
+      <i *ngIf="editable" class='p2 fa pull-right editable-pen pointer' [ngClass]="(!inlineDisabled)? ICONS.EDITABLE :''"></i>
     </div>
   </div>
     <div *ngIf="editable" [style.display]=" ! active ? 'none': 'block'" tabindex="12">
diff --git a/src/app/webapp-common/shared/ui-components/inputs/inline-edit/inline-edit.component.ts b/src/app/webapp-common/shared/ui-components/inputs/inline-edit/inline-edit.component.ts
index 6c87374d..e0474d19 100644
--- a/src/app/webapp-common/shared/ui-components/inputs/inline-edit/inline-edit.component.ts
+++ b/src/app/webapp-common/shared/ui-components/inputs/inline-edit/inline-edit.component.ts
@@ -25,8 +25,9 @@ export class InlineEditComponent implements OnDestroy {
   @Input() inlineDisabled     = false;
 
   @Output() inlineActiveStateChanged = new EventEmitter<boolean>();
-  @Output() textChanged              = new EventEmitter<any>();
-  @Output() inlineFocusOutEvent      = new EventEmitter<any>();
+  @Output() textChanged              = new EventEmitter<string>();
+  @Output() inlineFocusOutEvent      = new EventEmitter<boolean>();
+  @Output() cancel = new EventEmitter();
   @ViewChild('inlineInput') inlineInput: ElementRef;
   @ViewChild('inlineInputContainer') inlineInputContainer: ElementRef;
   @ViewChild('template', { static: true }) template;
@@ -38,6 +39,7 @@ export class InlineEditComponent implements OnDestroy {
     this.inlineValue = this.originalText;
     this.active      = false;
     this.inlineActiveStateChanged.emit(false);
+    this.cancel.emit();
   }
 
   public inlineSaved() {
diff --git a/src/app/webapp-common/shared/ui-components/inputs/search/search.component.html b/src/app/webapp-common/shared/ui-components/inputs/search/search.component.html
index 498ed67f..539e46db 100644
--- a/src/app/webapp-common/shared/ui-components/inputs/search/search.component.html
+++ b/src/app/webapp-common/shared/ui-components/inputs/search/search.component.html
@@ -3,6 +3,7 @@
          #searchBar
          [placeholder]="placeholder"
          (input)="onChange($event)"
+         (keydown.enter)="valueChanged.emit(searchBar.value)"
   >
   <i *ngIf="!hideIcons && searchBar.value.length === 0" class="fa fa-search pr-2"></i>
   <i *ngIf="!hideIcons && searchBar.value.length > 0" class="fa fa-times pointer pr-2" (click)="clear()"></i>
diff --git a/src/app/webapp-common/shared/ui-components/overlay/confirm-dialog/confirm-dialog.component.html b/src/app/webapp-common/shared/ui-components/overlay/confirm-dialog/confirm-dialog.component.html
index ec83d5fd..ffd7bcb9 100644
--- a/src/app/webapp-common/shared/ui-components/overlay/confirm-dialog/confirm-dialog.component.html
+++ b/src/app/webapp-common/shared/ui-components/overlay/confirm-dialog/confirm-dialog.component.html
@@ -1,4 +1,4 @@
-<sm-dialog-template [displayX]="displayX" [header]="title" (xClicked)="closeDialog(undefined)" [closeOnX]="false"
+<sm-dialog-template [displayX]="displayX && !dialogRef.disableClose" [header]="title" (xClicked)="closeDialog(undefined)" [closeOnX]="false"
                     [iconClass]="iconClass">
   <div *ngIf="reference" class="reference">{{reference}}</div>
   <div class="body" [innerHTML]='body'>
diff --git a/src/app/webapp-common/shared/ui-components/overlay/dialog-template/dialog-template.component.html b/src/app/webapp-common/shared/ui-components/overlay/dialog-template/dialog-template.component.html
index 5e8b7093..7f1cca11 100644
--- a/src/app/webapp-common/shared/ui-components/overlay/dialog-template/dialog-template.component.html
+++ b/src/app/webapp-common/shared/ui-components/overlay/dialog-template/dialog-template.component.html
@@ -1,7 +1,7 @@
 <div class="dialog-template-container">
 
   <div *ngIf="displayX" style="position: relative">
-    <i (click)="onXPressed()" class="pointer stick-to-corner icon i-dialog-x sm-md">
+    <i (click)="onXPressed()" class="pointer stick-to-corner al-icon al-ico-dialog-x al-color blue-400 sm-md">
     </i>
   </div>
 
diff --git a/src/app/webapp-common/shared/ui-components/overlay/edit-json/edit-json.component.scss b/src/app/webapp-common/shared/ui-components/overlay/edit-json/edit-json.component.scss
index 87be6048..ef369099 100644
--- a/src/app/webapp-common/shared/ui-components/overlay/edit-json/edit-json.component.scss
+++ b/src/app/webapp-common/shared/ui-components/overlay/edit-json/edit-json.component.scss
@@ -1,9 +1,12 @@
+@import '../../../../shared/ui-components/styles/variables';
+
 :host {
   .data-text {
     width: 70vw;
-    height: 65vh;
+    height: calc(90vh - 200px);
     overflow: auto;
-    color: #141822;
+    background-color: $blue-600;
+    color: #ffffff;
     font-family: monospace;
     padding: 12px;
     border-radius: 4px;
diff --git a/src/app/webapp-common/shared/ui-components/overlay/edit-json/edit-json.component.ts b/src/app/webapp-common/shared/ui-components/overlay/edit-json/edit-json.component.ts
index 5aa77b55..599466f8 100644
--- a/src/app/webapp-common/shared/ui-components/overlay/edit-json/edit-json.component.ts
+++ b/src/app/webapp-common/shared/ui-components/overlay/edit-json/edit-json.component.ts
@@ -50,7 +50,7 @@ export class EditJsonComponent {
   closeDialog(isConfirmed) {
     if (isConfirmed) {
       if (!this.errors || !this.textData) {
-        this.dialogRef.close(this.textData ? (this.typeJson ? this.jsonPipe.transform(this.textData) : this.textData) : null);
+        this.dialogRef.close(this.textData ? (this.typeJson ? this.jsonPipe.transform(this.textData) : this.textData) : '');
       } else {
         this.showErrors = true;
       }
diff --git a/src/app/webapp-common/shared/ui-components/overlay/overlay/overlay.component.html b/src/app/webapp-common/shared/ui-components/overlay/overlay/overlay.component.html
index b648efc2..4fa02dea 100644
--- a/src/app/webapp-common/shared/ui-components/overlay/overlay/overlay.component.html
+++ b/src/app/webapp-common/shared/ui-components/overlay/overlay/overlay.component.html
@@ -1 +1 @@
-<div [ngClass]="{'overlay': backdropActive }" smClickStopPropagation></div>
+<div [ngClass]="{'overlay': backdropActive, 'transparent': transparent }" smClickStopPropagation></div>
diff --git a/src/app/webapp-common/shared/ui-components/overlay/overlay/overlay.component.scss b/src/app/webapp-common/shared/ui-components/overlay/overlay/overlay.component.scss
index 15993726..c3286b3a 100644
--- a/src/app/webapp-common/shared/ui-components/overlay/overlay/overlay.component.scss
+++ b/src/app/webapp-common/shared/ui-components/overlay/overlay/overlay.component.scss
@@ -5,5 +5,8 @@
   height: 100%;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.2);
+  &.transparent{
+    background-color: rgba(0, 0, 0, 0);
+  }
   z-index: 100;
 }
diff --git a/src/app/webapp-common/shared/ui-components/overlay/overlay/overlay.component.ts b/src/app/webapp-common/shared/ui-components/overlay/overlay/overlay.component.ts
index 1883b432..fd6219e8 100644
--- a/src/app/webapp-common/shared/ui-components/overlay/overlay/overlay.component.ts
+++ b/src/app/webapp-common/shared/ui-components/overlay/overlay/overlay.component.ts
@@ -8,5 +8,6 @@ import {Component, Input} from '@angular/core';
 export class OverlayComponent {
 
   @Input() backdropActive;
+  @Input() transparent: boolean = false;
 
 }
diff --git a/src/app/webapp-common/shared/ui-components/overlay/spinner/spinner.component.scss b/src/app/webapp-common/shared/ui-components/overlay/spinner/spinner.component.scss
index 97c601a8..8eeae445 100644
--- a/src/app/webapp-common/shared/ui-components/overlay/spinner/spinner.component.scss
+++ b/src/app/webapp-common/shared/ui-components/overlay/spinner/spinner.component.scss
@@ -28,8 +28,8 @@
   position: absolute;
   top: 60px;
   left: 60px;
-  width: calc(100vw - 60px);
-  height: calc(100vh - 60px);
+  width: calc(100% - 60px);
+  height: calc(100% - 60px);
   background: #1A1E2C;
   opacity: 0;
   z-index: 999998;
diff --git a/src/app/webapp-common/shared/ui-components/overlay/terms-of-use-dialog/terms-of-use-dialog.component.scss b/src/app/webapp-common/shared/ui-components/overlay/terms-of-use-dialog/terms-of-use-dialog.component.scss
index 263b9b20..07a21911 100644
--- a/src/app/webapp-common/shared/ui-components/overlay/terms-of-use-dialog/terms-of-use-dialog.component.scss
+++ b/src/app/webapp-common/shared/ui-components/overlay/terms-of-use-dialog/terms-of-use-dialog.component.scss
@@ -5,7 +5,7 @@
 .box {
   border: 1px solid #ced1dc;
   padding: 10px;
-  max-height: calc(100vh - 400px);
+  max-height: calc(100% - 400px);
   min-height: 100px;
   overflow-y: scroll;
   position: relative;
diff --git a/src/app/webapp-common/shared/ui-components/overlay/update-notifier/update-notifier.component.scss b/src/app/webapp-common/shared/ui-components/overlay/update-notifier/update-notifier.component.scss
index ad1f1daf..634b6f2a 100644
--- a/src/app/webapp-common/shared/ui-components/overlay/update-notifier/update-notifier.component.scss
+++ b/src/app/webapp-common/shared/ui-components/overlay/update-notifier/update-notifier.component.scss
@@ -2,8 +2,8 @@
 
 .circle-container {
   position: fixed;
-  bottom: 40px;
-  left: 40px;
+  bottom: 36px;
+  left: 42px;
   z-index: 1000;
   opacity: 0;
   transition: opacity;
@@ -29,7 +29,7 @@
 .header-container {
   position: absolute;
   z-index: 999;
-  top: calc(100vh - 40px);
+  top: calc(100% - 40px);
   background-color: $neon-yellow-original-notgoodinchrome;
   width: 0;
   height: 15px;
@@ -66,12 +66,11 @@
     }
   }
 
-  //transition: all 0.6s;
-  //transition-delay: 0.6s;
   opacity: 0;
   align-items: center;
   justify-content: space-between;
   display: none;
+  padding: 0 6px;
 
   &.show {
     opacity: 1;
diff --git a/src/app/webapp-common/shared/ui-components/overlay/update-notifier/update-notifier.component.ts b/src/app/webapp-common/shared/ui-components/overlay/update-notifier/update-notifier.component.ts
index 019e967f..d899becf 100644
--- a/src/app/webapp-common/shared/ui-components/overlay/update-notifier/update-notifier.component.ts
+++ b/src/app/webapp-common/shared/ui-components/overlay/update-notifier/update-notifier.component.ts
@@ -1,4 +1,5 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {User} from '../../../../../business-logic/model/users/user';
 
 @Component({
   selector   : 'sm-update-notifier',
@@ -15,9 +16,9 @@ export class UpdateNotifierComponent implements OnInit {
   @Input() dismissedVersion: string;
 
   @Input() set availableUpdates(availableUpdates) {
-    this.areAvailableUpdates = availableUpdates && (availableUpdates['trains-server']['newer_available']);
-    this.newVersionUrl       = availableUpdates && (availableUpdates['trains-server']['url']);
-    this.newVersionName      = availableUpdates && (availableUpdates['trains-server']['version']);
+    this.areAvailableUpdates = availableUpdates?.['trains-server']?.['newer_available'];
+    this.newVersionUrl       = availableUpdates?.['trains-server']?.['url'];
+    this.newVersionName      = availableUpdates?.['trains-server']?.['version'];
     this._availableUpdates   = availableUpdates;
     if (this.areAvailableUpdates && this.dismissedVersion !== this.newVersionName) {
       this.active = true;
@@ -25,6 +26,20 @@ export class UpdateNotifierComponent implements OnInit {
     }
   }
 
+  @Input() set currentUser(user: User) {
+    if (user && user.role == 'guest') {
+      this.areAvailableUpdates = false;
+      this.active = false;
+      this.notifierActive.emit(false);
+    } else {
+      this.areAvailableUpdates = this._availableUpdates?.['trains-server']?.['newer_available'];
+      if (this.areAvailableUpdates && this.dismissedVersion !== this.newVersionName) {
+        this.active = true;
+        this.notifierActive.emit(true);
+      }
+    }
+  }
+
   @Output() versionDismissed = new EventEmitter();
   @Output() notifierActive = new EventEmitter();
 
diff --git a/src/app/webapp-common/shared/ui-components/panel/card/card.component.scss b/src/app/webapp-common/shared/ui-components/panel/card/card.component.scss
index a62c6bce..daa18836 100644
--- a/src/app/webapp-common/shared/ui-components/panel/card/card.component.scss
+++ b/src/app/webapp-common/shared/ui-components/panel/card/card.component.scss
@@ -4,6 +4,7 @@
 .card {
   margin-bottom: 20px;
   border: solid 0;
+  overflow: hidden;
 
   .card-container {
     height: 100%;
diff --git a/src/app/webapp-common/shared/ui-components/panel/collapse/README.md b/src/app/webapp-common/shared/ui-components/panel/collapse/README.md
deleted file mode 100644
index b9c4b1d8..00000000
--- a/src/app/webapp-common/shared/ui-components/panel/collapse/README.md
+++ /dev/null
@@ -1,49 +0,0 @@
-# Collapse Component
-
-## Setup
-
-```javascript
-  import {CollapseModule} from 'al-ui-components';
-  
-  ...
-```
-
-## Description:
-
-A collapsible content container.
-
-### Inputs
-
-|     parameter     |     type       |   default value   |   description               |
-|-------------------|----------------|-------------------|-----------------------------|
-|     expanded      |     boolean    |   false           |   determine collapsed state |
-|     header        |     string     |   null            |   collapsed header title    |
-|     headerClass   |     string     |   null            |   collapsed header css class|
-|     disabled      |     boolean    |   false           |   determine disabled state  |
-|     header-content|     ngContent  |   -               |   a slot for custom header content   |
-
-### Outputs
-
-|     parameter     |     type       |   default value   |   description              |
-|-------------------|----------------|-------------------|----------------------------|
-|  collapseToggled  |     boolean    |   -               |   emit on collapsed event  |
-
-
-## Simple code:
-
-```html
-  <al-collapse 
-    header="Collapsed Title" 
-    [expanded]="isCollapsed"
-    
-    (collapseToggled)="collapsedToggled($event)" 
-  >
-
-    <div>
-  
-      <div>Some very long text...</div>
-  
-    </div>
-  
-  </al-collapse>
-```
diff --git a/src/app/webapp-common/shared/ui-components/panel/collapse/collapse.component.html b/src/app/webapp-common/shared/ui-components/panel/collapse/collapse.component.html
deleted file mode 100644
index 2958feca..00000000
--- a/src/app/webapp-common/shared/ui-components/panel/collapse/collapse.component.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<mat-expansion-panel
-  #panel
-  [disabled]="disabled"
-  [expanded]="expanded"
-  [class]="panelClass"
-  [ngClass]="{'finish-expanding': isFinishExpanding, animationActive: animationActive}"
-  (afterExpand)="afterAnimation(true)"
-  (afterCollapse)="afterAnimation(false)"
-
->
-  <mat-expansion-panel-header
-    class="pointer"
-    collapsedHeight="48px"
-    expandedHeight="48px"
-    [ngClass]="[headerClass || '', expandLoadingActive? 'loading-collapse': '']"
-    (click)="toggleOpen()"
-  >
-    <mat-panel-title>
-      <div class="header-content">
-        <div class="header-container">
-          <ng-content select="[header-content]">
-          </ng-content>
-        </div>
-      </div>
-      <h3 class="al-header">{{header}}</h3>
-      <div class="loading-container">
-        <div class="mini-circle-loader"></div>
-      </div>
-    </mat-panel-title>
-    <mat-panel-description>
-    </mat-panel-description>
-  </mat-expansion-panel-header>
-  <div *ngIf="contentAttached">
-    <ng-content></ng-content>
-  </div>
-</mat-expansion-panel>
-
-
diff --git a/src/app/webapp-common/shared/ui-components/panel/collapse/collapse.component.scss b/src/app/webapp-common/shared/ui-components/panel/collapse/collapse.component.scss
deleted file mode 100644
index ccc04991..00000000
--- a/src/app/webapp-common/shared/ui-components/panel/collapse/collapse.component.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-:host {
-  /deep/ .mat-expansion-panel-body {
-    padding: 0px;
-  }
-
-  /deep/ .mat-expansion-panel-header {
-    padding-left: 0;
-    padding-right: 24px;
-    position: relative;
-  }
-
-  /deep/ .mat-expansion-panel-header-title {
-    align-items: center;
-  }
-
-  /deep/ .mat-expansion-panel {
-    border-radius: 0;
-
-    &.hide {
-      visibility: hidden !important;
-      height: 0;
-    }
-  }
-}
diff --git a/src/app/webapp-common/shared/ui-components/panel/collapse/collapse.component.ts b/src/app/webapp-common/shared/ui-components/panel/collapse/collapse.component.ts
deleted file mode 100644
index 39cb305f..00000000
--- a/src/app/webapp-common/shared/ui-components/panel/collapse/collapse.component.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
-import { MatExpansionPanel } from '@angular/material/expansion';
-
-@Component({
-  selector       : 'al-collapse',
-  templateUrl    : './collapse.component.html',
-  styleUrls      : ['./collapse.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class CollapseComponent {
-  private _expanded: any;
-  public contentAttached     = false;
-  public expandLoadingActive = false;
-  public isFinishExpanding: boolean;
-  public animationActive: boolean;
-
-  @Input() set expanded(expanded: boolean) {
-    this._expanded = expanded;
-    if (expanded) {
-      this.contentAttached = this.expanded;
-    } else {
-      this.isFinishExpanding = false;
-    }
-  }
-
-  get expanded() {
-    return this._expanded;
-  }
-
-  @Input() header: string;
-  @Input() disabled: boolean;
-  @Input() headerClass: string = '';
-  @Input() panelClass: string  = '';
-
-  @Output() collapseToggled = new EventEmitter<boolean>();
-
-  @ViewChild('panel', {static: true}) panel: MatExpansionPanel;
-
-
-  toggleOpen() {
-    this.animationActive = true;
-    if (this.panel.expanded) {
-      this.contentAttached     = true;
-      this.expandLoadingActive = true;
-    }
-    setTimeout(() => {
-        this.collapseToggled.emit(this.panel.expanded);
-        this.expandLoadingActive = false;
-      }
-    );
-  }
-
-  afterAnimation(isCollapse) {
-    this.animationActive = false;
-    if (isCollapse === false) {
-      this.contentAttached = false;
-    }
-    this.isFinishExpanding = isCollapse;
-  }
-}
diff --git a/src/app/webapp-common/shared/ui-components/panel/collapse/collapse.module.ts b/src/app/webapp-common/shared/ui-components/panel/collapse/collapse.module.ts
deleted file mode 100644
index 4b36b67f..00000000
--- a/src/app/webapp-common/shared/ui-components/panel/collapse/collapse.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {CollapseComponent} from './collapse.component';
-import {MatExpansionModule} from '@angular/material/expansion';
-
-
-@NgModule({
-  declarations: [CollapseComponent],
-  imports     : [
-    CommonModule,
-    MatExpansionModule,
-    // MaterialModuleModule
-  ],
-  exports     : [CollapseComponent]
-})
-export class CollapseModule {
-}
diff --git a/src/app/webapp-common/shared/ui-components/panel/collapse/index.ts b/src/app/webapp-common/shared/ui-components/panel/collapse/index.ts
deleted file mode 100644
index 29c3f199..00000000
--- a/src/app/webapp-common/shared/ui-components/panel/collapse/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './collapse.component';
-export * from './collapse.module';
diff --git a/src/app/webapp-common/shared/ui-components/panel/compare-footer/compare-footer.component.html b/src/app/webapp-common/shared/ui-components/panel/compare-footer/compare-footer.component.html
index ec02e985..128d1abc 100644
--- a/src/app/webapp-common/shared/ui-components/panel/compare-footer/compare-footer.component.html
+++ b/src/app/webapp-common/shared/ui-components/panel/compare-footer/compare-footer.component.html
@@ -1,3 +1,3 @@
-<div class="footer-container dark-theme d-flex justify-content-start align-items-center" [ngClass]="{'hide-container': !visible}" *ngIf="visible">
+<div class="footer-container dark-theme d-flex justify-content-start align-items-center" [ngClass]="{'show-container': visible}">
   <ng-content></ng-content>
 </div>
diff --git a/src/app/webapp-common/shared/ui-components/panel/compare-footer/compare-footer.component.scss b/src/app/webapp-common/shared/ui-components/panel/compare-footer/compare-footer.component.scss
index 140d0d1f..94540db9 100644
--- a/src/app/webapp-common/shared/ui-components/panel/compare-footer/compare-footer.component.scss
+++ b/src/app/webapp-common/shared/ui-components/panel/compare-footer/compare-footer.component.scss
@@ -1,18 +1,24 @@
 @import "../../styles/variables";
+@import "../../../../layout/layout";
+
 
 .footer-container {
+  border-top:solid 2px $neon-yellow-betterinchrome;
   position: fixed;
-  bottom: 0;
+  bottom: -$project-footer-height;
   left: 0;
-  height: 60px;
+  height: $project-footer-height;
   width: 100%;
-  transition: height 0.5s;
-  padding-left: 64px;
-  background-color: $neon-yellow-betterinchrome;
-  color: $blue-900;
+  padding-left: 76px;
+  background-color:#3a425c;
+  color: #dce0ee;
+  font-size: 13px;
+  font-weight: 500;
   z-index: 10;
-  &.hide-container {
-    height: 0;
+  transition:bottom 0.3s ease-out;
+
+  &.show-container {
+    bottom: 0;
   }
 }
 
diff --git a/src/app/webapp-common/shared/ui-components/panel/editable-section/editable-section.component.html b/src/app/webapp-common/shared/ui-components/panel/editable-section/editable-section.component.html
index 5d59ca2b..e0bb16d7 100644
--- a/src/app/webapp-common/shared/ui-components/panel/editable-section/editable-section.component.html
+++ b/src/app/webapp-common/shared/ui-components/panel/editable-section/editable-section.component.html
@@ -1,4 +1,4 @@
-<div class="editable-container" [ngClass]="{'edit-mode': inEditMode}"
+<div [class]="'editable-container '+ containerClass " [ngClass]="{'edit-mode': inEditMode && !disableInEditMode}"
      (dblclick)="editable && !disableEditable && (!inEditMode) && editModeChanged(true)">
   <div class="edit-wrapper" *ngIf="editable && !disableEditable && !inEditMode">
     <ng-content select="[extra-buttons]"></ng-content>
@@ -8,13 +8,13 @@
     </button>
   </div>
   <ng-content formData></ng-content>
-  <div class="cancel-save action-button" [ngClass]="{'edit-mode': inEditMode}">
-    <button class="btn btn-dark-fill cancel" (click)="cancelClickedEvent()">
-      <div class="button-label">CANCEL</div>
-    </button>
-    <sm-loading-button [disabled]="disableSave" label="SAVE"
-                       [loading]="saving"
-                       (click)="(!disableSave) && saveSection()"
-                       class="action-button"></sm-loading-button>
+  <div class="cancel-save action-button edit-mode" *ngIf="inEditMode && !disableInEditMode">
+    <button class="btn btn-dark-fill cancel" (click)="cancelClickedEvent()">CANCEL</button>
+    <sm-loading-button
+      *ngIf="!hideSaveButton"
+      [disabled]="disableSave" label="SAVE"
+      [loading]="saving"
+      (click)="(!disableSave) && saveSection()"
+      class="action-button"></sm-loading-button>
   </div>
 </div>
diff --git a/src/app/webapp-common/shared/ui-components/panel/editable-section/editable-section.component.scss b/src/app/webapp-common/shared/ui-components/panel/editable-section/editable-section.component.scss
index 1e40d63f..3a1334ae 100644
--- a/src/app/webapp-common/shared/ui-components/panel/editable-section/editable-section.component.scss
+++ b/src/app/webapp-common/shared/ui-components/panel/editable-section/editable-section.component.scss
@@ -1,7 +1,10 @@
 @import "../../styles/variables";
 
 .editable-container {
+  display: flex;
+  flex-direction: column;
   position: relative;
+  height: 100%;
   background-color: white;
   padding: 24px;
   border: 1px solid transparent;
@@ -41,7 +44,7 @@
   }
 
   .cancel-save {
-    position: sticky;
+    position: relative;
     bottom: 10px;
     text-align: right;
     opacity: 0;
@@ -52,11 +55,8 @@
     &.edit-mode {
       opacity: 1;
       z-index: 99;
-      margin-top: 10px;
-      height: initial;
       display: flex;
       justify-content: flex-end;
-      width: 100%;
     }
 
     .cancel {
diff --git a/src/app/webapp-common/shared/ui-components/panel/editable-section/editable-section.component.ts b/src/app/webapp-common/shared/ui-components/panel/editable-section/editable-section.component.ts
index fbd651eb..c3ee34c2 100644
--- a/src/app/webapp-common/shared/ui-components/panel/editable-section/editable-section.component.ts
+++ b/src/app/webapp-common/shared/ui-components/panel/editable-section/editable-section.component.ts
@@ -1,7 +1,7 @@
 import {Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output} from '@angular/core';
 import {Store} from '@ngrx/store';
 import {SetBackdrop} from '../../../../core/actions/layout.actions';
-import { MatDialog } from '@angular/material/dialog';
+import {MatDialog} from '@angular/material/dialog';
 
 @Component({
   selector   : 'sm-editable-section',
@@ -11,7 +11,10 @@ import { MatDialog } from '@angular/material/dialog';
 export class EditableSectionComponent implements OnInit, OnDestroy {
   @Input() editable;
   @Input() disableEditable = false;
-  @Input() disableSave     = false;
+  @Input() disableSave = false;
+  @Input() disableInEditMode = false;
+  @Input() hideSaveButton = false;
+  @Input() containerClass = '';
 
   @Input() set saving(saving) {
     if (this._saving && !saving) {
@@ -26,8 +29,8 @@ export class EditableSectionComponent implements OnInit, OnDestroy {
     return this._saving;
   }
 
-  private _saving         = false;
-  @Output() saveClicked   = new EventEmitter();
+  private _saving = false;
+  @Output() saveClicked = new EventEmitter();
   @Output() cancelClicked = new EventEmitter();
 
   @Output() activateEditClicked = new EventEmitter();
diff --git a/src/app/webapp-common/shared/ui-components/panel/experiment-card/experiment-card.component.html b/src/app/webapp-common/shared/ui-components/panel/experiment-card/experiment-card.component.html
index a4759084..aa34c3e3 100644
--- a/src/app/webapp-common/shared/ui-components/panel/experiment-card/experiment-card.component.html
+++ b/src/app/webapp-common/shared/ui-components/panel/experiment-card/experiment-card.component.html
@@ -12,8 +12,8 @@
   </div>
 
   <div class="d-flex justify-content-around">
-    <sm-circle-status [status]="experiment.type"></sm-circle-status>
-    <sm-circle-status [status]="experiment.status"></sm-circle-status>
+    <sm-circle-status [type]="experiment?.type"></sm-circle-status>
+    <sm-circle-status [status]="experiment?.status"></sm-circle-status>
   </div>
 
 
diff --git a/src/app/webapp-common/shared/ui-components/panel/menu-item/menu-item.component.html b/src/app/webapp-common/shared/ui-components/panel/menu-item/menu-item.component.html
index 4b9f8cf1..e38cab7f 100644
--- a/src/app/webapp-common/shared/ui-components/panel/menu-item/menu-item.component.html
+++ b/src/app/webapp-common/shared/ui-components/panel/menu-item/menu-item.component.html
@@ -10,5 +10,5 @@
     <div class="ellipsis">{{itemLabel}}</div>
     <i *ngIf="sortOrder" class="pt-1 ml-2" [class]="sortOrder === TABLE_SORT_ORDER.DESC ? 'fa fa-arrow-down' : 'fa fa-arrow-up' "></i>
   </div>
-  <div *ngIf="removable" (click)="removeItem($event)" class="remove-button"><i class="icon i-trash pointer"></i></div>
+  <div *ngIf="removable" (click)="removeItem($event)" class="remove-button"><i class="al-icon al-ico-trash al-color blue-300 pointer"></i></div>
 </div>
diff --git a/src/app/webapp-common/shared/ui-components/panel/menu/menu.component.scss b/src/app/webapp-common/shared/ui-components/panel/menu/menu.component.scss
index 1d337d8f..fb64a91e 100644
--- a/src/app/webapp-common/shared/ui-components/panel/menu/menu.component.scss
+++ b/src/app/webapp-common/shared/ui-components/panel/menu/menu.component.scss
@@ -2,7 +2,6 @@
   .menu-button, .menu-button &:hover, .menu-button &:focus {
     cursor: pointer;
     font-weight: bold;
-    font-size: 12px;
     text-decoration: none;
   }
 
diff --git a/src/app/webapp-common/shared/ui-components/panel/plus-card/plus-card.component.html b/src/app/webapp-common/shared/ui-components/panel/plus-card/plus-card.component.html
index 20d0d3c8..235789e1 100644
--- a/src/app/webapp-common/shared/ui-components/panel/plus-card/plus-card.component.html
+++ b/src/app/webapp-common/shared/ui-components/panel/plus-card/plus-card.component.html
@@ -1,5 +1,5 @@
 <div class="plus-card-container" (click)="plusCardClicked()">
   <div class="plus-card-body d-flex">
-    <div class="plus-icon"></div>
+    <div class="al-icon al-ico-plus al-color blue-400 plus-icon xl"></div>
   </div>
 </div>
diff --git a/src/app/webapp-common/shared/ui-components/panel/plus-card/plus-card.component.scss b/src/app/webapp-common/shared/ui-components/panel/plus-card/plus-card.component.scss
index 0e6bc90d..b5a624a7 100644
--- a/src/app/webapp-common/shared/ui-components/panel/plus-card/plus-card.component.scss
+++ b/src/app/webapp-common/shared/ui-components/panel/plus-card/plus-card.component.scss
@@ -17,14 +17,11 @@
     .plus-icon {
       height: 40px;
       width: 40px;
-      background-size: cover;
-      background-position: 50%, 50%;
-      background-image: url('../../../../assets/icons/plus.svg');
     }
     &:hover {
       background-color: $blue-500;
       .plus-icon {
-        background-image: url('../../../../assets/icons/plus-hover.svg');
+       color: $blue-700;
       }
     }
   }
diff --git a/src/app/webapp-common/shared/ui-components/styles/bootstrap-settings.scss b/src/app/webapp-common/shared/ui-components/styles/bootstrap-settings.scss
index 17e2482b..fbc92145 100644
--- a/src/app/webapp-common/shared/ui-components/styles/bootstrap-settings.scss
+++ b/src/app/webapp-common/shared/ui-components/styles/bootstrap-settings.scss
@@ -33,7 +33,7 @@ $font-family-base: $font-family-base;
   .btn-neon {
     font-size: 12px;
     font-weight: bold;
-    color: $dark-grey-blue-two;
+    color: $blue-500;
     height: 32px;
     border-radius: 4px;
     background-color: $neon-yellow-original-notgoodinchrome;
@@ -82,7 +82,7 @@ $font-family-base: $font-family-base;
     background-color: $white;
     border: solid 1px $neon-yellow-original-notgoodinchrome;
     padding: 0 40px;
-    color: $dark-grey-blue-two;
+    color: $blue-500;
     box-shadow: none !important;
 
     &:hover {
@@ -131,7 +131,7 @@ $font-family-base: $font-family-base;
 
   .btn-secondary {
     height: 32px;
-    border: solid 1px $cloudy-blue;
+    border: solid 1px $blue-250;
     color: $blue-480;
     font-size: 11px;
 
@@ -143,7 +143,7 @@ $font-family-base: $font-family-base;
 
     &:active,
     &:focus {
-      border: solid 1px $cloudy-blue !important;
+      border: solid 1px $blue-250 !important;
       color: $blue-400 !important;
       background-color: white !important;
       box-shadow: none !important;
@@ -154,8 +154,8 @@ $font-family-base: $font-family-base;
     }
 
     &:disabled {
-      border-color: $cloudy-blue;
-      color: $cloudy-blue;
+      border-color: $blue-250;
+      color: $blue-250;
       opacity: 0.4;
     }
   }
@@ -189,7 +189,7 @@ $font-family-base: $font-family-base;
   .btn-neon {
     font-size: 12px;
     font-weight: bold;
-    color: $dark-grey-blue-two;
+    color: $blue-500;
     height: 32px;
     border-radius: 4px;
     background-color: $neon-yellow-original-notgoodinchrome;
@@ -217,7 +217,7 @@ $font-family-base: $font-family-base;
     background-color: $white;
     border: solid 1px $neon-yellow-original-notgoodinchrome;
     padding: 0 40px;
-    color: $dark-grey-blue-two;
+    color: $blue-500;
     box-shadow: none !important;
 
     &:hover {
diff --git a/src/app/webapp-common/shared/ui-components/styles/icons.scss b/src/app/webapp-common/shared/ui-components/styles/icons.scss
index 5c45b849..e04dca21 100644
--- a/src/app/webapp-common/shared/ui-components/styles/icons.scss
+++ b/src/app/webapp-common/shared/ui-components/styles/icons.scss
@@ -1,10 +1,40 @@
 @import "variables";
 @import "mixins/icon";
+.al-color {
+  &.white {
+    color: $white;
+  }
 
-.icon {
+  &.light-grey-blue {
+    color: $light-grey-blue;
+  }
+
+  &.neon-yellow {
+    color: $neon-yellow;
+  }
+
+
+  &.light-periwinkle-two {
+    color: $light-periwinkle-two;
+  }
+
+  &.blue-100 {
+    color: $blue-100;
+  }
+
+  &.blue-300 {
+    color: $blue-300;
+  }
+
+  &.blue-400 {
+    color: $blue-400;
+  }
+
+}
+.al-icon, .icon {
   width: 24px;
   height: 24px;
-
+  font-size: 24px;
   &.flashing-icon {
     transition: opacity 0.3s;
   }
@@ -20,244 +50,139 @@
   &.xs {
     width: 10px;
     height: 10px;
+    font-size: 10px;
+  }
+  &.msm{
+    width: 13px;
+    height: 13px;
+    font-size: 13px;
   }
 
   &.sm {
     width: 16px;
     min-width: 16px;
     height: 16px;
+    font-size: 16px;
   }
 
   &.sm-md {
     width: 20px;
     height: 20px;
+    font-size: 20px;
   }
 
   &.md {
-    width: 24px;
-    height: 24px;
+    width: 28px;
+    height: 28px;
+    font-size: 28px;
   }
 
   &.lg {
     width: 32px;
     height: 32px;
+    font-size: 32px;
   }
 
   &.xl {
     width: 48px;
     height: 48px;
+    font-size: 48px;
   }
 
   &.xxl {
     width: 88px;
     height: 88px;
+    font-size: 88px;
   }
 }
 
-.i-back {
-  @include icon('#{$assets-icons-path}/back.svg');
+.al-icon {
+  width: 100%;
+  text-align: center;
+  display: inline-block;
+
 }
 
+// no font icon
 .i-expand-collapse-all {
   @include icon('#{$assets-icons-path}/expand-collapse-all.svg');
 }
 
+// no font icon
 .i-expand-collapse-all-inactive {
   @include icon('#{$assets-icons-path}/expand-collapse-inactive.svg');
 }
 
-.i-home-neon {
-  @include icon('#{$assets-icons-path}/home-neon.svg');
-}
-
-.i-datasets {
-  @include icon('#{$assets-icons-path}/side-nav/datasets.svg');
-}
-
-.i-datasets-white {
-  @include icon('#{$assets-icons-path}/datasets-white.svg');
-}
-
-.i-plus-black {
-  @include icon('#{$assets-icons-path}/plus-black.svg');
-}
-
-.i-projects-neon {
-  @include icon('#{$assets-icons-path}/projects-neon.svg');
-}
-
-.type {
-  @include icon('#{$assets-icons-path}/custom-task-type.svg');
-
-  &.training {
-    @include icon('#{$assets-icons-path}/training.svg');
-  }
-
-  &.testing {
-    @include icon('#{$assets-icons-path}/testing.svg');
-  }
-}
-
-.i-training {
-  @include icon('#{$assets-icons-path}/training.svg');
-}
-
+// no font icon
 .i-dataview {
   @include icon('#{$assets-icons-path}/dataview-icon.svg');
 }
 
-.i-clone {
-  @include icon('#{$assets-icons-path}/clone.svg');
-}
-
-.i-clone-black {
-  @include icon('#{$assets-icons-path}/clone-black.svg');
-}
-
-.i-extand-copy-1 {
-  @include icon('#{$assets-icons-path}/extand-copy-1.svg');
-}
-
-.i-home-off {
-  @include icon('#{$assets-icons-path}/home-off.svg');
-}
-
-.i-list-view {
-  @include icon('#{$assets-icons-path}/bars-menu.svg');
-}
-
-.i-plus-blue {
-  @include icon('#{$assets-icons-path}/plus-blue.svg');
-}
-
-.i-projects-off {
-  @include icon('#{$assets-icons-path}/projects-off.svg');
-}
-
-.i-trash {
-  @include icon('#{$assets-icons-path}/trash.svg');
-}
-
+//Two colors icon
 .i-compare-copy {
   @include icon('#{$assets-icons-path}/compare-copy.svg');
 }
 
-.i-extand {
-  @include icon('#{$assets-icons-path}/extand.svg');
-}
 
+//Problem converting to font
 .i-extand-black {
   @include icon('#{$assets-icons-path}/extand-black.svg');
 }
 
-.i-home {
-  @include icon('#{$assets-icons-path}/home.svg');
-}
-
-.i-plus-purple-light {
-  @include icon('#{$assets-icons-path}/plus-purple-light.svg');
-}
-
-.i-projects {
-  @include icon('#{$assets-icons-path}/projects.svg');
-}
-
-.i-projects-white {
-  @include icon('#{$assets-icons-path}/projects-white.svg');
-}
-
+//we should have one sort icon with colors
 .i-sort-off {
   @include icon('#{$assets-icons-path}/sort-off.svg');
 }
 
-.i-cursor {
-  @include icon('#{$assets-icons-path}/cursor.svg');
-}
-
-.i-filter-focus {
-  @include icon('#{$assets-icons-path}/filter-focus.svg');
-}
-
+//no font
 .i-plus-thin {
   @include icon('#{$assets-icons-path}/plus-thin.svg');
 }
 
-.i-queues-neon {
-  @include icon('#{$assets-icons-path}/queues-neon.svg');
-}
+// font icon is not good (more than one color)
+//.i-queues-white {
+//  @include icon('#{$assets-icons-path}/queues-white.svg');
+//}
 
-.i-queues-white {
-  @include icon('#{$assets-icons-path}/queues-white.svg');
-}
+//.i-queue {
+//  @include icon('#{$assets-icons-path}/queue.svg');
+//}
 
-.i-queue {
-  @include icon('#{$assets-icons-path}/queue.svg');
-}
-
-.i-queues-icon {
-  @include icon('#{$assets-icons-path}/queues-icon.svg');
-}
+//Two colors
+//.i-queues-icon {
+//  @include icon('#{$assets-icons-path}/queues-icon.svg');
+//}
 
+//sort icon
 .i-sort-on-down {
   @include icon('#{$assets-icons-path}/sort-on-down.svg');
 }
 
-.i-draft-light-blue {
-  @include icon('#{$assets-icons-path}/draft-light-blue.svg');
-}
-
-.i-edit {
-  @include icon('#{$assets-icons-path}/edit.svg');
-}
-
+//two colors icons
 .i-filter-off {
   @include icon('#{$assets-icons-path}/filter-off.svg');
 }
 
-.i-how-to-white {
-  @include icon('#{$assets-icons-path}/how-to-white.svg');
-}
-
-.i-move-to-project {
-  @include icon('#{$assets-icons-path}/move-to-project.svg');
-}
-
 .i-queues {
   @include icon('#{$assets-icons-path}/queues.svg');
 }
 
+// no font icon
 .i-sort-on-up {
   @include icon('#{$assets-icons-path}/sort-on-up.svg');
 }
 
+//not used in trains
 .i-gear {
   @include icon('#{$assets-icons-path}/settings_gear.svg');
 }
 
+// two colors
 .i-filter-on {
   @include icon('#{$assets-icons-path}/filter-on.svg');
 }
 
-.i-datasets-neon {
-  @include icon('#{$assets-icons-path}/datasets-neon.svg');
-}
-
-.i-custom-type {
-  @include icon('#{$assets-icons-path}/custom-task-type.svg');
-}
-
-.i-testing {
-  @include icon('#{$assets-icons-path}/testing.svg');
-
-  &.dark {
-    @include icon('#{$assets-icons-path}/testing-dark.svg');
-  }
-
-  &.black {
-    @include icon('#{$assets-icons-path}/test-icon.svg');
-  }
-}
-
+// no status font icons
 .i-queued {
   @include icon('#{$assets-icons-path}/pending.svg');
 
@@ -303,10 +228,6 @@
   @include icon('#{$assets-icons-path}/completed.svg');
 }
 
-.i-copy-to-clipboard {
-  @include icon('#{$assets-icons-path}/copy-to-clipboard.svg');
-}
-
 .i-failed {
   @include icon('#{$assets-icons-path}/failed.svg');
 
@@ -324,34 +245,22 @@
 
 }
 
-.i-unpublish {
-  @include icon('#{$assets-icons-path}/unpublish.svg');
+.i-created {
+  @include icon('#{$assets-icons-path}/draft-light-blue.svg');
 }
 
-.i-x {
-  @include icon('#{$assets-icons-path}/x.svg');
-}
-
-.i-x-white {
-  @include icon('#{$assets-icons-path}/x-white.svg');
-}
 
+// no font icon
 .i-id {
   @include icon('#{$assets-icons-path}/id.svg');
 }
 
+// no font icon
 .i-id-fix {
   @include icon('#{$assets-icons-path}/id-fix.svg');
 }
 
-.i-dialog-x {
-  @include icon('#{$assets-icons-path}/close.svg');
-
-  &.gray {
-    @include icon('#{$assets-icons-path}/close-gray.svg');
-  }
-}
-
+// two colors
 .i-annotation {
   @include icon('#{$assets-icons-path}/annotation.svg');
 }
@@ -360,147 +269,81 @@
   @include icon('#{$assets-icons-path}/annotation-white.svg');
 }
 
+// no font icon
 .i-v-neon {
   @include icon('#{$assets-icons-path}/v.svg');
 }
 
+// no font icon
 .i-v-green {
   @include icon('#{$assets-icons-path}/v-green.svg');
 }
 
+// no font icon
 .i-v {
   @include icon('#{$assets-icons-path}/v-copy.svg');
 }
 
+// no font icon
 .i-v-white {
   @include icon('#{$assets-icons-path}/white-v.svg');
 }
 
+// no font icon
 .i-v-black {
   @include icon('#{$assets-icons-path}/black-v.svg');
 }
 
-.i-compare {
-  @include icon('#{$assets-icons-path}/compare-icon.svg');
-}
-
-.i-compare {
-  @include icon('#{$assets-icons-path}/compare-icon.svg');
-}
-
-.i-archive-black {
-  @include icon('#{$assets-icons-path}/archive-icon.svg');
-}
-
-.i-archive {
-  @include icon('#{$assets-icons-path}/archive.svg');
-}
-
-.i-archive-light-blue {
-  @include icon('#{$assets-icons-path}/archive-light-blue.svg');
-}
-
+// two colors
 .i-alert {
   @include icon('#{$assets-icons-path}/alert.svg');
 }
 
-.i-alert-all-neon {
-  @include icon('#{$assets-icons-path}/alert-all-neon.svg');
-}
-
-.i-alert-all-grey {
-  @include icon('#{$assets-icons-path}/alert-all-grey.svg');
-}
-
-.i-created {
-  @include icon('#{$assets-icons-path}/draft-light-blue.svg');
-}
-
 .i-annotation-blue-neon {
   @include icon('#{$assets-icons-path}/annotation-blue-neon.svg');
 }
 
-.i-publish {
-  @include icon('#{$assets-icons-path}/publish.svg');
-
-  &.grey {
-    @include icon('#{$assets-icons-path}/publish-grey.svg');
-  }
-}
-
-.i-rectangle {
-  @include icon('#{$assets-icons-path}/rectangle-icon-purple.svg');
-
-  &.neon {
-    @include icon('#{$assets-icons-path}/rectangle-icon-purple-neon.svg');
-  }
-}
-
-.i-polygon {
-  @include icon('#{$assets-icons-path}/polygon-icon-purple.svg');
-
-  &.neon {
-    @include icon('#{$assets-icons-path}/polygon-icon-purple-neon.svg');
-  }
-}
-
-.i-keypoint {
-  @include icon('#{$assets-icons-path}/keypoint-icon-purple.svg');
-
-  &.neon {
-    @include icon('#{$assets-icons-path}/keypoint-icon-purple-neon.svg');
-  }
-}
-
-.i-ellipse {
-  @include icon('#{$assets-icons-path}/ellipse-icon-purple.svg');
-
-  &.neon {
-    @include icon('#{$assets-icons-path}/ellipse-icon-purple-neon.svg');
-  }
-}
-
+// No font icon
 .i-terms {
   @include icon('#{$assets-icons-path}/terms-icon.svg');
 }
 
+// Icon font is only one color
 .i-model {
   @include icon('#{$assets-icons-path}/model.svg');
 }
 
+// No font icon
 .i-generate-code {
   @include icon('#{$assets-icons-path}/generate-code-copy.svg');
 }
 
+// Font icon looks bad
 .i-alert-purple {
   @include icon('#{$assets-icons-path}/alert-purple.svg');
 }
 
-.i-input-model {
-  @include icon('#{$assets-icons-path}/input-model.svg');
-}
-
-.i-output-model {
-  @include icon('#{$assets-icons-path}/output-model.svg');
-}
-
-.i-data-audit {
-  @include icon('#{$assets-icons-path}/data-audit.svg');
-
-}
-
+// not used in trains
 .i-alert-red {
   @include icon('#{$assets-icons-path}/alert-red.svg');
 }
 
-.i-blob {
-  @include icon('#{$assets-icons-path}/blob.svg');
+// No font icon
+.i-output-model {
+  @include icon('#{$assets-icons-path}/output-model.svg');
 }
 
+// no font icon
+.i-input-model {
+  @include icon('#{$assets-icons-path}/input-model.svg');
+}
+
+
 .i-cat {
   @include icon('#{$assets-icons-path}/cat-icon.svg');
 }
 
+
 .i-Caffe {
   @include icon('#{$assets-icons-path}/caffe-icon.svg');
 }
@@ -509,126 +352,58 @@
   @include icon('#{$assets-icons-path}/pytorch-icon.svg');
 }
 
+// No used in trains
 .i-Custom {
   @include icon('#{$assets-icons-path}/custom-icon.svg');
 }
 
+//No font icon
 .i-Keras {
   @include icon('#{$assets-icons-path}/keras-icon.svg');
 }
 
+//No font icon
 .i-Tensor.Flow {
   @include icon('#{$assets-icons-path}/tensorflow-icon.svg');
   filter: none;
 }
 
+//No font icon
 .i-no-plots {
   @include icon('#{$assets-icons-path}/no-plots.svg');
 }
 
+//No font icon
 .i-no-log {
   @include icon('#{$assets-icons-path}/no-log.svg');
 }
 
+//No font icon
 .i-no-debug {
   @include icon('#{$assets-icons-path}/no-debug.svg');
 }
 
+// No used in trains
 .i-no-debug-white {
   @include icon('#{$assets-icons-path}/no-debug-white.svg');
 }
 
+.i-no-data-artifacts {
+  @include icon('#{$assets-icons-path}/no-artifacts.svg');
+}
+
+//No font icon
 .i-no-data-graph {
   @include icon('#{$assets-icons-path}/no-data-graph.svg');
 }
 
-.i-arrow-from-left {
-  @include icon('#{$assets-icons-path}/arrow-from-left.svg');
-}
+//.i-info-maximize {
+//  @include icon('#{$assets-icons-path}/info-max.svg');
+//}
 
-.i-arrow-from-right {
-  @include icon('#{$assets-icons-path}/arrow-from-right.svg');
-}
-
-.i-arrow-to-top {
-  @include icon('#{$assets-icons-path}/arrow-to-top.svg');
-}
-
-.i-arrow-to-bottom {
-  @include icon('#{$assets-icons-path}/arrow-to-bottom.svg');
-}
-
-.i-info-maximize {
-  @include icon('#{$assets-icons-path}/info-max.svg');
-}
-
-.i-info-minimize {
-  @include icon('#{$assets-icons-path}/info-min.svg');
-}
-
-.i-redo {
-  @include icon('#{$assets-icons-path}/redo.svg');
-}
-
-.i-undo {
-  @include icon('#{$assets-icons-path}/undo.svg');
-}
-
-.i-reset {
-  @include icon('#{$assets-icons-path}/reset.svg');
-}
-
-.i-zoom-in {
-  @include icon('#{$assets-icons-path}/zoom-in.svg');
-}
-
-.i-zoom-out {
-  @include icon('#{$assets-icons-path}/zoom-out.svg');
-}
-
-.i-zoom-to-fit {
-  @include icon('#{$assets-icons-path}/fit.svg');
-}
-
-.i-zoom-plus {
-  @include icon('#{$assets-icons-path}/plus2020.svg');
-}
-
-.i-zoom-minus {
-  @include icon('#{$assets-icons-path}/minus.svg');
-}
-
-.i-zoom-reset {
-  @include icon('#{$assets-icons-path}/zoom-1-to-1.svg');
-}
-
-.i-previous {
-  @include icon('#{$assets-icons-path}/previous.svg');
-}
-
-.i-next {
-  @include icon('#{$assets-icons-path}/next.svg');
-}
-
-.i-download {
-  @include icon('#{$assets-icons-path}/download.svg');
-}
-
-.i-next-batch {
-  @include icon('#{$assets-icons-path}/next-batch.svg');
-}
-
-.i-prev-batch {
-  @include icon('#{$assets-icons-path}/prev-batch.svg');
-}
-
-.i-between {
-  @include icon('#{$assets-icons-path}/between.svg');
-}
-
-.i-back-to-top {
-  @include icon('#{$assets-icons-path}/back-to-top.svg');
-}
+//.i-info-minimize {
+//  @include icon('#{$assets-icons-path}/info-min.svg');
+//}
 
 .i-kibana {
   @include icon('#{$assets-icons-path}/kibana.svg');
@@ -638,18 +413,17 @@
   @include icon('#{$assets-icons-path}/download-frames.svg');
 }
 
-.i-kibana-code {
-  @include icon('#{$assets-icons-path}/kibana-code.svg');
-}
-
+// No font icon
 .i-audio {
   @include icon('#{$assets-icons-path}/audio.svg');
 }
 
+//No font icon
 .i-no-debug-samples {
   @include icon('#{$assets-icons-path}/no-debug-samples.svg');
 }
 
+//No font icon
 .i-no-debug-samples-with-text {
   @include icon('#{$assets-icons-path}/no-debug-samples-with-text.svg');
 }
diff --git a/src/app/webapp-common/shared/ui-components/styles/index.scss b/src/app/webapp-common/shared/ui-components/styles/index.scss
index f5db7bf7..9fc223bf 100644
--- a/src/app/webapp-common/shared/ui-components/styles/index.scss
+++ b/src/app/webapp-common/shared/ui-components/styles/index.scss
@@ -46,7 +46,7 @@ body {
     }
 
     a {
-      color: $cloudy-blue;
+      color: $blue-250;
 
       &:hover {
         color: #FFFFFF;
@@ -84,7 +84,7 @@ body {
     }
 
     sm-menu .btn {
-      color: $cloudy-blue;
+      color: $blue-250;
     }
 
     sm-menu .btn:hover {
@@ -297,10 +297,10 @@ body {
 }
 
 .mat-slider-thumb {
-  background-color: $cloudy-blue !important;
+  background-color: $blue-250 !important;
 
   &:hover {
-    background-color: $cloudy-blue !important;
+    background-color: $blue-250 !important;
   }
 }
 
diff --git a/src/app/webapp-common/shared/ui-components/styles/material-overide.scss b/src/app/webapp-common/shared/ui-components/styles/material-overide.scss
index 8226500a..8321dc0a 100644
--- a/src/app/webapp-common/shared/ui-components/styles/material-overide.scss
+++ b/src/app/webapp-common/shared/ui-components/styles/material-overide.scss
@@ -2,11 +2,18 @@ body .mat-form-field-outline-gap {
   display: none;
 }
 
-body .mat-form-field-appearance-outline .mat-form-field-outline {
+body .mat-form-field-appearance-outline:not(.data-text) .mat-form-field-outline {
   top: 10px;
   background-color: white;
 }
 
+body .data-text.mat-form-field-appearance-outline .mat-form-field-outline {
+  .mat-form-field-outline-end, .mat-form-field-outline-start {
+    border: none;
+  }
+}
+
+
 body .mat-form-field-infix {
   padding-bottom: 8px;
 }
diff --git a/src/app/webapp-common/shared/ui-components/styles/mixins/scrollbar.scss b/src/app/webapp-common/shared/ui-components/styles/mixins/scrollbar.scss
index c2e1d391..72821a6e 100644
--- a/src/app/webapp-common/shared/ui-components/styles/mixins/scrollbar.scss
+++ b/src/app/webapp-common/shared/ui-components/styles/mixins/scrollbar.scss
@@ -22,6 +22,11 @@
         background: map-get($scrollbar, tumb-background);
       }
 
+      &::-webkit-scrollbar-thumb {
+        border-radius: 4px;
+        background: map-get($scrollbar, tumb-background);
+      }
+
       scrollbar-color: map-get($scrollbar, tumb-background) transparent;
 
       ::-webkit-scrollbar-corner {
diff --git a/src/app/webapp-common/shared/ui-components/styles/notifications.scss b/src/app/webapp-common/shared/ui-components/styles/notifications.scss
index 20099d78..1f30e89d 100644
--- a/src/app/webapp-common/shared/ui-components/styles/notifications.scss
+++ b/src/app/webapp-common/shared/ui-components/styles/notifications.scss
@@ -3,8 +3,6 @@
 $levels-list: error warn info success;
 
 .notifier__notification {
-  display: flex;
-  align-items: center;
   padding-left: 15px;
   color: $blue-200;
   background-color: $blue-500;
@@ -12,8 +10,8 @@ $levels-list: error warn info success;
 
   .notifier__notification-button {
     position: absolute;
-    right: 10px;
-    top: -2px;
+    right: 5px;
+    top: -5px;
     fill: $blue-300;
 
     .notifier__notification-button-icon {
@@ -26,8 +24,9 @@ $levels-list: error warn info success;
     width: 15px;
     height: 15px;
     background-repeat: no-repeat;
-    display: block;
-    margin-left: 10px;
+    display: inline-block;
+    margin-left: 2px;
+    margin-top: 6px;
   }
 
   @each $level in $levels-list {
@@ -37,6 +36,12 @@ $levels-list: error warn info success;
       &:before {
         background-image: url("#{$assets-icons-path}/#{$level}.svg");
       }
+      &has-actions {
+        &:before {
+          margin-top: 2px;
+          align-self: flex-start;
+        }
+      }
     }
   }
 
diff --git a/src/app/webapp-common/shared/ui-components/styles/themes/dark.scss b/src/app/webapp-common/shared/ui-components/styles/themes/dark.scss
index 6a0dc42a..4eeea9d9 100644
--- a/src/app/webapp-common/shared/ui-components/styles/themes/dark.scss
+++ b/src/app/webapp-common/shared/ui-components/styles/themes/dark.scss
@@ -2,13 +2,13 @@
 
 $dark-theme: (
   bg-color: $blue-800,
-  color: $cloudy-blue,
+  color: $blue-250,
   al-header: $blue-100,
   card: (
     body-bg-color: $blue-500,
     footer-bg-color: $blue-600,
     border-color: $blue-250,
-    seperator-line-color: $cloudy-blue,
+    seperator-line-color: $blue-250,
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1)
   ),
   scrollbar: (
@@ -43,29 +43,29 @@ $dark-theme: (
     stateDefaultTextColor: $blue-300,
     //Active State,
     stateActiveBorderColor: $blue-600,
-    stateActiveBgColor: $dark-grey-blue-two,
+    stateActiveBgColor: $blue-500,
     stateActiveTextColor: $blue-100,
     //Highlight State,
     stateHighlightBorderColor: transparent,
     stateHighlightBgColor: $blue-300,
     stateHighlightTextColor: #ffffff,
     //Focus State,
-    stateFocusBorderColor: $dark-grey-blue-two,
-    stateFocusBgColor: $dark-grey-blue-two,
+    stateFocusBorderColor: $blue-500,
+    stateFocusBgColor: $blue-500,
     stateFocusTextColor: $blue-100,
     //Error State,
     stateErrorBorderColor: #ec4e4e,
     stateErrorBgColor: #ec4e4e,
     stateErrorTextColor: #ffffff,
     //Hover State,
-    stateHoverBorderColor: $dark-grey-blue-two,
-    stateHoverBgColor: $dark-grey-blue-two,
+    stateHoverBorderColor: $blue-500,
+    stateHoverBgColor: $blue-500,
     stateHoverTextColor: #a7b2d8,
     //Forms,
     inputBgColor: $blue-50,
-    inputTextColor: $dusk-four,
+    inputTextColor: $blue-600,
     invalidInputBorderColor: #ec4e4e,
-    inputGroupTextColor: $dusk-four,
+    inputGroupTextColor: $blue-600,
   ),
   navbar-item: (
     color: #8f9cc8,
@@ -140,7 +140,7 @@ $dark-theme: (
     //option-highlighted-bg: #ec4e4e
   ),
   button-toggle-group: (
-    background-color-active: $dark-grey-blue-two,
+    background-color-active: $blue-500,
     background-color: $blue-600,
     color-active: $blue-100,
     color: $blue-300
diff --git a/src/app/webapp-common/shared/ui-components/styles/themes/light.scss b/src/app/webapp-common/shared/ui-components/styles/themes/light.scss
index 119f8525..a2862188 100644
--- a/src/app/webapp-common/shared/ui-components/styles/themes/light.scss
+++ b/src/app/webapp-common/shared/ui-components/styles/themes/light.scss
@@ -78,11 +78,11 @@ $light-theme: (
     icon-color: $blue-480,
     border-color: $blue-200,
     border-color-focus: $blue-480,
-    ph-color: $cloudy-blue
+    ph-color: $blue-250
   ),
   input: (
     color: $blue-400,
-    place-holder-color: $cloudy-blue,
+    place-holder-color: $blue-250,
     background-color: $white,
     //background-color-disabled: $blue-600,
     border-radius: 4px,
diff --git a/src/app/webapp-common/shared/ui-components/styles/variables.scss b/src/app/webapp-common/shared/ui-components/styles/variables.scss
index 518c9095..9b7824d9 100644
--- a/src/app/webapp-common/shared/ui-components/styles/variables.scss
+++ b/src/app/webapp-common/shared/ui-components/styles/variables.scss
@@ -5,36 +5,22 @@ $blue-100: #dce0ee; //220,224,238
 $blue-200: #c3cdf0; //195,205,240
 $blue-250: #A4ADCD;
 $blue-300: #8492c2; //132,146,19
-$blue-480: #707ba3;
-$blue-450: #657099;
 $blue-400: #5a658e; //90,101,142
+$blue-450: #657099;
+$blue-480: #707ba3;
 $blue-500: #384161; //56,65,97
+$blue-550: #47527A;
 $blue-600: #2c3246; //44,50,70
+$blue-650: #24293c;
 $blue-700: #202432; //32,36,50
 $blue-800: #1a1e2c; //26,30,44
 $blue-900: #141722; //20,23,34
 
-$blue-rgb-50: rgb(242, 244, 252);
-$blue-rgb-100: rgb(220, 224, 238);
-$blue-rgb-200: rgb(195, 205, 240);
-$blue-rgb-300: rgb(132, 146, 194);
-$blue-rgb-400: rgb(90, 101, 142);
-$blue-rgb-500: rgb(56, 65, 97);
-$blue-rgb-600: rgb(44, 50, 70);
-$blue-rgb-700: rgb(32, 36, 50);
-$blue-rgb-800: rgb(26, 30, 44);
-$blue-rgb-900: rgb(20, 23, 34);
-
-$very-light-blue: #f5f7ff;
-$cloudy-blue: #a7b2d8;
 $cloudy-blue-two: #ced1dc;
-$dark-grey-blue-two: #39415b;
 $dark-grey-blue-three: #bdc5e1;
-$dark-grey-blue-four: #e1e4ed;
 $dark-grey-blue-nine: #565b6b;
 $light-dusk: rgba(90, 101, 142, 0.5);
 $dusk-two: #515c85;
-$dusk-four: #32394f;
 $neon-yellow-original-notgoodinchrome: #d3ff00;
 $neon-yellow-betterinchrome: #caff00;
 $neon-yellow-hover: #c6ef06;
diff --git a/src/app/webapp-common/shared/ui-components/tags/tag-list/tag-list.component.html b/src/app/webapp-common/shared/ui-components/tags/tag-list/tag-list.component.html
index e3327195..64e9f2b1 100644
--- a/src/app/webapp-common/shared/ui-components/tags/tag-list/tag-list.component.html
+++ b/src/app/webapp-common/shared/ui-components/tags/tag-list/tag-list.component.html
@@ -1,20 +1,21 @@
 <span class="sys-tag" *ngFor="let tag of sysTags">{{tag}}</span>
 <ng-container *ngIf="remove.observers.length > 0; else:noRemove">
   <sm-user-tag class="tag-item"
-    *ngFor="let tag of tagsList; trackBy: trackFn"
-    [colors]="tag.colorObservable | async"
-    [caption]="tag.caption"
-    (remove)="remove.emit($event)"
-    [tooltip]="tooltip"
+               *ngFor="let tag of tagsList; trackBy: trackFn"
+               [colors]="tag.colorObservable | async"
+               [caption]="tag.caption"
+               [tooltip]="tooltip"
+               [disabledRemove]="disableRemove"
+               (remove)="removeTag($event)"
   ></sm-user-tag>
 </ng-container>
 
 <ng-template #noRemove>
   <sm-user-tag class="tag-item"
-    *ngFor="let tag of tagsList; trackBy: trackFn"
-    [colors]="tag.colorObservable | async"
-    [caption]="tag.caption"
-    [tooltip]="tooltip"
+               *ngFor="let tag of tagsList; trackBy: trackFn"
+               [colors]="tag.colorObservable | async"
+               [caption]="tag.caption"
+               [tooltip]="tooltip"
   ></sm-user-tag>
 </ng-template>
 
diff --git a/src/app/webapp-common/shared/ui-components/tags/tag-list/tag-list.component.scss b/src/app/webapp-common/shared/ui-components/tags/tag-list/tag-list.component.scss
index 317f6a6b..52194119 100644
--- a/src/app/webapp-common/shared/ui-components/tags/tag-list/tag-list.component.scss
+++ b/src/app/webapp-common/shared/ui-components/tags/tag-list/tag-list.component.scss
@@ -34,7 +34,6 @@
   }
 
   .sys-tag {
-    flex-grow: 2;
     display: inline-block;
     position: relative;
     min-width: 50px;
diff --git a/src/app/webapp-common/shared/ui-components/tags/tag-list/tag-list.component.ts b/src/app/webapp-common/shared/ui-components/tags/tag-list/tag-list.component.ts
index c81ed8c0..e8983c88 100644
--- a/src/app/webapp-common/shared/ui-components/tags/tag-list/tag-list.component.ts
+++ b/src/app/webapp-common/shared/ui-components/tags/tag-list/tag-list.component.ts
@@ -17,9 +17,12 @@ export interface Tag {
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TagListComponent implements OnInit {
+  public disableRemove: boolean;
   tagsList = [] as Tag[];
+
   @Input() set tags (tags: string[]) {
     this.tagsList = tags?.map((tag: string) => ({caption: tag, colorObservable: this.colorService.getColor(tag)}));
+    this.disableRemove = false;
   }
   @Input() sysTags = [] as string[];
   @Input() tooltip: boolean = false;
@@ -31,7 +34,13 @@ export class TagListComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  public trackFn (tag: Tag) {
+  // Why the first arg is index??
+  public trackFn (index: number, tag: Tag) {
     return tag.caption;
   }
+
+  removeTag(tag: string) {
+    this.remove.emit(tag);
+    this.disableRemove = true;
+  }
 }
diff --git a/src/app/webapp-common/shared/ui-components/tags/tags-menu/tags-menu.component.html b/src/app/webapp-common/shared/ui-components/tags/tags-menu/tags-menu.component.html
index b51705c4..4794a6b6 100644
--- a/src/app/webapp-common/shared/ui-components/tags/tags-menu/tags-menu.component.html
+++ b/src/app/webapp-common/shared/ui-components/tags/tags-menu/tags-menu.component.html
@@ -9,12 +9,10 @@
 <div class="buttons-container" [class.searching]="filterText">
   <button
     class="item"
-    smClickStopPropagation
     *ngIf="filterText && !allTags.includes(filterText)"
     (click)="addTag(filterText)"
   >"{{filterText}}" <span class="new">(Create New)</span></button>
   <button
-    smClickStopPropagation
     *ngFor="let tag of allTags | filter:tags | filter:filterText"
     class="item"
     (click)="addTag(tag)"
diff --git a/src/app/webapp-common/shared/ui-components/tags/tags-menu/tags-menu.component.ts b/src/app/webapp-common/shared/ui-components/tags/tags-menu/tags-menu.component.ts
index 0f152a7d..efe1a313 100644
--- a/src/app/webapp-common/shared/ui-components/tags/tags-menu/tags-menu.component.ts
+++ b/src/app/webapp-common/shared/ui-components/tags/tags-menu/tags-menu.component.ts
@@ -26,7 +26,8 @@ export class TagsMenuComponent {
 
   @ViewChild('nameInput') nameInput: ElementRef<HTMLInputElement>;
 
-  constructor(private store: Store, private cdr: ChangeDetectorRef) {
+
+  constructor(private store: Store, private cdr: ChangeDetectorRef, private elRef: ElementRef) {
   }
 
   openTagColors() {
@@ -38,6 +39,7 @@ export class TagsMenuComponent {
       this.tagSelected.emit(tag);
       this.filterText = '';
     }
+    this.elRef.nativeElement.click();
   }
 
   focus() {
diff --git a/src/app/webapp-common/shared/ui-components/tags/user-tag/user-tag.component.html b/src/app/webapp-common/shared/ui-components/tags/user-tag/user-tag.component.html
index 778d633a..e582178f 100644
--- a/src/app/webapp-common/shared/ui-components/tags/user-tag/user-tag.component.html
+++ b/src/app/webapp-common/shared/ui-components/tags/user-tag/user-tag.component.html
@@ -10,8 +10,9 @@
   {{caption}}
 </span>
 <i class="fas fa-xs fa-times remove"
+   *ngIf="remove.observers.length > 0 && !disabledRemove"
    [style.color]="colors?.foreground"
-   *ngIf="remove.observers.length > 0"
-   (click)="remove.emit(caption)">
+   (click)="onRemoveClicked(caption)">
 </i>
+<mat-spinner *ngIf="disabledRemove" class="icon sm white remove" [diameter]="17" [strokeWidth]="3"></mat-spinner>
 <div class="arrow" [class.add-button]="add.observers.length > 0" [style.backgroundColor]="colors?.background"></div>
diff --git a/src/app/webapp-common/shared/ui-components/tags/user-tag/user-tag.component.ts b/src/app/webapp-common/shared/ui-components/tags/user-tag/user-tag.component.ts
index b1353b53..f6d6665f 100644
--- a/src/app/webapp-common/shared/ui-components/tags/user-tag/user-tag.component.ts
+++ b/src/app/webapp-common/shared/ui-components/tags/user-tag/user-tag.component.ts
@@ -11,6 +11,7 @@ export class UserTagComponent implements OnInit {
   @Input() colors: TagColor;
   @Input() foreground: string;
   @Input() tooltip: boolean;
+  @Input() disabledRemove: boolean;
   @Output() remove = new EventEmitter<string>();
   @Output() add = new EventEmitter<MouseEvent>();
 
@@ -19,4 +20,7 @@ export class UserTagComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  onRemoveClicked(caption: string) {
+    this.remove.emit(caption);
+  }
 }
diff --git a/src/app/webapp-common/shared/ui-components/ui-components.module.ts b/src/app/webapp-common/shared/ui-components/ui-components.module.ts
index dbcb9419..e3c3bece 100644
--- a/src/app/webapp-common/shared/ui-components/ui-components.module.ts
+++ b/src/app/webapp-common/shared/ui-components/ui-components.module.ts
@@ -88,14 +88,17 @@ import {CheckedFilterListComponent} from './data/checked-filter-list/checked-fil
 import {KeydownStopPropagationDirective} from './directives/keydown-stop-propagation.directive';
 import {PreventArrowKeysDirective} from './directives/prevent-arrow-keys.directive';
 import {EllipsisMiddleDirective} from './directives/ellipsis-middle.directive';
-import { UserTagComponent } from './tags/user-tag/user-tag.component';
-import { TagListComponent } from './tags/tag-list/tag-list.component';
-import { TagsMenuComponent } from './tags/tags-menu/tags-menu.component';
-import { TagColorMenuComponent } from './tags/tag-color-menu/tag-color-menu.component';
+import {UserTagComponent} from './tags/user-tag/user-tag.component';
+import {TagListComponent} from './tags/tag-list/tag-list.component';
+import {TagsMenuComponent} from './tags/tags-menu/tags-menu.component';
+import {TagColorMenuComponent} from './tags/tag-color-menu/tag-color-menu.component';
 import {ScrollingModule} from '@angular/cdk/scrolling';
 import {ColorPickerModule} from 'ngx-color-picker';
 import {EditJsonComponent} from './overlay/edit-json/edit-json.component';
 import {ResizableColumnDirective} from './data/table/resizable-column.directive';
+import {JsonValidatorDirective} from './template-forms-ui/json-validator.directive';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {GroupedCheckedFilterListComponent} from './data/grouped-checked-filter-list/grouped-checked-filter-list.component';
 
 
 const _declarations = [
@@ -134,6 +137,7 @@ const _declarations = [
   KeydownStopPropagationDirective,
   PreventArrowKeysDirective,
   ThrottledScrollListenerDirective,
+  JsonValidatorDirective,
   AlertDialogComponent,
   TooltipDirective,
   InputGroupComponent,
@@ -150,6 +154,7 @@ const _declarations = [
   SimpleTableComponent2,
   SelectableListComponent,
   CheckedFilterListComponent,
+  GroupedCheckedFilterListComponent,
   GroupedSelectableListComponent,
   ClickPreventDefaultDirective,
   SelectableFilterListComponent,
@@ -176,26 +181,27 @@ const _declarations = [
 ];
 
 @NgModule({
-  imports: [
-    MatExpansionModule,
-    DragDropModule,
-    NgSelectModule,
-    CommonModule,
-    ChipsModule,
-    FormsModule,
-    ReactiveFormsModule,
-    ClipboardModule,
-    TableModule,
-    ContextMenuModule,
-    SMMaterialModule,
-    MatButtonToggleModule,
-    SharedPipesModule,
-    ChooseColorModule,
-    PortalModule,
-    SMPortalModule,
-    ScrollingModule,
-    ColorPickerModule,
-  ],
+    imports: [
+        MatExpansionModule,
+        DragDropModule,
+        NgSelectModule,
+        CommonModule,
+        ChipsModule,
+        FormsModule,
+        ReactiveFormsModule,
+        ClipboardModule,
+        TableModule,
+        ContextMenuModule,
+        SMMaterialModule,
+        MatButtonToggleModule,
+        SharedPipesModule,
+        ChooseColorModule,
+        PortalModule,
+        SMPortalModule,
+        ScrollingModule,
+        ColorPickerModule,
+        MatProgressSpinnerModule,
+    ],
   providers: [],
   declarations: [..._declarations, TagsMenuComponent, TagColorMenuComponent, ResizableColumnDirective],
   exports: [..._declarations, NgSelectModule, ChipsModule, SMMaterialModule, ChooseColorModule, SMPortalModule, TagsMenuComponent]
diff --git a/src/app/webapp-common/shared/utils/build-tree-from-array.ts b/src/app/webapp-common/shared/utils/build-tree-from-array.ts
deleted file mode 100644
index 70b491a1..00000000
--- a/src/app/webapp-common/shared/utils/build-tree-from-array.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export interface TreeNode {
-  label?: string;
-  data?: any;
-  children?: TreeNode[];
-  parent?: TreeNode;
-}
-
-export const buildVersionsTree = function(versions: any = []): TreeNode[] {
-    const nodes = [];
-    const nodeMap = Object.create(null);
-
-    versions.forEach(node => {
-      nodeMap[node.id] = {'data': node, label: node.name, children: [], expanded: true};
-    });
-
-    versions.forEach(node => {
-      if (node.parent) {
-        nodeMap[node.parent] && nodeMap[node.parent].children.push(nodeMap[node.id]);
-      } else {
-        nodes.push(nodeMap[node.id]);
-      }
-    });
-
-    return nodes;
-};
diff --git a/src/app/webapp-common/shared/utils/fp.ts b/src/app/webapp-common/shared/utils/fp.ts
deleted file mode 100644
index 07369f8a..00000000
--- a/src/app/webapp-common/shared/utils/fp.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// allegro functional programming utils functions
-
-export function addItemToList<T = any>(list: Array<T>, item: T): Array<T> {
-  return list.concat([item]);
-}
-
-export function removeItemFromList<T = any>(list: Array<T>, item: T): Array<T> {
-  return list.filter(arrItem => item !== arrItem);
-}
-
-export function removeItemFromListByIndex<T = any>(list: Array<T>, index: number): Array<T> {
-  return list.filter((item, i) => i !== index);
-}
-
-export function updateItemFromList<T = any>(list: Array<T>, item: T, index: number): Array<T> {
-  return list.map((aItem, i) => i == index ? item : aItem);
-}
diff --git a/src/app/webapp-common/shared/utils/shared-utils.ts b/src/app/webapp-common/shared/utils/shared-utils.ts
index 4297d288..2d02e2c8 100644
--- a/src/app/webapp-common/shared/utils/shared-utils.ts
+++ b/src/app/webapp-common/shared/utils/shared-utils.ts
@@ -52,8 +52,15 @@ export const isSourceVideo = (source) => {
 };
 
 export function isHtmlPage(url: string) {
-  const path = url.split('?')[0];
-  return ['html', 'htm'].includes(last(path.split('.')));
+  const parsed = new URL(url);
+  const ext = last(parsed.pathname.split('.'));
+  return ['html', 'htm'].includes(ext);
+}
+
+export function isTextFileURL(url: string) {
+  const parsed = new URL(url);
+  const ext = last(parsed.pathname.split('.'));
+  return ['txt', 'text'].includes(ext);
 }
 
 export function createModelLink(uri, modelId, modelSignedUri) {
@@ -189,3 +196,39 @@ export function findRegexRecursively(object, field: string, regex: RegExp) {
   }
   return false;
 }
+
+export function groupHyperParams(hyperParams: any[]) {
+  return hyperParams.reduce((acc, {section, name, value}) => {
+    acc[section] = acc[section] || {};
+    acc[section][name] = acc[section][name] || {};
+    acc[section][name] = value;
+    return acc;
+  }, {});
+}
+export function getScaleFactor() {
+  const is_mac = (navigator.platform.indexOf('Mac') !== -1 || navigator.platform.indexOf('iPad') !== -1);
+  const is_win = navigator.platform.indexOf('Win') !== -1;
+  let dimensionRatio = 100;
+  let screenHeight: number;
+
+  try {
+    if (is_win) {
+      if (window['chrome']) {
+        screenHeight = window.screen.height < window.screen.width ? window.screen.height : window.screen.width;
+        dimensionRatio = Math.max(60, Math.min(100, Math.round((100 * (screenHeight / 1080) / 10)) * 10));
+
+      }
+    } else if (is_mac) {
+      screenHeight = (window.screen.height < window.screen.width ? window.screen.height : window.screen.width);
+      if (!window['chrome']) {
+        screenHeight *= devicePixelRatio / 2;
+      }
+      dimensionRatio = Math.max(60, Math.min(100, Math.round((100 * (screenHeight / 1080) / 10)) * 10));
+    }
+  } catch (err) {
+    dimensionRatio = 100;
+  }
+  dimensionRatio = 10000 / dimensionRatio;
+  return dimensionRatio;
+}
+
diff --git a/src/app/webapp-common/shared/utils/tableParamEncode.ts b/src/app/webapp-common/shared/utils/tableParamEncode.ts
index 57bbf6f8..d8674f28 100644
--- a/src/app/webapp-common/shared/utils/tableParamEncode.ts
+++ b/src/app/webapp-common/shared/utils/tableParamEncode.ts
@@ -93,7 +93,7 @@ export function decodeColumns(columns: string[]): [string[], MetricColumn[], str
       });
     } else if (col.startsWith('p.')) {
       const colParts = col.split('.');
-      params.push(colParts[1]);
+      params.push(colParts[1] + (colParts[2] ? `.${colParts[2]}` : ''));
     } else {
       cols.push(col);
     }
diff --git a/src/app/webapp-common/tasks/tasks.utils.ts b/src/app/webapp-common/tasks/tasks.utils.ts
index f838ec1f..18c6072d 100644
--- a/src/app/webapp-common/tasks/tasks.utils.ts
+++ b/src/app/webapp-common/tasks/tasks.utils.ts
@@ -44,9 +44,20 @@ export function mergeTasks(tableTask, task) {
 }
 
 
-export function getModelDesign(modelDesc: Task['execution']['model_desc']) {
-  const modelStr = typeof modelDesc == 'string' ? modelDesc : '';
-  return get('design', modelDesc) || get('prototxt', modelDesc) || modelStr;
+export function getModelDesign(modelDesc: Task['execution']['model_desc']): { key: string, value: any } {
+  const key = getModelDesignKey(modelDesc);
+  return{key: key, value: key ? modelDesc[key] : modelDesc};
+}
+
+function getModelDesignKey(modelDes): string {
+  const modelStr = typeof modelDes == 'string';
+  if (!modelDes || modelStr) {
+    return undefined;
+  } else {
+    const desKeys = Object.keys(modelDes);
+    const firstNonEmptyKey = desKeys.find(key => !!modelDes[key]);
+    return firstNonEmptyKey ? firstNonEmptyKey : desKeys[0];
+  }
 }
 
 export function convertPlots(plots): { [key: string]: ExperimentGraph } {
@@ -63,16 +74,16 @@ export function convertPlots(plots): { [key: string]: ExperimentGraph } {
 
 export function prepareGraph(data: object, layout: object, config: object, graph): ExperimentGraph {
   return {
-    data: data,
-    layout: layout,
-    config: config,
-    iter: graph.iter,
-    metric: graph.metric,
-    task: graph.task,
+    data     : data,
+    layout   : layout,
+    config   : config,
+    iter     : graph.iter,
+    metric   : graph.metric,
+    task     : graph.task,
     timestamp: graph.timestamp,
-    type: graph.type,
-    variant: graph.variant,
-    worker: graph.worker,
+    type     : graph.type,
+    variant  : graph.variant,
+    worker   : graph.worker,
   };
 }
 
@@ -308,7 +319,7 @@ export function timeInWords(milliseconds, granularityLevel = 3) {
 }
 
 export function chooseTimeUnit(data) {
-  if (!data[0].x || !data[0].x[0] || !data[0].x[1]) {
+  if (!data[0]?.x || !data[0]?.x[0] || !data[0]?.x[1]) {
     return {time: 1000, str: 'Seconds'};
   }
   const first = data[0].x[0];
diff --git a/src/app/webapp-common/user-preferences.ts b/src/app/webapp-common/user-preferences.ts
index 7e724ff3..7d9306d5 100644
--- a/src/app/webapp-common/user-preferences.ts
+++ b/src/app/webapp-common/user-preferences.ts
@@ -9,50 +9,6 @@ import {environment} from '../../environments/environment';
 import {Store} from '@ngrx/store';
 
 const USER_PREFERENCES_STORAGE_KEY = '_USER_PREFERENCES_';
-
-export function loadUserAndPreferences(userService: ApiUsersService, loginService: LoginService, store: Store<any>): () => Promise<any> {
-  return (): Promise<any> => {
-
-    return new Promise((resolve, reject) => {
-      const loginFlow = () => {
-        userPreferences.setUserService(userService);
-        userPreferences.loadPreferences().pipe(
-          tap(_ => resolve()),   // resolve in case user is logged-in and preferences are loaded
-          catchError((err) => {
-            const redirectUrl: string = window.location.pathname;
-            if (environment.autoLogin && err.status === 401 && !['/login', '/dashboard', '/'].includes(redirectUrl)) {
-              const name = `${(new Date()).getTime().toString()}`;
-              loginService.autoLogin(name, afterLogin.bind(this, resolve, store));
-            } else {
-              resolve();
-            }
-            return EMPTY;
-          })
-        ).subscribe(() => {
-          // Do nothing
-        }, (error) => {
-          // Do nothing
-        });
-      };
-
-
-      if (environment.spaLogin) {
-        loginService.initCredentials().subscribe(() => loginFlow());
-      } else {
-        loginFlow();
-      }
-    });
-  };
-}
-
-function afterLogin(resolve, store) {
-  userPreferences.loadPreferences()
-    .subscribe(() => {
-      store.dispatch(new FetchCurrentUser());
-      resolve();
-    });
-}
-
 class UserPreferences {
 
   private preferences: object;
@@ -146,3 +102,49 @@ class UserPreferences {
 }
 
 export const userPreferences = new UserPreferences();
+
+function afterLogin(resolve, store) {
+  userPreferences.loadPreferences()
+    .subscribe(() => {
+      store.dispatch(new FetchCurrentUser());
+      resolve();
+    });
+}
+
+export function loadUserAndPreferences(userService: ApiUsersService, loginService: LoginService, store: Store<any>): () => Promise<any> {
+  return (): Promise<any> => new Promise((resolve) => {
+    const loginFlow = () => {
+      userPreferences.setUserService(userService);
+      userPreferences.loadPreferences().pipe(
+        tap(_ => resolve()),   // resolve in case user is logged-in and preferences are loaded
+        catchError((err) => {
+          const redirectUrl: string = window.location.pathname;
+          if (err.status === 401 && !['/login', '/dashboard', '/'].includes(redirectUrl)) {
+            if (loginService.guestUser?.enabled) {
+              loginService.passwordLogin(loginService.guestUser.username, loginService.guestUser.password)
+                .subscribe(() => afterLogin.bind(this)(resolve, store));
+            } else if (environment.autoLogin) {
+              const name = `${(new Date()).getTime().toString()}`;
+              loginService.autoLogin(name, afterLogin.bind(this, resolve, store));
+            } else {
+              resolve();
+            }
+          } else {
+            resolve();
+          }
+          return EMPTY;
+        })
+      ).subscribe(() => {
+        // Do nothing
+      }, (error) => {
+        // Do nothing
+      });
+    };
+
+    if (environment.spaLogin) {
+      loginService.initCredentials().subscribe(() => loginFlow());
+    } else {
+      loginFlow();
+    }
+  });
+}
diff --git a/src/app/webapp-common/workers-and-queues/containers/workers-stats/workers-stats.component.ts b/src/app/webapp-common/workers-and-queues/containers/workers-stats/workers-stats.component.ts
index 990db619..cae7c07c 100644
--- a/src/app/webapp-common/workers-and-queues/containers/workers-stats/workers-stats.component.ts
+++ b/src/app/webapp-common/workers-and-queues/containers/workers-stats/workers-stats.component.ts
@@ -71,14 +71,14 @@ export class WorkersStatsComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.selectionSubscription = combineLatest(this.timeFormControl.valueChanges, this.paramFormControl.valueChanges)
+    this.selectionSubscription = combineLatest([this.timeFormControl.valueChanges, this.paramFormControl.valueChanges])
       .pipe(filter(([timeFrame, param]) => !!timeFrame && !!param &&
         (param !== this.currentParam || timeFrame !== this.currentTimeFrame)))
       .subscribe(([timeFrame, param]) => {
         this.store.dispatch(new SetStatsParams({timeFrame, param}));
       });
 
-    this.chartParamSubscription = combineLatest(this.store.select(selectStatsTimeFrame), this.store.select(selectStatsParams))
+    this.chartParamSubscription = combineLatest([this.store.select(selectStatsTimeFrame), this.store.select(selectStatsParams)])
       .pipe(filter(([timeFrame, param]) => !!timeFrame && !!param))
       .subscribe(([timeFrame, param]) => {
         this.currentParam = param;
diff --git a/src/app/webapp-common/workers-and-queues/dumb/queue-info/queue-info.component.html b/src/app/webapp-common/workers-and-queues/dumb/queue-info/queue-info.component.html
index b4a56e97..ae4a463a 100644
--- a/src/app/webapp-common/workers-and-queues/dumb/queue-info/queue-info.component.html
+++ b/src/app/webapp-common/workers-and-queues/dumb/queue-info/queue-info.component.html
@@ -40,7 +40,7 @@
 
 <sm-menu
   *ngIf="menuOpen"
-  buttonClass="icon sm i-list-view"
+  buttonClass="al-icon sm-md al-ico-bars-menu al-color light-grey-blue"
   smMenuClass="bigger-width experiments-in-queue-list"
   [position]="menuPosition"
   [header]=""
@@ -53,17 +53,17 @@
   <sm-menu-item itemLabel="Move to top"
                 [disabled]="selectedQueue.entries.length <= 0"
                 (itemClicked)="moveToTop($event)"
-                iconClass="icon sm mr-2 i-arrow-to-top">
+                iconClass="al-icon al-ico-arrow-to-top al-color light-periwinkle-two sm mr-2">
   </sm-menu-item>
   <sm-menu-item itemLabel="Move to bottom"
                 [disabled]="selectedQueue.entries.length <= 0"
                 (itemClicked)="moveToBottom($event)"
-                iconClass="icon sm mr-2 i-arrow-to-bottom">
+                iconClass="sm mr-2 al-icon al-ico-arrow-to-bottom al-color light-periwinkle-two">
   </sm-menu-item>
   <sm-menu-item itemLabel="Move to queue..."
                 [disabled]="selectedQueue.entries.length <= 0"
                 (itemClicked)="moveToQueue($event)"
-                iconClass="icon sm mr-2 i-arrow-from-left">
+                iconClass="icon sm mr-2 al-icon al-ico-arrow-from-left al-color light-periwinkle-two">
   </sm-menu-item>
   <sm-menu-item itemLabel="Remove from queue"
                 [disabled]="selectedQueue.entries.length <= 0"
diff --git a/src/app/webapp-common/workers-and-queues/dumb/queue-task-table/queue-task-table.component.ts b/src/app/webapp-common/workers-and-queues/dumb/queue-task-table/queue-task-table.component.ts
index c179a7d1..b41b32eb 100644
--- a/src/app/webapp-common/workers-and-queues/dumb/queue-task-table/queue-task-table.component.ts
+++ b/src/app/webapp-common/workers-and-queues/dumb/queue-task-table/queue-task-table.component.ts
@@ -23,22 +23,25 @@ export class QueueTaskTableComponent {
   constructor() {
     this.cols = [
       {
-        id    : QUEUES_TABLE_COL_FIELDS.NAME,
-        header: 'Experiment Name',
-        style : {width: '680px'},
-        headerType: ColHeaderTypeEnum.title,
+        id         : QUEUES_TABLE_COL_FIELDS.NAME,
+        header     : 'Experiment Name',
+        style      : {width: '680px'},
+        headerType : ColHeaderTypeEnum.title,
+        disableDrag: true,
       },
       {
-        id    : QUEUES_TABLE_COL_FIELDS.ID,
-        header: 'Experiment ID',
-        style : {width: '300px'},
-        headerType: ColHeaderTypeEnum.title,
+        id         : QUEUES_TABLE_COL_FIELDS.ID,
+        header     : 'Experiment ID',
+        style      : {width: '300px'},
+        headerType : ColHeaderTypeEnum.title,
+        disableDrag: true,
       },
       {
-        id    : QUEUES_TABLE_COL_FIELDS.QUEUED,
-        header: 'Queued At',
-        style : {width: '150px'},
-        headerType: ColHeaderTypeEnum.title,
+        id         : QUEUES_TABLE_COL_FIELDS.QUEUED,
+        header     : 'Queued At',
+        style      : {width: '150px'},
+        headerType : ColHeaderTypeEnum.title,
+        disableDrag: true,
       },
     ];
   }
diff --git a/src/app/webapp-common/workers-and-queues/dumb/queues-table/queues-table.component.html b/src/app/webapp-common/workers-and-queues/dumb/queues-table/queues-table.component.html
index 7a206488..e046596d 100644
--- a/src/app/webapp-common/workers-and-queues/dumb/queues-table/queues-table.component.html
+++ b/src/app/webapp-common/workers-and-queues/dumb/queues-table/queues-table.component.html
@@ -3,7 +3,7 @@
     *ngIf="menuOpen"
     [position]="menuPosition"
     [header]=""
-    buttonClass="icon sm i-list-view"
+    buttonClass="al-icon sm-md al-ico-bars-menu al-color light-grey-blue"
     [showCart]="false"
     [showOverlay]="false"
     [showButton]="false"
diff --git a/src/app/webapp-common/workers-and-queues/dumb/queues-table/queues-table.component.ts b/src/app/webapp-common/workers-and-queues/dumb/queues-table/queues-table.component.ts
index aad8bd0e..7fb1bc4d 100644
--- a/src/app/webapp-common/workers-and-queues/dumb/queues-table/queues-table.component.ts
+++ b/src/app/webapp-common/workers-and-queues/dumb/queues-table/queues-table.component.ts
@@ -16,10 +16,10 @@ export class QueuesTableComponent implements OnInit {
   public menuOpen: boolean;
   @Input() queues: Array<Queue>;
   @Input() selectedQueue: Queue;
-  @Output() queueSelected                 = new EventEmitter();
-  @Output() deleteQueue                   = new EventEmitter();
-  @Output() renameQueue                   = new EventEmitter();
-  @Output() sortedChanged                 = new EventEmitter<{ sortOrder: TableSortOrderEnum, colId: ISmCol['id'] }>();
+  @Output() queueSelected = new EventEmitter();
+  @Output() deleteQueue = new EventEmitter();
+  @Output() renameQueue = new EventEmitter();
+  @Output() sortedChanged = new EventEmitter<{ sortOrder: TableSortOrderEnum, colId: ISmCol['id'] }>();
   @Input() tableSortField: string;
   @Input() tableSortOrder: number;
   @ViewChild('tableContainer', {static: true}) tableContainer;
@@ -36,31 +36,35 @@ export class QueuesTableComponent implements OnInit {
   constructor(private changeDetector: ChangeDetectorRef) {
     this.cols = [
       {
-        id            : QUEUES_TABLE_COL_FIELDS.NAME,
-        headerType: ColHeaderTypeEnum.sort,
-        header        : 'QUEUE',
-        style         : {width: '25%', minWidth: '500px'},
-        sortable      : true
+        id         : QUEUES_TABLE_COL_FIELDS.NAME,
+        headerType : ColHeaderTypeEnum.sort,
+        header     : 'QUEUE',
+        style      : {width: '25%', minWidth: '500px'},
+        sortable   : true,
+        disableDrag: true,
       },
       {
-        id      : QUEUES_TABLE_COL_FIELDS.TASK,
-        headerType: ColHeaderTypeEnum.sort,
-        header  : 'NEXT EXPERIMENT',
-        style   : {width: '35%', minWidth: '800px'},
-        sortable: true
+        id         : QUEUES_TABLE_COL_FIELDS.TASK,
+        headerType : ColHeaderTypeEnum.sort,
+        header     : 'NEXT EXPERIMENT',
+        style      : {width: '35%', minWidth: '800px'},
+        sortable   : true,
+        disableDrag: true,
       },
       {
-        id      : QUEUES_TABLE_COL_FIELDS.LAST_UPDATED,
-        headerType: ColHeaderTypeEnum.sort,
-        header  : 'LAST UPDATED',
-        style   : {width: '25%', minWidth: '400px'},
-        sortable: true
+        id         : QUEUES_TABLE_COL_FIELDS.LAST_UPDATED,
+        headerType : ColHeaderTypeEnum.sort,
+        header     : 'LAST UPDATED',
+        style      : {width: '25%', minWidth: '400px'},
+        sortable   : true,
+        disableDrag: true,
       },
       {
-        id      : QUEUES_TABLE_COL_FIELDS.IN_QUEUE,
-        headerType: ColHeaderTypeEnum.sort,
-        header  : 'IN QUEUE',
-        sortable: true
+        id         : QUEUES_TABLE_COL_FIELDS.IN_QUEUE,
+        headerType : ColHeaderTypeEnum.sort,
+        header     : 'IN QUEUE',
+        sortable   : true,
+        disableDrag: true,
       }
     ];
   }
@@ -91,7 +95,7 @@ export class QueuesTableComponent implements OnInit {
     this.menuOpen = false;
     setTimeout(() => {
       this.menuPosition = {x: data.e.clientX, y: data.e.clientY};
-      this.menuOpen     = true;
+      this.menuOpen = true;
       this.changeDetector.detectChanges();
     }, 0);
 
diff --git a/src/app/webapp-common/workers-and-queues/dumb/worker-info/worker-info.component.html b/src/app/webapp-common/workers-and-queues/dumb/worker-info/worker-info.component.html
index 006e38b2..f9d915dd 100644
--- a/src/app/webapp-common/workers-and-queues/dumb/worker-info/worker-info.component.html
+++ b/src/app/webapp-common/workers-and-queues/dumb/worker-info/worker-info.component.html
@@ -44,9 +44,11 @@
     <div class="col-12">
       <sm-vertical-labeled-row label="Worker Name">{{selectedWorker?.id ? selectedWorker?.id : '—' }}</sm-vertical-labeled-row>
       <sm-vertical-labeled-row label="Update Time">{{selectedWorker?.last_report_time | timeAgo}}</sm-vertical-labeled-row>
-      <sm-vertical-labeled-row label="Current Experiment"><a
-        [href]="'/projects/'+ ((selectedWorker?.task?.project?.id) ? selectedWorker?.task?.project?.id : '*') + '/experiments/' + selectedWorker?.task?.id"
-        target="_blank">{{selectedWorker?.task?.name ? selectedWorker?.task?.name : '—'}}</a></sm-vertical-labeled-row>
+      <sm-vertical-labeled-row label="Current Experiment">
+        <a *ngIf="selectedWorker?.task?.name ; else notRelevant" [href]="'/projects/'+ ((selectedWorker?.task?.project?.id) ? selectedWorker?.task?.project?.id : '*') + '/experiments/' + selectedWorker?.task?.id"
+        target="_blank">{{selectedWorker?.task?.name}}</a>
+        <ng-template #notRelevant>—</ng-template>
+      </sm-vertical-labeled-row>
     </div>
     <div class="col-12">
       <sm-vertical-labeled-row label="Experiment Run Time">{{selectedWorker?.task?.running_time ? (selectedWorker?.task?.running_time | msToSec) : '—'}}</sm-vertical-labeled-row>
diff --git a/src/app/webapp-common/workers-and-queues/dumb/workers-table/workers-table.component.ts b/src/app/webapp-common/workers-and-queues/dumb/workers-table/workers-table.component.ts
index cc1f9b80..7a3ced2d 100644
--- a/src/app/webapp-common/workers-and-queues/dumb/workers-table/workers-table.component.ts
+++ b/src/app/webapp-common/workers-and-queues/dumb/workers-table/workers-table.component.ts
@@ -29,26 +29,30 @@ export class WorkersTableComponent {
         headerType: ColHeaderTypeEnum.sort,
         header    : 'AVAILABLE WORKERS',
         style     : {width: '30%', minWidth: '500px'},
-        sortable  : true
+        sortable  : true,
+        disableDrag   : true,
       },
       {
         id      : WORKERS_TABLE_COL_FIELDS.TASK,
         headerType: ColHeaderTypeEnum.sort,
         header  : 'CURRENTLY RUNNING EXPERIMENT',
         style   : {width: '30%', minWidth: '500px'},
-        sortable: true
+        sortable: true,
+        disableDrag   : true,
       },
       {
         id      : WORKERS_TABLE_COL_FIELDS.TASK_RUNNING_TIME,
         headerType: ColHeaderTypeEnum.sort,
         header  : 'EXPERIMENT RUNNING TIME',
-        sortable: true
+        sortable: true,
+        disableDrag   : true,
       },
       {
         id      : WORKERS_TABLE_COL_FIELDS.TASK_ITERATIONS,
         headerType: ColHeaderTypeEnum.sort,
         header  : 'ITERATION',
-        sortable: true
+        sortable: true,
+        disableDrag   : true,
       },
     ];
   }
diff --git a/src/app/webapp-common/workers-and-queues/workers-and-queues.component.html b/src/app/webapp-common/workers-and-queues/workers-and-queues.component.html
index 0e10703a..2d42f4e4 100644
--- a/src/app/webapp-common/workers-and-queues/workers-and-queues.component.html
+++ b/src/app/webapp-common/workers-and-queues/workers-and-queues.component.html
@@ -11,7 +11,7 @@
     </div>
     <div *ngIf="rlaQueues.isActive">
       <button class="btn btn-primary d-flex align-items-center" (click)="addQueue()">
-        <i class="icon sm i-plus-blue"></i> &nbsp; NEW QUEUE
+        <i class="al-icon al-color blue-400 msm al-ico-plus"></i> &nbsp; NEW QUEUE
       </button>
     </div>
   </div>
diff --git a/src/assets/logo-white.svg b/src/assets/logo-white.svg
index fcdd0484..b533b390 100644
--- a/src/assets/logo-white.svg
+++ b/src/assets/logo-white.svg
@@ -1,32 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 730.07 190.95" height="32" width="200"><title>trains-wht-svg</title>
-  <path d="M45.43,147.41a36.74,36.74,0,0,0-.48,4.44,10,10,0,0,0,2.94,7.85,12.06,12.06,0,0,0,8.53,2.73,29.17,29.17,0,0,0,13.65-3.75l5.6,30.64a65.89,65.89,0,0,1-33,7.51A46.21,46.21,0,0,1,11.51,187,34.12,34.12,0,0,1,0,159.7,56.44,56.44,0,0,1,1.2,147.75L22.5,39.51H67l-6.82,33H88.77L82,105.78H53.83Z"
-        transform="translate(0 -6.03)" style="fill:#f2f2f2;opacity:0.5;isolation:isolate"/>
-  <path d="M201.39,65.72l-7.78,40.06a84.3,84.3,0,0,0-10-.75,37.58,37.58,0,0,0-24,7.17,36.3,36.3,0,0,0-12,22.59l-12.22,59.92H90.82L116.14,67.9h42.11L155.46,82Q171.42,65.72,201.39,65.72Z" transform="translate(0 -6.03)" style="fill:#f2f2f2;opacity:0.5;isolation:isolate"/>
-  <path
-    d="M579.92,76.84a41,41,0,0,1,12.42,32,77.35,77.35,0,0,1-1.64,15.7l-13.65,70.23H532.14l13.11-66a37,37,0,0,0,1-8.46c0-11.2-5.87-16.86-17.61-16.86a26.64,26.64,0,0,0-19.18,7.17,40.15,40.15,0,0,0-10.51,21.43l-12.69,62.72H441.84L467.1,67.9h42.18L506.68,81a51.88,51.88,0,0,1,18.64-11.53,60.87,60.87,0,0,1,21.29-3.75A48.34,48.34,0,0,1,579.92,76.84Z"
-    transform="translate(0 -6.03)" style="fill:#f2f2f2;opacity:0.5;isolation:isolate"/>
-  <path
-    d="M622.92,193.35a78.2,78.2,0,0,1-23.55-8.94l16.18-31.13A74.59,74.59,0,0,0,636,161.81,90.81,90.81,0,0,0,659.43,165c13.65,0,20.48-3,20.48-9.07,0-2.53-1.57-4.37-4.78-5.53a88.74,88.74,0,0,0-15.36-3.41,194.24,194.24,0,0,1-23.07-5.46,38.7,38.7,0,0,1-15.83-10A27.3,27.3,0,0,1,614,111.85,38.1,38.1,0,0,1,633,77.73a88.64,88.64,0,0,1,48.8-12.08A126.09,126.09,0,0,1,708,68.31a95.33,95.33,0,0,1,22.11,7.44l-15.63,31.19a71.63,71.63,0,0,0-37.74-9.62A34.13,34.13,0,0,0,661.41,100a7.92,7.92,0,0,0-5,6.82c0,2.46,1.57,4.3,4.78,5.46A115,115,0,0,0,677,116.15a153.41,153.41,0,0,1,22.59,5.4,39.07,39.07,0,0,1,15.7,10,26.9,26.9,0,0,1,6.83,19.25A37.87,37.87,0,0,1,703.18,185a89.54,89.54,0,0,1-48.53,12A140,140,0,0,1,622.92,193.35Z"
-    transform="translate(0 -6.03)" style="fill:#f2f2f2;opacity:0.5;isolation:isolate"/>
-  <path
-    d="M357.55,160.52l-4.71,33a69.22,69.22,0,0,1-21.57,3.28,47.72,47.72,0,0,1-24.36-5.6,30.14,30.14,0,0,1-13.65-15.49,50.94,50.94,0,0,1-42.87,21.09A53,53,0,0,1,224.12,190a51.3,51.3,0,0,1-19.59-20.13A60.62,60.62,0,0,1,197,139a76.26,76.26,0,0,1,9.22-37.4,69.67,69.67,0,0,1,25-26.28A65.19,65.19,0,0,1,266,65.72q27.63,0,38.9,17.33l3-15.15h44.5l-15.9,78.83a33,33,0,0,0-.48,4.64c0,7.37,3.89,11.06,11.74,11.06A21.6,21.6,0,0,0,357.55,160.52ZM288,151.17a37.94,37.94,0,0,0,8.4-25.53A24.27,24.27,0,0,0,290,107.83,23.6,23.6,0,0,0,272.3,101a27.29,27.29,0,0,0-21.77,9.83,38.37,38.37,0,0,0-8.46,25.8A22.32,22.32,0,0,0,262.18,161a22.71,22.71,0,0,0,3.78,0A27.33,27.33,0,0,0,288,151.17Z"
-    transform="translate(0 -6.03)" style="fill:#f2f2f2"/>
-  <path d="M394.07,67.9h44.22L413,194.78h-44.3Zm9.48-20.48a21.71,21.71,0,0,1-6.07-15.63,25.25,25.25,0,0,1,6.82-18.15,23.53,23.53,0,0,1,17.89-6.83,21.85,21.85,0,0,1,16.17,6,20.46,20.46,0,0,1,6.08,15.29,26.3,26.3,0,0,1-6.83,18.77,23.56,23.56,0,0,1-18.09,6.89A21,21,0,0,1,403.55,47.42Z"
-        transform="translate(0 -6.03)" style="fill:#f2f2f2"/>
-  <path d="M374.75,47.42H104.4a6.83,6.83,0,0,1,0-13.65H374.75a6.83,6.83,0,1,1,0,13.65Z" transform="translate(0 -6.03)" style="fill:#f2f2f2"/>
-  <path d="M374.75,20.12H258.24a6.83,6.83,0,0,1,0-13.65H374.75a6.83,6.83,0,1,1,0,13.65Z" transform="translate(0 -6.03)" style="fill:#f2f2f2"/>
-  <path d="M231,20.12H207.87a6.83,6.83,0,0,1,0-13.65H231a6.83,6.83,0,1,1,0,13.65Z" transform="translate(0 -6.03)" style="fill:#f2f2f2"/>
-  <path d="M179.21,20.12H71.91a6.83,6.83,0,0,1,0-13.65h107.3a6.83,6.83,0,0,1,0,13.65Z" transform="translate(0 -6.03)" style="fill:#f2f2f2"/>
-  <g style="opacity:0.5">
-    <path
-      d="M629.18,19.47a13.58,13.58,0,0,1,5.33,5.3,15.74,15.74,0,0,1,1.92,7.87,15.9,15.9,0,0,1-1.92,7.89,13.59,13.59,0,0,1-5.33,5.33,15.58,15.58,0,0,1-7.7,1.89,13.92,13.92,0,0,1-6-1.28,11.55,11.55,0,0,1-4.52-3.74v4.69h-5.13V6h5.35V22.32a11.31,11.31,0,0,1,4.47-3.55,14.11,14.11,0,0,1,5.85-1.2A15.58,15.58,0,0,1,629.18,19.47Zm-3,22.29a9.43,9.43,0,0,0,3.57-3.68A11,11,0,0,0,631,32.64a11,11,0,0,0-1.31-5.44,9.25,9.25,0,0,0-3.57-3.66,10.76,10.76,0,0,0-10.18,0,9.12,9.12,0,0,0-3.57,3.66,11.18,11.18,0,0,0-1.28,5.44,11.21,11.21,0,0,0,1.28,5.44A9.3,9.3,0,0,0,616,41.76a10.54,10.54,0,0,0,10.18,0Z"
-      transform="translate(0 -6.03)" style="fill:#fff"/>
-    <path
-      d="M665.72,39.5l2.9,3.46a12.49,12.49,0,0,1-4.93,3.57,18.9,18.9,0,0,1-15-.7,13.73,13.73,0,0,1-5.61-5.38,15.45,15.45,0,0,1-2-7.81A15.72,15.72,0,0,1,643,24.88a13.84,13.84,0,0,1,5.3-5.38,15.8,15.8,0,0,1,14.93-.11,13.72,13.72,0,0,1,5.24,5.1,15,15,0,0,1,2,7.59L647,36.65a9.1,9.1,0,0,0,3.77,4.74,11.71,11.71,0,0,0,6.39,1.68A11,11,0,0,0,665.72,39.5ZM651,23.38A8.79,8.79,0,0,0,647.54,27a11.34,11.34,0,0,0-1.23,5.39v.56l18.91-3.58A9.05,9.05,0,0,0,662,24.1a9.37,9.37,0,0,0-6-2A9.69,9.69,0,0,0,651,23.38Z"
-      transform="translate(0 -6.03)" style="fill:#fff"/>
-    <path d="M693.56,45.69a7.94,7.94,0,0,1-2.9,1.53,11.87,11.87,0,0,1-3.57.53,9.48,9.48,0,0,1-6.92-2.39q-2.45-2.4-2.45-6.87V11.38h5.35v6.47h8.48v4.41h-8.48v16a5.18,5.18,0,0,0,1.2,3.68,4.46,4.46,0,0,0,3.43,1.29,6.48,6.48,0,0,0,4.19-1.4Z" transform="translate(0 -6.03)" style="fill:#fff"/>
-    <path
-      d="M726.92,17.85V47.42h-5.13V42.73a11.55,11.55,0,0,1-4.52,3.74,13.92,13.92,0,0,1-6,1.28,15.58,15.58,0,0,1-7.7-1.89,13.59,13.59,0,0,1-5.33-5.33,15.9,15.9,0,0,1-1.93-7.89,15.74,15.74,0,0,1,1.93-7.87,13.58,13.58,0,0,1,5.33-5.3,15.58,15.58,0,0,1,7.7-1.9,14.11,14.11,0,0,1,5.85,1.2,11.31,11.31,0,0,1,4.47,3.55V17.85ZM716.77,41.76a9.3,9.3,0,0,0,3.57-3.68,11.21,11.21,0,0,0,1.28-5.44,11.18,11.18,0,0,0-1.28-5.44,9.12,9.12,0,0,0-3.57-3.66,10.76,10.76,0,0,0-10.18,0A9.25,9.25,0,0,0,703,27.2a11,11,0,0,0-1.31,5.44A11,11,0,0,0,703,38.08a9.43,9.43,0,0,0,3.57,3.68,10.54,10.54,0,0,0,10.18,0Z"
-      transform="translate(0 -6.03)" style="fill:#fff"/>
-  </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50" viewBox="0 0 100 50">
+  <path d="M38.84,31.22H37.15V29.43h1.69V26.78h2.33v2.65h3.56v1.79H41.17v4c0,1.49.68,2,1.63,2a4.36,4.36,0,0,0,2-.44l.37,1.8a6.54,6.54,0,0,1-2.92.63c-2,0-3.34-1.06-3.34-3.45Zm7.57-1.79h2.33v1.79a3.77,3.77,0,0,1,3.14-2,3,3,0,0,1,.94.12l-.33,2a2.7,2.7,0,0,0-.85-.13c-1.19,0-2.26,1-2.9,2.69v5.15H46.41Zm20.91-4.3a1.39,1.39,0,1,1-.1,2.78,1.39,1.39,0,0,1,0-2.78Zm-1.17,4.3h2.34v9.65H66.15Zm4.78,0h2.33v1.82a4.21,4.21,0,0,1,3.6-2.06c2,0,3.51,1,3.51,4.16v5.72H78.06V33.51c0-1.65-.62-2.35-1.77-2.35-1.33,0-2.28.87-3,2.73v5.18H70.93Zm11.19,9,.4-1.89a6.56,6.56,0,0,0,3.25,1c1.17,0,1.9-.35,1.9-1.14,0-1.91-5.42-.23-5.42-4.11,0-1.89,1.48-3.12,4-3.12a7.49,7.49,0,0,1,3.41.82l-.42,1.88A5.87,5.87,0,0,0,86.37,31c-1.05,0-1.8.42-1.8,1.11,0,2.06,5.41.4,5.41,4,0,1.9-1.8,3.16-4.28,3.16A8,8,0,0,1,82.12,38.45ZM61.58,30.57a4,4,0,0,0-3.19-1.45c-2.8,0-4.68,2-4.68,5a4.56,4.56,0,0,0,4.68,5,3.8,3.8,0,0,0,3.19-1.55V38.9h2.14V29.34H61.58Zm.25,3.71h0l-.06.09h0l-.93,1.25A2.61,2.61,0,0,1,58.56,37a2.91,2.91,0,0,1,0-5.8,2.61,2.61,0,0,1,2.2,1.25l1,1.36a.36.36,0,0,1,.06.46ZM45.05,12.76a4,4,0,0,0-3.17-1.45c-2.79,0-4.66,2-4.66,5a4.55,4.55,0,0,0,4.66,4.94,3.78,3.78,0,0,0,3.17-1.54v1.35h2.13V11.54H45.05Zm.25,3.68h0l-.06.08h0l-.92,1.22a2.61,2.61,0,0,1-2.27,1.38,2.77,2.77,0,0,1-2.66-2.88,2.79,2.79,0,0,1,2.66-2.89,2.62,2.62,0,0,1,2.19,1.24l1,1.36A.38.38,0,0,1,45.3,16.44Zm4.56-7.86h2.32V21.34H49.86Zm4.75,0h2.33V21.34H54.61ZM68,20.59a7.86,7.86,0,0,1-4.05,1c-3.34,0-5.17-1.89-5.17-5a4.78,4.78,0,0,1,4.94-5.1c2.65,0,4.73,1.59,4.73,5a3.78,3.78,0,0,1,0,.75h-7.2c.23,1.63,1.26,2.45,3.12,2.45a6.5,6.5,0,0,0,3.28-.82Zm-6.8-4.77H66.1c-.16-1.67-1-2.5-2.38-2.5S61.44,14.17,61.24,15.82ZM74.5,11.5A4,4,0,0,1,78,13.26V11.74h2.3v9.58c0,2.37-2.19,4.08-5.26,4.08a8.83,8.83,0,0,1-4.55-1.18l.32-2A8.65,8.65,0,0,0,75,23.33c1.62,0,3-.74,3-2.36V19.38a3.89,3.89,0,0,1-3.45,1.8,4.46,4.46,0,0,1-4.7-4.8A4.5,4.5,0,0,1,74.5,11.5Zm.37,7.73c1.48,0,2.63-1,3.09-2.78v-.07c-.48-1.82-1.67-2.92-3.11-2.92a2.57,2.57,0,0,0-2.63,2.9,2.57,2.57,0,0,0,2.64,2.85Zm7.81-7.49H85v1.78a3.75,3.75,0,0,1,3.12-2,3.28,3.28,0,0,1,.94.13l-.32,2a2.8,2.8,0,0,0-.86-.13c-1.18,0-2.24,1-2.88,2.67v5.14H82.68Zm12-.27c2.74,0,5.32,1.75,5.32,5s-2.49,5.06-5.35,5.06-5.2-1.74-5.2-5A4.94,4.94,0,0,1,94.68,11.47Zm0,8.16a2.79,2.79,0,0,0,2.89-3.09,2.84,2.84,0,0,0-2.85-3.12,2.77,2.77,0,0,0-2.85,3.09c0,2.09,1.25,3.1,2.81,3.1ZM59.93,6.88l.62-2.47L63,3.79l-2.47-.62L59.93.71l-.62,2.46-2.47.62,2.47.62Zm-37.3,7.8a11.5,11.5,0,0,0-9.17-4.18C5.41,10.5,0,16.29,0,24.91c0,9.86,6.76,14.27,13.46,14.27a10.94,10.94,0,0,0,9.17-4.45v3.89h6.15V11.15H22.63Zm.74,10.63h0l0,0a1.08,1.08,0,0,1-.18.24h0L20.5,29.13a7.55,7.55,0,0,1-6.58,4c-4.25,0-7.7-3.73-7.7-8.33s3.45-8.34,7.7-8.34A7.53,7.53,0,0,1,20.23,20l2.94,3.9A1.12,1.12,0,0,1,23.37,25.31Z" fill="#fff"/>
 </svg>
diff --git a/src/assets/t-logo-w.svg b/src/assets/t-logo-w.svg
index 0089b437..741bc8f9 100644
--- a/src/assets/t-logo-w.svg
+++ b/src/assets/t-logo-w.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.07 23.05"><title>t-white-italic</title><path d="M6.69,15.81a4.86,4.86,0,0,0-.07.66,1.49,1.49,0,0,0,.43,1.15A1.8,1.8,0,0,0,8.3,18a4.14,4.14,0,0,0,2-.55L11.08,22a9.55,9.55,0,0,1-4.84,1.1,6.77,6.77,0,0,1-4.56-1.44A5,5,0,0,1,0,17.6a8.24,8.24,0,0,1,.17-1.75L3.33,0H9.85l-1,4.84h4.19l-1,4.87H7.92Z" style="fill:#fff"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <path d="M38.87,20.59v2.94A9.56,9.56,0,0,0,31.22,20C24.51,20,20,24.87,20,32.06,20,40.28,25.64,44,31.22,44a9.12,9.12,0,0,0,7.65-3.71v3.24H44V20.59Zm.62,11.8,0,0a2.43,2.43,0,0,1-.14.2l-2.23,2.94a6.3,6.3,0,0,1-5.48,3.34,6.71,6.71,0,0,1-6.42-7A6.7,6.7,0,0,1,31.61,25a6.3,6.3,0,0,1,5.26,3l2.45,3.25A.93.93,0,0,1,39.49,32.39Zm10-11.89,1.2-4.8,4.8-1.2-4.8-1.2L49.5,8.5l-1.2,4.8-4.8,1.2,4.8,1.2Z" fill="#fff"/>
+</svg>
diff --git a/src/environments/base.ts b/src/environments/base.ts
index cb50a58e..5da1840a 100644
--- a/src/environments/base.ts
+++ b/src/environments/base.ts
@@ -1,17 +1,23 @@
 import versionConf from '../version.json';
+
 export const BASE_ENV = {
-  apiBaseUrl  : null,
-  fileBaseUrl  : null,
-  productName: 'trains',
-  demo: false,
-  headerPrefix: 'X-Trains',
-  version     : versionConf.version,
-  userKey: 'EYVQ385RW7Y2QQUH88CZ7DWIQ1WUHP',
-  userSecret: 'yfc8KQo*GMXb*9p((qcYC7ByFIpF7I&4VH3BfUYXH%o9vX1ZUZQEEw1Inc)S',
-  companyID: 'd1bd92a3b039400cbafc60a7a5b1e52b',
-  loginNotice: '',
-  loginBanner : '',
-  spaLogin: true,
-  autoLogin: false,
+  apiBaseUrl             : null,
+  fileBaseUrl            : null,
+  productName            : 'trains',
+  demo                   : false,
+  headerPrefix           : 'X-Trains',
+  version                : versionConf.version,
+  userKey                : 'EYVQ385RW7Y2QQUH88CZ7DWIQ1WUHP',
+  userSecret             : 'yfc8KQo*GMXb*9p((qcYC7ByFIpF7I&4VH3BfUYXH%o9vX1ZUZQEEw1Inc)S',
+  companyID              : 'd1bd92a3b039400cbafc60a7a5b1e52b',
+  loginNotice            : '',
+  loginBanner            : '',
+  spaLogin               : true,
+  autoLogin              : false,
+  whiteLabelLogo         : null,
+  whiteLabelLink         : null,
+  whiteLabelLoginTitle   : null,
+  whiteLabelLoginSubtitle: null,
+  whiteLabelSlogan       : null,
 };
 
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index a46a7cf9..195afa8c 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -2,11 +2,11 @@ import {BASE_ENV} from './base';
 
 export let environment = {
   ...BASE_ENV,
-  production: false,
-  autoLogin: true,
-  apiBaseUrl: 'api',
-  spaLogin: true,
-  userKey: 'EYVQ385RW7Y2QQUH88CZ7DWIQ1WUHP',
-  userSecret: 'yfc8KQo*GMXb*9p((qcYC7ByFIpF7I&4VH3BfUYXH%o9vX1ZUZQEEw1Inc)S',
-  companyID: 'd1bd92a3b039400cbafc60a7a5b1e52b',
+  production             : false,
+  autoLogin              : true,
+  apiBaseUrl             : 'api',
+  spaLogin               : true,
+  userKey                : 'EYVQ385RW7Y2QQUH88CZ7DWIQ1WUHP',
+  userSecret             : 'yfc8KQo*GMXb*9p((qcYC7ByFIpF7I&4VH3BfUYXH%o9vX1ZUZQEEw1Inc)S',
+  companyID              : 'd1bd92a3b039400cbafc60a7a5b1e52b',
 };
diff --git a/src/favicon.ico b/src/favicon.ico
index c45ab11d..4d28aac5 100644
Binary files a/src/favicon.ico and b/src/favicon.ico differ
diff --git a/src/index.html b/src/index.html
index ecc20bfb..8b2fef71 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,14 +6,12 @@
   <title>trains</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link rel="icon" type="image/x-icon" href="favicon.ico?v=4">
+  <link rel="icon" type="image/x-icon" href="favicon.ico?v=5">
   <script>
     if (global === undefined) {
       var global = window;
     }
-
   </script>
-
   <meta name="theme-color" content="#1976d2">
 </head>
 <body class="dark-theme">