diff --git a/packages/clerk-js/src/ui.retheme/customizables/index.ts b/packages/clerk-js/src/ui.retheme/customizables/index.ts
index 44c9620c0c..e73e91d9e7 100644
--- a/packages/clerk-js/src/ui.retheme/customizables/index.ts
+++ b/packages/clerk-js/src/ui.retheme/customizables/index.ts
@@ -25,13 +25,11 @@ export const SimpleButton = makeCustomizable(makeLocalizable(sanitizeDomProps(Pr
 export const Heading = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Heading)));
 export const Link = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Link)));
 export const Text = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Text)));
-
 export const Image = makeCustomizable(sanitizeDomProps(makeResponsive(Primitives.Image)));
 
 export const Alert = makeCustomizable(sanitizeDomProps(Primitives.Alert));
 export const AlertIcon = makeCustomizable(sanitizeDomProps(Primitives.AlertIcon));
 export const Input = makeCustomizable(sanitizeDomProps(Primitives.Input));
-export const FormControl = makeCustomizable(sanitizeDomProps(Primitives.FormControl));
 export const FormLabel = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.FormLabel)));
 export const FormErrorText = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.FormErrorText)));
 export const FormSuccessText = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.FormSuccessText)));
diff --git a/packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx b/packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx
index 4a3d842879..98a37cb080 100644
--- a/packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx
@@ -6,7 +6,6 @@ import type { LocalizationKey } from '../customizables';
 import {
   descriptors,
   Flex,
-  FormControl as FormControlPrim,
   FormLabel,
   Icon as IconCustomizable,
   Input,
@@ -33,44 +32,25 @@ type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placehol
 
 const Root = (props: PropsWithChildren<FormControlProps>) => {
   const card = useCardState();
-  const {
-    id,
-    isRequired,
-    sx,
-    setError,
-    setInfo,
-    setSuccess,
-    setWarning,
-    clearFeedback,
-    feedbackType,
-    feedback,
-    isFocused,
-  } = props;
+  const { children, feedbackType, feedback, isFocused, isDisabled: isDisabledProp, ...restProps } = props;
 
+  /**
+   * Debounce the feedback before passing it inside the provider.
+   */
   const { debounced: debouncedState } = useFormControlFeedback({ feedback, feedbackType, isFocused });
 
-  const isDisabled = props.isDisabled || card.isLoading;
+  const isDisabled = isDisabledProp || card.isLoading;
 
   return (
-    <FormFieldContextProvider {...{ ...props, isDisabled }}>
-      {/*Most of our primitives still depend on this provider.*/}
-      {/*TODO: In follow-up PRs these will be removed*/}
-      <FormControlPrim
-        elementDescriptor={descriptors.formField}
-        elementId={descriptors.formField.setId(id)}
-        id={id}
-        hasError={debouncedState.feedbackType === 'error'}
-        isDisabled={isDisabled}
-        isRequired={isRequired}
-        setError={setError}
-        setSuccess={setSuccess}
-        setWarning={setWarning}
-        setInfo={setInfo}
-        clearFeedback={clearFeedback}
-        sx={sx}
-      >
-        {props.children}
-      </FormControlPrim>
+    <FormFieldContextProvider
+      {...{
+        ...restProps,
+        isDisabled,
+        isFocused,
+        ...debouncedState,
+      }}
+    >
+      {children}
     </FormFieldContextProvider>
   );
 };
@@ -230,7 +210,7 @@ const PasswordInputElement = forwardRef<HTMLInputElement>((_, ref) => {
   ]);
 
   return (
-    // @ts-expect-error
+    // @ts-expect-error Typescript is complaining that `setError`, `setWarning` and the rest of feedback setters are not passed. We are clearly passing thing them from above.
     <PasswordInput
       ref={ref}
       elementDescriptor={descriptors.formFieldInput}
diff --git a/packages/clerk-js/src/ui.retheme/elements/Form.tsx b/packages/clerk-js/src/ui.retheme/elements/Form.tsx
index 19c15e0bd4..120371f433 100644
--- a/packages/clerk-js/src/ui.retheme/elements/Form.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/Form.tsx
@@ -10,7 +10,6 @@ import type { PropsOfComponent } from '../styledSystem';
 import type { OTPInputProps } from './CodeControl';
 import { useCardState } from './contexts';
 import { Field } from './FieldControl';
-import { FormControl } from './FormControl';
 
 const [FormState, useFormState] = createContextAndHook<{
   isLoading: boolean;
@@ -80,8 +79,7 @@ const FormSubmit = (props: PropsOfComponent<typeof Button>) => {
     <Button
       elementDescriptor={descriptors.formButtonPrimary}
       block
-      hasArrow
-      textVariant='buttonSmallRegular'
+      textVariant='buttonExtraSmallBold'
       isLoading={isLoading}
       isDisabled={isDisabled}
       type='submit'
@@ -119,7 +117,7 @@ const FormControlRow = (props: Omit<PropsOfComponent<typeof Flex>, 'elementId'>
   );
 };
 
-type CommonFieldRootProps = Omit<PropsOfComponent<typeof Field.Root>, 'children'>;
+type CommonFieldRootProps = Omit<PropsOfComponent<typeof Field.Root>, 'children' | 'elementDescriptor' | 'elementId'>;
 
 type CommonInputProps = CommonFieldRootProps & {
   isOptional?: boolean;
@@ -132,20 +130,27 @@ const CommonInputWrapper = (props: PropsWithChildren<CommonInputProps>) => {
   const { isOptional, icon, actionLabel, children, onActionClicked, ...fieldProps } = props;
   return (
     <Field.Root {...fieldProps}>
-      <Field.LabelRow>
-        <Field.Label />
-        <Field.LabelIcon icon={icon} />
-        {!actionLabel && isOptional && <Field.AsOptional />}
-        {actionLabel && (
-          <Field.Action
-            localizationKey={actionLabel}
-            onClick={onActionClicked}
-          />
-        )}
-        <Field.Action />
-      </Field.LabelRow>
-      {children}
-      <Field.Feedback />
+      <Flex
+        direction='col'
+        elementDescriptor={descriptors.formField}
+        elementId={descriptors.formField.setId(fieldProps.id)}
+        sx={{ position: 'relative', flex: '1 1 auto' }}
+      >
+        <Field.LabelRow>
+          <Field.Label />
+          <Field.LabelIcon icon={icon} />
+          {!actionLabel && isOptional && <Field.AsOptional />}
+          {actionLabel && (
+            <Field.Action
+              localizationKey={actionLabel}
+              onClick={onActionClicked}
+            />
+          )}
+          <Field.Action />
+        </Field.LabelRow>
+        {children}
+        <Field.Feedback />
+      </Flex>
     </Field.Root>
   );
 };
@@ -195,6 +200,7 @@ const Checkbox = (
 ) => {
   return (
     <Field.Root {...props}>
+      {/*TODO: Create a descriptor for Checkbox wrapper*/}
       <Flex align='start'>
         <Field.CheckboxIndicator />
         <Field.CheckboxLabel description={props.description} />
@@ -235,6 +241,7 @@ const OTPInput = (props: OTPInputProps) => {
     // @ts-ignore
     <Field.Root {...restInputProps}>
       <Field.OTPRoot {...props}>
+        {/*TODO: Create a descriptor for OTP wrapper*/}
         <Col
           elementDescriptor={descriptors.form}
           gap={2}
@@ -264,10 +271,6 @@ const OTPInput = (props: OTPInputProps) => {
 export const Form = {
   Root: FormRoot,
   ControlRow: FormControlRow,
-  /**
-   * @deprecated Use Form.PlainInput
-   */
-  Control: FormControl,
   PlainInput,
   PasswordInput,
   PhoneInput,
diff --git a/packages/clerk-js/src/ui.retheme/elements/FormControl.tsx b/packages/clerk-js/src/ui.retheme/elements/FormControl.tsx
index 228e943801..0ed11133c5 100644
--- a/packages/clerk-js/src/ui.retheme/elements/FormControl.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/FormControl.tsx
@@ -1,70 +1,12 @@
-import type { ClerkAPIError, FieldId } from '@clerk/types';
-import type { PropsWithChildren } from 'react';
-import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import type { FieldId } from '@clerk/types';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
-import type { LocalizationKey } from '../customizables';
-import {
-  Box,
-  descriptors,
-  Flex,
-  FormControl as FormControlPrim,
-  FormErrorText,
-  FormInfoText,
-  FormLabel,
-  FormSuccessText,
-  FormWarningText,
-  Icon as IconCustomizable,
-  Input,
-  Link,
-  localizationKeys,
-  Text,
-  useLocalizations,
-} from '../customizables';
+import { Box, descriptors, FormErrorText, FormInfoText, FormSuccessText, FormWarningText } from '../customizables';
 import type { ElementDescriptor } from '../customizables/elementDescriptors';
 import { usePrefersReducedMotion } from '../hooks';
-import { sanitizeInputProps } from '../primitives/hooks';
-import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
+import type { ThemableCssProp } from '../styledSystem';
 import { animations } from '../styledSystem';
-import type { FeedbackType } from '../utils';
-import { useFormControlFeedback } from '../utils';
-import { useCardState } from './contexts';
-import { PhoneInput } from './PhoneInput';
-
-type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placeholder'> & {
-  id: FieldId;
-  isRequired?: boolean;
-  isOptional?: boolean;
-  isFocused?: boolean;
-  onActionClicked?: React.MouseEventHandler;
-  isDisabled?: boolean;
-  label?: string | LocalizationKey;
-  placeholder?: string | LocalizationKey;
-  actionLabel?: string | LocalizationKey;
-  icon?: React.ComponentType;
-  setError: (error: string | ClerkAPIError | undefined) => void;
-  setWarning: (warning: string) => void;
-  setInfo: (info: string) => void;
-  setSuccess: (message: string) => void;
-  feedback: string;
-  feedbackType: FeedbackType;
-  clearFeedback: () => void;
-  hasPassedComplexity: boolean;
-  infoText?: string | LocalizationKey;
-};
-
-// TODO: Convert this into a Component?
-const getInputElementForType = ({ type }: { type: FormControlProps['type'] }) => {
-  const CustomInputs = {
-    tel: PhoneInput,
-  };
-
-  if (!type) {
-    return Input;
-  }
-
-  const customInput = type as keyof typeof CustomInputs;
-  return CustomInputs[customInput] || Input;
-};
+import type { FeedbackType, useFormControlFeedback } from '../utils';
 
 export function useFormTextAnimation() {
   const prefersReducedMotion = usePrefersReducedMotion();
@@ -236,156 +178,3 @@ export const FormFeedback = (props: FormFeedbackProps) => {
     </Box>
   );
 };
-
-export const FormControl = forwardRef<HTMLInputElement, PropsWithChildren<FormControlProps>>((props, ref) => {
-  const { t } = useLocalizations();
-  const card = useCardState();
-  const {
-    hasPassedComplexity,
-    infoText,
-    id,
-    isRequired,
-    isOptional,
-    isFocused,
-    label,
-    actionLabel,
-    onActionClicked,
-    sx,
-    placeholder,
-    icon,
-    setError,
-    setSuccess,
-    feedback,
-    feedbackType,
-    setWarning,
-    setInfo,
-    clearFeedback,
-    ...inputProps
-  } = props;
-
-  // @ts-expect-error This is because setHasPassedValidation is now missing from the inputProps Form.Control shall no longer be used for password fields.
-  const sanitizedInputProps = sanitizeInputProps(inputProps);
-  const isDisabled = props.isDisabled || card.isLoading;
-
-  const InputElement = getInputElementForType({
-    type: props.type,
-  });
-
-  const { debounced: debouncedState } = useFormControlFeedback({ feedback, feedbackType, isFocused });
-
-  const ActionLabel = actionLabel ? (
-    <Link
-      localizationKey={actionLabel}
-      elementDescriptor={descriptors.formFieldAction}
-      elementId={descriptors.formFieldLabel.setId(id)}
-      isDisabled={isDisabled}
-      colorScheme='primary'
-      onClick={e => {
-        e.preventDefault();
-        onActionClicked?.(e);
-      }}
-    >
-      {typeof actionLabel === 'string' ? actionLabel : undefined}
-    </Link>
-  ) : null;
-
-  const HintLabel =
-    isOptional && !actionLabel ? (
-      <Text
-        localizationKey={localizationKeys('formFieldHintText__optional')}
-        elementDescriptor={descriptors.formFieldHintText}
-        elementId={descriptors.formFieldHintText.setId(id)}
-        as='span'
-        colorScheme='neutral'
-        variant='smallRegular'
-        isDisabled={isDisabled}
-      />
-    ) : null;
-
-  // TODO: This is a temporary fix. Replace this when the tooltip component is introduced
-  const Icon = icon ? (
-    <Flex
-      as={'span'}
-      title={t(localizationKeys('formFieldHintText__slug'))}
-    >
-      <IconCustomizable
-        icon={icon}
-        sx={theme => ({
-          marginLeft: theme.space.$0x5,
-          color: theme.colors.$blackAlpha400,
-          width: theme.sizes.$4,
-          height: theme.sizes.$4,
-        })}
-      />
-    </Flex>
-  ) : null;
-
-  const FieldLabel = (
-    <FormLabel
-      localizationKey={typeof label === 'object' ? label : undefined}
-      elementDescriptor={descriptors.formFieldLabel}
-      elementId={descriptors.formFieldLabel.setId(id)}
-      hasError={debouncedState.feedbackType === 'error'}
-      isDisabled={isDisabled}
-      isRequired={isRequired}
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-      }}
-    >
-      {typeof label === 'string' ? label : undefined}
-    </FormLabel>
-  );
-
-  const Input = (
-    <InputElement
-      elementDescriptor={descriptors.formFieldInput}
-      elementId={descriptors.formFieldInput.setId(id)}
-      hasError={debouncedState.feedbackType === 'error'}
-      isDisabled={isDisabled}
-      isRequired={isRequired}
-      {...sanitizedInputProps}
-      ref={ref}
-      placeholder={t(placeholder)}
-    />
-  );
-
-  return (
-    <FormControlPrim
-      elementDescriptor={descriptors.formField}
-      elementId={descriptors.formField.setId(id)}
-      id={id}
-      hasError={debouncedState.feedbackType === 'error'}
-      isDisabled={isDisabled}
-      isRequired={isRequired}
-      setError={setError}
-      setSuccess={setSuccess}
-      setWarning={setWarning}
-      setInfo={setInfo}
-      clearFeedback={clearFeedback}
-      sx={sx}
-    >
-      <Flex
-        justify={icon ? 'start' : 'between'}
-        align='center'
-        elementDescriptor={descriptors.formFieldLabelRow}
-        elementId={descriptors.formFieldLabelRow.setId(id)}
-        sx={theme => ({
-          marginBottom: theme.space.$1,
-          marginLeft: 0,
-        })}
-      >
-        {FieldLabel}
-        {Icon}
-        {HintLabel}
-        {ActionLabel}
-      </Flex>
-      {Input}
-
-      <FormFeedback
-        {...debouncedState}
-        id={id}
-      />
-    </FormControlPrim>
-  );
-});
diff --git a/packages/clerk-js/src/ui.retheme/elements/__tests__/PlainInput.test.tsx b/packages/clerk-js/src/ui.retheme/elements/__tests__/PlainInput.test.tsx
index de6c28a21f..8020d3e189 100644
--- a/packages/clerk-js/src/ui.retheme/elements/__tests__/PlainInput.test.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/__tests__/PlainInput.test.tsx
@@ -29,28 +29,6 @@ const createField = (...params: Parameters<typeof useFormControl>) => {
   };
 };
 
-// TODO: Remove this once FormControl is no longer used
-const createFormControl = (...params: Parameters<typeof useFormControl>) => {
-  const MockFieldWrapper = withCardStateProvider((props: Partial<Parameters<typeof Form.PlainInput>[0]>) => {
-    const field = useFormControl(...params);
-
-    return (
-      <>
-        {/* @ts-ignore*/}
-        <Form.Control
-          {...field.props}
-          {...props}
-        />
-        <button onClick={() => field.setError('some error')}>set error</button>
-      </>
-    );
-  });
-
-  return {
-    Field: MockFieldWrapper,
-  };
-};
-
 describe('PlainInput', () => {
   it('renders the component', async () => {
     const { wrapper } = await createFixtures();
@@ -181,137 +159,3 @@ describe('PlainInput', () => {
     });
   });
 });
-
-/**
- * This tests ensure that the deprecated FormControl and PlainInput continue to behave the same and nothing broke during the refactoring.
- */
-describe('Form control as text', () => {
-  it('renders the component', async () => {
-    const { wrapper } = await createFixtures();
-    const { Field } = createFormControl('firstname', 'init value', {
-      type: 'text',
-      label: 'some label',
-      placeholder: 'some placeholder',
-    });
-
-    const { getByLabelText } = render(<Field />, { wrapper });
-    expect(getByLabelText('some label')).toHaveValue('init value');
-    expect(getByLabelText('some label')).toHaveAttribute('name', 'firstname');
-    expect(getByLabelText('some label')).toHaveAttribute('placeholder', 'some placeholder');
-    expect(getByLabelText('some label')).toHaveAttribute('type', 'text');
-    expect(getByLabelText('some label')).toHaveAttribute('id', 'firstname-field');
-    expect(getByLabelText('some label')).not.toHaveAttribute('disabled');
-    expect(getByLabelText('some label')).not.toHaveAttribute('required');
-    expect(getByLabelText('some label')).toHaveAttribute('aria-invalid', 'false');
-    expect(getByLabelText('some label')).toHaveAttribute('aria-describedby', '');
-    expect(getByLabelText('some label')).toHaveAttribute('aria-required', 'false');
-    expect(getByLabelText('some label')).toHaveAttribute('aria-disabled', 'false');
-  });
-
-  it('disabled', async () => {
-    const { wrapper } = await createFixtures();
-    const { Field } = createFormControl('firstname', 'init value', {
-      type: 'text',
-      label: 'some label',
-      placeholder: 'some placeholder',
-    });
-
-    const { getByLabelText } = render(<Field isDisabled />, { wrapper });
-    expect(getByLabelText('some label')).toHaveValue('init value');
-    expect(getByLabelText('some label')).toHaveAttribute('disabled');
-    expect(getByLabelText('some label')).toHaveAttribute('aria-disabled', 'true');
-  });
-
-  it('required', async () => {
-    const { wrapper } = await createFixtures();
-    const { Field } = createFormControl('firstname', 'init value', {
-      type: 'text',
-      label: 'some label',
-      placeholder: 'some placeholder',
-    });
-
-    const { getByLabelText, queryByText } = render(<Field isRequired />, { wrapper });
-    expect(getByLabelText('some label')).toHaveValue('init value');
-    expect(getByLabelText('some label')).toHaveAttribute('required');
-    expect(getByLabelText('some label')).toHaveAttribute('aria-required', 'true');
-    expect(queryByText(/optional/i)).not.toBeInTheDocument();
-  });
-
-  it('optional', async () => {
-    const { wrapper } = await createFixtures();
-    const { Field } = createFormControl('firstname', 'init value', {
-      type: 'text',
-      label: 'some label',
-      placeholder: 'some placeholder',
-    });
-
-    const { getByLabelText, getByText } = render(<Field isOptional />, { wrapper });
-    expect(getByLabelText('some label')).not.toHaveAttribute('required');
-    expect(getByLabelText('some label')).toHaveAttribute('aria-required', 'false');
-    expect(getByText(/optional/i)).toBeInTheDocument();
-  });
-
-  it('with icon', async () => {
-    const { wrapper } = await createFixtures();
-    const { Field } = createFormControl('firstname', 'init value', {
-      type: 'text',
-      label: 'some label',
-      placeholder: 'some placeholder',
-    });
-
-    const Icon = () => <img alt='this is an icon' />;
-
-    const { getByAltText } = render(<Field icon={Icon} />, { wrapper });
-    expect(getByAltText(/this is an icon/i)).toBeInTheDocument();
-  });
-
-  it('with action label', async () => {
-    const { wrapper } = await createFixtures();
-    const { Field } = createFormControl('firstname', 'init value', {
-      type: 'text',
-      label: 'some label',
-      placeholder: 'some placeholder',
-    });
-
-    const { getByRole } = render(<Field actionLabel={'take action'} />, { wrapper });
-    expect(getByRole('link', { name: /take action/i })).toBeInTheDocument();
-    expect(getByRole('link', { name: /take action/i })).not.toHaveAttribute('rel');
-    expect(getByRole('link', { name: /take action/i })).not.toHaveAttribute('target');
-    expect(getByRole('link', { name: /take action/i })).toHaveAttribute('href', '');
-  });
-
-  it('with error', async () => {
-    const { wrapper } = await createFixtures();
-    const { Field } = createFormControl('firstname', 'init value', {
-      type: 'text',
-      label: 'some label',
-      placeholder: 'some placeholder',
-    });
-
-    const { getByRole, getByLabelText, getByText } = render(<Field />, { wrapper });
-
-    await act(() => userEvent.click(getByRole('button', { name: /set error/i })));
-
-    await waitFor(() => {
-      expect(getByLabelText('some label')).toHaveAttribute('aria-invalid', 'true');
-      expect(getByLabelText('some label')).toHaveAttribute('aria-describedby', 'error-firstname');
-      expect(getByText('some error')).toBeInTheDocument();
-    });
-  });
-
-  it('with info', async () => {
-    const { wrapper } = await createFixtures();
-    const { Field } = createFormControl('firstname', 'init value', {
-      type: 'text',
-      label: 'some label',
-      placeholder: 'some placeholder',
-      infoText: 'some info',
-    });
-
-    const { getByLabelText, getByText } = render(<Field actionLabel={'take action'} />, { wrapper });
-    await act(() => fireEvent.focus(getByLabelText('some label')));
-    await waitFor(() => {
-      expect(getByText('some info')).toBeInTheDocument();
-    });
-  });
-});
diff --git a/packages/clerk-js/src/ui.retheme/primitives/FormControl.tsx b/packages/clerk-js/src/ui.retheme/primitives/FormControl.tsx
deleted file mode 100644
index 55dd23794d..0000000000
--- a/packages/clerk-js/src/ui.retheme/primitives/FormControl.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-
-import { Flex } from './Flex';
-import type { FormControlProps } from './hooks';
-import { FormControlContextProvider } from './hooks';
-
-/**
- * @deprecated Use Field.Root
- * Each controlled field should have their own UI wrapper.
- * Field.Root is just a Provider
- */
-export const FormControl = (props: React.PropsWithChildren<FormControlProps>) => {
-  const { hasError, id, isRequired, setError, setInfo, clearFeedback, setSuccess, setWarning, ...rest } = props;
-  return (
-    <Flex
-      direction='col'
-      {...rest}
-      css={{ position: 'relative', flex: '1 1 auto' }}
-    >
-      <FormControlContextProvider
-        {...{
-          hasError,
-          id,
-          isRequired,
-          setError,
-          setInfo,
-          clearFeedback,
-          setSuccess,
-          setWarning,
-        }}
-      >
-        {props.children}
-      </FormControlContextProvider>
-    </Flex>
-  );
-};
diff --git a/packages/clerk-js/src/ui.retheme/primitives/FormErrorText.tsx b/packages/clerk-js/src/ui.retheme/primitives/FormErrorText.tsx
index 69c94a29fe..39a723bc63 100644
--- a/packages/clerk-js/src/ui.retheme/primitives/FormErrorText.tsx
+++ b/packages/clerk-js/src/ui.retheme/primitives/FormErrorText.tsx
@@ -4,7 +4,7 @@ import { Icon } from '../customizables';
 import { ExclamationCircle } from '../icons';
 import type { StyleVariants } from '../styledSystem';
 import { animations, createVariants } from '../styledSystem';
-import { useFormControl } from './hooks';
+import { useFormField } from './hooks';
 import { Text } from './Text';
 
 const { applyVariants } = createVariants(theme => ({
@@ -23,7 +23,7 @@ const { applyVariants } = createVariants(theme => ({
 type FormErrorTextProps = React.PropsWithChildren<StyleVariants<typeof applyVariants>>;
 
 export const FormErrorText = forwardRef<HTMLElement, FormErrorTextProps>((props, ref) => {
-  const { hasError, errorMessageId } = useFormControl() || {};
+  const { hasError, errorMessageId } = useFormField() || {};
 
   if (!hasError && !props.children) {
     return null;
@@ -39,7 +39,7 @@ export const FormErrorText = forwardRef<HTMLElement, FormErrorTextProps>((props,
       aria-live='polite'
       id={errorMessageId}
       {...rest}
-      css={applyVariants(props) as any}
+      css={applyVariants(props)}
     >
       <Icon
         colorScheme={'danger'}
diff --git a/packages/clerk-js/src/ui.retheme/primitives/FormInfoText.tsx b/packages/clerk-js/src/ui.retheme/primitives/FormInfoText.tsx
index ad8e797b34..1f52eabfdd 100644
--- a/packages/clerk-js/src/ui.retheme/primitives/FormInfoText.tsx
+++ b/packages/clerk-js/src/ui.retheme/primitives/FormInfoText.tsx
@@ -2,11 +2,11 @@ import { forwardRef } from 'react';
 
 import type { FormTextProps } from './FormSuccessText';
 import { applyVariants } from './FormSuccessText';
-import { useFormControl } from './hooks';
+import { useFormField } from './hooks';
 import { Text } from './Text';
 
 export const FormInfoText = forwardRef<HTMLElement, FormTextProps>((props, ref) => {
-  const { hasError, errorMessageId } = useFormControl() || {};
+  const { hasError, errorMessageId } = useFormField() || {};
 
   if (!hasError && !props.children) {
     return null;
@@ -20,7 +20,7 @@ export const FormInfoText = forwardRef<HTMLElement, FormTextProps>((props, ref)
       aria-live='polite'
       id={errorMessageId}
       {...props}
-      css={applyVariants(props) as any}
+      css={applyVariants(props)}
     />
   );
 });
diff --git a/packages/clerk-js/src/ui.retheme/primitives/FormLabel.tsx b/packages/clerk-js/src/ui.retheme/primitives/FormLabel.tsx
index ad0ea381db..90e3f94b1a 100644
--- a/packages/clerk-js/src/ui.retheme/primitives/FormLabel.tsx
+++ b/packages/clerk-js/src/ui.retheme/primitives/FormLabel.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type { PrimitiveProps, RequiredProp, StateProps, StyleVariants } from '../styledSystem';
 import { common, createVariants } from '../styledSystem';
 import { applyDataStateProps } from './applyDataStateProps';
-import { useFormControl } from './hooks';
+import { useFormField } from './hooks';
 
 const { applyVariants } = createVariants(theme => ({
   base: {
@@ -19,13 +19,13 @@ type OwnProps = React.PropsWithChildren<StateProps>;
 type FormLabelProps = PrimitiveProps<'label'> & StyleVariants<typeof applyVariants> & OwnProps & RequiredProp;
 
 export const FormLabel = (props: FormLabelProps) => {
-  const { id } = useFormControl();
+  const { id: fieldHtmlId } = useFormField();
   const { isRequired, htmlFor: htmlForProp, ...rest } = props;
   return (
     <label
       {...applyDataStateProps(rest)}
-      htmlFor={htmlForProp ?? id}
-      css={applyVariants(props) as any}
+      htmlFor={htmlForProp ?? fieldHtmlId}
+      css={applyVariants(props)}
     >
       {props.children}
     </label>
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Input.tsx b/packages/clerk-js/src/ui.retheme/primitives/Input.tsx
index 8b9ae4b49a..f3d76ff158 100644
--- a/packages/clerk-js/src/ui.retheme/primitives/Input.tsx
+++ b/packages/clerk-js/src/ui.retheme/primitives/Input.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { PrimitiveProps, RequiredProp, StyleVariants } from '../styledSystem';
 import { common, createVariants, mqu } from '../styledSystem';
-import { useFormControl } from './hooks';
+import { useFormField } from './hooks';
 import { useInput } from './hooks/useInput';
 
 const { applyVariants, filterProps } = createVariants((theme, props) => ({
@@ -42,16 +42,16 @@ type OwnProps = {
 export type InputProps = PrimitiveProps<'input'> & StyleVariants<typeof applyVariants> & OwnProps & RequiredProp;
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  const formControlProps = useFormControl() || {};
+  const fieldControlProps = useFormField() || {};
   const propsWithoutVariants = filterProps({
     ...props,
-    hasError: props.hasError || formControlProps.hasError,
+    hasError: props.hasError || fieldControlProps.hasError,
   });
   const { onChange } = useInput(propsWithoutVariants.onChange);
   const { isDisabled, hasError, focusRing, isRequired, ...rest } = propsWithoutVariants;
-  const _disabled = isDisabled || formControlProps.isDisabled;
-  const _required = isRequired || formControlProps.isRequired;
-  const _hasError = hasError || formControlProps.hasError;
+  const _disabled = isDisabled || fieldControlProps.isDisabled;
+  const _required = isRequired || fieldControlProps.isRequired;
+  const _hasError = hasError || fieldControlProps.hasError;
 
   return (
     <input
@@ -60,12 +60,12 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref)
       onChange={onChange}
       disabled={isDisabled}
       required={_required}
-      id={props.id || formControlProps.id}
+      id={props.id || fieldControlProps.id}
       aria-invalid={_hasError}
-      aria-describedby={formControlProps.errorMessageId}
+      aria-describedby={fieldControlProps.errorMessageId}
       aria-required={_required}
       aria-disabled={_disabled}
-      css={applyVariants(propsWithoutVariants) as any}
+      css={applyVariants(propsWithoutVariants)}
     />
   );
 });
diff --git a/packages/clerk-js/src/ui.retheme/primitives/hooks/useFormControl.tsx b/packages/clerk-js/src/ui.retheme/primitives/hooks/useFormControl.tsx
index 12caafe294..97de7f0d7f 100644
--- a/packages/clerk-js/src/ui.retheme/primitives/hooks/useFormControl.tsx
+++ b/packages/clerk-js/src/ui.retheme/primitives/hooks/useFormControl.tsx
@@ -1,99 +1,26 @@
 import { createContextAndHook } from '@clerk/shared/react';
-import type { ClerkAPIError, FieldId } from '@clerk/types';
+import type { FieldId } from '@clerk/types';
 import React from 'react';
 
 import type { useFormControl as useFormControlUtil } from '../../utils/useFormControl';
 
-/**
- * @deprecated
- */
-export type FormControlProps = {
-  /**
-   * The custom `id` to use for the form control. This is passed directly to the form element (e.g, Input).
-   * - The form element (e.g. Input) gets the `id`
-   */
-  id: string;
-  isRequired?: boolean;
-  hasError?: boolean;
-  isDisabled?: boolean;
-  setError: (error: string | ClerkAPIError | undefined) => void;
-  setSuccess: (message: string) => void;
-  setWarning: (warning: string) => void;
-  setInfo: (info: string) => void;
-  clearFeedback: () => void;
-};
-
-/**
- * @deprecated
- */
-type FormControlContextValue = Required<FormControlProps> & { errorMessageId: string };
-
-/**
- * @deprecated Use FormFieldContextProvider
- */
-export const [FormControlContext, , useFormControl] =
-  createContextAndHook<FormControlContextValue>('FormControlContext');
-
-/**
- * @deprecated Use FormFieldContextProvider
- */
-export const FormControlContextProvider = (props: React.PropsWithChildren<FormControlProps>) => {
-  const {
-    id: propsId,
-    isRequired = false,
-    hasError = false,
-    isDisabled = false,
-    setError,
-    setSuccess,
-    setWarning,
-    setInfo,
-    clearFeedback,
-  } = props;
-  // TODO: This shouldnt be targettable
-  const id = `${propsId}-field`;
-  /**
-   * Track whether the `FormErrorText` has been rendered.
-   * We use this to append its id the `aria-describedby` of the `input`.
-   */
-  const errorMessageId = hasError ? `error-${propsId}` : '';
-  const value = React.useMemo(
-    () => ({
-      value: {
-        isRequired,
-        hasError,
-        id,
-        errorMessageId,
-        isDisabled,
-        setError,
-        setSuccess,
-        setWarning,
-        setInfo,
-        clearFeedback,
-      },
-    }),
-    [isRequired, hasError, id, errorMessageId, isDisabled, setError, setSuccess, setInfo, setWarning, clearFeedback],
-  );
-  return <FormControlContext.Provider value={value}>{props.children}</FormControlContext.Provider>;
-};
-
 type FormFieldProviderProps = ReturnType<typeof useFormControlUtil<FieldId>>['props'] & {
-  hasError?: boolean;
-  isDisabled?: boolean;
+  isDisabled: boolean;
 };
 
 type FormFieldContextValue = Omit<FormFieldProviderProps, 'id'> & {
   errorMessageId?: string;
   id?: string;
   fieldId?: FieldId;
+  hasError: boolean;
 };
-export const [FormFieldContext, useFormField] = createContextAndHook<FormFieldContextValue>('FormFieldContext');
+export const [FormFieldContext, , useFormField] = createContextAndHook<FormFieldContextValue>('FormFieldContext');
 
 export const FormFieldContextProvider = (props: React.PropsWithChildren<FormFieldProviderProps>) => {
   const {
     id: propsId,
     isRequired = false,
     isDisabled = false,
-    hasError = false,
     setError,
     setSuccess,
     setWarning,
@@ -101,11 +28,14 @@ export const FormFieldContextProvider = (props: React.PropsWithChildren<FormFiel
     setInfo,
     clearFeedback,
     children,
+    feedbackType,
     ...rest
   } = props;
+  // The following TODO existed beforehand, it is simply copied during the refactor
   // TODO: This shouldnt be targettable
   const id = `${propsId}-field`;
 
+  const hasError = feedbackType === 'error';
   /**
    * Track whether the `FormErrorText` has been rendered.
    * We use this to append its id the `aria-describedby` of the `input`.
@@ -125,6 +55,7 @@ export const FormFieldContextProvider = (props: React.PropsWithChildren<FormFiel
       setInfo,
       clearFeedback,
       setHasPassedComplexity,
+      feedbackType,
     }),
     [
       isRequired,
@@ -139,6 +70,7 @@ export const FormFieldContextProvider = (props: React.PropsWithChildren<FormFiel
       setInfo,
       clearFeedback,
       setHasPassedComplexity,
+      feedbackType,
     ],
   );
   return (
@@ -155,6 +87,11 @@ export const FormFieldContextProvider = (props: React.PropsWithChildren<FormFiel
   );
 };
 
+/**
+ * Each of our Form primitives depend on different custom props
+ * This utility filters out any props that will litter the DOM, but allows for exceptions when the `keep` param is used.
+ * This allows for maintainers to opt-in and only allow for specific props to be passed for each primitive.
+ */
 export const sanitizeInputProps = (
   obj: ReturnType<typeof useFormField>,
   keep?: (keyof ReturnType<typeof useFormField>)[],
diff --git a/packages/clerk-js/src/ui.retheme/primitives/index.ts b/packages/clerk-js/src/ui.retheme/primitives/index.ts
index fa81bf923f..445a2872f7 100644
--- a/packages/clerk-js/src/ui.retheme/primitives/index.ts
+++ b/packages/clerk-js/src/ui.retheme/primitives/index.ts
@@ -11,7 +11,6 @@ export * from './Image';
 export * from './Alert';
 export * from './AlertIcon';
 export * from './Input';
-export * from './FormControl';
 export * from './FormErrorText';
 export * from './FormInfoText';
 export * from './FormSuccessText';
diff --git a/packages/clerk-js/src/ui/primitives/Input.tsx b/packages/clerk-js/src/ui/primitives/Input.tsx
index 1c98e803d6..f3d76ff158 100644
--- a/packages/clerk-js/src/ui/primitives/Input.tsx
+++ b/packages/clerk-js/src/ui/primitives/Input.tsx
@@ -42,7 +42,6 @@ type OwnProps = {
 export type InputProps = PrimitiveProps<'input'> & StyleVariants<typeof applyVariants> & OwnProps & RequiredProp;
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  // const formControlProps = useFormControl() || {};
   const fieldControlProps = useFormField() || {};
   const propsWithoutVariants = filterProps({
     ...props,