diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx
index 6136053..e0a566d 100644
--- a/src/components/ActionIcon.tsx
+++ b/src/components/ActionIcon.tsx
@@ -3,13 +3,10 @@ import { useTranslation } from "next-i18next";
 import { Box, Typography, Tooltip, Button } from "@mui/material";
 import { useRouter } from "next/router";
 import Image from "next/image";
-import AssessmentIcon from "@mui/icons-material/Assessment";
-import deleteIcon from "../../public/images/deleteIcon.svg";
 import editIcon from "../../public/images/editIcon.svg";
 import cohortIcon from "../../public/images/apartment.svg";
 import addIcon from "../../public/images/addIcon.svg";
-import TimelineIcon from "@mui/icons-material/Timeline";
-import QueryStatsIcon from "@mui/icons-material/QueryStats";
+import MetabaseReportsMenu from "./MetabaseReportMenu";
 interface ActionCellProps {
   onEdit: (rowData: any) => void;
   onDelete: (rowData: any) => void;
@@ -116,7 +113,7 @@ const ActionIcon: React.FC<ActionCellProps> = ({
   };
 
   const renderEditDeleteButtons = () => {
-    if (!buttonStates.editDelete.visible) return null;
+    if (!buttonStates.learnerReports.visible) return null;
 
     return (
       <>
@@ -133,99 +130,9 @@ const ActionIcon: React.FC<ActionCellProps> = ({
             <Image src={editIcon} alt="" />
           </Box>
         </Tooltip>
-
-        <Tooltip title={t("COMMON.DELETE")}>
-          <Box
-            onClick={() => buttonStates.editDelete.enabled && onDelete(rowData)}
-            sx={{
-              ...commonButtonStyles(buttonStates.editDelete.enabled),
-              backgroundColor: buttonStates.editDelete.enabled
-                ? "#EAF2FF"
-                : "#d3d3d3",
-            }}
-          >
-            <Image src={deleteIcon} alt="" />
-          </Box>
-        </Tooltip>
       </>
     );
   };
-  const getUserRowData = (dashboardType: string) => {
-    return rowData?.tenantId && !rowData?.userId
-      ? { tenantId: rowData.tenantId, dashboardType }
-      : rowData?.userId
-        ? { userId: rowData.userId, dashboardType }
-        : {};
-  };
-  const renderReportsButton = () => {
-    if (!buttonStates.reports.visible) return null;
-    const userRowData = getUserRowData("default");
-
-    return (
-      <Tooltip title={t("COMMON.METABASE_REPORTS")}>
-        <Box
-          onClick={() =>
-            router.push({
-              pathname: "/dashboard",
-              query: { ...userRowData, from: router.pathname },
-            })
-          }
-          sx={{
-            ...commonButtonStyles(true),
-            backgroundColor: "#EAF2FF",
-          }}
-        >
-          <AssessmentIcon />
-        </Box>
-      </Tooltip>
-    );
-  };
-  const renderResponseEventReportsButton = () => {
-    if (!buttonStates.learnerReports.visible) return null;
-    const userRowData = getUserRowData("responseEvent");
-
-    return (
-      <Tooltip title={t("COMMON.USER_RESPONSE_EVENT")}>
-        <Box
-          onClick={() =>
-            router.push({
-              pathname: "/dashboard",
-              query: { ...userRowData, from: router.pathname },
-            })
-          }
-          sx={{
-            ...commonButtonStyles(true),
-            backgroundColor: "#EAF2FF",
-          }}
-        >
-          <QueryStatsIcon />
-        </Box>
-      </Tooltip>
-    );
-  };
-  const renderUserJourneyReportsButton = () => {
-    if (!buttonStates.learnerReports.visible) return null;
-    const userRowData = getUserRowData("userJourney");
-
-    return (
-      <Tooltip title={t("COMMON.USER_JOURNEY_REPORT")}>
-        <Box
-          onClick={() =>
-            router.push({
-              pathname: "/dashboard",
-              query: { ...userRowData, from: router.pathname },
-            })
-          }
-          sx={{
-            ...commonButtonStyles(true),
-            backgroundColor: "#EAF2FF",
-          }}
-        >
-          <TimelineIcon />
-        </Box>
-      </Tooltip>
-    );
-  };
 
   const renderReassignButton = () => {
     if (!buttonStates.reassign.visible) return null;
@@ -260,10 +167,15 @@ const ActionIcon: React.FC<ActionCellProps> = ({
     >
       {renderAddButton()}
       {renderEditDeleteButtons()}
-      {renderReportsButton()}
+
       {renderReassignButton()}
-      {renderUserJourneyReportsButton()}
-      {renderResponseEventReportsButton()}
+
+      <MetabaseReportsMenu
+        buttonStates={buttonStates}
+        onEdit={onEdit}
+        onDelete={onDelete}
+        rowData={rowData}
+      />
     </Box>
   );
 };
diff --git a/src/components/MetabaseReportMenu.tsx b/src/components/MetabaseReportMenu.tsx
new file mode 100644
index 0000000..ecff17b
--- /dev/null
+++ b/src/components/MetabaseReportMenu.tsx
@@ -0,0 +1,200 @@
+import React, { useState } from "react";
+import { Menu, MenuItem, IconButton, Tooltip, Divider } from "@mui/material";
+import AssessmentIcon from "@mui/icons-material/Assessment";
+import QueryStatsIcon from "@mui/icons-material/QueryStats";
+import TimelineIcon from "@mui/icons-material/Timeline";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+
+interface ButtonState {
+  visible: boolean | undefined;
+  enabled: boolean | undefined;
+}
+interface ButtonStates {
+  add: ButtonState;
+  editDelete: ButtonState;
+  reassign: ButtonState;
+  reports: ButtonState;
+  learnerReports: ButtonState;
+}
+interface MetabaseDashboardProps {
+  onEdit: (rowData: any) => void;
+  onDelete: (rowData: any) => void;
+  rowData: any;
+  buttonStates: ButtonStates;
+}
+// Interface for individual button state
+
+const MetabaseReportsMenu: React.FC<MetabaseDashboardProps> = ({
+  buttonStates,
+  onEdit,
+  onDelete,
+  rowData,
+}) => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: any) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const getUserRowData = (dashboardType: string) => {
+    return rowData?.tenantId && !rowData?.userId
+      ? { tenantId: rowData.tenantId, dashboardType }
+      : rowData?.userId
+        ? { userId: rowData.userId, dashboardType }
+        : {};
+  };
+  const handleNavigation = (type: string) => {
+    const userRowData: object = getUserRowData(type);
+    router.push({
+      pathname: "/dashboard",
+      query: { ...userRowData, from: router.pathname },
+    });
+    handleClose();
+  };
+
+  const handleEdit = () => {
+    if (buttonStates.editDelete.enabled) {
+      onEdit(rowData);
+      handleClose();
+    }
+  };
+
+  const handleDelete = () => {
+    if (buttonStates.editDelete.enabled) {
+      onDelete(rowData);
+      handleClose();
+    }
+  };
+
+  const reportMenuItems = [
+    {
+      visible: buttonStates.reports.visible,
+      type: "default",
+      title: t("COMMON.METABASE_REPORTS"),
+      icon: <AssessmentIcon />,
+      onClick: () => handleNavigation("default"),
+    },
+    {
+      visible: buttonStates.learnerReports.visible,
+      type: "responseEvent",
+      title: t("COMMON.USER_RESPONSE_EVENT"),
+      icon: <QueryStatsIcon />,
+      onClick: () => handleNavigation("responseEvent"),
+    },
+    {
+      visible: buttonStates.learnerReports.visible,
+      type: "userJourney",
+      title: t("COMMON.USER_JOURNEY_REPORT"),
+      icon: <TimelineIcon />,
+      onClick: () => handleNavigation("userJourney"),
+    },
+  ];
+
+  const actionMenuItems = [
+    {
+      visible:
+        buttonStates.editDelete.visible && !buttonStates.learnerReports.visible,
+      title: t("COMMON.EDIT"),
+      icon: <EditOutlinedIcon />,
+      onClick: handleEdit,
+      disabled: !buttonStates.editDelete.enabled,
+    },
+    {
+      visible: buttonStates.editDelete.visible,
+      title: t("COMMON.DELETE"),
+      icon: <DeleteOutlineIcon sx={{ color: "red" }} />,
+      onClick: handleDelete,
+      disabled: !buttonStates.editDelete.enabled,
+    },
+  ];
+
+  // Check if any menu items are visible
+  const hasVisibleItems = [...reportMenuItems, ...actionMenuItems].some(
+    (item) => item.visible
+  );
+
+  if (!hasVisibleItems) return null;
+
+  return (
+    <>
+      <Tooltip title={t("COMMON.ACTIONS")}>
+        <IconButton
+          onClick={handleClick}
+          sx={{
+            backgroundColor: "#EAF2FF",
+            "&:hover": {
+              backgroundColor: "#d5e3f7",
+            },
+          }}
+        >
+          <MoreVertIcon />
+        </IconButton>
+      </Tooltip>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          "aria-labelledby": "actions-button",
+        }}
+      >
+        {reportMenuItems.map(
+          (item, index) =>
+            item.visible && (
+              <MenuItem
+                key={`report-${index}`}
+                onClick={item.onClick}
+                sx={{
+                  gap: 1,
+                  minWidth: 200,
+                }}
+              >
+                {item.icon}
+                {item.title}
+              </MenuItem>
+            )
+        )}
+
+        {/* Add divider if both report and action items are visible */}
+        {reportMenuItems.some((item) => item.visible) &&
+          actionMenuItems.some((item) => item.visible)}
+
+        {actionMenuItems.map(
+          (item, index) =>
+            item.visible && (
+              <MenuItem
+                key={`action-${index}`}
+                onClick={item.onClick}
+                disabled={item.disabled}
+                sx={{
+                  gap: 1,
+                  minWidth: 200,
+                  opacity: item.disabled ? 0.5 : 1,
+                  "& .MuiImage-root": {
+                    width: 24,
+                    height: 24,
+                  },
+                }}
+              >
+                {item.icon}
+                {item.title}
+              </MenuItem>
+            )
+        )}
+      </Menu>
+    </>
+  );
+};
+
+export default MetabaseReportsMenu;