diff --git a/src/components/ApprovalWorkflows/RequestedBy.tsx b/src/components/ApprovalWorkflows/RequestedBy.tsx
index 536c0e63..036cc968 100644
--- a/src/components/ApprovalWorkflows/RequestedBy.tsx
+++ b/src/components/ApprovalWorkflows/RequestedBy.tsx
@@ -18,12 +18,12 @@ export default function RequestedBy({ prefix, name, profileImage }: Props) {
                 <p className="text-sm font-medium text-gray-800">Requested by</p>
                 <div className="flex items-center space-x-2">
                     <p className="text-xs font-medium text-gray-800">{prefix} {name}</p>
-                    <Image
+                    <img
                         src={profileImage ? profileImage : "/defaultAvatar.png"}
                         alt={name}
                         width={24}
                         height={24}
-                        className="w-6 h-6 rounded-full"
+                        className="w-6 h-6 rounded-full border-[1px] border-gray-400 border-opacity-50"
                     />
                 </div>
             </div>
diff --git a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
index 9659da3c..c7c1a207 100644
--- a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
+++ b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
@@ -12,12 +12,12 @@ export default function UserWithProfilePic({ prefix, name, profileImage, textSiz
     return (
         <div className="flex items-center space-x-2">
             <p className={textClassName}>{prefix} {name}</p>
-            <Image
+            <img
                 src={profileImage ? profileImage : "/defaultAvatar.png"}
                 alt={name}
                 width={24}
                 height={24}
-                className="rounded-full h-auto"
+                className="rounded-full h-auto border-[1px] border-gray-400 border-opacity-50"
             />
         </div>
     );
diff --git a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
index 263202a9..85fab5de 100644
--- a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
@@ -1,6 +1,6 @@
 import { EditableWorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
-import { CorporateUser, TeacherUser } from "@/interfaces/user";
+import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser } from "@/interfaces/user";
 import Image from "next/image";
 import { useEffect, useMemo, useState } from "react";
 import { AiOutlineUserAdd } from "react-icons/ai";
@@ -10,8 +10,7 @@ import WorkflowStepNumber from "./WorkflowStepNumber";
 import WorkflowStepSelects from "./WorkflowStepSelects";
 
 interface Props extends Pick<EditableWorkflowStep, 'stepNumber' | 'assignees' | 'finalStep' | 'onDelete'> {
-    entityTeachers: TeacherUser[];
-    entityCorporates: CorporateUser[];
+    entityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
     onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
 }
 
@@ -21,41 +20,27 @@ export default function WorkflowEditableStepComponent({
     finalStep,
     onDelete,
     onSelectChange,
-    entityTeachers,
-    entityCorporates,
+    entityApprovers,
 }: Props) {
 
     const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
     const [isAdding, setIsAdding] = useState(false);
 
-    const teacherOptions: Option[] = useMemo(() => 
-        entityTeachers
-            .map((teacher) => ({
-                value: teacher.id,
-                label: teacher.name,
-                icon: () => <Image src={teacher.profilePicture} alt={teacher.name} />
+    const approverOptions: Option[] = useMemo(() => 
+        entityApprovers
+            .map((approver) => ({
+                value: approver.id,
+                label: approver.name,
+                icon: () => <img src={approver.profilePicture} alt={approver.name} />
             }))
             .sort((a, b) => a.label.localeCompare(b.label)),
-        [entityTeachers]
+        [entityApprovers]
     );
 
-    const corporateOptions: Option[] = useMemo(() => 
-        entityCorporates
-            .map((corporate) => ({
-                value: corporate.id,
-                label: corporate.name,
-                icon: () => <Image src={corporate.profilePicture} alt={corporate.name} />
-            }))
-            .sort((a, b) => a.label.localeCompare(b.label)),
-        [entityCorporates]
-    );
-
-    const allOptions = useMemo(() => [...teacherOptions, ...corporateOptions], [teacherOptions, corporateOptions]);
-
     useEffect(() => {
         if (assignees && assignees.length > 0) {
             const initialSelects = assignees.map((assignee) =>
-                typeof assignee === 'string' ? allOptions.find(opt => opt.value === assignee) || null : null
+                typeof assignee === 'string' ? approverOptions.find(option => option.value === assignee) || null : null
             );
     
             setSelects((prevSelects) => {
@@ -68,21 +53,16 @@ export default function WorkflowEditableStepComponent({
                 return prevSelects;
             });
         } 
-    }, [assignees, allOptions]);
+    }, [assignees, approverOptions]);
 
     const selectedValues = useMemo(() => 
         selects.filter((opt): opt is Option => !!opt).map(opt => opt.value),
         [selects]
     );
 
-    const availableTeacherOptions = useMemo(() => 
-        teacherOptions.filter(opt => !selectedValues.includes(opt.value)),
-        [teacherOptions, selectedValues]
-    );
-
-    const availableCorporateOptions = useMemo(() => 
-        corporateOptions.filter(opt => !selectedValues.includes(opt.value)),
-        [corporateOptions, selectedValues]
+    const availableApproverOptions = useMemo(() => 
+        approverOptions.filter(opt => !selectedValues.includes(opt.value)),
+        [approverOptions, selectedValues]
     );
 
     const handleAddSelectComponent = () => {
@@ -122,8 +102,7 @@ export default function WorkflowEditableStepComponent({
 
             <div className="ml-10 mb-12">
                 <WorkflowStepSelects
-                    teachers={availableTeacherOptions}
-                    corporates={availableCorporateOptions}
+                    approvers={availableApproverOptions}
                     selects={selects}
                     placeholder={stepNumber === 1 ? "Form Intake By:" : "Approval By:"}
                     onSelectChange={handleSelectChangeAt}
diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index da1cdffa..ffa92404 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -1,7 +1,7 @@
 import { EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
-import { CorporateUser, TeacherUser } from "@/interfaces/user";
-import { AnimatePresence, Reorder, motion } from "framer-motion";
+import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser } from "@/interfaces/user";
+import { AnimatePresence, Reorder } from "framer-motion";
 import { useState } from "react";
 import { FaRegCheckCircle, FaSpinner } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
@@ -12,13 +12,12 @@ import WorkflowEditableStepComponent from "./WorkflowEditableStepComponent";
 interface Props {
     workflow: EditableApprovalWorkflow;
     onWorkflowChange: (workflow: EditableApprovalWorkflow) => void;
-    entityTeachers: TeacherUser[];
-    entityCorporates: CorporateUser[];
+    entityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
     isLoading: boolean;
     isRedirecting: boolean;
 }
 
-export default function WorkflowForm({ workflow, onWorkflowChange, entityTeachers, entityCorporates, isLoading, isRedirecting }: Props) {
+export default function WorkflowForm({ workflow, onWorkflowChange, entityApprovers, isLoading, isRedirecting }: Props) {
     const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
     const lastStep = workflow.steps[workflow.steps.length - 1];
 
@@ -138,8 +137,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
                                         finalStep={step.finalStep}
                                         onDelete={() => handleDelete(step.key)}
                                         onSelectChange={(numberOfSelects, idx, option) => handleSelectChange(step.key, numberOfSelects, idx, option)}
-                                        entityTeachers={entityTeachers}
-                                        entityCorporates={entityCorporates}
+                                        entityApprovers={entityApprovers}
                                     />
 
                                     {step.finalStep &&
diff --git a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
index c0ebc585..a7c39f67 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
@@ -2,16 +2,14 @@ import Option from "@/interfaces/option";
 import Select from "../Low/Select";
 
 interface Props {
-    teachers: Option[];
-    corporates: Option[];
+    approvers: Option[];
     selects: (Option | null | undefined)[];
     placeholder: string;
     onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
 }
 
 export default function WorkflowStepSelects({
-    teachers,
-    corporates,
+    approvers,
     selects,
     placeholder,
     onSelectChange,
@@ -34,7 +32,7 @@ export default function WorkflowStepSelects({
                 return (
                     <div key={index} className="w-[275px]">
                         <Select
-                            options={[...teachers, ...corporates]}
+                            options={approvers}
                             value={option}
                             onChange={(option) => onSelectChange(selects.length, index, option)}
                             placeholder={placeholder}
diff --git a/src/pages/approval-workflows/[id]/clone.tsx b/src/pages/approval-workflows/[id]/clone.tsx
index e62ee2d7..7246b695 100644
--- a/src/pages/approval-workflows/[id]/clone.tsx
+++ b/src/pages/approval-workflows/[id]/clone.tsx
@@ -6,7 +6,7 @@ import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
 import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow";
 import { Entity } from "@/interfaces/entity";
-import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
+import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
@@ -22,7 +22,6 @@ import { useEffect, useState } from "react";
 import { BsChevronLeft } from "react-icons/bs";
 import { GrClearOption } from "react-icons/gr";
 import { toast, ToastContainer } from "react-toastify";
-import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
 import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { useRouter } from "next/router";
 import axios from "axios";
@@ -48,8 +47,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
             user,
             workflow,
             userEntitiesWithLabel,
-            userEntitiesTeachers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "teacher" }) as TeacherUser[],
-            userEntitiesCorporates: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "corporate" }) as CorporateUser[],
+            userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
         }),
     };
 }, sessionOptions);
@@ -58,15 +56,13 @@ interface Props {
     user: User,
     workflow: ApprovalWorkflow,
     userEntitiesWithLabel: Entity[],
-    userEntitiesTeachers: TeacherUser[],
-    userEntitiesCorporates: CorporateUser[],
+    userEntitiesApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
 }
 
-export default function Home({ user, workflow, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) {
+export default function Home({ user, workflow, userEntitiesWithLabel, userEntitiesApprovers }: Props) {
     const [cloneWorkflow, setCloneWorkflow] = useState<EditableApprovalWorkflow | null>(null);
     const [entityId, setEntityId] = useState<string | null | undefined>(workflow.entityId);
-    const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
-    const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
+    const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
     const [isLoading, setIsLoading] = useState<boolean>(false);
     const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
 
@@ -74,21 +70,15 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
 
     useEffect(() => {
         if (entityId) {
-            setEntityTeachers(
-                userEntitiesTeachers.filter(teacher =>
-                    teacher.entities.some(entity => entity.id === entityId)
-                )
-            );
-            setEntityCorporates(
-                userEntitiesCorporates.filter(corporate =>
-                    corporate.entities.some(entity => entity.id === entityId)
+            setEntityApprovers(
+                userEntitiesApprovers.filter(approver =>
+                    approver.entities.some(entity => entity.id === entityId)
                 )
             );
         } else {
-            setEntityTeachers([]);
-            setEntityCorporates([]);
+            setEntityApprovers([]);
         }
-    }, [entityId, userEntitiesTeachers, userEntitiesCorporates]);
+    }, [entityId, userEntitiesApprovers]);
 
     const ENTITY_OPTIONS = userEntitiesWithLabel.map(entity => ({
         label: entity.label,
@@ -289,8 +279,7 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
                                             <WorkflowForm
                                                 workflow={cloneWorkflow}
                                                 onWorkflowChange={onWorkflowChange}
-                                                entityTeachers={entityTeachers}
-                                                entityCorporates={entityCorporates}
+                                                entityApprovers={entityApprovers}
                                                 isLoading={isLoading}
                                                 isRedirecting={isRedirecting}
                                             />
diff --git a/src/pages/approval-workflows/[id]/edit.tsx b/src/pages/approval-workflows/[id]/edit.tsx
index 7765e009..8bad8e91 100644
--- a/src/pages/approval-workflows/[id]/edit.tsx
+++ b/src/pages/approval-workflows/[id]/edit.tsx
@@ -4,7 +4,7 @@ import Status from "@/components/ApprovalWorkflows/Status";
 import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
 import Layout from "@/components/High/Layout";
 import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep, getUserTypeLabelShort } from "@/interfaces/approval.workflow";
-import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
+import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
@@ -39,8 +39,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
         props: serialize({
             user,
             workflow,
-            workflowEntityTeachers: await getEntityUsers(workflow.entityId, undefined, { type: "teacher" }),
-            workflowEntityCorporates: await getEntityUsers(workflow.entityId, undefined, { type: "corporate" }),
+            workflowEntityApprovers: await getEntityUsers(workflow.entityId, undefined, { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
         }),
     };
 }, sessionOptions);
@@ -48,11 +47,10 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 interface Props {
     user: User,
     workflow: ApprovalWorkflow,
-    workflowEntityTeachers: TeacherUser[],
-    workflowEntityCorporates: CorporateUser[],
+    workflowEntityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
 }
 
-export default function Home({ user, workflow, workflowEntityTeachers, workflowEntityCorporates }: Props) {
+export default function Home({ user, workflow, workflowEntityApprovers }: Props) {
     const [updatedWorkflow, setUpdatedWorkflow] = useState<EditableApprovalWorkflow | null>(null);
     const [isLoading, setIsLoading] = useState<boolean>(false);
     const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
@@ -184,8 +182,7 @@ export default function Home({ user, workflow, workflowEntityTeachers, workflowE
                                 <WorkflowForm
                                     workflow={updatedWorkflow}
                                     onWorkflowChange={onWorkflowChange}
-                                    entityTeachers={workflowEntityTeachers}
-                                    entityCorporates={workflowEntityCorporates}
+                                    entityApprovers={workflowEntityApprovers}
                                     isLoading={isLoading}
                                     isRedirecting={isRedirecting}
                                 />
diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index 0ffe56e2..2ef05ab6 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -5,6 +5,7 @@ import Tip from "@/components/ApprovalWorkflows/Tip";
 import UserWithProfilePic from "@/components/ApprovalWorkflows/UserWithProfilePic";
 import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
 import Layout from "@/components/High/Layout";
+import Button from "@/components/Low/Button";
 import { ApprovalWorkflow, getUserTypeLabelShort, WorkflowStep } from "@/interfaces/approval.workflow";
 import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
@@ -82,10 +83,14 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
         setIsPanelOpen(true);
     };
 
-    const saveComments = () => {
+    const handleSaveComments = () => {
 
     };
 
+    const handleApproveStep = () => {
+        
+    };
+
     return (
         <>
             <Head>
@@ -99,7 +104,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
             </Head>
             <ToastContainer />
             {user && (
-                <Layout user={user} className="gap-6">
+                <Layout user={user} className="gap-6 min-h-[900px]">
 
                     <section className="flex items-center gap-2">
                         <Link
@@ -224,7 +229,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                 </div>
 
                                             ) : (
-                                                <div className={"text-base font-medium text-gray-500"}>
+                                                <div className={"text-base font-medium text-gray-500 mb-6"}>
                                                     One assignee is required to sign off to complete this step:
                                                     <div className="flex flex-col gap-2 mt-3">
                                                         {workflowAssignees.filter(user => selectedStep.assignees.includes(user.id)).map(user => (
@@ -240,6 +245,19 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                     </div>
                                                 </div>
                                             )}
+                                            
+                                            {selectedStepIndex === currentStep &&
+                                                <Button
+                                                    color="purple"
+                                                    variant="solid"
+                                                    disabled={!selectedStep.assignees.includes(user.id)}
+                                                    onClick={handleApproveStep}
+                                                    padding="px-6 py-2"
+                                                    className="mb-3 w-full text-lg"
+                                                >
+                                                    Approve Step
+                                                </Button>
+                                            }
 
                                             <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
 
@@ -247,11 +265,19 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                 value={comments}
                                                 onChange={(e) => setComments(e.target.value)}
                                                 placeholder="Input comments here"
-                                                className="w-full h-80 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-4"
+                                                className="w-full h-64 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-3 resize-none"
                                             />
-                                            <button onClick={saveComments} className="mt-4 px-6 py-2 bg-mti-purple-dark text-white rounded-full">
+                                            <Button
+                                                color="purple"
+                                                variant="solid"
+                                                onClick={handleSaveComments}
+                                                padding="px-6 py-2"
+                                                className="mt-6 mb-3 w-full text-lg"
+                                            >
                                                 Save Comments
-                                            </button>
+                                            </Button>
+
+                                            <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
 
                                         </div>
                                     </motion.div>
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 5fafb405..d2299c4a 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -6,7 +6,7 @@ import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
 import { ApprovalWorkflow, EditableApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { Entity } from "@/interfaces/entity";
-import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
+import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
@@ -38,8 +38,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
         props: serialize({
             user,
             userEntitiesWithLabel,
-            userEntitiesTeachers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "teacher" }) as TeacherUser[],
-            userEntitiesCorporates: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "corporate" }) as CorporateUser[],
+            userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
         }),
     };
 }, sessionOptions);
@@ -47,16 +46,14 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 interface Props {
     user: User,
     userEntitiesWithLabel: Entity[],
-    userEntitiesTeachers: TeacherUser[],
-    userEntitiesCorporates: CorporateUser[],
+    userEntitiesApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
 }
 
-export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) {
+export default function Home({ user, userEntitiesWithLabel, userEntitiesApprovers }: Props) {
     const [workflows, setWorkflows] = useState<EditableApprovalWorkflow[]>([]);
     const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | undefined>(undefined);
     const [entityId, setEntityId] = useState<string | null | undefined>(null);
-    const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
-    const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
+    const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
     const [isAdding, setIsAdding] = useState<boolean>(false); // used to temporary timeout new workflow button. With animations, clicking too fast might cause state inconsistencies between renders.
     const [isLoading, setIsLoading] = useState<boolean>(false);
     const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
@@ -65,21 +62,15 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
 
     useEffect(() => {
         if (entityId) {
-            setEntityTeachers(
-                userEntitiesTeachers.filter(teacher =>
-                    teacher.entities.some(entity => entity.id === entityId)
-                )
-            );
-            setEntityCorporates(
-                userEntitiesCorporates.filter(corporate =>
-                    corporate.entities.some(entity => entity.id === entityId)
+            setEntityApprovers(
+                userEntitiesApprovers.filter(approver =>
+                    approver.entities.some(entity => entity.id === entityId)
                 )
             );
         } else {
-            setEntityTeachers([]);
-            setEntityCorporates([]);
+            setEntityApprovers([]);
         }
-    }, [entityId, userEntitiesTeachers, userEntitiesCorporates]);
+    }, [entityId, userEntitiesApprovers]);
 
     const currentWorkflow = workflows.find(wf => wf.id === selectedWorkflowId);
 
@@ -129,7 +120,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                 setIsLoading(false);
                 return;
             })
-        
+
         console.log("Form submitted! Filtered Values:", filteredWorkflows);
     };
 
@@ -321,8 +312,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                             <WorkflowForm
                                                 workflow={currentWorkflow}
                                                 onWorkflowChange={onWorkflowChange}
-                                                entityTeachers={entityTeachers}
-                                                entityCorporates={entityCorporates}
+                                                entityApprovers={entityApprovers}
                                                 isLoading={isLoading}
                                                 isRedirecting={isRedirecting}
                                             />