diff --git a/.changeset/sharp-ads-sit.md b/.changeset/sharp-ads-sit.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/sharp-ads-sit.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
index 35bbdafb1f..20a1b40780 100644
--- a/packages/ui/src/components/sign-in/sign-in.tsx
+++ b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -570,10 +570,13 @@ export function SignInComponentLoaded() {
                             resend
                             // eslint-disable-next-line react/no-unstable-nested-components
                             fallback={({ resendableAfter }) => (
-                              <p className='text-gray-11 border border-transparent px-2.5 py-1.5 text-center text-base font-medium'>
+                              <LinkButton
+                                type='button'
+                                disabled
+                              >
                                 {t('signIn.emailCode.resendButton')} (
                                 <span className='tabular-nums'>{resendableAfter}</span>)
-                              </p>
+                              </LinkButton>
                             )}
                           >
                             <LinkButton type='button'>{t('signIn.emailCode.resendButton')}</LinkButton>
@@ -655,10 +658,13 @@ export function SignInComponentLoaded() {
                             resend
                             // eslint-disable-next-line react/no-unstable-nested-components
                             fallback={({ resendableAfter }) => (
-                              <p className='text-gray-11 border border-transparent px-2.5 py-1.5 text-center text-base font-medium'>
+                              <LinkButton
+                                type='button'
+                                disabled
+                              >
                                 {t('signIn.phoneCode.resendButton')} (
                                 <span className='tabular-nums'>{resendableAfter}</span>)
-                              </p>
+                              </LinkButton>
                             )}
                           >
                             <LinkButton type='button'>{t('signIn.phoneCode.resendButton')}</LinkButton>
@@ -737,10 +743,13 @@ export function SignInComponentLoaded() {
                         resend
                         // eslint-disable-next-line react/no-unstable-nested-components
                         fallback={({ resendableAfter }) => (
-                          <p className='text-gray-11 border border-transparent px-2.5 py-1.5 text-center text-base font-medium'>
+                          <LinkButton
+                            type='button'
+                            disabled
+                          >
                             {t('signIn.emailLink.resendButton')} (
                             <span className='tabular-nums'>{resendableAfter}</span>)
-                          </p>
+                          </LinkButton>
                         )}
                       >
                         <LinkButton type='button'>{t('signIn.emailLink.resendButton')}</LinkButton>
@@ -777,10 +786,13 @@ export function SignInComponentLoaded() {
                             resend
                             // eslint-disable-next-line react/no-unstable-nested-components
                             fallback={({ resendableAfter }) => (
-                              <p className='text-gray-11 border border-transparent px-2.5 py-1.5 text-center text-base font-medium'>
+                              <LinkButton
+                                type='button'
+                                disabled
+                              >
                                 {t('signIn.phoneCode.resendButton')} (
                                 <span className='tabular-nums'>{resendableAfter}</span>)
-                              </p>
+                              </LinkButton>
                             )}
                           >
                             <LinkButton type='button'>{t('signIn.phoneCode.resendButton')}</LinkButton>
diff --git a/packages/ui/src/components/sign-up/sign-up.tsx b/packages/ui/src/components/sign-up/sign-up.tsx
index a3e35d304c..cab532b790 100644
--- a/packages/ui/src/components/sign-up/sign-up.tsx
+++ b/packages/ui/src/components/sign-up/sign-up.tsx
@@ -214,18 +214,19 @@ function SignUpComponentLoaded() {
                       </Common.GlobalError>
                       <OTPField
                         disabled={isGlobalLoading}
-                        // TODO:
-                        // 1. Replace `button` with consolidated styles (tackled later)
                         resend={
                           <SignUp.Action
                             asChild
                             resend
                             // eslint-disable-next-line react/no-unstable-nested-components
                             fallback={({ resendableAfter }) => (
-                              <p className='text-gray-11 border border-transparent px-2.5 py-1.5 text-center text-base font-medium'>
+                              <LinkButton
+                                type='button'
+                                disabled
+                              >
                                 {t('signUp.phoneCode.resendButton')} (
                                 <span className='tabular-nums'>{resendableAfter}</span>)
-                              </p>
+                              </LinkButton>
                             )}
                           >
                             <LinkButton type='button'>{t('signUp.phoneCode.resendButton')}</LinkButton>
@@ -290,10 +291,13 @@ function SignUpComponentLoaded() {
                             resend
                             // eslint-disable-next-line react/no-unstable-nested-components
                             fallback={({ resendableAfter }) => (
-                              <p className='text-gray-11 border border-transparent px-2.5 py-1.5 text-center text-base font-medium'>
+                              <LinkButton
+                                type='button'
+                                disabled
+                              >
                                 {t('signUp.emailCode.resendButton')} (
                                 <span className='tabular-nums'>{resendableAfter}</span>)
-                              </p>
+                              </LinkButton>
                             )}
                           >
                             <LinkButton type='button'>{t('signUp.emailCode.resendButton')}</LinkButton>
@@ -360,10 +364,13 @@ function SignUpComponentLoaded() {
                         // eslint-disable-next-line react/no-unstable-nested-components
                         fallback={({ resendableAfter }) => {
                           return (
-                            <p className='text-gray-11 border border-transparent px-2.5 py-1.5 text-center text-base font-medium'>
+                            <LinkButton
+                              type='button'
+                              disabled
+                            >
                               {t('signUp.emailLink.resendButton')} (
                               <span className='tabular-nums'>{resendableAfter}</span>)
-                            </p>
+                            </LinkButton>
                           );
                         }}
                       >
diff --git a/packages/ui/src/primitives/card.tsx b/packages/ui/src/primitives/card.tsx
index 3459f928a3..5003be3413 100644
--- a/packages/ui/src/primitives/card.tsx
+++ b/packages/ui/src/primitives/card.tsx
@@ -174,7 +174,7 @@ export const Footer = React.forwardRef(function Footer(
       {children}
       {branded ? (
         <div className='grid place-content-center px-6 py-4'>
-          <p className='text-gray-a11 inline-flex items-center gap-x-1 text-sm'>
+          <p className='text-gray-a11 inline-flex items-center gap-x-1 text-sm font-medium'>
             Secured by{' '}
             <a
               aria-label='Clerk logo'
diff --git a/packages/ui/src/primitives/separator.tsx b/packages/ui/src/primitives/separator.tsx
index 16200d8f99..85af50974b 100644
--- a/packages/ui/src/primitives/separator.tsx
+++ b/packages/ui/src/primitives/separator.tsx
@@ -8,7 +8,7 @@ export const Separator = React.forwardRef<HTMLParagraphElement, React.HTMLAttrib
         ref={forwardedRef}
         {...props}
         className={cx(
-          'before:bg-gray-a6 after:bg-gray-a6 text-gray-a11 flex items-center gap-x-3 text-base before:h-px before:flex-1 after:h-px after:flex-1',
+          'before:bg-gray-a6 after:bg-gray-a6 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
           className,
         )}
       >