diff --git a/apps/frontend/src/modules/aspectManagement/modals/AspectDeleteModal.tsx b/apps/frontend/src/modules/aspectManagement/modals/AspectDeleteModal.tsx
new file mode 100644
index 0000000..c971a90
--- /dev/null
+++ b/apps/frontend/src/modules/aspectManagement/modals/AspectDeleteModal.tsx
@@ -0,0 +1,97 @@
+import client from "@/honoClient";
+import { Button, Flex, Modal, Text } from "@mantine/core";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getRouteApi, useSearch } from "@tanstack/react-router";
+import { deleteAspect } from "../queries/aspectQueries";
+import { notifications } from "@mantine/notifications";
+import fetchRPC from "@/utils/fetchRPC";
+
+const routeApi = getRouteApi("/_dashboardLayout/aspect/");
+
+export default function AspectDeleteModal() {
+	const queryClient = useQueryClient();
+
+	const searchParams = useSearch({ from: "/_dashboardLayout/aspect/" }) as {
+		delete: string;
+	};
+
+	const aspectId = searchParams.delete;
+	const navigate = routeApi.useNavigate();
+
+	const aspectQuery = useQuery({
+		queryKey: ["management-aspect", aspectId],
+		queryFn: async () => {
+			if (!aspectId) return null;
+			return await fetchRPC(
+				client["management-aspect"][":id"].$get({
+					param: {
+						id: aspectId,
+					},
+					query: {},
+				})
+			);
+		},
+	});
+
+	const mutation = useMutation({
+		mutationKey: ["deleteAspectMutation"],
+		mutationFn: async ({ id }: { id: string }) => {
+			return await deleteAspect(id);
+		},
+		onError: (error: unknown) => {
+			if (error instanceof Error) {
+				notifications.show({
+					message: error.message,
+					color: "red",
+				});
+			}
+		},
+		onSuccess: () => {
+			notifications.show({
+				message: "Aspek berhasil dihapus.",
+				color: "green",
+			});
+			queryClient.removeQueries({ queryKey: ["management-aspect", aspectId] });
+			queryClient.invalidateQueries({ queryKey: ["management-aspect"] });
+			navigate({ search: {} });
+		},
+	});
+
+	const isModalOpen = Boolean(searchParams.delete && aspectQuery.data);
+
+	return (
+		<Modal
+			opened={isModalOpen}
+			onClose={() => navigate({ search: {} })}
+			title={`Konfirmasi Hapus`}
+		>
+			<Text size="sm">
+				Apakah Anda yakin ingin menghapus aspek{" "}
+				<Text span fw={700}>
+					{aspectQuery.data?.name}
+				</Text>
+				? Tindakan ini tidak dapat diubah.
+			</Text>
+
+			{/* Buttons */}
+			<Flex justify="flex-end" align="center" gap="lg" mt="lg">
+				<Button
+					variant="outline"
+					onClick={() => navigate({ search: {} })}
+					disabled={mutation.isPending}
+				>
+					Batal
+				</Button>
+				<Button
+					variant="subtle"
+					type="submit"
+					color="red"
+					loading={mutation.isPending}
+					onClick={() => mutation.mutate({ id: aspectId })}
+				>
+					Hapus Aspek
+				</Button>
+			</Flex>
+		</Modal>
+	);
+}
\ No newline at end of file
diff --git a/apps/frontend/src/modules/aspectManagement/modals/AspectFormModal.tsx b/apps/frontend/src/modules/aspectManagement/modals/AspectFormModal.tsx
new file mode 100644
index 0000000..cee975f
--- /dev/null
+++ b/apps/frontend/src/modules/aspectManagement/modals/AspectFormModal.tsx
@@ -0,0 +1,224 @@
+import { Button, Flex, Modal, ScrollArea, TextInput, Group, Text } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getRouteApi } from "@tanstack/react-router";
+import { createAspect, updateAspect, getAspectByIdQueryOptions } from "../queries/aspectQueries";
+import { TbDeviceFloppy } from "react-icons/tb";
+import { useEffect } from "react";
+import { notifications } from "@mantine/notifications";
+import FormResponseError from "@/errors/FormResponseError";
+import { createId } from "@paralleldrive/cuid2";
+
+// Initialize route API
+const routeApi = getRouteApi("/_dashboardLayout/aspect/");
+
+export default function AspectFormModal() {
+    const queryClient = useQueryClient();
+    const navigate = routeApi.useNavigate();
+    const searchParams = routeApi.useSearch();
+    const dataId = searchParams.detail || searchParams.edit;
+    const isModalOpen = Boolean(dataId || searchParams.create);
+    const formType = searchParams.detail ? "detail" : searchParams.edit ? "edit" : "create";
+
+    // Fetch aspect data if editing or viewing details
+    const aspectQuery = useQuery(getAspectByIdQueryOptions(dataId));
+
+    const modalTitle = `${formType.charAt(0).toUpperCase() + formType.slice(1)} Aspek`;
+
+    const form = useForm({
+        initialValues: {
+            id: "",
+            name: "",
+            subAspects: [{ id: "", name: "", questionCount: 0 }] as { id: string; name: string; questionCount: number }[],
+        },
+    });
+
+    useEffect(() => {
+        const data = aspectQuery.data;
+
+        if (!data) {
+            form.reset();
+            return;
+        }
+
+        form.setValues({
+            id: data.id,
+            name: data.name,
+            subAspects: data.subAspects?.map(subAspect => ({
+                id: subAspect.id || "",
+                name: subAspect.name,
+                questionCount: subAspect.questionCount || 0,
+            })) || [],
+        });
+
+        form.setErrors({});
+    }, [aspectQuery.data]);
+
+    const mutation = useMutation({
+        mutationKey: ["aspectMutation"],
+        mutationFn: async (
+            options:
+                | { action: "edit"; data: Parameters<typeof updateAspect>[0] }
+                | { action: "create"; data: Parameters<typeof createAspect>[0] }
+        ) => {
+            return options.action === "edit"
+                ? await updateAspect(options.data)
+                : await createAspect(options.data);
+        },
+        onError: (error: unknown) => {
+            if (error instanceof FormResponseError) {
+                form.setErrors(error.formErrors);
+                return;
+            }
+
+            if (error instanceof Error) {
+                notifications.show({
+                    message: error.message,
+                    color: "red",
+                });
+            }
+        },
+    });
+
+    type CreateAspectPayload = {
+        name: string;
+        subAspects?: string;
+    };
+
+    type EditAspectPayload = {
+        id: string;
+        name: string;
+        subAspects?: string;
+    };
+
+    const handleSubmit = async (values: typeof form.values) => {
+        try {
+            let payload: CreateAspectPayload | EditAspectPayload;
+
+            if (formType === "create") {
+                payload = {
+                    name: values.name,
+                    subAspects: values.subAspects.length > 0
+                        ? JSON.stringify(
+                            values.subAspects
+                                .filter(subAspect => subAspect.name.trim() !== "")
+                                .map(subAspect => subAspect.name)
+                        )
+                        : "",
+                };
+                await createAspect(payload);
+            } else if (formType === "edit") {
+                payload = {
+                    id: values.id,
+                    name: values.name,
+                    subAspects: values.subAspects.length > 0
+                        ? JSON.stringify(
+                            values.subAspects
+                                .filter(subAspect => subAspect.name.trim() !== "")
+                                .map(subAspect => ({
+                                    id: subAspect.id || "",
+                                    name: subAspect.name,
+                                    questionCount: subAspect.questionCount || 0,
+                                }))
+                        )
+                        : "",
+                };
+                await updateAspect(payload);
+            }            
+
+            queryClient.invalidateQueries({ queryKey: ["management-aspect"] });
+
+            notifications.show({
+                message: `Aspek ${formType === "create" ? "berhasil dibuat" : "berhasil diedit"}`,
+            });
+
+            navigate({ search: {} });
+        } catch (error) {
+            console.error("Error during submit:", error);
+        }
+    };
+
+    return (
+        <Modal
+            opened={isModalOpen}
+            onClose={() => navigate({ search: {} })}
+            title={modalTitle}
+            scrollAreaComponent={ScrollArea.Autosize}
+            size="md"
+        >
+            <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
+                <TextInput
+                    type="text"
+                    label="Nama"
+                    {...form.getInputProps("name")}
+                    disabled={formType === "detail"}
+                />
+
+                {form.values.subAspects.map((field, index) => (
+                    <Group key={index} mt="md" align="center">
+                        <TextInput
+                            type="text"
+                            label={`Sub Aspek ${index + 1}`}
+                            value={field.name}
+                            onChange={(event) => {
+                                const newSubAspects = [...form.values.subAspects];
+                                newSubAspects[index] = { ...newSubAspects[index], name: event.target.value };
+                                form.setValues({ subAspects: newSubAspects });
+                            }}
+                            disabled={formType === "detail"}
+                        />
+                        <Text>Jumlah Soal: {field.questionCount}</Text>
+                        {formType !== "detail" && (
+                            <Button
+                                variant="outline"
+                                onClick={() => {
+                                    const newSubAspects = form.values.subAspects.filter((_, i) => i !== index);
+                                    form.setValues({ subAspects: newSubAspects });
+                                }}
+                            >
+                                Hapus
+                            </Button>
+                        )}
+                    </Group>
+                ))}
+
+                {formType !== "detail" && (
+                    <Button
+                        variant="outline"
+                        mt="md"
+                        onClick={() => {
+                            const newSubAspects = [
+                                ...form.values.subAspects,
+                                { id: createId(), name: "", questionCount: 0 }
+                            ];
+                            form.setValues({ subAspects: newSubAspects });
+                        }}
+                    >
+                        Tambah Sub Aspek
+                    </Button>
+                )}
+
+                {/* Buttons */}
+                <Flex justify="flex-end" align="center" gap="lg" mt="lg">
+                    <Button
+                        variant="outline"
+                        onClick={() => navigate({ search: {} })}
+                        disabled={mutation.isPending}
+                    >
+                        Tutup
+                    </Button>
+                    {formType !== "detail" && (
+                        <Button
+                            variant="filled"
+                            leftSection={<TbDeviceFloppy size={20} />}
+                            type="submit"
+                            loading={mutation.isPending}
+                        >
+                            Simpan
+                        </Button>
+                    )}
+                </Flex>
+            </form>
+        </Modal>
+    );
+}
\ No newline at end of file