diff --git a/src/pages/api/approval-workflows/[id]/clone.ts b/src/pages/api/approval-workflows/[id]/clone.ts
deleted file mode 100644
index 73fd4153..00000000
--- a/src/pages/api/approval-workflows/[id]/clone.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
-import { sessionOptions } from "@/lib/session";
-import { requestUser } from "@/utils/api";
-import { createApprovalWorkflow } from "@/utils/approval.workflows.be";
-import { withIronSessionApiRoute } from "iron-session/next";
-import type { NextApiRequest, NextApiResponse } from "next";
-
-export default withIronSessionApiRoute(handler, sessionOptions);
-
-async function handler(req: NextApiRequest, res: NextApiResponse) {
-    if (req.method === "POST") return await post(req, res);
-}
-
-async function post(req: NextApiRequest, res: NextApiResponse) {
-    const user = await requestUser(req, res);
-    if (!user) return res.status(401).json({ ok: false });
-
-    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
-        return res.status(403).json({ ok: false });
-    }
-
-    const approvalWorkflow: ApprovalWorkflow = req.body;
-
-    if (approvalWorkflow)
-        return res.status(201).json(await createApprovalWorkflow("configured-workflows", approvalWorkflow));
-}
diff --git a/src/pages/approval-workflows/[id]/clone.tsx b/src/pages/approval-workflows/[id]/clone.tsx
deleted file mode 100644
index e580d50c..00000000
--- a/src/pages/approval-workflows/[id]/clone.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-import Tip from "@/components/ApprovalWorkflows/Tip";
-import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
-import Layout from "@/components/High/Layout";
-import Button from "@/components/Low/Button";
-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, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
-import { sessionOptions } from "@/lib/session";
-import { redirect, serialize } from "@/utils";
-import { requestUser } from "@/utils/api";
-import { getEntities } from "@/utils/entities.be";
-import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { getEntitiesUsers } from "@/utils/users.be";
-import { uuidv4 } from "@firebase/util";
-import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
-import { withIronSessionSsr } from "iron-session/next";
-import Head from "next/head";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { BsChevronLeft } from "react-icons/bs";
-import { GrClearOption } from "react-icons/gr";
-import { toast, ToastContainer } from "react-toastify";
-import { useRouter } from "next/router";
-import axios from "axios";
-import { getApprovalWorkflow, getFormIntakersByEntity } from "@/utils/approval.workflows.be";
-
-export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
-    const user = await requestUser(req, res);
-    if (!user) return redirect("/login")
-
-    if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
-        return redirect("/")
-
-    const { id } = params as { id: string };
-
-    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow("configured-workflows", id);
-
-    if (!workflow)
-        return redirect("/approval-workflows")
-
-    const userEntitiesWithLabel = await getEntities(user.entities.map(entity => entity.id));
-
-    return {
-        props: serialize({
-            user,
-            workflow,
-            userEntitiesWithLabel,
-            entityUnavailableFormIntakers: await getFormIntakersByEntity(workflow.entityId),
-            userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: { $in: ["teacher", "corporate", "mastercorporate", "developer"] } }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
-        }),
-    };
-}, sessionOptions);
-
-interface Props {
-    user: User,
-    workflow: ApprovalWorkflow,
-    userEntitiesWithLabel: Entity[],
-    entityUnavailableFormIntakers: string[],
-    userEntitiesApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
-}
-
-export default function Home({ user, workflow, userEntitiesWithLabel, entityUnavailableFormIntakers, userEntitiesApprovers }: Props) {
-    const [cloneWorkflow, setCloneWorkflow] = useState<EditableApprovalWorkflow | null>(null);
-    const [entityId, setEntityId] = useState<string | null | undefined>(workflow.entityId);
-    const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
-    const [isLoading, setIsLoading] = useState<boolean>(false);
-    const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
-
-    const router = useRouter();
-
-    useEffect(() => {
-        if (entityId) {
-            setEntityApprovers(
-                userEntitiesApprovers.filter(approver =>
-                    approver.entities.some(entity => entity.id === entityId)
-                )
-            );
-        } else {
-            setEntityApprovers([]);
-        }
-    }, [entityId, userEntitiesApprovers]);
-
-    const ENTITY_OPTIONS = userEntitiesWithLabel.map(entity => ({
-        label: entity.label,
-        value: entity.id,
-        filter: (x: EditableApprovalWorkflow) => x.entityId === entity.id,
-    }));
-
-    useEffect(() => {
-        const editableSteps: EditableWorkflowStep[] = workflow.steps.map(step => ({
-            key: step.stepNumber + 999, // just making sure they are unique because new steps that users add will have key=3 key=4 etc
-            stepType: step.stepType,
-            stepNumber: step.stepNumber,
-            completed: false,
-            assignees: step.assignees.map(id => id),
-            firstStep: step.firstStep || false,
-            finalStep: step.finalStep || false,
-            onDelete: undefined,
-        }));
-
-        const editableWorkflow: EditableApprovalWorkflow = {
-            id: uuidv4(), // this id is only used in UI. it is ommited on submission to DB and lets mongo handle unique id.
-            name: workflow.name,
-            entityId: workflow.entityId,
-            requester: user.id,
-            startDate: Date.now(),
-            modules: workflow.modules,
-            status: "pending",
-            steps: editableSteps,
-        };
-
-        setCloneWorkflow(editableWorkflow);
-    }, []);
-
-    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        setIsLoading(true);
-
-        if (!cloneWorkflow) {
-            setIsLoading(false);
-            return;
-        }
-
-        for (const step of cloneWorkflow.steps) {
-            if (step.assignees.every(x => !x)) {
-                toast.warning("There is at least one empty step in the workflow.");
-                setIsLoading(false);
-                return;
-            }
-        }
-
-        const filteredWorkflow: ApprovalWorkflow = {
-            ...cloneWorkflow,
-            steps: cloneWorkflow.steps.map(step => ({
-                ...step,
-                completed: false,
-                assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
-            }))
-        };
-
-        axios
-            .post(`/api/approval-workflows/${workflow._id}/clone`, filteredWorkflow)
-            .then(() => {
-                toast.success("Approval Workflow cloned successfully.");
-                setIsRedirecting(true);
-                router.push("/approval-workflows");
-            })
-            .catch((reason) => {
-                if (reason.response.status === 401) {
-                    toast.error("Not logged in!");
-                } else if (reason.response.status === 403) {
-                    toast.error("You do not have permission to clone Approval Workflows!");
-                } else {
-                    toast.error("Something went wrong, please try again later.");
-                }
-                setIsLoading(false);
-                console.log("Submitted Values:", filteredWorkflow);
-                return;
-            })
-
-    };
-
-    const onWorkflowChange = (wf: EditableApprovalWorkflow) => {
-        setCloneWorkflow(wf);
-    }
-
-    const handleEntityChange = (wf: EditableApprovalWorkflow, entityId: string) => {
-        const updatedWorkflow = {
-            ...wf,
-            entityId: entityId,
-            steps: wf.steps.map(step => ({
-                ...step,
-                assignees: step.assignees.map(() => null)
-            }))
-        }
-        onWorkflowChange(updatedWorkflow);
-    }
-
-    const handleResetWorkflow = () => {
-        if (!confirm("This action will reset all the fields in this workflow. Are you sure you want to proceed?")) return;
-        const newId = uuidv4();
-        const newWorkflow: EditableApprovalWorkflow = {
-            id: newId,
-            name: "",
-            entityId: "",
-            modules: [],
-            requester: user.id,
-            startDate: Date.now(),
-            status: "pending",
-            steps: [
-                { key: 9998, stepType: "form-intake", stepNumber: 1, completed: false, firstStep: true, finalStep: false, assignees: [null] },
-                { key: 9999, stepType: "approval-by", stepNumber: 2, completed: false, firstStep: false, finalStep: true, assignees: [null] },
-            ],
-        };
-        setCloneWorkflow(newWorkflow);
-    }
-
-    return (
-        <>
-            <Head>
-                <title> Clone Workflow | EnCoach</title>
-                <meta
-                    name="description"
-                    content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-                />
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-                <link rel="icon" href="/favicon.ico" />
-            </Head>
-            <ToastContainer />
-            {user && (
-                <Layout user={user} className="gap-6">
-                    <section className="flex items-center gap-2">
-                        <Link
-                            href="/approval-workflows"
-                            className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
-                            <BsChevronLeft />
-                        </Link>
-                        <h1 className="text-2xl font-semibold">Clone Workflow</h1>
-                    </section>
-
-                    <form onSubmit={handleSubmit}>
-                        {cloneWorkflow && (
-                            <>
-                                <div className="mb-8 flex flex-row gap-6 items-end">
-                                    <Input
-                                        label="Name:"
-                                        type="text"
-                                        name={cloneWorkflow.name}
-                                        placeholder="Enter workflow name"
-                                        value={cloneWorkflow.name}
-                                        onChange={(updatedName) => {
-                                            const updatedWorkflow = {
-                                                ...cloneWorkflow,
-                                                name: updatedName,
-                                            };
-                                            onWorkflowChange(updatedWorkflow);
-                                        }}
-                                    />
-                                    <Select
-                                        label="Entity:"
-                                        options={ENTITY_OPTIONS}
-                                        value={
-                                            cloneWorkflow.entityId === ""
-                                                ? null
-                                                : ENTITY_OPTIONS.find(option => option.value === cloneWorkflow.entityId)
-                                        }
-                                        onChange={(selectedEntity) => {
-                                            if (cloneWorkflow.entityId) {
-                                                if (!confirm("Clearing or changing entity will clear all the assignees for all steps in this workflow. Are you sure you want to proceed?")) return;
-                                            }
-                                            if (selectedEntity?.value) {
-                                                setEntityId(selectedEntity.value);
-                                                handleEntityChange(cloneWorkflow, selectedEntity.value);
-                                            }
-                                        }}
-                                        isClearable
-                                        placeholder="Enter workflow entity"
-                                    />
-                                    <Button
-                                        color="red"
-                                        variant="solid"
-                                        onClick={handleResetWorkflow}
-                                        type="button"
-                                        className="min-w-fit h-[72px] text-lg font-medium flex items-center gap-2 text-left"
-                                    >
-                                        Clear Workflow
-                                        <GrClearOption className="size-6" />
-                                    </Button>
-                                </div>
-
-                                <AnimatePresence mode="wait">
-                                    <LayoutGroup key="workflow">
-                                        <motion.div
-                                            key="form"
-                                            initial={{ opacity: 0, y: -30 }}
-                                            animate={{ opacity: 1, y: 0 }}
-                                            exit={{ opacity: 0, x: 60 }}
-                                            transition={{ duration: 0.20 }}
-                                        >
-                                            {(!cloneWorkflow.name || !cloneWorkflow.entityId) && (
-                                                <Tip text="Please fill in workflow name and associated entity to start configuring workflow." />
-                                            )}
-                                            <WorkflowForm
-                                                workflow={cloneWorkflow}
-                                                onWorkflowChange={onWorkflowChange}
-                                                entityApprovers={entityApprovers}
-                                                entityAvailableFormIntakers={entityApprovers.filter(approver => !entityUnavailableFormIntakers.includes(approver.id))}
-                                                isLoading={isLoading}
-                                                isRedirecting={isRedirecting}
-                                            />
-                                        </motion.div>
-                                    </LayoutGroup>
-                                </AnimatePresence>
-                            </>
-                        )}
-                    </form>
-                </Layout>
-            )}
-        </>
-    );
-}
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 49bdae1b..571dacf3 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -22,6 +22,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { BsChevronLeft, BsTrash } from "react-icons/bs";
+import { FaRegClone } from "react-icons/fa6";
 import { MdFormatListBulletedAdd } from "react-icons/md";
 import { toast, ToastContainer } from "react-toastify";
 import { v4 as uuidv4 } from 'uuid';
