diff --git a/ui/v2.5/src/components/ScenePlayer/styles.scss b/ui/v2.5/src/components/ScenePlayer/styles.scss
index eeb352e8f..b80e05e81 100644
--- a/ui/v2.5/src/components/ScenePlayer/styles.scss
+++ b/ui/v2.5/src/components/ScenePlayer/styles.scss
@@ -105,26 +105,46 @@ $sceneTabWidth: 450px;
 
     &.vjs-icon-play-circle::before {
       align-items: center;
-      background-color: rgba(80, 80, 80, 0.9);
+      background-color: rgba(255, 255, 255, 0.9);
       border-radius: 50%;
-      color: #fff;
+      color: rgba(80, 80, 80, 0.9);
       content: "\f101";
       font-size: 1em;
       line-height: 1;
+      margin-left: 1rem;
       padding: 0.3em;
+      position: relative;
+      z-index: 2;
     }
 
     &.vjs-icon-cancel::before {
       align-items: center;
-      background-color: rgba(255, 255, 255, 0.9);
+      background-color: rgba(80, 80, 80, 0.9);
       border-radius: 50%;
-      color: rgba(80, 80, 80, 0.9);
+      color: #fff;
       content: "\f103"; 
       font-size: 1em;
       line-height: 1;
+      margin-right: 1rem;
       padding: 0.3em;
+      position: relative;
+      z-index: 2;
     }
 
+    &.vjs-icon-play-circle::after,
+    &.vjs-icon-cancel::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 1rem;
+      height: 2.5rem;
+      background-color: rgba(80, 80, 80, 0.9);
+      transform: translate(-50%, -50%) rotate(90deg);
+      opacity: 0.7;
+      z-index: 1;
+      border-radius: 8px;
+    }
 
     &:hover {
       text-shadow: 0 0 1em rgba(255, 255, 255, 0.75);