diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx b/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
index 18b3f94..9cf6c6a 100644
--- a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
+++ b/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
@@ -101,6 +101,7 @@ async function fetchCreateStep(newStepNo: number, parentCaseId: number) {
     if (!response.ok) {
       throw new Error(`HTTP error! Status: ${response.status}`);
     }
+    return await response.json();
   } catch (error) {
     console.error("Error deleting project:", error);
     throw error;
@@ -170,7 +171,29 @@ export default function Page({
   const url = `${apiServer}/cases?caseId=${params.caseId}`;
 
   const onPlusClick = async (newStepNo: number) => {
-    await fetchCreateStep(newStepNo, params.caseId);
+    const newStep = await fetchCreateStep(newStepNo, params.caseId);
+    if (newStep) {
+      newStep.caseSteps = { stepNo: newStepNo };
+      const updatedSteps = testCase.Steps.map((step) => {
+        if (step.caseSteps.stepNo >= newStepNo) {
+          return {
+            ...step,
+            caseSteps: {
+              ...step.caseSteps,
+              stepNo: step.caseSteps.stepNo + 1,
+            },
+          };
+        }
+        return step;
+      });
+
+      updatedSteps.push(newStep);
+
+      setTestCase({
+        ...testCase,
+        Steps: updatedSteps,
+      });
+    }
   };
 
   const onDeleteClick = async (stepId: number) => {
@@ -184,18 +207,18 @@ export default function Page({
     // delete request
     await fetchDeleteStep(stepId, params.caseId);
 
-    const updatedSteps = testCase.Steps.map(step => {
+    const updatedSteps = testCase.Steps.map((step) => {
       if (step.caseSteps.stepNo > deletedStepNo) {
         return {
           ...step,
           caseSteps: {
             ...step.caseSteps,
-            stepNo: step.caseSteps.stepNo - 1
-          }
+            stepNo: step.caseSteps.stepNo - 1,
+          },
         };
       }
       return step;
-    }).filter(step => step.id !== stepId);
+    }).filter((step) => step.id !== stepId);
 
     setTestCase({
       ...testCase,
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/steps-editor.tsx b/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/steps-editor.tsx
index 4377e3e..076d0f8 100644
--- a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/steps-editor.tsx
+++ b/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/steps-editor.tsx
@@ -53,7 +53,7 @@ export default function StepsEditor({
             className="mt-3 ms-1"
           />
           <div className="mt-3 ms-1">
-            <Tooltip content="Delete this step">
+            <Tooltip content="Delete this step" placement="left">
               <Button
                 isIconOnly
                 size="sm"
@@ -63,7 +63,7 @@ export default function StepsEditor({
                 <Trash size={16} />
               </Button>
             </Tooltip>
-            <Tooltip content="Insert step">
+            <Tooltip content="Insert step" placement="left">
               <Button
                 isIconOnly
                 size="sm"