diff --git a/pkgs/clan-app/ui/src/components/Modal/Modal.module.css b/pkgs/clan-app/ui/src/components/Modal/Modal.module.css
index 3ab040080..e0fb239c5 100644
--- a/pkgs/clan-app/ui/src/components/Modal/Modal.module.css
+++ b/pkgs/clan-app/ui/src/components/Modal/Modal.module.css
@@ -1,6 +1,6 @@
 .modal_content {
   @apply min-w-[320px] max-w-[512px];
-  @apply rounded-md;
+  @apply rounded-md overflow-hidden;
 
   /* todo replace with a theme() color */
   box-shadow: 0.1875rem 0.1875rem 0 0 rgba(145, 172, 175, 0.32);
@@ -23,6 +23,10 @@
 
 .modal_body {
   @apply rounded-md p-6 pt-4 bg-def-1;
+
+  &[data-no-padding] {
+    @apply p-0;
+  }
 }
 
 .header_divider {
diff --git a/pkgs/clan-app/ui/src/components/Modal/Modal.tsx b/pkgs/clan-app/ui/src/components/Modal/Modal.tsx
index 46b9a49c8..81df90da9 100644
--- a/pkgs/clan-app/ui/src/components/Modal/Modal.tsx
+++ b/pkgs/clan-app/ui/src/components/Modal/Modal.tsx
@@ -17,6 +17,7 @@ export interface ModalProps {
   mount?: Node;
   class?: string;
   metaHeader?: () => JSX.Element;
+  disablePadding?: boolean;
 }
 
 export const Modal = (props: ModalProps) => {
@@ -52,7 +53,7 @@ export const Modal = (props: ModalProps) => {
               </>
             )}
           </Show>
-          <div class={styles.modal_body}>
+          <div class={styles.modal_body} data-no-padding={props.disablePadding}>
             {props.children({
               close: () => {
                 setOpen(false);