diff --git a/src/renderer/components/update-button/__tests__/__snapshots__/update-button.test.tsx.snap b/src/renderer/components/update-button/__tests__/__snapshots__/update-button.test.tsx.snap
new file mode 100644
index 0000000000..8984ddd30e
--- /dev/null
+++ b/src/renderer/components/update-button/__tests__/__snapshots__/update-button.test.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` should render if warning level prop passed 1`] = `
+
+`;
diff --git a/src/renderer/components/update-button/__tests__/update-button.test.tsx b/src/renderer/components/update-button/__tests__/update-button.test.tsx
new file mode 100644
index 0000000000..b9a5c56bf6
--- /dev/null
+++ b/src/renderer/components/update-button/__tests__/update-button.test.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { render } from "@testing-library/react";
+import React from "react";
+import { UpdateButton } from "..";
+import "@testing-library/jest-dom/extend-expect";
+
+const update = jest.fn();
+
+describe("", () => {
+ it("should not render if no warning level prop passed", () => {
+ const { queryByTestId } = render();
+
+ expect(queryByTestId("update-button")).not.toBeInTheDocument();
+ });
+
+ it("should render if warning level prop passed", () => {
+ const { getByTestId } = render();
+
+ expect(getByTestId("update-button")).toMatchSnapshot();
+ });
+
+ it("should open menu when clicked", () => {
+ const { getByTestId } = render();
+
+ const button = getByTestId("update-button");
+
+ button.click();
+
+ expect(getByTestId("update-lens-menu-item")).toBeInTheDocument();
+ });
+
+ it("should call update function when menu item clicked", () => {
+ const { getByTestId } = render();
+
+ const button = getByTestId("update-button");
+
+ button.click();
+
+ const menuItem = getByTestId("update-lens-menu-item");
+
+ menuItem.click();
+
+ expect(update).toHaveBeenCalled();
+ });
+
+ it("should have class name with medium warning level", () => {
+ const { getByTestId } = render();
+
+ const button = getByTestId("update-button");
+
+ expect(button.className.toLowerCase().includes("medium")).toBeTruthy();
+ });
+
+ it("should have class name with high warning level", () => {
+ const { getByTestId } = render();
+
+ const button = getByTestId("update-button");
+
+ expect(button.className.toLowerCase().includes("high")).toBeTruthy();
+ });
+});
diff --git a/src/renderer/components/update-button/index.ts b/src/renderer/components/update-button/index.ts
new file mode 100644
index 0000000000..006a7f0d81
--- /dev/null
+++ b/src/renderer/components/update-button/index.ts
@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+export * from "./update-button";
diff --git a/src/renderer/components/update-button/styles.module.scss b/src/renderer/components/update-button/styles.module.scss
new file mode 100644
index 0000000000..70602aa0e2
--- /dev/null
+++ b/src/renderer/components/update-button/styles.module.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.updateButton {}
+
+.warningHigh {}
+
+.warningMedium {}
\ No newline at end of file
diff --git a/src/renderer/components/update-button/update-button.tsx b/src/renderer/components/update-button/update-button.tsx
new file mode 100644
index 0000000000..b2042b2576
--- /dev/null
+++ b/src/renderer/components/update-button/update-button.tsx
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import styles from "./styles.module.scss";
+
+import React, { useState } from "react";
+import { Icon } from "../icon";
+import { Menu, MenuItem } from "../menu";
+import uniqueId from "lodash/uniqueId";
+import { noop } from "lodash";
+import { cssNames } from "../../utils";
+
+interface UpdateButtonProps {
+ warningLevel?: "light" | "medium" | "high";
+ update: () => void;
+}
+
+export function UpdateButton({ warningLevel, update }: UpdateButtonProps) {
+ const id = uniqueId("update_button_");
+ const [opened, setOpened] = useState(false);
+
+ const onKeyDown = (evt: React.KeyboardEvent) => {
+ if (evt.code == "Space" || evt.code == "Enter") {
+ toggle();
+ }
+ };
+
+ const toggle = () => {
+ setOpened(!opened);
+ };
+
+ if (!warningLevel) {
+ return null;
+ }
+
+ return (
+ <>
+
+
+ >
+ );
+}