diff --git a/src/frontend/src/primitives/Box.tsx b/src/frontend/src/primitives/Box.tsx
index 7770c44c..063740d5 100644
--- a/src/frontend/src/primitives/Box.tsx
+++ b/src/frontend/src/primitives/Box.tsx
@@ -28,6 +28,10 @@ const box = cva({
         width: '30rem',
         maxWidth: '100%',
       },
+      alert: {
+        width: '24rem',
+        maxWidth: '100%',
+      },
     },
     variant: {
       light: {
diff --git a/src/frontend/src/primitives/Dialog.tsx b/src/frontend/src/primitives/Dialog.tsx
index bdaad12e..4b0cc523 100644
--- a/src/frontend/src/primitives/Dialog.tsx
+++ b/src/frontend/src/primitives/Dialog.tsx
@@ -80,7 +80,7 @@ export type DialogProps = RACDialogProps & {
    * after user interaction
    */
   onOpenChange?: (isOpen: boolean) => void
-  type?: 'flex'
+  type?: 'flex' | 'alert'
   innerRef?: MutableRefObject<HTMLDivElement | null>
   size?: 'full' | 'large'
 }
@@ -96,7 +96,12 @@ export const Dialog = ({
   ...dialogProps
 }: DialogProps) => {
   const isAlert = dialogProps['role'] === 'alertdialog'
-  const boxType = dialogProps['type'] !== 'flex' ? 'dialog' : undefined
+  const boxType =
+    dialogProps['type'] === 'alert'
+      ? 'alert'
+      : dialogProps['type'] !== 'flex'
+        ? 'dialog'
+        : undefined
   return (
     <StyledModalOverlay
       isKeyboardDismissDisabled={isAlert}