diff --git a/src/renderer/components/VerticalBar/vertical-bar.test.tsx b/src/renderer/components/VerticalBar/vertical-bar.test.tsx
new file mode 100644
index 0000000000..4e6ac47eaf
--- /dev/null
+++ b/src/renderer/components/VerticalBar/vertical-bar.test.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { VerticalBar } from ".";
+
+describe("<VerticalBar/>", () => {
+  it("renders <VerticalBar /> w/o errors", async () => {
+
+    const { container } = render(<VerticalBar color="red" value={50} />);
+
+    expect(container.querySelector("[data-testid='vertical-bar']")).toBeInTheDocument();
+  });
+
+  it("bar uses provided color", () => {
+    const { container } = render(<VerticalBar color="red" value={50} />);
+
+    expect(container.querySelector("[data-testid='vertical-bar'] div")).toHaveStyle("background-color: red");
+  });
+
+  it("bar uses provided value", () => {
+    const { container } = render(<VerticalBar color="red" value={50} />);
+
+    expect(container.querySelector("[data-testid='vertical-bar'] div")).toHaveStyle("height: 50%");
+  });
+});
diff --git a/src/renderer/components/VerticalBar/vertical-bar.tsx b/src/renderer/components/VerticalBar/vertical-bar.tsx
index 41a1878793..ef9ebd78ee 100644
--- a/src/renderer/components/VerticalBar/vertical-bar.tsx
+++ b/src/renderer/components/VerticalBar/vertical-bar.tsx
@@ -15,7 +15,7 @@ interface BarProps extends HTMLAttributes<HTMLDivElement> {
 
 export function VerticalBar({ color, className, value }: BarProps) {
   return (
-    <div className={styles.verticalBar}>
+    <div className={styles.verticalBar} data-testid="vertical-bar">
       <div className={cssNames(styles.value, className)} style={{ backgroundColor: color, height: `${value}%` }}></div>
     </div>
   );