@@ -207,6 +208,26 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
         }
     };
 
+    const handleCloneWorkflow = (id: string) => {
+        const workflowToClone = workflows.find(wf => wf.id === id);
+        if (!workflowToClone) return;
+    
+        const newId = uuidv4();
+    
+        const clonedWorkflow: EditableApprovalWorkflow = {
+            ...workflowToClone,
+            id: newId,
+            steps: workflowToClone.steps.map(step => ({
+                ...step,
+                assignees: step.firstStep ? [] : [...step.assignees], // we can't have more than one form intaker per teacher per entity
+            })),
+        };
+    
+        setWorkflows(prev => [...prev, clonedWorkflow]);
+    
+        handleSelectWorkflow(newId);
+    };
+
     const handleDeleteWorkflow = (id: string) => {
         if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
 
@@ -256,7 +277,7 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
                         </div>
                     </section>
 
-                    <Tip text="Setting a teacher as a Form Intaker means the configured workflow will be instanciated when said teacher publishes an exam. Only one Form Intake per teacher per entity is allowed."/>
+                    <Tip text="Setting a teacher as a Form Intaker means the configured workflow will be instantiated when said teacher publishes an exam. Only one Form Intake per teacher per entity is allowed."/>
 
                     <section className="flex flex-row gap-6">
                         <Button
@@ -329,6 +350,16 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
                                         isClearable
                                         placeholder="Enter workflow entity"
                                     />
+                                    <Button
+                                        color="gray"
+                                        variant="solid"
+                                        onClick={() => handleCloneWorkflow(currentWorkflow.id)}
+                                        type="button"
+                                        className="min-w-fit h-[72px] text-lg font-medium flex items-center gap-2 text-left"
+                                    >
+                                        Clone Workflow
+                                        <FaRegClone className="size-6" />
+                                    </Button>
                                     <Button
                                         color="red"
                                         variant="solid"
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index 116e2625..5d957530 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -24,7 +24,6 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import { BsTrash } from "react-icons/bs";
 import { FaRegEdit } from "react-icons/fa";
-import { FaRegClone } from "react-icons/fa6";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import { toast, ToastContainer } from "react-toastify";
 
@@ -279,15 +278,6 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
                             <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
                         </button>
 
-                        <Link
-                            onClick={(e) => e.stopPropagation()}
-                            data-tip="Clone"
-                            href={`/approval-workflows/${row.original._id?.toString()}/clone`}
-                            className="cursor-pointer tooltip"
-                        >
-                            <FaRegClone className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-                        </Link>
-
                         {currentStep && !rejected && (
                             <Link
                                 onClick={(e) => e.stopPropagation()}
@@ -372,7 +362,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
                         </div>
                     </div>
 
-                    <Tip text="An exam submission will instanciate the approval workflow configured for the exam author. The exam will be valid only when all the steps of the workflow have been approved."></Tip>
+                    <Tip text="An exam submission will instantiate the approval workflow configured for the exam author. The exam will be valid only when all the steps of the workflow have been approved."></Tip>
 
                     <div className="px-6 pb-4 bg-mti-purple-ultralight rounded-2xl border-2 border-mti-purple-light border-opacity-40">
                         <table