diff --git a/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx
index dd5c602150..28c680b824 100644
--- a/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx
@@ -1,17 +1,25 @@
-import { Tooltip } from '@chakra-ui/react';
+import { FormControl, FormLabel, Tooltip } from '@chakra-ui/react';
 import { MultiSelect, MultiSelectProps } from '@mantine/core';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
 import { useMantineMultiSelectStyles } from 'mantine-theme/hooks/useMantineMultiSelectStyles';
 import { KeyboardEvent, RefObject, memo, useCallback } from 'react';
 
-type IAIMultiSelectProps = MultiSelectProps & {
+type IAIMultiSelectProps = Omit<MultiSelectProps, 'label'> & {
   tooltip?: string;
   inputRef?: RefObject<HTMLInputElement>;
+  label?: string;
 };
 
 const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
-  const { searchable = true, tooltip, inputRef, ...rest } = props;
+  const {
+    searchable = true,
+    tooltip,
+    inputRef,
+    label,
+    disabled,
+    ...rest
+  } = props;
   const dispatch = useAppDispatch();
 
   const handleKeyDown = useCallback(
@@ -37,7 +45,15 @@ const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
   return (
     <Tooltip label={tooltip} placement="top" hasArrow isOpen={true}>
       <MultiSelect
+        label={
+          label ? (
+            <FormControl isDisabled={disabled}>
+              <FormLabel>{label}</FormLabel>
+            </FormControl>
+          ) : undefined
+        }
         ref={inputRef}
+        disabled={disabled}
         onKeyDown={handleKeyDown}
         onKeyUp={handleKeyUp}
         searchable={searchable}
diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSearchableSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSearchableSelect.tsx
index edf1665bb4..2c3f5434ad 100644
--- a/invokeai/frontend/web/src/common/components/IAIMantineSearchableSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineSearchableSelect.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from '@chakra-ui/react';
+import { FormControl, FormLabel, Tooltip } from '@chakra-ui/react';
 import { Select, SelectProps } from '@mantine/core';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
@@ -11,13 +11,22 @@ export type IAISelectDataType = {
   tooltip?: string;
 };
 
-type IAISelectProps = SelectProps & {
+type IAISelectProps = Omit<SelectProps, 'label'> & {
   tooltip?: string;
+  label?: string;
   inputRef?: RefObject<HTMLInputElement>;
 };
 
 const IAIMantineSearchableSelect = (props: IAISelectProps) => {
-  const { searchable = true, tooltip, inputRef, onChange, ...rest } = props;
+  const {
+    searchable = true,
+    tooltip,
+    inputRef,
+    onChange,
+    label,
+    disabled,
+    ...rest
+  } = props;
   const dispatch = useAppDispatch();
 
   const [searchValue, setSearchValue] = useState('');
@@ -61,6 +70,14 @@ const IAIMantineSearchableSelect = (props: IAISelectProps) => {
     <Tooltip label={tooltip} placement="top" hasArrow>
       <Select
         ref={inputRef}
+        label={
+          label ? (
+            <FormControl isDisabled={disabled}>
+              <FormLabel>{label}</FormLabel>
+            </FormControl>
+          ) : undefined
+        }
+        disabled={disabled}
         searchValue={searchValue}
         onSearchChange={setSearchValue}
         onChange={handleChange}
diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
index 61d902a03d..fa9b0b6719 100644
--- a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from '@chakra-ui/react';
+import { FormControl, FormLabel, Tooltip } from '@chakra-ui/react';
 import { Select, SelectProps } from '@mantine/core';
 import { useMantineSelectStyles } from 'mantine-theme/hooks/useMantineSelectStyles';
 import { RefObject, memo } from 'react';
@@ -9,19 +9,32 @@ export type IAISelectDataType = {
   tooltip?: string;
 };
 
-type IAISelectProps = SelectProps & {
+type IAISelectProps = Omit<SelectProps, 'label'> & {
   tooltip?: string;
   inputRef?: RefObject<HTMLInputElement>;
+  label?: string;
 };
 
 const IAIMantineSelect = (props: IAISelectProps) => {
-  const { tooltip, inputRef, ...rest } = props;
+  const { tooltip, inputRef, label, disabled, ...rest } = props;
 
   const styles = useMantineSelectStyles();
 
   return (
     <Tooltip label={tooltip} placement="top" hasArrow>
-      <Select ref={inputRef} styles={styles} {...rest} />
+      <Select
+        label={
+          label ? (
+            <FormControl isDisabled={disabled}>
+              <FormLabel>{label}</FormLabel>
+            </FormControl>
+          ) : undefined
+        }
+        disabled={disabled}
+        ref={inputRef}
+        styles={styles}
+        {...rest}
+      />
     </Tooltip>
   );
 };
diff --git a/invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx b/invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx
index 82398a7483..96bb28bd65 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx
@@ -187,15 +187,14 @@ const ControlNet = (props: ControlNetProps) => {
       {isExpanded && (
         <>
           <ParamControlNetControlMode controlNetId={controlNetId} />
-          <ParamControlNetProcessorSelect controlNetId={controlNetId} />
-          <ParamControlNetShouldAutoConfig controlNetId={controlNetId} />
-
           <Box mt={2}>
             <ControlNetImagePreview
               controlNetId={controlNetId}
               height="392px"
             />
           </Box>
+          <ParamControlNetShouldAutoConfig controlNetId={controlNetId} />
+          <ParamControlNetProcessorSelect controlNetId={controlNetId} />
           <ControlNetProcessorComponent controlNetId={controlNetId} />
         </>
       )}
diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetControlMode.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetControlMode.tsx
index a1eff1263a..e2995cf993 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetControlMode.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetControlMode.tsx
@@ -54,7 +54,7 @@ export default function ParamControlNetControlMode(
   return (
     <IAIMantineSelect
       disabled={!isEnabled}
-      label={t('parameters.controlNetControlMode')}
+      label="Control Mode"
       data={CONTROL_MODE_DATA}
       value={String(controlMode)}
       onChange={handleControlModeChange}
diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
index 83c66363ac..8bd28f813c 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
@@ -13,6 +13,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { CONTROLNET_PROCESSORS } from '../../store/constants';
 import { controlNetProcessorTypeChanged } from '../../store/controlNetSlice';
 import { ControlNetProcessorType } from '../../store/types';
+import { FormControl, FormLabel } from '@chakra-ui/react';
 
 type ParamControlNetProcessorSelectProps = {
   controlNetId: string;