diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
index 6c8398724d..1de3e5f9dc 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
@@ -32,6 +32,8 @@ import useStore from '@/AppBuilder/_stores/store';
 import { useEventActions, useEvents } from '@/AppBuilder/_stores/slices/eventsSlice';
 import ToggleGroup from '@/ToolJetUI/SwitchGroup/ToggleGroup';
 import ToggleGroupItem from '@/ToolJetUI/SwitchGroup/ToggleGroupItem';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
+import { components as selectComponents } from 'react-select';
 
 export const EventManager = ({
   sourceId,
@@ -101,8 +103,23 @@ export const EventManager = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(currentEvents)]);
 
-  let actionOptions = ActionTypes.map((action) => {
-    return { name: action.name, value: action.id };
+  let groupedOptions = ActionTypes.reduce((acc, action) => {
+    const groupName = action.group;
+
+    if (!acc[groupName]) {
+      acc[groupName] = [];
+    }
+
+    acc[groupName].push({
+      label: action.name,
+      value: action.id,
+    });
+
+    return acc;
+  }, {});
+
+  let actionOptions = Object.keys(groupedOptions).map((groupName) => {
+    return { label: groupName, options: groupedOptions[groupName] };
   });
 
   let checkIfClicksAreInsideOf = document.querySelector('.cm-completionListIncompleteBottom');
@@ -124,6 +141,46 @@ export const EventManager = ({
     }),
   };
 
+  const actionStyles = {
+    ...styles,
+    menuList: (base) => ({
+      ...base,
+      padding: '8px 0 8px 8px',
+      '&::-webkit-scrollbar': {
+        width: '10px',
+      },
+      '&::-webkit-scrollbar-track': {
+        background: 'transparent',
+      },
+      '&::-webkit-scrollbar-thumb': {
+        background: '#E4E7EB',
+        border: '1px solid transparent',
+        backgroundClip: 'content-box',
+      },
+      '&::-webkit-scrollbar-thumb:hover': {
+        background: '#E4E7EB !important',
+        border: '1px solid transparent !important',
+        backgroundClip: 'content-box !important',
+      },
+      '&:hover': {
+        '&::-webkit-scrollbar-thumb': {
+          background: '#E4E7EB !important',
+          border: '1px solid transparent !important',
+          backgroundClip: 'content-box !important',
+        },
+      },
+    }),
+    group: (base) => ({
+      ...base,
+      padding: 0,
+    }),
+    groupHeading: (base) => ({
+      ...base,
+      margin: 0,
+      padding: '0',
+    }),
+  };
+
   const actionLookup = Object.fromEntries(ActionTypes.map((actionType) => [actionType.id, actionType]));
 
   let alertTypes = [
@@ -394,6 +451,29 @@ export const EventManager = ({
     return defaultValue;
   };
 
+  const formatGroupLabel = (data) => {
+    if (data.label === 'run-action') return;
+    return (
+      <div
+        className="tw-border-x-0 tw-border-t-0 tw-border-b-[0.5px] tw-border-solid tw-my-[4px]"
+        style={{ borderColor: 'var(--border-weak)' }}
+      ></div>
+    );
+  };
+
+  const CustomOption = (props) => {
+    return (
+      <selectComponents.Option {...props}>
+        <div className="d-flex align-items-center">
+          <div style={{ width: '16px', marginRight: '6px' }}>
+            {props.isSelected && <SolidIcon name="tickv3" width="16px" height="16px" />}
+          </div>
+          <span>{props.label}</span>
+        </div>
+      </selectComponents.Option>
+    );
+  };
+
   function eventPopover(event, index) {
     return (
       <Popover
@@ -433,13 +513,17 @@ export const EventManager = ({
               <Select
                 className={`${darkMode ? 'select-search-dark' : 'select-search'} w-100`}
                 options={actionOptions}
-                value={event.actionId}
+                value={actionOptions
+                  .flatMap((group) => group.options)
+                  .find((option) => option.value === event.actionId)}
+                components={{ Option: CustomOption }}
                 search={false}
                 onChange={(value) => handlerChanged(index, 'actionId', value)}
                 placeholder={t('globals.select', 'Select') + '...'}
-                styles={styles}
+                styles={actionStyles}
                 useMenuPortal={false}
                 useCustomStyles={true}
+                formatGroupLabel={formatGroupLabel}
               />
             </div>
           </div>
diff --git a/frontend/src/Editor/ActionTypes.js b/frontend/src/Editor/ActionTypes.js
index 0bad71b3ac..e3fb69f95d 100644
--- a/frontend/src/Editor/ActionTypes.js
+++ b/frontend/src/Editor/ActionTypes.js
@@ -1,62 +1,36 @@
 export const ActionTypes = [
+  {
+    name: 'Run query',
+    id: 'run-query',
+    options: [{ queryId: '' }],
+    group: 'run-action',
+  },
   {
     name: 'Show Alert',
     id: 'show-alert',
     options: [{ name: 'message', type: 'text', default: 'Message !' }],
+    group: 'run-action',
   },
   {
-    name: 'Logout',
-    id: 'logout',
-  },
-  {
-    name: 'Run Query',
-    id: 'run-query',
-    options: [{ queryId: '' }],
-  },
-  {
-    name: 'Open Webpage',
-    id: 'open-webpage',
-    options: [{ name: 'url', type: 'text', default: 'https://example.com' }],
-  },
-  {
-    name: 'Go to app',
-    id: 'go-to-app',
+    name: 'Control component',
+    id: 'control-component',
     options: [
-      { name: 'app', type: 'text', default: '' },
-      { name: 'queryParams', type: 'code', default: '[]' },
+      { name: 'component', type: 'text', default: '' },
+      { name: 'action', type: 'text', default: '' },
     ],
+    group: 'control-component',
   },
   {
-    name: 'Show Modal',
+    name: 'Show modal',
     id: 'show-modal',
     options: [{ name: 'modal', type: 'text', default: '' }],
+    group: 'control-component',
   },
   {
-    name: 'Close Modal',
+    name: 'Close modal',
     id: 'close-modal',
     options: [{ name: 'modal', type: 'text', default: '' }],
-  },
-  {
-    name: 'Copy to clipboard',
-    id: 'copy-to-clipboard',
-    options: [{ name: 'copy-to-clipboard', type: 'text', default: '' }],
-  },
-  {
-    name: 'Set local storage',
-    id: 'set-localstorage-value',
-    options: [
-      { name: 'key', type: 'code', default: '' },
-      { name: 'value', type: 'code', default: '' },
-    ],
-  },
-  {
-    name: 'Generate file',
-    id: 'generate-file',
-    options: [
-      { name: 'fileType', type: 'text', default: '' },
-      { name: 'fileName', type: 'text', default: '' },
-      { name: 'data', type: 'code', default: '{{[]}}' },
-    ],
+    group: 'control-component',
   },
   {
     name: 'Set table page',
@@ -69,28 +43,28 @@ export const ActionTypes = [
       },
       { name: 'pageIndex', type: 'text', default: '{{1}}' },
     ],
-  },
-  {
-    name: 'Set variable',
-    id: 'set-custom-variable',
-    options: [
-      { name: 'key', type: 'code', default: '' },
-      { name: 'value', type: 'code', default: '' },
-    ],
-  },
-  {
-    name: 'Unset all variables',
-    id: 'unset-all-custom-variables',
-  },
-  {
-    name: 'Unset variable',
-    id: 'unset-custom-variable',
-    options: [{ name: 'key', type: 'code', default: '' }],
+    group: 'control-component',
   },
   {
     name: 'Switch page',
     id: 'switch-page',
     options: [{ name: 'page', type: 'text', default: '' }],
+    group: 'navigation',
+  },
+  {
+    name: 'Go to app',
+    id: 'go-to-app',
+    options: [
+      { name: 'app', type: 'text', default: '' },
+      { name: 'queryParams', type: 'code', default: '[]' },
+    ],
+    group: 'navigation',
+  },
+  {
+    name: 'Open webpage',
+    id: 'open-webpage',
+    options: [{ name: 'url', type: 'text', default: 'https://example.com' }],
+    group: 'navigation',
   },
   {
     name: 'Set page variable',
@@ -99,10 +73,7 @@ export const ActionTypes = [
       { name: 'key', type: 'code', default: '' },
       { name: 'value', type: 'code', default: '' },
     ],
-  },
-  {
-    name: 'Unset all page variables',
-    id: 'unset-all-page-variables',
+    group: 'variable',
   },
   {
     name: 'Unset page variable',
@@ -111,14 +82,61 @@ export const ActionTypes = [
       { name: 'key', type: 'code', default: '' },
       { name: 'value', type: 'code', default: '' },
     ],
+    group: 'variable',
   },
-
   {
-    name: 'Control component',
-    id: 'control-component',
+    name: 'Unset all page variables',
+    id: 'unset-all-page-variables',
+    group: 'variable',
+  },
+  {
+    name: 'Set variable',
+    id: 'set-custom-variable',
     options: [
-      { name: 'component', type: 'text', default: '' },
-      { name: 'action', type: 'text', default: '' },
+      { name: 'key', type: 'code', default: '' },
+      { name: 'value', type: 'code', default: '' },
     ],
+    group: 'variable',
+  },
+  {
+    name: 'Unset variable',
+    id: 'unset-custom-variable',
+    options: [{ name: 'key', type: 'code', default: '' }],
+    group: 'variable',
+  },
+  {
+    name: 'Unset all variables',
+    id: 'unset-all-custom-variables',
+    group: 'variable',
+  },
+  {
+    name: 'Logout',
+    id: 'logout',
+    group: 'other',
+  },
+  {
+    name: 'Generate file',
+    id: 'generate-file',
+    options: [
+      { name: 'fileType', type: 'text', default: '' },
+      { name: 'fileName', type: 'text', default: '' },
+      { name: 'data', type: 'code', default: '{{[]}}' },
+    ],
+    group: 'other',
+  },
+  {
+    name: 'Set local storage',
+    id: 'set-localstorage-value',
+    options: [
+      { name: 'key', type: 'code', default: '' },
+      { name: 'value', type: 'code', default: '' },
+    ],
+    group: 'other',
+  },
+  {
+    name: 'Copy to clipboard',
+    id: 'copy-to-clipboard',
+    options: [{ name: 'copy-to-clipboard', type: 'text', default: '' }],
+    group: 'other',
   },
 ];