diff --git a/.changeset/early-forks-argue.md b/.changeset/early-forks-argue.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/early-forks-argue.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/fluffy-chicken-explain.md b/.changeset/fluffy-chicken-explain.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/fluffy-chicken-explain.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/hungry-news-bathe.md b/.changeset/hungry-news-bathe.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/hungry-news-bathe.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui.retheme/elements/Form.tsx b/packages/clerk-js/src/ui.retheme/elements/Form.tsx
index caa4bf0198..5286d3150b 100644
--- a/packages/clerk-js/src/ui.retheme/elements/Form.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/Form.tsx
@@ -79,7 +79,8 @@ const FormSubmit = (props: PropsOfComponent<typeof Button>) => {
     <Button
       elementDescriptor={descriptors.formButtonPrimary}
       block
-      textVariant='buttonExtraSmallBold'
+      hasArrow
+      textVariant='buttonSmallRegular'
       isLoading={isLoading}
       isDisabled={isDisabled}
       type='submit'
diff --git a/packages/clerk-js/src/ui.retheme/foundations/colors.ts b/packages/clerk-js/src/ui.retheme/foundations/colors.ts
index 6246c1bfa1..da67d55952 100644
--- a/packages/clerk-js/src/ui.retheme/foundations/colors.ts
+++ b/packages/clerk-js/src/ui.retheme/foundations/colors.ts
@@ -45,16 +45,16 @@ export const colors = Object.freeze({
   transparent: 'transparent',
   white: 'white',
   black: 'black',
-  primary50: '#f0f3ff',
-  primary100: '#d1dcff',
-  primary200: '#91A7F7',
-  primary300: '#6684F5',
-  primary400: '#3B62F2',
-  primary500: '#103FEF',
-  primary600: '#0D33BF',
-  primary700: '#0A268F',
-  primary800: '#07195F',
-  primary900: '#030D30',
+  primary50: '#F7F7F8',
+  primary100: '#EEEEF0',
+  primary200: '#D9D9DE',
+  primary300: '#B7B8C2',
+  primary400: '#9394A1',
+  primary500: '#747686',
+  primary600: '#5E5F6E',
+  primary700: '#42434D',
+  primary800: '#2F3037',
+  primary900: '#212126',
   danger50: '#FEF3F2',
   danger100: '#FEE4E2',
   danger200: '#FECDCA',
diff --git a/packages/clerk-js/src/ui.retheme/foundations/shadows.ts b/packages/clerk-js/src/ui.retheme/foundations/shadows.ts
index 203abda0e4..861cf4b13d 100644
--- a/packages/clerk-js/src/ui.retheme/foundations/shadows.ts
+++ b/packages/clerk-js/src/ui.retheme/foundations/shadows.ts
@@ -5,6 +5,8 @@ export const shadows = Object.freeze({
   fabShadow: '0px 12px 24px rgba(0, 0, 0, 0.32)',
   focusRing: '0 0 0 3px {{color}}',
   focusRingInput: '0 0 0 1px {{color}}',
+  buttonShadow:
+    '0px 0px 0px 1px {{color}}, 0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset, 0px 2px 3px 0px rgba(34, 42, 53, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.24)',
   shadowShimmer: '1px 1px 2px rgba(0, 0, 0, 0.36)',
   sm: '0 1px 1px 0 rgb(0 0 0 / 0.05)',
 } as const);
diff --git a/packages/clerk-js/src/ui.retheme/foundations/typography.ts b/packages/clerk-js/src/ui.retheme/foundations/typography.ts
index 44b90ffe3c..51786721a4 100644
--- a/packages/clerk-js/src/ui.retheme/foundations/typography.ts
+++ b/packages/clerk-js/src/ui.retheme/foundations/typography.ts
@@ -9,7 +9,7 @@ const lineHeights = Object.freeze({
   none: 1,
   shortest: 1.1,
   shorter: 1.25,
-  short: 1.375,
+  short: 1.385,
   base: 1.5,
   tall: 1.625,
   taller: 2,
diff --git a/packages/clerk-js/src/ui.retheme/icons/arrow-right-button.svg b/packages/clerk-js/src/ui.retheme/icons/arrow-right-button.svg
new file mode 100644
index 0000000000..86039b4c6f
--- /dev/null
+++ b/packages/clerk-js/src/ui.retheme/icons/arrow-right-button.svg
@@ -0,0 +1 @@
+<svg view-box='0 0 10 10'><path fill='currentColor' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m7.25 5-3.5-2.25v4.5L7.25 5Z'/></svg>
diff --git a/packages/clerk-js/src/ui.retheme/icons/index.ts b/packages/clerk-js/src/ui.retheme/icons/index.ts
index 2a49b1d086..24664ff9c8 100644
--- a/packages/clerk-js/src/ui.retheme/icons/index.ts
+++ b/packages/clerk-js/src/ui.retheme/icons/index.ts
@@ -6,6 +6,7 @@
  */
 export { default as ArrowLeftIcon } from './arrow-left.svg';
 export { default as ArrowRightIcon } from './arrow-right.svg';
+export { default as ArrowRightButtonIcon } from './arrow-right-button.svg';
 export { default as AuthApp } from './auth-app.svg';
 export { default as Billing } from './billing.svg';
 export { default as Caret } from './caret.svg';
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Button.tsx b/packages/clerk-js/src/ui.retheme/primitives/Button.tsx
index 3163c2ebf7..fefb5e3b7b 100644
--- a/packages/clerk-js/src/ui.retheme/primitives/Button.tsx
+++ b/packages/clerk-js/src/ui.retheme/primitives/Button.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Icon } from '../customizables';
+import { ArrowRightButtonIcon } from '../icons';
 import type { PrimitiveProps, StyleVariants } from '../styledSystem';
 import { common, createCssVariables, createVariants } from '../styledSystem';
 import { colors } from '../utils';
@@ -21,6 +23,8 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
       backgroundColor: 'unset',
       color: 'currentColor',
       borderRadius: theme.radii.$md,
+      position: 'relative',
+      isolation: 'isolate',
       ...common.centeredFlex('inline-flex'),
       ...common.disabled(theme),
       transitionProperty: theme.transitionProperty.$common,
@@ -32,8 +36,8 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
         iconLg: { minHeight: theme.sizes.$14, width: theme.sizes.$14 },
         xs: { minHeight: theme.sizes.$1x5, padding: `${theme.space.$1x5} ${theme.space.$1x5}` },
         sm: {
-          minHeight: theme.sizes.$8,
-          padding: `${theme.space.$2} ${theme.space.$3x5}`,
+          minHeight: theme.sizes.$7,
+          padding: `${theme.space.$1x5} ${theme.space.$3x5}`,
         },
         md: {
           minHeight: theme.sizes.$9,
@@ -43,11 +47,11 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
       },
       colorScheme: {
         primary: {
-          [vars.accentLightest]: colors.setAlpha(theme.colors.$primary400, 0.3),
-          [vars.accentLighter]: colors.setAlpha(theme.colors.$primary500, 0.3),
-          [vars.accent]: theme.colors.$primary500,
-          [vars.accentDark]: theme.colors.$primary600,
-          [vars.accentDarker]: theme.colors.$primary700,
+          [vars.accentLightest]: colors.setAlpha(theme.colors.$primary400, 0.3), // TODO: once we have the new color palette
+          [vars.accentLighter]: colors.setAlpha(theme.colors.$primary800, 0.3), // WIP reference: Updated to new color palette; previously `$primary500`
+          [vars.accent]: theme.colors.$primary800, // WIP reference: Updated to new color palette; previously `$primary500`
+          [vars.accentDark]: theme.colors.$primary600, // TODO: once we have the new color palette
+          [vars.accentDarker]: theme.colors.$primary700, // TODO: once we have the new color palette
         },
         danger: {
           [vars.accentLightest]: colors.setAlpha(theme.colors.$danger400, 0.3),
@@ -69,9 +73,18 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
         solid: {
           backgroundColor: vars.accent,
           color: theme.colors.$colorTextOnPrimaryBackground,
-          '&:hover': { backgroundColor: vars.accentDark },
+          ...common.buttonShadow(theme),
+          // '&:hover': { backgroundColor: vars.accentDark }, // TODO: once we have the new color palette
           '&:focus': props.hoverAsFocus ? { backgroundColor: vars.accentDark } : undefined,
-          '&:active': { backgroundColor: vars.accentDarker },
+          // '&:active': { backgroundColor: vars.accentDarker }, // TODO: once we have the new color palette
+          ':after': {
+            position: 'absolute',
+            content: '""',
+            borderRadius: 'inherit',
+            zIndex: -1,
+            inset: 0,
+            background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%)',
+          },
         },
         outline: {
           border: theme.borders.$normal,
@@ -130,7 +143,7 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
       textVariant: 'buttonRegularRegular',
       colorScheme: 'primary',
       variant: 'solid',
-      size: 'md',
+      size: 'sm',
       focusRing: true,
     },
   };
@@ -141,6 +154,7 @@ type OwnProps = PrimitiveProps<'button'> & {
   isDisabled?: boolean;
   isActive?: boolean;
   hoverAsFocus?: boolean;
+  hasArrow?: boolean;
 };
 
 type ButtonProps = OwnProps & StyleVariants<typeof applyVariants>;
@@ -150,10 +164,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
   const {
     isLoading,
     isDisabled,
-
     hoverAsFocus,
     loadingText,
     children,
+    hasArrow,
     onClick: onClickProp,
     ...rest
   } = filterProps(parsedProps);
@@ -193,7 +207,25 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
           {loadingText || <span style={{ opacity: 0 }}>{children}</span>}
         </Flex>
       )}
-      {!isLoading && children}
+
+      {!isLoading && (
+        <Flex
+          align='center'
+          gap={2}
+        >
+          {children}
+          {hasArrow && (
+            <Icon
+              icon={ArrowRightButtonIcon}
+              sx={t => ({
+                width: t.sizes.$2x5,
+                height: t.sizes.$2x5,
+                opacity: t.opacity.$inactive,
+              })}
+            />
+          )}
+        </Flex>
+      )}
     </button>
   );
 });
