diff --git a/frontend/src/app/bans/bans.component.html b/frontend/src/app/bans/bans.component.html
index 7c3d4da..f07a54f 100644
--- a/frontend/src/app/bans/bans.component.html
+++ b/frontend/src/app/bans/bans.component.html
@@ -62,6 +62,7 @@
                   (click)="previousPage()" class="historyPageButton">
             Previous page
           </button>
+          <span class="pageNumber">{{ this.page }} / {{ getMaxPage() }}</span>
           <button [ngClass]="{'active': buttonActive(getMaxPage()), 'disabled': !buttonActive(getMaxPage())}"
                   [disabled]="!buttonActive(getMaxPage())"
                   (click)="nextPage()" class="historyPageButton">
diff --git a/frontend/src/app/bans/bans.component.scss b/frontend/src/app/bans/bans.component.scss
index 597352b..09c82ed 100644
--- a/frontend/src/app/bans/bans.component.scss
+++ b/frontend/src/app/bans/bans.component.scss
@@ -89,7 +89,8 @@ main .container {
   border-radius: .25rem;
   box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
   box-sizing: border-box;
-  color: rgba(0, 0, 0, 0.85);
+  background-color: var(--history-page-button-background);
+  color: var(--font-color);
   cursor: pointer;
   display: inline-flex;
   font-family: 'opensans', sans-serif;
@@ -114,7 +115,7 @@ main .container {
 .historyPageButton.active:focus {
   border-color: rgba(0, 0, 0, 0.15);
   box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--font-color-hover);
 }
 
 .historyPageButton.active:hover {
@@ -122,18 +123,17 @@ main .container {
 }
 
 .historyPageButton.active:active {
-  background-color: #F0F0F1;
   border-color: rgba(0, 0, 0, 0.15);
   box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--font-color-hover);
   transform: translateY(0);
 }
 
 .historyPageButton.disabled {
   opacity: 0.5;
   cursor: not-allowed;
-  background-color: #f0f0f0;
-  color: #999;
+  background-color: var(--color-quaternary);
+  color: var(--font-color);
   box-shadow: none;
   pointer-events: none;
 }
@@ -147,3 +147,8 @@ main .container {
   color: #999;
 }
 
+.pageNumber {
+  font-family: 'open-sans', sans-serif;
+  margin: 0 25px 0 25px;
+}
+
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 42aac4f..9ebd15e 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -23,6 +23,7 @@
   --link-color: #1F9BDE;
   --history-link-color: #A3A3A3;
   --history-table-head-color: #DADADA;
+  --history-page-button-background: #DEDEDE;
   --hamburger: #232323;
   --dropdown-color: #DFDFDF;
   --footer-color: #202020;
@@ -41,6 +42,7 @@
   --link-color: #20729E;
   --history-link-color: #4A4A4A;
   --history-table-head-color: #4A4A4A;
+  --history-page-button-background: #4A4A4A;
   --hamburger: #CDCDCD;
   --dropdown-color: #303233;
   --footer-color: #242526;