diff --git a/apps/client/src/features/operator/status-bar/StatusBar.module.scss b/apps/client/src/features/operator/status-bar/StatusBar.module.scss
index 4b6225169..30582f2f3 100644
--- a/apps/client/src/features/operator/status-bar/StatusBar.module.scss
+++ b/apps/client/src/features/operator/status-bar/StatusBar.module.scss
@@ -31,6 +31,10 @@
   grid-area: playback;
   font-size: 2rem;
   color: $gray-700;
+
+  &.active {
+    color: $ui-white;
+  }
 }
 
 .timeNow {
diff --git a/apps/client/src/features/operator/status-bar/StatusBar.tsx b/apps/client/src/features/operator/status-bar/StatusBar.tsx
index cb75b770f..cf76d886f 100644
--- a/apps/client/src/features/operator/status-bar/StatusBar.tsx
+++ b/apps/client/src/features/operator/status-bar/StatusBar.tsx
@@ -4,6 +4,7 @@ import { millisToString } from 'ontime-utils';
 
 import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
 import { useTimer } from '../../../common/hooks/useSocket';
+import { cx } from '../../../common/utils/styleUtils';
 import { formatTime } from '../../../common/utils/time';
 
 import styles from './StatusBar.module.scss';
@@ -58,7 +59,9 @@ export default function StatusBar(props: StatusBarProps) {
   const elapsedTime = millisToString(timer.elapsed);
 
   const PlaybackIconComponent = useMemo(() => {
-    return <PlaybackIcon state={playback} skipTooltip className={styles.playbackIcon} />;
+    const isPlaying = playback === Playback.Play || playback === Playback.Roll;
+    const classes = cx([styles.playbackIcon, isPlaying ? styles.active : null]);
+    return <PlaybackIcon state={playback} skipTooltip className={classes} />;
   }, [playback]);
 
   return (