diff --git a/frontend/src/app/bans/bans.component.html b/frontend/src/app/bans/bans.component.html
index 5b2ff1b..9aaed9d 100644
--- a/frontend/src/app/bans/bans.component.html
+++ b/frontend/src/app/bans/bans.component.html
@@ -50,6 +50,24 @@
           <app-history [userType]="userType" [punishmentType]="punishmentType"
                        [page]="page" [searchTerm]="finalSearchTerm"></app-history>
         </div>
+        <div>
+          <button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)"
+                  (click)="setPage(0)">
+            First page
+          </button>
+          <button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)"
+                  (click)="previousPage()">
+            Previous page
+          </button>
+          <button [ngClass]="{'active': buttonActive(getMaxPage())}" [disabled]="!buttonActive(getMaxPage())"
+                  (click)="nextPage()">
+            Next page
+          </button>
+          <button [ngClass]="{'active': buttonActive(getMaxPage())}" [disabled]="!buttonActive(getMaxPage())"
+                  (click)="setPage(getMaxPage())">
+            Last page
+          </button>
+        </div>
       </div>
     </section>
   </main>
diff --git a/frontend/src/app/bans/bans.component.ts b/frontend/src/app/bans/bans.component.ts
index 0c0d437..9f97728 100644
--- a/frontend/src/app/bans/bans.component.ts
+++ b/frontend/src/app/bans/bans.component.ts
@@ -20,6 +20,7 @@ import {FormsModule} from '@angular/forms';
 })
 export class BansComponent implements OnInit {
 
+  private PAGE_SIZE: number = 10;
 
   public getCurrentButtonId(options: 'all' | 'ban' | 'mute' | 'kick' | 'warn') {
     if (options == this.punishmentType) {
@@ -97,20 +98,21 @@ export class BansComponent implements OnInit {
   public changeHistoryPunishment(type: 'all' | 'ban' | 'mute' | 'kick' | 'warn') {
     this.pushState();
     this.punishmentType = type;
+    this.page = 0;
   }
 
   public nextPage() {
-    if (this.page === this.getMaxPage() - 1) {
+    if (this.page === this.getMaxPage()) {
       return;
     }
-    this.setPage(this.page++)
+    this.setPage(++this.page)
   }
 
   public previousPage() {
     if (this.page === 0) {
       return;
     }
-    this.setPage(this.page--)
+    this.setPage(--this.page)
   }
 
   public setPage(page: number) {
@@ -131,25 +133,25 @@ export class BansComponent implements OnInit {
   }
 
   public getMaxPage() {
-    // @ts-ignore
     const all = this.historyCount.bans + this.historyCount.mutes + this.historyCount.warnings;
     switch (this.punishmentType) {
       case 'all':
-        return Math.ceil(all / 10);
+        return Math.floor(all / this.PAGE_SIZE) - 1;
       case 'ban':
-        // @ts-ignore
-        return Math.ceil(this.historyCount.bans / 10);
+        return Math.floor(this.historyCount.bans / this.PAGE_SIZE) - 1;
       case 'mute':
-        // @ts-ignore
-        return Math.ceil(this.historyCount.mutes / 10);
+        return Math.floor(this.historyCount.mutes / this.PAGE_SIZE) - 1;
       case 'kick':
-        // @ts-ignore
-        return Math.ceil(this.historyCount.kicks / 10);
+        return Math.floor(this.historyCount.kicks / this.PAGE_SIZE) - 1;
       case 'warn':
-        // @ts-ignore
-        return Math.ceil(this.historyCount.warnings / 10);
+        return Math.floor(this.historyCount.warnings / this.PAGE_SIZE) - 1;
       default:
         return 0;
     }
   }
+
+  public buttonActive(compare: number): boolean {
+    return this.page !== compare;
+
+  }
 }