diff --git a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
index c43d410959..696408c5ce 100644
--- a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
+++ b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
@@ -73,7 +73,7 @@ export const ArrowBlockButton = (props: ArrowBlockButtonProps) => {
         <Flex
           as='span'
           center
-          sx={theme => ({ flex: `0 0 ${theme.space.$4}` })}
+          sx={theme => ({ flex: `0 0 ${theme.space.$5}` })}
         >
           {isLoading ? (
             <Spinner
@@ -89,7 +89,7 @@ export const ArrowBlockButton = (props: ArrowBlockButtonProps) => {
               sx={[
                 theme => ({
                   color: theme.colors.$blackAlpha600,
-                  width: theme.sizes.$4,
+                  width: theme.sizes.$5,
                   position: 'absolute',
                 }),
                 leftIconSx,