diff --git a/packages/clerk-js/src/ui.retheme/styledSystem/common.ts b/packages/clerk-js/src/ui.retheme/styledSystem/common.ts
index 8471c70641..64b6fdfbca 100644
--- a/packages/clerk-js/src/ui.retheme/styledSystem/common.ts
+++ b/packages/clerk-js/src/ui.retheme/styledSystem/common.ts
@@ -4,6 +4,7 @@ const textVariants = (t: InternalTheme) => {
   const base = {
     WebkitFontSmoothing: t.options.$fontSmoothing,
     fontFamily: 'inherit',
+    letterSpacing: t.letterSpacings.$normal,
   };
 
   const smallRegular = {
@@ -84,6 +85,7 @@ const textVariants = (t: InternalTheme) => {
   const buttonSmallRegular = {
     ...smallRegular,
     fontFamily: t.fonts.$buttons,
+    lineHeight: t.lineHeights.$short,
   };
 
   const buttonRegularRegular = {
@@ -175,6 +177,10 @@ const focusRingInput = (t: InternalTheme, props?: any) => {
   } as const;
 };
 
+const buttonShadow = (t: InternalTheme) => {
+  return { boxShadow: t.shadows.$buttonShadow.replace('{{color}}', t.colors.$primary800) };
+};
+
 const disabled = (t: InternalTheme) => {
   return {
     '&:disabled,&[data-disabled]': {
@@ -218,6 +224,7 @@ export const common = {
   borderVariants,
   focusRing,
   focusRingInput,
+  buttonShadow,
   disabled,
   borderColor,
   centeredFlex,