diff --git a/static/src/app/statistic/war/war-list/war-item.component.css b/static/src/app/statistic/war/war-list/war-item.component.css
index d31d7ab..b863a03 100644
--- a/static/src/app/statistic/war/war-list/war-item.component.css
+++ b/static/src/app/statistic/war/war-list/war-item.component.css
@@ -3,6 +3,11 @@
   border-right: 1px solid #dadada;
 }
 
+.war-item:hover, .selected{
+  background: linear-gradient(80deg, white 0%, #e7e7e7 120%);
+  border-bottom: 1px solid #dadada;
+}
+
 .war-item-box {
   padding-top: 15px;
 }
diff --git a/static/src/app/statistic/war/war-list/war-list.component.css b/static/src/app/statistic/war/war-list/war-list.component.css
index 4e67fa8..ac840c5 100644
--- a/static/src/app/statistic/war/war-list/war-list.component.css
+++ b/static/src/app/statistic/war/war-list/war-list.component.css
@@ -9,6 +9,21 @@
   cursor: pointer;
 }
 
+.list-header:hover, .selected{
+  background: linear-gradient(80deg, white 0%, #e7e7e7 120%);
+}
+
+.list-header-battles {
+  border-bottom: 1px solid #dadada;
+  border-right: 1px solid #dadada;
+  border-left: 4px solid transparent;
+  padding: 25px;
+  font-size: 16px;
+  text-transform: uppercase;
+  color: #333333;
+  border-bottom: 1px solid #f1f1f1;
+}
+
 .mat-icon {
   color: #666666;
   vertical-align: middle;
diff --git a/static/src/app/statistic/war/war-list/war-list.component.html b/static/src/app/statistic/war/war-list/war-list.component.html
index 61486c2..bb0781e 100644
--- a/static/src/app/statistic/war/war-list/war-list.component.html
+++ b/static/src/app/statistic/war/war-list/war-list.component.html
@@ -29,7 +29,7 @@
   <span *ngIf="!collapsed">{{'stats.sidebar.highscore' | translate}}</span>
 </div>
 
-<div class="list-header" style="cursor: default; border-bottom: 1px solid #f1f1f1;">
+<div class="list-header-battles">
   <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.battles'] : ''"
             matTooltipPosition="right"
             svgIcon="battle"></mat-icon>