diff --git a/apps/frontend/src/modules/assessmentRequestManagement/modals/AssessmentRequestManagementFormModal.tsx b/apps/frontend/src/modules/assessmentRequestManagement/modals/AssessmentRequestManagementFormModal.tsx
index ae6047e..f91a643 100644
--- a/apps/frontend/src/modules/assessmentRequestManagement/modals/AssessmentRequestManagementFormModal.tsx
+++ b/apps/frontend/src/modules/assessmentRequestManagement/modals/AssessmentRequestManagementFormModal.tsx
@@ -1,4 +1,14 @@
-import { Button, Flex, Modal, ScrollArea } from "@mantine/core";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/shadcn/components/ui/dialog";
+import { Button } from "@/shadcn/components/ui/button";
+import { ScrollArea } from "@/shadcn/components/ui/scroll-area";
+// import { Button, Flex, Modal, ScrollArea } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { getRouteApi } from "@tanstack/react-router";
@@ -124,91 +134,96 @@ export default function AssessmentRequestManagementFormModal({
 	const { status } = form.values;
 
 	return (
-		<Modal opened={isOpen} onClose={onClose} title="Detail Permohonan Asesmen">
-			<ScrollArea style={{ height: "400px", paddingRight: "15px" }} scrollbarSize={8}>
-				{createInputComponents({
-					disableAll: mutation.isPending,
-					readonlyAll: true,
-					inputs: [
-						{
-							type: "text",
-							label: "Tanggal",
-							...form.getInputProps("tanggal"),
-						},
-						{
-							type: "text",
-							label: "Nama",
-							...form.getInputProps("nama"),
-						},
-						{
-							type: "text",
-							label: "Posisi",
-							...form.getInputProps("posisi"),
-						},
-						{
-							type: "text",
-							label: "Pengalaman Kerja",
-							...form.getInputProps("pengalamanKerja"),
-						},
-						{
-							type: "text",
-							label: "Email",
-							...form.getInputProps("email"),
-						},
-						{
-							type: "text",
-							label: "Nama Perusahaan",
-							...form.getInputProps("namaPerusahaan"),
-						},
-						{
-							type: "text",
-							label: "Alamat",
-							...form.getInputProps("alamat"),
-						},
-						{
-							type: "text",
-							label: "Nomor Telepon",
-							...form.getInputProps("nomorTelepon"),
-						},
-						{
-							type: "text",
-							label: "Username",
-							...form.getInputProps("username"),
-						},
-						{
-							type: "text",
-							label: "Status",
-							...form.getInputProps("status"),
-						},
-					],
-				})}
+		<Dialog open={isOpen} onOpenChange={onClose}>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Detail Permohonan Asesmen</DialogTitle>
+				</DialogHeader>
+				<DialogDescription>
+					<ScrollArea className="h-[400px] w-full rounded-md p-4">
+						{createInputComponents({
+							disableAll: mutation.isPending,
+							readonlyAll: true,
+							inputs: [
+								{
+									type: "text",
+									label: "Tanggal",
+									...form.getInputProps("tanggal"),
+								},
+								{
+									type: "text",
+									label: "Nama",
+									...form.getInputProps("nama"),
+								},
+								{
+									type: "text",
+									label: "Posisi",
+									...form.getInputProps("posisi"),
+								},
+								{
+									type: "text",
+									label: "Pengalaman Kerja",
+									...form.getInputProps("pengalamanKerja"),
+								},
+								{
+									type: "text",
+									label: "Email",
+									...form.getInputProps("email"),
+								},
+								{
+									type: "text",
+									label: "Nama Perusahaan",
+									...form.getInputProps("namaPerusahaan"),
+								},
+								{
+									type: "text",
+									label: "Alamat",
+									...form.getInputProps("alamat"),
+								},
+								{
+									type: "text",
+									label: "Nomor Telepon",
+									...form.getInputProps("nomorTelepon"),
+								},
+								{
+									type: "text",
+									label: "Username",
+									...form.getInputProps("username"),
+								},
+								{
+									type: "text",
+									label: "Status",
+									...form.getInputProps("status"),
+								},
+							],
+						})}
 
-				<Flex justify="flex-end" align="center" gap="lg" mt="lg">
-					<Button variant="outline" onClick={onClose} disabled={mutation.isPending}>
-						Tutup
-					</Button>
-					{status !== "selesai" && (
-						<>
-							<Button
-								variant="filled"
-								color="red"
-								onClick={() => handleStatusChange("ditolak")}
-								disabled={mutation.isPending}
-							>
-								Tolak
+						<div className="flex justify-end gap-4 mt-4">
+							<Button onClick={onClose} variant="outline" disabled={mutation.isPending}>
+								Tutup
 							</Button>
-							<Button
-								variant="filled"
-								color="blue"
-								onClick={() => handleStatusChange("diterima")}
-								disabled={mutation.isPending}
-							>
-								Terima
-							</Button>
-						</>
-					)}
-				</Flex>
-			</ScrollArea>
-		</Modal>
+							{status !== "selesai" && (
+								<>
+									<Button
+										onClick={() => handleStatusChange("ditolak")}
+										variant="destructive"
+										disabled={mutation.isPending}
+									>
+										Tolak
+									</Button>
+									<Button
+										onClick={() => handleStatusChange("diterima")}
+										variant="default"
+										disabled={mutation.isPending}
+									>
+										Terima
+									</Button>
+								</>
+							)}
+						</div>
+					</ScrollArea>
+				</DialogDescription>
+			</DialogContent>
+		</Dialog>
 	);
 }