diff --git a/src/app/_interceptors/mock-interceptior.ts b/src/app/_interceptors/mock-interceptor.ts
similarity index 64%
rename from src/app/_interceptors/mock-interceptior.ts
rename to src/app/_interceptors/mock-interceptor.ts
index 47e65a55..37c893b9 100644
--- a/src/app/_interceptors/mock-interceptior.ts
+++ b/src/app/_interceptors/mock-interceptor.ts
@@ -26,7 +26,18 @@ export class HttpRequestInterceptorMock implements HttpInterceptor {
       request.url.includes("projects/test-project/scenarios/test-scenario/items/test-item/custom-chart-settings")) {
       return of(new HttpResponse({ status: 200 }));
     }
-
+    if (request.url && request.url.includes("projects/test-project/scenarios/test-scenario/environment")) {
+      return of(new HttpResponse({ status: 200 }));
+    }
+    if (request.url && request.url.includes("projects/test-project/scenarios/test-scenario/items")) {
+      return of(new HttpResponse({ status: 200 }));
+    }
+    if (request.url && request.url.includes("projects/test-project/scenarios/test-scenario/trends")) {
+      return of(new HttpResponse({ status: 200 }));
+    }
+    if (request.url && request.url.includes("projects/test-project/scenarios/test-scenario/processing-items")) {
+      return of(new HttpResponse({ status: 200 }));
+    }
 
     return next.handle(request);
   }
