diff --git a/src/components/ApprovalWorkflows/WorkflowStep.tsx b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
similarity index 79%
rename from src/components/ApprovalWorkflows/WorkflowStep.tsx
rename to src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
index 06ec7582..b20c96bc 100644
--- a/src/components/ApprovalWorkflows/WorkflowStep.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
@@ -1,13 +1,10 @@
+import { WorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
 import { useState } from "react";
 import { BsTrash } from "react-icons/bs";
-import { FaWpforms } from "react-icons/fa6";
 import { LuGripHorizontal } from "react-icons/lu";
 import WorkflowStepNumber from "./WorkflowStepNumber";
 import WorkflowStepSelects from "./WorkflowStepSelects";
-import { WorkflowStep } from "@/interfaces/approval.workflow";
-
-export type StepType = "form-intake" | "approval-by";
 
 const teacherOptions: Option[] = [
     // fetch from database?
@@ -17,18 +14,13 @@ const directorOptions: Option[] = [
     // fetch from database?
 ]
 
-export default function WorkflowStepComponent({
+export default function WorkflowEditableStepComponent({
     stepType,
     stepNumber,
     completed = false,
-    editView = false,
-    finalStep = false,
-    isSelected = false,
-    requestedBy,
+    finalStep,
     onDelete,
 }: WorkflowStep) {
-    // disable selectability of step if in editView
-    const effectiveIsSelected = editView ? false : isSelected;
 
     const [leftValue, setLeftValue] = useState<Option | null>(null);
     const [rightValue, setRightValue] = useState<Option | null>(null);
@@ -37,19 +29,17 @@ export default function WorkflowStepComponent({
     let leftPlaceholder = "";
     let rightPlaceholder = "";
 
-    if (editView) {
-        if (stepType === "approval-by") {
-            // Show the selects only if it's an 'approval-by' step and in edit mode
-            showSelects = true;
-            leftPlaceholder = "Approval by";
-            rightPlaceholder = finalStep ? "2nd Director" : "2nd Teacher";
-        }
+    if (stepType === "approval-by") {
+        // Show the selects only if it's an 'approval-by' step and in edit mode
+        showSelects = true;
+        leftPlaceholder = "Approval by";
+        rightPlaceholder = finalStep ? "2nd Director" : "2nd Teacher";
     }
 
     return (
         <div className="flex w-full">
             <div className="flex flex-col items-center">
-                <WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
+                <WorkflowStepNumber number={stepNumber} />
 
                 {/* Vertical Bar connecting steps */}
                 {!finalStep && (
@@ -62,7 +52,6 @@ export default function WorkflowStepComponent({
                 : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
             }
 
-            {/* Only show selects if editView === true and stepType === 'approval-by' */}
             {showSelects && (
                 <div className="ml-10">
                     <WorkflowStepSelects
@@ -92,7 +81,7 @@ export default function WorkflowStepComponent({
                 </div>
             )}
 
-            {editView && stepNumber !== 1 && !finalStep && (
+            {stepNumber !== 1 && !finalStep && (
                 <div className="ml-4 mt-2">
                     <button
                         data-tip="Delete"
diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index fc59db88..f444a8c5 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { FaRegCheckCircle } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import Button from "../Low/Button";
-import WorkflowStepComponent from "./WorkflowStep";
+import WorkflowEditableStepComponent from "./WorkflowEditableStepComponent";
 import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow";
 
 const teacherOptions: Option[] = [
@@ -41,23 +41,34 @@ export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
         onWorkflowChange(updatedWorkflow);
     }, [steps]);
 
+    const renumberSteps = (steps: WorkflowStep[]): WorkflowStep[] => {
+        return steps.map((step, index) => ({
+            ...step,
+            stepNumber: index + 1,
+        }));
+    };
+
     const addStep = () => {
         setSteps((prev) => {
             const newStep: WorkflowStep = {
                 key: stepCounter,
                 stepType: "approval-by",
-                stepNumber: steps.length - 1,
+                stepNumber: steps.length,
                 completed: false,
             };
             setStepCounter((count) => count + 1);
 
-            return [...prev.slice(0, -1), newStep, lastStep];
+            const updatedSteps = [...prev.slice(0, -1), newStep, lastStep];
+            return renumberSteps(updatedSteps);
         });
     };
 
     const handleDelete = (key: number | undefined) => {
-        if (key){
-            setSteps((prev) => prev.filter((step) => step.key !== key));
+        if (key) {
+            setSteps((prev) => {
+                const updatedSteps = prev.filter((step) => step.key !== key);
+                return renumberSteps(updatedSteps);
+            });
         }
     };
 
@@ -73,8 +84,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
             const [final] = newOrder.splice(finalIndex, 1);
             newOrder.push(final);
         }
-
-        setSteps(newOrder);
+        setSteps(renumberSteps(newOrder));
     };
 
     return (
@@ -110,7 +120,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
                             layout
                             drag={!(step.firstStep || step.finalStep)}
                         >
-                            <WorkflowStepComponent
+                            <WorkflowEditableStepComponent
                                 key={step.key}
                                 completed={false}
                                 editView
diff --git a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
new file mode 100644
index 00000000..3f9a04e5
--- /dev/null
+++ b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
@@ -0,0 +1,27 @@
+import { WorkflowStep } from "@/interfaces/approval.workflow";
+import WorkflowStepNumber from "./WorkflowStepNumber";
+
+export default function WorkflowStepComponent({
+    stepType,
+    stepNumber,
+    completed,
+    editView = false,
+    finalStep,
+    isSelected = false,
+    requestedBy,
+    onDelete,
+}: WorkflowStep) {
+
+    return (
+        <div className="flex w-full">
+            <div className="flex flex-col items-center">
+                <WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
+
+                {/* Vertical Bar connecting steps */}
+                {!finalStep && (
+                    <div className="w-1 h-10 bg-mti-purple-dark"></div>
+                )}
+            </div>
+        </div>
+    );
+};
\ No newline at end of file