diff --git a/src/components/ApprovalWorkflows/RequestedBy.tsx b/src/components/ApprovalWorkflows/RequestedBy.tsx
index e3c8d7da..536c0e63 100644
--- a/src/components/ApprovalWorkflows/RequestedBy.tsx
+++ b/src/components/ApprovalWorkflows/RequestedBy.tsx
@@ -19,7 +19,7 @@ export default function RequestedBy({ prefix, name, profileImage }: Props) {
                 <div className="flex items-center space-x-2">
                     <p className="text-xs font-medium text-gray-800">{prefix} {name}</p>
                     <Image
-                        src={profileImage}
+                        src={profileImage ? profileImage : "/defaultAvatar.png"}
                         alt={name}
                         width={24}
                         height={24}
diff --git a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
index 9b647847..9659da3c 100644
--- a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
+++ b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
@@ -13,11 +13,11 @@ export default function UserWithProfilePic({ prefix, name, profileImage, textSiz
         <div className="flex items-center space-x-2">
             <p className={textClassName}>{prefix} {name}</p>
             <Image
-                src={profileImage}
+                src={profileImage ? profileImage : "/defaultAvatar.png"}
                 alt={name}
                 width={24}
                 height={24}
-                className="rounded-full"
+                className="rounded-full h-auto"
             />
         </div>
     );
diff --git a/src/demo/approval_workflows.json b/src/demo/approval_workflows.json
index 3f8c03e7..8966eb9e 100644
--- a/src/demo/approval_workflows.json
+++ b/src/demo/approval_workflows.json
@@ -2,7 +2,7 @@
     {
         "id": "kajhfakscbka-asacaca-acawesae",
         "name": "English Exam 1st Quarter 2025",
-        "entityId": "ae64d98e-18e4-4978-b600-c542a5b43c2d",
+        "entityId": "64a92896-fa8c-4908-95f3-23ffe05560c5",
         "modules": [
             "reading",
             "writing"
@@ -15,13 +15,13 @@
                 "stepType": "form-intake",
                 "stepNumber": 1,
                 "completed": true,
-                "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                "completedBy": "5fZibjknlJdfIZVndlV2FIdamtn1",
                 "completedDate": 1737712243906,
                 "firstStep": true,
                 "assignees": [
-                    "fd5fce42-4bcc-4150-a143-b484e750b265",
-                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
-                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                    "5fZibjknlJdfIZVndlV2FIdamtn1",
+                    "50jqJuESQNX0Qas64B5JZBQTIiq1",
+                    "2rtgJKmBXfWFzrtG8AjFgyrGBcp1"
                 ],
                 "comments": "This is a random comment\nThis is a random comment\nThis is a random comment\nThis is a random comment\nThis is a random comment\n"
             },
@@ -29,12 +29,12 @@
                 "stepType": "approval-by",
                 "stepNumber": 2,
                 "completed": true,
-                "completedBy": "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
+                "completedBy": "50jqJuESQNX0Qas64B5JZBQTIiq1",
                 "completedDate": 1737712243906,
                 "assignees": [
-                    "fd5fce42-4bcc-4150-a143-b484e750b265",
-                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
-                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                    "5fZibjknlJdfIZVndlV2FIdamtn1",
+                    "50jqJuESQNX0Qas64B5JZBQTIiq1",
+                    "2rtgJKmBXfWFzrtG8AjFgyrGBcp1"
                 ],
                 "comments": "This is a random comment"
             },
@@ -43,9 +43,9 @@
                 "stepNumber": 3,
                 "completed": false,
                 "assignees": [
-                    "fd5fce42-4bcc-4150-a143-b484e750b265",
-                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
-                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                    "5fZibjknlJdfIZVndlV2FIdamtn1",
+                    "50jqJuESQNX0Qas64B5JZBQTIiq1",
+                    "2rtgJKmBXfWFzrtG8AjFgyrGBcp1"
                 ],
                 "comments": "This is a random comment"
             },
@@ -54,7 +54,7 @@
                 "stepNumber": 4,
                 "completed": false,
                 "assignees": [
-                    "fd5fce42-4bcc-4150-a143-b484e750b265"
+                    "50jqJuESQNX0Qas64B5JZBQTIiq1"
                 ],
                 "comments": "This is a random comment"
             },
@@ -64,8 +64,8 @@
                 "completed": false,
                 "finalStep": true,
                 "assignees": [
-                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
-                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                    "50jqJuESQNX0Qas64B5JZBQTIiq1",
+                    "2rtgJKmBXfWFzrtG8AjFgyrGBcp1"
                 ],
                 "comments": "This is a random comment"
             }
diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index 98e09659..32e3a2b1 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -234,7 +234,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                             <span key={user.id}>
                                                                 <UserWithProfilePic
                                                                     textSize="text-sm"
-                                                                    prefix={getUserTypeLabelShort(user.type)}
+                                                                    prefix={`- ${getUserTypeLabelShort(user.type)}`}
                                                                     name={user.name}
                                                                     profileImage={user.profilePicture}
                                                                 />
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index 556e6694..30dae0b7 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -17,15 +17,15 @@ import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
-import { ChangeEvent, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { BsTrash } from "react-icons/bs";
 import { FaRegEdit } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import { toast, ToastContainer } from "react-toastify";
 
-import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
-import { FaRegClone } from "react-icons/fa6";
 import Input from "@/components/Low/Input";
+import { FaRegClone } from "react-icons/fa6";
+import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
 
 const columnHelper = createColumnHelper<ApprovalWorkflow>();
 
@@ -362,7 +362,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                         </div>
                     </div>
 
-                    <div className="px-6 pb-4 bg-purple-100 rounded-2xl">
+                    <div className="px-6 pb-4 bg-mti-purple-ultralight rounded-2xl border-2 border-mti-purple-light border-opacity-40">
                         <table
                             className="w-full table-auto border-separate border-spacing-y-2"
                             style={{ tableLayout: "auto" }}
@@ -371,7 +371,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                                 {table.getHeaderGroups().map((headerGroup) => (
                                     <tr key={headerGroup.id}>
                                         {headerGroup.headers.map((header) => (
-                                            <th key={header.id} className="px-3 py-2 text-left text-purple-900">
+                                            <th key={header.id} className="px-3 py-2 text-left text-mti-purple-ultradark">
                                                 {header.isPlaceholder
                                                     ? null
                                                     : flexRender(
@@ -389,12 +389,12 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                                         key={row.id}
                                         onClick={() => window.location.href = `/approval-workflows/${row.original.id}`}
                                         style={{ cursor: "pointer" }}
-                                        className="hover:bg-purple-100"
+                                        className="bg-purple-50"
                                     >
                                         {row.getVisibleCells().map((cell, cellIndex) => {
                                             const lastCellIndex = row.getVisibleCells().length - 1;
 
-                                            let cellClasses = "pl-3 pr-4 py-2 bg-purple-50 border-y-2 border-purple-300";
+                                            let cellClasses = "pl-3 pr-4 py-2 border-y-2 border-mti-purple-light border-opacity-60";
                                             if (cellIndex === 0) {
                                                 cellClasses += " border-l-2 rounded-l-2xl";
                                             }
@@ -414,10 +414,6 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
 
                         </table>
                     </div>
-
-
-
-
                 </Layout>
             )}
         </>