diff --git a/src/app/dashboard/(auth)/users/_modals/DeleteModal/DeleteModal.tsx b/src/app/dashboard/(auth)/users/_modals/DeleteModal/DeleteModal.tsx
index 23b1622..f19fcd9 100644
--- a/src/app/dashboard/(auth)/users/_modals/DeleteModal/DeleteModal.tsx
+++ b/src/app/dashboard/(auth)/users/_modals/DeleteModal/DeleteModal.tsx
@@ -1,9 +1,88 @@
-import React from 'react'
+"use client";
+import { UserFormData } from "@/features/dashboard/users/formSchemas/userFormDataSchema";
+import { useRouter } from "next/navigation";
+import React, { useState } from "react";
+import {
+	Avatar,
+	Button,
+	Center,
+	Flex,
+	Modal,
+	ScrollArea,
+	Text,
+	Stack,
+	TextInput,
+	Title,
+} from "@mantine/core";
+import deleteUser from "@/features/dashboard/users/actions/deleteUser";
+import { showNotification } from "@/utils/notifications";
 
-// TODO: Implement Delete Modal
-
-export default function DeleteModal() {
-  return (
-    <div>DeleteModal</div>
-  )
+interface Props {
+	data: UserFormData;
+}
+
+export default function DeleteModal(props: Props) {
+	const router = useRouter();
+
+	const [isSubmitting, setSubmitting] = useState(false);
+
+	/**
+	 * Closes the modal. It won't close if a submission is in progress.
+	 */
+	const closeModal = () => {
+		if (isSubmitting) return;
+		router.replace("?");
+	};
+
+    const confirmAction = () => {
+        setSubmitting(true)
+        deleteUser(props.data.id)
+            .then((response) => {
+                if (response.success){
+                    showNotification(response.message);
+                    router.replace("?")
+                    return;
+                } else {
+                    showNotification(response.message, "error")
+                }
+            })
+            .catch(() => {
+                //TODO: Handle Error
+            })
+            .finally(() => {
+                setSubmitting(false)
+            })
+    }
+
+	return (
+		<Modal opened onClose={closeModal} title={`Delete confirmation`}>
+			<Text size="sm">
+				Are you sure you want to delete user{" "}
+				<Text span fw={700}>
+					{props.data.name}
+				</Text>
+				? This action is irreversible.
+			</Text>
+			{/* Buttons */}
+			<Flex justify="flex-end" align="center" gap="lg" mt="lg">
+				<Button
+					variant="outline"
+					onClick={closeModal}
+					disabled={isSubmitting}
+				>
+					Cancel
+				</Button>
+				<Button
+					variant="subtle"
+					// leftSection={<TbDeviceFloppy size={20} />}
+					type="submit"
+					color="red"
+					loading={isSubmitting}
+                    onClick={confirmAction}
+				>
+					Delete User
+				</Button>
+			</Flex>
+		</Modal>
+	);
 }
diff --git a/src/app/dashboard/(auth)/users/_modals/FormModal/FormModal.tsx b/src/app/dashboard/(auth)/users/_modals/FormModal/FormModal.tsx
index 81bfd7d..441ede1 100644
--- a/src/app/dashboard/(auth)/users/_modals/FormModal/FormModal.tsx
+++ b/src/app/dashboard/(auth)/users/_modals/FormModal/FormModal.tsx
@@ -70,7 +70,7 @@ export default function FormModal(props: Props) {
 						form.setErrors(response.errors);
 						return;
 					}
-					showNotification(response.message);
+					showNotification(response.message, "error");
 					return;
 				}
 			})
diff --git a/src/app/dashboard/(auth)/users/page.tsx b/src/app/dashboard/(auth)/users/page.tsx
index a3dc113..606126a 100644
--- a/src/app/dashboard/(auth)/users/page.tsx
+++ b/src/app/dashboard/(auth)/users/page.tsx
@@ -39,7 +39,8 @@ export default async function UsersPage({searchParams}: Props) {
 		}
 
 		if (searchParams.delete){
-			return <DeleteModal />
+			const userDetail = await getUserDetailById(searchParams.delete)
+			return <DeleteModal data={userDetail} />
 		}
 
 		return null;
diff --git a/src/features/dashboard/users/actions/deleteUser.ts b/src/features/dashboard/users/actions/deleteUser.ts
new file mode 100644
index 0000000..9ad686b
--- /dev/null
+++ b/src/features/dashboard/users/actions/deleteUser.ts
@@ -0,0 +1,44 @@
+"use server";
+
+import checkPermission from "@/features/auth/tools/checkPermission";
+import prisma from "@/db";
+import { revalidatePath } from "next/cache";
+
+/**
+ * Deletes a user from the database based on their ID.
+ * 
+ * @param {string} id The unique identifier of the user to be deleted.
+ * @returns A promise that resolves to an object indicating the success or failure of the operation.
+ */
+export default async function deleteUser(id: string) {
+
+    // Check user permission
+	if (!(await checkPermission())) return {
+        success: false,
+        message: "Unauthorized"
+    } as const;
+
+    // Find the user in the database
+	const user = await prisma.user.findFirst({
+		where: { id },
+	});
+
+    // Handle case where user is not found
+    if (!user) return {
+        success: false,
+        message: "User not found"
+    } as const;
+
+    // Delete the user
+	await prisma.user.delete({
+        where: { id }
+    });
+
+    // Revalidate cache
+    revalidatePath(".");
+
+    return {
+        success: true,
+        message: `User ${user.name} has been successfully deleted`
+    } as const;
+}