diff --git a/beat/web/reports/static/reports/app/controllers/groupsController.js b/beat/web/reports/static/reports/app/controllers/groupsController.js
index 50ee637078e805d0643708ac3b615d255b4fe693..ba4fa7ffd8da665ffbd1558ee34428cee58135d9 100644
--- a/beat/web/reports/static/reports/app/controllers/groupsController.js
+++ b/beat/web/reports/static/reports/app/controllers/groupsController.js
@@ -42,5 +42,17 @@ angular.module('reportApp').controller('GroupsController', ['$scope', 'ReportSer
 	// report's experiments
 	vm.experiments = $scope.report_experiments;
 
+	// a group panel's classes
+	// one panel is the active group ('panel-success')
+	vm.classArr = (groupName) => {
+		let a = ['panel', groupName === ReportService.activeGroup ? 'panel-success' : 'panel-default'];
+		return a;
+	};
+
+	// set active group
+	vm.setActiveGroup = (groupName) => {
+		ReportService.activeGroup = groupName;
+	};
+
 	console.log(vm);
 }]);
diff --git a/beat/web/reports/static/reports/app/services/reportService.js b/beat/web/reports/static/reports/app/services/reportService.js
index 95dcc89a4a99f852b0f396b012079cde61241216..988b79147364423a54acb1c1151a15e9856f1670 100644
--- a/beat/web/reports/static/reports/app/services/reportService.js
+++ b/beat/web/reports/static/reports/app/services/reportService.js
@@ -37,12 +37,18 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
 	class Group {
 		constructor (name) {
 			this._name = name;
-			this.experimentNames = new Set();
+			this._experimentNames = new Set();
+			this._reportItemIds = new Set();
 		}
 
 		// get the experiment names in this group
 		get experiments () {
-			return Array.from(this.experimentNames);
+			return Array.from(this._experimentNames);
+		}
+
+		// get the ids of report items that use this group
+		get reportItemIds () {
+			return Array.from(this._reportItemIds);
 		}
 
 		// get the group name
@@ -50,24 +56,31 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
 			return this._name;
 		}
 
-		// check if an exp is in this group
-		hasExperiment (expName) {
-			return this.experimentNames.has(expName);
-		}
-
 		// add an exp to this group
 		addExperiment (expName) {
-			return this.experimentNames.add(expName);
+			return this._experimentNames.add(expName);
 		}
 
 		// rm an exp from this group
 		removeExperiment (expName) {
-			return this.experimentNames.delete(expName);
+			return this._experimentNames.delete(expName);
+		}
+
+		// add an exp to this group
+		addReportItem (id) {
+			return this._reportItemIds.add(id);
+		}
+
+		// rm an exp from this group
+		removeReportItem (id) {
+			return this._reportItemIds.delete(id);
 		}
 	};
 
 	// gets groups
 	reportServiceInstance.groups = groupData;
+	// TODO: move this hacky state to the addReportItem miniwindows
+	reportServiceInstance.activeGroup = '';
 
 	// serializes groups as an object with form:
 	// {
@@ -82,7 +95,7 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
 
 	// create a new group for the report
 	// returns false if it already exists
-	// returns true if it adds a new group
+	// returns the newly added group if successful
 	reportServiceInstance.createGroup = (name) => {
 		if(typeof name !== 'string'){
 			throw new Error(`new group name is not a string: ${JSON.stringify(name)}`);
@@ -92,8 +105,12 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
 			return false;
 		}
 
-		groupData.push(new Group(name));
-		return true;
+		let g = new Group(name);
+
+		groupData.push(g);
+		// change active group to newest group by default
+		reportServiceInstance.activeGroup = g.name;
+		return g;
 	};
 
 	// delete a group
@@ -114,7 +131,7 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
 		groupData.splice(0, groupData.length);
 		Object.entries(data)
 		.forEach(([groupName, expNames]) => {
-			let g = new Group(groupName);
+			let g = reportServiceInstance.createGroup(groupName);
 			expNames.forEach(n => g.addExperiment(n));
 			groupData.push(g);
 		});
@@ -149,7 +166,12 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
 
 	// gets groups for an experiment
 	reportServiceInstance.getExperimentGroups = (expName) => {
-		return groupData.filter(g => g.hasExperiment(expName)).map(g => g.name);
+		return groupData.filter(g => g.experiments.includes(expName)).map(g => g.name);
+	};
+
+	// gets group for a report item's id
+	reportServiceInstance.getReportItemGroup = (id) => {
+		return groupData.find(g => g.reportItemIds.includes(id));
 	};
 
 	// helper to assert that a group exists
diff --git a/beat/web/reports/templates/reports/panels/viewer.html b/beat/web/reports/templates/reports/panels/viewer.html
index 334a62278f9ebcbe582e38498b8c960e62384046..8c17e06d55ce95fdb815510648cb4a22d515716d 100644
--- a/beat/web/reports/templates/reports/panels/viewer.html
+++ b/beat/web/reports/templates/reports/panels/viewer.html
@@ -75,11 +75,16 @@
 								</div>
 							</div>
 						</div>
-						<div ng-repeat='group in groups.groups' class='panel panel-default'>
+						<div ng-repeat='group in groups.groups track by $index' ng-class='groups.classArr(group.name)'>
 							<div class='panel-heading'>
 								<h4 class='panel-title'>{$ group.name $}</h4>
 							</div>
 							<div class='panel-body'>
+								<button
+									class='btn btn-success'
+									ng-click='groups.setActiveGroup(group.name)'>
+									Set as Active Group
+								</button>
 								<button
 									class='btn btn-danger'
 									ng-click='groups.deleteGroup(group.name)'>