diff --git a/src/components/ApprovalWorkflows/WorkflowStep.tsx b/src/components/ApprovalWorkflows/WorkflowStep.tsx
new file mode 100644
index 00000000..e451744d
--- /dev/null
+++ b/src/components/ApprovalWorkflows/WorkflowStep.tsx
@@ -0,0 +1,98 @@
+import Option from "@/interfaces/option";
+import clsx from "clsx";
+import { useState } from "react";
+import { BsTrash } from "react-icons/bs";
+import WorkflowStepNumber from "./WorkflowStepNumber";
+import WorkflowStepSelects from "./WorkflowStepSelects";
+
+export type StepType = "form-intake" | "approval-by";
+
+const teacherOptions: Option[] = [
+    // fetch from database?
+]
+
+const directorOptions: Option[] = [
+    // fetch from database?
+]
+
+interface Props {
+    editView?: boolean,
+    finalStep?: boolean,
+    isSelected?: boolean,
+    stepNumber: number,
+    stepType: StepType,
+    requestedBy: string,
+    //requestedBy: TeacherUser | CorporateUser | MasterCorporateUser,
+    onDelete?: () => void;
+}
+
+export default function WorkflowStep({
+    editView = false,
+    finalStep = false,
+    isSelected = false,
+    stepNumber,
+    stepType,
+    requestedBy,
+    onDelete,
+}: Props) {
+    // 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);
+
+    let showSelects = false;
+    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";
+        }
+    }
+
+    return (
+        <div
+            className={clsx(
+                'flex items-center space-x-3 w-[600px] p-5 rounded-2xl border-2 border-mti-purple-ultralight',
+                { 'bg-mti-purple-ultralight': isSelected }
+            )}
+        >
+            <div className="flex w-full items-center">
+                <div className="flex-shrink-0">
+                    <WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
+                </div>
+
+                {/* Only show selects if editView === true and stepType === 'approval-by' */}
+                {showSelects && (
+                    <div className="ml-auto">
+                        <WorkflowStepSelects
+                            // Provide any relevant options:
+                            leftOptions={teacherOptions}
+                            rightOptions={teacherOptions}
+                            leftValue={leftValue}
+                            rightValue={rightValue}
+                            onLeftChange={setLeftValue}
+                            onRightChange={setRightValue}
+                            leftPlaceholder={leftPlaceholder}
+                            rightPlaceholder={rightPlaceholder}
+                        />
+                    </div>
+                )}
+
+                {editView && stepNumber !== 1 && !finalStep && (
+                    <button
+                        data-tip="Delete"
+                        className="ml-4 cursor-pointer tooltip"
+                        onClick={onDelete}
+                    >
+                        <BsTrash className="size-6 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
new file mode 100644
index 00000000..93e75ca8
--- /dev/null
+++ b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
@@ -0,0 +1,25 @@
+import { ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
+import clsx from "clsx";
+import React from "react";
+import { RiProgress5Line } from "react-icons/ri";
+
+interface Props {
+    number: number;
+    isSelected?: boolean;
+}
+
+export default function WorkflowStepNumber({ number, isSelected = false }: Props) {
+    return (
+        <div
+            className={clsx(
+                'flex items-center justify-center w-10 h-10 rounded-full',
+                {
+                    'bg-mti-purple text-mti-purple-ultralight': isSelected,
+                    'bg-mti-purple-ultralight text-gray-500': !isSelected,
+                }
+            )}
+        >
+            <span className="text-lg font-semibold">{number}</span>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
new file mode 100644
index 00000000..63e30cfa
--- /dev/null
+++ b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
@@ -0,0 +1,53 @@
+import Option from "@/interfaces/option";
+import Select from "../Low/Select";
+
+interface Props {
+    leftOptions: Option[];
+    rightOptions: Option[];
+    leftValue?: Option | null;
+    rightValue?: Option | null;
+    onLeftChange: (value: Option | null) => void;
+    onRightChange: (value: Option | null) => void;
+    leftPlaceholder?: string;
+    rightPlaceholder?: string;
+}
+
+export default function WorkflowStepSelects({
+    leftOptions,
+    rightOptions,
+    leftValue,
+    rightValue,
+    onLeftChange,
+    onRightChange,
+    leftPlaceholder = "Select",
+    rightPlaceholder = "Select",
+}: Props) {
+    return (
+        <div
+            className={"flex flex-row gap-0"}
+        >
+            {/* Left Select */}
+            <div className="flex-1 w-[175px]">
+                <Select
+                    options={leftOptions}
+                    value={leftValue}
+                    onChange={onLeftChange}
+                    placeholder={leftPlaceholder}
+                    flat
+                    className={"px-2 py-1 rounded-none rounded-l-2xl"}
+                />
+            </div>
+            {/* Right Select */}
+            <div className="flex-1 w-[175px]">
+                <Select
+                    options={rightOptions}
+                    value={rightValue}
+                    onChange={onRightChange}
+                    placeholder={rightPlaceholder}
+                    flat
+                    className="px-2 py-1 rounded-none rounded-r-2xl"
+                />
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index a9571269..1ba5f088 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -5,17 +5,31 @@ import { sessionOptions } from "@/lib/session";
 import { redirect } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { AnimatePresence, motion } from "framer-motion";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
 import { BsChevronLeft } from "react-icons/bs";
+import { FaRegCheckCircle } from "react-icons/fa";
+import { IoIosAddCircleOutline } from "react-icons/io";
 import { ToastContainer } from "react-toastify";
 
+
 import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
 
 import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
 import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
 import Status from "@/components/ApprovalWorkflows/Status";
+import WorkflowStep, { StepType } from "@/components/ApprovalWorkflows/WorkflowStep";
+import Button from "@/components/Low/Button";
+import { useState } from "react";
+
+interface Step {
+    stepNumber: number;
+    stepType: StepType;
+    finalStep?: boolean;
+    key: number;
+}
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res)
@@ -38,6 +52,47 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalWorkflow }) {
     const { user } = useUser({ redirectTo: "/login" });
 
+    const [selectedButton, setSelectedButton] = useState<"forms" | "progress">("forms");
+
+    const [steps, setSteps] = useState<Step[]>([
+        { stepNumber: 1, stepType: "form-intake", key: 1 },
+        { stepNumber: 2, stepType: "approval-by", finalStep: true, key: 2 },
+    ]);
+    const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
+
+    const addStep = () => {
+        setSteps((prev) => {
+            const nonFinalSteps = prev.slice(0, -1);
+            const finalStep = prev[prev.length - 1];
+            const newStep: Step = { stepNumber: finalStep.stepNumber, stepType: "approval-by", key: stepCounter };
+
+            const updatedFinalStep = { ...finalStep, stepNumber: finalStep.stepNumber + 1 };
+
+            setStepCounter((prev) => prev + 1); //update counter
+
+            return [...nonFinalSteps, newStep, updatedFinalStep];
+        });
+    };
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        // Handle form submission logic
+        console.log("Form submitted!", steps);
+    };
+
+    const handleDelete = (index: number) => {
+        setSteps((prev) => {
+            const updatedSteps = prev.filter((_, i) => i !== index);
+
+            const recalculatedSteps = updatedSteps.map((step, idx) => ({
+                ...step,
+                stepNumber: idx + 1,
+            }));
+
+            return recalculatedSteps;
+        });
+    };
+
     return (
         <>
             <Head>
@@ -62,17 +117,81 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
                             <h1 className="text-2xl font-semibold">{approvalWorkflow.name}</h1>
                         </div>
                     </section>
-                    <section className="flex flex-row gap-6">
-                        <RequestedBy
-                            name="Prof. Álvaro Dória"
-                            profileImage="/blue-stock-photo.png"
-                        />
-                        <StartedOn
-                            date="15/12/2024"
-                        />
-                        <Status
-                            status="pending"
-                        />
+                    <section className="flex flex-col gap-6">
+                        <div className="flex flex-row gap-6">
+                            <RequestedBy
+                                name="Prof. Álvaro Dória"
+                                profileImage="/blue-stock-photo.png"
+                            />
+                            <StartedOn
+                                date="15/12/2024"
+                            />
+                            <Status
+                                status="pending"
+                            />
+                        </div>
+                        <div className="flex flex-row gap-6">
+                            <Button
+                                color="purple"
+                                variant={selectedButton === "forms" ? "solid" : "outline"}
+                                onClick={() => setSelectedButton("forms")}
+                                className="transition-all duration-300 w-56 text-lg font-medium"
+                            >
+                                Forms
+                            </Button>
+                            <Button
+                                color="purple"
+                                variant={selectedButton === "progress" ? "solid" : "outline"}
+                                onClick={() => setSelectedButton("progress")}
+                                className="transition-all duration-300 w-56 text-lg font-medium"
+                            >
+                                Progress
+                            </Button>
+                        </div>
+
+                        <form onSubmit={handleSubmit}>
+                            <div className="flex flex-col gap-6">
+                                <Button
+                                    color="purple"
+                                    variant="solid"
+                                    onClick={addStep}
+                                    className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
+                                >
+                                    <IoIosAddCircleOutline className="size-6" />
+                                    Add Step
+                                </Button>
+                                <AnimatePresence>
+                                    {steps.map((step, index) => (
+                                        <motion.div
+                                            key={step.key} // Use step.stepNumber as the unique key
+                                            initial={{ opacity: 0, y: -20 }} // Animation on enter
+                                            animate={{ opacity: 1, y: 0 }}   // Animation on update
+                                            exit={{ opacity: 0, x: 20 }}     // Animation on exit
+                                            transition={{ duration: 0.3 }}   // Animation duration
+                                        >
+                                            <WorkflowStep
+                                                editView
+                                                stepNumber={step.stepNumber}
+                                                finalStep={step.finalStep}
+                                                stepType={step.stepType}
+                                                requestedBy="Prof. foo"
+                                                onDelete={() => handleDelete(index)} // Pass index for deletion
+                                            />
+                                        </motion.div>
+                                    ))}
+                                </AnimatePresence>
+
+                                <Button
+                                    type="submit"
+                                    color="purple"
+                                    variant="solid"
+                                    className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
+                                >
+                                    <FaRegCheckCircle className="size-5" />
+                                    Confirm Exam Workflow Pipeline
+                                </Button>
+                            </div>
+                        </form>
                     </section>
                 </Layout>
             )}
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index e7688193..580e57c1 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -145,9 +145,9 @@ export default function ApprovalWorkflows() {
             cell: ({ row }: { row: { original: ApprovalWorkflow } }) => {
                 return (
                     <div className="flex gap-4">
-                        <div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteApprovalWorkflow(row.original.id, row.original.name)}>
+                        <button data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteApprovalWorkflow(row.original.id, row.original.name)}>
                             <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-                        </div>
+                        </button>
                         <Link data-tip="Edit" href={`/approval-workflows/${row.original.id}`} className="cursor-pointer tooltip">
                             <FaRegEdit className="hover:text-mti-purple-light transition ease-in-out duration-300" />
                         </Link>