diff --git a/packages/web/src/components/FlowStepContextMenu/index.jsx b/packages/web/src/components/FlowStepContextMenu/index.jsx
index 23a40970..c67c9bba 100644
--- a/packages/web/src/components/FlowStepContextMenu/index.jsx
+++ b/packages/web/src/components/FlowStepContextMenu/index.jsx
@@ -1,11 +1,10 @@
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { useMutation } from '@apollo/client';
 
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 
-import { DELETE_STEP } from 'graphql/mutations/delete-step';
+import useDeleteStep from 'hooks/useDeleteStep';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { useQueryClient } from '@tanstack/react-query';
 
@@ -13,15 +12,17 @@ function FlowStepContextMenu(props) {
   const { stepId, onClose, anchorEl, deletable, flowId } = props;
   const formatMessage = useFormatMessage();
   const queryClient = useQueryClient();
-  const [deleteStep] = useMutation(DELETE_STEP);
+  const { mutateAsync: deleteStep } = useDeleteStep();
 
   const deleteActionHandler = React.useCallback(
     async (event) => {
       event.stopPropagation();
-      await deleteStep({ variables: { input: { id: stepId } } });
+
+      await deleteStep(stepId);
+
       await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
     },
-    [stepId, queryClient],
+    [deleteStep, stepId, queryClient, flowId],
   );
 
   return (
diff --git a/packages/web/src/hooks/useDeleteStep.js b/packages/web/src/hooks/useDeleteStep.js
new file mode 100644
index 00000000..02a83950
--- /dev/null
+++ b/packages/web/src/hooks/useDeleteStep.js
@@ -0,0 +1,14 @@
+import { useMutation } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useDeleteStep() {
+  const query = useMutation({
+    mutationFn: async (stepId) => {
+      const { data } = await api.delete(`/v1/steps/${stepId}`);
+
+      return data;
+    },
+  });
+
+  return query;
+}