diff --git a/.changeset/nasty-walls-double.md b/.changeset/nasty-walls-double.md
new file mode 100644
index 00000000000..537b0ca6764
--- /dev/null
+++ b/.changeset/nasty-walls-double.md
@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Fix UserProfile and OrganizationProfile wrong padding on footer for small screens when Development notice is enabled
diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
index 23ceb1cf69a..007f851d43d 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
@@ -37,7 +37,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
   });
 
   const profileCardFooterStyles = (t: InternalTheme) => ({
-    padding: `${t.space.$4} ${t.space.$6} ${t.space.$2}`,
+    padding: `${t.space.$4} ${t.space.$8}`,
   });
 
   return (
@@ -59,7 +59,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
             marginTop: 0,
           },
         }),
-        isProfileFooter ? profileCardFooterStyles : footerStyles,
+        !isProfileFooter && footerStyles,
         sx,
       ]}
       {...rest}
@@ -72,6 +72,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
         devModeNoticeSx={t => ({
           padding: t.space.$none,
         })}
+        outerSx={isProfileFooter ? profileCardFooterStyles : undefined}
         withDevOverlay
       />
     </Flex>