diff --git a/src/app/pages/dashboard/rooms/player/player.component.html b/src/app/pages/dashboard/rooms/player/player.component.html
index 06f6dcba..d503e2d1 100644
--- a/src/app/pages/dashboard/rooms/player/player.component.html
+++ b/src/app/pages/dashboard/rooms/player/player.component.html
@@ -22,23 +22,38 @@
     </div>
 
     <div class="controls">
-      <i class="nb-shuffle shuffle" [class.active]="shuffle" (click)="toggleShuffle()"></i>
-      <i class="nb-skip-backward prev" (click)="prev()"></i>
-      <i class="play" [class.nb-play]="player.paused" [class.nb-pause]="!player.paused" (click)="playPause()"></i>
-      <i class="nb-skip-forward next" (click)="next()"></i>
-      <i class="nb-loop loop" [class.active]="player.loop" (click)="toggleLoop()"></i>
+      <button class="control-button" nbButton ghost size="tiny" (click)="toggleShuffle()" [class.on]="shuffle">
+        <nb-icon icon="shuffle-2-outline" pack="eva"></nb-icon>
+      </button>
+      <button class="control-button" nbButton ghost size="medium" (click)="prev()">
+        <nb-icon class="skip" icon="skip-back-outline" pack="eva"></nb-icon>
+      </button>
+      <button class="control-button" nbButton ghost size="medium" (click)="playPause()">
+        <nb-icon class="play" [icon]="player.paused ? 'play-circle-outline' : 'pause-circle-outline'" pack="eva">
+        </nb-icon>
+      </button>
+      <button class="control-button" nbButton ghost size="medium" (click)="next()">
+        <nb-icon class="skip" icon="skip-forward-outline" pack="eva"></nb-icon>
+      </button>
+      <button class="control-button" nbButton ghost size="tiny" (click)="toggleLoop()" [class.on]="player.loop">
+        <nb-icon icon="repeat-outline" pack="eva"></nb-icon>
+      </button>
     </div>
   </nb-card-body>
 
   <nb-card-footer class="footer">
     <div class="volume">
-      <i class="nb-volume-mute"></i>
+      <button nbButton ghost size="small" (click)="setVolume(0)">
+        <nb-icon class="volume-icon" icon="volume-down-outline" pack="eva"></nb-icon>
+      </button>
       <div class="progress-wrap">
         <input type="range" class="progress" [value]="getVolume()" max="100"
                (input)="setVolume(volume.value)" #volume>
         <div class="progress-foreground" [style.width.%]="getVolume()"></div>
       </div>
-      <i class="nb-volume-high"></i>
+      <button nbButton ghost size="small" (click)="setVolume(100)">
+        <nb-icon class="volume-icon" icon="volume-up-outline" pack="eva"></nb-icon>
+      </button>
     </div>
   </nb-card-footer>
 </nb-card>
diff --git a/src/app/pages/dashboard/rooms/player/player.component.scss b/src/app/pages/dashboard/rooms/player/player.component.scss
index 2dd10584..fd4b7846 100644
--- a/src/app/pages/dashboard/rooms/player/player.component.scss
+++ b/src/app/pages/dashboard/rooms/player/player.component.scss
@@ -107,37 +107,21 @@
     justify-content: space-between;
     align-items: center;
     @include nb-rtl(flex-direction, row-reverse);
-    padding: 0.25rem 2rem 1rem;
+    padding: 1rem;
     max-width: 400px;
     width: 100%;
     margin: 0 auto;
+  }
 
-    i {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
+  .control-button {
+    color: nb-theme(text-hint-color);
+
+    &.on {
+      color: nb-theme(color-primary-default);
     }
 
-    .shuffle, .loop {
-      font-size: 1.5rem;
-      color: nb-theme(text-hint-color);
-
-      &.active {
-        color: nb-theme(color-primary-default);
-      }
-    }
-
-    .prev, .next {
-      width: 3.5rem;
-      height: 3.5rem;
-      border: 2px solid nb-theme(divider-color);
-      border-radius: 50%;
-      font-size: 1.75rem;
-    }
-
-    .play {
-      font-size: 2rem;
+    nb-icon {
+      font-size: 1.5em;
     }
   }
 
@@ -149,12 +133,6 @@
     position: relative;
     max-width: 400px;
 
-    i {
-      font-size: 1.5rem;
-      margin: 0.25rem;
-      color: nb-theme(text-hint-color);
-    }
-
     .progress-wrap {
       height: 2.25rem;
       margin: 0;
@@ -185,6 +163,11 @@
     }
   }
 
+  .volume-icon {
+    font-size: 1em;
+    color: nb-theme(text-hint-color);
+  }
+
   &.collapsed {
     $player-height: 4.5rem;
 
@@ -279,4 +262,14 @@
       }
     }
   }
+
+  @include media-breakpoint-between(lg, lg) {
+    .controls {
+      padding: 0.5rem;
+    }
+
+    .control-button.size-medium {
+      padding: nb-theme(button-ghost-small-padding);
+    }
+  }
 }