diff --git a/src/app/core/pagination/pagination.filter.ts b/src/app/core/pagination/pagination.filter.ts
new file mode 100644
index 0000000..2a561c9
--- /dev/null
+++ b/src/app/core/pagination/pagination.filter.ts
@@ -0,0 +1,9 @@
+export function PaginationFilter() {
+  return function(input: any[], start: string) {
+    if (!input || !angular.isArray(input)) {
+      return input;
+    }
+    let position: number = parseInt(start, 10);
+    return input.slice(position);
+  };
+}
diff --git a/src/app/core/pagination/pagination.html b/src/app/core/pagination/pagination.html
new file mode 100644
index 0000000..3bcdb51
--- /dev/null
+++ b/src/app/core/pagination/pagination.html
@@ -0,0 +1,21 @@
+<div class="row" ng-if="vm.pageList.length > 1">
+    <div class="col-xs-12 text-center">
+        <ul class="pagination">
+            <li ng-click="vm.goToPage(vm.currentPage - 1)"
+                ng-class="{disabled: vm.currentPage == 0}">
+                <a href="" aria-label="Previous">
+                    <span aria-hidden="true">&laquo;</span>
+                </a>
+            </li>
+            <li ng-repeat="i in vm.pageList" ng-class="{active: i === vm.currentPage}">
+                <a href="" ng-click="vm.goToPage(i)">{{i + 1}}</a>
+            </li>
+            <li ng-click="vm.goToPage(vm.currentPage + 1)"
+                ng-class="{disabled: vm.currentPage == vm.pages - 1}">
+                <a href="" aria-label="Next">
+                    <span aria-hidden="true">&raquo;</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
diff --git a/src/app/core/pagination/pagination.ts b/src/app/core/pagination/pagination.ts
new file mode 100644
index 0000000..997123c
--- /dev/null
+++ b/src/app/core/pagination/pagination.ts
@@ -0,0 +1,54 @@
+class XosPaginationCtrl {
+  $inject = ['$onInit', '$scope'];
+
+  public pageSize: number;
+  public totalElements: number;
+  public change: any; // fn
+  public currentPage: number;
+  public pages: number;
+  public pageList: number[];
+
+  constructor (
+    private $scope: ng.IScope
+  ) {
+  }
+
+  $onInit() {
+    this.currentPage = 0;
+
+    // watch for data changes
+    this.$scope.$watch(() => this.totalElements, () => {
+      if (this.totalElements) {
+        this.pages = Math.ceil(this.totalElements / this.pageSize);
+        this.pageList = this.createPages(this.pages);
+      }
+    });
+  }
+
+  public goToPage = (n) => {
+    if (n < 0 || n === this.pages) {
+      return;
+    }
+    this.currentPage = n;
+    this.change(n);
+  };
+
+  private createPages = (pages) => {
+    let arr = [];
+    for (let i = 0; i < pages; i++) {
+      arr.push(i);
+    }
+    return arr;
+  };
+}
+
+export const xosPagination: angular.IComponentOptions = {
+  template: require('./pagination.html'),
+  controllerAs: 'vm',
+  controller: XosPaginationCtrl,
+  bindings: {
+    pageSize: '=',
+    totalElements: '=',
+    change: '='
+  }
+};