diff --git a/frontend/src/app/bans/bans.component.html b/frontend/src/app/bans/bans.component.html
index 7e39d72..240784c 100644
--- a/frontend/src/app/bans/bans.component.html
+++ b/frontend/src/app/bans/bans.component.html
@@ -11,10 +11,10 @@
       <div class="container">
         <div class="columnSection">
           <div class="historyTypeContainer">
-            <button class="button-outer" (click)="punishmentType = 'all'">All</button>
-            <button class="button-outer" (click)="punishmentType = 'ban'">Bans</button>
-            <button class="button-outer" (click)="punishmentType = 'mute'">Mutes</button>
-            <button class="button-outer" (click)="punishmentType = 'warn'">Warnings</button>
+            <button class="button-outer" (click)="changeHistoryPunishment('all')">All</button>
+            <button class="button-outer" (click)="changeHistoryPunishment('ban')">Bans</button>
+            <button class="button-outer" (click)="changeHistoryPunishment('mute')">Mutes</button>
+            <button class="button-outer" (click)="changeHistoryPunishment('warn')">Warnings</button>
           </div>
           <div class="historySearchContainer">
             <input class="historySearch"
diff --git a/frontend/src/app/bans/bans.component.ts b/frontend/src/app/bans/bans.component.ts
index 8ea0d8d..9a5bf94 100644
--- a/frontend/src/app/bans/bans.component.ts
+++ b/frontend/src/app/bans/bans.component.ts
@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {HeaderComponent} from "../header/header.component";
 import {HistoryComponent} from './history/history.component';
-import {HistoryService} from '../../api';
+import {HistoryCount, HistoryService} from '../../api';
 import {NgForOf, NgIf} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 
@@ -29,21 +29,23 @@ export class BansComponent implements OnInit {
   public finalSearchTerm: string = '';
   public searchTerm: string = '';
   public filteredNames: string[] = [];
+  public historyCount: HistoryCount = {
+    bans: 0,
+    mutes: 0,
+    kicks: 0,
+    warnings: 0
+  }
 
   ngOnInit() {
     this.historyApi.getUserNames(this.userType, this.punishmentType).subscribe(names => {
       this.names = names;
     });
 
-    const state = {
-      searchTerm: this.searchTerm,
-      page: this.page,
-      userType: this.userType,
-      punishmentType: this.punishmentType
-    };
-    const title = 'Altitude Bans';
-    const url = window.location.href;
-    window.history.pushState(state, title, url)
+    this.historyApi.getTotalPunishments().subscribe(totalPunishments => {
+      this.historyCount = totalPunishments;
+    })
+
+    this.pushState();
 
     window.addEventListener('popstate', (event) => {
       if (event.state && event.state.searchTerm !== undefined) {
@@ -73,6 +75,40 @@ export class BansComponent implements OnInit {
   }
 
   public search() {
+    this.pushState()
+    this.finalSearchTerm = this.searchTerm;
+  }
+
+  public changeHistoryType(type: 'player' | 'staff') {
+    this.pushState();
+    this.userType = type;
+  }
+
+  public changeHistoryPunishment(type: 'all' | 'ban' | 'mute' | 'kick' | 'warn') {
+    this.pushState();
+    this.punishmentType = type;
+  }
+
+  public nextPage() {
+    if (this.page === this.getMaxPage() - 1) {
+      return;
+    }
+    this.setPage(this.page++)
+  }
+
+  public previousPage() {
+    if (this.page === 0) {
+      return;
+    }
+    this.setPage(this.page--)
+  }
+
+  public setPage(page: number) {
+    this.pushState();
+    this.page = page
+  }
+
+  private pushState() {
     const state = {
       searchTerm: this.searchTerm,
       page: this.page,
@@ -82,6 +118,23 @@ export class BansComponent implements OnInit {
     const title = 'Altitude Bans';
     const url = window.location.href;
     window.history.pushState(state, title, url);
-    this.finalSearchTerm = this.searchTerm;
+  }
+
+  public getMaxPage() {
+    const all = this.historyCount.bans + this.historyCount.mutes + this.historyCount.warnings;
+    switch (this.punishmentType) {
+      case 'all':
+        return Math.ceil(all / 10);
+      case 'ban':
+        return Math.ceil(this.historyCount.bans / 10);
+      case 'mute':
+        return Math.ceil(this.historyCount.mutes / 10);
+      case 'kick':
+        return Math.ceil(this.historyCount.kicks / 10);
+      case 'warn':
+        return Math.ceil(this.historyCount.warnings / 10);
+      default:
+        return 0;
+    }
   }
 }