diff --git a/packages/webamp/js/components/MainWindow/index.tsx b/packages/webamp/js/components/MainWindow/index.tsx
index b0ad7fe5a..474a5d8bf 100644
--- a/packages/webamp/js/components/MainWindow/index.tsx
+++ b/packages/webamp/js/components/MainWindow/index.tsx
@@ -19,6 +19,7 @@ import EqToggleButton from "./EqToggleButton";
 import PlaylistToggleButton from "./PlaylistToggleButton";
 import Kbps from "./Kbps";
 import Khz from "./Khz";
+import WorkIndicator from "./work-indicator"
 import Marquee from "./Marquee";
 import MonoStereo from "./MonoStereo";
 import Position from "./Position";
@@ -99,11 +100,7 @@ const MainWindow = React.memo(({ analyser, filePickers }: Props) => {
         </div>
         <div className="webamp-status">
           <ClutterBar />
-          {!working && <div id="play-pause" />}
-          <div
-            id="work-indicator"
-            className={classnames({ selected: working })}
-          />
+          <WorkIndicator />
           <Time />
         </div>
         <Vis analyser={analyser} />
diff --git a/packages/webamp/js/components/MainWindow/work-indicator.tsx b/packages/webamp/js/components/MainWindow/work-indicator.tsx
new file mode 100644
index 000000000..edbf6fbca
--- /dev/null
+++ b/packages/webamp/js/components/MainWindow/work-indicator.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import classnames from "classnames";
+import { useTypedSelector } from "../../hooks";
+import * as Selectors from "../../selectors";
+import { MEDIA_STATUS } from "../../constants";
+
+export default function WorkIndicator() {
+    const kbps = useTypedSelector(Selectors.getKbps);
+    const khz = useTypedSelector(Selectors.getKhz);
+    const mediaStatus = useTypedSelector(Selectors.getMediaStatus);
+
+    const working =
+    mediaStatus === MEDIA_STATUS.PLAYING &&
+    !(kbps != null &&
+    khz != null &&
+    kbps.trim() !== "0");
+
+    return (
+        <div
+        id="work-indicator"
+        className={classnames({ selected: working })}
+        />
+    );
+}