diff --git a/packages/web/src/components/FlowStep/index.jsx b/packages/web/src/components/FlowStep/index.jsx
index 13704e75..1d78f73a 100644
--- a/packages/web/src/components/FlowStep/index.jsx
+++ b/packages/web/src/components/FlowStep/index.jsx
@@ -38,6 +38,8 @@ import isEmpty from 'helpers/isEmpty';
 import { StepPropType } from 'propTypes/propTypes';
 import useTriggers from 'hooks/useTriggers';
 import useActions from 'hooks/useActions';
+import useTriggerSubsteps from 'hooks/useTriggerSubsteps';
+import useActionSubsteps from 'hooks/useActionsSubsteps';
 
 const validIcon = <CheckCircleIcon color="success" />;
 const errorIcon = <ErrorIcon color="error" />;
@@ -153,7 +155,24 @@ function FlowStep(props) {
     ({ key }) => key === step.key,
   );
 
-  const substeps = actionOrTrigger?.substeps || [];
+  const { data: triggerSubsteps } = useTriggerSubsteps(
+    app?.key,
+    actionOrTrigger?.key,
+  );
+
+  const triggerSubstepsData = triggerSubsteps?.data || [];
+
+  const { data: actionSubsteps } = useActionSubsteps(
+    app?.key,
+    actionOrTrigger?.key,
+  );
+
+  const actionSubstepsData = actionSubsteps?.data || [];
+
+  const substeps =
+    triggerSubstepsData.length > 0
+      ? triggerSubstepsData
+      : actionSubstepsData || [];
 
   const handleChange = React.useCallback(({ step }) => {
     onChange(step);
diff --git a/packages/web/src/hooks/useActionsSubsteps.js b/packages/web/src/hooks/useActionsSubsteps.js
new file mode 100644
index 00000000..bcc527b3
--- /dev/null
+++ b/packages/web/src/hooks/useActionsSubsteps.js
@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useActionSubsteps(appKey, actionKey) {
+  const query = useQuery({
+    queryKey: ['actionSubsteps', appKey, actionKey],
+    queryFn: async ({ payload, signal }) => {
+      const { data } = await api.get(
+        `/v1/apps/${appKey}/actions/${actionKey}/substeps`,
+        {
+          signal,
+        },
+      );
+
+      return data;
+    },
+    enabled: !!appKey,
+  });
+
+  return query;
+}
diff --git a/packages/web/src/hooks/useTriggerSubsteps.js b/packages/web/src/hooks/useTriggerSubsteps.js
new file mode 100644
index 00000000..d697ba5e
--- /dev/null
+++ b/packages/web/src/hooks/useTriggerSubsteps.js
@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useTriggerSubsteps(appKey, triggerKey) {
+  const query = useQuery({
+    queryKey: ['triggerSubsteps', appKey, triggerKey],
+    queryFn: async ({ payload, signal }) => {
+      const { data } = await api.get(
+        `/v1/apps/${appKey}/triggers/${triggerKey}/substeps`,
+        {
+          signal,
+        },
+      );
+
+      return data;
+    },
+    enabled: !!appKey,
+  });
+
+  return query;
+}