diff --git a/client/src/app/site/motions/category-list/category-list.component.html b/client/src/app/site/motions/category-list/category-list.component.html
new file mode 100644
index 000000000..58493c916
--- /dev/null
+++ b/client/src/app/site/motions/category-list/category-list.component.html
@@ -0,0 +1,38 @@
+
+
+
+
+ Category
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name
+ {{category.name}}
+
+
+
+
+ Prefix
+ {{category.prefix}}
+
+
+
+
+
diff --git a/client/src/app/site/motions/category-list/category-list.component.scss b/client/src/app/site/motions/category-list/category-list.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/app/site/motions/category-list/category-list.component.spec.ts b/client/src/app/site/motions/category-list/category-list.component.spec.ts
new file mode 100644
index 000000000..4a8cee883
--- /dev/null
+++ b/client/src/app/site/motions/category-list/category-list.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CategoryListComponent } from './category-list.component';
+
+describe('CategoryListComponent', () => {
+ let component: CategoryListComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [CategoryListComponent]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CategoryListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/client/src/app/site/motions/category-list/category-list.component.ts b/client/src/app/site/motions/category-list/category-list.component.ts
new file mode 100644
index 000000000..7896dd665
--- /dev/null
+++ b/client/src/app/site/motions/category-list/category-list.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Category } from '../../../shared/models/motions/category';
+import { Title } from '@angular/platform-browser';
+import { TranslateService } from '@ngx-translate/core';
+import { Router } from '@angular/router';
+import { BaseComponent } from '../../../base.component';
+import { MatSort, MatTable, MatTableDataSource } from '@angular/material';
+
+@Component({
+ selector: 'app-category-list',
+ templateUrl: './category-list.component.html',
+ styleUrls: ['./category-list.component.scss']
+})
+export class CategoryListComponent extends BaseComponent implements OnInit {
+ /**
+ * Store the categories
+ */
+ categoryArray: Array;
+
+ /**
+ * Will be processed by the mat-table
+ */
+ dataSource: MatTableDataSource;
+
+ /**
+ * The table itself.
+ */
+ @ViewChild(MatTable) table: MatTable;
+
+ /**
+ * Sort the Table
+ */
+ @ViewChild(MatSort) sort: MatSort;
+
+ constructor(protected titleService: Title, protected translate: TranslateService, private router: Router) {
+ super(titleService, translate);
+ }
+
+ ngOnInit() {
+ super.setTitle('Category');
+ this.categoryArray = this.DS.get(Category) as Category[];
+ this.dataSource = new MatTableDataSource(this.categoryArray);
+ this.dataSource.sort = this.sort;
+
+ // Observe DataStore for motions. Initially, executes once for every motion.
+ // The alternative approach is to put the observable as DataSource to the table
+ this.DS.getObservable().subscribe(newModel => {
+ if (newModel instanceof Category) {
+ this.categoryArray = this.DS.get(Category) as Category[];
+ this.dataSource.data = this.categoryArray;
+ }
+ });
+ }
+}
diff --git a/client/src/app/site/motions/motion-list/motion-list.component.html b/client/src/app/site/motions/motion-list/motion-list.component.html
index 2817d6e03..c85a7c19f 100644
--- a/client/src/app/site/motions/motion-list/motion-list.component.html
+++ b/client/src/app/site/motions/motion-list/motion-list.component.html
@@ -6,11 +6,17 @@
Motions
-
+
+
-