diff --git a/frontend/src/components/Assistant.vue b/frontend/src/components/Assistant.vue
index 15e77fe..a94a2ba 100644
--- a/frontend/src/components/Assistant.vue
+++ b/frontend/src/components/Assistant.vue
@@ -289,22 +289,30 @@ onMounted(async () => {
 	initFlowbite();
 	const $upsertModalElement: HTMLElement | null =
 		document.querySelector("#user-upsert-modal");
-	userUpsertModal.value = new Modal($upsertModalElement, {});
+	if ($upsertModalElement) {
+		userUpsertModal.value = new Modal($upsertModalElement, {});
+	}
 	const $userDeleteModalElement: HTMLElement | null =
 		document.querySelector("#user-delete-modal");
-	userDeleteModal.value = new Modal(
-		$userDeleteModalElement,
-		{},
-		{
-			id: "user-delete-modal",
-		},
-	);
+	if ($userDeleteModalElement) {
+		userDeleteModal.value = new Modal(
+			$userDeleteModalElement,
+			{},
+			{
+				id: "user-delete-modal",
+			},
+		);
+	}
 	const $departmentDeleteModalElement: HTMLElement | null =
 		document.querySelector("#department-delete-modal");
-	departmentDeleteModal.value = new Modal($departmentDeleteModalElement, {});
+	if ($departmentDeleteModalElement) {
+		departmentDeleteModal.value = new Modal($departmentDeleteModalElement, {});
+	}
 	const $departmentUpsertModalElement: HTMLElement | null =
 		document.querySelector("#department-upsert-modal");
-	departmentUpsertModal.value = new Modal($departmentUpsertModalElement, {});
+	if ($departmentUpsertModalElement) {
+		departmentUpsertModal.value = new Modal($departmentUpsertModalElement, {});
+	}
 });
 </script>
 
diff --git a/frontend/src/views/BindDepartmentView.vue b/frontend/src/views/BindDepartmentView.vue
index 46ddc25..4d7d2c0 100644
--- a/frontend/src/views/BindDepartmentView.vue
+++ b/frontend/src/views/BindDepartmentView.vue
@@ -6,7 +6,7 @@
     </div>
     <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 gap-y-3 sm:gap-y-0">
       <form class="w-full sm:w-auto flex flex-col xs:flex-row gap-2 xs:gap-3 items-stretch xs:items-center">
-        <div class="flex-grow">
+        <div class="flex-grow"> 
           <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only">Search</label>
           <div class="relative">
             <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
