diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 240b573..837a6dd 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -5,10 +5,13 @@
 
 
 <div *ngIf="login.isLoggedIn">
-    <rb-form-multi-select name="groupSelect" idField="id" [items]="keys" [(ngModel)]="isActiveKey" label="Groups"
-                        class="selection" (ngModelChange)="updateGroups($event)">
+    <rb-form-multi-select name="groupSelect" idField="id" [items]="keys" [(ngModel)]="isActiveKey" label="Groups" class="selection">
         <span *rbFormMultiSelectOption="let key">{{key.id}}</span>
-    </rb-form-multi-select>
+
+    </rb-form-multi-select> 
+    <rb-icon-button icon="forward-right" mode="primary" (click)="updateGroups(isActiveKey)">
+        Apply groups 
+    </rb-icon-button>
 
     <div id="divChart">
         <canvas id="myChart">
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
index c53dfa5..4457c15 100644
--- a/src/app/home/home.component.scss
+++ b/src/app/home/home.component.scss
@@ -7,6 +7,11 @@ app-login {
   float: right;
 }
 
+.selection{
+  float: left;
+  width: 20%;
+}
+
 rb-form-multi-select {
   width: 20%;
 }
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 84117b1..c500d38 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,8 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import {LoginService} from '../services/login.service';
+import { LoginService } from '../services/login.service';
 import { ApiService } from '../services/api.service';
-import {Chart} from 'chart.js';
-
+import { Chart } from 'chart.js';
 
 
 interface KeyInterface {
@@ -19,7 +18,7 @@ interface KeyInterface {
 export class HomeComponent implements OnInit {
 
   keys: KeyInterface[] = [];
-  isActiveKey: { [key: string]: boolean } = {};  // object to check if key is currently active
+  isActiveKey: { [key: string]: boolean } = {};  // Object to check if key is currently active
   myChart: Chart;
 
   constructor(
@@ -28,13 +27,11 @@ export class HomeComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    // fetch all available groups  
+    // Fetch all available groups  
     this.fetchData('/material/groups', data => this.createGroup(data));
-    //this.initChart();
-    console.log(this.login.username);
   }
 
-  // api access with callback
+  // Api access with callback
   async fetchData(URL: string, processor: any) {
     this.api.get(URL, (sData, err, headers) => {
       processor(sData);
@@ -49,13 +46,33 @@ export class HomeComponent implements OnInit {
       temp.push({ id: data[i], count: 0, active: false });
     }
     this.keys = temp; // invoke update in rb-multiselect
-    this.calcFieldSelectKeys();
-    // fetch all samples populated with according group
-    this.fetchData('/samples?status%5B%5D=validated&status=new&page-size=10&sort=_id-asc&fields%5B%5D=material.group', data => this.countSamples(data));
+    this.initChart();
+
+    // Only neccesary if keys get preselected
+    //this.calcFieldSelectKeys();
+
+    // Fetch all samples populated with according group
+    this.getSamples();
   }
 
-  // loop through samples and count
+  // Iterate through active keys to assemble an api request for the required data
+  getSamples() {
+    let query = '/samples?status%5B%5D=validated&status=new&filters%5B%5D=%7B%22mode%22%3A%22in%22%2C%22field%22%3A%22material.group%22%2C%22values%22%3A%5B';
+    let temp = '';
+    this.keys.forEach(key => {
+      temp += key.active ? '%22' + key.id.split("%").join("%25") + '%22%2C' : ""; // replace split().join() with replaceAll() 
+    });
+    if (temp === '') {
+      this.countSamples('');
+    } else {
+      query = query + temp.substr(0, temp.length - 3) + '%5D%7D&fields%5B%5D=material.group';
+      this.fetchData(query, data => this.countSamples(data));
+    }
+  }
+
+  // Loop through samples and count
   countSamples(data: any) {
+    this.keys.map(key => key.count = 0);
     for (var i = 0; i < data.length; i++) {
       this.keys.forEach(key => {
         if (key.id === data[i].material.group) {
@@ -63,29 +80,28 @@ export class HomeComponent implements OnInit {
         }
       });
     }
-    this.initChart();
+    this.updateGraph();
   }
 
-  // preset select
+  // Preset select
   calcFieldSelectKeys() {
     this.keys.forEach(key => {
       this.isActiveKey[key.id] = key.active;
     });
   }
 
-  // update keys based on select
-  updateGroups(event: any) {
+  // Update keys based on select
+  updateGroups(activeKeys: any) {
     this.keys.forEach(key => {
-      if (event.hasOwnProperty(key.id)) {
-        key.active = event[key.id];
+      if (activeKeys.hasOwnProperty(key.id)) {
+        key.active = activeKeys[key.id];
       }
     });
-    this.myChart.destroy();
-    this.initChart();
+    this.getSamples();
   }
 
-  // get data for graph based on active keys
-  async getData() {
+  // Get data for graph based on active keys
+  updateGraph() {
     let nameList: string[] = [];
     let dataList: number[] = [];
 
@@ -95,45 +111,32 @@ export class HomeComponent implements OnInit {
         dataList.push(key.count);
       }
     })
-    return { names: nameList, data: dataList };
+    this.myChart.data.labels = nameList;
+    this.myChart.data.datasets[0].data = dataList;
+    this.myChart.update();
   }
 
-  // draw graph
+  // Initialize graph
   async initChart() {
-    const data = await this.getData();
-
-    const canvas = document.getElementById('myChart') as HTMLCanvasElement;
-    const width = canvas.clientWidth;
-    const height = canvas.clientHeight;
-    const ctx = canvas.getContext('2d');
-
-    var img = new Image(width, height);
-    img.src = "/assets/imgs/supergraphic.svg";
-    img.onload = () => {
-      const fillPattern = ctx.createPattern(img, 'no-repeat');
-
-      this.myChart = new Chart("myChart", {
-        type: 'line',
-        data: {
-          labels: data.names,
-          datasets: [{
-            label: 'Number of samples per group',
-            data: data.data,
-            backgroundColor: fillPattern,
-            pointRadius: 4,
-            pointHoverRadius: 7
+    this.myChart = new Chart("myChart", {
+      type: 'bar',
+      data: {
+        labels: [],
+        datasets: [{
+          label: 'Number of samples per group',
+          data: [],
+          backgroundColor: 'rgba(0, 86, 145, 1)'
+        }]
+      },
+      options: {
+        scales: {
+          yAxes: [{
+            ticks: {
+              beginAtZero: true
+            }
           }]
-        },
-        options: {
-          scales: {
-            yAxes: [{
-              ticks: {
-                beginAtZero: true
-              }
-            }]
-          }
         }
-      });
-    }
+      }
+    });
   }
 }