diff --git a/frontend/src/app/bans/bans.component.html b/frontend/src/app/bans/bans.component.html
index 1670f05..7e39d72 100644
--- a/frontend/src/app/bans/bans.component.html
+++ b/frontend/src/app/bans/bans.component.html
@@ -23,7 +23,7 @@
                    [(ngModel)]="searchTerm"
                    (input)="filterNames()"
             >
-            <button class="searchButton">Search</button>
+            <button class="searchButton" (click)="search()">Search</button>
             <div class="search-dropdown" *ngIf="filteredNames.length > 0 && searchTerm">
               <div
                 class="dropdown-item"
@@ -35,7 +35,8 @@
           </div>
         </div>
         <div class="historyTable">
-          <app-history [userType]="userType" [punishmentType]="punishmentType"></app-history>
+          <app-history [userType]="userType" [punishmentType]="punishmentType"
+                       [page]="page" [searchTerm]="finalSearchTerm"></app-history>
         </div>
       </div>
     </section>
diff --git a/frontend/src/app/bans/bans.component.ts b/frontend/src/app/bans/bans.component.ts
index 80fb23f..8ea0d8d 100644
--- a/frontend/src/app/bans/bans.component.ts
+++ b/frontend/src/app/bans/bans.component.ts
@@ -24,14 +24,36 @@ export class BansComponent implements OnInit {
 
   public userType: 'player' | 'staff' = "player";
   public punishmentType: 'all' | 'ban' | 'mute' | 'kick' | 'warn' = "all";
+  public page: number = 0;
   public names: string[] = [];
+  public finalSearchTerm: string = '';
   public searchTerm: string = '';
   public filteredNames: string[] = [];
 
   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)
+
+    window.addEventListener('popstate', (event) => {
+      if (event.state && event.state.searchTerm !== undefined) {
+        this.searchTerm = event.state.searchTerm;
+        this.finalSearchTerm = event.state.searchTerm;
+        this.page = event.state.page;
+        this.userType = event.state.userType;
+        this.punishmentType = event.state.punishmentType;
+      }
+    });
   }
 
   public filterNames() {
@@ -49,4 +71,17 @@ export class BansComponent implements OnInit {
     this.searchTerm = name;
     this.filteredNames = [];
   }
+
+  public search() {
+    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.finalSearchTerm = this.searchTerm;
+  }
 }
diff --git a/frontend/src/app/bans/history/history.component.ts b/frontend/src/app/bans/history/history.component.ts
index 171aece..a480cc3 100644
--- a/frontend/src/app/bans/history/history.component.ts
+++ b/frontend/src/app/bans/history/history.component.ts
@@ -1,6 +1,6 @@
 import {Component, Input, OnChanges, OnInit} from '@angular/core';
 import {BASE_PATH, HistoryService, PunishmentHistoryInner} from '../../../api';
-import {map, shareReplay} from 'rxjs';
+import {map, Observable, shareReplay} from 'rxjs';
 import {NgForOf, NgIf} from '@angular/common';
 import {CookieService} from 'ngx-cookie-service';
 
@@ -21,6 +21,10 @@ export class HistoryComponent implements OnInit, OnChanges {
 
   @Input() userType: 'player' | 'staff' = "player";
   @Input() punishmentType: 'all' | 'ban' | 'mute' | 'kick' | 'warn' = "all";
+  @Input() page: number = 0;
+  @Input() searchTerm: string = '';
+
+  private uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
 
   public history: PunishmentHistoryInner[] = []
 
@@ -36,16 +40,19 @@ export class HistoryComponent implements OnInit, OnChanges {
   }
 
   private reloadHistory(): void {
-    console.log('userType', this.userType);
-    console.log('punishmentType', this.punishmentType);
-    this.historyApi.getHistoryForAll(this.userType, this.punishmentType, 0).pipe(
+    let historyObservable: Observable<PunishmentHistoryInner[]>;
+    if (this.searchTerm.length === 0) {
+      historyObservable = this.historyApi.getHistoryForAll(this.userType, this.punishmentType, this.page);
+    } else {
+      if (this.uuidRegex.test(this.searchTerm)) {
+        historyObservable = this.historyApi.getHistoryForUuid(this.userType, this.punishmentType, this.searchTerm, this.page);
+      } else {
+        historyObservable = this.historyApi.getHistoryForUsers(this.userType, this.punishmentType, this.searchTerm, this.page)
+      }
+    }
+    historyObservable.pipe(
       map(history => {
         this.history = history;
-        console.log("HI");
-        console.log(history);
-        history.forEach(history => {
-          console.log(history);
-        });
       }),
       shareReplay(1)
     ).subscribe();
@@ -67,7 +74,7 @@ export class HistoryComponent implements OnInit, OnChanges {
     if (entry.expiryTime === 0) {
       return "Permanent " + entry.type.charAt(0).toUpperCase() + entry.type.slice(1);
     }
-    const date = new Date(entry.punishmentTime + entry.expiryTime);
+    const date = new Date(entry.expiryTime);
     return date.toLocaleString(navigator.language, {
       year: 'numeric',
       month: 'short',