diff --git a/packages/suite-base/src/panels/Plot/VerticalBars.tsx b/packages/suite-base/src/panels/Plot/VerticalBars.tsx
index 4218b17a4a..264a98721b 100644
--- a/packages/suite-base/src/panels/Plot/VerticalBars.tsx
+++ b/packages/suite-base/src/panels/Plot/VerticalBars.tsx
@@ -7,29 +7,13 @@
 
 import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
 import { useLatest } from "react-use";
-import { makeStyles } from "tss-react/mui";
 
 import { toSec } from "@lichtblick/rostime";
 import { useMessagePipelineSubscribe } from "@lichtblick/suite-base/components/MessagePipeline";
 import { useHoverValue } from "@lichtblick/suite-base/context/TimelineInteractionStateContext";
 
 import type { VerticalBarsProps, Scale } from "./types";
-
-const useStyles = makeStyles()(() => ({
-  verticalBar: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    width: 1,
-    marginLeft: -1,
-    display: "block",
-    pointerEvents: "none",
-  },
-  playbackBar: {
-    backgroundColor: "#aaa",
-  },
-}));
+import { useStyles } from "@lichtblick/suite-base/panels/Plot/verticalbars.style";
 
 /** Get the canvas pixel x location for the plot x value */
 function getPixelForXValue(
diff --git a/packages/suite-base/src/panels/Plot/verticalbars.style.ts b/packages/suite-base/src/panels/Plot/verticalbars.style.ts
new file mode 100644
index 0000000000..add39c298e
--- /dev/null
+++ b/packages/suite-base/src/panels/Plot/verticalbars.style.ts
@@ -0,0 +1,17 @@
+import { makeStyles } from "tss-react/mui";
+
+export const useStyles = makeStyles()(() => ({
+    verticalBar: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        width: 1,
+        marginLeft: -1,
+        display: "block",
+        pointerEvents: "none",
+    },
+    playbackBar: {
+        backgroundColor: "#aaa",
+    },
+}));