diff --git a/frontend/src/app/bans/bans.component.html b/frontend/src/app/bans/bans.component.html
index 9aaed9d..df81981 100644
--- a/frontend/src/app/bans/bans.component.html
+++ b/frontend/src/app/bans/bans.component.html
@@ -11,20 +11,20 @@
       <div class="container">
         <div class="columnSection">
           <div class="historyButtonContainer">
-            <div [id]="getCurrentButtonId('all')" class="button-outer">
-              <span class="button-inner" (click)="changeHistoryPunishment('all')"
+            <div [id]="getCurrentButtonId('all')" class="button-outer" (click)="changeHistoryPunishment('all')">
+              <span class="button-inner"
                     [ngClass]="active">All</span>
             </div>
-            <div [id]="getCurrentButtonId('ban')" class="button-outer">
-              <span class="button-inner" (click)="changeHistoryPunishment('ban')"
+            <div [id]="getCurrentButtonId('ban')" class="button-outer" (click)="changeHistoryPunishment('ban')">
+              <span class="button-inner"
                     [ngClass]="active">Bans</span>
             </div>
-            <div [id]="getCurrentButtonId('mute')" class="button-outer">
-              <span class="button-inner" (click)="changeHistoryPunishment('mute')"
+            <div [id]="getCurrentButtonId('mute')" class="button-outer" (click)="changeHistoryPunishment('mute')">
+              <span class="button-inner"
                     [ngClass]="active">Mutes</span>
             </div>
-            <div [id]="getCurrentButtonId('warn')" class="button-outer">
-              <span class="button-inner" (click)="changeHistoryPunishment('warn')"
+            <div [id]="getCurrentButtonId('warn')" class="button-outer" (click)="changeHistoryPunishment('warn')">
+              <span class="button-inner"
                     [ngClass]="active">Warnings</span>
             </div>
           </div>
@@ -50,7 +50,7 @@
           <app-history [userType]="userType" [punishmentType]="punishmentType"
                        [page]="page" [searchTerm]="finalSearchTerm"></app-history>
         </div>
-        <div>
+        <div class="changePageButtons">
           <button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)"
                   (click)="setPage(0)">
             First page
diff --git a/frontend/src/app/bans/history/history.component.scss b/frontend/src/app/bans/history/history.component.scss
index 2d8ff44..bf6539e 100644
--- a/frontend/src/app/bans/history/history.component.scss
+++ b/frontend/src/app/bans/history/history.component.scss
@@ -1,6 +1,7 @@
 table {
   width: 100%;
   table-layout: fixed;
+  border-collapse: collapse;
 }
 
 thead {
@@ -23,6 +24,35 @@ th {
 
 th, td {
   text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 5px 0 8px 0;
+  box-sizing: border-box;
+}
+
+th.historyType, td.historyType {
+  width: 100px !important;
+  min-width: 100px;
+  max-width: 100px;
+  white-space: nowrap;
+}
+
+th.historyPlayer, td.historyPlayer {
+  width: 180px !important;
+  min-width: 180px;
+  max-width: 180px;
+}
+
+th.historyReason, td.historyReason {
+  width: 540px !important;
+  min-width: 540px;
+  max-width: 540px;
+}
+
+th.historyDate, td.historyDate {
+  width: 150px !important;
+  min-width: 150px;
+  max-width: 150px;
 }
 
 table tr td {
@@ -30,10 +60,12 @@ table tr td {
 }
 
 .historyType {
-  width: 100px;
+  max-width: 100%;
+  width: 80px;
 }
 
 .historyPlayer {
+  max-width: 100%;
   width: 200px;
   text-overflow: clip;
 }
@@ -59,9 +91,12 @@ img {
 }
 
 .historyReason {
-  width: 920px;
+  width: 650px;
 }
 
 .historyDate {
   width: 170px;
 }
+
+.changePageButtons {
+}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 4da34fa..9be7e77 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -22,6 +22,7 @@
   --navlink-color: #4B4B4B;
   --link-color: #1F9BDE;
   --history-link-color: #A3A3A3;
+  --history-table-head: #DADADA;
   --hamburger: #232323;
   --dropdown-color: #DFDFDF;
   --footer-color: #202020;
@@ -39,6 +40,7 @@
   --navlink-color: #FFFFFF;
   --link-color: #20729E;
   --history-link-color: #4A4A4A;
+  --history-table-head: #5C5C5C;
   --hamburger: #CDCDCD;
   --dropdown-color: #303233;
   --footer-color: #242526;