diff --git a/pkgs/clan-app/ui/src/components/Modal/Modal.css b/pkgs/clan-app/ui/src/components/Modal/Modal.css
index 4e4a2f891..be3959f47 100644
--- a/pkgs/clan-app/ui/src/components/Modal/Modal.css
+++ b/pkgs/clan-app/ui/src/components/Modal/Modal.css
@@ -1,5 +1,5 @@
 div.modal-content {
-  @apply max-w-[512px];
+  @apply min-w-[320px] max-w-[512px];
   @apply rounded-md;
 
   /* todo replace with a theme() color */
@@ -12,7 +12,7 @@ div.modal-content {
     @apply border border-def-2 rounded-tl-md rounded-tr-md;
     @apply border-b-def-3;
 
-    & > .title {
+    & > .modal-title {
       @apply mx-auto;
     }
   }
diff --git a/pkgs/clan-app/ui/src/components/Modal/Modal.tsx b/pkgs/clan-app/ui/src/components/Modal/Modal.tsx
index a4618c369..168c6115a 100644
--- a/pkgs/clan-app/ui/src/components/Modal/Modal.tsx
+++ b/pkgs/clan-app/ui/src/components/Modal/Modal.tsx
@@ -26,7 +26,12 @@ export const Modal = (props: ModalProps) => {
       <KDialog.Portal mount={props.mount}>
         <KDialog.Content class={cx("modal-content", props.class)}>
           <div class="header">
-            <Typography class="title" hierarchy="label" family="mono" size="xs">
+            <Typography
+              class="modal-title"
+              hierarchy="label"
+              family="mono"
+              size="xs"
+            >
               {props.title}
             </Typography>
             <KDialog.CloseButton