diff --git a/frontend/src/Editor/Inspector/EventManager.jsx b/frontend/src/Editor/Inspector/EventManager.jsx
index 9e736426cb..d41bed3e4c 100644
--- a/frontend/src/Editor/Inspector/EventManager.jsx
+++ b/frontend/src/Editor/Inspector/EventManager.jsx
@@ -24,6 +24,29 @@ export const EventManager = ({
     return { name: action.name, value: action.id };
   });
 
+  let alertTypes = [
+    {
+      name: 'Info',
+      id: 'info',
+    },
+    {
+      name: 'Success',
+      id: 'success',
+    },
+    {
+      name: 'Warning',
+      id: 'warning',
+    },
+    {
+      name: 'Danger',
+      id: 'error',
+    },
+  ];
+
+  let alertOptions = alertTypes.map((alert) => {
+    return { name: alert.name, value: alert.id };
+  });
+
   excludeEvents = excludeEvents || [];
 
   /* Filter events based on excludesEvents ( a list of event ids to exclude ) */
@@ -128,16 +151,31 @@ export const EventManager = ({
           <div className="hr-text">Action options</div>
           <div>
             {event.actionId === 'show-alert' && (
-              <div className="row">
-                <div className="col-3 p-2">Message</div>
-                <div className="col-9">
-                  <CodeHinter
-                    currentState={currentState}
-                    initialValue={event.message}
-                    onChange={(value) => handlerChanged(index, 'message', value)}
-                  />
+              <>
+                <div className="row">
+                  <div className="col-3 p-2">Message</div>
+                  <div className="col-9">
+                    <CodeHinter
+                      currentState={currentState}
+                      initialValue={event.message}
+                      onChange={(value) => handlerChanged(index, 'message', value)}
+                    />
+                  </div>
                 </div>
-              </div>
+                <div className="row mt-3">
+                  <div className="col-3 p-2">Alert Type</div>
+                  <div className="col-9">
+                    <SelectSearch
+                      options={alertOptions}
+                      value={event.alertType}
+                      search={false}
+                      onChange={(value) => handlerChanged(index, 'alertType', value)}
+                      filterOptions={fuzzySearch}
+                      placeholder="Select.."
+                    />
+                  </div>
+                </div>
+              </>
             )}
 
             {event.actionId === 'open-webpage' && (
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index b2a86b028a..f1d0928311 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -125,7 +125,7 @@ function executeAction(_ref, event, mode) {
     switch (event.actionId) {
       case 'show-alert': {
         const message = resolveReferences(event.message, _ref.state.currentState);
-        toast(message, { hideProgressBar: true });
+        toast(message, { hideProgressBar: true, type: event.alertType });
         return new Promise(function (resolve, reject) {
           resolve();
         });