diff --git a/frontend/src/views/RoleView.vue b/frontend/src/views/RoleView.vue
index 047e521..a2b03cc 100644
--- a/frontend/src/views/RoleView.vue
+++ b/frontend/src/views/RoleView.vue
@@ -155,8 +155,12 @@ onMounted(async () => {
 		document.querySelector("#role-upsert-modal");
 	const $deleteModalElement: HTMLElement | null =
 		document.querySelector("#role-delete-modal");
-	roleUpsertModal.value = new Modal($upsertModalElement, {});
-	roleDeleteModal.value = new Modal($deleteModalElement, {});
+	if ($upsertModalElement) {
+		roleUpsertModal.value = new Modal($upsertModalElement, {});
+	}
+	if ($deleteModalElement) {
+		roleDeleteModal.value = new Modal($deleteModalElement, {});
+	}
 });
 
 const handleUpsertModalSubmit = async (data: RoleUpsertModel) => {
diff --git a/frontend/src/views/UserView.vue b/frontend/src/views/UserView.vue
index 0be3090..bb119be 100644
--- a/frontend/src/views/UserView.vue
+++ b/frontend/src/views/UserView.vue
@@ -192,8 +192,12 @@ onMounted(async () => {
 		document.querySelector("#user-upsert-modal");
 	const $deleteModalElement: HTMLElement | null =
 		document.querySelector("#user-delete-modal");
-	userUpsertModal.value = new Modal($upsertModalElement, {});
-	userDeleteModal.value = new Modal($deleteModalElement, {});
+	if ($upsertModalElement) {
+		userUpsertModal.value = new Modal($upsertModalElement, {});
+	}
+	if ($deleteModalElement) {
+		userDeleteModal.value = new Modal($deleteModalElement, {});
+	}
 });
 
 const handleUpsertUserSubmit = async (data: UserUpsertSubmitModel) => {