diff --git a/projects/gameboard-ui/src/app/reports/components/sort-header/sort-header.component.ts b/projects/gameboard-ui/src/app/reports/components/sort-header/sort-header.component.ts
index e353169f..00e36ba3 100644
--- a/projects/gameboard-ui/src/app/reports/components/sort-header/sort-header.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/sort-header/sort-header.component.ts
@@ -1,9 +1,9 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { SortDirection } from '@/core/models/sort-direction';
 import { fa } from "@/services/font-awesome.service";
 import { RouterService } from '@/services/router.service';
 import { UnsubscriberService } from '@/services/unsubscriber.service';
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'app-sort-header',
@@ -11,7 +11,7 @@ import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/cor
     <div class="content-container">
       <ng-content></ng-content>
     </div>
-    <fa-icon *ngIf="isActive" class="d-block ml-2" size="sm" [icon]="currentSortDirection == 'asc' ? fa.caretUp : fa.caretDown"></fa-icon>
+    <fa-icon class="d-block ml-2" [class.text-muted]="!isActive" size="xs" [icon]="!isActive || currentSortDirection == 'asc' ? fa.caretUp : fa.caretDown"></fa-icon>
   </div>`,
   styleUrls: ['./sort-header.component.scss']
 })
diff --git a/projects/gameboard-ui/src/styles.scss b/projects/gameboard-ui/src/styles.scss
index 2cf6a2bc..6dcab487 100644
--- a/projects/gameboard-ui/src/styles.scss
+++ b/projects/gameboard-ui/src/styles.scss
@@ -107,7 +107,6 @@ app-root {
 }
 
 /* APP UTILITY CLASSES */
-
 .font-fixed-width {
   font-family: monospace;
 }
@@ -318,6 +317,11 @@ table.gameboard-table {
   background-color: theme-color("success");
 }
 
+.btn.focus,
+.btn:focus {
+  box-shadow: none !important;
+}
+
 .form-group {
   padding: 1.5rem;
   margin-bottom: 0.5rem;