diff --git a/src/app/_services/environment-service.service.spec.ts b/src/app/_services/environment-service.service.spec.ts
new file mode 100644
index 00000000..bb7b3225
--- /dev/null
+++ b/src/app/_services/environment-service.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from "@angular/core/testing";
+
+import { EnvironmentService } from "./environment.service";
+
+describe("EnvironmentService", () => {
+  let service: EnvironmentService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EnvironmentService);
+  });
+
+  it("should be created", () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/_services/environment.service.ts b/src/app/_services/environment.service.ts
new file mode 100644
index 00000000..766fbfa7
--- /dev/null
+++ b/src/app/_services/environment.service.ts
@@ -0,0 +1,16 @@
+import { Injectable } from "@angular/core";
+import { BehaviorSubject } from "rxjs";
+
+@Injectable({
+  providedIn: "root"
+})
+export class EnvironmentService {
+
+  private environment = new BehaviorSubject<string>("");
+  public environment$ = this.environment.asObservable();
+
+
+  setEnvironment(value: string) {
+    this.environment.next(value);
+  }
+}
diff --git a/src/app/administration/api-token/api-keys.component.spec.ts b/src/app/administration/api-token/api-keys.component.spec.ts
index cfb806f9..0f85896c 100644
--- a/src/app/administration/api-token/api-keys.component.spec.ts
+++ b/src/app/administration/api-token/api-keys.component.spec.ts
@@ -8,7 +8,7 @@ import { DeleteTokenComponent } from "./delete-token/delete-token.component";
 import { RouterTestingModule } from "@angular/router/testing";
 import { ReactiveFormsModule } from "@angular/forms";
 import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
-import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptior";
+import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptor";
 
 
 describe("ApiKeysComponent", () => {
diff --git a/src/app/administration/users/users.component.spec.ts b/src/app/administration/users/users.component.spec.ts
index ebd7ae62..bbd4af65 100644
--- a/src/app/administration/users/users.component.spec.ts
+++ b/src/app/administration/users/users.component.spec.ts
@@ -9,7 +9,7 @@ import { ReactiveFormsModule } from "@angular/forms";
 import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
 import { DeleteUserComponent } from "./delete-user/delete-user.component";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
-import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptior";
+import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptor";
 
 
 
diff --git a/src/app/item-detail/analyze-charts/analyze-charts.component.spec.ts b/src/app/item-detail/analyze-charts/analyze-charts.component.spec.ts
index d1252d4b..e610ecbd 100644
--- a/src/app/item-detail/analyze-charts/analyze-charts.component.spec.ts
+++ b/src/app/item-detail/analyze-charts/analyze-charts.component.spec.ts
@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { FormsModule } from "@angular/forms";
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { HighchartsChartModule } from "highcharts-angular";
-import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptior";
+import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptor";
 import { AddMetricComponent } from "./add-metric/add-metric.component";
 
 import { AnalyzeChartsComponent } from "./analyze-charts.component";
diff --git a/src/app/item-detail/share/share.component.spec.ts b/src/app/item-detail/share/share.component.spec.ts
index 95b04164..68a3e2ad 100644
--- a/src/app/item-detail/share/share.component.spec.ts
+++ b/src/app/item-detail/share/share.component.spec.ts
@@ -3,7 +3,7 @@ import { HttpClientTestingModule } from "@angular/common/http/testing";
 import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { ReactiveFormsModule, FormsModule } from "@angular/forms";
 import { DataTableModule } from "@pascalhonegger/ng-datatable";
-import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptior";
+import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptor";
 import { CreateNewShareLinkComponent } from "./create-new-share-link/create-new-share-link.component";
 import { DeleteShareLinkComponent } from "./delete-share-link/delete-share-link.component";
 
diff --git a/src/app/items-api.service.ts b/src/app/items-api.service.ts
index eee275d8..98a80b47 100644
--- a/src/app/items-api.service.ts
+++ b/src/app/items-api.service.ts
@@ -69,8 +69,8 @@ export class ItemsApiService {
     this.response.next(data);
   }
 
-  fetchProcessingItems(projectName, scenarioName): Observable<[]> {
-    return this.http.get<[]>(`projects/${projectName}/scenarios/${scenarioName}/processing-items`);
+  fetchProcessingItems(projectName, scenarioName, queryParams): Observable<[]> {
+    return this.http.get<[]>(`projects/${projectName}/scenarios/${scenarioName}/processing-items`, { params: queryParams });
   }
 
   fetchItemShareTokens(projectName, scenarioName, itemId): Observable<[]> {
diff --git a/src/app/items.service.ts b/src/app/items.service.ts
index d2ae7f9f..14f451dd 100644
--- a/src/app/items.service.ts
+++ b/src/app/items.service.ts
@@ -1,14 +1,14 @@
 import { Injectable } from "@angular/core";
-import { BehaviorSubject, interval } from "rxjs";
+import { BehaviorSubject, interval, Observable, Subscription } from "rxjs";
 import { Items } from "./items.service.model";
 import { ItemsApiService } from "./items-api.service";
+import { EnvironmentService } from "./_services/environment.service";
 
 @Injectable({
   providedIn: "root"
 })
 
 export class ItemsService {
-  public interval;
 
   private processingItems = new BehaviorSubject<[]>([]);
   public processingItems$ = this.processingItems.asObservable();
@@ -19,23 +19,38 @@ export class ItemsService {
   private shareTokens = new BehaviorSubject<[]>([]);
   public shareTokens$ = this.shareTokens.asObservable();
 
+  public intervalSubscription: Subscription;
+
+  private environment: string;
+
+
   constructor(
-    private itemsApiService: ItemsApiService
-  ) { }
+    private itemsApiService: ItemsApiService,
+    private environmentService: EnvironmentService,
+  ) {
+    this.environmentService.environment$.subscribe(value => {
+        this.environment = value;
+    })
+  }
 
-  fetchItems(projectName, scenarioName, query = { limit: 15, offset: 0 }) {
-    this.itemsApiService.fetchItems(projectName, scenarioName, query)
+  fetchItems(projectName, scenarioName, query: ItemsQuery = { limit: 15, offset: 0 }) {
+
+    const queryParams = { ...query, environment: this.environment };
+    this.itemsApiService.fetchItems(projectName, scenarioName, queryParams)
       .subscribe(_ => this.items.next(_));
   }
 
-  fetchProcessingItems(projectName, scenarioName) {
-    return this.itemsApiService.fetchProcessingItems(projectName, scenarioName).subscribe((_) => this.processingItems.next(_));
+  fetchProcessingItems(projectName, scenarioName, queryParams) {
+    return this.itemsApiService.fetchProcessingItems(projectName, scenarioName, queryParams).subscribe((_) => this.processingItems.next(_));
   }
 
-  processingItemsInterval(projectName, scenarioName) {
-    this.fetchProcessingItems(projectName, scenarioName);
-    this.interval = interval(5000).subscribe(() => {
-      return this.fetchProcessingItems(projectName, scenarioName);
+  setProcessingItemsIntervalSubscription(projectName, scenarioName) {
+    this.fetchProcessingItems(projectName, scenarioName, { environment: this.environment });
+    if (this.intervalSubscription) {
+      this.intervalSubscription.unsubscribe();
+    }
+    this.intervalSubscription = interval(5000).subscribe(() => {
+      return this.fetchProcessingItems(projectName, scenarioName, { environment: this.environment });
     });
   }
 
@@ -43,4 +58,11 @@ export class ItemsService {
     this.itemsApiService.fetchItemShareTokens(projectName, scenarioName, itemId).subscribe((_) => this.shareTokens.next(_));
   }
 
+
+}
+
+interface ItemsQuery {
+  limit: number,
+  offset: number,
+  environment?: string
 }
diff --git a/src/app/scenario-api.service.ts b/src/app/scenario-api.service.ts
index 339bca18..6ddae9f5 100644
--- a/src/app/scenario-api.service.ts
+++ b/src/app/scenario-api.service.ts
@@ -31,9 +31,14 @@ export class ScenarioApiService {
     return this.http.get<IScenarios[]>(`projects/${projectName}/scenarios`);
   }
 
-  fetchScenarioTrend(projectName, scenarioName): Observable<any[]> {
+  fetchScenarioTrend(projectName, scenarioName, params?): Observable<any[]> {
     return this.http.get<any[]>(
-      `projects/${projectName}/scenarios/${scenarioName}/trends`);
+      `projects/${projectName}/scenarios/${scenarioName}/trends`, { params });
+  }
+
+  fetchScenarioEnvironments(projectName, scenarioName): Observable<any> {
+    return this.http.get<any>(
+      `projects/${projectName}/scenarios/${scenarioName}/environment`);
   }
 
   createNewScenario(projectName, body): Observable<Record<string, any>> {
diff --git a/src/app/scenario.service.spec.ts b/src/app/scenario.service.spec.ts
index 95594384..43f8eb61 100644
--- a/src/app/scenario.service.spec.ts
+++ b/src/app/scenario.service.spec.ts
@@ -2,11 +2,12 @@ import { TestBed } from "@angular/core/testing";
 
 import { ScenarioService } from "./scenario.service";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { HttpClientModule } from "@angular/common/http";
 
 describe("ScenarioService", () => {
   beforeEach(() => TestBed.configureTestingModule({
     imports: [
-      HttpClientTestingModule
+      HttpClientTestingModule,
     ],
   }));
 
diff --git a/src/app/scenario.service.ts b/src/app/scenario.service.ts
index 0f3e15c5..4000fd72 100644
--- a/src/app/scenario.service.ts
+++ b/src/app/scenario.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from "@angular/core";
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, Observable } from "rxjs";
 import { ScenarioNotifications } from "./items.service.model";
 import { ScenarioApiService } from "./scenario-api.service";
+import { EnvironmentService } from "./_services/environment.service";
 
 @Injectable({
   providedIn: "root"
@@ -12,16 +13,26 @@ export class ScenarioService {
   private trends = new BehaviorSubject<Record<string, any>>({});
   public trends$ = this.trends.asObservable();
 
+  private environments = new BehaviorSubject<Array<string>>([]);
+  public environments$ = this.environments.asObservable();
+
   private notifications = new BehaviorSubject<ScenarioNotifications[]>([]);
   public notifications$ = this.notifications.asObservable();
+  private environment: string;
 
   constructor(
-    private scenarioApiService: ScenarioApiService
-  ) { }
+    private scenarioApiService: ScenarioApiService,
+    private environmentService: EnvironmentService
+  ) {
+    this.environmentService.environment$.subscribe(value => {
+      this.environment = value;
+    })
+  }
 
 
   fetchScenarioTrends(projectName, scenarioName) {
-    this.scenarioApiService.fetchScenarioTrend(projectName, scenarioName)
+    const queryParams = { environment: this.environment };
+    this.scenarioApiService.fetchScenarioTrend(projectName, scenarioName, queryParams)
       .subscribe(_ => this.trends.next(_));
   }
 
@@ -30,8 +41,13 @@ export class ScenarioService {
       .subscribe(_ => this.notifications.next(_));
   }
 
+  fetchEnvironments(projectName, scenarioName) {
+    this.scenarioApiService.fetchScenarioEnvironments(projectName, scenarioName)
+      .subscribe(_ => this.environments.next(_));
+  }
+
   updateScenarioTrends(value) {
-    this.trends.next(value)
+    this.trends.next(value);
   }
 
 }
diff --git a/src/app/scenario/add-new-item/add-new-item.component.ts b/src/app/scenario/add-new-item/add-new-item.component.ts
index dcdb4a6f..0d674239 100644
--- a/src/app/scenario/add-new-item/add-new-item.component.ts
+++ b/src/app/scenario/add-new-item/add-new-item.component.ts
@@ -107,8 +107,6 @@ export class AddNewItemComponent implements OnInit {
         .pipe(catchError(r => of(r)))
         .subscribe(_ => {
           const message = this.notification.newTestItemNotificationMessage(_);
-          this.itemService.fetchProcessingItems(this.routeParams.projectName, this.routeParams.scenarioName);
-          this.scenarioService.fetchScenarioTrends(this.routeParams.projectName, this.routeParams.scenarioName);
           this.spinner.hide();
           return this.itemsApiService.setData(message);
         });
diff --git a/src/app/scenario/environments/environments.component.css b/src/app/scenario/environments/environments.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/scenario/environments/environments.component.html b/src/app/scenario/environments/environments.component.html
new file mode 100644
index 00000000..d109db3f
--- /dev/null
+++ b/src/app/scenario/environments/environments.component.html
@@ -0,0 +1,9 @@
+<div ngbDropdown class="d-inline-block" *ngIf="$environments | async; let environments">
+  <button type="button" class="btn btn btn-sm jtl-no-glow" id="dropdownBasic1" ngbDropdownToggle>
+    {{selectedEnvironment || defaultEnvironment}}
+  </button>
+  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+    <button ngbDropdownItem *ngFor="let _ of environments" (click)="filterEnvironment(_)">{{_}}</button>
+    <button ngbDropdownItem (click)="filterEnvironment(defaultEnvironment)">{{defaultEnvironment}}</button>
+  </div>
+</div>
diff --git a/src/app/scenario/environments/environments.component.spec.ts b/src/app/scenario/environments/environments.component.spec.ts
new file mode 100644
index 00000000..394834dd
--- /dev/null
+++ b/src/app/scenario/environments/environments.component.spec.ts
@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { EnvironmentsComponent } from "./environments.component";
+import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
+import { HttpRequestInterceptorMock } from "../../_interceptors/mock-interceptor";
+
+describe("EnvironmentsComponent", () => {
+  let component: EnvironmentsComponent;
+  let fixture: ComponentFixture<EnvironmentsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HttpClientModule],
+      declarations: [EnvironmentsComponent],
+      providers: [{
+        provide: HTTP_INTERCEPTORS,
+        useClass: HttpRequestInterceptorMock,
+        multi: true
+      }]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EnvironmentsComponent);
+    component = fixture.componentInstance;
+    component.params = { projectName: "test-project", scenarioName: "test-scenario" };
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/scenario/environments/environments.component.ts b/src/app/scenario/environments/environments.component.ts
new file mode 100644
index 00000000..e668878c
--- /dev/null
+++ b/src/app/scenario/environments/environments.component.ts
@@ -0,0 +1,46 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { Observable } from "rxjs";
+import { ScenarioService } from "../../scenario.service";
+import { ItemsService } from "../../items.service";
+import { EnvironmentService } from "../../_services/environment.service";
+
+@Component({
+  selector: "app-environments",
+  templateUrl: "./environments.component.html",
+  styleUrls: ["./environments.component.css"]
+})
+export class EnvironmentsComponent implements OnInit {
+  $environments: Observable<Array<string>>;
+  selectedEnvironment: string;
+  defaultEnvironment = "All Environments";
+
+  @Input() params
+  constructor(
+    private scenarioService: ScenarioService,
+    private itemsService: ItemsService,
+    private environmentService: EnvironmentService,
+  ) {
+    this.$environments = scenarioService.environments$;
+  }
+
+  ngOnInit(): void {
+    this.scenarioService.fetchEnvironments(this.params.projectName, this.params.scenarioName);
+    this.reloadData("")
+
+  }
+  // reload data and set new subscription(s)
+  filterEnvironment(environment: string) {
+    this.selectedEnvironment = environment
+    const env = environment === this.defaultEnvironment ? "" : environment;
+    this.reloadData(env)
+
+  }
+
+  private reloadData(environment) {
+    this.environmentService.setEnvironment(environment)
+    this.itemsService.fetchItems(this.params.projectName, this.params.scenarioName, { limit: 15, offset: 0 });
+    this.scenarioService.fetchScenarioTrends(this.params.projectName, this.params.scenarioName)
+    this.itemsService.setProcessingItemsIntervalSubscription(this.params.projectName, this.params.scenarioName);
+  }
+
+}
diff --git a/src/app/scenario/external-notification/external-notification.component.spec.ts b/src/app/scenario/external-notification/external-notification.component.spec.ts
index 4fb64654..e33f8a91 100644
--- a/src/app/scenario/external-notification/external-notification.component.spec.ts
+++ b/src/app/scenario/external-notification/external-notification.component.spec.ts
@@ -4,7 +4,7 @@ import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { ReactiveFormsModule } from "@angular/forms";
 import { RouterTestingModule } from "@angular/router/testing";
 import { DataTableModule } from "@pascalhonegger/ng-datatable";
-import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptior";
+import { HttpRequestInterceptorMock } from "src/app/_interceptors/mock-interceptor";
 import { AddNewExternalNotificationComponent } from "./add-new-external-notification/add-new-external-notification.component";
 import { DeleteExternalNotificationComponent } from "./delete-external-notification/delete-external-notification.component";
 
diff --git a/src/app/scenario/scenario-settings/scenario-settings.component.ts b/src/app/scenario/scenario-settings/scenario-settings.component.ts
index 346a85a4..85d481ca 100644
--- a/src/app/scenario/scenario-settings/scenario-settings.component.ts
+++ b/src/app/scenario/scenario-settings/scenario-settings.component.ts
@@ -122,7 +122,6 @@ export class SettingsScenarioComponent implements OnInit {
     this.route.params.subscribe(_ => this.params = _);
     this.scenarioApiService.getScenario(this.params.projectName, this.params.scenarioName).subscribe(_ => {
       this.hasBaselineReport = !!_.baselineReport
-      console.log(this.hasBaselineReport)
       if (_.name) {
         this.createFormControls(_);
         this.createForm();
diff --git a/src/app/scenario/scenario-trends/scenario-trends.component.ts b/src/app/scenario/scenario-trends/scenario-trends.component.ts
index 94225f74..19e8325a 100644
--- a/src/app/scenario/scenario-trends/scenario-trends.component.ts
+++ b/src/app/scenario/scenario-trends/scenario-trends.component.ts
@@ -153,7 +153,6 @@ export class ScenarioTrendsComponent implements OnInit {
     if (!degradationCurve) {
       return;
     }
-    console.log(degradationCurve);
     this.responseTimeDegradationChartOption.series = JSON.parse(JSON.stringify(degradationCurve));
     this.updateDegradationCurveChartFlag = true;
 
diff --git a/src/app/scenario/scenario.component.html b/src/app/scenario/scenario.component.html
index e8ce915c..a38e85d3 100644
--- a/src/app/scenario/scenario.component.html
+++ b/src/app/scenario/scenario.component.html
@@ -8,6 +8,7 @@
   <div>
 
     <div class="btn-group">
+      <app-environments [params]="params"></app-environments>
       <app-add-new-item-modal></app-add-new-item-modal>
       <div display="dynamic" [placement]="['bottom-right', 'bottom-left']" class="btn-group" ngbDropdown role="group"
         aria-label="Button group with nested dropdown">
diff --git a/src/app/scenario/scenario.component.spec.ts b/src/app/scenario/scenario.component.spec.ts
index 8e7ed502..161f6981 100644
--- a/src/app/scenario/scenario.component.spec.ts
+++ b/src/app/scenario/scenario.component.spec.ts
@@ -14,7 +14,7 @@ import { HTTP_INTERCEPTORS } from "@angular/common/http";
 import { DataTableModule } from "@pascalhonegger/ng-datatable";
 import { ExternalNotificationComponent } from "./external-notification/external-notification.component";
 import { ScenarioTrendsComponent } from "./scenario-trends/scenario-trends.component";
-import { HttpRequestInterceptorMock } from "../_interceptors/mock-interceptior";
+import { HttpRequestInterceptorMock } from "../_interceptors/mock-interceptor";
 import { HttpClientTestingModule } from "@angular/common/http/testing";
 
 describe("ScenarioComponent", () => {
diff --git a/src/app/scenario/scenario.component.ts b/src/app/scenario/scenario.component.ts
index 7234e09f..27e787ed 100644
--- a/src/app/scenario/scenario.component.ts
+++ b/src/app/scenario/scenario.component.ts
@@ -2,12 +2,13 @@ import { Component, OnInit, OnDestroy } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { of, Observable, Subscription } from "rxjs";
 import { switchMap, catchError } from "rxjs/operators";
-import { ProjectOverview, Items } from "../items.service.model";
+import { Items } from "../items.service.model";
 import { ItemsService } from "../items.service";
 import { SharedMainBarService } from "../shared-main-bar.service";
 import { ScenarioService } from "../scenario.service";
 import { ScenarioApiService } from "../scenario-api.service";
 import { showZeroErrorWarning } from "../utils/showZeroErrorTolerance";
+import { EnvironmentService } from "../_services/environment.service";
 
 const LIMIT = 15;
 const OFFSET = 15;
@@ -19,6 +20,7 @@ const OFFSET = 15;
 })
 export class ScenarioComponent implements OnInit, OnDestroy {
   items$: Observable<Items>;
+  environment$: Subscription;
   params;
   page = 1;
   pageSize = LIMIT;
@@ -34,14 +36,16 @@ export class ScenarioComponent implements OnInit, OnDestroy {
     private itemsService: ItemsService,
     private router: Router,
     private sharedMainBarService: SharedMainBarService,
+    private environmentService: EnvironmentService,
   ) {
     this.items$ = itemsService.items$;
+    this.environment$ = environmentService.environment$.subscribe(value => this.page = 1);
   }
 
   ngOnDestroy() {
-    this.itemsService.interval.unsubscribe();
+    this.itemsService.intervalSubscription.unsubscribe();
     this.subscription.unsubscribe();
-    this.scenarioService.updateScenarioTrends(undefined)
+    this.scenarioService.updateScenarioTrends(undefined);
   }
 
   ngOnInit() {
@@ -49,12 +53,9 @@ export class ScenarioComponent implements OnInit, OnDestroy {
       switchMap(routeParams => {
         this.params = routeParams;
         this.sharedMainBarService.setProjectName(this.params.projectName);
-        this.itemsService.fetchItems(this.params.projectName, this.params.scenarioName, { limit: LIMIT, offset: 0 });
-        this.scenarioService.fetchScenarioTrends(this.params.projectName, this.params.scenarioName);
         this.scenarioApiService.getScenario(this.params.projectName, this.params.scenarioName).subscribe(_ => {
           this.zeroErrorToleranceEnabled = _.zeroErrorToleranceEnabled;
         });
-        this.itemsService.processingItemsInterval(this.params.projectName, this.params.scenarioName);
         return new Observable().pipe(catchError(err => of([])));
       })
     ).subscribe(_ => _);
@@ -67,11 +68,11 @@ export class ScenarioComponent implements OnInit, OnDestroy {
         if (reloadItems) {
           this.itemsService.fetchItems(this.params.projectName, this.params.scenarioName, { limit: LIMIT, offset: 0 });
           this.scenarioService.fetchScenarioTrends(this.params.projectName, this.params.scenarioName);
+          this.scenarioService.fetchEnvironments(this.params.projectName, this.params.scenarioName);
         }
         return this.currentProcessingItems = inprogress.map((item) => item.id);
       }
     });
-
   }
 
   loadMore() {
diff --git a/src/app/scenario/scenario.module.ts b/src/app/scenario/scenario.module.ts
index 9814832b..6ab59608 100644
--- a/src/app/scenario/scenario.module.ts
+++ b/src/app/scenario/scenario.module.ts
@@ -8,7 +8,7 @@ import { SettingsScenarioComponent } from "./scenario-settings/scenario-settings
 import { DeleteScenarioComponent } from "./delete-scenario/delete-scenario.component";
 import { ExternalNotificationComponent } from "./external-notification/external-notification.component";
 import { NgxSpinnerModule } from "ngx-spinner";
-import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { NgbDropdown, NgbDropdownModule, NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { SharedModule } from "../shared/shared.module";
 import { HighchartsChartModule } from "highcharts-angular";
 import { ItemControlsComponent } from "./item-controls/item-controls.component";
@@ -24,6 +24,7 @@ import {
 import { RoleModule } from "../_directives/role.module";
 import { AddNewItemModule } from "./add-new-item/add-new-item.module";
 import { ScenarioTrendsSettingsComponent } from "./scenario-trends/scenario-trends-settings/scenario-trends-settings.component";
+import { EnvironmentsComponent } from "./environments/environments.component";
 
 const routes: Routes = [
   {
@@ -36,11 +37,12 @@ const routes: Routes = [
 @NgModule({
   declarations: [ScenarioComponent, ScenarioTrendsComponent,
     SettingsScenarioComponent, DeleteScenarioComponent, ExternalNotificationComponent,
-    ItemControlsComponent, AddNewExternalNotificationComponent, DeleteExternalNotificationComponent, ScenarioTrendsSettingsComponent,
+    ItemControlsComponent, AddNewExternalNotificationComponent, DeleteExternalNotificationComponent, ScenarioTrendsSettingsComponent, EnvironmentsComponent
   ],
   imports: [
     CommonModule, RouterModule.forRoot(routes), NgxSpinnerModule, NgbModule, SharedModule, HighchartsChartModule,
     SharedItemModule, ReactiveFormsModule, DataTableModule, RoleModule, AddNewItemModule, FormsModule,
+
   ],
   exports: [ScenarioComponent, ScenarioTrendsComponent,
     SettingsScenarioComponent, DeleteScenarioComponent, ExternalNotificationComponent,