diff --git a/static/src/app/common/user-interface/list-filter/list-filter.component.css b/static/src/app/common/user-interface/list-filter/list-filter.component.css
new file mode 100644
index 0000000..2d50504
--- /dev/null
+++ b/static/src/app/common/user-interface/list-filter/list-filter.component.css
@@ -0,0 +1,15 @@
+.list-header {
+  width: 100%;
+  padding-bottom: 20px;
+}
+
+.add-btn {
+  margin-right: 16px;
+  margin-top: -3px;
+  float: right;
+}
+
+:host/deep/.mat-icon {
+  height: 32px;
+  width: 32px;
+}
diff --git a/static/src/app/common/user-interface/list-filter/list-filter.component.html b/static/src/app/common/user-interface/list-filter/list-filter.component.html
new file mode 100644
index 0000000..92fdbbf
--- /dev/null
+++ b/static/src/app/common/user-interface/list-filter/list-filter.component.html
@@ -0,0 +1,11 @@
+<div class="input-group list-header pull-left">
+  <mat-button-toggle-group #group="matButtonToggleGroup">
+    <mat-button-toggle *ngFor="let button of filterButtons" value="{{button.value}}" (change)="execute(group)">
+      {{button.label}}
+    </mat-button-toggle>
+  </mat-button-toggle-group>
+  <button mat-icon-button class="add-btn">
+    <mat-icon svgIcon="{{addButton.svgIcon}}" title="addButton.tooltip"
+              (click)="add()"></mat-icon>
+  </button>
+</div>
diff --git a/static/src/app/common/user-interface/list-filter/list-filter.component.ts b/static/src/app/common/user-interface/list-filter/list-filter.component.ts
new file mode 100644
index 0000000..69d6d12
--- /dev/null
+++ b/static/src/app/common/user-interface/list-filter/list-filter.component.ts
@@ -0,0 +1,28 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'cc-list-filter',
+  templateUrl: './list-filter.component.html',
+  styleUrls: ['./list-filter.component.css']
+})
+export class ListFilterComponent {
+
+  @Input() filterButtons: any[];
+
+  @Input() addButton: any;
+
+  @Output() executeSearch = new EventEmitter();
+
+  @Output() openAddFrom = new EventEmitter();
+
+  constructor() {
+  }
+
+  execute(group) {
+    this.executeSearch.emit(group);
+  }
+
+  add() {
+    this.openAddFrom.emit();
+  }
+}
diff --git a/static/src/app/decorations/decoration-list/decoration-list.component.html b/static/src/app/decorations/decoration-list/decoration-list.component.html
index 460096a..2c1b0d5 100644
--- a/static/src/app/decorations/decoration-list/decoration-list.component.html
+++ b/static/src/app/decorations/decoration-list/decoration-list.component.html
@@ -1,21 +1,12 @@
 <div class="select-list">
-  <div class="input-group list-header pull-left">
-    <mat-button-toggle-group #group="matButtonToggleGroup">
-      <mat-button-toggle value="BLUFOR" (change)="filterDecorations(group)">
-        {{fraction.BLUFOR}}
-      </mat-button-toggle>
-      <mat-button-toggle value="OPFOR" (change)="filterDecorations(group)">
-        {{fraction.OPFOR}}
-      </mat-button-toggle>
-      <mat-button-toggle value="GLOBAL" (change)="filterDecorations(group)">
-        Global
-      </mat-button-toggle>
-    </mat-button-toggle-group>
-    <button mat-icon-button class="add-btn">
-      <mat-icon svgIcon="add" title="Neue Auszeichnung hinzufügen"
-                (click)="openNewDecorationForm()"></mat-icon>
-    </button>
-  </div>
+  <cc-list-filter
+    [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
+                      {label: fraction.OPFOR, value: 'OPFOR'},
+                      {label: 'Global', value: 'GLOBAL'}]"
+    [addButton]="{svgIcon: 'add', tooltip: 'Neue Auszeichnung hinzufügen'}"
+    (executeSearch)="filterDecorations($event)"
+    (openAddFrom)="openNewDecorationForm()">
+  </cc-list-filter>
 
   <div class="input-group list-header">
     <input id="search-tasks"
diff --git a/static/src/app/decorations/decoration.routing.ts b/static/src/app/decorations/decoration.routing.ts
index ad7ea52..57f81ef 100644
--- a/static/src/app/decorations/decoration.routing.ts
+++ b/static/src/app/decorations/decoration.routing.ts
@@ -4,6 +4,7 @@ import {DecorationListComponent} from './decoration-list/decoration-list.compone
 import {EditDecorationComponent} from './edit-decoration/edit-decoration.component';
 import {ModuleWithProviders} from '@angular/core';
 import {DecorationItemComponent} from './decoration-list/decoration-item.component';
+import {ListFilterComponent} from '../common/user-interface/list-filter/list-filter.component';
 
 export const decorationsRoutes: Routes = [{
   path: '', component: DecorationComponent,
@@ -28,5 +29,5 @@ export const decorationsRoutes: Routes = [{
 export const decorationRoutesModule: ModuleWithProviders = RouterModule.forChild(decorationsRoutes);
 
 export const decorationsRoutingComponents = [DecorationItemComponent, DecorationComponent, DecorationListComponent,
-  EditDecorationComponent];
+  EditDecorationComponent, ListFilterComponent];