diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
index e0d07e6a..c84fa333 100644
--- a/frontend/.storybook/main.ts
+++ b/frontend/.storybook/main.ts
@@ -1,10 +1,10 @@
 // .storybook/main.ts
 
-import type { StorybookViteConfig } from "@storybook/builder-vite";
-import path from "path";
-const config: StorybookViteConfig = {
+import type { StorybookConfig } from "@storybook/react-vite";
+const config: StorybookConfig = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
+    "@storybook/addon-actions",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-styling",
diff --git a/frontend/src/components/Button.stories.tsx b/frontend/src/components/Button.stories.tsx
index 1d4d9188..37673337 100644
--- a/frontend/src/components/Button.stories.tsx
+++ b/frontend/src/components/Button.stories.tsx
@@ -1,5 +1,4 @@
-/* eslint-disable no-console */
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import Button from "./Button";
 
 const meta = {
@@ -13,7 +12,7 @@ const meta = {
 
 export default meta;
 
-export const Default = {
+export const Default: StoryObj<typeof Button> = {
   args: {
     children: (
       <>
@@ -21,8 +20,8 @@ export const Default = {
         <span>Update</span>
       </>
     ),
-    onClick: () => {
-      console.log("click");
-    },
+  },
+  argTypes: {
+    onClick: { action: "clicked" },
   },
 };
diff --git a/frontend/src/components/ClustersList.stories.tsx b/frontend/src/components/ClustersList.stories.tsx
index cae39ae8..053cf628 100644
--- a/frontend/src/components/ClustersList.stories.tsx
+++ b/frontend/src/components/ClustersList.stories.tsx
@@ -1,5 +1,4 @@
-/* eslint-disable no-console */
-import { StoryFn, Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import ClustersList from "./ClustersList";
 
 const meta = {
@@ -14,17 +13,14 @@ const meta = {
 export default meta;
 
 //👇 We create a “template” of how args map to rendering
-const Template: StoryFn<typeof ClustersList> = () => (
-  <ClustersList
-    filteredNamespaces={[""]}
-    installedReleases={[]}
-    onClusterChange={() => {
-      console.log("onClusterChange called");
-    }}
-    selectedCluster={""}
-  />
-);
+export const Default: StoryObj<typeof ClustersList> = {
+  args: {
+    filteredNamespaces: [""],
+    installedReleases: [],
+    selectedCluster: "",
+  },
 
-export const Default = {
-  render: Template,
+  argTypes: {
+    onClusterChange: { actions: "onClusterChange called" },
+  },
 };
diff --git a/frontend/src/components/SelectMenu.stories.tsx b/frontend/src/components/SelectMenu.stories.tsx
index eb8c19f1..6f6da532 100644
--- a/frontend/src/components/SelectMenu.stories.tsx
+++ b/frontend/src/components/SelectMenu.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 /**
  * @file SelectMenu.stories.tsx
  * @description This file contains the SelectMenu
@@ -7,7 +6,8 @@
  * The default story renders the component with the default props.
  */
 
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
 import SelectMenu, { SelectMenuItem } from "./SelectMenu";
 
 const meta = {
@@ -21,7 +21,7 @@ const meta = {
 
 export default meta;
 
-export const Default = {
+export const Default: StoryObj<typeof SelectMenu> = {
   args: {
     header: "Header",
     children: [
@@ -30,6 +30,6 @@ export const Default = {
       <SelectMenuItem label="Item 3" id={3} key="item3" />,
     ],
     selected: 1,
-    onSelect: (id: number) => console.log(id),
+    onSelect: (id: number) => action("onSelect")(id),
   },
 };
diff --git a/frontend/src/components/common/DropDown.stories.tsx b/frontend/src/components/common/DropDown.stories.tsx
index 3faf79f2..5951d5c2 100644
--- a/frontend/src/components/common/DropDown.stories.tsx
+++ b/frontend/src/components/common/DropDown.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
 import DropDown from "./DropDown";
 import { BsSlack, BsGithub } from "react-icons/bs";
 
@@ -14,8 +15,7 @@ const meta = {
 export default meta;
 
 const onClick = () => {
-  // eslint-disable-next-line no-console
-  console.log("drop down clicked");
+  action("onClick")("drop down clicked");
 };
 
 export const Default = {
diff --git a/frontend/src/components/modal/ErrorModal.stories.tsx b/frontend/src/components/modal/ErrorModal.stories.tsx
index 490c44ff..96c0c5e7 100644
--- a/frontend/src/components/modal/ErrorModal.stories.tsx
+++ b/frontend/src/components/modal/ErrorModal.stories.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable no-console */
+import { action } from "@storybook/addon-actions";
 import { Meta } from "@storybook/react";
 import ErrorModal from "./ErrorModal";
 
@@ -16,7 +16,7 @@ export default meta;
 export const Default = {
   args: {
     onClose: () => {
-      console.log("on Close clicked");
+      action("onClose")("on Close clicked");
     },
     titleText: "Failed to get list of charts",
     contentText:
diff --git a/frontend/src/components/modal/Modal.stories.tsx b/frontend/src/components/modal/Modal.stories.tsx
index 61b517f7..4fe84808 100644
--- a/frontend/src/components/modal/Modal.stories.tsx
+++ b/frontend/src/components/modal/Modal.stories.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable no-console */
+import { action } from "@storybook/addon-actions";
 import { StoryObj, StoryFn, Meta } from "@storybook/react";
 import Modal, { ModalAction, ModalButtonStyle } from "./Modal";
 
@@ -23,14 +23,14 @@ const confirmModalActions: ModalAction[] = [
     id: "1",
     text: "Cancel",
     callback: () => {
-      console.log("confirmModal: clicked Cancel");
+      action("cancelCallback")("confirmModal: clicked Cancel");
     },
   },
   {
     id: "2",
     text: "Confirm",
     callback: () => {
-      console.log("confirmModal: clicked Confirm");
+      action("confirmCallback")("confirmModal: clicked Confirm");
     },
     variant: ModalButtonStyle.info,
   },
@@ -53,14 +53,14 @@ const customModalActions: ModalAction[] = [
     className:
       "text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800",
     callback: () => {
-      console.log("confirmModal: clicked custom button 1");
+      action("clickCustomButton")("confirmModal: clicked custom button 1");
     },
   },
   {
     id: "2",
     text: "custom button 2",
     callback: () => {
-      console.log("confirmModal: clicked custom button 2");
+      action("clickCustomButton")("confirmModal: clicked custom button 2");
     },
     variant: ModalButtonStyle.error,
   },
@@ -76,7 +76,7 @@ export const CustomModal: StoryObj<typeof Modal> = {
         <button
           className="bg-cyan-500 p-2"
           type="button"
-          onClick={() => console.log("just a button")}
+          onClick={() => action("onClick")("just a button")}
         >
           Just a button
         </button>
diff --git a/frontend/src/components/modal/Modal.tsx b/frontend/src/components/modal/Modal.tsx
index 6bfcd46b..847e0736 100644
--- a/frontend/src/components/modal/Modal.tsx
+++ b/frontend/src/components/modal/Modal.tsx
@@ -150,7 +150,6 @@ const Modal = ({
         </div>
       )}
     </>,
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     document.getElementById("portal")!
   );
 };