diff --git a/dapp/src/components/WelcomeModal.tsx b/dapp/src/components/WelcomeModal.tsx
index d29d17fdf..b68a6ce75 100644
--- a/dapp/src/components/WelcomeModal.tsx
+++ b/dapp/src/components/WelcomeModal.tsx
@@ -136,7 +136,7 @@ function WelcomeModalBase({ closeModal }: BaseModalProps) {
           </TextSm>
           {activeStepData.title}
         </ModalHeader>
-        <ModalBody textAlign="left" display="block" color="brown.80" px="10">
+        <ModalBody textAlign="left" display="block" color="brown.80">
           {activeStepData.content(embeddedApp)}
         </ModalBody>
         <ModalFooter
diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts
index 506c7d038..bab2047b2 100644
--- a/dapp/src/theme/Modal.ts
+++ b/dapp/src/theme/Modal.ts
@@ -2,7 +2,7 @@ import { modalAnatomy as parts } from "@chakra-ui/anatomy"
 import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
 
 const baseStyleContainer = defineStyle({
-  px: { base: 3, md: 8 },
+  px: { base: 3, sm: 8 },
 })
 
 const baseStyleDialog = defineStyle({
@@ -51,7 +51,7 @@ const baseStyleBody = defineStyle({
   alignItems: "center",
   gap: 6,
   pt: 0,
-  px: { base: 0, sm: 8 },
+  px: { base: 0, sm: 10 },
   pb: { base: 0, sm: 10 },
 })