diff --git a/dapp/src/components/Header/index.tsx b/dapp/src/components/Header/index.tsx
index 8ac5e7ab5..25a48ab7f 100644
--- a/dapp/src/components/Header/index.tsx
+++ b/dapp/src/components/Header/index.tsx
@@ -13,9 +13,9 @@ export default function Header() {
       mx="auto"
       justify="space-between"
       zIndex="header"
-      pt={12}
+      pt={{ base: 4, md: 12 }}
       pb={{ base: 4, xl: 12 }}
-      px={{ base: 10, xl: 30 }}
+      px={{ base: 4, md: "2.5rem", xl: 30 }}
     >
       <Link href={EXTERNAL_HREF.WEBSITE} isExternal>
         <Icon as={AcreLogo} w={20} h={12} />
diff --git a/dapp/src/components/Layout.tsx b/dapp/src/components/Layout.tsx
index 7e3f491d2..42bc526a7 100644
--- a/dapp/src/components/Layout.tsx
+++ b/dapp/src/components/Layout.tsx
@@ -10,7 +10,11 @@ import Sidebar from "./Sidebar"
 import MobileModeBanner from "./MobileModeBanner"
 import Footer from "./Footer"
 
-const PADDING = "2.5rem" // 40px
+// The padding update should also be done in the Header component and Footer theme as well
+const PADDING = {
+  base: 4,
+  md: "2.5rem", // 40px
+}
 const PAGE_MAX_WIDTH: Record<DappMode, string> = {
   standalone: "63rem", // 1008px
   "ledger-live": "63rem", // 1008px
@@ -33,10 +37,11 @@ function Layout() {
       <Flex
         flexFlow="column"
         mx="auto"
-        p={PADDING}
+        px={PADDING}
+        pb={10}
         pt={0.5}
         w="full"
-        maxWidth={`calc(${maxWidth} + 2*${PADDING})`}
+        maxWidth={`calc(${maxWidth} + 2*${PADDING.md})`}
         flex={1}
       >
         <Outlet />
diff --git a/dapp/src/theme/Footer.ts b/dapp/src/theme/Footer.ts
index 8cf4f3229..3aced57fe 100644
--- a/dapp/src/theme/Footer.ts
+++ b/dapp/src/theme/Footer.ts
@@ -19,7 +19,7 @@ const wrapperStyles = defineStyle({
   gap: { base: 4, xl: 10 },
   maxW: "120rem", // 1920px
   py: 3,
-  px: { base: 10, xl: 30 },
+  px: { base: 4, md: "2.5rem", xl: 30 },
   mx: "auto",
 })