diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 9500832..20825ee 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { DataStorageService } from './shared/data-storage.service';
 import { Router, Event, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
 import { ColorGeneratorService } from './shared/color-generator.service';
+import { Aurum } from './shared/aurum.model';
 
 @Component({
   selector: 'app-root',
@@ -46,17 +47,21 @@ export class AppComponent {
   onInputData(event: any) {
     const data = event.target.value;
     const idOfData = event.target.id;
-    // console.log('READ from ', idOfData, ' input field with data: ', data);
+    const dataParsed: Aurum = JSON.parse(data);
 
-    this.dataStorage.changeData(JSON.parse(data), idOfData);
-    if (idOfData === 'data2') {
-      this.dataStorage.isComparison = true;
+    if (idOfData === 'data1') {
+      this.dataStorage.changeData(JSON.parse(data), idOfData);
     }
 
     // Cheap trick to not use the color generator twice as the attributes are the same for both
     if (this.isNotGenerated) {
-      this.colorGenerator.generateStyleRules();
+      this.colorGenerator.generateStyleRules(dataParsed.searchTerms);
       this.isNotGenerated = false;
     }
+
+    if (idOfData === 'data2') {
+      this.dataStorage.changeIsComparison(true);
+      this.dataStorage.changeData(JSON.parse(data), idOfData);
+    }
   }
 }
diff --git a/src/app/shared/color-generator.service.ts b/src/app/shared/color-generator.service.ts
index f4b2543..319b141 100644
--- a/src/app/shared/color-generator.service.ts
+++ b/src/app/shared/color-generator.service.ts
@@ -14,11 +14,16 @@ export class ColorGeneratorService {
   private criteriasArray: Array<String>;
   private nColors: number;
 
-  generateStyleRules() {
+  generateStyleRules(searchTerms?: Array<string>) {
     // Cretae the empty stylesheet
     this.createStylesheet();
     // Get the criterias now
-    this.criteriasArray = this.dataStorage.searchTermsInput;
+    if (searchTerms) {
+      this.criteriasArray = searchTerms;
+    } else {
+      this.criteriasArray = this.dataStorage.searchTermsInput;
+    }
+
     this.nColors = this.criteriasArray.length;
 
     // Generate the random colors next and the styles for each
diff --git a/src/app/shared/data-storage.service.ts b/src/app/shared/data-storage.service.ts
index b163684..5e1ffce 100644
--- a/src/app/shared/data-storage.service.ts
+++ b/src/app/shared/data-storage.service.ts
@@ -13,9 +13,12 @@ export class DataStorageService {
   };
 
   private defaultColor = new Map([['sample', 'rgb(200, 74, 12)'], ['test', 'rgb(220, 82, 110)']]);
+  private defaultComparison = false;
 
   // Global variable that is used to see if we are in comparsion mode or not
-  private _isComparsion: boolean;
+  private _isComparsion = new BehaviorSubject<boolean>(this.defaultComparison);
+  public readonly isComparison = this._isComparsion.asObservable();
+
   // The search terms of both
   private _searchTermsInput: Array<String>;
   // The set colors and position of rule in stylesheet
@@ -36,7 +39,6 @@ export class DataStorageService {
    * Just initialize some stuff.
    */
   constructor() {
-    this._isComparsion = false;
   }
 
   /**
@@ -69,19 +71,22 @@ export class DataStorageService {
     this._currentColors.next(color);
   }
 
-  /**
- * Getter method for the check if we are in comparsion mode or not.
- */
-  get isComparsion(): boolean {
-    return this._isComparsion;
+  changeIsComparison(state: boolean) {
+    this._isComparsion.next(state);
   }
+//   /**
+//  * Getter method for the check if we are in comparsion mode or not.
+//  */
+//   get isComparsion(): boolean {
+//     return this._isComparsion;
+//   }
 
-  /**
-   * Setter method for the check if we are in comparsion mode or not.
-   */
-  set isComparison(value: boolean) {
-    this._isComparsion = value;
-  }
+//   /**
+//    * Setter method for the check if we are in comparsion mode or not.
+//    */
+//   set isComparison(value: boolean) {
+//     this._isComparsion = value;
+//   }
 
   /**
    * Getter method in order to retrieve all the search terms;
diff --git a/src/app/subsites/viz/viz.component.css b/src/app/subsites/viz/viz.component.css
index 6458a77..02075bc 100644
--- a/src/app/subsites/viz/viz.component.css
+++ b/src/app/subsites/viz/viz.component.css
@@ -25,6 +25,7 @@
     background-clip: padding-box;
     border: 1px solid #ced4da;
     border-radius: .25rem;
+    overflow: hidden;
 }
 
 .textOverview {
diff --git a/src/app/subsites/viz/viz.component.ts b/src/app/subsites/viz/viz.component.ts
index c947036..918de26 100644
--- a/src/app/subsites/viz/viz.component.ts
+++ b/src/app/subsites/viz/viz.component.ts
@@ -47,7 +47,9 @@ export class VizComponent implements OnInit {
    */
   ngOnInit() {
     // Check if we are in comparison mode or not
-    this.isComparison = this.dataStorage.isComparsion;
+    this.dataStorage.isComparison.subscribe((val) => {
+      this.isComparison = val;
+    });
 
     // TODO: Add maybe take(1) as we only need the values once anc can unsubscribe later
     this.dataStorage.currentData.subscribe((data) => {