diff --git a/src/components/CreateProjectModal.tsx b/src/components/CreateProjectModal.tsx
index 19d72d29..4972815a 100644
--- a/src/components/CreateProjectModal.tsx
+++ b/src/components/CreateProjectModal.tsx
@@ -102,10 +102,10 @@ export function CreateProjectModal({
   if (stringsLoading) return undefined;
 
   return (
-    <div className="tw:fixed tw:inset-0 tw:z-50 tw:flex tw:items-center tw:justify-center tw:bg-black/40">
+    <div className="tw:modal-overlay">
       <dialog
         aria-labelledby="create-project-modal-title"
-        className="tw:bg-background tw:text-foreground tw:rounded tw:border tw:border-border tw:p-6 tw:w-96 tw:shadow-lg"
+        className="tw:modal-dialog tw:rounded tw:w-96"
         open
       >
         <h2
diff --git a/src/components/ProjectMetadataModal.tsx b/src/components/ProjectMetadataModal.tsx
index 4bbfcc76..2538f914 100644
--- a/src/components/ProjectMetadataModal.tsx
+++ b/src/components/ProjectMetadataModal.tsx
@@ -148,11 +148,11 @@ export function ProjectMetadataModal({
   if (stringsLoading) return undefined;
 
   return (
-    <div className="tw:fixed tw:inset-0 tw:z-50 tw:flex tw:items-center tw:justify-center tw:bg-black/40">
+    <div className="tw:modal-overlay">
       <dialog
         aria-labelledby="project-metadata-modal-title"
         aria-modal="true"
-        className="tw:bg-background tw:text-foreground tw:rounded-lg tw:border tw:border-border tw:p-6 tw:w-lg tw:shadow-lg"
+        className="tw:modal-dialog tw:rounded-lg tw:w-lg"
         open
       >
         <h2
diff --git a/src/components/SelectInterlinearProjectModal.tsx b/src/components/SelectInterlinearProjectModal.tsx
index 87373329..2da47262 100644
--- a/src/components/SelectInterlinearProjectModal.tsx
+++ b/src/components/SelectInterlinearProjectModal.tsx
@@ -128,10 +128,10 @@ export function SelectInterlinearProjectModal({
   if (stringsLoading) return undefined;
 
   return (
-    <div className="tw:fixed tw:inset-0 tw:z-50 tw:flex tw:items-center tw:justify-center tw:bg-black/40">
+    <div className="tw:modal-overlay">
       <dialog
         aria-labelledby="select-project-modal-title"
-        className="tw:bg-background tw:text-foreground tw:rounded-lg tw:border tw:border-border tw:p-6 tw:w-lg tw:shadow-lg"
+        className="tw:modal-dialog tw:rounded-lg tw:w-lg"
         open
       >
         <h2
diff --git a/src/tailwind.css b/src/tailwind.css
index 04506cc8..6f782156 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -31,6 +31,14 @@
   }
 }
 
+@utility modal-overlay {
+  @apply tw:fixed tw:inset-0 tw:z-50 tw:flex tw:items-center tw:justify-center tw:bg-black/40;
+}
+
+@utility modal-dialog {
+  @apply tw:static tw:bg-background tw:text-foreground tw:border tw:border-border tw:p-6 tw:shadow-lg;
+}
+
 /*
  * CUSTOM: Theme variable policy.
  *