diff --git a/.changeset/honest-countries-repair.md b/.changeset/honest-countries-repair.md
new file mode 100644
index 00000000000..45e57288d2c
--- /dev/null
+++ b/.changeset/honest-countries-repair.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Updated the OAuth buttons in the SignIn and SignUp components to prevent layout shifts while loading.
diff --git a/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx b/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx
index 3c6ff742e5b..1a359c4ebe6 100644
--- a/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx
+++ b/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx
@@ -22,7 +22,7 @@ export const InfiniteListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
         }}
       >
         <Spinner
-          size='md'
+          size='sm'
           colorScheme='primary'
         />
       </Box>
diff --git a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
index 6f94db10183..e3e0d7df8ec 100644
--- a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
@@ -83,7 +83,7 @@ export const PreviewListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
         }}
       >
         <Spinner
-          size='md'
+          size='sm'
           colorScheme='primary'
         />
       </Box>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
index e1fa90f9ef6..c4e78fe4399 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
@@ -144,7 +144,7 @@ export const DomainList = (props: DomainListProps) => {
             }}
           >
             <Spinner
-              size='md'
+              size='sm'
               colorScheme='primary'
             />
           </Box>
diff --git a/packages/clerk-js/src/ui/elements/Actions.tsx b/packages/clerk-js/src/ui/elements/Actions.tsx
index 2fa1bc4313c..fcb2d339f61 100644
--- a/packages/clerk-js/src/ui/elements/Actions.tsx
+++ b/packages/clerk-js/src/ui/elements/Actions.tsx
@@ -95,7 +95,7 @@ export const Action = (props: ActionProps) => {
         sx={theme => ({ flex: `0 0 ${theme.sizes.$11}` })}
       >
         {status.isLoading ? (
-          <Spinner size='sm' />
+          <Spinner size='xs' />
         ) : (
           <Icon
             elementDescriptor={iconElementDescriptor}
diff --git a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
index 3a660ac2885..696408c5ce7 100644
--- a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
+++ b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
@@ -73,18 +73,13 @@ 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
               elementDescriptor={spinnerElementDescriptor}
               elementId={spinnerElementId}
               size={'md'}
-              sx={theme => [
-                {
-                  padding: theme.space.$2,
-                },
-              ]}
             />
           ) : !isIconElement && leftIcon ? (
             <Icon
@@ -94,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,
diff --git a/packages/clerk-js/src/ui/elements/SocialButtons.tsx b/packages/clerk-js/src/ui/elements/SocialButtons.tsx
index 210a83a05f6..a267a383a1a 100644
--- a/packages/clerk-js/src/ui/elements/SocialButtons.tsx
+++ b/packages/clerk-js/src/ui/elements/SocialButtons.tsx
@@ -84,7 +84,7 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
               isDisabled={card.isLoading}
               src={strategyToDisplayData[strategy].iconUrl}
               alt={`Sign in with ${strategyToDisplayData[strategy].name}`}
-              sx={theme => ({ width: theme.sizes.$5 })}
+              sx={theme => ({ width: theme.sizes.$5, height: 'auto', maxWidth: '100%' })}
             />
           }
         />
diff --git a/packages/clerk-js/src/ui/primitives/Spinner.tsx b/packages/clerk-js/src/ui/primitives/Spinner.tsx
index 02c0d98c786..df9877056f7 100644
--- a/packages/clerk-js/src/ui/primitives/Spinner.tsx
+++ b/packages/clerk-js/src/ui/primitives/Spinner.tsx
@@ -37,8 +37,9 @@ const { applyVariants, filterProps } = createVariants(theme => {
         md: { [thickness]: theme.sizes.$1 },
       },
       size: {
-        sm: { [size]: theme.sizes.$3 },
-        md: { [size]: theme.sizes.$4 },
+        xs: { [size]: theme.sizes.$3 },
+        sm: { [size]: theme.sizes.$4 },
+        md: { [size]: theme.sizes.$5 },
         lg: { [size]: theme.sizes.$6 },
         xl: { [size]: theme.sizes.$8 },
       },
@@ -50,7 +51,7 @@ const { applyVariants, filterProps } = createVariants(theme => {
     defaultVariants: {
       speed: 'normal',
       thickness: 'sm',
-      size: 'md',
+      size: 'sm',
     },
   };
 });