diff --git a/packages/clerk-js/src/ui/elements/UserPreview.tsx b/packages/clerk-js/src/ui/elements/UserPreview.tsx
index cc5c2465b0a..3f22219ac8a 100644
--- a/packages/clerk-js/src/ui/elements/UserPreview.tsx
+++ b/packages/clerk-js/src/ui/elements/UserPreview.tsx
@@ -86,7 +86,7 @@ export const UserPreview = (props: UserPreviewProps) => {
       elementId={descriptors.userPreview.setId(elementId)}
       align='center'
       as='span'
-      sx={[t => ({ minWidth: '0px', width: 'fit-content', gap: t.space.$4 }), sx]}
+      sx={[t => ({ minWidth: '0px', width: 'fit-content', gap: t.space.$3 }), sx]}
       {...rest}
     >
       {/*Do not attempt to render or reserve space based on height if image url is not defined*/}