diff --git a/package.json b/package.json
index 06b28c0..5727456 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,14 @@
 {
   "name": "opt-cc",
-  "version": "1.7.8",
+  "version": "1.8.0",
   "author": "Florian Hartwich <hardi@noarch.de>",
   "private": true,
   "scripts": {
     "start": "npm run deploy-static-prod && npm start --prefix ./api",
     "dev": "npm run deploy-static && npm run dev --prefix ./api",
-    "deploy-static": "npm run build --prefix=static && npm run deploy-static:link-resource && npm run deploy-static:api-docs",
-    "deploy-static:prod": "npm run build:prod --prefix=static && npm run deploy-static:link-resource && npm run deploy-static:api-docs",
+    "pre-deploy-clean": "unlink ./public/resource",
+    "deploy-static": "npm run pre-deploy-clean && npm run build --prefix=static && npm run deploy-static:link-resource && npm run deploy-static:api-docs",
+    "deploy-static:prod": "pre-deploy-clean && npm run build:prod --prefix=static && npm run deploy-static:link-resource && npm run deploy-static:api-docs",
     "deploy-static:link-resource": "ln -s ../api/resource/ public/resource",
     "deploy-static:api-docs": "npm run api:docs --prefix=api",
     "postinstall": "npm install --prefix ./static && npm install --prefix  ./api",
diff --git a/static/src/app/ranks/rank-list/rank-list.component.html b/static/src/app/ranks/rank-list/rank-list.component.html
index 0c2cee1..d651558 100644
--- a/static/src/app/ranks/rank-list/rank-list.component.html
+++ b/static/src/app/ranks/rank-list/rank-list.component.html
@@ -1,9 +1,13 @@
 <div class="select-list">
-  <div class="input-group list-header">
-    <div class="btn-group" (click)="filterRanks()">
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="BLUFOR" uncheckable>{{fraction.BLUFOR}}</label>
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="OPFOR" uncheckable>{{fraction.OPFOR}}</label>
-    </div>
+  <div class="list-header">
+    <mat-button-toggle-group #group="matButtonToggleGroup">
+      <mat-button-toggle value="BLUFOR" (change)="filterRanks(group)">
+        {{fraction.BLUFOR}}
+      </mat-button-toggle>
+      <mat-button-toggle value="OPFOR" (change)="filterRanks(group)">
+        {{fraction.OPFOR}}
+      </mat-button-toggle>
+    </mat-button-toggle-group>
     <a class="pull-right btn btn-success" (click)="openNewRankForm()">+</a>
   </div>
 
diff --git a/static/src/app/ranks/rank-list/rank-list.component.ts b/static/src/app/ranks/rank-list/rank-list.component.ts
index 3bb2c1c..f52a751 100644
--- a/static/src/app/ranks/rank-list/rank-list.component.ts
+++ b/static/src/app/ranks/rank-list/rank-list.component.ts
@@ -7,6 +7,7 @@ import {Observable} from 'rxjs/Observable';
 import {Rank} from '../../models/model-interfaces';
 import {RankService} from '../../services/army-management/rank.service';
 import {Fraction} from '../../utils/fraction.enum';
+import {UIHelpers} from '../../utils/global.helpers';
 
 @Component({
   selector: 'rank-list',
@@ -21,7 +22,7 @@ export class RankListComponent implements OnInit {
 
   searchTerm = new FormControl();
 
-  public radioModel: string;
+  radioModel = '';
 
   readonly fraction = Fraction;
 
@@ -60,7 +61,8 @@ export class RankListComponent implements OnInit {
     this.router.navigate([{outlets: {'right': ['edit', rankId]}}], {relativeTo: this.route});
   }
 
-  filterRanks() {
+  filterRanks(group) {
+    this.radioModel = UIHelpers.toggleReleaseButton(this.radioModel, group);
     this.ranks$ = this.rankService.findRanks(this.searchTerm.value, this.radioModel);
   }
 
diff --git a/static/src/app/ranks/ranks.module.ts b/static/src/app/ranks/ranks.module.ts
index 9bdba31..a1b0e4a 100644
--- a/static/src/app/ranks/ranks.module.ts
+++ b/static/src/app/ranks/ranks.module.ts
@@ -4,11 +4,11 @@ import {SharedModule} from '../shared.module';
 import {CommonModule} from '@angular/common';
 import {RankService} from '../services/army-management/rank.service';
 import {RankStore} from '../services/stores/rank.store';
-import {ButtonsModule} from 'ngx-bootstrap';
+import {MatButtonToggleModule} from '@angular/material';
 
 @NgModule({
   declarations: ranksRoutingComponents,
-  imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), rankRouterModule],
+  imports: [CommonModule, SharedModule, MatButtonToggleModule, rankRouterModule],
   providers: [RankStore, RankService]
 })
 export class RanksModule {
diff --git a/static/src/app/utils/global.helpers.ts b/static/src/app/utils/global.helpers.ts
index 4bd3346..c1a9530 100644
--- a/static/src/app/utils/global.helpers.ts
+++ b/static/src/app/utils/global.helpers.ts
@@ -7,3 +7,14 @@ export const CSSHelpers = {
       'background-repeat: no-repeat;';
   }
 };
+
+export const UIHelpers = {
+  toggleReleaseButton: (currentVal, group) => {
+    if (currentVal == group.value) {
+      group.value = '';
+      return '';
+    } else {
+      return group.value;
+    }
+  }
+};