diff --git a/web/src/components/overlay/CreateRoleDialog.tsx b/web/src/components/overlay/CreateRoleDialog.tsx
index d45dd6d2a..11418fbce 100644
--- a/web/src/components/overlay/CreateRoleDialog.tsx
+++ b/web/src/components/overlay/CreateRoleDialog.tsx
@@ -26,6 +26,15 @@ import {
 import { useTranslation } from "react-i18next";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { CameraNameLabel } from "../camera/CameraNameLabel";
+import { isDesktop, isMobile } from "react-device-detect";
+import { cn } from "@/lib/utils";
+import {
+  MobilePage,
+  MobilePageContent,
+  MobilePageDescription,
+  MobilePageHeader,
+  MobilePageTitle,
+} from "../mobile/MobilePage";
 
 type CreateRoleOverlayProps = {
   show: boolean;
@@ -100,15 +109,27 @@ export default function CreateRoleDialog({
     onCancel();
   };
 
+  const Overlay = isDesktop ? Dialog : MobilePage;
+  const Content = isDesktop ? DialogContent : MobilePageContent;
+  const Header = isDesktop ? DialogHeader : MobilePageHeader;
+  const Description = isDesktop ? DialogDescription : MobilePageDescription;
+  const Title = isDesktop ? DialogTitle : MobilePageTitle;
+
   return (
-    <Dialog open={show} onOpenChange={onCancel}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>{t("roles.dialog.createRole.title")}</DialogTitle>
-          <DialogDescription>
+    <Overlay open={show} onOpenChange={onCancel}>
+      <Content
+        className={cn(
+          "scrollbar-container overflow-y-auto",
+          isDesktop && "my-4 flex max-h-dvh flex-col sm:max-w-[425px]",
+          isMobile && "px-4",
+        )}
+      >
+        <Header className="mt-2" onClose={onCancel}>
+          <Title>{t("roles.dialog.createRole.title")}</Title>
+          <Description className={cn(!isDesktop && "sr-only")}>
             {t("roles.dialog.createRole.desc")}
-          </DialogDescription>
-        </DialogHeader>
+          </Description>
+        </Header>
 
         <Form {...form}>
           <form
@@ -222,7 +243,7 @@ export default function CreateRoleDialog({
             </DialogFooter>
           </form>
         </Form>
-      </DialogContent>
-    </Dialog>
+      </Content>
+    </Overlay>
   );
 }
diff --git a/web/src/components/overlay/CreateTriggerDialog.tsx b/web/src/components/overlay/CreateTriggerDialog.tsx
index 6742ad136..f3a8a22bd 100644
--- a/web/src/components/overlay/CreateTriggerDialog.tsx
+++ b/web/src/components/overlay/CreateTriggerDialog.tsx
@@ -38,6 +38,15 @@ import { Trigger, TriggerAction, TriggerType } from "@/types/trigger";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "../ui/textarea";
 import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
+import { isDesktop, isMobile } from "react-device-detect";
+import { cn } from "@/lib/utils";
+import {
+  MobilePage,
+  MobilePageContent,
+  MobilePageDescription,
+  MobilePageHeader,
+  MobilePageTitle,
+} from "../mobile/MobilePage";
 
 type CreateTriggerDialogProps = {
   show: boolean;
@@ -164,18 +173,30 @@ export default function CreateTriggerDialog({
 
   const cameraName = useCameraFriendlyName(selectedCamera);
 
+  const Overlay = isDesktop ? Dialog : MobilePage;
+  const Content = isDesktop ? DialogContent : MobilePageContent;
+  const Header = isDesktop ? DialogHeader : MobilePageHeader;
+  const Description = isDesktop ? DialogDescription : MobilePageDescription;
+  const Title = isDesktop ? DialogTitle : MobilePageTitle;
+
   return (
-    <Dialog open={show} onOpenChange={onCancel}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>
+    <Overlay open={show} onOpenChange={onCancel}>
+      <Content
+        className={cn(
+          "scrollbar-container overflow-y-auto",
+          isDesktop && "my-4 flex max-h-dvh flex-col",
+          isMobile && "px-4",
+        )}
+      >
+        <Header className="mt-2" onClose={onCancel}>
+          <Title>
             {t(
               trigger
                 ? "triggers.dialog.editTrigger.title"
                 : "triggers.dialog.createTrigger.title",
             )}
-          </DialogTitle>
-          <DialogDescription>
+          </Title>
+          <Description className={cn(!isDesktop && "sr-only")}>
             {t(
               trigger
                 ? "triggers.dialog.editTrigger.desc"
@@ -184,8 +205,8 @@ export default function CreateTriggerDialog({
                 camera: cameraName,
               },
             )}
-          </DialogDescription>
-        </DialogHeader>
+          </Description>
+        </Header>
 
         <Form {...form}>
           <form
@@ -415,7 +436,7 @@ export default function CreateTriggerDialog({
             </DialogFooter>
           </form>
         </Form>
-      </DialogContent>
-    </Dialog>
+      </Content>
+    </Overlay>
   );
 }
diff --git a/web/src/components/overlay/CreateUserDialog.tsx b/web/src/components/overlay/CreateUserDialog.tsx
index d7fada1c7..0b2e3a89e 100644
--- a/web/src/components/overlay/CreateUserDialog.tsx
+++ b/web/src/components/overlay/CreateUserDialog.tsx
@@ -33,6 +33,15 @@ import {
 import { Shield, User } from "lucide-react";
 import { LuCheck, LuX } from "react-icons/lu";
 import { useTranslation } from "react-i18next";
+import { isDesktop, isMobile } from "react-device-detect";
+import { cn } from "@/lib/utils";
+import {
+  MobilePage,
+  MobilePageContent,
+  MobilePageDescription,
+  MobilePageHeader,
+  MobilePageTitle,
+} from "../mobile/MobilePage";
 
 type CreateUserOverlayProps = {
   show: boolean;
@@ -110,15 +119,27 @@ export default function CreateUserDialog({
     onCancel();
   };
 
+  const Overlay = isDesktop ? Dialog : MobilePage;
+  const Content = isDesktop ? DialogContent : MobilePageContent;
+  const Header = isDesktop ? DialogHeader : MobilePageHeader;
+  const Description = isDesktop ? DialogDescription : MobilePageDescription;
+  const Title = isDesktop ? DialogTitle : MobilePageTitle;
+
   return (
-    <Dialog open={show} onOpenChange={onCancel}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>{t("users.dialog.createUser.title")}</DialogTitle>
-          <DialogDescription>
+    <Overlay open={show} onOpenChange={onCancel}>
+      <Content
+        className={cn(
+          "scrollbar-container overflow-y-auto",
+          isDesktop && "my-4 flex max-h-dvh flex-col sm:max-w-[425px]",
+          isMobile && "px-4",
+        )}
+      >
+        <Header className="mt-2" onClose={onCancel}>
+          <Title>{t("users.dialog.createUser.title")}</Title>
+          <Description className={cn(!isDesktop && "sr-only")}>
             {t("users.dialog.createUser.desc")}
-          </DialogDescription>
-        </DialogHeader>
+          </Description>
+        </Header>
 
         <Form {...form}>
           <form
@@ -286,7 +307,7 @@ export default function CreateUserDialog({
             </DialogFooter>
           </form>
         </Form>
-      </DialogContent>
-    </Dialog>
+      </Content>
+    </Overlay>
   );
 }