diff --git a/README.md b/README.md
index a65d9fa..f77756f 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 ```env
 NEXT_PUBLIC_BACKEND_BASE_URL=
-APP_REDIRECT_URL=
+AUTH_SECRET=
 ```
 
 ## Development
diff --git a/app/(admin)/(question-management)/database/_components/create.tsx b/app/(admin)/(question-management)/database/_components/create.tsx
index e885245..637e519 100644
--- a/app/(admin)/(question-management)/database/_components/create.tsx
+++ b/app/(admin)/(question-management)/database/_components/create.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { buttonVariants } from "@/components/ui/button";
+import { ConfirmationDialog } from "@/components/ui/confirmation-dialog";
 import {
   Dialog,
   DialogContent,
@@ -9,35 +10,66 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { useDialogCloseConfirmation } from "@/hooks/use-dialog-close-confirmation";
 import { useMutation } from "@apollo/client/react";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { toast } from "sonner";
 import { DATABASE_CREATE_MUTATION } from "./mutation";
 import { DATABASES_TABLE_QUERY } from "./query";
-import { UpdateDatabaseForm, type UpdateDatabaseFormData } from "./update-form";
+import { UpdateDatabaseForm } from "./update-form";
 
 export function CreateDatabaseTrigger() {
-  const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
+
+  const {
+    showConfirmation,
+    handleDialogOpenChange,
+    handleConfirmClose,
+    handleCancelClose,
+  } = useDialogCloseConfirmation({
+    isDirty: isFormDirty,
+    setOpen,
+    onConfirmedClose: () => {
+      setIsFormDirty(false);
+    },
+  });
+
+  const handleFormStateChange = (isDirty: boolean) => {
+    setIsFormDirty(isDirty);
+  };
+
+  const handleCompleted = () => {
+    setIsFormDirty(false);
+    setOpen(false);
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger className={buttonVariants()}>新增資料庫</DialogTrigger>
-      <CreateDatabaseDialogContent
-        onCompleted={() => {
-          setOpen(false);
-          router.refresh();
-        }}
+    <>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+        <DialogTrigger className={buttonVariants()}>新增資料庫</DialogTrigger>
+        <CreateDatabaseDialogContent
+          onCompleted={handleCompleted}
+          onFormStateChange={handleFormStateChange}
+        />
+      </Dialog>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={() => {}}
+        onConfirm={handleConfirmClose}
+        onCancel={handleCancelClose}
       />
-    </Dialog>
+    </>
   );
 }
 
 function CreateDatabaseDialogContent({
   onCompleted,
+  onFormStateChange,
 }: {
   onCompleted: () => void;
+  onFormStateChange: (isDirty: boolean) => void;
 }) {
   const [createDatabase] = useMutation(DATABASE_CREATE_MUTATION, {
     refetchQueries: [DATABASES_TABLE_QUERY],
@@ -54,25 +86,6 @@ function CreateDatabaseDialogContent({
     },
   });
 
-  const onSubmit = (data: UpdateDatabaseFormData) => {
-    try {
-      createDatabase({
-        variables: {
-          input: {
-            slug: data.slug!,
-            description: data.description,
-            schema: data.schema!,
-            relationFigure: data.relationFigure!,
-          },
-        },
-      });
-    } catch (error) {
-      toast.error("資料庫建立失敗", {
-        description: error instanceof Error ? error.message : "未知錯誤",
-      });
-    }
-  };
-
   return (
     <DialogContent className="max-h-[85vh] max-w-3xl overflow-y-auto">
       <DialogHeader>
@@ -88,8 +101,20 @@ function CreateDatabaseDialogContent({
           schema: "",
           relationFigure: "",
         }}
-        onSubmit={onSubmit}
+        onSubmit={(data) => {
+          createDatabase({
+            variables: {
+              input: {
+                slug: data.slug,
+                description: data.description,
+                schema: data.schema,
+                relationFigure: data.relationFigure,
+              },
+            },
+          });
+        }}
         action="create"
+        onFormStateChange={onFormStateChange}
       />
     </DialogContent>
   );
diff --git a/app/(admin)/(question-management)/database/_components/delete.tsx b/app/(admin)/(question-management)/database/_components/delete.tsx
index d85eb71..5804db5 100644
--- a/app/(admin)/(question-management)/database/_components/delete.tsx
+++ b/app/(admin)/(question-management)/database/_components/delete.tsx
@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { buttonVariants } from "@/components/ui/button";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { useMutation, useSuspenseQuery } from "@apollo/client/react";
+import { skipToken, useMutation, useSuspenseQuery } from "@apollo/client/react";
 import { Trash } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Suspense, useState } from "react";
@@ -42,6 +42,7 @@ export function DeleteDatabaseDropdownTrigger({ id }: { id: string }) {
       <Suspense>
         <DeleteDatabaseAlertDialogContent
           id={id}
+          open={open}
           onCompleted={() => {
             setOpen(false);
             router.refresh();
@@ -66,6 +67,7 @@ export function DeleteDatabaseButtonTrigger({ id }: { id: string }) {
       <Suspense>
         <DeleteDatabaseAlertDialogContent
           id={id}
+          open={open}
           onCompleted={() => {
             setOpen(false);
             router.push("/database");
@@ -78,14 +80,21 @@ export function DeleteDatabaseButtonTrigger({ id }: { id: string }) {
 
 function DeleteDatabaseAlertDialogContent({
   id,
+  open,
   onCompleted,
 }: {
   id: string;
+  open: boolean;
   onCompleted: () => void;
 }) {
-  const { data } = useSuspenseQuery(DATABASE_BY_ID_QUERY, {
-    variables: { id },
-  });
+  const { data } = useSuspenseQuery(
+    DATABASE_BY_ID_QUERY,
+    open
+      ? {
+        variables: { id },
+      }
+      : skipToken,
+  );
 
   const [deleteDatabase] = useMutation(DATABASE_DELETE_MUTATION, {
     refetchQueries: [DATABASES_TABLE_QUERY],
@@ -106,7 +115,7 @@ function DeleteDatabaseAlertDialogContent({
     <AlertDialogContent>
       <AlertDialogHeader>
         <AlertDialogTitle>
-          確定要刪除「{data.database.slug}」資料庫嗎？
+          確定要刪除「{data?.database.slug}」資料庫嗎？
         </AlertDialogTitle>
         <AlertDialogDescription>
           刪除後將無法復原此資料庫，且相關的題目可能會受到影響。請謹慎操作。
diff --git a/app/(admin)/(question-management)/database/_components/update-form.tsx b/app/(admin)/(question-management)/database/_components/update-form.tsx
index 04d1822..2445c47 100644
--- a/app/(admin)/(question-management)/database/_components/update-form.tsx
+++ b/app/(admin)/(question-management)/database/_components/update-form.tsx
@@ -1,142 +1,117 @@
-import { Button } from "@/components/ui/button";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import { UpdateFormBody } from "@/components/update-modal/form-body";
+import type { UpdateFormBaseProps } from "@/components/update-modal/types";
 import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 export const formSchema = z.object({
-  slug: z.string().min(1, "標識不能為空"),
+  slug: z.string().min(1, "slug 不能為空"),
   description: z.string().optional(),
   schema: z.string().min(1, "資料結構不能為空"),
   relationFigure: z.string().min(1, "關係圖不能為空"),
 });
 
-export interface UpdateDatabaseFormData {
-  slug?: string;
-  description?: string;
-  schema?: string;
-  relationFigure?: string;
-  clearDescription?: boolean;
-}
-
-export interface UpdateDatabaseFormProps {
-  defaultValues?: z.infer<typeof formSchema>;
-  onSubmit: (newValues: UpdateDatabaseFormData) => void;
-  action: "update" | "create";
-}
+export type UpdateDatabaseFormProps = UpdateFormBaseProps<z.infer<typeof formSchema>>;
 
 export function UpdateDatabaseForm({
   defaultValues,
   onSubmit,
   action,
+  onFormStateChange,
 }: UpdateDatabaseFormProps) {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues,
   });
 
-  const handleSubmit = (data: z.infer<typeof formSchema>) => {
-    form.reset();
-
-    if (action === "create") {
-      onSubmit({
-        slug: data.slug,
-        description: data.description,
-        schema: data.schema,
-        relationFigure: data.relationFigure,
-      });
-    } else {
-      onSubmit({
-        slug: data.slug || undefined,
-        description: data.description || undefined,
-        schema: data.schema || undefined,
-        relationFigure: data.relationFigure || undefined,
-        clearDescription: data.description === "",
-      });
-    }
-  };
-
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="slug"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>標識</FormLabel>
-              <FormControl>
-                <Input {...field} placeholder="例如：sakila, northwind" />
-              </FormControl>
-              <FormDescription>資料庫的唯一識別符，通常為小寫英文。</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="description"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>描述（可選）</FormLabel>
-              <FormControl>
-                <Textarea
-                  {...field}
-                  placeholder="請輸入資料庫的描述"
-                  className="min-h-[80px]"
-                />
-              </FormControl>
-              <FormDescription>資料庫的用途和背景說明。</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+    <UpdateFormBody
+      form={form}
+      onSubmit={onSubmit}
+      action={action}
+      onFormStateChange={onFormStateChange}
+    >
+      <FormField
+        control={form.control}
+        name="slug"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>slug</FormLabel>
+            <FormControl>
+              <Input {...field} placeholder="例如：sakila, northwind" disabled={action === "update"} />
+            </FormControl>
+            <FormDescription>
+              資料庫的唯一識別符，通常為小寫英文。
+            </FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
-        <FormField
-          control={form.control}
-          name="schema"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>資料結構</FormLabel>
-              <FormControl>
-                <Textarea
-                  {...field}
-                  placeholder="請輸入完整的 SQL 建表語句"
-                  className="min-h-[200px] font-mono text-sm"
-                />
-              </FormControl>
-              <FormDescription>完整的 SQL DDL 語句，包含所有表格定義。</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+      <FormField
+        control={form.control}
+        name="description"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>描述（可選）</FormLabel>
+            <FormControl>
+              <Textarea
+                {...field}
+                placeholder="請輸入資料庫的描述"
+                className="min-h-[80px]"
+              />
+            </FormControl>
+            <FormDescription>資料庫的用途和背景說明。</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
-        <FormField
-          control={form.control}
-          name="relationFigure"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>關係圖</FormLabel>
-              <FormControl>
-                <Textarea
-                  {...field}
-                  placeholder="請輸入資料庫關係圖的描述或圖表代碼"
-                  className="min-h-[120px] font-mono text-sm"
-                />
-              </FormControl>
-              <FormDescription>
-                資料庫的 ER 圖或關係圖描述，可以是 Mermaid 語法、圖片 URL 或文字描述。
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+      <FormField
+        control={form.control}
+        name="schema"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>資料結構</FormLabel>
+            <FormControl>
+              <Textarea
+                {...field}
+                placeholder="請輸入完整的 SQL 建表語句"
+                className="max-h-[500px] min-h-[200px] font-mono text-sm"
+              />
+            </FormControl>
+            <FormDescription>
+              完整的 SQL DDL 語句，包含所有表格定義。
+            </FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
-        <Button type="submit">{action === "update" ? "更新" : "建立"}</Button>
-      </form>
-    </Form>
+      <FormField
+        control={form.control}
+        name="relationFigure"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>關係圖</FormLabel>
+            <FormControl>
+              <Textarea
+                {...field}
+                placeholder="請輸入資料庫關係圖的描述或圖表代碼"
+                className="min-h-[120px] font-mono text-sm"
+              />
+            </FormControl>
+            <FormDescription>
+              資料庫的 ER 圖或關係圖描述，可以是 Mermaid 語法、圖片 URL 或文字描述。
+            </FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </UpdateFormBody>
   );
 }
diff --git a/app/(admin)/(question-management)/database/_components/update.tsx b/app/(admin)/(question-management)/database/_components/update.tsx
index 7758df9..a1aa664 100644
--- a/app/(admin)/(question-management)/database/_components/update.tsx
+++ b/app/(admin)/(question-management)/database/_components/update.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { buttonVariants } from "@/components/ui/button";
+import { ConfirmationDialog } from "@/components/ui/confirmation-dialog";
 import {
   Dialog,
   DialogContent,
@@ -10,81 +11,153 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { useMutation, useSuspenseQuery } from "@apollo/client/react";
+import { useDialogCloseConfirmation } from "@/hooks/use-dialog-close-confirmation";
+import { skipToken, useMutation, useSuspenseQuery } from "@apollo/client/react";
 import { Pencil } from "lucide-react";
-import { useRouter } from "next/navigation";
 import { Suspense, useState } from "react";
 import { toast } from "sonner";
 import { DATABASE_UPDATE_MUTATION } from "./mutation";
 import { DATABASE_BY_ID_QUERY, DATABASES_TABLE_QUERY } from "./query";
-import { UpdateDatabaseForm, type UpdateDatabaseFormData } from "./update-form";
+import { UpdateDatabaseForm } from "./update-form";
 
 export function UpdateDatabaseDropdownTrigger({ id }: { id: string }) {
-  const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
+
+  const {
+    showConfirmation,
+    handleDialogOpenChange,
+    handleConfirmClose,
+    handleCancelClose,
+  } = useDialogCloseConfirmation({
+    isDirty: isFormDirty,
+    setOpen,
+    onConfirmedClose: () => {
+      setIsFormDirty(false);
+    },
+  });
+
+  const handleFormStateChange = (isDirty: boolean) => {
+    setIsFormDirty(isDirty);
+  };
+
+  const handleCompleted = () => {
+    setIsFormDirty(false);
+    setOpen(false);
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem
-          onClick={(e) => {
-            e.preventDefault();
-            setOpen(true);
-          }}
-        >
-          編輯資料庫
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <Suspense>
-        <UpdateDatabaseDialogContent
-          id={id}
-          onCompleted={() => {
-            setOpen(false);
-            router.refresh();
-          }}
-        />
-      </Suspense>
-    </Dialog>
+    <>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+        <DialogTrigger asChild>
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.preventDefault();
+              setOpen(true);
+            }}
+          >
+            編輯資料庫
+          </DropdownMenuItem>
+        </DialogTrigger>
+        <Suspense>
+          <UpdateDatabaseDialogContent
+            id={id}
+            open={open}
+            onCompleted={handleCompleted}
+            onFormStateChange={handleFormStateChange}
+          />
+        </Suspense>
+      </Dialog>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={() => {}}
+        onConfirm={handleConfirmClose}
+        onCancel={handleCancelClose}
+      />
+    </>
   );
 }
 
 export function UpdateDatabaseButtonTrigger({ id }: { id: string }) {
-  const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
+
+  const {
+    showConfirmation,
+    handleDialogOpenChange,
+    handleConfirmClose,
+    handleCancelClose,
+  } = useDialogCloseConfirmation({
+    isDirty: isFormDirty,
+    setOpen,
+    onConfirmedClose: () => {
+      setIsFormDirty(false);
+    },
+  });
+
+  const handleFormStateChange = (isDirty: boolean) => {
+    setIsFormDirty(isDirty);
+  };
+
+  const handleCompleted = () => {
+    setIsFormDirty(false);
+    setOpen(false);
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger className={buttonVariants()}>
-        <Pencil className="h-4 w-4" />
-        編輯
-      </DialogTrigger>
-
-      <Suspense>
-        <UpdateDatabaseDialogContent
-          id={id}
-          onCompleted={() => {
-            setOpen(false);
-            router.refresh();
-          }}
-        />
-      </Suspense>
-    </Dialog>
+    <>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+        <DialogTrigger className={buttonVariants()}>
+          <Pencil className="h-4 w-4" />
+          編輯
+        </DialogTrigger>
+
+        <Suspense>
+          <UpdateDatabaseDialogContent
+            id={id}
+            open={open}
+            onCompleted={handleCompleted}
+            onFormStateChange={handleFormStateChange}
+          />
+        </Suspense>
+      </Dialog>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={() => {}}
+        onConfirm={handleConfirmClose}
+        onCancel={handleCancelClose}
+      />
+    </>
   );
 }
 
 function UpdateDatabaseDialogContent({
   id,
+  open,
   onCompleted,
+  onFormStateChange,
 }: {
   id: string;
+  open: boolean;
   onCompleted: () => void;
+  onFormStateChange: (isDirty: boolean) => void;
 }) {
-  const { data: database } = useSuspenseQuery(DATABASE_BY_ID_QUERY, {
-    variables: { id },
-  });
+  const { data: database } = useSuspenseQuery(
+    DATABASE_BY_ID_QUERY,
+    open
+      ? {
+        variables: { id },
+      }
+      : skipToken,
+  );
 
   const [updateDatabase] = useMutation(DATABASE_UPDATE_MUTATION, {
-    refetchQueries: [DATABASES_TABLE_QUERY],
+    refetchQueries: [
+      { query: DATABASES_TABLE_QUERY },
+      { query: DATABASE_BY_ID_QUERY, variables: { id } },
+    ],
 
     onError(error) {
       toast.error("資料庫更新失敗", {
@@ -98,28 +171,13 @@ function UpdateDatabaseDialogContent({
     },
   });
 
-  const onSubmit = (data: UpdateDatabaseFormData) => {
-    try {
-      updateDatabase({
-        variables: {
-          id,
-          input: {
-            description: data.description,
-            schema: data.schema,
-            relationFigure: data.relationFigure,
-            clearDescription: data.clearDescription,
-          },
-        },
-      });
-    } catch (error) {
-      toast.error("資料庫更新失敗", {
-        description: error instanceof Error ? error.message : "未知錯誤",
-      });
-    }
-  };
-
   return (
-    <DialogContent className="max-h-[85vh] max-w-3xl overflow-y-auto">
+    <DialogContent
+      className={`
+        max-h-[85vh] overflow-y-auto
+        sm:max-w-3xl
+      `}
+    >
       <DialogHeader>
         <DialogTitle>編輯資料庫</DialogTitle>
         <DialogDescription>
@@ -128,13 +186,26 @@ function UpdateDatabaseDialogContent({
       </DialogHeader>
       <UpdateDatabaseForm
         defaultValues={{
-          slug: database.database.slug,
-          description: database.database.description || undefined,
-          schema: database.database.schema,
-          relationFigure: database.database.relationFigure,
+          slug: database?.database.slug || "",
+          description: database?.database.description || undefined,
+          schema: database?.database.schema || "",
+          relationFigure: database?.database.relationFigure || "",
+        }}
+        onSubmit={(data) => {
+          updateDatabase({
+            variables: {
+              id,
+              input: {
+                description: data.description || undefined,
+                schema: data.schema || undefined,
+                relationFigure: data.relationFigure || undefined,
+                clearDescription: data.description === "",
+              },
+            },
+          });
         }}
-        onSubmit={onSubmit}
         action="update"
+        onFormStateChange={onFormStateChange}
       />
     </DialogContent>
   );
diff --git a/app/(admin)/(question-management)/questions/_components/create.tsx b/app/(admin)/(question-management)/questions/_components/create.tsx
index 823a335..96e33ed 100644
--- a/app/(admin)/(question-management)/questions/_components/create.tsx
+++ b/app/(admin)/(question-management)/questions/_components/create.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { buttonVariants } from "@/components/ui/button";
+import { ConfirmationDialog } from "@/components/ui/confirmation-dialog";
 import {
   Dialog,
   DialogContent,
@@ -10,6 +11,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { QuestionDifficulty } from "@/gql/graphql";
+import { useDialogCloseConfirmation } from "@/hooks/use-dialog-close-confirmation";
 import { useMutation, useSuspenseQuery } from "@apollo/client/react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -21,29 +23,62 @@ import { UpdateQuestionForm, type UpdateQuestionFormData } from "./update-form";
 export function CreateQuestionTrigger() {
   const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
+
+  const {
+    showConfirmation,
+    handleDialogOpenChange,
+    handleConfirmClose,
+    handleCancelClose,
+  } = useDialogCloseConfirmation({
+    isDirty: isFormDirty,
+    setOpen,
+    onConfirmedClose: () => {
+      setIsFormDirty(false);
+    },
+  });
+
+  const handleFormStateChange = (isDirty: boolean) => {
+    setIsFormDirty(isDirty);
+  };
+
+  const handleCompleted = () => {
+    setIsFormDirty(false);
+    setOpen(false);
+    router.refresh();
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger className={buttonVariants()}>新增題目</DialogTrigger>
-      <CreateQuestionDialogContent
-        onCompleted={() => {
-          setOpen(false);
-          router.refresh();
-        }}
+    <>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+        <DialogTrigger className={buttonVariants()}>新增題目</DialogTrigger>
+        <CreateQuestionDialogContent
+          onCompleted={handleCompleted}
+          onFormStateChange={handleFormStateChange}
+        />
+      </Dialog>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={() => {}}
+        onConfirm={handleConfirmClose}
+        onCancel={handleCancelClose}
       />
-    </Dialog>
+    </>
   );
 }
 
 function CreateQuestionDialogContent({
   onCompleted,
+  onFormStateChange,
 }: {
   onCompleted: () => void;
+  onFormStateChange: (isDirty: boolean) => void;
 }) {
   const { data: databaseList } = useSuspenseQuery(DATABASE_LIST_QUERY);
 
   const [createQuestion] = useMutation(QUESTION_CREATE_MUTATION, {
-    refetchQueries: [QUESTIONS_TABLE_QUERY],
+    refetchQueries: [{ query: QUESTIONS_TABLE_QUERY }],
 
     onError(error) {
       toast.error("題目建立失敗", {
@@ -102,6 +137,7 @@ function CreateQuestionDialogContent({
         }}
         onSubmit={onSubmit}
         action="create"
+        onFormStateChange={onFormStateChange}
         databaseList={databaseList.databases}
       />
     </DialogContent>
diff --git a/app/(admin)/(question-management)/questions/_components/delete.tsx b/app/(admin)/(question-management)/questions/_components/delete.tsx
index a649996..8cf880b 100644
--- a/app/(admin)/(question-management)/questions/_components/delete.tsx
+++ b/app/(admin)/(question-management)/questions/_components/delete.tsx
@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { buttonVariants } from "@/components/ui/button";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { useMutation, useSuspenseQuery } from "@apollo/client/react";
+import { skipToken, useMutation, useSuspenseQuery } from "@apollo/client/react";
 import { Trash } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Suspense, useState } from "react";
@@ -42,6 +42,7 @@ export function DeleteQuestionDropdownTrigger({ id }: { id: string }) {
       <Suspense>
         <DeleteQuestionAlertDialogContent
           id={id}
+          open={open}
           onCompleted={() => {
             setOpen(false);
             router.refresh();
@@ -66,6 +67,7 @@ export function DeleteQuestionButtonTrigger({ id }: { id: string }) {
       <Suspense>
         <DeleteQuestionAlertDialogContent
           id={id}
+          open={open}
           onCompleted={() => {
             setOpen(false);
             router.push("/questions");
@@ -78,14 +80,21 @@ export function DeleteQuestionButtonTrigger({ id }: { id: string }) {
 
 function DeleteQuestionAlertDialogContent({
   id,
+  open,
   onCompleted,
 }: {
   id: string;
+  open: boolean;
   onCompleted: () => void;
 }) {
-  const { data } = useSuspenseQuery(QUESTION_BY_ID_QUERY, {
-    variables: { id },
-  });
+  const { data } = useSuspenseQuery(
+    QUESTION_BY_ID_QUERY,
+    open
+      ? {
+        variables: { id },
+      }
+      : skipToken,
+  );
 
   const [deleteQuestion] = useMutation(QUESTION_DELETE_MUTATION, {
     refetchQueries: [QUESTIONS_TABLE_QUERY],
@@ -106,7 +115,7 @@ function DeleteQuestionAlertDialogContent({
     <AlertDialogContent>
       <AlertDialogHeader>
         <AlertDialogTitle>
-          確定要刪除「{data.question.title}」題目嗎？
+          確定要刪除「{data?.question.title}」題目嗎？
         </AlertDialogTitle>
         <AlertDialogDescription>
           刪除後將無法復原此題目。請謹慎操作。
diff --git a/app/(admin)/(question-management)/questions/_components/update-form.tsx b/app/(admin)/(question-management)/questions/_components/update-form.tsx
index e25623e..97883cd 100644
--- a/app/(admin)/(question-management)/questions/_components/update-form.tsx
+++ b/app/(admin)/(question-management)/questions/_components/update-form.tsx
@@ -1,10 +1,12 @@
-import { Button } from "@/components/ui/button";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
+import { UpdateFormBody } from "@/components/update-modal/form-body";
+import type { UpdateFormBaseProps } from "@/components/update-modal/types";
 import { QuestionDifficulty } from "@/gql/graphql";
 import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -26,10 +28,8 @@ export interface UpdateQuestionFormData {
   databaseID?: string; // Changed to single databaseID for 1-N relationship
 }
 
-export interface UpdateQuestionFormProps {
-  defaultValues?: z.infer<typeof formSchema>;
+export interface UpdateQuestionFormProps extends Omit<UpdateFormBaseProps<z.infer<typeof formSchema>>, "onSubmit"> {
   onSubmit: (newValues: UpdateQuestionFormData) => void;
-  action: "update" | "create";
   databaseList: { id: string; slug: string; description?: string | null }[];
 }
 
@@ -44,6 +44,7 @@ export function UpdateQuestionForm({
   defaultValues,
   onSubmit,
   action,
+  onFormStateChange,
   databaseList,
 }: UpdateQuestionFormProps) {
   const form = useForm<z.infer<typeof formSchema>>({
@@ -58,8 +59,6 @@ export function UpdateQuestionForm({
       return;
     }
 
-    form.reset();
-
     onSubmit({
       title: data.title,
       description: data.description,
@@ -71,141 +70,135 @@ export function UpdateQuestionForm({
   };
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="title"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>題目標題</FormLabel>
-              <FormControl>
-                <Input {...field} placeholder="請輸入題目標題" />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="description"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>題目描述</FormLabel>
-              <FormControl>
-                <Textarea
-                  {...field}
-                  placeholder="請輸入詳細的題目描述"
-                  className="min-h-[100px]"
-                />
-              </FormControl>
-              <FormDescription>詳細說明題目要求和背景。</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+    <UpdateFormBody
+      form={form}
+      onSubmit={handleSubmit}
+      action={action}
+      onFormStateChange={onFormStateChange}
+    >
+      <FormField
+        control={form.control}
+        name="title"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>題目標題</FormLabel>
+            <FormControl>
+              <Input {...field} placeholder="請輸入題目標題" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
-        <FormField
-          control={form.control}
-          name="category"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>分類</FormLabel>
-              <FormControl>
-                <Input {...field} placeholder="例如：query, join, aggregation" />
-              </FormControl>
-              <FormDescription>題目的分類標籤。</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+      <FormField
+        control={form.control}
+        name="description"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>題目描述</FormLabel>
+            <FormControl>
+              <Textarea
+                {...field}
+                placeholder="請輸入詳細的題目描述"
+                className="min-h-[100px]"
+              />
+            </FormControl>
+            <FormDescription>詳細說明題目要求和背景。</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
-        <FormField
-          control={form.control}
-          name="difficulty"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>難度</FormLabel>
-              <FormControl>
-                <Select
-                  onValueChange={field.onChange}
-                  defaultValue={field.value}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="選擇難度" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {difficultyOptions.map((option) => (
-                      <SelectItem key={option.value} value={option.value}>
-                        {option.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+      <FormField
+        control={form.control}
+        name="category"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>分類</FormLabel>
+            <FormControl>
+              <Input {...field} placeholder="例如：query, join, aggregation" />
+            </FormControl>
+            <FormDescription>題目的分類標籤。</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
-        <FormField
-          control={form.control}
-          name="referenceAnswer"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>參考答案</FormLabel>
-              <FormControl>
-                <Textarea
-                  {...field}
-                  placeholder="請輸入 SQL 參考答案"
-                  className="min-h-[120px] font-mono"
-                />
-              </FormControl>
-              <FormDescription>提供標準的 SQL 解答。</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+      <FormField
+        control={form.control}
+        name="difficulty"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>難度</FormLabel>
+            <FormControl>
+              <Select
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="選擇難度" />
+                </SelectTrigger>
+                <SelectContent>
+                  {difficultyOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
-        <FormField
-          control={form.control}
-          name="databaseID"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>資料庫</FormLabel>
-              <FormControl>
-                <Select
-                  onValueChange={field.onChange}
-                  defaultValue={field.value}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="選擇資料庫" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {databaseList.map((database) => (
-                      <SelectItem key={database.id} value={database.id}>
-                        <div className="flex flex-col text-left">
-                          <span>{database.slug}</span>
-                          {database.description && (
-                            <span className="text-xs text-muted-foreground">
-                              {database.description}
-                            </span>
-                          )}
-                        </div>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </FormControl>
-              <FormDescription>選擇此題目所屬的資料庫（一個題目只能屬於一個資料庫）。</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+      <FormField
+        control={form.control}
+        name="referenceAnswer"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>參考答案</FormLabel>
+            <FormControl>
+              <Textarea
+                {...field}
+                placeholder="請輸入 SQL 參考答案"
+                className="min-h-[120px] font-mono"
+              />
+            </FormControl>
+            <FormDescription>提供標準的 SQL 解答。</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
-        <Button type="submit">{action === "update" ? "更新" : "建立"}</Button>
-      </form>
-    </Form>
+      <FormField
+        control={form.control}
+        name="databaseID"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>資料庫</FormLabel>
+            <FormControl>
+              <Select
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="選擇資料庫" />
+                </SelectTrigger>
+                <SelectContent>
+                  {databaseList.map((database) => (
+                    <SelectItem key={database.id} value={database.id}>
+                      {database.slug}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormControl>
+            <FormDescription>選擇此題目所屬的資料庫（一個題目只能屬於一個資料庫）。</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </UpdateFormBody>
   );
 }
diff --git a/app/(admin)/(question-management)/questions/_components/update.tsx b/app/(admin)/(question-management)/questions/_components/update.tsx
index 5b758b6..f02b9e7 100644
--- a/app/(admin)/(question-management)/questions/_components/update.tsx
+++ b/app/(admin)/(question-management)/questions/_components/update.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { buttonVariants } from "@/components/ui/button";
+import { ConfirmationDialog } from "@/components/ui/confirmation-dialog";
 import {
   Dialog,
   DialogContent,
@@ -10,7 +11,9 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { useMutation, useSuspenseQuery } from "@apollo/client/react";
+import { QuestionDifficulty } from "@/gql/graphql";
+import { useDialogCloseConfirmation } from "@/hooks/use-dialog-close-confirmation";
+import { skipToken, useMutation, useSuspenseQuery } from "@apollo/client/react";
 import { Pencil } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Suspense, useState } from "react";
@@ -22,70 +25,149 @@ import { UpdateQuestionForm, type UpdateQuestionFormData } from "./update-form";
 export function UpdateQuestionDropdownTrigger({ id }: { id: string }) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
+
+  const {
+    showConfirmation,
+    handleDialogOpenChange,
+    handleConfirmClose,
+    handleCancelClose,
+  } = useDialogCloseConfirmation({
+    isDirty: isFormDirty,
+    setOpen,
+    onConfirmedClose: () => {
+      setIsFormDirty(false);
+    },
+  });
+
+  const handleFormStateChange = (isDirty: boolean) => {
+    setIsFormDirty(isDirty);
+  };
+
+  const handleCompleted = () => {
+    setIsFormDirty(false);
+    setOpen(false);
+    router.refresh();
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem
-          onClick={(e) => {
-            e.preventDefault();
-            setOpen(true);
-          }}
-        >
-          編輯題目
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <Suspense>
-        <UpdateQuestionDialogContent
-          id={id}
-          onCompleted={() => {
-            setOpen(false);
-            router.refresh();
-          }}
-        />
-      </Suspense>
-    </Dialog>
+    <>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+        <DialogTrigger asChild>
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.preventDefault();
+              setOpen(true);
+            }}
+          >
+            編輯題目
+          </DropdownMenuItem>
+        </DialogTrigger>
+        <Suspense>
+          <UpdateQuestionDialogContent
+            id={id}
+            open={open}
+            onCompleted={handleCompleted}
+            onFormStateChange={handleFormStateChange}
+          />
+        </Suspense>
+      </Dialog>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={() => {}}
+        onConfirm={handleConfirmClose}
+        onCancel={handleCancelClose}
+      />
+    </>
   );
 }
 
 export function UpdateQuestionButtonTrigger({ id }: { id: string }) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
+
+  const {
+    showConfirmation,
+    handleDialogOpenChange,
+    handleConfirmClose,
+    handleCancelClose,
+  } = useDialogCloseConfirmation({
+    isDirty: isFormDirty,
+    setOpen,
+    onConfirmedClose: () => {
+      setIsFormDirty(false);
+    },
+  });
+
+  const handleFormStateChange = (isDirty: boolean) => {
+    setIsFormDirty(isDirty);
+  };
+
+  const handleCompleted = () => {
+    setIsFormDirty(false);
+    setOpen(false);
+    router.refresh();
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger className={buttonVariants()}>
-        <Pencil className="h-4 w-4" />
-        編輯
-      </DialogTrigger>
-
-      <Suspense>
-        <UpdateQuestionDialogContent
-          id={id}
-          onCompleted={() => {
-            setOpen(false);
-            router.refresh();
-          }}
-        />
-      </Suspense>
-    </Dialog>
+    <>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+        <DialogTrigger className={buttonVariants()}>
+          <Pencil className="h-4 w-4" />
+          編輯
+        </DialogTrigger>
+
+        <Suspense>
+          <UpdateQuestionDialogContent
+            id={id}
+            open={open}
+            onCompleted={handleCompleted}
+            onFormStateChange={handleFormStateChange}
+          />
+        </Suspense>
+      </Dialog>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={() => {}}
+        onConfirm={handleConfirmClose}
+        onCancel={handleCancelClose}
+      />
+    </>
   );
 }
 
 function UpdateQuestionDialogContent({
   id,
+  open,
   onCompleted,
+  onFormStateChange,
 }: {
   id: string;
+  open: boolean;
   onCompleted: () => void;
+  onFormStateChange: (isDirty: boolean) => void;
 }) {
-  const { data: databaseList } = useSuspenseQuery(DATABASE_LIST_QUERY);
-  const { data: question } = useSuspenseQuery(QUESTION_BY_ID_QUERY, {
-    variables: { id },
-  });
+  const { data: databaseList } = useSuspenseQuery(
+    DATABASE_LIST_QUERY,
+    open ? {} : skipToken,
+  );
+  const { data: question } = useSuspenseQuery(
+    QUESTION_BY_ID_QUERY,
+    open
+      ? {
+        variables: { id },
+      }
+      : skipToken,
+  );
 
   const [updateQuestion] = useMutation(QUESTION_UPDATE_MUTATION, {
-    refetchQueries: [QUESTIONS_TABLE_QUERY],
+    refetchQueries: [
+      { query: QUESTIONS_TABLE_QUERY },
+      { query: QUESTION_BY_ID_QUERY, variables: { id } },
+    ],
 
     onError(error) {
       toast.error("題目更新失敗", {
@@ -124,16 +206,17 @@ function UpdateQuestionDialogContent({
       </DialogHeader>
       <UpdateQuestionForm
         defaultValues={{
-          title: question.question.title,
-          description: question.question.description,
-          category: question.question.category,
-          difficulty: question.question.difficulty,
-          referenceAnswer: question.question.referenceAnswer,
-          databaseID: question.question.database.id,
+          title: question?.question.title || "",
+          description: question?.question.description || "",
+          category: question?.question.category || "",
+          difficulty: question?.question.difficulty || QuestionDifficulty.Easy,
+          referenceAnswer: question?.question.referenceAnswer || "",
+          databaseID: question?.question.database.id || "",
         }}
         onSubmit={onSubmit}
         action="update"
-        databaseList={databaseList.databases}
+        onFormStateChange={onFormStateChange}
+        databaseList={databaseList?.databases || []}
       />
     </DialogContent>
   );
diff --git a/app/(admin)/(user-management)/groups/[id]/_components/audit-info-card.tsx b/app/(admin)/(user-management)/groups/[id]/_components/audit-info-card.tsx
index 6b83b6d..bd38411 100644
--- a/app/(admin)/(user-management)/groups/[id]/_components/audit-info-card.tsx
+++ b/app/(admin)/(user-management)/groups/[id]/_components/audit-info-card.tsx
@@ -26,13 +26,13 @@ function CardMain({ id }: { id: string }) {
         <li className="flex items-center gap-2">
           <Clock className="h-4 w-4 text-muted-foreground" />
           <span>
-            建立時間：{new Date(data.group.createdAt).toLocaleString()}
+            建立時間：{new Date(data.group.createdAt).toLocaleString("zh-TW", { timeZone: "Asia/Taipei" })}
           </span>
         </li>
         <li className="flex items-center gap-2">
           <Clock className="h-4 w-4 text-muted-foreground" />
           <span>
-            更新時間：{new Date(data.group.updatedAt).toLocaleString()}
+            更新時間：{new Date(data.group.updatedAt).toLocaleString("zh-TW", { timeZone: "Asia/Taipei" })}
           </span>
         </li>
       </ul>
diff --git a/app/(admin)/(user-management)/groups/_components/create.tsx b/app/(admin)/(user-management)/groups/_components/create.tsx
index 0083536..631702d 100644
--- a/app/(admin)/(user-management)/groups/_components/create.tsx
+++ b/app/(admin)/(user-management)/groups/_components/create.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { buttonVariants } from "@/components/ui/button";
+import { ConfirmationDialog } from "@/components/ui/confirmation-dialog";
 import {
   Dialog,
   DialogContent,
@@ -9,6 +10,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { useDialogCloseConfirmation } from "@/hooks/use-dialog-close-confirmation";
 import { useMutation, useSuspenseQuery } from "@apollo/client/react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -20,29 +22,62 @@ import { UpdateGroupForm, type UpdateGroupFormData } from "./update-form";
 export function CreateGroupTrigger() {
   const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
+
+  const {
+    showConfirmation,
+    handleDialogOpenChange,
+    handleConfirmClose,
+    handleCancelClose,
+  } = useDialogCloseConfirmation({
+    isDirty: isFormDirty,
+    setOpen,
+    onConfirmedClose: () => {
+      setIsFormDirty(false);
+    },
+  });
+
+  const handleFormStateChange = (isDirty: boolean) => {
+    setIsFormDirty(isDirty);
+  };
+
+  const handleCompleted = () => {
+    setIsFormDirty(false);
+    setOpen(false);
+    router.refresh();
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger className={buttonVariants()}>新增群組</DialogTrigger>
-      <CreateGroupDialogContent
-        onCompleted={() => {
-          setOpen(false);
-          router.refresh();
-        }}
+    <>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+        <DialogTrigger className={buttonVariants()}>新增群組</DialogTrigger>
+        <CreateGroupDialogContent
+          onCompleted={handleCompleted}
+          onFormStateChange={handleFormStateChange}
+        />
+      </Dialog>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={() => {}}
+        onConfirm={handleConfirmClose}
+        onCancel={handleCancelClose}
       />
-    </Dialog>
+    </>
   );
 }
 
 function CreateGroupDialogContent({
   onCompleted,
+  onFormStateChange,
 }: {
   onCompleted: () => void;
+  onFormStateChange: (isDirty: boolean) => void;
 }) {
   const { data: scopeSetList } = useSuspenseQuery(SCOPE_SET_LIST_QUERY);
 
   const [createGroup] = useMutation(GROUP_CREATE_MUTATION, {
-    refetchQueries: [GROUPS_TABLE_QUERY],
+    refetchQueries: [{ query: GROUPS_TABLE_QUERY }],
 
     onError(error) {
       toast.error("群組建立失敗", {
@@ -90,6 +125,7 @@ function CreateGroupDialogContent({
         }}
         onSubmit={onSubmit}
         action="create"
+        onFormStateChange={onFormStateChange}
         scopeSetList={scopeSetList.scopeSets}
       />
     </DialogContent>
diff --git a/app/(admin)/(user-management)/groups/_components/delete.tsx b/app/(admin)/(user-management)/groups/_components/delete.tsx
index 28bde40..984dde7 100644
--- a/app/(admin)/(user-management)/groups/_components/delete.tsx
+++ b/app/(admin)/(user-management)/groups/_components/delete.tsx
@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { buttonVariants } from "@/components/ui/button";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { useMutation, useSuspenseQuery } from "@apollo/client/react";
+import { skipToken, useMutation, useSuspenseQuery } from "@apollo/client/react";
 import { Trash } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Suspense, useState } from "react";
@@ -42,6 +42,7 @@ export function DeleteGroupDropdownTrigger({ id }: { id: string }) {
       <Suspense>
         <DeleteGroupAlertDialogContent
           id={id}
+          open={open}
           onCompleted={() => {
             setOpen(false);
             router.refresh();
@@ -66,6 +67,7 @@ export function DeleteGroupButtonTrigger({ id }: { id: string }) {
       <Suspense>
         <DeleteGroupAlertDialogContent
           id={id}
+          open={open}
           onCompleted={() => {
             setOpen(false);
             router.push(".");
@@ -78,14 +80,21 @@ export function DeleteGroupButtonTrigger({ id }: { id: string }) {
 
 function DeleteGroupAlertDialogContent({
   id,
+  open,
   onCompleted,
 }: {
   id: string;
+  open: boolean;
   onCompleted: () => void;
 }) {
-  const { data } = useSuspenseQuery(GROUP_BY_ID_QUERY, {
-    variables: { id },
-  });
+  const { data } = useSuspenseQuery(
+    GROUP_BY_ID_QUERY,
+    open
+      ? {
+        variables: { id },
+      }
+      : skipToken,
+  );
 
   const [deleteGroup] = useMutation(GROUP_DELETE_MUTATION, {
     refetchQueries: [GROUPS_TABLE_QUERY],
@@ -106,7 +115,7 @@ function DeleteGroupAlertDialogContent({
     <AlertDialogContent>
       <AlertDialogHeader>
         <AlertDialogTitle>
-          確定要刪除「{data.group.name}」群組嗎？
+          確定要刪除「{data?.group.name}」群組嗎？
         </AlertDialogTitle>
         <AlertDialogDescription>
           刪除後將無法復原這個群組。請謹慎操作。
diff --git a/app/(admin)/(user-management)/groups/_components/update-form.tsx b/app/(admin)/(user-management)/groups/_components/update-form.tsx
index 14a9332..35fb6f4 100644
--- a/app/(admin)/(user-management)/groups/_components/update-form.tsx
+++ b/app/(admin)/(user-management)/groups/_components/update-form.tsx
@@ -1,9 +1,11 @@
-import { Button } from "@/components/ui/button";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { InputTags } from "@/components/ui/input-tags";
 import { Textarea } from "@/components/ui/textarea";
+import { UpdateFormBody } from "@/components/update-modal/form-body";
+import type { UpdateFormBaseProps } from "@/components/update-modal/types";
 import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -19,11 +21,8 @@ export interface UpdateGroupFormData {
   scopeSetIDs: string[];
 }
 
-export interface UpdateGroupFormProps {
-  defaultValues?: z.infer<typeof formSchema>;
+export interface UpdateGroupFormProps extends Omit<UpdateFormBaseProps<z.infer<typeof formSchema>>, "onSubmit"> {
   onSubmit: (newValues: UpdateGroupFormData) => void;
-  action: "update" | "create";
-
   scopeSetList: { id: string; slug: string }[];
 }
 
@@ -31,6 +30,7 @@ export function UpdateGroupForm({
   defaultValues,
   onSubmit,
   action,
+  onFormStateChange,
   scopeSetList,
 }: UpdateGroupFormProps) {
   const form = useForm<z.infer<typeof formSchema>>({
@@ -39,8 +39,6 @@ export function UpdateGroupForm({
   });
 
   const handleSubmit = (data: z.infer<typeof formSchema>) => {
-    form.reset();
-
     // map scope set slugs to scope set ids
     const scopeSetIDs = data.scopeSetSlugs?.map((slug) => {
       const scopeSet = scopeSetList.find((scopeSet) => scopeSet.slug === slug);
@@ -57,70 +55,71 @@ export function UpdateGroupForm({
   };
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>群組名稱</FormLabel>
-              <FormControl>
-                <Input placeholder="e.g. 甲班" {...field} />
-              </FormControl>
-              <FormDescription>群組名稱，用於辨識群組。</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="description"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>群組描述</FormLabel>
-              <FormControl>
-                <Textarea
-                  placeholder="e.g. 114 學年度的甲班同學，具有普通使用者權限"
-                  {...field}
-                />
-              </FormControl>
-              <FormDescription>幫助管理者理解群組的用途。</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+    <UpdateFormBody
+      form={form}
+      onSubmit={handleSubmit}
+      action={action}
+      onFormStateChange={onFormStateChange}
+    >
+      <FormField
+        control={form.control}
+        name="name"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>群組名稱</FormLabel>
+            <FormControl>
+              <Input placeholder="e.g. 甲班" {...field} />
+            </FormControl>
+            <FormDescription>群組名稱，用於辨識群組。</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
-        <FormField
-          control={form.control}
-          name="scopeSetSlugs"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>權限集</FormLabel>
-              <FormControl>
-                <InputTags
-                  name="scopeSetSlugs"
-                  value={field.value ?? []}
-                  onChange={field.onChange}
-                  list="scopeSetList"
-                />
-              </FormControl>
-              <FormMessage />
-              <FormDescription>
-                輸入要套用的權限集 slug，例如 <code>admin</code>。
-              </FormDescription>
-            </FormItem>
-          )}
-        />
+      <FormField
+        control={form.control}
+        name="description"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>群組描述</FormLabel>
+            <FormControl>
+              <Textarea
+                placeholder="e.g. 114 學年度的甲班同學，具有普通使用者權限"
+                {...field}
+              />
+            </FormControl>
+            <FormDescription>幫助管理者理解群組的用途。</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
-        {/* scope set list */}
-        <datalist id="scopeSetList">
-          {scopeSetList.map((scopeSet) => <option key={scopeSet.id} value={scopeSet.slug} />)}
-        </datalist>
+      <FormField
+        control={form.control}
+        name="scopeSetSlugs"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>權限集</FormLabel>
+            <FormControl>
+              <InputTags
+                name="scopeSetSlugs"
+                value={field.value ?? []}
+                onChange={field.onChange}
+                list="scopeSetList"
+              />
+            </FormControl>
+            <FormMessage />
+            <FormDescription>
+              輸入要套用的權限集 slug，例如 <code>admin</code>。
+            </FormDescription>
+          </FormItem>
+        )}
+      />
 
-        <Button type="submit">{action === "update" ? "編輯" : "建立"}</Button>
-      </form>
-    </Form>
+      {/* scope set list */}
+      <datalist id="scopeSetList">
+        {scopeSetList.map((scopeSet) => <option key={scopeSet.id} value={scopeSet.slug} />)}
+      </datalist>
+    </UpdateFormBody>
   );
 }
diff --git a/app/(admin)/(user-management)/groups/_components/update.tsx b/app/(admin)/(user-management)/groups/_components/update.tsx
index 10d3afe..db14865 100644
--- a/app/(admin)/(user-management)/groups/_components/update.tsx
+++ b/app/(admin)/(user-management)/groups/_components/update.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { buttonVariants } from "@/components/ui/button";
+import { ConfirmationDialog } from "@/components/ui/confirmation-dialog";
 import {
   Dialog,
   DialogContent,
@@ -10,7 +11,8 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { useMutation, useSuspenseQuery } from "@apollo/client/react";
+import { useDialogCloseConfirmation } from "@/hooks/use-dialog-close-confirmation";
+import { skipToken, useMutation, useSuspenseQuery } from "@apollo/client/react";
 import { Pencil } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Suspense, useState } from "react";
@@ -22,70 +24,149 @@ import { UpdateGroupForm, type UpdateGroupFormData } from "./update-form";
 export function UpdateGroupDropdownTrigger({ id }: { id: string }) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
+
+  const {
+    showConfirmation,
+    handleDialogOpenChange,
+    handleConfirmClose,
+    handleCancelClose,
+  } = useDialogCloseConfirmation({
+    isDirty: isFormDirty,
+    setOpen,
+    onConfirmedClose: () => {
+      setIsFormDirty(false);
+    },
+  });
+
+  const handleFormStateChange = (isDirty: boolean) => {
+    setIsFormDirty(isDirty);
+  };
+
+  const handleCompleted = () => {
+    setIsFormDirty(false);
+    setOpen(false);
+    router.refresh();
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem
-          onClick={(e) => {
-            e.preventDefault();
-            setOpen(true);
-          }}
-        >
-          編輯權限集
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <Suspense>
-        <UpdateGroupDialogContent
-          id={id}
-          onCompleted={() => {
-            setOpen(false);
-            router.refresh();
-          }}
-        />
-      </Suspense>
-    </Dialog>
+    <>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+        <DialogTrigger asChild>
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.preventDefault();
+              setOpen(true);
+            }}
+          >
+            編輯權限集
+          </DropdownMenuItem>
+        </DialogTrigger>
+        <Suspense>
+          <UpdateGroupDialogContent
+            id={id}
+            open={open}
+            onCompleted={handleCompleted}
+            onFormStateChange={handleFormStateChange}
+          />
+        </Suspense>
+      </Dialog>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={() => {}}
+        onConfirm={handleConfirmClose}
+        onCancel={handleCancelClose}
+      />
+    </>
   );
 }
 
 export function UpdateGroupButtonTrigger({ id }: { id: string }) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
+
+  const {
+    showConfirmation,
+    handleDialogOpenChange,
+    handleConfirmClose,
+    handleCancelClose,
+  } = useDialogCloseConfirmation({
+    isDirty: isFormDirty,
+    setOpen,
+    onConfirmedClose: () => {
+      setIsFormDirty(false);
+    },
+  });
+
+  const handleFormStateChange = (isDirty: boolean) => {
+    setIsFormDirty(isDirty);
+  };
+
+  const handleCompleted = () => {
+    setIsFormDirty(false);
+    setOpen(false);
+    router.refresh();
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger className={buttonVariants()}>
-        <Pencil className="h-4 w-4" />
-        編輯
-      </DialogTrigger>
-
-      <Suspense>
-        <UpdateGroupDialogContent
-          id={id}
-          onCompleted={() => {
-            setOpen(false);
-            router.refresh();
-          }}
-        />
-      </Suspense>
-    </Dialog>
+    <>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+        <DialogTrigger className={buttonVariants()}>
+          <Pencil className="h-4 w-4" />
+          編輯
+        </DialogTrigger>
+
+        <Suspense>
+          <UpdateGroupDialogContent
+            id={id}
+            open={open}
+            onCompleted={handleCompleted}
+            onFormStateChange={handleFormStateChange}
+          />
+        </Suspense>
+      </Dialog>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={() => {}}
+        onConfirm={handleConfirmClose}
+        onCancel={handleCancelClose}
+      />
+    </>
   );
 }
 
 function UpdateGroupDialogContent({
   id,
+  open,
   onCompleted,
+  onFormStateChange,
 }: {
   id: string;
+  open: boolean;
   onCompleted: () => void;
+  onFormStateChange: (isDirty: boolean) => void;
 }) {
-  const { data: scopeSetList } = useSuspenseQuery(SCOPE_SET_LIST_QUERY);
-  const { data: group } = useSuspenseQuery(GROUP_BY_ID_QUERY, {
-    variables: { id },
-  });
+  const { data: scopeSetList } = useSuspenseQuery(
+    SCOPE_SET_LIST_QUERY,
+    open ? {} : skipToken,
+  );
+  const { data: group } = useSuspenseQuery(
+    GROUP_BY_ID_QUERY,
+    open
+      ? {
+        variables: { id },
+      }
+      : skipToken,
+  );
 
   const [updateGroup] = useMutation(GROUP_UPDATE_MUTATION, {
-    refetchQueries: [GROUPS_TABLE_QUERY],
+    refetchQueries: [
+      { query: GROUPS_TABLE_QUERY },
+      { query: GROUP_BY_ID_QUERY, variables: { id } },
+    ],
 
     onError(error) {
       toast.error("群組更新失敗", {
@@ -102,9 +183,9 @@ function UpdateGroupDialogContent({
   const onSubmit = (data: UpdateGroupFormData) => {
     try {
       const addScopeSetIDs = data.scopeSetIDs.filter(
-        (id) => !group.group.scopeSets?.some((scopeSet) => scopeSet.id === id),
+        (id) => !group?.group.scopeSets?.some((scopeSet) => scopeSet.id === id),
       );
-      const removeScopeSetIDs = group.group.scopeSets
+      const removeScopeSetIDs = group?.group.scopeSets
         ?.filter((scopeSet) => !data.scopeSetIDs.includes(scopeSet.id))
         .map((scopeSet) => scopeSet.id) ?? undefined;
       const clearScopeSets = data.scopeSetIDs.length === 0;
@@ -138,13 +219,14 @@ function UpdateGroupDialogContent({
       </DialogHeader>
       <UpdateGroupForm
         defaultValues={{
-          name: group.group.name,
-          description: group.group.description ?? undefined,
-          scopeSetSlugs: group.group.scopeSets?.map((scopeSet) => scopeSet.slug) ?? [],
+          name: group?.group.name || "",
+          description: group?.group.description ?? undefined,
+          scopeSetSlugs: group?.group.scopeSets?.map((scopeSet) => scopeSet.slug) ?? [],
         }}
         onSubmit={onSubmit}
         action="update"
-        scopeSetList={scopeSetList.scopeSets}
+        onFormStateChange={onFormStateChange}
+        scopeSetList={scopeSetList?.scopeSets || []}
       />
     </DialogContent>
   );
diff --git a/app/(admin)/(user-management)/scopesets/_components/create.tsx b/app/(admin)/(user-management)/scopesets/_components/create.tsx
index 9be362e..a7a1c60 100644
--- a/app/(admin)/(user-management)/scopesets/_components/create.tsx
+++ b/app/(admin)/(user-management)/scopesets/_components/create.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { buttonVariants } from "@/components/ui/button";
+import { ConfirmationDialog } from "@/components/ui/confirmation-dialog";
 import {
   Dialog,
   DialogContent,
@@ -9,6 +10,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { useDialogCloseConfirmation } from "@/hooks/use-dialog-close-confirmation";
 import { useMutation } from "@apollo/client/react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -21,27 +23,60 @@ import { formSchema, UpdateScopeSetForm } from "./update-form";
 export function CreateScopeSetTrigger() {
   const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
+
+  const {
+    showConfirmation,
+    handleDialogOpenChange,
+    handleConfirmClose,
+    handleCancelClose,
+  } = useDialogCloseConfirmation({
+    isDirty: isFormDirty,
+    setOpen,
+    onConfirmedClose: () => {
+      setIsFormDirty(false);
+    },
+  });
+
+  const handleFormStateChange = (isDirty: boolean) => {
+    setIsFormDirty(isDirty);
+  };
+
+  const handleCompleted = () => {
+    setIsFormDirty(false);
+    setOpen(false);
+    router.refresh();
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger className={buttonVariants()}>新增權限集</DialogTrigger>
-      <CreateScopeSetDialogContent
-        onCompleted={() => {
-          setOpen(false);
-          router.refresh();
-        }}
+    <>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+        <DialogTrigger className={buttonVariants()}>新增權限集</DialogTrigger>
+        <CreateScopeSetDialogContent
+          onCompleted={handleCompleted}
+          onFormStateChange={handleFormStateChange}
+        />
+      </Dialog>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={() => {}}
+        onConfirm={handleConfirmClose}
+        onCancel={handleCancelClose}
       />
-    </Dialog>
+    </>
   );
 }
 
 function CreateScopeSetDialogContent({
   onCompleted,
+  onFormStateChange,
 }: {
   onCompleted: () => void;
+  onFormStateChange: (isDirty: boolean) => void;
 }) {
   const [createScopeSet] = useMutation(CREATE_SCOPE_SET_MUTATION, {
-    refetchQueries: [SCOPE_SET_TABLE_QUERY],
+    refetchQueries: [{ query: SCOPE_SET_TABLE_QUERY }],
 
     onError(error) {
       toast.error("權限集建立失敗", {
@@ -91,6 +126,7 @@ function CreateScopeSetDialogContent({
         }}
         onSubmit={onSubmit}
         action="create"
+        onFormStateChange={onFormStateChange}
       />
     </DialogContent>
   );
diff --git a/app/(admin)/(user-management)/scopesets/_components/delete.tsx b/app/(admin)/(user-management)/scopesets/_components/delete.tsx
index 07f997b..a00a078 100644
--- a/app/(admin)/(user-management)/scopesets/_components/delete.tsx
+++ b/app/(admin)/(user-management)/scopesets/_components/delete.tsx
@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { buttonVariants } from "@/components/ui/button";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { useMutation, useSuspenseQuery } from "@apollo/client/react";
+import { skipToken, useMutation, useSuspenseQuery } from "@apollo/client/react";
 import { Trash } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Suspense, useState } from "react";
@@ -43,6 +43,7 @@ export function DeleteScopeSetDropdownTrigger({ id }: { id: string }) {
       <Suspense>
         <DeleteScopeSetAlertDialogContent
           id={id}
+          open={open}
           onCompleted={() => {
             setOpen(false);
             router.refresh();
@@ -67,6 +68,7 @@ export function DeleteScopeSetButtonTrigger({ id }: { id: string }) {
       <Suspense>
         <DeleteScopeSetAlertDialogContent
           id={id}
+          open={open}
           onCompleted={() => {
             setOpen(false);
             router.push(".");
@@ -79,14 +81,21 @@ export function DeleteScopeSetButtonTrigger({ id }: { id: string }) {
 
 function DeleteScopeSetAlertDialogContent({
   id,
+  open,
   onCompleted,
 }: {
   id: string;
+  open: boolean;
   onCompleted: () => void;
 }) {
-  const { data } = useSuspenseQuery(SCOPE_SET_BY_ID_QUERY, {
-    variables: { id },
-  });
+  const { data } = useSuspenseQuery(
+    SCOPE_SET_BY_ID_QUERY,
+    open
+      ? {
+        variables: { id },
+      }
+      : skipToken,
+  );
 
   const [deleteScopeSet] = useMutation(DELETE_SCOPE_SET_MUTATION, {
     refetchQueries: [SCOPE_SET_TABLE_QUERY],
@@ -107,7 +116,7 @@ function DeleteScopeSetAlertDialogContent({
     <AlertDialogContent>
       <AlertDialogHeader>
         <AlertDialogTitle>
-          確定要刪除「{data.scopeSet.slug}」權限集嗎？
+          確定要刪除「{data?.scopeSet.slug}」權限集嗎？
         </AlertDialogTitle>
         <AlertDialogDescription>
           刪除後將無法復原這個權限集，且日後不能建立重名的 slug。請謹慎操作。
diff --git a/app/(admin)/(user-management)/scopesets/_components/update-form.tsx b/app/(admin)/(user-management)/scopesets/_components/update-form.tsx
index 9a18361..469c6ca 100644
--- a/app/(admin)/(user-management)/scopesets/_components/update-form.tsx
+++ b/app/(admin)/(user-management)/scopesets/_components/update-form.tsx
@@ -1,9 +1,11 @@
-import { Button } from "@/components/ui/button";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { InputTags } from "@/components/ui/input-tags";
 import { Textarea } from "@/components/ui/textarea";
+import { UpdateFormBody } from "@/components/update-modal/form-body";
+import type { UpdateFormBaseProps } from "@/components/update-modal/types";
 import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -13,95 +15,73 @@ export const formSchema = z.object({
   scopes: z.array(z.string()).optional(),
 });
 
-export interface UpdateScopeSetFormProps {
-  /**
-   * The default values of the form.
-   */
-  defaultValues?: z.infer<typeof formSchema>;
-
-  /**
-   * The function to call when the form is submitted.
-   *
-   * @param newValues - The new values of the form.
-   */
-  onSubmit: (newValues: z.infer<typeof formSchema>) => void;
-
-  /**
-   * The action to take.
-   *
-   * If action is "update", the slug will be disabled.
-   */
-  action: "update" | "create";
-}
+export type UpdateScopeSetFormProps = UpdateFormBaseProps<z.infer<typeof formSchema>>;
 
 export function UpdateScopeSetForm({
-  defaultValues: currentValues,
+  defaultValues,
   onSubmit,
   action,
+  onFormStateChange,
 }: UpdateScopeSetFormProps) {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-    defaultValues: currentValues,
+    defaultValues,
   });
 
-  const handleSubmit = (data: z.infer<typeof formSchema>) => {
-    form.reset();
-    onSubmit(data);
-  };
-
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="slug"
-          disabled={action === "update"}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>權限集名稱</FormLabel>
-              <FormControl>
-                <Input placeholder="e.g. question-reader" {...field} />
-              </FormControl>
-              <FormDescription>引用權限集時，人類可讀的代號。</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="description"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>權限集描述</FormLabel>
-              <FormControl>
-                <Textarea placeholder="e.g. 可以閱讀問題" {...field} />
-              </FormControl>
-              <FormDescription>幫助管理者理解權限集的用途。</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+    <UpdateFormBody
+      form={form}
+      onSubmit={onSubmit}
+      action={action}
+      onFormStateChange={onFormStateChange}
+    >
+      <FormField
+        control={form.control}
+        name="slug"
+        disabled={action === "update"}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>權限集名稱</FormLabel>
+            <FormControl>
+              <Input placeholder="e.g. question-reader" {...field} />
+            </FormControl>
+            <FormDescription>引用權限集時，人類可讀的代號。</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
-        <FormField
-          control={form.control}
-          name="scopes"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>權限</FormLabel>
-              <FormControl>
-                <InputTags
-                  value={field.value ?? []}
-                  onChange={field.onChange}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+      <FormField
+        control={form.control}
+        name="description"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>權限集描述</FormLabel>
+            <FormControl>
+              <Textarea placeholder="e.g. 可以閱讀問題" {...field} />
+            </FormControl>
+            <FormDescription>幫助管理者理解權限集的用途。</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
-        <Button type="submit">{action === "update" ? "編輯" : "建立"}</Button>
-      </form>
-    </Form>
+      <FormField
+        control={form.control}
+        name="scopes"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>權限</FormLabel>
+            <FormControl>
+              <InputTags
+                value={field.value ?? []}
+                onChange={field.onChange}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </UpdateFormBody>
   );
 }
diff --git a/app/(admin)/(user-management)/scopesets/_components/update.tsx b/app/(admin)/(user-management)/scopesets/_components/update.tsx
index b489e58..709efc8 100644
--- a/app/(admin)/(user-management)/scopesets/_components/update.tsx
+++ b/app/(admin)/(user-management)/scopesets/_components/update.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { buttonVariants } from "@/components/ui/button";
+import { ConfirmationDialog } from "@/components/ui/confirmation-dialog";
 import {
   Dialog,
   DialogContent,
@@ -10,7 +11,8 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { useMutation, useSuspenseQuery } from "@apollo/client/react";
+import { useDialogCloseConfirmation } from "@/hooks/use-dialog-close-confirmation";
+import { skipToken, useMutation, useSuspenseQuery } from "@apollo/client/react";
 import { Pencil } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Suspense, useState } from "react";
@@ -24,69 +26,145 @@ import { formSchema, UpdateScopeSetForm } from "./update-form";
 export function UpdateScopeSetDropdownTrigger({ id }: { id: string }) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
+
+  const {
+    showConfirmation,
+    handleDialogOpenChange,
+    handleConfirmClose,
+    handleCancelClose,
+  } = useDialogCloseConfirmation({
+    isDirty: isFormDirty,
+    setOpen,
+    onConfirmedClose: () => {
+      setIsFormDirty(false);
+    },
+  });
+
+  const handleFormStateChange = (isDirty: boolean) => {
+    setIsFormDirty(isDirty);
+  };
+
+  const handleCompleted = () => {
+    setIsFormDirty(false);
+    setOpen(false);
+    router.refresh();
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem
-          onClick={(e) => {
-            e.preventDefault();
-            setOpen(true);
-          }}
-        >
-          編輯權限集
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <Suspense>
-        <UpdateScopeSetDialogContent
-          id={id}
-          onCompleted={() => {
-            setOpen(false);
-            router.refresh();
-          }}
-        />
-      </Suspense>
-    </Dialog>
+    <>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+        <DialogTrigger asChild>
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.preventDefault();
+              setOpen(true);
+            }}
+          >
+            編輯權限集
+          </DropdownMenuItem>
+        </DialogTrigger>
+        <Suspense>
+          <UpdateScopeSetDialogContent
+            id={id}
+            open={open}
+            onCompleted={handleCompleted}
+            onFormStateChange={handleFormStateChange}
+          />
+        </Suspense>
+      </Dialog>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={() => {}}
+        onConfirm={handleConfirmClose}
+        onCancel={handleCancelClose}
+      />
+    </>
   );
 }
 
 export function UpdateScopeSetButtonTrigger({ id }: { id: string }) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
+
+  const {
+    showConfirmation,
+    handleDialogOpenChange,
+    handleConfirmClose,
+    handleCancelClose,
+  } = useDialogCloseConfirmation({
+    isDirty: isFormDirty,
+    setOpen,
+    onConfirmedClose: () => {
+      setIsFormDirty(false);
+    },
+  });
+
+  const handleFormStateChange = (isDirty: boolean) => {
+    setIsFormDirty(isDirty);
+  };
+
+  const handleCompleted = () => {
+    setIsFormDirty(false);
+    setOpen(false);
+    router.refresh();
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger className={buttonVariants()}>
-        <Pencil className="h-4 w-4" />
-        編輯
-      </DialogTrigger>
-
-      <Suspense>
-        <UpdateScopeSetDialogContent
-          id={id}
-          onCompleted={() => {
-            setOpen(false);
-            router.refresh();
-          }}
-        />
-      </Suspense>
-    </Dialog>
+    <>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+        <DialogTrigger className={buttonVariants()}>
+          <Pencil className="h-4 w-4" />
+          編輯
+        </DialogTrigger>
+
+        <Suspense>
+          <UpdateScopeSetDialogContent
+            id={id}
+            open={open}
+            onCompleted={handleCompleted}
+            onFormStateChange={handleFormStateChange}
+          />
+        </Suspense>
+      </Dialog>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={() => {}}
+        onConfirm={handleConfirmClose}
+        onCancel={handleCancelClose}
+      />
+    </>
   );
 }
 
 function UpdateScopeSetDialogContent({
   id,
+  open,
   onCompleted,
+  onFormStateChange,
 }: {
   id: string;
+  open: boolean;
   onCompleted: () => void;
+  onFormStateChange: (isDirty: boolean) => void;
 }) {
-  const { data } = useSuspenseQuery(SCOPE_SET_BY_ID_QUERY, {
-    variables: { id },
-  });
+  const { data } = useSuspenseQuery(
+    SCOPE_SET_BY_ID_QUERY,
+    open
+      ? {
+        variables: { id },
+      }
+      : skipToken,
+  );
 
   const [updateScopeSet] = useMutation(UPDATE_SCOPE_SET_MUTATION, {
-    refetchQueries: [SCOPE_SET_TABLE_QUERY, SCOPE_SET_BY_ID_QUERY],
+    refetchQueries: [
+      { query: SCOPE_SET_TABLE_QUERY },
+      { query: SCOPE_SET_BY_ID_QUERY, variables: { id } },
+    ],
 
     onError(error) {
       toast.error("權限集更新失敗", {
@@ -134,12 +212,13 @@ function UpdateScopeSetDialogContent({
       </DialogHeader>
       <UpdateScopeSetForm
         defaultValues={{
-          slug: data.scopeSet.slug,
-          description: data.scopeSet.description ?? "",
-          scopes: data.scopeSet.scopes ?? [],
+          slug: data?.scopeSet.slug || "",
+          description: data?.scopeSet.description ?? "",
+          scopes: data?.scopeSet.scopes ?? [],
         }}
         onSubmit={onSubmit}
         action="update"
+        onFormStateChange={onFormStateChange}
       />
     </DialogContent>
   );
diff --git a/app/(admin)/(user-management)/users/[id]/_components/audit-info.tsx b/app/(admin)/(user-management)/users/[id]/_components/audit-info.tsx
index 913fae9..3599a92 100644
--- a/app/(admin)/(user-management)/users/[id]/_components/audit-info.tsx
+++ b/app/(admin)/(user-management)/users/[id]/_components/audit-info.tsx
@@ -26,13 +26,13 @@ function CardMain({ id }: { id: string }) {
         <li className="flex items-center gap-2">
           <Clock className="h-4 w-4 text-muted-foreground" />
           <span>
-            建立時間：{new Date(data.user.createdAt).toLocaleString()}
+            建立時間：{new Date(data.user.createdAt).toLocaleString("zh-TW", { timeZone: "Asia/Taipei" })}
           </span>
         </li>
         <li className="flex items-center gap-2">
           <Clock className="h-4 w-4 text-muted-foreground" />
           <span>
-            更新時間：{new Date(data.user.updatedAt).toLocaleString()}
+            更新時間：{new Date(data.user.updatedAt).toLocaleString("zh-TW", { timeZone: "Asia/Taipei" })}
           </span>
         </li>
       </ul>
diff --git a/app/(admin)/(user-management)/users/_components/delete.tsx b/app/(admin)/(user-management)/users/_components/delete.tsx
index afb1175..a4bbbd0 100644
--- a/app/(admin)/(user-management)/users/_components/delete.tsx
+++ b/app/(admin)/(user-management)/users/_components/delete.tsx
@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { buttonVariants } from "@/components/ui/button";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { useMutation, useSuspenseQuery } from "@apollo/client/react";
+import { skipToken, useMutation, useSuspenseQuery } from "@apollo/client/react";
 import { Trash } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Suspense, useState } from "react";
@@ -42,6 +42,7 @@ export function DeleteUserDropdownTrigger({ id }: { id: string }) {
       <Suspense>
         <DeleteUserAlertDialogContent
           id={id}
+          open={open}
           onCompleted={() => {
             setOpen(false);
             router.refresh();
@@ -66,6 +67,7 @@ export function DeleteUserButtonTrigger({ id }: { id: string }) {
       <Suspense>
         <DeleteUserAlertDialogContent
           id={id}
+          open={open}
           onCompleted={() => {
             setOpen(false);
             router.push(".");
@@ -78,14 +80,21 @@ export function DeleteUserButtonTrigger({ id }: { id: string }) {
 
 function DeleteUserAlertDialogContent({
   id,
+  open,
   onCompleted,
 }: {
   id: string;
+  open: boolean;
   onCompleted: () => void;
 }) {
-  const { data } = useSuspenseQuery(USER_BY_ID_QUERY, {
-    variables: { id },
-  });
+  const { data } = useSuspenseQuery(
+    USER_BY_ID_QUERY,
+    open
+      ? {
+        variables: { id },
+      }
+      : skipToken,
+  );
 
   const [deleteUser] = useMutation(USER_DELETE_MUTATION, {
     refetchQueries: [USERS_TABLE_QUERY],
@@ -106,7 +115,7 @@ function DeleteUserAlertDialogContent({
     <AlertDialogContent>
       <AlertDialogHeader>
         <AlertDialogTitle>
-          確定要刪除「{data.user.name}」使用者嗎？
+          確定要刪除「{data?.user.name}」使用者嗎？
         </AlertDialogTitle>
         <AlertDialogDescription>
           刪除後將無法復原此使用者。請謹慎操作。
diff --git a/app/(admin)/(user-management)/users/_components/update-form.tsx b/app/(admin)/(user-management)/users/_components/update-form.tsx
index 3e37919..be35269 100644
--- a/app/(admin)/(user-management)/users/_components/update-form.tsx
+++ b/app/(admin)/(user-management)/users/_components/update-form.tsx
@@ -1,9 +1,11 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { UpdateFormBody } from "@/components/update-modal/form-body";
+import type { UpdateFormBaseProps } from "@/components/update-modal/types";
 import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -20,11 +22,8 @@ export interface UpdateUserFormData {
   groupID: string;
 }
 
-export interface UpdateUserFormProps {
-  defaultValues?: z.infer<typeof formSchema>;
+export interface UpdateUserFormProps extends Omit<UpdateFormBaseProps<z.infer<typeof formSchema>>, "onSubmit"> {
   onSubmit: (newValues: UpdateUserFormData) => void;
-  action: "update" | "create";
-
   groupList: { id: string; name: string }[];
 }
 
@@ -32,6 +31,7 @@ export function UpdateUserForm({
   defaultValues,
   onSubmit,
   action,
+  onFormStateChange,
   groupList,
 }: UpdateUserFormProps) {
   const form = useForm<z.infer<typeof formSchema>>({
@@ -40,8 +40,6 @@ export function UpdateUserForm({
   });
 
   const handleSubmit = (data: z.infer<typeof formSchema>) => {
-    form.reset();
-
     onSubmit({
       name: data.name,
       avatar: data.avatar,
@@ -51,74 +49,75 @@ export function UpdateUserForm({
   };
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>名稱</FormLabel>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <div className="flex items-center gap-4">
-          <FormField
-            control={form.control}
-            name="avatar"
-            render={({ field }) => (
-              <FormItem className="flex-1">
-                <FormLabel>頭貼</FormLabel>
-                <FormControl>
-                  <Input {...field} placeholder="頭貼 URL" />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <Avatar>
-            <AvatarImage src={form.watch("avatar")} />
-            <AvatarFallback>{form.watch("name")}</AvatarFallback>
-          </Avatar>
-        </div>
+    <UpdateFormBody
+      form={form}
+      onSubmit={handleSubmit}
+      action={action}
+      onFormStateChange={onFormStateChange}
+    >
+      <FormField
+        control={form.control}
+        name="name"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>名稱</FormLabel>
+            <FormControl>
+              <Input {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
 
+      <div className="flex items-center gap-4">
         <FormField
           control={form.control}
-          name="groupID"
+          name="avatar"
           render={({ field }) => (
-            <FormItem>
-              <FormLabel>群組</FormLabel>
+            <FormItem className="flex-1">
+              <FormLabel>頭貼</FormLabel>
               <FormControl>
-                <Select
-                  onValueChange={field.onChange}
-                  defaultValue={field.value}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="選擇群組" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {groupList.map((group) => (
-                      <SelectItem key={group.id} value={group.id}>
-                        {group.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                <Input {...field} placeholder="頭貼 URL" />
               </FormControl>
               <FormMessage />
-              <FormDescription>選擇這個使用者屬於的群組。</FormDescription>
             </FormItem>
           )}
         />
 
-        <Button type="submit">{action === "update" ? "編輯" : "建立"}</Button>
-      </form>
-    </Form>
+        <Avatar>
+          <AvatarImage src={form.watch("avatar")} />
+          <AvatarFallback>{form.watch("name")}</AvatarFallback>
+        </Avatar>
+      </div>
+
+      <FormField
+        control={form.control}
+        name="groupID"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>群組</FormLabel>
+            <FormControl>
+              <Select
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="選擇群組" />
+                </SelectTrigger>
+                <SelectContent>
+                  {groupList.map((group) => (
+                    <SelectItem key={group.id} value={group.id}>
+                      {group.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormControl>
+            <FormMessage />
+            <FormDescription>選擇這個使用者屬於的群組。</FormDescription>
+          </FormItem>
+        )}
+      />
+    </UpdateFormBody>
   );
 }
diff --git a/app/(admin)/(user-management)/users/_components/update.tsx b/app/(admin)/(user-management)/users/_components/update.tsx
index 119924b..0341f0c 100644
--- a/app/(admin)/(user-management)/users/_components/update.tsx
+++ b/app/(admin)/(user-management)/users/_components/update.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { buttonVariants } from "@/components/ui/button";
+import { ConfirmationDialog } from "@/components/ui/confirmation-dialog";
 import {
   Dialog,
   DialogContent,
@@ -10,7 +11,8 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { useMutation, useSuspenseQuery } from "@apollo/client/react";
+import { useDialogCloseConfirmation } from "@/hooks/use-dialog-close-confirmation";
+import { skipToken, useMutation, useSuspenseQuery } from "@apollo/client/react";
 import { Pencil } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Suspense, useState } from "react";
@@ -22,70 +24,149 @@ import { UpdateUserForm, type UpdateUserFormData } from "./update-form";
 export function UpdateUserDropdownTrigger({ id }: { id: string }) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
+
+  const {
+    showConfirmation,
+    handleDialogOpenChange,
+    handleConfirmClose,
+    handleCancelClose,
+  } = useDialogCloseConfirmation({
+    isDirty: isFormDirty,
+    setOpen,
+    onConfirmedClose: () => {
+      setIsFormDirty(false);
+    },
+  });
+
+  const handleFormStateChange = (isDirty: boolean) => {
+    setIsFormDirty(isDirty);
+  };
+
+  const handleCompleted = () => {
+    setIsFormDirty(false);
+    setOpen(false);
+    router.refresh();
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem
-          onClick={(e) => {
-            e.preventDefault();
-            setOpen(true);
-          }}
-        >
-          編輯使用者
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <Suspense>
-        <UpdateUserDialogContent
-          id={id}
-          onCompleted={() => {
-            setOpen(false);
-            router.refresh();
-          }}
-        />
-      </Suspense>
-    </Dialog>
+    <>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+        <DialogTrigger asChild>
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.preventDefault();
+              setOpen(true);
+            }}
+          >
+            編輯使用者
+          </DropdownMenuItem>
+        </DialogTrigger>
+        <Suspense>
+          <UpdateUserDialogContent
+            id={id}
+            open={open}
+            onCompleted={handleCompleted}
+            onFormStateChange={handleFormStateChange}
+          />
+        </Suspense>
+      </Dialog>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={() => {}}
+        onConfirm={handleConfirmClose}
+        onCancel={handleCancelClose}
+      />
+    </>
   );
 }
 
 export function UpdateUserButtonTrigger({ id }: { id: string }) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
+
+  const {
+    showConfirmation,
+    handleDialogOpenChange,
+    handleConfirmClose,
+    handleCancelClose,
+  } = useDialogCloseConfirmation({
+    isDirty: isFormDirty,
+    setOpen,
+    onConfirmedClose: () => {
+      setIsFormDirty(false);
+    },
+  });
+
+  const handleFormStateChange = (isDirty: boolean) => {
+    setIsFormDirty(isDirty);
+  };
+
+  const handleCompleted = () => {
+    setIsFormDirty(false);
+    setOpen(false);
+    router.refresh();
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger className={buttonVariants()}>
-        <Pencil className="h-4 w-4" />
-        編輯
-      </DialogTrigger>
-
-      <Suspense>
-        <UpdateUserDialogContent
-          id={id}
-          onCompleted={() => {
-            setOpen(false);
-            router.refresh();
-          }}
-        />
-      </Suspense>
-    </Dialog>
+    <>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+        <DialogTrigger className={buttonVariants()}>
+          <Pencil className="h-4 w-4" />
+          編輯
+        </DialogTrigger>
+
+        <Suspense>
+          <UpdateUserDialogContent
+            id={id}
+            open={open}
+            onCompleted={handleCompleted}
+            onFormStateChange={handleFormStateChange}
+          />
+        </Suspense>
+      </Dialog>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={() => {}}
+        onConfirm={handleConfirmClose}
+        onCancel={handleCancelClose}
+      />
+    </>
   );
 }
 
 function UpdateUserDialogContent({
   id,
+  open,
   onCompleted,
+  onFormStateChange,
 }: {
   id: string;
+  open: boolean;
   onCompleted: () => void;
+  onFormStateChange: (isDirty: boolean) => void;
 }) {
-  const { data: groupList } = useSuspenseQuery(GROUP_LIST_QUERY);
-  const { data: user } = useSuspenseQuery(USER_BY_ID_QUERY, {
-    variables: { id },
-  });
+  const { data: groupList } = useSuspenseQuery(
+    GROUP_LIST_QUERY,
+    open ? {} : skipToken,
+  );
+  const { data: user } = useSuspenseQuery(
+    USER_BY_ID_QUERY,
+    open
+      ? {
+        variables: { id },
+      }
+      : skipToken,
+  );
 
   const [updateUser] = useMutation(USER_UPDATE_MUTATION, {
-    refetchQueries: [USERS_TABLE_QUERY],
+    refetchQueries: [
+      { query: USERS_TABLE_QUERY },
+      { query: USER_BY_ID_QUERY, variables: { id } },
+    ],
 
     onError(error) {
       toast.error("使用者更新失敗", {
@@ -124,13 +205,14 @@ function UpdateUserDialogContent({
       </DialogHeader>
       <UpdateUserForm
         defaultValues={{
-          name: user.user.name,
-          avatar: user.user.avatar ?? undefined,
-          groupID: user.user.group.id,
+          name: user?.user.name || "",
+          avatar: user?.user.avatar ?? undefined,
+          groupID: user?.user.group.id || "",
         }}
         onSubmit={onSubmit}
         action="update"
-        groupList={groupList.groups}
+        onFormStateChange={onFormStateChange}
+        groupList={groupList?.groups || []}
       />
     </DialogContent>
   );
diff --git a/app/(admin)/layout.tsx b/app/(admin)/layout.tsx
index 99218f9..c94de34 100644
--- a/app/(admin)/layout.tsx
+++ b/app/(admin)/layout.tsx
@@ -1,5 +1,4 @@
 import { AppSidebar } from "@/components/app-sidebar";
-import AuthGuard from "@/components/auth-guard";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 
 export default function AdminLayout({
@@ -8,18 +7,16 @@ export default function AdminLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <AuthGuard>
-      <SidebarProvider
-        style={{
-          "--sidebar-width": "calc(var(--spacing) * 72)",
-          "--header-height": "calc(var(--spacing) * 12)",
-        } as React.CSSProperties}
-      >
-        <AppSidebar variant="inset" />
-        <SidebarInset>
-          {children}
-        </SidebarInset>
-      </SidebarProvider>
-    </AuthGuard>
+    <SidebarProvider
+      style={{
+        "--sidebar-width": "calc(var(--spacing) * 72)",
+        "--header-height": "calc(var(--spacing) * 12)",
+      } as React.CSSProperties}
+    >
+      <AppSidebar variant="inset" />
+      <SidebarInset>
+        {children}
+      </SidebarInset>
+    </SidebarProvider>
   );
 }
diff --git a/app/(admin)/me/_components/form.tsx b/app/(admin)/me/_components/form.tsx
index 9463380..93661c2 100644
--- a/app/(admin)/me/_components/form.tsx
+++ b/app/(admin)/me/_components/form.tsx
@@ -4,6 +4,7 @@ import AppAvatar from "@/components/avatar";
 import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { useFormDirtyWarning } from "@/hooks/use-form-dirty-warning";
 import { BASIC_USER_INFO_QUERY } from "@/lib/user";
 import { useUser } from "@/providers/use-user";
 import { useMutation } from "@apollo/client/react";
@@ -29,6 +30,8 @@ export function MeForm() {
     },
   });
 
+  useFormDirtyWarning(form.formState.isDirty);
+
   const avatar = form.watch("avatar");
 
   const [updateMe] = useMutation(ME_UPDATE_MUTATION, {
diff --git a/app/api/auth/callback/route.ts b/app/api/auth/callback/route.ts
new file mode 100644
index 0000000..c5416d8
--- /dev/null
+++ b/app/api/auth/callback/route.ts
@@ -0,0 +1,117 @@
+import { clearOAuthState, exchangeCodeForToken, getOAuthState, OAUTH_CONFIG, setAuthToken } from "@/lib/auth";
+import { NextRequest, NextResponse } from "next/server";
+
+/**
+ * OAuth 2.0 Authorization Code Flow Callback Handler
+ *
+ * This endpoint handles the callback from the OAuth authorization server
+ * according to RFC 6749 and RFC 7636 (PKCE).
+ *
+ * Expected query parameters:
+ * - code: Authorization code from the OAuth server
+ * - state: State parameter for CSRF protection
+ * - error: Error code if authorization failed
+ * - error_description: Human-readable error description
+ */
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const code = searchParams.get("code");
+  const state = searchParams.get("state");
+  const error = searchParams.get("error");
+  const errorDescription = searchParams.get("error_description");
+
+  // Handle OAuth errors
+  if (error) {
+    console.error("OAuth authorization error:", error, errorDescription);
+
+    const errorUrl = new URL("/login", request.url);
+    errorUrl.searchParams.set("error", error);
+    if (errorDescription) {
+      errorUrl.searchParams.set("error_description", errorDescription);
+    }
+
+    return NextResponse.redirect(errorUrl);
+  }
+
+  // Validate required parameters
+  if (!code || !state) {
+    console.error("Missing required parameters in OAuth callback");
+
+    const errorUrl = new URL("/login", request.url);
+    errorUrl.searchParams.set("error", "invalid_request");
+    errorUrl.searchParams.set("error_description", "Missing required parameters");
+
+    return NextResponse.redirect(errorUrl);
+  }
+
+  try {
+    // Retrieve and validate stored OAuth state
+    const { state: storedState, codeVerifier } = await getOAuthState();
+
+    if (!storedState || !codeVerifier) {
+      console.error("Missing OAuth state or code verifier");
+
+      const errorUrl = new URL("/login", request.url);
+      errorUrl.searchParams.set("error", "invalid_request");
+      errorUrl.searchParams.set("error_description", "OAuth state not found");
+
+      return NextResponse.redirect(errorUrl);
+    }
+
+    // Validate state parameter (CSRF protection)
+    if (state !== storedState) {
+      console.error("OAuth state mismatch", { state, storedState });
+
+      const errorUrl = new URL("/login", request.url);
+      errorUrl.searchParams.set("error", "invalid_request");
+      errorUrl.searchParams.set("error_description", "Invalid state parameter");
+
+      return NextResponse.redirect(errorUrl);
+    }
+
+    // Exchange authorization code for access token
+    const redirectUri = new URL(OAUTH_CONFIG.CALLBACK_PATH, request.url).toString();
+    const tokenResponse = await exchangeCodeForToken(code, redirectUri, codeVerifier);
+
+    // Store the access token in encrypted session
+    await setAuthToken(
+      tokenResponse.access_token,
+      tokenResponse.token_type,
+      tokenResponse.expires_in,
+    );
+
+    // Clear OAuth state cookies
+    await clearOAuthState();
+
+    // Redirect to the main application
+    const successUrl = new URL("/", request.url);
+    return NextResponse.redirect(successUrl);
+  } catch (error) {
+    console.error("Token exchange failed:", error);
+
+    const errorUrl = new URL("/login", request.url);
+    errorUrl.searchParams.set("error", "server_error");
+    errorUrl.searchParams.set("error_description", "Failed to exchange authorization code");
+
+    return NextResponse.redirect(errorUrl);
+  }
+}
+
+/**
+ * Handle unsupported HTTP methods
+ */
+export async function POST() {
+  return new NextResponse("Method Not Allowed", { status: 405 });
+}
+
+export async function PUT() {
+  return new NextResponse("Method Not Allowed", { status: 405 });
+}
+
+export async function DELETE() {
+  return new NextResponse("Method Not Allowed", { status: 405 });
+}
+
+export async function PATCH() {
+  return new NextResponse("Method Not Allowed", { status: 405 });
+}
diff --git a/app/api/auth/login/route.ts b/app/api/auth/login/route.ts
new file mode 100644
index 0000000..f4d5c51
--- /dev/null
+++ b/app/api/auth/login/route.ts
@@ -0,0 +1,65 @@
+import { buildAuthorizeUrl, generateCodeVerifier, generateState, OAUTH_CONFIG, setOAuthState } from "@/lib/auth";
+import { redirectIfAuthenticated } from "@/lib/auth.rsc";
+import { NextRequest, NextResponse } from "next/server";
+
+/**
+ * OAuth 2.0 Authorization Code Flow with PKCE - Login Initiation
+ *
+ * This endpoint initiates the OAuth 2.0 authorization flow according to
+ * RFC 6749 and RFC 7636 (PKCE for OAuth Public Clients).
+ *
+ * The flow follows these steps:
+ * 1. Generate PKCE code verifier and challenge
+ * 2. Generate state parameter for CSRF protection
+ * 3. Store state and code verifier in secure HttpOnly cookies
+ * 4. Redirect user to authorization server
+ */
+export async function GET(request: NextRequest) {
+  try {
+    // Check if user is already authenticated
+    await redirectIfAuthenticated();
+
+    // Generate PKCE parameters
+    const codeVerifier = generateCodeVerifier();
+    const state = generateState();
+
+    // Store OAuth state and code verifier in secure cookies
+    await setOAuthState(state, codeVerifier);
+
+    // Build the callback URI
+    const callbackUri = new URL(OAUTH_CONFIG.CALLBACK_PATH, request.url).toString();
+
+    // Build authorization URL with PKCE parameters
+    const authorizeUrl = await buildAuthorizeUrl(callbackUri, state, codeVerifier);
+
+    // Redirect to authorization server
+    return NextResponse.redirect(authorizeUrl);
+  } catch (error) {
+    console.error("Login initiation failed:", error);
+
+    const errorUrl = new URL("/login", request.url);
+    errorUrl.searchParams.set("error", "server_error");
+    errorUrl.searchParams.set("error_description", "Failed to initiate login");
+
+    return NextResponse.redirect(errorUrl);
+  }
+}
+
+/**
+ * Handle unsupported HTTP methods
+ */
+export async function POST() {
+  return new NextResponse("Method Not Allowed", { status: 405 });
+}
+
+export async function PUT() {
+  return new NextResponse("Method Not Allowed", { status: 405 });
+}
+
+export async function DELETE() {
+  return new NextResponse("Method Not Allowed", { status: 405 });
+}
+
+export async function PATCH() {
+  return new NextResponse("Method Not Allowed", { status: 405 });
+}
diff --git a/app/api/auth/logout/route.ts b/app/api/auth/logout/route.ts
new file mode 100644
index 0000000..f534d3f
--- /dev/null
+++ b/app/api/auth/logout/route.ts
@@ -0,0 +1,111 @@
+import { clearAuthToken, getAuthToken, revokeToken } from "@/lib/auth";
+import { NextRequest, NextResponse } from "next/server";
+
+/**
+ * OAuth 2.0 Token Revocation - Logout Handler
+ *
+ * This endpoint handles user logout according to RFC 7009 (OAuth 2.0 Token Revocation).
+ *
+ * The logout process:
+ * 1. Retrieve the access token from HttpOnly cookie
+ * 2. Revoke the token at the authorization server
+ * 3. Clear the authentication cookie
+ * 4. Redirect to login page
+ */
+export async function POST() {
+  try {
+    // Get the current access token
+    const token = await getAuthToken();
+
+    // If there's a token, revoke it at the authorization server
+    if (token) {
+      try {
+        await revokeToken(token);
+      } catch (error) {
+        // Log the error but continue with logout process
+        // According to RFC 7009, the client should continue even if revocation fails
+        console.error("Token revocation failed:", error);
+      }
+    }
+
+    // Clear the authentication cookie
+    await clearAuthToken();
+
+    // Return success response
+    return NextResponse.json({ success: true }, { status: 200 });
+  } catch (error) {
+    console.error("Logout failed:", error);
+
+    // Even if logout fails, clear the local cookie
+    try {
+      await clearAuthToken();
+    } catch (clearError) {
+      console.error("Failed to clear auth cookie:", clearError);
+    }
+
+    return NextResponse.json(
+      {
+        error: "server_error",
+        error_description: "Logout failed, but local session cleared",
+      },
+      { status: 500 },
+    );
+  }
+}
+
+/**
+ * GET method for logout (for simple link-based logout)
+ */
+export async function GET(request: NextRequest) {
+  try {
+    // Get the current access token
+    const token = await getAuthToken();
+
+    // If there's a token, revoke it at the authorization server
+    if (token) {
+      try {
+        await revokeToken(token);
+      } catch (error) {
+        console.error("Token revocation failed:", error);
+      }
+    }
+
+    // Clear the authentication cookie
+    await clearAuthToken();
+
+    // Redirect to login page
+    const loginUrl = new URL("/login", request.url);
+    loginUrl.searchParams.set("message", "logged_out");
+
+    return NextResponse.redirect(loginUrl);
+  } catch (error) {
+    console.error("Logout failed:", error);
+
+    // Even if logout fails, clear the local cookie and redirect
+    try {
+      await clearAuthToken();
+    } catch (clearError) {
+      console.error("Failed to clear auth cookie:", clearError);
+    }
+
+    const loginUrl = new URL("/login", request.url);
+    loginUrl.searchParams.set("error", "logout_failed");
+
+    return NextResponse.redirect(loginUrl);
+  }
+}
+
+/**
+ * Handle unsupported HTTP methods
+ */
+export async function PUT() {
+  return new NextResponse("Method Not Allowed", { status: 405 });
+}
+
+export async function DELETE() {
+  return new NextResponse("Method Not Allowed", { status: 405 });
+}
+
+export async function PATCH() {
+  return new NextResponse("Method Not Allowed", { status: 405 });
+}
diff --git a/components/auth-guard/forbidden.tsx b/app/forbidden/page.tsx
similarity index 76%
rename from components/auth-guard/forbidden.tsx
rename to app/forbidden/page.tsx
index e5801cf..1acaf0e 100644
--- a/components/auth-guard/forbidden.tsx
+++ b/app/forbidden/page.tsx
@@ -1,11 +1,14 @@
+import { Logo } from "@/components/logo";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import type { BasicUserInfo } from "@/lib/user";
+import { redirectIfAuthenticated } from "@/lib/auth.rsc";
 import { AlertTriangle } from "lucide-react";
 import Link from "next/link";
-import { Logo } from "../logo";
+import { UserInfo } from "./user-info";
+
+export default async function ForbiddenPage() {
+  await redirectIfAuthenticated();
 
-export default function Forbidden({ user }: { user: BasicUserInfo }) {
   return (
     <div
       className={`
@@ -38,16 +41,13 @@ export default function Forbidden({ user }: { user: BasicUserInfo }) {
         </CardHeader>
         <CardContent className="flex flex-col items-center gap-4">
           <Button asChild variant="outline">
-            <Link href="/">回到主程式</Link>
+            <Link href="/login">重新登入</Link>
           </Button>
         </CardContent>
         <CardFooter
           className={`justify-center text-center text-xs text-muted-foreground`}
         >
-          <section className="flex flex-col items-center gap-1">
-            <p>您目前登入的帳號是：{user.name} ({user.email})</p>
-            <p>如果這不是您想登入的帳號，請切換 Google 帳號後重新登入</p>
-          </section>
+          <UserInfo />
         </CardFooter>
       </Card>
     </div>
diff --git a/app/forbidden/user-info.tsx b/app/forbidden/user-info.tsx
new file mode 100644
index 0000000..5ba0569
--- /dev/null
+++ b/app/forbidden/user-info.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { useUser } from "@/providers/use-user";
+
+export function UserInfo() {
+  const { user } = useUser();
+
+  return (
+    <section className="flex flex-col items-center gap-1">
+      <p>
+        您目前登入的帳號是：{user?.name} ({user?.email})
+      </p>
+      <p>如果這不是您想登入的帳號，請切換 Google 帳號後重新登入</p>
+    </section>
+  );
+}
diff --git a/app/global-error.tsx b/app/global-error.tsx
index 51849ee..7eb9992 100644
--- a/app/global-error.tsx
+++ b/app/global-error.tsx
@@ -4,7 +4,7 @@ import { Logo } from "@/components/logo";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import { ERROR_NOT_FOUND, ERROR_NOT_IMPLEMENTED, ERROR_UNAUTHORIZED, ERROR_USER_VERIFIED } from "@/lib/apollo";
+import { ERROR_NOT_FOUND, ERROR_NOT_IMPLEMENTED, ERROR_UNAUTHORIZED, ERROR_USER_VERIFIED } from "@/lib/apollo-errors";
 import { CombinedGraphQLErrors, CombinedProtocolErrors } from "@apollo/client";
 import { AlertCircle, Code, Home, Lock, RefreshCw, Search, Shield, WifiOff } from "lucide-react";
 import Link from "next/link";
diff --git a/app/layout.tsx b/app/layout.tsx
index 0b8c218..544dac9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,8 +2,8 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { Toaster } from "@/components/ui/sonner";
-import ApolloProvider from "@/providers/use-apollo";
-import { UserProvider } from "@/providers/use-user";
+import { getAuthToken } from "@/lib/auth";
+import { ApolloWrapper } from "@/providers/use-apollo";
 import { PreloadResources } from "./preload-resources";
 
 const geistSans = Geist({
@@ -21,11 +21,13 @@ export const metadata: Metadata = {
   description: "Managing your Database Playground instance.",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const token = await getAuthToken();
+
   return (
     <html lang="zh-hant-tw">
       <head>
@@ -43,11 +45,9 @@ export default function RootLayout({
           font-sans antialiased
         `}
       >
-        <ApolloProvider>
-          <UserProvider>
-            {children}
-          </UserProvider>
-        </ApolloProvider>
+        <ApolloWrapper token={token}>
+          {children}
+        </ApolloWrapper>
         <Toaster />
       </body>
     </html>
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 3ba0ce3..69b8bc7 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,8 +1,23 @@
 import { LoginForm } from "@/components/login-form";
 import { Logo } from "@/components/logo";
+import { redirectIfAuthenticated } from "@/lib/auth.rsc";
 import Link from "next/link";
 
-export default function LoginPage() {
+interface LoginPageProps {
+  searchParams: Promise<{
+    error?: string;
+    error_description?: string;
+    message?: string;
+    redirect?: string;
+  }>;
+}
+
+export default async function LoginPage({ searchParams }: LoginPageProps) {
+  // Redirect if already authenticated
+  await redirectIfAuthenticated();
+
+  const params = await searchParams;
+
   return (
     <div
       className={`
@@ -26,7 +41,11 @@ export default function LoginPage() {
           </div>
           Database Playground
         </Link>
-        <LoginForm />
+        <LoginForm
+          error={params.error}
+          errorDescription={params.error_description}
+          message={params.message}
+        />
       </div>
     </div>
   );
diff --git a/app/preload-resources.tsx b/app/preload-resources.tsx
index f4f5068..d42c6d1 100644
--- a/app/preload-resources.tsx
+++ b/app/preload-resources.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import ReactDOM from "react-dom";
 
 export function PreloadResources() {
diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
index 3795712..5850829 100644
--- a/components/app-sidebar.tsx
+++ b/components/app-sidebar.tsx
@@ -19,6 +19,7 @@ import {
 import { useUser } from "@/providers/use-user";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { Suspense } from "react";
 
 export interface NavItem {
   title: string;
@@ -148,18 +149,16 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         <NavSecondary items={data.navSecondary} className="mt-auto" />
       </SidebarContent>
       <SidebarFooter>
-        <NavUserMe />
+        <Suspense fallback={<NavUserLoading />}>
+          <NavUserMe />
+        </Suspense>
       </SidebarFooter>
     </Sidebar>
   );
 }
 
 function NavUserMe() {
-  const { user, isInitialized } = useUser();
-
-  if (!isInitialized || !user) {
-    return <NavUserLoading />;
-  }
+  const { user } = useUser();
 
   return <NavUser user={user} />;
 }
diff --git a/components/auth-guard/index.tsx b/components/auth-guard/index.tsx
deleted file mode 100644
index 3a182d1..0000000
--- a/components/auth-guard/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client";
-
-import { isAdmin } from "@/lib/user";
-import { useUser } from "@/providers/use-user";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-import Forbidden from "./forbidden";
-
-export default function AuthGuard({ children }: { children: React.ReactNode }) {
-  const router = useRouter();
-  const { user, isInitialized } = useUser();
-
-  useEffect(() => {
-    if (isInitialized && !user) {
-      router.push("/login");
-    }
-  }, [isInitialized, user, router]);
-
-  if (!isInitialized || !user) {
-    return null;
-  }
-
-  if (!isAdmin(user)) {
-    return <Forbidden user={user} />;
-  }
-
-  return <>{children}</>;
-}
diff --git a/components/login-form.tsx b/components/login-form.tsx
index 843a760..e1cb20b 100644
--- a/components/login-form.tsx
+++ b/components/login-form.tsx
@@ -1,14 +1,44 @@
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import buildUri from "@/lib/build-uri";
 import { cn } from "@/lib/utils";
+import { AlertCircle, CheckCircle } from "lucide-react";
+
+interface LoginFormProps extends React.ComponentProps<"div"> {
+  error?: string;
+  errorDescription?: string;
+  message?: string;
+}
 
 export function LoginForm({
   className,
+  error,
+  errorDescription,
+  message,
   ...props
-}: React.ComponentProps<"div">) {
+}: LoginFormProps) {
   return (
     <div className={cn("flex flex-col gap-6", className)} {...props}>
+      {/* Display error messages */}
+      {error && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            {getErrorMessage(error, errorDescription)}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Display success messages */}
+      {message && (
+        <Alert>
+          <CheckCircle className="h-4 w-4" />
+          <AlertDescription>
+            {getSuccessMessage(message)}
+          </AlertDescription>
+        </Alert>
+      )}
+
       <Card>
         <CardHeader className="text-center">
           <CardTitle className="text-xl">登入管理介面</CardTitle>
@@ -19,9 +49,13 @@ export function LoginForm({
         <CardContent>
           <div className="grid gap-6">
             <div className="flex flex-col gap-4">
-              <a href={buildUri(`/api/auth/google/login?redirect_uri=${process.env.APP_REDIRECT_URL}`)}>
+              <a href="/api/auth/login">
                 <Button variant="outline" className="w-full">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    className={`mr-2 h-4 w-4`}
+                  >
                     <path
                       d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
                       fill="currentColor"
@@ -37,3 +71,37 @@ export function LoginForm({
     </div>
   );
 }
+
+function getErrorMessage(error: string, description?: string): string {
+  if (description) return description;
+
+  switch (error) {
+    case "invalid_request":
+      return "登入請求無效，請重試。";
+    case "unauthorized":
+      return "您沒有權限存取此應用程式。";
+    case "access_denied":
+      return "登入已取消或拒絕。";
+    case "server_error":
+      return "伺服器發生錯誤，請稍後再試。";
+    case "temporarily_unavailable":
+      return "服務暫時無法使用，請稍後再試。";
+    case "auth_error":
+      return "認證過程中發生錯誤，請重新登入。";
+    case "logout_failed":
+      return "登出時發生錯誤，但您的本地工作階段已清除。";
+    case "forbidden":
+      return "您沒有權限存取此應用程式。";
+    default:
+      return "登入時發生未知錯誤，請重試。";
+  }
+}
+
+function getSuccessMessage(message: string): string {
+  switch (message) {
+    case "logged_out":
+      return "您已成功登出。";
+    default:
+      return message;
+  }
+}
diff --git a/components/nav-user.tsx b/components/nav-user.tsx
index d22e51a..d117173 100644
--- a/components/nav-user.tsx
+++ b/components/nav-user.tsx
@@ -12,10 +12,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "@/components/ui/sidebar";
-import buildUri from "@/lib/build-uri";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { toast } from "sonner";
 import AppAvatar from "./avatar";
 
 export function NavUser({
@@ -28,32 +25,6 @@ export function NavUser({
   };
 }) {
   const { isMobile } = useSidebar();
-  const router = useRouter();
-  const logout = async () => {
-    const loadingToast = toast.loading("正在登出……");
-
-    try {
-      const res = await fetch(buildUri("/api/auth/logout"), {
-        method: "POST",
-        credentials: "include",
-      });
-
-      if (res.status === 205) {
-        router.push("/login");
-        return;
-      }
-
-      toast.error("登出失敗", {
-        description: res.statusText,
-      });
-    } catch (error) {
-      toast.error("登出失敗", {
-        description: error instanceof Error ? error.message : "未知錯誤",
-      });
-    } finally {
-      toast.dismiss(loadingToast);
-    }
-  };
 
   return (
     <SidebarMenu>
@@ -114,10 +85,12 @@ export function NavUser({
               </Link>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={logout}>
-              <LogOut />
-              登出
-            </DropdownMenuItem>
+            <Link href="/api/auth/logout">
+              <DropdownMenuItem>
+                <LogOut />
+                登出
+              </DropdownMenuItem>
+            </Link>
           </DropdownMenuContent>
         </DropdownMenu>
       </SidebarMenuItem>
diff --git a/components/ui/confirmation-dialog.tsx b/components/ui/confirmation-dialog.tsx
new file mode 100644
index 0000000..d6fa56a
--- /dev/null
+++ b/components/ui/confirmation-dialog.tsx
@@ -0,0 +1,62 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { buttonVariants } from "./button";
+
+export interface ConfirmationDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title?: string;
+  description?: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  onCancel?: () => void;
+}
+
+export function ConfirmationDialog({
+  open,
+  onOpenChange,
+  title = "有未儲存更動",
+  description = "有未儲存更動。確定要關閉而不儲存嗎？您的更動將會遺失。",
+  confirmText = "捨棄更動",
+  cancelText = "繼續編輯",
+  onConfirm,
+  onCancel,
+}: ConfirmationDialogProps) {
+  const handleConfirm = () => {
+    onConfirm();
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    onCancel?.();
+    onOpenChange(false);
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={handleCancel}>
+            {cancelText}
+          </AlertDialogCancel>
+          <AlertDialogAction onClick={handleConfirm} className={buttonVariants({ variant: "destructive" })}>
+            {confirmText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/components/update-modal/form-body.tsx b/components/update-modal/form-body.tsx
new file mode 100644
index 0000000..df6bb21
--- /dev/null
+++ b/components/update-modal/form-body.tsx
@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button";
+import { DialogFooter } from "@/components/ui/dialog";
+import { Form } from "@/components/ui/form";
+import { useFormDirtyWarning } from "@/hooks/use-form-dirty-warning";
+import React, { useEffect } from "react";
+import { type FieldValues, type SubmitHandler, type UseFormReturn } from "react-hook-form";
+
+export interface UpdateFormBodyProps<T extends FieldValues> {
+  form: UseFormReturn<T>;
+  onSubmit: SubmitHandler<T>;
+  action: "update" | "create";
+  onFormStateChange?: (isDirty: boolean) => void;
+
+  children: React.ReactNode;
+}
+
+export function UpdateFormBody<T extends FieldValues>({
+  form,
+  onSubmit,
+  action,
+  onFormStateChange,
+  children,
+}: UpdateFormBodyProps<T>) {
+  useFormDirtyWarning(form.formState.isDirty);
+
+  // Notify parent component about form dirty state changes
+  useEffect(() => {
+    onFormStateChange?.(form.formState.isDirty);
+  }, [form.formState.isDirty, onFormStateChange]);
+
+  const handleSubmit = (data: T) => {
+    form.reset();
+    onSubmit(data);
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
+        {children}
+
+        <DialogFooter className="sm:justify-start">
+          <Button type="submit">{action === "update" ? "更新" : "建立"}</Button>
+        </DialogFooter>
+      </form>
+    </Form>
+  );
+}
diff --git a/components/update-modal/types.tsx b/components/update-modal/types.tsx
new file mode 100644
index 0000000..1dc864d
--- /dev/null
+++ b/components/update-modal/types.tsx
@@ -0,0 +1,15 @@
+import type { FieldValues, SubmitHandler } from "react-hook-form";
+
+export type UpdateFormAction = "create" | "update";
+
+export type UpdateFormSubmitHandler<C, U> = <A extends UpdateFormAction>(
+  action: A,
+  newValues: A extends "create" ? C : A extends "update" ? U : never,
+) => void;
+
+export interface UpdateFormBaseProps<T extends FieldValues> {
+  defaultValues?: T;
+  action: UpdateFormAction;
+  onFormStateChange?: (isDirty: boolean) => void;
+  onSubmit: SubmitHandler<T>;
+}
diff --git a/hooks/use-dialog-close-confirmation.ts b/hooks/use-dialog-close-confirmation.ts
new file mode 100644
index 0000000..51a0fe1
--- /dev/null
+++ b/hooks/use-dialog-close-confirmation.ts
@@ -0,0 +1,51 @@
+import { useCallback, useState } from "react";
+
+export interface UseDialogCloseConfirmationOptions {
+  isDirty: boolean;
+  setOpen: (open: boolean) => void;
+  onConfirmedClose?: () => void;
+}
+
+export function useDialogCloseConfirmation({
+  isDirty,
+  setOpen,
+  onConfirmedClose,
+}: UseDialogCloseConfirmationOptions) {
+  const [showConfirmation, setShowConfirmation] = useState(false);
+
+  const handleDialogOpenChange = useCallback(
+    (newOpen: boolean) => {
+      // If trying to close the dialog and form is dirty
+      if (!newOpen && isDirty) {
+        setShowConfirmation(true);
+        return; // Don't close the dialog yet
+      }
+
+      // Normal open/close behavior
+      setOpen(newOpen);
+
+      // If closing and not dirty, call onConfirmedClose
+      if (!newOpen) {
+        onConfirmedClose?.();
+      }
+    },
+    [isDirty, setOpen, onConfirmedClose],
+  );
+
+  const handleConfirmClose = useCallback(() => {
+    setShowConfirmation(false);
+    setOpen(false);
+    onConfirmedClose?.();
+  }, [setOpen, onConfirmedClose]);
+
+  const handleCancelClose = useCallback(() => {
+    setShowConfirmation(false);
+  }, []);
+
+  return {
+    showConfirmation,
+    handleDialogOpenChange,
+    handleConfirmClose,
+    handleCancelClose,
+  };
+}
diff --git a/hooks/use-form-dirty-warning.ts b/hooks/use-form-dirty-warning.ts
new file mode 100644
index 0000000..44475be
--- /dev/null
+++ b/hooks/use-form-dirty-warning.ts
@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * Hook to warn users when they try to leave the page with unsaved form changes
+ * @param isDirty - Whether the form has unsaved changes
+ * @param message - Custom warning message (optional)
+ */
+export function useFormDirtyWarning(
+  isDirty: boolean,
+  message: string = "You have unsaved changes. Are you sure you want to leave?",
+) {
+  useEffect(() => {
+    if (!isDirty) return;
+
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue = message;
+      return message;
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [isDirty, message]);
+}
diff --git a/lib/apollo-errors.ts b/lib/apollo-errors.ts
new file mode 100644
index 0000000..65689e1
--- /dev/null
+++ b/lib/apollo-errors.ts
@@ -0,0 +1,4 @@
+export const ERROR_NOT_FOUND = "NOT_FOUND";
+export const ERROR_UNAUTHORIZED = "UNAUTHORIZED";
+export const ERROR_USER_VERIFIED = "USER_VERIFIED";
+export const ERROR_NOT_IMPLEMENTED = "NOT_IMPLEMENTED";
diff --git a/lib/apollo.ts b/lib/apollo.ts
index af9f1ab..8da1df6 100644
--- a/lib/apollo.ts
+++ b/lib/apollo.ts
@@ -1,15 +1,22 @@
-import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
+import { HttpLink } from "@apollo/client";
+import { ApolloClient, InMemoryCache } from "@apollo/client-integration-nextjs";
 import buildUri from "./build-uri";
 
-export const apolloClient = new ApolloClient({
-  cache: new InMemoryCache(),
-  link: new HttpLink({
+/**
+ * Create an Apollo Client instance that uses the upstream GraphQL API.
+ *
+ * You should add the token to the headers of the request.
+ */
+export function makeClient({ token }: { token?: string | null }) {
+  const httpLink = new HttpLink({
     uri: buildUri("/query"),
-    credentials: "include",
-  }),
-});
+    headers: {
+      Authorization: token ? `Bearer ${token}` : "",
+    },
+  });
 
-export const ERROR_NOT_FOUND = "NOT_FOUND";
-export const ERROR_UNAUTHORIZED = "UNAUTHORIZED";
-export const ERROR_USER_VERIFIED = "USER_VERIFIED";
-export const ERROR_NOT_IMPLEMENTED = "NOT_IMPLEMENTED";
+  return new ApolloClient({
+    cache: new InMemoryCache(),
+    link: httpLink,
+  });
+}
diff --git a/lib/auth.rsc.ts b/lib/auth.rsc.ts
new file mode 100644
index 0000000..efd7397
--- /dev/null
+++ b/lib/auth.rsc.ts
@@ -0,0 +1,9 @@
+import { redirect } from "next/navigation";
+import { getAuthStatus } from "./auth";
+
+export async function redirectIfAuthenticated(): Promise<void> {
+  const isAuthenticated = await getAuthStatus();
+  if (isAuthenticated.role === "admin") {
+    redirect("/");
+  }
+}
diff --git a/lib/auth.ts b/lib/auth.ts
new file mode 100644
index 0000000..f12e752
--- /dev/null
+++ b/lib/auth.ts
@@ -0,0 +1,269 @@
+import { CombinedGraphQLErrors } from "@apollo/client";
+import { getIronSession } from "iron-session";
+import { cookies } from "next/headers";
+import { makeClient } from "./apollo";
+import buildUri from "./build-uri";
+import { BASIC_USER_INFO_QUERY, type BasicUserInfo, isAdmin } from "./user";
+
+// Constants for OAuth 2.0 PKCE flow
+export const OAUTH_CONFIG = {
+  AUTHORIZE_URL: buildUri("/api/auth/v2/authorize/google"),
+  TOKEN_URL: buildUri("/api/auth/v2/token"),
+  REVOKE_URL: buildUri("/api/auth/v2/revoke"),
+  CALLBACK_PATH: "/api/auth/callback",
+  SESSION_COOKIE_NAME: "__Host-auth_session",
+  STATE_COOKIE_NAME: "__Host-oauth_state",
+  CODE_VERIFIER_COOKIE_NAME: "__Host-code_verifier",
+  COOKIE_MAX_AGE: 8 * 60 * 60, // 8 hours in seconds
+} as const;
+
+// Iron Session configuration
+export interface SessionData {
+  access_token?: string;
+  token_type?: string;
+  expires_in?: number;
+}
+
+if (!process.env.AUTH_SECRET) {
+  throw new Error("AUTH_SECRET is not set");
+}
+
+export const sessionOptions = {
+  cookieName: OAUTH_CONFIG.SESSION_COOKIE_NAME,
+  password: process.env.AUTH_SECRET,
+  cookieOptions: {
+    secure: true,
+    httpOnly: true,
+    maxAge: OAUTH_CONFIG.COOKIE_MAX_AGE,
+    sameSite: "strict",
+    path: "/",
+  },
+};
+
+// PKCE utilities
+export function base64url(input: Uint8Array | ArrayBuffer): string {
+  const bytes = input instanceof Uint8Array ? input : new Uint8Array(input);
+  const binaryString = String.fromCharCode(...new Uint8Array(bytes));
+  return btoa(binaryString).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+export function generateCodeVerifier(): string {
+  const bytes = new Uint8Array(32);
+  crypto.getRandomValues(bytes);
+
+  return base64url(bytes.buffer);
+}
+
+export async function generateCodeChallenge(codeVerifier: string): Promise<string> {
+  const hash = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(codeVerifier));
+
+  return base64url(hash);
+}
+
+export function generateState(): string {
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+
+  return base64url(bytes.buffer);
+}
+
+// Session management using iron-session
+export async function getSession() {
+  const cookieStore = await cookies();
+  return getIronSession<SessionData>(cookieStore, sessionOptions);
+}
+
+// Auth token management
+export async function setAuthToken(
+  token: string,
+  tokenType: string = "Bearer",
+  expiresIn: number = OAUTH_CONFIG.COOKIE_MAX_AGE,
+): Promise<void> {
+  const session = await getSession();
+
+  session.access_token = token;
+  session.token_type = tokenType;
+  session.expires_in = expiresIn;
+
+  await session.save();
+}
+
+export async function getAuthToken(): Promise<string | null> {
+  const session = await getSession();
+
+  if (!session.access_token) {
+    return null;
+  }
+
+  return session.access_token;
+}
+
+export async function clearAuthToken(): Promise<void> {
+  const session = await getSession();
+  session.destroy();
+}
+
+// OAuth state management
+export async function setOAuthState(state: string, codeVerifier: string): Promise<void> {
+  const cookieStore = await cookies();
+
+  cookieStore.set(OAUTH_CONFIG.STATE_COOKIE_NAME, state, {
+    httpOnly: true,
+    secure: true,
+    sameSite: "lax",
+    maxAge: 10 * 60, // 10 minutes
+    path: "/",
+  });
+
+  cookieStore.set(OAUTH_CONFIG.CODE_VERIFIER_COOKIE_NAME, codeVerifier, {
+    httpOnly: true,
+    secure: true,
+    sameSite: "lax",
+    maxAge: 10 * 60, // 10 minutes
+    path: "/",
+  });
+}
+
+export async function getOAuthState(): Promise<{ state: string | null; codeVerifier: string | null }> {
+  const cookieStore = await cookies();
+
+  return {
+    state: cookieStore.get(OAUTH_CONFIG.STATE_COOKIE_NAME)?.value || null,
+    codeVerifier: cookieStore.get(OAUTH_CONFIG.CODE_VERIFIER_COOKIE_NAME)?.value || null,
+  };
+}
+
+export async function clearOAuthState(): Promise<void> {
+  const cookieStore = await cookies();
+  cookieStore.delete({
+    name: OAUTH_CONFIG.STATE_COOKIE_NAME,
+    httpOnly: true,
+    secure: true,
+    sameSite: "lax",
+    path: "/",
+  });
+  cookieStore.delete({
+    name: OAUTH_CONFIG.CODE_VERIFIER_COOKIE_NAME,
+    httpOnly: true,
+    secure: true,
+    sameSite: "lax",
+    path: "/",
+  });
+}
+
+// OAuth URL builders
+export async function buildAuthorizeUrl(
+  redirectUri: string,
+  state: string,
+  codeVerifier: string,
+): Promise<string> {
+  const codeChallenge = await generateCodeChallenge(codeVerifier);
+
+  const params = new URLSearchParams({
+    response_type: "code",
+    redirect_uri: redirectUri,
+    state,
+    code_challenge: codeChallenge,
+    code_challenge_method: "S256",
+  });
+
+  return `${OAUTH_CONFIG.AUTHORIZE_URL}?${params.toString()}`;
+}
+
+// Token exchange
+export async function exchangeCodeForToken(
+  code: string,
+  redirectUri: string,
+  codeVerifier: string,
+): Promise<{ access_token: string; token_type: string; expires_in: number }> {
+  const params = new URLSearchParams({
+    grant_type: "authorization_code",
+    code,
+    redirect_uri: redirectUri,
+    code_verifier: codeVerifier,
+  });
+
+  const response = await fetch(OAUTH_CONFIG.TOKEN_URL, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: params.toString(),
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: "unknown_error" }));
+    throw new Error(`Token exchange failed: ${error.error || "Unknown error"}`);
+  }
+
+  return response.json();
+}
+
+// Token revocation
+export async function revokeToken(token: string): Promise<void> {
+  const params = new URLSearchParams({
+    token,
+    token_type_hint: "access_token",
+  });
+
+  const response = await fetch(OAUTH_CONFIG.REVOKE_URL, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: params.toString(),
+  });
+
+  // According to RFC 7009, revocation endpoint should return 200 even for invalid tokens
+  if (!response.ok && response.status !== 200) {
+    console.error("Token revocation failed:", response.status, response.statusText);
+  }
+}
+
+// Auth validation
+export interface AuthStatus {
+  loggedIn: boolean;
+
+  role?: "admin" | "user";
+  user?: BasicUserInfo;
+}
+
+export async function getAuthStatus(): Promise<AuthStatus> {
+  const token = await getAuthToken();
+  if (!token) {
+    return {
+      loggedIn: false,
+    };
+  }
+
+  // get user info
+  const client = makeClient({ token });
+
+  try {
+    const { data } = await client.query({
+      query: BASIC_USER_INFO_QUERY,
+    });
+    if (!data) {
+      return {
+        loggedIn: true,
+      };
+    }
+
+    return {
+      role: isAdmin(data?.me) ? "admin" : "user",
+      user: data.me,
+      loggedIn: true,
+    };
+  } catch (error) {
+    if (CombinedGraphQLErrors.is(error) && error.message === "require authentication") {
+      return {
+        loggedIn: false,
+      };
+    }
+
+    console.log("Error validating auth:", error);
+    return {
+      loggedIn: false,
+    };
+  }
+}
diff --git a/lib/user.ts b/lib/user.ts
index 7f4927c..8892d5e 100644
--- a/lib/user.ts
+++ b/lib/user.ts
@@ -1,6 +1,5 @@
 import { graphql } from "@/gql";
 import type { BasicUserInfoQuery } from "@/gql/graphql";
-import buildUri from "./build-uri";
 
 export type BasicUserInfo = BasicUserInfoQuery["me"];
 
@@ -22,14 +21,3 @@ export const BASIC_USER_INFO_QUERY = graphql(`
 export function isAdmin(user: BasicUserInfo): boolean {
   return user.group?.name === "admin";
 }
-
-export async function logout() {
-  const response = await fetch(buildUri("/api/auth/logout"), {
-    method: "POST",
-    credentials: "include",
-  });
-
-  if (!response.ok) {
-    throw new Error("Failed to logout");
-  }
-}
diff --git a/middleware.ts b/middleware.ts
new file mode 100644
index 0000000..e5c214b
--- /dev/null
+++ b/middleware.ts
@@ -0,0 +1,105 @@
+import { getAuthStatus } from "@/lib/auth";
+import { NextRequest, NextResponse } from "next/server";
+
+// Define public routes that don't require authentication
+const PUBLIC_ROUTES = [
+  "/login",
+  "/forbidden",
+  "/api/auth/login",
+  "/api/auth/callback",
+  "/api/auth/logout",
+  "/_next",
+  "/favicon.ico",
+  "/robots.txt",
+  "/logo.svg",
+];
+
+// Define API routes that should return JSON errors instead of redirects
+const API_ROUTES = ["/api/"];
+
+function isPublicRoute(pathname: string): boolean {
+  return PUBLIC_ROUTES.some(route => pathname.startsWith(route));
+}
+
+function isApiRoute(pathname: string): boolean {
+  return API_ROUTES.some(route => pathname.startsWith(route));
+}
+
+export async function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  // Skip middleware for public routes
+  if (isPublicRoute(pathname)) {
+    return NextResponse.next();
+  }
+
+  try {
+    const { role, loggedIn } = await getAuthStatus();
+
+    if (!loggedIn) {
+      // Handle unauthenticated requests
+      if (isApiRoute(pathname)) {
+        // Return JSON error for API routes
+        return NextResponse.json(
+          {
+            error: "unauthorized",
+            error_description: "Authentication required",
+          },
+          { status: 401 },
+        );
+      } else {
+        // Redirect to login for web routes
+        const loginUrl = new URL("/login", request.url);
+        loginUrl.searchParams.set("redirect", pathname);
+        return NextResponse.redirect(loginUrl);
+      }
+    }
+
+    if (role !== "admin") {
+      if (isApiRoute(pathname)) {
+        return NextResponse.json(
+          {
+            error: "forbidden",
+            error_description: "You must be an admin to access this resource",
+          },
+          { status: 403 },
+        );
+      } else {
+        const loginUrl = new URL("/forbidden", request.url);
+        return NextResponse.redirect(loginUrl);
+      }
+    }
+
+    return NextResponse.next();
+  } catch (error) {
+    console.error("Middleware authentication error:", error);
+
+    if (isApiRoute(pathname)) {
+      return NextResponse.json(
+        {
+          error: "server_error",
+          error_description: "Authentication validation failed",
+        },
+        { status: 500 },
+      );
+    } else {
+      const loginUrl = new URL("/login", request.url);
+      loginUrl.searchParams.set("error", "auth_error");
+      return NextResponse.redirect(loginUrl);
+    }
+  }
+}
+
+// Configure which routes the middleware should run on
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     * - public files (public folder)
+     */
+    "/((?!_next/static|_next/image|favicon.ico|robots.txt|logo.svg).*)",
+  ],
+};
diff --git a/package.json b/package.json
index 1aa8b7c..6f30ff9 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@apollo/client": "4.0.4",
+    "@apollo/client-integration-nextjs": "^0.13.1",
     "@graphql-codegen/client-preset": "^5.0.0",
     "@hookform/resolvers": "^5.2.1",
     "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -33,6 +34,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "graphql": "^16.11.0",
+    "iron-session": "^8.0.4",
     "lucide-react": "^0.544.0",
     "next": "15.5.3",
     "next-themes": "^0.4.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index daa25b5..4982c9e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@apollo/client':
         specifier: 4.0.4
         version: 4.0.4(graphql-ws@6.0.6(graphql@16.11.0)(ws@8.18.3))(graphql@16.11.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rxjs@7.8.2)
+      '@apollo/client-integration-nextjs':
+        specifier: ^0.13.1
+        version: 0.13.1(@apollo/client@4.0.4(graphql-ws@6.0.6(graphql@16.11.0)(ws@8.18.3))(graphql@16.11.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rxjs@7.8.2))(@types/react@19.1.12)(graphql@16.11.0)(next@15.5.3(@babel/core@7.28.4)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rxjs@7.8.2)
       '@graphql-codegen/client-preset':
         specifier: ^5.0.0
         version: 5.0.0(graphql@16.11.0)
@@ -68,6 +71,9 @@ importers:
       graphql:
         specifier: ^16.11.0
         version: 16.11.0
+      iron-session:
+        specifier: ^8.0.4
+        version: 8.0.4
       lucide-react:
         specifier: ^0.544.0
         version: 0.544.0(react@19.1.1)
@@ -183,6 +189,23 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
+  '@apollo/client-integration-nextjs@0.13.1':
+    resolution: {integrity: sha512-NAC2IRpSTrpaBBwkd5KvVK4+RLa0SzoUFRiu668YuyhI41ExxaCj+VDcUBRox9ba1lw60si5gD3TH8o+mLBnRQ==}
+    peerDependencies:
+      '@apollo/client': ^4.0.0
+      next: ^15.2.3
+      react: ^19
+      rxjs: ^7.3.0
+
+  '@apollo/client-react-streaming@0.13.1':
+    resolution: {integrity: sha512-rdO5D2frQsCKiIBM1/GAOyCeMnioroj831gWbVik8w+78L1ZwPkdROC349UlBwS69+O1f17GDe+/HzTMTJgN0A==}
+    peerDependencies:
+      '@apollo/client': ^4.0.0
+      graphql: ^16 || >=17.0.0-alpha.2
+      react: ^19
+      react-dom: ^19
+      rxjs: ^7.3.0
+
   '@apollo/client@4.0.4':
     resolution: {integrity: sha512-3+fTQUA3AdC08urPF7si0ptLiAaVOH5R/3drwXzic8yqzTL4W3ME6klLj/EpgMND0FbWD7sM8TCkEDoe4OckMw==}
     peerDependencies:
@@ -2142,6 +2165,10 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
   cosmiconfig@8.3.6:
     resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
     engines: {node: '>=14'}
@@ -2733,6 +2760,12 @@ packages:
   invariant@2.2.4:
     resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
 
+  iron-session@8.0.4:
+    resolution: {integrity: sha512-9ivNnaKOd08osD0lJ3i6If23GFS2LsxyMU8Gf/uBUEgm8/8CC1hrrCHFDpMo3IFbpBgwoo/eairRsaD3c5itxA==}
+
+  iron-webcrypto@1.2.1:
+    resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
+
   is-absolute@1.0.0:
     resolution: {integrity: sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==}
     engines: {node: '>=0.10.0'}
@@ -3896,6 +3929,9 @@ packages:
     resolution: {integrity: sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==}
     engines: {node: '>=0.10.0'}
 
+  uncrypto@0.1.3:
+    resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
+
   undici-types@7.10.0:
     resolution: {integrity: sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==}
 
@@ -4088,6 +4124,30 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
+  '@apollo/client-integration-nextjs@0.13.1(@apollo/client@4.0.4(graphql-ws@6.0.6(graphql@16.11.0)(ws@8.18.3))(graphql@16.11.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rxjs@7.8.2))(@types/react@19.1.12)(graphql@16.11.0)(next@15.5.3(@babel/core@7.28.4)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rxjs@7.8.2)':
+    dependencies:
+      '@apollo/client': 4.0.4(graphql-ws@6.0.6(graphql@16.11.0)(ws@8.18.3))(graphql@16.11.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rxjs@7.8.2)
+      '@apollo/client-react-streaming': 0.13.1(@apollo/client@4.0.4(graphql-ws@6.0.6(graphql@16.11.0)(ws@8.18.3))(graphql@16.11.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rxjs@7.8.2))(@types/react@19.1.12)(graphql@16.11.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rxjs@7.8.2)
+      next: 15.5.3(@babel/core@7.28.4)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      rxjs: 7.8.2
+    transitivePeerDependencies:
+      - '@types/react'
+      - graphql
+      - react-dom
+
+  '@apollo/client-react-streaming@0.13.1(@apollo/client@4.0.4(graphql-ws@6.0.6(graphql@16.11.0)(ws@8.18.3))(graphql@16.11.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rxjs@7.8.2))(@types/react@19.1.12)(graphql@16.11.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rxjs@7.8.2)':
+    dependencies:
+      '@apollo/client': 4.0.4(graphql-ws@6.0.6(graphql@16.11.0)(ws@8.18.3))(graphql@16.11.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rxjs@7.8.2)
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+      '@wry/equality': 0.5.7
+      graphql: 16.11.0
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      rxjs: 7.8.2
+    transitivePeerDependencies:
+      - '@types/react'
+
   '@apollo/client@4.0.4(graphql-ws@6.0.6(graphql@16.11.0)(ws@8.18.3))(graphql@16.11.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(rxjs@7.8.2)':
     dependencies:
       '@graphql-typed-document-node/core': 3.2.0(graphql@16.11.0)
@@ -6200,6 +6260,8 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
+  cookie@0.7.2: {}
+
   cosmiconfig@8.3.6(typescript@5.9.2):
     dependencies:
       import-fresh: 3.3.1
@@ -6956,6 +7018,14 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  iron-session@8.0.4:
+    dependencies:
+      cookie: 0.7.2
+      iron-webcrypto: 1.2.1
+      uncrypto: 0.1.3
+
+  iron-webcrypto@1.2.1: {}
+
   is-absolute@1.0.0:
     dependencies:
       is-relative: 1.0.0
@@ -8287,6 +8357,8 @@ snapshots:
 
   unc-path-regex@0.1.2: {}
 
+  uncrypto@0.1.3: {}
+
   undici-types@7.10.0: {}
 
   unified@11.0.5:
diff --git a/providers/use-apollo.tsx b/providers/use-apollo.tsx
index 38ba9f9..98221f4 100644
--- a/providers/use-apollo.tsx
+++ b/providers/use-apollo.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import { apolloClient } from "@/lib/apollo";
-import { ApolloProvider as Provider } from "@apollo/client/react";
+import { makeClient } from "@/lib/apollo";
+import { ApolloNextAppProvider } from "@apollo/client-integration-nextjs";
 
-export default function ApolloProvider({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <Provider client={apolloClient}>{children}</Provider>;
+// Designed based on https://github.com/apollographql/apollo-client-integrations/issues/21#issuecomment-1545393482
+export function ApolloWrapper({ children, token }: React.PropsWithChildren<{ token?: string | null }>) {
+  return (
+    <ApolloNextAppProvider makeClient={() => makeClient({ token })}>
+      {children}
+    </ApolloNextAppProvider>
+  );
 }
diff --git a/providers/use-user.tsx b/providers/use-user.tsx
index 62adf9a..9ce3365 100644
--- a/providers/use-user.tsx
+++ b/providers/use-user.tsx
@@ -1,39 +1,10 @@
 "use client";
 
-import { BASIC_USER_INFO_QUERY, type BasicUserInfo } from "@/lib/user";
-import { useQuery } from "@apollo/client/react";
-import { createContext, useContext } from "react";
-
-export interface UserContextValue {
-  user?: BasicUserInfo;
-  isInitialized: boolean;
-}
-
-export const UserContext = createContext<UserContextValue>({
-  user: undefined,
-  isInitialized: false,
-});
+import { BASIC_USER_INFO_QUERY } from "@/lib/user";
+import { useSuspenseQuery } from "@apollo/client/react";
 
 export function useUser() {
-  const user = useContext(UserContext);
-  if (!user) {
-    throw new Error("UserContext not found");
-  }
-
-  return user;
-}
-
-export function UserProvider({ children }: { children: React.ReactNode }) {
-  const { data, loading } = useQuery(BASIC_USER_INFO_QUERY);
+  const { data } = useSuspenseQuery(BASIC_USER_INFO_QUERY);
 
-  return (
-    <UserContext.Provider
-      value={{
-        user: data?.me,
-        isInitialized: !loading,
-      }}
-    >
-      {children}
-    </UserContext.Provider>
-  );
+  return { user: data?.me };
 }