@@ -194,11 +194,9 @@ onMounted(async () => {
 	const $bindModalElement: HTMLElement | null = document.querySelector(
 		"#department-bind-modal",
 	);
-	departmentBindModal.value = new Modal(
-		$bindModalElement,
-		{},
-		{ id: "department-bind-modal" },
-	);
+	if ($bindModalElement) {
+		departmentBindModal.value = new Modal($bindModalElement, {});
+	}
 	const $unbindModalElement: HTMLElement | null = document.querySelector(
 		"#department-unbind-modal",
 	);
diff --git a/frontend/src/views/BindPermissionView.vue b/frontend/src/views/BindPermissionView.vue
index 529593d..e325855 100644
--- a/frontend/src/views/BindPermissionView.vue
+++ b/frontend/src/views/BindPermissionView.vue
@@ -194,11 +194,9 @@ onMounted(async () => {
 	const $bindModalElement: HTMLElement | null = document.querySelector(
 		"#permission-bind-modal",
 	);
-	permissionBindModal.value = new Modal(
-		$bindModalElement,
-		{},
-		{ id: "permission-bind-modal" },
-	);
+	if ($bindModalElement) {
+		permissionBindModal.value = new Modal($bindModalElement, {});
+	}
 	const $unbindModalElement: HTMLElement | null = document.querySelector(
 		"#permission-unbind-modal",
 	);
diff --git a/frontend/src/views/BindPositionView.vue b/frontend/src/views/BindPositionView.vue
index a1c8063..77522bc 100644
--- a/frontend/src/views/BindPositionView.vue
+++ b/frontend/src/views/BindPositionView.vue
@@ -184,11 +184,9 @@ onMounted(async () => {
 	const $bindModalElement: HTMLElement | null = document.querySelector(
 		"#position-bind-modal",
 	);
-	positionBindModal.value = new Modal(
-		$bindModalElement,
-		{},
-		{ id: "position-bind-modal" },
-	);
+	if ($bindModalElement) {
+		positionBindModal.value = new Modal($bindModalElement, {});
+	}
 	const $unbindModalElement: HTMLElement | null = document.querySelector(
 		"#position-unbind-modal",
 	);
diff --git a/frontend/src/views/BindRoleView.vue b/frontend/src/views/BindRoleView.vue
index e9a4dcb..ea90b13 100644
--- a/frontend/src/views/BindRoleView.vue
+++ b/frontend/src/views/BindRoleView.vue
@@ -187,11 +187,9 @@ onMounted(async () => {
 	initFlowbite();
 	const $bindModalElement: HTMLElement | null =
 		document.querySelector("#role-bind-modal");
-	roleBindModal.value = new Modal(
-		$bindModalElement,
-		{},
-		{ id: "role-bind-modal" },
-	);
+	if ($bindModalElement) {
+		roleBindModal.value = new Modal($bindModalElement, {});
+	}
 	const $unbindModalElement: HTMLElement | null =
 		document.querySelector("#role-unbind-modal");
 	roleUnbindModal.value = new Modal(
diff --git a/frontend/src/views/DepartmentView.vue b/frontend/src/views/DepartmentView.vue
index cb93476..6469f07 100644
--- a/frontend/src/views/DepartmentView.vue
+++ b/frontend/src/views/DepartmentView.vue
@@ -154,8 +154,12 @@ onMounted(async () => {
 	const $deleteModalElement: HTMLElement | null = document.querySelector(
 		"#department-delete-modal",
 	);
-	departmentUpsertModal.value = new Modal($upsertModalElement, {});
-	departmentDeleteModal.value = new Modal($deleteModalElement, {});
+	if ($upsertModalElement) {
+		departmentUpsertModal.value = new Modal($upsertModalElement, {});
+	}
+	if ($deleteModalElement) {
+		departmentDeleteModal.value = new Modal($deleteModalElement, {});
+	}
 });
 
 const handleUpsertDepartmentSubmit = async (
diff --git a/frontend/src/views/LlmConfigView.vue b/frontend/src/views/LlmConfigView.vue
index b595fff..06cf7f3 100644
--- a/frontend/src/views/LlmConfigView.vue
+++ b/frontend/src/views/LlmConfigView.vue
@@ -167,8 +167,9 @@ onMounted(async () => {
 	initFlowbite();
 	const $llmUpdateModalElement: HTMLElement | null =
 		document.querySelector("#llm-update-modal");
-
-	llmUpdateModal.value = new Modal($llmUpdateModalElement, {});
+	if ($llmUpdateModalElement) {
+		llmUpdateModal.value = new Modal($llmUpdateModalElement, {});
+	}
 });
 </script>
 
diff --git a/frontend/src/views/PermissionView.vue b/frontend/src/views/PermissionView.vue
index abeadbe..bdb30c5 100644
--- a/frontend/src/views/PermissionView.vue
+++ b/frontend/src/views/PermissionView.vue
@@ -148,8 +148,12 @@ onMounted(async () => {
 	const $deleteModalElement: HTMLElement | null = document.querySelector(
 		"#permission-delete-modal",
 	);
-	permissionUpsertModal.value = new Modal($upsertModalElement, {});
-	permissionDeleteModal.value = new Modal($deleteModalElement, {});
+	if ($upsertModalElement) {
+		permissionUpsertModal.value = new Modal($upsertModalElement, {});
+	}
+	if ($deleteModalElement) {
+		permissionDeleteModal.value = new Modal($deleteModalElement, {});
+	}
 });
 
 const handleUpsertModalSubmit = async (data: PermissionUpsertModel) => {
diff --git a/frontend/src/views/PositionView.vue b/frontend/src/views/PositionView.vue
index 5ea1465..326d28f 100644
--- a/frontend/src/views/PositionView.vue
+++ b/frontend/src/views/PositionView.vue
@@ -116,7 +116,6 @@ import TablePagination from "@/components/TablePagination.vue";
 import usePositionDelete from "@/composables/position/usePositionDelete";
 import { usePositionQuery } from "@/composables/position/usePositionQuery";
 import { usePositionUpsert } from "@/composables/position/usePositionUpsert";
-import { RouteName } from "@/router/constants";
 import { Modal, type ModalInterface, initFlowbite } from "flowbite";
 import { nextTick, onMounted, ref } from "vue";
 import type { components } from "../api/types/schema";
@@ -147,8 +146,12 @@ onMounted(async () => {
 	const $deleteModalElement: HTMLElement | null = document.querySelector(
 		"#position-delete-modal",
 	);
-	positionUpsertModal.value = new Modal($upsertModalElement, {});
-	positionDeleteModal.value = new Modal($deleteModalElement, {});
+	if ($upsertModalElement) {
+		positionUpsertModal.value = new Modal($upsertModalElement, {});
+	}
+	if ($deleteModalElement) {
+		positionDeleteModal.value = new Modal($deleteModalElement, {});
+	}
 });
 
 const handleUpsertPositionSubmit = async (
diff --git a/frontend/src/views/SchedulerView.vue b/frontend/src/views/SchedulerView.vue
index c16f93f..f7ed303 100644
--- a/frontend/src/views/SchedulerView.vue
+++ b/frontend/src/views/SchedulerView.vue
@@ -274,10 +274,15 @@ onMounted(async () => {
 		document.querySelector("#job-pause-modal");
 	const $jobUpdateModalElement: HTMLElement | null =
 		document.querySelector("#job-update-modal");
-
-	jobResumeModal.value = new Modal($jobResumeModalElement, {});
-	jobPauseModal.value = new Modal($jobPauseModalElement, {});
-	jobUpdateModal.value = new Modal($jobUpdateModalElement, {});
+	if ($jobResumeModalElement) {
+		jobResumeModal.value = new Modal($jobResumeModalElement, {});
+	}
+	if ($jobPauseModalElement) {
+		jobPauseModal.value = new Modal($jobPauseModalElement, {});
+	}
+	if ($jobUpdateModalElement) {
+		jobUpdateModal.value = new Modal($jobUpdateModalElement, {});
+	}
 });
 </script>